@charset "utf-8";

/* CSS Document */

h1 em{
	font-size: 72%;
}

#contentcol .kcSocialIconsList li {padding-bottom:0;}



/* space below style -- requested by David F. */

.lispace li {margin-bottom: 4px} 

/* used in weeds identification to put colorize the gray text that appears above a collection of thumbnail images as well as brining the table holding these images closer to the text. */
.clickThumbnail {
	color: #999999;
	margin-bottom: -0.01em;
}
/* puts  padding between all listed items.  This way there is space between bulleted items and no need to resort to a work around. */
#contentcol li {
	padding-bottom: .5em;
}
/* puts padding between all defined items. This way there is space between bulleted items and no need to resort to a work around. */
#contentcol dd {
	padding-bottom: 1em;
}

/* good for a long list of hyperlist where you don't want the underline visible */
.linkList {
	list-style-type: none;
}

/* will push photos that are 275 wide to the right allowing text to wrap around it*/
.photosRight {
	float: right;
	width: 275px;
}

/* will push photos with captions that are 160 wide to the right allowing text to wrap around it*/
.photosRight160 {
	font-style: italic;
	float: right;
	width: 165px;
	margin-left: 10px;
	margin-top: 5px;
	margin-bottom: 10px;
}

/* will push photos with captions that are 180 wide to the right allowing text to wrap around it*/
.photosRight180 {
	font-style: italic;
	float: right;
	width: 185px;
	margin-left: 10px;
	margin-top: 5px;
	margin-bottom: 10px;
}

/* will push photos with captions that are 200 wide to the right allowing text to wrap around it*/
.photosRight200 {
	font-style: italic;
	float: right;
	width: 205px;
	margin-left: 10px;
	margin-top: 5px;
	margin-bottom: 10px;
}
.photosRight200 img {
	border: 1px solid #666666;
}

/* will push photos with captions that are 230 wide to the right allowing text to wrap around it*/
.photoRight230 {
	font-style: italic;
	float: right;
	width: 230px;
	margin-top: 5px;
	margin-bottom: 10px;
	margin-left: 10px;
}
/* will push photos with captions that are 260 wide to the right allowing text to wrap around it*/
.photoRight260 {
	font-style: italic;
	float: right;
	width: 260px;
	margin-top: 5px;
	margin-bottom: 10px;
	margin-left: 10px;
}
/* will push photos with captions that are 300 wide to the right allowing text to wrap around it*/
.photosRight306 {
	font-style: italic;
	float: right;
	width: 306px;
	margin-top: 5px;
	margin-bottom: 10px;
	margin-left: 10px;
}

/* will push photos with captions that are 350 wide to the right allowing text to wrap around it*/
.photosRight356 {
	font-style: italic;
	float: right;
	width: 356px;
	margin-top: 5px;
	margin-bottom: 10px;
	margin-left: 10px;
}


/* will put a boarder around images that need one */
.imgBorder {
	border: 1px solid #666666;
	margin: 3px;
}

.list td {
	background-color: #CCCCCC;
}
.list th {
	background-color: #999999;
}
.list h2 {
	color: #000000;
}
.list h2 em{
	font-size: 60%;
	font-style: normal;
}
.list a {
	text-decoration: none;
}
.list a:hover {
	text-decoration: underline;
}
.photoBox300 {
	padding: 5px;
	float: left;
	width: 300px;
	margin-top: 5px;
	border: 1px dashed #999999;
	margin-left: 5px;
	height: 370px;
}
.photoBox300 img {
	margin-bottom: 5px;
	border: 1px solid #666666;
	text-align: center;
}



.caption {
	font-size: 70%;
}

.inst {
   font-size: 90%; 
   color: #666666; 
   font-weight: bold;
}

.lbl {
	background:#FFFFCE;
	font-weight: 
    bold;
	valign:top;
}
/* these three definitions will put empty square bullet box on li items in right column */
#rightcol a {
	text-decoration: none;
}
#rightcol a:hover {
	text-decoration: underline;
}
#rightcol li {
	list-style-image:url(/style/kcBaseImages/bullet2.png);
	margin-left:-22px;
}
/* these two class definitions will resize archive news lists so that the regular text is smaller than the hyperlinks, put all the news items in this single div tag*/
.newsList {
	font-size: 80%;
}

.newsList a {
	font-size: 130%;
}

.altNameLink {
	float: right;
	width: 200px;
	padding-bottom: 0px;
	padding-left: 5px;
	text-align: right;
	margin-top: 1em;
	margin-bottom: 1em;
	padding-top: 5px;
	padding-right: 5px;
	clear: both;
}
/* these two definitions will format a-z hyperlinks for glossary pages. it will center the links as well as put boarder above and below the them.  
As an example see: http://www.kingcounty.gov/environment/waterandland/stormwater/glossary.aspx*/
.glossaryList {
	font-size: 80%;
	text-align: center;
	padding: 1em;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #666666;
	border-right-color: #666666;
	border-bottom-color: #666666;
	border-left-color: #666666;
}
.glossaryList a {
	padding-left: 0.3em;
	padding-right: 0.3em;
}

/*assorted attention boxes*/
.attenBox1 {
	background-color: #FFFFCE;
	padding: 5px;
	border: 1px solid #000000;
}
.attenBox2 {
	font-weight: bold;
	color: #0000CC;
	margin-left: 2em;
}
.attenBox3 {
	clear: both;
	float: right;
	width: 35%;
	margin-top: .5em;
	margin-bottom: .5em;
	margin-left: 1em;
	border: 1px solid #000000;
	background-color: FFFFCE;
	padding: 0.5em;
}
.attenBox4 {
	padding: 5px;
	clear: both;
	float: right;
	width: 35%;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	border: 1px dashed #333333;
}
.attenBox5 {
	font-weight: bold;
	color: #FF0000;
	margin-left: 2em;
}

.next {
	font-weight: bold;
	color: #FF0000;
}.next a {
	font-weight: normal;
}

/* puts a line above text as well as some extra space at the top.  Good for footer information such as who is responsible for content of web page*/
.partnerCredits {
	font-size: 85%;
	padding: 0.5em;
	margin-top: 4em;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #666666;
}

.photoCredit {
	font-style: italic;
}
.photoCaption {
	font-size: 85%;
	font-style: italic;
}

/*Use photoList for long list of photos that have captions immediatly below them*/
.photoList {
}.photoList p {
	padding-bottom: 1em;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	width: 510px;
}.photoList img {
	border: 1px solid #666666;
	margin-bottom: .2em;
}

/*These three definitions are to be used for dataTable for large tables of data where the font needs to be smaller than content to fit on page.  
As an example see: http://www.kingcounty.gov/environment/animalsAndPlants/salmon-and-trout/salmon-watchers/reports/2000/AppendixA.aspx */
.dataTable {
	font-size: 80%;
}
.dataTable th {
	background-color: #CCCCCC;
}
.dataTable td {
	vertical-align: top;
}

.mediaPlayerBox {
	background-color: #465E87;
	border: 15px solid #465E87;
	clear: both;
}
.pdf_bullet {
	list-style-image: url(/~/media/environment/animalsAndPlants/images/PDFIcon.gif);
	margin-bottom: 0.5em;
}
.wmp_bullet {
	list-style-image: url(/~/media/environment/animalsAndPlants/images/wmp.ashx);
	padding-bottom: .5em;
}
.realMedia_bullet {
	list-style-image: url(/~/media/environment/animalsAndPlants/images/realoneplayer_icon.ashx);
}
/* to be used with beaver pages */
.beaverBullet {
	list-style-image: url(/~/media/environment/animalsAndPlants/images/beaver_bullet.ashx);
	padding-bottom: 1em;
}
/* to be used with salmon pages */
.salmonBullet {
	list-style-image: url(/~/media/environment/animalsAndPlants/images/salmon_bullet.ashx);
	padding-bottom: 1em;
}
.litLines td,th {
	border: 1px solid #999999;
}

/* to be used with snoqualmie flood-slider page */
.floodRiverRollOver {
	background-image: url(/~/media/environment/waterland/flooding/Snoqualmie_River_no_flood.ashx);
	height: 424px;
	width: 444px;
	margin-left: 5em;
}
.floodRiverRollOver:hover {
	background-image: url(/~/media/environment/waterland/flooding/Snoqualmie_River_flood.ashx);
}

/* to be used with photo gallery rollover and enlarge show.  
As an example see: http://www.kingcounty.gov/environment/waterandland/flooding/volunteer-project.aspx */
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid blue;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
	visibility: visible;
	top: 0;
	left: 325px; /*position where enlarged image should offset horizontally */
	z-index: 50;
}



.greenText {
	color: green;
	font-size: 80%;
}

.green {
	color: green;
}

.red {
color: red;
}

.70r {
	color: red; 
	font-size:70%;
}
.redb {
	color: red; 
	font-weight: bold;
}

abbr, acronym, .help {
	cursor: help;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #FF00FF;
  }
/* used for putting yellow hightlighted new tag at the end of a line*/
.new {
	background-color: #00FF00;
	padding-top: 1px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 2px;
	margin-left: 8px;
	font-weight: bold;
	font-size: 80%;
}

.RightSideBox230 {
	padding: .25em;
	float: right;
	width: 230px;
	margin-top: .5px;
	margin-bottom: .5px;
	margin-left: .5em;
}
.floatStop {
	clear: both;
}
.grayBox150 {
	border: 1px solid #CCCCCC;
	padding: 5px;
	width: 150px;
	float: left;
	margin: 0.20em;
	height: 250px;
}
.grayBox150 img {
	margin: .2em;
}
.tableRight {
	text-align: right;
}

.enlargePhoto1 {
	height: 108px;
	width: 144px;
	border: 1px solid #000000;
}
.enlargePhoto1:hover {
	height: 270px;
	width: 360px;
	border: 1px solid #000000;
}

/*these three definitions are good for a long a-z list of hyperlinks where li tag is used for the hyperlinks.  
As an example see: http://www.kingcounty.gov/environment/wlr/aphabetical-list.aspx*/
.alphaList p {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #666666;
	border-left-width: 10px;
	border-left-style: solid;
	border-left-color: #666666;
	font-size: 120%;
	font-weight: bold;
	padding-top: 0.25em;
	padding-right: 0.25em;
	padding-bottom: 0.25em;
	padding-left: 0.65em;
}
.alphaList li {
	margin-bottom: 0.3em;
	list-style-type: none;
	padding-left: 10px;
}
.alphaList  a:hover {
	border-left-width: 10px;
	border-left-style: solid;
	border-left-color: #999999;
	padding-left: 10px;
}
.twoColumn {
	float: left;
	width: 48%;
	padding-left: 0.5em;
	padding-top: 0px;
	padding-right: .5em;
}
.clearFloat {
	clear: both;
}

/*these three definitions are were created for yard talk*/
.yardTalkEpisodeList  p {
	margin-bottom: 0.5em;
	border: 1px solid #666666;
	height: 145px;
	padding-top: 5px;
	padding-right: 5px;
	padding-left: 5px;
	padding-bottom: 0px;
}
.yardTalkEpisodeList img {
	margin-top: -5px;
	margin-right: 0.25em;
	margin-bottom: -5px;
	margin-left: -5px;
	float: left;
	clear: both;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #666666;
	height: 150px;
	width: 150px;
}
.realMediaLinkBox {
	background-color: #EFEF9C;
	width: 250px;
	border: 1px solid #666666;
	padding: 5px;
	margin-bottom: 0.5em;
}
.realMediaLinkBox  h4 {
	background-color: #C2D168;
	margin: 0px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 10px;
	padding-left: 5px;
}
.realMediaLinkBox   .link {
	font-weight: bold;
	background-color: #C2D168;
	padding: 5px;
	margin: -5px;
}

.realMediaLinkBox a {
	text-decoration: none;
}

.tableCenterCells {
	background-color: #FFFFCC;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #666666;
	border-left-color: #666666;
}
.tableCenterCells caption {
	font-size: 110%;
	font-weight: bold;
	text-align: left;
	padding: 8px;
}
.tableCenterCells td {
	text-align: center;
	border-top-width: 1px;
	border-right-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-top-color: #666666;
	border-right-color: #666666;
	padding: 1px;
}
.tableCenterCells th {
	border-top-width: 1px;
	border-right-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-top-color: #000000;
	border-right-color: #666666;
	text-align: left;
	padding: 5px;
}