::selection
{
    color: #fff;
    background: #CCCCCC; /* Safari */
}
::-moz-selection
{
    color: #fff;
    background: #CCCCCC; /* Firefox */
}

body
{
   background: rgb(53,106,160); /* Old browsers */
background: -moz-linear-gradient(left, rgba(53,106,160,1) 0%, rgba(53,106,160,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(53,106,160,1) 0%,rgba(53,106,160,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(53,106,160,1) 0%,rgba(53,106,160,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#356aa0', endColorstr='#356aa0',GradientType=1 );
    font-family: Calibri;
    font-size: 16px;
}


#wrapper
{
    /* Center wrapper perfectly */
    width: 300px;
    height: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -160px;
}

.login-form
{
    width: 335px;
    margin: 0 auto;
    position: relative;
    z-index: 5; /*background: #EEEEEE;*/
    border: 1px solid #fff;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    background: rgba(242,246,248,1);
    background: -moz-linear-gradient(left, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 32%, rgba(224,239,249,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(242,246,248,1)), color-stop(32%, rgba(216,225,231,1)), color-stop(100%, rgba(224,239,249,1)));
    background: -webkit-linear-gradient(left, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 32%, rgba(224,239,249,1) 100%);
    background: -o-linear-gradient(left, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 32%, rgba(224,239,249,1) 100%);
    background: -ms-linear-gradient(left, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 32%, rgba(224,239,249,1) 100%);
    background: linear-gradient(to right, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 32%, rgba(224,239,249,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9', GradientType=1 );
}

.login-form .header
{
    padding: 10px 30px 30px 30px;
}

.login-form .header h1
{
    font-weight: bold;
    font-size: 20px;
    line-height: 34px;
    color: #414848;
    text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
    margin-bottom: 10px;
}

.login-form .header span
{
    font-size: 13px;
    line-height: 16px;
    color: #678889;
    text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
}
.login-form .content
{
    padding: 0 30px 25px 30px;
}

/* Input field */
.login-form .content .input
{
    width: 188px;
    padding: 15px 25px;
    font-family: Calibri;
    font-weight: 400;
    font-size: 14px;
    color: #9d9e9e;
    text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
    background: #fff;
    border: 1px solid #fff;
    border-radius: 5px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
    -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
    -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
}

/* Second input field */
.login-form .content .password, .login-form .content .pass-icon
{
    margin-top: 25px;
}

.login-form .content .input:hover
{
    background: #F9F3EE;
    color: #414848;
}

.login-form .content .input:focus
{
    background: #F9F3EE;
    color: #414848;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}

.user-icon, .pass-icon
{
    width: 46px;
    height: 47px;
    display: block;
    position: absolute;
    left: 0px;
    padding-right: 2px;
    z-index: 3;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
}

.user-icon
{
    top: 133px; /* Positioning fix for slide-in, got lazy to think up of simpler method. */
    background: rgba(65,72,72,0.75) url(image/user-icon.png) no-repeat center;
}

.pass-icon
{
    top: 208px;
    background: rgba(65,72,72,0.75) url(image/pass-icon.png) no-repeat center;
}

/* Animation */
.input, .user-icon, .pass-icon, .button, .register
{
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
}

/*******************
FOOTER
*******************/

.login-form .footer
{
    padding: 0px 0px 10px 0px;
}

/* Login button */
.login-form .footer .button
{
    float: right;
    padding: 5px 25px;
    font-weight: 300;
    font-size: 18px;
    color: #FFFFFF;
    text-shadow: 0px 1px 0 rgba(0,0,0,0.25);
    /*background: #808055;*/
    background: rgb(181,189,200); /* Old browsers */
    background: -moz-linear-gradient(left, rgba(181,189,200,1) 0%, rgba(130,140,149,1) 0%, rgba(130,140,149,1) 100%, rgba(40,52,59,1) 100%, rgba(130,140,149,1) 101%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 0%,rgba(130,140,149,1) 100%,rgba(40,52,59,1) 100%,rgba(130,140,149,1) 101%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 0%,rgba(130,140,149,1) 100%,rgba(40,52,59,1) 100%,rgba(130,140,149,1) 101%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#828c95',GradientType=1 );
    border: 1px solid #FFFFFF;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
    -moz-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
    -webkit-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
}

.login-form .footer .button:hover
{
    /*background: #E3E3D5;*/
    background: -moz-linear-gradient(left, rgba(235,233,249,1) 0%, rgba(216,208,239,1) 0%, rgba(206,199,236,1) 27%, rgba(193,191,234,1) 100%);
    background: -webkit-linear-gradient(left, rgba(235,233,249,1) 0%,rgba(216,208,239,1) 0%,rgba(206,199,236,1) 27%,rgba(193,191,234,1) 100%);
    background: linear-gradient(to right, rgba(235,233,249,1) 0%,rgba(216,208,239,1) 0%,rgba(206,199,236,1) 27%,rgba(193,191,234,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebe9f9', endColorstr='#c1bfea',GradientType=1 );
    border: 1px solid rgba(256,256,256,0.75);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
    color: #666633;
}

.login-form .footer .button:focus
{
    position: relative;
    bottom: -1px;
    background: #C5C5A7;
    box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
    -moz-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
    -webkit-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
}

/* Register button */
.login-form .footer .register
{
    display: block;
    float: right;
    padding: 10px;
    margin-right: 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    color: #414848;
    text-shadow: 0px 1px 0 rgba(256,256,256,0.5);
    text-decoration: underline;
}

.login-form .footer .register:hover
{
    color: #999999;
}

.login-form .footer .register:focus
{
    position: relative;
    bottom: -1px;
}