body {
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    text-align: left;
    font-size: 14px;
    word-wrap: break-word;
    text-rendering: optimizeLegibility;
    margin: 0;
    padding: 0;
    border-width: 0;
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;
    background: #336633 url('../imgs/cs_bg.jpg') repeat left top scroll;
}

#arrow_btn { background: transparent url('../imgs/greenbackground.normal.png') no-repeat center center; width: 64px; height: 59px; margin: 14px 0px 0px 124px; border:none; margin-left:auto; margin-right:auto; }
#arrow_btn:hover { background: transparent url('../imgs/greenbackground.onmouseover.png') no-repeat center center; }
#arrow_btn:active { background: transparent url('../imgs/greenbackground.onmousedown.png') no-repeat center center; }
input {
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;    
    }
input[type=text], input[type=password]  {
    box-shadow: 0 0 6px rgba(0,0,0,0.2);
    border: 1px solid rgba(0,0,0,0.5);
    font-size:14pt; 
    font-weight:bold; 
    width:254px; 
    height:42px; 
    color: #888888;
    background-color:#F8F8F8;
    border-radius: 6px;
    margin: 10px 0px;
    padding-left:10px;
    padding-right:10px;
    }
input[type=text]:focus, input[type=password]:focus  {
    box-shadow: 0 0 8px rgba(0,190,0,1.0);
    border:   1px solid rgba(0, 80,0,1.0);
    color: #333333;
    background-color:#FFFFFF;
    padding-left:10px;
    padding-right:10px;
    }
input.error {
    box-shadow: 0 0 6px rgba(255,0,0,0.8);
    border:   1px solid rgba(180,0,0,0.8);
    }

/* top text container */
#tcontainer { margin-left:auto; margin-right:auto; text-align:center; width:320px; }
/* main container */
#container { margin-left:auto; margin-right:auto; text-align:center; width:320px; height:550px; }
#badgetext { color:#FFFFFF; font-size:18pt; font-weight:bold; text-shadow: 0 0 10px rgba(0,0,0,0.8); margin: 12px 0px; height:24px; }
#keycard { width:100%; height:88%; background-color: #FFFFFF; color: #666666; border-radius: 24px; text-align:center; box-shadow: 0 0 80px rgba(100,100,100,1.0); }
#keyhole { background: transparent url('../imgs/keyhole.png') no-repeat center center; height: 10px; margin: 0 126px; padding: 20px 0; } 
#logo { margin: 15px 10px; }
/* login fields container */
#lfields { padding:0 20px; }
#helptext { color:#AAAAAA; margin: 50px 10px; }


#errorcontainer { margin:20px 0px; height:40px; }
#errormessage { width:100%; height:30px; }
.errorbox { 
    border-width: 1px 0 1px 0; 
    border-style:solid;
    border-color: rgba(255,255,255,0.7);
    text-align:center; padding:4px 0; 
    font-weight: bold; font-size:18pt; color:#DD0000; background-color:rgba(255,255,255,0.5) }