/* ------------------------------------------------------------- main.css for The National Hangover Day created by Ralph - ralphandco.com (developer Pete Warman) main screen style sheet Reset Styles -------------------------------------------------------------- */ 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, 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-size: 100%;font-family: inherit;vertical-align: baseline;} :focus, a {outline: 0;} caption, th, td {text-align: left;font-weight: normal;} table { border-collapse: collapse; border-spacing: 0; } a img { border: none; } button {cursor: pointer; overflow:visible;} img {display:block;} button::-moz-focus-inner { border: 0; } /* ------------------------------------------------------------- Layout -------------------------------------------------------------- */ html, body, #wrap {height: 100%;} body {font:100% futura, arial, sans-serif;text-align:left;background: #7aacc7 url(../images/mountains.jpg) left bottom repeat-x;background-attachment:fixed;position:relative;} body > #wrap {height: auto; min-height: 100%;} .inner {width:985px;margin:0 auto;position:relative;} /* header */ #header {min-width:985px;height:161px;position:relative;overflow:hidden;} #header a {display:block;-moz-tranform-origin: 50% 50%;-webkit-tranform-origin: 50% 50%;} #header a:hover {-webkit-transition: -webkit-transform 0.3s linear;} #nav_home {position:absolute;left:0;top:0;width:241px;height:152px;} #nav_home a:hover {-moz-transform: scale(1.03) ;-webkit-transform: scale(1.03) ;} #nav_tweet {position:absolute;left:50%;top:-5px;width:491px;margin-left:-267px;} #nav_tweet a:hover {-moz-transform: scale(1.03);-webkit-transform: scale(1.03);} #nav_buy {position:absolute;right:-18px;top:-9px;width:341px;height:173px;} #nav_buy a:hover {-moz-transform: scale(1.03) ;-webkit-transform: scale(1.03) ;} /* main */ #main {padding-bottom: 105px;} #agegate {width:483px;margin: 0;position:absolute;top:424px;left: 46px;} #agegate label {position:absolute;left:30px;top:4px;width:268px;height:22px;text-indent:-5000px;overflow:hidden;background: url(../images/label_please-enter-your-date-of-birth.gif) left top no-repeat;} #agegate input {text-align:center;position:absolute;top:0;left:320px;color:#fff;height:20px;line-height:20px;font-size:14px;font-family:arial;width:123px;background: url(../images/input_personal_bg.gif) left top no-repeat;border:0;padding:4px 10px;display:block;} #agegate input#dob_m {width:34px;left:320px;padding: 4px 2px 4px 8px;} #agegate input#dob_d {width:30px;left:366px;padding: 4px 2px;background-position:-20px top;} #agegate input#dob_y {width:45px;left:402px;padding: 4px 8px 4px 2px;background-position:right top;} #agegate button {position:absolute;left:462px;top:-2px;display:block;text-indent:-5000px;width:135px;height:39px;padding:0;margin:0;border:0;background: url(../images/button_enter.png) left top no-repeat;} #agegate button:hover, #agegate button:focus {background-position:left -40px;} #agegate button:active {background-position: left -80px;} #intro {background: url(../images/bg_intro.png) left top no-repeat;width:742px;height:474px;position:absolute;left:121px;top:10px;} #introvid_holder {position:absolute;left:21px;top:21px;} #intro #skip {display:block;width:90px;height:37px;background: url(../images/button_skip-this.png) left top no-repeat;text-indent:-5000px;position:absolute;left:19px;top:421px;} #intro #skip:hover, #intro #skip:focus {background-position:left -40px;} #intro #skip:active {background-position:left -80px;} #intro #sorry {width:667px;height:28px;text-indent:-5000px;overflow:hidden;margin:150px auto 20px;background: url(../images/text_sorry.gif) left top no-repeat;} #intro #exit_link {display:block;position:absolute;top:421px;left:205px;width:312px;height:40px;background: url(../images/button_find-out-more.png) left top no-repeat;text-indent:-5000px;} #intro #exit_link:hover, #intro #exit_link:focus {background-position: left -40px;} #intro #exit_link:active {background-position: left -80px;} #globe_holder {position:absolute;left:0;top:0;width:550px;height:747px;} #vidplayer_holder {position:absolute;right:0;top:0;width:417px;height:258px;} #content_holder {position:absolute;right:0;top:326px;width:417px;height:424px;background: url(../images/holder_content.png) left top no-repeat;} #content_holder #content_intro, #content_holder #content_prizes {width:417px;height:331px;} #content_holder #content_prizes {display:none;} #content_holder h1 {position:absolute;left:0px;top:11px;width:417px;height:131px;} #content_holder #link_back {position:absolute;text-indent:-5000px;overflow:hidden;display:block;left:12px;top:40px;width:67px;height:38px;background: url(../images/button_back.png) left top no-repeat;} #content_holder #link_back:focus, #content_holder #link_back:hover {background-position:left -40px;} #content_holder #link_back:active {background-position:left -80px;} #content_holder h2 {position:absolute;left:-4px;top:-65px;} #content_holder .content {position:absolute;left:4px;top:131px;width:410px;height:200px;overflow:hidden;color:#fff;} #content_holder .content .scroller {width:410px;height:200px;overflow:auto;} #content_holder .content p {font-size:13px;margin: 1em 20px;line-height:16px;clear:both;} #content_holder .content p span {color:#FFCC00;} #content_holder .content p a {color:#fff;} #content_holder .content p img {position:relative;left:-3px} #content_holder .content p .prize_img {float:left;margin: 0 20px 20px 0;left:0;} #content_holder .content_links {list-style:none;display:block;position:absolute;top:332px;left:4px;height:90px;width:410px;z-index:100;} #content_holder .content_links #link_tweet_now {position:absolute;left:24px;top:-9px;} #content_holder .content_links #link_the_prizes {position:absolute;left:216px;top:-9px;} #content_holder .content_links .legal_links {position:absolute;top:68px;left:10px;width:390px;} #content_holder .content_links .legal_links ul {list-style:none;text-align:right;font-size:13px;} #content_holder .content_links .legal_links li {display:inline;margin-left:5px;} #content_holder .content_links .legal_links a {color:#fff;} #tweetaway {position:absolute;left:0;top:0px;width:475px;height:430px;} #tweetaway h1 {margin-bottom:13px;} #tweet_holder, #tweet {width:475px;height:333px;} #bluray {position:absolute;left:255px;top:0;height:560px;width:475px;} #bluray h1 {margin-bottom:13px;} #bluray #link_tweet_now {right:10px;bottom:10px;position:absolute;} #leaderboard {position:absolute;width:484px;right:0;top:0;} #leaderboard h1 {margin-bottom:13px;} #competition {position:absolute;left:0;top:0;width:475px;height:575px;} #competition h1 {position:absolute;left:-6px;top:-15px;} #competition #link_tweet_now {right:20px;bottom:12px;position:absolute;} .competition_holder {background: url(../images/holder_competition.png) left top no-repeat;height:575px;} .competition_holder .content {position:absolute;color:#fff;width:410px;height:210px;left:30px;top:340px;} .competition_holder .content p {font-size:13px;line-height:1.2em;margin: 16px 0;} .competition_holder .content p.last-child {margin-right:160px;} .competition_holder .content ol {font-size:13px;line-height:1.2em;margin: 0 0 16px 0;list-style:none;} .competition_holder .content li {padding: 6px 0 0 35px;min-height:20px;margin-bottom:5px;} #terms_holder {padding:30px;background: #000;background: rgba(0,0,0,0.8);color:#fff;-moz-border-radius:20px;-webkit-border-radius:20px;margin:20px 0;} #terms_holder h1 {font-size:26px;margin-bottom:1em;font-weight:bold;} #terms_holder h1#fan_giveaway {margin-top:3em;} #terms_holder p {font-size:14px;margin-bottom:1em;line-height:1.5em;} #terms_holder ol, #terms_holder ul {font-size:14px;margin: 0 0 1em 1em;line-height:1.5em;padding-left:1em;} #terms_holder ol ol {list-style: lower-alpha;} #terms_holder li {margin-bottom:1em;} #terms_holder strong {font-weight:bold;} #terms_holder a {color:#fff;} .li1 {background: url(../images/li1.gif) left top no-repeat;} .li2 {background: url(../images/li2.gif) left top no-repeat;} .arrow {position:absolute;right:0;top:57px;z-index:10;} #link_tweet_now a {display:block;width:168px;height:73px;text-indent:-5000px;background: url(../images/button_tweet-now.png) left top no-repeat;} #link_tweet_now a:hover, #link_tweet_now a:focus {background-position: left -80px;} #link_tweet_now a:active {background-position: left -160px;} #link_the_prizes a {display:block;width:169px;height:73px;text-indent:-5000px;background: url(../images/button_the-prizes.png) left top no-repeat;} #link_the_prizes a:hover, #link_the_prizes a:focus {background-position: left -80px;} #link_the_prizes a:active {background-position: left -160px;} /* no twitter */ #no_twitter {position:absolute;right:0;top:0px;width:483px;height:430px;} #no_twitter h1 {margin-bottom:13px;} #no_twitter #no_twitter_form {width:443px;padding:20px;height:293px;background: url(../images/no_twitter_form_bg.png) left top no-repeat;} #no_twitter_form .personal {margin-bottom:10px;} #no_twitter_form .personal input {position:relative;color:#fff;height:20px;line-height:20px;font-size:14px;font-family:arial;width:188px;background: url(../images/input_location_bg.gif) left top no-repeat;border:0;padding:4px 10px;margin:0 27px 5px 0;display:block;float:left;} #no_twitter_form .personal input#dob, #no_twitter_form .personal input#username {margin-right:0;} #no_twitter_form .personal input#email {} #no_twitter_form .personal p {clear:both;font-size:10px;color:#fff;text-align:left;margin-left:220px;margin-bottom:2px;} #no_twitter_form .location {margin-bottom:5px;} #no_twitter_form .location select {line-height:20px;font-size:14px;width:208px;float:left;margin: 5px 0;} #no_twitter_form .location div.select_replace {width:208px;float:left;z-index:50;background: url(../images/select_bg_small.png) left top no-repeat;} #no_twitter_form .location div.select_replace .current {width:188px;} #no_twitter_form .location input#area_code {color:#fff;height:20px;line-height:20px;font-size:14px;font-family:arial;width:188px;background: url(../images/input_location_bg.gif) left top no-repeat;border:0;padding:4px 10px;margin:0 0 5px 0;display:block;float:right;} #no_twitter_form .location p {clear:both;font-size:10px;color:#fff;margin-bottom:2px;text-align:left;margin-left:220px;} #no_twitter_form .location p a {color:#fff;} #no_twitter_form .hangover_story {} #no_twitter_form .hangover_story label {display:block;float:left;width:135px;height:30px;background: url(../images/label_your-hangover.gif) left center no-repeat;text-indent:-5000px;margin-bottom:5px;} #no_twitter_form .hangover_story select {float:right;line-height:20px;font-size:14px;width:296px;margin:5px 0;} #no_twitter_form .hangover_story div.select_replace {z-index:40;float:right;width:296px;background: url(../images/select_bg_big.png) left top no-repeat;} #no_twitter_form .hangover_story div.select_replace .current {width:276px;} #no_twitter_form .hangover_story textarea {position:relative;color:#fff;font-size:14px;font-family:arial;line-height:20px;border:0;clear:both;width:423px;height:40px;padding:4px 10px;background: url(../images/textarea_bg.gif) left top no-repeat;margin-bottom:7px;} #no_twitter_form .optin {float:left;width:300px;} #no_twitter_form .optin div {clear:left;float:left;margin: 0 0 5px 0;width:305px;} #no_twitter_form .optin label {display:block;margin-left:25px;font-size:10px;color:#fff;line-height:1.3em;} #no_twitter_form .optin input {float:left;margin:0;} #no_twitter_form .button {float:right;width:133px;} #no_twitter_form .button button {display:block;border:0;padding:0;width:133px;height:40px;text-indent:-5000px;overflow:hidden;background: url(../images/button_post-message.png) left top no-repeat;} #no_twitter_form .button button:hover, #no_twitter_form .button button:focus {background-position:left -40px;} #no_twitter_form .button button:active {background-position:left -80px;} #no_twitter_thanks {width:443px;padding:20px;height:293px;background: url(../images/no_twitter_form_bg.png) left top no-repeat;} #no_twitter_thanks h2 {text-indent:-5000px;overflow:hidden;height:115px;background: url(../images/title_thanks.png) left top no-repeat;margin:45px 0 10px} #no_twitter_thanks a {display:block;margin:0 auto;text-indent:-5000px;width:217px;height:40px;background:url(../images/button_ptfb.png) left top no-repeat;} #no_twitter_thanks a:hover, #no_twitter_thanks a:focus {background-position: left -40px;} #no_twitter_thanks a:active {background-position: left -80px;} #no_twitter .legal {list-style:none;text-align:right;font-size:13px;width:200px;position:absolute;right:25px;bottom:25px;} #no_twitter .legal li {display:inline;margin-left:10px;} #no_twitter .legal a {color:#fff;} /* footer */ #footer {color:#fff;position: relative; margin-top: -105px; height: 105px; clear:both;background: #000;background: rgba(0,0,0,0.5);} #footer .main_links {list-style:none;padding-top:10px;} #footer .main_links li {float:left;display:block;border-left:1px solid #fff;margin-left:34px;padding-left:34px;} #footer.international .main_links li {margin-left:44px;padding-left:44px;} #footer .main_links li.first-child {border-left:0;margin:0;padding:0;} #footer .main_links li.share {width:199px;} #footer.international .main_links li.share {display:none;} #footer .main_links li.share img {float:left;} #footer .main_links li.share ul {list-style:none;width:162px;float:left;margin-top:12px;} #footer .main_links li.share li {float:left;width:20px;display:block;padding:0 0 0 7px;margin:0;border:0;} #footer .main_links li.share a {display:block;width:20px;height:18px;} #footer p {position:absolute;left:0;top:75px;font-size:12px;} #footer .legal {position:absolute;right:0;top:75px;font-size:12px;list-style:none;text-align:right;} #footer .legal li {display:inline;margin-left:5px;} #footer .legal a {color:#fff;} /* individual pages */ #page-intro #main {height:665px;overflow:hidden;} #page-home #main {height:930px;overflow:hidden;} #page-tweet #main {height:610px;overflow:hidden;} #page-blu_ray #main {height:742px;overflow:hidden;} #page-competition #main {height:756px;overflow:hidden;} /* custom selector styles */ .select_replace {position:relative;height:30px;color:#fff;} .select_replace .sr_scroller {height:150px;overflow-y:auto;display:none;position:absolute;top:31px;background:#3D404D;width:100%;-moz-box-shadow:0 4px 5px rgba(0,0,0,0.5);-webkit-box-shadow:0 4px 5px rgba(0,0,0,0.5);} .select_replace ul {list-style:none;font-size:14px;width:100%;} .select_replace ul li {line-height:30px;width:100%;} .select_replace ul li .item_val {display:none;} .select_replace ul li .item_txt {display:block;padding:0 10px;} .select_replace .current {position:absolute;top:0;display:block;font-size:14px;line-height:30px;padding:0 10px;height:30px;overflow:hidden;cursor:pointer;} .select_replace li {cursor:pointer;} .select_replace .open {display:block;} .select_replace .open li.hover {background:#000;} /* jscrollpane styles */ .jScrollPaneContainer {position: relative;overflow: hidden;z-index: 1;} .jScrollPaneTrack {position: absolute;cursor: pointer;right: 10px;top: 0;height: 100%;background: url(../images/scrollbar_bg.png) center center no-repeat;} .jScrollPaneDrag {position: absolute;background: url(../images/scrollbar_handle.png) left center no-repeat;cursor: pointer;overflow: hidden;} .jScrollPaneDragTop {position: absolute;top: 0;left: 0;overflow: hidden;} .jScrollPaneDragBottom {position: absolute;bottom: 0;left: 0;overflow: hidden;} a.jScrollArrowUp {display: block;position: absolute;z-index: 1;top: 0;right: 0;text-indent: -2000px;overflow: hidden;/*background-color: #666;*/height: 9px;} a.jScrollArrowUp:hover {/*background-color: #f60;*/} a.jScrollArrowDown {display: block;position: absolute;z-index: 1;bottom: 0;right: 0;text-indent: -2000px;overflow: hidden;/*background-color: #666;*/height: 9px;} a.jScrollArrowDown:hover {/*background-color: #f60;*/} a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {/*background-color: #f00;*/} /* international styles */