﻿body {
   color: #333333;
   font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
   font-size: 12px;
   margin-top: 20px;
}

body > div {
   min-width: 450px;
   max-width: 525px;
   margin: 0 auto;
}

#login {
   width: 514px;
   min-height: 277px;
   border: 1px solid #FFFFFF;
   border-radius: 6px 6px 6px 6px;
   box-shadow: 0 0 1px 0;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   /* IE10 Consumer Preview */
   background-image: -ms-linear-gradient(top, #FFFFFF 0%, #F7F7F7 100%);
   /* Mozilla Firefox */
   background-image: -moz-linear-gradient(top, #FFFFFF 0%, #F7F7F7 100%);
   /* Opera */
   background-image: -o-linear-gradient(top, #FFFFFF 0%, #F7F7F7 100%);
   /* Webkit (Safari/Chrome 10) */
   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #F7F7F7));
   /* Webkit (Chrome 11+) */
   background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #F7F7F7 100%);
   /* W3C Markup, IE10 Release Preview */
   background-image: linear-gradient(to bottom, #FFFFFF 0%, #F7F7F7 100%);
}

#login > h1 {
   color: lightgray;
   text-align: center;
   font-size: 70px;
   text-shadow:
   0 0 3px #AFAFAF,
   0 0 3px #AFAFAF,
   0 0 3px #AFAFAF,
   0 0 3px #AFAFAF;
   margin: 32px 0;
}

/* Alert Message Styling */
.alert-error {
   display: inline-block;
   position: relative;
   width: 100%;
   background-color: #F2DEDE;
   border-bottom: 1px solid #FDC5C5;
   border-top: 1px solid #FDC5C5;
   color: #B94A48;
   font-size: 18px;
   margin: -12px -1px 15px;
   padding: 10px 1px;
   text-align: center;
}

#login > form > div {
   text-align: center;
}

/* Inputs */
input:not([type="submit"]) {
   height: 18px;
}

input, button {
   padding: 3px;
   border-radius: 6px 6px 6px 6px;
   border: 1px solid #CCCCCC;
}

input:not([type="submit"]):active,
input:not([type="submit"]):focus {
   border-radius: 6px 6px 6px 6px;
}

[data-icon]:after {
   content: attr(data-icon);
}

input#username:hover,input#password:hover {
   border: 1px solid #888888;
   border-radius: 6px 6px 6px 6px;
}

button input:not([type="submit"]):active,
button input:not([type="submit"]):focus {
   background: rgb(103, 103, 103);
   border: 1px solid #CCCCCC;
}

input:focus, textarea:focus {
   border-color: #52a8ec;
   border-color: rgba(82, 168, 236, 0.8);
   box-shadow: 0 1px 1px #000000 inset, 0 0 8px #52a8ec;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
   outline: 0 none;
}

input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, select:focus:required:invalid:focus {
   border-color: #E9322D;
   box-shadow: 0 0 6px #F8B9B7;
}
input:focus:required:invalid, textarea:focus:required:invalid, select:focus:required:invalid {
   border-color: #EE5F5B;
   color: #B94A48;
}

/* Login Button */
button, input[type="button"], input[type="reset"], input[type="submit"] {
   cursor: pointer;
}

.btn-sign {
   background: #8c8c8c; /* Old browsers */
   background: -moz-linear-gradient(top, #8c8c8c 0, #222222 100%, #222222 100%, #222222 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#8c8c8c), color-stop(100%,#222222), color-stop(100%,#222222), color-stop(100%,#222222)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, #8c8c8c 0,#222222 100%,#222222 100%,#222222 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, #8c8c8c 0,#222222 100%,#222222 100%,#222222 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top, #8c8c8c 0,#222222 100%,#222222 100%,#222222 100%); /* IE10+ */
   background: linear-gradient(to bottom, #8c8c8c 0,#222222 100%,#222222 100%,#222222 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c8c8c', endColorstr='#222222',GradientType=0 ); /* IE6-9 */
   background-repeat: repeat-x;
   border-color: #000000 #000000 #000000;
   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
   color: white;
}

.btn-sign:hover {
   background: #555555; /* Old browsers */
   background: -moz-linear-gradient(top, #555555 0, #222222 100%, #222222 100%, #222222 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#555555), color-stop(100%,#222222), color-stop(100%,#222222), color-stop(100%,#222222)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, #555555 0,#222222 100%,#222222 100%,#222222 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, #555555 0,#222222 100%,#222222 100%,#222222 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top, #555555 0,#222222 100%,#222222 100%,#222222 100%); /* IE10+ */
   background: linear-gradient(to bottom, #555555 0,#222222 100%,#222222 100%,#222222 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555555', endColorstr='#222222',GradientType=0 ); /* IE6-9 */
   color: #FAFAFA;
}

/* Privacy Policy*/
.privacy-policy {
   width: 46%;
   margin: 0 auto;
   color: #BA2A00;
}

#login img {
   height: 67px;
   margin-top: 35px;
   margin-bottom: 25px;
}

#loginForm > div button,
#loginForm > div label,
.login.button {
   font-size: 11px;
   text-transform: uppercase;
   font-weight: bolder;
   padding: 5px;
}

#loginForm > div button,
.login.button {
   font-size: 10px;
   color: #DDDDDD;
   text-transform: uppercase;
   font-weight: bolder;
}

.login.button {
   padding: 5px 20px;
}