/*-----------------------------------------------------------------------------
Layout styles for Register section

version:   1.0
date:      06/05/08
author:    Alexander Chuprin
email:     a.s.chuprin@gmail.com
website:   www.chuprin.com

-----------------------------------------------------------------------------*/

#main #container { position: relative; min-height: 444px; padding: 95px 32px 22px 0; background: #00acec; color: #fff; }
* html #main #container { height: 444px; }
#left-col { position: relative; display: inline; float: left; }
.signup-main { float: right; width: 454px; padding-bottom: 20px; }
.signup-main .title { margin: 0 0 11px; }
.signup-main .text { line-height: 1.4em; }
.signup-main .text p { margin: 13px 0; }

/* Signup begin */
#step-0 #left-col { margin: 0 0 0 -15px; }
#step-0 #how-to { width: 295px; margin: 0 0 27px 0; background: url(../images/signup/howto_bg.gif) repeat-y; font-size: 1.2em; }
#step-0 #how-to .bg { background: url(../images/signup/howto_top.gif) no-repeat; }
#step-0 #how-to .bg .bg { padding: 4px 10px 4px 19px; background: url(../images/signup/howto_bottom.gif) 0 100% no-repeat; }
#step-0 #how-to ol li { margin: 6px 0 6px 20px; font-weight: bold; }
#step-0 #how-to ol li span { font-weight: normal; }

/* Step 1 */
#step-1 #left-col { margin: 14px 0 0 -9px; }
#steps ul { margin: 0; overflow: hidden; zoom: 1; }
#steps ul li { float: left; margin: 0 8px 0 0; padding: 0; }
#step-1 .text .points { float: right; }
#steps-nav { padding: 25px 0 0; background: url(../images/signup/dots.gif) repeat-x; }
#steps-nav ul { overflow: hidden; zoom: 1; margin: 0; }
#steps-nav ul li { margin: 0; padding: 0; background: none; line-height: 28px; font-size: 1.1em; font-weight: bold; }
#steps-nav ul li a { display: block; padding: 0 37px; color: #fff; text-decoration: none; }
#steps-nav ul li a:hover { text-decoration: underline; }
#steps-nav ul li.back { float: left; }
#steps-nav ul li.back a { background: url(../images/signup/arrow_back.gif) 0 50% no-repeat; }
#steps-nav ul li.forward { float: right; }
#steps-nav ul li.forward a { background: url(../images/signup/forward_arrow.gif) 100% 50% no-repeat; }
#steps-nav a.register { display: block; line-height: normal; }
#steps-nav a.register img { display: block; }

/* Form styles */
div.form-container { font-size: 1.1em; }

p.legend { margin-bottom: 1em; }
p.legend em { color: #C00; font-style: normal; }

div.errors { margin: 15px 0 10px 0; padding: 5px 15px; border: #FC6 1px solid; background-color: #FFC; color: #64296a; font-size: 1.1em; }
div.errors p { margin: 7px 0; }
div.errors p em { color: #C00; font-style: normal; font-weight: bold; }
div.errors ul { margin: 7px 0; }
div.errors li { margin: 0; }

div.form-container form p { margin: 0; }
div.form-container form p.note { margin: 6px 0 0 151px; line-height: 1.3em; }
div.form-container form fieldset { }
div.form-container form legend { font-weight: bold; color: #666; }
div.form-container form fieldset div { padding: 17px 0 13px; background: url(../images/signup/dots.gif) repeat-x; }
div.form-container form fieldset div div.sub { margin-bottom: 0; padding: 3px 0 3px 30px; background: none; }
div.form-container form fieldset div div.sub label { width: 100px; }
div.form-container label,
div.form-container span.label { margin: 0 10px 0 0; padding-right: 10px; width: 130px; display: block; float: left; position: relative; line-height: 1.4em; }

#recovery2 div.form-container label,
#recovery2 div.form-container span.label { margin: 0 10px 0 0; padding-right: 10px; width: 150px; display: block; float: left; position: relative; line-height: 1.4em; }

#recovery div.form-container label,
#recovery div.form-container span.label { margin: 0 10px 0 0; padding-right: 10px; width: 150px; display: block; float: left; position: relative; line-height: 1.4em; }
div.form-container label img,
div.form-container span.label img { margin-top: 5px; }
div.form-container label.error,
div.form-container span.error { color: #C00; }
div.form-container label em,
div.form-container span.label em { position: absolute; right: 0; font-size: 120%; font-style: normal; color: #C00; }
div.form-container input.error { background-color: #FEF; }
div.form-container input:focus,
div.form-container input.error:focus,
div.form-container textarea:focus { background-color: #FFC; }
div.form-container div.controlset label,
div.form-container div.controlset input { display: inline; float: none; vertical-align: middle; }
div.form-container div.controlset div { background: none; margin-left: 150px; padding: 0; }
div.form-container input { padding: 1px 2px; font:  normal 1em Tahoma; }
div.form-container select { text-transform: capitalize; font-size: 0.9em; font-family: Tahoma; width: 89px; margin: 0 6px 0 0; }
div.form-container .captcha { margin-bottom: 10px; }
div.form-container div.buttonrow { margin-left: 180px; }

/* Step-2 */
#step-2 #left-col { margin: -33px 0 0 -7px; }
#step-2 div.form-container label, #step-2 div.form-container span.label { font-weight: bold; }
#step-2 div.form-container .controlset label { font-weight: normal; }
#step-2 .points { margin-right: 5px; vertical-align: middle; }
#step-2 div.form-container .fants { margin-bottom: 10px; }
#step-2 div.form-container .controlset div label { width: 500px; }
#step-2 div.form-container .controlset div ul { position: relative; margin: 0 -30px 0 0; overflow: hidden; zoom: 1; }
#step-2 div.form-container .controlset div ul li { float: left; width: 160px; margin: 4px 0 0; padding: 0; background: none; white-space: nowrap; }
html:not([lang*=""]):not(:only-child) #step-2 div.form-container .controlset div input { margin-right: 3px; }
@media screen and (-webkit-min-device-pixel-ratio:0){
input.checkbox { margin-right: 3px; }
}
#step-2 .textarea label { margin-top: 10px; }
#step-2 .textarea textarea { height: 43px; width: 298px !important; margin: 5px 0 0 0 !important; overflow: auto; border: none; }

/* Step 3 */
#step-3 #left-col { margin: -48px 0 0 14px; }
#rules { padding: 1px; background: url(../images/signup/dots.gif) repeat-x; }
#rulesPopup #rules {background:none; }
#rules ol li { margin: 6px 0 6px 20px; font-weight: bold; }
#rules ol li span { font-weight: normal; }
#agreement { font-size: 0.9em; }
#chkAcceptTerms { margin: 0 3px 0 10px; }

/* Step 4 */
#step-4 #left-col { margin: -60px 0 0 -8px; }
#avatar-preview { position: relative; width: 187px; height: 226px; margin: -25px 0 0 27px; background: url(../images/signup/avatar_preview_bg.gif) no-repeat; text-align: center; font-size: 1.2em; font-weight: bold; color: #64296a; }
#avatar-preview img { padding: 18px 0; }
#random { display: block; width: 117px; height: 22px; margin: 15px 0 15px 61px; line-height: 20px; background: url(../images/signup/b_random.gif) no-repeat; text-align: center; }
#drawing { margin: 20px 0; }
#step-4 #steps-nav { padding-top:320px; }
#constructAvatarWrapper { left:14px; position:absolute; top:210px; }
#constructAvatarWrapper embed, #constructAvatarWrapper object { position: absolute; z-index: 1; }

/* Signup final */
#step-5 #left-col { margin: -32px -10px 0 -17px; }
#congatulations { margin: 20px 0 0 0; padding: 15px 0 0 0; background: url(../images/signup/dots.gif) repeat-x; font-size: 1.2em; }
#emailFinal { margin: 20px 0 0 0; padding: 15px 0 0 0; background: url(../images/signup/dots.gif) repeat-x; font-size: 1.2em; }
#points-for-signup { font-weight: bold; }
#points-for-signup .points { margin: 0 10px; }
#step-5 #how-to { margin: 15px 0;  overflow: hidden; zoom: 1; }
#step-5 #how-to .section { float: left; width: 183px; height: 200px; padding: 13px; font-size: 1.1em; color: #64296a; }
#step-5 #how-to h2, #step-5 #how-to p { margin: 8px 0; }
#earn {  margin: 0 18px 0 0; background: url(../images/signup/earn_bg.gif); }
#spend { background: url(../images/signup/spend_bg.gif); }
#step-5 .bubble
{
    display: inline;
    position: absolute;
background:transparent url(../images/signup/bubble.gif) no-repeat scroll 0 0;
float:left;
height:114px;
margin-left:39px;
margin-top: -6px;
}
#step-5 .bubble div {
background:transparent url(../images/signup/bubble.gif) no-repeat scroll 100% -114px;
height:114px;
min-width:142px;
width:100%;
white-space: nowrap;
}
#step-5 .bubble h2 { padding: 37px 0 0 13px; margin: 0; }
#step-5 .bubble h3 { font-size: 16px; margin: 0; padding: 2px 13px; color: #64296a; }

/* New registration */
.field { overflow: hidden; zoom: 1; background: url(../images/signup/dots.gif) repeat-x; margin-top: 19px; padding-top: 15px; }
.field .title { margin: 0; }
.field .entry { overflow: hidden; zoom: 1; }
.field .label { float: left; width: 217px; padding: 0 0 0 3px; margin: 6px 0 0 0; }
.field .note { color: #fff; font-size: 1.1em; margin: 10px 2px 15px; }
.field input { width: 222px; }
.field.draw { height: 330px; padding-top:20px; }
.field.draw #drawing { position: absolute; }
/* Step 1 */
#step-1-new #left-col { margin: -40px 0 0 -8px; }
#avatar-preview { position: relative; width: 187px; height: 226px; margin: -25px 0 0 27px; background: url(../images/signup/avatar_preview_bg.gif) no-repeat; text-align: center; font-size: 1.2em; font-weight: bold; color: #64296a; }
#avatar-preview img { padding: 18px 0; display: block; margin: 0 auto; }
#random { display: block; width: 117px; height: 22px; margin: 15px 0 15px 61px; line-height: 20px; background: url(../images/signup/b_random.gif) no-repeat; text-align: center; }
#drawing { margin: 20px 0 0; }
#constructAvatarWrapper { left:14px; position:absolute; top:210px; }
#constructAvatarWrapper embed, #constructAvatarWrapper object { position: absolute; z-index: 1; }
div.form-container form fieldset .agreement { padding-bottom: 5px; }
.agreement input { margin-right: 3px; }
.agreement .info { margin: 0 30px; }
a.info { padding: 8px 0 10px 29px; color: #fff; background: url(../images/signup/info_icon.gif) 0 50% no-repeat; font-size: 10px; }
#signup-link { margin: 22px 0 5px; text-align: right; }
#step-2-new #left-col { margin: -30px 0 0 -9px; }

/* Rounded block */
.lt { position: relative; zoom: 1; margin: -3px; background-image: url(../images/signup/rounded_lt.gif); background-position: 0 0; background-repeat: no-repeat; }
.rt { background-image: url(../images/signup/rounded_rt.gif); background-position: 100% 0; background-repeat: no-repeat; }
.rb { zoom: 1; background-image: url(../images/signup/rounded_rb.gif); background-position: 100% 100%; background-repeat: no-repeat; }
.lb { background-image: url(../images/signup/rounded_lb.gif); background-position: 0 100%; background-repeat: no-repeat; }
.rounded { zoom: 1; border: 3px solid #4ccbfb; }
.rounded .container { zoom: 1; padding: 12px; }

#more { margin: 0 0 17px; }
#more .info-about { padding: 0 0 6px; margin: 0 0 13px; background: url(../images/signup/dots.gif) 0 100% repeat-x; }
#step-2-new #more { margin-bottom: 0; }
#step-2-new #more .info-about { margin: 0; padding: 0; background: none; }
#step-2-new #steps-nav { background: none; }
#more .title { margin: 0 0 6px 0; }
#more p { font-size: 1.1em; }
#more .club .info { float: left; display: inline;  margin: -5px 0 0 30px; }

#step-club #left-col { margin: -50px 0 0 -16px; }
#step-club p.note { margin-left: 0; }
div.form-container form fieldset div div.sub { padding-left: 77px; }
div.form-container form fieldset div div.sub label { width: 53px; }
#step-club #more .info-about { margin: 0; background: none; }
.info-about p { margin-bottom: 0; }
#step-club .step-title { margin-right: -20px; }
div.form-container form fieldset .extra { background: none; padding: 5px 0 5px 73px; }
.no-top-margin { margin-top: 0; }
#container .white { background:#fff; color:#64296a; }

#recovery { margin-left: 30px;  padding:10px 0; font-size:11px; }

#recovery .header { border-bottom:1px solid  #A0D5ED; }
#recovery .header h2 { color:#CE3B0C; font-size:1.9em; margin:0 0 6px; padding-left:20px; }
#recovery .body { padding:5px 22px;}
#recovery fieldset div{ padding-bottom:5px;}
#recovery .entername .button { float:right; margin:-2px 25px 0 0; }
#recovery .entername label { font-weight:bold; width:170px; }
#recovery select { width:200px;}
#recovery fieldset div {background:transparent url(../images/account/dots_2.gif) repeat-x scroll 0 0;padding:14px 8px 10px;position:relative;min-height:16px;}
.attempt { color:#ce3b0c; font-weight:bold; }
#recovery .actions { height:35px; }

#recovery2 { margin-left: 30px; padding:10px 0; font-size:11px; }

#recovery2 .header { border-bottom:1px solid  #A0D5ED; }
#recovery2 .header h2 { color:#CE3B0C; font-size:1.9em; margin:0 0 6px; padding-left:20px; }
#recovery2 .body { padding:5px 22px;}
#recovery2 fieldset div { padding-bottom:5px;}
#recovery2 .entername .button { float:right; margin:-2px 25px 0 0; }
#recovery2 .entername label { font-weight:bold; width:170px; }
#recovery2 select { width:200px;}
#recovery2 fieldset div {background:transparent url(../images/account/dots_2.gif) repeat-x scroll 0 0;padding:14px 8px 10px;position:relative;min-height:16px;}
#recovery2 .actions { height:35px; }

div.form-container form fieldset .subscribeBlock  { padding: 9px 0 6px;}
.subscribe .acceptNews { margin-left:-4px; margin-right:5px; }
.subscribe { height: 80px; padding:1px !important; background:url(../../images/backgrounds/subscribe_icon.png) no-repeat 15px 9px #FCEFB8 !important; }
    .subscribe span { display:block; margin-left:107px; margin-top:10px; font-size:12px; }
        .subscribe span.subscribeTitle { color:#CE3B0C; font-size:11px; margin-top:5px; font-weight:bold; }
.subscribe .subscribeText{ margin: 5px 0 0 126px; font-size:11px; height:62px; padding-right:126px; color: #64296A; background:url(../../images/backgrounds/regMarki.png) no-repeat scroll 201px -5px transparent !important;}
    .subscribe .subscribeText span { margin-top:0px;}