/* GLM Stylesheet - August 2009 */

/* GENERIC ELEMENTS */
body {
  font-family:Calibri, Arial, sans-serif;
  color: gray;
  padding-left:150px; /* The menu is positioned in this padding using negative margins */
  }

a {
  color: black;
  text-decoration: none;
  }
/* END OF GENERIC ELEMENTS */

/* STANDARD PAGE ELEMENTS */

/* Banner at top of page, contains logo and table with contacts.  TODO: remove table */
#banner {
  height:100px;
  margin-left:-150px; /* Cancel out padding on body */
  margin-bottom:5px;
  }

#banner img {
  border:0;
  float:left;
  }
  
#banner #contact {
  float:right;
  height:100%;
  margin-right:25px;
  font-size:.8em;
  }

/* Main navigation menu at left hand side */
#menu {
  position:relative;
  float:left;
  display:inline; /* Might fix some of IE's insanity - ignored by other browsers */
  margin-top: 0;
  margin-left:-100%; /* Pulls the block across to the left of the text block */
  right:141px; /* Pulls the block into the padding of the body */
  width:115px;
  padding:0;
  list-style: none; /* Remove all bullets */
  }
  
#menu li a {
  text-align: center;
  display: block;
  width: 107px;
  border: 1px solid black;
  margin: 0;
  margin-bottom: 3px;
  padding: 3px;
  background: #D3D3D3; /* Light grey */
  }

#menu li a:hover {
  background: gray;
  }

/* This div contains the breadcrumbs, article etc. */
#container {
  float:left;
  display:inline;
  width:100%;
  }

/* Breadcrumb navigation bar - list of links formatted to run horizontally with chevrons between */
#breadcrumbs {
  padding:0px;
  margin:0px;
  height:25px;
  background: gray;
  border:0;
  text-align:left;
  }
  
#breadcrumbs li{
  display:inline;
  }
  
#breadcrumbs li>a{
  display:block;
  float:left;
  height: 21px;
  padding:2px;
  padding-left:20px;
  background: url(graphics/chevron) no-repeat;
  color:white;
  }

#breadcrumbs li>a:hover{
  color: black;
  }
  
#breadcrumbs #home{
  padding-left:10px;
  background: gray; /* No chevron on the first link - TODO: test "first-child" on this to simplify markup */
  }

/* Article div contains text, images etc */
#article {
  position:relative;
  text-align: center;
  border-right:2px solid #D3D3D3;
  margin-right:204px; /* Margin to hold small images */
  margin-top: 5px;
  }

/* Main text style - used inside article for most pages but also seperate on homepage etc. */
#text{
  text-align:justify;
  padding-left:35px;
  padding-right:35px;
  line-height:150%;
  }

/* Generic sub elements of 'text' */
#text h2 {
        margin-bottom:.2em;
        font-size:1.2em;
        }

#text cite {
        text-align:right;
        }

/* Main article image */
#mainimage{
  border:5px solid gray;
  padding:1px;
  max-height:500px;
  max-width:500px;
  }

/* Small images - list of links containing images */
#smallimages{
  display: block;
  position:absolute;
  top:0;
  right:-205px;
  margin:0;
  list-style:none;
  }
  
#smallimages img{
  border:2px solid white;
  width:195px;
  }

#smallimages a:hover img{
  border:2px solid gray;
  }

/* Footer - small text below article */
  #footer {
  clear:both;
  padding-left:35px;
  padding-top:15px;
  font-size:0.7em;
  color: gray;
  }

/* END OF STANDARD PAGE ELEMENTS */

#imagebox {
        height:200px;
        width:100%;
        overflow:hidden;
        position:relative;
        }

#imagebox img {
        float:left;
        height:200px;
        border:0;
        padding:0;
        margin:0;
  }

#subtitle {
  clear:both;
  padding-left:5px;
  margin:0px;
  margin-bottom:10px;
  height:25px;
  background: gray;
  color:white;
  border:0;
  text-align:left;
  }

.articleLink {
        display:block;
        text-align:left;
        margin:5px 35px 5px 80px;
        }

/*.articleLink:hover {
        background:#D3D3D3;
        }*/

.summary {
        float:left;
        width:100%;
        }

.summarytitle {
        font-weight:bold;
        }

.summarydate {
        float:right;
        font-weight:normal;
        color:gray;
        }

.summarytext {
        font-size:0.8em;
        color:gray;
        }

.summaryimage {
        float:left;
        position:relative;
        left:-60px;
        width:0px;
        }

.summaryimage img {
        max-width:50px;
        max-height:50px;
        border:0;
        }

.spacer {
        /*width:100%;*/
        clear:both;
        background:gray;
        }

#sections a {
        float:left;
        padding:15px;
        background:white;
        text-align:center;
        font-weight:bold;
        }

#sections a:hover {
        background:#D3D3D3;
        }

#sections img {
        display:block;
        border:0;
        padding-bottom:5px;
        }

#bigthumbs a {
        float:left;
        position:relative;
        background:white;
        opacity:1.0;
        filter:alpha(opacity=100);
        }

#bigthumbs a:hover {
        opacity:0.8;
        filter:alpha(opacity=80);
        }

#bigthumbs img {
        display:block;
        border:0;
        }

#bigthumbs a div {
        display:none;
        }

#bigthumbs a:hover div {
        display:block;
        position:absolute;
        bottom:0;
        background:white;
        opacity:0.5;
        filter:alpha(opacity=50);
        }