@import "reset.css";

/*** Basic Typography ***/
body {
  font-family: helvetica, arial, verdana, sans-serif;
  font-size: 12px;
  line-height: 18px;
  color: #333;
}

p, ul, ol, dl { margin-bottom: 1em; }

a { text-decoration: none; }
a:link { color: #ccc; }
a:visited { color: #bbb; }
a:hover { color: #ff0; }
a:active { color: #156a31; }

strong { font-weight: bold; }
em { font-style: italic; }

h1,h2,h3,h4,h5,h6 { clear: both; }


/*** Main Content ***/
#content #padding a:link { color: #ff0; }
#content #padding a:visited { color: #ff0; }
#content #padding a:hover { color: #156a31; }
#content #padding a:active { color: #156a31; }

#content #padding strong { color: #156a31; }

#content #padding h1 { color: #ff0; font-size: 24px; margin-bottom: 18px; }
#content #padding h2 { color: #156a31; font-size: 18px; margin-top: 27px; margin-bottom: 18px; }
#content #padding h3 { color: #ff0; font-size: 14px; margin-top: 18px; margin-bottom: 18px; }

#content #padding ul { list-style: square; padding-left: 20px; }

#content #padding dt { color: #156a31; }
#content #padding dt span { color: #ccc; }
#content #padding dt span.yellow { color: #ff0; }
#content #padding dd { margin-bottom: 1em; }

/*** Site Design ***/
body {
  background: url(images/bg_gradient.gif) top left repeat-x #8f8f8f;
}
#top-strip {
  background: top left repeat-x url(images/top_stripe.gif);
  height: 9px;
  line-height: 0;
}

#wrapper {
  width: 800px;
  margin: 0 auto;
  background: repeat-y top left url(images/wrapper_bg.gif);
}

#sidebar {
  width: 165px;
  float: left;
  background-color: #000;
}
#sidebar img { margin: 2px; }
#sidebar #left-contact { height: 54px; border-bottom: 1px solid #222; text-align: center; }
#sidebar #contact-phone { color: #156a31; font-size: 20px; padding-top: 10px; }
#sidebar #contact-email { font-size: 12px; }
#sidebar #contact-email a:link { color: #ff0; }
#sidebar h4 { font-size: 14px; text-transform: uppercase; margin: 1em 0 0.3em 10px; color: #156a31; }
#sidebar ul { margin: 0 0 1em 0; }
#sidebar ul li { width: 100%; } /* IE6 list spacing fix */
#sidebar ul a { display: block; padding-left: 10px; }
#sidebar ul a:link { color: #666; }
#sidebar ul a:visited { color: #333; }
#sidebar ul a:hover { background-color: #222; color: #ff0; }
#sidebar ul a:active { background-color: #222; color: #156a31; }
#sidebar ul a.currentPage { background-color: #111; color: #ccc; }

/* nested menus */
#sidebar ul ul { margin-bottom: 10px; }
#sidebar ul ul a { padding-left: 20px; }


#content {
  width: 635px;
  float: left;
  color: #ccc;
}

#content #padding {
  padding: 20px 20px 0 20px;
  margin-bottom: 20px;
}

#page-header {
  background-position: 0 2px;
  background-repeat: no-repeat;
  background-color: #000;
  height: 112px;
}
#page-header #address {
  float: right;
  width: 165px;
  height: 112px;
  text-align: center;
}
#page-header #address address {
  color: #ff0;
  margin: 3px 0 4px 0;
}
#page-header #address #hours {
  color: #ff0;
}
#page-header.standard { background-image: url(images/headers/rotate.php); }

#footer {
  background: repeat-x top left url(images/bottom_stripe.gif);
  padding-top: 10px;
  width: 800px;
  margin: 0 auto;
  text-align: right;
  color: #666;
  margin-bottom: 25px;
  clear: left;
}


/*** Demos Page ***/
.bike { margin-bottom: 9px; clear: left; overflow: auto; }
.bike img { float: left; width: 75px; margin: 0 9px 0 0; }
.bike p { margin: 0; }
.bike a { font-size: 14px; }
#content #padding .bike a:link { color: #156a31; }
#content #padding .bike a:visited { color: #156a31; }
#content #padding .bike a:hover { color: #ff0; }
#content #padding .bike a:active { color: #156a31; }


/*** Repairs ***/
td.service { font-weight: bold; }
td.price { padding-left: 10px; }


/*** Map & Directions ***/
#map { width: 595px; height: 450px; color: black; }


/*** Mountain Bike Rides ***/
p.quote { font-size: 14px; text-align: center; }

/*** Reusable classes ***/
a.pdf { display: block; padding-left: 20px; background: center left no-repeat url(/images/icon_pdf.png); }
.yellow { color: #ff0; }

.clear { display: inline-block; clear: both; }
.clear:after, .container:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.left {float: left; }
.right {float: right; }

* html .clear { height: 1%; }