html
{
    min-height : 101%;
}

body
{
    height      : 100%;
    margin      : 0;
    padding     : 0;
    background  : url('/img/wrapper.jpg') no-repeat center center / cover fixed;
    font-family : 'Roboto', sans-serif;
    font-weight : 300;
    color       : #666;
}

b,
strong
{
    font-weight : 700;
}

body,
body *
{
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
}

input[type=submit],
button[type=submit],
.button
{
    display            : inline-block;
    font-size          : 1em;
    text-decoration    : none;
    line-height        : 1.45;
    padding            : 4px 16px;
    background-color   : #4e4e4e;
    color              : #fff;
    border             : 1px solid transparent;

    -moz-box-shadow    : 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0) inset;
    -webkit-box-shadow : 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0) inset;
    box-shadow         : 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0) inset;
}

input[type=submit]:hover,
button[type=submit]:hover,
.button:hover
{
    text-decoration    : none;

    -moz-box-shadow    : 0 0 2px rgba(0, 0, 0, 0), 2px 2px 2px rgba(0, 0, 0, 0.6) inset;
    -webkit-box-shadow : 0 0 2px rgba(0, 0, 0, 0), 2px 2px 2px rgba(0, 0, 0, 0.6) inset;
    box-shadow         : 0 0 2px rgba(0, 0, 0, 0), 2px 2px 2px rgba(0, 0, 0, 0.6) inset;
}

input[type=submit].yellow,
button[type=submit].yellow,
.button.yellow
{
    background-color : #b62234;
    color            : #fff;
}

input[type=submit].red,
button[type=submit].red,
.button.red
{
    background-color : #960200;
    color            : #fff;
}

label.input-text-label
{
    display : inline-block;
    margin  : 16px 0 4px;
}

label.input-text-label:first-child,
input[type=hidden] + label.input-text-label
{
    margin-top : 0;
}

input[type=color],
input[type=date],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week]
{
    display     : inline-block;
    line-height : 1.45;
}

input.input-full-width
{
    display : block;
    width   : 100%;
}

.form-actions
{
    margin                  : 32px 0 0;

    display                 : -webkit-box;
    display                 : -webkit-flex;
    display                 : -moz-box;
    display                 : -ms-flexbox;
    display                 : flex;

    -webkit-box-orient      : horizontal;
    -webkit-box-direction   : normal;
    -webkit-flex-direction  : row;
    -moz-box-orient         : horizontal;
    -moz-box-direction      : normal;
    -ms-flex-direction      : row;
    flex-direction          : row;

    -webkit-box-pack        : justify;
    -webkit-justify-content : space-between;
    -moz-box-pack           : justify;
    -ms-flex-pack           : justify;
    justify-content         : space-between;

    -webkit-align-content   : stretch;
    -ms-flex-line-pack      : stretch;
    align-content           : stretch;

    -webkit-flex-wrap       : nowrap;
    -ms-flex-wrap           : nowrap;
    flex-wrap               : nowrap;
}

.form-actions .foac-right
{
    margin-left : auto;
}

.container
{
    max-width : 1152px;
    margin    : 0 auto;
}

.login_container
{
    width             : 100%;
    max-width         : 500px;
    max-height        : 100%;
    position          : fixed;
    z-index           : 999;
    top               : 45%;
    left              : 50%;
    overflow          : auto;
    color            : #fff;

    -webkit-transform : translate(-50%, -50%);
    -moz-transform    : translate(-50%, -50%);
    -ms-transform     : translate(-50%, -50%);
    -o-transform      : translate(-50%, -50%);
    transform         : translate(-50%, -50%);
}

.login_container .login_head
{
    padding                 : 10px;
    background-color        : #4e4e4e;
    border                  : 1px solid #b62234;
    border-bottom           : none;

    display                 : -webkit-box;
    display                 : -webkit-flex;
    display                 : -moz-box;
    display                 : -ms-flexbox;
    display                 : flex;

    -webkit-box-orient      : horizontal;
    -webkit-box-direction   : normal;
    -webkit-flex-direction  : row;
    -moz-box-orient         : horizontal;
    -moz-box-direction      : normal;
    -ms-flex-direction      : row;
    flex-direction          : row;

    -webkit-box-pack        : justify;
    -webkit-justify-content : space-between;
    -moz-box-pack           : justify;
    -ms-flex-pack           : justify;
    justify-content         : space-between;

    -webkit-align-content   : center;
    -ms-flex-line-pack      : center;
    align-content           : center;

    -webkit-flex-wrap       : nowrap;
    -ms-flex-wrap           : nowrap;
    flex-wrap               : nowrap;
}

.login_container .login_head .login_head_text
{
    color       : #ffffff;
    font-size   : 14px;
    line-height : 1;
}

.login_container .login_head .login_head_image
{
    margin-left : auto;
    text-align  : right;
}

.login_container .login_head .login_head_image img
{
    display        : inline-block;
    max-height     : 67px;
    width          : auto;
    height         : auto;
    max-width      : 48%;
    vertical-align : middle;
}

.login_container .login_content
{
    padding          : 10px;
    background-color : #b62234;
}

.message
{
    display               : inline-block;
    margin                : 10px 10px 10px 0;
    background-color      : rgba(255, 255, 255, .8);
    border                : 1px solid #4e4e4e;
    padding               : 4px 8px;
    line-height           : 1.45;

    -webkit-border-radius : 5px;
    -moz-border-radius    : 5px;
    border-radius         : 5px;
}

.login_container .login_footer
{
    padding          : 10px;
    background-color : #4e4e4e;
    border           : 1px solid #b62234;
    border-top       : none;
    text-align       : right;
}

.login_container .login_footer a
{
    display         : inline-block;
    color           : #fff;
    text-decoration : none;
}

.login_container .login_footer a:hover
{
    text-decoration : underline;
}

header
{
    padding                 : 10px;
    background-color        : #4e4e4e;

    display                 : -webkit-box;
    display                 : -webkit-flex;
    display                 : -moz-box;
    display                 : -ms-flexbox;
    display                 : flex;

    -webkit-box-orient      : horizontal;
    -webkit-box-direction   : normal;
    -webkit-flex-direction  : row;
    -moz-box-orient         : horizontal;
    -moz-box-direction      : normal;
    -ms-flex-direction      : row;
    flex-direction          : row;

    -webkit-box-pack        : justify;
    -webkit-justify-content : space-between;
    -moz-box-pack           : justify;
    -ms-flex-pack           : justify;
    justify-content         : space-between;

    -webkit-align-content   : stretch;
    -ms-flex-line-pack      : stretch;
    align-content           : stretch;

    -webkit-flex-wrap       : wrap;
    -ms-flex-wrap           : wrap;
    flex-wrap               : wrap;
}

header > div
{
    -webkit-box-flex        : 0;
    -webkit-flex-grow       : 0;
    -moz-box-flex           : 0;
    -ms-flex-positive       : 0;
    flex-grow               : 0;

    -webkit-flex-shrink     : 0;
    -ms-flex-negative       : 0;
    flex-shrink             : 0;

    -webkit-flex-basis      : auto;
    -ms-flex-preferred-size : auto;
    flex-basis              : auto;
}

header > div:last-child:not(:first-child)
{
    margin-left : auto;
}

header > div label,
header > div select,
header > div div
{
    display        : inline-block;
    vertical-align : middle;
}

header > div label
{
    display     : block;
    line-height : 32px;
    color       : #fff;
    margin      : 0;
}

header img
{
    display    : inline-block;
    max-height : 32px;
    width      : auto;
    max-width  : 50%;
}

main
{
    padding : 50px 10px 30px;
}

main label
{
    display : block;
    margin  : 0 0 10px;
}

main h1
{
    margin      : 0 0 40px;
    font-weight : 300;
    font-size   : 160%;
}

main .coursesheet .course
{
    background-color   : #fff;
    margin             : 0 0 32px;

    -webkit-box-shadow : 0 0 10px #292D29;
    -moz-box-shadow    : 0 0 10px #292D29;
    box-shadow         : 0 0 10px #292D29;
}

main .coursesheet .course:last-child
{
    margin-bottom : 0;
}

main .coursesheet .course .course_head
{
    padding                 : 10px;
    color                   : #ffffff;
    font-weight             : 400;
    font-size               : 20px;
    line-height             : 20px;
    background-color        : #4e4e4e;

    display                 : -webkit-box;
    display                 : -webkit-flex;
    display                 : -moz-box;
    display                 : -ms-flexbox;
    display                 : flex;

    -webkit-box-orient      : horizontal;
    -webkit-box-direction   : normal;
    -webkit-flex-direction  : row;
    -moz-box-orient         : horizontal;
    -moz-box-direction      : normal;
    -ms-flex-direction      : row;
    flex-direction          : row;

    -webkit-box-pack        : justify;
    -webkit-justify-content : space-between;
    -moz-box-pack           : justify;
    -ms-flex-pack           : justify;
    justify-content         : space-between;

    -webkit-align-content   : center;
    -ms-flex-line-pack      : center;
    align-content           : center;

    -webkit-flex-wrap       : nowrap;
    -ms-flex-wrap           : nowrap;
    flex-wrap               : nowrap;
}

main .coursesheet .course .course_head > div
{
    -webkit-box-flex        : 0;
    -webkit-flex-grow       : 0;
    -moz-box-flex           : 0;
    -ms-flex-positive       : 0;
    flex-grow               : 0;

    -webkit-flex-shrink     : 1;
    -ms-flex-negative       : 1;
    flex-shrink             : 1;

    -webkit-flex-basis      : auto;
    -ms-flex-preferred-size : auto;
    flex-basis              : auto;
}

main .coursesheet .course .course_head .weekday
{
    margin-left  : auto;
    margin-right : 15px;
}

main .coursesheet .course .course_head .date
{
    margin-right : 15px;
}

main .coursesheet .course .course_head .date,
main .coursesheet .course .course_head .time,
main .coursesheet .course .course_head .weekday
{
    font-size   : 80%;
    font-weight : 300;
}

main .coursesheet .course .course_content
{
    padding : 10px;
}

main .coursesheet .course .course_content p
{
    margin : 0 0 10px;
}

main .coursesheet .course .course_content p:last-child
{
    margin-bottom : 0;
}

main .coursesheet .course .course_footer
{
    padding                 : 10px;

    display                 : -webkit-box;
    display                 : -webkit-flex;
    display                 : -moz-box;
    display                 : -ms-flexbox;
    display                 : flex;

    -webkit-box-orient      : horizontal;
    -webkit-box-direction   : normal;
    -webkit-flex-direction  : row;
    -moz-box-orient         : horizontal;
    -moz-box-direction      : normal;
    -ms-flex-direction      : row;
    flex-direction          : row;

    -webkit-box-pack        : justify;
    -webkit-justify-content : space-between;
    -moz-box-pack           : justify;
    -ms-flex-pack           : justify;
    justify-content         : space-between;

    -webkit-align-content   : center;
    -ms-flex-line-pack      : center;
    align-content           : center;

    -webkit-flex-wrap       : nowrap;
    -ms-flex-wrap           : nowrap;
    flex-wrap               : nowrap;
}

main .coursesheet .course .course_footer .cf_right
{
    margin-left : auto;
}

main .coursesheet .course .course_footer .message
{
    margin : 0;
}

footer
{
    padding                 : 10px;
    background-color        : #4e4e4e;
    color                   : #fff;
    font-size               : .9rem;
    line-height             : 1.45;

    display                 : -webkit-box;
    display                 : -webkit-flex;
    display                 : -moz-box;
    display                 : -ms-flexbox;
    display                 : flex;

    -webkit-box-orient      : horizontal;
    -webkit-box-direction   : normal;
    -webkit-flex-direction  : row;
    -moz-box-orient         : horizontal;
    -moz-box-direction      : normal;
    -ms-flex-direction      : row;
    flex-direction          : row;

    -webkit-box-pack        : justify;
    -webkit-justify-content : space-between;
    -moz-box-pack           : justify;
    -ms-flex-pack           : justify;
    justify-content         : space-between;

    -webkit-align-content   : stretch;
    -ms-flex-line-pack      : stretch;
    align-content           : stretch;

    -webkit-flex-wrap       : wrap;
    -ms-flex-wrap           : wrap;
    flex-wrap               : wrap;
}

body > footer
{
    width    : 100%;
    position : fixed;
    z-index  : 1;
    bottom   : 0;
    overflow : auto;
}

.container > footer
{
    margin : 50px 0 0;
}

footer > div
{
    -webkit-box-flex        : 0;
    -webkit-flex-grow       : 0;
    -moz-box-flex           : 0;
    -ms-flex-positive       : 0;
    flex-grow               : 0;

    -webkit-flex-shrink     : 0;
    -ms-flex-negative       : 0;
    flex-shrink             : 0;

    -webkit-flex-basis      : auto;
    -ms-flex-preferred-size : auto;
    flex-basis              : auto;
}

footer div.right
{
    margin-left : auto;
}

footer a
{
    color           : #fff;
    display         : inline-block;
    margin          : 0 20px 0 0;
    text-decoration : none;
}

footer a:hover
{
    color           : #fff;
    text-decoration : underline;
}

footer a:last-child
{
    margin-right : 0;
}

@media screen and (min-width : 800px)
{
    header
    {
        -webkit-align-content : flex-start;
        -ms-flex-line-pack    : flex-start;
        align-content         : flex-start;

        -webkit-flex-wrap     : nowrap;
        -ms-flex-wrap         : nowrap;
        flex-wrap             : nowrap;
    }

    header img:last-child
    {
        margin-right : 30px;
    }

    header > div label
    {
        display : inline-block;
        margin  : 0 10px 0 0;
    }

    footer
    {
        -webkit-align-content : flex-start;
        -ms-flex-line-pack    : flex-start;
        align-content         : flex-start;

        -webkit-flex-wrap     : nowrap;
        -ms-flex-wrap         : nowrap;
        flex-wrap             : nowrap;
    }
}