/* deco.gs Grid Styles ----------------------------------*/

/* The 16-column Deco Grid System. 
 * Available in multiple variants, see http://deco.gs
 *
 * Cells are   4.16667%    (=40px)
 * Column margins are 2.08333% (=20px)
 * Total is    6.25%. (=80px) (which makes 12 columns)
 * 
 * If page width is fixed to 960px width:
 * Cell will be equivalent to 40px, left/right margin will be 10px.
 */


div.row {
	float: left;
	width: 100%;
	display: block;
	position: relative;
}
div.cell {
  position: relative;
  float: left;
  left: 100%;
	margin: 0;
}

/* Width classes. 
   For a given cell width, the calculation is: 
   width = (total cell width) * n - (column margins) 
   In this case: (6.25*n - 2.08333)% */
div.width-1  { width:  4.16667% }
div.width-2  { width: 10.41667% }
div.width-3  { width: 16.66667% }
div.width-4  { width: 22.91667% }
div.width-5  { width: 29.16667% }
div.width-6  { width: 35.41667% }
div.width-7  { width: 41.66667% }
div.width-8  { width: 47.91667% }
div.width-9  { width: 54.16667% }
div.width-10 { width: 60.41667% }
div.width-11 { width: 66.66667% }
div.width-12 { width: 72.91667% }
div.width-13 { width: 79.16667% }
div.width-14 { width: 85.41667% }
div.width-15 { width: 91.66667% }
div.width-16 { width: 97.91667% }
div.width-16 { width: 100% }

/* Positioning classes, these are subtracting from a rightmost 
   position, which is why they seem the wrong way around */
/* For a given position, the calculation is:
   -100 + (total cell width * n)
   In this case: margin-left: -100 + (6.25*n) */

div.position-0  { margin-left: -100%   }
div.position-1  { margin-left: -93.75% }
div.position-2  { margin-left: -87.5%  }
div.position-3  { margin-left: -81.25% }
div.position-4  { margin-left: -75%    }
div.position-5  { margin-left: -68.75% }
div.position-6  { margin-left: -62.5%  }
div.position-7  { margin-left: -56.25% }
div.position-8  { margin-left: -50%    }
div.position-9  { margin-left: -43.75% }
div.position-10 { margin-left: -37.5%  }
div.position-11 { margin-left: -31.25% }
div.position-12 { margin-left: -25%    }
div.position-13 { margin-left: -18.75% }
div.position-14 { margin-left: -12.5%  }
div.position-15 { margin-left:  -6.25% }

/* End of the core Deco Grid System */

/* Convenience classes — ¼, ½, ¾ widths and ¼, ½, ¾ positions. 
   Not strictly necessary. */
div.width-1\3a 2 { width:    47.91667% } /* .width-1:2 */
div.width-1\3a 4 { width:    22.91667% } /* .width-1:4 */
div.width-3\3a 4 { width:    72.91667% } /* .width-3:4 */
div.position-1\3a 4 {margin-left:    -75% } /* .position-1:4 */
div.position-1\3a 2 {margin-left:    -50% } /* .position-1:2 */
div.position-3\3a 4 {margin-left:    -25% } /* .position-3:4 */


/* Special classes for ⅓, ⅔ widths and ⅓, ⅔ positions. 
These do not strictly conform to the grid, but are useful for certain layouts. */
div.width-1\3a 3 { width: 31.25%; } /* .width-1:3 */
div.width-2\3a 3 { width: 64.5%; } /* .width-2:3 */
div.position-1\3a 3 {margin-left: -66.7%;} /* .position-1:3 */
div.position-2\3a 3 {margin-left: -33.4%;} /* .position-2:3 */

/* Full/leftmost are useful synonyms for full width and leftmost positioning */
div.position-leftmost  { margin-left: -100%   }
div.width-full { width: 97.91667% }

/* Tags */


body{
	background: #527088;
}

a {
	text-decoration: none;
}

a:hover{
	text-decoration: underline;
}

#maincontent{
	background: url("images/bckgrd.jpg") repeat-x;
}



#pagewrappermain {
	width: 960px;
	margin: 0 auto;
	background: #fff url("images/centerbckgrd.jpg") no-repeat;
}

#pagewrappermain.magazine {
	background: #000;
}

.titlebackground{
	background: url("images/titlebckgrd.png") bottom no-repeat;
	height: 80px;
	position: relative;
	z-index: 1;
}

#logo img{
	float: left;
	margin: 1em;
}

h1#title{
	background: url("images/title.png");
	width: 440px;
	height: 46px;
	margin: 20px 0 0 0px;
	float: left;
}

h1#title span{
	display: none;
}

#navigation{
	float: right;
	margin: 47px 0 0 0;
}

#navigation ul{
	clear: both;
	margin: 0;
	padding: 0;
}

#navigation li{
	display: inline;
	float: left;
	list-style-type: none;
	margin: 0 1px 0 0;
	padding: 0;
	position: relative;
	z-index: 2000;
}

#navigation li a{
	display: block;
	height: 33px;
}

li#home a {
	background: url("images/home-unselected.png");
	width: 73px;
}	

li#home.selected a, .coda-nav ul li#home a.current {
	background: url("images/home-selected.png");
}

li#video a {
	background: url("images/video-unselected.png");
	width: 73px;
}

li#video.selected a, .coda-nav ul li#video a.current{
	background: url("images/video-selected.png");
}

li#magazine a{
	background: url("images/magazine-unselected.png");
	width: 101px;
}

li#magazine.selected a, .coda-nav ul li#magazine a.current{
	background: url("images/magazine-selected.png");
}

li#resources a {
	background: url("images/resources-unselected.png");
	width: 122px;
}

li#resources.selected a, .coda-nav ul li#resources a.current {
	background: url("images/resources-selected.png");
}

#introslide {
	background: #fff url("images/introslidebcksm.png") no-repeat;
/*	height: 494px;*/
	width: 960px;
	position: relative;
	z-index: 0;
	overflow: hidden;
}

#introslide a, #resourcecontent a{
	color: #0066cc;
}

#introslide .mag img{
	margin: 40px 12px 10px 12px;
	float: left;
} 

#introslide p, #resourcecontent p{
	font-size: .9em;
	line-height: 1.3em;
}

#introslide .mag p{
	color: #666;
	margin: 0 0 0 15px;
	padding: 3px 0 0 0;
	font-weight: bold;
}

#introtext{
	margin-top: 20px;
	padding-left: 50px;
}

#introtext a{
	font-weight: bold;
}

#introtext h2{
	font-family: Georgia, serif;
	font-size: 2.5em;
	font-weight: normal;
	margin: 0;
	padding: 0;	
}

#introtext h3, #introtext h4, #introslide p{
	color: #333;
}

#introtext h3, #resourcecontent h2{
	font-size: 1.2em;
	margin: 10px 0 0 0;
}

#introtext h4{
}

#introtext .row {
	margin-top: 20px;
	padding-left: 5px;
}

#introtext h5  a{
	color: #06c;
	font-size: 1.3em;
	font-weight: normal;
}

#introtext h6{
	font-style: italic;
	font-weight: normal;
	font-size: .8em;
}

#introtext img {
}

#introtext li, #resourcecontent li{
	font-size: .9em;
	margin: 10px 0 0 0;
}

#introtext p, #resourcecontent p{
	margin-top: 10px;
}

#introtext p.intro{
}

.moreintro{
	padding-top: 0px;
}

input#playbutton{
	background: url ("images/playlarge.png");
	width: 50px;
}

#videointro{
	background: #e9e9e9;
	margin-top: 18px;
/*	height: 457px;*/
	padding: 10px 0 0 8px;
}

#videointro h5 {
	text-transform: uppercase;
	font-size: .75em;
	padding: 0;
}

#videointro h6 {
	font-size: 1.1em;
	padding: 5px 0;
}

#videointro p {
	padding: 3px 0 10px 0;
}

#videointro dl {
	font-size: .85em;
	margin: 10px 0 0 30px;
}

#videointro dt {
	font-weight: bold;
}

#videointro dd {
	margin-left: 30px;
}

#videointro img {
	margin-bottom: -5px;
}

#player {
	width: 960px; 
	height: 494px; 
	background: url("images/playerbckgrd.png") repeat-x;
}

#player h4.more{
	margin-top: 30px;
}

#player h4 a{
	color: #8b8b8b;
	font-weight: normal;
	font-size: 1.1em;
}

.icon{
	background-image: url("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/images/ui-icons_888888_256x240.png");
	float: left;
}

#player h4 a:hover{
	border-bottom: 1px solid #8b8b8b;
	color: #d3d3d3;
	text-decoration: none;
}

#ytstuff {
	float: left;
	margin: 20px 0 30px 60px;
	width: 600px;
}

#ytstuff h3{
	font-size: 1em;
	padding-top: 10px;
}

#ytstuff h4{
	font-size: .8em;
	font-weight: normal;
}

#ytvideo {
}

#ytvideo img {
	float: left;
	padding-right: 15px;
}

#accordion {
	width: 250px;
	height: 455px;
	float: right;
	margin: 30px 49px 0 0;
	overflow-y: auto;
}

#accordion h3 {
	text-transform: uppercase;
	font-size: .75em;
}

#accordion ul {
	margin: 0 0 0 -10px;
    padding: 0;
    overflow: hidden;
}

#accordion ul li {
    list-style-type: none;
    font-size: .75em;
    margin-bottom: 5px;
    padding:0;
}

.ui-accordion-content, .ui-accordion {
	overflow: hidden;
	padding: 0 !important;
	/*height: auto !important;*/
}

.ui-widget-content a{
	color: #8b8b8b;
	text-decoration: none;
    background: url("images/noncurrentvidbckgrd.png") repeat-y;
	display: block;
	padding: 10px 0 10px 46px;
}

.ui-widget-content a.link{
	background-image: none;
	padding: 10px 0 10px 20px;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, .ui-widget-content {
    background: transparent;
    border: none;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
	background: transparent;
	border: 1px solid #333;
	border-width: 1px 0;
}

.ui-corner-tl { -moz-border-radius-topleft: 0px/*{cornerRadius}*/; -webkit-border-top-left-radius: 0px/*{cornerRadius}*/; border-top-left-radius: 0px/*{cornerRadius}*/; }
.ui-corner-tr { -moz-border-radius-topright: 0px/*{cornerRadius}*/; -webkit-border-top-right-radius: 0px/*{cornerRadius}*/; border-top-right-radius: 0px/*{cornerRadius}*/; }
.ui-corner-bl { -moz-border-radius-bottomleft: 0px/*{cornerRadius}*/; -webkit-border-bottom-left-radius: 0px/*{cornerRadius}*/; border-bottom-left-radius: 0px/*{cornerRadius}*/; }
.ui-corner-br { -moz-border-radius-bottomright: 0px/*{cornerRadius}*/; -webkit-border-bottom-right-radius: 0px/*{cornerRadius}*/; border-bottom-right-radius: 0px/*{cornerRadius}*/; }
.ui-corner-top { -moz-border-radius-topleft: 0px/*{cornerRadius}*/; -webkit-border-top-left-radius: 0px/*{cornerRadius}*/; border-top-left-radius: 0px/*{cornerRadius}*/; -moz-border-radius-topright: 0px/*{cornerRadius}*/; -webkit-border-top-right-radius: 0px/*{cornerRadius}*/; border-top-right-radius: 0px/*{cornerRadius}*/; }
.ui-corner-bottom { -moz-border-radius-bottomleft: 0px/*{cornerRadius}*/; -webkit-border-bottom-left-radius: 0px/*{cornerRadius}*/; border-bottom-left-radius: 0px/*{cornerRadius}*/; -moz-border-radius-bottomright: 0px/*{cornerRadius}*/; -webkit-border-bottom-right-radius: 0px/*{cornerRadius}*/; border-bottom-right-radius: 0px/*{cornerRadius}*/; }
.ui-corner-right {  -moz-border-radius-topright: 0px/*{cornerRadius}*/; -webkit-border-top-right-radius: 0px/*{cornerRadius}*/; border-top-right-radius: 0px/*{cornerRadius}*/; -moz-border-radius-bottomright: 0px/*{cornerRadius}*/; -webkit-border-bottom-right-radius: 0px/*{cornerRadius}*/; border-bottom-right-radius: 0px/*{cornerRadius}*/; }
.ui-corner-left { -moz-border-radius-topleft: 0px/*{cornerRadius}*/; -webkit-border-top-left-radius: 0px/*{cornerRadius}*/; border-top-left-radius: 0px/*{cornerRadius}*/; -moz-border-radius-bottomleft: 0px/*{cornerRadius}*/; -webkit-border-bottom-left-radius: 0px/*{cornerRadius}*/; border-bottom-left-radius: 0px/*{cornerRadius}*/; }
.ui-corner-all { -moz-border-radius: 0px/*{cornerRadius}*/; -webkit-border-radius: 0px/*{cornerRadius}*/; border-radius: 0px/*{cornerRadius}*/; }

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
	color: #d3d3d3;
}

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited{
	color: #999;
	text-decoration: none;
}

.currentvideo a{
	color: #d3d3d3;
	text-decoration: none;
	background: #303030 url("images/currentvidbckgrd.png") repeat-y !important;
	display: block;
	padding: 10px 0 10px 46px;
}

#magazineslide{
	background: #000 url("images/magazineslidebck.png") repeat-x;
	height: 510px;
}

#magazineslide p{
	letter-spacing: .02em;
}

#topmagrow{
	margin: 15px 0 5px 0;
}

#topmagrow img{
	margin-top: 15px;
}

#bottommagrow  img, #bottommagrow h6{
	padding-left: 10px;
}

#bottommagrow h6{
	line-height: 1em;
}

#magazineslide a {
	font-weight: bold;
}

#magazineslide h3, #magazineslide a, #magazineslide h6{
	color: #09f;
}

#magazineslide h3 span.date, #magazineslide h6 span.date{
	color: #878787;
	text-transform: uppercase;
	display: block;
}

#magazineslide h3 {
	font-size: 2em;
	font-weight: normal;
}

#magazineslide h3 a{
	font-weight: normal;
}

#magazineslide h3 span.date{
	font-size: .5em;
	font-weight: bold;
}

#magazineslide h4 {
	font-size: 1.4em;
	font-weight: normal;
	color: #eceded;
}

#magazineslide h5 {
	color: #757575;
	text-transform: uppercase;
	font-size: 1em;
}

#magazineslide h6.subtitle {
	color: #999;
	margin-left: 30px;
	font-weight: 600;

}

#magazineslide p{
	font-size:.9em;
	font-weight: normal;
	padding: 5px 0;
	line-height: 1.5em;
}

#magazineslide p, #magazineslide ul {
	color: #ccc;
}

#magazineslide ul {
	font-size: .85em;
}

#magazineslide li{
	padding: 2px 0;
}

.maglist {
	border: 1px solid #454545;
	border-width: 0 0 0 1px;
	padding-left: 10px;
}


.resources {
}

#resourceslide{
	background: url("images/resourcesbck.png") repeat-x;
	height: 40px;
}

#resourceslide ul{
	float: right;
	margin-top: 8px;
}

#resourceslide li {
	float: left;
	list-style: none;
	border: 1px solid #333;
	border-width: 0 0 0 1px;
	padding: 7px 0;
}

#resourceslide a {
	color: #bfbfbf;
	padding: 9px 20px;
}

#resourceslide a:hover{
	text-decoration: none;
	background: #333;
}

#resourcecontent{
	background: #fff;
	padding: 1px 40px 40px 40px;
}

#resourcecontent h1{
	font-family: Georgia, serif;
	font-size: 2.3em;
	font-weight: normal;
	margin: 20px 0 10px 0;
}

#resourcecontent h3{
	color: #333;
}

.resourcemain{
	margin-top: 25px;
	margin-left: -20px;
	background: #eee;
	padding: 20px;
}

.resourcemain .col1{
	border: 1px solid #ccc;
	border-width: 0 1px 0 0;
	padding-right: 20px;
	padding-bottom: 20px;
}

.resourcemain .col1 h3, .resourcemain .col2 h3{
	font-weight: normal;
	font-size: 1.3em;
}

.resourcemain .col2{
	border: 1px solid #ccc;
	border-width: 0 1px 0 0;
	padding-right: 20px;
	padding-left: 20px;
}

.resourcemain .col3 h3{
	font-size: 1.7em;
	font-weight: normal;
}

.wildlife1 {
	margin-top: 20px;
}

.wildlife h2{
	font-size: 1.4em !important;
	font-weight: normal;
}

.wildlife2{
	padding-top: 50px;
	margin-top: 20px;
	border: 1px solid #ccc;
	border-width: 1px 0 0 0;
}

.wildlife3{
	padding-top: 50px;
}

.wildlife2 h3, .wildlife3 h3{
	font-size: 1.3em;
	font-weight: normal;
}

.wildlife2 h4, .wildlife3 h4{
	font-size: 1em;
	color: #333;
	margin-top: 15px;
}

.yard1{
	margin-top: 30px;
	margin-bottom: 30px;
}

.yard1 h3{
	text-align: center;
}

.yard1 img{
	padding-left: 15px;
}

.yardcontent h2{
	color: #333;
	font-weight: normal;
	margin-top: 30px !important;
}

.waterbill h2{
	font-weight: normal;
}

.waterbill{
	margin-bottom: 20px;
}

.volunteer img{
	float: right;
	margin: 15px;
}

.volunteer h2{
	font-weight: normal;
	margin-top: 20px !important;
}

#constantcontent {
	background: #223340;
}

#dvdorder, #donate{
	background-image: url(images/ccbackground.png);
	background-repeat: no-repeat;
	height: 141px;
	width: 466px;
	float: left;
	margin: 15px 5px 15px 8px;
}

#dvdorder img{
	padding: 14px 10px 0 10px;
	float: left;
}

#donate img{
	padding: 10px 5px 15px 15px;
	float: left;
}

#dvdorder h4 {
	color: #ccc;
	text-shadow: 1px 1px 3px #111;
	margin-top: 20px;
	font-size: 1.5em;
	margin-right: 60px;
	font-weight: normal;
}

#dvdorder h5 {
	color: #fff;
	text-shadow: 1px 1px 3px #222;
	font-size: 1.2em;
	font-weight: normal;
	margin-top: 3px;	
}

#dvdorder h5 span{
	font-size: .65em;
	font-weight: bold;
}

#dvdorder a, #donate a{
	color: #09f;
	text-shadow: 1px 1px 3px #000;
	font-size: .9em;
	font-weight: bold;
	display: block;
	margin-top: 5px;
}

#donate h6{
	color: #ccc;
	text-shadow: 1px 1px 3px #111;	
	font-weight: normal;
	font-size: 1.05em;
	margin-top: 25px;
}

#description {
	padding: 15px 0 0 15px;
	width: 250px;
}

#description h3 {
	color: #a2a6a9;
	font-size: 1.5em;
}

#description p {
	color: #ccc;
	font-size: .8em;
	line-height: 1.5em;
	margin: 10px 0;
}

#description a:link, #description a:visited, #description a:hover, #description a:active {
	color: #ccc;
	font-weight: bold;
	text-decoration: none;
}

#stations table{
	width: 400px;
	background: #eee;
	color: #333;
	font-size: .85em;
	font-family: helvetica, "sans-serif";
}

#stations caption{
	background: url("images/tableheadbg.gif") #333;
	color: #84a8c5;
	font-size: 1.45em;
	font-family: arial, "sans-serif";
	text-align: left;
	padding: 13px 10px;
}

#stations caption span{
	color: #ccc;
}

#stations thead{
	display: none;
}

#stations td{
	border: 1px dashed #d1d1d1;
	border-width: 0 0 1px 0;
	padding: 1px 0 3px 0;
}

.aired{
	color: gray;
	display: none;
}

#stations td strong {
	padding-left: 10px;
}

#stations td img {
	vertical-align: -5px;
}

#sponsors {
	background: url("images/sponsorsbg.gif") #fff;
	text-align: center;
	padding: 15px 0 0 0;
}

#sponsors h4 {
	color: #999;
	font-style: italic;
	font-size: 1.1em;
}

#sponsors img {
	padding-top: 20px;
}

#sowfooter {
	background: #ccc;
	padding: 10px 0;
	text-align: center;
}

#sowfooter .cell {
	padding-top: 5px;
	height: 200px;
}

#tpwdlogo, #sownavlist, #tpwdnavlist{
	border: 1px solid #999;
	border-width: 0 1px 0 0;
}

#tpwdlogo {
	width: 180px;
}

#sownavlist, #tpwdnavlist, #mouaddress {
	padding-left: 10px;
	text-align: left;
}

#sownavlist h6, #sownavlist ul, #tpwdnavlist h6, #tpwdnavlist ul {
	font-size: .75em;
}

#sownavlist ul, #tpwdnavlist ul {
	list-style-type: none;
	margin: 0;
}

#sownavlist li, #tpwdnavlist li{
	line-height: 1.3em;
}

#sownavlist, #sownavlist a, #tpwdnavlist, #tpwdnavlist a {
	color: #333;
}

#tpwdnavlist {
	padding-left: 0;
	width: 180px;
}

#mouaddress img{
	margin: 2px;
	vertical-align: top;
}

#mouaddress address{
	font-style: normal;
	font-size: .6em;
	color: #333;
	margin-top: 40px;
}

#mouaddress p{
	font-style: normal;
	font-size: .6em;
	color: #333;
	margin-top: 10px;
}

.clear{
	clear: both;
}

.hidden {
	display: none;
}


	#demo-frame > div.demo { padding: 10px !important; }
	.scroll-pane { overflow: hidden; width: 958px; float:left; }
	.scroll-content { width: 1200px; float: left; }
	.scroll-content-item { width: 110px; height: 100%; float: left; margin: 10px; text-align: center; }
	* html .scroll-content-item { display: inline; } /* IE6 float double margin bug */
	.scroll-bar-wrap { clear: left; padding: 0 4px 0 4px; margin: 0 -2px -1px -1px; height: 24px; background: #333; border: 1px solid #000;}
	.scroll-bar-wrap .ui-slider { background: none; border:0; height: 10px; margin: 0 auto;  }
	.scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 20px; margin: 0 auto;}
	.scroll-bar-wrap .ui-slider-handle { top:.2em; height: 15px; border-width: 1px; border-color: #444; background: #707070; padding: 0; margin-bottom: 0; -moz-border-radius: 3px/*{cornerRadius}*/; -webkit-border-radius: 3px/*{cornerRadius}*/; border-radius: 3px/*{cornerRadius}*/;}
	.scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; }


.ui-widget-header {
    background: transparent;
    border: none;
    color: #333;
    font-weight: bold;
}

.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.1em;
}