﻿

body { font-family: Verdana, sans-serif; font-size: 14px; background: #DEE6E6; margin: 0; padding: 0; text-align: left; }
div.message { margin: 12px auto; text-align: left; color: Red; }

#login-wrap { width: 500px; margin: 60px auto 0 auto;  } 
#login-box {  background-color: #F2F6FA; padding: 10px; border: 1px solid #9B9696; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 0 9px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 0 9px;
    box-shadow: rgba(0, 0, 0, 0.2) 0 0 9px;
}

#login-header { padding: 12px; border: 1px solid #9B9696;

    background-color: #F4F4F4;
    background-image: -o-linear-gradient(top, #FCFCFC, #F4F4F4);
    background-image: -ms-linear-gradient(top, #FCFCFC, #F4F4F4);
    background-image: -moz-linear-gradient(top, #FCFCFC, #F4F4F4);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FCFCFC), to(#F4F4F4));
    background-image: -webkit-linear-gradient(top, #FCFCFC, #F4F4F4);
    background-image: linear-gradient(top, #FCFCFC, #F4F4F4);
    text-shadow: 0 1px 0 #FFF;
    zoom: 1;

}

#login-contents-wrap { background-color: #fff; border: 1px solid #9B9696; border-top: none; }

#login-contents-inner { text-align: center; padding: 25px 20px 0 20px; }

#login-contents-bottom { padding: 15px 15px 5px 20px; text-align: right; }

#login-bottom-message { margin: 12px auto 0 auto; color: #818181; padding: 0 0 0 5px; font-size: 12px; }
#login-bottom-message a, #login-bottom-message a:visited { text-decoration: underline; }
#login-bottom-message a:hover { text-decoration: underline; }

/* these are applied to all links including #login-contents-bottom and #login-bottom-message */
#login-wrap a, #login-wrap a:visited, #login-wrap a:hover
    {  color: #818181;  }
#login-wrap a:hover
    { color: #6F6E6E;  }

#login-contents-bottom a, #login-contents-bottom a:visited, #login-contents-bottom a:hover { font-size: 11px; text-decoration: none; }


#login_btn { border: 1px solid #DACEBA; cursor: pointer; 
    -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px;

    background: #f2eac9; /* Old browsers */
    background: -moz-linear-gradient(top,  #f2eac9 0%, #f5e8da 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2eac9), color-stop(100%,#f5e8da)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f2eac9 0%,#f5e8da 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f2eac9 0%,#f5e8da 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f2eac9 0%,#f5e8da 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #f2eac9 0%,#f5e8da 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2eac9', endColorstr='#f5e8da',GradientType=0 ); /* IE6-9 */

            
    -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);

}
#login_btn .keys { display: inline-block; padding: 12px 21px 9px 38px; font-size: 15px; color: #83766D; font-weight: bold; background: transparent url(https://www.azonetwork.com/images/login-keys_24.png) no-repeat 4px 8px; }

#login_btn:hover { 

    background: #efe6bf; /* Old browsers */
    background: -moz-linear-gradient(top,  #efe6bf 0%, #f2e2d0 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efe6bf), color-stop(100%,#f2e2d0)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #efe6bf 0%,#f2e2d0 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #efe6bf 0%,#f2e2d0 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #efe6bf 0%,#f2e2d0 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #efe6bf 0%,#f2e2d0 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efe6bf', endColorstr='#f2e2d0',GradientType=0 ); /* IE6-9 */

    -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);


}

#login_btn:hover .keys { color: #726861; }

@media only screen and (max-device-width: 640px) {
    #login-wrap { width: 260px; }
}

