﻿body {
	font-family: Georgia, "New Century Schoolbook", "Bitstream Vera Serif", Utopia, "Times New Roman", times, serif; 
	background: #DBDBFF;	/* light-blue background for margins of wider-than-1280px browsers */
	max-width: 1280px;
	margin: 0 auto;
	border: 0;
	padding: 0;
}

p, blockquote {line-height:1.4em}
li {line-height:1.3em}

STRONG, B {font-weight: bold;}
/* H1, H2, H3, H4 {font-family: "Century Gothic", Helvetica, Verdana, sans-serif; font-weight: bold; margin-top: 1em; margin-bottom: 0; color: #36C;} */
H1, H2, H3, H4, H5 {font-weight: normal; margin-top: 1em; margin-bottom: 0; color: #36C;}
H1 {font-size: 180%; margin-top: 0;}
H2 {font-size: 160%;}
H3 {font-size: 140%;}
H4, H5 {font-size: 120%;}
H5 { color:#333; }
LABEL {cursor: pointer;}
SMALL {font-size: 85%}

/* Keep these in order from most to least popular, so they'll appear first in ExpressionWeb dropdown style box */
.big {font-size: 125%}
.small {font-size: 75%}
.gray {color:#999}
.gray a {color:#999}
.bkgray, tr.bkgray td {background:#EEE}  /* Use for odd-shaded table rows */

.zebra tr:nth-of-type(odd) { background-color:#EEE; }	/* CSS3 to shade alternate rows gray */

.bkhilite, tr.bkhilite td {background:#FFD}  /* Use to highlight rows (subtle) */
.bkhilitestrong, tr.bkhilitestrong td {background:#FFA}  /* Use to highlight rows (strong)*/
.center {text-align:center;}

.hot {font-weight:bold; color:red}
.hotbox {border:1px solid red; background:#FFC; padding:.5em} /* hi-lite red-border box */
.warm {color:red !important;}

.loose li { padding-top: .25em; padding-bottom: .25em }

/* Images */
.imgleft {float: left; margin-right:1em; padding-bottom:1em; }
.imgright {float: right; margin-left: 1em; padding-bottom:1em; text-align:right; }
.bordergray {border:1px solid gray;}
.borderdkgray {	border:1px solid #333;}
.padtop { padding-top:1em }	/* for images that appear close to the opening div.content tag, adds a little top space */

.credit, .tag, .imgleft, .imgright { font-size: 75%; color: #666;} /* File tags and dates,  */
.imgleft, .imgright { line-height:1.2em; }	/* single-space caption text, even if within bodytext div */
.credit a, .tag a, .imgleft a, .imgright a {color:inherit;}
.credit {text-align:right;padding-right:1em}

/* Table styles */
table.thin, table.thintight { border-collapse: collapse; border: 1px solid #CCC; }
table.tight {margin-bottom:0}
.thin td, .thin th, .thintight td, .thintight th {border:1px solid #CCC;}
.thin td, .thin th {padding:6px}
.thintight td, .thintight th {padding:3px}

.thin p, .thintight p {margin:0}
.thin td ul {margin-bottom:0; padding-bottom:0; margin-top:.5em;}

.compact {font: 85% calibri, verdana, helvetica, arial, sans-serif; }
.compact td { padding:3px; }

.bodytext p, .bodytext blockquote {line-height:1.8em}

#minutes {border:2px solid red; padding:6px}

div.addthis_toolbox {
	display:inline;
}
.addthis_toolbox a {
	display:inline; font-size: 11pt; font-family: calibri,"ms sans serif", helvetica,"sans serif"; text-decoration:none;
}

/* Add space between tables and header elements if no text in between */
H3+TABLE {margin-top:.75em}

/* MAJOR PAGE ELEMENTS */

#container { 
	background: white;
	width: 100%;
}

#center {padding: .5em 1em 0 1.5em;}	/* center-column content on top-level pages (in tables) */

/* place images as headers in top-level pages; the image URL is set in each page individually */
div#head {
	background-repeat: no-repeat;
	background-position: right;
	height:130px;
}

/* NEW MENU (9/16/11)  */
#menutop_wrapper, ul#menutop, #menutop li {
	background-color:#36C;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#214EA9', endColorstr='#3366CC'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#214EA9), to(#36C)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #214EA9,  #36C); /* for firefox 3.6+ */
}

ul#menutop {
	list-style-type: none;
	font-size:120%;
	height:2.5em;
	margin:auto;
}

#menutop li {
	float:left;
}
li#home img { margin-right:5px; }

li#searchli { float:right; }

li#about, li#fw, li#energy, li#news, li#reports, li#contact {
	border-left:1px dotted #999;
}

ul#menutop a {
	padding-right: 1.5em;
	padding-left: 1.5em;
	line-height:2.5em;
	text-decoration: none;
	color: #DDD;
	display:block;
}

#menutop a:hover,
	.about #menutop #about a,
	.fw #menutop #fw a,
	.energy #menutop #energy a,
	.news #menutop #news a,
	.reports #menutop #reports a,
	.contact #menutop #contact a {
		background-color:#EEE;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CCCCCC', endColorstr='#EEEEEE'); /* for IE */
		background: -webkit-gradient(linear, left top, left bottom, from(#CCC), to(#EEE)); /* for webkit browsers */
		background: -moz-linear-gradient(top,  #CCC,  #EEE); /* for firefox 3.6+ */
		color:#444;
}

ul#menutop img { float:left; padding-top:.5em; }

/* Google search box formatting */
#cse-search-box {height:2em; margin: .5em 1em 0 .5em; }
.search {margin-top: 2px; font-family:Georgia; color:#333}

/* END OF NEW MENU */


/* Sidebar boxes - usage: id="sidebar" class="blue" */
#sidebar {
	float:right; 
	width:300px; 
	border:1px solid gray; border-top:none; 
	padding: 0 1em 1em 1em; margin-top:0; margin-left:1em;
}

#sidebar h4 {color:black}
.blue {background-color: #CBE6FF}
.orange {background-color: #FFEBD7}
.yellow {background-color: #FFD}

#sidebar_r {
	padding: 0 1em .5em 1em; 
	border-left:1px dotted #CCC; 
	border-bottom:1px dotted #CCC;
	background-color: #FFD;
}

#sidebar_l {
	padding: 0 1em .5em 1em;
	border-right: 1px dotted #CCC;
	border-bottom: 1px dotted #CCC;
	background: #EEE;
}

/* prevent white space above sidebars by zeroing margin for first h3 element */
#sidebar_r > h3:first-child, #sidebar_l > h3:first-child { margin-top:0; padding-top:1em }

/* Homepage and sub-home page "entry" class, used for center-column items, provides spacing */
/* around div and floats images to the left */
.entry {margin: 1em 0 1.5em 0; clear:both}
.entry img {float:left; margin-right:1em; margin-bottom:1.5em}
.entry p {margin: .25em 0}
.entry span {font-weight:normal}
.entry h4 {margin-bottom:0; font-size:110%;}
.entry h4 a {text-decoration:none}
.entry h4 a:hover {text-decoration:underline;}


/* Breadcrumb, add clear:both for narrow screens or large font, allows menu to expand two lines */
#crumb {clear:both; background-color:#666; padding-top:4px; padding-bottom:4px; color:white; margin:0; font-size: 85%}
#crumb a, #rtfcrumb a {color:white; text-decoration: underline}
#crumb a:hover, #rtfcrumb a:hover {text-decoration: none}

/* Display or hide elements */

.hide {display:none}

@media print {
  .hidePrint, .crumb, .crumb2, #menu, #menutop { display: none }
  .hideScreen { display: inline }
}

@media screen {
  html { overflow: scroll; }	/* always display right-hand scroll bar, so page does not expand or shrink horizontally */
  .hideScreen { display: none }
  #container { overflow: auto; }	/* overflow to force div clear; need to revisit */
  #content { margin: .5em 5em; padding-bottom: .5em; line-height:1.3em; overflow: auto; }
  #sidebar + #content, #sidebar_r + #content {margin-right: 1em}	/* reduce content margin when sidebar present */
  #rtfmenu + #content, #menu + #content, #sidebar_l + #content {margin-left: 1em}	/* reduce content margin when sidebar present */
}


/* RTF styles */
#rtfhead {border-bottom: 2px solid #F63; margin: 0; padding-top:.5em; height:65px}
#rtfhead img {border:none}
#rtfhead p {font: 70%/1.4em "trebuchet ms", arial, "sans serif"; color: gray; display:inline; margin:0; padding:0}

#rtfhead a {color: gray}

#rtfcrumb {background-color:#F63; padding-top:4px; padding-bottom:4px; color:white; margin:0; font-size: 85%}

#rtflogo_l {float:left; margin: 0 1em}
#rtflogo_r {float:right; margin:  10px 1em 0 0}

/* Give body the following ID tag for pages that have left-hand menu */
#rtf_2_column #content {margin-left:15em}

#rtfmenu, #menu {
  background-color:#FFEBD7; 
  padding: 1em 1em .5em 1em;
  border-right: 1px dotted #CCC;
  border-bottom: 1px dotted #CCC;
  margin-right:1em; 
  float:left;}

#menu {
	background-color: #EEE
}
#menu a, #rtfmenu a, #sidebar_r a, #sidebar_l a {text-decoration:none}
#menu a:hover, #rtfmenu a:hover, #sidebar_r a:hover, #sidebar_l a:hover {text-decoration:underline;}

li.menuitem:hover {
	background:#FFF;
}

@media print {		/* Don't print sidebars/header, and for 2-column layout, make content full-width */
  #rtf_2_column #content { margin: 1em }
  #rtfhead, #rtfmenu, #menu, .rtfsidebarfloat { display: none }
}

.rtfsidebarfloat {margin:1em; background:#FFEBD7; float:right; padding:.5em; border:1px solid #F63}

#rtfmenu ul, #menu ul { list-style: none;	margin: 0; padding:0; }
#rtfmenu li, #menu li { padding:.25em 0 }
#rtfmenu li:hover { background-color:#FFFFDD }
#rtfmenu ul ul, #menu ul ul { padding-left:.95em }

/* Small square UL bullet, for main content & sidebars only */
#content ul, #sidebar ul, #sidebar_l ul, #sidebar_r ul, #rtfsidebar ul {
    list-style: none;
    margin: 0 0 1em 0px;
    padding: 0;
}
#content ul li, #sidebar ul li, #sidebar_l ul li, #sidebar_r ul li, #rtfsidebar ul li {
    margin: .25em 0;
    background:url('http://www.nwcouncil.org/images/squarebullet.gif') no-repeat 0 .6em; padding: .1em 0 .1em 10px;
}
#content li ul, #sidebar li ul {
    margin:0 0 0 30px;
    list-style:circle;
}
#content li ul li, #sidebar li ul li {
    padding-left:0;
    background:none;
}

ol.alpha {list-style-type: lower-alpha;}

/* jquery multi-select dropdown and other UI widgets */
.ui-widget {font-size:.8em; line-height:1em !important }
.ui-multiselect-checkboxes label {padding:0 !important }
.ui-state-default {color:#36C}
.ui-widget li  {padding:0 !important; background-image:none !important}


/* Holly Hack to fix ie6 li bg */
/*  Hides from IE-mac \*/
* html li{height: 1%;}
/* End hide from IE-mac */


.custom-gen a {text-decoration:none}
.custom-gen a:hover {text-decoration:underline}

/* Stylized buttons */
.button-link {
    font:inherit; font-size:90%;
    padding: 4px 8px;
    background: #4479BA;
    color: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
.button-link:hover {
    background: #356094;
    border: solid 1px #2A4E77;
    text-decoration: none;
}
.button-link:active {
    -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    background: #2E5481;
    border: solid 1px #203E5F;
}

/* Button formatted as a text link; better than making an <a> tag submit a form */
/* From http://www.456bereastreet.com/archive/201110/styling_button_elements_to_look_like_links/   1-24-12  */
.button-as-text {
    overflow:visible; /* Shrinkwrap the text in IE7- */
    margin:0;
    padding:0;
    border:0;
    color:blue; /* Match your link colour */
    background:transparent;
    font:inherit; /* Inherit font settings (doesn’t work in IE7-) */
    line-height:normal; /* Override line-height to avoid spacing issues */
    text-decoration:underline; /* Make it look linky */
    cursor:pointer; /* Buttons don’t make the cursor change in all browsers */
    -moz-user-select:text; /* Make button text selectable in Gecko */
}
/* Make sure keyboard users get visual feedback */
.button-as-text:hover,
.button-as-text:focus {
    text-decoration:none;
}
/* Remove mystery padding in Gecko browsers.
 * See https://bugzilla.mozilla.org/show_bug.cgi?id=140562
 */
.button-as-text::-moz-focus-inner {
    padding:0;
    border:0;
}
