/*----------------------------------------------------------
Typography

author:     Andrew Le
email:      hello@alchemistcreative.com
website:    http://alchemistcreative.com/
client:     http://onetwentyonesb.com/
----------------------------------------------------------*/

/* Basics
----------------------------------------------------------*/
body {
  font-family: "Lucida Grande", Tahoma, Verdana, sans-serif;
  line-height: 1.5; /* Unitless for proper inheritance */
}
   
body          { font-size: 75%; }   /* IE */
html > body   { font-size: 12px; }  /* Other browsers */

h1,h2,h3,h4,h5,h6 { 
  font-family: "Century Gothic", "AppleGothic", Arial, Verdana, sans-serif; 
  font-weight: normal;
  letter-spacing: 0.05em;
  color:#00453e; 
  clear:both; 
}

h1 { font-size: 1.5em; letter-spacing:0.05em;}
h2 { font-size: 1.3em; margin-left:1em; }
h3 { font-size: 1.1em; line-height:1.25; }
h4 { font-size: 1.2em; line-height:1.25; font-weight:bold; }
h5 { font-size: 1em; font-weight:bold; }
h6 { font-size: 1em; }

/* Text elements */
p           { margin: 0 0 1.5em 1.5em; text-align: left; }
p.last      { margin-bottom:0; }
p img       { float: left; margin: 1.5em 1.5em 1.5em 0; padding:0; }
p img.top   { margin-top:0; } /* Use this if the image is at the top of the <p>. */

ul, ol      { margin: 0 0 1.5em 3em; }
ol          { list-style-type: decimal; }
li          { margin-bottom: 0.5em; }
dl          { margin: 1.5em 0; }
dl dt       { font-weight: bold; }
dl dt, dl dd{ margin-left: 1.5em; }
dl dd       { margin-bottom: 1.5em;}

a           { color: #125AA7; text-decoration: underline; outline: none; }
a:hover     { color: #fff; background-color: #009183; cursor: pointer;}

blockquote  { margin: 1.5em 0 1.5em 1.5em; color: #666; font-style: italic;  }
strong      { font-weight: bold; }
em          { font-style: italic; }
pre         { margin-bottom: 1.3em; background: #eee; border:0.1em solid #ddd; padding:1.5em; }
code        { font:0.9em Monaco, monospace; }

.small       { font-size: 0.8em; }
.decrLH      { line-height: 1em; }
#photo a:hover { background-color: transparent; }

/* Icons
----------------------------------------------------------*/
a.pdf-link {
    background: url(../images/pdf.gif) top right no-repeat;
    padding-right: 16px;
}
li a.pdf-link {
    background: url(../images/pdf.gif) top left no-repeat;
}
a.pdf-link:hover { background-color: #009183; }

/* Tables
----------------------------------------------------------*/
table               { width: 100%; font-size: 1.1em; margin-top: 2em; border-collapse: collapse; border-spacing: 0; }
thead               { border-bottom: 3px solid #4F4F4F; border-top: 1px solid #4f4f4f;}
thead tr:hover      { background-color: #fff; }

th                  { font-weight: bold; text-align: center; padding-bottom: .2em;}
tr                  { border-bottom: 1px solid #bbb; line-height: 2em; }
tr:hover            { background-color: #fff39e; }
td                  { text-align: center; }
td.unit             { font-weight: bold; text-align: left; padding-left: 0.3em; }
td.nudge-right      { padding-left: .75em; }

#affordable tr              { border: none; }
#affordable tr:hover        { background-color: #fff; }
#affordable tr.description  { border-bottom: 1px solid #bbb; }

tr.description td {
    text-align: left;
    line-height: 1.5em;
    font-size: 0.95em;
    padding-left: 0.2em;
}

/* IE fixes -- IE6 does not support styling thead's or tr's */
* html table th { border-bottom: 2px solid #4F4F4F; border-top: 1px solid #4f4f4f; }
* html table td { border-bottom: 1px solid #bbb; }


/* Header
----------------------------------------------------------*/
#header {
    color: #fff;
}

#header h1 {
    color: #fff;
    font-family: "Century Gothic", "AppleGothic", Arial, Verdana, sans-serif; 
    font-size: 2em;
    font-weight: normal;
    letter-spacing: 0.02em;
    word-spacing: -0.1em;
    float: left;
    margin: 10px 0 0 10px;
    clear:both;
}

h1 .note { 
    display: none;
}

.navigation li a {
    color: #fff;
    text-decoration: none;
    font-size: .95em;
    font-family: "Century Gothic", "AppleGothic", Arial, Verdana, sans-serif; 
    letter-spacing: 0.05em;
}

.navigation li a:hover {
    background-color: #009183;
}

#home #home_nav a, #about #about_nav a, #res #res_nav a, 
#contact #contact_nav a, #map #map_nav a,
#photos #photos_nav a {
    background-color: #4F4F4F;
    cursor: default;
}

/* Main Content
----------------------------------------------------------*/
#map #main #content img { border: 1px solid #966f4a; }
a.map-link:hover        { background-color: #fff; }

#photo a   { text-decoration: none; }
#photo a p {
    color: #009183;
    text-align: center;
    font-size: 1.1em;
    letter-spacing: 0.1em;
}

/* Sidebar
----------------------------------------------------------*/
#sidebar h2 {
    margin-left: 0;
}

#sidebar ul {
    list-style: none;
    margin: 0.5em 0 1em 0.2em;
}

#sidebar li {
    margin: 0;
}
* html #sidebar li {
    border: 1px solid #eee; /* :HACK: IE6 adds extra margin top & bottom */
}

#sidebar li a {
    display: block;
    font-family: "Century Gothic", "AppleGothic", Arial, Verdana, sans-serif; 
    font-size: .95em;
    letter-spacing: 0.05em;
    line-height: 1.5em;
    padding: 0 5px;
    margin-bottom: 0.5em;
}

#sidebar li a.pdf-link {
    padding-left: 16px;
}

#sidebar li a:hover {
    color: #fff;
    background-color: #009183;
}

/* Footer
----------------------------------------------------------*/
#footer {
    color: #fff;
}

#footer p {
    font-size: 1.1em;
    margin: 0;
    text-align: center;
}