/************************************************************************ 
Wolfsburg West 2 column layout used on most other than the home page. 
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;
}

p { 	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	padding: 2px;
}
.psmall {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: .8em;
	padding: 2px;
}

.smalltext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.7em;
	padding: 0.5px;
	vertical-align:top;
	text-align: center;	
	 
}

.smalltext_left {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.7em;
	padding: 10px;
	vertical-align:top;
	text-align: left;	
	 
}

h2 {
	font-size:1.3em;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	/* color: #666600; */
}
.heading_green {
	font-size:1.5em;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	color: #969A57;	
}

h3 {
	font: 1em/1.4 Arial, Helvetica, sans-serif;
	font-weight: bold;
	/* color: #969A57; */
}
table {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 1em;
		padding: 2px;
		}
ol, ul {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	padding: 5px;
	text-align:left;
	margin-left: 20px;		
		}
/* 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;	
}

/********
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:70em;

}

/* 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(../wolfsburg_new/img/background.jpg);
	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;
	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:25%;  /* 25% */
	float:left;
	position:relative;
	z-index: 1000;
	/*line-height: normal;*/
	}

#menubar {
	background-color: #E3E1CC;
	width: 98%;
	padding: 1px;
	margin: 3px;
	
		}
#menubar a {
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	color: #969A57;
	font-size: 1em;
		}
		
#menubar p {
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	color: #969A57;
	font-size: 1em;
		}
		
#menubar_full {
	background-color: #E3E1CC;
	width: 100%;
	/*padding: 1px;*/
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin-bottom: 5px;
	color: #969A57;		
		}	
#bar_full {
	background-color: #969A57;
	padding: 1px;
	width: 100%;
	margin-top: 10px;	
	margin-bottom: 5px;
}						

#menubar_full_small {
	background-color: #E3E1CC;
	width: 100%;
	padding: .5px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin-bottom: .5px;
	color: #969A57;	
	font-size: .8em;
	text-align:center;
			}	
#menubar_full_small_red {
	background-color: #E3E1CC;
	width: 100%;
	padding: 0.5px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin-bottom: 0.5px;
	color: #FF0000;
	font-size: 0.8em;
	text-align:center;
	font-weight: bold;
			}	
.search {
	position: relative;
	/*float:left;*/
	width:100%;
	margin-bottom: 7px;
	height: 40px;
	left: -4px;
	top: -2px;
	}	

.left {   /*smallest left side content */
	Float:left;
	width:100%;
	background-color: #4C4C4C;
	min-height: 441px;
	height: 441px;
	}	

#left_content {   /*smallest left side conent */
	position: relative;
	left: -2px;
	top: -2px;
	border: 2px solid #969A57;
	background-color: #FFF;
	min-height: 437px;
	height: 437px;
	z-index: 1000;	
	}	
.left_med {  /* med. size left side conent */
	Float:left;
	width:100%;
	background-color: #4C4C4C;
	min-height: 551px;
	height: 551px;
	}		
.left_large {  /* med. size left side conent */
	Float:left;
	width:100%;
	background-color: #4C4C4C;
	min-height: 1051px;
	height: 1051px;
	}		
.left_xl {  /* med. size left side conent */
	Float:left;
	width:100%;
	background-color: #4C4C4C;
	min-height: 3151px;
	height: 3151px;
	}	
#left_content_med {   /*med size left side conent */
	position: relative;
	left: -2px;
	top: -2px;
	border: 2px solid #969A57;
	background-color: #FFF;
	min-height: 547px;
	height: 547px;
	z-index: 1000;	
	}		
#left_content_large {   /*med size left side conent */
	position: relative;
	left: -2px;
	top: -2px;
	border: 2px solid #969A57;
	background-color: #FFF;
	min-height: 1047px;
	height: 1047px;
	z-index: 1000;	
	}		
	#left_content_xl {   /*med size left side conent */
	position: relative;
	left: -2px;
	top: -2px;
	border: 2px solid #969A57;
	background-color: #FFF;
	min-height: 3147px;
	height: 3147px;
	z-index: 1000;	
	}
.right {
	float:right;
	width:74%;  /* 74% */
	background-color: #4C4C4C;
	text-align: center;
	
}	
#right_content {  
	position: relative;
	left: -2px;
	top: -2px;
	border: 2px solid #969A57;
	background-color: #FFF;
	min-height: 468px;
	height: 468px;
	text-align: center;
	padding: 9px;
	}	
	
#right_content_med {  /*med size right side conent */
	position: relative;
	left: -2px;
	top: -2px;
	border: 2px solid #969A57;
	background-color: #FFF;
	min-height: 578px;
	height: 578px;
	text-align: center;
	padding: 9px;
	}
#right_content_large {  /*med size right side conent */
	position: relative;
	left: -2px;
	top: -2px;
	border: 2px solid #969A57;
	background-color: #FFF;
	min-height: 1078px;
	height: 1078px;
	text-align: center;
	padding: 9px;
	}	
#right_content_xl {  /*med size right side conent */
	position: relative;
	left: -2px;
	top: -2px;
	border: 2px solid #969A57;
	background-color: #FFF;
	min-height: 3178px;
	height: 3178px;
	text-align: center;
	padding: 9px;
	}				

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

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

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

.footer_bar {
	float: left;
	background-color: #4C4C4C;
	width: 100%;
	height: 26px;
	/*margin-bottom: 10px;*/
	}	
#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;	
	}

.img_left{
	left: 80px;
}
#img_pad_20{
	padding: .1em;
	margin: 20px;
}
.disclaimer {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.55em;
	}