/* Reading Room Manchester - Author: Mel Wood 2012 */ /*------------------------------------------------------------------*/ /* Main Layout Elements */ /*------------------------------------------------------------------*/ #siteContainer { background: url('../images/design/body_header_bg.gif') 0 0 repeat-x; } #headertools, #footerContactContainer, #breadcrumbnav, #innerContentContainer { width: 960px; margin: 0 auto; clear: both; } p { padding: 0 0 10px 0; line-height: 1.4em; } a { text-decoration: none; } a:hover { text-decoration: underline; } ul, li { margin: 0; padding: 0; } li { list-style-type: none; } input[type=input], label { cursor: pointer;} @font-face{ font-family: 'VAGRounded'; src: url('../fonts/VAGRounded-webfont.eot'); src: url('../fonts/VAGRounded-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/VAGRounded-webfont.ttf') format('truetype'), url('../fonts/VAGRounded-webfont.svg#VAGRoundedBTRegular') format('svg'); } /* classes */ .roundCornersTenpx, .cform #sendbutton, .cform .single, .cform .area, #commentform #submit, #commentform #author , #commentform #email, #commentform #url, #commentform #comment { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; } .roundCornersBottomTenpx { border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; -o-border-radius: 0 0 10px 10px; } .roundCornersTopTenpx { border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; -o-border-radius: 10px 10px 0 0; } .roundCorners5px { border-radius:5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; } .ie8 .roundCornersBottomTenpx, .ie7 .roundCornersBottomTenpx { behavior: none; } .imageDisplay { border: 1px solid #bbbbbb; padding: 5px; background: #fff; } .imageDimensions { width: 97%; height: auto; } .hiddenLabel { position: absolute; top: 0; left: -999999px; } .desktop { display: block; } .mobile { display: none; } .hideLabelContainer { position: relative; overflow: hidden; } .offScreen { position:absolute !important; top:-9999px !important; left:-9999px !important; } /*------------------------------------------------------------------*/ /* SHARED STYLES */ /*------------------------------------------------------------------*/ /* overflow: hidden ONLY */ #socialBtns, #partnerLogos { overflow: hidden; } /* position: relative ONLY */ #headertools, #twitterContainer, #footerbacktotop a.rocketBtn, #footerTwitterPanel, #footerSocialPanel, #signUp, #signUp #signupEmail, #mainArea #featured, .quoteBox { position: relative; } /* position: absolute ONLY */ #headerlogo, #headSearchFormContainer, #supportContainer, #maintopnavD, #maintopnavM, #subnavM, #twitterBirds, .footerKid, #rocketFinger, #rocketShip, #rocketShadow, #signUp label, .qmarks { position: absolute; } /* @font-face */ /* */ #supportContainer a span.supportTitle, #maintopnavD ul li a, #maintopnavM ul li a, #subnavM ul li a, .panelHeading, #signUp #submitEmail, #latestScroll p, #quickContact ul li a, #latest h2, .linkContent a .slideBtn a, #quickLinks ul.mobile li a span, .slideBtn a, .slideDesc span, #menuItems li a, #submenuItems li a, #breadcrumbnav a, #breadcrumbnav ul li.last, #mainArea h2, #mainArea ul.desktop li a, #mainArea h3, #sideArea h2, #sideArea ul li a, .quoteBox p, #bottomMenu ul.mobile li a, p.pageIntro, p.mobPageIntro, .eventsListingInDate .dateIndicator p.date, .eventsListingInDate .dateIndicator p.day, .articleSnippet h4, #pagination div a, #updateBasket, #basketTotal, #checkout, #purchase, .formGoBack, #cformsform #sendbutton, #commentform #submit, #cforms2form #sendbutton2, #respond h3, #donate { font-family: VAGRounded; font-weight:normal; } /* display: block */ #headerlogo a, #supportContainer a, #maintopnavD ul li a, #maintopnavM ul li a, #subnavM ul li a, #socialBtns li a, #footerbacktotop a.rocketBtn, #footerbacktotop a.rocketLink { display: block; } /* z-index elements */ #maintopnavD, #maintopnavM, #subnavM, #signUp { z-index: 100; } #twitterBirds, .footerKid { z-index: 200; } /* line-height */ #subAreas li p, #featured .slideDesc p, #teamProfiles > li > p, #relatedArticles ul > li > a, #ActivityBox p, #mainArea .contentTextList > li, #pageContent p, #pageContent p.date, #mainArea .blogListing .postSnippet p, #galleryViewer .gallerySlide ul li, #mobGalleryViewer .mobGallerySlide ul li, .articleSnippet p, #giftAid p, #donation span, #donation label { line-height: 1.6em; } /*------------------------------------------------------------------*/ /* Header */ /*------------------------------------------------------------------*/ #headerContainer { height: 200px; background: url('../images/design/header_logo_bg.png') 50% 0% no-repeat; } #headertools { } #headerlogo { top: 45px; left: 10px; } #headerlogo a { width: 187px; height: 50px; } #headerlogo a span { display: block; text-indent: -99999px; } #headSearchFormContainer { top: 9px; z-index: 200; right: 47px; } #headSearchForm input[type=text] { width: 178px; } #headSearchSubmit, #searchSubmit, #searchSubmitMobile { width: 30px; height: 23px; text-indent: -99999px; border: none; background: url('../images/design/toolbar_search_btn.png') 0 100% no-repeat; } #supportContainer { top: 5px; right: 0px; z-index: 100; width: 350px; height: 90px; } #supportContainer a { position: relative; z-index: 100; margin: 55px 0 0 33px; color: white; background: url('../images/design/white_arrow.png') 274px 4px no-repeat; } #supportContainer a span.supportTitle { font-size: 1.2em; padding-right: 8px; } #supportContainer a span.supportDesc { font-size: 1em; } #supportContainer #balloonBanner { position: absolute; top: 0px; left: 0px; width: 350px; height: 90px; } #maintopnavD { top: 160px; left: 0; width: 960px; height: 41px; background: url('../images/design/top_nav_bg.jpg') 0 0 no-repeat; } #maintopnavD ul { width: 960px; padding-top: 8px; } #maintopnavD ul li { position: relative; float: left; list-style-type: none; bottom: 46px; } #maintopnavD ul li.firstMenu a span { border-left: none; } #maintopnavD ul li.lastMenu a span { border-right: none; } #maintopnavD ul li a { padding: 48px 0px 0px 0px; font-size: 1.1em; color: #393838; height: 27px; position: relative; bottom: 0px; z-index: 100; } #maintopnavD ul li a span { border-right: 1px solid #CCC; border-left: 1px solid white; padding: 4px 18px; display: block; } #maintopnavD ul li.lastMenu a span { padding: 4px 8px 4px 18px; } #maintopnavD ul li a:hover { color: #98499c; text-decoration: none; } #maintopnavD ul li > div { position: absolute; top: -2px; overflow: hidden; height: 40px; width: 100%; left: 0; } /* each button state - NORMAL */ #maintopnavD ul li div div.greyImg, #maintopnavD ul li div div.colourImg { position: absolute; } .ie7 #maintopnavD ul li div div.greyImg, .ie8 #maintopnavD ul li div div.greyImg, .ie7 #maintopnavD ul li div div.colourImg, .ie8 #maintopnavD ul li div div.colourImg { background: #fff !important; } #maintopnavD ul li div div.colourImg { display: none; } #maintopnavD ul li div.home div.greyImg, #maintopnavD ul li div.home div.colourImg { bottom: -11px; left: 13px; } #maintopnavD ul li div.about div.greyImg, #maintopnavD ul li div.about div.colourImg { bottom: -19px; left: 25px; } #maintopnavD ul li div.visit div.greyImg, #maintopnavD ul li div.visit div.colourImg { bottom: -11px; left: 13px; } #maintopnavD ul li div.involved div.greyImg, #maintopnavD ul li div.involved div.colourImg { bottom: -11px; left: 36px; } #maintopnavD ul li div.happening div.greyImg, #maintopnavD ul li div.happening div.colourImg { bottom: -11px; left: 55px; } #maintopnavD ul li div.experts div.greyImg, #maintopnavD ul li div.experts div.colourImg { bottom: -11px; left: 39px; } #maintopnavD ul li div.services div.greyImg, #maintopnavD ul li div.services div.colourImg { bottom: -21px; left: 22px; } #maintopnavD ul li div.schools div.greyImg, #maintopnavD ul li div.schools div.colourImg { bottom: -11px; left: 27px; } #maintopnavD ul li div.play div.greyImg, #maintopnavD ul li div.play div.colourImg { bottom: -24px; left: 22px; } /* each button state - CURRENT */ #maintopnavD ul li.current_top_nav a { color: #98499c; } #maintopnavD ul li.current_top_nav > div .colourImg { display: block !important; } #maintopnavD ul li.current_top_nav > div .greyImg { display: none !important; } #maintopnavD ul li.current_top_nav div.home div.colourImg { bottom: -2px !important; } #maintopnavD ul li div.about div.colourImg { bottom: -4px !important; } #maintopnavD ul li div.visit div.colourImg { bottom: 0px !important; } #maintopnavD ul li div.involved div.colourImg { bottom: 0px !important; } #maintopnavD ul li div.happening div.colourImg { bottom: 0px !important; } #maintopnavD ul li div.experts div.colourImg { bottom: -2px !important; } #maintopnavD ul li div.services div.colourImg { bottom: -8px !important; } #maintopnavD ul li div.schools div.colourImg { bottom: 0px !important; } #maintopnavD ul li div.play div.colourImg { bottom: -4px !important; } #cloud1, #cloud2, #cloud3 { position: absolute; width: 105px; height: 62px; } #cloud1 { top: 45px; right: 200px; } #cloud2 { top: -35px; right: 480px; } #cloud3 { top: 15px; right: 1000px; } /*------------------------------------------------------------------*/ /* Footer */ /*------------------------------------------------------------------*/ #footerContainer { position:relative; padding:0px 0 0; color: #666; background: url('../images/design/body_footer_bg.jpg') 50% 100% no-repeat; clear:both;} #footerContainer a { color: #0068b8; } #footerPanels { display: block; position: relative; width: 940px; margin: 0 auto -250px; background: #E6E6E6; min-height: 368px; } #whiteEmailPanel { display: block; position: absolute; top: 70px; right: 20px; width: 266px; height: 200px; background: #fff; } #footerImage { position:relative; height: 300px; } #footerImage.home { background: url('../images/content/page_footer_home.png') 50% 100% no-repeat; } #footerImage.about { background: url('../images/content/page_footer_about.png') 50% 100% no-repeat; } #footerImage.visit { background: url('../images/content/page_footer_visit.png') 50% 100% no-repeat; } #footerImage.involved { background: url('../images/content/page_footer_involved.png') 50% 100% no-repeat; } #footerImage.happening { background: url('../images/content/page_footer_happening.png') 50% 100% no-repeat; } #footerImage.expert { background: url('../images/content/page_footer_expert.png') 50% 100% no-repeat; } #footerImage.service { background: url('../images/content/page_footer_service.png') 50% 100% no-repeat; } #footerImage.schools { background: url('../images/content/page_footer_schools.png') 50% 100% no-repeat; } #footerImage.play { background: url('../images/content/page_footer_play.png') 50% 100% no-repeat; } #animationContainer { overflow: visible; position: relative; width: 960px; height: 300px; margin: -300px auto 0; } #footerSocialSignup { position: absolute; top: 0px; left: 50%; margin: 0 0 0 -448px; padding: 20px 0 80px 0; width: 900px; } .panelHeading { padding-bottom: 5px; margin-bottom: 20px; font-size: 1.4em; color: #6d6e71; border-bottom: 1px solid #bbbbbb; } #footerTwitterPanel, #footerSocialPanel, #footerSignupPanel { float: left; width: 266px; } #footerTwitterPanel, #footerSocialPanel { margin-right: 50px; } #twitterContainer { background: #fff; } #twitterContainer { float: left; min-height: 85px; } /* START: First twitter plugin styling */ /*#twitterContainer { padding: 30px; } #twitterContainer .twitter-timestamp { } #twitterContainer abbr[title] { display: block; margin: 10px 0 0 0; position: absolute; bottom: 30px; right: 30px; border-bottom: none; }*/ /* END */ /* START: new(Oct2012) twitter plugin styling */ #twitterContainer { padding: 15px; } #twitterContainer .tweet { margin: 0 0 15px 0; } #twitterContainer .tweet > div { margin: 0 10px 5px 0 !important; } #twitterContainer iframe { float: right; } /* END */ #twitterTail { clear: both; width: 266px; height: 23px; background: url('../images/design/twitter_tail.png') 102px 0 no-repeat; } #twitterBirds { top: 218px; width: 179px; height: 104px; background: url('../images/design/twitter_bird-3.png') 0 0 no-repeat; left: -5px; } #twitBird1, #twitBird2, #twitBird3 { position: absolute; display: none; } #twitBird1 { top: 10px; left: -23px; } #twitBird2 { top: -27px; left: 23px; } #twitBird3 { top: 10px; left: 161px; } .twitterMessage { position: relative; z-index: 1200; margin-bottom: 20px; } .twitterMessageDetails { font-size: 0.9em; font-style: italic; } .twitterMessageDetails span { float: right; } #socialBtns { padding-bottom: 5px; margin-bottom: 20px; border-bottom: 1px solid #bbbbbb; } #socialBtns li { position: relative; float: left; margin: 0 10px 10px 0; } #socialBtns li a { text-align: center; width: 62px; padding: 50px 0 0 0; } #socialBtns li a.twitter { background: url('../images/design/share_btn_twitter.png') 50% 0 no-repeat; } #socialBtns li a.facebook { background: url('../images/design/share_btn_facebook.png') 50% 0 no-repeat; } #socialBtns li a.contact { background: url('../images/design/share_btn_contact.png') 50% 0 no-repeat; } #socialBtns li a.youtube { background: url('../images/design/share_btn_youtube.png') 50% 0 no-repeat; } #socialBtns li a.flickr { background: url('../images/design/share_btn_flickr.png') 50% 0 no-repeat; } #socialBtns li a.LinkedIn { background: url('../images/design/share_btn_linkedin.png') 50% 0 no-repeat; } #socialBtns li a.google { background: url('../images/design/share_btn_google.png') 50% 0 no-repeat; } #partnerLogoContainer { position: relative; } #signUpFormContainer { padding: 20px; min-height: 160px; } #signUp { margin: -2px 0 0 0 } #signUp label { top: 4px; left: 8px; color: #666; z-index: 100001; font-style: italic; } #signUp #signupEmail { width: 221px; border: 1px solid #b0b0b1; height: 20px; padding: 0 0 0 8px; background-color: white; } #signUp #submitEmail { float: right; height: 29px; padding: 0px 28px 0 9px; line-height: 1.6em; border: none; font-size: 1.2em; color: #ca2d64; background: url('../images/design/signup_btn.png') 0 100% no-repeat; } .ie7 #signUp #submitEmail, .ie8 #signUp #submitEmail { float: none; margin: 0 0 0 69px; } /* START: Form validation */ #signUpFormContainer label.error, #signUpFormContainer label.success { font-size: 1em; font-weight: bold; text-align: right; color: #CB2E65 !important; } #signUpFormContainer label.error { display: block; position: relative; top: auto; left: auto; padding: 2px 5px 0 0; } #signUpFormContainer label.success { } #formSubmitMessage { display: none; color: #CB2E65; margin: -4px 0 0 0; font-style: italic; } /* END: Form validation */ #footerlinksD, #footerlinksM { position: absolute; bottom: 58px; left: 50%; z-index: 1000; margin: 0 0 0 -480px; width: 960px; height: 47px; background: url('../images/design/footer_banner.png') 50% 0 no-repeat; } .footerLinksList { margin-right: 30px; padding-top: 17px; position: relative; overflow: hidden;} .footerLinksList li { float: right; padding: 0 5px; border-right: 1px solid #666; font-style: italic; } .footerLinksList li.last { border-right: none; } .footerLinksList li a { } #partnerLogos { } #partnerLogos li { float: left; margin-right: 30px; } #partnerLogos li a { } #partnerLogos li a img { } .footerKid { right: 258px; top: -200px; width: 161px; height: 206px; background: url('../images/design/footer_kid.png') 0 0 no-repeat; } #footerbacktotop { margin: 10px 0 0 28px; float: left; width: 222px; } .ie9 #footerbacktotop { width: 217px; } #footerbacktotop a.rocketBtn, #footerbacktotop a.rocketLink { float: left; } #footerbacktotop a.rocketBtn { text-indent: -99999px; width: 53px; height: 26px; background: url('../images/design/back_to_top_btn.png') 0 0 no-repeat; } #footerbacktotop a.rocketLink { font-style: italic; margin: 7px 0 0 51px; } #rocketShip { position: absolute; left: 80px; top: -19px; z-index: 300000; width: 41px; height: 60px; background: url('../images/design/back_to_top_spaceship.png') 0 0 no-repeat; } .ie7 #rocketShip, .ie8 #rocketShip { background: url('../images/design/back_to_top_spaceship-fwv.png') 0 0 no-repeat; } #rocketShadow { left: 79px; top: 41px; z-index: 50; width: 43px; height: 6px; background: url('../images/design/back_to_top_shadow.png') 0 0 no-repeat; } #rocketFinger { top: 44px; left: 10px; width: 94px; height: 61px; background: url('../images/design/back_to_top_hand.png') 0 0 no-repeat; } /*------------------------------------------------------------------*/ /* Menus */ /*------------------------------------------------------------------*/ /* breadcrumb nav */ #breadcrumbnav { margin-top: 19px; margin-bottom:20px; } #breadcrumbnav p { padding: 19px 0 10px 3px; font-family: Arial, Helvetica, sans-serif; font-size: 1em; display: inline; } #breadcrumbnav ul, #breadcrumbnav li { display: inline;} #breadcrumbnav ul li a { color: #cb2e65; font-size: 1.1em; padding-left: 15px; margin-left: 5px; background: url('../images/design/arrow_blue.png') no-repeat 0px 50%; } #breadcrumbnav ul li.first a { background: none; padding-left: 0; } #breadcrumbnav ul li.last { color: #000; font-size: 1.1em; padding-left: 15px; margin-left: 5px; background: url('../images/design/arrow_blue.png') no-repeat 0px 50%; } /* share and print */ #breadcrumbnav .print, #breadcrumbnav .share { float: right; font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; color: #cb2e65; display: inline; } #breadcrumbnav .print { padding: 0 10px 10px 27px; background: url('../images/design/tool_bar_print.png') 0 0 no-repeat; } #breadcrumbnav .share { padding: 0 15px 10px 22px;background: url('../images/design/tool_bar_share.png') 0 0 no-repeat; } /* Side menu */ #sideArea h2 { font-size:1.4em; font-weight:normal; color:#98499c; padding:3px 7px 10px 35px; } #sideArea h2.windmill { background: url('../images/design/side-menu-icon-windmill.png') 6px 2px no-repeat !important; } #sideArea h2.car { background: url('../images/design/side-menu-icon-car.png') 2px 8px no-repeat !important; } #sideArea h2.heart { background: url('../images/design/side-menu-icon-heart.png') 10px 7px no-repeat !important; } #sideArea h2.hand { background: url('../images/design/side-menu-icon-hand.png') 4px 2px no-repeat !important; } #sideArea h2.speechBubble { background: url('../images/design/side-menu-icon-speechBubble.png') 7px 4px no-repeat !important; } #sideArea h2.ladybird { background: url('../images/design/side-menu-icon-ladybird.png') 10px 2px no-repeat !important; } #sideArea h2.bus { background: url('../images/design/side-menu-icon-bus.png') 4px 6px no-repeat !important; } #sideArea h2.pencil { background: url('../images/design/side-menu-icon-pencil.png') 9px 4px no-repeat !important; } /* hide menus when not selected */ #sideMenu > li .children {display:none;} /* show menus when required */ #sideMenu > li.current_page_item > .children, #sideMenu > li.current_page_ancestor > .children, #sideMenu > li.current_page_ancestor > .children, #sideMenu > li.current_page_ancestor > .children > li.current_page_item > .children, #sideMenu > li.current_page_ancestor > .children > li.current_page_parent > .children, #sideMenu > li.current_page_ancestor > .children > li.current_page_parent > .children > li.current_page_item {display:block;} /* Side menu */ #sideMenu { background:url('../images/design/double_line.png') repeat-x 0 0; margin:6px 0 12px 0; padding:15px 0 0 0; } #sideMenu > li { padding:5px 5px 5px 10px; } #sideMenu > li > a { font-size:1.3em; color:#e01123; font-weight:normal; } #sideMenu > li.current_page_item, #sideMenu > li.current_page_ancestor { background: url('../images/design/side-menu-current-level-top.png') 10px 11px no-repeat; } #sideMenu > li.current_page_item > a, #sideMenu > li.current_page_ancestor > a { color: #98499c !important; padding: 0px 0px 0px 15px; } /* Side menu sub menu */ #sideMenu > li > .children { } #sideMenu > li > .children > li { padding: 5px 5px 5px 15px; } #sideMenu > li > .children > li > a { color: #393838; font-size: 1.2em; display: block; } #sideMenu > li > .children > li.current_page_item, #sideMenu > li > .children > li.current_page_ancestor { background: url('../images/design/side-menu-current-level-second.png') 15px 10px no-repeat; } #sideMenu > li > .children > li.current_page_item > a, #sideMenu > li > .children > li.current_page_ancestor > a { color: #0068b7 !important; padding: 0px 0px 0px 15px; } /* Side menu sub sub menu */ #sideMenu > li > .children > li > .children { } #sideMenu > li > .children > li > .children > li { padding: 5px 5px 5px 15px; } #sideMenu > li > .children > li > .children > li > a { color: #01A29D; font-size: 1.2em; display: block; } #sideMenu > li > .children > li > .children > li.current_page_item { background: url('../images/design/side-menu-current-level-third.png') 15px 10px no-repeat; } #sideMenu > li > .children > li > .children > li.current_page_item > a { color: #51b848 !important; padding: 0px 0px 0px 15px; } /* Side menu divider */ #menuDivider { background: url('../images/design/double_line.png') repeat-x 0 0; margin: 6px 0 12px 0; padding-top: 25px; } /* right side promos */ #mainArea ul.desktop { margin: 3px 10px 0 0; padding: 18px; background-color: #7EBD32; display: inline-block; float: right; } .ie7 #mainArea ul.desktop, .ie8 #mainArea ul.desktop { margin: 3px 3px 0 0; } #mainArea ul.desktop li { margin: 0 0 4px 0; padding: 0; width: 175px; background: url('../images/design/contact_btn_small.png') 0 0 no-repeat; background-size:contain; } #mainArea ul.desktop li a { position: relative; display: block; font-size: 1.2em; font-weight: normal; color: #CB2E65; padding: 10px 0px 18px 14px;} #mainArea ul.desktop li a img { position: absolute; margin: 0; } #mainArea ul.desktop li a.tickets img { top: 2px; right: 21px; } #mainArea ul.desktop li a.opening img { top: 2px; right: 16px; } #mainArea ul.desktop li a.disability img { top: 6px; right: 22px; } #mainArea ul.desktop li a.contact img { top: 8px; right: 10px; } #bottomMenu ul.mobile { margin: 3px 0 0 10px; padding: 22px; background-color: #7ebd32; border-radius: 5px; } .ie8 #mainArea ul.desktop , .ie7 #mainArea ul.desktop { padding: 17px; } .ie8 #mainArea ul.desktop li, .ie7 #mainArea ul.desktop li { padding-right: 5px; margin: 0px 0px 0px 6px; } /* post pagination */ #pagination { float: right; } #pagination div { float: left; font-weight: bold; } #pagination div a { display: block; color: #CB2E65; } #pagination #previous, #pagination #next, #pagination .pageNum { margin: 6px 3px; line-height: 1.6em; } #pagination #next { margin-right: 0 !important; } #pagination #previous a { background: url('../images/design/arrow-teal-prev.png') 0% 50% no-repeat; padding: 0 0 0 14px; } #pagination #next a { background: url('../images/design/arrow-teal-next.png') 100% 50% no-repeat; padding: 0 14px 0 0; } #pagination .pageNum a { width: 20px; text-align: center; } #pagination .pageNum a.current { color: #000 !important; } /*------------------------------------------------------------------*/ /* ANIMATED CANVAS ELEMENTS */ /*------------------------------------------------------------------*/ /* sitewide */ #pageHeaderContainer { position: relative; } #ladyBug { display: block; position: absolute; top: 27px; right: 15px; width: 36px; height: 25px; } #trafficDivider { position: relative; } #blueBus, #greenBus, #greenCar { position: absolute; top: 25px; } #blueBus { left: 15px; width: 43px; height: 25px; } #greenBus { left: 60px; width: 44px; height: 25px; } #greenCar { top: 30px; left: 145px; width: 34px; height: 20px; } /* home / default footer */ #anim_windmill { display: block; position: absolute; top: 50px; right: 235px; width: 39px; height: 39px; } /* about us footer */ #about_elephant, #about_music { position: absolute; } #about_elephant { top: 79px; right: 146px; width: 64px; height: 115px; } #about_music { top: 104px; right: 192px; width: 46px; height: 50px; } /* visit us footer */ #visit_car { position: absolute; top: 63px; right: 168px; width: 177px; height: 238px; } /* get involved footer */ #digi_screen { position: absolute; top: 100px; right: -33px; width: 162px; height: 118px; } /* happening footer */ #happening_cloud { position: absolute; top: 49px; right: -30px; width: 301px; height: 79px; } /* expertise footer */ #palm_tree { position: absolute; bottom: 0px; right: 64px; width: 200px; height: 253px; } /* services footer */ #service_bug, #service_butterfly { position: absolute; } #service_bug { bottom: 0px; right: 85px; width: 218px; height: 72px; } #service_butterfly { top: 121px; right: 275px; width: 90px; height: 89px; } /* schools footer */ #schools_orby, #schools_rocket { position: absolute; } #schools_orby { top: 126px; right: 237px; width: 46px; height: 93px; } #schools_rocket { top: 53px; right: -16px; width: 112px; height: 81px; } /* play footer */ #play_face, #play_lights, #play_belly { position: absolute; } #play_face { top: 100px; right: 166px; width: 56px; height: 26px; } #play_lights { top: 130px; right: -28px; width: 142px; height: 37px; } #play_belly { top: 145px; right: 162px; width: 65px; height: 37px; } /*---- ARCHIVE FOOTER ANIMATIONS ----*/ /* play footer */ /* #play_flash, #play_arm { position: absolute; } #play_flash { top: 81px; right: 147px; width: 58px; height: 58px; } #play_arm { top: 140px; right: 206px; width: 60px; height: 66px; } */ /* about footer */ /* #about_dancer, #about_music { position: absolute; } #about_dancer { top: 110px; right: 72px; width: 72px; height: 114px; } */ /*------------------------------------------------------------------*/ /* Homepage */ /*------------------------------------------------------------------*/ /* hero section */ #heroFrameDetail { margin: -32px 0 0 0; background: url('../images/design/home_carousel_bg.png') 50% 0 no-repeat; } #heroArea { margin: 0 auto; padding: 32px 0 0 0; width: 960px; height: 409px; } #heroContentsContainer { position: relative; height: 387px; padding: 25px 10px 0 10px; } #heroCarousel { position: relative; float: left; width: 620px; height: 322px; } #desktopSlideshow { position: relative; } #desktopSlideshow .slide { display: none; } /* trick for hiding all carousel slides on page load */ #desktopSlideshow img.responsiveImage { width: 100%!important; height: auto!important; visibility: hidden; } #desktopSlideshow .carouselContent { width: 600px; height: 310px; margin: 0 0 0 3px; padding: 5px; border: 1px solid #bbbbbb; } #desktopSlideshow .carouselContent img { width: 600px; height: 310px; } .slideDesc { position: absolute; bottom: 22px; left: 0; padding: 15px; width: 587px; height: 68px; border: 1px solid #bbbbbb; background: url('../images/design/home_carousel_banner_bg.gif') 0 0 repeat-x; } .slideDesc span { font-size: 2em; color: #0068b8; } .slideDesc p { } a.next, a.prev { text-indent: -99999px; overflow: hidden; position: absolute; top: 130px; z-index: 100; display: block; width: 40px; height: 40px; border: 1px solid #bbbbbb; } a.next { right: -5px; background: url('../images/design/arrow_orange_next.png') 50% 50% no-repeat #fff; } a.prev { left: -5px; background: url('../images/design/arrow_orange_prev.png') 50% 50% no-repeat #fff; } .slideBtn { position: absolute; bottom: 5px; right: 7px; background: url('../images/design/homepage_carousel_link_btn.png') 0 0 no-repeat; } .slideBtn a { display: block; padding: 7px 43px 9px 13px; font-size: 1.2em; color: #CB2E65; } #carouselNav { position: absolute; top: 20px; right: 15px; z-index: 100; } #carouselNav li { text-indent: 100%; white-space: nowrap; overflow: hidden; float: left; margin: 0 3px 0 0; width: 23px; height: 24px; } #carouselNav li.green { background: url('../images/design/carousel_btn_01.png') 0 0 no-repeat; } #carouselNav li.blue { background: url('../images/design/carousel_btn_02.png') 0 0 no-repeat; } #carouselNav li.pink { background: url('../images/design/carousel_btn_03.png') 0 0 no-repeat; } #carouselNav li.orange { background: url('../images/design/carousel_btn_04.png') 0 0 no-repeat; } #carouselNav li.teal { background: url('../images/design/carousel_btn_05.png') 0 0 no-repeat; } #carouselNav li a { display: block; width: 23px; height: 24px; background:none} #carouselNav li.activeSlide a { background: url('../images/design/carousel_btn_active.png') 0 0 no-repeat; } #quickContact { float: left; margin: 0 0 0 6px; width: 314px; height: 319px; background: url('../images/design/home_page_quick_info.png') 0 0 no-repeat; } #bottomMenu {clear:both;} /* DESKTOP & TABLET VERSION OF QUICK CONTACT MENU */ #quickContact ul.desktop { margin: 121px 0 0 42px; } /* .ie7 #quickContact ul.desktop { padding-top: 125px; } */ #quickContact ul.desktop li { margin: 0 0 2px 0; width: 223px; background: url('../images/design/contact_btn_new.png') 0 0 no-repeat; } #quickContact ul.desktop li a { position: relative; display: block; font-size: 1.2em; color: #CB2E65; padding: 12px 0px 14px 19px; } #quickContact ul.desktop li a img { position: absolute; } #quickContact ul.desktop li a.tickets img { top: 1px; right: 27px; } #quickContact ul.desktop li a.opening img { top: 0px; right: 23px; } #quickContact ul.desktop li a.disability img { top: 6px; right: 31px; } .ie7 #quickContact ul.desktop li a.opening img { top: 1px; } #quickContact ul.desktop li a.contact img { top: 7px; right: 19px; } #latestScroll { position: absolute; top: 362px; left: 360px; width: 241px; height: 47px; background: url('../images/design/scroll_bg.png') 0 0 no-repeat; } #latestScroll p { padding: 10px 0 0 0; text-align: center; font-size: 1.6em; color: #333333; } /* latest section */ #latest { margin: 20px auto; width: 940px; } #latest h2 { font-size: 1.6em; color: #0067b7; padding: 2px; } #latest h2 a { color: #0067b7; } #latest h2 a:hover { text-decoration: none; } #latest h2 a:visited { color: #0067b7; } #latest h2.news { padding: 3px 0 3px 20px; background: url('../images/design/latest_icon_news.png') 0 50% no-repeat; } #latest h2.on { padding: 3px 0 3px 27px; background: url('../images/design/latest_icon_on.png') 0 50% no-repeat; } #latest h2.experts { padding: 3px 0 3px 30px; background: url('../images/design/latest_icon_experts.png') 0 50% no-repeat; } #latest ul { overflow: hidden; } #latest ul li { float: left; padding: 0 20px 0 0; } #latest ul li.last { padding: 0 !important; } #latest ul li > a { display: block; } #latest ul li > a:hover { text-decoration: none; } #latest ul li > a.latestMoreLink { display: block; text-align: right; color: #333333; margin: 10px 0 0 0; padding: 0 20px 0 0; background: url('../images/design/arrow_pink.png') 100% 50% no-repeat; } #latest ul li > a.latestMoreLink:hover { text-decoration: underline; } .latestContentBox { overflow: hidden; width: 284px; margin: 15px 0 0 0; padding: 8px 8px 20px 8px; } .latestContentBox p { padding: 10px 0 0 0; color: #fff; } .latestContentBox p.date { font-style: italic; font-size: 1em; } .latestContentBox .imgContainer { display: block; width: 272px; height: 100px; padding: 5px; background: #fff; border: 1px solid #bbbbbb; } .latestContentBox .imgContainer img { width: 100%; height: 100%; } .red { background: #df1123; } .purple { background: #b42b85; } .blue { background: #0067b7; } /* traffic divider */ #trafficDivider { margin: 30px auto; width: 960px; height: 51px; background: url('../images/design/traffic-keyline.png') 0 0 no-repeat; } /* quick links section */ #quickLinks { margin: 30px auto; width: 940px; } #quickLinks ul { } #quickLinks ul li { position: relative; float: left; padding: 0 14px 0 0; } #quickLinks ul li .btnImgContainer { position: absolute; top: 0px; left: 0px; width: 221px; height: 134px; } .btnImgContainer div { position: absolute; display: none; } #redNotes1 { top: 51px; right: 20px; } #redNotes2 { top: 32px; right: 30px; } #redNotes3 { top: 25px; right: 11px; } #redNotes4 { top: 6px; right: 3px; } #magicStars1 { top: 3px; left: 66px; } #magicStars2 { top: 52px; left: 37px; } #magicStars3 { top: 74px; right: 16px; } #bars1 { top: 63px; left: 38px; } #bars2 { top: 37px; right: 75px; } #bars3 { top: 103px; right: 40px; } #fish1 { top: 46px; left: 27px; } #fish2 { top: 25px; right: 28px; } .btnImgContainer div img { } #quickLinks ul li img { display: block; margin: 0 auto; position: relative; z-index: 100; } #quickLinks ul li img.behind { z-index: 90; position: absolute; bottom: 55px; left: 60px; } .ie7 #quickLinks ul li img.behind { bottom: 58px; } #quickLinks ul li.last { padding: 0 !important; } #quickLinks ul li.last img { margin: 0 auto; } .linkContent { display: block; padding: 8px 0 12px 20px; width: 204px; height: 35px; color: #000 !important; background: url('../images/design/home_page_btn_bg.png') 0 0 no-repeat; } .linkContent:hover { text-decoration: none; } .linkContent span { font-size: 1.2em; color: #CB2E65; } /*------------------------------------------------------------------*/ /* What's happening? */ /*------------------------------------------------------------------*/ #sideArea { width: 220px; display: inline-block; float: left; } #mainArea { width: 730px; margin: 0 0 40px 0; float: right; display: inline-block; /*-ms-word-break: break-all; word-break: break-all; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;*/ } #mainArea h2 { font-size: 2em; font-weight: normal; color: #0068b8; padding-bottom: 35px; background: url('../images/design/heading-double_line.png') repeat-x 100% 65%; } #featuredWrapper { width: 500px; float: left; margin: 0 0 10px 0; background: url('../images/design/sidepipes.png') no-repeat 0 15px; } #featured { } #featured .imgContainer { width: 470px; margin: 3px 0 0 9px; padding: 5px; border-radius: 5px 5px 0 0; background-color: white; border-left: 1px solid #BBB; border-top: 1px solid #BBB; border-right: 1px solid #BBB; } #featured .imgContainer a { display: block; } #featured .imgContainer img { margin: 0; } #featured .featuredDesc { margin: 0 3px; padding: 15px; border: 1px solid #bbbbbb; background: url('../images/design/landing-hero-bg.gif') 0 100% repeat-x #fff; } .ie7 #featured .featuredDesc { bottom: 13px; width: 462px; left: 3px; } #featured .featuredDesc p { font-size: 1em; line-height: 1.2em; } #featuredBottomDetail { margin: 0 9px 0; height: 9px; border-radius: 0 0 5px 5px; border-left: 1px solid #BBB; border-right: 1px solid #BBB; border-bottom: 1px solid #BBB; } #subAreas { clear: both; margin: 0 0 30px 0 !important; } #subAreas li { margin: 10px !important; width: 230px; display: inline-block; vertical-align: top; padding: 0 !important; background: none !important; } #mainArea h3 { font-size: 1.5em; color: #cb2e65; margin: 10px 0 10px 0; } #mainArea a { color: #0068B7; } #mainArea img { margin: 0 0 15px 0; } /* STYLES for WP entered images, tables etc */ #mainArea img.alignright, #mainArea img.alignleft, #mainArea img.aligncenter { padding: 11px; } #mainArea img.alignright { float: right; margin: 0; } #mainArea img.alignleft { float: left; margin: 0; } #mainArea img.aligncenter { display: block; clear: both; margin-left: auto; margin-right: auto; } #mainArea table.alignright { float: right; margin: 5px 0 5px 5px; } #mainArea table.alignleft { float: left; margin: 5px 5px 5px 0; } #mainArea table.aligncenter { clear: both; margin-left: auto; margin-right: auto; margin: 5px 0; } #subAreas li p { margin: 15px 0 10px 0; } #subAreas li a.rightlink { float: right; padding: 3px 20px 3px 3px; color: #000; font-weight: bold; background: url('../images/design/arrow_pink.png') no-repeat 99% 5px; } .ie7 #subAreas li { display: inline; } #subnavM { margin: 0; } #subdropDownMenu { top: -4px !important; } #maintopnavM { display: none; } .quoteBox { margin: 6px 0 12px 0; } .quoteBox img { } .quoteBox p { padding: 15px; color: #21a09c; font-size: 1.4em; background-color: #f6f6f6; border-radius: 5px; border: 1px solid #eaeaea; font-weight: normal; } .quoteBox p span { display: block; color: #333; font-size: 0.8em; margin-top: 30px; } .qmarks { top: 123px; left: 5px; width: 30px; height: 22px; background: url('../images/design/quote_marks.png') no-repeat 0 0; } /*------------------------------------------------------------------*/ /* Meet the team */ /*------------------------------------------------------------------*/ p.pageIntro, p.nameTitle { padding: 0 0 20px 0; color: #ca2e65; font-size: 1.2em; } p.nameTitle { font-weight: bold; } #teamProfiles { clear: both; } #teamProfiles > li { overflow: hidden; margin: 0 0 15px 0 !important; background: none !important; padding: 0 !important; } #teamProfiles > li > p { float: right; width: 524px; } #teamProfiles > li > p.nameTitle { margin: 25px 0 0 0; } .teamMemberPhoto { position: relative; float: left; margin: 0 19px 0 0; padding: 16px; width: 120px; height: 140px; } .teamMemberPhoto .teamMemberPhotoMask { width: 151px; height: 171px; position: absolute; top: 0; left: 0; overflow: hidden; } .teamMemberPhoto img { margin: 0 !important; width: 100%; height: auto; } .teamMemberPhoto .blue { background:url('../images/content/teamprofile-border-blue.png') no-repeat 0 0; } .teamMemberPhoto .green { background:url('../images/content/teamprofile-border-green.png') no-repeat 0 0; } .teamMemberPhoto .hotpink { background:url('../images/content/teamprofile-border-hotpink.png') no-repeat 0 0; } .teamMemberPhoto .orange { background:url('../images/content/teamprofile-border-orange.png') no-repeat 0 0; } .teamMemberPhoto .pink { background:url('../images/content/teamprofile-border-pink.png') no-repeat 0 0; } .teamMemberPhoto .red { background:url('../images/content/teamprofile-border-red.png') no-repeat 0 0; } .teamMemberPhoto .teal { background:url('../images/content/teamprofile-border-teal.png') no-repeat 0 0; } .teamMemberPhoto .yellow { background:url('../images/content/teamprofile-border-yellow.png') no-repeat 0 0; } #pageExtras { overflow: hidden; margin: 0 0 30px 0; clear: both; } #relatedArticles { float: left; overflow: hidden; } #relatedArticles h3 { color: #0067b7; padding: 0 0 0 25px; background:url('../images/design/related-link-icon.png') no-repeat 0 50%; } #relatedArticles ul { margin: 0 !important; } #relatedArticles ul > li { float: left; width: 222px; margin: 0 28px 0 0 !important; padding: 0 !important; background: none !important; } #relatedArticles ul > li > a > img { margin: 0; width: 100%; height: auto; } #relatedArticles ul > li a { display: block; } #relatedArticles ul > li > a.textLink { text-align: right; padding: 0 17px 0 0; background: url('../images/design/arrow_pink.png') no-repeat 100% 3px; margin: 5px 0 0 0; color: black; cursor: pointer; } #ActivityBox { float: left; width: 195px; background: #ec7027; padding: 12px; margin: 10px 0 0 0; } #ActivityBox h3, #ActivityBox p { background: #fff; color: #000; } #ActivityBox h3 { border: 3px solid #000; width: 80px; padding: 10px; font-size: 2.4em; margin: 0 0 10px 0; text-align: center; } #ActivityBox p { padding: 18px 30px; } /*------------------------------------------------------------------*/ /* Content layout */ /*------------------------------------------------------------------*/ #mainArea img.pageHeader { margin: 0 0 15px 0; } #mainArea p.largePara { padding: 0 0 10px 0; font-size: 1.4em; font-weight: bold; } #mainArea p.largePara span { color: #CB2E65; } #mainArea ul { margin: 10px 0 20px 25px; } #mainArea ul > li { padding: 0 0 0 20px; margin: 0 0 20px 0; background: url('../images/design/main-content-bullet.png') 0px 2px no-repeat; line-height: 1.4em; } #mainArea ul > li > a { } #mainArea ol { margin: 10px 0 20px 25px; padding: 0 0 0 20px; } #mainArea ol > li { list-style-type: decimal; padding: 0px; margin: 0 0 20px 0; line-height: 1.4em; } #mainArea ol > li > a { } /*------------------------------------------------------------------*/ /* Listing layout */ /*------------------------------------------------------------------*/ #listOfPosts { position: relative; margin: 0 10px 30px 0; } #listOfPosts, #eventsWrapper { overflow: hidden; } #eventsWrapper { margin: 20px 0 36px 0; padding: 0 0 20px 0; border-bottom: 10px solid #E6E6E6; } #eventsWrapper #eventsOfDate { } #eventsWrapper #eventsOfDate .eventsListingInDate { } .eventsListingInDate .dateIndicator { background: url('../images/design/events-post-date.png') 50% 0 no-repeat; float: left; width: 120px; height: 80px; margin: 15px 0 0 0; } .eventsListingInDate .dateIndicator p.date, .eventsListingInDate .dateIndicator p.day { text-align: center; } .eventsListingInDate .dateIndicator p.date { color: #2169b2; font-size: 1.4em; padding: 28px 0 14px 0; } .eventsListingInDate .dateIndicator p.day { color: #333333; font-size: 1.2em; } .eventsListingInDate .groupOfPosts { float: left; width: 600px; } .eventsListingInDate .newsListing { width: 100%; } .eventsListingInDate .groupOfPosts .articleSnippet { overflow: hidden; margin: 0 0 20px 0; } .articleSnippet > a { float: left; display: block; overflow: hidden; width: 173px; } .articleSnippet .newsItemText { } .articleSnippet h4 a { color: #2169b2; font-size: 1.4em; padding: 0 0 5px 0; } .articleSnippet img { margin: 0 10px 0 0 !important; float: left; } .articleSnippet p { } .articleSnippet p.date { font-style: italic; } .articleSnippet a.moreLink { background: url('../images/design/arrow_pink.png') 100% 50% no-repeat; color: #000; font-weight: bold; margin: 6px 0; line-height: 1.6em; padding: 0 14px 0 0; float: right; width: 33px; } /*------------------------------------------------------------------*/ /* Listing detail layout */ /*------------------------------------------------------------------*/ #twoColumn { overflow: hidden; } #pageContent { width: 482px; float: left; } #pageContent p.date { font-style: italic; } #pageContent p, #pageContent p.date { padding: 0 0 20px 0; } /*------------------------------------------------------------------*/ /* Blog listing layout */ /*------------------------------------------------------------------*/ #mainArea .blogListing { clear: both; background: url('../images/design/blog-divider.gif') 0% 100% no-repeat; margin: 0 0 25px 0; padding: 0 0 45px 0; overflow: hidden; } #mainArea .blogListing h3 { background: url('../images/design/blog-icon-entry.png') 0px 6px no-repeat; margin: 0; line-height: 1.6em; padding: 8px 0 0 40px; } #mainArea .blogListing h3 a { color: #CB2E65; } #mainArea .blogListing > a { float: left; margin: 0 20px 0 40px; width: 170px; height: 197px; } #mainArea .blogListing > a img { width: 100%; height: auto; } #mainArea .blogListing > p { margin: 5px 0 15px 40px; } #mainArea .blogListing .postSnippet { width: 474px; float: left; } #mainArea .blogListing .postSnippet p { } #mainArea .blogListing .postSnippet p.postDate { } #mainArea .blogListing .postSnippet p.postMeta { text-align: right; clear: both; } #mainArea .blogListing .postSnippet a.continueReading { background: url('../images/design/arrow_pink.png') 100% 50% no-repeat; color: black; font-weight: bold; margin: 10px 0; line-height: 1.6em; padding: 0 14px 0 0; } #mainArea .blogListing .postSnippet a.postComments { background: url('../images/design/blog-icon-comment.png') 0 50% no-repeat; padding: 0 0 0 17px !important; margin: 5px 0 0 0; } #mainArea .blogListing .postSnippet a.continueReading, #mainArea .blogListing .postSnippet a.postComments { float: right; } #mainArea .blogListing .postSnippet p.postMeta, #mainArea .blogListing .postSnippet a.continueReading, #mainArea .blogListing .postSnippet a.postComments { } .noComments { background: url('../images/design/blog-icon-nocomment.png') 0 50% no-repeat !important; } /*------------------------------------------------------------------*/ /* Gallery layout */ /*------------------------------------------------------------------*/ #galleryViewer { position: relative; margin: 20px 10px 80px 0; } #stripeyBar { position: relative; bottom: 21px; left: 1px; height: 20px; width: 718px; background: url('../images/design/gallery-bottom-bar.gif') 0 0 no-repeat; } #galleryViewer #galleryViewerContainer { border: 1px solid #BBB; overflow: hidden; padding: 10px 10px 28px 10px; height: 260px; background: url('../images/design/gallery-main-panel-bg.png') 0 0 repeat-x; } #galleryViewer #slideContainer { overflow: hidden; position: absolute; top: 10px; left: 10px; width: 700px; height: 262px; } #slideContainer #gallerySlideBar { width: 10000px; height: 262px; position: relative; top: 0; left: 0; } #galleryViewer .gallerySlide { float: left; position: relative; margin: 0 13px 0 0; width: 697px; height: 262px; } #galleryViewer .gallerySlide h3 { position: absolute; z-index: 100; margin: 0; top: 0; left: 0; min-width: 160px; background: url('../images/design/gallery-title-end.png') 100% 0 no-repeat; color: white; font-size: 1.2em; padding: 0 12px 0 0; } #galleryViewer .gallerySlide h3 span { background: url('../images/design/gallery-title-middle.png') 0 0 no-repeat; padding: 0 0 0 15px; line-height: 2.2em; display: block; height: 31px; } .ie7 #galleryViewer .gallerySlide h3 span { padding-right: 20px; } #galleryViewer .gallerySlide .imgContainer { position: relative; width: 470px; height: 260px; float: left; margin: 2px 0 0 2px; } #galleryViewer .gallerySlide .slideInfo { width: 175px; float: left; margin: 2px 25px; } #galleryViewer .gallerySlide .slideInfo p { } #galleryViewer .gallerySlide .slideInfo ul { } #galleryViewer .gallerySlide .slideInfo ul li { margin: 0 0 5px 0; padding: 0 0 5px 20px; background: url('../images/design/gallery-list-icon.png') 0 4px no-repeat; } #galleryViewer #galleryNav { position: absolute; top: 261px; left: 28px; overflow: hidden; width: 436px; } #galleryViewer #galleryNavContainer { position: absolute; top: 251px; left: 18px; width: 436px; height: 60px; padding: 9px; border: 1px solid #BBB; background: url('../images/design/gallery-thumbnail-bar-bg.png') 0 0 repeat-x; } #galleryViewer #galleryNav #navSlideBar { width: 10000px; height: 60px; position: relative; top: 0; left: 0; } #galleryViewer #galleryNav #navSlideBar .panel { position: relative; float: left; margin: 0 9px 0 0; height: 60px; width: 80px; } #galleryViewer #galleryNav #navSlideBar .panel a { display: block; overflow: hidden; height: 60px; width: 80px; } #galleryViewer a.next, #galleryViewer a.prev { text-indent: -99999px; position: absolute; top: 125px; display: block; width: 40px; height: 40px; border: 1px solid #bbbbbb; } #galleryViewer a.next { right: -16px; background: url('../images/design/arrow_orange_next.png') 50% 50% no-repeat #fff; } #galleryViewer a.prev { left: -16px; background: url('../images/design/arrow_orange_prev.png') 50% 50% no-repeat #fff; } .activeThumbMask { position: absolute; top: 0; left: 0; width: 80px; height: 60px; background: url('../images/design/gallery-thumb-active.png') 0 0 no-repeat; } /*------------------------------------------------------------------*/ /* Booking form layout */ /*------------------------------------------------------------------*/ #bookingContent { margin: 0 0 40px 0; overflow: hidden; } #bookingContent input[type=text] { border: 1px solid #bbbbbb; padding: 3px; text-align: center; } #bookingForm { background: #E6E6E6; } #formOptions { float: left; width: 94%; padding: 3%; } #bookingTimeSelector { } #bookingTimeSelector .ui-datepicker-trigger { cursor: pointer; } .pinkLabel { color: #ca2d64; } #bookingTimeSelector .pinkLabel, #dayToBook .selector, #monthToBook .selector, .monthToBook .selector, #yearToBook .selector { float: left; margin: 0 15px 0 0; } #bookingTimeSelector .pinkLabel { line-height: 2em; } #dayToBook .selector { width: 55px; } .monthToBook .selector, #monthToBook .selector { width: 105px; } #yearToBook .selector { width: 71px; } #dayToBook .selector, #monthToBook .selector, .monthToBook .selector, #yearToBook .selector, #adultTicketType .selector, #over12TicketType .selector, #between9and11TicketType .selector, #between6and8TicketType .selector, #over3TicketType .selector, #under1TicketType .selector { text-align: center; } /* START: select box tidy up - so it's not too messy before the js plugin styles them */ #selectDay, #selectMonth, #selectYear { float: left; margin: 0 24px 0 0; } #selectDay { width: 55px !important; } #selectMonth { width: 88px !important; } #selectYear { width: 68px !important; } #adultTicket, #over12Ticket, #between9and11Ticket, #between6and8Ticket, #over3Ticket, #between1and2Ticket, #under1Ticket { float: right; width: 55px !important; } /* END: select box tidy up - so it's not too messy before the js plugin styles them */ #bookingTicketType > span { display: block; margin: 0 0 5px 0; } #adultTicketType { border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -o-border-radius: 5px 5px 0 0; } #under1TicketType { border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -o-border-radius: 0 0 5px 5px; } #adultTicketType, #over12TicketType, #between9and11TicketType, #between6and8TicketType, #over3TicketType, #between1and2TicketType, #under1TicketType { overflow: hidden; padding: 5px; } #over12TicketType, #between6and8TicketType, #between1and2TicketType { background: #D7D7D7; } #adultTicketType, #between9and11TicketType, #over3TicketType, #under1TicketType { background: #f0efef; } #adultTicketType label, #over12TicketType label, #between9and11TicketType label, #between6and8TicketType label, #over3TicketType label, #between1and2TicketType label, #under1TicketType label { float: left; display: block; width: 369px; line-height: 2em; position: relative; } #adultTicketType label, #over12TicketType label, #between9and11TicketType label, #between6and8TicketType label, #over3TicketType label, #between1and2TicketType label, #under1TicketType label, #donation label, #voucherCode label, #giftAid label { cursor: default; } .ticketPrice span em { font-style: normal; } #adultTicketType .selector, #over12TicketType .selector, #between9and11TicketType .selector, #between6and8TicketType .selector, #over3TicketType .selector, #between1and2TicketType .selector, #under1TicketType .selector { float: right; width: 55px; } #adultTicketType label span, #over12TicketType label span, #between9and11TicketType label span, #between6and8TicketType label span, #over3TicketType label span, #between1and2TicketType label span, #under1TicketType label span { display: block; position: absolute; top: 0px; right: 0px; } #donation { overflow: hidden; margin: 10px 0 20px 0; } #donationAmount { width: 60px; } #donation span { display: block; width: 413px; } #donation label { width: 143px; } #donation input { width: 60px; } #donation span, #donation label, #donation input { float: left; } #donation span, #donation label { padding: 0 29px 0 0; } #voucherCode { width: 377px; float: left; } #voucher { margin: 0 0 0 40px; width: 146px; } #updateBasket { float: right; width: 143px; height: 24px; border: none; background: url('../images/design/booking-update-btn.png') 0 50% no-repeat; padding: 0 0 0 14px; text-align: left; font-size: 1.1em; color: #CB2E65; line-height: 1.6em; } #basketTotal { clear: both; display: block; padding: 20px 0 0 0; font-size: 2em; text-align: right; } #basketTotal em { font-style: normal; } #giftAid { float: left; width: 94%; padding: 0 3% 20px 3%; } #giftAid img { width: 100%; height: auto; } #giftAid p { margin: 0 0 15px 0; } #giftAid input[type=checkbox] { cursor: pointer; } #checkout { float: right; width: 183px; height: 24px; border: none; background: url('../images/design/booking-checkout-btn.png') 0 50% no-repeat; padding: 0 0 0 14px; margin: 15px 0 0 0; text-align: left; font-size: 1.1em; color: #CB2E65; line-height: 1.6em; } /*------------------------------------------------------------------*/ /* Purchase tickets */ /*------------------------------------------------------------------*/ #bookingSummary, #custName, #custAddress, #custPayment { background: #E6E6E6; width: auto; margin: 20px 0; padding: 20px; } #custPayment { position: relative; } #bookingSummary > p, #custName > span , #custAddress > span , #custPayment > span { display: block; margin: 0 0 5px 0; font-weight: bold; } #bookingSummary > div, #custName > div, #custAddress > div, #custPayment > div { overflow: hidden; position: relative; padding: 5px; background: #F0EFEF; } #bookingSummary > div.darkGreyBg, #custName > div.darkGreyBg, #custAddress > div.darkGreyBg, #custPayment > div.darkGreyBg { background: #D7D7D7 !important; } #bookingSummary > div.first, #custName > div.first, #custAddress > div.first, #custPayment > div.first { border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -o-border-radius: 5px 5px 0 0; } #bookingSummary > div.last, #custName > div.last, #custAddress > div.last, #custPayment > div.last { border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -o-border-radius: 0 0 5px 5px; } #custName > div label, #custAddress > div label, #custPayment > div label { cursor: default; } #bookingSummary > div p, #custName > div label, #custAddress > div label, #custPayment > div label, #custAddress > div > span, #custPayment > div > span { float: left; display: block; width: 213px; line-height: 2em; } #bookingSummary > p { position: relative; } #bookingSummary > p.summaryLabel { float: left; width: 33%; font-weight: normal; } #bookingSummary > p.textCenter { text-align: center; } #bookingSummary > p.textRight { text-align: right; } #bookingSummary > p > span { display: block; position: absolute; top: 0px; right: 0px; } #bookingSummary > div p { padding: 0; position: relative; width: 50%; } #bookingSummary > div p { padding: 0; position: relative; width: 50%; } #bookingSummary > div p.quantity { width: 50%; text-align: right; } #bookingSummary > div p span { display: block; position: absolute; top: 0px; right: 0px; } #custAddress input[type="checkbox"] { float: left; margin: 5px 10px 0 0; } #custAddress > div label.singleLine { width: auto; } .formGoBack { float: left; height: 24px; padding: 0px 30px 0 9px; margin: 17px 0 0 0; text-decoration: none; line-height: 1.4em; font-size: 1.2em; color: #CA2D64 !important; background: url('../images/design/signup_btn.png') 0 100% no-repeat; } .formGoBack:hover { text-decoration: none; } #purchaseForm input[type="text"] { float: left; border: 1px solid #BBB; padding: 3px 8px; } #purchase { float: right; width: 183px; height: 24px; border: none; background: url('../images/design/booking-checkout-btn.png') 0 50% no-repeat; padding: 0 0 0 14px; margin: 15px 0 0 0; text-align: left; font-size: 1.1em; color: #CB2E65; line-height: 1.6em; } .key { clear: both; text-align: right; padding: 0; } .requiredField { color: #CB2E65; } .cvvHelper { display: inline-block !important; cursor: pointer; position: absolute; left: 47px; width: 25px !important; text-align: center; font-weight: bold; } #cvvHelperContainer { display: none; width: 200px; height: 70px; background: #E6E6E6 !important; border-radius: 5px; border: 1px solid #bbbbbb; position: absolute !important; top: 117px; left: 95px; } #cvvHelperContainer img { float: left; margin: 0 10px 0 0; } #cvvHelperContainer p { color: #ca2d64; } /* VALIDATION CSS */ #purchaseForm label.error { position: absolute !important; right: 10px !important; top: 5px !important; margin: 0 0 0 10px !important; width: auto !important; font-weight: bold; color: #CB2E65; } #purchaseForm label.success { color:#48A635 !important; } #purchaseForm .monthToBook label.error { display: none !important; } #bookingForm label.error, #bookingForm label.success { clear: both; float: right; font-size: 1em; font-weight: bold; text-align: right; color: #CB2E65 !important; } /*------------------------------------------------------------------*/ /* Contact form */ /*------------------------------------------------------------------*/ .cform #sendbutton, .cform #sendbutton2 { cursor: pointer !important; width: 143px; height: 24px; border: none; background: url('../images/design/booking-update-btn.png') 0 50% no-repeat; padding: 0 0 0 41px; text-align: left; font-size: 1.1em; float:right; color: #CB2E65; line-height: 1em; } #commentform #submit { width: 143px; height: 24px; border: none; background: url('../images/design/booking-update-btn.png') 0 50% no-repeat; text-align: left; font-size: 1.1em; color: #CB2E65; line-height: 1.6em; } #commentform label.error { display:block; clear:both; margin-top:5px; color:#E01123; } .cform { clear:both; } .cform .cf-sb { width:455px } .cf_info { width:330px; text-align: right; } .cf_info span { float:right; margin-bottom:20px; } .cf_info.failure span { color:#CB2E65; font-weight: bold; font-style: italic; } .cf_info.success { color: #7EBD32; width: 385px; margin: 45px 0; font-weight: bold; font-style: italic; font-size: 1.2em; } .cform li { margin:10px 0 !important; list-style-type: none !important; } .linklove { display:none; } .cform li span { margin-left:10px; color:#999; } .cform li span.emailreqtxt, .cform li span.reqtxt { display: block; margin: 5px 0 15px 96px;} .cform label { font-size: 1em; vertical-align:top; padding-top:6px; text-align:right; margin: 0 15px 0 0; width:80px; display:inline-block; } .ie8 .cform label { width:70px; } .cform label span { color: #CA2D64; } .cform .single, .cform .area, .cform #comment { border: 1px solid #BBB; font-size:1.1em; padding: 7px; width: 300px; } .cform .area { width: 300px; } .cform .single.cf_error, .cform .area.cf_error { border:1px solid #CB2E65; background-color: #F6F5F5; } #usermessage2a ol, #usermessagea ol {display:none;} /*------------------------------------------------------------------*/ /* post comments form */ /*------------------------------------------------------------------*/ .blogSinglePost { } #blogContent { background: url('../images/design/blog-divider.gif') 0% 100% no-repeat; margin: 0 10px 25px 0; padding: 0 10px 45px 10px; } p.postMeta { text-align: right; margin: 15px 0 0 0; } #respond { border-top: 1px solid #C2C2C2; margin: 60px 0 0 0; } h3#comments, #respond h3 { margin: 15px 0; font-size: 1.5em; color: #CB2E65; line-height: 1.6em; padding: 8px 0 0 40px; background: url('../images/design/blog-icon-entry.png') 0px 6px no-repeat; } #commentform { margin: 0 40px; } #commentform #author, #commentform #email, #commentform #url, #commentform #comment { padding: 8px; border: 1px solid #C4C1C1; } #commentform #author, #commentform #email, #commentform #url { width: 400px; } #commentform #author { } #commentform #email { } #commentform #url { } #commentform #comment { width: 583px; } #respond #commentform #submit { float: right; margin: 15px 47px 15px 0; } h3#comments { } #commentform label.error { font-weight: bold; color: #CB2E65; } /*------------------------------------------------------------------*/ /* post comments listings */ /*------------------------------------------------------------------*/ .commentlist { } .commentlist li { margin: 0 0 30px 0; } .commentlist li a { } .comment-author { font-weight: bold; } .comment-author a { color: #CB2E65 !important; } .comment-author a:hover { text-decoration: underline; } .comment-author, .comment-meta { margin: 0 0 10px 0; } #cancel-comment-reply { margin: 0 0 10px 40px; font-size: 1.2em; } /*------------------------------------------------------------------*/ /* share pictures form */ /*------------------------------------------------------------------*/ /* .cform { background: none; width: auto; border: none; border-radius: 0; } */ /*------------------------------------------------------------------*/ /* Mobile ONLY */ /*------------------------------------------------------------------*/ #backToTop { position: relative; margin: 20px 0 0 0; border-top: 1px solid #BBB; } #backToTop a { display: block; padding: 5px 0; margin-bottom: 5px; border-bottom: 1px solid #BBB; } #backToTop a span { color: #0068B8; padding-left: 33px; font-style: italic; background: url('../images/design/mobile/back_to_top_btn.jpg') 0 0 no-repeat; margin-left: 18px; height: 26px; display: block; line-height: 2.4em; } #backToTop #searchFormContainer { position: static; padding: 5px 17px; margin-bottom: 20px; border-bottom: 1px solid #BBB; } /*------------------------------------------------------------------*/ /* IE fixes */ /*------------------------------------------------------------------*/ .ie7 #quickLinks ul li img { text-align: center; margin: 0 0 -3px 0; } .ie7 #quickLinks ul li.last img { margin: 0 0 -3px -11px; } .ie7 #searchSubmit { font-size: 0; color: #7EBD32; } /*------------------------------------------------------------------*/ /* Caption fixes */ /*------------------------------------------------------------------*/ .wp-caption.alignright { float: right; margin-left: 10px; } .wp-caption.alignleft { float: left; margin-right: 10px; } /*------------------------------------------------------------------*/ /* Donate template */ /*------------------------------------------------------------------*/ #donateForm { clear: both; margin: 20px 11px 20px 0; } #donateFormOptions { float: right; overflow: hidden; background: #E6E6E6; width: 94%; padding: 20px; } #donateFormOptions h3 { clear: both; font-size: 1.5em; color: #cb2e65; margin: 25px 0 10px 0; float: left; } #donateFormOptions p { clear: both; } #donateFormOptions span { display: block; margin: 10px 0 30px 0; } #donateFormOptions label { float: right; margin: 20px 10px 0 0; } #donateFormOptions #donationAmount { width: 204px; float: right; margin: 15px 30px 0 0; } #donateFormOptions #donate { float: left; width: 143px; height: 24px; border: none; background: url('../images/design/booking-update-btn.png') 0 50% no-repeat; padding: 0 0 0 20px; text-align: left; font-size: 1.1em; color: #CB2E65; line-height: 1.6em; margin: 20px 0 0 0; float: right; } .giftAidOptionsBox { overflow: hidden; border: 1px solid #cb2e65; padding: 20px 15px 10px 15px; margin: 20px 15px; } .giftAidOptionsBox input { float: left; margin: 3px 7px 0 0; clear: both; } .giftAidOptionsBox label { width: 87%; margin: 4px 30px 15px 0 !important; float: left !important; }