/**********************************************************************************************

	Title: Money Mailer Landing Pages
	Author: Jeremy Williams
	Date: 201003

***********************************************************************************************


1. YUI Reset CSS

2. General Elements

3. Containers

4. Page Layout

5. Navigation and Other Clickables

6 Section Content


***********************************************************************************************/


/* 1. Reset CSS
-----------------------------------------------------------------------------------------------
===============================================================================================*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th {margin:0; padding:0;} 
img {border:0;} 
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal; font-weight:bold;}  
caption,th {text-align:left;} 
h1,h2,h3,h4,h5,h6 {font-weight:normal;} 
q:before,q:after {content:'';}
abbr,acronym {border:0;}


/* 2. General Elements
I've declared some general items here that will be consistent across the entire site.
-----------------------------------------------------------------------------------------------
===============================================================================================*/

html { }
body {background:#2865a7 url(../images/bg-page.jpg) top center no-repeat; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#FFF;}
ul {padding:0; margin:0;}
li {padding:0; margin:0;}
h1 {padding:0px 0px 10px 0px; font-size:28px;}
h2 {font-size:20px;}
h3 {font-size:18px;}
h4 {font-size:16px; font-weight:bold;}
p {padding:7px 0px 7px 0px;}
a {font-weight:bold; color:#FFF; text-decoration:underline;}
a:hover {font-weight:bold; color:#FFC; text-decoration:none;}
a:active {font-weight:bold; color:#FFC; text-decoration:none;}
a:visited {font-weight:bold; color:#FFF; text-decoration:none;}
.left {padding:0; margin:0; float:left;}
.right {padding:0; margin:0; float:right;}
.clear {padding:0; margin:0; clear:both;}
.clear-left {clear:left;}
.clear-right {clear:right;}


/* 3. Containers
-----------------------------------------------------------------------------------------------
===============================================================================================*/
	
#container-header {margin:auto; padding:0; overflow:hidden;}
#container-splash {margin:auto; padding:0; overflow:hidden;}
#container-content {margin:auto; padding:0; overflow:hidden;}
#container-footer {margin:auto; padding:0; overflow:hidden;}


/* 4. Page Layout
-----------------------------------------------------------------------------------------------
===============================================================================================*/

/* Header */
#header {width:960px; margin:auto; padding:0; overflow:hidden;}

/* Splash */
#splash {width:960px; margin:auto; padding:0; overflow:hidden;}

/* Content */
#content {width:960px; margin:auto; padding:0; overflow:hidden;}

/* Footer */
#footer {width:960px; height:76px; background-color:#0f548d; margin:auto; padding:0; overflow:hidden;}


/* 4. Sections
-----------------------------------------------------------------------------------------------
===============================================================================================*/

/* page 1 */
#header .page1 {width:960px; height:82px; background:url(../images/page1-header.jpg) top center no-repeat; margin:auto; padding:0; overflow:hidden; color:#2866a8;}
#header .page1 h1 {margin:10px 0px 0px 5px; padding:0; font-weight:bold;}
#header .page1 h2 {margin:0px 0px 0px 5px; padding:0; font-size:16px; font-weight:bold;}

#splash .page1 {height:434px; overflow:hidden;}
#splash .page1 {height:434px; overflow:hidden;}

.open {height:434px; background:url(../images/page1-splash-open.jpg) top center no-repeat;}
.closed {height:434px; background:url(../images/page1-splash-closed.jpg) top center no-repeat;}

#splash .page1 .left {width:535px; height:373px;}
#splash .page1 .left .title {margin:5px 0px 20px 0px; text-align:center;}
#splash .page1 .left .title h2 {font-size:26px;}

#splash .page1 .left .form {width:400px; margin:auto; padding:50px 0px 0px 0px;}

#splash .page1 .left .form-left {width:200px; margin:0; float:left;}
#splash .page1 .left .form-left .desc {font-weight:bold;}
#splash .page1 .left .form-left .field {margin:0px 0px 3px 0px; font-weight:bold;}

#splash .page1 .left .form-right {width:200px; margin:auto; float:right;}
#splash .page1 .left .form-right .desc {font-weight:bold;}
#splash .page1 .left .form-right .field {margin:0px 0px 3px 0px; font-weight:bold;}

#splash .page1 .right {}

#content .page1 {height:308px; background:url(../images/page1-content.jpg) top center no-repeat;}
#content .page1 .copy {display:none;}

/* footer */
#footer .page1 .copyright {margin:25px 0px 0px 0px; font-size:10px; color:#FFF; text-align:center;}
#footer .page1 .copyright a {text-decoration:underline;}

/* page 2 */
#header .page2 {width:960px; height:82px; background:url(../images/page2-header.jpg) top center no-repeat; margin:auto; padding:0; overflow:hidden; color:#2866a8;}
#header .page2 h1 {margin:10px 0px 0px 5px; padding:0; font-weight:bold; color:#FFF;}
#header .page2 h2 {margin:0px 0px 0px 5px; padding:0; font-size:16px; font-weight:bold; color:#FFF;}

#splash .page2 {height:209px; background:url(../images/page2-splash.jpg) top center no-repeat;}
#splash .page2 .copy {width:500px; padding:70px 0px 0px 90px;}

#content .page2 {background:#FFF; color:#000;}
#content .page2 .copy {padding:10px;}

/* footer */
#footer .page2 {width:960px; height:76px; background:url(../images/page2-footer.jpg) top center no-repeat;}
#footer .page2 .copyright {padding:35px 0px 0px 0px; font-size:10px; color:#FFF; text-align:center;}

/* page 3 */
#header .page3 {width:960px; height:82px; background:url(../images/page2-header.jpg) top center no-repeat; margin:auto; padding:0; overflow:hidden; color:#2866a8;}
#header .page3 h1 {margin:10px 0px 0px 5px; padding:0; font-weight:bold; color:#FFF;}
#header .page3 h2 {margin:0px 0px 0px 5px; padding:0; font-size:16px; font-weight:bold; color:#FFF;}

#splash .page3 {height:209px; background:url(../images/page2-splash.jpg) top center no-repeat;}
#splash .page3 .copy {width:500px; padding:70px 0px 0px 90px;}

#content .page3 {background:#FFF; color:#000;}
#content .page3 .copy {padding:10px;}
#content .page3 .copy .thanks {width:800px; height:253px; background:url(../images/bg-thanks.jpg) 0 0 no-repeat; margin:auto;}
#content .page3 .copy .thanks .message {width:580px; padding:90px 0px 0px 180px;}
#content .page3 .copy ol {margin:0px 0px 0px 10px;}
#content .page3 .copy li {margin:5px 5px 5px 15px; padding:0px 0px 0px 5px; list-style:inherit;} 

/* footer */
#footer .page3 {width:960px; height:76px; background:url(../images/page2-footer.jpg) top center no-repeat;}
#footer .page3 .copyright {padding:35px 0px 0px 0px; font-size:10px; color:#FFF; text-align:center;}

/* 5 Form Validation
-------------------- */
.highlightfield { /* (required input text, select ) */ background:#FFC;	border:solid 2px #C90;}
.highlight {  /* (required text) */	color:#FFF;	font-weight:bold;}
.hidden {display: none;}
.errormessage {background-color:#FFC; padding:5px; font-size:12px; font-weight:bold;	color:#900;	border:1px solid #C90;}