#container {
    width: 350px;
    margin-top: 12px;
    position:relative;
}

#content, #column1 {
    width: 342px;
    padding: 0;
}

#user-info {
    height: 91px;
    position: relative;
}

#user-info img {
    float: left;
    height: 60px;
    width: 60px;
    padding: 15px 10px 15px 15px;
}

#user-info div {
    padding: 15px;
    font-weight: bold;
    font-size: 14px;
}

#user-info div a {
    font-size: 11px;
    color: #000;
}
#user-info #logout {
    position: absolute;
    top: 16px;
    right: 10px;	
}
#user-info #manage-account {
    position: absolute;
    bottom: 10px;
    right: 10px;    
}

#user-info #name {
    float:left;
    width: 150px;
    height: 52px;
    padding: 0;
    overflow: hidden;
}

#user-info div #manage-link {
    position:absolute;
    top: 66px;
    right: 10px;
}

#select-avatar #first-avatar {
    height: 111px;
    margin-left: 15px;
}

#select-avatar #first-avatar img {
    float: left;
    padding-right: 8px;
}

#select-avatar .first-avatar-name {
    padding-top: 15px;
    font-size: 18px;
    font-weight: bold;
}

#select-avatar .first-avatar-lastonline {
    font-size: 11px;
    font-weight: bold;
    padding-bottom: 5px;
}

#select-avatar a.new-button {
    display: block;
    float: left;
    margin: 0;
}

#select-avatar #link-new-avatar {
    float:right;
    padding: 0 15px 0 0;
}

#select-avatar .other-avatars {
    margin: 0 10px;
    max-height: 610px;
    overflow:auto;
}

#select-avatar #other-avatars-header {
    padding:3px 15px 25px 15px;
    font-size: 14px;
    font-weight: bold;

}

#select-avatar #no-other-avatars-text {
    margin-top: 20px;
    font-size: 11px;
}

#select-avatar .other-avatars li {
    height: 64px;
}

#select-avatar .other-avatars img {
    float: left;
    padding: 0 20px 0 15px;
}

#select-avatar .avatar-info {
    font-weight: bold;
    font-size: 9px;
}

#select-avatar .avatar-select {
    float: right;
    padding: 18px 5px;
}

#select-avatar .avatar-select a {
    color: #017190;
}

#select-avatar .avatar-info-container {
    float:left;
    padding-top: 20px;
}

#footer { padding: 1em; }
#first-avatar-info .play-button .play-text { text-align: center; padding-top: 7px; font-weight: bold; color: #fff; font-size: 18px; } 
#first-avatar-info a { text-decoration: none; }
.play-button { background: transparent url(../images/registration/avatar_select_button.png) no-repeat top left; float: left; width: 145px; height: 40px;}
.play-button-end { background: transparent url(../images/registration/avatar_select_button.png) no-repeat top right; float: right; height: 40px; width: 5px;}
.play-button-container { float: left; width: 150px; height: 40px; padding-top:10px; }
.pick-avatar-container { background: transparent url(../images/registration/avatar_select.png) no-repeat top left; }
.pick-avatar-container-bottom { background: transparent url(../images/registration/avatar_select.png) no-repeat bottom left; height: 10px }
.add-avatar-container { background: transparent url(../images/registration/register_bg3.png) no-repeat top left; }
.add-avatar-container-bottom { background: transparent url(../images/registration/register_bg3.png) no-repeat bottom left; height: 10px }
.link-avatar-container { background: transparent url(../images/registration/register_bg3b.png) no-repeat top left; }
.link-avatar-container-bottom { background: transparent url(../images/registration/register_bg3b.png) no-repeat bottom left; height: 10px }
h1 { color: #fff; font-size: 20px; font-weight: bold; text-align: center; line-height: 42px; margin: 0; padding: 0 }

#select-avatar .habblet-close {
    visibility: hidden;
	position: absolute;
	top: 15px;
	right: 15px;
	cursor: pointer;
	width: 15px;
	height: 15px;
	background: url(../images/close_x.gif) no-repeat;
}

#avatar-choices { float: left; margin-left: 20px; width: 193px }
#selected-avatar {
    background: transparent url(../images/registration/reg_stand.png) no-repeat bottom left;    
    height: 157px;
    width: 106px;
    float: left; 
    margin-top: 42px;
    position: relative; 
}

#selected-avatar img {
    position: absolute;
    bottom: 36px;
    left: 22px;
}

#selected-avatar h3 { position: absolute; top: -42px;}
.field-avatar .selected {
    border: 2px solid lightgreen;
}
.male-avatar, .female-avatar {
    display: block;
    float: left;
    background: transparent url(../images/registration/reg_btn_0.png) no-repeat 0 0;
    height: 61px;
    width: 35px;
    margin: 0 3px 10px 0;
}

.male-avatar:hover, .female-avatar:hover { background-image: url(../images/registration/reg_btn_1.png)} 

#avatar-field-container h3 {
    clear: left;
    font-size: 11px;    
}

#content form { padding: 10px }
.js #check-name, .js #done, #check-name-btn, #done-btn  { display: none }
.js #check-name-btn, .js #done-btn  { display: block }

/* error message styles */
.help, .error-message, textarea {
    margin-bottom: 6px; 
}

.error input,.error select {
    border: 1px solid #e2001a;
}

.error-message {
    color: #e2001a;
}

.error-messages-holder {
    display: none;
}

.error-messages-holder ul {
    padding: 0;
    list-style: none;
}

.error-messages-holder ul li {
    background: transparent url(../images/registration/exclamation.png) no-repeat left 50%;
    line-height: 18px;
    padding-left: 18px;
}

.error-messages-holder ul p {
    margin: 3px 0;
    padding: 0;
}

.error-messages-holder h3 {
    color: #E2001A;
    font-size: 13px;
    margin: 5px 0;
}

.error-messages-holder {
    display: block;
    padding: 0px 10px;
    background-color: #FFF4F2;
    border: 1px solid #E2001A;
    margin-top: 10px;
}

.state-error input.text-field,.state-error input.password-field {
    border: 2px solid #E2001A;
    background: #FFF4F2 url(../images/registration/exclamation.png) no-repeat scroll 99% 50%;
}

.state-error select {
    background-color: #FFF4F2;
    border: 2px solid #E2001A;
}

.state-error label#tos {
    border: 2px solid #E2001A;
    padding: 5px;
}

.state-error .help { /* color: #e2001a; */
    
}

p.help {
    margin-top: 4px;
    color: #a0a0a0;
}

/* form field and label styles */
input.text-field,input.password-field,select {
    font-size: 11px;
    padding: 4px;
    border-style: solid;
    border-color: #C6C6C6 #C6C6C6 #E3E3E3;
    border-width: 1px;
}

label {
    display: block;
    margin-bottom: 4px;
    font-weight: bold;
    margin-right: 10px;
    font-weight: normal;
    padding-top: 3px;
}

#name-suggestions { margin-right: 13px; clear: left;}

#name-suggestions .available p {
    margin-top: 5px;
    border: 3px solid lightgreen;
    padding: 5px 5px 5px 25px;
    background: #DFFFDF url(../images/registration/tick.png) no-repeat 2px 50%;
    line-height: 16px;
}

#name-suggestions .taken {
    margin-top: 5px;
    border: 3px solid #F4DE64;
    padding: 5px;
    background-color: #ffe;
}

#name-suggestions .taken p {
    display: inline;
    padding: 5px 0;
}
#name-suggestions .help { margin-left: 0; }

#name-suggestion-list a {
    text-decoration: none;
    color: #024CC9;
    padding: 2px;
}

#name-suggestion-list a:hover {
    background-color: #eee;
}

#back-link {
    display: block;
    height: 41px;
    line-height: 41px;
    text-align: left;
    padding-left: 10px;
    color: #000;
    font-size: 11px;
    font-weight: bold;    
}

#login-form {
    padding: 10px;
}

#character-login-username, #login-password { width: 290px }
#login-form .field { margin-bottom: 10px }
.avatar-lastonline { font-weight: normal; }
#captcha { margin-top: 5px }