/*---------------------------------------------------------------------- [Master Stylesheet] Desc: resets all, contains styles for global and shared assets Copyright: Great Fridays 2010 Client: Emma Watson Project: Emma Watson official Created by: Adam Foster Date created: 04 - 03 - 10 -----------------------------------------------------------------------*/ /* NOTE: no colour specific styles here please! -----------------------*/ /* RESET ALL STYLES ---------------------------------------------------*/ * { margin: 0; padding: 0; text-indent: 0; border:0 none; outline:0; list-style:none; line-height:1; font-size:100%; border-collapse:collapse; border-spacing:0; quotes:none; background:transparent; vertical-align: baseline; font-weight: normal; } :focus, a { outline: none !important; } .clearfix { width: auto; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clear { clear: both; } /* GENERAL SHARED STYLES ----------------------------------------------*/ html { overflow-y: scroll; } body { color: #000; font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; line-height: 16px; background: #fff; } h1, h2, h3, h4, h6 { font-size: 100%; font-weight: normal; } h2 { text-transform: uppercase; font-size: 20px; color: #000; padding-bottom: 16px; } .cufon-active h2 { font-size: 24px; } .cufon-active #mainContent h2 { margin-top: -5px; padding-bottom: 16px; line-height:23px; } h3 { text-transform: uppercase; padding-bottom: 2px; line-height: 12px; } h4 { text-transform: uppercase; font-size: 16px; line-height: 16px; } h5 { line-height: 18px; text-transform: uppercase; padding-bottom: 18px; } h6 { line-height: 18px; } p { padding: 0 0 16px 0; margin: 0; font-size: 12px; line-height: 16px; } img { margin: 0; padding: 0; border: 0 none; vertical-align: bottom; } strong { font-weight: bold; line-height: 16px; } em { line-height: 16px; } ul { padding: 0 0 16px 0; margin: 0; } ul li { margin: 0; padding: 0; list-style-type: none; line-height: 16px; } small { margin: 0; padding: 0; font-size: 80%; line-height: 12px; } dl { padding: 0 0 16px; margin: 0; font-size: 12px; line-height: 16px; } dt { display: inline; float: left; clear: left; } dd { margin: 0; padding: 0; } abbr, acronym { cursor: help; } q { font-style: italic; } q:before { content: no-open-quote; content: ""; } q:after { content: no-close-quote; content: ""; } a { text-decoration: none; } a:hover { color: #000; } .selected a, a.selected { color: #000!important; } form {} button, input, textarea, select { font-size: 100%; font-family: Georgia, "Times New Roman", Times, serif; line-height: 16px; } button { cursor: pointer; } table { border-collapse: collapse; border: 0; border-spacing: 0; font-size: 100%; vertical-align: top; } caption, td, th { text-align: left; font-size: 100%; font-weight: normal; } /* GLOBAL SHARED STYLES -----------------------------------------------*/ #emma { width: 100%; max-width: 1600px; margin: 0 auto; z-index: 101; position: relative; min-width: 990px; } #wrapper { padding: 0 30px; overflow: hidden; } /* - header */ #headerWrapper { position: relative; width: 100%; max-width: 1600px; min-width: 960px; height: 60px; background: #fff; z-index:101; } #headerContent { min-width: 960px; background: #fff; margin-left: 30px; } #logo { float: left; } #logo a { height: 40px; width: 157px; display: block; text-indent: -9999px; background: url(Images/logo-emma-watson.png) no-repeat 30px 20px; padding: 20px 30px 0; } /* -- navigation */ ul#siteNavigation { float: right; width: auto; margin: 0 45px 0 0; padding: 0; } ul#siteNavigation li { float: left; } ul#siteNavigation li a { font-size: 14px; line-height: 20px; text-transform: uppercase; font-weight: bold; height: 40px; padding: 17px 9px 3px 9px; background: url(Images/div-site-nav.gif) no-repeat 0 29px; display: block; letter-spacing: -1px; } .cufon-active ul#siteNavigation li a { font-size: 18px; } ul#siteNavigation li.selected { background: url(Images/div-site-nav-li.gif) no-repeat center 45px; } ul#siteNavigation li:first-child a { background: 0 none; } ul#siteNavigation li a:hover { color: #000; } /* - section header - */ #sectionHeader { width: 100%; height: 0; padding-bottom: 62%; float: left; margin-right: -100%; } #sectionHeader.higherLevelHeader { position: relative; z-index: 2; } #sectionHeader + #pageContent { padding-top: 20.6%; } /* only target #pageContent when it has #sectionHeader above */ /* - main */ #pageContent { overflow: hidden; min-width: 930px; position: relative; } #pageContent.minimalPage { background: url('Images/bg-main-large.jpg') no-repeat 100% 0%; } #mainContent { background: url(Images/bg-main.jpg) no-repeat top right; padding: 30px 0 30px; position: relative; min-height: 279px; } #pageContent.minimalPage #mainContent, #pageContent.landingPage #mainContent { background: none; } .artworkOverlay { display: none; height: 318px; width: 259px; position: absolute; top: -60px; right: 0; z-index: 1; } /* - footer */ #footerWrapper { width: 100%; max-width: 1600px; min-width: 960px; height: 50px; z-index:100; background: #fff url(Images/bg-footer.gif) no-repeat top left; } #flashControls { float:left; margin-left:45px; display:none; } .js #flashControls { display:block; } #flashControls li { display:inline; } #flashControls .flashModeLink { display:inline-block; width:31px; height:18px; background-image:url(Images/flash-mode-buttons.gif); margin:17px 0 0 10px; } #flashControls #grill { background-position:0 18px; } #flashControls #grill.selected, #flashControls #grill:hover { background-position:0 36px; } #flashControls #grid { background-position:0 54px; } #flashControls #grid.selected, #flashControls #grid:hover { background-position:0 72px; } #flashControls #bigFullScreen { background-position:0 90px; } #flashControls #bigFullScreen.selected, #flashControls #bigFullScreen:hover { background-position:0 108px; } #flashControls #fullScreen { background-position:0 126px; } #flashControls #fullScreen.selected, #flashControls #fullScreen:hover { background-position:0 144px; } #footerContent { float: right; width: auto; padding: 0 45px 0 0; background: url(Images/footer-overlay.png) no-repeat top right; overflow: hidden; } ul#footerNavigation { float: left; padding: 0; } ul#footerNavigation li { float: left; } ul#footerNavigation li a { color: #707070; height: 30px; padding: 18px 10px 1px 12px; background: url(Images/div-footer-nav.gif) no-repeat 0 25px; display: block; } ul#footerNavigation li:first-child a { background: 0 none; } ul#footerNavigation li a:hover { color: #000; } ul#footerNavigation li a.addthis_button_compact .at300bs { background: none; width: 0; height: 0; } .socialNaviation { margin: 0 8px 0 0; float: left; background: url(Images/div-social-nav.gif) no-repeat right 21px; padding-right: 20px; } .socialNaviation li { background: url(Images/icons.png); padding: 1px; margin: 14px 0 0 8px; float: left; } .socialNaviation li a { height: 20px; width: 20px; display: block; text-indent: -9999px; background: url(Images/icons.png) no-repeat; } .socialNaviation li.facebookIcon a { background-position: 0 -32px; } .socialNaviation li.facebookIcon a:hover { background-position: -1px -364px; } .socialNaviation li.twitterIcon a { background-position: 0 -59px; } .socialNaviation li.twitterIcon a:hover { background-position: 0 -391px; } .socialNaviation li.youtubeIcon a { background-position: 0 -87px; } .socialNaviation li.youtubeIcon a:hover { background-position: 0 -419px; } .socialNaviation li.flickrIcon a { background-position: 0 -114px; } .socialNaviation li.flickrIcon a:hover { background-position: 0 -448px; } .socialNaviation li.mySpaceIcon a { background-position: 0 -307px; } .socialNaviation li.mySpaceIcon a:hover { background-position: 0 -587px; } .socialNaviation li.beboIcon a { background-position: 0 -335px; } .socialNaviation li.beboIcon a:hover { background-position: 1px -615px; } .socialNaviation li.friendIcon a { background-position: 0 -167px; } .socialNaviation li.friendIcon a:hover { background-position: 0 -475px; } .socialNaviation li.liveIcon a { background-position: 0 -223px; } .socialNaviation li.liveIcon a:hover { background-position: 0 -531px; } .socialNaviation li.diggIcon a { background-position: 0 -279px; } .socialNaviation li.delIcon a { background-position: 0 -195px; } .socialNaviation li.delIcon a:hover { background-position: 0 -503px; } .socialNaviation li.stumbleIcon a { background-position: 0 -251px; } .socialNaviation li.stumbleIcon a:hover { background-position: 0 -559px; } .footerSideBg { background: url(Images/bg-left-shadow.gif) no-repeat left bottom; position: absolute; bottom: 50px; left: 0; display: block; height: 935px; width: 30px; } .headerSideBg { height: 150px; width: 30px; background: url(Images/header-overlay.png) no-repeat top left; position: absolute; top: 60px; left: 0; display: block; } /* IMPORTANT SHARED STYLES ---------------------------------------------*/ .left { float: left!important; } .right { float: right!important; } .backLink { background: url(Images/bg-arrows.gif) no-repeat 0 -44px; padding-left: 13px; } .backLink span { background: #fff; padding-left: 4px; line-height: 16px; } .backLink:hover, .upLink:hover, .downLink:hover { background-color: #000; } /* GRID STYLES ---------------------------------------------------------*/ .row { width: 930px; overflow: hidden; z-index: 2; position: relative; } .minimalPage .row { min-width: 930px; width: 100%; } .col1, .col2, .col3, .col4, .col5, .col6, col7 { display:inline; float:left; position:relative; } .col1, .col2, .col3, .col5, .col6 { margin-left: 30px; } .col2 { width: 500px; } .col2_ext { width: 660px; } .col5 { width: 180px; } .col6 { width: 130px; } .col4 { width: 225px; } /* GLOBAL SHARED STYLES ------------------------------------------------*/ /* - banner */ .banner { position: relative; } .banner h1 { position: absolute; bottom: 30px; left: 30px; width: 32%; } .banner h1 span { display: none; } /* - second nav */ #secondNavigation { width: 100%; min-width:990px; } #secondNavigation ul { padding: 0 30px; position: relative; z-index: 2; } #secondNavigation ul li { float: left; } #secondNavigation ul li a { font-size: 14px; line-height: 14px; color: #fff; text-transform: uppercase; padding: 16px 10px 18px; background: url(Images/div-second-nav.gif) no-repeat 0 25px; display: block; } #secondNavigation ul li:first-child a { background: 0 none; padding-left: 0; } #secondNavigation ul li a:hover { color: #000; } /* - third nav - */ #thirdNavigation { margin: 0; padding: 0; } #thirdNavigation li { padding-bottom: 10px; padding-left: 0; list-style: none; } /* - sidebar */ .sideBar {} .sideBar .sidePanel { border-top: 1px solid #e0e0e0; padding-top: 17px; } .sideBar .sidePanel h5 { padding-bottom: 16px; } .sideBar .sidePanel:first-child { border: 0 none; padding: 0; } .sideBar .sidePanel img { padding-bottom: 10px; } .sideBar .sidePanel .cufon-canvas + img { margin-top: -16px; } /** Fixes empty cufon tag above images **/ /* - news list */ ul.newsList { padding-bottom: 0; } ul.newsList li { padding-bottom: 15px; } ul.newsList li h6 { line-height: 16px; } /* - listings - */ .listings { padding: 0 30px; width: 710px; } .listings > div { border-top: 1px solid #dddddd; padding: 30px 0 0 0; margin-top: 10px; } #mainContent .listings > div h2 { padding-bottom: 15px; } .listings > div:first-child { border-top: none; padding-top: 0; margin-top: 0!important; } .listings > div p { padding-bottom: 20px; } .listings > div p.date { margin-top: -15px; padding-bottom: 16px; } .listings > div.eventRow { border: 0 none; padding: 0; margin: 0; } .listings > div.eventRow p.date { float: left; width: 180px; margin:0; padding-top: 28px; } .listings > div.eventRow:first-child p.date { padding-top: 0; margin-top: -2px; } .eventRowRight { float: left; width: 500px; margin-left: 30px; padding: 30px 0 12px; border-top: 1px solid #dddddd; } .listings > div.eventRow:first-child .eventRowRight { border: 0; padding-top: 0; } .eventRowContent { } .listings > div.eventRow p { padding-bottom: 15px; } /* - article - */ .article { border-bottom: 1px solid #e0e0e0; margin: 20px 0 20px; padding: 0 0 6px 0; text-align: justify; } #mainContent .article h2 { padding-bottom: 2px; } .articleDate { display: block; margin-bottom: 16px; } .article ul li { list-style: disc inside; } .socialBookmarks { padding: 24px 0 18px; margin: 10px 0 -6px; border-top: 1px solid #e0e0e0; min-height: 70px; } .article .socialBookmarks ul { float: none; padding: 0; background: url("Images/div-social-nav.gif") no-repeat left 8px; margin: 0; } .article .socialBookmarks ul li { list-style: none; margin: 0 0 0 7px; } .article .socialBookmarks ul li:first-child { margin-left: 12px; } /* - minimal page - */ .minimalPage { } /* - standard form styles - */ .form { margin-top: 15px; } .form div { clear: both; padding: 0 0 10px 0; overflow: auto; } .form .input { margin-left: -20px; } .form .input > * { float: left; background: none no-repeat 8px 6px; } .form .input label { text-transform: uppercase; display: block; width: 120px; line-height: 16px; padding: 5px 5px 5px 20px; } .form .text input, .form .text textarea { background: #fff; border: 1px solid #e0e0e0; float: left; padding: 5px; display: block; width: 350px; } .form .text input:focus, .form .text textarea:focus { border-color: #000; } .form .submit button { display: block; padding-right: 10px; text-transform: uppercase; margin: 10px 0 10px auto; width: 300px; text-align: right; } .form .validationMessages { margin-left: auto; text-align: right; padding-right: 10px; } .form .validationMessages li { } .form .validationMessages li span { display: inline-block; background: none no-repeat 5px 5px; padding-left: 20px; line-height: 16px; } .form .remaining { text-align: right; display: block; float: none; padding: 12px 12px 0 0; clear: both; } .form .termsMessage { text-align: right; padding: 10px 12px 8px 155px; font-size: 11px; line-height: 14px; } /* - full screen backgrounds - */ /* .headerImage { padding-bottom: 20.6%; height: 0; } */ .fullScreenContent { position: relative; background: #fff; z-index: 3; } .minimalPage .fullScreenContent { background: transparent; } /* - header quotes - */ .headerQuote { width: 50%; position: absolute; right: 30px; top: 10px; padding-top: 30px; text-align: right; } .headerQuote h5 { padding-bottom: 0; padding-right: 50px; } .headerQuote p { padding-bottom: 0; padding-right: 50px; } .headerQuote blockquote { display: inline-block; *display: inline; padding-top: 10px; background: url('Images/headerquote_left.png') no-repeat 0 10px; padding-left: 45px; } .headerQuote blockquote p { display: inline-block; *display: inline; font-size: 18px; line-height: 22px; font-style: italic; background: url('Images/headerquote_right.png') no-repeat 100% 100%; } /* - WYSIWYG content - */ .wizzyContent h3 { padding-bottom: 20px; font-size: 16px; line-height: 16px; } /* TEMPLATE STYLES ------------------------------------------------------*/ /* - home page flash fallback template - */ #homeOuter { position: relative; min-height:575px; } #homeInner { position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; } .isWebkit #homeInner { height: 0; } #homePageContent { } #homePageContent > div, #homePageContent > ul { float: left; padding: 0; margin: 0; } #homePageContent > ul > li { float: left; } #homePageContent > ul > li#home1 { width: 100%; } #homePageContent > ul > li#home2 { width: 100%; } #homePageContent > ul > li#home3 { width: 77.75% } #homePageContent > ul > li#home4 { width: 22.25%; } #homePageContent > ul > li#home5 { width: 38.9%; margin-top: -1px; } #homePageContent > ul > li#home6 { width: 61.1%; margin-top: -1px; } #homePageContent > ul > li > img { display: block; } #homePageContent .sect1 { width: 15.6%; } #homePageContent .sect2 { width: 25.9%; background: #fff; height: 100%; } #homePageContent .sect2 h2 { margin-top: -80%; } #homePageContent .sect2 > .floral > img { position: absolute; z-index: 10; max-width: 475px; } #homePageContent .sect2 > .sect2_inner { padding: 180% 10% 0 10%; text-align: right; } #homePageContent .sect2 > .sect2_inner > h2 > img { max-width: 303px; } #homePageContent .sect2 > .sect2_inner > h5 { padding-bottom: 0px; } #homePageContent .sect2 > .sect2_inner > p.date { } #homePageContent .sect3 { width: 58.5%; } /* - horizontal listings template */ #mainContent.horzListingsTemplate { padding-left: 15px; } .horzListingsTemplate .row { width: 915px; } #mainContent.horzListingsTemplate h2 { padding: 0 0 15px 15px; } .horzListingsTemplate h4 { padding-bottom: 10px; } .horzListingsTemplate .linksHeader h4 { padding-bottom: 0; } .colContent { border-left: 1px solid #e0e0e0; padding: 0 15px 9999px; margin-bottom: -9999px; } .col4:first-child .colContent { border: 0 none; } .colContentHeader { padding: 20px 0 16px; } .colContentHeader + p { min-height: 150px; } .horzListingsTemplate ul.newsList { border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; padding: 15px 3px 0; margin-bottom: 16px; } .horzListingsTemplate ul.newsList li { padding-bottom: 15px; } ul.linksList { border-top: 1px solid #e0e0e0; padding: 15px 3px 0; } ul.linksList li { padding-bottom: 10px; } .rssIcon { background: url(Images/icons.png) no-repeat 0 -644px; display: block; padding: 2px 0 1px 20px; } /* - flat content template - */ .flatContentTemplate {} .flatContentTemplate .flatContentSections > div { border-top: 1px solid #ddd; padding-top: 30px; padding-bottom:17px; } .flatContentTemplate .flatContentSections > div:first-child { border-top: none; padding-top: 0; } .flatContentTemplate h4 { padding-bottom: 20px; } .flatContentTemplate dt { text-transform: uppercase; float: none; display: block; font-size: 12px; padding-bottom: 5px; } .flatContentTemplate dl { padding-bottom: 0; } .flatContentTemplate dd { padding-bottom: 20px; } .flatContentTemplate ol { margin-left: 20px; } .flatContentTemplate ol li { padding-left: 5px; list-style-type: decimal; padding-bottom: 15px; } .flatContentTemplate ul { padding-bottom: 0; margin-bottom: 0; } .flatContentTemplate ul li { padding-bottom: 5px; padding-left: 5px; list-style: inside disc; } .flatContentTemplate .additionalInfo ul li { padding-bottom: 20px; } .flatContentTemplate li ul { padding-top: 14px; } .flatContentTemplate li ul li { padding-bottom: 0; } .flatContentTemplate .col2 { text-align: justify; } .flatContentTemplate .articleDate { margin-top: -12px; font-style: italic; } /* - landing template - */ #mainContent.landingTemplate { padding: 0; position: relative;min-height: 0; } #mainContent.landingTemplate .col2_landing { float: left; z-index: 2; width: 33%;padding-top: 26px; margin-bottom: 26px; margin: 0; overflow: hidden; } #mainContent.landingTemplate .col2_landing h5 { padding-bottom: 14px; } .landingTemplate .col2_landing > div { padding: 0 30px; min-height: 100px; max-height: 125px; } .landingBlocks { width: 66%; background: #fff; float: right; } .landingBlocks > ul { padding: 0; margin: 0; overflow: hidden; } .landingBlocks > ul > li { float: right; display: inline; position: relative; width: 24%; *width: 24%; *margin-bottom: -3px; cursor: pointer; overflow: hidden; } .landingBlocks > ul > li > h6 { position: absolute; z-index: 10; bottom: 0; right: 0; text-transform: uppercase; background: #fff; padding: 5px; min-width: 50%; max-width:85%; } .landingBlocks > ul > li > h6 a { padding: 4px 5px; display: block; } .landingBlocks > ul > li:hover > h6 > a { color: #000; } .landingBlocks > ul > li > .mask { width: 100%; margin: 0%; display: block; position: relative; } .landingBlocks > ul > li > .mask img { display: block; position: relative; top: 0; width: 100%; } .landingBlocks > ul > li > .box { border: 5px solid; display: none; width: 100%; height: 100%; position: absolute; } .landingBlocks > ul > li > .boxL { top: 0; left: 0; border-top: 0px; } .landingBlocks > ul > li > .boxR { bottom: 0; right: 0; } /* - emma messages - */ .minimalPage_flexi { position: relative; padding-right: 30px; } .minimalPage_flexi .thirdNavigation { margin-left: 30px; padding:0; } .messagecontrols { width: 100%; margin-bottom: 20px; } .minimalPage_flexi .messagePag { position: absolute; top: -3px; right: 32px; } .minimalPage_flexi .pagBot { bottom: 0px; top:auto; right: 29px; } .mBack, .mNext { float: left; display: block; height: 18px; width: 19px; text-indent: -9999px; background: url(Images/Themes/bg-message-arrows.gif) no-repeat; } .minimalPage_flexi .messagePag span, .minimalPage_flexi .messagePag a { float: left; display: block; height: 18px; line-height:17px; } .mBack { background-position: 0 -34px; margin: 0 10px; } .mNext { background-position: 0 -86px; margin: 0 10px; } a.mBack { background-position: 0 1px; } a.mNext { background-position: 0 -51px; } a.mBack:hover { background-position: 0 -17px; } a.mNext:hover { background-position: 0 -69px; } span.sBack, span.sNext { color: #ccc; float: left; } .messagesTemplate ul.emmaMessages { padding-bottom: 34px; } .messagesTemplate ul.emmaMessages > li { width: 21%; float: left; display: inline; margin: 30px 0 0 30px; min-height: 150px; background: url('Images/tile-border.png') no-repeat 50% 100%; } .messagesTemplate ul.emmaMessages > li > p { font-style: italic; } .messagesTemplate .artworkOverlay { top: -40px; } .messagesTemplate h5 { padding-bottom: 0; } .viewMessagesUl { margin-bottom: 30px; padding: 0; } /* - general article template */ .articleTemplate {} #newsScroller { border-bottom: 1px solid #e0e0e0; margin-bottom: 18px; padding-bottom: 5px; position: relative; } #mask { position: relative;overflow: hidden;border-bottom: 1px solid #e0e0e0; margin-bottom: 18px; } #mask #newsScroller { border: 0; padding-bottom: 0; } .newsListPag { border-bottom: 1px solid #e0e0e0; padding: 0 0 18px 0; margin: 5px 0 18px; display: none; } .newsListPag .newsListInfo { float: left; } .newsListPag .newsListContols { float: right; } .newsListPag .newsListContols a { float: left; height: 13px; width: 18px; background-image: url(Images/bg-arrows.gif); display: inline-block; text-indent: -9999px; } .newsListPag .newsListContols a:first-child { border-right: 1px solid #e0e0e0; } .upLink { background-position: 0 1px; } .downLink { background-position: 4px -21px; } .newsListPag .newsListContols a.disabled { background-color: #E0E0E0; cursor: default; } /* - faqs template (also uses ".listings" as child) */ .faqsTemplate {} /* - events template (also uses ".listings" as child) */ .eventsTemplate {} /* - flow template (for stories and picturebooks) */ .flowTemplate {} .flowTemplate .row { padding-left: 30px; padding-top: 4px; } .flowTemplate .row > div { float: left; display: inline; } .flowTemplate .row > div.odd { width: 347px; clear: left; text-align: right; } .flowTemplate .row > div img { display: block; margin-bottom: 20px; margin-left: auto; } .flowTemplate .row > div.even { width: 510px; padding-left: 20px; } .flowTemplate .row > div.even img { margin-left: 0; } #mainContent.flowTemplate h2 { padding-bottom: 5px; text-transform: uppercase; } .cufon-active .flowTemplate h2 { margin-top: -5px; } /** fixing mashed line heights on cufon fonts **/ .flowTemplate h3 { padding-bottom: 15px; } /* - terms template - */ #mainContent.termsTemplate { padding: 0 0 60px; } .termsTemplate .listings { width: 710px; padding: 0; } .termsTemplate dl { overflow: auto; padding-bottom: 0; } .termsTemplate dl > dt { float: left; clear: left; width: 35px; line-height: 16px; } .termsTemplate dl > dd { float: left; width: 675px; margin: 0 0 20px 0; line-height: 16px; } .termsTemplate h4 { padding-bottom: 20px; } /* - error template - */ #mainContent.errorTemplate { padding-top: 0; margin-top: 0; padding-left: 30px; } #mainContent.errorTemplate h1 { font-size: 24px; font-variant: small-caps; padding-bottom: 30px; } #mainContent.errorTemplate ul { text-transform: uppercase; } #mainContent.errorTemplate h2 { padding-top: 30px; } /* - share track - */ #mainContent .shareTrack {margin: 14px 0 0; padding: 26px 0 20px 0; border-top: 1px solid #e4e4e4;} #mainContent .shareTrack .leftside {float: left; width: 120px; height: 120px; background-color: #000;} #mainContent .shareTrack .rightside {float: left; width: 360px; height: 120px; margin-left: 20px;} #mainContent .shareTrack h5 {padding-bottom: 16px;} #mainContent .shareTrack .rightside h5 {padding-bottom: 0px; margin-top: -4px;} #mainContent .shareTrack .rightside h6 { line-height: 13px; padding-bottom:12px;} #mainContent .shareTrack .rightside p.released {padding-bottom:32px;} #mainContent .shareTrack .rightside ul {padding:0 0 6px 0; text-transform: uppercase; width: 360px;} #mainContent .shareTrack .rightside ul li { float: left; list-style: none; background:url(Images/div-social-nav.gif) no-repeat scroll 0 4px transparent; display:block; padding:0 10px 0 12px;} #mainContent .shareTrack .rightside ul li:first-child { background:none; padding:0 10px 0 0;} #mainContent .shareTrack .rightside p.itunes {background:url(Images/itunes.gif); padding-bottom: 0; height:11px; width:45px; text-indent: -9999px;} /* SLIDESHOW --------------------------------------------------------------*/ #pageContent.slideshowTemplate { background: #eee url(Images/bg-slideshow.gif) repeat-y top; position: relative; overflow:visible; } #slideshowImg { position: relative; min-height: 478px; } .slideShowSpacer { width:100%; padding-bottom: 51.5%; height: 0; } #imgMask { overflow: hidden; position: relative; } #imgScroller { position: relative; } #imgScroller img { float: left; display: block; } #imgScroller #flashFallback { margin:-62px 0 0 -225px; height:125px; width:450px; text-align:center; position:absolute; top:50%; left:50%; } #flashFallback .fallbackHeader { font-size:24px; padding-bottom:10px; } #flashFallback .fallbackSubheader { font-size:16px; padding-bottom:30px; } #flashFallback .divider { background-image:url(Images/fallback-divider.gif); width:90px; height:1px; display:block; margin:0 auto 30px; } #flashFallback .getFlash { font-size:16px; } .js #imgScroller #flashFallback { display: none; } #imgScroller.videoScoller { position: absolute; top: 0; width: 100%; height: 100%; } #slideshowLoader { width: 100%; position: absolute; top: 0; height: 100%; display: none; z-index:107; } .loaderImg { position: absolute; top: 50%; left: 50%; padding: 18px; margin-top: -30px; margin-left: -30px; } .loaderImg span { display: block; height: 24px; width: 24px; } .loaderOverlay { background: #fff; width: 100%; height: 100%; display: block; position: absolute; top: 0; z-index: 106; display: none; } #slideShowOverlayCont { display: none;} #slideshowBar { position: relative; width: 100%; position: absolute; bottom: -29px; z-index: 111; } #slideshowBar > a { display: inline-block; background: url(Images/bg-slideshow-icons.gif) no-repeat 10px 12px; height: 5px; width: 6px; padding: 12px 11px; text-indent: -9999px; border-right: 1px solid; position: relative; z-index: 101; } .progressHolder { padding: 8px 0 9px; position: absolute; top: 0; width: 100%; z-index: 100; } #slideshowBar .pause { background-position: 10px -22px; } #slideshowBar .pause:hover { background-position: 10px -39px; } #slideshowBar .play { background-position: 10px -5px; } #slideshowBar .play:hover { background-position: 10px 13px; } .progressWrapper { margin: 0 15px 0 40px; } .progressTracks { width: 100%; height: 3px; display: inline-block; border: 1px solid; display: block; margin-top: 4px; } .progressBar { background-color: #327BA8; border-right: 1px solid; width: 0%; display: block; height: 3px; } .imgLeft, .imgRight { display: block; position: absolute; top: 50%; height: 9px; width: 20px; margin-top: -30px; padding: 26px 20px 25px 21px; z-index: 111; } .imgLeft span, .imgRight span { text-indent: -9999px; display: block; background: url(Images/bg-sildeshow-arrows.gif); width: 20px; height: 9px; } .imgLeft { left: 0; } .imgLeft span { background-position: -3px -59px; } .imgLeft:hover span { background-position: -3px -78px; } .imgRight { right: 0; } .imgRight span { background-position: -3px -97px; } .imgRight:hover span { background-position: -3px -116px; } #slideShowOverlay { position: absolute; bottom: -38px; left: 0; width: 100%; height: 156px; z-index: 150; overflow: hidden; display: none; } #slideShowOverlay .overlayContent { color: #fff; width: 100%; position: absolute; height: 156px; bottom: -156px; } #slideShowOverlay .overlayContent .right { width: 465px; } #slideShowOverlay .right { text-align: right; padding: 24px 30px 0 0; } #slideShowOverlay h2 { font-size: 18px; line-height: 20px; color: #fff; padding-bottom: 14px; } #slideShowOverlay a { color: #fff; } #slideShowOverlay a:hover { color: #000; } #slideShowOverlay p { padding-bottom: 14px; } #slideShowOverlay .credits { position: absolute; right: 30px; bottom: 20px; padding: 0;font-size: 11px; } #slideShowOverlay .credits span { background: url(Images/div-second-nav.gif) no-repeat 0 8px; padding-left: 10px; margin-left: 6px; } #slideShowOverlay .credits span:first-child { background: none; } #slideShowOverlay .credits div { background: url(Images/div-second-nav.gif) no-repeat 0 8px; padding-left: 10px; margin-left: 6px; display: inline; } #slideShowFooter { width: 100%; background: #fff; position: relative; z-index: 102; } #slideshowThumbs { margin: 0 auto; display:table; } #thumbsMask { width: auto; float: left; overflow: hidden; padding-bottom: 16px; height:41px; } #thumbsMask ul { display: none; } #thumbsMask ul li a { display: none; } .js #thumbsMask { width: 666px; } .js #thumbsMask ul { display: block; } #slideshowThumbs > span { background: url(Images/bg-slideshow-ends.gif); height: 39px; width: 86px; display: block; float: left; display: none; } .js #slideshowThumbs > span { display: block; } #slideshowThumbs ul { position: relative; padding: 0; } .js #slideshowThumbs ul { width: 99999px; background: url(Images/bg-slideshow-thumbs.gif) repeat-x top left; } #slideshowThumbs ul li { float: left; border-bottom: 3px solid #fff; height: 38px; width: 74px; overflow: hidden; } #slideshowThumbs ul li.selected { border-bottom: 3px solid; } #slideshowThumbs .rightEnd { background-position: -86px 0; } /*#thumbsMask .selected { display: block; height: 3px; width: 74px; height: 3px; position: absolute; top: 38px; left: 50%; margin-left: -37px; }*/ #slideshowNavigation { padding: 0 20px 22px 19px; position: relative; height:18px; } #slideshowNavigation ul { padding: 0; position: absolute; top: -4px; } .leftControls { left: 21px; } .rightControls { right: 20px; } #slideshowNavigation ul li { float: left; } #slideshowNavigation ul li a { text-transform: uppercase; font-size: 16px; background: url(Images/div-site-nav.gif) no-repeat 0 11px; padding: 0 10px 0 11px; } #slideshowNavigation ul li:first-child a { background: 0 none; } .imgInfoBox { display:none; margin:0 auto; } .js .imgInfoBox { display:table; } .imgInfoLeft, .imgInfoRight, .imgSkipLeft, .imgSkipRight { display: inline-block; height: 18px; width: 25px; text-indent: -9999px; background: url(Images/bg-sildeshow-arrows.gif) 0 -27px; margin: 0 10px 0 0; } .imgInfoRight { background-position: 0 -8px; margin: 0 0 0 10px; } .imgSkipLeft { background-position: 0 -161px; margin: 0; padding-right: 5px; display: none; } .imgSkipRight { background-position: 2px -142px; margin: 0; padding-left: 5px; display: none; } .imgInfoLeft:hover, .imgInfoRight:hover, .imgSkipLeft:hover, .imgSkipRight:hover { background-color: #000; } .imgInfoLeft.disabled, .imgInfoRight.disabled { background-color: #E0E0E0!important; cursor: default; } /* ARTICLE LETTERS ---------------------------------------------------------*/ .cA,.cB,.cC,.cD,.cE,.cF,.cG,.cH,.cI,.cJ,.cK,.cL,.cM,.cN,.cO,.cP,.cQ,.cR,.cS,.cT,.cU,.cV,.cW,.cX,.cY,.cZ { float: left; width: 110px; height: 103px; margin-top:6px; display: block; text-indent: -9999px; background: url(Images/bg-fonts.png) no-repeat; } .cA { background-position: 0 0; width: 110px; } .cB { background-position: 0 -114px; width: 91px; } .cC { background-position: 0 -227px; width: 105px; } .cD { background-position: 0 -340px; width: 105px; } .cE { background-position: 0 -453px; width: 94px; } .cF { background-position: 0 -566px; width: 92px; } .cG { background-position: 0 -679px; width: 106px; } .cH { background-position: 0 -792px; width: 115px; } .cI { background-position: 0 -904px; width: 86px; } .cJ { background-position: 0 -1017px; width: 86px; } .cK { background-position: 0 -1130px; width: 110px; } .cL { background-position: 0 -1244px; width: 90px; } .cM { background-position: 0 -1357px; width: 133px; } .cN { background-position: 0 -1470px; width: 117px; } .cO { background-position: 0 -1582px; width: 114px; } .cP { background-position: 0 -1696px; width: 94px; } .cQ { background-position: 0 -1809px; width: 99px; } .cR { background-position: 0 -1921px; width: 107px; } .cS { background-position: 0 -2034px; width: 83px; } .cT { background-position: 0 -2148px; width: 101px; } .cU { background-position: 0 -2259px; width: 113px; } .cV { background-position: 0 -2487px; width: 115px; } .cW { background-position: 0 -2374px; width: 161px; } .cX { background-position: 0 -2599px; width: 112px; } .cY { background-position: 0 -2712px; width: 109px; } .cZ { background-position: 0 -2826px; width: 90px; }