/**
 * californiabicyclemuseum.org site style sheet.
 *
 * @package    CaliforniaBicycleMuseum
 * @subpackage UI
 * @copyright  Copyright 2009 Spenlen Media, Inc. (http://spenlen.com)
 * @license    This source code file is licensed for the exclusive internal use of
 *             California Bicycle Museum and may not be used for any other purpose.
 * @version    $Id$
 */


/**** Global Rules ****/

/* Page Structure */

HTML, BODY, H1, H2, H3, H4, H5, H6, HR, DIV, P, PRE, UL, OL, LI, BLOCKQUOTE, FORM, FIELDSET, LEGEND, TABLE, TR, TH, TD, DL, DT, DD {
  margin: 0;
  padding: 0;
}

HTML, BODY {
  height: 100%;
}

HTML {
  background: #8a7755;
}
BODY {
  margin: 0 auto;
  font: normal normal normal 0.9em/1.3em Arial, Helvetica, sans-serif;
  color: #333;
  min-width: 760px;
  max-width: 1200px;
}

/* Headings */

H1, H2, H3, H4, H5, H6 {
  margin: 0 0 1em 0;
  font-family: Garamond, "Times New Roman", serif;
  font-size: 1em;
  font-weight: normal;
  font-variant: small-caps;
  color: #594f48;
}

H2 {
  margin-bottom: 0.8em;
  font-size: 1.7em;
}

H3 {
  margin: 0.5em 0 0.8em 0;
  padding: 1em 0 0 0;
  background: url('../images/horizontal_rule.png') left top repeat-x;
  font-size: 1.6em;
  line-height: 1.2em;
}

H4 {
  font-size: 1.3em;
}

/* Tables */

TABLE {
  border-collapse: collapse;
  border-spacing: 0;
  background: none;
}

TH, TD {
  font-style: normal;
  font-weight: normal;
  text-align: left;
}

TR.odd {
  background: #fbf6e1;
}
TR.even {
  background: #efe7c8;
}

/* Paragraphs and Other Block-Level Elements */

P {
  margin-bottom: 1em;
  line-height: 1.4em;
}

OL, UL {
  margin: 2em 1em 1em 2em;
  list-style: none;
}

LI {
  margin-bottom: 1em;
}

BR.clear {
  clear: both;
}

HR {
  margin: 1em 0 1em 0;
  border: none;
  background: url('../images/horizontal_rule.png') left center repeat-x;
  height: 5px;
}

HR.sectionBreak {
  margin: 2em 0 2em 0;
}

/* Anchors (Hyperlinks) */

A, A:link, A:visited {
  color: #893d1d;
  text-decoration: underline;
}
A:hover {
  color: #4c4a4a;
}

A.readMore, A.addLink, A.detailLink {
  font-size: 0.85em;
}

A.deleteLink {
  font-size: 0.8em;
}

/* Form Elements */

INPUT, TEXTAREA, SELECT, BUTTON {
  font: normal normal normal 1em Arial, Helvetica, sans-serif;
}

INPUT.fullWidth, TEXTAREA.fullWidth {
  width: 100%;
  max-width: 50em;
}

INPUT.cancelButton, BUTTON.cancelButton {
  margin-left: 2em;
}

/* Images and Other Inline Elements */

IMG {
  border: none;
}

ACRONYM, ABBR {
  text-decoration: none;
}

EM {
  font-style: italic;
}

STRONG {
  font-weight: bold;
}


/**** Site Layout ****/

/* Page Frame */

#page {
  border-left: 1px solid #1e1e1e;
  border-right: 1px solid #1e1e1e;
  background: url('../images/page_background.jpg') left top repeat;
  min-height: 100%;
  position: relative;
}


/* Page Header */

#pageHeader {
  padding-top: 55px;
  width: 230px;
  float: left;
}
BODY.nocontentpanel #pageHeader {
  padding: 0;
  width: auto;
  float: none;
}

BODY.nocontentpanel H1 {
  display: none;
}
H1 A {
  background: url('../images/header_logo.gif') center top no-repeat;
  text-indent: -1000em;
  display: block;
  height: 84px;
}

H2.homeLogo {
  margin: 0 0 20px 0;
  background: url('../images/home_logo.gif') 20px top no-repeat;
  text-indent: -1000em;
  height: 135px;
}

#pageNavigation {
  margin: 0;
  padding: 0;
  background: url('../images/navigation_bar_background.png') left top repeat-x;
  width: 100%;
  height: 52px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}

#pageNavigation LI {
  margin: 0;
  padding: 0;
  float: left;
}

#pageNavigation A {
  background-position: 0 0;
  background-repeat: no-repeat;
  text-indent: -1000em;
  display: block;
  height: 33px;
  float: left;
}
#pageNavigation A:hover {
  background-position: 0 -33px;
}
#pageNavigation LI.current A {
  background-position: 0 -66px;
}
#pageNavigation A.homeLink {
  background-image: url('../images/navigation_bar_home.png');
  width: 92px;
}
#pageNavigation A.historyLink {
  background-image: url('../images/navigation_bar_history.png');
  width: 111px;
}
#pageNavigation A.galleryLink {
  background-image: url('../images/navigation_bar_gallery.png');
  width: 113px;
}
#pageNavigation A.aboutLink {
  background-image: url('../images/navigation_bar_about.png');
  width: 124px;
}
#pageNavigation A.donateLink {
  background-image: url('../images/navigation_bar_donate.png');
  width: 205px;
}
#pageNavigation A.eventsLink {
  background-image: url('../images/navigation_bar_events.png');
  width: 105px;
}

UL.adminLinks {
  margin: 0 0 2em 0;
}
#pageHeader UL.adminLinks {
  margin: 10px 30px 10px 15px;
}
UL.adminLinks LI {
  margin: 0;
  padding: 0 0.5em;;
  border-left: 1px solid #594f48;
  display: inline;
}
UL.adminLinks LI:first-child {
  padding-left: 0;
  border-left: none;
}

#pageSubNavigation {
  margin: 10px 30px 30px 0;
}
BODY.nocontentpanel #pageSubNavigation {
  display: none;
}
#pageSubNavigation LI {
  margin: 0;
  padding: 0;
}
#pageSubNavigation A {
  margin: 0;
  padding: 12px 15px 22px 15px;
  background: url('../images/subnav_background.gif') right bottom no-repeat;
  font-family: Garamond, "Times New Roman", serif;
  font-weight: bold;
  font-size: 1.1em;
  text-transform: uppercase;
  text-decoration: none;
  display: block;
}
#pageSubNavigation LI.current A {
  background-image: url('../images/subnav_background_selected.jpg');
}


/* Page Content Area */

#pageContentFrame {
  margin: 0 30px 140px 240px;
  background: url('../images/page_background_paper.jpg') left top repeat;
  position: relative;
  z-index: 50;
}
#pageContentBackground {
  padding: 0 4px 4px 4px;
}
#pageContent {
  padding: 60px 1.5em 1.5em 1.5em;
  border: 3px solid #c6a878;
  min-height: 400px;
}

BODY.home #pageContentFrame {
  margin: 0 50px 140px 50px;
  background-image: url('../images/home_page_background.jpg');
  min-width: 720px;
}
BODY.home #pageContentBackground {
  padding: 0;
  background: url('../images/home_page_background_image.jpg') left bottom no-repeat;
}
BODY.home #pageContent {
  margin: 0 350px 0 0;
  padding: 60px 0 0 0;
  border: none;
  position: relative;
}
BODY.home .homeOverlay {
  margin: 0 0 20px 0;
  padding: 10px 20px;
  background: url('../images/home_page_overlay_background.png') left top repeat;
}

#homeSidebar {
  padding: 50px 0 10px 0;
  background-image: url('../images/page_background_green.jpg');
  width: 350px;
  float: right;
}

#homeSidebar H2 {
  margin: 0;
  padding: 3px;
  background: #8a4e2a;
  color: #c8a97a;
}
#homeSidebar H2 SPAN {
  padding: 7px;
  border: 1px solid #c8a97a;
  display: block;
}
#homeSidebar P {
  margin: 10px;
}

#homeSlideshow {
  margin: 30px 10px 0 10px;
  border: 1px solid #814821;
  width: 330px;
  height: 260px;
  position: relative;
  overflow: hidden;
}
#homeSlideshow A.slideshowImage {
  background-position: center center;
  background-repeat: no-repeat;
  text-indent: -1000em;
  width: 330px;
  height: 260px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}


BODY.content_brown #pageContentFrame {
  background-image: url('../images/page_background_brown.jpg');
}

BODY.content_blue #pageContentFrame {
  background-image: url('../images/page_background_blue.jpg');
}
BODY.content_blue #pageContentBackground {
  background: url('../images/page_background_blue_image.jpg') right bottom no-repeat;
}

BODY.content_green #pageContentFrame {
  background-image: url('../images/page_background_green.jpg');
}
BODY.content_green #pageContentBackground {
  background: url('../images/page_background_green_image.jpg') right bottom no-repeat;
}

BODY.content_purple #pageContentFrame {
  background-image: url('../images/page_background_purple.jpg');
}
BODY.content_purple #pageContentBackground {
  background: url('../images/page_background_purple_image.jpg') right bottom no-repeat;
}

BODY.contact_us #pageContentBackground {
  background: url('../images/page_background_brown_image.jpg') center bottom repeat-x;
}
BODY.contact_us #pageContent {
  padding-bottom: 60px;
}
BODY.contact_us #pageContent P.address {
  font-family: Garamond, "Times New Roman", serif;
  font-size: 1.5em;
  line-height: 1.8em;
  font-weight: bold;
  text-align: center;
}

BODY.gallery #pageContentFrame {
  margin: 0 15px 140px 15px;
  background: #1e1e1d url('../images/gallery_background_bottom.gif') left bottom repeat-x;
  position: relative;
}
#galleryBackgroundLeft, #galleryBackgroundRight {
  display: block;
  width: 85px;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 10;
}
#galleryBackgroundLeft {
  background: url('../images/gallery_background_left.gif') left top repeat-y;
  left: 0;
}
#galleryBackgroundRight {
  background: url('../images/gallery_background_right.gif') right top repeat-y;
  right: 0;
}
#galleryBackgroundBottomLeftCorner, #galleryBackgroundBottomRightCorner {
  display: block;
  width: 125px;
  height: 110px;
  position: absolute;
  bottom: 0;
  z-index: 15;
}
#galleryBackgroundBottomLeftCorner {
  background: url('../images/gallery_background_bottom_left_corner.gif') left bottom no-repeat;
  left: 0;
}
#galleryBackgroundBottomRightCorner {
  background: url('../images/gallery_background_bottom_right_corner.gif') right bottom no-repeat;
  right: 0;
}
BODY.gallery #pageContent {
  padding: 190px 15px 15px 15px;
  border: none;
  position: relative;
  z-index: 20;
}

.alignLeft {
  text-align: left !important;
}

.alignCenter {
  text-align: center !important;
}

.alignRight {
  text-align: right !important;
}

.alignTop {
  vertical-align: top !important;
}

.alignMiddle {
  vertical-align: middle !important;
}

.alignBaseline {
  vertical-align: baseline !important;
}

.alignBottom {
  vertical-align: bottom !important;
}

.floatLeft {
  padding-right: 1em;
  padding-bottom: 1em;
  float: left;
}

.floatRight {
  padding-left: 1em;
  padding-bottom: 1em;
  float: right;
}

.noWrap {
  white-space: nowrap;
}

.hidden {
  visibility: hidden;
}


DIV.contentHeader {
  margin: 0 0 3em 0;
  text-align: center;
}
DIV.contentHeader H2 {
  padding: 6px 4px;
  background: #7a441a;
  font-size: 1.8em;
  display: inline;
}
DIV.contentHeader H2 SPAN {
  padding: 2px 8px;
  border: 1px solid #c6a878;
  color: #c6a878;
}


#galleryTimelines {
  margin: 0;
  padding: 0;
  background: url('../images/gallery_timeline_background.png') 0 bottom repeat-x;
  width: 100%;
  height: 145px;
  position: absolute;
  top: 33px;
  left: 0;
  z-index: 110;
}

#galleryEraTimeline {
  height: 2.4em;
  position: relative;
  overflow: hidden;
}
#galleryEraLinks {
  margin: 0;
  padding: 0;
  width: 4000px;
  position: absolute;
  top: 0;
  left: 15px;
}
#galleryEraLinks LI {
  margin: 0;
  padding: 0;
  float: left;
}
#galleryEraLinks A {
  padding: 0.3em 20px 0 20px;
  font-family: Garamond, "Times New Roman", serif;
  font-weight: bold;
  font-size: 1.1em;
  line-height: 1em;
  text-align: center;
  text-decoration: none;
  display: block;
}
#galleryEraLinks A SPAN.eraName {
  font-size: 0.7em;
  color: #666;
  position: relative;
  top: -0.3em;
}
#galleryEraLinks LI.current A {
  background: url('../images/gallery_timeline_era_selected_background.jpg') left top no-repeat;
}

#galleryEraMoreLeft, #galleryEraMoreRight {
  background-position: center center;
  background-repeat: no-repeat;
  text-indent: -1000em;
  display: block;
  width: 30px;
  height: 35px;
  position: absolute;
  top: 0;
  cursor: pointer;
}
#galleryEraMoreLeft {
  background-image: url('../images/more_arrow_era_left.png');
  left: 0;
}
#galleryEraMoreRight {
  background-image: url('../images/more_arrow_era_right.png');
  right: 0;
}

#galleryExhibitTimeline {
  background: url('../images/horizontal_rule.png') left top repeat-x;
  width: 100%;
  height: 100px;
  position: absolute;
  top: 2.3em;
  left: 0;
  overflow: hidden;
}
#galleryExhibitLinks {
  margin: 0;
  padding: 0;
  width: 4000px;
  position: absolute;
  top: 0;
  left: 15px;
}
#galleryExhibitLinks LI {
  margin: 0;
  padding: 0;
  float: left;
}
#galleryExhibitLinks LI.current {
  background: url('../images/gallery_timeline_exhibit_selected_background.png') center center no-repeat;
}
#galleryExhibitLinks A {
  background-position: center center;
  background-repeat: no-repeat;
  text-indent: -1000em;
  display: block;
  width: 115px;
  height: 100px;
}

#galleryExhibitMoreLeft, #galleryExhibitMoreRight {
  padding: 0;
  background-position: center center;
  background-repeat: no-repeat;
  text-indent: -1000em;
  display: block;
  width: 30px;
  height: 90px;
  position: absolute;
  top: 0;
  cursor: pointer;
}
#galleryExhibitMoreLeft {
  background-image: url('../images/more_arrow_left.png');
  left: 0;
}
#galleryExhibitMoreRight {
  background-image: url('../images/more_arrow_right.png');
  right: 0;
}

#galleryPhotoFrame {
  width: 450px;
  float: left;
}
#galleryPhotos {
  margin: 0 auto;
  padding: 0;
  border: 1px solid #bda172;
  position: relative;
  overflow: hidden;
}
#galleryPhotos LI {
  margin: 0;
  padding: 0;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
#galleryThumbnails {
  margin: 20px 0;
  padding: 0;
}
#galleryThumbnails LI {
  margin: 0 3px 3px 0;
  padding: 0;
  border: 1px solid #bda172;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
  width: 85px;
  height: 100px;
  float: left;
  cursor: pointer;
}


#galleryDescription {
  margin: 0 0 0 470px;
  min-height: 315px;
}

#galleryDescription H3 {
  margin: 0;
  padding: 3px;
  color: #c8a97a;
  cursor: pointer;
}
#galleryDescription H3 SPAN {
  padding: 7px;
  border: 1px solid #c8a97a;
  display: block;
}
#galleryEraName {
  background: #8a4e2a;
}
#galleryEraName:hover {
  background: #955d39;
}
#galleryExhibitName {
  background: #837c48;
}
#galleryExhibitName:hover {
  background: #908857;
}
#galleryExhibitDonation {
  background: #566267;
}
#galleryExhibitDonation:hover {
  background: #687172;
}

DIV.galleryDetailContainer {
  background: url('../images/gallery_description_background.jpg') left top repeat;
}
#galleryEraDescription, #galleryExhibitDescription, #galleryExhibitDonationStory {
  padding: 10px;
  background: url('../images/gallery_description_background_postmark.jpg') right bottom no-repeat;  
  color: #594f48;
  height: 22em;
  overflow: auto;
}

#galleryDescription STRONG {
  font-family: Garamond, "Times New Roman", serif;
  font-weight: bold;
  color: #8c4323;
}
.galleryExhibitManufacturer {
  margin-bottom: 0.2em;
  text-align: center;
}


DIV.personBioContainer {
  padding: 0.5em 0;
}
DIV.personBio {
  margin: 0;
  padding: 0 0 1px 0;
  background: url('../images/horizontal_rule.png') left bottom repeat-x;
}
DIV.personBio IMG {
  padding: 0 20px 15px 0;
  float: left;
}

UL.benefactorList {
  font-weight: bold;
}

TABLE.pressReleases TH, TABLE.pressReleases TD {
  vertical-align: baseline;
}
TABLE.pressReleases TH {
  padding: 1em 2em 1em 0;
  font-weight: bold;
  white-space: nowrap;
}
TABLE.pressReleases TD {
  padding: 1em 0;
}

#DonorForm {
  position: relative;
}
#DonorForm #siteseal {
  position: absolute;
  top: 0;
  right: 0;
}

IMG.paymentIcon {
  padding-right: 1em;
  vertical-align: middle;
}

A.donateNowLink {
  background-image: url('../images/donate_now_button.gif');
  background-position: 0 0;
  background-repeat: no-repeat;
  text-indent: -1000em;
  display: block;
  width: 158px;
  height: 26px;
}
A.donateNowLink:hover {
  background-position: 0 -26px;
}

.promptText {
  color: #b3b3b3;
}

.validationErrorText, .requiredIndicator {
  color: #c3102d;
}
P.validationError, TD.validationError {
  border-left: 3px double #c3102d;
}
P.validationError {
  padding-left: 0.5em;
  color: #c3102d;
}

P.documentation {
  font-size: 0.8em;
  color: #333;
}

TABLE.dataTable {
  margin-bottom: 1.5em;
}

TABLE.dataTable TH, TABLE.dataTable TD {
  border-bottom: 1px solid #989180;
  padding: 0.2em 1em;
}
TABLE.dataTable TH {
  border-bottom: 2px solid #989180;
  font-family: Garamond, "Times New Roman", serif;
  font-variant: small-caps;
  font-size: 1.3em;
}


DIV.recordSet {
  margin: 0 0 1.5em 0;
  border: 1px solid #c8a97a;
  overflow: auto;
}

DIV.recordSet TABLE {
  margin-left: -0.026em; /* To prevent unnecessary horizontal scroll bars in Firefox. */
  width: 100%;
}

DIV.recordSet TH {
  padding: 0.3em 20px 0.3em 0.7em;
  border-bottom: 1px solid #c8a97a;
  background: #884c28;
  font-family: Garamond, "Times New Roman", serif;
  font-variant: small-caps;
  font-size: 1.1em;
  color: #c8a97a;
}

DIV.recordSet TH .sortLabel {
  margin-right: -18px;
  padding-right: 18px;
  background-position: right center;
  background-repeat: no-repeat;
  min-height: 16px;
  display: block;
}
DIV.recordSet TH.sortable {
  cursor: pointer;
}
DIV.recordSet TH.sortable .sortLabel {
  background-image: url('../images/table_sortable.gif');
}
DIV.recordSet TH.sortable.forwardSort.sorted .sortLabel {
  background-image: url('../images/table_sort_ascending.gif');
}
DIV.recordSet TH.sortable.reverseSort.sorted .sortLabel {
  background-image: url('../images/table_sort_descending.gif');
}

DIV.recordSet TBODY {
  vertical-align: baseline;
}

DIV.recordSet TD {
  padding: 0.4em 20px 0.4em 0.7em;
  border-left: 1px solid #c8a97a;
}
DIV.recordSet TD:first-child {
  border-left: none;
}

DIV.recordSet TFOOT TD {
  background: #c8a97a;
  font-weight: bold;
}


TABLE.form TH {
  padding-top: 0.4em;
  padding-right: 1em;
  padding-bottom: 0.4em;
  /* padding-left intentionally omitted */
  text-align: right;
  vertical-align: middle;
  color: #884c28;
}
TABLE.verticalForm TH {
  text-align: left;
}

TABLE.form TD {
  padding-top: 0.4em;
  padding-right: 0.2em;
  padding-bottom: 0.4em;
  /* padding-left intentionally omitted */
  vertical-align: middle;
}
TABLE.form TD TD {
  padding: 0 0.05em 0 0;
}
TABLE.verticalForm TD {
  padding-right: 1em;
}

.formButtons {
  padding: 1em;
}


/* Page Footer */

#pageFooter {
  background: url('../images/page_footer.jpg') left bottom no-repeat;
  width: 100%;
  height: 182px;
  position: absolute;
  left: 0;
  bottom: 0;
}

#pageFooter P {
  margin: 0;
  font-family: Garamond, "Times New Roman", serif;
  font-weight: bold;
  font-size: 0.8em;
  color: #4c4a4a;
  position: absolute;
  left: 15px;
  bottom: 2px;
}

#pageFooter A.creditLink, #pageFooter A.creditLink:visited {
  color: #4c4a4a;
  text-decoration: none;
}
#pageFooter A.creditLink:hover {
  text-decoration: underline;
}

#footerLogo {
  background: url('../images/footer_logo.png') center center no-repeat;
  display: block;
  width: 306px;
  height: 129px;
  position: absolute;
  right: 15px;
  bottom: 5px;
}


/* Self-Clearing Elements */

#foo:after {
  content: '.';
  font-size: 0;
  line-height: 0;
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
  overflow: hidden;
}