/*
 * #01 - General 
 * #02 - Masthead
 * #03 - Header
 * #04 - Navigation
 * #05 - Content (Note: Anything within the content
 *				  area should be in layout_content.css)  
 * #06 - Footer
 * #07 - Other 
 */

/* #01 - GENERAL **************************************************************/

* { margin: 0;  padding: 0; }

html
{
	/* footerStickAlt */
	height: 100%;
}

body
{
	/* centering */
	text-align: center;
	
	/* footerStickAlt */
	height: 100%;
}

#nonfooter
{
	/* centering */
	margin: 0 auto;
	text-align: center;
	
	/* footerStickAlt */
	position: relative;
	min-height: 100%;
		    
	background: transparent url('../images/nonfooter_bg.jpg') 50% 0 repeat-y; /* see comment in #wrapper re: backgrounds */ 
}

* html #nonfooter
{
	/* footerStickAlt */
	height: 100%;
}

#wrapper
{
	/* centering */
	width: 900px;
	margin: 0 auto;
	
	/* footerStickAlt */
	padding-bottom: 100px; /* same height as footer, plus a bit */
	/* overflow: hidden; /* required if #wrapper contains floats */
	/* causes problems in FF2: any part of nav appearing over #wrapper was not visible */
	
	text-align: left;
	/* if #wrapper contains content, set this as left.  Otherwise, if #wrapper
	 * will contain an inner-wrapper, set this as center.
	 */
		
	clear: both; /* since #nav uses floating and precedes #wrapper */
	
	/* height of #wrapper does not stretch to full height of screen like
	 * #nonfooter does.  #nonfooter background image may need to contain #wrapper
	 * section and should repeat-y in order to give impression that #wrapper is
	 * full height of screen.
	 */ 
	 
	 background: #363636 url('../images/nonfooter_bg.jpg') 50% 0 repeat-y;
}

/* #02 - MASTHEAD *************************************************************/

#masthead
{
	/* should not contain content, only #inner-masthead */
	/* height determined by height of #inner-masthead */
	
	background: transparent url('../images/masthead_bg.jpg') 50% 0 no-repeat;
}

#inner-masthead
{
	/* centering */
	width: 900px;
	margin: 0 auto;
	
	height: 100px;
	overflow: hidden;
	
	text-align: left;
	
	background: transparent url('../images/masthead_bg.jpg') 50% 0 no-repeat;	
}

/* #03 - HEADER ***************************************************************/

#header
{
	height: 151px;
	border-bottom: 15px solid #363636;
	background: transparent 0 0 no-repeat;
}

body#index #header,
body#benefits #header { background-image: url('../images/header_skinny.jpg'); }
body#athlete #header { background-image: url('../images/header_athlete.jpg'); }

body#personal-story #header,
body#personal-style #header,
body#education #header,
body#past-experiences #header { background-image: url('../images/header_trainer.jpg'); }

body#personal-training #header,
body#program-design #header,
body#home-gym-planning #header,
body#health-and-fitness-seminars #header { background-image: url('../images/header_services.jpg'); }

body#what-to-expect #header,
body#allowed-and-not-allowed #header,
body#the-plan #header { background-image: url('../images/header_session.jpg'); }

body#me-and-you #header { background-image: url('../images/header_commitment.jpg'); } 

body#challenge-introduction #header { background-image: url('../images/header_challenges.jpg'); }
body#hi-five #header { background-image: url('../images/header_hifive.jpg'); }
body#crunch-and-crush-of-time #header { background-image: url('../images/header_crunchcrush.jpg'); }
body#run-4-your-life #header { background-image: url('../images/header_run4yourlife.jpg'); }

body#complimentary-consultation #header { background-image: url('../images/header_consultation.jpg'); }

body#contact #header { background-image: url('../images/header_contactme.jpg'); }
body#error #header { background-image: url('../images/header_consultation.jpg'); }

/* #04 - NAVIGATION ***********************************************************/

/* Son of Suckerfish Dropdowns */

#nav
{
	width: 666px;
	height: 25px;	
	float: right;
	margin-top: 75px;
}

/* basic setup */
#nav ul { margin: 0;  padding: 0; list-style: none; }
#nav ul li { margin: 0;  padding: 0; }
#nav a, #nav img { display: block; }

/* main items */
#nav li { float: left;  cursor: default; }
#nav li#nav-contact a,
#nav li#nav-contact a img { margin: 0;  padding: 0;  border: none; }

/* widths of main menu */
#nav li#nav-skinny { width: 81px; height: 25px; }
#nav li#nav-trainer { width: 89px; }
#nav li#nav-services { width: 96px; }
#nav li#nav-session { width: 91px; }
#nav li#nav-commitment { width: 125px; }
#nav li#nav-challenge { width: 106px; }
#nav li#nav-contact { width: 78px; }

/* dropdowns */
#nav li li { border-top: 1px dotted #4c954f; }
#nav li li.first { border-top: none; }
#nav li a { padding: 5px 5px; }
#nav li ul
{
	position: absolute;
	left: -9999px;
	background: #003300;
}

/* dropdown widths */
#nav-skinny li { width: 225px; }
#nav-trainer li { width: 225px; }
#nav-services li { width: 250px; }
#nav-session li { width: 175px; }
#nav-commitment li { width: 125px; }
#nav-challenge li { width: 225px; }

/* dropdown widths */
#nav-skinny ul { width: 225px; }
#nav-trainer ul { width: 225px; }
#nav-services ul { width: 250px; }
#nav-session ul { width: 175px; }
#nav-commitment ul { width: 125px; }
#nav-challenge ul { width: 225px; }

/* dropdown when visible */
#nav li:hover ul, #nav li.sfhover ul { left: auto; }

/* special cases */
#nav #nav-consultation { color: #ffcc00; }
#nav #nav-consultation:hover,
#complimentary-consultation #nav #nav-consultation { color: #ff9900; }

/* selected items */
body#index #nav-personaltrainingis,
body#athlete #nav-athlete,
body#benefits #nav-benefits,
body#personal-story #nav-personalstory,
body#personal-style #nav-personalstyle,
body#education #nav-education,
body#past-experiences #nav-pastexperiences, 
body#personal-training #nav-personaltraining,
body#program-design #nav-programdesign,
body#home-gym-planning #nav-homegymplanning,
body#health-and-fitness-seminars #nav-healthtalks,
body#what-to-expect #nav-whattoexpect,
body#allowed-and-not-allowed #nav-allowednotallowed,
body#the-plan #nav-plan,
body#me-and-you #nav-meandyou,
body#challenge-introduction #nav-challengeintro,
body#hi-five #nav-hifive,
body#crunch-and-crush-of-time #nav-crunchcrush,
body#run-4-your-life #nav-run4life { color: #99cc00; }

/* #05 - CONTENT **************************************************************/

#inner-wrapper
{
	width: 870px;
	margin: 0 0 15px 15px;
	overflow: hidden;
}

/* #06 - FOOTER ***************************************************************/

#footer
{
	/* should not contain content, only #inner-footer */
	
	/* footerStickAlt */
	position: relative;
	margin-top: -115px;
	height: 115px;
	background: transparent url('../images/footer_bg.jpg') 50% 0 no-repeat;
    clear: both;
}

#inner-footer
{
	/* centering */
	width: 900px;
	margin: 0 auto;
	
	height: 115px;
	overflow: hidden;
	
	text-align: left;
	
	background: transparent url('../images/footer_bg.jpg') 50% 0 no-repeat;
}

/* #07 - OTHER ****************************************************************/

.clear
{
	clear: both;
}
