/* -------------------------------------------------------------- 
  
  * Eagle River Water & Sanitation District
  * Coded by Taylor Smith of Imulus

  screen.css
  - Global applier for all styles
   
-------------------------------------------------------------- */

@import 'lib/reset.css';
@import 'lib/typography.css';
@import 'lib/forms.css';

.container {
  width: 960px;
  background: #fff;
  border: 2px solid #000;
  margin: 0 auto;
}

.clearfix:after,
.container:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}

.clearfix,
.container {
  display: block;
}

.clear { clear: both; }


/* Site
-------------------------------------------------------------- */

#header {
  width: 960px;
  height: 100px;
  background: #a6af92 url('images/bg-header.jpg') left top no-repeat;
  border-bottom: 1px solid #565b4b;
}

h1.logo a {
  display: block;
  width: 611px;
  height: 100px;
  background: transparent url('images/h1-logo.jpg') left top no-repeat;
  text-indent: -9999px;
}


#navigation {
  float: left;
  width: 960px;
  padding-top: 5px;
  background: #5e8390;
}

#navigation ul {
  list-style: none;
  margin-left: 5px;
}

#navigation ul li {
  float: left;
  margin-right: 10px;
}

#navigation ul li a {
  display: block;
  padding: 5px 10px 10px 10px;
  color: #fff;
  text-decoration: none;
}

#navigation ul li a:hover,
#navigation ul li a.active {
  color: #117294;
  background: #fff;
}

#flash {
  float: left;
  width: 960px;
  height: 300px;
  margin-top: 2px;
}

#flash img {
  float: left; 
  position: relative;
}

#content {
  float: left;
  background: url('images/bg-content.gif') left top repeat-y;
  padding-bottom: 2px;
  margin-top: 2px;
}

#inside #content {
  float: left;
  background: url('images/bg-content_inside.gif') left top repeat-y;
  padding-bottom: 2px;
  margin-top: 2px;
}

#leftcolumn {
  float: left;
  background: #e6dcbb;
  width: 348px;
  padding: 10px 20px 0 10px;
}

#subnavigation {
  font-size: 85.7%;
  float: left;
  background: #e6dcbb;
  width: 208px;
  padding: 0 0 10px 0;
}

ul.subnav {
  list-style: none;
  margin: 0;
}

ul.subnav li a {
  display: block;
  border-bottom: 1px solid #a7b093;
  padding: 7px 10px;
  background: #e6dcbb;
  color: #117294;
  font-weight: bold;
  text-decoration: none;
}

ul.subnav li a:hover,
ul.subnav li.active a {
  background: #ebe8d7 url('images/bg-subnav.jpg') right center no-repeat;
  color: #896945;
}

ul.subnav li ul.sub li a {
  background: #f5f4e9;
  padding-left: 25px;
  color: #117294;
}

ul.subnav li ul.sub li a:hover,
ul.subnav li ul.sub li.active a {
  background: #ebe8d7 url('images/bg-subnav.jpg') right center no-repeat;
  color: #896945;
}


#rightcolumn {
  float: left;
  background: #d7ddcc;
  margin-left: 2px;
  width: 550px;
  padding: 10px 20px 0 10px;
}

#contentcolumn {
  float: left;
  background: #d7ddcc;
  margin-left: 2px;
  width: 710px;
  padding: 10px 20px 0 20px;
}

#contentcolumn p img {
  float: left;
  padding: 0 18px 18px 0;
}

#banner {
  width: 180px;
  float: right;
  padding-right: 20px;
}

#footer {
  float: left;
  width: 940px;
  padding: 10px;
  background: #5e8390;
  border-top: 2px solid #fff;
  text-align: center;
}

#footer ul {
  font-size: 0.857em;
  list-style: none;
  margin: 0;
}

#footer ul li {
  display: inline;
  color: #fff;
  border-right: 1px solid #415d67;
  padding: 0 10px;
}

#footer ul li.last {
  border: none;
}

#footer ul li a {
  color: #fff; 
}