/*************************************
	Auto Clear Styles 
*************************************/
	.clear:after {
	    content: "."; 
	    display: block; 
	    height: 0; 
	    clear: both; 
	    visibility: hidden;
	}
	/* Hides from IE-mac \*/
	 * html .clear {height: 1%;} 
	/* End hide from IE-mac */
	.clearRt:after {
	    content: "."; 
	    display: block; 
	    height: 0; 
	    clear: right; 
	    visibility: hidden;
	}
	/* Hides from IE-mac \*/
	 * html .clearRt {height: 1%;} 
	/* End hide from IE-mac */
/*************************************
*************************************/

body, input, select, th, td, p  {
	color: #333333;
	font-family: Arial, sans-serif;
	font-size: 11px;
	behavior: url("/media/css/csshover.htc");
}


/*************************************
	default link styles for the site 
*************************************/
:link, :visited {
	text-decoration: underline;
	color: #548BA9;
}
:link:focus, :visited:focus {
	border: none;
}
:link:hover {
	text-decoration: none;
	color: #548BA9;
}
:visited:hover { 
	text-decoration: none;
	color: #548BA9;
}
:link:active, :visited:active {
	text-decoration: none;
	color: #548BA9;
}
/*************************************
*************************************/

h1, h2 {
	color:  #215a72;
	font-weight: normal;
 	margin-bottom: 12px
 }
h1 { font-size: 16px;font-weight: bold;}
h2 {margin-top: -9px;font-weight: bold; }

/*************************************
	content headings with colored bg 
	bg color changes based on section 
	
	see section css for color definitions
*************************************/
h5 {
	color: #FFFFFF;
	padding: 4px;
	line-height: 12px;
	font-size: 12px;
	margin-top: 20px;
	margin-bottom: 8px;
}
/*************************************
*************************************/

/*************************************
	formating for the images on the 
	landing pages
	
	color for the border is defined
	in the section css
*************************************/
img#landingRight, img#landingLeft {
	float: left;
	border-width: 1px;
	border-style: solid;
	margin-top: 10px;
}
img#landingLeft {
	margin-right: 10px;
}
img.contentImage {
	float: left;
	border-width: 1px;
	border-style: solid;
	margin-right: 10px;
	margin-bottom: 10px;

}
/*************************************
*************************************/

div#content p.photoCaption, div#content p.photoCaptionRight {
	margin:  2px 0 0 0;
	font-size: 9px; 
}
div#content p.photoCaptionRight {
	float: right;
}
p.attribution {
	text-align: right;
	font-size: 10px;
	font-style: italic;
	margin-top: 4px;
}

div#content p#sectionIntro,
div#content p#breadcrumb {
	margin: 12px 0 0 0;
	padding: 0;
}
div#content p#breadcrumb {
	margin: 0 0 12px 0;
}
div#content p {
	margin: 0 4px 10px 4px;
}
div#content p.contentFooter {
	margin: 25px 4px 10px 4px;
	font-weight: bold;
}
div#content p.contentFooterDetail {
	margin: -8px 10px 10px 10px;
}
div#content p.title {
	margin: 6px 4px 3px 4px;
	font-weight: bold;
}
div#content p.detail {
	margin: -4px 4px 3px 4px;
}
div#content p.articleDate,
div#content p.articlePublication {
	margin: 0 4px 1px 4px;
	font-weight: normal;
}
div#content p.link {
	margin: -6px 4px 10px 4px;
}
div#pageWrapper {
	width: 800px;
	margin: 0 auto;
}
div#header {
	padding: 22px 0px 5px 0px;
}
form#search {
	display: none;
	float: right;
	margin-top: 24px;
}
form#search input {
	padding: 4px;
	width: 165px;
}
form#search img {
	padding-left: 5px;
}
div#header img {
}

/* ******************************* */
/* list styles for top navigation */
	ul#navTop {
		/* center the first level list items */
		text-align: left;
		padding: 5px 152px 5px 104px;
		position: relative;
		font-family: Helvetica, san-sarif;
		font-size: 12px;
	}
		ul#navTop li {
		padding: 5px 0;
		/* center the first level list items */
		display: inline;
		position: relative;
		margin-right: 10px;
		padding-left: 18px;
		background-image: url("/media/images/template/nav/navDots.gif");
		background-repeat: no-repeat;
		background-position: 0px 10px;
	}
	ul#navTop li a {height: 100%;}
	ul#navTop li.last {
		margin-right: 0;
	}
	ul#navTop li.first {
		background-image: none;
		margin-left: 0;
		padding-left: 0;
	}
	ul#navTop ul {
		position: absolute; 
		left: 15px;
		display: none;
		text-align: left;
		background-color: #FFFFFF;
		border:1px solid #000000;
	}
	
	/* Style the list items in all the child ul's */
	ul#navTop ul li {
		position: relative;
		display: block;
		background-image: none;
		margin: 0;
		padding: 0;
		/* just in case more levels are added */
		float: left;
		clear: both;
	}
	
	/* When you hover a list item, display the child ul (flyout) */
	ul#navTop li:hover ul  {
		display: block;
	}
	
	/* Link styles for the top level ul */
	ul#navTop :link, 	
	ul#navTop :visited,
	div#content h5 :link,
	div#content h5  :visited {
		color: #FFFFFF;
		text-decoration: none;
	}
	ul#navTop :link:focus, 	
	ul#navTop :visited:focus,
	div#content h5 :link:focus,
	div#content h5  :visited:focus {
	
	}
	ul#navTop :link:hover, 
	ul#navTop :visited:hover,
	div#content h5 :link:hover,
	div#content h5  :visited:hover {
		color: #215A72;
		color: #FFFFFF;
		text-decoration: underline;
	}
	ul#navTop :link:active, 	
	ul#navTop :visited:active,
	div#content h5 :link:active,
	div#content h5 :visited:active{
	
	}
/* ******************************* */
	
	/* Link styles for the child ul's */
	ul#navTop ul :link, 	
	ul#navTop ul :visited {
		color: black;
		text-decoration: none;
		font-weight: normal;
	}
	ul#navTop ul :link:focus, 	
	ul#navTop ul :visited:focus {
		border: none;
	}
	ul#navTop ul :link:hover, 
	ul#navTop ul :visited:hover  {
		color: red;
	}
/* ******************************* */
	
/* ******************************* */
/* list styles for left navigation */
	ul#navLeft {
		/* positioning this relative will give a more 
		reliable X-browser positioning of the flyouts */ 
		position: relative;
		margin: 0 0 0 5px;
	}
	ul#navLeft li,
	ul#navLeft li a {
		display: block;
		background-position: 0 0;
		background-repeat: no-repeat;
		text-indent: -5000px;
		text-decoration: none;
	}
	ul#navLeft li a {
		height: 82px;
		width: 82px;
	}
	ul#navLeft li {
  	background-position: 0 -84px;
		width: 100%;
		/*gets rid of the gap in ie that appears with 
		display block of the fly out menus*/
		float: left;
		clear: left;
		/* positioning this relative will give a more 
		reliable X-browser positioning of the flyouts  
		position: relative;*/
	}
	
	ul#navLeft li#thegreeneffect,
	ul#navLeft li#thegreeneffect a {
		background-image: url("../images/template/nav/greenBackground.jpg");
	}
	
	ul#navLeft li#thebody,
	ul#navLeft li#thebody a {
		background-image: url("../images/template/nav/bodyBackground.jpg");
	}
	ul#navLeft li#mindspirit,
	ul#navLeft li#mindspirit a {
		background-image: url("../images/template/nav/spiritBackground.jpg");
	}
	ul#navLeft li#fuelnutrition,
	ul#navLeft li#fuelnutrition a {
		background-image: url("../images/template/nav/fuelBackground.jpg");
	}
	ul#navLeft li#thegreeneffect.activeSection a,
	ul#navLeft li#mindspirit.activeSection a,
	ul#navLeft li#thebody.activeSection a,
	ul#navLeft li#fuelnutrition.activeSection a {
  	background: transparent;
	}
	ul#navLeft li#thegreeneffect a:hover,
	ul#navLeft li#thebody a:hover,
	ul#navLeft li#mindspirit a:hover,
	ul#navLeft li#fuelnutrition a:hover {
  	background: transparent;
	}
	ul#navLeft li#thegreeneffect:hover a,
	ul#navLeft li#thebody:hover a,
	ul#navLeft li#mindspirit:hover a,
	ul#navLeft li#fuelnutrition:hover a {
  	background: transparent;
	}

	ul#navLeft li#thegreeneffect,
	ul#navLeft li#thebody,
	ul#navLeft li#mindspirit,
	ul#navLeft li#fuelnutrition	 {
		margin: 3px 0;
	}
/* navLeft submenus */
	ul#navLeft ul {
		width: 152px;
		height: 100%;
		/*height: expression(colwrapper.clientHeight + "px");*/
  	display: none;
		/* The child ul's need absolute poistioning inorder to 
		"pick up" a new relative positioning context */ 
		position: absolute;
		left: 88px;
		top: 0;
		border-right-width: 1px;
		border-right-style: solid;
		/** the color of this border is defined in the section css **/
		background-color: #c4d6e4;
		text-align: center;

	}
	ul#navLeft ul li.first {
		margin-top: 15px;
	}
	ul#navLeft li:hover ul {
		display: block;
	}
	ul#navLeft li#thegreeneffect li, ul#navLeft li#thegreeneffect li a,
	ul#navLeft li#thebody li,ul#navLeft li#thebody li a,
	ul#navLeft li#mindspirit li,ul#navLeft li#mindspirit li a,
	ul#navLeft li#fuelnutrition li ,ul#navLeft li#fuelnutrition li a	 {
		background-image: none;
		text-indent: 0;
		height: auto; 
		text-decoration: none;
		text-align: left;
	}
	ul#navLeft li#thegreeneffect li,
	ul#navLeft li#thebody li,
	ul#navLeft li#mindspirit li,
	ul#navLeft li#fuelnutrition li 	 {
		display: inline;
		padding: 3px 5px;
		width: 140px;
	}
	ul#navLeft li#thegreeneffect li a,
	ul#navLeft li#thebody li a,
	ul#navLeft li#mindspirit li a,
	ul#navLeft li#fuelnutrition li a 	 {
		width: 100%;
	}
		/* Link styles for the child ul's */
	ul#navLeft ul :link, 	
	ul#navLeft ul :visited {
		background-image: none;
		text-indent: 0;
		height: auto; 
		color: #215a72;
		color: #215a72;
		font-weight: bold;
	}
	ul#navLeft ul :link:focus, 	
	ul#navLeft ul :visited:focus {
	}
	ul#navLeft ul :link:hover, 
	ul#navLeft ul :visited:hover  {
		color: #FFFFFF;
		font-weight: bold;
}

/* ******************************* */
	
	
div#colWrapper{
}

div#colLeft {
	float: left;
	width: 92px;
}
div#colLeft h4 {
	border: 1px solid #215a72;
	background-color: #eff4f8;
	color:  #215a72;
	margin: 20px 4px 4px 4px;
	padding: 2px 4px;
}

	
div#colLeft ul.callout {
		margin: 0 4px;
	}
div#colLeft ul.callout li {
		font-size: 9px;
		display: block;
		color: #215a72;
		margin: 4px 0 4px 0;
		padding: 0px 4px 0px 6px;
		
	}

div#colLeft div#calloutWeather {
	position: relative;

}

div#colLeft div#weather_flyout {
	border: 1px solid black;
	position: absolute;
	padding: 3px;
	background: white;
	top: 0;
	left: 0;
	display: none; 
}

div#colLeft:hover div#weather_flyout {
	display: none; 
}

/*************************************
	colContent and elements
*************************************/
div#colContent {
	float: left;
	width: 556px;
}
div#content {
	margin: 12px;
}
div#content form {
	width: 75%;
}
div#content label {
	width: 200px;
	padding-right: 15px;
	color: red
}

div#content input {
	padding-right: 15px;
	color: red
}

div#content ul, div#content ol {
	margin: 10px 25px;
}
div#content ol { list-style-type: decimal;  list-style-position: outside;}
div#content ul { list-style-type: circle;  list-style-position: outside;} 

div#content li {
	lineheight: 1.2;
	margin: 6px 0;
}
div#content ul.resourceList {
	list-style-image:  url("../images/template/arrow.gif");
	margin: 5px 15px 15px 30px;
}
div#content table.schedule,
div#content table.details {
 	width: 100%;
	margin: 10px 0;
}
div#content table.details {
	width: 65%;
	border: 1px solid #c4d6e4;
	background-color: #FFFFFF;
}
div#content table tr.header {
	background-color: #FFFFFF;
	font-weight: bold;
}
div#content table tr.header td {
	color: #538EA7;
}
div#content table tr.even {
	background-color: #C4D6E4;
}
div#content table td {
	padding: 4px;
}
div#content table th {
	text-align: left;
	padding: 4px;
}
/*************************************
	end colContent and elements
*************************************/

/*************************************
	colRight and elements
*************************************/
div#colRight {
	float: left;
	width: 152px;
	margin-bottom: 15px;
}
	/*************************************
		the box that displays at the top
		of the right column
		the content is generated randomly
		the format is changed based on
		section
		see section style sheet for
		color/background changes
	*************************************/
	div#calloutRandom,
	div#calloutNewsflash {
		background-color: #eff4f8;
		margin: 0 1px 5px 1px;
		border-bottom-width: 1px;
		border-bottom-style: solid;
	}
	
	div#calloutRandom p,
	div#calloutNewsflash p {
		padding: 5px 6px;
	}
	
	h6 {
		font-size: 12px;
		margin: 0;
		background-image: url("../images/template/swoosh.gif");
		background-repeat: no-repeat;
		background-position: 2px 2px;
		padding: 6px 0 6px 26px;
		color: #eff4f8;
	}
	div#colRight h4 {
		font-size: 12px;
		margin: 20px 4px 4px 4px;
		padding: 2px 4px;
		color: #eff4f8;
	}
	
	div#colRight h4 :link,
	div#colRight h4  :visited {
		color: #eff4f8;
		text-decoration: none;
	}
	div#colRight h4 :link:focus,
	div#colRight h4  :visited:focus {
	
	}
	div#colRight h4 :link:hover,
	div#colRight h4  :visited:hover {
		text-decoration: underline;
	}
	div#colRight h4 :link:active,
	div#colRight h4 :visited:active{
	
	}	
	
	

div#calloutRandom {
	border-bottom-color: #215a72;
}
div#calloutRandom h6 {
	background-color: #215a72;
}

h4 {
	background-color: #215a72;
}
div#calloutNewsflash h6 {
	background-color: #EE970C;
	background-image: url("/media/images/template/swooshOrng.gif");
}	
div#calloutNewsflash {
	border-color: #EE970C;
}

	div#colRight ul.callout {
		margin: 0 4px;
	}
	div#colRight ul.callout li {
		display: block;
		background-color: #eff4f8;
		background-color: transparent;
		margin: 4px 0 4px 0;
		padding: 4px 4px 0px 6px;
		
	}
	div#colRight ul.callout li.title {
		font-weight: bold;
	}
	div#colRight ul.callout li.detail,
	div#colRight ul.callout li.link {
		margin-top: -6px;
	}
	/*************************************
		end of callout
	*************************************/
/*************************************
	end of colRight
*************************************/

div#footer {
	font-size: 9px;
	margin: 14px 0;
}