/* Always start with body.index so the CSS from different pages can be mixed */

/* The box model is:
 *
 *   +------------------------------+
 *   |           Margin             |
 *   |  +------------------------+  |
 *   |  |        Border          |  |
 *   |  |  +------------------+  |  |
 *   |  |  |     Padding      |  |  |
 *   |  |  |  +------------+  |  |  |
 *   |  |  |  |  Content   |  |  |  |
 *   |  |  |  |            |  |  |  |
 *   |  |  |  +------------+  |  |  |
 *   |  |  +------------------+  |  |
 *   |  +------------------------+  |
 *   +------------------------------+
 *
 * Background colour affects padding and content.
 * The border has its own colour.
 * The margin is transparent - the background colour of the containing element show through.
 */

/* It is often possible to use the padding of a containing box to do the same job
   as the margin of the contained box. I prefer the former, because I find the way
   margins collapse is annoying to work with. So expect most margins to be zero. */

/* Warning: Konqueror may allow bare numbers for pixel counts (e.g. "20"), but this is
   an extension - Firefox sometimes requires the unit ("20px"). Only a "0" does not
   need "px" added */

body.index {
  margin: 0;                    /* Some browsers handle margins on the body differently */
  border: 0;
  width: 100%;                  /* Make the page the whole width of the window */
  background-color: Gray;       /* Outline colour of the page */
}

body.index div.page {
  margin: 10px;                 /* Margin around page */
  padding: 0;                   /* No padding as we want to specify a colour*/
}

body.index table.layout {
  width: 100%;                  /* Make the table the same width as the page */
}

body.index table, tr, td, div, span, h1, h2, h3, ul, li {
  padding: 0;                   /* Make the defaults all zero (no gaps) */
  margin: 0;
}

/** added for table class "tech"  **/
div.meat {
  padding: 20;
  border: 10;
  margin: 10;
}

body.index a {
  text-decoration: none;        /* No underlined links */
}

body.index img {
  border: 0;                    /* No borders on images */
}

/************************
 * Border colors for the four different sections
 ***********************/

body.index table.layout {
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
}

body.index table.layout td.header,
body.index table.layout td.left,
body.index table.layout td.right,
body.index table.layout td.footer {
  border-bottom: 1px solid black;
}

body.index table.layout td.left {
  border-right: 1px solid black;
}

/************************
 * Colours and layout for the header
 ***********************/

body.index td.contents {
   width: 20%; 
  text-align: center;
  background-color: #0000CD;
}

body.index td.header {
  text-align: center;
}

body.index td.header h1.title {
  background-color: white;
  padding: 15px;
  font-size: 200%;
  border-bottom: 1px solid black;
}

body.index td.header span.header {
  background-color: white;
  font-size: 200%;
  border-bottom: 1px solid black;
}
/* What the navigation bar looks like */

body.index td.header div.navigation {
  font-family: verdana, helvetica, sans-serif;
  word-spacing: -1em;
  background-color: aqua;
}

body.index td.header div.navigation a.button {
  color: blue;
  word-spacing: normal;
  padding-left: 1em;            /* Add padding to the left and right */
  padding-right: 1em;
  margin-left: -1px;            /* Shift left one pixel to make the left-right borders overlap */
  border: 1px solid black;
}

body.index td.header div.navigation a.button:hover {
  background-color: Blue;
  color: aqua;
}


/************************
 * Colours and layout for left column
 ***********************/

body.index td.left {
  width: 20%;
  background-color: #0000CD;
  text-align: center;
  vertical-align: top;
}


body.index td.left h2.heading {
  font-size: 110%;
}

body.index td.left div.contents {
  margin: 5px;
  background-color: #0000CD;
  /border: 1px solid black;/
  border-bottom: 0;
  padding: 5px;
  text-align: center;
}

body.index td.left div.contents ul.level li {
  list-style-type: none;
}

body.index td.left div.contents ul.level a.button                   { padding-left:  20px; }
body.index td.left div.contents ul.level ul.level a.button          { padding-left: 30px; }
body.index td.left div.contents ul.level ul.level ul.level a.button { padding-left: 40px; }

body.index td.left div.contents span.contents_title {
  display: block;
  font-size: 150%;
  color: #FFFF33;
  background: #0000CD;
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}



body.index td.left div.contents a.button {
  display: block;
  font-size: 115%;
  color: white;
  padding:  5px;
  background: #0000CD;
  text-align: left;
  border-bottom: 0px solid black;
}

body.index td.left div.contents a.button:hover {
  font-size: 115%;
  color: #0000CD;
  padding:  5px;
  text-align: left;
  background-color: white;
}

body.index td.left div.contents a.button:active,
body.index td.left div.contents a.button#this_page {
  font-size: 120%;
  color: White;
  background-color: blue;
}

/************************
 * Colours and layout for right column
 ***********************/

/* Directory links */

body.index td.right {
  background-color: white;
}

body.index td.right div.dir {
  border-bottom: 2px ridge black;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-right: 10%;
  margin-left: 10%;
}

body.index td.right div.dir a.dir {
  display: block;
  margin: 0px;
  padding: 10px;
  border: 1px dotted white;
}

body.index td.right div.dir a.dir:hover {
  border-color: black;
}

body.index td.right div.dir a.dir span.text {
  text-align: center;
  vertical-align: top;
}

body.index td.right div.dir a.dir span.odd {
  float: right;
  padding-left: 5px;
}

body.index td.right div.dir a.dir span.even {
  float: left;
  padding-right: 0px;
}

body.index td.right div.dir a.dir span.text span.name {
  display: block;
  font-size: 110%;
}

body.index td.right div.dir a.dir span.sep {
  display: block;
  height: 0px;
  clear: both;
}

/* Image thumbnail table */

body.index td.right table.thumbnails {
  margin: 5px;
  width: 100%;
}

body.index td.right table.thumbnails tr td {
  text-align: center;
  vertical-align: top;
}

body.index td.right table.thumbnails tr td a {
  display: block;
  margin: auto;
  width: 181px; /* 172 for thumbnail + 9 for left padding */
  border: 1px dotted white;
}

body.index td.right table.thumbnails tr td a:hover {
  border-color: black;
}

body.index td.right table.thumbnails tr td a img {
  padding-top: 9px;     /* Image already padding on right because of its shadow */
  padding-left: 9px;
}

body.index td.right table.thumbnails tr td a span.name {
  display: block;
  font-size: 110%;
}

/************************
 * Colours and layout for the footer
 ***********************/

body.index td.footer {
  background-color: #0066FF;
  text-align: center;
}

body.index div.footer {
  font-size: 80%;
}