/***********************************************/
/* 3 col - left navigation, center content, right related.css
/***********************************************/

/* For "urn", Partial URLs are interpreted relative to the source of the style sheet, not relative to the document. */
/* http://www.w3.org/TR/CSS21/syndata.html#uri */

/* To deal with IE deficiencies, see  http://www.positioniseverything.net/articles/cc-plus.html */

/* *********************************************/
/* Site Color Pallet

	9020A0	purple
	E7C731	related content, tan, gold
	60A0FF	light sea
	b6b852	green mud
	7ab852	bright ocean
	609040	light ocean
	577e84	dark ocean (banner background)
	3f5b5f	dark ocean shadow

	d0d25e	nav header
	ffffcc	nav backgroud, sun
	83c69b	menu header
	bec0dd	menu header highlight

	EEEEBB	highlight, nav backgroud highlight
	9bc3bd	link ocean

	339999	table h1
	99BB99	table h2
	D9FFDD	table guide

	ffffd9	body background

	background: url('../image/interface/') 0% 0% repeat-x;

	horizontal gradient ends at 274px
	horizontal gradient ends at 30px
	Linear gradient.
	Offset: 20.0
	dithering: enable
	adaptive suprsampling: enable
		max depth: 3
		threshold: 0.20
*/
/***********************************************/

/***********************************************/
/* HTML tag styles                             */
/***********************************************/ 

body{
	font-family: Arial,sans-serif;
	color: #222222;
	/* background-color: #FFFFCC; */
	background-color: #ffffd9;
	line-height: 1.166;	
	margin: 0em;
	padding: 0em;
	/* Legacy */
	font-family: Arial, Helvetica, sans-serif; font-size: 16px;
}

a{
	/* 9ac1c9 */
	color: #2070C0;
	text-decoration: none;
}


/*
a:border_hover {
	color: #2070C0;
	text-decoration: none;
}
*/
img.border_hover {
	/* Use same color as BG to hide border when not hovering mouse. */
	 border: 2px solid #ffffd9;
}

a:visited{
	/*
	color: #609040;
	*/
	color: #409020;
	text-decoration: none;
}

a:hover{
	color: #9020A0;
	text-decoration: underline;
	background-color: #EEEEBB;
}
img.border_hover:hover {
	border: 2px solid #471ea4;
	color: #9020A0;
	text-decoration: underline;
	background-color: #EEEEBB;
}



.no_border {
	border-style: none;
}

a.dest {
	color: #222222;
	background-color: #ffffd9;
	text-decoration: none;
}



h1{
	font-family: Verdana,Arial,sans-serif;
	font-size: 140%;
	/*color: #334d55;*/
	color: #678084;
}

h2{
	font-family: Arial,sans-serif;
	font-size: 134%;
	/* color: #006699; */
	/* color: #9abfc5; */
	color: #678084;
}

h3{
	font-family: Arial,sans-serif;
	font-size: 124%;
	/*color: #334d55;*/
	color: #678084;
}

h4{
	font-family: Arial,sans-serif;
	font-size: 110%;
	/* color: #333333;
	color: #79969b;
	*/
	color: #54686b;
}

h5{
	font-family: Verdana,Arial,sans-serif;
	font-size: 105%;
	/* color: #334d55; */
	color: #404f52;
}

h6{
	font-family: Verdana,Arial,sans-serif;
	font-size: 100%;
	/* color: #add7de; */
	color: #181e1f;
}

ul{
	list-style-type: square;
}

ul ul{
	list-style-type: disc;
}

ul ul ul{
	list-style-type: circle;
}

ul ul ul ul{
	list-style-type: none;
}

label{
	font-family: Arial,sans-serif;
	font-size: 100%;
	font-weight: bold;
	color: #334d55;
}

dd {
	padding-bottom: 0.8em;
}
/* ===== Standard Styles ===== */
.nobr {white-space: nowrap}

.underline{
	text-decoration: underline;
}

/* .normal {font-style:normal;} */
.italic {font-style:italic;}
.oblique {font-style:oblique;}
.bold {font-weight:bold;}
.underline {text-decoration: underline;}



/* ====== Link Laybout Table ====== */
.layout table {
	border: 0px;
	border:	0.0em
}

.link_layout_table {
	border-collapse:	collapse;
	display:	inline;

}
.link_layout_table td {
	padding: 0.1em 0em 0.1em  1em;
}

/* ===== link_list  ===== */
.link_list


/* ====== Data Tables ====== */
/*  border="0" cellpadding="0" cellspacing="0" */

.data_table,.data_row_header_1,.data_row_header_2 {
	border:     	0.0em;
	border-collapse:	collapse;
	/*
		border-collapse:	separate;
		border-spacing:	0.0em;
	*/
}

.data_col_header_1,.data_col_header_2,.data_col_header_2_label {
	padding:       	0.5em;
}

.data_col_header_1 {
	font-weight: bold;
	font-size: 1.0em;
	color: #FFFFFF;
	background-color:	#339999;
	text-align:	center;
}

.data_col_header_1_link {
	color: #FF0000;
}



a.data_col_header_1_link {
	color: #9CCCFF;
}
a.data_col_header_1_link:visited {
	color: #CCDF9C;
}
a.data_col_header_1_link:hover {
	color: #2070C0;
}


.data_col_header_2,.data_col_header_2_label {
	font-weight: bold;
	font-size: 0.9em;
	color: #FFFFFF;
	background-color:	#99BB99;
	text-align:	center;
}
.data_col_header_2_label {
	text-align:	left;
}


a.data_col_header_1_link {
	color: #9CCCFF;
}
a.data_col_header_1_link:visited {
	color: #ACFFAC;
}
a.data_col_header_1_link:hover {
	color: #2070C0;
}

/*em.data_col_header_2_label {
	font-style:normal;
	text-decoration: underline;
	font-weight:bold;
}
*/

/*
td.data_row_header_1_h_guide,.data_row_header_1_link_h_guide {
	background-color:	#C0FFCC;
}
.data_row_header_1_link {
	color: #AAAAFF;
}
*/

/* Body BG #FFFFCC; */

/* ---------------------------------- */
/* Alternating background color of rows, to make reading across a row easier. */
/* ---------------------------------- */


.data_row_label_normal,.data_row_normal {
	/* background-color:	#577E84; */
	/* background-color:	#DDFFAA; */
	/* background-color:	#F0FAD0; */
	background-color:	#FFFFCC;
	padding:       	0.3em;
}

.data_row_label_normal {
	text-align:	left;
}

.data_row_normal {
	text-align:	center;
}

.data_row_label_h_guide,.data_row_h_guide {
	/* background-color:	#C0FFCC; */
	background-color:	#D9FFDD;
	padding:       	0.3em;
}
.data_row_label_h_guide {
	text-align:	left;
}
.data_row_h_guide {
	text-align:	center;
}

.data_row_label_v_guide,.data_row_v_guide {
	background-color:	#F0FAD0;
	padding:       	0.3em;
}
.data_row_label_v_guide {
	text-align:	left;
}
.data_row_v_guide {
	text-align:	center;
}

.data_row_label_hv_guide,.data_row_hv_guide {
	background-color:	#E4FFDD;
	padding:       	0.3em;
}
.data_row_label_hv_guide {
	text-align:	left;
}
.data_row_hv_guide {
	text-align:	center;
}

/* ----- Custom Table ---- */
.data_row_CASA {
	padding:       	0.3em;
	text-align:	left;
}
	


/* ===== Newsletter ====== */

.body_content {
	margin:	0.2em;
}

.newsletter_description_container {
	/* 
	display: inline;
	float: left;
	display: inline;
	margin: 3px;
	border: 1px solid #ffffff;
	text-align: center;
	float: none;
	margin: 0.5em;
	float: left;
	float: none;
	display:	inline;
	*/
	display:	block;
	float: left;
	margin: 0.5em;
}


.newsletter_cover_container {
	/*
	display:	inline;
	display: block;
	margin:	2em;
	border:	10px;
	*/
	margin-right: 0.5em;
	float:	left;
	display:	block;
	text-align: center;
}



.newsletter_header_container {
	/*
	float: left;
	margin: 0.5em;
	display:	inline;
	*/
	display:	block;
	float: none;
	text-align: center;
}

.newsletter_issue {
	/*
	font-size: 18px;
	border-width: 0.5em;
	display:	block;
	text-align: center;
	*/
	text-align: left;
	display:	block;
	font-size:	1.3em;
}

.newsletter_thumbnail_container {
	/*
	display:	inline;
	*/
	text-align: center;
	display: block;

}

.newsletter_thumbnail {
	/*
	text-align: center;
	display: block;
	float: none;
	height:	15em;
	width:	24ex;
	*/
	text-align: center;
	display:	inline;
	float: left;
	/*	width: 224px; */
	width:	14em;
}
.newsletter_summary_container {
	/* If 	"float:	none;", then ordered list list items may line wrap. */
	/* If 	"float:	left;", items don't line wrap, and entire list might render *under* the previous block.*/

	/*
	display: inline;
	float:	right;
	margin: 0.5em;
	border-width: 0.5em;
	display: block;
	float:	left;
	display:	block;
	*/
	display: inline;
	text-align: left;
	float:	none;
	list-style-position: inside;
}


.newsletter_download {
	/*
	float:	left;
	display:	block;
	*/
	font-size:	1.1em;
	white-space: nowrap;
	float:	none;
	display:	inline;
}

.newsletter_contents_container {
	/*
	margin: 0.2em;
	float:	left;
	float:	none;
	display: block;
	*/
	display: inline;
}

.newsletter_contents_table {
	/*
	float:	none;
	width:	100%;
	*/
	width:	30em;
	display: block;
}

.newsletter_contents {
	/*
	float:	none;
	float:	left;
	display: block;
	vertical-align: top;
	*/
	display: inline;
}

/***********************************************/
/* Layout Panels                               */
/***********************************************/

#header_panel{
	padding: 0px 0px 0px 0px;
	/* border-bottom: 1px solid #cccccc; */
	width: 100%;
	/* 
	text-align:	center;
	*/
	text-align:	center;
	/* background-color: #577E84 */
	/* Gradient
	Offset: 50
	Change from 0px to 300px
	*/
	background: url('../image/interface/gradient hor - nav backgroud to dark ocean.png') 0% 0% repeat-y;
}

#header_panel a{
	color: #9ABFC5;
}

/* header_nav_IE_7 is column number specific. */
#header_nav {
	float: left;
	width: 20%;
	margin: 0em;
	padding: 0em;
}

#nav_panel{
	float: left;
	width: 20%;
	margin: 0em;
	padding: 0em;
	/* background-color: #eeeeee; */
	background: url('../image/interface/gradient hor - nav backgroud to dark ocean.png') 0% 0% repeat-y;
	/*
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	*/
}

#footer_panel{
	clear: both;
	/* border: 1px solid #cccccc; */
	font-size: 75%;
	color: #888888;
	padding: 10px 10px 10px 10px;
	text-align:	center;
}

#footer_panel img{
	padding: 4px 4px 4px 10px;
	vertical-align: middle;
}

/***********************************************/
/* Components                                  */
/***********************************************/

#page_header_name, #page_sub_header_name{
	margin: 0;
	padding: 0 0 0 10px;
	color: #9ABFC5;
}
#page_header_name {
	/* h1 {  font-size: 1.8em; font-weight: bold; color: #9ABFC5} */
	 font-size: 140%;
}

#page_header_name_logo_left{
	padding: 0px 15px 0px 2px;
	vertical-align: middle;
}

#page_header_name_logo_right{
	padding: 0px 2px 0px 15px;
	vertical-align: middle;
}

#site_logo{
	/*
	<img id="site_logo" src="assets/image/interface/oro loma sanitary district - seal - 110x110.png" alt="oro loma sanitary district - seal" width="110" height="110" />

	position:absolute;
	left:47px;
	top:7px;

	position:absolute;
	left:60px;
	top:28px;


	<img id="site_logo" src="asset/image/object/oro loma sanitary district - seal - 130x130x8.png" alt="oro loma sanitary district - seal" width="130" height="130" />
	position:absolute;
	left:65px;
	top:14px;
	*/
	position:absolute;
	left:43px;
	top:10px;

	z-index: 5;
	/* Firefox uses the property opacity:x for transparency, while IE uses filter:alpha(opacity=x).  The CSS3 syntax for transparency is opacity:x.  */
	opacity:0.2;filter:alpha(opacity=20);
}

/************* #page_header_links styles **************/

#page_header_links{
	padding: 0px 0px 5px 10px;
	color: #cccccc;
}

#page_header_links img{
	display: block;
}

#page_header_links a {
	font-size: 90%;
	padding: 0 4px 0 0;
}

/************* #page_sub_header_links styles *************/

#page_sub_header_links{
	font-size: 80%;
	padding: 2px 0px 0 10px;
}


/*************** .page_name styles **************/

.page_name{
	margin: 0em;
	padding: 0px 0px 0px 10px;
	text-align:	center;
	/* color: #9ABFC5; */
	text-align: center;
}


/************** .section_div styles ***************/

h1.section_div, h2.section_div, h3.section_div, h4.section_div, h5.section_div, h6.section_div{
	text-align:	center;

}
.topic_div {
	padding-top: 1em;
	border-top: 1em;
	margin-top: 1em;

	padding-bottom: 0em;
	border-bottom: 0em;
	margin-bottom: 0em;
}
p.lead {
	padding-top: 0em;
	border-top: 0em;
	margin-top: .5em;
}

/************** .leadin_right/left (image) styles */

.leadin_right{
	float: right;
	padding: 0px 0px 0px 15px;
	vertical-align: top;
}

.leadin_left{
	float: left;
	padding: 0px 15px 0px 0px;
	vertical-align: top;
}

.caption_left, .caption_right{
	font-style:italic;
	padding: 0px 0px 5px 0px;
}
/* ====== Semantic ====== */


/* ====== Shelf ====== */
/* Place items on atop the other with padding in between */

h1.shelf, h2.shelf, h3.shelf, h4.shelf, h5.shelf, h6.shelf {
	margin-top: 0px;
}

p.shelf {
	clear:both;
}

div.shelf {
	clear:both;
	padding-top: 1.5em;
}

ul.shelf {
	padding:0;
	margin:0;
	list-style-type:none;
}

li.shelf {
	clear:both;
	padding-top: 1.5em;
}

.shelf_bottom {
	clear:both;
}


/* ====== Stack ====== */
/* Place items on atop the other without padding in between */
.stack {
	clear:both;
}

/************** .main_content styles ***************/

.main_content{
	padding: 5px 5px 5px 10px;
	font-size: 100%; 
}


/************** .announcement styles ***************/

.announcement {
	padding: 0px 5px 0px 10px;
	border: 0px;
	clear:both;
}

/* Find in column specific CSS:  .announcement img{ */

/* Example usage: the date a news item was posted. */
.announcement_metadata{
	padding: 0px 0px 0px 0px;
	position:relative;
	top: -1.2em;

	/*
	line-height: 0;	
	*/
	font-size: 75%;
	color: #888888;
}

/************** .story styles *****************/

.story{
	clear: both;
	padding: 10px 0px 0px 10px;
	font-size: 80%;
}

.story p{
	padding: 0px 0px 10px 0px;
}


/************* #search styles ***************/

#search{
	padding: 5px 0px 5px 10px;
	/* border-bottom: 1px solid #cccccc; */
	font-size: 90%;

	position:relative;
	z-index: 10;
}

#search form{
	margin: 0em;
	padding: 0em;
}

#search label{
	display: block;
	margin: 0em;
	padding: 0em;
	color: #678084;
}


/*********** #nav_bar link styles ***********/

#nav_bar ul a:link, #nav_bar ul a:visited {display: block;}
#nav_bar ul {list-style: none; margin: 0; padding: 0;}

/* Hack to fix IE6.0/Win's broken rendering of block-level anchors in lists */
#nave_bar li {border-bottom: 1px solid #EEE;}
/* Setting for browsers that don't need the IE6.0 hack. */
html>body #nav_bar li {border-bottom: none;}


/*********** .related_links styles ***********/
.related_links{
	position: relative;
	margin: 0em;
	font-size: 90%;
	/* padding: 0px 0px 10px 10px; */
}

.related_links h3{
	font-size: 100%;
	padding: 10px 0px 2px 10px;
	color: #405c60;
	background: url('../image/interface/gradient vert - nav background to nav header.png') 0% 0% repeat-x;

}
.related_links h4{
	font-size: 90%;
	padding: 10px 0px 2px 10px;
	color: #405c60;
}

.related_links ul li{
	padding: 6px 5px 2px 10px;
}
.related_links a:link,
.related_links a:visited {
	display: block; 
}

#related_decoration {
	/*
	vertical-align: bottom;
	top:	10em;
	*/
	position: relative;
	top:	5em;
}
#related_filler {
	/*
	vertical-align: bottom;
	top:	10em;
	*/
	position: relative;
	top:	5em;
	opacity:0.2;filter:alpha(opacity=20);
}
/************** #advert styles **************/

#advert{
	padding: 30px 0px 10px;
}

#advert img{
	display: block;
}

/************** #related_content styles **************/

.related_content{
	margin: 0em;
	padding: 5px 0px 20px 10px;
	font-size: 80%;
	border-left: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	/* background: url('../image/interface/gradient hor - nav backgroud to gold - 2560x1.png') 0% 0% repeat-y; */
	/* Opacity: 128  Offset: 0  Gradient lenght: 128px */
	background: url('../image/interface/gradient hor - related content to nav background.png') 0% 0% repeat-y;

	position: relative;
	margin: 0em;
	font-size: 90%;

}

.related_content p{
	padding: 2px 0px 2px 0px;
}


.related_content h3{
	padding: 10px 0px 2px 10px;
	color: #405c60;
	background: url('../image/interface/gradient vert - nav background to nav header.png') 0% 0% repeat-x;
}

.related_content h4{
	font-size: 110%;
	padding: 10px 0px 2px 10px;
	color: #405c60;

}

/* .related_content ul a:link, .related_content ul a:visited {display: block;} */
.related_content ul {list-style: none; margin: 0; padding: 0;}

.related_content li { padding: 5px 2px 5px 2px; display: block; }
/* ===== Horivontal drop down menu  ===== */

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

/*#slider {width:459px} */

.menu_accordion {
	/*
	display: block;
	margin: 0px 8px 0px 0px;
	padding: 0em;
	font-size: 90%;
	*/

	/* If "position: relative;", then in IE 6.7 the expansion arrows will disappear and the only the text in the header will be clickable.  */

}

/* Hack to fix IE6.0/Win's broken rendering of block-level anchors in lists */
.menu_accordion li {border-bottom: 1px solid #EEE;}
/* Setting for browsers that don't need the IE6.0 hack. */
html>body .menu_accordion li {border-bottom: none;}


.menu_accordion_header_content {
	/* Need a separate menu_accordion_header_content <div> container or Firefox 3.0.6 will somehow enlarge the header beyond it's parent's boundary. */

}
.menu_accordion_header {
	font-weight:bold;
	font-family: Arial,sans-serif;
	/*
	color: #883333;
	background:url('../image/interface/gradient vert - body background to menu section header.png') 0% 0% repeat-x;
	*/
	color: #2070C0;
	border:1px solid #2070C0;
	/* Offset: 30.0; Gradient length: 20 px */
	background:url('../image/interface/gradient vert - nav background to menu header.png') 0% 0% repeat-x;

	padding: 4px 2px 4px 10px;
	font-size: 90%;

}
.menu_accordion_header:hover {
	/*
	background:url('../image/interface/gradient vert - black to white.png') 0% 0% repeat-x;
	background:url('../image/interface/gradient vert - link hover bg to menu section header.png') 0% 0% repeat-x;
	*/
	color: #9020A0;
	border:1px solid #9020A0;
	background:url('../image/interface/gradient vert - nav background highlight to menu header highlight.png') 0% 0% repeat-x;
}


.menu_accordion_expansion {
	/*
	Using "position:relative;" messes up the expansion arrow positioning in IE 6.
	position:relative;
	*/

	float: right;
	padding-right: 5px;
}

.menu_accordion_content {
	/*
	overflow:hidden;
	padding:15px;
	width: 100%;
	*/ 

	/* This fixes the IE 6 bug where animated menu sliding leaves existing menu selections expanaded.
	Perhaps the bug relates the the IE 6 "overflow: visible" bug.
	http://www.quirksmode.org/css/overflow.html
	*/
	overflow:hidden
}

.menu_accordion_text {
	/*
	padding:15px;
	border:2px solid #609040;
	*/
	border-top:none;
}

.menu_accordion_text ul {list-style: none; margin: 0px; padding: 0px;}
.menu_accordion_text ul ul {list-style: none; margin: 0px; padding-left: 1.5em;}
/*
.menu_accordion_text li {border: 0px;}
.menu_accordion_text  li {margin-left: 2.5em; border-left: 1em}
*/

.menu_accordion_text a {
	display: block;
	border-top: 1px solid #520099;
	padding: 2px 0px 2px 10px;
}

/*
.menu_accordion_text > a:first {
	border-top: 0px;
}
*/

/* ================================================== */
.related_content_head {
	background: url('../image/interface/gradient vert - nav background to nav header.png') 0% 0% repeat-x;
}

.publication_title {
	font-style:italic;
}
/* When printing, print content of URLs */
@media print {
	a:after{
		content: attr(href)
	}
}

.prerendered {
	width: 100%;
}

.preload {
	display: none;
}

/*
==================================================
Poster Contest
*/
img.poster {
	width: 100%;
}

.poster_info {
	/*
	color: #334d55;
	*/
	color: #678084;
	font-family: Arial,sans-serif;
	font-weight: bold;
}

table.poster_info {
	border:     	0.0em;
	border-collapse:	collapse;
	width: 100%;
}

.poster_info_name {
	font-size: 124%;
}
.poster_info_placement {
	font-size: 100%;
}

.poster_nav {
	float: right;
	text-align: right;
/*	

vertical-align: ;

*/
}

/*
==================================================
Newsletter
*/
.newsletter_spread_body {
	background-color: #ffffff;
}
.newsletter_spread_header {
	background-color: #ffffff;
	text-align:	center;
	float: center;
}

/*
==================================================
Media Player
*/


/* Remove ugly system borders links. */
a img 	{ 	border:0 }
a.player:active,a.player:focus,a.player:hover,a.player:visited{ 
	text-decoration: none;
	-moz-outline-style:none;
}

/* player container */
a.player {
	border:2px solid #fff;
	outline:1px solid #333;
	-moz-outline-radius:4px;
	cursor:pointer;
	float:left;
	text-align:center;
	display:block;
	background:#000 url('../image/interface/video/gradient hor - metadata.png') repeat-x;
	background-repeat:no-repeat;
	background-position: top center;
}

a.player_dynmaic {
	width:100%;
}

a.player_720x480 {
	width:720px;
	height:480px; /* If contols autoHide */
	height:508px; /* If contols visible. */
}

/* play button */
a.player img {
	opacity:0.6;filter:alpha(opacity=60);
}

a.player_dynamic img {
	position: relative;
	top: 50%;
}
a.player_720x480 img {
	margin-top:175px; /* Using 85px high "video/play.png" */
}

/* metadata area */
a.player div.metadata {
	opacity:0.75;filter:alpha(opacity=75);
	background:#000 url('../image/interface/video/gradient hor - metadata.png') repeat-x;
	color:#ffffff;
	text-align:left;
	font-family:"bitstream vera sans","trebuchet ms";
	border-top:1px solid #ccc;
}

a.player_dynamic div.metadata {
	padding: 0.5em 2em 0.5em 2em;
	position: relative;
	top: 72%; /* If contols visible. Using 85px high "video/play.png" */
}

a.player_720x480 div.metadata {
	margin-top:164px; /* If contols autoHide. Using 85px high "video/play.png" */
	margin-top:194px; /* If contols visible.  Using 85px high "video/play.png" */
	padding:5px 2em 5px 2em;
}

a.player div.metadata span.title {
	font-size: 1.25em;
	color:#ffffff;
}

a.player div.metadata span.duration {
	color:#99FF99;
	display:block;
}

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

.intermingle_left{
	float: left;
	padding: 5px 15px 0px 0px;
}

.intermingle_right{
	float: right;
	padding: 5px 0px 0px 15px;
}

.caption_left, .caption_right{
	font-style:italic;
	padding: 0px 0px 5px 0px;
}