body, html {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    text-align: center;
    margin: 0;
    padding: 0;
    min-height: 100%;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #333333;
}

.inlineBlock {
    display: inline-block;
}

.processing {
    display: none;
}

a {
    color: #A12E2E; /* template */
    text-decoration: none;
}

a, a:active, a:hover, a:focus, button, button:active, button:focus, button:hover, input[type=submit] {
    outline: 0 !important;
}

div.bgtop {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100px;
    background-color: #a12e2e; /* template */
    z-index: -1;
}

div.container {
    position: relative;
    margin: 0 auto;
    width: 1000px;
    min-height: 100%;
}

div.header {
    height: 100px;
    background-color: #a12e2e; /* template */
}

.errorBorder {
    border: solid;
    border-color: #FF6347 !important;
}

/* ------- Titel ------- */
a.titel {
    float: left;
    display: block;
    font-size: 22px;
    font-weight: bold;
    line-height: 50px;
    color: #FFF;
    line-height: 100px;
    background-image: url(../images/logo.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 40px 40px;
    padding-left: 45px;
}


ul.menu {
    float: right;
    margin: 40px 0px 0px 0px;
    padding: 0px;
}

ul.menu li {
    float: left;
    display: block;
}

ul.menu li:active a, ul.menu li a.active {
    color: #f2cb06;
}

ul.menu a, ul.menu span {
   display: block;
   font-size: 15px; 
   text-decoration: none;
   color: #FFF;
   padding: 0px 12.5px 0px 12.5px;
   cursor: pointer;
}

ul.menu a:hover, ul.menu span.dropdown:hover {
    color: #f2cb06;
}

ul.menu li:last-child a {
    padding: 0px 0px 0px 12.5px;
}

ul.menu div.dropdown_content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    padding: 20px 15px 10px 15px;
    z-index: 1;
    background-color: #a12e2e; /* template */
}

ul.menu div.dropdown_content a {
    clear: both;
    margin-bottom: 10px;
    color: #FFF;
    text-align: left;
}

ul.menu div.dropdown_content a:hover {
    color: #f2cb06;
}

ul.menu span.dropdown:hover div.dropdown_content {
    display: block;
}

#templates {
    display: none;
}

div.main {
    text-align: left;
    margin-bottom: 30px;
}

div.content {
    padding-top: 10px;
    float: left;
    width: 700px;
    padding-right: 10px;
    min-height: 400px;
    padding-bottom: 30px;
}

div.content div.from {
    height: auto !important;
    padding-bottom: 50px !important;
}

div.content div.html img {
    max-width: 700px;
}

div.content p, div.contentFull p {
    line-height: 22px;
}

div.contentFull {
    position: absolute;
    float: left;
    padding-top: 10px;
    width: 100%;
    min-height: 400px;
}

div.sidebar {
    float: right;
    padding-top: 26px;
    width: 240px;
    margin-right: 20px;
}

div.sidebar:after {
    position: absolute;
    z-index: -2;
    content:"";
    top: 0px;
    right: 0px;
    width: 279px;
    height: 100%;
    background-color: #F7F7F7;
    border-left: solid;
    border-bottom: solid;
    border-width: 1px;
    border-color: #dfdfdf;
}

div.sidebar > h2:first-child {
    border-top: none;
}

div.sidebar h2 {
    border-top: solid;
    border-width: 1px;
    border-color: #737373;
    padding-top: 20px;
    margin-top: 20px;
}

/* Content items */
div.contentBox {
    padding: 1%;
    height: 300px;
    border: solid;
    border-width: 1px;
    border-color: #000;
    background-color: #F7F7F7;
    border: solid;
    border-width: 1px;
    border-color: #dfdfdf;
}

.alignLeft {
    float: left;
    margin-right: 5px;
}

.alignRight {
    float: right;
    margin-left: 5px;
    margin-right: 0px;
}

h1 {
    font-size: 24px;
    font-weight: bold;
}
h2 {
    font-size: 20px;
    font-weight: normal;
}

.sidebar h2 {
    font-size: 15px;
    font-weight: bold;
}

h3 {
    font-size: 18px;
    font-weight: normal;
}

h4 {
    font-size: 16px;
    font-weight: bold;
}

button, input[type=submit] {
    margin-top: 5px;
    margin-right: 10px;
    background-color: #FFF;
    font-size: 15px;
    height: 40px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 0px;
    padding-bottom: 2px;
    color: #333; /* template */
    border: solid;
    border-width: 1px;
    border-color: #737373; /* template */
    border-radius: 3px;
    cursor: pointer;
}

button.filled, input.filled {
    background-color: #ffc733; /* template */
    color: #000;
}

button:disabled {
    background-color: #CCC!important;
    cursor: auto;
    border-color: #BBB;
}

button.filled:hover, input.filled:hover {
    background-color: #ffb900; /* template */
}

button.filled:active, input:filled:active {
    background-color: #ffb900; /* template */
}

button:hover, input[button]:hover {
    background-color: #fff1cc; /* template */
}

button:active, input[button]:active {
    background-color: #fff1cc; /* template */
}

button.disabled {
    color: #AAA;
}

button.disabled:active {
    background-color: #DDD;
    color: #AAA;
    cursor: not-allowed;
}

div.lightBox {
    text-align: left;
    background-color: #FFF;
    border-radius: 3px;
    z-index: 2;
    box-shadow: 3px 3px 5px #888888;
}

div.lightBox button, div.tinyLightBox button {
    display: inline-block;
}

div.lightBox img {
    max-width: 100%;
}

div.lightBox h1 {
    margin-top: 0px;
}

div.tinyLightBox {
    position: absolute;
    top: 10%;
    left: 50%;
    margin-left: -230px;
    width: 400px;
    height: auto;
    min-height: 200px;
    padding: 30px;
    display: none;
}

div.bigLightBox {
    position: absolute;
    top: 10%;
    left: 2%;
    width: 96%;
    height: auto;
    min-height: 500px;
    padding: 30px;
    display: none;
}

div.richtlijnBox {
    position: absolute;
    top: 10%;
    left: 2%;
    width: 96%;
    height: auto;
    min-height: 500px;
    display: none;
}

div.richtlijnLinks {
    margin-bottom: 20px;
}

div.richtlijnLinks:empty {
    margin-bottom: 0px;
}

div.richtlijnBox div.richtlijn {
    padding: 30px;
}

div.richtlijnHeader {
    height: 70px;
    width: 100%;
    background-color: #3EA2F4;
    display: block !important; /* hack, for some reason the header is removed after the backdrop is removed */
}

div.richtlijnHeader span.title {
    float: left;
    font-size: 22px;
    font-weight: bold;
    color: #FFF;
    margin-left: 33px;
    line-height: 70px;
}

div.richtlijnHeader select {
    float: left;
    line-height: 70px;
    margin-left: 100px;
    border-color: #3EA2F4;
    margin-top: 20px;
    height: 30px;
    padding: 0px;
    font-size: 13px;
    color: #2680ca;
}

div.richtlijnHeader select option:checked,
div.richtlijnHeader select option:focus,
div.richtlijnHeader select option:active,
div.richtlijnHeader select option:hover { 
    background-color: #b2dafb;
}

div.richtlijnHeader span.icon-cancel {
    float: right;
    line-height: 70px;
    height: 70px;
    background-color: transparent;
    border-color: transparent;
    color: #FFF;
    font-size: 20px;
    margin-right: 33px;
    cursor: pointer;
}

div.richtlijn img {
    width: 100%;
    height: auto;
}

div.backDrop {
    position: fixed;
    z-index: 1;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
}

/* Progress bar */

div.progressBar {
    position: relative;
    width: auto;
    height: 20px;
    border-radius: 3px;
    background-color: #FFF;
    border: solid;
    border-color: #dfdfdf;
    border-width: 1px;
}

div.progressBar span {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    background-color: #f4c63e;
    -webkit-transition: width 2s;
    transition: width 2s;
}

div.progressBar {
    margin-top: 5px;
    height: 20px;
    line-height: 20px;
    margin-bottom: 10px;
}

div.progressBar input {
    margin-right: 10px;
    margin-bottom: 5px;
}

/* Content CSS */
/*
select {
    padding:3px;
    margin: 0;
    background-color: #FFF;
    height: 25px;
    color: #000;
    border:solid;
    border-width: 1px;
    margin-top: 5px;
} 
*/

select {
    border-color: #3EA2F4;
    height: 40px;
    font-size: 13px;
    color: #2680ca;
    background-color: #FFF;
}

select option:checked,
select option:focus,
select option:active,
select option:hover { 
    background-color: #b2dafb;
}

.clear {
    clear: both;
}

input[type="checkbox"].big {
    width: 40px;
    height: 40px;
    vertical-align: middle;
    position: relative;
    bottom: 1px;
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    width: 100%;
}

* html .clearfix             { zoom: 1; }
*:first-child+html .clearfix { zoom: 1; }


input[type="checkbox"].little {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    position: relative;
    bottom: 1px;
}

input[type="checkbox"]:checked {
}

div.question {
    margin-top: 5px;
    height: 20px;
    line-height: 20px;
    margin-bottom: 10px;
}

div.question input {
    margin-right: 10px;
    margin-bottom: 5px;
}

div.questionTable input {
    display: none;
}

div.questionTable label {
    border: solid 1px #333;
    margin-right: 10px;
    margin-top: 3px;
    padding: 5px;
    cursor: pointer;
}

div.questionTable p.question {
    margin-top: 1px;
}

div.questionTable p.question br {
    line-height: 30px;
}

div.questionTable strong {
    display: block;
    border-top: solid 1px #333;
}

div.questionTable input[type=radio]:checked + label {
    background-color: #ffc733;
}

form {
    margin-bottom: 15px;
}

form input:not([type=submit]) {
    box-sizing: border-box;
    width: 100%;
    padding: 3px;
    margin: 0;
    background-color: #FFF;
    height: 40px;
    color: #333; /* template */
    border:solid;
    border-width: 1px;
    border-color: #737373; /* template */
    margin-top: 5px;
    clear: both;
}

hr {
    border: solid;
    border-width: 1px;
    border-color: #000;
}

select.documentation {
    position: absolute;
    right: 55px;
    top: 15px;
}

.error {
    color: #F00;
}

.succes {
    color: #000;
    font-weight: bold;
}

.loggedInMenu1, .loggedInMenu2 {
    display: none;
}



/* ------- Verscheidene contentitems ------- */
div.expert {
    margin-bottom: 20px;
}

div.expert img {
    float: left;
    width: 74px;
    height: 74px;
    border-color: #f4c63e; /* template */
    border-radius: 37px;
}

div.expert strong {
    font-size: 14px;
}

div.expert span {
    float: right;
    margin-bottom: 5px;
    display: block;
    width: 160px;
    font-size: 12px;
}

table.profiel td {
    padding: 5px;
}

table.profiel tr:nth-child(even), table.profiel tr:nth-child(even) td {
    background-color: #EBF6FE;
}

table.profiel tr:nth-child(2n+1) {
}

button.previousButton, button.nextButton, button.lessonsButton {
    display: none;
}

h1.onderdeel, h2.subonderdeel, h3.vraag {
    display: none;
}

h2.subonderdeel {
    font-weight: bold;
}

h3.feedback {
    display: block;
}

h3.vraag {
    font-size: 16px;
    font-weight: bold;
}

ul.antwoorden {
    margin: 10px 0 10px 0;
    padding: 0;
    list-style: none;
    border-color: #737373; /* template */
    border-width: 1px;
    border-style: solid;
    border-radius: 3px;
}

ul.antwoorden:empty {
    border: none;
}

ul.antwoorden li {
    display: block;
    position: relative;
    cursor: pointer;
}

ul.antwoorden input {
    display: none;
}

ul.antwoorden textarea.openQuestion {
    display: block;
    width: 97%;
    margin: 5px;
    height: 100px;
}

ul.antwoorden label {
    display: block;
    padding: 20px 20px 20px 70px;
    line-height: 18px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color:  #737373; /* template */
    cursor: pointer;
}

ul.antwoorden li:last-child label {
    border-color: transparent;
}

ul.antwoorden span.letter, ul.antwoorden span.correct, ul.antwoorden span.incorrect {
    position: absolute;
    top: 50%;
    left: 20px;
    margin-top: -15px;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    text-align: center;
    line-height: 30px;
    color: #000; /* template */
    border-color: #FFF; /* template */
    border-style: solid;
    border-width: 1px;
    background-color: #FFF;
    font-weight: bold;
}

span.correct {
    background-color: #3ea200;
    color: #FFF;
}

span.incorrect {
    background-color: #3ea200;
    color: #FFF;
}

span.correctBig {
    display: block;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    text-align: center;
    color: #FFF;
    border-radius: 100px;
    text-align: center;
    font-weight: bold;
    font-size: 100px;
    background-color: #3ea200;
}

span.incorrectBig {
    display: block;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    text-align: center;
    color: #FFF;
    border-radius: 100px;
    text-align: center;
    font-weight: bold;
    font-size: 100px;
    background-color: #c85959; 
}

ul.antwoorden input:checked + label {
    background-color: #fff3d6; /* template */
    /*border-color: #3ea2f4;*/
}

ul.feedback   li.green input:checked + label,
ul.antwoorden li.green input:checked + label {
    background-color: #eef9ec;
    /*border-color: #3ea200;*/
}

ul.feedback li.red input:checked + label,
ul.antwoorden li.red input:checked + label {
    background-color: #f9ecec;
    /*border-color: #c85959; */
}

h3.feedback {
    margin-bottom: 50px;
}

p.algemene_feedback {
    font-style: italic;
}

p.algemene_feedback img {
    max-width: 700px;
}

p.algemene_feedback:empty {
    display: none;
}

iframe {
    min-height: 100%;
    margin-top: 10px;
}

div.lessonLists div.lessonOverview {
    float: left;
    width: 100%;
    margin-right: 3%;
    margin-top: 20px;
    clear: both;
}

div.lessonLists {
    margin-top: 20px;
    border-top: solid;
    border-top-width: 1px;
    border-top-color: #dfdfdf;
    /* background-color: #F7F7F7; */
}

div.lessonOverview span.lesson {
    display: block;
    font-weight: bold;
    font-size: 15px;
    color: #323232;
}

div.lessonLists div.lessonOverview:nth-child(5) span.lesson, div.lessonLists div.lessonOverview:nth-child(6) span.lesson {
    line-height: 22px !important;
    min-height: 44px !important;
}

div.lessonOverview ul {
    list-style: none;
    margin: 0px;
    padding: 11px;
}

div.lessonOverview li {
    position: relative;
    display: block;
    line-height: 22px;
    padding-left: 21px;
    border-left: solid;
    border-color: #000; /* template */
    border-width: 1px;
    min-height: 44px;
    margin: 0px;
    font-size: 13px;
    color: #7a7a7a;
}

div.lessonOverview li:last-child {
    border: none;
}

div.lessonOverview span.lessonProgress {
    position: absolute;
    top: 0px;
    left: -12px;
    width: 22px;
    height: 22px;
    border-radius: 22px;
    background-color: #ffc20a; /* template */
    text-align: center;
    line-height: 22px;
    font-size: 10px;
}

div.lessonOverview span.sublessonProgress {
    display: block;
    width: 22px;
    height: 22px;
    text-align: center;
    line-height: 22px;
    font-size: 10px;
    float: left;
}



span.futureLesson {
    border-color: #7a7a7a !important;
}

span.currentLesson {
    background-color: #3ea2f4 !important;
    color: #FFF !important;
}

span.sublessonProgress.currentLesson {
    background-color: transparent !important;
    color: #000 !important;
}

div.lessonOverview span.icon-ok {
    color: #000; /* template */
}

button.fastforward {
    position: fixed;
    top: 5px;
    right: 5px;
}

button.fastbackward {
    position: fixed;
    top: 5px;
    left: 5px;
}

div.meeruitmeer {
    font-style: italic;
    margin-bottom: 10px;
}

div.meeruitmeer:empty {
    display: none;
}

div.illustratie {
    float: right;
    width: 25%;
    margin-left: 10px;
    margin-bottom: 10px;
}

div.illustratie img {
    width: 100%;
    height: auto;
}

span.herkansingen {
    display: block;
    width: 100%;
    background-color: #00a259;
    margin-top: 5px;
    font-size: 15px;
    height: 40px;
    line-height: 40px;
    padding-top: 0px;
    padding-bottom: 0px;
    color: #FFF;
    text-align: center;
}

span.geenherkansingen {
    background-color: #ee4147;
    color: #FFF;
}

span.laatsteherkansing {
    background-color: #FFCF29;
    color: #333;
}

span.timer {
    display: block;
    width: 100%;
    background-color: #FFF;
    margin-top: 5px;
    font-size: 15px;
    height: 40px;
    line-height: 40px;
    padding-top: 0px;
    padding-bottom: 0px;
    color: #333;
    text-align: center;
    font-weight: bold;
}

div.acc a:first {
    position: absolute;
    top: 0px;
    left: 0px;
}

a.accNext {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 25px;
    border-radius: 5px;
    background-color: #666;
    color: #EEE;
}

a.accPrevious {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 25px;
    border-radius: 5px;
    background-color: #666;
    color: #EEE;
}