/* FONTS */
    @font-face {
        font-family: 'Icons';
        src: url('../img/webfont/fontawesome.eot');
        src: url('../img/webfont/fontawesome.woff') format('woff'), url('../img/webfont/fontawesome.ttf') format('truetype'), url('../img/webfont/fontawesome.svg') format('svg');
        font-weight: normal;
        font-style: normal;
    }
/* END FONTS */

/* DEFAULTS */
@-webkit-viewport{width:device-width}@-moz-viewport{width:device-width}@-ms-viewport{width:device-width}@-o-viewport{width:device-width}@viewport{width:device-width}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0; padding:0; border:0; outline:0; font-size:100%; font:inherit; vertical-align:baseline; box-sizing: border-box; line-height: 1.5em;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:’’;content:none;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
table{border-collapse:collapse;border-spacing:0;}
*::selection {background:#C41314;color:#FFFFFF;}
*::-moz-selection {background:#C41314;color:#FFFFFF;}

body {
    -webkit-text-size-adjust:   none;
    background-color:           #FFFFFF;
    font:                       14px 'Arial', sans-serif;
    color:                      #585858;
    font-weight:                normal;
}
/* END DEFAULTS */

/* HEADER */
    header {
        height:                 50px;
        width:                  100%;
        border-bottom:          1px solid #e8e8e8;
        background-color:       #f1f1f1;
        z-index:                99;
        position:               fixed;
    }

    #algemeenmenu, #algemeenmenu ol, #beheermenu, #beheermenu ol {
        list-style:             none;
    }

    #beheermenu ol {
        display:                none;
/*
 * Ain't gonna work:
        visibility:             hidden;
        opacity:                0;
        transition:             0.4s;
*/
    }

    #beheermenu li:hover ol {
        display:                block;
/*
 * Ain't gonna work:
        visibility:             visible;
        opacity:                1;
        -webkit-transition:     opacity 1s ease-out; /* For submenu to work on ipad */
    }

    #beheermenu li li {
        background-color:       #f1f1f1;
    }

    #secondmenu {
        position:               absolute;
        right:                  0;
    }

    #beheermenu a {
        display:                inline-block;
        width:                  150px;
        padding:                0 25px;
        line-height:            50px;
        text-decoration:        none;
    }

    #beheermenu a.rootmenu span::before {
        color:                  #585858;
        content:                '\f013';
        font-family:            'Icons';
        margin-right:           5px;
        transition:             all 0.4s ease 0s;
    }

    #beheermenu a.rootmenu span::after {
        color:                  #767676;
        content:                '\f0d7';
        font-family:            'Icons';
        margin-left:            5px;
        transition:             all 0.4s ease 0s;
    }

    #beheermenu a.rootmenu span.nosubs:after {
        content:                '';
    }

    #beheermenu a.rootmenu:hover span::before, #beheermenu a.rootmenu:hover span::after {
        color:                  #CC0000;
    }

    a.submenu {
        border-top:             1px solid #e8e8e8;
    }

    a.firstmenuchild {
        border-top:             0;
    }
/* END HEADER */

/* CONTENT */
    #container {
        padding:                80px 0 0;
        position:               absolute;
        width:                  100%;
        min-height:             100%;
    }

    #content {
        width:                  100%;
        max-width:              95%;
        margin:                 0 auto 70px auto;
        height:                 100%;
    }

    div.message {
        margin-bottom:          25px;
        padding:                20px 20px;
        color:                  #3c763d;
        background-color:       #dff0d8;
        border:                 1px solid #d6e9c6;
        border-radius:          4px;
    }

    div.error {
        margin-bottom:          25px;
        padding:                20px 20px;
        color:                  #a94442;
        background-color:       #f2dede;
        border:                 1px solid #ebccd1;
        border-radius:          4px;
    }

    div.error ul {
        margin:                 -25px 0 0 15px;
    }

    h1 {
        font-size:              26px;
        font-weight:            bold;
        margin-bottom:          10px;
    }

    h2 {
        font-size:              18px;
        margin-bottom:          10px;
        font-weight:            bold;
    }

    p, dl, table {
        margin:                 0 0 25px 0;
    }

    dt {
        float:                  left;
        width:                  110px;
    }

    ul {
        margin:                 0 0 25px 15px;
        list-style:             disc;
    }

    a {
        color:                  #585858;
        text-decoration:        underline;
        transition:             all 0.4s ease 0s;
    }

    a:hover {
        color:                  #CC0000;
    }

    .bold, .rootmenuselected {
        font-weight:            bold;
    }

    .italic {
        font-style:             italic;
    }

    .border {
        border:                 1px solid #C0C0C0;
    }

    .center {
        text-align:             center;
    }

    th {
        font-weight:            bold;
        text-align:             left;
        background-color:       #f1f1f1;
    }

    td {
        vertical-align:         top;
    }

    td, th {
        border:                 1px solid #e8e8e8;
        padding:                5px 10px;
    }

    th a {
        text-decoration:        none;
    }

    .red {
        color:                  #CC0000;
    }

    .black {
        color:                  #000000;
    }

    .scanpanel {
        float:                  left;
        width:                  315px;
        margin-right:           20px;
    }

    .nomargin {
        margin:                 0;
    }

    .bigtext {
        font-size:              2em;
    }

    .alignmiddle {
        vertical-align:         middle;
    }

    .noborder {
        border:                 0;
    }

    .rotate90 {
/*        transform:              rotate(270deg) translate(18px, 0px);*/
    }
/* END CONTENT */

/* FORMS */
    fieldset {
        border:                 1px solid #E8E8E8;
        padding:                20px;
        margin:                 0 0 25px 0;
        border-radius:          4px;
    }

    legend {
        padding:                0 7px 0 7px;
        font-weight:            bold;
        font-size:              1.2em;
    }

    label {
        display:                block;
        cursor:                 pointer;
        font-weight:            bold;
    }

    label.optionhorizontal {
        width:                  auto;
        float:                  left;
        margin:                 0 25px 6px 0;
        font-weight:            normal;
    }

    .scanpanel label.optionhorizontal {
        width:                  90px;
    }

    input {
        font:                   12px Arial, sans-serif;
        width:                  98%;
        height:                 22px;
        margin:                 2px 0px 10px 0px;
        padding:                0px 5px;
    }

     .checkboxorder, .checkboxorderrule {
        height:                 auto;
        margin-bottom:          0;
    }

    input.option {
        width:                  16px;
        float:                  left;
        margin:                 0 5px 0 0;
    }

    textarea {
        font:                   12px Arial, sans-serif;
        width:                  100%;
        height:                 200px;
        margin:                 4px 0px 4px 0px;
        padding:                3px 5px 3px 5px;
    }

    select {
        width:                  100%;
        height:                 22px;
        margin:                 4px 0px 14px 0px;
    }

    button {
        border:                 0;
        border-radius:          4px;
        color:                  #ffffff;
        font-weight:            bold;
        text-decoration:        none;
        text-align:             left;
        background-color:       #2185d0;
        cursor:                 pointer;
        padding:                8px 30px;
        font-size:              1em;
        transition:             0.4s;
    }

    button:hover {
        background-color:       #167Bc2;
    }

    label.haserrors {
        color:                  #e0303b;
    }

    input.haserrors {
        border:                 1px solid #e0303b;
        height:                 26px;
        padding:                0px 7px;
    }
/* END FORMS */

/* FOOTER */
    #footer {
        clear:                  both;
        background-color:       #F5F5F5;
        width:                  100%;
        padding:                7px 0;
        text-align:             center;
        bottom:                 0;
        position:               absolute;
    }

    .smalltext {
        font-size:              0.65em;
    }
/* END FOOTER */

/* TYPICONS */
    .typcn {
        display:                inline-block;
    }

    .typcn:before {
        display:                inline-block;
        font-family:            'Icons';
        font-size:              1em;
        font-style:             normal;
        font-weight:            normal;
        height:                 1em;
        text-align:             center;
        text-decoration:        inherit;
        text-rendering:         optimizelegibility;
        width:                  1em;
    }

    .typcn-marginright:before {
        margin-right:           5px;
    }

    .typcn-download:before {
        content:                '\f019';
        margin-right:           3px;
    }

    .typcn-delete:before {
        content:                '\f014';
    }

    .typcn-menu:before {
        content:                '\f0c9';
        font-size:              1.6em;
    }

    .typcn-openmenu:before {
        content:                '\f0d7';
        font-size:              1.6em;
    }

    .typcn-config:before {
        content:                '\f013';
    }

    .typcn-view:before {
        content:                '\f06e';
    }

    .typcn-edit:before {
        content:                '\f044';
    }

    .typcn-add:before {
        content:                '\f055';
        margin-right:           5px;
    }

    .typcn-back:before {
        content:                '\f060';
        margin-right:           3px;
    }
/* END TYPICONS */

/* JQUERY UI REPAIR */
    .ui-widget {
        font-size:              1em;
    }

    .ui-button {
        width:                  auto;
    }

    button.ui-datepicker-close {
        display:                none;
    }
/* END JQUERY UI REPAIR */

@media all and (max-width: 999px) {
    #openmenu {
        display:                table;
    }

    #smallmenu a {
        padding:                15px;
        text-decoration:        none;
    }

    #closemenu {
        display:                none;
    }

    .typcn-menu, .typcn-openmenu {
        display:                table-cell;
        vertical-align:         middle;
    }

    #rootmenu {
        display:                none;
        z-index:                9;
        width:                  100%;
        position:               absolute;
        top:                    57px;
    }

    #algemeenmenu a {
        text-decoration:        none;
    }

    #algemeenmenu {
        background-color:       #f1f1f1;
        width:                  100%;
        height:                 auto;
        margin:                 -8px 0 0 0;
        border-bottom:          1px solid #E8E8E8;
    }

    nav li {
        position:               relative;
    }

    #algemeenmenu a.rootmenu {
        display:                table;
        padding:                10px 20px 8px 20px;
        border-top:             1px solid #E8E8E8;
        width:                  100%;
    }

    a.rootmenu span {
        width:                  90%;
    }

    #secondmenu {
        top:                    0;
        z-index:                99;
    }

    .gigantictext {
        font-size:              2em;
    }
}

@media all and (max-width: 680px) {
    .scanpanel {
        float:                  none;
        width:                  315px;
    }
}

@media all and (min-width: 1000px) {
    #smallmenu {
        display:                none;
    }

    #algemeenmenu li {
        float:                  left;
    }

    #algemeenmenu a {
        margin-left:            20px;
        padding:                20px 25px;
        line-height:            50px;
        text-decoration:        none;
    }

    .gigantictext {
        font-size:              4em;
    }

    .halfwidth:first-of-type {
        padding-right:          50px;
        margin-bottom:          20px;
        width:                  calc(50% - 50px);
    }

    .halfwidth {
        display:                inline-block;
        width:                  50%;
        vertical-align:         top;
    }
}