/* -------------------------------------------------- OutdoorBound.com PAGE STYLES Last revised 5 November 2009 -------------------------------------------------- Individual page styles Assign ID to and prepend to declarations */ /* -------------------------------------------------- HOME -------------------------------------------------- */ #home #container { padding-top: 0; } /* Main content */ #home #content { margin-top: 0; background-position: center top; } /* Splash */ #home #splash { position: relative; height: 334px; /* @27.8333em */ background: transparent; } #home #splash .logo { width: 183px; height: 295px; position: absolute; top: 1.5em; right: 0; z-index: 15; background: transparent url(../images/logos/logo-cropped.png) no-repeat; display: none; } /* Tabbed content */ #home #tab-box { margin-top: 3em; } /* Slideshow */ #home #splash #photodiv { position: absolute; top: 0; left: 0; z-index: 0; } /* Subnavigation */ #home #splash #subnav { top: auto; bottom: 0; } /* Swap box */ #home #splash #swap { color: #FFF; /* White */ width: 20em; /* 294px */ height: 22.5em; /* 270px */ position: absolute; top: 0; left: 0; display: none; overflow: hidden; padding: 1.5em; background: transparent url(../images/utility/dark/transparent-50.png); } #home #splash #swap h3 { color: #E24F00; /* Signature orange */ font-weight: normal; font-size: 20px; line-height: 1.05; text-transform: none; letter-spacing: normal; margin: 0 0 .525em; } #home #splash #swap h3 span, #home #main div h2 span { color: #fff; /* White */ margin-right: .4375em; padding: .4375em; background: #E24F00; /* Signature orange */ } #home #splash #swap h3 span { font-size: 12px; line-height: 1.75; text-transform: uppercase; letter-spacing: .1em; margin-right: .21875em; padding: .4375em; } #home #splash #swap h4 { color: #fff; font-weight: normal; text-align: right; } #home #splash #swap p { font-family: Verdana, sans-serif; } #home #splash #swap abbr, #home #splash #swap acronym { border-bottom-color: #555; /* reduce contrast */ } #home #splash #swap h3 + p:first-line { font-weight: bold; } /* Headings */ #home h1 { font-size: 20px; line-height: .9; margin: 0 0 .9em; } #home h1 span { display: none; } /* Sidebar */ #home #sidebar { margin-top: 0; } #home #sidebar .subsection:first-child h2 { padding-top: 0; } /* Gallery */ #home #gallery { height: 15em; padding: 1.5em 10px; clear: both; background: #E2DDC1; /* PMS 451 33% */ } #home #gallery h3 { color: #072A5E; /* PMS 295 */ text-align: center; text-transform: uppercase; letter-spacing: .1em; margin: -.6em auto .6em; } #home #gallery li { width: 203px; /* @16.91667em */ float: left; margin: 0 4px; overflow: hidden; background: transparent; } #home #gallery li h4 { text-align: center; text-transform: none; margin-top: .6em; } #home #gallery li h4 a { color: #FFF; /* White */ color: #46402D; /* PMS 411 */ } #home #gallery li img { /* 192px W x 132px H */ height: 11em; width: 16em; padding: .375em; border: 1px solid #DCDCDC; /* Gainsboro */ background-color: #F5F5F5; /* WhiteSmoke */ } #home #gallery li a { /* remove border from links */ color: #C6BD8B; /* PMS 451 67% */ border-bottom: none; } /* -------------------------------------------------- EVENTS -------------------------------------------------- */ /* Page structure */ #events #container { padding-bottom: 1.5em; } #events #content { position: relative; } /* Heading styles */ #events #content h1 { line-height: 1.125; } #events #content h2.featured { color: #FFF; /* White */ font: 11px/1.63636 "Andale Mono", "Trebuchet MS", Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; margin-right: .204545em; padding: .204545em .40909em; background-color: #455F86; /* PMS 295 67% */ } #events #content h2.featured { margin-top: 1.63636em; margin-right: 0; } #events #content .link span { color: #FFF; /* White */ font: 11px/1.63636 "Andale Mono", "Trebuchet MS", Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; margin-right: .204545em; padding: .204545em .40909em; background-color: #E24F00; /* Signature orange */ } /* Primary content */ #events #main { width: 55.5em; /* 666px */ position: relative; /* to position swap box */ } #events #main .inset { margin: 0 0 1.5em 0; } #events #main .inset img { width: 54.5em; } #events #main .inset.thumb img { width: auto; max-width: 32.5em; } #events #main .inset.thumb + p:first-line { color: #666; /* Very dark grey */ font-weight: bold; } /* Swap box */ #events #main #swap { color: #FFF; /* White */ width: 25.75em; /* */ height: 18em; /* */ position: absolute; top: 5px; left: 5px; display: none; overflow: hidden; margin-bottom: 1.5em; padding: 1.5em; background: transparent url(../images/utility/dark/transparent-50.png); } #events #main #swap h2 { color: #F17433; /* Signature orange */ font-weight: normal; font-size: 18px; line-height: 1; text-transform: none; letter-spacing: normal; margin: 0 0 .5em; } #events #main #swap h3 + p:first-line { font-weight: bold; } /* Tabbed content */ #events.main #tab-box { clear: both; } #events.main .tabberlive .tabbertab { width: 55.5em; /* 666px */ } #events .tabberlive .tabbertab #calendar-log .inset { margin: 0; padding: 0; } #events.main .tabberlive .tabbertab h3 + p:first-line { color: #666; /* Very dark grey */ font-weight: bold; } #events.item .tabberlive .tabbertab { width: 55.5em; margin-bottom: 3em; } #events.item .tabberlive .tabbertab .tabbertab .inset { margin-top: -.75em !important; } /* Sidebar content */ #events #sidebar .overview { margin: .75em 0; padding: .75em 1.5em; background-color: #E2DDC1; /* PMS 451 33% */ } #events #sidebar .overview h3, #events #sidebar .overview h4 { color: #102F63; /* PMS 295 95% */ margin: 0; padding: 0; } #events #sidebar .overview p { color: #000; /* Black */ padding: 0; } #events #sidebar .overview .date { font: bold 11px/1.63636 Verdana, sans-serif; } #events #sidebar .overview a.register_button { color: #FFF; /* White */ text-align: center; text-transform: uppercase; letter-spacing: .1em; display: block; margin: .75em -1.5em -.75em; padding: .375em; border-bottom: none; background: transparent url(../images/utility/background-subnav.gif) repeat-x; } #events #sidebar .overview a.register_button:hover { color: #46402D; /* PMS 411 */ background-image: url(../images/utility/background-subnav-hover.gif); } #events #sidebar .overview a.register_button:active { color: #FFF; /* White */ } #events .registration { margin-bottom: -.75em; } /* -------------------------------------------------- CALENDAR -------------------------------------------------- */ #calendar #calendar-log { width 55.5em; } /* Calendar navigation */ #calendar #calendar-nav { height: 1.75em; margin: 2.25em auto 1.5em; padding: 0 1.75em; border-bottom: 1px solid #CCC; /* Light grey */ } #calendar #calendar-nav li { float: left; margin-left: 3px; } #calendar #calendar-nav a { font-family: "Trebuchet MS", Arial, sans-serif; text-transform: uppercase; text-align: center; letter-spacing: .1em; position: relative; bottom: 0; margin: 0; padding: 4px 7px 5px; /* use px to avoid browser rounding discrepancies */ border: 1px solid #CCC; /* Light grey */ border-left-color: #999; /* Medium grey */ border-bottom: none; background: transparent url(../images/utility/background-header.png) repeat-x bottom; } #calendar #calendar-nav a:link, #calendar #calendar-nav a:visited { color: #FFF; /* White */ } #calendar #calendar-nav a:hover { background-color: #000; /* Black */ background-position: .5em; } #calendar #calendar-nav a:active { color: #E24F00; /* Signature orange */ } #calendar #calendar-nav a.selected { color: #E24F00; /* Signature orange */ border-bottom: 1px solid #FFF; /* White */ background: transparent url(../images/utility/background-header-shadow.png) bottom; } /* Calendar body */ #calendar #calendar-log .entry { min-height: 14.5em; clear: both; border-bottom: 1px solid #DCDCDC; /* Gainsboro */ } #calendar.test #calendar-log .entry { min-height: 16em; } #calendar.test #calendar-log h3 { /* event title + event date */ width: 29.4em; /* @15px -- 441px */ margin-top: 1.2em; } #calendar.test #calendar-log .entry .ical, #calendar.test #calendar-log .entry .fb { display: block; float: left; height: 1.5em; margin-top: .375em; border: none !important; } #calendar.test #calendar-log .entry .fb { margin-left: .5em; } #calendar #calendar-log .entry.last { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } #calendar #calendar-log .entry .inset { height: 156px; width: 18em; float: right; overflow: hidden; margin: 0 0 3em 1.5em; background: transparent; } #calendar #calendar-log .inset a img { height: 12em; display: block; margin: 0 0 0 auto; padding: .375em; border: 1px solid #DCDCDC; /* Gainsboro */ background-color: #F5F5F5; /* WhiteSmoke */ } #calendar #calendar-log h2 span { /* event tag */ color: #FFF; /* White */ font: 11px/1.63636 "Andale Mono", "Trebuchet MS", Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; margin-right: .204545em; padding: .204545em .40909em; background-color: #E24F00; /* Signature orange */ } #calendar #calendar-log h2, #calendar #calendar-log h3 { /* event title + event date */ width: 29.4em; /* @15px -- 441px */ margin-top: 0; } #calendar #calendar-log h2 + p { margin-bottom: .75em; } #calendar #calendar-log p, #calendar #calendar-log form { width: 36.75em; /* 441px */ } #calendar #calendar-log form { margin: .75em 0; } /* Floating calendar */ #calendar #staticContent { width: 10.75em; background: #846a55; /* PMS 1545 C 67% */ } #calendar .calendar-box #mini-calendar { padding: 0 .4375em; } /* -------------------------------------------------- CART -------------------------------------------------- */ #cart #content { margin-bottom: 3em; } #cart #order { width: 55.5em; padding: .375em .75em; background: #C6BD8B url(../images/utility/dropshadow-c6bd8b.gif) repeat-x bottom left; /* PMS 451 67% */ } #cart #order th { color: #102F63; /* PMS 295 95% */ font-weight: bold; font-family: "Trebuchet MS", Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; padding: .375em .75em; border-bottom: 1px solid #999; background: transparent; } #cart #order tfoot td { padding: 1.5em .375em; } #cart #order tbody { background: #d9d3b1; /* PMS 451 67% @ 33% transparency */ } #cart #order tbody td { padding: .375em .75em; border-right: 1px solid #999; /* Medium grey */ border-bottom: 1px solid #999; } #cart #order .description { text-align: left; } #cart #order .date { border-left: 1px solid #999; /* Medium grey */ } #cart #order .price { text-align: right; } #cart #order .total { font-weight: bold; text-align: right; } #cart #order form { text-align: center; margin: 0; } #cart #order input { text-align: center; } #cart #order .tagline { font-style: italic; font-family: "Trebuchet MS", Verdana, Arial, sans-serif; text-align: right; } #cart #order-action { position: relative; top: 1.5em; float: right; } /* -------------------------------------------------- CHECKOUT -------------------------------------------------- */ #checkout #checkout-form { width: 24em; float: left; padding: .375em 1.5em; background: #C6BD8B url(../images/utility/dropshadow-c6bd8b.gif) repeat-x bottom left; /* PMS 451 67% */ } #checkout #checkout-form h2 { color: #102F63; /* PMS 295 95% */ text-align: center; text-transform: uppercase; letter-spacing: .1em; margin: .6em 0 0; } #checkout #checkout-form div { font: bold 11px/1.63636 "Trebuchet MS", Helvetica, Arial, Verdana, sans-serif; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .81818em; } #checkout #checkout-form form { padding: .75em 0; } #checkout #checkout-form input, #checkout #checkout-form textarea { font: 12px/1.5 Courier, monospace; } #checkout #checkout-form input.button { font-family: sans-serif; } #checkout #checkout-form select, #checkout #checkout-form input { text-transform: none; letter-spacing: normal; } #checkout #checkout-form .fname, #checkout #checkout-form .address, #checkout #checkout-form .city, #checkout #checkout-form .country_name, #checkout #checkout-form .email, #checkout #checkout-form .tel, #checkout #checkout-form .credit_card, #checkout #checkout-form img { float: left; clear: left; margin-right: 1.5em; } #checkout #checkout-form .lname, #checkout #checkout-form .state, #checkout #checkout-form .zip, #checkout #checkout-form .cell, #checkout #checkout-form .expiry { } #checkout #checkout-form select { margin-top: -.1875em; } #checkout #checkout-form .total { font-size: 14px; line-height: 1.285714em; float: right; position: relative; top: .64285714em; } #checkout #checkout-form .total span { font-weight: bold; font-size: 15px; line-height: 1.2; } #checkout #checkout-form .total span { letter-spacing: normal; } #checkout #checkout-form #order-action { float: right; clear: left; position: relative; top: 0; } #checkout #checkout-form .tag-line { font: italic 12px/1.5 Verdana, sans-serif; text-align: center; text-transform: none; letter-spacing: normal; float: left; width: auto; margin: 0 auto 1.5em; } #checkout #checkout-form .tag-line span { color: #eb6700; /* Signature orange */ font: normal bold 14px/1.5 "Trebuchet MS", Helvetica, Arial, Verdana, sans-serif; text-transform: uppercase; letter-spacing: .1em; } #checkout #checkout-form .required { /* indicate required fields */ color: #E24F00; /* Signature orange */ } #checkout #checkout-form .required:before { content: "\20\2A"; } #checkout #tab-box { float: left; width: 27em; margin-left: 1.5em; } #checkout .tabberlive .tabbertab { width: 27em; } #checkout .tabberlive .tabbertab h2 { display: block; margin-top: .65625em; } /* -------------------------------------------------- PROCESS - Order Confirmation & Order Errors -------------------------------------------------- */ #process #content #errors { margin: 1.5em 0; } #process #content #errors li { font-style: italic; } /* -------------------------------------------------- CONFIRMATION -------------------------------------------------- */ #confirm h1 + p { margin-top: 1.5em; } #confirm #survey form { margin-top: 1.5em; } #confirm #survey select { font: 11px Verdana, sans-serif; padding-right: .47727em; padding-left: .47727em; } /* -------------------------------------------------- POLICIES & FAQS -------------------------------------------------- */ #faq #content { width: 55.5em; margin-bottom: 1.5em; padding-right: 1.5em; } /* -------------------------------------------------- ABOUT -------------------------------------------------- */ #about .tabberlive .tabbertab { width: 55.5em; /* width of #content */ } #about .inset { } #about .entry { clear: both; } #about .entry h3 { margin-bottom: 0; } #about .entry h4 { font-style: italic; font-weight: normal; text-transform: none; letter-spacing: normal; margin: 0 0 .75em; } #about .entry .inset { margin-top: -.75em !important; } #about .entry .inset img { width: 140px; } #about .entry .inset p { font-size: 11px; line-height: 1.63636; } /* -------------------------------------------------- CONTACT -------------------------------------------------- */ #contact #container { } #mail-form { color: #000; /* Black */ height: auto; margin-top: 0; padding: .5em 1.5em 1.5em 1.5em; background: #c6bd8b url(../images/utility/dropshadow-c6bd8b.gif) repeat-x bottom left; /* PMS 451 67% */ } #mail-form h3, #mail-form h4 { color: #102f63; /* PMS 295 95% */ margin-bottom: .375em; } #mail-form input { font: 11px/1.63636 Verdana, sans-serif; } #mail-form input.field { width: 25.5em; } #mail-form textarea { font: 12px/1.5 Courier, monospace !important; } #contact #content #mailinglist-form { margin-top: 1.5em; } /* address + hCard */ .vcard { margin: .75em auto; } .vcard .tel span, .vcard .fax span, .vcard .email span { color: #E24F00; /* Signature orange */ font: bold 12px/1.75 "Helvetica Neue", Helvetica, Arial, sans-serif; padding-right: .4375em; } .vcard .email span { margin-right: -.21875em; /* encrypted e-mail throws off horizontal spacing */ } address span, .address span { color: #E24F00; /* Signature orange */ font: bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif; margin-right: .25em; } /* -------------------------------------------------- TELL-A-FRIEND, WAIT LIST, CONFIGURE OPTIONS -------------------------------------------------- */ #connect .column.right h2, #register .column.right h2 { margin-top: 0; } #connect .column.right h2 + p:first-line, #register .column.right h2 + p:first-line { color: #696969; /* DimGray */ font-weight: bold; } #connect .column.right p span:first-child, #register .column.right p span:first-child { /* reset typographic ornaments */ font-size: 1em; text-transform: none; letter-spacing: normal; } #connect .column.right .price { font-weight: bold; text-indent: 0; margin-top: .75em; } #connect .column.right .inset, #register .column.right .inset { margin-top: 1.5em; } #connect .column.right .inset img, #register .column.right .inset img { max-width: 313px; } /* -------------------------------------------------- REWARDS -------------------------------------------------- */ #account_info { padding: 1em .75em 1.25em; background: #C6BD8B url(../images/utility/dropshadow-c6bd8b.gif) repeat-x bottom left; /* PMS 451 67% */ } #account_info th { color: #102F63; /* PMS 295 95% */ font-weight: bold; font-family: "Trebuchet MS", Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; padding: .375em .75em .375em 0; background: transparent; } #account_info td { padding: .375em .75em; border: .1em solid #FFF; /* White */ border-top: none; background-color: #E2DDC1; /* PMS 451 33% */ } #account_info td.first { border-top: .1em solid #FFF; /* White */ } #account_edit_form h3, #account_edit_form h4 { color: #102f63; /* PMS 295 95% */ margin-bottom: .375em; } #rewards .column h2 { margin-top: 0; } #account_edit_form h2 { margin-top: 0; } #rewards .column.right h2 + p:first-line, #account_edit_form .column.right h2 + p:first-line { color: #696969; /* DimGray */ font-weight: bold; } #rewards .column.right p span:first-child, #account_edit_form .column.right p span:first-child { /* reset typographic ornaments */ font-size: 1em; text-transform: none; letter-spacing: normal; } #rewards #account_edit_form input.field { width: 97.5%; } #rewards .column.right .inset, #account_edit_form .column.right .inset { margin-top: 1.5em; } #rewards .column.right .inset img, #account_edit_form .column.right .inset img { max-width: 313px; } /* Tabbed content */ #rewards .tabberlive .tabbertab { width: 55.5em; /* 666px */ float: none; } #rewards .tabberlive .tabbertab .inset { margin-top: -.75em !important; } /* Typography */ #rewards #content .inset + p:first-letter { /* dropcap styling */ color: #C6BD8B; /* PMS 451 67% */ font: 5em/.3 "Trebuchet MS", Arial, sans-serif; float: left; margin: .15em .075em 0 0; } #rewards #content .inset + p > span:first-child { /* all caps highlight */ font-weight: bold; font-size: .83333em; text-transform: uppercase; letter-spacing: .1em; } #table_rewards { margin: 1.5em 0; padding: .375em .75em 1.25em; background: #C6BD8B url(../images/utility/dropshadow-c6bd8b.gif) repeat-x bottom left; /* PMS 451 67% */ } #table_rewards a { width: 7em; height: 7em; display: block; float: right; margin-top: 2em; border-bottom: none; background: transparent url(../images/logos/logo_outdoorbound_btn.png) no-repeat center center; } #table_rewards table { width: 46.25em; } #table_rewards th { color: #072A5E; /* PMS 295 */ font-family: "Trebuchet MS", Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; padding: .375em .75em; border-bottom: .1em solid #FFF; /* White */ } #table_rewards td { width: 33%; padding: .375em .75em; border: .1em solid #FFF; /* White */ border-top: none; border-left: none; vertical-align: center; background-color: #E2DDC1; /* PMS 451 33% */ } #table_rewards td:first-child, #table_rewards td.first { border-left: .1em solid #FFF; /* White */ } #table_rewards h4 { margin: 0; } /* -------------------------------------------------- GIFT CERTIFICATES -------------------------------------------------- */ #gift .entry { clear: both; } #gift .entry h3 span { margin-left: 3em; } #gift .entry .register input { margin-top: .75em; } #gift #content .inset + p:first-letter { /* dropcap styling */ color: #C6BD8B; /* PMS 451 67% */ font: 5em/.3 "Trebuchet MS", Arial, sans-serif; float: left; margin: .15em .075em 0 0; } #gift #content .inset + p > span:first-child { /* all caps highlight */ font-weight: bold; font-size: .83333em; text-transform: uppercase; letter-spacing: .1em; } /* -------------------------------------------------- PARTNERS -------------------------------------------------- */ #partners .entry { clear: both; } #partners .entry h2 a { color: #E24F00; /* Signature orange */ border-bottom: none; } #partners .entry .inset img { max-width: 16.5em; /* 198px */ padding: 0; border: none; background: transparent; } /* -------------------------------------------------- TESTIMONIALS -------------------------------------------------- */ #testimonials .entry { clear: both; } /* -------------------------------------------------- PRESS -------------------------------------------------- */ /* -------------------------------------------------- SEARCH -------------------------------------------------- */ #search h2 + p.flourish:first-line { color: #666; /* Very dark grey */ font-weight: bold; } #search #breadcrumb { margin-bottom: 1.5em; } #search #breadcrumb .inline li { margin-left: 0; } #search #breadcrumb div { margin-bottom: .75em; } #search #breadcrumb h2 { margin: .6em 0 0; } #search #breadcrumb h2.inline { margin-right: .375em; } #search .entry { clear: both; margin-bottom: 1.5em; padding-bottom: 1.5em; border-bottom: 1px solid #DCDCDC; /* Gainsboro */ } #search h2.heading { color: #FFF; /* White */ font: 11px/1.63636 "Andale Mono", "Trebuchet MS", Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; margin-right: .204545em; padding: .204545em .40909em; background-color: #455F86; /* PMS 295 67% */ } #search .entry.first { padding-top: .75em; } #search .entry.last { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } #search .entry h3 { margin: 0 0 .6em; } #search .entry span.flag { margin-right: .75em; } #search .entry .date { font-weight: bold; } #search .entry .price { float: right; margin: 0; padding: 0; } #search .entry .summary { font-style: italic; margin-bottom: .75em; } #search .entry .excerpt { margin-bottom: .75em; } /* -------------------------------------------------- SITE MAP -------------------------------------------------- */ /* -------------------------------------------------- BLOG -------------------------------------------------- */ #blog #blog-nav { margin-top: 3em; margin-bottom: .204545em; border-bottom: none; background: #C6BD8B; /* PMS 451 67% */ float:right; padding: .40909em .81818em .81818em .81818em; } #blog #blog-nav h4 { color: #102F63; /* PMS 295 95% */ font-weight: bold; margin: .81818em 0 0 0; display:block; width:220px; } #blog #blog-nav a:link, .calendar-view a:visited { color: #000; /* Black */ border-bottom-color: #808080; /* Gray */ } #blog #blog-nav a:hover { border-bottom: none; background: #E2DDC1; /* PMS 451 33% */ } #blog .entry { clear: both; } #blog .entry h3 { margin-bottom: 0; } #blog .entry h3 a { color: #E24F00; border-bottom:0; } #blog .entry h4 { font-style: italic; font-weight: normal; text-transform: none; letter-spacing: normal; margin: 0 0 .75em; } #blog .entry .inset { } #blog .entry .inset img { width: 140px; } #blog .entry .inset p { font-size: 11px; line-height: 1.63636; }