/*	------------------------- 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: 964px;
  margin-left: -482px;
  left: 50%;
}
#container {
  background-color: #fff;
}
#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: 10px;
  top: 5px;
  height: 87px;   
  width: 183px;
  text-indent: -1000px;
  z-index: 2;
}
h1.logo a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
h1.logo a img {
  position: absolute;
  top: 0;
  left: 0;
}
/*	------------------------- 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 a.visited {
	color: #0D61AA
}
#header .navi {
  float: right;
  clear: right;
}
#header .navi.main {
  top: 75px;
}
#header .navi.main ul {
  display:none;
}
#header .navi.main a {
  font-size: 1.3em;
  z-index: 1;
  margin-left: 10px;
  font-weight: bold;
}

#header .navi.main a:hover {
  background-color: #0d61aa;
  color: #fff;
}
/*	------------------------- top navigation --------------------
*/
#header .navi.head {
  top: -25px;
}
#header .navi.head a {
  font-size: 1.2em;
  z-index: 1;
  margin: 5px 0;
  padding: 0 10px;
  border-left: 1px solid #0d61aa;
}
#header .navi.head a:first-child {
  border-left-width: 0;
}
/*	------------------------- footer nav ------------------------
*/
#footer .navi.foot {
  font-size: 1.4em;
  clear: both;
  margin-right: 5px;
}
/*	------------------------- side navigation -------------------
*/
.side_nav {
  margin-bottom: 20px;
  padding: 0 10px;
}
.side_nav li {
  width: 100%;
  border-bottom: 1px dotted #ccc;
  padding: 1px 0px;
}
.side_nav li.title {
  padding-bottom: 2px;
}
.side_nav li.title.inner {
  padding-top: 5px;
}
.side_nav li a {
  padding: 2% 5%;
  width: 90%;
  font-size: 1.4em;
  display: block;
  font-weight: bold;
}
.side_nav li a.active {
  background-color: #f6f6f6;
  color: #414141;
}
.side_nav li a:hover {
  background-color: #0d61aa;
  color: #fff;
}
.side_nav li li a {
  font-size: 1.2em;
  padding: 2% 10%;
  width: 80%;
}
.side_nav li h2 {
  font-size: 1.8em;
}
.side_nav li h2 a {
  color: #a5a5a5;
  font-weight: normal;
  font-size: 1em;
}
.side_nav li li {
  display: none;
}
.side_nav li.active li {
  display: block;
}
.side_nav li.active-parent li {
  display: block;
}

/*	------------------------- search form ----------------------
*/
form.search {
  position: absolute;
  right: 1%;
  top: 35px;
}
form.search input {
  background-color: #dddbdb;
}
form.search button, form.search input {
  margin: 0 0 0 10px;
}
/*	------------------------- content --------------------------
*/
#content {
  width: 98%;
  padding: 0% 1%;
  min-height: 400px;
  margin-top: 115px;
  z-index: 1;
  padding-bottom:20px;
}
#content.home {
  z-index: -1;
}
#filling {
  padding: 20px 15px 0 15px
}
/*	------------------------- header --------------------------
*/
#header {
  width: 100%;
  height: 140px;
  left: 0;
  position: absolute;
  top: 0;
  background: transparent url(/images/global/header_background.png) no-repeat scroll 50% 0%;
  z-index: 1;
}
.top_strip {
  width: 100%;
  height: 140px;
  left: 0;
  position: absolute;
  top: 0;
  background: transparent url(/images/global/header_background_back.png) repeat-x scroll 0% 0%;
}
/*	------------------------- footer ---------------------------
*/
#footer {
  padding: 10px 0 30px 0;
  width: 99%;
}
#footer h5 {
  color: #a5a5a5;
  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..
*/
.column {
}
.column.wide {
  width: 66%;
}
.column.thin {
  width: 33%;
}
.column.right {
  padding-left: 1%;
}
.column.left {
}
.column.side {
  width: 25%;
}
.column.half {
  width: 48%;
}
.container .column.main {
  width: 74%;
}
.column.full {
  width: 98%;
  padding: 0 1%;
}
.column.adjust {
  width: 100%;
  overflow: hidden;
}
.column.head {
  clear: both;
}
.column.body {
  clear: both;
}
/*	------------------------- carousel -------------------------
*/
.carousel {
  color: #c8e5ff;
  width: 100%;
  height: 565px;
  position: relative;
  overflow: hidden;
  margin-top: -115px;
  float: left;
}
.carousel dt {
  z-index: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  float: left;
}
.carousel dt img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  float: left;
}
.carousel dt a {
  display: block;
  width: 100%;
  height: 100%;
  float: left;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  filter: alpha(opacity=0);
}
.carousel dd {
  width: 25%;
  padding: 20px 0 30px 0;
  background-color: #276db1;
  float: left;
  filter: alpha(opacity=90);
  opacity: .9;
  z-index: 1;
  position: relative;
  top: 550px;
  cursor: pointer;
}
.carousel dd img {
  float: left;
  border: 1px solid #07192a;
  margin: 0 10px;
}
.carousel dd h4 {
  font-size: 1.8em;
  font-weight: bold;
  line-height: 1em;
  margin-bottom: 0.5em;
  padding-right: 10px;
}
.carousel dd p {
  font-size: 1.2em;
  line-height: 1.2em;
  padding: 0px 10px;
}
/*	----------------------------  home links -------------------
*/
.main_home_links {
  width: 100%;
  margin-top: 10px;
}
.main_home_links div {
  margin-left: 1.3%;
  width: 24%;
  float: left;
}
.main_home_links div.first  {
  margin-left: 0%;
}
.main_home_links h3 {
  text-align: center;
  font-weight: bold;
  color: #0d61aa;
  background: transparent url(/images/home/main_buttons.png) scroll no-repeat 50% 50%;
  height: 70px;
  line-height: 70px;
  font-size: 2.4em;
  width: 100%;
  cursor: pointer;
}
.main_home_links .wrapper {
  background-color: #ffd870;
  padding: 10px;
  z-index: -1;
  border: 1px solid #eee;
  position: absolute;
  bottom: 60px;
  width: 84%;
  padding: 3%;
  margin: 0% 5%;
}

/*	------------------------- footer callouts --------------------
*/
.foot_callouts {
  padding: 0 1%;
  width: 98%;
}
.foot_callouts .callout {
  background: transparent url(/images/global/bottom_callout_box.png) scroll no-repeat 0% 0%;
  width: 29.3%;
  padding: 1.5%;
  margin-left: 1.5%;
  height: 175px;
}
.foot_callouts .callout .half.right {
  padding-left: 4%
}
.foot_callouts .callout:first-child {
  margin-left: 0%;
}
.foot_callouts img {
  border: 1px solid #ccc;
  float: left;
}
.foot_callouts h4 {
  font-size: 1.5em;
  font-weight: bold;
  line-height: 1em;
  margin-bottom: 0.5em;
}
.foot_callouts h6 {
  float: left;
  clear: left;
  font-style: italic;
  margin-top: 5px;
}
.foot_callouts h6:first-line {
  font-size: 1.1em;
}
.foot_callouts p {
  font-size: 1.2em;
  line-height: 1.2em;
  margin-bottom: .7em;
}
.foot_callouts a {
  font-size: 1.2em;
  line-height: 1.1em;
  float: left;
  clear: both;
}
.foot_callouts button {
  border: 1px solid #dae4ef;
  background-color: #f8fafc;
  font-size: 1.2em;
  margin: 5px 0;
  font-weight: bold;
  float: right;
  color: #0d61aa;
  max-width: 125px;
}
/*	------------------------- News List ------------------------
*/
.news_list {
  width: 100%;
  float: left;
}
.news_list li {
  padding-left: 8%;
  margin-bottom: 5px;
  background: transparent url(/images/global/icons/calendar_date.png) scroll no-repeat 0 3px;
  float: left;
  clear: both;
  width: 92%
}
.news_list h5 {
  font-size: 1.1em;
  float: left;
}
.news_list a {
  font-size: 1.2em;
  line-height: 1em;
  display: block;
  float: left;
  clear: both;
  width: 100%;
}
/*	------------------------- utitlity bar -----------------------
*/
.utility_bar {
  padding: 1%;
  width: 98%;
}
.utility_bar .breadcrumb {
  float: left;
  position: relative;
  left: 25.5%;
}
.map .utility_bar .breadcrumb {
  margin-left: 0%;
}
.utility_bar .breadcrumb li {
  float: left;
  font-size: 1.2em;
  padding-left: 13px;
  background: transparent url(/images/global/icons/breadcrumb_arrow.png) scroll no-repeat 0 6px;
  margin-left: 5px;
}
.utility_bar .breadcrumb li:first-child {
  background-image: url();
  margin-left: 0;
  padding-left: 0;
}
.utility_bar .page_tools {
  float: right;
  border-left: #ccc solid 1px;
	font-size:1.1em;
}
.utility_bar .page_tools li {
  border-color: #ccc;
  border-style: solid;
  border-width: 1px 1px 1px 0;
  float: left;
  height: 17px;
  padding: 0 7px;
}
.utility_bar .page_tools li a img {
  position: relative;
  top: 2px;
  padding-left: 3px;
}
/*	------------------------- callout --------------------------
*/
.side_callouts .callout {
  float: none;
  padding: 10px;
  border: 1px solid #f8f8f8;
}
.side_callouts a {
  font-size: 1.1em;
}

.side .callout {
  padding: 10px;
  border: 1px solid #f8f8f8;
  margin-bottom: 10px;
}
.side .callout.popin {
  padding: 8px 0px 6px 8px;
  border: none;
}
.side .callout.popin h3 {
  padding-left: 14px;
}
.side .callout.under_nav * {
  text-align: center;
}
.side .callout.under_nav a {
  display: block;
}
.side .callout.under_nav h3 {
  font-size: 2em;
  margin: 3px 0px 0px 0px;
  line-height: 1em;
}
.side .callout.under_nav h5 {
  color: #0d61aa;
}
/*	------------------------- map ----------------------------
*/
.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: 10px 10px;
  width: 249px;
  margin: 0px;
  border-bottom: solid 1px #CCC;
}
.map_chose dl dd, .map_chose dl dt {
  margin-left: 0;
  line-height: 1.3em;
}
.map_chose dl dd.address, .map_chose dl dd.phone {
	margin-bottom: 5px;
}
.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-child {
  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: 640px;
  height: 450px;
  margin-top: 15px;
  position: absolute;
  top: 0px;
  left: 300px;
}
.gmnoprint {
	line-height:1.2em;
	font-size:1.1em;
	margin-left:0;
}
.gmnoprint dt {
	font-weight:bold;
}
.gmnoprint dd.phone {
	margin: 5px 0px 5px 0px;
}

/*	------------------------- expandable sustainable ------------
*/

.sustainable {
  width:462px;
}
.sustainable h3 {
  background: transparent url(/images/content/expandable_headline.png) no-repeat scroll 0 0;
  overflow: hidden;
  padding:10px;
  color: #0d61aa;
  cursor: pointer;
}
.sustainable h3 img {
  margin: -6px 5px;
}
.sustainable h3 span {
  float: right;
  height: 20px;
  width: 20px;
  margin-top: -20px;
  background: transparent url(/images/global/icons/green_arrow_right.png) no-repeat scroll 0 0;
}
.sustainable h3.open span {
  background-image: url(/images/global/icons/green_arrow_down.png);
}
.sustainable .wrapper {
  background-color: #f4ffec;
  margin: -10px 5px;
  padding: 10px;
  z-index: -1;
  border: 1px solid #eee;
  float: none;
}

/*	------------------------- timeline --------------------------
*/
.timeline {
  overflow: hidden;
  position: relative;
  width: 460px;
  border: 1px solid #ccc;
  border-width: 1px 0px;
  border-bottom-style: dotted;
  visibility: hidden;
  margin-top: 10px;
}
.column.wide div.timeline.right {
  background: transparent url(/images/content/right_arrow.png) no-repeat scroll 96% 50%;
  cursor: pointer;
}
.column.wide div.timeline.left {
  background: transparent url(/images/content/left_arrow.png) no-repeat scroll 3% 50%;
  cursor: pointer;
}
.timeline .wrapper {
  float: left;
  margin: 0 15px 15px 15px;
  padding-bottom: 20px;
  width: 430px;
  min-height: 300px;
  display:block;
}
.timeline .wrapper h3 {
  padding-top: 10px;
  border-bottom: 1px dotted #ccc;
}
.event_table {
  width: 20000px;
}
.time_table {
}
.time_table {
  width: 90%;
  margin: 0 5%;
  overflow: hidden;
}
.time_table h3 {
  float: left;
  padding: 5px 9px;
  margin-bottom: 0px;
  font-size: 1.2em;
  font-weight: normal;
  cursor: pointer;
}
.time_table h3.over {
  color: #fff;
  background-color: #0d61aa;
}
.time_table h3.selected {
  filter: alpha(opacity=60);
  opacity: .6;
  background-color: #0d61aa;
  color: #fff;
}
/* ----------------------------------------------------------
/*	------------------------- popin ---------------------------
*/
.overlay {
  background-color: #00305b;
  filter: alpha(opacity=000);
  opacity: 0;
  z-index: 10;
  position: fixed;
}
.popin_box {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border: 1px solid #bababa;
  background-color: #fff;
  margin-top: 50px;
  opacity: 0;
  filter: alpha(opacity=000);
  margin: 50px auto;
  float: none;
}
.popin_box .title {
  background: transparent url(/images/popin/title_bar_back.png) repeat scroll 0 0px;
  width: 96%;
  padding: 3px 1%;
  margin: 1%;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  margin-bottom: .5em;
  border: 1px solid #bababa;
}
.popin_box .title img {
  float: right;
  cursor: pointer;
  padding: 5px;
}
.popin_box .title h3 {
  float: left;
  margin: 0px;
}
.popin_box .wrap {
  width: 95%;
  float: none;
  margin-bottom: 20px;
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
}
.popin_box .content {
  min-height: 100px;
  overflow: auto;
  width: 96%;
  margin: 2%;
  float: none;
  clear: both;
}
.popin_box .buttons {
  width: 96%;
  padding: 2%;
}
.preload {
  padding: 0 10px;
}
/* -----------------------------------------------------------
/* ------------------------- cLone ----------------------------
*/
.searchResult {
  margin-bottom: 3em;
}
.searchResultSection .highlight {
  color: #00305b;
}
.searchResultSection h2 {
  font-size: 1.8em;
}
.searchResultSection p, .searchResultSection h3 {
  margin: 0;
}
.searchLink {
  color: #00305b;
}

/* ----------------------------------------------------------
/*	------------------------- location finder --------------------
*/
.foot_callouts .location_finder {
	position: relative;
}
.location_finder h4 {
  font-size: 1.5em;
  float: right;
  background: #e3e3e3 url(/images/callouts/location_finder_left.png) no-repeat 0 0;
  color: #8b8b8b;
  padding: 8px 10px 7px 0px;
  margin: -10px -10px 10px 0px;
  width: 50%;
  text-align: right;
  cursor: pointer;
}
.location_finder h4.first {
  float: left;
  background: #e3e3e3 url(/images/callouts/location_finder.png) no-repeat 100% 0;
  padding: 8px 0px 7px 10px;
  margin: -10px 0px 10px -10px;
  text-align: left;
}
.location_finder h4.active {
  background-color: #fff;
  background-image: none;
  color: #414141;
}
.foot_callouts .location_finder  p {
  position: absolute;
  top: 45px;
  left: 12px;
}
.location_finder .inline_form input[type=submit] {
  margin-left: 0px;
  clear: both;
}
.location_finder form {
  width: 100%;
}
.foot_callouts .location_finder fieldset {
	top: 30px;
}
.foot_callouts .location_finder label {
	width: 70px;
}
.location_finder fieldset {
  padding: 0px;
  top: 5px;
}
.location_finder input#origin {
  width: 80px;
}
.location_finder .locations-filter label {
	margin-right: 0px;
	padding-right: 10px;
}
.location_finder .locations-filter #origin, .location_finder .locations-filter #radius {
	margin-right: 30px;
}

/* ----------------------------------------------------------
/*	------------------------- container ------------------------
*/
.tipper img {
  padding: 6px;
  cursor: pointer;
}

.tipper .tooltip {
  display: none;
  position: absolute;
  width: 250px;
  z-index: 1;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #eee;
}

/* ----------------------------------------------------------
/*	------------------------- error ------------------------
*/

.errorExplanation {
	background:#FFF1D3 none repeat scroll 0 0;
	margin-bottom:25px;
	padding:10px 2%;
	text-align:left;
	width:90%;
}

#errorExplanation.errorExplanation {
	border: 1px solid #FBD889;
	border-width: 1px 1px 1px 8px;
}

#errorExplanation.errorExplanation * {
	color:#E97C21;
}

div.fieldWithErrors label {
	border:2px solid red !important;
}

div.fieldWithErrors input {
	border:2px solid red !important;
}

.errorExplanation.success {
	background-color:#EBFFD3;
	border: 1px solid #C4E89A;
	border-width: 1px 1px 1px 8px;
	font-size: 1.2em;
	color:#7DAA47;
}

/* ----------------------------------------------------------
/*	-------------------- Employment Form --------------------
*/

.employment_form hr {
	border: solid 1px #999;
	margin-top: 10px;
	margin-bottom: 10px;
}
.employment_form span.label {
	color: rgb(13, 97, 170);
	display: inline-block;
	float: left;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.6em;
	margin-bottom: 7px;
	margin-right: 10px;
	padding: 3px 20px 0px 0px;
	vertical-align: top;
}
.employment_form label {
	width: 200px;
}
.employment_form textarea {
	height: 7em;
	width: 40em;
}
.employment_form label.short {
	width: 80px;
	padding-right: 0px;
	margin-right: 0px;
}
.employment_form label.long {
	width: 480px;
}
.employment_form p {
	font-style: italic;
}
.employment_form input[type="text"].short {
	width: 8em;
	margin-right: 50px;
}
.employment_form .highlight_form {
	background-color: #E1EDF7;
	padding: 10px;
	margin-bottom: 10px;
}

/* ----------------------------------------------------------
/*	-------------------- Vehicle Donation Form --------------
*/

.vehicle_donation_form {
	width: 455px;
	overflow: auto;
	float: left;
/*	background: red;*/
}

.vehicle_donation_form_left {
	margin-right: 20px;
}

.vehicle_donation_form fieldset {
	border: 1px solid #CCCCCC;
	clear: both;
	margin-bottom: 10px;
	padding: 20px;
	width: 450px;
}
html>body .vehicle_donation_form fieldset {
	width: 410px;
}
.vehicle_donation_form fieldset.top {
	height: 400px;
}
html>body .vehicle_donation_form fieldset.top {
	height: 360px;
}
.vehicle_donation_form fieldset.bottom {
	height: 260px;
}
html>body .vehicle_donation_form fieldset.bottom {
	height: 220px;
}
.vehicle_donation_form legend {
	color: #0D61AA;
	font-size: 1.6em;
	font-weight: normal;
	padding: 0px 10px 0px 3px;
}
.vehicle_donation_form textarea {
	width: 30em;
	font-family: Arial, sans-serif;
	margin-top: 5px;
}
html>body .vehicle_donation_form textarea {
	width: 32em;
}
.vehicle_donation_form #vehicle_donation_vehicle_photo_data {
	width: 180px;
}
.vehicle_donation_form .radio_label {
	float: left;
	margin-right: 10px;
	font-size: 12px;
}