@import url(https://fonts.googleapis.com/css?family=Bree+Serif);

/*******************
SELECTION STYLING
*******************/

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

/*******************
BODY STYLING
*******************/

* {
        margin: 0;
        padding: 0;
        border: none;
        outline: none;
}

body {
        background: url('../images/startback.svg');
        background-size: cover;
        background-attachment: fixed;
        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight:300;
        text-align: left;
        text-decoration: none;
        height: 500px;
}


#wrapper {
        /* Center wrapper perfectly */
        width: 300px;
        height: 400px;
        margin: 70px auto;
}


/*******************
LOGIN FORM
*******************/

.login-form {
        width: 300px;
        margin: 0 auto;
        position: relative;

        background: #fff;
        border: 1px solid #68747E;
        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);
}

/*******************
HEADER
*******************/


.login-form .header {
        padding: 40px 30px 30px 30px;
        text-align: center;
}

.login-form .header h1 {
        font-family: 'Bree Serif', serif;
        font-weight: 300;
        font-size: 28px;
        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: 16px;
        line-height: 16px;
        text-align: center;
        color: #678889;
        text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
}


/*******************
CONTENT
*******************/

.login-form .content {
        padding: 0 30px 25px 30px;
}

/* Input field */
.login-form .content .input {
        width: 188px;
        padding: 15px 25px;

        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        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: #dfe9ec;
        color: #414848;
}

.login-form .content .input:focus {
        background: #dfe9ec;
        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: -1;

        -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:185px; /* Positioning fix for slide-in, got lazy to think up of simpler method. */
        background: rgba(104,116,126,0.75) url(../images/user-icon.png) no-repeat center;
}

.pass-icon {
        top:235px;
        background: rgba(104,116,126,0.75) url(../images/pass-icon.png) no-repeat center;
}

.content input:focus + div{
        left: -46px;
}

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

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

.login-form .footer {
        padding: 25px 30px 40px 30px;
        overflow: auto;
        text-align: center;

        background: #68747E;
        border-top: 1px solid #fff;

        box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
        -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
        -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
}

.login-form .footer h2 {
        font-size: 18px;
        text-align: left;
}
.login-form .footer h3 {
        font-size: 14px;
        text-align: left;
}

/* Login button */
.login-form .footer .button {
        text-align: center;
        float:none;
        padding: 11px 25px;

        font-family: 'Bree Serif', serif;
        font-weight: 300;
        font-size: 18px;
        color: #fff;
        text-shadow: 0px 1px 0 rgba(0,0,0,0.25);

        background: #E00000;
        border: 2px solid #fff;
        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: #7C7C7C;
        border: 2px 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);
}

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

        background: #222;

        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-family: 'Bree Serif', serif;
        font-weight: 300;
        font-size: 18px;
        color: #414848;
        text-shadow: 0px 1px 0 rgba(256,256,256,0.5);
}

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

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

                #nav
                {
                        width: 60em; /* 1000 */
                        font-family: 'Open Sans', sans-serif;
                        font-weight: 400;
                        position: absolute;
                        top: 0%;
                        left: 50%;
                        margin-left: -30em; /* 30 480 */
                }

                        #nav > a
                        {
                                display: none;
                        }

                        #nav li
                        {
                                position: relative;
                        }
                                #nav li a
                                {
                                        color: #fff;
                                        display: block;
                                }
                                #nav li a:active
                                {
                                        background-color: #c00 !important;
                                }

                        #nav span:after
                        {
                                width: 0;
                                height: 0;
                                border: 0.313em solid transparent; /* 5 */
                                border-bottom: none;
                                border-top-color: #efa585;
                                content: '';
                                vertical-align: middle;
                                display: inline-block;
                                position: relative;
                                right: -0.313em; /* 5 */
                        }

                        /* first level */

                        #nav > ul
                        {
                                height: 3.75em; /* 60 */
                                background-color: #e15a1f;
                        }
                                #nav > ul > li
                                {
                                        width: 25%;
                                        height: 100%;
                                        float: left;
                                }
                                        #nav > ul > li > a
                                        {
                                                height: 100%;
                                                font-size: 1.5em; /* 24 */
                                                line-height: 2.5em; /* 60 (24) */
                                                text-align: center;
                                        }
                                                #nav > ul > li:not( :last-child ) > a
                                                {
                                                        border-right: 1px solid #cc470d;
                                                }
                                                #nav > ul > li:hover > a,
                                                #nav > ul:not( :hover ) > li.active > a
                                                {
                                                        background-color: #cc470d;
                                                }


                                /* second level */

                                #nav li ul
                                {
                                        background-color: #cc470d;
                                        display: none;
                                        position: absolute;
                                        top: 100%;
                                }
                                        #nav li:hover ul
                                        {
                                                display: block;
                                                left: 0;
                                                right: 0;
                                        }
                                                #nav li:not( :first-child ):hover ul
                                                {
                                                        left: -1px;
                                                }
                                                #nav li ul a
                                                {
                                                        font-size: 1.25em; /* 20 */
                                                        border-top: 1px solid #e15a1f;
                                                        padding: 0.75em; /* 15 (20) */
                                                }
                                                        #nav li ul li a:hover,
                                                        #nav li ul:not( :hover ) li.active a
                                                        {
                                                                background-color: #e15a1f;
                                                        }


                @media only screen and ( max-width: 62.5em ) /* 1000 */
                {
                        #nav
                        {
                                width: 100%;
                                position: static;
                                margin: 0;
                        }
                }

                @media only screen and ( max-width: 40em ) /* 640 */
                {
                        html
                        {
                                font-size: 75%; /* 12 */
                        }

                        #nav
                        {
                                position: relative;
                                top: auto;
                                left: auto;
                        }
                                #nav > a
                                {
                                        width: 3.125em; /* 50 */
                                        height: 3.125em; /* 50 */
                                        text-align: left;
                                        text-indent: -9999px;
                                        background-color: #e15a1f;
                                        position: relative;
                                }
                                        #nav > a:before,
                                        #nav > a:after
                                        {
                                                position: absolute;
                                                border: 2px solid #fff;
                                                top: 35%;
                                                left: 25%;
                                                right: 25%;
                                                content: '';
                                        }
                                        #nav > a:after
                                        {
                                                top: 60%;
                                        }

                                #nav:not( :target ) > a:first-of-type,
                                #nav:target > a:last-of-type
                                {
                                        display: block;
                                }


                        /* first level */

                        #nav > ul
                        {
                                height: auto;
                                display: none;
                                position: absolute;
                                left: 0;
                                right: 0;
                        }
                                #nav:target > ul
                                {
                                        display: block;
                                }
                                #nav > ul > li
                                {
                                        width: 100%;
                                        float: none;
                                }
                                        #nav > ul > li > a
                                        {
                                                height: auto;
                                                text-align: left;
                                                padding: 0 0.833em; /* 20 (24) */
                                        }
                                                #nav > ul > li:not( :last-child ) > a
                                                {
                                                        border-right: none;
                                                        border-bottom: 1px solid #cc470d;
                                                }


                                /* second level */

                                #nav li ul
                                {
                                        position: static;
                                        padding: 1.25em; /* 20 */
                                        padding-top: 0;
                                }
                }