h2 {
    position: relative;
}

span.beta {
    color: red;
    font-weight: bold;
    font-variant: italic;
    background-color: #faa;
    padding: 0 0.2em 0;
    border: 1px solid #f99;
    opacity: 0.8;
    font-size: 60%;
    margin-bottom: 1em;
    top: 1em;
    right: 0.8em;
    position: absolute;
}

#profile .about, #profile .disclaimer {
    margin-left:180px;
}

#profile-title-panel {
    padding-top:1.2em;
    padding-bottom:1.2em;
}


#profile .br {
    overflow: hidden;
    padding: 0.5em;
}

#profile .about p { margin:0;}

h1 small { 
    display:block;
    padding-top: 1.2em;
    line-height: 11px;
}

.profile-photo-holder {
    float: left;
    width: 140px;
    margin-right:40px;
}
.profile-photo {
    width:140px;
    height:140px;
    background-position:center;
    border-radius:130px;
    position:relative;
}

.profile-photo-holder a:hover .profile-photo {
    opacity:0.2;
}

#profile h3 {
    float: left;
    padding: 0 0 0.5em;
}


.profile-results {
    text-align:center;
}

.profile-results h2 {
font-size: 22px;
padding-bottom: 10px;
}


.result-values {
    text-align:center;
}

.result-values li {
    padding-bottom:3px;
}

.result-values .main {
    padding-bottom:20px;
}

.result-values .main .value {
    font-size:60px;
    display:block;
    font-weight:800;
    color:#222;
    line-height:55px;
}

.result-values .value.important {
    font-weight:800;
    font-size:20px;
    color:#222;
}

.cups img {
    height:64px;
    margin:auto;
    display:block;
    margin-bottom:10px;
}

.cups img.large-cup {
    width:230px;
    height:230px;
}

.cups li { 
    width:120px; 
    display:inline-block;
    margin:8px;
    text-align:center;
    vertical-align:bottom;
}

.cups li.large {
    width:256px;
}

ul.avatar-list {
    float: left;
    width: 48%;
}

ul.avatar-list.man {
    padding-left: 1.9%;
    border-left: 0.1px solid #d3d3d3;
}

ul.avatar-list li {
    float: left;
    width: 132px;
    text-align: center;
}

ul.avatar-list a {
    display: block;
    width: 130px;
    height: 160px;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
}

ul.avatar-list span {
    display: none;
}

ul.avatar-list li.facebook span.fb {
    background-image: url(/static/img/fb/logo/FB-f-Logo__blue_29.png);
    background-repeat: no-repeat;
    background-position: 97px 116px;
    display: block;
    width: 130px;
    height: 160px;
    position: absolute;
    top: 0;
    left: 0;
}

/*
 * Registration.
 */

#check-availability {
    margin: 0.5em 0 0.5em;
}

#check-availability input {
    width: auto;
    padding: 0.1em;
    font-style: italic;
}

#login-availability {
    font-style: italic;
    font-weight: bold;
    padding: 0.1em 0.1em 0.1em 1em;
}

#register-profits h2 {
    padding: 0 0 0.5em;
}

#register-profits ul {
    padding: 1em 0 1em;
}

#register-profits ul li {
    padding: 0.2em 0 0.2em 0;
    margin-left: 1.5em;
    list-style: circle;
}

#registration-info p {
    padding: 0.5em 0 0.5em;
}

/*
 * Regulations.
 */
#acceptance-link {
    text-align: center;
    font-size: 200%;
}

#rules-acceptance p {
    padding: 0.5em 0 0.5em;
}

#rules-container {
    height:300px;
    overflow-y:scroll;
    width:80%; 
    border:1px solid #eee;
    margin-top:20px;
    margin-bottom:20px;
    margin-left:auto;
    margin-right:auto;
    background-color:#f3f3f3;
    padding:20px;
}
/*
 * Account removal.
 */
#account-removal p {
    padding: 0.5em 0 0.5em;
}

#removal-link {
    text-align: center;
    font-size: 200%;
}

#removal-link a {
    display: block;
}

#removal-link a.remove {
    padding-top: 1em;
    font-size: 50%;
    color: black;
}

/*
 * Login.
 */
#login-form {
    background: url('/static/img/szaradaman/hello.png') no-repeat right bottom;    
}

@media screen and (max-width: 800px){ 
    #login-form {
        background:none;        
    }
}

/*
 * Account joining.
 */
#account-connect p {
    padding: 0.5em 0 0.5em;
}

#account-connect p.option {
    font-size: 150%;
    padding-left: 5em;
}

#account-connect div.r {
    margin: 0 10em 0;
}

#connect-form #same-email-users {
    padding: 0 0.5em 0;
    font-size: 120%;
}

#connect-form #same-email-users span {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}


#login-form a  {
    text-decoration: underline;
}

#chart-best-solvers {
    height:200px;
}

.profile-photo-holder {
    position:relative;
}
.change-message {
    text-align: center;
    position: absolute;
    width: 100%;
    top: 45px;
    font-size: 30px;
    opacity:0;
    transition:all ease-in-out 0.2s;
}

.profile-photo-holder a:hover .change-message {
    top:50px;
    opacity:1;
}

@media screen and (max-width: 800px){
    .profile-photo-holder {
        margin-right:10px;
    }

    #profile .about, #profile .disclaimer {
        margin-left: 150px;
    }


}

.responsive-form input {
    width:100%;
    box-sizing:border-box;
    display:block;

}

.responsive-form .vSubmit input {
    width:100%;
    box-sizing:border-box;
    display:block;    
}


.responsive-form form label {
    font-weight:600;
    padding-bottom:0.2em;
}

.responsive-form form input[type="checkbox"] {
    width: auto;
    width: 30px;
    display: inline-block;    
    position: relative;
    top: 3px;
}


@media screen and (min-width: 800px){ 
    .responsive-form p {
        position:relative;
    }

    .responsive-form label {
        position: absolute;
        right: 100%;
        text-align: right;
        top: 3px;
    }

    .responsive-form p, .responsive-form input, .responsive-form .button.facebook-login {
        max-width:300px; 
        width:300px;       
        margin-left:auto;
        margin-right:auto;                
    }


}