.freakykid{height: 729px; position: relative;border-top: 30px solid #fff;}
.freakykid .bar{height: 68px; width: 99999px; position: absolute; top:500px; left: 50%; display: block; background: #e72b2a;}
.freakykid img{position: absolute; top:0; left: 0;}

.freakykid .textuals{position: absolute; right: 0; text-align: right; width: 510px; line-height: 24px;}
.freakykid .believe{top:140px;}
.freakykid .reason{top:350px;}

.freakykid p, .freakykid h4{font-size: 15px; color: #555; padding: 0 0 5px;}
.freakykid h4{font-weight: bold; color: #222;}

.freakykid h2{display: none;}

.freakykid .next{display: block; position: absolute; top:500px; right: 0; width: 320px; height: 68px;}
.freakykid .next span{position: absolute; top:16px; right: -3px; border: 3px solid #e72b2a; text-indent: -9999em; width: 32px; height: 32px;}
.freakykid .next:hover span{border-color: #fff;}


.which_one{position: relative;}
.which_one .bar{height: 90px; width: 99999px; position: absolute; top:0px; right: 60%; display: block; background: #e72b2a;}


.choose .dudes_grid{margin: 0 80px; height: 500px; padding-top: 60px;}
.choose .type{display: block; float: left;width: 230px; height: 240px; text-align: center; margin-right: 50px; padding: 0; position: relative;}
.choose .last{margin-right: 0;}
.choose .type span{display: none; position: absolute; top:27px; left: 30px; border: 3px solid #000; width: 165px; height: 91px;}
.choose .type:hover span{display: block;}

.choose  .none span{height: 140px; margin-top: -30px;}

.dudes .dude{height:800px; position: relative;}
.dudes .bar{height: 90px; width: 99999px; position: absolute; top:8px; right: 100%; display: block; background: #e72b2a }

body.js_enabled .which_one .bar{top:11px; height: 91px;}
body.js_enabled .fancy_choose_label{display: block; background: url(../images/who-are-you/which-one-is-you-js.jpg); position: absolute; top:0; left: -328px; width: 744px; height: 138px;}
body.js_enabled .standard_choose_label{display: none;}

/* these are DUDES! "Dude" in this context is not gender specific! FEMINIST HULK WOULD BE PROUD. */
.dudes .dude{position: relative; }
.dudes .bar_title{height: 90px; background: #e72b2a; position: absolute; top:60px; right: 60%; width: 9999em;}

.dudes .dude h2{background: url(../images/who-are-you/dude/title-bar-nojs.jpg) no-repeat 100% 0; position: absolute; top:60px; left: 0;width: 430px; height: 90px;}
.dude h2 span{width:90%; display: block; position: absolute; top:0; height: 90px; text-indent: -999em;}

.dudes .visionary h2 span{ background: url(../images/who-are-you/dude/titles/visionary.jpg) no-repeat 100% 50%; }
.dudes .busy_type h2 span{ background: url(../images/who-are-you/dude/titles/busy-type.gif) no-repeat 100% 50%; }
.dudes .web_team h2 span{ background: url(../images/who-are-you/dude/titles/web-team.gif) no-repeat 100% 50%; }
.dudes .product_people h2 span{ background: url(../images/who-are-you/dude/titles/product.gif) no-repeat 100% 50%; }
.dudes .newbie h2 span{ background: url(../images/who-are-you/dude/titles/newbie.gif) no-repeat 100% 50%; }
.dudes .none-of-these h2 span{ background: url(../images/who-are-you/dude/titles/none-of-these.gif) no-repeat 100% 50%; }

.dude .picture{display: block; position: absolute; top:50px; right: 70px; width: 390px; height: 270px; background: url(../images/who-are-you/dude/frame.jpg) no-repeat center;}
.dude .picture img{display: block; position: absolute; top:68px; left: 50%; margin-left: -125px;}
.dude .explain{width: 350px; position: absolute; top:200px; left: 80px;}
.dude .explain p, .dude .explain h4{font-size: 13px; color: #444; padding: 0 0 18px; line-height: 20px;}
.dude .explain em{font-style: italic;}
.dude .explain h4{font-weight: bold; color: #222;}
.dude .explain .ohnineeff{color: #09f;}
.dude .explain blockquote p{color: #09f; font-family: Georgia, Times, serif; font-size: 22px; font-style: italic; line-height: 28px;}

.dude .explain a{color: #c00;}
.dude .explain a:hover{color: #000;text-decoration: none;}

.dude .bar_casestudies{height: 45px; background: #e72b2a; position: absolute; top:400px; left: 50%; margin-left: 300px; width: 9999px;}

.dude .restore_choice, .dude .make_contact{color: #fff;  display: block; text-decoration: none; text-indent: -99999em; margin: 10px 0; height: 30px; background: url(../images/who-are-you/dude/no-thanks-go-back.png) no-repeat 0 10px;}
.dude .restore_choice:hover, .dude .make_contact:hover{background-position: 0 -31px;}

.dude .make_contact{background:url(../images/who-are-you/dude/thats-me.png) no-repeat 100% 10px;}
.dude .make_contact:hover{background-position: 100% -31px;}


.dude .casestudies{width: 350px; position: absolute; top:400px; right: 40px;  height: 50px;}
.dude .casestudies h3{background: url(../images/who-are-you/dude/casestudies-bar-nojs.jpg) no-repeat 100% 0; position: relative; height: 70px; display: block;}
.dude .casestudies h3 span{display: none;}
.dude .casestudies a{display: block;font-size: 13px; text-transform: uppercase; padding: 1px 0 0 30px; background: url(../images/who-are-you/dude/right-arrow-case.gif) no-repeat 0 -62px; color: #999; text-decoration: none; position: relative; margin: 0 15px 10px;}
.dude .casestudies a span{display: block; position: absolute; top:2px; right: 20px; width: 87px; height: 20px; background: url(../images/who-are-you/dude/case-study-label.gif) no-repeat 0 -24px; text-indent: -99999em;}
.dude .casestudies a:hover{color: #09f; background-position: 0 4px;}
.dude .casestudies a:hover span{background-position: 0 0;}

/* DUdeZ with javascript sit in one spot and angrily pout kind of like: :{ but we make them appear anyway*/

body.js_enabled .choose_dudes_wrapper{height: 1000px; position: relative;}

/* positioned like this for fading */
body.js_enabled .which_one,
body.js_enabled .dudes .dude{position: absolute; top:0; left: 0; width: 100%;}
body.js_enabled .choose .dudes_grid{height: auto; padding-top: 200px;}
body.js_enabled .dude .explain {top:150px;}
body.js_enabled .dudes .bar_title{height:90px; background: #e72b2a; position:absolute; width:9999px; top:12px;}
body.js_enabled .dudes .bar_casestudies{top:423px;}
body.js_enabled .dudes .fancy_title_bar{display: block; background: url(../images/who-are-you/dude/title-bar-javascript.jpg); position: absolute; top:0; left: -375px; width: 804px; height: 141px;}
body.js_enabled .dudes .dude h2 {top:1px;}
body.js_enabled .dudes .fancy_casestudies_bar{display: block; background: url(../images/who-are-you/dude/casestudies-bar-javascript.jpg); position: absolute; top:-1px; right: -250px; width: 598px; height: 96px;}


#choose-who-you-are{position: absolute; top:-70px; left: 0;width: 1px; height: 1px;}