/* 1 - Global Reset - Eric Meyer reset ---------------------------------------------------------------------------------------------------------------*/ 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, sub, sup, tt, var, 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-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline} :focus {outline: 0} body {color: #000000; background: #fff; text-align:center; font: 62.5% Arial, Helvetica, sans-serif} ol, ul {list-style: none} table {border-collapse: separate; border-spacing: 0} caption, th, td {text-align: left;font-weight: normal} blockquote:before, blockquote:after, q:before, q:after {content: ""} blockquote, q {quotes: "" ""} /* 2 - Common elemenst ---------------------------------------------------------------------------------------------------------------*/ p {color:#fff; font-size:1.6em} /* 3 - Layout elements ---------------------------------------------------------------------------------------------------------------*/ body {text-align:center; background:url(../img/underbelly.bg.jpg) #000 50% 0 no-repeat; position:relative; margin:0 auto} #site-wrapper {width:912px; height:720px; text-align:left; margin:0 auto; position:relative} #content {clear:both; font-size:1.0em; min-height:610px; position:relative; z-index:2} /*hack*/ .home #content {padding-top:168px; min-height:552px} /*hack*/ .email #content {padding-top:130px; width:800px; padding-left:10px; min-height:400px} /*hack*/ .termsandconditions #content {width:800px; padding-left:10px; background-color:#000; position:relative; top:150px; padding-top:10px; padding-bottom:15px} #trailer #content {width:800px; min-height:360px; padding-top:128px} #footer {width:912px; text-align:left; font-size:1.0em; position:relative} .footsoldiers {min-height:660px !important} /*hack*/ #ubtitle img {position:absolute; top:0; left:0; padding-top:28px} .home #ubtitle {position:absolute; top:0; left:0; padding-top:28px} .home #ubtitle img {position:relative; top:0; left:0; padding-top:0} .womenpage #biotitle {margin-left:365px;display:inline} .footsoldierpage #ticker-home {margin-left:360px;display:inline} .home #ticker-home, .email #ticker-home {margin-left:310px;display:inline} .moranpage #biotitle {margin-left:365px;display:inline} .carlwilliamspage #biotitle {margin-left:335px;display:inline} .lawpage #biotitle {margin-left:385px;display:inline} .blackprincepage #biotitle {margin-left:305px;display:inline} #videotext {width:570px; padding:10px 0} #videotext a {float:left; width:50px; height:38px; margin-right:10px} #videotext p {float:left; width:510px} .footsoldierpage #videotext {margin-left:0; width:350px; top:90px; position:absolute; z-index:101} .footsoldierpage #videotext p {float:left; width:290px} /* 4 - Individual pages ---------------------------------------------------------------------------------------------------------------*/ /** Home page charcater reveal map */ #charactermap {width:912px; height:531px; background:url(../img/characters.default.png) transparent 0 0 no-repeat} #rollnumber-1 #charactermap {background-image: url(../img/characters.morans.png)} #rollnumber-2 #charactermap {background-image: url(../img/characters.women.png)} #rollnumber-3 #charactermap {background-image: url(../img/characters.carlwilliams.png)} #rollnumber-4 #charactermap {background-image: url(../img/characters.thelaw.png)} #rollnumber-5 #charactermap {background-image: url(../img/characters.blackprince.png)} #rollnumber-6 #charactermap {background-image: url(../img/characters.blackprince.png); background-position: 0 -534px !important} #characternames {position:absolute; top:130px; background:url(../img/character.names.png) transparent 0 0 no-repeat; height:33px; width:210px} /** Bio pages **/ .blackprince {background:url(../img/bioimage.blackprince.png) transparent right top no-repeat} .themorans {background:url(../img/bioimage.themorans.png) transparent right top no-repeat} .thewomen {background:url(../img/bioimage.thewomen.png) transparent right bottom no-repeat} .carlwilliams {background:url(../img/bioimage.carlwilliams.png) transparent right top no-repeat} .thelaw {background:url(../img/bioimage.thelaw.png) transparent right top no-repeat} .lewiscaine {background:url(../img/bioimage.lewiscaine.png) transparent 0 0 no-repeat; width:200px} .mrt {background:url(../img/bioimage.mrt2.png) transparent 50px 0 no-repeat; width:190px; padding-left:50px; margin-right:25px} .zarah {background:url(../img/bioimage.zarah.png) transparent 0 0 no-repeat; width:190px; padding-left:20px; margin-right:35px} .abv {background:url(../img/bioimage.abv.png) transparent 50% 30px no-repeat; width:200px} #fs-lineup {padding-top:130px} #fs-lineup li {float:left; padding-top:310px; position:relative} #fs-lineup h2 {margin-bottom:15px} .mrt h2 {margin-bottom:44px !important} #placeholder {position:absolute; top:0; left:40px} /** T And C **/ .termsandconditions {background-image:none !important} .termsandconditions a {color:#fff; font-weight:bold; text-decoration:none} .termsandconditions a:hover {text-decoration:underline} .termsandconditions p {margin-bottom:15px; font-size:1.2em} .termsandconditions #content {} #tandchome {position:absolute; top:120px; left:10px} /** Headers **/ #comingsoon {position:absolute; top:28px; right:0; background:url(../img/title.comingsoon.png) transparent 0 0 no-repeat;padding-top:58px; width:327px; overflow:hidden; height: 0px !important} /*hack*/ #trailer #comingsoon {position:absolute; top:53px; left:260px; background:url(../img/title.comingsoon.png) transparent 0 0 no-repeat;padding-top:58px; width:327px; overflow:hidden; height: 0px !important} /*hack*/ /*#rollnumber-6 #comingsoon,*/ #email #comingsoon {background:url(../img/title.underbelly.png) transparent 0 0 no-repeat; width:282px} #comingsoontext {position:absolute; top:28px; right:0; width:292px; z-index:100} #comingsoontext a, #comingsoontext img {float:left; width:50px; height:38px} #comingsoontext p {float:left; width:230px; margin-left:10px} #biotitle {padding-top:30px; float:left; margin-bottom:15px} #footsoldiershead {text-indent:-9999em; height:0} /** Share **/ #sharearea {width:380px; float:left} #sharearea form {margin-bottom:15px; clear:left} #mc-embedded-subscribe-form label, #mc-embedded-subscribe-form input {float:left} #mc-embedded-subscribe-form label {margin-right:7px; padding-top:5px !important} #mce-EMAIL {margin-right:7px; width:156px; } #mc-embedded-subscribe {padding-top:5px} #sharearea ul {margin-bottom:15px} #share {clear:left; display:block} #share li {float:left; margin-right:10px} #share li a {float:left; background: url(../img/cluster.share.gif) 0 0 no-repeat; overflow:hidden} #facebook a {padding-top:21px; width:21px; height: 0px !important; height /**/:21px;} #facebook a:hover {background-position: -100px 0} #twitter a {padding-top:21px; width:16px; background-position:0 -50px !important; height: 0px !important} /*hack*/ #twitter a:hover {background-position: -100px -50px !important} #delicious {margin-top:5px} #delicious a {padding-top:10px; width:67px; background-position:0 -100px !important; height: 0px !important} /*hack*/ #delicious a:hover {background-position: -100px -100px !important} #youtube a {padding-top:20px; width:46px; background-position:0 -150px !important; height: 0px !important} /*hack*/ #youtube a:hover {background-position: -100px -150px !important} #stumbleupon a {padding-top:21px; width:21px; background-position:0 -200px !important; height: 0px !important} /*hack*/ #stumbleupon a:hover {background-position: -100px -200px !important} #digg a {padding-top:24px; width:42px; background-position:0 -250px !important; height: 0px !important} /*hack*/ #digg a:hover {background-position: -100px -250px !important} #sharearea p {font-size:1.0em} #sharearea p a {color:#1c211b; clear:left; text-decoration:none} #sharearea p a:hover {text-decoration:underline} /** Dropdown Nav */ #nav {float:right; top:30px; text-align:right; position:relative; z-index:400} #nav #others {float:left; margin-right:7px;} #dropdown {position:absolute; top:33px; left:-5px; z-index:10000} #js #dropdown {display:none} #dropdown li {width:160px; height:22px; overflow:hidden; z-index:999} #dropdown li a {background:url(../img/dropdown.gif) transparent 0 0 no-repeat; width:160px; padding-top:22px; height:0px !important; overflow:hidden; display:block; z-index:998} /*hack*/ #footsoldiers-dd a:hover {background-position:0 -22px} #morans-dd a {background-position:0 -44px !important} #morans-dd a:hover {background-position:0 -66px !important} #women-dd a {background-position:0 -88px !important} #women-dd a:hover {background-position:0 -110px !important} #carlwilliams-dd a {background-position:0 -132px !important} #carlwilliams-dd a:hover {background-position:0 -154px !important} #thelaw-dd a {background-position:0 -176px !important} #thelaw-dd a:hover {background-position:0 -198px !important} #blackprince-dd a {background-position:0 -220px !important} #blackprince-dd a:hover {background-position:0 -242px !important} /** Twitter follow **/ #follow {position:absolute; left:400px; top:0px; width:370px} #follow li {margin-bottom:5px; min-height:19px; font-size:1.4em; padding-top:2px} #twitterfollow {padding-left:34px; background:url(../img/twitterlogo.png) transparent 0 0 no-repeat;} #fbfollow {padding-left:34px; background:url(../img/facebooklogo.png) transparent 0 0 no-repeat;} /** Countdown **/ #ticker {float:right} #ticker-home {position:absolute; top:30px; left:0} #ticker-home p {font-weight:bold} #ticker-home p span {display:block} /** Video **/ #videocontainer {width:576px; height:324px; position:relative} #videooverlay {background:url(../img/overlay.png) transparent 0 0 repeat; position:absolute; top:0; left:0px; z-index:1000; width:576px; height:324px} #videooverlay h3 {font-weight:bold; color:#fff; font-size:1.4em; padding-bottom:10px} #warningmsg {padding:10px; line-height:1.8em} #warningmsg p, #warningmsg li, #formguidancecheck span {padding-bottom:10px; color:#fff; font-size:1.2em !important} #guidelist {list-style-type:disc; margin-left:20px} #guidelist li {font-size:1.2em; font-size:1.4em;} #warningmsg a {color:#fff; font-weight:bold} #yesno {width:568px; text-align:center} #yesno li {float:left; font-size:1.1em; margin-right:20px;} #yesno li a {background:url(../img/yesno.png) transparent 0 0 no-repeat; width:86px; padding-top:19px; height:0px !important; overflow:hidden; display:block} /*hack*/ #no {background-position:-86px 0 !important} .pointer {cursor:default} #formguidancecheck {padding-bottom:20px} #formguidancecheck label {} #formguidancecheck label, #formguidancecheck span {float:left; color:#fff;margin-right:10px} #formguidancecheck span {font-size:1.4em; } /*.active {background-position:0 -534px !important}*/ /* 10 - General Styles ---------------------------------------------------------------------------------------------------------------*/ /* Clearing Styles */ .clearleft{clear:left} .clearright{clear:right} .clearboth{clear:both} /* CSS clearing */ .clearing:after {content: "."; display:block; height: 0; clear: both; visibility: hidden} .clearing {display: inline-block} /* Hides from IE-mac \*/ * html .clearing {height: 1%} .clearing, .row {display: block} /* End hide from IE-mac */ /* Floats */ .fright {float:right !important} .fleft {float:left} .center {text-align:center} /* Skip link */ .skiplink {position:absolute; left:-9999em; top:-9999em; height:1px; font-size:1px; line-height:0; overflow:hidden} .hide {position:absolute; left:-9999em; top:-9999em; height:1px; font-size:1px; line-height:0; overflow:hidden} #nav #back {float:left} .email #homebutton {position:absolute; right:0; top:130px} #introtext {font-weight:bold; width:590px; margin-bottom:10px} .blackprince #introtext {min-height:130px} /*hack*/ .themorans #introtext {min-height:130px} /*hack*/ .thewomen #introtext {min-height:130px} /*hack*/ .carlwilliams #introtext {min-height:130px} /*hack*/ .thelaw #introtext {min-height:150px} /*hack*/ /* 10 - SIFR ---------------------------------------------------------------------------------------------------------------*/ @media screen { .sifrit {font-size:1.6em; font-weight:bold; color:#ffffff} .sIFR-active .sifrit {font-size:16px; line-height:1em; font-weight:normal !important; text-transform:none} .sIFR-active .footsoldiers .sifrit {font-size:14px !important} } @media screen { .sIFR-flash { visibility: visible !important; margin: 0; padding: 0; } .sIFR-replaced, .sIFR-ignore { visibility: visible !important; } .sIFR-alternate { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; overflow: hidden; } .sIFR-replaced div.sIFR-fixfocus { margin: 0pt; padding: 0pt; overflow: auto; letter-spacing: 0px; float: none; } } @media print { .sIFR-flash { display : none !important; height : 0; width : 0; position : absolute; overflow : hidden; } .sIFR-alternate { visibility : visible !important; display : block !important; position : static !important; left : auto !important; top : auto !important; width : auto !important; height : auto !important; } } /* Place CSS rules for to-be-replaced elements here. Prefix by .sIFR-active so they only apply if sIFR is active. Make sure to limit the CSS to the screen media type, in order not to have the printed text come out weird. */ @media screen { /* Example: .sIFR-active h1 { font-family: Verdana; visibility: hidden; } */ }