/**
 * common stylesheet file for Website
 * @author      Greg Tammi <greg@pictographics.com>
 * @copyright   Copyright (c) 2009+ Pictographics Ltd
 * @since       April 23, 2009
 */

/** load reset code **/
* {
    margin: 0; padding: 0 ;
    border: 0 ;
    font-style: normal; font-weight: normal ;
}

strong { font-weight: bold ; }
em { font-style: italic ; }
u { text-decoration: underline ; }
   
div.clear { clear: both; height: 1%; }

html, body {
    color: #000 ;
    background: #666 ;
    font: 13px verdana, arial, tahoma, sans-serif ;
}
div#wrapper {
    position: relative ;
    z-index: 1 ;
    width: 900px ;
    margin: 15px auto ;
}

/** top navigation **/
#header ul#mainnav {
    position: relative ;
    z-index: 100 ;
    float: left;
    width: 650px ;
    margin: 6px 0 ;
}
#header ul#aboutnav {
    float: right ;
    width: 250px ;
    margin: 6px 0;
    text-align: right ;
}
.topnav li { 
    position: relative ;
    z-index: 1 ;
    display: inline ; 
}
.topnav li a {
    color: #d2d1d1 ;
    font: 11px verdana, sans-serif ;
    text-decoration: none; 
    border-left: 1px solid #fff ;
    padding: 0 9px ;
}
.topnav li.first a {  
    border-left: 0 ;
    padding-left: 0 ;
}
.topnav li a:hover {
    color: #fff ;
    text-decoration: underline ;
}
#mainnav ul.submenu {
    display: none ;
    position: absolute ;
    z-index: 500; 
    left: 0 ;
    top: 20px ;
    border: 1px solid #333 ;
    background: #efefef ;
    width: 200px ;
}
#mainnav ul li a {
    display: block ;
    padding: 4px ;
    color: #666 ;
}
#mainnav ul li a:hover {
    color: #666 ;
    text-decoration: underline ;
}    

/** content wrapper and paddding **/
div#content-wrapper {
  position: relative ;
  z-index: 1 ;
  float: left; 
  width: 900px ;
  border: 1px solid #000 ;
  background: #fff ;
  margin: 9px 0 18px 0;
}
#content-wrapper .gutter {
    position: relative ;
    z-index: 1 ;
    padding: 18px ;
}

/** content section for the colouring **/
#content a {
    color: #b43908 ;
    text-decoration: underline ;
}
#content a:hover {
    color: #00d045 ;
    text-decoration: underline ;
}

/** masthead **/
div#masthead {
  width: 864px ;
  height: 178px ;
  position: relative ;
  z-index: 1 ;
  background: url(/img/header_bg.jpg) 0 0 no-repeat ;
  color: #d2d2d2 ;
  
}
#masthead h1 {
    font: 34px helvetica, arial, tahoma, sans-serif ;
    position: absolute ;
    z-index: 1 ;
    right: 35px ;
    top: 10px ;
}
#masthead h2 {
    font: 17px helvetica, arial, tahoma, sans-serif ;
    position: absolute ;
    z-index: 1 ;
    right: 35px ;
    top: 46px ;
    text-transform: lowercase ;
}
#content {
    position: relative ;
    z-index: 1 ;
    color: #404040 ;
    font-size: 90% ;
}

/** footer **/
div#footer {
    float: left;
    width: 900px ;
    text-align: center ;
    font: 10px verdana, arial, sans-serif ;
    color: #d2d1d1 ;
}
#footer a {
    color: #d2d1d1 ;
    text-decoration: none ;
    font-weight: bold; 
}
#footer a:hover {
    font-weight: bold ;
    color: #fff ;
    text-decoration: none ;
}