/************************************************************************ 
Wolfsburg West 3 column layout. Validated with Firefox and IE 5 or later
*************************************************************************/


/** Global **/
/* technique explained @ http://leftjustified.net/journal/2004/10/19/global-ws-reset/  */
* {
    margin:0;
    padding:0;
	}

h2 {
	font:bold 2em/1.4 Verdana, Arial, Helvetica, sans-serif;
	color:#8B9F86;
}
h3 {
	font:bold 2em/1.4 Verdana, Arial, Helvetica, sans-serif;
	color:#845697;
}
/* links */
a {
	color:#4C53E0;
}
a:focus, a:hover, a:active {
	color:#EB8518;
}
/** end global **/

/* setting the base font size to 90% allows even scaling by the user while keeping font-size 'xx-small' legible */
body {
	font-size:90%;
	background: #E3E1CC;
	height: auto;
	float: left;
}
.psmall {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	padding: 2px;
}

/********
the #outer div is the key element to the flexibility of this design.
By setting maximum and minimum widths in 'em', whilst the width is set in '%', 
we effectively create the perfect combination of 'fluid' and 'elastic' layouts.
Javscript is used to add support for min/max width in IE

Any elements inside #outer that require a set width or horizontal margins/padding use the '%' unit for that value.
This means that regardless of what causes the #outer div to expand (font size or screen size), 
the content will seemlessly re-flow to fill that space.
*********/
#outer {
	margin:0 auto;
	width:94%;
	min-width:50em;
	max-width:60em;
}
	
/* float clearing - technique explained @ http://www.csscreator.com/attributes/containedfloat.php */
ul#nav:after, #outer:after, form:after, form div:after {
    content:".";
    display:block;
    visibility:hidden;
    clear:both;
    height:0;
}  
* html #nav, * html #content, * html form, * html form div {
	height:1%;
}

/** hiding of elements for assistive devices (screen readers etc) **/
ul#access, .off {
	position:absolute;
	left:-1000em;
	top:-1000em;
}
/* <hr />'s added to mark-up for browsers without CSS */
hr {display:none}

/** Title **/
#header {
	background:#E3E1CC url(../img/background.jpg);
	/*border: thin solid #999;*/
	padding-top: 10px;	
}
#header_img {
	position: absolute;
	left: 55%;
	top: 5px;
	height: 131px;
	width: 300px;
	background-image:  url(../img/wwimg/layout_art/bus_final.gif);
	background-repeat: no-repeat;
	z-index: 1;
	}

.header_bar {
	float:left;
	background-color: #4C4C4C;
	width: 100%;
	height: 10px;
	margin-bottom:25px;
	margin-top: 20px;	
	}	
#header_bar_content {
	position: relative;
	left: -2px;
	top: -2px;
	background-color: #969A57;  /* BDC282*/
	height: 10px;
  	}	


/** Content Containers **/
/** Reminder; 1em sets the font height to the default size on the browser. 1.5 sets the line height
to 1.5 times the height of the font  **/
#sub, #right {
	font: 1em/1.5 'Lucida Grande', arial, verdana, sans-serif;
	word-spacing:.1em;
	margin-bottom:1em;
}

/******
div#sub is an extra wrapper, which allows the center column to come first in the source. 
#sub is floated left, with #center -the content column- nested within and floated to the right.
concept from http://www.positioniseverything.net/piefecta-rigid.html
******/
#sub {
	width:76%;
	float:left;
	position:relative;
	line-height: normal;
	
}

#sub_left {
	width:35%;
	float:left;
	position:relative;
	z-index: 1000;
	margin: 0;
	/*line-height: normal;*/
	
}
/***
Containers should be named according to what they contain. not where they sit in the layout.
To make identifying each column more simple, I have named them according to their position.
***/

.center {
	float:right;
	width:64%;
	background-color: #4C4C4C;
}	
#menubar {
	background-color: #E3E1CC;
	width: 100%;
	padding: 1px;
	}
#menubar p {
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	color: #969A57;
	font-size: .7em;
}
#menubar_full {
	background-color: #E3E1CC;
	width: 100%;
	/*padding: 1px;*/
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin-bottom: 5px;
	color: #969A57;		
}		

#center_content {
	position: relative;
	left: -2px;
	top: -2px;
	padding: 9px;
	background-color: #FFF;
	border: 2px solid #969A57;
	min-height: 400px;
	height: 400px;
}	

.left {
	Float:left;
	width:100%;
	background-color: #4C4C4C;
	min-height: 371px;
	height: 371px;
	}	

#left_content {
	position: relative;
	left: -2px;
	top: -2px;
	/*padding: 2px;*/
	border: 2px solid #969A57;
	background-color: #FFF;
	min-height: 367px;
	height: 367px;
	z-index: 1000;	
	}	


.right {
	float:right;
	width:23%;
	background-color: #4C4C4C;
	min-height: 422px;
	height: 422px;
	text-align: center;
}	
#right_content {
	position: relative;
	left: -2px;
	top: -4px;
	border: 2px solid #969A57;
	background-color: #FFF;
	min-height: 418px;
	height: 418px;
	text-align: center;
	}	
 
 /** Main Col Contents **/
#center_content p {
	margin:.5em 2% .5em 0;
}
#center_content h1 {
	margin:.5em 2% .5em 0;
	font-size:1.2em;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	}
	
img.img-right {
	float:right;
}

img.img-left {
	float:left;
	}


/** Left Col Contents**/
#left h2 {
	color:#845697;
	font-size:1.5em;
}
#left p {
	font-size:.9em;
}

/** Right Col Contents **/

.column_divider {
	border-top:2px solid #969A57;
	background-repeat: repeat-x;
	margin-top: 3px;
	line-height: 2em;
	}	

#right_content {
	font-size:0.9em;
	margin-top: 2px;	
}
#right_content p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	padding: 2px;
}

#right_content h2 {
	font-size:1.0em;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 0px;
}


/** Forms **/

input.txt {
	width:98%;
	margin:1 auto .1em;
	/*border:2px solid #BDC282;*/
	border:2px solid #969A57;
	background:#fff;
	font-size: 0.8em;	
	padding:.1em;
}
input.btn {
	background:#BED2B8 url("../../img/btn_search.gif") repeat-x;
	padding:.1em;
	width:6em;
	color:#fff;
	font:bold .6em/1.4 Verdana, Georgia, Times, serif;
	cursor:pointer;
}
input:focus, input.focus {
	border-style:inset;
}

/* search */

.search {
	position: relative;
	width:100%;
	margin-bottom: 7px;
	left: -4px;
	top: -2px
	/*height: 40px;*/		
}

.search a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;		
}


/** Footer **/
.cleaner {
	content:".";
    display:block;
    visibility:hidden;
    clear:both;
    height:0;
	}	

.footer_bar {
	float: left;
	background-color: #4C4C4C;
	width: 100%;
	height: 26px;
	}	
#footer_bar_content {
	position: relative;
	left: -2px;
	top: -2px;
	background-color: #969A57;
	padding:3px;
	height: 16px;
	border: 2px solid #969A57;
	font-family: Arial, Helvetica, sans-serif;	
	}	

#footer_bar_content p {
	text-align:center;
	color: #E3E1CC;
}