/* Site: O2 Author: Caleb Wright of FabrikAgency.com */ /*--------- GLOBAL ---------*/ * { margin:0; padding:0; border:0; } html, body { height:100%; } body { text-align:center; font: 62.5% Verdana, Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 { font-weight:normal; font-family: Verdana, Arial, sans-serif; } h1 { font-size:3.6em; } h2 { font-size:2.4em; } h3 { font-size:1.8em; } h4 { font-size:1.6em; } h5 { font-size:1.3em; } h6 { font-size:1em; } p, select, li, input, textarea { font:1.2em/1.3em Verdana, Arial; } p { margin-bottom:0.8em; } input, textarea, select { font-size:1em; outline:none; border:1px solid #cbcfd3; padding:0.3em; } li { list-style:square inside url("../images/bullet.gif"); margin-top:1em; } a:link, a:visited { text-decoration:none; } a:hover, a:active { text-decoration:underline; } a:active { outline: none; } /*------------ ALIGNMENT -------------*/ .center { text-align:center; } .center-inner { margin-left:auto; margin-right:auto; text-align:left; } .left { text-align:left; } .right { text-align:right; } .no-margin { margin:0; } table.center td { text-align:center; } table tr.center td { text-align:center; } /*---------------- MISCELLANEOUS ----------------*/ .clear { clear: both; display: block; height: 0; overflow: hidden; } .alt { display: none; height:1%; overflow:hidden; } .clear-after:after { content:'.'; display:block; visibility:hidden; height:0; clear:both; } .no-cursor { cursor:default !important; } .hidden { display:none; } .with-text { text-indent:-8000px; overflow:hidden; } /*-------------- SITE COLORS --------------*/ body { background:#e2f3f5 url("../images/background-pattern.gif") top left repeat; color:#454b50; } h1, h2, h3, h4, h5, h6 { color:#ffde00; } a:link, a:visited { color:#73afb6; } a:hover, a:active { color:#73afb6; } input:focus, textarea:focus, select:focus { } hr { display:block; border:0; height:2px; background:#d1d4d6; } /*----------- FORM LIST ------------*/ ul.form-list { } .form-list li { padding:4px; width:350px; float:left; list-style:none outside none; } .form-list li span { padding:4px; } .form-list li.checkbox label { margin-left:5px; float:none; } .form-list li.checkbox span { float:left; padding-top:0; } .form-list label { text-align:right; float:left; width:110px; clear:both; padding-top:6px; padding-right:4px; } .form-list .new-line { clear:left; } /*--------- COLUMNS ----------*/ .form-list-4-column li { width:300px; } .form-list-4-column label { width:130px; } .form-list-6-column li { width:215px; } .form-list-6-column label { width:70px; } .form-list-7-column li { width:130px; } .form-list-7-column label { width:80px; } /*-------- LAYOUT --------*/ #frameTop, #frameBottom, #frameCredits, #wrapper { width:941px; margin:0 auto; } #frameTop { height:25px; background:transparent url("../images/frame-border.png") top left repeat-y; } #frameBottom { height:32px; background:transparent url("../images/frame-bottom.png") left bottom no-repeat; text-align:right; } #frameBottom p { font-size:0.9em; color:#bcbcbc; margin:0 3em 0 0; } #wrapper { text-align:left; background:transparent url("../images/frame-border.png") top left repeat-y; padding-top:12px; } #wrapper #header { height:73px; margin-left:34px; } #header #o2FitnessLogo { display:block; float:left; width:148px; height:59px; background:transparent url("../images/o2-fitness.gif") left 10px no-repeat; text-indent:-999px; margin-top:3px; } #header #memberLogin { display:block; height:24px; line-height:10px; float:right; color:#929191; font-size:11px; margin:0 60px 0 0; } #wrapper #content { margin:0 27px 0 37px; position:relative; } #frameCredits { height:32px; text-align:right; } #frameCredits p { font-size:0.9em; color:#fff; margin:0 3em 0 0; } #frameCredits p a { color:#fff; } /*------------ NAVIGATION ------------*/ ul#navigation { display:block; height:32px; } ul#navigation li { float:left; height:32px; margin:0; list-style:none outside none; border-right:1px solid #fff; overflow:hidden; position:relative; } #navigation li a { display:block; height:32px; text-indent:-2000px; overflow:hidden; position:absolute; top:0; background:transparent url("../images/navigation-background.gif") 0 0 no-repeat; } /*------------------------ HIGHLIGHTED NAVIGATION ------------------------*/ #navigation #joinO2Nav, #navigation #joinO2Nav a { width:102px; } #navigation #joinO2Nav a { background-position:0 0; } #navigation #joinO2Nav a:hover, #navigation #joinO2Nav a:active, #pageWhyO2 #navigation #joinO2Nav a:link, #pageWhyO2 #navigation #joinO2Nav a:visited, #pageMembership #navigation #joinO2Nav a:link, #pageMembership #navigation #joinO2Nav a:visited, #pageFreeGuestPass #navigation #joinO2Nav a:link, #pageFreeGuestPass #navigation #joinO2Nav a:visited, #pageWeWantYouBack #navigation #joinO2Nav a:link, #pageFreeGuestPass #navigation #joinO2Nav a:visited, #pageFreeClassPass #navigation #joinO2Nav a:link, #pageFreeClassPass #navigation #joinO2Nav a:visited { background-position: 0 -32px; } #navigation #ourClubsNav, #navigation #ourClubsNav a { width:97px; } #navigation #ourClubsNav a { background-position:-103px 0; } #navigation #ourClubsNav a:hover, #navigation #ourClubsNav a:active, #pageOurClubs #navigation #ourClubsNav a:link, #pageOurClubs #navigation #ourClubsNav a:visited { background-position: -103px -32px; } #navigation #classesAndProgramsNav, #navigation #classesAndProgramsNav a { width:163px; } #navigation #classesAndProgramsNav a { background-position:-201px 0; } #navigation #classesAndProgramsNav a:hover, #navigation #classesAndProgramsNav a:active, #pageClassesandPrograms #navigation #classesAndProgramsNav a:link, #pageClassesandPrograms #navigation #classesAndProgramsNav a:visited { background-position: -201px -32px; } #navigation #corporateWellnessNav, #navigation #corporateWellnessNav a { width:172px; } #navigation #corporateWellnessNav a{ background-position:-365px 0; } #navigation #corporateWellnessNav a:hover, #navigation #corporateWellnessNav a:active, #pageCorporateWellness #navigation #corporateWellnessNav a:link, #pageCorporateWellness #navigation #corporateWellnessNav a:visited { background-position: -365px -32px; } #navigation #aboutO2FitnessNav, #navigation #aboutO2FitnessNav a { width:148px; } #navigation #aboutO2FitnessNav a { background-position:-538px 0; } #navigation #aboutO2FitnessNav a:hover, #navigation #aboutO2FitnessNav a:active, #pageAboutO2Fitness #navigation #aboutO2FitnessNav a:link, #pageAboutO2Fitness #navigation #aboutO2FitnessNav a:visited { background-position: -538px -32px; } #navigation #contactNav, #navigation #contactNav a { width:101px; } #navigation #contactNav a { background-position:-687px 0; } #navigation #contactNav a:hover, #navigation #contactNav a:active, #pageContactUs #navigation #contactNav a:link, #pageContactUs #navigation #contactNav a:visited { background-position: -687px -32px; } #navigation #blogNav, #navigation #blogNav a { width:82px; } #navigation #blogNav a { background-position:-789px 0; } #navigation #blogNav a:hover, #navigation #blogNav a:active, #blog #navigation #blogNav a:link, #blog #navigation #blogNav a:visited { background-position: -789px -32px; } /*------------------ NAVIGATION ARROW -------------------*/ #navigationArrow { position:absolute; top:0; left:-12px; z-index:500; width:12px; height:7px; background:transparent url("../images/navigation-arrow.png") top left no-repeat; } #pageWhyO2 #navigationArrow, #pageMembership #navigationArrow, #pageFreeGuestPass #navigationArrow, #pageWeWantYouBack #navigationArrow, #pageFreeClassPass #navigationArrow { left:290px; } #pageOurClubs #navigationArrow { left:185px; } #pageClassesandPrograms #navigationArrow { left:422px; } #pageCorporateWellness #navigationArrow { left:585px; } #pageAboutO2Fitness #navigationArrow { left:66px; } #pageContactUs #navigationArrow { left:731px; } #blog #navigationArrow { left:821px; } /*-------- TITLES ---------*/ .title { display:block; width:100px; height:40px; text-indent:-4000px; overflow:hidden; } .title-welcome { background:transparent url("../images/titles/welcome.png") left top no-repeat; width:120px; margin-top:0.8em; } .title-about { background:transparent url("../images/titles/about-o2-fitness.png") left top no-repeat; width:216px; } .title-our-clubs { background:transparent url("../images/titles/our-clubs.png") left top no-repeat; width:129px; } .title-why-o2 { background:transparent url("../images/titles/why-o2.png") left top no-repeat; width:137px; } .title-membership { background:transparent url("../images/titles/membership.png") left top no-repeat; width:155px; } .title-free-guest-pass { background:transparent url("../images/titles/free-guest-pass.png") left top no-repeat; width:285px; } .title-free-class-pass { background:transparent url("../images/titles/free-class-pass.png") left top no-repeat; width:199px; } .title-classes-and-programs { background:transparent url("../images/titles/classes-and-programs.png") left top no-repeat; width:292px; } .title-corporate-wellness { background:transparent url("../images/titles/corporate-wellness.png") left top no-repeat; width:259px; } .title-contact-us { background:transparent url("../images/titles/contact-us.png") left top no-repeat; width:144px; } /*---------------- SUB NAVIGATION -----------------*/ #subnavigation { display:block; height:19px; } #subnavigation li { margin:0.3em 1em 0 0; list-style:none outside none; float:left; font-size:1.1em; border-left:1px solid #72AFB6; padding-left:1em; } #subnavigation li a { color:#72AFB6; text-decoration:none; } #subnavigation li.active a { color:#6A737B; } #subnavigation li.first { border-left:0; padding-left:0; } /*----------- HOME TABS ------------*/ #headerTabs { float:right; display:block; height:49px; width:700px; margin-right:40px; } #header a.home-tab { display:block; float:right; width:100px; height:49px; text-indent:-2000px; overflow:hidden; background:transparent url("../images/home-tabs.png") left top no-repeat; } #header a#tryUsOut { width:156px; } #header a#tryUsOut:link, #header a#tryUsOut:visited { background-position:-6px top; } #header a#tryUsOut:hover, #header a#tryUsOut:active { background-position:-169px top; } #header a#announcement { width:152px; } #header a#announcement:link, #header a#announcement:visited { background-position:-333px top; } #header a#announcement:hover, #header a#announcement:active { background-position:-498px top; } #header a#fitnessTip { width:174px; } #header a#fitnessTip:link, #header a#fitnessTip:visited { background-position: -664px top; } #header a#fitnessTip:hover, #header a#fitnessTip:active { background-position:-852px top; } #header a#brandNewClub { width:173px; } #header a#brandNewClub:link, #header a#brandNewClub:visited { background-position: -1040px top; } #header a#brandNewClub:hover, #header a#brandNewClub:active { background-position:-1226px top; } #header a#o2SpeakBlog { width:152px; } #header a#o2SpeakBlog:link, #header a#o2SpeakBlog:visited { background-position: -1406px top; } #header a#o2SpeakBlog:hover, #header a#o2SpeakBlog:active { background-position:-1566px top; } /*------------- LIGHTBOX -------------*/ .lightbox-background { width:100%; height:100%; position:fixed; top:0; left:0; background:transparent url("../images/black-28.png") top left repeat; } #lightbox { z-index:999; } #lightboxInside { width:509px; height:332px; position:absolute; top:150px; left:50%; text-align:left; } #lightboxContent { background:#E2F3F5 url("../images/background-pattern.gif") repeat left top; position:absolute; left:-255px; } #lightboxContentInside { margin:10px; margin-top:10px; background:#fff; height:312px; width:489px; overflow:hidden; position:relative; } #lightboxPanels { width:15000px; display:block; } #lightboxPanels li, .lightbox-panel { width:489px; height:312px; display:block; float:left; position:relative; } #lightboxPanels li .inner { margin:2em; } .lightbox-panel .inner { margin:2.9em 1.8em 1em 1.8em; } .lightbox-panel .title { display:block; width:450px; height:53px; overflow:hidden; text-indent:-9999px; background:transparent url("../images/lightbox-header-text.gif") left top no-repeat; border-bottom:1px solid #6A737B; margin-bottom:2.3em; } #lightboxAnnouncement.lightbox-panel .title { background-position:0 0; } #lightboxFitnessTip.lightbox-panel .title { background-position:0 -61px; } .lightbox-panel .date { color:#6D6D6D; font-size:1.1em; text-transform:uppercase; } .lightbox-panel .body { margin-top:1.8em; } #lightboxButtons { position:absolute; left:110px; z-index:100; } #lightboxPrevious, #lightboxClose, #lightboxNext { display:block; width:43px; height:43px; position:relative; top:-21px; float:right; cursor:pointer; } #lightboxPrevious { background:transparent url("../images/lightbox/lightbox-previous.png") top left no-repeat; } #lightboxClose { background:transparent url("../images/lightbox/lightbox-close.png") top left no-repeat; } #lightboxNext { background:transparent url("../images/lightbox/lightbox-next.png") top left no-repeat; } #lightboxPrevious.disabled, #lightboxNext.disabled { opacity:0.3; } /*------------------- NEW CLUB LIGHTBOX --------------------*/ #newClubLightbox { z-index:998; } #newClubLightboxInner { width:646px; height:487px; background:transparent url("../images/lightbox/new-chapel-hill-club-moved.png") left top no-repeat; position:fixed; z-index:100; top:0; left:0; } a#newClubLightboxCloseButton { display:block; width:130px; height:50px; float:right; cursor:pointer; } a#newClubLightboxContinueButton { display:block; width:646px; height:430px; float:right; clear:right; cursor:pointer; } /*--------------------------- PRINT GUEST PASS LIGHTBOX ----------------------------*/ #printGuestPassLightbox { z-index:997; } #printGuestPassLightboxInner { width:646px; height:487px; background:transparent url("../images/lightbox/print-guest-pass.png") left top no-repeat; position:fixed; z-index:100; top:0; left:0; } a#printGuestPassLightboxCloseButton { display:block; width:130px; height:50px; float:right; cursor:pointer; } a#printGuestPassLightboxButton { display:block; width:185px; height:77px; position:absolute; left:36px; top:377px; cursor:pointer; background:transparent url("../images/lightbox/print-guest-pass.png") -36px -377px no-repeat; } a#printGuestPassLightboxNoThanksButton { display:block; width:67px; height:17px; position:absolute; left:525px; top:434px; cursor:pointer; background:transparent url("../images/lightbox/print-guest-pass.png") -525px -434px no-repeat; } /*-------------- SOCIAL MEDIA ---------------*/ .social, .social span { display:block; background:transparent url("../images/social-media-elements.png") left top no-repeat; } a.facebook-sm { width:100px; height:85px; } a.facebook-sm:link, a.facebook-sm:visited { background-position:0 0; } a.facebook-sm:hover, a.facebook-sm:active { background-position:-100px 0; } a.facebook { width:220px; height:83px; } a.facebook:link, a.facebook:visited { background-position:-1px -91px; } a.facebook:hover, a.facebook:active { background-position:-221px -91px; } a.facebook-icon { width:135px; height:18px; background:transparent; line-height:18px; } a.facebook-icon span { width:18px; height:18px; display:block; float:left; margin-right:4px; } a.facebook-icon:link span, a.facebook-icon:visited span { background-position:-220px -20px; } a.facebook-icon:hover span, a.facebook-icon:active span { background-position:-240px -20px; } a.twitter-sm { width:100px; height:85px; } a.twitter-sm:link, a.twitter-sm:visited { background-position:0 -175px; } a.twitter-sm:hover, a.twitter-sm:active { background-position:-100px -175px; } a.twitter { width:220px; height:83px; } a.twitter:link, a.twitter:visited { background-position:-1px -263px; } a.twitter:hover, a.twitter:active { background-position:-221px -263px; } a.twitter-icon { width:120px; height:18px; background:transparent; line-height:18px; } a.twitter-icon span { width:18px; height:18px; display:block; float:left; margin-right:4px; } a.twitter-icon:link span, a.twitter-icon:visited span { background-position:-220px 0; } a.twitter-icon:hover span, a.twitter-icon:active span { background-position:-240px 0; } a.speak-button { width:220px; height:85px; } a.speak-button:link, a.speak-button:visited { background-position:0 -348px; } a.speak-button:hover, a.speak-button:active { background-position:-220px -348px; } /*------ BLOG -------*/ .blog-header { margin:22px 0 0.5em 7px; margin-right:320px; } .blog-header a { display:block; background:transparent url("../images/social-media-elements.png") -3px -442px no-repeat !important; height:87px; border-bottom:1px solid #dadcde; } #blog #sidebar { float:right; width:300px; position:relative; left:-6px;} #blog #sidebar .inner { margin-top:26px; } #blog #sidebar .box { background:transparent url("../images/social-media-elements.png") 0 -586px no-repeat; margin-bottom:10px; } #blog #sidebar .box.box-topics h2 { height:55px; background:transparent url("../images/social-media-elements.png") 0 -530px no-repeat; } #blog #sidebar .box.box-fan-box h2 { height:10px; } #blog #sidebar .box.box-fan-box .box-inner { padding:0 0 1em 8px; } #blog #sidebar .box .box-inner { padding:1.5em 1em 2em 1em; } #blog #sidebar .box .box-end { height:7px; background:transparent url("../images/social-media-elements.png") 0 bottom no-repeat; } #blog #sidebar .social { margin-bottom:10px; } #blog .post { margin-right:320px; } #blog .post .date { margin-left:5px; margin-bottom:13px; } #blog .post .day { color:#ababab; } #blog .post .date .stamp { color:#6b6b6b; } #blog .post h2 { font-size:2.3em; margin:0 0 0.5em 5px; } #blog .post h2 a { color:#454545; } #blog h3 { color:#454545; } #blog .post .entry { margin:0 0 2em 5px; } #blog .post .postmetadata { font-size:1em; clear:left; display:block; height:25px; margin:0 0 0 5px; } #blog .post .postmetadata span { color:#4e9fa8; text-transform:uppercase; } #blog .post .postmetadata a { color:#333; } #blog .post .postmetadata .social { float:left; margin-right:4px; } #blog ul li { list-style:none; } #blog .entry ul { margin-bottom:1em; } #blog .entry ul li { list-style:square inside url("/images/bullet.gif"); } #blog .entry ol li { list-style:decimal inside; } #blog .aligncenter, #blog dl.aligncenter { display: block; margin-left: auto; margin-right: auto; } #blog .alignleft { float:left; } #blog .alignright { float:right; } /*------------- COMPONENTS -------------*/ p.head { font-size:1em; color:#414243; margin-bottom:0; } p.color { color:#73afb6; } .treatment { border-bottom:10px solid #eae827; } .new { color:#73afb6; font-size:0.8em; font-weight:bold; } #freeGuestPass { margin-top:1em; display:block; } .flash-notice { background:#E2F3F5 url("../images/background-pattern.gif") repeat scroll left top; color:#666; font-size:1.2em; padding:1em; margin-bottom:1em; } p.source { font-size:0.9em; font-style:italic; } /*---------- MODULES ----------*/ #twoColumn #left { margin-right:505px; } #twoColumn #right { float:right; width:495px; } .simple-accordion {} .simple-accordion .item { padding-top:1em; } .simple-accordion a { /*display:block;*/ } .simple-accordion .item h5 { background:transparent url("../images/accordian-arrow-closed.gif") center left no-repeat; cursor:pointer; padding-left:15px; color:#454B50; } .simple-accordion .item h5.open { background:transparent url("../images/accordian-arrow-open.gif") center left no-repeat; } .simple-accordion .item .inner { margin-left:1em; padding-top:1em; overflow:hidden !important; } /*------ SIFR -------*/ .sIFR-dummy { width: 0px; height: 0px; margin-left: 42px !important; z-index: 0; } .sIFR-flash { visibility: visible !important; margin: 0; padding: 0; } .sIFR-replaced, .sIFR-ignore { visibility: visible !important; } .sIFR-alternate { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; overflow: hidden; } .sIFR-replaced div.sIFR-fixfocus { margin: 0pt; padding: 0pt; overflow: auto; letter-spacing: 0px; float: none; } /*------ ADMIN --------*/ #adminNavigation { height:40px; } #adminNavigation li { list-style-type:none; list-style-image:none; float:left; margin-right:2em; }