/*
Author: Richard Gregory 	
Date: June 2010 
Client: EA GAMES
Project: EA009 - The Human Avatar

Notes: SCREEN STYLE SHEET 
*/

/* HTML 
=======*/
html {
    overflow:-moz-scrollbars-vertical; /* for firefox - adds verticle scroll bar to stop page jumping around screen. */
}

body {
    font: 0.75em "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande"," Lucida Sans", Arial, sans-serif;
    color: #999999;
    background: #FFF url(../images/bg_body_4.jpg) no-repeat center top; 
}
	
a, a:link, a:active, a:visited { text-decoration: none; color: #cc0000; }
a:hover, a:focus { text-decoration: underline; }

em { font-style:italic; }	

p { 
    line-height: 140%; /* don't forget to set a line height*/
    margin: 0 0 10px 0; 
}

strong { font-weight:bold; }

/* Global Classes
=================*/
.clearboth {clear:both;}
.floatleft {float:left;}
.floatright {float:right;}

.clearfix:after,
div#header:after,
div#wrapper div.vote div.vote-inner:after,
div#wrapper div.twitter div.twitter-box ul.twitter-posts li:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

a.btn-gen {
    background: url(../images/btn_gen_r.png) no-repeat right top;
    color: #FFF;
    display: block;
    float: left;
    font-size: 1.3em;
    height: 31px;  
    padding-right: 11px;
    cursor: pointer;
}

a.btn-gen span {
    background: url(../images/btn_gen_l.png) no-repeat left top;
    display: block;
    padding: 4px 4px 0 14px;
    height: 27px;
    font-weight: bold;
    letter-spacing: -1px;
    text-transform: uppercase;
    cursor: pointer;
    float: left;
}

a.btn-gen:hover { text-decoration: none; }

.hide { display: none; }

div.yellowline {
    background: url(../images/heading_votenow.jpg) no-repeat left top;
    height: 10px;
    font-size:5px;
}

a.btn-votenext {
    display: block;
    background: url(../images/btn_nextstage.png) no-repeat left top;
    width: 297px;
    height: 48px;
    float: right;
    text-indent: -1000em;
    margin: 45px 34px 0 0;
}

/* Headings
=======*/
h1 {
    background: url(../images/humanavatar.gif) no-repeat left top;
    width: 687px;
    height: 169px;
    text-indent: -1000em;
    margin-left: 5px;
}

h2 {
    margin: 0;
}

h3 {
    margin: 0 0 0 10px;
}

    /* diff margins for each stage */
    /* may need to change in screen_IE6.css for perfection :)*/
    body.stage-1 h3 { margin: 0 0 0 10px; }
    body.stage-2 h3 { margin: 0 0 0 0; }
    body.stage-3 h3 { margin: 0 0 0 0; }
    body.stage-4 h3 { margin: 0 0 0 0; }
    body.stage-5 h3 { margin: 0 0 0 0; }

h4 {
    margin: 0 0 15px 0;
}

    h4.player { background: url(../images/title_player.gif) no-repeat left top; width: 120px; height: 19px; text-indent: -1000em; }
    h4.hair { background: url(../images/title_haircut.gif) no-repeat left top; width: 120px; height: 20px; text-indent: -1000em; }
    h4.piercing { background: url(../images/title_piercing.gif) no-repeat left top; width: 133px; height: 20px; text-indent: -1000em; }
    h4.tattoo { background: url(../images/title_tattoo.gif) no-repeat left top; width: 98px; height: 20px; text-indent: -1000em; }
    h4.clothes { background: url(../images/title_clothes.gif) no-repeat left top; width: 124px; height: 20px; text-indent: -1000em; }
    h4.transform { background: url(../images/title_transform.gif) no-repeat left top; width: 171px; height: 20px; text-indent: -1000em; }

/* Wrapper
=======*/
#wrapper {
	width: 1002px;
	margin:0 auto;
	z-index: 600;
	position: relative;
}


/* Header
=================*/
div#wrapper div#header {
    height: 313px;
}

div#wrapper div#header.begins {
    background: url(../images/begins.jpg) no-repeat 400px 240px;
}

div#wrapper div#header div.header-left {
    float: left; 
    width: 720px;
}

div#wrapper div#header div.header-right {
    float: right; 
    width: 278px;
    text-align: right;
    position: relative;
}

div#wrapper div#header div.header-left p.introduction {
    text-indent: -1000em;
    background: url(../images/introduction.gif) no-repeat left top;
    width: 564px;
    height: 102px;
    margin: 6px 0 0 60px;
}

div#wrapper div#header div.header-left a.btn-vote {
    background: url(../images/btn_vote_next.png) no-repeat left top;
    width: 236px;
    height: 34px;
    display: block;
    text-indent: -1000em;
    margin: 4px 0 0 60px;
}

div#wrapper div#header div.header-right img {
    margin-right: 2px;
}

div#wrapper div#header div.header-right a.join {
    background: url(../images/findoutmore.gif) no-repeat left top;
    width: 193px;
    height: 64px;
    display: block;
    position: absolute;
    right: 0px;
    top: 142px;
}

div#wrapper div#header div.header-right a.share {
    background: url(../images/share.gif) no-repeat left top;
    width: 118px;
    height: 22px;
    display: block;
    position: absolute;
    right: 58px;
    top: 236px;
    z-index: 850;
}

div#wrapper div#header div.header-right a.join span,
div#wrapper div#header div.header-right a.share span { display: none; }

div#wrapper div#header div.header-right div.share-popup {
    background: url(../images/bg_share.png) no-repeat left top;
    width: 290px;
    height: 114px;
    position: absolute;
    right: 1px;
    top: 242px;
    z-index: 800;
    padding: 28px 0 0 38px;
}

div#wrapper div#header div.header-right div.share-popup a {
    background: url(../images/sharesprite.gif) no-repeat 0 0;
    display: block;
    height: 21px;
    float: left;
}

div#wrapper div#header div.header-right div.share-popup a { margin: 0 0 12px 12px; }

div#wrapper div#header div.header-right div.share-popup a span { display: none; }

div#wrapper div#header div.header-right div.share-popup a.facebook { width: 114px; }
div#wrapper div#header div.header-right div.share-popup a.email { width: 65px; background-position: -114px 0; }
div#wrapper div#header div.header-right div.share-popup a.digg { width: 56px; background-position: -179px 0; }
div#wrapper div#header div.header-right div.share-popup a.facebook-share { width: 80px; background-position: -236px 0; }
div#wrapper div#header div.header-right div.share-popup a.twitter { width: 65px; background-position: -317px 0; }
div#wrapper div#header div.header-right div.share-popup a.reddit { width: 70px; background-position: -382px 0; }

div#wrapper div#header div.header-right div.share-popup a.facebook:hover { background-position: 0 -21px; }
div#wrapper div#header div.header-right div.share-popup a.email:hover { background-position: -114px -21px;  }
div#wrapper div#header div.header-right div.share-popup a.digg:hover { background-position: -179px -21px;  }
div#wrapper div#header div.header-right div.share-popup a.facebook-share:hover { background-position: -237px -21px; }
div#wrapper div#header div.header-right div.share-popup a.twitter:hover { background-position: -317px -21px;  }
div#wrapper div#header div.header-right div.share-popup a.reddit:hover { background-position: -382px -21px;  }

/* Nav
=================*/
ul.nav {
    overflow: hidden;
    background: url(../images/navborder.png) no-repeat center bottom;
    padding: 0 0 8px 24px;
    margin: 2px 0 0 0;
    height: 67px;
}

ul.nav li {
    display: block;
    height: 68px;
    float: left;
}

ul.nav li a {
    text-indent: -1000em;
    background: url(../images/navsprite_new.png) no-repeat left top;
    height: 49px;
    display: block;
    margin: 18px 2px 0 0;   
}

ul.nav li a.disabled { height: 49px; margin-top: 18px; cursor: default; }
ul.nav li a.vote { height: 69px; margin-top: -1px; }
ul.nav li a.active { height: 59px; margin-top: 8px; }

    ul.nav li#diff-0 a { background-position: 0 0; width: 71px; }
    ul.nav li#diff-1 a { background-position: -71px -0; width: 101px; }
    ul.nav li#diff-2 a { background-position: -172px 0; width: 117px; }
    ul.nav li#diff-3 a { background-position: -289px 0; width: 117px; }
    ul.nav li#diff-4 a { background-position: -406px 0; width: 117px; }
    ul.nav li#diff-5 a { background-position: -523px 0; width: 117px; }
    ul.nav li#diff-6 a { background-position: -640px 0; width: 144px; }
    
    ul.nav li#diff-1 a.disabled { background-position: -71px -49px; }
    ul.nav li#diff-2 a.disabled { background-position: -172px -49px; }
    ul.nav li#diff-3 a.disabled { background-position: -289px -49px; }
    ul.nav li#diff-4 a.disabled { background-position: -406px -49px; }
    ul.nav li#diff-5 a.disabled { background-position: -523px -49px; }
    ul.nav li#diff-6 a.disabled { background-position: -640px -49px; }
    
    ul.nav li#diff-1 a.vote { background-position: -71px -157px; }
    ul.nav li#diff-2 a.vote { background-position: -172px -157px; }
    ul.nav li#diff-3 a.vote { background-position: -290px -157px; }
    ul.nav li#diff-4 a.vote { background-position: -406px -157px; }
    ul.nav li#diff-5 a.vote { background-position: -523px -157px; }
    ul.nav li#diff-6 a.vote { background-position: -640px -157px; }
    
    ul.nav li#diff-0 a.active { background-position: 0 -98px; }
    ul.nav li#diff-1 a.active { background-position: -71px -98px; }
    ul.nav li#diff-2 a.active { background-position: -172px -98px; }
    ul.nav li#diff-3 a.active { background-position: -289px -98px; }
    ul.nav li#diff-4 a.active { background-position: -406px -98px; }
    ul.nav li#diff-5 a.active { background-position: -523px -98px; }
    ul.nav li#diff-6 a.active { background-position: -640px -98px; }
    
/* Video
=================*/
div#wrapper div.video {
    /*background: url(../images/video.jpg) no-repeat center top;*/
    height: 450px;
    width: 1001px;
    text-align: center;
    position: relative;
    z-index: 1;
}

div#wrapper div.video.vid-wide { height: 586px; }

div#wrapper div.video.vid-holder {
    height: 450px;
    width: 1001px;
    background: url(../images/video_holder.png) no-repeat center top;
}

div#wrapper div.video.vid-holder.piercing {
    background: url(../images/video_holder_piercing.png) no-repeat center top;
}

div#wrapper div.video.vid-holder.vid-tattoo {
    background: url(../images/video_holder_tattoo.png) no-repeat center top;
}

div#wrapper div.video.vid-holder.vid-clothes {
    background: url(../images/video_holder_clothes.png) no-repeat center top;
}

/* Content block
=================*/
div#wrapper div.content {
    background: url(../images/content_bg.gif) repeat-x left top;
    width: 898px;
    height: 266px;
    left: 14px;
    right: 14px;
    position: relative;
    padding: 22px 38px 0 38px;
}

div#wrapper div.content.wider {
    left: 0px;
    right: 0px;
    padding: 22px 52px 0 52px;
}

div#wrapper div.content div.content-bgleft {
    background: url(../images/content_left_2.png) no-repeat left top;
    width: 14px;
    height: 288px;
    position: absolute;
    top: 0;
    left: -14px;
}

div#wrapper div.content div.content-bgright {
    background: url(../images/content_right_2.png) no-repeat left top;
    width: 14px;
    height: 288px;
    position: absolute;
    top: 0;
    right: -14px;;
}

div#wrapper div.content.wider div.content-bgright,
div#wrapper div.content.wider div.content-bgleft {
    display: none;
}

div#wrapper div.content div.content-left {
    float: left;
    width: 590px;
}

div#wrapper div.content div.content-right {
    float: right;
    width: 286px;
}

div#wrapper div.content p { text-transform: uppercase; }

div#wrapper div.content a.view {
    background: url(../images/link_view.gif) no-repeat 100% 4px;
    padding: 0 12px 0 0;
}

div#wrapper div.content a.btn-tweet {
    display: block;
    background: url(../images/btn_tweet.gif) no-repeat 0 0;
    width: 90px;
    height: 22px;
    text-indent: -1000em;
    float: left;
    
}

div#wrapper div.content a.btn-tweet:hover { background-position: 0 -22px; }

div#wrapper div.content a.btn-email {
    display: block;
    background: url(../images/btn_email.gif) no-repeat 0 0;
    width: 59px;
    height: 21px;
    text-indent: -1000em;
    float: left;
    margin: 0 12px;
}

div#wrapper div.content a.btn-email:hover { background-position: 0 -21px; }

div#wrapper div.content a.btn-foltweet {
    background: url(../images/btn_follow_twitter.gif) no-repeat left top;
    width: 166px;
    height: 22px;
    display: block;
    text-indent: -1000em;
    float: left;
}

div#wrapper div.content div.twitter-post {
    margin: 20px 0 0 0;
}

div#wrapper div.content div.twitter-post img {
    margin: 20px 0 0 0; 
}

div#wrapper div.content div.tweet {
    background: url(../images/twitter_post.gif) no-repeat left top;
    width: 479px;
    height: 43px;
    padding: 8px 20px 14px 20px;
    line-height: 130%;
    text-transform: uppercase;
    float: left;
    margin-left: 12px;    
}


div#wrapper div.content iframe.facebook-like {
    border:none; 
    overflow:hidden; 
    width:235px; 
    height:35px;
    float: right;
    margin: -1px 6px 0 0;
    text-align: right;
}

div#wrapper div.content div.tweet a { color: #ffcc33; }
div#wrapper div.content div.tweet span { color: #666666; margin-left: 2px; }

div#wrapper div.content div.content-right h4 {
    margin-top: -7px;
}

div#wrapper div.content p.cta-copy { 
    text-transform: none; 
    margin-top: -10px; 
}

/* Content block - Flickr
=================*/
div#wrapper div.content div.flickr-contain {
    width: 279px;
    height: 198px;
    position: relative;
}

div#wrapper div.content div.flickr {
    width: 279px;
    height: 198px;
    border: 1px solid #464646;
    position: relative;
}

div#wrapper div.content div.flickr ul li { float: left; }

div#wrapper div.content div.flickr-contain a.flickr-arrows-left {
    background: url(../images/btn_flickr.png) no-repeat 0 0;
    width: 27px;
    height: 198px;
    position: absolute;
    text-indent: -1000em;
    top: 1px;
    z-index: 500;
    left: 1px;
}

div#wrapper div.content div.flickr-contain a.flickr-arrows-right {
    background: url(../images/btn_flickr.png) no-repeat -27px 0;
    width: 27px;
    height: 198px;
    position: absolute;
    text-indent: -1000em;
    top: 1px;
    z-index: 500;
    right: -1px;
}

/* Vote
=================*/
div#wrapper div.vote { 
    position: relative;
    background: url(../images/bg_vote_section_2.png) no-repeat 0 0; 
}

div#wrapper div.vote.no-vote {
    height: 52px;
}

div#wrapper div.vote img.votenow {
    margin: 38px 0 0 38px;
    float: left;     
}

div#wrapper div.vote div.winner-player {
    background: url(../images/winner_player.png) no-repeat 0 0;
    width: 270px;
    height: 106px;
    position: absolute;
    text-indent: -1000em;
    left: 425px;
    top: 10px;
    z-index: 5000
}

    div#wrapper div.vote div.winner-player.win-hair {
        left: -20px;
        top: 195px;
        background: url(../images/winner_player_sml.png) no-repeat 0 0;
        width: 189px;
        height: 74px;
    }
    div#wrapper div.vote div.winner-player.win-piercing {
        left: 625px;
        top: 0px;
        background: url(../images/winner_player_sml.png) no-repeat 0 0;
        width: 189px;
        height: 74px;
    }
    div#wrapper div.vote div.winner-player.win-tattoo {
        left: 690px;
        top: 10px;
        background: url(../images/winner_player_sml.png) no-repeat 0 0;
        width: 189px;
        height: 74px;
    }
    div#wrapper div.vote div.winner-player.win-clothing {
        left: 308px;
        top: 4px;
        background: url(../images/winner_player_sml.png) no-repeat 0 0;
        width: 189px;
        height: 74px;
    }
    

div#wrapper div.vote p.vote-copy {
    position: absolute;
    text-indent: -1000em;
    width: 819px;
    height: 43px;
    top: 233px;
    left: 100px;
}

    div#wrapper div.vote p.vote-copy.vote-copy-stage1 {
        background: url(../images/stage1_votecopy.gif) no-repeat left top;
        width: 746px;
        height: 44px;
        top: 240px;
        left: 112px;
    }
    
    div#wrapper div.vote p.vote-copy.vote-copy-stage2 {
        background: url(../images/stage2_votecopy.gif) no-repeat left top;
    }
    
    div#wrapper div.vote p.vote-copy.vote-copy-stage3 {
        background: url(../images/stage3_votecopy.gif) no-repeat left top;
    }
    
    div#wrapper div.vote p.vote-copy.vote-copy-stage4 {
        background: url(../images/stage4_votecopy.gif) no-repeat left top;
    }
    
    div#wrapper div.vote p.vote-copy.vote-copy-stage5 {
        background: url(../images/stage5_votecopy.gif) no-repeat left top;
    }
    
    div#wrapper div.vote p.vote-copy.vote-copy-stage6 {
        background: url(../images/stage6_votecopy.gif) no-repeat left top;
        width: 840px;
    }


div#wrapper div.vote div.vote-inner {
    /*padding: 0 32px;*/
    color: #333333;
    width: 952px;
    margin: 0 auto;
    position: relative;
}

div#wrapper div.vote div.vote-inner div#vote-container { position: relative; margin-top: 10px; }

div#wrapper div.vote div.vote-inner div#vote-container div.tape {
    z-index: 1000;
    position: absolute;
}

div#wrapper div.vote div.vote-inner div#vote-container div.tape.tl {
    background: url(../images/vote6_tape_tl.png) no-repeat left top;
    width: 80px;
    height: 73px;
    left: -12px; 
    top: 0;
}

div#wrapper div.vote div.vote-inner div#vote-container div.tape.tr {
    background: url(../images/vote6_tape_tr.png) no-repeat left top;
    width: 96px;
    height: 82px;
    right: -22px; 
    top: -22px;
}

div#wrapper div.vote div.vote-inner div#vote-container div.tape.bl {
    background: url(../images/vote6_tape_bl.png) no-repeat left top;
    width: 94px;
    height: 79px;
    left: -20px; 
    bottom: -5px;
}

div#wrapper div.vote div.vote-inner div#vote-container div.tape.br {
    background: url(../images/vote6_tape_br.png) no-repeat left top;
    width: 73px;
    height: 67px;
    right: -24px; 
    bottom: -12px;
}

div#wrapper div.vote div.vote-inner div#vote-container div.tape-left {
    position: absolute;
    background: url(../images/tape_l.png) no-repeat left top;
    width: 93px;
    height: 80px;
    left: -25px;
    top: -5px;
    z-index: 1000;
}

div#wrapper div.vote div.vote-inner div#vote-container div.tape-right {
    position: absolute;
    background: url(../images/tape_r.png) no-repeat left top;
    width: 76px;
    height: 76px;
    right: 5px;
    top: -5px;
    z-index: 2000
}

div#wrapper div.vote div.vote-inner div.two-col {
    width: 438px;
    height: 335px;
    float: left;
    margin-right: 10px;
    padding: 10px 6px 10px 16px;
    background: url(../images/bg_vote_gender_l.png) no-repeat left top;
}

div#wrapper div.vote div.vote-inner div.two-col.last-col {
    background: url(../images/bg_vote_gender_r.png) no-repeat left -5px;
}

div#wrapper div.vote div.vote-inner div.three-col { 
    float: left;
    height: 164px;
    padding: 15px 5px 0 12px;
    position: relative;
}

div#wrapper div.vote div.vote-inner div.last-col { margin-right: 0; }

div#wrapper div.vote div.vote-inner div.vote-element {
    margin-top: 10px;
    margin-bottom: 10px;
}

div#wrapper div.vote div.vote-inner div.vote-element img {
    float: left;
    margin: 4px 5px 8px 0;
    z-index: 500;
}

div#wrapper div.vote div.vote-inner div.vote-element div.option-title {
    color: #000000;
    font-weight: bold;
    font-size: 1.2em;
    text-transform: uppercase;
    font-family: Arial Black, Arial, Helvetica, sans-serif;
    width: 151px;
    background: url(../images/vote_lines.png) no-repeat 0 20px;
    float: left;
    margin: 5px 0 10px 0;
    height: 62px;
    line-height: 140%;
    overflow: hidden;
}

div#wrapper div.vote div.vote-inner div.vote-element div.option-title .click-me {
    font-size: 0.7em;
    margin-top: 26px;
    line-height: normal;
}

div#wrapper div.vote div.vote-inner div.vote-element span.number {
    font-size: 1.6em;
    font-family: Arial Bold;
    opacity: 0.8;
    filter: alpha(opacity = 80);
    font-weight: bold;
    display: block;
    width: 171px;
    float: left;
    color: #f9c637;
    position: absolute;
    top: 2px; 
    left: 40%
}


div#wrapper div.vote div.vote-inner div.vote-element div.vote-bar {
    background: url(../images/vote_score_bg2.gif) no-repeat left top;
    width: 230px;
    height: 27px;
    float: left;
    position: relative;
    margin: 12px 0 0 0;
}

div#wrapper div.vote div.vote-inner div.vote-element div.vote-bar-overlay {
    background: url(../images/vote_score_overlay.gif) no-repeat left top;
    width: 0;
    height: 27px;
    opacity: 0.9;
    filter: alpha(opacity = 80);
}

div#wrapper div.vote div.vote-inner div.vote-element ul.vote-details {
    float: left;
    margin: 0 0 10px 0;
    width: 235px;
}

div#wrapper div.vote div.vote-inner div.vote-element ul.vote-details li {
    background: url(../images/vote_details_line.gif) no-repeat left bottom;
    padding: 5px 0;
    color: #cc0000;
    text-transform: uppercase;
    font-size: 1.4em;
}

div#wrapper div.vote div.vote-inner div.vote-element ul.vote-details li span {
    color: #333333;
}

div#wrapper div.vote div.vote-inner div.vote-element p.quote {
    font-family: Times, serif;
    margin-top: -2px;
    line-height: 150%;
}

    /* two-col specific */
    div#wrapper div.vote div.vote-inner div.vote-element.two-col ul.vote-details,
    div#wrapper div.vote div.vote-inner div.vote-element.two-col div.quote-contain,
    div#wrapper div.vote div.vote-inner div.vote-element.two-col div.vote-bar,
    div#wrapper div.vote div.vote-inner div.vote-element.two-col span.number {
        margin-left: 6px;
    }
    
    div#wrapper div.vote div.vote-inner div.vote-element.two-col a.btn-gen { margin-left: 3px; }
    div#wrapper div.vote div.vote-inner div.vote-element.two-col span.number { width: 220px; }
    div#wrapper div.vote div.vote-inner div.vote-element.two-col div.quote-contain { 
        width: 230px; 
        margin-top: 10px;
        text-transform: uppercase; 
    }
    
    /* three-col specific */
    div#wrapper div.vote div.vote-inner div.three-col.col-1 {
        background: url(../images/bg_vote1.png) no-repeat left top;
        width: 308px;
    }
    
    div#wrapper div.vote div.vote-inner div.three-col.col-2 {
        background: url(../images/bg_vote2.png) no-repeat left top;
        width: 296px;
    }
    
    div#wrapper div.vote div.vote-inner div.three-col.col-3 {
        background: url(../images/bg_vote3.png) no-repeat left top;
        width: 297px;
    }
    
    div#wrapper div.vote div.vote-inner div.three-col.col-4 {
        background: url(../images/bg_vote4.png) no-repeat left top;
        width: 308px;
    }
    
    div#wrapper div.vote div.vote-inner div.three-col.col-5 {
        background: url(../images/bg_vote5.png) no-repeat left top;
        width: 296px;
    }
    
    div#wrapper div.vote div.vote-inner div.three-col.col-6 {
        background: url(../images/bg_vote6.png) no-repeat left top;
        width: 297px;
    }
      
    div#wrapper div.vote div.vote-inner div.vote-element.three-col div.vote-bar { 
        margin: 8px 0 0 0;
        width: 148px; 
    }
    
    div#wrapper div.vote div.vote-inner div.three-col.col-1 div.vote-bar,
    div#wrapper div.vote div.vote-inner div.three-col.col-4 div.vote-bar { width: 159px; }
    
    div#wrapper div.vote div.vote-inner div.vote-element.three-col a.btn-gen { margin-left: -2px; }
    
    /* FOUR COL SPECIFIC */
    div#wrapper div.vote div.vote-inner div.four-col { 
        height: 330px;
        float: left;
        padding: 10px 0 10px 35px;
        margin-top: 15px;
    }
    
    div#wrapper div.vote div.vote-inner div.four-col.col-1 {
        background: url(../images/vote4_1.png) no-repeat left top;
        width:185px;
        margin-right: 15px;
    }
    div#wrapper div.vote div.vote-inner div.four-col.col-2 {
        background: url(../images/vote4_2.png) no-repeat left top;
        width: 180px;
        margin-right: 15px;
    }
    div#wrapper div.vote div.vote-inner div.four-col.col-3 {
        background: url(../images/vote4_3.png) no-repeat left top;
        width: 190px;
        margin-right: 15px;
        padding-left: 38px;
    }
    div#wrapper div.vote div.vote-inner div.four-col.col-4 {
        background: url(../images/vote4_4.png) no-repeat left top;
        width: 190px;
        padding-left:40px;
        margin-right: 0;
    }
    
    div#wrapper div.vote div.vote-inner div.four-col div.option-title { margin-top: 0; }
    div#wrapper div.vote div.vote-inner div.four-col img { margin-left: -10px; }
    div#wrapper div.vote div.vote-inner div.four-col div.vote-bar { width: 152px; margin: -14px 0 12px 0; }
    div#wrapper div.vote div.vote-inner div.four-col a.btn-gen { margin-left: -3px; } 
    

/* Twitter
=================*/
div#wrapper div.twitter {
    background: url(../images/linebreak.gif) no-repeat center top;
    padding: 30px 0 0 0;
    margin: 20px 0 0 0;
}

div#wrapper div.twitter.no-vote {
    background: none;
    padding: 0;
    margin: 0;
}

div#wrapper div.twitter div.twitter-box {
    background: url(../images/twitter_bg.gif) no-repeat center top;
    width: 938px;
    height: 173px;
    margin: 0 auto;
    position: relative;
    color: #333333;
    font-family: Arial, Helvetica, sans-serif;
}

div#wrapper div.twitter div.twitter-box span.latest {
    width: 98px;
    margin: 7px 0 0 81px;
    font-size: 0.78em;
    text-transform: uppercase;
    display: block;
    float: left;
    line-height: 120%;   
}

div#wrapper div.twitter div.twitter-box span.latest a { color: #333333; }

div#wrapper div.twitter div.twitter-box span.latest-tweet {
    width: 558px;
    margin: 0 0 22px 10px;
    overflow: hidden;
    text-transform: uppercase;
    display: block;
    float: left;
    height: 34px;
    line-height: 140%   
}

div#wrapper div.twitter div.twitter-box ul.twitter-posts {
    clear: both;
    width: 902px;
    margin: 0 0 0 20px;
    text-transform: uppercase;
}

div#wrapper div.twitter div.twitter-box ul.twitter-posts li {
    margin: 0 0 5px 0;
}

div#wrapper div.twitter div.twitter-box ul.twitter-posts li span { 
    display: block;
    height: 16px;
    width: 840px;
    overflow: hidden;
}

div#wrapper div.twitter div.twitter-box ul.twitter-posts li img { 
    float: left;
    margin: -2px 20px 0px 0; 
}

div#wrapper div.twitter div.twitter-box ul.twitter-menu {
    /*position: absolute;
    right: 0;
    top: 10px;*/
    float: right;
    width: 187px;
    margin-top: 10px;
    overflow: hidden;
}

div#wrapper div.twitter div.twitter-box ul.twitter-menu li {
    font-size: 0.9em;
    margin: 0 0 0 18px;
    float: left;
}

div#wrapper div.twitter div.twitter-box ul.twitter-menu li a { 
    color: #000000;
    font-weight: bold;
}

div#wrapper div.twitter div.twitter-box ul.twitter-menu li.retweet { margin-left: 28px; }
div#wrapper div.twitter div.twitter-box ul.twitter-menu li.reply { margin-left: 10px; }

div#wrapper div.twitter div.twitter-box p.seeall {
    position: absolute;
    right: 18px;
    bottom: -7px;
    font-size: 0.9em; 
}

div#wrapper div.twitter div.twitter-box p.seeall a { color: #000000; text-decoration: underline; }

/* Results Thickbox
=================*/
div.tb-container {
    padding: 40px;
    position: relative;
    height: 389px;
    width: 431px;
    background: url(../images/lightbox_bg.png) no-repeat left top;
}

div.tb-container ol {
    list-style-type: decimal;
    list-style-position: inside;
}

div.tb-container ol li {
    margin: 5px 0;
}

div.tb-container div.title {
    color: #ffcb38;
    text-transform: uppercase;
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 2.5em;
}

div.tb-container p {
    text-transform: uppercase;
}

div.tb-container a.close,
div.tb-vote-container a.close {
    display: block;
    width: 27px;
    height: 23px;
    position: absolute;
    right: 15px;
    top: 20px;
    text-indent: -1000em;
    background: url(../images/tb_close.gif) no-repeat left top;
}

div.tb-container ul.results li {
    float: left;
    display: block;
    width: 138px;
    height: 35px;
    margin: 0 8px 24px 0;
    background: url(../images/results_bg.gif) no-repeat left top;
    color: #970000;
    font-weight: bold;
    font-size: 5em;
    text-align: center;
    padding-top: 90px;
}

div.tb-container ul.results li.nomargin { margin-right: 0; }

    /* example stage - different backgrounds for results */
    body.stage-eg div.tb-container ul.results li#vote-1 { background: url(../images/results_bg.gif) no-repeat left top; }
    body.stage-eg div.tb-container ul.results li#vote-2 { background: url(../images/results_bg.gif) no-repeat left top; }
    body.stage-eg div.tb-container ul.results li#vote-3 { background: url(../images/results_bg.gif) no-repeat left top; }
    body.stage-eg div.tb-container ul.results li#vote-4 { background: url(../images/results_bg.gif) no-repeat left top; }
    body.stage-eg div.tb-container ul.results li#vote-5 { background: url(../images/results_bg.gif) no-repeat left top; }
    body.stage-eg div.tb-container ul.results li#vote-6 { background: url(../images/results_bg.gif) no-repeat left top; }
    
    /* stage-1 */
    
    /* stage-2 */
    
    /* stage-3 */
    
    /* stage-4 */
    
    /* stage-5 */


/* Footer
=================*/
div#wrapper div.footer {
    background: url(../images/linebreak.gif) no-repeat center top;
    margin: 40px 0 30px 0;
    padding: 10px 0 0 0;
    text-align: center;
}

div#wrapper div.footer a { color: #666666; }