/** * 221B Screen CSS * * Warner Brothers 221B Screen CSS * * @project 221B * @version 1.0 * @author AKQA * @copyright Copyright 2009 - Warner Bros. Entertainment Inc. All rights reserved. * @license ??? */ /** * @tag Contents * 1.0 Resets * 1.1 XHTML resets * 2.0 Base styles * 3.0 Structural (framework & footer) * 3.1 Framework * 3.2 Footer * 4.0 Shared * 4.1 Miscellaneous * 4.2 Buttons * 4.3 Flash/javascript detection * 4.4 Overlays * 5.0 Sections/Pages * 5.1 Section: Window * 5.1.1 Sub-section: Error [extends window] * 5.1.1.1 Page: Error404 [window, error] * 5.1.2 Sub-section: Invite message [extends window] * 5.1.3 Page: Home [window] * 5.2 Section: Page Instructions * 5.2.1 Page: Verify date of birth [page instructions] * 5.3 Section: Book * 5.3.1 Page: Choose character [book] * 5.3.2 Page: Invite friend [book] * 5.3.3 Page: Invite friend frame [book] * 5.3.4 Page: Account [book] * 5.5 Section: Video * 5.5.1 Page: Registration complete [video] * 5.6 Section: Telegram * 5.6.1 Page: View invite [telegram] * 5.7 Section: Invite management * 5.7.1 Page: Invite reject [invite management] */ /** * @tag Notes: * - Language specific text must be set in views/assets/css/lang_css.ctp * - Language specific formatting overrides must be set in CDN/lang/$language/css/screen.css */ /** * -------------------------------------------------- * @section 1.0 Resets * -------------------------------------------------- */ /** * 1.1 XHTML resets * * Eric Meyer's Resetting again CSS http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/ */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } q:before, q:after{ content:''; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } img{ border:0; } /** * -------------------------------------------------- * @section 2.0 Base styles * -------------------------------------------------- */ body{ background:#000; color:#acacac; font:62.5%/1.5 "Georgia", Times New Roman, Times, Serif; } h1{ font-size:2em; font-weight:normal; } h2{ font-size:1.636em; font-weight:bold; } h3{ font-size:1em; font-weight:bold; } h1,h2,h3,h4,h5,h6{ line-height:1; margin-bottom:0.2em; } p,ol,ul{ margin-bottom:1em; } ol ol, ul ul, ol ul, ul ol{ margin-bottom:0; } a{ text-decoration:none; } a:link{ color:#c5c5c5; } a:visited{ color:#c5c5c5; } a:hover{ color:#e6e6e6; } a:active{ color:#e6e6e6; } /** * @tag Replaced for accessible image/text replacement */ .replaced{ display:block; position:relative; } .replaced span{ background-repeat:no-repeat; display:block; height:100%; left:0; position:absolute; top:0; width:100%; } a.replaced span{ cursor:pointer; } a.replaced:hover{ background-position:0 bottom; } /** * @tag Replaced for image/text replacement with transparency */ .replacedT{ background-position:0 0; background-repeat:no-repeat; display:block; text-indent:-9999px; overflow:hidden; } a.replacedT:hover{ background-position:0 bottom; } /** * @tag Hide tags which are used for accessibility purposes only */ .accessibility,.accessibility span{ display:block; height:1px !important; left:-9999px !important; line-height:1px !important; overflow:hidden !important; position:absolute !important; top:-9999px !important; width:1px !important; } /** * -------------------------------------------------- * @section 3.0 Structural (framework & footer) * -------------------------------------------------- */ /** * @tag 3.1 Framework * */ /** * Main page wrapper. Put section, sub-section and page ids on this div. * Set page background image, min-height:768px, override as necessary per section or page. */ .container{ background-image:url('../img/bg6.jpg'); background-position:0 0; background-repeat:no-repeat; font-size:1.1em; margin:0 auto; min-height:768px;/*IE6*/ position:relative; width:1024px; } /** * Main content area for every page. * Absolutely positioned for precise placement. Override only if neccessary. */ #content{ position:absolute; } /** * Main content footer as when needed. * Absolutely positioned for precise placement. Override only if neccesary. */ #content-footer{ left:0; position:absolute; width:1024px; } /** * @tag 3.2 Footer */ #footer-links, #footer-legal{ font-size:0.9em; margin:0 auto; position:relative; width:930px; } #footer-links{ padding:25px 0 15px; } #footer-legal{ padding-top:20px; } .footer{ margin:0 auto; padding:10px 0; overflow:hidden; } #footer-links .footer{ position:absolute; right:0; top:15px; white-space:nowrap; } #footer-legal .footer{ display:block; position:relative; text-align:center; z-index:2; } .footer li{ display:inline; border-right:1px solid #262927; font-weight:bold; letter-spacing:0.075em; text-transform:uppercase; } .footer li.image{ border:0; } .footer li.ic-facebook{ position:relative; } .footer li.ic-facebook span{ background:url('../img/ftr-ic-facebook.gif') 0 0 no-repeat; bottom:-2px; display:block; height:9px; position:absolute; right:0; width:9px; z-index:2; } .footer li.last{ border-right:0; } .footer li.highlight{ background:none; color:#88AE9B; } .footer li.highlight a{ color:#88AE9B; } .footer li.highlight a:hover{ color:#bcd7c6; } .footer li img{ display:inline; position:relative; top:5px; } .footer a{ color:#5f5f5f; text-decoration:none; padding:0 4px; } .footer a:hover{ color:#b1b1b1; } .ftr-twitter{ padding-left:27px; position:relative; } .ftr-twitter span.logo{ background:url('../img/ftr-ico-twitter.jpg') 0 0 no-repeat; display:block; height:21px; left:3px; position:absolute; top:-5px; width:22px; } .ftr-twitter a:hover span.logo{ background-position:0 bottom; } .ftr-sherlock-holmes{ left:0; height:64px; width:432px;height:50px; overflow:hidden; } #footer-logos{ border-top:1px solid #1a1a1a; clear:both; height:95px; left:0; margin:0; position:absolute; top:0; width:930px; z-index:1; } #footer-logos li{ height:30px; overflow:hidden; position:absolute; text-indent:-9999px; top:20px; } #footer-logos a{ background-position:0 0; display:block; height:100%; width:100%; } #footer-logos .ftr-village-roadshow{ left:0; width:82px; } #footer-logos .ftr-silver-pictures{ left:120px; width:28px; } #footer-logos .ftr-warner-brothers{ right:0; width:115px; } #footer-logos .ftr-village-roadshow{ background-image:url('../img/ftr-icon-village-roadshow.jpg'); } #footer-logos .ftr-silver-pictures{ background-image:url('../img/ftr-ico-silver-pictures.jpg'); } #footer-logos .ftr-warner-brothers{ background-image:url('../img/ft-ico-warner-brothers.jpg'); } /** * -------------------------------------------------- * @section 4.0 Shared * -------------------------------------------------- */ /** * @tag 4.1 Miscellaneous */ #logo-221b img{ left:446px; position:absolute; top:54px; } .movie-block{ left:440px; position:absolute; top:525px; width:150px; } .ic-facebook-tn{ background:url('../img/ftr-ic-facebook.gif') 0 0 no-repeat; display:none; height:9px; position:absolute; right:3px; top:3px; width:9px; z-index:5; } /** * @tag 4.2 Buttons */ /** * Facebook connect button */ .connect-button{ background-color:transparent; background-position:0 0; background-repeat:no-repeat; border:none; cursor:pointer; display:block; height:20px; margin:0 0 5px; padding:0; text-indent:-9999px; width:169px; } /** * Image replace default heights */ .btn-small{ height:30px; } .btn-large{ height:62px; } /** * Image replaced common buttons */ .btn-yes, .btn-no{ width:171px; } /** * Cufon replaced buttons (aqua:#88ae9b) */ .btn-text, .btn-text:link, .btn-text:visited{ color:#88ae9b; } .btn-text:hover, .btn-text:active{ color:#a8cab9; } .btn-text-large{ font-size:1.455em; text-transform:uppercase; } /** * @tag 4.3 Flash/javascript detection */ .hide { display:block; visibility:hidden; } .browserError { position:absolute; left:0; top:0; width:100%; z-index:100; } .browserError .inner { background:url('../img/bg5.jpg') 0 0 no-repeat; height:552px; margin:0 auto; padding-top:216px; width:1024px; } .browserError img.mainText { margin-bottom:20px; } .browserError img { display:block; margin:0 auto; } /** * @tag 4.4 Overlays */ /** * Overlay containers * * Put in the HTML of the page View when creating in page overlays, otherwise Javascript function 'overlay' creates the DOM objects. */ #overlay-page{ display:none; font-size:1.1em; height:100%; left:0; position:absolute; top:0; width:100%; z-index:1000; } #overlay-container{ background:url('../img/overlay.png') center 57px no-repeat; height:688px; margin:0 auto; position:relative; width:1024px; } /** * The overlay object */ .overlay{ display:none; height:629px; left:0; position:absolute; top:57px; width:100%; } .overlay-wrapper{ margin:119px auto 0; width:780px; } .overlay h2{ background-position:center 0; margin-bottom:1.5em; } .overlay .content{ margin:0 auto 1em; } .overlay h3{ margin:3em 0 0.5em; text-transform:uppercase; } .overlay .content ol{ list-style-type:decimal; margin-left:3em; } .overlay .content ul{ list-style-type:disc; margin-left:3em; } .overlay .content .list-alpha{ list-style-type:lower-alpha; } .overlay .content a:link, .overlay .content a:visited{ text-decoration:underline; } .overlay .content a:hover, .overlay .content a:active{ text-decoration:none; } .overlay .flourish{ background:url('../img/flourish.png') center 0 no-repeat; display:block; height:25px; margin-bottom:1.5em; width:100%; } /** * Overlay options: scroll, title cufon */ .ov-scroll .overlay-wrapper{ margin-bottom:1.5em; } .ov-scroll .content{ height:335px; overflow:auto; padding-right:50px; width:730px; } .ov-has-cufon h2{ text-align:center; text-transform:uppercase; } /** * Overlay footer buttons */ .overlay-ftr{ padding-top:10px; text-align:center; } .overlay-ftr li{ display:inline; } .overlay-ftr li.left{ float:left; } .overlay-ftr li.right{ float:right; } .overlay-ftr a{ padding:0 50px; } .overlay-ftr li .replacedT{ padding:0; } /** * Overlay dialogue (compressed width) */ .ov-dialogue .overlay-wrapper{ text-align:center; width:350px; } .ov-dialogue .content{ margin:0 auto; width:250px; } .ov-dialogue .overlay-ftr{ margin:0 auto; width:350px; } /** * Overlay video ( swfobject instead of overlay ) */ .ov-video .overlay-wrapper{ margin:0 auto; width:1024px; } /** * Individual overlays */ #homePageVideo{ background-image:none; } #ov-active-invite .overlay-wrapper{ width:500px; } #ov-too-young h2, #ov-reset h2, #ov-unsubscribe h2, #playDoubleOverlay h2, #playSingleOverlay h2, .inviteHolmes h2, .inviteWatson h2{ height:67px; } #ov-mac_osx_error .content{ text-align:center; } /** * @ tag language specific overlays */ /** * Italian */ #ov-italian-verify-language #btn-splash-enter-the-game{ height:32px; margin:0 auto; width:354px; } #ov-italian-verify-language #btn-splash-enter-forum{ height:32px; margin:0 auto; width:496px; } #ov-italian-verify-language #content p{ margin-bottom:1em; text-align:center; text-transform:uppercase; } #ov-italian-verify-language #movie-release{ background-repeat:no-repeat; display:block; height:34px; margin:0 auto; text-indent:-9999px; width:188px; } /** * Add other language overlays here */ #ov-french-verify-language #btn-splash-enter-the-game{ height:32px; margin:0 auto; width:354px; } #ov-french-verify-language #btn-splash-enter-forum{ height:32px; margin:0 auto; width:496px; } #ov-french-verify-language #content p{ margin-bottom:1em; text-align:center; text-transform:uppercase; } #ov-french-verify-language #movie-release{ background-repeat:no-repeat; display:block; height:34px; margin:0 auto; text-indent:-9999px; width:188px; } #ov-espanol-verify-language #btn-splash-enter-the-game{ height:32px; margin:0 auto; width:354px; } #ov-espanol-verify-language #btn-splash-enter-forum{ height:32px; margin:0 auto; width:496px; } #ov-espanol-verify-language #content p{ margin-bottom:1em; text-align:center; text-transform:uppercase; } #ov-espanol-verify-language #movie-release{ background-repeat:no-repeat; display:block; height:34px; margin:0 auto; text-indent:-9999px; width:188px; } /** * Overlay scrollbar styles */ .overlay .jScrollPaneContainer{ margin:0 auto; position:relative; overflow:hidden; z-index:1; } .overlay .jScrollPaneTrack{ position:absolute; cursor:pointer; right:0; top:0; height:100%; background:url('../img/slidebar-inv.gif') center 0 no-repeat; } .overlay .jScrollPaneDrag{ position:absolute; background:url('../img/scrollIndicator.png') center top no-repeat; cursor:pointer; overflow:hidden; } .overlay .jScrollPaneDragTop{ position:absolute; top:0; left:0; overflow:hidden; } .overlay .jScrollPaneDragBottom{ position:absolute; bottom:0; left:0; overflow:hidden; } .overlay a.jScrollArrowUp{ background:url('../img/scrollArrows.gif') center 0 no-repeat; display:block; position:absolute; z-index:1; top:0; right:0; text-indent:-2000px; overflow:hidden; height:15px; } .overlay a.jScrollArrowUp:hover{ /*background-color:#f60;*/; } .overlay a.jScrollArrowDown{ background:url('../img/scrollArrows.gif') center bottom no-repeat; display:block; position:absolute; z-index:1; bottom:0; right:0; text-indent:-2000px; overflow:hidden; /*background-color:#666;*/ height:15px; } .overlay a.jScrollArrowDown:hover{ /*background-color:#f60;*/; } .overlay a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover{ /*background-color:#f00;*/; } /** * -------------------------------------------------- * @section 5.0 Sections/Pages * -------------------------------------------------- */ /** * @tag 5.1 Section: Window */ .window{ background-image:url('../img/bg7.jpg'); } .window #content{ background:url('../img/window-block-home.jpg') 0 0 no-repeat; height:390px; left:316px; position:absolute; text-align:center; top:128px; width:400px; } .window #content .flourish{ background:url('../img/window-flourish.png') 0 0 no-repeat; clear:both; display:block; height:25px; margin:0 auto; padding-bottom:20px; width:301px; } .window #content .btn-what-is, .window #content .btn-fb-why{ background-repeat:no-repeat; display:block; margin:0 auto; text-indent:-9999px; width:200px; } .window #content .btn-what-is{ height:46px; } .window #content .btn-fb-why{ height:50px; } .window #content h2.has-cufon{ color:#cfdcda; font-size:2.182em; margin:50px auto 1em; text-transform:uppercase; width:250px; } .window #content .lnk-return a{ color:#88ae9b; font-size:1.333em; text-decoration:none; text-transform:uppercase; } .window #content .lnk-return a:hover{ color:#a8cab9; } /** * @tag 5.1.1 Sub-section: Error [extends window] */ .error #content p{ margin:0 auto 10px; width:350px; } .error #content .flourish{ background-position:center 2px; margin:1.5em auto 0.5em; } /** * @tag 5.1.1.1 Page: Error404 [window, error] */ #error404 #content h2.has-cufon{ width:200px; } /** * @tag 5.1.2 Sub-section: Invite message [extends window] */ .invite-message #content p{ margin:0 auto 1em; width:250px; } .invite-message #content .connect-button{ margin:0 auto; } .invite-message #content .flourish{ margin:1.5em auto 0.5em; } /** * @tag 5.1.3 Page: Home [window] */ #home{ min-height:630px;/*IE6*/ } #home #content h2{ height:107px; margin:70px auto 0; text-indent:-9999px; width:200px; } #home #content .connect-button{ margin:0 auto; } /** * @tag 5.2 Section: Page Instructions */ .page-instr{ background-image:url('../img/bg3.jpg'); min-height:688px;/*IE6*/ } .page-instr #content{ left:337px; text-align:center; top:180px; width:350px; } /** * @tag 5.2.1 Page: Verify date of birth [page instructions] */ #verify-dob #content .intr{ color:#fff; font-size:1.182em; margin-bottom:20px; } #verify-dob #content h2{ height:67px; margin:0 auto 30px; width:301px; } #verify-dob #content p{ margin-bottom:0.2em; } #verify-dob #content select{ margin:1.5em 0; } #verify-dob #content select.last{ margin-bottom:0.5em; } #verify-dob #content p.submit{ margin:0 auto; width:289px; } #verify-dob #content div.submit{ display:none; } /** * @tag 5.2.2 Page: Facebook permissions [page instructions] */ #permissions #content { left: 310px; width: 404px;} #permissions #content .intr{ color:#fff; font-size:1.182em; margin-bottom:20px; } #permissions #content h2{ height:76px; margin:0 auto 30px; width:404px; } #permissions #content hr{ width: 30px; } /** * @tag 5.3 Section: Book */ .book{ background-image:url('../img/bg2.jpg'); } .book #content{ color:#333; left:215px; top:155px; width:600px; } .book #page1{ left:0; position:absolute; width:270px; } .book #page2{ position:absolute; right:0; width:280px; } .book h2{ text-align:center; } .book .strapline{ color:#111; text-align:center; } .book #content-footer{ height:160px; top:590px; } .book #content-footer .last{ bottom:0; position:absolute; width:1024px; } .book #content-footer .btn-large{ background-position:center 0; margin:0 auto; width:390px; } .book #content-footer .btn-large:hover{ background-position:center bottom; } /** * @tag 5.3.1 Page: Choose character [book] */ #choose-character h2{ margin-bottom:0; text-transform:uppercase; } #choose-character h2 .type1{ color:#222; display:block; font-size:0.833em; font-weight:normal; margin-bottom:4px; text-transform:none; } #choose-character h2 .type2{ text-align:center; } #choose-character .strapline{ background:url('../img/divider.gif') no-repeat center bottom; margin:0 0 5px; padding-bottom:10px;/*IE6*/ } #quiz{ background-position:5px 9px; background-repeat:no-repeat; height:330px; line-height:1; margin:0 0 0 -20px; position:relative; width:310px; } #quiz ul{ overflow:hidden; width:250px; } #quiz li p{ color:#333; line-height:1.1; margin-bottom:0; } #quiz li{ padding:0 0 7px 10px; } #quiz li ul{ font-size:1.455em;/*IE6*/ margin-bottom:0; padding-bottom:3px; } #quiz li li{ clear:left; color:#3d0404; cursor:pointer; float:left; margin-bottom:4px; overflow:hidden; padding:0 0 0 10px; position:relative; width:100%; } #quiz li li.selected{ cursor:default; } #quiz .title span{ background:url('../img/txt-crossout.png') no-repeat -10px 13px; display:block; height:20px; left:0; position:absolute; top:0; width:0; } #quiz #q1-2 span, #quiz #q3-1 span{ background-position:-7px -26px; } #quiz #q4-2 span{ background-position:-7px -72px; } #quiz #q2-1 span, #quiz #q3-2 span, #quiz #q5-1 span{ background-position:-7px 12px; } #quiz #q2-2 span, #quiz #q4-1 span, #quiz #q5-2 span{ background-position:-6px -114px; } #choose-character #page2 h2{ background:url('../img/divider.gif') no-repeat center bottom; color:#222; font-size:1.182em; padding:14px 0 13px; } #choose-character #page2 .result p{ color:#222; font-size:1.273em; line-height:1; margin:0 auto; padding:0 20px; } #choose-character #page2 .result p.signoff{ clear:both; left:0; padding:0; position:absolute; top:293px; } #choose-character #page2 .result p.signoff2{ clear:both; font-size:2.727em; left:122px; padding:0; position:absolute; top:313px; } #choose-character #page2 .result .characterImg{ left:0; position:absolute; text-align:center; top:95px; width:100%; } #choose-character #page2 .result .characterImg img{ margin:0 auto; } #choose-character #page2 .result{ display:none; height:300px; position:relative; } #choose-character #page2 .result_on{ display:block; } /** * @tag 5.3.2 Page: Invite friend [book] */ /** * Invite friend both pages */ #invite-partner #content{ text-align:center; } #invite-partner h2{ font-size:1.455em; margin:0; padding:0; text-transform:uppercase; } #invite-partner .imgMask{ position:absolute; z-index:2; } /** * Invite friend page 1 */ #invite-partner #page1 .imgMask{ background:url('../img/img-mask2.png') no-repeat 3px -6px; top:212px; left:-21px; height:160px; width:287px; } #characters{ margin:0; } #characters li{ float:left; height:auto; margin:0 0 18px; width:106px; } #characters li.block1{ margin-right:30px; } #characters li li{ margin-right:0; position:relative; } #characters li li.user{ height:205px; margin-bottom:0; position:relative; } #characters li li.user h2{ font-weight:bold; left:0; line-height:100%; position:absolute; top:158px; width:100%; } #characters li li.user .image{ height:152px; overflow:hidden; position:relative; width:107px; } #characters li li.user img{ left:0; position:relative; top:0; } #characters ul{ margin:0; } #characters .invitePartnerPage1Lines{ background-position:0 0; background-repeat:no-repeat; height:11px; position:absolute; top:-14px; width:234px; z-index:100; } #characters .block1 #partner .invitePartnerPage1Lines{ background-image:url('../img/invite-partner-page1-block1-lines.gif'); display:block; left:53px; } #characters .block2 #partner .invitePartnerPage1Lines{ background-image:url('../img/invite-partner-page1-block2-lines.gif'); display:block; left:-83px; } /** * Invite friend page 2 */ #invite-partner #page2 .content{ position:relative; width:280px; } #invite-partner #page2 .imgMask{ background:url('../img/img-mask.png') no-repeat 3px -6px; top:10px; left:0; height:324px; width:244px; } .invitePartnerPage2Lines{ background:url('../img/invite-partner-page2-lines.gif') 0 0 no-repeat; height:349px; left:-24px; position:absolute; top:34px; width:33px; } #faces{ background:url('../img/slidebar.gif') no-repeat 253px 0; height:365px; left:13px; position:absolute; overflow:hidden; top:42px; width:266px; } #faces ul{ position:relative; margin:0; overflow:hidden; top:0; width:244px; } #faces li{ cursor:pointer; float:left; height:85px; margin-bottom:4px; margin-right:3px; position:relative; width:58px; } #faces li span{ color:#333; display:block; font-size:0.95em; font-weight:bold; height:34px; line-height:120%; margin-bottom:0; overflow:hidden; width:100%; } #faces li span.ic-facebook-tn{ display:none; height:9px; width:9px; } #faces li a{ display:block; height:85px; text-decoration:none; } #faces img{ display:block; margin:0 auto 3px; } .faceitems{ left:0; overflow:hidden; position:absolute; top:10px; } .faceitems li{ overflow:hidden; } .facelinks{ z-index:30; } #faces-scroll-indicator{ background:url('../img/scrollIndicator.png') no-repeat; height:22px; position:absolute; right:0; top:20px; cursor:pointer; width:21px; z-index:4; } .faces-scroll{ width:15px; height:20px; position:absolute; cursor:pointer; } #faces-scroll-up{ right:0; top:0; } #faces-scroll-down{ right:0; top:335px; } .scrollDisabled{ cursor:default; } .scrollPanel{ position:relative; padding:13px 10px 20px 0; width:757px; margin:20px auto 0; height:300px; overflow:hidden; top:0; } .scrollItem{ position:absolute; height:20px; width:20px; cursor:pointer; } .scrollUp{ right:0; top:0; background:url('../img/scrollArrows.gif') no-repeat 6px 0; } .scrollDown{ right:0; bottom:0; background:url('../img/scrollArrows.gif') no-repeat 6px -30px; } .scrollHandle{ background:url('../img/scrollIndicator.png') no-repeat; right:0; top:20px; } .scrollPanel .content{ position:relative; top:0; overflow:hidden; } .scrollPanel .inner{ position:relative; top:0; } /** * @tag 5.3.3 Page: Invite friend frame [book] */ #inviteframecontainer{ display:none; left:212px; position:absolute; top:144px; width:600px; z-index:1000; } #inviteframe{ height:600px; width:100%; } #inviteframecontent iframe{ display:block; height:910px !important; } #invite-user-name, #invite-friend-name{ color:#333; font-size:1.3em; font-style:italic; left:0; line-height:20px; position:absolute; text-align:center; top:5px; width:270px; } #invite-friend-name{ left:335px; } /** * @tag 5.3.4 Page: Account [book] */ #account img{ display:block; } /* switch to one player template*/ .switchTo1P h2{ text-align:center; background:url('../img/line.gif') no-repeat center bottom; padding-bottom:9px; margin-bottom:9px; } .switchTo1P h2 span{ color:#24231f; display:block; font-weight:bold; } .switchTo1P h2 span.h1{ font-size:0.611em; } .switchTo1P h2 span.h2{ font-size:1.222em; text-transform:uppercase; } .switchTo1P .image img{ margin:0 auto; } .switchTo1P .image{ height:273px; } .switchTo1P p.pretext{ color:#222; font-weight:bold; text-transform:uppercase; text-align:center; font-size:0.9em; background:url('../img/line.gif') no-repeat center bottom; padding-bottom:6px; margin-bottom:6px; } .switchTo1P .content p{ color:#24231f; font-weight:bold; text-align:center; margin-bottom:0; } .switchTo1P p.alert{ color:#643e3b; font-weight:bold; text-transform:uppercase; margin:3px 0 0; text-align:center; } .switchTo1P .button{ text-transform:uppercase; font-size:1.1em; width:300px; margin:0 -15px; position:relative; } .switchTo1P .button a{ background:url('../img/butShad.png') no-repeat center top; height:45px; color:#24231f; text-decoration:none; display:block; padding:17px 0 0; text-align:center; font-size:0.9em; } .switchTo1P .button a:hover{ background-position:center bottom; } .buttons .butYes, .buttons .butNo{ background-repeat:no-repeat; background-position:center top; } .buttons .butYes:hover, .buttons .butNo:hover{ background-position:center bottom; } .switchTo1P .overlay .buttons a{ text-indent:-9999px; display:block; height:62px; } .switchTo1P .overlay .buttons li{ float:left; width:200px; } .switchTo1P .overlay .buttons ul{ width:400px; overflow:hidden; margin:30px auto 0; } .switchTo1P .overlay p{ width:290px; margin:0 auto; color:#acacac; } .switchTo1P .footerHome{ padding-top:73px; } #account #content-footer { height:80px; text-align:center; top:687px; } #account #content-footer li{ display:inline; padding-right:50px; } /** * @tag 5.5 Section: Video */ .video{ background-image:url('../img/bg5.jpg'); color:#333; } .video #content{ left:0; height:647px; top:45px; width:1024px; } .video #content-footer{ height:80px; top:687px; } /** * @tag 5.5.1 Page: Registration complete [video] */ #registration-complete .btn-text{ display:block; text-align:center; } /** * @tag 5.6 Section: Telegram */ .telegram{ background-image:url('../img/bg6.jpg'); } .telegram #content{ height:742px; } .telegram #message{ background:url('../img/telegram-bk.jpg') 0 0 no-repeat; height:420px; left:180px; position:absolute; top:51px; width:700px; } .telegram #message p{ color:#323328; font-size:1.636em; position:absolute; } .telegram #message .m-despatched{ left:45px; top:116px; } .telegram #message .m-address{ left:95px; top:153px; } .telegram #message .m-to{ background-repeat:no-repeat; left:48px; height:49px; text-indent:-9999px; top:191px; width:47px; } .telegram #message .m-name{ left:115px; top:198px; } .telegram #message .m-message{ left:115px; top:230px; width:520px; } .telegram #content-footer{ background:url('../img/section-footer-divider.gif') center center no-repeat; height:60px; left:402px; position:absolute; top:680px; width:230px; } .telegram #content-footer .link-overlay{ height:32px; position:absolute; top:15px; width:105px; } .telegram #content-footer .btn-fb-why{ right:0; } /** * @tag 5.6.1 Page: View invite [telegram] */ #view-invite .buttons{ background:url('../img/telegram-invite-flourish.png') center 45px no-repeat; height:120px; left:262px; position:absolute; top:440px; width:500px; } #view-invite .buttons li{ height:62px; position:absolute; top:0; width:236px; } #view-invite .buttons li.accept{ left:0; } #view-invite .buttons li.reject{ right:0; } #view-invite .buttons .or{ color:#c7e0dc; left:230px; text-align:center; text-transform:uppercase; top:22px; width:40px; } #view-invite .buttons a{ background-repeat:no-repeat; display:block; height:100%; text-indent:-9999px; width:100%; } #view-invite .buttons a:hover{ background-position:0 bottom; } /** * @tag 5.7 Section: Invite management */ .lestrade{ background-image:url('../img/bg4.jpg'); } .lestrade #content{ left:252px; font-size:1.091em; height:742px; top:180px; width:520px; } /** * @tag 5.7.1 Page: Invite reject [invite management] */ #choose-game #content{ text-align:center; } #choose-game h2{ background-position:center 0; height:67px; margin-bottom:1em; } #choose-game p{ margin:0 auto 50px; width:250px; } #choose-game ul{ margin:0 auto; overflow:hidden; position:relative; width:520px; } #choose-game li{ float:left; width:230px; } #choose-game li.onePlayer{ float:right; } #choose-game li.playAlone-Or{ background:url('../img/play-alone-divider.gif')0 bottom no-repeat; color:#898989; font-weight:bold; left:250px; padding-bottom:7px; position:absolute; text-align:center; text-transform:uppercase; top:55px; width:20px; } #choose-game ul h3{ background-position:center center; height:20px; margin-bottom:5px; } #choose-game ul p{ background:url('../img/line.gif') no-repeat center top; margin-bottom:10px; padding-top:10px; width:210px; } #choose-game ul .connect-button{ display:block; margin:0 auto 10px; } #choose-game ul a.fbEnlighten{ background-position:center 5px; height:15px; } #choose-game ul a.fbEnlighten:hover{ background-position:center -11px; } /** * @tag 5.8 Section: Italian */ .italian{ background-image:url('../img/bg7.jpg'); } .italian #content{ color:#fff; left:215px; top:155px; width:600px; } /** * @tag 5.8 Section: French */ .francais{ background-image:url('../img/bg7.jpg'); } .francais #content{ color:#fff; left:215px; top:155px; width:600px; } /** * @tag 5.8 Section: Spanish */ .espanol{ background-image:url('../img/bg7.jpg'); } .espanol #content{ color:#fff; left:215px; top:155px; width:600px; } /** * @tag 5.8 Section: Deutsch */ .deutsch{ background-image:url('../img/bg7.jpg'); } .deutsch #content{ color:#fff; left:215px; top:155px; width:600px; } /** * @tag 5.8.1 Page: it-splash [italian] */ #it-splash #hdr-splash{ height:80px; margin:0 auto 1em; width:483px; } #it-splash #btn-splash-enter-the-game{ height:32px; margin:0 auto; width:354px; } #it-splash #btn-splash-enter-forum{ height:32px; margin:0 auto; width:496px; } #it-splash #content p{ margin-bottom:1em; text-align:center; text-transform:uppercase; } #it-splash #movie-release{ background-repeat:no-repeat; display:block; height:34px; margin:0 auto; text-indent:-9999px; width:188px; } /** * Add other language splash pages here */ #fr-splash #hdr-splash{ height:80px; margin:0 auto 1em; width:483px; } #fr-splash #btn-splash-enter-the-game{ height:32px; margin:0 auto; width:354px; } #fr-splash #btn-splash-enter-forum{ height:32px; margin:0 auto; width:496px; } #fr-splash #content p{ margin-bottom:1em; text-align:center; text-transform:uppercase; } #fr-splash #movie-release{ background-repeat:no-repeat; display:block; height:34px; margin:0 auto; text-indent:-9999px; width:188px; } #es-splash #hdr-splash{ height:80px; margin:0 auto 1em; width:483px; } #es-splash #btn-splash-enter-the-game{ height:32px; margin:0 auto; width:354px; } #es-splash #btn-splash-enter-forum{ height:32px; margin:0 auto; width:496px; } #es-splash #content p{ margin-bottom:1em; text-align:center; text-transform:uppercase; } #es-splash #movie-release{ background-repeat:no-repeat; display:block; height:34px; margin:0 auto; text-indent:-9999px; width:188px; } #de-splash #hdr-splash{ height:80px; margin:0 auto 1em; width:483px; } #de-splash #btn-splash-enter-the-game{ height:32px; margin:0 auto; width:354px; } #de-splash #btn-splash-enter-forum{ height:32px; margin:0 auto; width:496px; } #de-splash #content p{ margin-bottom:1em; text-align:center; text-transform:uppercase; } #de-splash #movie-release{ background-repeat:no-repeat; display:block; height:34px; margin:0 auto; text-indent:-9999px; width:188px; }