/*======================
RESET
========================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 12px;
font-family: Arial, Tahoma, Sans-Serif;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1.3;
color: black;
background: white;
text-align: centre;
background: #FFF url(/images/wsod/site_background.jpg) repeat;
padding: 0px 50px;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

/* slightly enhanced, universal clearfix hack */
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

/*======================
  HEADER
========================*/
/*
The container div is what sets the width of your content and centers it in the browser.
Each of your main divs will have a container div.
*/
.container
{
  margin:0 auto; /* Centers the div */
  width:960px; /*This is the width of your website */
  text-align:left;
}
/*
Notice that the width of header is set to 100%.
This is so that the background will extend to the edge of the browser.
*/
#header
{
  float:left;
  width: 100%;
}
/*
The a element (which is usually an inline element) gets changed to a block element
so that it can easily be positioned.
*/
#logo
{
  background:url(/images/wsod/header_top.png) no-repeat;
  display:block;
  position:relative;
  float:left;
  width:800px;
  height:215px;
}
#headerbottom
{
  background:url(/images/wsod/header_bottom.png) no-repeat;
  display:block;
  position:relative;
  float:left;
  width:800px;
  height:15px;
}
#topnavigation
{
  float:left;
  position:relative;
  margin: 20px 10px 10px 35px;
}
#topnavigation li
{
  float:left;
  margin: 0 12px 0 12px;
  padding:0;
  height:23px;
  list-style:none;
  line-height:1;
}
#topnavigation li a
{
  display:block;
  padding:4px 10px 5px 10px;
  font-size:14px;
  font-weight: bold;
  color:#000;
  text-decoration:none;
  vertical-align:middle;
}

/*======================
  MAIN
========================*/
/*
The width is also set to 100% because there is a background image
that we want to go to the edge. 

Notice that height isn't set for #main, this is because it will need to expand
with the content.
*/
#main
{
  float:left;
  width:100%;
}
/*
All this does is add the background that makes the content appear
to pop off the screen.
*/
#wrapper
{
  float:left;
  width:100%;
}
/*
This div sets the default height of your content and also adds a gray
background to the right column.
*/
#content
{
  float:left;
  width:600px;
  margin: 40px 0 0 10px;
  min-height:515px;
  height:auto !important; /* IE 6 min-height fix */
  height:515px; /* IE 6 min-height fix */
}

#sub-menu
{
  float:left;
  margin: 20px 20px 0 0;
  list-style: none;
  width:150px;
}
#sub-menu li.first
{
  background:url(/images/wsod/submenu_top.png) no-repeat;
  height: 35px; 
}
#sub-menu li.last
{
  background:url(/images/wsod/submenu_bottom.png) no-repeat;
  height: 70px; 
}
#sub-menu li
{
  margin: 0 12px 0 12px;
  padding:0;
  list-style:none;
  line-height:1;
}
#sub-menu li a
{
  display:block;
  padding:4px 10px 5px 10px;
  font-size:14px;
  font-weight: bold;
  color:#000;
  text-decoration:none;
  vertical-align:middle;
}

/*======================
  FOOTER
========================*/
/*
This adds the site bottom and makes it expand to the edge of the screen
like we did with #header and #main
*/
#footer
{
  background:url(/images/wsod/site_bottom.gif) repeat-x;
  float:left;
  width:100%;
  height:70px;
  padding-top:30px;
  font-size:12px;
  color:#000;
}
#footer_left
{
  float: left;
  margin: 10px;
}
#footerbar_left
{
  background: url(/images/wsod/footer_left.png) no-repeat;
  width: 276px;
  height: 15px;
}
#footer_centre
{
  background: url(/images/wsod/footer_centre.png) no-repeat;
  width: 207px;
  height: 87px;
  float: left;
  margin: 0 20px 0 20px;
}
#footer_right
{
  float: left;
  margin: 10px;
}
#footerbar_right
{
  background: url(/images/wsod/footer_right.png) no-repeat;
  width: 276px;
  height: 15px;
}

#footer_menu_left
{
  margin: 0 0 0 55px;
  padding:0;
  height: 43px;
}
#footer_menu_right
{
  margin: 0 0 0 10px;
  padding:0;
  height: 42px;
}
.menuBar li
{
  display:inline;
  list-style:none;
}
#footer #info
{
  font-size:10px;
  padding:6px;
}














/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */