/*
 * Clear margins and padding to ensure that everything is tight to the top left
 * corner of the viewport. Set overall background, and base font for the page.
 */
    
body
{
  margin: 0;
  padding: 0;
  background-color: black;
  font-family: 'Verdana','Gill Sans','Arial', 'san-serif'; 
  color: white; 
}

/*
 * Link styles
 */
 
a
{
  text-decoration: none;
  color: white;
  border-bottom: 1px dotted #6D7991;
}
a:hover
{
  text-decoration: none;
  color: white;
  border-bottom: 1px solid #6D7991;
}

a.silent
{
  text-decoration: none;
  border: none;
  color: white;
}
a.silent:hover
{
  text-decoration: none;
  border-bottom: 1px solid #6D7991;
  color: white;
} 

/*
 * Fix dimension of the container that holds the whole page. Auto margins 
 * centre the page container. Whether IE handles auto margins properly depends
 * on whether the HTML is defined via !DOCTYPE to be strict 4.01 or not.
 */  

#page
{
  width: 800px;
  margin: auto;
  border: 1px dotted white;
}

/*
 * Title container is filled and then the h1 styled to give some space around it.
 */ 

#title
{
  background-color: #203560;
  color: white;  
}

#title h1
{
  margin: 0;
  padding: 8px 0px 8px 5px;
  font-size: 130%;
}

/*
 * Picture container width is set to match the width of the images to make them
 * stack vertically, and then floated to the left
 */  

#picturebar
{
  float: left;
  width: 100px;
  margin: 0;
}

/*
 * When you have an objects floated to eg. the left, a "feature" of CSS
 * means that margins of objects to the right of the float actually sit
 * underneath the floated object. The next of this is that you can't move things
 * with the control that you expect using the left and right margins.
 * 
 * If you're using a float to create a vertical bar arrangement, and you don't
 * want the content to flow back to the left once below the bottom of the float
 * setting a margin equally to the width of the floated object gives you the
 * control that you need back.
 * 
 * Therefore we define a container who's only purpose is to set margins to 
 * allow for the dimensions of the picturebar      
 */
 
.picturebar-buffer
{
  margin: 0px 0px 0px 100px;
  padding: 0;
}

/*
 * Navbar container is filled and floated to the right and the h1 stytle to 
 * give some space around it.  
 */ 

#navbar
{
  float: right;
  width: 150px;
  margin: 0px 5px 10px 5px; 
  padding: 0 5px 0 5px;
  background: #5E697E; 
}

#navbar h1
{
  margin: 5px 0 5px 0;
  padding: 5px 0 5px 0;
  border-top: 1px dotted #FFFFFF;
  border-bottom: 1px dotted #FFFFFF;
  font-size: 110%;
}

/*
 * Formatting on the list item on the navbar are cleared.
 */ 

#navbar ul
{
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#navbar li 
{ 
  margin: 0 0 5px 0;
  font-size: 90%;
}

/*
 * Core of the navbar work is done on the anchor tags since we can use the
 * anchor pseudo-selectors to give the roll over effect.
 */  

#navbar a
{
  display: block;
  width: 140px;
  padding: 2px 5px 2px 5px;
  text-decoration: none;
  background-color: #203560;
  color: white;
}

#navbar a:hover
{
  background-color: #6D7991;
  color: #101A30;
}

/*
 * Simple styling for the main content area  
 */    

#main
{
  margin: 0px 5px 0px 5px;
  padding-top: 0px;
}

#main p
{
  font-size: 90%;
}

#main h1
{
  margin-top: 5px;
  margin-bottom: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-top: 1px dotted white;
  border-bottom: 1px dotted white;
  font-size: 110%;
}

/*
 * Keep the breadcrumb tight and small
 */
 
#breadcrumb
{
  margin: 0px 0px 0px 5px;
  padding: 5px 0px 5px 0px;
  font-size: 8px;
}

#breadcrumb a
{
  text-decoration: none;
  border: none;
  color: white;
}

#breadcrumb a:hover
{
  text-decoration: underline;
  border: none;
  color: white;
}

/*
 * To give a small bit of impact on the new class paragraphs add a simple dash
 * at the start of the lines. Obviously doesn't work like a real bullet since
 * it's straight text and so the indent on the second line doesn't respect it.
 * However keeping the new items as paragraphs gives us more options for
 * changing the look in the future.
 */     

p.new:before
{
  content: "- ";
}

p.new
{
  margin: 10px 0 10px 10px;
}

/*
 * Style the table used for the album list
 */
 
table.albums
{
  table-layout: fixed;
  width: 750px;
  margin: 5px 0px 0px 5px;
}  

col.thumbnail
{
  width: 89px;
}

td.thumbnail img
{
  margin: 0;
  padding: 0;
  width: 89px;
  border: none;
}

td.thumbnail a:link, td.thumbnail a:visited, td.thumbnail a:active 
{
  margin: 0;
  padding: 0;
  width: 89px;
  height: 89px;
  display: block;
  border: 1px dotted #6D7991;
}

td.thumbnail a:hover
{
  border: 1px solid #6D7991;
}

td.description
{
  font-size: 90%;
  padding: 3px 0px 3px 10px;
}

/*
 * Style the table used for the links list
 */

p.links
{
  margin: 5px 0px 5px 0px;
  font-size: 90%;
  background-color: #203560;
  color: white;
}
 
dl.links
{
  margin: 0px 0px 0px 15px;
} 
 
dl.links dt
{
  font-size: 90%;
  font-weight: bold;
} 
 
dl.links dd
{
  padding: 2px 0px 0px 0px;
  font-size: 85%;
} 

/*
 * On the footer container use the clear property to force it to always be below
 * the picturebar even on short pages.
 */  

#footer
{
  clear: both;
  margin: 25px 0px 0px 0px;
  padding: 2px 0px 2px 0px;
  background: #6D7991;
  color: #101A30;
  font-size: 85%;
  text-align: center;
}

#footer p
{
  margin: 0;
  padding: 0;
}