/* 
    Document   : style
    Created on : Jun 3, 2012, 11:00:50 PM
    Author     : Zoran Makrevski
    E-Mail     : zmakrevski@gmail.com
    Description:
        Styling the new back office  
*/

@import url('../css/reset-login.css');

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
 
.clearfix {
    display: inline-block;
}

/* CLEAR FIX*/
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix { 
    height: 1%;
}
.clearfix {
    display: block;
}
/* End hide from IE-mac */


/* font faces used */
@font-face {
    font-family: 'AllerBold';
    src: url('../fonts/aller_bd-webfont.eot');
    src: url('../fonts/aller_bd-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/aller_bd-webfont.woff') format('woff'),
    url('../fonts/aller_bd-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AllerBoldItalic';
    src: url('../fonts/aller_bdit-webfont.eot');
    src: url('../fonts/aller_bdit-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/aller_bdit-webfont.woff') format('woff'),
    url('../fonts/aller_bdit-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AllerItalic';
    src: url('../fonts/aller_it-webfont.eot');
    src: url('../fonts/aller_it-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/aller_it-webfont.woff') format('woff'),
    url('../fonts/aller_it-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body{  /* main body element */
    width:1020px;
    margin:0 auto;
    //background-image: url("../img/bg/crisp_paper_ruffles.png");
    background-image: url("../img/bg/gplaypattern.png");
    //background-image: url("../img/bg/halftone.png");
    //background-image: url("../img/bg/p6.png");
    //background-image: url("../img/bg/small_steps.png");
    //background-image: url("../img/bg/sprinkles.png");
    background-color: #e0e0e0;
}

#loginBox { /* login box */
    width:615px;
    height:365px;
    margin:40px auto;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    border-radius:9px;
    -webkit-box-shadow: 0 12px 9px -9px black;
    -moz-box-shadow: 0 12px 9px -9px black;
    box-shadow: 0 15px 9px -9px black;
    /*background-image: url('../images/boxpattern.jpg');*/
    /*background-repeat: no-repeat;*/
    background-color: #f1f1f1;
    border:1px solid;
    border-color: #e0e0e0;
}

#siteInfo { /* left side of the login box */
    float:left;
    width:210px;
    text-align:center;
}

#siteInfo h5 { /* administration area text */
    margin-top:80px;
    color:#278CB6;
    font-family: AllerBoldItalic, Verdana, Helvetica, sans-serif;
    font-size:18px;
    margin-bottom:20px;  
    margin-left:20px;
    text-align:left !important;
}

#header {
    width:100%;
    margin:0 auto;
    margin-top:80px;
}

#header h5 { /* administration area text */
    margin-top:150px;
    color:#278CB6;
    font-family: AllerBoldItalic, Verdana, Helvetica, sans-serif;
    font-size:18px;
    text-align:center !important;
}

#siteInfo span { /* site name text */
    color:#333333;
    font-family: AllerBoldItalic, Verdana, Helvetica, sans-serif;
    font-size:14px;  
}

#siteInfo img{ /* separator thin vertical line */
   float:right;
   margin-right:10px;
   margin-top:16px;
}

#loginForm { /* login form */
    float:left;
    width:405px;
}

#errMessageDiv { /* due the jquery issues vith visibilty hidden, I added this div as placeholder */
    height:30px;
    width:360px;
    margin-right:17px;
    margin-top: 10px;
    margin-bottom:25px;
}

#errorMessageTop { /* error messages for login form - invalid credentials */
    height:30px;
    width:360px;
    background-color:#278CB6;
    margin-right:17px;
    margin-top: 10px;
    margin-bottom:25px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius:5px;
    display:none;
    height:40px;
}
.wrongCredentials { /* message displayed when user enter wrong user name or password */
    color:#ffffff;
    font-family: AllerItalic, Verdana, Helvetica, sans-serif;
    font-size:14px;
    text-align:center;
    padding-top:6px;
}


#loginForm input[type='text'],#loginForm input[type='password'], #loginForm input[type='email'],#forgotPasswordForm input[type='text'],#forgotPasswordForm input[type='password'], #forgotPasswordForm input[type='email']   { /* text and password form fields */
    margin-top:5px;
    width:225px;
    height:24px;
    margin-bottom:20px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius:5px;
}

#loginForm input[type='submit'],#forgotPasswordForm input[type='submit']{ /* submit button for the login form */
    width:100px;
    height:25px;
    margin-bottom:16px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 3px 10px 6px;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    line-height: 1;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    border:1px solid;
    border-color:#00537a;
    position: relative;
    cursor: pointer;
    background-color: #134776;
}

#loginForm input[type='submit']#login, #forgotPasswordForm input[type='submit']#send{ /* position the buttons in both forms */
    margin-left:129px;
    background-color:#278CB6;
}

#loginForm input[type='submit']#login:hover, #forgotPasswordForm input[type='submit']:hover{ /* code for hower color of the text on the buttons */
    color:#ffffff;
    background-color:#00537a;
}

.forgotPassword  { /* forgot password text */
    display:block;
    text-decoration:none;
    margin-bottom:15px;
    color:#000000;
    font-family: AllerBoldItalic, Verdana, Helvetica, sans-serif;
    font-size:14px;
    cursor: pointer;
}

input::-webkit-input-placeholder { /* place holder in the email field */
    color:#4C5255;
    font-family: AllerBoldItalic, Verdana, Helvetica, sans-serif;
    font-size:12px;
}

input:-moz-placeholder { /* place holder in the email field */
    color:#4C5255;
    font-family: AllerBoldItalic, Verdana, Helvetica, sans-serif;
    font-size:12px;
}

input:o-placeholder { /* place holder in the email field */
    color:#4C5255;
    font-family: AllerBoldItalic, Verdana, Helvetica, sans-serif;
    font-size:12px;
}

#loginForm label { /* user name and password labels */
    color:#000000;
    font-family: AllerBoldItalic, Verdana, Helvetica, sans-serif;
    font-size:14px;
    display:block; 
}

.requiredFieldDiv { /* place holder div for the box displayed right of the fields when user try to submit empty form , again added due the jquery issue with visibilithy : hidden */
    width:113px;
    height:28px;
    float:right;
}

.requiredFieldMsg1, .requiredFieldMsg2 ,.requiredFieldMsg3 { /* box displayed right of the fields when user try to submit empty form */
    width:113px;
    height:28px;
    background-color:#278CB6;
    float:right;
    margin-right:32px;
    margin-top:6px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius:5px;
    display:none;
}

.jsdiserr {
    color:#a00b11;
    font-family: AllerBoldItalic, Verdana, Helvetica, sans-serif;
    font-size:14px;
    text-align:center;
}

.login_logo {
    padding-top:50px;
}

#successMailMessage {
   height:30px;
    width:375px;
    background-color:#278CB6;
    margin-right:17px;
    margin-top: 10px;
    margin-bottom:15px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius:5px;
    padding-left:1px;
    display:none;
   
} 

#errorMailMessage {
   height:30px;
    width:360px;
    background-color:#278CB6;
    margin-right:17px;
    margin-top: 10px;
    margin-bottom:15px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius:5px;
    padding-left:10px;
    display:none;
   
} 


.wrongEmail { /* message displayed when user enter wrong user name or password */
    color:#fff;
    font-family: AllerItalic, Verdana, Helvetica, sans-serif;
    font-size:14px;
    padding-top:6px;
}