#login-button,
#join-button,
.ok-button,
#forgot-password-button,
.submit-button,
#play-button,
#cancel-button,
#ok-button
{
    background:transparent url(../images/membership-buttons.png) 0 0 no-repeat;
    border:0;
    cursor:pointer;
    display:block;
    text-indent:-999999px
}

#login-button,#join-button
{
    background-position:0 0;
    height:47px;
    left:238px;
    position:absolute;
    top:568px;
    width:177px   
}
#login-button{background-position:0 0;left:238px}
#login-button:hover{background-position:0 -50px}
#login-button:active{background-position:0 -103px}

#join-button{background-position:-190px 0;left:846px;z-index:2}
#join-button:hover{background-position:-190px -49px}
#join-button:active{background-position:-190px -103px}

.ok-button
{
    background-position:0 -156px;
    font:0/0 Arial;
    height:44px;
    margin:5px auto;
    width:153px 
}
.ok-button:hover{background-position:0 -203px}

#forgot-password-button
{
    background-position:0 -248px;
    height:37px;
    margin:0 auto;
    width:214px 
}
#forgot-password-button:hover{background-position:0 -284px}

.submit-button
{
    background-position:0 -386px;
    font:0/0 Arial;
    height:44px;
    margin:5px auto;
    width:153px 
}
.submit-button:hover{background-position:0 -434px}

#play-button
{
    background-position:0 -480px;
    height:44px;
    margin:0 auto;
    width:154px 
}
#play-button:hover{background-position:0 -527px}

#cancel-button
{
    background-position:0 -575px;
    height:44px;
    width:154px    
}
#cancel-button:hover{background-position:0 -623px}
#ok-button
{
    background-position:0 -670px;
    height:44px;
    width:154px    
}
#ok-button:hover{background-position:0 -718px}

/*tooltips and errors*/
.info-button
{
    background:transparent url(../images/membership-buttons.png) 0 -323px no-repeat;
    cursor:pointer;
    float:left;
    height:29px;
    margin:8px 0 0;
    position:relative;
    width:29px
}
.info-button:hover{background-position:0 -352px}

.info-click
{
    display:block;
    height:29px;
    left:0;
    position:absolute;
    top:0;
    width:29px
}

.tooltip
{
    background:url(../images/membership-tooltip.png) 0 0 no-repeat;
    bottom:0;
    cursor:default;
    display:none;
    height:160px;
    left:-10px;
    position:absolute;
    width:185px
}

.tip
{
    display:block;
    height:70px;
    margin:25px 15px 0;
    overflow:auto;
    width:150px
}

.tooltip .close
{
    cursor:pointer;
    height:15px;
    position:absolute;
    right:20px;
    top:6px;  
    width:20px 
}

.form-alert
{
    display:block;
    height:26px;
    width:157px;   
}

ul.alert { margin:0;padding:0;text-indent:0;}

ul.alert li,#congratulations
{
    background:url(../images/membership-alert.png) 0 0 no-repeat;
    font: bold 8pt/1.1em Arial;
    min-height:26px;
    height:auto!important;
    height:26px;
    list-style-type:none;
    margin:3px auto;
    padding:3px 5px 3px 35px;
    text-align:left;
    vertical-align:middle;
    width:157px; 
}
ul.alert li.alert-wide{background-position:0 -34px;padding-right:15px;width:430px}
#congratulations{background-position:0 -73px;margin:50px auto 10px;width:560px}

#error ul.alert li
{
    background:none;
    min-height:0;
    height:auto;
    list-style-type:disc;
    padding:1px 0;
    width:auto;
}

#error,#error-top,#error-bottom,#error-alert
{
    background: url(../images/membership-alert-expandable.png) -466px 0 no-repeat;
    display:block   
}
#error
{
    background-repeat:repeat-y;
    min-height:30px;
    height:auto!important;
    height:30px;
    margin:10px 0;
    padding:0 10px 0 40px;
    position:relative;
    width:420px
}
#error-top,#error-bottom
{
    height:6px;
    left:0;
    position:absolute;
    width: 465px
}
#error-top{background-position:0 0;top:-6px}
#error-bottom{background-position:-934px bottom;bottom:-5px}
#error-alert
{ 
    background-position:right 0;
    height:32px;
    left:5px;
    position:absolute;
    top:-1px;
    width:32px;
    z-index:2
}

#membership-form #error p
{
    color:#d00;
    font: bold 8pt/1.1em Arial;
    margin:0;
    padding:1px 0;
    text-indent:0
}
#error ul.alert {margin-left:15px}

/*login form*/
#login-text
{
    margin:0 auto;
    text-align:center;
    width: 450px    
}

#login-text h2{color:#3a94c6;font-size:18pt;margin:10px 0;padding:0}

#login-text p{font-size:12pt}

#login-form
{
    background:url(../images/login-form.png) 0 0 no-repeat;
    bottom:265px;
    color:#432a17;
    display:none;
    height:310px;
    left:190px;
    padding:5px 0 0;
    position:absolute;
    width:305px
}
#login-form.active{display:block}

#login-form-close, #join-form-close
{
    cursor:pointer;
    display:block;
    height:30px;
    position:absolute;
    right:7px;  
    text-indent:-999999px;
    top:5px;  
    width:31px
}
#join-form-close{background:url(../images/membership-buttons.png) -3px -864px no-repeat;right:350px;top:18px}

#error-block
{
    display:block;
    min-height:25px;
    height:auto!important;
    height:25px;    
}

.form-input
{
    clear:left;
    float:left;
    font-size:10pt;
    font-weight:bold;
    margin:10px 5px 0 40px;
    padding:3px;
    width:196px   
}

#login-form-remember,#join-form-agree
{
   clear:both;
   font-size:10pt;
   font-weight:bold;
   margin:0 auto;
   padding:5px 0 0
}
#login-form-remember{text-align:center}
#join-form-agree{padding:10px 0}

#bird
{
    background:url(../images/login-bird.png) 0 0 no-repeat;
    display:block;
    height:136px;
    position:absolute;
    right:145px;
    top:451px;
    width:114px    
}

/*join form*/
#membership-form
{
    background:url(../images/membership-form.png) 0 0 no-repeat;
    bottom:248px;
    color:#432a17;
    height:430px;
    left:295px;
    padding:0 30px 0 30px;
    position:absolute;
    width:600px    
}

#membership-form a{color:#432a17}
#membership-form a:hover{color:#876e5a}

#membership-form p
{
    color:#432a17;
    font-size:11pt;
    font-weight:bold;
    margin:12px 0;
    padding:5px 0 0   
}

#membership-form h1
{
    background:url(../images/membership-titles.png) 0 0 no-repeat;
    height:24px;
    margin:30px 0 0 35px;
    padding:0;
    text-indent:-999999px;
    width:144px   
}
#membership-form h1#thank-you-title{background-position:0 -30px}
#membership-form h1#forgot-password-title{background-position:0 -58px;margin-bottom:60px}

.join-form .form-input{clear:none;margin:0 5px 0 0;width:228px}
.join-form select.form-input{width:250px}
.join-form .info-button{margin:0 20px 8px 0}

#input-fields {clear:left}

/*forgot password form*/
.forgot-form ul.alert li{margin:3px 0}
.forgot-form .form-input{display:block;float:none;margin:0 0 20px}
.forgot-form .submit-button{clear:left;float:left;margin:0 40px 0 0}
.forgot-form #cancel-button{float:left}

/*forgot question form*/
.forgot-question-form ul.alert li{margin:3px 0}
.forgot-question-form .form-input{margin-left:0;width:250px}
.forgot-question-form .submit-button{clear:left;float:left;margin:20px 40px 0 0}
.forgot-question-form #cancel-button{float:left;margin-top:20px}

/*password reset form*/
.password-reset-form ul.alert li{margin:3px 0}
.password-reset-form .form-input{float:left;margin-left:0}
.password-reset-form .submit-button{clear:left;float:left;margin:20px 40px 0 0}
.password-reset-form #cancel-button{float:left;margin-top:20px}
.password-reset-form #play-button{clear:left;display:block;margin:0;position:relative;top:20px}

/*forgot password*/
.forgot-thanks #ok-button{margin:0 auto}