/* -------------------------------------------------------------- 
  
   reset.css
   * Resets default browser CSS.
   
   Based on work by Eric Meyer:
   * meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
   
-------------------------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
}

/* @group Structure */

body, html {
	background: #709bbd url(../images-kch/kch-bg-summer.jpg) no-repeat center top;
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 12px;
	line-height: 18px;
	font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;
}



/* container (or wrapper) set for max width of 800; for IE, use the width expression what basically tests if the page is wider than 800 px; if so, set width to 800; otherwise, let it auto size */

#container {
	position: relative;
	text-align: left;
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	padding: 0px 0px 0px 0px;
	overflow: auto;
}


#srch {
    float: right;
    width: 253px;
    padding: 20px 0px 10px 5px;
}



#masthead {
float: left;
clear: both;
margin: 0px;
padding: 0px;
}

#nav {
	float: left;
	clear: both;
	margin:  -35px 0px 0px 0px;
	padding: 0px;
	z-index: 5000;
	position: relative; /* hack to make ie7 recognize z-index */
	width: 800px;
	height: 35px;
}


/* Content div contains both the "left" and "right" divs that hold the main text and images */

#content {
	background-color: #d4e6f7;
	margin: 0px 0px 0px 0px;
	width: 798px;
	overflow: auto;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	clear: both;
}

#content h1 {color: #8c1916; font-size: 16px; font-weight: bold; padding: 8px 20px; font-family: Georgia,'Times New Roman',Times, serif;}

#content h2 {font-size: 14px; font-weight: bold; padding: 8px 20px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;}

#content h3 {font-size: 13px; font-weight: bold; padding: 8px 20px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;}

#content p {font-size: 12px; line-height: 18px; padding: 8px 20px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;}

#content a:link {color:#036;}

#content a:hover {color:#39c; font-style: italic;}

#content a:visited {color:#069;}

#content img {
	border: 1px solid #069;
	background-color: #ffffff;
	padding: 4px;
}

#content object {
	border: 1px solid #069;
	background-color: #ffffff;
	padding: 4px;
}

#content hr {
	border: none 0;
	border-top: 1px solid #004400;	
	width: 89%;
	height: 1px;
	margin: 0px 0px 0px 20px;
	padding: 0px;
	/* left align in IE, Opera */
	text-align: left;
}

#content table {
	margin-left: 20px;
}

#content2 {
	background: #709bbd url(../images-kch/content-bg-2.gif) repeat-y center top;
	margin: 18px;
	overflow: auto;
}

#content2 h1 {font-size: 16px; font-weight: bold; padding: 8px 20px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;}

#content2 h2 {font-size: 14px; font-weight: bold; padding: 8px 20px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;}

#content2 h3 {font-size: 13px; font-weight: bold; padding: 8px 20px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;}

#content2 p {font-size: 12px; line-height: 18px; padding: 8px 20px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;}

#content2 a:link {color:#036;}

#content2 a:hover {color:#39c; font-style: italic;}

#content2 a:visited {color:#069;}

#content2 img {
	border: 1px solid #069;
	background-color: #ffffff;
	padding: 4px;
}

#content2 object {
	border: 1px solid #069;
	background-color: #ffffff;
	padding: 4px;
}

#content2 hr {
	border: none 0;
	border-top: 1px solid #004400;	
	width: 95%;
	height: 1px;
	margin: 0px 00px 0px 20px;
	padding: 0px;
	/* left align in IE, Opera */
	text-align: left;
}

#content2 table {
	margin-left: 20px;
}

#slideshow {
	width: 490px;
	height: 300px;
	overflow-x: hidden;
	overflow-y: auto;
	}

/* 3-column layouts */

.col3-1 {
    float: left;
    width: 253px;
}

.col3-2 {
    float: left;
    width: 506px;
}

.col3-3 {
    float: left;
    width: 760px;
}

/* 4-column layouts */

.col4-1 {
    float: left;
    width: 190px;
}

.col4-2 {
    float: left;
    width: 380px;
}

.col4-3 {
    float: left;
    width: 570px;
}

.col4-4 {
    float: left;
    width: 760px;
}

#ecomm {
	float: left;
	padding: 0px 20px;
}

#ecomm p {font-size: 12px; line-height: 18px; padding: 8px 20px;}

#ecomm a:link {color:#316236;}

#ecomm a:hover {color:#004400; font-style: italic;}

#ecomm a:visited {color:#000000;}

#ecomm hr {
	border: none 0;
	border-top: 1px solid #004400;	
	width: 89%;
	height: 1px;
	margin: 0px 0px 0px 20px;
	padding: 0px;
	/* left align in IE, Opera */
	text-align: left;
}

/* Feature Area: used to highlight an area of content*/

#feature {
	background-color: #fff;
	border: 1px solid #fff;
	float: left;
	margin: 0px;
	padding: 10px 0px 10px 10px;
	width: 788px;	
}

.col3-feature {
    float: left;
    width: 253px;
    padding: 0px 0px 0px 8px;
}
/* Footer Area */
#footer {
	float: left;
	text-align: left;
	background-color: #d9e8ff; 
	margin: 0px;
	padding: 0px;
	width: 800px;
}

#footer p {color: #000000; font-size: 10px; line-height: 16px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif; padding-left: 16px;}

#footer a:link {color:#036; font-size: 10px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

#footer a:hover {color:#39c; font-size: 10px;font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

#footer a:visited {color:#069; font-size: 10px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

.footer-contact {
	float: left;
	width: 246px;
	margin: 10px 10px 10px 0px;
}

.footer-links {
	float: left;
	width: 246px;
	margin: 10px 10px 10px 0px;
}

.footer-bmd {
	float: left;
	width: 246px;
	margin: 10px 0px 10px 0px;
}

/* Feature Area: the example below is used on Fran's site to create a feature area that has a graphic (with rounded corners) on top, content in the middle, and then a small graphic at the bottom (with rounded corners). I used the same approach in the BMD site for the gray side bar with quotes.*/

.feature-top1 {
	background: url(../wnp-images/feature-bears.jpg) no-repeat;
	width: 253px;
	height: 150px;
}

.feature-body {
	background: url(../wnp-images/feature-body.jpg) no-repeat;
	width: 253px;
	margin-top: -10px;
}

.feature-btm {
	background: url(../wnp-images/feature-bottom.jpg) no-repeat;
	width: 253px;
	height: 20px;
	margin-top: -12px;
}


/* Lists styles, generally apply same style to all types; however these could be placed in areas such as "Content" or "Side" to have different styles for lists in different areas */

ul, li, ol {margin: 0px 0px 0px 20px; padding: 0px 10px 5px 5px;  line-height: 17px; font-size: 12px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

/* uses letters instead of nos for ordered lists */

ol.alpha {list-style-type: lower-alpha;}

ol.u-alpha {list-style: upper-alpha;}

/* Floating boxes, good for photos with captions or similar */


div.floatl {
  float: left;
  }
  
div.floatl p {
   text-align: left;
   width: 265px;
   }

div.floatr {
  float: right;
  }
  
div.floatr p {
   text-align: center;
   width: 265px;
   }

div.container {
  border: 2px dashed #333;
  background-color: #ffe;
  }
div.spacer {
  clear: both;
  }


/* For image captions; border line not necessary, only the float and width; done as
<div class="pictr">
  <p><img src="image.jpg" width="136"
    height="200" alt="My Image">
  <p>This is my image caption
</div>
 */
 
/* For images floated right */

div.pictr {
  float: right;
  width: 50%
  margin: 15px;
  padding: 15px;
}
div.pictr p {
  text-align: center;
  line-height: 10px;
  font-size: 10px;
}

/* For images floated left */

div.pictl {
  float: right;
  width: 50%
  margin: 15px;
  padding: 15px;
}
div.pictl p {
  text-align: center;
  line-height: 10px;
  font-size: 10px;
}


/* special items as needed */

#scrollbox {
width:400px;
height:300px;
overflow: auto
}


.sml {
	font-size: 10px;
}

.ovrstrk {text-decoration:line-through; line-height: 16px; font-size: 12px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;}

/* for automatic back2top.js script--styles the link */

.bak2top {
	position: relative;
	font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;
	font-size: 10px;
	color: #036;
	background-color: #ffffff;
	border: 2px solid #039;
	padding: 4px;
	z-index: 1200
}

/* Highlighting elements such as rules, pull quotes and similar */


.quotboxb {border-color: #2C69B6; border-style: double; border-width: 3px; margin-top: 20px; margin-bottom: 20px; margin-left: 30px; margin-right: 30px; padding-top: 5px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; background-color: #B9CAF5}

.quotbox { margin: 30px; padding: 10px; color: #fff; background-color: #77c814; font-size: 13px; font-weight:bold; line-height: 18px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;}

.quotex {

	border-top: 2px solid #ba1e11; 
	border-bottom: 2px solid #ba1e11;
	margin: 15px 30px 15px 30px; 
	padding: 10px 10px 10px 10px; 
	background-color: #ffffff; 
	font-size: 14px; 
	font-weight:bold; 
	font-style: italic; 
	font-family: Georgia,'Times New Roman',Times, serif;
}

.quotxt {

	float: right;
	width: 325px;
	border-top: 2px solid #ba1e11; 
	border-bottom: 2px solid #ba1e11;
	margin: 15px 10px 15px 10px; 
	padding: 10px 10px 10px 10px; 
	font-size: 12px;
	font-style: italic;
}

.pbox {border: 1px solid #a1a5a9; padding: 5px 5px 5px 5px; margin: 5px 5px 5px 5px;}


/* Adds background color to text */

.shablue {margin: 5px 5 5 5; padding: 5px 5 5 5; background-color: #dce3f5;}

.shagold {margin: 5px 5 5 5; padding: 5px 5 5 5; background-color: #f7f0ae;}

/* Styles for Mal's e-commerce tables currently in most of my Excel TDF masters; probably should revisit these on site-by-site basis */

.ptcol {border-bottom: 1px dotted #000000; text-align: left; font-size: 12px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

.ptcolhd {background-color: #709bbd; border-bottom: 1px solid #709bbd; text-align: left; color: #ffffff; font-size: 12px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}
.ptfrm {border-bottom: 1px solid #ccc; text-align: left; font-size: 11px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;}

.pthdr1 .pthdr {font-size: 14px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}


/* Adds nice border and title box around a section. If you use a dotted border, it runs right through the legend on IE, so stick w solid */

.wr_fieldset {
width: 620px; 
margin: 12px 30px 12px 30px;
padding: 0; }

.wr_fieldset fieldset {
border: solid 1px #004477; }

.wr_fieldset legend {
margin: 0 10px 0 10px;
padding: 0 5px 0 5px;
color: #333333;
font-size: 12px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif; }

.wr_fieldset_pad {
margin: 0;
padding: 8px; }

.tblborder {
	border-left: 1px dotted #722100;
	border-collapse: collapse;
}


/* Styles for tables */

/* Applies global padding and paragraph styles to entire table. Normally used for forms or tabular data within the main layout table so you do not need to add paragraph or other styles to each td */

table.frm td {
	padding: 1px; 
	font-size: 11px;
	line-height: 15px;
	font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;}
	
.tblborder {
	border: 1px solid #338BA6;
	border-collapse: collapse;
}

	
/* Add following as a table class="cellbkgrnd" for applying table cell backgrounds using tablestyle name="Alt Background By Style w/o formatting */

.cellbkgrnd {background-color: #cc0000;}

/* Adding bkground images to table cells or divs for announcement boxes or similar; commented out below until needed */

/* .bg1 {background: white url(images/divheader.gif) no-repeat top left; width: 236px; padding: 48px 10 10 10; border: 1px solid #548dab; border-collapse: collapse; text-align: left;} */

/* Hyperlink styles that include hover and visited styles - sml reduces text size and is good for link to BMD or footer links; whtlink produces white links on dk backgrounds */

a:link {color:#00395b; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

a:visited {color:#6cabe7; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

a:hover {color:#f25700; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

a.sml:link {color:#003399; font-size: 10px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

a.sml:visited {color:#6699cc; font-size: 10px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

a.sml:hover{color:#b0cae8;  font-size: 10px; font-family: Verdana, Arial, Helvetica, Swiss, sans-serif}

/* a.wht:link {color:#ffffff;}

a.wht:hover {color:#f2f2f2;} */

a.whtlnk:link  {
color:#ffffff;
font-size: 11px;
font-weight:bold;
font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;
}

a.whtlnk:visited {
color:#f1f1f1;
font-size: 11px;
font-weight:bold;
font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;
}

a.whtlnk:hover {
color:#ffff66;
font-size: 11px;
font-weight:bold;
font-family: Verdana, Arial, Helvetica, Swiss, sans-serif;
}

/* various special effects via css that get added as time goes by */

/* bottomgraphic will float an image over the bottom of the site--need to use png or gif for transparency */

#bottomgraphic {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 60px;
	background: url(../generic-images/bottom-stone2.png) repeat-x center bottom;
}



h2:target, h2.sftarget {
	color: white;
	background: #a02422;
}


/* this section is for mega menus, NOTE: use our nav div to set width and positioning; normally, we'll do the menus as an include */


ul#menu {
margin: 0;
padding: 0.1em 0em;
}


ul#menu li {
display: inline;
margin: 0em;
position: relative;
}

/* @group css rollovers */

/* use this section for rollover images, adding nav1, nav2, etc., as h2 class */

ul#menu h2.nav1 {
float: left;
display: block;
width: 123px;
height: 35px;
background: url("../images-kch/nav/kch_01.png") no-repeat 0 0;
}

ul#menu h2.nav1:hover {
background-position: 0 -35px;
}

ul#menu h2.nav1 span {
display: none;
}

ul#menu h2.nav2 {
float: left;
display: block;
width: 76px;
height: 35px;
background: url("../images-kch/nav/kch_02.png") no-repeat 0 0;
}

ul#menu h2.nav2:hover {
background-position: 0 -35px;
}

ul#menu h2.nav2 span {
display: none;
}

ul#menu h2.nav3 {
float: left;
display: block;
width: 186px;
height: 35px;
background: url("../images-kch/nav/kch_03.png") no-repeat 0 0;
}

ul#menu h2.nav3:hover {
background-position: 0 -35px;
}

ul#menu h2.nav3 span {
display: none;
}

ul#menu h2.nav4 {
float: left;
display: block;
width: 208px;
height: 35px;
background: url("../images-kch/nav/kch_04.png") no-repeat 0 0;
}

ul#menu h2.nav4:hover {
background-position: 0 -35px;
}

ul#menu h2.nav4 span {
display: none;
}

ul#menu h2.nav5 {
float: left;
display: block;
width: 200px;
height: 35px;
background: url("../images-kch/nav/kch_05.png") no-repeat 0 0;
}

ul#menu h2.nav5:hover {
background-position: 0 -35px;
}

ul#menu h2.nav5 span {
display: none;
}



/* @end */

/* styles for dropdown items */

/* @group mega menu */

ul#menu h3 {
font-size: 100%;
font-weight: normal;
display: inline;
}

ul#menu li a {
color: blue;
text-decoration: none;
padding: 0 0.4em;
}

ul#menu li a:hover {
text-decoration: underline;
}

/* orig script uses an arrow to indicate dropdowns, using
background: transparent url(arrow.gif) center right no-repeat; */


ul#menu div {
display: none;
z-index: 5000;
}

ul#menu li.hovering div {
display: block;
}

ul#menu li#dept {
	float: left;
	padding: 0px;
	margin: 0;
}

ul#menu li#dept div#depttab {
border: 1px solid #8c1916;
width: 550px;
position: absolute;
top: 36px;
left: 0px;
padding: 5px;
background: #eee;
color: black;
}

ul#menu li#dept div#depttab .col1 {
	width: 175px;
	padding: 5px;
	float: left;
	border-right: 1px dotted #ccc;
}

ul#menu li#dept div#depttab .col2 {
	width: 165px;
	padding: 5px;
	float: left;
	border-right: 1px dotted #ccc;
}

ul#menu li#dept div#depttab .col3 {
	width: 160px;
	padding: 5px;
	float: left;
}


ul#menu li#dept div a {
color: blue;
padding: 0;
background-image: none;
text-decoration: underline;
}

ul#menu li#dept div a:hover {
color: #6cabe7;
padding: 0;
background-image: none;
text-decoration: underline;
}

ul#menu li#council {
	float: left;
	padding: 0px;
	margin: 0;
}

ul#menu li#council div#countab {
border: 1px solid #8c1916;
width: 320px;
position: absolute;
top: 36px;
left: 0px;
padding: 5px;
background: #eee;
color: black;
}

ul#menu li#council div#countab .col1 {
	width: 140px;
	padding: 5px;
	float: left;
	border-right: 1px dotted #ccc;
}

ul#menu li#council div#countab .col2 {
	width: 130px;
	padding: 5px;
	float: left;=
}

ul#menu li#council div a {
color: blue;
padding: 0;
background-image: none;
text-decoration: underline;
}

ul#menu li#council div a:hover {
color: #6cabe7;
padding: 0;
background-image: none;
text-decoration: underline;
}

ul#menu li#board {
	float: left;
	padding: 0px;
	margin: 0;
}

ul#menu li#board div#bdtab {
border: 1px solid #8c1916;
width: 340px;
position: absolute;
top: 36px;
left: 0px;
padding: 5px;
background: #eee;
color: black;
}

ul#menu li#board div#bdtab .col1 {
	width: 150px;
	padding: 5px;
	float: left;
	border-right: 1px dotted #ccc;
}

ul#menu li#board div#bdtab .col2 {
	width: 150px;
	padding: 5px;
	float: left;
}

ul#menu li#board div a {
color: blue;
padding: 0;
background-image: none;
text-decoration: underline;
}

ul#menu li#board div a:hover {
color: #6cabe7;
padding: 0;
background-image: none;
text-decoration: underline;
}

ul#menu li#comm {
	float: left;
	padding: 0px;
	margin: 0;
}

ul#menu li#comm div#commtab {
border: 1px solid #8c1916;
width: 380px;
position: absolute;
top: 36px;
left: -150px;
padding: 1.3em;
background: #eee;
color: black;
}

ul#menu li#comm div#commtab .col1 {
	width: 200px;
	padding: 5px;
	float: left;
	border-right: 1px dotted #ccc;
}

ul#menu li#comm div#commtab .col2 {
	width: 150px;
	padding: 5px;
	float: left;
}

ul#menu li#comm div a {
color: blue;
padding: 0;
background-image: none;
text-decoration: underline;
}

ul#menu li#comm div a:hover {
color: #6cabe7;
padding: 0;
background-image: none;
text-decoration: underline;
}

ul#menu li#info {
	float: left;
	padding: 0px;
	margin: 0;
}

ul#menu li#info div#infotab {
border: 1px solid #8c1916;
width: 450px;
position: absolute;
top: 36px;
left: -280px;
padding: 1.3em;
background: #eee;
color: black;
}

ul#menu li#info div#infotab .col1 {
	width: 220px;
	padding: 5px;
	float: left;
	border-right: 1px dotted #ccc;
}

ul#menu li#info div#infotab .col2 {
	width: 200px;
	padding: 5px;
	float: left;
}



ul#menu li#info div a {
color: blue;
padding: 0;
background-image: none;
text-decoration: underline;
}

ul#menu li#info div a:hover {
color: #6cabe7;
padding: 0;
background-image: none;
text-decoration: underline;
}


ul#menu li div a.more {
color: red;
font-weight: bold;
}


ul#menu div h3 {
color: #8c1916;
font-weight: bold;
font-size: 1.1em;
}
ul#menu div p {
margin: 0 0 0.8em 0;
padding: 0;
}



/* @end */


/* end of mega menus styles */