/* CSS Document */
* {margin:0;padding:0}
p {margin-bottom:1em}
ul{margin-left:20px;margin-bottom:1em}
h2{margin-bottom:.7em;}
/* commented backslash hack v2 \*/ 
html, body{height:100%;} 
/* end hack */ 

body {
	background:#f4f1ec;
	color: #3f4448;
	font:1em Arial, Helvetica, sans-serif;
}
#outer{
	margin-left:30px;
	margin-right:30px;
	background: #f4f1ec;
	border-left:1px solid #f4f1ec;
	border-right:1px solid #f4f1ec;
	margin-bottom:-32px;
	min-height:100%;
	height:auto !important;
	height:100%;
}
#header{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	border-bottom:2px solid #a8a296;
	background:#3a6791 url(../img/header_bg.jpg);
	height:145px;
	overflow:hidden;
	background-image: url(../img/header_bg.jpg);
}
#header p{
	clear:both;
	text-align:center;
	margin:0
}
#header img{border:none;}

#navbar{
	width:100%; 
	background:#cfcbc0;
	color:#3f4448;
	position:absolute;
	top:115px; 
	z-index:200;
	border-top:2px solid #a8a296;
	height:28px;
	font:bold 1em Arial, Helvetica, sans-serif;
	text-align:center;
}
#navbar p{
	margin:0;
	line-height:28px;
}
#navbar img{
	vertical-align:middle; 
	margin:0 .3em;
}

#navbar a:link{
	color:#4a463f;
	text-decoration:none;
}
#navbar a:visited{
	color:#4a463f;
	text-decoration:none;
}
#navbar a:hover{
	color:#c36a04;
	text-decoration:none;
}
#navbar a:active{
	color:#c36a04;
	text-decoration:none;
}

#left {
	position:relative;/*ie needs this to show float */
	width:30px;
	float:left;
	margin-left:-29px;/*must be 1px less than width otherwise won't push footer down */
	z-index:100;
	left:-1px;
}
#left p, 
#right p {padding:3px}
#right {
	position:relative;/*ie needs this to show float */
	width:30px;
	float:right;
	margin-right:-29px;/*must be 1px less than width otherwise won't push footer down */
	left:1px;
	color: #000;
}
#footer {
	width:100%;
	clear:both;
	height:30px;
	border-top:2px solid #a8a296;
	background: #3a6791;
	color:#ffffff;
	text-align:center;
	position:relative;
	font:bold 1em Arial, Helvetica, sans-serif;
}

#footer p {
	margin:0; 
	line-height:30px;
}
#footer span {
	margin:0 0 0 100px ;
}
#footer a:link{
	color:#fdf5e0;
	text-decoration:none;
}
#footer a:visited{
	color:#fdf5e0;
	text-decoration:none;
}
#footer a:hover{
	color:#f4b011;
	text-decoration:none;
}
#footer a:active{
	color:#f4b011;
	text-decoration:none;
}


#clearheader{height:147px;}/*needed to make room for header*/
#clearfooter{clear:both;height:32px;}/*needed to make room for footer*/
* > html #clearfooter {float:left;width:100%;}/* ie mac styles */
#centrecontent {
	width:100%;
	float:left;
	position:relative;
	z-index:1;
	margin:0 -1px;/* moz fix*/
	color: #000;
}
/* css stuff below is just for presentation and not needed for the demo */
#centrecontent p { padding: 0 20px; }
#left span {
	display:none;	
}	
#left a:hover {
	text-decoration: none;
	text-decoration: none;
	color:#222;
	background: #FFF;
}
#left a:hover span {
	display:block;
	position:absolute;
	left:30px;
	width:50px;
	z-index:20;
	background:#fff;
}
@media all and (min-width: 0px){
  #left a:hover span {
	top:50px;
  }
}
#left a { color:#FFF; }

html>body #minHeight{float:right;width:0px;height:100%;margin-bottom:-32px;} /*safari wrapper */

#centrecontent h2{
	font-size:1em;
	font-weight:bold;
	color:#d76000;
	text-align:left;
	padding: 0 20px;
}

.box_full {
	width:688px;
	margin-left:auto;
	margin-right:auto;
	margin-top:.75em;
	background:#dfdcd5;
	border:2px solid #a8a296;
	text-align:center;
	font-weight:bold;
}

.box_full h1 {
	color:#005d8f;
	font-size:1.1em;
	font-weight:bold;
	margin:.5em 0 0 0;
}

.box_full hr {
	width:86%;
	margin-top:.3em;
	margin-bottom:1em;
	margin-left:auto;
	margin-right:auto;
	height:2px;
	border:0;
	border-top:2px solid #a8a296;
}

.box_full img {
	margin:0 .5em;
}
.apply_bg {
	background:#dfdcd5 url(../img/apply_bg.jpg);
	height:219px;
}

div.apply{
	float:right;
	width:280px;
	text-align:center;
	color:white;
	letter-spacing:.05em;
}

.apply h1{
	margin:1em 0 1em 0;
	color:#ffffff;
}

.apply p{
font-size:1em;
font-weight:bold;
}

.apply img{
position:relative;
top:20px;
}

.align_left p{text-align:left !important;}
.align_left ul{text-align:left !important;margin-left:5em;}

#quarter_box_outer {
	width:693px;
	padding:0;
	margin-left:auto;
	margin-right:auto;
	margin-top:.75em;
	text-align:center;
	overflow:hidden;
}

.boxes_quarter {
	width:164px;
	margin:0;
	margin-right:6.7px;
	padding:0;
	background:#dfdcd5;
	border:2px solid #a8a296;
	float:left;
	height:111px;
}

.offer {background:#5e85b4 url(../img/offer.jpg);}
.calculate {background:#5e85b4 url(../img/calculate.jpg);}
.callback {background:#5e85b4 url(../img/callback.jpg);}
.contact {background:#5e85b4 url(../img/contact.jpg);margin:0;float:right;}

/****************/
ul#roll{
margin:0;
padding:0;
list-style:none;
position:relative;
top:20px;
left:49px;
}

#roll li{
width:183px;/*size of image*/
height:33px;/* size of image*/
}

#roll li.first{ background:url(../img/apply_now_down.jpg) no-repeat left top;}/* this holds the rollover state of the image1*/


#roll a{
display:block;
width:183px;
height:33px;
text-decoration:none;
}

#roll li.first a{background:url(../img/apply_now_up.jpg) no-repeat left top;}/* this holds the normal state of the image1*/

ul#roll a:hover{background:transparent}
/* on hover we just hide the anchor and let the image underneath show through.
This makes for pre-loaded rolovers unlike changing the image on hover which is slow.*/

/* the above code assumes a different image for each anchor but is much simpler if only one image is used as the individual classes are not necessary. */
ul#roll{text-indent:-999em}/* hide text*/

/* The code below is an ie5 bug with text indent - remove if you don't care about ie5 */
* html ul#roll{text-indent:0;te\xt-indent:-999em}
* html ul#roll span{text-indent:-999em;}

/***************/
ul.roll2{
margin:0;
padding:0;
list-style:none;
position:relative;
top:80px;
left:10px;
}

.roll2 li{
width:144px;/*size of image*/
height:27px;/* size of image*/
}

.roll2 li.first{ background:url(../img/info_down.jpg) no-repeat left top;}
.roll2 li.second{ background:url(../img/calculate_down.jpg) no-repeat left top;}
.roll2 li.third{ background:url(../img/callback_down.jpg) no-repeat left top;}
.roll2 li.forth{ background:url(../img/contact_down.jpg) no-repeat left top;}


.roll2 a{
display:block;
width:144px;
height:27px;
text-decoration:none;
}

.roll2 li.first a{background:url(../img/info_up.jpg) no-repeat left top;}
.roll2 li.second a{ background:url(../img/calculate_up.jpg) no-repeat left top;}
.roll2 li.third a{ background:url(../img/callback_up.jpg) no-repeat left top;}
.roll2 li.forth a{ background:url(../img/contact_up.jpg) no-repeat left top;}


ul.roll2 a:hover{background:transparent}
/* on hover we just hide the anchor and let the image underneath show through.
This makes for pre-loaded rolovers unlike changing the image on hover which is slow.*/

/* the above code assumes a different image for each anchor but is much simpler if only one image is used as the individual classes are not necessary. */
ul.roll2{text-indent:-999em}/* hide text*/

/* The code below is an ie5 bug with text indent - remove if you don't care about ie5 */
* html ul.roll2{text-indent:0;te\xt-indent:-999em}
* html ul.roll2 span{text-indent:-999em;}


/**************************************/
form {
font:.8em Arial, Helvetica, sans-serif !important;
width:434px;
margin-left:auto;
margin-right:auto;
}

legend{
font-weight:bold;
padding:.3em 1em .3em 1em;
color:#005d8f;
}

label {
float:left;
line-height:1.1em;
margin-bottom:.3em;
clear:both;
min-height:1.3em;
width:190px;
background:#fbfaf7;
padding:.1em 0 .1em .3em;
}

input, select, textarea {
font:.9em Arial, Helvetica, sans-serif;
float:right;
margin-bottom:.3em;
line-height:1.1em;
width:190px;
}

select {
width:195px;
}

textarea {
height:80px;
}

fieldset{
width:400px;
margin-bottom:1em;
border:2px gray solid;
padding:1em;
}

.mandatory{
color:red;
font-weight:bold;
}

.button_box {
width:400px;
margin:1em 0;
border:2px gray solid;
padding:1em;
}

.button{
width:auto;
}

.noborder{
border:0;
}

#error_innerhtml {
	margin-top:0 !important;
	margin-bottom:0 !important;	
	padding:0 !important;
	margin-left:auto;
	margin-right:auto;
	width:428px;
}

.form_errors {
	margin:1em 0;
	width: 409px; 
	background:#feeaee;
	border:2px solid red;
	color:#a70000;
	padding:0.5em;
	font:0.9em Arial, Helvetica, sans-serif;
}

.form_errors ul {
	margin:0 1em 0 1em;
	list-style:inside;
	padding:0;
}

.form_errors p{
	font-weight:bold;
}

.form_errors h2{
	font:bold 1.1em Arial, Helvetica, sans-serif;
	text-align:center;
	color:#a70000 !important;
}

h1.forms {
	margin:1em 0 0 0;
	font:bold 1.1em Arial, Helvetica, sans-serif;
	text-align:center;	
	color:#005d8f;
}

.smaller_text{font-size:90%;}

em {color:#005d8f;}
.note{color:#005d8f;}