/*	------------------------- colors ---------------------------
  red: #ac2628;
  darkred: #7a171e;
  brown: #bbb5a4;
  otherborwn: #6a665b;
*/

/*	------------------------- container ------------------------
  i absolutly position the container in the center rather then having it be centered
  useing a margin: auto beacuse the div is floated to the left already, to fit with my
  framework for easy float clearing and broweser compatibitliy, and when I absolutly 
  anything else, they will all nicely be centerd in the content as well... the only negitive 
  caviaut is that if the browser window is shrunk to a width smaller then the width
  of this containing element, the left side will be unviewable.. even upon scrolling..
  but this has an easy fix with javascript..
*/
#container, #jax_content {
  position: absolute;
  width: 960px;
  margin-left: -480px;
  left: 50%;
}
#container {
}
#jax_content {
  z-index: 100;
}

/*	------------------------- logo style ------------------------
  i use an image inside of the h1 tag so that it will show up when it is printed..
  background-images don't show up when printed..
*/
h1.logo {
  position: absolute;
  left: 12px;
  top: 16px;
  text-indent: -1000px;
  z-index: 2;
}
h1.logo a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}
h1.logo a img {
  position: absolute;
  top: 0px;
  left: 0px;
}
/*	------------------------- navigation ------------------------
  I started using lists again I think.. it tecnicaly makes more sense as when you have sub navigation due to 
  the navigation elements now have more proper binding, rather then a loose binding
  
  * archive: i quit using lists for navigations.. I guess technicaly they are still a list of pages in which
  you can accsess.. but it's something I'm currently trying..
*/
.navi {
  position: relative;
  display: block;
  float: left;
}
.navi a {
  display: block;
  position: relative;
  float: left;
  padding: 5px 10px;
}
.navi li {
  float: left;
}
/*	------------------------- main navigation -------------------
*/
#header .navi {
  position: absolute;
}
#header .navi a {
  font-weight: bold;
}
#header .navi a:hover {
  color: #bbb5a4;
}
#header .navi.main {
  top: 109px;
  left: 0;
  height: 48px;
  z-index: 1;
}
#header .navi.main a {
  font-size: 1.4em;
  color: #fff;
  height: 33px;
  padding: 10px 18px 0px 18px;
  margin-top: 5px;
  margin-left: 2px;
  z-index: 2;
}
#header .navi.main a.over {
  color: #ac2628;
  border: 1px solid #cfcfcf;
  padding: 10px 17px 0px 17px;
  border-width: 1px 1px 0px 1px;
  background-color: #fff;
  margin-top: 4px;
}
#header .navi.main li {
  background: transparent url(/images/global/nav_divider.png) no-repeat scroll 0% 100%;
  position: relative;
}
#header .navi.main li.over {
}
#header .navi.main li.first {
  background-image: none;
}
/*	------------------------- drop down ------------------------
*/
#header .navi.main li li {
  background: #fff url() no-repeat scroll 0% 0px;
  border-bottom: 1px solid #fafafa;
  clear: both;
  padding: 0px;
}
#header .navi.main li li.over {
  background: #ac2628 url() no-repeat scroll 0% 0px;
}
#header .navi.main li li a {
  color: #ac2628;
  padding: 5px 40px 7px 10px;
  margin: 0px;
  height: auto;
}
#header .navi.main li li a.first {
  padding-left: 10px;
}

#header .navi.main li li a.over {
  color: #fff;
  padding: 5px 40px 7px 10px;
  background-color: transparent;
  border-width: 0px;
  margin-top: 0px;
}
#header .navi.main li li.first {
}
#header .navi.main ul {
  left: 2px;
  top: 98%;
  border: 1px solid #cfcfcf;
  z-index: 1;
  display: none;
}
#header .navi.main ul ul {
  left: 100%;
  top: 0px;
}
#header .navi.main.helped li li {
  width: 100%;
}
#header .navi.main.helped ul {
  position: absolute;
}
/*	------------------------- top navigation --------------------
*/
#header .navi.head {
  top: 30px;
  right: 1%;
}
#header .navi.head a {
  font-size: 1.2em;
  padding: 10px;
}
#header .navi.head li:first-child a {
  padding-left: 35px;
  background: transparent url(/images/global/icons/donate.png) no-repeat scroll 0 50%;
}
#header .navi.head a.newsletter {
  padding-left: 35px;
  background: transparent url(/images/global/icons/newsletter.png) no-repeat scroll 0 50%;
}
/*	------------------------- footer nav ------------------------
*/
#footer .navi.foot {
  font-size: 1.2em;
  clear: both;
  margin-right: 5px;
}
/*	------------------------- search form ----------------------
*/

form.search {
  position: absolute;
  right: 1%;
  top: 117px;
  z-index: 2;
}
form.search input {
  border-width: 0px;
  width: 175px;
  margin-right: 35px;
  font-size: 1.3em;
  vertical-align: top;
  background-color: transparent;
}
form.search button {
  border-width: 0px;
  height: 34px;
  position: relative;
  left: -3px;
  top : -3px;
  width: 78px;
  filter:alpha(opacity=000);
  opacity: 0.0;
}
form.search button:hover {
  background-color: #FFFFFF;
  opacity: 0.4;
  filter:alpha(opacity=40);
}

/*	------------------------- content --------------------------
*/
#content {
  width: 100%;
  min-height: 400px;
  background-color: #fff;
  border-color: #bbb5a4;
  border-style: solid;
  border-width: 0px 1px 1px 1px;
}
/*	------------------------- header --------------------------
*/
#header {
  width: 100.5%;
  height: 157px;
  background: transparent url(/images/global/header_back.png) no-repeat scroll 0% 100%;
  z-index: 1;
}
/*	------------------------- footer ---------------------------
*/
#footer {
  padding: 10px 0px 30px 0px;
  width: 99%;
}
#footer div {
  float: right;
  padding: 0% 2%;
}
#footer h5 {
  color: #6a665b;
  font-size: 1.1em;
  clear: both;
  padding: 5px 10px;
}
/*	------------------------- columns -------------------------
  stacking the classes like this alows me to switch up the layout easily.. if I want the 
  left one or the right one to be shorter.. I can sitch one class, but still have the padding
  intact..
*/
#content .column {
}
#content .column.wide {
  width: 66%;
}
#content .column.thin {
  width: 33%;
}
#content .column.left {
}
#content .column.side {
  width: 33%;
  background: transparent url(/images/global/side_back.png) repeat-y scroll 0% 100%;
  min-height: 400px;
}
#content .column.half {
  width: 41%;
  padding: 4%;
}
#content .column.half.right {
  background: transparent url(/images/global/side_back.png) repeat-y scroll 0% 100%;
}
#content .column.main {
  width: 63%;
  padding: 0% 2%;
}
#content.home .column.main {
  width: 67%;
  padding: 0%;
}
#content .column.full {
  width: 98%;
  padding: 0px 1%;
}
#content .column.adjust {
  width: 100%;
  overflow: hidden;
}
#content .column.head {
  clear: both;
}
#content .column.body {
  clear: both;
}

/*	------------------------- utitlity bar -----------------------
*/
.utility_bar {
  width: 100%;
  margin-bottom: 15px;
  margin-top: 10px;
}
.utility_bar .page_tools {
  float: left;
}
.utility_bar .page_tools li {
  float: left;
  height: 20px;
  padding: 0 7px;
}
.utility_bar .page_tools li a img {
  position: relative;
  top: 2px;
  padding-left: 3px;
}
.utility_bar .page_tools li#text_resize {
  background: transparent url(/images/global/icons/text_size.png) scroll no-repeat 0% 0px;
  padding-left: 30px;
  margin-right: 10px;
}
.utility_bar .page_tools a.email_page {
  background: transparent url(/images/global/icons/email.png) scroll no-repeat 0% 2px;
  padding: 2px 0px 2px 30px;
}
.utility_bar .page_tools  a.print_page {
  background: transparent url(/images/global/icons/print.png) scroll no-repeat 0% 2px;
  padding: 2px 0px 2px 30px;
}
/*	------------------------- callout  ---------------------------
*/
.callout h4 {
  font-size: 1.8em;
  line-height: 1.2em;
}
.callout a {
  font-size: 1.2em;
}
.column.half .callout {
  margin-bottom: 10px;
  width:100%;
}
.side .callout {
  width: 90.5%;
  padding: 15px 5%;
}
.side .callout.donate {
  background: transparent url(/images/callouts/donate_background.png) scroll no-repeat 0px 0px;
  height: 139px;
}
.side .callout.donate h4 {
  color: #fff;
  font-size: 2.4em;
  font-weight: bold;
  margin-left: 50px;
  margin-top: 5px;
  letter-spacing: -0.05em;
}
.side .callout.donate p {
  color: #fff;
  font-size: 1.2em;
  margin-left: 50px;
  height: 3.3em;
  overflow: hidden;
}
.side .callout.donate a {
  display: block;
  height: 32px;
  left: 69px;
  position: absolute;
  top: 118px;
  width: 107px;
}
.side .callout.donate a:hover {
  opacity: 0.2;
  filter:alpha(opacity=20);
  background-color: #FFFFFF;
}
.side .callout.map {
  background: transparent url(/images/callouts/interactive_map.png) scroll no-repeat 0px 0px;
  min-height: 145px;
}
.side .callout.lights_on {
  background: transparent url(/images/callouts/keep_fireon.png) scroll no-repeat 0px 0px;
  height: 140px;
}
.side .callout.lights_on a, .callout a.main_link {
  display: block;
  height: 100%;
  left:0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10;
  background-color: #fff;
  opacity: 0;
  filter: alpha(opacity=00);
}
.side .callout.lights_on h4 {
  color: #fff;
  font-size: 2.8em;
  letter-spacing: -0.05em;
  text-align: center;
  font-weight: bold;
  margin-bottom: 20px;
}
.side .callout.lights_on p {
  color: #fff;
  font-size: 1.2em;
  text-align: center;
}
.side .callout.map h4 {
  background: transparent url(/images/global/icons/info.png) scroll no-repeat 0px 1px;
  padding-left: 32px;
  height: 32px;
  line-height: 32px;
}
.side .callout.helped {
  background: transparent url(/images/callouts/people_helped.png) scroll no-repeat 0px 0px;
  height: 49px;
}
.side .callout.helped h4 {
  color: #fff;
  font-size: 1.4em;
  float: left;
  margin-top: 10px;
}
.side .callout.helped a {
  color: #fff;
  font-size: 2.6em;
  font-weight: bold;
  float: right;
  margin-top: 5px;
}

/*	------------------------- carousel --------------------------
*/
.carousel {
  width: 100%;
  height: 418px;
}
.carousel .callout {
  width: 100%;
  overflow: hidden;
  height: 340px;
  position: absolute;
  top: 0px;
  left: 0px;
}
.carousel .callout img {
  float: left;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  cursor: pointer;
}
.thumb_container {
  width: 15.8%;
  height: 48px;
  margin-top: 338px;
  background-color: #ac2628;
  border: 1px solid #7a171e;
  padding-left: 84%;
  padding-top: 30px;
  z-index: 1;
}
.thumb_container img {
  filter: alpha(opacity=40);
  opacity: .4;
  margin-right: 5px;
}
/*	------------------------- boiler brands ----------------------
*/
#footer_brands {
  padding-bottom: 10px;
  margin-top: 10px;
  width: 100%;
}
#footer_brands div {
  padding: 0 2%;
}
/*	------------------------- general ---------------------------
*/

.searchResult {
  margin-bottom: 10px;
}

/*	------------------------- map ----------------------------
*/
.location_finder form {
  width: 100%;
}
.location_finder fieldset {
  padding: 0px;
}
.map_chose {
  border: 1px solid #ccc;
  background: #fff url(/images/global/gradient_back.png) scroll repeat-x 0 100%;
  overflow: hidden;
  height: 460px;
  margin: 10px 0px;
}
.map_chose dl {
  float: left;
  padding: 0px 10px;
  width: 200px;
}
.map_chose dl dd, .map_chose dl dt {
  margin-left: 0;
  line-height: 1.3em;
}
.map_chose dl dd {
  margin-left: 0;
  line-height: 1.3em;
}
.map_chose .column.head {
  padding: 5px 0px;
  z-index: 2;
  width: 100%;
}
.map_chose .column.head h6 {
  float: right;
  margin: 5px 0;
  cursor: pointer;
  font-size: 1.2em;
  font-weight: bold;
  padding: 0px 10px;
}
.map_chose .column.head h6.first {
  float: left;
  font-weight: normal;
  cursor: default;
}
.map_chose a {
  text-decoration: none;
}
.map_chose .column.body {
  border-top: 1px solid #ccc;
  padding: 5px 0px;
  z-index: 2;
  overflow: auto;
  height: 415px;
  width: 100%;
}
#map {
  z-index: -1;
  width: 350px;
  height: 450px;
  margin-top: 15px;
  position: absolute;
  top: 0px;
  left: 255px;
}

/* -----------------------------------------------------------
/*	------------------------- cLone ----------------------------
*/
/* -----------------------------------------------------------
/*	------------------------- cLone ----------------------------
*/