/* Design by Pixel Bender Creative 2009
   Created June 2009 
   Author: tsilver@pixelbender.ca*/
   
 /* ¥ CSS reset in css/reset.css
    ¥ Mobile styles set in css/mobile.css 
    ¥ IE 6 & 7 hacks set in css/ie6.css & css/ie_7_fixes.css
 */

/* 1-universal elements ( a, p, img and such )
   
   2-positioning & div specific elements
   		
   		a) universal elements (found across entire site)
   			i) wrapper
   			ii) header
   				aa) main navigation
   		
   		b) body.home (index.php)
   			i) primary content
   				aa) welcome note 
   			ii) secondary content
   			
   		c) body.sub	(all other pages)
   			i) primary content
   			ii) secondary content
   		
   		d) footer
   			i) primary content
   			ii) secondary content
   			iii) tertiary content
*/
   
   
/* 1 --------common elements
				general classes-------- */
				
body {
background: #FBFBF8;
font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Calibri, "Lucida Sans Regular", Helvetica, sans-serif;
font-size: 62.5%; /* resets base font size to 10px */
}

div.clear {
clear: both;
height: 5px;
}

div.ruler { /* temp for development */
height: 57px;
background: url(../images/tape.gif) left top no-repeat;
}

img.mug {
float: left;
margin: 5px 15px 20px 0;
}

p {
margin: 1.4em 0;
}

p.center {
text-align: center;
}

p a:link {
display: inline;
color: #38567C;
text-decoration: underline;
}

	p a:visited {
	color: #38567C;
	}

	p a:hover {
	text-decoration: none;
	}

	p a:active {
	color: #000;
	text-decoration: none;
	}
	
hr {
margin: 2em 50px;
}
	
span.amp { /* ensures attractive ampersands via Dan Cederholm */
font-family: Baskerville, "Palatino Linotype", Georgia, "Times New Roman", Times, serif;
}


/* 2 --------divs
				div specific elements-------- */

/* a) universal elements------ */

	/* i) wrapper------ */
	
	#wrapper {
	margin: 0 auto;
	width: 1020px;
	border-right: solid 1px #333;
	border-left: solid 1px #333;
	color: #666;
	font-size: 1.4em; /* sets body text to 14px */
	line-height: 1.8;
	}

/* ii) header------ */

#header {
background: url(../images/h_bg.jpg) left top no-repeat;
height: 160px;
padding: 0.2em 40px 0 0;
text-align: center;
}

	#header h1 {
	float: left;
	width: 180px;
	height: 85px;
	margin: 12px 0 0 40px;
	text-indent: -999em;
	}
	
		#header h1 a {
		display: block;
		background: url(../images/holly_high_hopes_logo.gif) center top no-repeat;
		width: 180px;
		height: 85px;
		}
		
			#header h1 a:hover {
			background: url(../images/holly_high_hopes_logo.gif) center bottom no-repeat;
			}
		
		/* aa) main navigation------ */
		
			div#header ul#nav {
			float: right;
			display: inline;
			background: url(../images/nav_bg.png) 0 0 no-repeat;
			width: 516px;
			list-style: none;
			}
			
				div#header ul#nav li {
				float: left;
				width: 170px;
				height: 150px;
				}
				
					div#header ul#nav li a {
					display: block;
					width: 170px;
					height: 150px;
					text-indent: -999em;
					}
					
						div#header ul#nav li a:hover.about {
						background: url(../images/nav_bg.png) 0 -150px no-repeat;
						}
						
						div#header ul#nav li a:hover.policies {
						background: url(../images/nav_bg.png) -170px -150px no-repeat;
						}
						
						div#header ul#nav li a:hover.program {
						background: url(../images/nav_bg.png) -340px -150px no-repeat;
						}
					
		/* End Main Navigation */
		

.garnish {
background: url(../images/cryons.png) left center no-repeat;
margin: -75px 0 0 40px;
padding: 250px 0 0 0;
}


/* b) body.home-------- */
	
	body.home #wrapper {
	background: url(../images/h_w_bg.jpg) #fff right 120px no-repeat;
	}
	
	body.home #content { /* adds blue background to home page */
	background: url(../images/blue_bg.jpg) center 650px repeat-x;
	}
	
	/* i) primary content------ */
	
	body.home #primary {
	float: left;
	width: 49%;
	margin: 0 0 5em 0;
	}
	
		/* aa) welcome note------ */
		
			body.home #primary #welcome_note_top {
			background: url(../images/note_paper_top.png) left top no-repeat;
			height: 46px;
			width: 450px;
			margin: 3em 0 0 40px;
			}
			
			body.home #primary #welcome_note {
			background: url(../images/note_paper_bg.png) left top repeat-y;
			width: 450px;
			padding: 0 0 1.4em 0;
			margin: 0 0 0 40px;
			}
			
				body.home #primary #welcome_note p {
				text-align: center;
				margin-bottom: 0;
				padding: 0 4em;
				}
				
				body.home #primary #welcome_note img {
				margin: 0.6em 0;
				padding: 0;
				}
			
			body.home #primary #welcome_note_bottom {
			background: url(../images/note_paper_bottom.png) right bottom no-repeat;
			height: 50px;
			width: 450px;
			margin-left: 40px;
			}
			
		
		body.home #primary h1 {
		margin: 0 0 1em 0;
		padding: 0 2.25em;
		font-size: 225%;
		color: #38567C;
		line-height: 1;
		}
		
			body.home #primary h1 .deck {
			font-size: 70%;
			color: #000;
			}
			
		
		/* ii) secondary content------ */
		
		body.home #secondary {
		float: right;
		width: 50%;
		margin: 0 0 5em 0;
		padding: 550px 0 0 0;
		}

			body.home #secondary .box_top {	
			background: url(../images/box_bg_top.png) left top no-repeat;
			height: 25px;
			margin-right: 40px;
			}
	
			body.home #secondary .box_center {
			background: url(../images/box_bg_center.png) left top repeat-y;
			margin-right: 40px;
			padding: 0 3.4em;
			}
		
			body.home #secondary .box_bottom {
			background: url(../images/box_bg_bottom.png) left bottom no-repeat;
			height: 25px;
			margin: -1.4em 40px 0 0;
			}
	
		body.home #secondary h1 {
		margin: 1em 0 0 0;
		padding: 0;
		font-size: 225%;
		color: #38567C;
		line-height: 1;
		}
	
		body.home #secondary h2 {
		margin: 0;
		padding: 0;
		font-size: 175%;
		color: #38567C;
		line-height: 1;
		}
		
		
/* c) body.sub-------- */
	
	body.sub #wrapper {
	background: url(../images/sub_w_bg.jpg) left top repeat-y #fff;
	}
	
		body.sub #header {
		background: url(../images/sub_h_bg.jpg) left top no-repeat;
		height: 450px;
		padding: 0.2em 0 0 0;
		text-align: center;
		}

	/* i) primary content------ */
	
	body.sub #primary {
	float: left;
	width: 675px;
	margin: 0;
	padding: 2em 0 5em 0;
	}
	
		/* allows for generous padding without distrupting layout */
		body.sub #primary h1, body.sub #primary h2, body.sub #primary h3, body.sub #primary p, body.sub #primary ul {
		margin: 0 50px;
		}
		
			body.sub #primary h1 {
			margin-bottom: 1em;
			font-size: 200%;
			color: #38567C;
			line-height: 1;
			}
			
				body.sub #primary h2 {
				margin: 3em 50px 0.25em 50px;
				font-size: 125%;
				color: #38567C;
				line-height: 1;
				}
				
				body.sub #primary h3 {
				margin-bottom: 0.25em;
				font-size: 100%;
				font-weight: bold;
				color: #38567C;
				line-height: 1;
				}
				
			body.sub #primary p, body.sub #primary ul {
			margin-bottom: 1em;
			}
			
				body.sub #primary p.profile img {
				float: left;
				margin: 5px 15px 0 0;
				}
				
			body.sub #primary ul.schedule {
			margin-top: 1em;
			margin-bottom: 1em;
			list-style: none;
			}
			
				body.sub #primary ul.schedule li {
				padding: 0.2em 0;
				}
				
				body.sub #primary ul.schedule li strong {
				color: #38567C;
				}
		
	/* ii) secondary content------ */

	body.sub #secondary {
	float: left;
	width: 325px;
	padding: 2em 0 0 0;
	text-align: left;
	}
	
		body.sub #secondary h2 {
		color: #38567C;
		font-weight: bold;
		font-size: 115%;
		}
		
		body.sub #secondary ul.sec_nav {
		list-style: none;
		}
		
			body.sub #secondary ul.sec_nav li {
			height: 40px;
			width: 320px;
			margin: 0.2em 0;
			}
			
			body.sub #secondary ul.sec_nav li a {
			display: block;
			height: 40px;
			padding: 0 0 0 40px;
			color: #38567C; 
			text-decoration: none;
			line-height: 40px;
			}
			
				body.sub #secondary ul.sec_nav li a.current {
				background: url(../images/sec_nav_bg.jpg) left top no-repeat;
				}
			
				body.sub #secondary ul.sec_nav li a:visited {
				color: #38567C; 
				}
				
				body.sub #secondary ul.sec_nav li a:hover {
				background: url(../images/sec_nav_bg.jpg) left top no-repeat;
				}
				
				body.sub #secondary ul.sec_nav li a:active {
				color: #000;
				}
				
		body.sub #secondary h2, body.sub #secondary h3, body.sub #secondary p {
		margin-right: 20px;
		margin-left: 30px;
		}
		
		body.sub #secondary form {
		margin: 2em 20px 0 30px;
		padding: 2em 0 0 0;
		border-top: solid 1px #D5D2CF;
		}
		
			body.sub #secondary form p {
			margin-left: 0;
			}
			
			body.sub #secondary form input.text {
			border: solid 1px #D5D2CF;
			height: 1.4em;
			width: 200px;
			padding: 0.2em 0; 
			}
			
			body.sub #secondary form textarea {
			width: 200px;
			border: solid 1px #D5D2CF;
			overflow: hidden;
			}
				

/* v) footer------ */

#footer {
background: url(../images/f_bg.jpg) #000 center top no-repeat;
clear: both;
padding: 1em 0 0 0;
text-align: left;
color: #fff;
}
	
	#footer h2 {
	margin: 0;
	padding: 0;
	font-size: 140%;
	color: #fff;
	line-height: 1;
	}

	#footer p a:link {
	display: inline;
	color: #fff;
	text-decoration: underline;
	font-weight: bold;
	}

	#footer p a:visited {
	color: #fff;
	font-weight: bold;
	}

	#footer p a:hover {
	text-decoration: none;
	}

	#footer p a:active {
	color: #ddd;
	text-decoration: none;
	}
	

	/* i) primary content------ */

	#footer .footer_primary {
	float: left;
	width: 49%;
	margin-bottom: 4em;
	}
	
		#footer .footer_primary img {
		margin: 1em 0 1em 50px;
		}
		
		#footer .footer_primary .bio {
		margin: 2em 0 2em 40px;
		}
		
			#footer .footer_primary .bio .bio_box_top {
			background: url(../images/fp_box_top.gif) left top no-repeat;
			height: 25px;
			}
			
				#footer .footer_primary .bio .bio_box_center {
				background: url(../images/fp_box_center.gif) left top repeat-y;
				padding: 1em 3em;
				}
				
					#footer .footer_primary .bio .bio_box_center img {
					float: left;
					margin: 2em 0 0 0;
					}
					
					#footer .footer_primary .bio .bio_box_center p {
					margin-left: 80px;
					}
			
			#footer .footer_primary .bio .bio_box_bottom {
			background: url(../images/fp_box_bottom.gif) left top no-repeat;
			height: 25px;
			}
			
		#footer .footer_primary a.dl_reg {
		display: block;
		background: url(../images/dl_reg_bg.png) center top no-repeat;
		width: 376px;
		height: 216px;
		margin-left: 40px;
		text-indent: -999em;
		}
		
			#footer .footer_primary a:hover.dl_reg {
			background: url(../images/dl_reg_bg.png) center bottom no-repeat;
			}
			
			
		#footer .footer_primary a.dl_perm {
		display: block;
		background: url(../images/dl_perm_bg.png) center top no-repeat;
		width: 376px;
		height: 216px;
		margin: 2em 0 0 40px;
		text-indent: -999em;
		}
		
			#footer .footer_primary a:hover.dl_perm {
			background: url(../images/dl_perm_bg.png) center bottom no-repeat;
			}
			
	/* ii) secondary content------ */
	
	#footer .footer_secondary {
	float: right;
	width: 45.5%;
	margin-bottom: 4em;
	}
	
		#footer .footer_secondary .excerpt {
		margin: 2em 40px 2em 0;
		}
		
			#footer .footer_secondary .excerpt .excerpt_box_top {
			background: url(../images/fs_box_top.gif) right top no-repeat;
			height: 25px;
			margin-bottom: -2px;
			}
			
				#footer .footer_secondary .excerpt .excerpt_box_center {
				background: url(../images/fs_box_center.gif) right top repeat-y;
				padding: 1em 3em;
				}
				
			#footer .footer_secondary .excerpt .excerpt_box_bottom {
			background: url(../images/fs_box_bottom.gif) right top no-repeat;
			height: 25px;
			}
			
		#footer .footer_secondary form {
		margin: 1em 20px 0 0;
		padding: 1em 0 0 0;
		}
		
			#footer .footer_secondary form p {
			margin-left: 0;
			}
			
			#footer .footer_secondary form input.text {
			border: solid 1px #D5D2CF;
			height: 1.4em;
			width: 250px;
			padding: 0.2em 0; 
			}
			
			#footer .footer_secondary form textarea {
			width: 250px;
			border: solid 1px #D5D2CF;
			overflow: hidden;
			}
			
		
		/* iii) tertiary content------ */
		
		#footer #credits {
		clear: both;
		background: url(../images/credits_bg.jpg) #3A4348 center top repeat-x;
		margin: 4em 0 0 0;
		padding: 2em 0;
		text-align: center;
		}
		
			#footer #credits p {
			margin: 0.3em 0;
			color: #eee;
			font-size: 90%;
			line-height: 0.9;
			}
		
		
		#footer #credits ul {
		list-style: none;
		width: 602px;
		margin: 1em 0 2em 208px;
		padding: 2em 0;
		}
		
			#footer #credits li {
			float: left;
			width: 200px;
			border-right: solid 1px #fff;
			}
			
				#footer #credits li.last {
				border-right: none;
				}
				
					#footer #credits li a {
					display: block;
					color: #fff;
					font-weight: bold;
					text-decoration: none;
					}
			
						#footer #credits li a:visited {
						color: #fff;
						}
			
						#footer #credits li a:hover {
						background: #5F6E75;
						text-decoration: none;
						}
			
						#footer #credits li a:active {
						color: #ccc;
						}