/*
 * @package AJAX_Chat
 * @author Sebastian Tschan
 * @copyright (c) Sebastian Tschan
 * @license GNU Affero General Public License
 * @link https://blueimp.net/ajax/
 */


@import url('positions.css');
@import url('borders.css');
@import url('fonts.css');
@import url('misc.css');
@import url('print.css');


/*
 * Colors
 */

@media screen,projection,handheld {

    body {
        background: #ececec;
    }
    #headlineContainer {
        background:url(../img/header_logo_silver.jpg) no-repeat;
        width: 355px;
        height: 73px;
    }
    #submitGumb {
        background: url(../img/gumb_submit_silver.jpg) no-repeat;
        width: 64px;
        height: 30px;
    }
    #logoutGumb {
        background: url(../img/gumb_logout_silver.jpg) no-repeat;
        width: 64px;
        height: 30px;
    }
    .inputRound{
        margin:0px;
        height:23px;
        width:157px;
        background:url(../img/input_bg.jpg) no-repeat bottom;
        margin-left: 55px;
}
    /* attributes of the input box */
    .roundLogin {
        background:none;
        border:none;
        width:135px;
        height:13px;
        margin:0;
        margin-top: 2px;
        padding: 3px 7px 3px 7px;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:11px;
}
    #napomena {
        color: #fff;
        padding: 20px;
        padding-top: 30px;
        text-align: justify;
        font-family:  Verdana, Arial, sans-serif;
        font-size: 14px;
    }
    #napomena h4 {
        font-size: 12px;
    }
    #ulaz {
        color: #fff;
        font-size: 26pt;
        padding: 25px;
        text-align: center;
        font-family:  Verdana, Arial, sans-serif; 
    }
    .ulaz {
        color: #fff;
    }
    .ulaz label {
        font-size: 17px;
        float: left;
        margin-left: 65px;
        margin-top: 50px;
        font-weight: bold;
    }
    .nick {
        color: #fff;
        text-align:center;
    }
    .nick label {
        float: left;
        font-size: 17px; 
        margin-left: 65px;
        margin-bottom: 10px;
        font-weight: bold;
    }
    .prvi {
        position: absolute;
        top: 45px;
        right: 20px;
    }
    
    .drugi {
        position: absolute;
        top: 185px;
        right: 20px;
    }
    
    .treci {
        position: absolute;
        top: 325px;
        right: 20px;
    }
    
    .g {
        font-size: 10px;
        color: #338fea;
        margin-bottom: 2px;
        vertical-align: top;
    }
    .g a {
        color: #338fea !important;
        font-size: 11px; 
    }
    
    .gq {
        font-size: 11px;
        color: #338fea;
        margin-bottom: 2px;
        vertical-align: top;
    }
    .gq a {
        color: #338fea !important;
        font-size: 12px; 
    }
    
    #footer_lijevi {
        float: left;
        margin-top: 10px;
        margin-left: 70px;
    }
    #footer_desni {
        float: left;
        margin-top: 10px;
        margin-left: 20px;
    }
    
    #oblo {
        height: 28px;
        width: 10px;
    }
    
    #loginFormContainer label {
        font-size: 13pt;
        color: #fff;
        font-family:  Verdana, Arial, sans-serif;
        letter-spacing: 0.5px;
    }
    
    #loginFormContainer label span {
        font-size: 8pt;
        color: #fff;
        font-family:  Verdana, Arial, sans-serif;
        font-stretch: extra-expanded;
    }
    
    #loginFormContainer select {
        font-size: 13pt;
        font-family:  Verdana, Arial, sans-serif;
        font-stretch: extra-expanded;
        border: 1px solid #2587e9;
        width: 180px;
        margin-top: 30px;
    }

    #screenCenter {
        width:758px;
        height:570px;
        position:absolute;
        top:50%;
        left:50%;
        margin:-285px auto auto -379px;
    }
    
    #loginContent {
        background-color:#d9e7ff;
        color:#000;
        margin: 0;
        padding: 0;
    }
    #loginContent h1 {
        color:#000;
    }
    #loginContent a {
        color:#000;
    }
    #loginContent input, #loginContent select {
        background-color:#FFF;
        color:#000;
    }
    #loginContent #loginFormContainer  {
        background-color:#F7F5F1;
        color:#000;
    }
    #loginButton {
        float: right;
        margin-right: 60px;
        margin-top: 30px;
    }
    #loginContent #errorContainer {
        color:red;
    }
    
    #content {
        background-color:#ececec;
        color:#000;
    }
    #content h1 {
        color:#000;
    }
    #content a {
        color:#000;
    }
    #content input, #content select {
        background-color:#febba9;
        color:#000;
    }
    #content textarea {
        background-color:#fff;
        color:#000;
        border: 2px solid #777777;
    }
    #content #chatList, #content #onlineListContainer, #content #helpContainer, #content #settingsContainer, #content #bbCodeContainer, #content #colorCodesContainer, #content #emoticonsContainer {
        border-color:#777777;
        background-color:#bebdbd;
    }
    #content #bbCodeContainer input, #content #logoutButton, #content #submitButton {
        background-color:#F7F5F1;
        color:#000;
    }
    #content #colorCodesContainer a {
        border-color:black;
    }
    #content #optionsContainer input {
        background-color:transparent;
    }
    #content #optionsContainer #helpButton {
        background:url('../img/help.png') no-repeat;
    }
    #content #optionsContainer #settingsButton {
        background:url('../img/settings.png') no-repeat;
    }
    #content #optionsContainer #onlineListButton {
        background:url('../img/users.png') no-repeat;
    }
    #content #optionsContainer #audioButton {
        background:url('../img/audio.png') no-repeat;
    }
    #content #optionsContainer #audioButton.off {
        background:url('../img/audio-off.png') no-repeat;
    }
    #content #optionsContainer #autoScrollButton {
        background:url('../img/autoscroll.png') no-repeat;
    }
    #content #optionsContainer #autoScrollButton.off {
        background:url('../img/autoscroll-off.png') no-repeat;
    }
    #content .rowEven {
        background-color:#bebdbd;
    }
    #content .rowOdd {
        background-color:#cecece;
    }
    #content .guest {
                color: #00255d; 
    }
    #content .user {
        color:#000;
    }
    #content .moderator {
        color:#00AA00;
    }
    #content .admin {
        color:red;
    }
    #content .chatBot {
        color:#302f2f;
    }
    #content #chatList .chatBotErrorMessage {
        color:red;
    }
    #content #chatList a {
        color:#1E90FF;
    }
    #content #chatList .delete {
        background:url('../img/delete.png') no-repeat right;
    }
    #content #chatList .deleteSelected {
        border-color:red;
    }
    #content #onlineListContainer h3, #content #helpContainer h3, #content #settingsContainer h3 {
        background-color:#777777;
        color:#fff;
    }
    #content #settingsContainer #settingsList input.playback {
        background:url('../img/playback.png') no-repeat;
    }

}