/**************************************************************
   AUTHOR:  Pat Heard (fullahead.org)
   DATE:    2006.05.21
   PURPOSE: Controls the layout of the site and styles
            the menus
 **************************************************************/


/**************************************************************
   Used to preload images for CSS rollovers
 **************************************************************/

#preloader {
  position: absolute; 
  width: 0; 
  height: 0; 
  visibility: hidden;
}



/**************************************************************
   Top blue link bar
 **************************************************************/

#topbar {
  height: 2em;
  background: #486C85 url(../images/bg/topbar.gif) repeat-y top center;
}

#topbarInner {
  width: 730px;
  height: 100%;
  margin: 0 auto;
  text-align: right;
  background: #486C85;
}

#topbar ul {
  margin: 0;
  padding: 0;
}

#topbar ul li {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
  list-style-image: url(foo.gif); /* Trick IE into not displaying a bullet */
}

#topbar ul li a {
  padding: 0 20px;
  color: #A5B7C3;  
}

#topbar ul li a:hover {
  color: #FFF;
  border: 0;
}

/* Icons for the top bar */
#topbar ul li a.house {
  background: url(../images/icons/small_house.gif) no-repeat;
  background-position: 6px 2px;
}

#topbar ul li a.house:hover {
  background-image: url(../images/icons/small_house_on.gif);
}

#topbar ul li a.mail {
  padding: 0 13px 0 20px;
  background: url(../images/icons/small_mail.gif) no-repeat;
  background-position: 4px 4px;
}

#topbar ul li a.mail:hover {
  background-image: url(../images/icons/small_mail_on.gif);
}

#topbar ul li a.sitemap {
  background: url(../images/icons/small_sitemap.gif) no-repeat;
  background-position: 5px 3px;
}

#topbar ul li a.sitemap:hover {
  background-image: url(../images/icons/small_sitemap_on.gif);
}




/**************************************************************
   Site Header image and logo
 **************************************************************/


#header { 
  height: 147px;
  font-size: 1px;
  background: #2C4659 url(../images/bg/header_img.jpg) no-repeat top center;
}

/* For search engine robots and no css display */
#header h1, 
#header h2 {
  display: none;
}

#header .fade {
  position: relative;
  z-index: 1;

  height: 147px;
  width: 100%;
  
  background: url(../images/bg/header.gif) repeat-y top center; 
}

#header .fade img {
  margin: 0 auto;
}




/**************************************************************
   Interface layout classes - these create the white 
   rounded shape as well as the gradient background.
 **************************************************************/

#page {
  position: relative;
  z-index: 0;
  
  height: auto !important;
  height: 249px;
  
  background: url(../images/bg/page.gif) repeat-y top center;
}

#page .fade {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;

  height: 249px;
  width: 100%;
  
  background: url(../images/bg/blue_fade.gif) repeat-x top left;  
}

#page #fadeEdges {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;

  height: 249px;
  width: 100%;  
  background: url(../images/bg/blue_fade_edges.jpg) no-repeat top center; 
}

#page #content {
  position: relative;
  text-align: left;
  z-index: 3;
  width: 730px;
  margin: 0 auto;
  background: #FFF; 
}

#page #bottom {
   height: 28px;
  background: url(../images/bg/bottom.jpg) no-repeat top center;
}

#page img {
  margin: 0 auto;
}



/**************************************************************
   Main Menu at the top
 **************************************************************/

/* Default, 4 items */
ul.topMenu {
  margin: 0 11px;
  padding: 0; 
}

ul.topMenu li {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
  list-style-image: url(foo.gif); /* Trick IE into not displaying a bullet */
}

ul.topMenu li a {
  float: left;
  position: relative;
  width: 159px;
  
  margin-right: 10px;  
  padding: 5px;
  line-height: 120%;  
  
  background: none;
  border-bottom: 0;
} 

ul.topMenu li a.last {
  margin: 0 0 0 1px !important;
  margin: 0 0 0 2px;
}

ul.topMenu li a:hover {
  padding-bottom: 5px;
  background: #EEE url(../images/bg/menu_bottom_gray.gif) no-repeat bottom left;
  border-bottom: 0;
}
 
ul.topMenu li a.here,
ul.topMenu li a.here:hover {
  padding-bottom: 5px;
  background: #EBF1F5 url(../images/bg/menu_bottom.gif) no-repeat bottom left;
  border-bottom: 0;
}

ul.topMenu li a span.title {
  display: block;
  position: relative;
  z-index: 1;
  font: 700 1.4em 'Lucida Grande', Arial, Helvetica, Verdana, sans-serif; 
  color: #69889E;
}

ul.topMenu li a:hover span.title,
ul.topMenu li a.here span.title {
  color: #334F63;
}

ul.topMenu li a span.desc {
  font: 400 1em 'Lucida Grande', Arial, Helvetica, Verdana, sans-serif;
  color: #666;
}

ul.topMenu li a:hover span.desc,
ul.topMenu li a.here span.desc {
  color: #333;
}

ul.topMenu li a span.top {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 172px;
  height: 9px;  
}

ul.topMenu li a:hover span.top {
  background: url(../images/bg/menu_top_gray.gif) no-repeat top left;
}

ul.topMenu li a.here span.top {
  background: url(../images/bg/menu_top.gif) no-repeat top left;
}


/* 3 Item Menu */
.three ul.topMenu li a {
  width: 219px;
  margin-right: 10px;
} 

.three ul.topMenu li a.last {
  margin: 0 0 0 1px !important;
  margin: 0 0 0 2px;
}

.three ul.topMenu li a:hover {
  background: #EEE url(../images/bg/menu_bottom_gray_3.gif) no-repeat bottom left;
}
 
.three ul.topMenu li a.here,
.three ul.topMenu li a.here:hover {
  background: #EBF1F5 url(../images/bg/menu_bottom_3.gif) no-repeat bottom left;
}

.three ul.topMenu li a span.top {
  width: 232px;
}

.three ul.topMenu li a:hover span.top {
  background: url(../images/bg/menu_top_gray_3.gif) no-repeat top left;
}

.three ul.topMenu li a.here span.top {
  background: url(../images/bg/menu_top_3.gif) no-repeat top left;
}


/* 5 Item Menu */
.five ul.topMenu li a {
  width: 123px;
  margin-right: 10px;
} 

.five ul.topMenu li a.last {
  margin: 0 0 0 1px !important;
  margin: 0 0 0 2px;
}

.five ul.topMenu li a:hover {
  background: #EEE url(../images/bg/menu_bottom_gray_5.gif) no-repeat bottom left;
}
 
.five ul.topMenu li a.here,
.five ul.topMenu li a.here:hover {
  background: #EBF1F5 url(../images/bg/menu_bottom_5.gif) no-repeat bottom left;
}

.five ul.topMenu li a span.top {
  width: 172px;
}

.five ul.topMenu li a:hover span.top {
  background: url(../images/bg/menu_top_gray_5.gif) no-repeat top left;
}

.five ul.topMenu li a.here span.top {
  background: url(../images/bg/menu_top_5.gif) no-repeat top left;
}




/**************************************************************
    Container for the columns.  If using a side menu, it 
    should be placed inside a #sideBar container.
 **************************************************************/

#columns {
  position: relative;
}



/**************************************************************
   Fixed width side bar
 **************************************************************/

#sideBar {
 
  position: relative; /* needed to stop IE from destroying the sideMenu */
  float: right;  
  width: 169px;
  margin: 15px 12px 0 0 !important;
  margin: 15px 6px 0 0;
  line-height: 120%;
}

/**************************************************************
   Side menu
 **************************************************************/

ul.sideMenu {
  margin: 0;
  padding: 0;    
}

ul.sideMenu li {
  margin: 0;
  padding: 0;
  list-style: none;
  list-style-image: url(foo.gif); /* Trick IE into not displaying a bullet */
}

ul.sideMenu li a {
  display: block;
  position: relative;
  width: 159px; /* Needed to stop IE hover flicker */
  margin-bottom: 15px;  
  padding: 5px;
  background: none;
  border-bottom: 0;
} 

ul.sideMenu li a:hover {
  padding: 5px;
  border-bottom: 0;
  background: #EEE url(../images/bg/menu_bottom_gray.gif) no-repeat bottom left;
}

ul.sideMenu li a.here,
ul.sideMenu li a.here:hover {
  background: #EBF1F5 url(../images/bg/menu_bottom.gif) no-repeat bottom left;
}

ul.sideMenu li a span.title {
  position: relative;
  z-index: 1;
  display: block;
  font: 700 1.4em 'Lucida Grande', Arial, Helvetica, Verdana, sans-serif; 
  color: #69889E;
}

ul.sideMenu li a:hover span.title,
ul.sideMenu li a.here span.title {
  color: #334F63;
}

ul.sideMenu li a span.desc {
  color: #666;
}

ul.sideMenu li a:hover span.desc,
ul.sideMenu li a.here span.desc {
  color: #333;
}

ul.sideMenu li a span.top {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 172px;
  height: 9px;  
}

ul.sideMenu li a.here span.top,
ul.sideMenu li a.here:hover span.top {
  background: url(../images/bg/menu_top.gif) no-repeat top left;
}

ul.sideMenu li a:hover span.top {
  background: url(../images/bg/menu_top_gray.gif) no-repeat top left;
}




/**************************************************************
   Footer and sub-footer
 **************************************************************/

#footer { 
  clear: both; /* CHANGED */
  margin: 0 0 0 1.5em;
  padding-top: 2.5em;
  font-size: 0.9em;
  color: #ACACAC;
  line-height: 120%;
}

#footer ul {
  float: right;
  margin: 0;
  padding: 0;
}

#footer ul li {
  display: inline;
  margin: 0;
  padding: 0 7px;
  list-style: none;
  list-style-image: url(foo.gif); /* Trick IE into not displaying a bullet */
  border-right: 1px solid #CCC;
}

#footer ul li.last {
  border: 0;
  padding-right: 12px;
}

#subFooter {  
  clear: both;  
  font-size: 0.9em;
  z-index: 10;
  color: #999;
  background: #DDDEDF;
  line-height: 120%;
  padding-top: 0.5em
}

#subFooterWidth {
  margin: 0 auto;  
  width: 730px;
  text-align: left;
}

#subFooterWidth .left {
  float: left;
  width: 45%;
  padding: 0 0 1em 1em;
}

#subFooterWidth .right {
  float: right;
  width: 45%;
  padding: 0 0.75em 1em 0;
  text-align: right;  
}


/**************************************************************
   Width classes 
 **************************************************************/

.width100 {
  width: 100%;
}

.width90 {
  width: 90%;
}

.width75 {
  width: 74%;
}

.width66 {
  width: 65.7%;
}

.width50 {
  width: 49.7%;
}

.width33 {
  width: 32.7%;
}

.width25 {
  width: 24.7%;
}

.width {
  width: 730px;
}





/**************************************************************
   Alignment classes
 **************************************************************/

.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

.alignLeft {
  text-align: left;
}

.alignRight {
  text-align: right;
}


/**************************************************************
   Icons
 **************************************************************/

.whitePhone {
  padding-left: 22px;
  background: url(../images/icons/phone_white.gif) no-repeat;
  background-position: 0 10px;
}

.whiteCheck {
  margin-top: 10px;
  padding-left: 22px;
  background: url(../images/icons/check_white.gif) no-repeat;
  background-position: 0 10px;
}

.blueExclamation {
  padding-left: 37px;
  background: url(../images/icons/exclamation_blue.gif) no-repeat;
  background-position: 0 50%;
}




/**************************************************************
   Generic display classes
 **************************************************************/

.clear {
  clear: both;
}

.block {
  display: block;
}

.bold {
  font-weight: bold;
}

.small {
  font-size: 0.8em;
}

.big {
  font-size: 1.2em;
}

.bigger {
  font-size: 1.3em;
}

.blue {
  color: #537790;
  font-weight: bold;
}

.center {
  text-align: center;
}

#listitems ul li {
 padding-bottom: 10px;
}

#map {
  margin-left: 10px;  
  border: thin solid gray; 
}