@import 'reset.css';

/*
--------------------------------------------------
--------------------------------------------------
				  Dayspring Center
				   AJD | 10-31-07
				  	
			  last update: 5-2-08
--------------------------------------------------
a note about this layout:
	widths are set in ems, as this relative
	measurement makes for beatiful, whole 
	layout scaling when text-size is increased.
	This has great usability and satisfies
	my need to maintain layout control at larger text
	sizes.  The only exception will be heights
	of elements with prominent bg images.  this
	way, the width can still scale to accomodate
	text-size increase, but the design as a whole
	doesn't suffer as much.
	
	The sad part is that in a few years, this might
	be completely irrelevant, as soon all major
	browsers will zoom rather than resize text...
--------------------------------------------------
#FFF41C || Logo Yellow

#FFFBAD || Light Yellow

#FFFDD8 || Yellow highlight

#3F3A2C || Brown Lowlight/Text
--------------------------------------------------
*/

body{
	font: 1.0em/1.2 "Futura Medium", "Gill Sans", Futura, Verdana, Trebuchet, Helvetica, Arial, sans-serif;
	background: #FFFBAD url(images/header_bg.jpg) top left repeat-x;
	color: #3F3A2C;
}

#container{
	width: 60em;
	margin: 0 auto;
	background: transparent url() repeat-x;
}
		
/*TEMP/ #container div{outline: 1px solid red;}*/

h2{
	font: 1.125em/2.0 "Futura Medium", "Gill Sans", Futura, Verdana, Trebuchet, Helvetica, Arial, sans-serif;
	border-top: #3F3A2C 1px solid;
	text-align: right;
	padding-right: 0.5em;
}

a{
	color: #3F3A2C;
	text-decoration: none;
}

strong{
	font-weight: bold;
}

/*-------   Header  --------*/

#header{
	width: 100%;
	height: 317px;
	background: transparent url(images/header_1.jpg) bottom right no-repeat;
}

#header h1{
	display: block;
	width: 35%;
	padding-top: 50px;
}

#header h1 a{
	display: block;
	width: 178px;
	height: 198px;
	background: transparent url(images/logo.png) top center no-repeat;
	text-indent: -9999px;
	margin: 0 auto;
}

#header p.title{
	color: #FFFBAD;
	font: 1.0em/1.2 Georgia, "Utopia Std", Palatino, serif;
	font-style: italic;

}


/*--------- Menu ----------*/

/*//This is REALLY ugly code...//*/

/* to do: replace with suckerfish*/


/*-------   Primary  --------*/

#primary{
	width: 37.4em;
	padding: 1em 1.25em 0 0;
	float: right;
}

#primary h2{
	padding-bottom: 1em;
}

#primary h3{
	font-family: "Futura Medium", "Gill Sans", Futura, Verdana, Trebuchet, Helvetica, Arial, sans-serif;
	font-size:18px
}

#primary p{
	font: .9em/1.5 Georgia, "Utopia Std", Palatino, serif;
	text-indent: 2em;
	padding-bottom: 0.5em;
}


#primary ul li{
	list-style-type: disc;
	margin: 1em 2em;
	font: .9em/1.5 Georgia, "Utopia Std", Palatino, serif;
}


#primary a, #secondary a{
	font-style: italic;
	color: #2d2db9;
	text-decoration: underline;
}

#primary a img{
}

#primary a:hover{
	color: #3F3A2C;
}

/*-- Page Specific Styling --*/

img.signature{padding: 10px 0 0 25px;}

p.name span{font-style: italic; float: left; font-size: .9em;}

#primary blockquote{
	text-align: justify;
	font: .9em/1.5 Georgia, "Utopia Std", Palatino, serif;
	border: 1px solid #3f3a2c;
	padding: 10px;
	margin: 15px;
	background: #FFFDD8;
	font-style: italic;
	overflow: auto;
}

#primary blockquote.short{text-align: center;}

#primary blockquote span.by{font-weight: bold;font-size: 0.8em;float: right;}

ol#board li{
	display: block;
	width: 15em;
	padding: 0.25em 1em;
	margin-left: 1.7em;
	height: 4em;
	float: left;
}

ol#board li span.position{font-style: italic;}

ol#board li span.company, ol#staff span{float: left; font-size: 0.8em;}

ol#staff li{
	display: block;
	width: 13em;
	padding: 0.25em 1.0em;
	margin-left: 3em;
	height: 4em;
	float: left;
}


#primary p.reference{
	font: 0.7em/1.4em  Georgia, "Utopia Std", Palatino, serif;
	text-indent: 0;
	font-style: italic;
}

ul.volunteer{
	float: left;
	width: 16.7em;
	margin-left: 0.5em;
	padding: 0.5em;
}

p.contact{clear: both;}

br.clear{clear: both;} /* HACK */

#primary p.address{ margin: 0 0 2em 12em; text-indent: 0; line-height: 1.2;}

#primary p.address span{font-style: italic;}

#primary p.multiple{float: left; width: 13em; margin-left: 6em;}

#primary p.left{text-indent: 0;}

#primary p.contactInfo{text-indent: 0;}

#primary p.contactInfo span{display: block; text-align: center;}

#primary .program, #primary .event{margin-bottom: 2em;}

#primary img.left{float: left; padding: .5em;}

#mailingList{
	background: #FFFDD8;
	padding: 1em;
	margin: 0 auto;
	border: 1px solid #3f3a2c;
	overflow: auto;
	font-size: .9em;
	width: 29em;
}

#mailingList p{
	font-size: 1.1em;
	line-height: 1.0;
	text-indent: 0;
}

#mailingList .field{
	float: left;
	width: 13em;
	padding: .1em;

}

#mailingList .field input{
	float: left;
}

#mailingList #optionsList{
	width: 12em;
	margin: 0 auto;
}

#mailingList #optionsList label{
	width: 100%;
	float: left;
}

#mailingList #submit{
	display: block;
	clear: both;
	margin: 1em auto 0 auto;
}

#mailingList fieldset{
	display: block;
	padding: 0 1.25em;
	margin: 0 auto;
}

#primary p.orgType{
	font: .7em/1.0 Georgia, "Utopia Std", Palatino, serif;
	text-indent: 0;
}

#primary .partner{
	padding: 1em;
}

#primary .company{
	font-family: "Futura Medium", "Gill Sans", Futura, Verdana, Trebuchet, Helvetica, Arial, sans-serif;
	font-size:		17px;
}

#primary .partner ul li{
    font-family: "Futura Medium", "Gill Sans", Futura, Verdana, Trebuchet, Helvetica, Arial, sans-serif;
	font-size:		14px;
}


#primary .description{
	font-family: "Futura Medium", "Gill Sans", Futura, Verdana, Trebuchet, Helvetica, Arial, sans-serif;
	font-size:		14px;
}

/* -- Newsletter Page -- */
.newsletter{
	border: 1px solid #3F3A2C;
	background: #FFFDD8;
	padding: 0.5em;
	overflow: hidden;
	clear: both;
}

	.newsletter h4{
		text-align: center;
		padding: 0.5em;
		padding-bottom: 0;
		font-weight: bold;
	}
	
	/* #primary added for specificity issue */
	
	#primary .newsletter p.subHead{
		font-style: italic;
		text-align: center;
	}
	
	#primary .newsletter ul.TOC{
		float: left;
		margin-left: 2em;
	}
	
		#primary .newsletter ul.TOC li{
			margin: 0.5em 1em;
		}
	
	.newsletter img.thumb{
		float: left;
		margin: 0 0 0.5em 4.5em;
	}
	
	#primary .newsletter a.download{
		border: 1px solid #3F3A2C;
		display: block;
		clear: both;
		width: 9em;
		color: #FFFBAD;
		height: 18px;
		background: #40382B;
		text-align: center;
		margin: 0 auto;
		padding: 0.5em 1em;
		font-style: normal;
		text-decoration: none;
	}
	
		#primary .newsletter a.download span{
			padding-left: 18px;
			background: transparent url('/images/icon.pdf.png') left center no-repeat;
		}
		
		#primary .newsletter a.download:hover{
			background-color: #FFFBAD;
			color: #40382B;
		}	


/*------   Secondary  -------*/

#secondary{
	width: 20em;
	padding: 0 1.25em 0 0;
	float: left;
}

#secondary h2{
	padding-bottom: 0.1em;
	margin-top: 1em;
}

#secondary p{
	font: .7em/1.2 Georgia, "Utopia Std", Palatino, serif;
	padding-bottom: 0.5em;
	font-style: italic;
}

#secondary #facts{
	background-position:top right;
	background-posi
	color: #FFFBAD;
	height: 190px;
}

#secondary div.facts1{background: black url(/images/facts1.jpg) no-repeat;}
#secondary div.facts2{background: black url(/images/facts2.jpg) no-repeat;}
#secondary div.facts3{background: black url(/images/facts3.jpg) no-repeat;}
#secondary div.facts4{background: black url(/images/facts4.jpg) no-repeat;}
#secondary div.facts5{background: black url(/images/facts5.jpg) no-repeat;}
#secondary div.facts6{background: black url(/images/facts6.jpg) no-repeat;}
#secondary div.facts7{background: black url(/images/facts7.jpg) no-repeat;}

#secondary #facts h2{
	text-align: right;
	border-top: none;
	border-bottom: 1px solid #FFFBAD;
	line-height: 1.0;
	padding-right: 0;
	margin-right: 7em;
	padding-top: 6em;
	color: #FFFBAD;
}

#secondary #facts p{
	text-align: center;
	font: 0.875em/1.2 Georgia, "Utopia Std", Palatino, serif;
	margin-top: 0.6em;
	/*background-color: black;
	opacity: 0.7;*/
	height: 3.15em;
	color: #FFFBAD;
}

#secondary #factsImg{
	position: relative;
	top: 0;
	left: 0;
}

em{
	font-weight: bold;
	font-style: normal;
}

a.donate{
	width: 250px;
	display: block;
	margin: 0 auto;
	text-align: center;
}

a.volunteer{
	text-align: center;
	background-color: #FFFDD8;
	font-weight: bold;
	display: block;
	margin: 0 auto;
	width: 12em;
	border: 1px solid #3F3A2C;
	font: 0.9em/2.0 "Futura Medium", "Gill Sans", Futura, Verdana, Trebuchet, Helvetica, Arial, sans-serif;

}

a.volunteer:hover{
	background: #3F3A2C;
	color: #FFFDD8;
}



/*-------   Footer  --------*/

#footer{
	width: 100%;
	clear: both;
	padding-top: 4em;
	margin-bottom: 5em;
}

#footer p{
	text-align: center;
	font: 0.7em/1.2 Georgia, "Utopia Std", Palatino, serif;
}

#footer p.copy{
	margin-bottom: 2em;
}

#footer p.willow a{
	color: #000;
	text-decoration: none;
	font-weight: bold;
	background: transparent url(images/willow_logo_black.png) bottom center no-repeat;
	padding-bottom: 45px;
}

.wishlist li{
	text-decoration:none;
}
.wishlist lh{
	font-weight:bold;
	text-decoration:underline;
}

.photocontain_right{
	width:200px;
	padding-left:20px;
	padding-bottom:10px;
	float:right;
	}

.photocontain_left{
	width:200px;
	padding-right:20px;
	padding-bottom:10px;
	float:left;
}	
	
.photo{
	width:200px;
	}
	
.photocaption{
	width:200px;
	font: 12px "Futura Medium", "Gill Sans", Futura, Verdana, Trebuchet, Helvetica, Arial, sans-serif;
	line-height:1.5;
	text-align:center;
	}