/*
CSS stylings for layout
*/


/**************************************************************
   #container: To set the min-width command
 **************************************************************/

#container{
  height: auto;
}

 
/**************************************************************
   #header: Holds the site title and header images and navigation
	 * bar
 **************************************************************/

#header-wrapper {
	height: auto;
	padding: 0;
}

#header {
	width: 900px;
	height: 30px;
	margin: auto;
}

/* Holds the site title and subtitle */
#title{
  height: 30px;
  float: left;
}

#logo{
  height: 25px;
  margin-top: 5px;
}

#stitle{
  height: 30px;
  float: right;
}

#nav{
  font-size: 18px;  
  margin-top: 3px;
  font-weight: bold;
  color: black;
}

#nav li{
  margin: 0px 5px;
	display: inline;	
}

#nav a {
	text-decoration: none;
	color: black;
}

#nav a:hover{
  font-style: italic;
}

#nav a:active{ 
  font-style: italic;
}

/**************************************************************
   #content: Hold the main content of the site. Currently fixed
	 * width
 **************************************************************/
#content-wrapper{
	height: auto; 
}
 
#content {  
	width: 900px;
	margin: auto;
  min-height: 800px;
  height: auto;
	padding-top: 20px;
}
/* for Internet Explorer */
/*\*/
* html #content{
  height: 800px;
}

/* Currently fixed width
#content {
  max-width hack for IE since it doesn't understand the valid css property
  width: expression(document.body.clientWidth > 1200 ? "1200px" : "100%");  
  max-width: 1200px;
}
*/

/**************************************************************
   #page: Holds the main page content.
 **************************************************************/

#page {
  float: left;
  width: 100%;
  clear: both;
  padding-bottom: 40px;
}

#page-left{
  width: 580px;
  float:left;
	margin-right: 20px;
}

#page-right{
  width: 300px;
  float: left;
}


/**************************************************************
   #footer: The page footer - will stick to the bottom if not
            enough content.
 **************************************************************/

#footer-wrapper{
  height: auto;
  background-color: black;
	clear: both;
}

#footer{
	height: 25px;
  width: 900px;	
  margin: auto;
  padding-top: 7px;		
  font-size: 12px;
  font-weight: bold;
  color: white;		
}

#footer ul li {
  margin: 0px 5px;
	display: inline;	
}

#footer a {
	text-decoration: none;
	color: white;
}

#footer a:hover{
  font-style: italic;
}

#footer a:active{ 
  font-style: italic;
}

/**************************************************************
   Width classes used by the site columns
 **************************************************************/

.width100 {
  width: 100%;
}

.width75 {
  width: 74%;
}

.width70 {
  width: 69%;
}

.width67 {
  width: 66%;
}

.width50 {
  width: 49%;
}

.width33 {
  width: 32%;
}

.width30 {
  width: 29%;
}


/**************************************************************
   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: 11px;
}

.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; 
}