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

	Title: CSS
	Author: Jeremy Williams
	Date: 20090930 

***********************************************************************************************
1. YUI Reset CSS

2. General Elements

3. Containers

4. Page Layout

	4.1 Header
	4.2 Logo
	4.3 Navigation
	4.4 Splash
	4.5 Content
	4.6 Content Footer
	4.7 Footer

5. Navigation and Other Clickables

	5.1 Logo Area
	5.2 Content Body
	5.3 Home Page
	5.4 Matchmaking Main Page
	5.5 Matchmaking Get Started Page
	5.6 Online Page
	5.7 Tour Page
	5.8 Locations Page
	5.9 City Pages
	5.10 Dashboard
	5.11 Contact
	5.12 Privacy
	5.13 Terms
	5.14 Site Map
	5.15 Thanks Page
	5.16 Footer

6 Section Content

	6.1 Shared Body Elements (For items that will be used in multiple areas)
	6.2 Home Page
	6.3 Matchmaking Main Page
	6.4 Matchmaking Get Started Page
	6.5 Online Page
	6.6 Tour Page
	6.7 Locations Page
	6.8 Member Login Page
	6.9 Thanks
	6.10 City Pages
	6.11 Dashboard
	6.12 Contact
	6.13 Privacy
	6.14 Terms
	6.15 Sitemap
	6.16 Sidebar Content
	6.17 Footer Content

7 Forms (Not the DIV's but the actual stylization of the form elements)

	7.1 Home 
	7.2 Matchmaking
	7.3 Online
	7.4 Members 

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


/* 1. YUI Reset CSS

The foundational YUI Reset CSS file removes and neutralizes the inconsistent default styling of 
HTML elements, creating a level playing field across A-grade browsers and providing a sound 
foundation upon which you can explicitly declare your intentions.
-----------------------------------------------------------------------------------------------
===============================================================================================*/

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;} 
ol,ul {list-style:none;} 
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:url(../images/bg-page.jpg) no-repeat top center #E5E5E5; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333;}
ul {padding:0; margin:0;}
li {padding:0; margin:0; list-style:none;}
h1 {padding:0px 0px 10px 0px; font-size:28px;}
h2 {font-size:20px;}
h3 {font-size:18px;}
h4 {font-size:16px; margin:0px 0px 10px 0px;}
p {padding:7px 0px 7px 0px;}
.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 {height:30px; background-color:#333; padding:0; margin:auto; overflow:hidden;}
#container-logo {height:140px; padding:0; margin:auto; overflow:hidden;}
#container-content {padding:0; margin:auto;}
#container-content-footer {height:19px; padding:0; margin:auto; overflow:hidden;}
#container-footer {height:160px; padding:0; margin:auto; overflow:hidden;}

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

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

/* 4.2 Logo
-------------------- */
#logo {width:960px; height:140px; background:url(../images/bg-logo.jpg) no-repeat top center; padding:0; margin:auto; overflow:hidden;}

/* 4.3 Navigation
-------------------- */
#navigation {width:960px; height:40px; background:url(../images/bg-navigation.jpg) no-repeat top center; padding:0; margin:auto; overflow:hidden;}

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

/* 4.5 Content
-------------------- */
#content {width:960px; background:url(../images/content-body.jpg) repeat-y top center; padding:0; margin:auto;}

/* 4.6 Content Footer
-------------------- */
#content-footer {width:960px; height:19px; background:url(../images/content-footer.jpg) no-repeat top center; padding:0; margin:auto; overflow:hidden;}

/* 4.7 Footer
-------------------- */
#footer {width:960px; height:160px; padding:15px; margin:auto;}


/* 5. Navigation and Other Clickables
-----------------------------------------------------------------------------------------------
===============================================================================================*/

/* 5.1 Logo Area
-------------------- */
#logo .left {width:285px; height:123px;}
#logo .right {width:665px; height:140px; float:right; overflow:hidden;}

#main-menu li a {width:155px; height:54px; display:block; text-indent:-9999px;}

/* 5.2 Content Body
-------------------- */
#content-body .infobar a {color:#005a9e; text-decoration:none;}
#content-body .infobar a:hover {text-decoration:underline;}

/* 5.3 Home Page
-------------------- */
#navigation .home li a {font-size:12px; font-weight:bold; color:#005a9e; text-decoration:none;}
#navigation .home li a:hover {color:#666666;}

#content .home a {font-size:12px; font-weight:bold; color:#005a9e; text-decoration:none;}
#content .home a:hover {color:#666666;}

/* 6 Section Content
-----------------------------------------------------------------------------------------------
===============================================================================================*/

/* 6.1 Shared Body Elements (For items that will be used in multiple areas)
-------------------- */
#header {font-size:18px; font-weight:bold; color:#FFF; text-align:right;}

#main-menu {width:620px; height:54px; padding:0; margin:0px 10px 0px 0px; overflow:visible; position:relative; top:75px;}
#main-menu ul {padding:0; margin:0;}
#main-menu li {padding:0; margin:0; float:left;}

#content-body {color:#333;}
#content-body .container {width:920px; margin:auto;}

/* 6.2 Home Page
-------------------- */
#navigation .home {width:960px; padding:12px 0px 0px 0px; margin:0; color:#c9d2d9;}
#navigation .home ul {padding:0; margin:0px 0px 0px 30px;}
#navigation .home li {padding:0px 15px 0px 0px; margin:0; float:left;}

#splash .home {width:960px; height:390px; background:url(../images/splash-landing.jpg) no-repeat top center; padding:0; margin:auto;}
#splash .home h1 {font-size:30px; color:#FFF;}
#splash .home .left {width:390px; padding:90px 0px 0px 30px; margin:0; font-size:12px; font-weight:bold; color:#000;}
#splash .home .right {width:300px; padding:10px 170px 0px 0px; margin:0;}

#banner .home {width:960px; height:80px; background:url(../images/banner-landing.jpg) no-repeat bottom center; padding:0; margin:auto;}

#body .home {width:920px; margin:auto;}
#body .home .left {width:600px; padding:10px 0px 0px 0px; margin:0; font-size:14px;}
#body .home .right {width:300px; padding:10px 0px 0px 0px; margin:0; font-size:14px; text-align:center;}

#body .home ul{ padding:0; margin:20px 0px 20px 0px;}
#body .home li.private {background:url(../images/icon-match-why-privacy.jpg) no-repeat top left; padding:0px 0px 0px 80px; margin:0px 0px 0px 0px;}
#body .home li.safety {background:url(../images/icon-match-why-safety.jpg) no-repeat top left; padding:0px 0px 0px 80px; margin:0px 0px 0px 0px;}
#body .home li.personalization {background:url(../images/icon-match-why-personalization.jpg) no-repeat top left; padding:0px 0px 0px 80px; margin:0px 0px 0px 0px;}
#body .home li.quality {background:url(../images/icon-match-why-quality.jpg) no-repeat top left; padding:0px 0px 0px 80px; margin:0px 0px 0px 0px;}
#body .home li.time {background:url(../images/icon-match-why-time.jpg) no-repeat top left; padding:0px 0px 0px 80px; margin:0px 0px 0px 0px;}

/* 6.3 Footer Content
-------------------- */
#footer {font-size:10px; color:#333;}

#footer .left {width:250px; min-height:20px; text-align:left;}
#footer .middle {width:455px; text-align:center; float:left;}
#footer .right {width:250px; min-height:20px; text-align:right;}

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