/* base settings for the whole page */
body {
  font-family: Arial, sans-serif;
  color: #cccccc;
  background-color: #333333;
  font-size: 1.15em;
# font-size: 0.95em; /* hack: seen only by IE */
  padding: 13.5pt;
}
a { color: #cccccc; text-decoration: none; }
a:link { color: inherit; text-decoration: none; }
a:visited { color: inherit }
a:hover { color: #d4e138 }

/* anything labeled with this 'selected' class label will turn yellow */
.selected {
/* color: #ccff33;*/
 color: #d4e138;
}

/* The "Fogbank" title's style (if displayed, is an image normally) */
h1 {
  font-size: 2em;
  margin-bottom: 0.3em;
  margin-top: 0pt;
  top: 0em;
}


/* Make sure images have no borders */
img { border: 0px; }

/* the "navbar" i.e. the menus. empty => use defaults */
div.navbar {
/* background: yellow; */
position: relative; /* this is here to ensure that absolute positions in child elements are relative to this one */
  height: 134px;
}

/* Main menu */
div.categories {
  min-width: 45em;
/*  background: orange; */
  height: 50px;
}
.navbar div.categories div {
  font-size: 1.2em;  
  font-weight: bold;
  display: inline;
  margin-right: 0.9em;
  letter-spacing: 1pt;
  line-height: 55px; 
}


/* Sub-menu */
div.subcategories {
  font-size: 12px;
  left: 0.0em;
  width: 14em;
/*  background: green; */
}
.navbar div.subcategories div {
/*  font-weight: bold */
}


/* Sub-sub-menu */
ul.subsubcategories {
  background: red;
  position: absolute; 
  top: 0px;
  margin: 0px;
}
/* style the lowest level menu items for (up to) a 6x3 grid 

   This is a bit tricky since we want the items to be ordered down
   and then across.  the most cross-platform way I've been able to think of
   doing this which doesn't impose too much on the markup itself is
   to index the items and position them absolutely.
*/
ul.subsubcategories li {
  font-size: 12px;
  width: 19em;
  margin: 0em;
  padding: 0em;
  position: absolute;
/*  background: blue; */
}
li.item-1, li.item-7, li.item-13 {
  top: 50px;
}
li.item-2, li.item-8, li.item-14 {
  top: 64px;
}
li.item-3, li.item-9, li.item-15 {
  top: 78px;
}
li.item-4, li.item-10, li.item-16 {
  top: 92px;
}
li.item-5, li.item-11, li.item-17 {
  top: 106px;
}
li.item-6, li.item-12, li.item-18 {
  top: 120px;
}
li.item-1,
li.item-2,
li.item-3,
li.item-4,
li.item-5,
li.item-6
{
  display: block;
  left: 17.7em;
}
li.item-7,
li.item-8,
li.item-9,
li.item-10,
li.item-11,
li.item-12
{
  display: block;
  left: 36.7em;
}
li.item-13,
li.item-14,
li.item-15,
li.item-16,
li.item-17,
li.item-18
{
  display: block;
  left: 55.7em;
}



/* style the content (i.e. text and images which change from page to page) */
div.content {
  border-top: 1px dotted #cccccc;
  margin-top: 1em;
  padding-top: 10px;
}

/* this styles the text box for the "blurb" */
div#blurb {
  width: 23em;
  float: left;
  left: 0;
  font-size: 12px;
  line-height: 1.2em;
  padding-top: 0px;
}
/* And the pararagraphs within it */
div#blurb p {
  margin: 0em 0em 1em 0em;
}
div#blurb h1 {
  font-size: 1em;
  margin-bottom: 0.8em;
}
div#blurb h2 {
  font-size: 1em;
  margin-left: 2em;
  margin-bottom: 0.5em;
}
div#blurb h3 {
  font-size: 1em;
  font-weight: normal;
  margin-left: 2em;
  margin-bottom: 0.5em;
}
div#blurb ul {
}
/* This styles the images box */
div#images {
  position: absolute;
  left: 20em;
  margin: 0em 3em 1em 0em;
  padding: 0px;
}
/* and the images themselves */
div#images img {
  margin-bottom: 10px;
}


/* and the "sibling index" box with prev/next links etc. */
div#index {
  height: 2.4em; /* stop the box from collapsing to nothing when it is empty */
}
div.sibling-index {
  padding-top: 0px;
  font-size: 12px;
  height: 2em;
  width: 300px; /* stop the numbers wrapping if the image is small or nonexistant */
}
span.siblings {
  position: absolute;
  left: 0;
  word-spacing: 0.05em;
}
span.previous-sibling {
  position: relative;
  top: 1em;
  margin-right: 0.5em;
}
span.next-sibling {
  position: relative;
  top: 1em;
}