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

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

  margin: 0 auto;

}



#content[id],

#width[id] {

  width: 95.15%;

  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: 15;

  padding: 5;

  font: 700 3em "trebuchet ms", serif;

  letter-spacing: -1px;

  /text-transform: lowercase;

  color: #247fe6;

}



#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;

}







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

   #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: #247fe6;

  border-top: 5px solid #000;

}



#mainMenu li a.last {

  margin-right: 0;

}









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

   .sideMenu: The side bar menu

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

ul.sideMenu {

  margin: 5px;

  padding: 5px;

  text-align: center;

  margin-top: 3em;

}



.sideMenu li {

  display: inline;

  /* Needed since IE fails when you give it list-style: none; */  

  list-style-image: url(foo.gif);

  font: 400 2em "agency fb", serif;

}



.sideMenu li a {

  display: block;

  margin: 0.5em 0;

  padding: 17px 0px;    

  text-decoration: none;

  color: #FFF;

  background-image: url(../images/button1.png);

  background-repeat: no-repeat;

  border: 1px solid transparent;



} 



.sideMenu li a:hover {

  color: #FFF;

  padding: 17px 0px; 

  background-image: url(../images/button2.png);

  background-repeat: no-repeat;

  border: 1px solid transparent;

}



/* Active menu item */

.sideMenu li.here {

  display: block;  

  padding: 5px;

  color: #247fe6;

  border: 1px solid #313d4c;

}



/* 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;  

}



.sideMenu li.here ul li a:hover {

  color: #9FF3FF;

  background: #5F5F5F url(../images/right.png) 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: 3em;

  background: #181e26;

  border: 1px solid #313d4c;

  padding-top: 10px;

  padding-bottom: 5px;

}



/* Sets the width of the footer content */

#footer #width {

  position: relative;

  z-index: 3;

  font-size: 0.85em;

}







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

   Width classes used by the site columns

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



.width100 {

  width: 100%;

}



.width75 {

	width: 70%;

	margin: 0px;

	float: right;

	height: auto;

}



.width25 {

  width: 280px;

}







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

   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-image: url(../images/fill.png);

  background-repeat: repeat;

  font: 400 1em "trebuchet ms", serif;

  border: 1px solid #313d4c;

  margin: 20px;

  padding: 10px;

}



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

   New Additions by Ogu

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

#menu {

  	margin: 5px;

  	padding: 5px;

  	text-align: center;

  	margin-top: 3em;

}



#menu ul {

	margin: 0;

	list-style: none;

}



#menu li {

  	display: inline;

  	/* Needed since IE fails when you give it list-style: none; */  

  	list-style-image: url(foo.gif);

  	font: 400 2em "agency fb", serif;

}





#menu li a {

  	display: inline;

  	margin: 0.5em 0;

  	padding: 5px 7px;    

  	text-decoration: none;

  	color: #FFF;

  	border: 1px solid #313d4c;

  	background-image: url(../images/fill.png);

  	ackground-repeat: repeat;

}



#menu li a:hover {

  	color: #FFF;

  	padding: 5px 7px; 

  	border: 1px solid #313d4c;

	background-image: url(../images/fill2.png);

  	background-repeat: repeat;

}