/* ==================================================================

 *  http://www.lagunadesantarosa.org

 *  created: 1/5/2007

 * ================================================================== */
 
/* ==================================================================
	Layout Template Classes
		The following classes are inserted into the body tag to
		select appropriate layout.
	
 	• template1 - Unique for the home page
	• template2 - 3 columns (left nav, content, sidebar) - with watermark
	• template3 - 2 columns (left nav, content) - with watermark
	• template4 - 3 columns (sidebar, content, sidebar)
	• template5 - 3 columns (left nav, content, sidebar) - no watermark
	• template6 - 2 columns (left nav, content) - no watermark
	
	All navigation styles are contained in the file 'navigation.css'.
	If a particular element falls within a nav container, such as an h2,
	it's attributes might be defined there.
		
 * ================================================================== */
 
* {padding:0; margin:0; border:0;}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 76%;
	margin: 0 0 20px 0;
	color: #333;
	background: url(images/bg_body.gif) left top repeat-x #3A6C8F;
	text-align:center;
}

p { 
	margin:0 0 1.5em 0;
	line-height:2em;
}

/* ==================================================================
 * Headings
 * ================================================================== */

h1, h2, h3, h4, h5, h6
{ color:#293378; margin:0 0 .7em 0; padding:0;/*line-height:1.3em */}
h1
{color: #1672af; letter-spacing: .1em;}
h2
{ font-size:125%; margin:0 0 1em 0; text-transform:uppercase; color: #044168; letter-spacing: .1em; font-weight:bold;} /*Page Titles and Home page headline*/
h3 {
font-size:105%; margin-bottom:.5em; text-transform:uppercase; color: #006E4F; letter-spacing: .25em; font-weight: bold;}
h4
{ font-size:95%; text-transform:uppercase; margin:0 0 .1em 0;}
h5
{ font-size:95%;color:#006E4F;text-transform:uppercase; margin:0 0 .1em 0;}
h6
{ font-size:100%;color:#006E4F; margin:0 0 .3em 0;}

/* ==================================================================
 * Lists
 * ================================================================== */

dd ol {
	padding: 0 0 1.1em 0;
}

ul, dl {
	margin:1em 0;
	padding:0;
}

ol {
	margin:1em 0;
	padding:0;
}

ol li {
	margin:0 0 0 1em;
	padding:0 0 1em 1em;
	line-height: 1.5em;
}

ul li {
	/*background:url("images/bullet_list.gif") no-repeat 0 .3em;*/
	margin:0 0 0 2em;
	padding:0 0 1em 1em;
	line-height: 1.5em;
}

ul ul {
	margin-bottom: 0;
	padding-bottom: 0;
}


/* ==================================================================
 * Links
 * ================================================================== */

a:link {
	color: #293378;
	text-decoration:none;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #81B7A9;
}
#apDiv1  a:link  {
	text-decoration: none;
	border-bottom-style: none;
	background-position: center;
	border-bottom-width: 0px;
}

a:visited {
	color: #293378;
	text-decoration:none;
	border-bottom:1px dotted #81b8aa;
}

a:hover {
	color: #293378;
	text-decoration: none;
	border-bottom:none;
}

a:active {
	color: #293378;
	text-decoration: none;
	border-bottom:1px dotted #81b8aa;
}




/* ==================================================================
 * Misc
 * ================================================================== */

.img_right {
	float: right;
	margin: 0 0 20px 20px;
}

.img_left {
	float: left;
	margin: 0 15px 20px 0;
}

.img_right_border {
	float: right;
	margin: 0 0 20px 20px;
	border:2px solid #81b8aa;
	padding:1px;
}

.img_left_border {
	float: left;
	margin: 0 20px 20px 0;
	border:2px solid #81b8aa;
	padding:1px;
}

img.border {
	border:2px solid #81b8aa;
	padding:1px;
	}
	
img.inline {
	display:inline;
	margin-bottom:-4px;
	margin-left:5px;
	}

.clear {
	clear: both;
}

.quote {
	padding: 25px 0 0 8px;
	background: url(images/bg_openquote.gif) left top no-repeat;
	color: #0d116c;
	font-weight: bold;
	line-height: 1.8em;
}
	.quote div {display:inline; position:relative;}
	.quote img {position:absolute; left: 10px; top: 6px;}
	
.factoid {
	padding: 0 0 0 8px;
	color: #0d116c;
	font-weight: bold;
	line-height: 1.8em;
}
	
strong {
	color:#006f57;
	}
	
#rule {
	border-bottom:1px dotted #81b8aa;
	margin:0 0 15px 0;
	clear: both;
	}
	

/* ==================================================================
 * Callout
 * ==================================================================*/


#callout {
	width:225px;
	position:relative;
	padding-left:25px;
	/*background:url(images/bg_border_column2.gif) top  left repeat-y;*/
	float:right;
	margin:10px 0 10px 25px;
	
	}

	.symbolQuoteOpen {
		display:block;
		color: #e26e21;
		background-color:transparent;
		font-family: Georgia, "Times New Roman", Times, serif;
		font-size: 48px;
		margin-left:-6px;
		padding-top:15px;
	}
		
	
	.symbolQuoteClose {
		display:block;
		float:left;
		color:#e26e21;
		background-color:transparent;
		font-family: Georgia, "Times New Roman", Times, serif;
		font-size: 48px;
		line-height:1em;
		text-align:right;
		width:100%;
	}
	
	.quote_credit {
		margin-top: -10px;
		float: right;
		text-align: right;
				
	
	}

/* ==================================================================
 * Layout
 * ================================================================== */

#container {
	font-size: 1em;
	line-height: 1.3em;
	width:950px;
	margin: 0 auto;
	text-align:left;

}

/*--------------Masthead is the top area containing primenav logo and slogan--------------*/
#masthead {
	background: url(images/bg_masthead.gif) left top no-repeat;
	width: 950px;
	position: relative;
	height: 144px;
	z-index: 50;
	text-align: right;
}
	#masthead h1 {display: none}
	
	.watermark {background: url(images/bg_masthead_watermark.gif) left top no-repeat !Important;}
	
	#slogan {
	position: absolute;
	left: 463px;
	top: 53px;
	}

/*--------------Banner is the large image--------------*/
#banner {
	position: relative;
	z-index: 1;
	background: #cbdde9;
}

	#home #banner {height: 347px; background: #fff;padding-left:15px;padding-top:10px}
	/* The 'sub' selector is used when an attribute is common across all SUB pages. In this case the height of the main image*/
	#sub #banner {height: 234px;width: 950px;}
		/* The following is to define the main image used per section*/
		#about #banner {background: url(images/img_banner_about.jpg) left top no-repeat;}
		#about #about_ecology #banner{background: url(images/img_banner_about_ecology.jpg) left top no-repeat;}
		#about #about_recreation #banner{background: url(images/img_banner_about_rec.jpg) left top no-repeat;}
		#about #about_history #banner{background: url(images/img_banner_about_history.jpg) left top no-repeat;}
		#about #about_maps #banner{background: url(images/img_banner_about_maps.jpg) left top no-repeat;}
		#about #about_related #banner{background: url(images/img_banner_about_links.jpg) left top no-repeat;}
		
		#contact #banner {background: url(images/img_banner_contact.jpg) left top no-repeat;}
		#foundation #banner {background: url(images/img_banner_foundation.jpg) left top no-repeat;}
		
		#programs #banner {
	background-image: url(images/img_banner_programs_edu.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}
		#programs #programs_edu #banner {background: url(images/img_banner_programs_edu.jpg) left top no-repeat;}
		#programs #programs_rp #banner {background: url(images/img_banner_programs.jpg) left top no-repeat;}
		#programs #programs_sr #banner {background: url(images/img_banner_programs_sr.jpg) left top no-repeat;}
		#programs #programs_sr_srpe #banner {background: url(images/img_banner_programs_srpe.jpg) left top no-repeat;}
		#programs #programs_sr_eb #banner {background: url(images/img_banner_programs_eb.jpg) left top no-repeat;}
		#programs #programs_sr_wr #banner {background: url(images/img_banner_programs_wr.jpg) left top no-repeat;}
		
		#learning #banner {
	background: url(images/img_banner_about.jpg) left top no-repeat;
}
		#get_involved #banner {background: url(images/img_banner_volunteer.jpg) left top no-repeat;}
		#email_signup #banner {background: url(images/img_banner_volunteer.jpg) left top no-repeat;}
		#donate #banner {background: url(images/img_banner_donate.jpg) left top no-repeat;}
		#news #banner {background: url(images/img_banner_news.jpg) left top no-repeat;}
		#store #banner {background: url(images/img_banner_store.jpg) left top no-repeat;}
		#sitemap #banner {background: url(images/img_banner_sitemap.jpg) left top no-repeat;}
		#free_goodies #banner {background: url(images/img_banner_goodies.jpg) left top no-repeat;}
		#press #banner {background: url(images/img_banner_press.jpg) left top no-repeat;}
		#photo_credits #banner {background: url(images/img_banner_credits.jpg) left top no-repeat;}
		#login #banner {background: url(images/img_banner_login.jpg) left top no-repeat;}
		#thankyou #banner {background: url(images/img_banner_credits.jpg) left top no-repeat;}
		
/*--------------Content is the white area below banner. Contains, content_left, content_middle, content_right--------------*/
#content {
	float: left;
	clear: left;
	width: 900px;
	position: relative;
	background-color: #fff;
	padding: 15px 25px 20px 25px;
}

.garden-party {
	float: left;
	clear: left;
	width: 900px;
	position: relative;
	background-color: #fff;
	padding: 15px 35px 5px 15px;

}

a:link .garden-party {
	color: #293378;
	text-decoration:none;
	border-bottom-style: none;
}



	/*Defaults For the Content Divs*/
	#content_left {float: left;}
	#content_middle {float: left;}
	#content_right {float: left;}
	/* End Defaults For the Content Divs*/
	
	
	/*Styles For Template 1*/
	.template1 #content_left {
		width: 302px; 
		padding: 0 20px 0 0;
		}
		
	.template1 #content_middle {
		padding: 0 40px 0 30px;
		width: 270px;
	/*	background: url(images/bg_border_column2.gif) left top repeat-y;*/
	
	}
	.template1 #content_right {
		padding: 0;
		width: 238px;
		/*background: url(images/bg_border_column2.gif) left top repeat-y;*/
		float:left;
	}
	.template1 #content_right img {
		margin:0 0 10px 0;
	}
	.template1 #content_right a {
		border:none;
	}
	.template1 #content_right p a {
		border-bottom:1px dotted #81B7A9;
	}
		
	/* END Styles For Template 1*/
	
	
	/*Styles For Template 2*/
	.template2 #content {
		background:url(images/bg_bird_watermark.gif) 700px bottom no-repeat #fff;
		}
		
	.template2 #content_left {
		width: 228px; 
		padding:0;
		}
.template2 #content_middle2 {
	margin: 0 0 0 30px;
	width: 318px;
	display: inline;
}
		
	.template2 #content_middle {
	margin: 0 0 0 30px;
	width: 318px;
	display: inline;
	}
	
	.template2 #content_right {
		margin: 0 0 0 30px;
		width: 250px;
		float:left;
	}
			
			
		.template2 #programs #content_right p,
		.template2 #programs #content_right h3
			{
				margin-left: 120px;
			}
		.template2 #programs_sr #programs_sr_bm #content_right p {
			margin:0 0 1em 0;
			line-height:0;
			}
	

		
	/* END Styles For Template 2*/
	
	/*Styles For Template 3*/
	.template3 #content {background:url(images/bg_bird_watermark.gif) 700px bottom no-repeat #fff;}
	.template3 #content_left {width: 228px; padding:0;}
	.template3 #content_middle {
		margin: 0 0 0 30px;
		width: 568px;
		display: inline;
	}
/*		.template3 #content_middle h3 {
			font-size:110%; margin-bottom:.5em; text-transform:uppercase; color: #006E4F; letter-spacing: .13em; font-weight: bold;
		}*/
	.template3 #content_right {
		display: none;
		width: 1px;
		float:left;
	}
	/* END Styles For Template 3*/
	
	/*Styles For Template 4*/
	.template4 #content_left {width: 187px; padding:0;}
	.template4 #content_middle {
		padding: 0 0 0 30px;
		margin: 0 0 0 30px;
		/*background: url(images/bg_border_column2.gif) left top repeat-y;*/
		width: 331px;
		display: inline;
	}
/*		.template4 #content_middle h3 {
			font-size:110%; margin-bottom:.5em; text-transform:uppercase; color: #006E4F; letter-spacing: .13em; font-weight: bold;
		}*/
	.template4 #content_right {
		margin: 0 0 0 47px;
		width: 239px;
		float:left;
	}
	/* END Styles For Template 4*/
	
		/*Styles For Template 5*/
	.template5 #content_left {width: 228px; padding:0;}
	.template5 #content_middle {
		margin: 0 0 0 30px;
		width: 350px;
		display: inline;
	}
/*		.template5 #content_middle h3 {
			font-size:110%; margin-bottom:.5em; text-transform:uppercase; color: #006E4F; letter-spacing: .13em; font-weight: bold;
		}*/
	.template5 #content_right {
		margin: 0 0 0 30px;
		width: 252px;
		float:left;
	}
		#programs #content_right p,
		#programs #content_right h3
		{
			margin-left: 120px;
		}
	/* END Styles For Template 5*/
	
		/*Styles For Template 6*/
	.template6 #content_left {width: 228px; padding:0;}
	.template6 #content_middle {
		margin: 0 0 0 30px;
		width: 568px;
		display: inline;
	}
/*		.template6 #content_middle h3 {
			font-size:110%; margin-bottom:.5em; text-transform:uppercase; color: #006E4F; letter-spacing: .13em; font-weight: bold;
		}*/
	.template6 #content_right {
		display: none;
		width: 1px;
		float:left;
	}
	/* END Styles For Template 3*/
	
	
/*--------------Footer--------------*/	
#footer {
	background: url(images/bg_footer.gif) right bottom no-repeat;
	padding: 10px;
	clear: both;
	width: 930px;
	position: relative;
	min-height: 27px;
	float:left;
}
	*html #footer { height: 27px;}
	

/* ----------------------------[ Form ]---------------------------- */

form {
	padding:0;
	margin:15px 0;
	
	}
	
form.donate {
	padding:0;
	margin:0;
	}
	
.form_item {
	padding-bottom:10px;
	}
	
fieldset {
	padding:15px;
	margin-bottom:20px;
	border:1px solid #afcadd;
	}
	
legend {
	background:#d8e2e9;
	color:#293378;
	font-weight:bold;
	padding:3px 10px;
	margin:10px;
	}

select {
	color:#044168

	}
	
.calendar {
	width:100px;
	}
	
	
.radio {
	border:none;
	}
	
.checkbox {
	border:none;
	}
	
.checkbox_right {
	border:none;
	display:inline;
	text-align:right;
	}	

focus {
	cursor:auto;
	}


  
label
	{
	width: 10em;
	float: left;
	text-align: right;
	margin-right: 0.5em;
	display: block;
	color:#044168;
	font-weight:bold;
	background-color:#ffffff;
	}

  
label.long {
	width:80%;
	text-align:left;
	}
	
label.textarea {
	width:100%;
	text-align:left;
	}

label.checkbox
	{
	width: 20em;
	}


input {
	padding:3px;
	color:#885454;
	border:1px solid #afcadd;
	background:#ffffff;
	}
	
input.noborder {
	border:none;
	}
	
textarea {
	padding:3px;
	color:#885454;
	border:1px solid #afcadd;
	background:#ffffff;
	}

.nicebutton {
  	color:#fff;
	padding:3px;
	border:none;
  	background-color:#293378;
    cursor:pointer;
	float:right;
	margin-left:15px;
  }
  
 .required {
 	color:#a30234;
	font-weight:bold;
	font-size:1.2em;
	padding-right:5px;
	}



/* ---------------------[ Tables ] */

table {
	border: 1px solid #b6cbd9;
	margin-bottom:20px;
	}
	

td {
	padding:20px;
	border-bottom: 1px solid #b6cbd9;
	}
		
td.nobottom {
	border-bottom: none;
	}
	
td.emphasis {
	border-right: 1px solid #b6cbd9;
	text-align:right;
		}
		
td.emphasis_nobottom {
	border-bottom: none;
	border-right: 1px solid #b6cbd9;
	text-align:right;
		}

table.donate {
	border: 1px solid #b6cbd9;
	margin-bottom:20px;
	}
	

table.donate td {
	padding:10px;
	border-bottom: 1px solid #b6cbd9;
	}
		
table.donate td.nobottom {
	border-bottom: none;
	}
	
table.donate td.emphasis {
	border-right: 1px solid #b6cbd9;
	text-align:right;
		}
		
table.donate td.emphasis_nobottom {
	border-bottom: none;
	border-right: 1px solid #b6cbd9;
	text-align:right;
		}
#apDiv1  a:hover {
	text-decoration: none;
	border-bottom-style: none;
	background-position: center;
	border-bottom-width: 0px;
}

#apDiv2 {
	position:absolute;
	width:182px;
	height:108px;
	z-index:51;
	left: 23px;
	top: 15px;
	text-decoration: none;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

/* ==================================================================
 * Home page videos
 * ================================================================== */

#vid-education, #vid-restoration, #vid-conservation {
	width:33%;
	float:left;
}

#vid-education img, #vid-restoration img, #vid-conservation img {
	margin-top:5px;
}