html {
        overflow-y: auto;
        margin: 0px; 
        padding: 0px;
        height: 100%; 
}

body {
        background: url('../docs/layout/surfer.jpg') no-repeat center;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        margin: 0px; 
        padding: 0px;
        height: 100%; 
}


@font-face{
        font-family: 'Source Sans Pro';
        src: url('../../system/font/sourcesanspro-regular.woff2') format('woff2'),
        url('../../system/font/sourcesanspro-regular.woff') format('woff');
        font-display: block;
}
@font-face{
        font-family: 'Source Sans Pro';
        src: url('../../system/font/sourcesanspro-semibold.woff2') format('woff2'),
        url('../../system/font/sourcesanspro-semibold.woff') format('woff');
        font-weight: bold;
        font-display: block;
}


.login {

        font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif; 
        font-size: 14px;
        line-height: 20px;  
        color: rgb(51,50,48);  
        padding: 15px; 
        
        display: block;
        width: 200px; 

}

.login span {
        display: block;
        clear: both;
        width: 200px;
        max-width: 200px;
        padding-right: 16px;
}

.login a.option:link, .login a.option:visited {    

        display: block;  
        
        border-width: 0px;
        height: 32px;
        line-height:32px;
        vertical-align: center;
        width: 200px;
        text-align: left;
        padding-left: 32px;
        
        background-color: rgb(102,100,96); 
        background-image: url('../icon/32/forward.png');
        background-repeat: no-repeat;
        background-position: left center;
        
        font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif; 
        font-size: 14px; 
        color: #FFFFFF;
   
        text-decoration: none;    
}

.login a.option:focus, .login a.option:hover, .login a.option:active { 
        
        background-color: rgb(51,50,48);   
        text-decoration: none;   
}

.login input[type="text"], .login input[type="password"] {
        font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif; 
        font-size: 14px;
        border: 1px solid #999690; 
        padding: 4px; 
        width: 200px;  
        margin-bottom: 8px;
}

.login input[type=submit] {

        border-width: 0px;
        height: 32px;
        width: 200px;
        text-align: left;
        padding-left: 32px;
        
        font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif; 
        font-size: 14px; 
        color: #FFFFFF;
        
        background-color: rgb(95,152,39);   
        background-image: url('../icon/32/forward.png');
        background-repeat: no-repeat;
        background-position: left center;
        
        cursor: pointer;
        
        margin: 8px 0px 32px 0px;

}

.login input[type=submit]:hover {
        background-color: rgb(64,102,27);  
}

.logo {
        margin-top: 32px;
        margin-bottom: 8px; 
}
.message, .error {
        padding-bottom:16px;
}
.error {
        color: rgb(179,33,11);          
}