@charset "utf-8";
/* CSS Document */

body {
	background:#333333 url(../img/bg.png) repeat-y;
	font-family:'Lucida Grande',Arial,sans-serif;
	font-size:62.5%;
	line-height:24px;
	}
.container_12 {
	margin:0;
	padding-top:12px;
	position:relative;
	z-index:1;
	}

p {
	padding:0 10px;
	margin-bottom:24px;
	font-size:1.5em;
	line-height:24px;
	}
	p strong {
		font-weight:bold;
		}
	p em {
		font-style:italic;
		}

div.header-container {
	background:url(../img/shadow.png) no-repeat left bottom;
	padding-bottom:5px;
	margin-bottom:3px;
	}
	div.header-container h2 {
		font-size: 2.2em; 
		line-height:36px;
		margin-top:13px;
		margin-bottom:5px;
		text-align:right;
		padding-right:10px;
		}

h3 {
	font-size:1.8em;
	line-height:23px;
	padding-top:12px;
	padding-bottom:12px;
	border-top:1px dashed black;
	}

div#who {
	color:#000b0e;
	background:url(../img/emit.png) no-repeat;
	padding-top:120px;	
	}
	div#who h1 {
		position:absolute;
		text-indent: -9000px;
		}
	div#who h2 {
		background-color:#0290b8;
		color:#ececec;
		}
	div#who h3 {
		color:#ececec;
		border-top-color:#ececec;
		}
	div#who p#contact {
		text-align:center;
		font-size:1.6em;
		padding:6px;
		margin-bottom:12px;
		}
	div#who p#contact strong {
		font-size:1.2em;
		line-height:18px;
		font-weight:bold;
		}
	div#who p#contact a {
		color:#f7f7f7;
		font-weight:normal;
		}

div#what {
	color:#333;	
	background:url(../img/what.png) no-repeat;
	padding-top:120px;
	}
	div#what h2 {
		background-color:#ebebeb;
		color:#333;
		}
	div#what h3 {
		color:#333;
		border-top-color:#333;
		}

div#how {
	color:#f7f7f7;
	background:url(../img/how.png) no-repeat;	
	padding-top:120px;	
	}
	div#how h2 {
		background-color:#2b2b2b;
		}
	div#how h3 {
		color:#acd9e5;
		border-top-color:#339999;			
		}


/* Contact Form */
#contactFormContainer {
	position:absolute;
	left:720px;
	width:240px;
	top:0px;
	z-index:3;
	background:url(../img/contact-bg.png) bottom right no-repeat #D9370B;
	}
#contactForm {
	display:none;
	padding:10px;
	}

/* Animation to display while Ajax request is sent */
.bar {
	display:none; 
	background:url(../img/ajax-loader.gif) no-repeat center; 
	margin-top:100px; 
	height:40px;
	width:220px;
	}
	
/* Hide the confirmation message until needed */	
#messageSent {
	display:none;
	}

/* Form validation messages */
#contactForm div.error { 
	display:none; 
	font-size:1.2em;
	font-weight:bold;
	line-height:1em;
	color:#ebebeb;
	background-color:#333;
	width:206px;
	padding:5px;
	border:2px solid #CCC;
	border-top:none;
	}
	
/* Contact button */
#contactFormContainer .contact {
	height:60px;
	width:240px;
	background:url(../img/contact.png) top left;
	position:absolute;
	left:0px;
	bottom:-60px; 
	cursor:pointer;
	}
	
/* Form styles */
#contactForm input, textarea {
	width:206px;
	padding:5px;
	margin-top:10px;
	font-family: 'Lucida Grande', Arial, sans-serif;
	font-size:1.8em;
	border:2px solid #CCC;
	background-color:#ebebeb;
	color:#333;
}
#contactForm textarea {
	height:5em;
}
#contactForm input#submit {
	font-weight:bold;
	margin-bottom:10px;
	padding:5px;
	width:220px;
	border:2px solid #333;
	background-color:#CCC;
	color:#333;
	cursor:pointer;
}
			
/* Hides the darkening layer for the Modal effect. The z-index is necessary for layering purposes, and be sure to keep the positioning/height/width the same */	
#backgroundPopup{
	display:none; 
	position:fixed; 
	_position:absolute; 
	height:100%; width:100%; 
	top:0; left:0;
	background:#000; 
	z-index:2;
	}