/***************************************************
     AUTHOR: Pat Heard ( FullAhead.org )
   TEMPLATE: Aeora
       DATE: 2005.09.30
 ***************************************************/


/***************************************************
   HTML Element Styles
   -------------------------------------------------
   Sets default styles for HTML elements
 ***************************************************/

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: verdana, arial, sans-serif;
  font-size: 0.62em;
  color: #444;
  background-color: #222;
}

#body {
  position: relative;
  min-height: 100%;
}

* html #body {
  height: 100%;
}

p {
  line-height: 18px;
  padding: 0;
  margin: 5px 10px 20px 10px;
}

p:first-letter {
  font-size: 1.1em;
}

h1 {
  padding: 0;
  margin: 0;
  font-size: 2.2em;
  font-weight: normal;
  letter-spacing: -1.5px;
  color: #FFF;
}

h2 {
  padding: 0;
  margin: 7px 0;
  font-size: 1.3em;
  letter-spacing: -1px;
}

h3 {
  clear: both;
  padding: 0;
  margin: 5px 10px;
  font-size: 1.3em;
  letter-spacing: -1px;
}

ul, ol {  
  padding-bottom: 10px;
  line-height: 18px;
}

acronym {
  border-bottom: 1px solid #999;
  cursor: help;
}



/***************************************************
   Header Styles
 ***************************************************/


#header {
  float: left;
  width: 100%;
  height: 54px;
  background: #888 url(../images/header_bg.gif) repeat-x top center;
  border-bottom: 3px solid #555;
}


/***************************************************
  Menu Styles
  --------------------------------------------------
  The menu includes the top logo - because of the 
  float right on #menu a, the menu needs to be
  defined in the opposite order that you want it
  to display.
 ***************************************************/

#menu {
  width: 780px;  
  margin: 0 auto;
}

#menu img {
  float: left;
}

#menu a {
  float: right;  
  height: 37px;
  margin: 5px 5px 0 5px;
  padding: 12px 10px 0 10px;
  font-size: 1.5em;
  font-weight: bold;
  letter-spacing: -1px;
  text-decoration: none;  
  color: #CCC;  
}

#menu a:hover, #menu a.active {
  color: #FFF;
  background: #555 url(../images/corner_menu.gif) no-repeat top left;
}

#menu a.last {
  margin-right: 0px;
}

/***************************************************
   Content Columns (Blue, Green, Yellow)
 ***************************************************/

#columns {  
  width: 770px;  
  margin: 0 auto;
  text-align: left;
}

.header {
  float: left;  
  height: auto !important;
  height: 65px;
  min-height: 65px;
  padding: 5px 10px;
  width: 227px;
}


#blue, 
#green, 
#yellow {
  float: left;
  width: 247px;
  margin: 20px 0 80px 0; 
  padding: 0 0 20px 0;
  border-right: 14px solid #222;  
}



/***************************************************
   Blue Column
 ***************************************************/

#blue {  
  background: #5EBDEA url(../images/corner_blue.gif) no-repeat bottom right;  
}

#blue .header {
  background: #014BB0 url(../images/header_blue.jpg) no-repeat top left;
}

#blue h1 b {
  color: #5EBDEA;
}

#blue h2 {
  color: #021261;
}

#blue h3 {
  color: #18409E;
}

#blue a {
  color: #045ED8;
}

#blue a:hover {
  color: #18409E;
  background-color: #3EB0E6;
}

#blue ul {
  list-style-image: url(../images/li_blue_bullet.gif);
}

#blue a img {
  border: 2px solid #0369F3;
}

#blue a:hover img {
  border: 2px solid #0133A4;
}

#blue p.quote {
  padding: 4px;
  background: #B9E9FF url(../images/corner_quote_blue.gif) no-repeat top left;
  border-bottom: 2px solid #00B4FF;
}

#blue ul.links li a:hover {
  background-image: url(../images/corner_link_blue.gif);
  background-repeat: no-repeat;
  background-position: top left;
}

/***************************************************
   Green Column
 ***************************************************/

#green {  
  background: #8CEB79 url(../images/corner_green.gif) no-repeat bottom right;
}

#green .header {
  background: #24AB01 url(../images/header_green.jpg) no-repeat top left;
}

#green h1 b {
  color: #D7FF4A;
}

#green h2 {
  color: #115A02;
}

#green h3 {
  color: #126501;
}

#green a {
  color: #108201;
}

#green a:hover {
  color: #0D6602;
  background-color: #5ADD3F;
}

#green ul {
  list-style-image: url(../images/li_green_bullet.gif);
}

#green a img {
  border: 2px solid #159D03;
}

#green a:hover img {
  border: 2px solid #0E6E01;
}

#green p.quote {
  padding: 4px;
  background: #D7F8A6 url(../images/corner_quote_green.gif) no-repeat top left;
  border-bottom: 2px solid #D7FF4A;
}

#green ul.links li a:hover {
  background-image: url(../images/corner_link_green.gif);
  background-repeat: no-repeat;
  background-position: top left;
}



/***************************************************
   Yellow Column
 ***************************************************/

#yellow {
  background: #F7F977 url(../images/corner_yellow.gif) no-repeat bottom right;
  border: none;
}

#yellow .header {
  background: #FF9400 url(../images/header_yellow.jpg) no-repeat top left;
}

#yellow h1 b {
  color: #FDE791;
}

#yellow h2 {
  color: #FF3600;
}

#yellow h3 {
  color: #FF5400;
}

#yellow a {
  color: #FF5400;
}

#yellow a:hover {
  color: #FF1E00;
  background-color: #FFDE00;
}

#yellow ul {
  list-style-image: url(../images/li_yellow_bullet.gif);
}

#yellow a img {
  border: 2px solid #FF7200;
}

#yellow a:hover img {
  border: 2px solid #FF0000;
}

#yellow p.quote {
  padding: 4px;
  background: #FDFEC2 url(../images/corner_quote_yellow.gif) no-repeat top left;
  border-bottom: 2px solid #FFF000;
}

#yellow ul.links li a:hover {
  background-image: url(../images/corner_link_yellow.gif);
  background-repeat: no-repeat;
  background-position: top left;
}



/***************************************************
   Footer Styles
   -------------------------------------------------
   Uses CSS to force the footer to the bottom of the
   page, no matter how much content on the page.
 ***************************************************/

#footer {
  float: left;
  position: relative;
  margin-top: -60px; 
  padding-top: 3px;
  width: 100%;  
  height: auto !important;
  height: 54px;
  min-height: 54px;
  text-align: center;
  background: #888 url(../images/footer_bg.gif) repeat-x bottom center;
  color: #AAA;
  border-top: 3px solid #555;  
}

#footer p {
  padding: 10px 0 0 0;
  margin: 0;
  line-height: 12px;
}

#footer a {
  color: #CCC;
}

#footer a:hover {
  color: #FFF;
}


/***************************************************
   Big Links
 ***************************************************/

ul.links {
  float: left;
  padding: 5px 10px;
  margin: 0px;
}

ul.links li {
  float: left;
  list-style-type: none;
  list-style: none;
}

ul.links li a {
  float: left;
  width: 217px;
  padding: 5px;
  margin: 0px;  
  cursor: pointer;
  text-decoration: none;
}

ul.links li a b {
  display: block;
  text-indent: 20px;
  background: url(../images/link_arrow.gif) no-repeat center left;
}

ul.links li a:hover b {
  background: url(../images/link_arrow_on.gif) no-repeat center left;
}

ul.links li a span {
  color: #444;
}


/***************************************************
   Utility Classes
 ***************************************************/

img.left {
  float: left;
  margin: 3px 10px;
}

img.right {
  float: right;
  margin: 3px 10px;
}