@font-face {
    font-family: 'regular';
    src: url('fonts/instrumentsans-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'medium';
    src: url('fonts/instrumentsans-medium-webfont.woff') format('woff');
    font-weight: medium;
    font-style: medium;
}
@font-face {
    font-family: 'bold';
    src: url('fonts/instrumentsans-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: bold;
}
@font-face {
    font-family: 'logo';
    src: url('fonts/ericaone-regular-webfont.woff') format('woff');
    font-weight: regular;
    font-style: regular;
}
body{
    margin: 2em;
    margin-top:11em;
    margin-bottom:8em;
    font-family:regular;
    font-size:16px;
    color:#333333;
    line-height:1.3em;
    background-color:#EFEFEF;
}
div.topbar{
    display:block;
    position:fixed;
    top:0;
    left:0;
    min-height:9em;
    max-height:9em;
    width:calc(100vw);
    padding:0;
    background-color:#162d4b;
    border-radius:0;
    box-shadow:0 -0.1em 1em 0 #333333;
}
div.toplinks{
    display:block;
    position:absolute;
    bottom:0em;
    left:0em;
    margin:0;
    font-family:bold;
    color:#0E131F;
    min-height:3em;
    max-height:3em;
    width:100vw;
    padding:0;
    background-color:#FFFFFF;
    border-radius:0;
    z-index:1000;
}
div.bottombar{
    display:block;
    position:fixed;
    bottom:0;
    left:0;
    width:100vw;
    min-height:3em;
    max-height:3em;
    background-color:rgb(255, 255, 255);
    border:0;
    box-shadow:0 -0.05em 0.8em 0 #666666;
}
div.taskbox{
    display:block;
    position:relative;
    padding:1em;
    padding-top:2.5em;
    padding-bottom:2.5em;
    margin-top:1em;
    margin-bottom:2em;
    border-radius:1em;
    background-color:#FFFFFF;
    box-shadow:0.1em 0.1em 0.3em 0 #AAAAAA;
}
div.tasksubject{
    display:block;
    position:absolute;
    top:0;
    left:0;
    min-width:calc(100% - 2em);
    max-width:calc(100% - 2em);
    padding:0;
    padding-left:1em;
    padding-right:1em;
    background-color:#1d222a;
    font-family:bold;
    color:#FFFFFF;
    line-height:2.5em;
    border-radius:1em 1em 0 0;
}
div.taskedit{
    display:block;
    position:absolute;
    right:1em;
    bottom:1em;
    max-width:6em;
    max-height:1.5em;
}
div.taskpreview{
    display:block;
    margin-top:2em;
    margin-bottom:2em;
    font-size:0.8em;
    line-height:1.2em;
    color:#FFFFFF;
    padding:1em;
    border-radius:0.5em;
    background-color:#5a99b2;
    box-shadow:0.1em 0.1em 0.3em 0 #AAAAAA;
}
div.taskbox p, div.taskbox p.list{
    position:relative;
    line-height:1.2em;
    margin:0;
}
div.taskbox p.list{
    margin-left:1.6em;
    line-height:1.2em;
}
div.taskbox p.list span.bull{
    position:absolute;
    left:-1.6em;
}
div.info_bull{
    display:block;
    position:relative;
    font-family:medium;
    padding:1em;
    background-color:#ffffff;
    border-radius:1em;
    text-align:center;
    margin-top:1em;
    margin-bottom:1em;
    box-shadow:0.1em 0.1em 0.3em 0 #AAAAAA;
}
div.info_bull span.number{
    display:block;
    position:relative;
    font-family:bold;
    font-size:3em;
    line-height:1em;
}
div.last_update{
    display:block;
    font-size:0.8em;
    color:#AAAAAA;
    text-align:right;
}
div.topbar span{
    display:block;
    position:absolute;
    top:1em;
    left:2.5em;
    font-family:logo;
    font-size:2.5em;
    color:#5a99b2;
}
div.topbar img{
    display:block;
    position:absolute;
    top:1em;
    left:2em;
    max-height:5em;
}
div.calendar_month{
    display:block;
    padding:0;
    margin:0;
    margin-bottom:2em;
    background-color:#FFFFFF;
    border:0.05em solid #333333;
}
div.note_all_new{
    display:block;
    position:relative;
    padding:1em;
    padding-left:5em;
    font-family:medium;
    min-height:2.8em;
    margin-bottom:1em;
    background-color:#c1cbf6;
    border-radius:0.5em;
}
div.note_all_new span{
    display:block;
    position:absolute;
    top:0.8em;
    left:0.1em;
    font-size:3em;
    text-shadow:0.05em 0.05em rgba(0, 0, 0, 0.297);
}
input[name=calendar_day]{
    display:none;
}
input[name=calendar_day] + label.calendar_day, input[name=calendar_day] + label.calendar_day_weekend{
    display:inline-block;
    min-width:calc(100% / 7);
    max-width:calc(100% / 7);
    text-align:center;
    line-height:2em;
    cursor:pointer;
}
input[name=calendar_day] + label.calendar_day_weekend{
    background-color:#cfdfe5;
}
input[name=calendar_day]:checked + label{
    background-color:#d0e7a3;
}
span.text_bold{
    display:inline-block;
    min-width:8em;
    max-width:8em;
    font-family:bold;
}
span.show_tasks_header{
    display:block;
    margin-top:1em;
    font-size:1em;
    font-family:bold;
    color:#162d4b;
    line-height:1.2em;
    text-align:right;
}
form.taskedit{
    display:inline-block;
    position:relative;
    min-height:1.5em;
    max-height:1.5em;
    min-width:1.5em;
    max-width:1.5em;
    margin-left:1em;
}
form.taskedit img{
    display:block;
    position:absolute;
    top:0;
    left:0;
    min-height:100%;
    max-height:100%;
}
form.taskedit input[type=submit]{
    display:block;
    position:absolute;
    top:0;
    left:0;
    padding:0;
    min-height:1.5em;
    max-height:1.5em;
    min-width:1.5em;
    max-width:1.5em;
    border-radius:0;
    background-color:rgb(255, 255, 255, 0);
}
div.task_id{
    display:block;
    margin:1em;
    margin-left:calc(50% - 5.5em);
    font-family:bold;
    font-size:1.2em;
    color:#333333;
    background-color:#FFFFFF;
    padding:0.5em;
    text-align:center;
    line-height:1em;
    letter-spacing:0.3em;
    min-width:calc(10em);
    max-width:calc(10em);
    border:0;
    border-radius:0.5em;
}
#toplink_create, #toplink_read, #toplink_create_active, #toplink_read_active{
    display:inline-block;
    line-height:3em;
    text-align:center;
    text-decoration:none;
    color:#0E131F;
    width:50%;
    border-bottom:0.3em solid #d9d9d9;
}
#toplink_create_active, #toplink_read_active{
    border-bottom:0.3em solid #849324;
}
a.bottomlink:link, a.bottomlink:visited, a.bottomlink:hover, a.bottomlink:active{
    display:inline-block;
    text-align:center;
    text-decoration:none;
    width:calc(100% / 4);
}
a.bottomlink img{
    max-height:2em;
    margin-top:0.5em;
}
form{
    display:inline;

}
form input[type=submit], div.subject, div.period_blank{
    display:block;
    background-color:#437F97;
    padding:0.6em;
    margin-bottom:0.8em;
    min-width:calc(100%);
    max-width:calc(100%);
    font-family:medium;
    font-size:1em;
    color:#FFFFFF;
    line-height:1.2em;
    border:0;
    border-radius:0.5em;
    cursor:pointer;
}
form #cancel{
    position:fixed;
    bottom:4em;
    right:1em;
    font-size:0.9em;
    color:#FFFFFF;
    min-width:13em;
    max-width:13em;
    background-color:#d23419;
}
form #grade, form #subject, form #worktime, div.subject, div.period_blank{
    display:inline-block;
    font-size:1em;
    min-width:8em;
    max-width:8em;
    margin-right:0.8em;
}
div.subject, div.period_blank{
    text-align:center;
    min-width:calc(9em - 2.2em);
    max-width:calc(9em - 2.2em);
    background-color:#92b3c1;
    color:#eaeaea;
    cursor:pointer;
}
div.period_blank{
    min-width:calc(100% - 1.2em);
    max-width:calc(100% - 1.2em);
}
img.qr{
    display:block;
    width:50%;
    margin-left:25%;
    border:0.5em solid #FFFFFF;
    border-radius:0.5em;
}
p.help{
    display:block;
    position:relative;
    background-color:#FFFFFF;
    font-family:regular;
    border-radius:0.5em;
    padding:0.5em;
    padding-top:0;
    margin-left:1em;
    margin-top:2em;
}
p.help span.question{
    display:block;
    position:relative;
    top:-0.5em;
    left:-1.5em;
    min-width:calc(100%);
    padding:0.5em;
    background-color:#2c3e50;
    font-family:bold;
    font-size:0.9em;
    color:#FFFFFF;
    border-radius:0.5em;
}
span.alert, span.success{
    display:block;
    background-color:#d23419;
    font-family:medium;
    font-size:0.9em;
    color:#ffffff;
    text-align:center;
    padding:0.5em;
    margin-top:1em;
    border-radius:0.3em;
}
span.success{
    background-color:#81aa07;
}
span.description{
    display:block;
    font-family:bold;
    font-size:0.9em;
}
span.pageheader{
    font-family:bold;
}
span.tasksection{
    display:block;
    font-family:bold;
    margin-top:1em;
}
span.spacer{
    margin-left:1em;
    margin-right:1em;
}
textarea, form input[type=text], form input[type=password]{
    display:block;
    font-family:regular;
    font-size:1em;
    padding:0.2em;
    min-width:calc(100% - 0.4em);
    max-width:calc(100% - 0.4em);
    min-height:10em;
    max-height:10em;
    margin-bottom:1em;
    border:0;
    resize:none;
}
form input[type=text], form input[type=password], form input[name=worktime_new]{
    padding:0.2em;
    min-height:2em;
    max-height:2em;
}
textarea:focus, form input[type=text]:focus, form input[type=password]:focus{
    outline:none;
}



@media screen and (min-width: 700px){

    body, div.topbar, div.bottombar{
        margin-left:30%;
        margin-right:30%;
    }
    div.toplinks, div.topbar, div.bottombar{
        width:40vw;
    }
    form #cancel{
        margin-right:30%;
    }

}

@media print{

    body{
        background-color:#FFFFFF;
        margin-top:0;
        margin-left:2cm;
        margin-right:2cm;
        margin-bottom:2cm;
        font-size:12pt;
    }
    div.topbar, div.bottombar, div.toplinks, span.pageheader, form.taskedit, form{
        display:none;
    }
    div.taskbox{
        page-break-inside: avoid;
        break-inside: avoid;
        box-shadow:none;
        color:#000000;
        border:0.05cm solid #000000;
    }
    div.tasksubject{
        background-color:#000000;
    }
    div.last_update{
        display:none;
    }
    span.show_tasks_header{
        font-size:1.3em;
        color:#000000;
    }

}