/**************************************************************   AUTHOR:  Pat Heard (fullahead.org)   DATE:    2006.03.19   PURPOSE: Controls the layout of the site and styles            the menus **************************************************************/


/**************************************************************   #content: Sets the width of the site.  Make changes here             to convert to a fixed width site. **************************************************************/
#content {    height: 100%;  min-height: 100%;
  text-align: left;}
#content,#width {  /* max-width hack for IE since it doesn't understand the valid css property */  width: expression(document.body.clientWidth > 1000 ? "1000px" : "94%");    max-width: 1000px;  margin: 0 auto;}
#content[id],#width[id] {  width: 94%;  height: auto;}



/**************************************************************   #header: Holds the site title and header images **************************************************************/
#header {  position: relative;  height: 193px;}
/* Holds the site title and subtitle */#header #title {  position: absolute;  z-index: 3;  top: 10px;  left: 130px;
  padding: 5px;  text-align: right;}
#header h1 {  margin: 0;  padding: 0;
  font: 700 4em "trebuchet ms", serif;  letter-spacing: -3px;  text-transform: lowercase;  color: #FFF;}
#header h2 {  position: absolute;  top: 10px;  right: 5px;
  margin: 0;  padding: 0;
  font: 700 1em "trebuchet ms", serif;  text-transform: lowercase;  color: #00F0EC;}

/* Sets where the header images will go */#header img.left {  position: absolute;  z-index: 1;
  top: 0;  left: 0;}
#header img.right {  position: absolute;  z-index: 0;
  top: 0;  right: 0;}
#header img.balloons {  position: absolute;  z-index: 2;
  top: 70px;  right: 400px;}


/**************************************************************   #mainMenu: The top level site menu **************************************************************/
#mainMenu {   float: left;  width: 100%;  clear: both;  }
#mainMenu ul {  margin: 0;  padding: 0;}
#mainMenu li {  display: inline;  list-style: none;  margin: 0;  padding: 0;}
#mainMenu li a {  float: left;  margin: 0 2px;  padding: 5px 0.5em;
  font: 400 1.6em "trebuchet ms", serif;  text-decoration: none;  text-transform: lowercase;  color: #FFF;}
#mainMenu li a:hover,#mainMenu li a.here {  color: #65EBFF;  border-top: 5px solid #000;}
#mainMenu li a.last {  margin-right: 0;}



/**************************************************************   .sideMenu: The side bar menu **************************************************************/
ul.sideMenu {  margin: 0;  padding: 0;}
.sideMenu li {  display: inline;    /* Needed since IE fails when you give it list-style: none; */    list-style-image: url(foo.gif);  font: 400 1.3em "trebuchet ms", serif;}
.sideMenu li a {  display: block;  margin: 0.2em 0;  padding: 3px 5px;        text-decoration: none;  color: #FFF;} 
.sideMenu li a:hover {  color: #65EBFF;  background: #5F5F5F;}
/* Active menu item */.sideMenu li.here {  display: block;    padding: 5px;  color: #65EBFF;  background: #555;}
/* Submenu of active menu item */.sideMenu li.here ul {  margin: 0;  padding: 0;}
.sideMenu li.here ul li a {  padding-left: 35px;  font: 400 0.55em verdana, arial, sans-serif;   color: #FFF;    background: url(../images/bg/bullet.gif) no-repeat 10px 0px;}
.sideMenu li.here ul li a:hover {  color: #9FF3FF;  background: #5F5F5F url(../images/bg/bullet.gif) no-repeat 10px 0px;}


/**************************************************************   #page: Holds the main page content. **************************************************************/
#page {  float: left;  width: 100%;  clear: both;    padding-bottom: 4em;}



/**************************************************************   #footer: The page footer - will stick to the bottom if not            enough content. **************************************************************/
#footer {  float: left;  width: 100%;  clear: both;    margin-top: -3.8em;  background: #000 url(../images/bg/footer.jpg) repeat-x top left;}
/* Sets the width of the footer content */#footer #width {  position: relative;  z-index: 3;  font-size: 0.85em;  padding-top: 27px;}


/**************************************************************   Width classes used by the site columns **************************************************************/
.width100 {  width: 100%;}
.width75 {  width: 74%;}
.width50 {  width: 49.7%;}
.width33 {  width: 32.7%;}
.width25 {  width: 24.7%;}


/**************************************************************   Alignment classes **************************************************************/
.floatLeft {  float: left;}
.floatRight {  float: right;}
.alignLeft {  text-align: left;}
.alignRight {  text-align: right;}


/**************************************************************   Generic display classes **************************************************************/
.clear {  clear: both;}
.block {  display: block;}
.small {  font-size: 0.8em;}
.green {  color: #A1FF45;}
.red {  color: #EA1B00;}
.grey {  color: #666;}
.grey a {  color: #999;}
.grey a:hover {  color: #EEE;}
.gradient {  margin-bottom: 2em;  background: #555 url(../images/bg/gradient.jpg) repeat-x bottom left; }