@charset "utf-8";

/* xbrowser - css */
* { background: transparent; border: 0; font-family: Arial; margin: 0; outline: 0; padding: 0; }
: focus { outline: 0; }
body { background: #000; color: #FFF; }

#wrap { background: url(../i/wrap_background.jpg) center center no-repeat; height: 475px; margin: -235px 0 0; position: absolute; top: 50%; width: 100%; }

#main, #terms { background: url(../i/product.jpg) no-repeat scroll 272px 172px; height: 425px; margin: 48px auto 0; position: relative; width: 500px; }
#main h1, #terms h1 { color: #6CE; font-size: 24px; letter-spacing: -1px; text-transform: uppercase; }
#main h2 { color: #9AA; font-size: 14px; letter-spacing: -1px; margin: 16px 0 37px; text-transform: uppercase; width: 300px; }
#main .logo { background: url(../i/form_sprite.png) -40px -100px no-repeat; height: 30px; position: absolute; right: 30px; text-indent: -5000em; top: 0; width: 110px; }
#main .site { top: 45px; }
#main .quiz { top: 64px; }
#main h2 strong { color: #FFF; }
#main legend { display: none; }
#main fieldset { width: 230px; }
#main .field { background: url(../i/form_sprite.png) 0 0 no-repeat; clear: both; height: 20px; overflow: hidden; padding: 0 0 0 10px; }
#main .gender, #main .button { background: none; }
#main .gender input { width: auto; }
#main .gender strong { padding: 0 0 0 30px; }
#main .fancy label strong { cursor: pointer; }
#main .fancy label { position: relative; }
#main .fancy label span { cursor: pointer; }
#main .fancy label.male { width: 130px; }
#main .fancy input { left: -5000px !important; position: absolute !important; } /*IE6*/
#main .fancy span { margin: 0 0 0 -10px; position: absolute; z-index: 10; }
#main .fancy span.checked, #main .fancy span.unchecked { background: url(../i/form_sprite.png) 0 -25px no-repeat; display: block; height: 15px; width: 35px; }
#main .fancy span.checked { background: url(../i/form_sprite.png) -40px -25px no-repeat; }
#main .field label { clear: right; display: block; float: left; height: 20px; }
#main .field strong { font-size: 11px; position: absolute; text-transform: uppercase; z-index: 2; }
#main .field input { color: #FFF; font-size: 11px; font-weight: bold; height: 15px; left: 0; position: relative; text-transform: uppercase; top: -4px; width: 210px; z-index: 1; }
#main .code input { width: 150px; }
#main .code .code { background: url(../i/form_sprite.png) right -25px no-repeat; margin: 0 5px 0 0; padding: 0 15px 0 0; }
#main .code .code input { width: 40px; }
#main .number input { width: 115px; }
#main .number .number { background: url(../i/form_sprite.png) right -25px no-repeat; margin: 0 5px 0 0; padding: 0 15px 0 0; }
#main .number .number input { width: 75px; }
#main .city input { width: 70px; }
#main .city .city { background: url(../i/form_sprite.png) right -25px no-repeat; margin: 0 5px 0 0; padding: 0 15px 0 0; }
#main .city .city input { width: 120px; }
#main .button  { margin: 30px 0 0; position: relative; width: 300px; }
#main .button a.blue  { right: auto; left: 0; top: 0; }
.blue, .green { background: url(../i/form_sprite.png) 0 -50px no-repeat; color: #021115; font-size: 11px; font-weight: bold; margin: 0 15px 0 0; padding: 0 0 0 15px; position: absolute; right: 30px; top: 10px; text-decoration: none; text-transform: uppercase; z-index: 9; }
.blue span, .green span { background: url(../i/form_sprite.png) right -50px no-repeat; display: block; position: absolute; right: -15px; top: 0; width: 15px; }
.blue:hover { background: url(../i/form_sprite.png) 0 -75px no-repeat; }
.blue:hover span { background: url(../i/form_sprite.png) right -75px no-repeat; }
.green { background: url(../i/form_sprite.png) 0 -75px no-repeat; right: auto; left: 118px; top: 0; z-index: 8; }
.green span { background: url(../i/form_sprite.png) right -75px no-repeat; }
.green:hover { background: url(../i/form_sprite.png) 0 0 no-repeat; }
.green:hover span { background: url(../i/form_sprite.png) -215px 0 no-repeat; }

/* TERMS */
#terms { background: none; display: block; position: absolute; left: -5000em; top: 0; }
#scroll { height: 355px; padding: 0 0 0 3px; width: 460px; }
#terms p { color: #9AA; font-size: 11px; padding: 0 0 10px; }

/*********************/
/**		Scroll		**/
/*********************/

.jScrollPaneContainer { overflow: hidden; position: relative; z-index: 1; }
.jScrollPaneTrack { background: url(../i/form_sprite.png) 0 bottom; cursor: pointer; height: 100%; position: absolute; right: 0; top: 0; }
.jScrollPaneDrag { background: url(../i/form_sprite.png) -20px -90px; position: absolute; cursor: pointer; overflow: hidden; height: 90px !important; }
.jScrollPaneDragTop { position: absolute; top: 0; left: 0; overflow: hidden; }
.jScrollPaneDragBottom { position: absolute; bottom: 0; left: 0; overflow: hidden; }