html, body {
      margin: 0;
      padding: 0;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      color: #fff;
      height: 100%;
      font-size: 1.3em;
   }
	table {
	  border: 0;
	  margin: auto;
	  border-collapse: collapse;
	  text-align: center;
	  width: 100%;
	}
	table#table-top     { height: 75%; }
	#table-bottom       { height: 25%; }
	  #table-bottom tr  { height: 100%; }
	  #table-bottom td  { width: 21.41%;}


   #row1               { height: 67%; }
   #row2               { height: 8%; }
   #row1 td, #row2 td  { width: 14%;}

   #row1 .cell1, #row2 .cell7
      { background-color: #ccc;}

   #row1 .cell2
      { background-color: #ff0;} /* Yellow */

   #row1 .cell3, #row2 .cell5
      { background-color: #0ff;} /* Cyan */

   #row1 .cell7, #row2 .cell1
      { background-color: #00f;} /* Blue */

   #row1 .cell4
      { background-color: #0f0;} /* Green */

   #row1 .cell6
      { background-color: #f00;} /* Red */

   #row1 .cell5, #row2 .cell3
      { background-color: #f0f;} /* Magenta */

   #row2 .cell2, #row2 .cell4, #row2 .cell6, #table-bottom .cell4, #table-bottom .cell6, #table-bottom .cell8
      { background-color: #131313;} /* Grey Fill */

  #table-bottom .cell1 { background-color: #00214c;}
  #table-bottom .cell2 { background-color: #fff;}
  #table-bottom .cell3 { background-color: #3a007e;}
  #table-bottom .cell4 { width: 7.5%;}
  #table-bottom .cell5,
  #table-bottom .cell6,
  #table-bottom .cell7
  {
      width: 4.65%;
  }
  #table-bottom .cell5 { background-color: #090909;}
  #table-bottom .cell7 { background-color: #1d1d1d;}

  #floater {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
  }
   #floater img {
      margin: auto;
      margin-top: 10%;
   }