/**************************************************************

   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: -80px;



  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: -100px;

}



#header img.right {

  position: absolute;

  z-index: 0;



  top: 0;

  right: 0;

}



#header img.balloons {

  position: absolute;

  z-index: 2;



  top: 70px;

  right: 400px;

}



#header img.space {

  position: absolute;

  z-index: 2;



  top: 40px;

  right: 0px;

}







/**************************************************************

   #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: 0px 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; 

}