/* 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 */

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;
}
/* remember to define visible focus styles! 
:focus{
    outline:?????;
} */

/* remember to highlight inserts somehow! */
ins{
    text-decoration:none;
}
del{
    text-decoration:line-through;
}

table{
    border-collapse:collapse;
    border-spacing:0;
}

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

@-webkit-viewport{width:device-width}
@-moz-viewport{width:device-width}
@-ms-viewport{width:device-width}
@-o-viewport{width:device-width}
@viewport{width:device-width}

/* GENERAL */
*::selection, *::-moz-selection {
    background:                 #C41314;
    color:                      #FFFFFF;
}

*::-moz-selection {
    background:                 #C41314;
    color:                      #FFFFFF;
}
/* END GENERAL */

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

    #algemeenmenu {
        list-style:             none;
    }

    #user {
        position:               absolute;
        top:                    0;
        right:                  15px;
        line-height:            60px;
    }
/* END HEADER */

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

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

    div.message {
        margin-bottom:          15px;
        padding:                2px 10px 2px 10px;
        color:                  #000000;
        background-color:       #E8F5FD;
        border:                 1px solid #1860AB;
    }

    div.error {
        margin-bottom:          15px;
        padding:                2px 10px 2px 10px;
        color:                  #e0303b;
        border:                 1px solid #e0303b;
    }

    div.error ul {
        margin:                 -20px 0 0 40px;
        color:                  #272727;
    }

    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;
    }

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

    a {
        color:                  #585858;
        text-decoration:        underline;
    }

    a:hover {
        color:                  #CC0000;
    }

    a:active {
        color:                  #9a0000;
    }

    .button {
        border:                 1px solid #C0C0C0;
        border-radius:          10px;
        color:                  #FFFFFF;
        display:                inline-block;
        font-weight:            bold;
        margin:                 25px 0 25px 0;
        text-decoration:        none;
        width:                  180px;
        line-height:            37px;
        font-size:              13px;
        text-align:             center;
        background:             #7d7e7d;
        background:             -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%);
        background:             -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e));
        background:             -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%);
        background:             -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%);
        background:             -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%);
        background:             linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%);
        filter:                 progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 );
        opacity:                0.8;
    }

    .button:hover {
        color:                  #FFFFFF;
        opacity:                0.9;
    }

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

    .italic {
        font-style:             italic;
    }

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

    .center {
        text-align:             center;
    }

    .right {
        text-align:             right;
    }

    th {
        font-weight:            bold;
        text-align:             left;
    }

    td {
        vertical-align:         top;
    }

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

    .block {
        display:                block;
    }

    .tiles a {
        display:                inline-block;
        margin:                 0 25px 25px 0;
        padding:                10px;
        border:                 1px solid #e8e8e8;
        border-radius:          10px;
        text-decoration:        none;
        text-align:             center;
    }

    .tiles div {
        background-repeat:      no-repeat;
        background-size:        contain;
        background-position:    center;
        width:                  150px;
        height:                 150px;
        margin-bottom:          10px;
    }

    .tiles a:hover {
        border:                 1px solid #CC0000;
    }

    .tiles a:active {
        border:                 1px solid #9a0000;
    }

    .tiles a:hover div {
        opacity:                0.7;
    }

    .tiles a:active div {
        opacity:                0.5;
    }

    .hidden {
        display:                none;
    }
/* END CONTENT */

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

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

    label {
        display:                block;
        cursor:                 pointer;
    }

    label.optionhorizontal {
        width:                  65px;
        float:                  left;
        margin:                 -2px 0 4px 0;
        font-weight:            normal;
    }

    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.datefield {
        width:                  330px;
    }

    input.number {
        width:                  40px;
        margin-right:           10px;
    }

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

    input.checkbox              {
        width:                  auto;
        height:                 auto;
        margin-right:           5px;
    }

    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:                 1px solid #C0C0C0;
        border-radius:          10px;
        color:                  #FFFFFF;
        display:                inline-block;
        font-weight:            bold;
        margin:                 25px 0 0 0;
        text-decoration:        none;
        width:                  180px;
        line-height:            37px;
        font-size:              13px;
        text-align:             center;
        background:             #7d7e7d;
        background:             -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%);
        background:             -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e));
        background:             -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%);
        background:             -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%);
        background:             -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%);
        background:             linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%);
        filter:                 progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 );
        opacity:                0.8;
    }

    button:hover {
        opacity:                0.6;
        cursor:                 pointer;
    }

    label.haserrors {
        color:               #e0303b;
    }

    input.haserrors {
        border:              1px solid #e0303b;
    }
/* END FORMS */

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

    .smalltext {
        font-size:              9px;
    }
/* END FOOTER */

/* TYPICONS */
    .facn: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;
        margin-right:           3px;
    }

    .facn-succes:before {
        content:                '\f00c';
        font-size:              18px;
        color:                  #00B400;
        margin-right:           10px;
    }

    .facn-error:before {
        content:                '\f06a';
        font-size:              18px;
        float:                  left;
        margin-right:           10px;
    }

    .facn-add:before {
        content:                '\f055';
    }

    .facn-preview:before {
        content:                '\f06e';
    }

    .facn-edit:before {
        content:                '\f040';
    }

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

    .facn-order:before {
        content:                '\f07a';
    }

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

    .facn-openmenu:before {
        content:                '\f0d7';
        font-size:              1.6em;
    }
/* END TYPICONS */

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

    .ui-button {
        width:                  auto;
    }

/* END JQUERY UI REPAIR */

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

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

    #closemenu {
        display:             none;
    }

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

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

    #algemeenmenu a {
        text-decoration:        none;
    }

    nav ol {
        background-color:    #f1f1f1;
        width:               100%;
        height:              auto;
        margin:              -1px 0 0 0;
        border-bottom:       1px solid #b5b5b5;
    }

    nav li {
        position:            relative;
    }

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

    a.rootmenu span {
        width:               90%;
    }
}

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

    #algemeenmenu li {
        float:               left;
    }

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