/*------------------------------------*\
	COLORS
\*------------------------------------*/
/* 
dark blue: #000066
grey: #CEC7C3
communities royal blue: #003B9B 
understanding lime green: #9DD758
streams - dark green: #2A6666
citizens - aqua: #93CCCD
stormwater - beige: #CECA97
*/
/*------------------------------------*\
	TYPOGRAPHY
\*------------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed:700');
/*------------------------------------*\
    MAIN
\*------------------------------------*/


/* html element 62.5% font-size for REM use */
html {
	font-size:62.5%;
}
body {
	font:400 16px/1.5 'Roboto', sans-serif;;
	color:#444;
	margin:0;
	 padding:0;
}
/* clear */
.clear:before,
.clear:after {
    content:' ';
    display:table;
}

.clear:after {
    clear:both;
}
.clear {
    *zoom:1;
}
img {
	max-width:100%;
	vertical-align:bottom;
	height:auto;
}
	.spacer img {height:1px!important;}
a {
	color:#000066;
	text-decoration:underline;
}
a:hover {
	color:#336699;
	text-decoration:none;
}
a:focus {
	outline:0;
}
a:hover,
a:active {
	outline:0;
}
input:focus {
	outline:0;
	border:1px solid #04A4CC;
}
* { /* remove hover color on android */
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

h1 {
    font-size: 2em;
    margin: 0 0 0.5em 0;
	font-weight:normal;
	line-height: 1.2em;
}

h2 {
    font-size: 1.5em;
    margin: 0 0 0.5em 0;
	font-weight:normal;
	line-height: 1.2em;
}

h3 {
    font-size: 1.17em;
    margin: 0 0 0.5em 0;
	line-height: 1.2em;
}

h4 {
    font-size: 1em;
    margin: 0 0 0.5em 0;
}

h5 {
    font-size: 0.83em;
    margin: 0 0 0.5em 0;
	line-height: 1.2em;
}

h6 {
    font-size: 0.75em;
    margin: 0 0 0.5em 0;
}
.primary li, .sidebar li {margin-bottom:0.4em;}

hr {
	clear:both;
	border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
	margin:20px 0;
}

/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/
#main {
	background: #FFF;
	padding-top: 20px;
	padding-bottom: 20px;
	clear:left;
}
/* wrapper */
.wrapper {
	max-width:1100px;
	width:95%;
	margin:0 auto;
	position:relative;
}
/* primary content */
.primary {
	width:75%;
	float:left;
	}
.fullwidth {display:block; clear:both;}
/* sidebar */
.sidebar  {
	width: 22%;
	margin-right: 3%;
	float:left;
	font-size:0.875em;
	}
/* screen reader navigation skip */
a.skip {
    left: -999em;
    position: absolute;
}

/* logo */
.branding {}
.logo {float:left;  width: 120px;}
	.logotype { float:left; margin-left: 20px;
	}


.blurb_r {
    float: right;
    width: 300px;
    margin: 0 0 10px 20px;
    padding: 10px;
    background-color: #CCC;
	font-size:0.9em;
}
.blurb_l {
    float: left;
    width: 300px;
    margin: 0 20px 10px 0;
    padding: 10px;
    background-color: #CCC;
	font-size:0.9em;
}
/*------------------------------------*\
    HEADER
\*------------------------------------*/
header {
	display: table;
    width: 100%;
	color: #FFF; 
	background-color: #000066;
	padding: 10px 0;
	}
/* navigation */
.sectionnav {float:right;}
.sectionnav ul {margin:0;}
.sectionnav li {list-style-type: none; line-height:20px; margin:0; padding:0;}
.sectionnav li:before { 
    content: "";
    display: inline-block;
    height: 16px;
    width: 16px;
    left: -10px;
	top:1px;
    position: relative;
	background-color:#FFF;
	border: solid 1px #4D87AE;
	}
.sectionnav li a {color:#FFF; font-family: 'Roboto Condensed'; text-decoration:none;}
#page_storm .sectionnav li a, #page_citizen .sectionnav li a { }
.sectionnav li a:hover {text-decoration: underline;}

#nav {background-color:#000;}
#nav ul {padding:0; margin:0;list-style: none;}
#nav li {list-style-type: none; display:inline-block; position: relative;  margin:0; padding:0;}

	#nav a {
	color: #FFF;
	display: block;
	line-height: 35px;
	text-decoration: none;
	padding: 0 25px 0 0;
	}
	#nav>ul>li>a {
		font-weight:bold;
		margin-right: 10px;
	}
	#nav ul ul {
		display: none;
		float: left;
		margin: 0;
		position: absolute;
		top: 35px;
		z-index: 99999;
	}
#nav ul ul ul {
		left: 100%;
		top: 0;
	}
	#nav ul ul a {
		background: #f9f9f9;
		border-bottom: 1px dotted #ddd;
		color: #444;
		font-size: 0.875em;
		font-weight: normal;
		height: auto;
		line-height: 1.4em;
		padding: 10px 10px;
		width: 188px;
		}
		#nav ul ul li:first-child a {
			}
		#nav ul ul li:last-child a {
			}
	#nav>ul>li:hover > a,
	#nav>ul>li>a:focus {
	margin-bottom: 0px;
	}
	#nav li:hover > a,
	#nav a:focus {
	color:#93CCCD;
	}
	#nav ul li:hover > ul {
		display: block;
	}

/*------------------------------------*\
    FOOTER
\*------------------------------------*/
footer {color: #FFF; background-color: #000066; padding:10px 0;}
footer ul {padding:0; margin:0;}
footer li {list-style-type: none; display:inline-block; margin-right:20px;}
footer li a {color:#FFF; text-decoration:none;}
footer li a:hover {color:#CEC7C3;}

/*------------------------------------*\
    TEMPLATE COLORS
\*------------------------------------*/

#page_community header, #page_community .blurb_r, #page_community .blurb_l, .sectionnav li.community:before {background-color: #003B9B; }
	#page_understanding header, #page_understanding .blurb_r, #page_understanding .blurb_l, .sectionnav li.understanding:before {background-color: #9DD758; }
	#page_stream header, #page_stream .blurb_r, #page_stream .blurb_l, .sectionnav li.stream:before, #page_stream #stream_detail {background-color: #2A6666; }
	#page_citizen #header, #page_citizen  .blurb_r, #page_citizen  .blurb_l, .sectionnav li.citizen:before {background-color: #93CCCD; }
	#page_storm header, #page_storm .blurb_r, #page_storm .blurb_l, .sectionnav li.storm:before {background-color: #CECA97; }

#page_stream .blurb_r, #page_stream .blurb_r a, #page_stream #stream_detail, #page_stream #stream_detail a  {color:#FFF;}
	#page_stream #stream_detail {width:100%; }
	#page_stream #stream_detail td {padding:5px; vertical-align: top;}
	#page_stream #stream_detail td {padding:0px;}


#page_community .parent a {color:#93CCCD;}
	 #page_understanding .parent a {color:#9DD758;}
	 #page_stream .parent a {color:#92C5B5;}
	 #page_citizen .parent a {color:#93CCCD;}
	 #page_storm .parent a {color:#CECA97;}

.sectionnav li.community:before {border-color:#003B9B;}
	.sectionnav li.understanding:before {border-color:#9DD758;}
	.sectionnav li.stream:before {border-color:#2A6666;}
	.sectionnav li.citizen:before {border-color:#93CCCD;}
	.sectionnav li.storm:before {border-color:#CECA97;}

#page_community .sectionnav li.community:before,
	#page_understanding .sectionnav li.understanding:before,
	#page_stream .sectionnav li.stream:before,
	#page_citizen .sectionnav li.citizen:before,
	#page_storm .sectionnav li.storm:before {border-color: #4D87AE; }

#page_community .sectionnav li.community a,
	#page_understanding .sectionnav li.understanding a,
	#page_stream .sectionnav li.stream a,
	#page_citizen .sectionnav li.citizen a,
	#page_storm .sectionnav li.storm a {text-decoration:underline; }

#page_community .callout, #page_community .callout a,
	#page_stream .callout, #page_stream .callout a {color:#FFF; }

/*------------------------------------*\
    Index
\*------------------------------------*/
#page_index {color:#FFF;}
#page_index a {color:#93CCCD;}
	#page_index a:hover {color:#FFF;}

#page_index #index_header .branding {
    display: table;
    width: 90%;
    margin: 20px auto;
	max-width:520px;
}
#page_index #index_header .branding a { display:table-cell;}

#page_index #index_header .branding.promo_active {width:100%; max-width: 100%;}
#page_index #index_header .branding.promo_active .identity {display:block;}
#page_index #index_header .branding.promo_active a {  display: inline;
  vertical-align: top;
	float: none; }
     .promo_active .promo {display:block; text-align: right;}

#page_index, #page_index #index_header, #page_index #main {background-color: #3f6658;}

#page_index footer {background-color: #3f6658;  }
	#page_index footer .wrapper {border-top: solid 3px #93CCCD; border-bottom: solid 3px #93CCCD; padding: 10px 0; }
#page_index .update {font-size:0.75em; text-align:right; color: #93CCCD; padding: 10px 0; }

#page_index .section {width:18%; margin-right:0.5%; float:left; margin-bottom:20px; }

@supports( grid-area: auto ) { /*styles for browsers that support grid*/
    #page_index #main .wrapper  {  
        display: grid;
        grid-template-columns: repeat( auto-fit, minmax(170px, 1fr) );
        grid-gap: 15px; 
        }
    
#page_index .section {width:auto; float:none; margin-right:0; min-width:auto; margin-bottom:0px;}
}
#page_index .features .wrapper {display:table;}
	#page_index #main .section  {
	font-size:0.875em; padding:0 0 0 10px; border-left:solid 2px #fff;
	}

#page_index .features .wrapper {border-top: dashed 1px #93CCCD;}
	#page_index .features .item {display:table-cell; font-size:0.875em; padding:15px; vertical-align: middle; }

#page_index .features .item .img_left {float:left; margin: 0 15px 0 0; }
#page_index #main .section.community {border-color:#003B9B;}
	#page_index #main .section.understanding {border-color:#9DD758;}
	#page_index #main .section.streams {border-color:#246666;}
	#page_index #main .section.citizen {border-color:#93CCCD;}
	#page_index #main .section.storm {border-color:#CECA97;}

#page_index .section ul {margin:0; padding:0;}
#page_index .section li {line-height:20px; padding:0; margin:0 0 0 20px;}
#page_index .section li.parent {list-style-type: none; margin:0;}
#page_index .section li.parent a {color:#FFF; font-family: 'Roboto Condensed'; text-decoration:none; font-size:1.14em;}
#page_index .section li.parent a:hover {color:#93CCCD;}
#page_index .section li.parent:before { 
    content: "";
    display: inline-block;
    height: 18px;
    width: 18px;
    left: -10px;
	top:0px;
    position: relative;
	background-color:#FFF;
	}
#page_index .community li.parent:before {background-color:#003B9B;}
	#page_index .understanding li.parent:before {background-color:#9DD758;}
	#page_index .streams li.parent:before {background-color:#2A6666;}
	#page_index .citizen li.parent:before {background-color:#93CCCD;}
	#page_index .storm li.parent:before {background-color:#CECA97;}



/*------------------------------------*\
    ORIGINAL STYLE
\*------------------------------------*/
.linkExternal {
	background-image: url(/images/Icon_External_Link.gif);
	background-repeat: no-repeat;
	background-position: right;
	padding-right: 15px;
}


.cssbutton{
background-color: #ffff88;
border: 2px #888888 outset;
padding: 1px 4px;
color: #ff0000;
text-decoration: none;
font: bold 110% Verdana, Helvetica, sans-serif;
}
.cssbutton:link, .cssbutton:visited{
color: #ff0000;
text-decoration: none;
}
.cssbutton:hover{
border-style: inset;
background-color: #ffff00;
color: #0000ff;
text-decoration: none;
padding: 2px 3px 0 5px; /*shift text 1px to the right and down*/
}
.cssbutton:active{
background-color: #aaaa99;
color: white;
text-decoration: none;
}






.pagehead {
	color: #003366;
	font-weight: bold;
	text-align: center;
}
a.pagehead:link    { font-weight: bold; color: #003366; text-decoration: underline;}
a.pagehead:visited { font-weight: bold; color: #336699; text-decoration: underline;}
a.pagehead:hover   { font-weight: bold; color: #993366; text-decoration: underline;}

.greenpagehead { 	color: #007F00; font-weight: bold; }
a.greenpagehead:link    { font-weight: bold; color: #007F00; text-decoration: underline;}
a.greenpagehead:visited { font-weight: bold; color: #336699; text-decoration: underline;}
a.greenpagehead:hover   { font-weight: bold; color: #993366; text-decoration: underline;}

.headline { color: #003366; font-weight: bold; }
a.headline:link    { font-weight: bold; color: #003366; text-decoration: underline;}
a.headline:visited { font-weight: bold; color: #336699; text-decoration: underline;}
a.headline:hover   { font-weight: bold; color: #993366; text-decoration: underline;}

.greenheadline { color: #007F00; font-weight: bold; }
a.greenheadline:link    { font-weight: bold; color: #007F00; text-decoration: underline;}
a.greenheadline:visited { font-weight: bold; color: #336699; text-decoration: underline;}
a.greenheadline:hover   { font-weight: bold; color: #993366; text-decoration: underline;}

.photo { 
	border-top-width: 1px;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #ADADAD;
	border-right-color: #999999;
	border-bottom-color: #999999;
	border-left-color: #ADADAD;
}

.whtbodybold { font-weight: bold; color: #FFFFFF; text-decoration: none;}
a.whtbodybold:link    { font-weight: bold; color: #FFFFFF; text-decoration: underline;}
a.whtbodybold:visited { font-weight: bold; color: #FFFFFF; text-decoration: underline;}
a.whtbodybold:hover   { font-weight: bold; color: #CCFFFF; text-decoration: underline;}


.border_left {
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #666666;
	border-right-color: #666666;
	border-bottom-color: #666666;
	border-left-color: #666666;
}
.border_top {
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #666666;
	border-right-color: #666666;
	border-bottom-color: #666666;
	border-left-color: #666666;
}
.border_topleft {
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #666666;
	border-right-color: #666666;
	border-bottom-color: #666666;
	border-left-color: #666666;
}
.printlogo {
	display: none;
}
.border_right {
	border-right-width: thin;
	border-right-style: solid;
	border-right-color: #000000;
}
.smalltext {font-size:0.875em;}
.verysmalltext {font-size:0.75em;}
.smalltextbold,.smalltextbold:link,.smalltextbold:hover,.smalltextbold:visited {
	font-weight: bold;
}
.outline1 {
	margin-top: 10px;
	margin-bottom: 3px;
}
.outline1 ul {
	margin-left: 1.5em;
	padding-left: 0em;
	text-indent: 0
}
.outline1 li {
	margin-left: 0em;
	padding-left: 0em;
	text-indent: 0
}
.clear {
	clear: both;
	height: 3px;
}

.outlined {
	border: 1px solid #999999;
	font-family: Verdana, Geneva, sans-serif;
	font-style: normal;
} 




.flagged { font-weight: bold; color: #FF0000; text-decoration: none;}
a.flagged:link    { font-weight: bold; color: #FF0000; text-decoration: underline;}
a.flagged:visited { font-weight: bold; color: #FF0000; text-decoration: underline;}
a.flagged:hover   { font-weight: bold; font-size: 12px; color: #FF0000; text-decoration: underline;}
a.flagged:active   { font-weight: bold; color: #FF9900; text-decoration: underline;}




/********** NRW 3/07 - left sidebars -- e.g. chester *********/
div#sideMnu p{ }
div#sideMnu b, div#sideMnu strong { font-weight: bold; }
div#sideMnu li {
	margin-top: 0.2em;
	margin-left: 2em;
	padding-left: 0em;
}
div#sideMnu ul, div#sideMnu ol {
	margin-top: 0em;
	margin-left: 0em;
	padding-left: 0em;	
}
div#sideMnu a:link    { color: #000099; text-decoration: underline;}
div#sideMnu a:visited { color: #000066; text-decoration: underline;}
div#sideMnu a:hover   { color: #993366; text-decoration: underline;}
div#sideMnu a:active   { color: #993366; text-decoration: underline;}

/********** NRW 3/07 - dense tables -- e.g. southshore streams index *********/
  #tightTbl{
     /*border: 1px solid #999999;*/
   }
   div#tightTbl tr td{
     background-color: #ffffff;
     text-align: center;
		 border: 1px solid #cccccc;
		 padding: 2px;
   }
   div#tightTbl tr.odd td {
     background-color: #f2f2f2;
   }
   div#tightTbl tr.title td{
     background-color: #dddddd;
		 border: 1px solid #999999;
     font-weight: bold;
   } 
	 div#tightTbl tr td.lft{
      text-align: left;
			padding-left: 4px;
			font-weight: bold;
   }
	 div#tightTbl tr td.lft a{
			font-weight: bold;
   }
	
	
	
  /* #mnuTbl -- 3/07 used for e.g the reports pages top/bottom links */
	
   div#mnuTblTop tr td{
     background-color: #ffffff;
		 color: #000000;
     text-align: center;
		 font-size: 12px;
		 border: 1px solid #999999;
		 font-weight: normal;
		 padding: 2px;
   }
   div#mnuTblTop tr td.current{
     background-color: #666666;
		 color: #ffffff;
		 font-weight: bold;
   }
	
   div#mnuTblBtm tr td{
     background-color: #ffffff;
		 color: #000000;
     text-align: center;
		 border: 1px solid #999999;
		 font-weight: normal;
		 padding: 2px;
   }
   div#mnuTblBtm tr td.current{
     background-color: #999999;
		 color: #ffffff;
		 font-weight: bold;
   }

	/* 3/07 used on e.g. reports tables */ 
  div#references tr{
	 	vertical-align:top;
		/* ???
		border-top-style: solid;
		bordercolor: #666666;
		border-width: 5px 0 0 0;*/		
	}
	 
   div#references tr td{
     background-color: #ffffff;
		 color: #000000;
     text-align: left;
		 font-size: 12px;
		 border: 0;
		 font-weight: normal;
		 padding-left: 5px;
		 padding-right: 3px;
		 padding-bottom: 1em;
		 padding-top: 0.5em;
   }	
	 
	div#references tr td.dates{	 
		background-color: #dddddd;
	}	 
	  
	div#h1 {
		font-size: 16px;
		color: #333333;
		font-weight: bold;
		padding-top: 1em;
	}
	div#references h2 {
		color: #454545;
		font-weight: bold;
	}	
	div#references h3 {
		font-size: 13px;
		color: #666666;
		font-weight: bold;
	}		
	div#references em {
		font-weight: bold;
		font-style:italic;
	}
	div#references a {
		font-weight: bold;
	}
	div#references ul, div#references li {
		margin-top:7px; 
		margin-bottom:7px; 
	}
	
#cite {
	margin:25px;
  padding: 10px 10px 10px 40px;
  border:#cccccc 2px solid;
}

div#cite p {
  text-indent: -30px;
	padding-bottom: 10px;
	}
	
	
#citeUs {
	margin:25px;
  padding: 10px 10px 10px 40px;
  border:#cccccc 2px solid;
}

div#citeUs p {
  text-indent: -10px;
	padding-bottom: 10px;
	}
		
	
/* #simpleTblMnu -- 7/07 used for e.g the stream anatomy sub-pages bottom menu */	
div#simpleTblMnu tr td{
	background-color: #EEEEEE;
	color: #000000;
	text-align: center;
	border: 1px solid #999999;
	font-weight: normal;
	padding: 2px;
}
div#simpleTblMnu tr td.track{ background-color: #000000; color: #ffffff; font-weight: bold;}
div#simpleTblMnu tr td.current{ background-color: #5f5f5f; color: #ffffff; font-weight: bold;}

div#simpleTblMnu a:link    { font-weight: normal; color: #3333FF; text-decoration: underline;}
div#simpleTblMnu a:visited { font-weight: normal; color: #666666; text-decoration: underline;}
div#simpleTblMnu a:hover   { font-weight: bold; color: #FF3333; text-decoration: none;}

div#simpleTblMnu tr td.track a:link    { font-weight: bold; color: #EEEEEE; text-decoration: none;}
div#simpleTblMnu tr td.track a:visited { font-weight: bold; color: #FFFFFF; text-decoration: none;}
div#simpleTblMnu tr td.track a:hover   { font-weight: bold; color: #FF3333; text-decoration: none;}


/*NW 6/26/13 for plotter pgs*/
.boxed{
background-color: #ffffcc;
padding: 4px;
margin: 5px 15px;
text-decoration: none;
font-size: 80%;
border: 1px solid #666666;
}
.boxed a:link, .boxed a:visited{
color: #000066;
text-decoration: underline;
}
.boxed a:hover{
font-weight: bold;
font-size: 110%;	
color: #993366;
text-decoration: none;
}

/*12/4/15*/

.txtCenter {
	text-align: center;
}

.orngBld { 
	color: #ea7106; font-weight: bold; 
	text-align: center;
	margin: 15px 5px;
}

/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/

@media only screen and (max-width: 1100px) {
	#header .wrapper {display:table-row;}
	#header .branding {display:table-cell; width: 60%; vertical-align:middle; padding: 0 0 0 20px; }
		#header .branding .logo {max-width:30%;}
	#header .branding .logotype {margin-left:3%; max-width:67%;}
	#header .sectionnav {display:table-cell; width: 40%; vertical-align:middle; padding:0 20px 0 0; float:none;}
	#header .sectionnav ul {float:right;}
}
@media only screen and (max-width: 1000px) {
	#nav a {
    padding: 0 15px 0 0;
    font-size: 0.9375em;
	}
}
@media only screen and (max-width: 900px) {
    #page_index #main .citizen.section {clear:left;}
    #page_index .section {width:30%; margin-right:0.5%; float:left; }

    @supports( grid-area: auto ) { /*styles for browsers that support grid*/
        #page_index .section {width:auto; float:none; margin-right:0; margin-bottom:0px;}
    }
            
}
@media only screen and (max-width: 720px) {
	#page_index #index_header .branding.promo_active {}
	#page_index #index_header .branding.promo_active .identity {display: table;
width: 90%;
margin: 20px auto;
max-width: 520px;}
	#page_index #index_header .branding.promo_active .identity a { display:table-cell; }
	#page_index #index_header .branding.promo_active .promo {
		float: left;
		clear: both;
		width: 100%;
		text-align: center;
		margin-top: 20px;
		}
	
}
@media only screen and (max-width: 600px) {
	#header .branding, #header .sectionnav {display:block; width: 100%; clear:both;}
	#header .sectionnav ul {float:left;}
	#nav a {font-size:0.875em; line-height:30px;}
	
#page_index .features .item {display:block; font-size:0.875em; float:left; clear:left; width:100%; }
	
	/* primary content */
.primary {
	width:100%;
	float:none;
	display:table-header-group;
	}

.sidebar  {
	width: 100%;
	margin-right: 0%;
	float:none;
	display:table-footer-group;
	}
	.sidebar ul {}
	.sidebar li {float:left; margin-right:20px;}
	.sidebar img {display:none;}
	
}
@media only screen and (max-width: 400px) {
		.logo {display:none;}
	.logotype {
    margin-left: 0;
}
}