/********************************************************* media queries **********************************************************/ /*------------------------------------------------------------------*/ /* mobile menu fix for desktop version */ /*------------------------------------------------------------------*/ @media screen and (min-width: 1024px) { #upperContainer { background: none; } #dropDownMenu,#subdropDownMenu { display: none !important; } } /*------------------------------------------------------------------*/ /* tablet */ /*------------------------------------------------------------------*/ @media screen and (min-width: 768px) and (max-width: 960px) { #upperContainer { background: none; } #dropDownMenu, #subdropDownMenu { display: none !important; } #siteContainer { min-width: 768px; } #headertools, #footerContactContainer { width: 768px; } /* header */ #headerContainer { background: url('../images/design/tablet/header_logo_bg.png') 50% 0% no-repeat; } #maintopnavD { left: 9px; width: 750px; background: url('../images/design/tablet/top_nav_bg.jpg') 0 0 no-repeat; } #maintopnavD ul { width: 750px; } #maintopnavD ul li a span { padding: 4px 6px; } #maintopnavD ul li.lastMenu a span { padding: 4px 0px 0px 6px; } #breadcrumbnav { font-size: 0.95em; } #maintopnavD ul li div.home div.greyImg, #maintopnavD ul li div.home div.colourImg { left: 2px; } #maintopnavD ul li div.about div.greyImg, #maintopnavD ul li div.about div.colourImg { left: 17px; } #maintopnavD ul li div.visit div.greyImg, #maintopnavD ul li div.visit div.colourImg { left: 5px; } #maintopnavD ul li div.involved div.greyImg, #maintopnavD ul li div.involved div.colourImg { left: 28px; } #maintopnavD ul li div.happening div.greyImg, #maintopnavD ul li div.happening div.colourImg { left: 50px; } #maintopnavD ul li div.experts div.greyImg, #maintopnavD ul li div.experts div.colourImg { left: 34px; } #maintopnavD ul li div.services div.greyImg, #maintopnavD ul li div.services div.colourImg { left: 11px; } #maintopnavD ul li div.schools div.greyImg, #maintopnavD ul li div.schools div.colourImg { left: 16px; } #maintopnavD ul li div.play div.greyImg, #maintopnavD ul li div.play div.colourImg { left: 10px; } /* footer */ #footerPanels { width: 750px; min-height: 417px; } #whiteEmailPanel { top: 66px; right: 21px; width: 203px; height: 200px; } #footerSocialSignup { margin: 0 0 0 -375px; width:710px; padding: 20px 20px 120px 20px; } #footerTwitterPanel, #footerSocialPanel, #footerSignupPanel { width: 203px; } .panelHeading { font-size: 1.2em; } #twitterContainer { min-height: 116px; } #twitterBirds { top: 266px; } #twitBird1 { top: 10px; left: -2px; } #twitBird2 { top: -27px; left: 13px; } #twitBird3 { top: 3px; left: 167px; } #socialBtns li { margin: 0 5px 10px 0; } #partnerLogos li { margin-right: 27px; } #signUp #signupEmail { width: 153px; } #footerlinksD { margin: 0 0 0 -384px; width: 768px; background: url('../images/design/tablet/footer_banner.png') 50% 0 no-repeat; } /* .footerKid { right: 169px; top: -153px; width: 127px; height: 164px; background: url('../images/design/tablet/footer_kid.png') 0 0 no-repeat; } */ .footerKid { display: none; } #footerbacktotop { margin: 0 0 0 14px; width: 112px; } .ie9 #footerbacktotop { width: 112px; } #footerbacktotop a.rocketBtn { text-indent: -99999px; width: 54px; height: 37px; background: url('../images/design/tablet/back_to_top_btn.png') 0 0 no-repeat; } #rocketShip { top: -42px; left: 63px; } #rocketShadow { top: 14px; left: 62px; } #footerbacktotop a.rocketLink { float: none; position: absolute; left: 51px; top: 22px; margin: 0; } .footerLinksList { margin-right: 15px; padding-top: 19px; } .footerLinksList li { font-size: 0.9em; } #rocketFinger { left: -4px; } #footerImage { min-width: 768px; } #footerImage.home { background: url('../images/design/tablet/page_footer_home.png') 50% 100% no-repeat; } #footerImage.about { background: url('../images/design/tablet/page_footer_about.png') 50% 100% no-repeat; } #footerImage.visit { background: url('../images/design/tablet/page_footer_visit.png') 50% 100% no-repeat; } #footerImage.involved { background: url('../images/design/tablet/page_footer_involved.png') 50% 100% no-repeat; } #footerImage.happening { background: url('../images/design/tablet/page_footer_happening.png') 50% 100% no-repeat; } #footerImage.expert { background: url('../images/design/tablet/page_footer_expert.png') 50% 100% no-repeat; } #footerImage.service { background: url('../images/design/tablet/page_footer_services.png') 50% 100% no-repeat; } #footerImage.schools { background: url('../images/design/tablet/page_footer_schools.png') 50% 100% no-repeat; } #footerImage.play { background: url('../images/design/tablet/page_footer_play.png') 50% 100% no-repeat; } #animationContainer { width: 750px; } /* animation elements */ /* home / default footer */ #anim_windmill { display: block; position: absolute; top: 57px; right: 219px; width: 29px; height: 29px; } /* about us footer */ #about_elephant, #about_music { position: absolute; } #about_elephant { top: 80px; right: 117px; width: 64px; height: 115px; } #about_music { top: 104px; right: 146px; width: 40px; height: 43px; } /* visit us footer */ #visit_car { position: absolute; top: 90px; right: 162px; width: 156px; height: 210px; } /* get involved footer */ #digi_screen { top: 130px; right: -6px; width: 142px; height: 104px; } /* happening footer */ #happening_cloud { position: absolute; top: 58px; right: -9px; width: 271px; height: 71px; } /* expertise footer */ #palm_tree { position: absolute; bottom: 60px; right: 57px; width: 136px; height: 172px; } /* services footer */ #service_bug, #service_butterfly { position: absolute; } #service_bug { bottom: 20px; right: 123px; width: 207px; height: 95px; } #service_butterfly { top: 91px; right: 268px; width: 82px; height: 81px; } /* schools footer */ #schools_orby, #schools_rocket { position: absolute; } #schools_orby { top: 110px; right: 202px; width: 30px; height: 61px; } #schools_rocket { top: 56px; right: 26px; width: 80px; height: 58px; } /* play footer */ #play_face, #play_lights, #play_belly { position: absolute; } #play_face { top: 92px; right: 143px; width: 39px; height: 19px; } #play_lights { top: 115px; right: 5px; width: 100px; height: 26px; } #play_belly { top: 126px; right: 139px; width: 47px; height: 26px; } /*---- ARCHIVE ----*/ /* play footer */ /* #play_flash, #play_arm { position: absolute; } #play_flash { top: 79px; right: 129px; width: 46px; height: 46px; } #play_arm { top: 120px; right: 173px; width: 47px; height: 52px; } */ /* about footer */ /* #about_dancer, #about_music { position: absolute; } #about_dancer { top: 110px; right: 41px; width: 63px; height: 100px; } */ /* homepage template */ #heroArea { margin: 0 auto; width: 768px; height: 444px; background: url('../images/design/tablet/latest_divider_bar.png') 50% 96% no-repeat; } #heroContentsContainer { padding: 30px 0 0 13px; } #heroFrameDetail { background: none; } #heroCarousel { width: 440px; height: 320px; } #desktopSlideshow .carouselContent { width: 420px; height: 218px; } #desktopSlideshow .carouselContent img { width: 420px; height: 218px; } .slideDesc { bottom: -100px; width: 407px; padding: 15px 15px 30px 15px; height: 73px; background: url('../images/design/tablet/home_carousel_banner_bg.gif') 0 0 repeat-x; } .slideDesc span { font-size: 1.6em; } .slideBtn { bottom: -118px; } .latestContentBox .imgContainer { width: 214px; height: 83px; } #quickContact { margin: 0; } #latestScroll { top: 397px; left: 265px; } #latest { width: 750px; } .latestContentBox { width: 226px; } #latest ul li { padding: 0 12px 0 0; } #latest ul li a.latestMoreLink { width: 210px; } #trafficDivider { width: 768px; } #quickLinks { width: 750px; } #quickLinks ul li { width: 174px; padding: 0 18px 0 0; } #quickLinks ul li img.behind { left: 35px; } #quickLinks ul li.last img { margin: 0 0 0 -11px !important; } .ie7 #quickLinks ul li.last img { margin: 0 0 -3px -11px !important; } .linkContent { padding: 8px 0 12px 20px; width: 154px; height: 35px; background: url('../images/design/tablet/home_page_btn_bg.png') 0 0 no-repeat; } #quickLinks ul li .btnImgContainer { width: 174px; } /* what's happening template */ #breadcrumbnav, #innerContentContainer { width: 768px; } #mainArea { width: 508px; margin-left: 20px; margin-right: 10px; } #mainArea h2 { background-position: -220px 25px; } #sideArea { width: 230px; } #featured { width: 100%; } #featured .imgContainer img { width: 100%; height: auto; } #mainArea ul.desktop { padding: 8px; width: 98%; margin: 0 0 20px 0; } #mainArea ul.desktop li { display: inline-block; margin: 0 0 2px 3px; background: url('../images/design/tablet/contact_btn_small-new.png') 0 0 no-repeat; width:241px; } .ie7 #mainArea ul.desktop li { display:inline; } #mainArea ul.desktop li a.opening { padding: 10px 0px 18px 9px; } #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: 1px; right: 20px; } #mainArea ul.desktop li a.disability img { top: 6px; right: 26px; } #mainArea ul.desktop li a.contact img { top: 8px; right: 16px; } /* mainArea general */ #mainArea img { max-width: 496px; height: auto; } /* Gallery page */ #pageContent { width: 337px; } #mainArea ul.singleBtn { width: auto !important; } #mainArea ul.singleBtn li { margin: 0 !important; } #galleryViewer { margin: 0px 10px 20px 13px; width: 492px; } #galleryViewer #galleryViewerContainer { height: 498px; background: url('../images/design/tablet/gallery-main-panel-bg.png') repeat-x 0px 0px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; behavior:url(PIE.htc); } #galleryViewer #slideContainer { width: 473px; height: 500px; } #slideContainer #gallerySlideBar { height: 500px; } #galleryViewer .gallerySlide { width: 470px; height: 500px; } #galleryViewer .gallerySlide .slideInfo { clear: both; margin: 75px 25px 0 25px; width: 420px; } #stripeyBar { display: none; } #ActivityBox { clear: both; width: auto; margin: 25px 0 0 0; } #ActivityBox h3, #ActivityBox p { float: left; } #ActivityBox p { width: 308px; margin: 0 0 0 10px; } /* Events page */ #mainArea table caption { height: 81px; } #mainArea table caption #calNextPrev { padding: 45px 0 0 0; } #mainArea table caption form { top: 10px; } .eventsListingInDate .dateIndicator { width: 90px; } .eventsListingInDate .groupOfPosts { width: 408px; } .eventsListingInDate .newsListing { width: 100%; } /* team profile page */ .teamMemberPhoto { padding: 5px; } .teamMemberPhoto .teamMemberPhotoMask { height: 140px; width: 120px; } .teamMemberPhoto .blue, .teamMemberPhoto .green, .teamMemberPhoto .hotpink, .teamMemberPhoto .orange, .teamMemberPhoto .pink, .teamMemberPhoto .red, .teamMemberPhoto .teal, .teamMemberPhoto .yellow { background: none; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; behavior:url(PIE.htc); } .teamMemberPhoto .blue { border: 5px solid #0168b7; } .teamMemberPhoto .green { border: 5px solid #4aad38; } .teamMemberPhoto .hotpink { border: 5px solid #cb2e65; } .teamMemberPhoto .orange { border: 5px solid #ee7b22; } .teamMemberPhoto .pink { border: 5px solid #b42b85; } .teamMemberPhoto .red { border: 5px solid #DF1223; } .teamMemberPhoto .teal { border: 5px solid #01a29d; } .teamMemberPhoto .yellow { border: 5px solid #fff205; } #teamProfiles > li > p.nameTitle { margin: 10px 0 0 0; } #teamProfiles > li > p { width: 324px; } /* blog page */ #mainArea .blogListing { background: none; border-bottom: 5px dashed #4AAD38; padding: 0 0 20px 0; margin: 0 10px 25px 0; } #mainArea .blogListing h3 { background: none; padding: 8px 0 0 0; } #mainArea .blogListing > p { margin: 5px 0 15px 0; } #mainArea .blogListing > a { width: 150px; height: 177px; margin: 0 20px 0 0px; } #mainArea .blogListing .postSnippet { width: 320px; } /* booking page */ #formOptions { width: 460px; } #bookingTimeSelector .pinkLabel, #dayToBook .selector, #monthToBook .selector, #yearToBook .selector { margin: 0 29px 0 0; } #donation label { width: 150px; } #giftAid { width: 460px; padding: 20px; } #giftAid img { width: 180px; height: auto; float: right; margin: 0 0 20px 10px; } #giftAid p { margin: 0; } #donation { margin: 10px 0 10px 0; } #donation span, #donation label { padding: 0 10px 20px 0; } #over12TicketType label, #between9and11TicketType label, #between6and8TicketType label, #between3and5TicketType label, #under1TicketType label, #adultTicketType label, #over3TicketType label, #between1and2TicketType label, #under1TicketType label { width: 252px; } /* forms */ /* share photo */ .cform .cf-sb { width: 486px; } #custName > div label, #custAddress > div label, #custPayment > div label, #custAddress > div > span, #custPayment > div > span { width: 206px; } /* blog comment form */ #commentform #author, #commentform #email, #commentform #url, #commentform #comment { width: 400px; } #commentform #submit { margin: 15px 10px 15px 0; } /* Donate template */ #donateForm { margin: 20px 11px 0px 0; } #donate { margin: 18px 0 0 0; } #donateFormOptions { width: 92%; } } /*------------------------------------------------------------------*/ /* mobile */ /*------------------------------------------------------------------*/ @media screen and (max-width: 767px) { .desktop { display: none; } .mobile { display: block; } #upperContainer { background: url('../images/design/body_header_bg.gif') 0 0 repeat-x; } #siteContainer { background: none; margin: 0 auto; max-width: 550px; width: 100%; overflow: hidden; } #headertools, #footerContactContainer { width: 100%; margin: 0 auto; } /* header */ #headerContainer { height: auto; background: url('../images/design/mobile/header_logo_bg.png') 0% 0% no-repeat; } #headertools { overflow: visible; min-height: 125px; } #headerlogo { position: relative; float: left; top: 16px; left: 10px; text-indent: -99999px; background: url('../images/design/mobile/logo_eureka.png') 0 0 no-repeat; } #headerlogo a { width: 122px; height: 33px; } #searchForm input[type=text] { width: 118px; } #supportContainer { float: right; top: 3px; right: 0px; z-index: 100; width: 128px; height: 56px; background: url('../images/design/mobile/toolbar_support_bg.png') 0 0 no-repeat; } #supportContainer a { margin: 28px 0 0 15px; color: #fff; background: url('../images/design/white_arrow.png') 85% 50% no-repeat; } #supportContainer a span.supportTitle { font-size: 1.2em; padding-right: 8px; } #supportContainer a span.supportDesc { display: none; } #supportContainer #balloonBanner { display: none; } #maintopnavM.mobile { position: relative; clear: both; top: 51px; left: 0; margin: 0 5px; width: auto; height: 41px; background: none; } #subnavM.mobile { position: relative; clear: both; width: auto; height: 41px; background: none; } #maintopnavM.mobile > ul, #subnavM.mobile > ul { width: 100%; padding-top: 0; } #maintopnavM.mobile > ul > li, #subnavM.mobile > ul > li { position: relative; float: left; list-style-type: none; border-right: none; border-left: none; } #maintopnavM.mobile > ul > li a.firstMenu, #subnavM.mobile > ul > li a.firstMenu { border-left: none; } #maintopnavM.mobile > ul > li a.lastMenu, #subnavM.mobile > ul > li a.lastMenu { border-right: none; } #maintopnavM.mobile > ul > li > a, #subnavM.mobile > ul > li > a { margin: 9px 0; padding: 0; font-size: 1.1em; color: #393838; border-right: 1px solid #CCC; border-left: 1px solid #fff; text-align: center; height: 24px; line-height: 2em; } #maintopnavM.mobile > ul > li a:hover, #subnavM.mobile > ul > li a:hover { color: #98499c; text-decoration: none; } #maintopnavM.mobile > ul > li > div, #subnavM.mobile > ul > li > div { position: absolute; top: -48px; overflow: hidden; height: 40px; width: 100%; left: 0; } #maintopnavM.mobile > ul > li > span, #subnavM.mobile > ul > li > span { width: 100%; height: 40px; background: white; display: block; position: absolute; top: 20px; } /* top nav icons - normal state */ #maintopnavM.mobile ul li span.home, #subnavM.mobile ul li span.home { background: url('../images/design/grey_top_nav_icon_home.png') 50% 0 no-repeat; } #maintopnavM.mobile ul li span.about, #subnavM.mobile ul li span.about { background: url('../images/design/grey_top_nav_icon_about.png') 50% 0 no-repeat; } #maintopnavM.mobile ul li span.visit, #subnavM.mobile ul li span.visit { background: url('../images/design/grey_top_nav_icon_visit.png') 50% 0 no-repeat; } #maintopnavM.mobile ul li span.involved, #subnavM.mobile ul li span.involved { background: url('../images/design/grey_top_nav_icon_involved.png') 50% 0 no-repeat; } #maintopnavM.mobile ul li span.happening, #subnavM.mobile ul li span.happening { background: url('../images/design/grey_top_nav_icon_happening.png') 50% 0 no-repeat; } #maintopnavM.mobile ul li span.expert, #subnavM.mobile ul li span.expert { background: url('../images/design/grey_top_nav_icon_expertise.png') 50% 0 no-repeat; } #maintopnavM.mobile ul li span.services, #subnavM.mobile ul li span.services { background: url('../images/design/grey_top_nav_icon_services.png') 50% 0 no-repeat; } #maintopnavM.mobile ul li span.schools, #subnavM.mobile ul li span.schools { background: url('../images/design/grey_top_nav_icon_schools.png') 50% 0 no-repeat; } #maintopnavM.mobile ul li span.play, #subnavM.mobile ul li span.play { background: url('../images/design/grey_top_nav_icon_play.png') 50% 0 no-repeat; } /* top nav icons - active state */ #maintopnavM.mobile ul li span.homeActive, #subnavM.mobile ul li span.homeActive { top: 13px; background: url('../images/design/top_nav_icon_home.png') 50% 0 no-repeat !important; } #maintopnavM.mobile ul li span.aboutActive, #subnavM.mobile ul li span.aboutActive { background: url('../images/design/grey_top_nav_icon_about.png') 50% 0 no-repeat; } #maintopnavM.mobile ul li span.visitActive, #subnavM.mobile ul li span.visitActive { background: url('../images/design/grey_top_nav_icon_visit.png') 50% 0 no-repeat; } #maintopnavM.mobile ul li span.involvedActive, #subnavM.mobile ul li span.involvedActive { background: url('../images/design/grey_top_nav_icon_involved.png') 50% 0 no-repeat; } #maintopnavM.mobile ul li span.happeningActive, #subnavM.mobile ul li span.happeningActive { background: url('../images/design/grey_top_nav_icon_happening.png') 50% 0 no-repeat; } #maintopnavM.mobile ul li span.expertActive, #subnavM.mobile ul li span.expertActive { background: url('../images/design/grey_top_nav_icon_expertise.png') 50% 0 no-repeat; } #maintopnavM.mobile ul li span.servicesActive, #subnavM.mobile ul li span.servicesActive { background: url('../images/design/grey_top_nav_icon_services.png') 50% 0 no-repeat; } #maintopnavM.mobile ul li span.schoolsActive, #subnavM.mobile ul li span.schoolsActive { background: url('../images/design/grey_top_nav_icon_schools.png') 50% 0 no-repeat; } #maintopnavM.mobile ul li span.playActive, #subnavM.mobile ul li span.playActive { background: url('../images/design/grey_top_nav_icon_play.png') 50% 0 no-repeat; } /* MOBILE */ #maintopnavM.mobile ul li.firstItem, #subnavM.mobile ul li.firstItem { width: 20%; background: url('../images/design/mobile/top_nav_bg_left.png') 0 0 no-repeat; } #maintopnavM.mobile ul li.secondItem, #subnavM.mobile ul li.secondItem { width: 60%; background: url('../images/design/mobile/top_nav_bg_middle.png') 0 0 repeat-x; } #maintopnavM.mobile ul li.thirdItem, #subnavM.mobile ul li.thirdItem { width: 20%; background: url('../images/design/mobile/top_nav_bg_right.png') 100% 0 no-repeat; } #maintopnavM.mobile ul li.secondItem > a, #subnavM.mobile ul li.secondItem > a { background: url('../images/design/mobile/top_nav_arrow.png') 14% 16% no-repeat; } #maintopnavM.mobile ul li.thirdItem a, #subnavM.mobile ul li.thirdItem a { position: relative; text-indent: -99999px; overflow: visible; background: url('../images/design/mobile/top_nav_search.png') 50% 50% no-repeat; } #dropDownMenu { display: none; height: auto; margin: 0 7px 53px 5px; clear: both; position: relative; top: 45px; } #subdropDownMenu { display: none; height: auto; margin: 0 7px 0 5px; clear: both; position: relative; } #menuItems, #submenuItems { padding: 30px 0 0 0; border: 1px solid #d0d0d0; overflow: hidden; background: url('../images/design/mobile/top_nav_bg.gif') 0 0 repeat-x #fff; } #menuItems li, #submenuItems li { float: left; width: 33%; } #menuItems li a, #submenuItems li a { padding: 51px 0 0 0; display: block; height: 45px; color: #393838; text-align: center; font-size: 1.2em; } #menuItems li a:hover, #submenuItems li a:hover { color: #98499c; text-decoration: none; } #menuItems li a.home, #submenuItems li a.home { background: url('../images/design/top_nav_icon_home.png') 50% 13% no-repeat; } #menuItems li a.about, #submenuItems li a.about { background: url('../images/design/top_nav_icon_about.png') 50% 0 no-repeat; } #menuItems li a.visit, #submenuItems li a.visit { background: url('../images/design/top_nav_icon_visit.png') 50% 15% no-repeat; } #menuItems li a.involved, #submenuItems li a.involved { background: url('../images/design/top_nav_icon_involved.png') 50% 10% no-repeat; } #menuItems li a.happening, #submenuItems li a.happening { background: url('../images/design/top_nav_icon_happening.png') 50% 0 no-repeat; } #menuItems li a.expert, #submenuItems li a.expert { background: url('../images/design/top_nav_icon_expertise.png') 50% 10% no-repeat; } #menuItems li a.services, #submenuItems li a.services { background: url('../images/design/top_nav_icon_services.png') 50% 0 no-repeat; } #menuItems li a.schools, #submenuItems li a.schools { background: url('../images/design/top_nav_icon_schools.png') 50% 19% no-repeat; } #menuItems li a.play, #submenuItems li a.play { background: url('../images/design/top_nav_icon_play.png') 50% 12% no-repeat; } #menuItems li div, #submenuItems li div { } #menuItems li div span, #submenuItems li div span { display: block; width: 50px; height: 40px; } #cloud1, #cloud2, #cloud3 { display: none; } /* footer */ #footerContainer { position:relative; min-height: 900px; padding:0px 0 0; color: #666; background: none;} #footerPanels { display: none; } #footerSocialSignup { position: relative; left: auto; top: auto; margin: 0 auto -113px auto; padding: 20px 0 11px 0; width: 100%; background: #E6E6E6; } #mobileFooterImage { position: relative; height: 95px; } #mobileFooterImage.mobHome { background: url('../images/design/mobile/page_footer_home.png') 50% 100% no-repeat; } .panelHeading { padding-bottom: 5px; margin-bottom: 20px; font-size: 1.2em; color: #6d6e71; border-bottom: 1px solid #bbbbbb; } #footerTwitterPanel, #footerSocialPanel, #footerSignupPanel { width: auto; float: none; } #footerTwitterPanel { margin: 0 20px 0 20px;} #footerSocialPanel, #footerSignupPanel { margin: 0 20px 20px 20px; } #twitterContainer { width: 94%; padding: 15px 3%; } #twitterBirds { position:relative !important; top:-56px !important; width: 179px; height: 104px; background: url('../images/design/twitter_birds.png') 0 0 no-repeat; left: -10px; } #twitBird1, #twitBird2, #twitBird3 { display: none !important; } #socialContainer { padding-bottom: 5px; margin-bottom: 20px; border-bottom: 1px solid #BBB; } #socialBtnContainer { max-width: 335px; margin: 0 auto; } #socialBtns { padding: 0; margin: 0; border: none; } #socialBtns li { float: left; margin: 0 5px 10px 0; } #signUpFormContainer { padding: 20px 20px 90px 20px; min-height: 85px; background: #fff; } #signUp #signupEmail { width: 100%; border: 1px solid #b0b0b1; height: 20px; padding: 0 0 0 8px; background-color: #fff; } #partnerLogoContainer { max-width: 203px; margin: 0 auto; } #partnerLogos li { float: left; margin-right: 27px; } .ie8 #footerImage {height:600px;} .ie8 #footerSignupPanel {margin:30px 10px 10px 10px;} .ie8 #footerSocialPanel {margin:10px 10px 40px 10px;} .footerKid { left: 32px; top: -98px; width: 90px; height: 116px; background: url('../images/design/mobile/footer_kid.png') 0 0 no-repeat; } #footerbacktotop { margin: 12px 0 0 14px; float: left; width: 112px; } #footerbacktotop a.rocketBtn { text-indent: -99999px; width: 24px; height: 26px; background: url('../images/design/mobile/back_to_top_btn.jpg') 0 0 no-repeat; } #rocketShip { left: 63px; top: -42px; z-index: 100; width: 41px; height: 60px; background: url('../images/design/back_to_top_spaceship.png') 0 0 no-repeat; } #rocketShadow { left: 62px; top: 14px; z-index: 50; width: 43px; height: 6px; background: url('../images/design/back_to_top_shadow.png') 0 0 no-repeat; } #rocketFinger { top: 44px; left: -4px; width: 94px; height: 61px; background: url('../images/design/back_to_top_hand.png') 0 0 no-repeat; } /* MOBILE VERSION */ #footerlinksM.mobile { width: 100%; position: relative; top: -24px; background: none; height: auto; margin: 0; left: 0; bottom: 0; } #footerlinksM.mobile #footerDetails li { width: 50%; height: 45px; float: left; padding: 11px 0 0 0; font-style: italic; } #footerlinksM.mobile #footerDetails li.firstItem { background: url('../images/design/mobile/footer_banner_left.png') 0 0 no-repeat; } #footerlinksM.mobile #footerDetails li.secondItem { text-align: right; background: url('../images/design/mobile/footer_banner_right.png') 100% 0 no-repeat; } #footerlinksM.mobile #footerDetails li.firstItem span { padding-left: 33px; 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; line-height: 2.8em; font-size: 0.9em; } #footerlinksM.mobile #footerDetails li.secondItem span { padding-right: 20px; line-height: 2.8em; font-size: 0.9em; } #footerlinksM.mobile #linkListContainer { width: 100%; margin: 0 auto; } #footerlinksM.mobile .footerLinksList { max-width: 304px; margin: 0 auto; text-align: center; padding: 0; position: static; overflow: visible; } #footerlinksM.mobile .footerLinksList li { float: none; display: inline; padding: 0 5px; border-right: 1px solid #666; font-style: italic; } #footerlinksM.mobile .footerLinksList li.last { border-right: none; display: block; } /* homepage */ #heroFrameDetail { background: none; margin: 0; } #heroArea { margin: 0; padding: 0; width: 100%; height: auto; background: url('../images/design/tablet/latest_divider_bar.png') 50% 96% no-repeat; } #heroContentsContainer { position: relative; padding: 0; width: auto; height: auto; } /* .iOS #heroCarouselContainer { padding-bottom: 40%; } */ #heroCarousel { position: relative; clear: left; float: none; margin: 7px 0 25px 0; width: auto; height: auto; padding-bottom: 95px; } #desktopSlideshow .slide { width: 100%; } #desktopSlideshow .carouselContent { margin: 0 16px; width: auto; height: auto; background: #fff; } #desktopSlideshow .carouselContent img { width: 100%; height: auto; } #desktopSlideshow .slideDesc { position: relative; bottom: auto; left: auto; z-index: 100; margin: -23px 3px 0 3px; width: auto; padding: 15px 15px 30px 15px; height: 60px; border: 1px solid #bbbbbb; background: url('../images/design/tablet/home_carousel_banner_bg.jpg') 0 100% repeat-x; } #desktopSlideshow .slideDesc p { display: none; } #carouselNav { right: 33px; } a.next { right: 0px; background: url('../images/design/arrow_orange_next.png') 50% 50% no-repeat #fff; } a.prev { left: 0px; background: url('../images/design/arrow_orange_prev.png') 50% 50% no-repeat #fff; } .slideBtn { position: absolute; bottom: -18px; right: 12px; z-index: 110; background: url('../images/design/homepage_carousel_link_btn.png') 0 0 no-repeat; } /* Gallery page */ #mobGalleryViewer { position: relative; width: auto; height: auto; margin: 7px 10px 25px 10px; } #mobGalleryViewer img.mobResponsiveImage { width: auto!important; height: auto!important; visibility: hidden; margin: 0 !important; } #mobSlideContainer { position: relative; border: 1px solid #BBB; overflow: hidden; padding: 10px 10px 28px 10px; background: url('../images/design/tablet/gallery-main-panel-bg.png') repeat-x 0px 0px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; behavior: url(PIE.htc); } #mobSlideContainer .mobGallerySlide { width: auto; margin: 10px; } #mobSlideContainer .mobGallerySlide .mobImgContainer { width: 100%; height: auto; margin: 2px 0 0 2px; } #mobSlideContainer .mobGallerySlide .mobImgContainer img { width: 100%; height: auto; } #mobSlideContainer .mobGallerySlide .mobSlideInfo { width: auto; margin: 15px 25px 0 25px; } #mobSlideContainer .mobGallerySlide .mobSlideInfo ul li { padding: 0 0 5px 20px; background: url('../images/design/gallery-list-icon.png') 0 4px no-repeat; } #mobSlideContainer .mobGallerySlide h3 { position: absolute; margin: 0; top: 0; left: 0; min-width: 160px; background: url('../images/design/gallery-title-end.png') 100% 0 no-repeat; color: #fff; font-size: 1.2em; padding: 0 12px 0 0; } #mobSlideContainer .mobGallerySlide 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; } #mobSlideContainer .mobGallerySlide p.mobPageIntro { padding: 0 0 20px 0; color: #CA2E65; font-size: 1.2em; } #mobGalleryViewer a.mobNext, #mobGalleryViewer a.mobPrev { text-indent: -99999px; position: absolute; top: 125px; z-index: 100; display: block; width: 40px; height: 40px; border: 1px solid #BBB; } #mobGalleryViewer a.mobNext { right: -16px; background: url('../images/design/arrow_orange_next.png') 50% 50% no-repeat #fff; } #mobGalleryViewer a.mobPrev { left: -16px; background: url('../images/design/arrow_orange_prev.png') 50% 50% no-repeat #fff; } /* What's happening template */ #breadcrumbnav ul { float: none !important; padding: 10px 0 20px 10px;} #breadcrumbnav, #innerContentContainer { width: auto; padding: 0 7px; display: block; } #breadcrumbnav p, #breadcrumbnav ul li.last, #breadcrumbnav ul li a { font-size: 0.9em; } #mainArea { width: auto; float: none; display: block; } #sideArea { width: 95%; margin: 3%; float: none; } #featuredWrapper { width: 100%; background: none; float: none; padding: 0; margin: 0 auto; } #featured { } #featured .featuredDesc { margin: 0; width: auto; height: auto; } #featured .imgContainer { width: auto; margin: 5px 5px 0 5px; } #featured .imgContainer img { width: 100%; height: auto; } #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; } #mainArea .slideDesc { height: auto; padding: 10px; } .ie7 #featured .slideDesc { width: 95%; } #maintopnavM,#subnavM { display: block; top: 0; } #sideArea .quoteBox, #subAreas, #breadcrumbnav .print, #breadcrumbnav .share { display:none; } #mainArea ul.desktop { display:none; } /* #footerImage.home, #footerImage.about, #footerImage.visit, #footerImage.involved, #footerImage.happening, #footerImage.expert, #footerImage.service, #footerImage.schools, #footerImage.play { background: url('../images/design/mobile/page_footer_home.png') 50% 100% no-repeat; } */ /* blog page */ #mainArea .blogListing { background: none; border-bottom: 5px dashed #4AAD38; padding: 0 0 20px 0; margin: 0 10px 25px 10px; } #mainArea .blogListing h3 { background: none; padding: 8px 0 0 0; } #mainArea .blogListing > p { margin: 5px 0 15px 0; } #mainArea .blogListing > a { margin: 0 20px 0 0; width: 30%; height: auto; } #mainArea .blogListing .postSnippet { width: 100%; float: none; } /* booking template */ #formOptions { float: none; width: auto; } #giftAid { overflow: hidden; float: none; width: auto; } #giftAid img { max-width: 239px; height: auto; float: right; margin: 0 0 20px 10px; } /* page extras section */ #pageExtras { margin: 0; } #relatedArticles { margin: 0 0 12px 0; width: 100%; } #relatedArticles ul > li { width: 46%; margin: 0 4% 0 0; } #relatedArticles ul > li.last { margin: 0 !important; } #relatedArticles ul > li a { width: 93%; } #ActivityBox { clear: both; float: none; width: auto; } /* team profile page */ .teamMemberPhoto { padding: 5px; width: 22%; height: auto; } .teamMemberPhoto .teamMemberPhotoMask { height: 91%; width: 91%; } .teamMemberPhoto .blue, .teamMemberPhoto .green, .teamMemberPhoto .hotpink, .teamMemberPhoto .orange, .teamMemberPhoto .pink, .teamMemberPhoto .red, .teamMemberPhoto .teal, .teamMemberPhoto .yellow { background: none; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; behavior:url(PIE.htc); } .teamMemberPhoto .blue { border: 5px solid #0168b7; } .teamMemberPhoto .green { border: 5px solid #4aad38; } .teamMemberPhoto .hotpink { border: 5px solid #cb2e65; } .teamMemberPhoto .orange { border: 5px solid #ee7b22; } .teamMemberPhoto .pink { border: 5px solid #b42b85; } .teamMemberPhoto .red { border: 5px solid #DF1223; } .teamMemberPhoto .teal { border: 5px solid #01a29d; } .teamMemberPhoto .yellow { border: 5px solid #fff205; } #teamProfiles > li > p.nameTitle { margin: 10px 0 0 0; } #teamProfiles > li > p { width: 67%; } /* Listing Content page */ #twoColumn { overflow: visible; } #pageContent { width: auto; float: none; } /* booking page template */ #bookingTimeSelector { overflow: hidden; margin: 0 0 20px 0; } #bookingTimeSelector .pinkLabel { float: none; } #dayToBook .selector { width: 21% !important; } #monthToBook .selector { width: 39% !important; } #yearToBook .selector { width: 26% !important; margin: 0; } #bookingTimeSelector .ui-datepicker-trigger { display: none; } #over12TicketType label, #between9and11TicketType label, #between6and8TicketType label, #between3and5TicketType label, #under1TicketType label, #adultTicketType label, #over3TicketType label, #between1and2TicketType label, #under1TicketType label { width: 53%; padding: 0 50px 0 0; } #donation span { float: none; width: 100%; padding: 0; margin: 0 0 10px 0; } #donation label { width: 75%; padding: 0; } #donation input { width: 22%; padding: 0; } #voucherCode { float: none; width: 100%; margin: 0 0 20px 0; overflow: hidden; } #voucherCode label { width: 72%; float: left; } #voucherCode input { width: 25%; float: left; margin: 0; } #bookingSummary > div p { width: 33%; padding: 0 65px 0 0; } #bookingSummary > div p.quantity { width: 39%; text-align: right; padding: 0; } /* events listing template */ .calendar-table caption #calNextPrev, .calendar-table tbody, .calendar-table tfoot { display: none; } .calendar-table caption { height: 75px; } .calendar-table caption form { position: relative; margin: 0 auto; right: auto; top: 36px; overflow: hidden; width: 50%; } .calendar-table caption form #months { width: 46% } .calendar-table caption form #years { width: 34%; } .calendar-table caption form #calSubmit { float: right; } .eventsListingInDate .dateIndicator { width: 30%; } .eventsListingInDate .groupOfPosts { width: 70%; } .eventsListingInDate .newsListing { width: 100%; } #quickContact { clear: left; float: none; width: auto; margin: 20px 5px 20px 5px; height: 216px; background: none; } /* MOBILE VERSION OF QUICK CONTACT MENU */ #quickContact ul.mobile, #bottomMenu ul.mobile { padding: 10px 15px; margin:20px 0 20px 0; background: #7ebd32; } #quickContact ul.mobile li, #bottomMenu ul.mobile li { width: 100%; margin: 0 0 5px 0; } #quickContact ul.mobile li a, #bottomMenu ul.mobile li a { display: block; height: 44px; padding-right: 22px; background: url('../images/design/mobile/contact_btn_right.png') top right no-repeat; font-size: 1.4em; color: #CB2E65; cursor: pointer; } #quickContact ul.mobile li a > span, #bottomMenu ul.mobile li a > span { display: block; height: 46px; background: url('../images/design/mobile/contact_btn_left.png') 0 0 no-repeat; } #quickContact ul.mobile li a span span.ticketsIcon, #bottomMenu ul.mobile li a span span.ticketsIcon { background: url('../images/design/mobile/quick_info_icon_tickets.png') 98% 50% no-repeat; height: 40px; display: block; } #quickContact ul.mobile li a span span.openingIcon, #bottomMenu ul.mobile li a span span.openingIcon { background: url('../images/design/mobile/quick_info_icon_opening.png') 99% 50% no-repeat; height: 40px; display: block; } #quickContact ul.mobile li a span span.disabledIcon, #bottomMenu ul.mobile li a span span.disabledIcon { background: url('../images/design/mobile/quick_info_icon_disabled.png') 98% 50% no-repeat; height: 40px; display: block; } #quickContact ul.mobile li a span span.contactIcon, #bottomMenu ul.mobile li a span span.contactIcon { background: url('../images/design/mobile/quick_info_icon_contact.png') 100% 50% no-repeat; height: 40px; display: block; } #searchForm input[type="text"] {width:60%;} #quickContact ul.mobile li a span span span, #bottomMenu ul.mobile li a span span span { line-height: 2.4em; padding: 0 10px 0 14px; } #quickContact ul.mobile li a:hover, #bottomMenu ul.mobile li a:hover { text-decoration: none; color: #bc2a59; } #latestScroll { position: static; margin: 0 auto; width: 241px; height: 47px; background: url('../images/design/scroll_bg.png') 0 0 no-repeat; } /* latest section */ #latest { margin: 20px auto; width: 100%; } #latest ul { overflow: hidden; margin: 5px; } #latest ul li { clear: left; float: none; padding: 0; margin: 0 0 10px 0; width: 100%; } .latestContentBox { overflow: hidden; width: 100%; height: auto; margin: 10px 0 0 0; padding: 0; } .latestContentBox p { padding: 10px 0 0 0; color: #fff; } .latestContentBox p.date, .latestContentBox p.description { float: left; width: 61%; } .latestContentBox p.date { margin: 0 10px 0 0; font-style: italic; font-size: 1em; } .latestContentBox p.description { margin: 0 10px 10px 0; } .latestContentBox .imgContainer { float: left; margin: 10px; width: 20%; height: auto; padding: 5px; background: #fff; border: 1px solid #bbbbbb; } .latestContentBox .imgContainer img { width: 100%; height: auto; } .latestContentBox .textContainer { float: left; width: 61%; margin: 0 10px 10px 0; } /* traffic divider */ #trafficDivider { margin: 30px auto; width: 100%; height: 51px; } /* quick links section */ #quickLinks { margin: 30px auto; width: 100%; } /* MOBILE VERSION OF QUICK CONTACT MENU */ #quickLinks ul.mobile { padding: 99px 0 0 0; background: url('../images/design/mobile/home_page_btns_top_img.png') 50% 0 no-repeat; } #quickLinks ul.mobile li { width: 100%; margin: 0 0 5px 0; } #quickLinks ul.mobile li a { display: block; height: 35px; padding-right: 33px; background: url('../images/design/mobile/home_page_btn_bg_right.png') top right no-repeat; font-size: 1.4em; color: #bc2a59; cursor: pointer; } #quickLinks ul.mobile li a > span { display: block; height: 35px; background: url('../images/design/mobile/home_page_btn_bg_left.png') 0 0 no-repeat; } #quickLinks ul.mobile li a span { line-height: 1.8em; padding: 0 10px 0 12px; } #quickLinks ul.mobile li a span span { font-family: 'Arial', san-serif; color: #666666; } #quickLinks ul.mobile li a:hover { text-decoration: none; } /* Mobile contact form */ #cformsform label { display:block; text-align:left; margin-bottom:10px; } #cformsform #sendbutton { float:left; margin-left:40px; } .linklove a { float:left; margin-left:40px; } .cf-ol { margin-left:0; padding-left:30px; } #cformsform li span { display: block; margin-top: 7px; } /* share photo form */ .cform .cf-sb { width: auto; margin: 0 88px 0 0; } .cform .single, .cform .area { width: 60%; } /* blog comment form */ #commentform #author, #commentform #email, #commentform #url, #commentform #comment { width: 95%; } #respond #commentform #submit { margin: 15px 0px 15px 0; } /* donate template */ #donateForm { margin: 20px 0; } #donateFormOptions { width: 90%; padding: 5%; } #donateFormOptions label { margin: 4px 0 0 0; }#donateFormOptions #donationAmount { width: 97%; margin: 22px 0 5px 0; padding: 1.5%; } #donateFormOptions #donate { float: right; } .giftAidOptionsBox label { width: 72%; } } /*------------------------------------------------------------------*/ /* smaller screens fixes */ /*------------------------------------------------------------------*/ @media screen and (max-width: 530px) { .calendar-table caption form { width: 60%; } } @media screen and (max-width: 520px) { #giftAid img { width: 40%; } } @media screen and (max-width: 460px) { .teamMemberPhoto .teamMemberPhotoMask { height: 89%; width: 89%; } .calendar-table caption form { width: 70%; } } @media screen and (max-width: 440px) { .articleSnippet img { float: none; margin: 0px 0px 10px 0px !important; } } @media screen and (max-width: 420px) { #mainArea h2 { background-position: 100% 80%; } a.next, a.prev { top: 50px; } #desktopSlideshow .slideDesc span { font-size: 1.6em; } } @media screen and (max-width: 400px) { #mainArea .blogListing { margin: 0 10px 25px 10px; } #mainArea .blogListing > a { float: none; margin: 0 auto; text-align: center; display: block; width: 60%; } #mainArea .blogListing .postSnippet { float: none; width: 100%; } .eventsListingInDate .groupOfPosts .articleSnippet a img { width: 95%; height: auto; } .articleSnippet .newsItemText { clear: both; } .articleSnippet > a { width: auto; float: none; } } @media screen and (max-width: 372px) { #quickLinks ul.mobile li a span span { display: none; } #socialBtns li { margin: 0 1px 10px 0; } #partnerLogos li { margin-right: 20px; } #carouselNav { display: none; } .teamMemberPhoto .teamMemberPhotoMask { height: 87%; width: 87%; } } @media screen and (max-width: 367px) { #quickLinks ul.mobile li a span span { display: none !important; } .calendar-table caption form { width: 86%; } } @media screen and (max-width: 360px) { #relatedArticles ul > li { float: none; width: 100%; margin: 0 0 20px 0; } } @media screen and (max-width: 340px) { #mainArea .contentTextList { margin: 10px 0 20px 10px; } } @media screen and (max-width: 317px) { .teamMemberPhoto .teamMemberPhotoMask { height: 84%; width: 84%; } } @media screen and (max-width: 300px) { .slideshow.mobile .slideDesc { width: 86%; } .slideshow.mobile .slideDesc span { font-size: 1.8em; } #mainArea h2 { background-position: 100% 94%; } }