.bg_od { background-color: #FF8500 !important; } .bg_ol { background-color: #FDD282 !important; } .bg_mb { background-color: #B7BCE1; } /* Midden Blauw */ .bg_mo { background-color: #FDD282; } /* Midden Oranje */ .bg_gd { background-color: #47B64D !important; } .bg_gl { background-color: #7FDA7A !important; } /* licht groen */ .bg_rd { background-color: #CE4747; } .bg_qf { background-color: #CCCCCC; } /* question fout */ .bg_qg { background-color: #009304; } /* mja. */ .tx_od { color: #FF8500; } .tx_bd { color: #006EB3; } .bg_st { @zilver Background; } /* roboto-regular - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url('/fonts/roboto-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/roboto-v19-latin-regular.woff2') format('woff2'), Super Modern Browsers url('/fonts/roboto-v19-latin-regular.woff') format('woff'), /* Modern Browsers */ url('/fonts/roboto-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/roboto-v19-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */ } @font-face { font-family: 'Architects Daughter'; font-style: normal; font-weight: 400; src: local('ArchitectsDaughter'), url('/fonts/ArchitectsDaughter.ttf') format('truetype'); } /* deze wordt gebruikt in de plaatjes die we versturen bij Rekenen */ @font-face { font-family: ''; font-style: normal; font-weight: 400; src: local('Josefin Sans'), url('/fonts/JosefinSans-VariableFont_wght.ttf'); } /* 20230417 font toegevoegd om in chrome de formules mooi te maken (grote haakjes) */ @font-face { font-family: 'Fira Math'; font-style: normal; font-weight: 400; src: local('Fira Math'), url('/fonts/FiraMath-Regular.otf'); } /* @font-face { font-family: 'Noticia Text'; font-weight: 400; font-style: normal; src: url('https://fonts.googleapis.com/css2?family=Noticia+Text&display=swap') } */ /*** menu op cursus scherm ***/ #divMenu { color: #BBB; /* 20191228 van white af om hover effect te kunnen doen */ font-family: 'arial'; width: 325px; float: left; display: inline-flex; cursor: pointer; position: relative; height: 100%; z-index: 15; } #divMenuScroll { width: 270px; background-color: #1E2447; z-index: 50; overflow-y: auto; } #divHoofdstukken { background-color: #1E2447; float: left; } .divHoofdstuk { font-size: 16px; width: 250px; height: 60px; align-items: center; border-top: solid 1px #364258; position: relative; display: table; } .divHoofdstuk.selected { width: 245px; } /* 20191228 hover effect toegevoegd*/ .divHoofdstuk:hover { color: white; } .divModuleText { display: table-cell; vertical-align: middle; padding-left: 10px; padding-right: 5px; } #divParagrafen { margin-top: -15px; padding: 5px 5px 15px 5px; -webkit-box-shadow: inset 0px -3px 5px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: inset 0px -3px 5px 0px rgba(0, 0, 0, 0.75); box-shadow: inset 0px -3px 5px 0px rgba(0, 0, 0, 0.75); } /* 20210714 * hier zijn de background-images de lijntjes die links in het menu zitten * incl de bolletjes */ .divParagraaf { padding: 5px 5px 5px 28px; font-size: 15px; background-color: #1E2447; background-image: url("data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAwAAAA3CAYAAAA4yKuJAAAACXBIWXMAAA9hAAAPYQGoP6dpAAABBElEQVRIx+1U0W3CMBB9Z1tkCkL5h5QZoCm7sAFLsA6CwA4UBkDADKBKEJmcwRENRrgSP0h+P2ef7/nsu2cjyzKNAo2kxwZx0odFnKSoQtmB1rq0cfsLRAQN8ZjAAfX2txlvVzM8gsA/EQg+UC4n94NImybuKj1xZtitpkUwmWZ6H4lJuMrF+w4uiby2SvVWz69KLG8hBPI89yMwODiKItgHxkjTlErCZjm/I90G2zlVnc+gbCrXomszYavx8dktK9MoHj/bwXD0Z6PyDkrWcDztjZPlsFlmaHb6OBx+77KbDOufMZSqXTwkjVkvJpBSwnkkhnboBg7xhX8pEAIhEALhHQln3Mxeo+ZaqZEAAAAASUVORK5CYII="); background-position: 9px -4px; background-repeat: no-repeat; } /* 20191228 hover effect toegevoegd*/ .divParagraaf:hover { background-image: url("data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAwAAAA3CAYAAAA4yKuJAAAACXBIWXMAAA9hAAAPYQGoP6dpAAABC0lEQVRIx+2UTU7DMBCF39hWc4qGHSuaHSdoA1IPDIIAF2BD6Y5N/+5QdZHEeEa1BcGRjMQGyW9jx5kv45lnB03TWDhdVHMeUFa38CqrGkMZP7HWhrGcLUBEsFDjAAdMZzcy36+fMCaFXyoDKTKxRfaDyIqJh4En0QyH9aMLJjEzeUsM4XxckmuIHZG/7dL0ap7WJT7eSil0XZcGsDi4KApubajcdY0CsHt//gF9DfbPAvhrmiIB6rqm2MthhgBwN7S22K5eZM4F932Py+slfbzefatB2mr0BG3b+kVXTwNjDI7HkwR5BR82q3sXMDl/RsuweXtwWfW4cZHtcrpxH/J/KQMZyEAG/hHwCTaFZkm9IkEOAAAAAElFTkSuQmCC"); color: white; } .divParagraaf.activePK { background-image: url("data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAwAAAA3CAYAAAA4yKuJAAAACXBIWXMAAA9hAAAPYQGoP6dpAAABIklEQVRIx+1UQU4CMRR9v22YUzDGjSuYeAdA4taNa2/g3rXxOOwgMpyAlcLSBSpnkJjotPYXZhToJCVxQ9KXTH4zea9/+t7vIM9zA4uTrMMFadZHiTTrYReqXBhjqpq2uyAiGIh6AROa7Qu3fp9PUAeBAxEFIVC+l5wHkXEhLncy8XZYzseWTC7M4E9iETbjEnwG34j8r0vNVifMJR5vIQSKoggTMJicJAnMPaqT0x1I/bbWsEauq7VT6wIvV8Mtm1hM5RX1oTutuaI3tw8kJScr/4Sl8XqNvc2cS0zih33XWq/ptpwNLreirs6gZANf3x8oxW+zHKfnfaxWn46012HxPIJSjc020pXF0yOklPXBGc/cwDN88b8UBVEQBVFwjIIfGGZoVAaiDncAAAAASUVORK5CYII="); } #divParagrafen .divParagraaf:last-child { background-image: url("data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAwAAAAWCAYAAAD0OH0aAAAACXBIWXMAAA9hAAAPYQGoP6dpAAAAz0lEQVQ4y+1TyRHCMAzcVTKTLqiANkIlNAAvSuABbz504i4ogTqwROQkTC4m5s8+PLJGu5IsiyEE2x8vBF/QKGAhsKggCYjh+QgYovTDzPxsgiTZFLfdI5ii7A1XVFh7MScmY0aYS6zgT8hBueQ0+lysG2gOIQUyTTuLUFA6ov6Swcsq8pr2f+WkGGMewYNFJP3avGelLgZ/7cHh5VRVBV+w3lfXNdsFQoRvQ/OQza3dNtWI2/kwSuNkDhVywM12N679My3F/XqaiXFNcdrDG1IAV1p/25AMAAAAAElFTkSuQmCC"); background-position: 9px -4px; } #divParagrafen .divParagraaf:last-child:hover { background-position: 9px -4px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAWCAYAAAD0OH0aAAAACXBIWXMAAA9hAAAPYQGoP6dpAAAA1ElEQVQ4y+2TzQ3CMAyFn91K3YIJmINJmIATQyCxAVtwCiNwgSsXxBzEpi8tFf1BDXfeIXIif/6JEwkh+HqzE8gTFhVSKDwaRARQx+Ma8KmSi7tzrZ002aK0eaIYqnwbjGjwZuMEkzECxiFm9AdyVE4dunAu3g40B0iOkqadBRSiLWi/ZGBZRV7TfFeEYox5AJ1VNb3avGsVm3T+2gPFcqqqYraOrEuV5gMhgr+hvsh61/w2s4jb+dhLQzgBh/3WkSlZLFf92rtpGe6X0yiQzEUc9vACPzJZNX9VMH8AAAAASUVORK5CYII="); } #divParagrafen .divParagraaf:last-child.activePK { background-position: 9px -4px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAWCAYAAAD0OH0aAAAACXBIWXMAAA9hAAAPYQGoP6dpAAAA10lEQVQ4y+1TuxHCMAx9T8ldtmACxgAGoGEBJqClpmMeGh8LUNLScMyBLSInfBKTi+l5hU726ekvOud0vdkTvCN4AQuB+gCSgChuZ4dPlCZU1WRtJFGnmG4/gj7Kp2IeA7R5qBGjkhBSFyP4E3JQfvtU2ly0HWgOIRoyTjuLUFBaYvglgqVV5BVte2Uk730ewYxFJG5tXlsZvhoP1mCwdKqqgu7eO84t2BwQPOwa6kbWr+baQvC4LA+dMEamnehQlNlpnmY7mS66ub+mFXBdHRNnxAj6NTwA/CRWpo00/5MAAAAASUVORK5CYII="); } #divParagrafen .glyphicon { top: 2px; margin-right: 2px; } #divQuestions { float: left; display: block; position: relative; color: white; width: 50px; left: 6px; top: 15px; z-index: 45; overflow: hidden; } .question:not(.mQuestion) { border-bottom: 1px solid #777; } .mQuestion { border-right: 1px solid #777; } /* 20211229 deze is veranderd om te zorgen dat je kunt scrollen in de vragenkolom #divQuestionsScroll{ display: block; width:50px; overflow: hidden; } https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll naar: */ #divQuestionsScroll { display: block; width: 50px; overflow-y: scroll; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* Internet Explorer 10+ */ } #divQuestionsScroll::-webkit-scrollbar { width: 0; height: 0; } /* ----------------------------------------------------------------------------- * START Classes voor het vraag-knopje */ .question { width: 40px; height: 40px; text-align: center; display: flex; position: relative; align-items: center; /* Vertical center alignment */ justify-content: center; /* Horizontal center alignment */ font-size: 1em; float: left; background-color: #1E2447; color: #BBB; } .questionsStart { background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%20105.833%20105.833%22%3E%3Cpath%20d%3D%22M16.731%2089.932V17.05c3.068-.817%209.336-1.188%2016.98-1.188h0c8.283%200%2014.183%202.49%2019.877%204.92%205.662%202.415%2011%204.718%2018.673%204.718%205.547%200%2013.425-1.272%2016.841-2.525V89.84%22%20fill%3D%22none%22%20stroke%3D%22%23bbb%22%20stroke-width%3D%225.461%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M86.618%2053.012c-3.416%201.252-8.254%202.524-13.801%202.524-7.673%200-13.011-2.302-18.673-4.718-5.694-2.43-11.594-4.92-19.877-4.92h0c-7.644%200-12.53.74-15.598%201.556%22%20fill%3D%22none%22%20stroke%3D%22%23bbb%22%20stroke-width%3D%225.461%22%2F%3E%3Cpath%20d%3D%22M34.98%2015.512c-7.902%200-12.954.529-16.125%201.113v30.87c3.171-.585%208.223-1.114%2016.124-1.114%208.564%200%2014.664%201.781%2020.55%203.52%205.854%201.73%2011.373%203.379%2019.305%203.379%205.735%200%2010.737-.911%2014.268-1.808V20.604c-3.531.896-8.533%201.808-14.268%201.808-7.932%200-13.451-1.65-19.305-3.379-5.886-1.74-11.986-3.521-20.55-3.521zm2.276%204.937H40.8v3.85h2.796v2.621H40.8v8.858c0%20.712.151%201.176.454%201.39.312.205.712.308%201.2.308.41%200%20.825-.049%201.245-.146v2.752c-.684.234-1.464.351-2.342.351-1.181%200-2.163-.331-2.943-.995-.771-.674-1.157-1.825-1.157-3.455V26.92h-2.62V24.3h2.62v-3.85zm-11.565%204.536c1.982%200%203.534.482%204.656%201.449%201.132.966%201.698%202.161%201.698%203.586h-3.557c0-.615-.235-1.161-.703-1.64-.469-.487-1.166-.731-2.094-.731-.897%200-1.561.2-1.99.6-.43.4-.645.864-.645%201.391%200%20.508.215.918.644%201.23.43.312%201.299.61%202.606.893%201.835.4%203.265.956%204.29%201.669%201.035.702%201.552%201.761%201.552%203.177%200%201.405-.581%202.557-1.743%203.455-1.161.898-2.713%201.347-4.655%201.347-2.177%200-3.836-.557-4.978-1.67-1.142-1.112-1.713-2.322-1.713-3.63h3.455c.04.976.396%201.66%201.07%202.05.682.39%201.414.585%202.195.585.937%200%201.65-.18%202.138-.542.497-.36.746-.824.746-1.39%200-.508-.21-.947-.63-1.318-.409-.38-1.307-.717-2.693-1.01-1.718-.361-3.108-.898-4.172-1.61-1.054-.723-1.582-1.753-1.582-3.09%200-1.298.547-2.42%201.64-3.367%201.093-.956%202.582-1.434%204.465-1.434zm53.556%202.561h3.543v3.85h2.796v2.621H82.79v8.858c0%20.712.15%201.176.453%201.39.313.205.713.308%201.2.308.41%200%20.826-.049%201.246-.146v2.752c-.683.234-1.464.351-2.343.351-1.18%200-2.162-.332-2.943-.995-.77-.674-1.156-1.826-1.156-3.455v-9.063h-2.62v-2.62h2.62v-3.85zm-25.052.792c1.776%200%203.24.453%204.392%201.361%201.162.908%201.742%202.27%201.742%204.085v7.027c0%201.425.2%202.562.6%203.412v.248H57.3c-.176-.36-.312-.859-.41-1.493-1.122%201.19-2.514%201.786-4.173%201.786-1.581%200-2.874-.454-3.88-1.361-1.004-.908-1.507-2.035-1.507-3.382%200-1.689.63-2.982%201.888-3.88%201.26-.898%203.03-1.347%205.315-1.347h2.24v-1.04c0-.83-.235-1.488-.703-1.976-.459-.498-1.152-.746-2.079-.746-.85%200-1.527.21-2.035.63-.498.419-.747.931-.747%201.536h-3.543c0-1.249.586-2.372%201.757-3.367%201.181-.996%202.772-1.493%204.773-1.493zm18.355%204.11c.478%200%20.898.063%201.26.19l-.03%203.353a9.07%209.07%200%2000-1.435-.118c-1.649%200-2.752.625-3.308%201.874v10.834h-3.543v-15.84h3.396l.088%201.786c.84-1.386%202.03-2.08%203.572-2.08zm-17.945%204.571c-2.489.059-3.733.942-3.733%202.65%200%20.635.214%201.167.644%201.596.43.43%201.054.644%201.874.644.82%200%201.528-.195%202.123-.585.595-.4%201.015-.84%201.259-1.318v-2.987h-2.167z%22%20fill%3D%22%23bbb%22%2F%3E%3C%2Fsvg%3E'); background-size: 38px 38px; background-position: 1px 2px; background-repeat: no-repeat; } .questionsStart.selected, .questionsStart:hover { background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22400%22%20viewBox%3D%220%200%20105.833%20105.833%22%3E%3Cpath%20d%3D%22M16.731%2089.932V17.05c3.068-.817%209.336-1.188%2016.98-1.188h0c8.283%200%2014.183%202.49%2019.877%204.92%205.662%202.415%2011%204.718%2018.673%204.718%205.547%200%2013.425-1.272%2016.841-2.525V89.84%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%225.461%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M86.618%2053.012c-3.416%201.252-8.254%202.524-13.801%202.524-7.673%200-13.011-2.302-18.673-4.718-5.694-2.43-11.594-4.92-19.877-4.92h0c-7.644%200-12.53.74-15.598%201.556%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%225.461%22%2F%3E%3Cpath%20d%3D%22M34.98%2015.512c-7.902%200-12.954.529-16.125%201.113v30.87c3.171-.585%208.223-1.114%2016.124-1.114%208.564%200%2014.664%201.781%2020.55%203.52%205.854%201.73%2011.373%203.379%2019.305%203.379%205.735%200%2010.737-.911%2014.268-1.808V20.604c-3.531.896-8.533%201.808-14.268%201.808-7.932%200-13.451-1.65-19.305-3.379-5.886-1.74-11.986-3.521-20.55-3.521zm2.276%204.937H40.8v3.85h2.796v2.621H40.8v8.858c0%20.712.151%201.176.454%201.39.312.205.712.308%201.2.308.41%200%20.825-.049%201.245-.146v2.752c-.684.234-1.464.351-2.342.351-1.181%200-2.163-.331-2.943-.995-.771-.674-1.157-1.825-1.157-3.455V26.92h-2.62V24.3h2.62v-3.85zm-11.565%204.536c1.982%200%203.534.482%204.656%201.449%201.132.966%201.698%202.161%201.698%203.586h-3.557c0-.615-.235-1.161-.703-1.64-.469-.487-1.166-.731-2.094-.731-.897%200-1.561.2-1.99.6-.43.4-.645.864-.645%201.391%200%20.508.215.918.644%201.23.43.312%201.299.61%202.606.893%201.835.4%203.265.956%204.29%201.669%201.035.702%201.552%201.761%201.552%203.177%200%201.405-.581%202.557-1.743%203.455-1.161.898-2.713%201.347-4.655%201.347-2.177%200-3.836-.557-4.978-1.67-1.142-1.112-1.713-2.322-1.713-3.63h3.455c.04.976.396%201.66%201.07%202.05.682.39%201.414.585%202.195.585.937%200%201.65-.18%202.138-.542.497-.36.746-.824.746-1.39%200-.508-.21-.947-.63-1.318-.409-.38-1.307-.717-2.693-1.01-1.718-.361-3.108-.898-4.172-1.61-1.054-.723-1.582-1.753-1.582-3.09%200-1.298.547-2.42%201.64-3.367%201.093-.956%202.582-1.434%204.465-1.434zm53.556%202.561h3.543v3.85h2.796v2.621H82.79v8.858c0%20.712.15%201.176.453%201.39.313.205.713.308%201.2.308.41%200%20.826-.049%201.246-.146v2.752c-.683.234-1.464.351-2.343.351-1.18%200-2.162-.332-2.943-.995-.77-.674-1.156-1.826-1.156-3.455v-9.063h-2.62v-2.62h2.62v-3.85zm-25.052.792c1.776%200%203.24.453%204.392%201.361%201.162.908%201.742%202.27%201.742%204.085v7.027c0%201.425.2%202.562.6%203.412v.248H57.3c-.176-.36-.312-.859-.41-1.493-1.122%201.19-2.514%201.786-4.173%201.786-1.581%200-2.874-.454-3.88-1.361-1.004-.908-1.507-2.035-1.507-3.382%200-1.689.63-2.982%201.888-3.88%201.26-.898%203.03-1.347%205.315-1.347h2.24v-1.04c0-.83-.235-1.488-.703-1.976-.459-.498-1.152-.746-2.079-.746-.85%200-1.527.21-2.035.63-.498.419-.747.931-.747%201.536h-3.543c0-1.249.586-2.372%201.757-3.367%201.181-.996%202.772-1.493%204.773-1.493zm18.355%204.11c.478%200%20.898.063%201.26.19l-.03%203.353a9.07%209.07%200%2000-1.435-.118c-1.649%200-2.752.625-3.308%201.874v10.834h-3.543v-15.84h3.396l.088%201.786c.84-1.386%202.03-2.08%203.572-2.08zm-17.945%204.571c-2.489.059-3.733.942-3.733%202.65%200%20.635.214%201.167.644%201.596.43.43%201.054.644%201.874.644.82%200%201.528-.195%202.123-.585.595-.4%201.015-.84%201.259-1.318v-2.987h-2.167z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E'); } .questionsEinde { background-image: url('data:image/svg+xml, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22151.181%22%20height%3D%22151.181%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20d%3D%22M29.456%209.472c-.362.019-.711.03-1.066.03-1.403%200-2.625-.177-3.789-.475l.005%203.865a15.28%2015.28%200%20003.864.488c.347%200%20.686-.01%201.013-.046zM19.667%207.21c-1.517-.644-3-1.246-4.895-1.626l-.006%203.89c1.893.34%203.328.91%204.872%201.54zM4.92%206.045v3.819m.066.01l-.08-3.877c1.057-.281%202.614-.542%204.9-.668l.052%203.886c-2.246.116-3.81.378-4.872.66zM29.564%2017.212l-.027-3.862a18.017%2018.017%200%20004.919-1.065l.08%203.878a17.423%2017.423%200%2001-4.972%201.05z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M20.452%2015.212c-.198-.085-.55-.22-.734-.32l.029-3.804c.183.075.455.174.625.246%201.42.606%202.794%201.196%204.31%201.57l.004%203.866c-1.481-.38-2.835-.961-4.234-1.558zM11.83%2013.078c-.668%200-1.289.013-1.891.016l-.053-3.886c.557.008%201.185-.005%201.864-.005%201.138%200%202.172.108%203.103.26l-.007%203.892a16.132%2016.132%200%2000-3.015-.274M29.617%2017.228c-.363.019-.711.03-1.066.03-1.403%200-2.625-.177-3.79-.475l.006%203.865a15.28%2015.28%200%20003.864.488c.346%200%20.686-.01%201.013-.046zM19.827%2014.966c-1.516-.644-3-1.246-4.894-1.627l-.006%203.892c1.893.34%203.328.91%204.872%201.539z%22%20fill%3D%22none%22%2F%3E%3Cg%20fill%3D%22%23bbb%22%3E%3Cpath%20d%3D%22M29.483%2013.334l-.027-3.862a18.022%2018.022%200%20004.92-1.065l.08%203.878a17.423%2017.423%200%2001-4.973%201.05zM20.372%2011.334c-.198-.085-.551-.22-.734-.32l.029-3.804c.182.075.455.174.624.246%201.421.606%202.795%201.196%204.31%201.57l.005%203.866c-1.482-.38-2.835-.961-4.234-1.558zM11.75%209.2c-.669%200-1.29.013-1.892.015l-.052-3.886c.556.007%201.185-.007%201.864-.007%201.138%200%202.171.109%203.102.262l-.006%203.89A16.133%2016.133%200%200011.75%209.2M29.537%2013.35c-.363.018-.712.03-1.067.03-1.402%200-2.625-.177-3.789-.475l.005%203.865a15.28%2015.28%200%20003.865.488c.346%200%20.686-.011%201.013-.046zM19.747%2011.088c-1.517-.644-3-1.246-4.894-1.627l-.007%203.892c1.893.34%203.328.91%204.872%201.539z%22%2F%3E%3Cpath%20d%3D%22M5%209.923v3.819m.066.01l-.08-3.877c1.058-.282%202.614-.542%204.9-.668l.053%203.886c-2.247.116-3.811.377-4.873.66zM29.644%2021.09l-.027-3.862a18.022%2018.022%200%20004.92-1.065l.08%203.878a17.423%2017.423%200%2001-4.973%201.05zM20.532%2019.09c-.197-.085-.55-.22-.733-.32l.028-3.804c.183.075.456.174.625.246%201.42.606%202.795%201.196%204.31%201.57l.005%203.866c-1.482-.38-2.835-.961-4.235-1.558zM11.911%2016.956c-.669%200-1.29.013-1.892.015l-.053-3.886c.557.007%201.186-.007%201.865-.007%201.137%200%202.171.108%203.102.261l-.006%203.891a16.133%2016.133%200%2000-3.016-.274%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M5.08%2013.801v3.819m.066.01l-.08-3.878c1.058-.281%202.615-.542%204.9-.668l.053%203.886c-2.246.117-3.81.378-4.873.66z%22%20fill%3D%22none%22%2F%3E%3Cg%20stroke%3D%22%23bbb%22%20fill%3D%22none%22%20stroke-width%3D%223.4%22%3E%3Cpath%20d%3D%22M4.306%2036.054V4.444c1.33-.354%204.049-.515%207.364-.515h0c3.593%200%206.151%201.08%208.621%202.134%202.456%201.047%204.77%202.046%208.099%202.046%202.406%200%205.823-.552%207.304-1.095v29%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222.3686439999999997%22%2F%3E%3Cpath%20d%3D%22M34.697%2021.132c-1.481.544-3.58%201.095-5.986%201.095-3.328%200-5.643-.998-8.098-2.046-2.47-1.054-5.029-2.133-8.621-2.133h0c-3.315%200-5.435.32-6.765.674%22%20stroke-width%3D%222.3686439999999997%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); background-size: 33px 33px; background-position: 4px 3px; background-repeat: no-repeat; } .questionsEinde.selected, .questionsEinde:hover { background-image: url('data:image/svg+xml, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22151.181%22%20height%3D%22151.181%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20d%3D%22M29.456%209.472c-.362.019-.711.03-1.066.03-1.403%200-2.625-.177-3.789-.475l.005%203.865a15.28%2015.28%200%20003.864.488c.347%200%20.686-.01%201.013-.046zM19.667%207.21c-1.517-.644-3-1.246-4.895-1.626l-.006%203.89c1.893.34%203.328.91%204.872%201.54zM4.92%206.045v3.819m.066.01l-.08-3.877c1.057-.281%202.614-.542%204.9-.668l.052%203.886c-2.246.116-3.81.378-4.872.66zM29.564%2017.212l-.027-3.862a18.017%2018.017%200%20004.919-1.065l.08%203.878a17.423%2017.423%200%2001-4.972%201.05z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M20.452%2015.212c-.198-.085-.55-.22-.734-.32l.029-3.804c.183.075.455.174.625.246%201.42.606%202.794%201.196%204.31%201.57l.004%203.866c-1.481-.38-2.835-.961-4.234-1.558zM11.83%2013.078c-.668%200-1.289.013-1.891.016l-.053-3.886c.557.008%201.185-.005%201.864-.005%201.138%200%202.172.108%203.103.26l-.007%203.892a16.132%2016.132%200%2000-3.015-.274M29.617%2017.228c-.363.019-.711.03-1.066.03-1.403%200-2.625-.177-3.79-.475l.006%203.865a15.28%2015.28%200%20003.864.488c.346%200%20.686-.01%201.013-.046zM19.827%2014.966c-1.516-.644-3-1.246-4.894-1.627l-.006%203.892c1.893.34%203.328.91%204.872%201.539z%22%20fill%3D%22none%22%2F%3E%3Cg%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M29.483%2013.334l-.027-3.862a18.022%2018.022%200%20004.92-1.065l.08%203.878a17.423%2017.423%200%2001-4.973%201.05zM20.372%2011.334c-.198-.085-.551-.22-.734-.32l.029-3.804c.182.075.455.174.624.246%201.421.606%202.795%201.196%204.31%201.57l.005%203.866c-1.482-.38-2.835-.961-4.234-1.558zM11.75%209.2c-.669%200-1.29.013-1.892.015l-.052-3.886c.556.007%201.185-.007%201.864-.007%201.138%200%202.171.109%203.102.262l-.006%203.89A16.133%2016.133%200%200011.75%209.2M29.537%2013.35c-.363.018-.712.03-1.067.03-1.402%200-2.625-.177-3.789-.475l.005%203.865a15.28%2015.28%200%20003.865.488c.346%200%20.686-.011%201.013-.046zM19.747%2011.088c-1.517-.644-3-1.246-4.894-1.627l-.007%203.892c1.893.34%203.328.91%204.872%201.539z%22%2F%3E%3Cpath%20d%3D%22M5%209.923v3.819m.066.01l-.08-3.877c1.058-.282%202.614-.542%204.9-.668l.053%203.886c-2.247.116-3.811.377-4.873.66zM29.644%2021.09l-.027-3.862a18.022%2018.022%200%20004.92-1.065l.08%203.878a17.423%2017.423%200%2001-4.973%201.05zM20.532%2019.09c-.197-.085-.55-.22-.733-.32l.028-3.804c.183.075.456.174.625.246%201.42.606%202.795%201.196%204.31%201.57l.005%203.866c-1.482-.38-2.835-.961-4.235-1.558zM11.911%2016.956c-.669%200-1.29.013-1.892.015l-.053-3.886c.557.007%201.186-.007%201.865-.007%201.137%200%202.171.108%203.102.261l-.006%203.891a16.133%2016.133%200%2000-3.016-.274%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M5.08%2013.801v3.819m.066.01l-.08-3.878c1.058-.281%202.615-.542%204.9-.668l.053%203.886c-2.246.117-3.81.378-4.873.66z%22%20fill%3D%22none%22%2F%3E%3Cg%20stroke%3D%22%23fff%22%20fill%3D%22none%22%20stroke-width%3D%223.4%22%3E%3Cpath%20d%3D%22M4.306%2036.054V4.444c1.33-.354%204.049-.515%207.364-.515h0c3.593%200%206.151%201.08%208.621%202.134%202.456%201.047%204.77%202.046%208.099%202.046%202.406%200%205.823-.552%207.304-1.095v29%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222.3686439999999997%22%2F%3E%3Cpath%20d%3D%22M34.697%2021.132c-1.481.544-3.58%201.095-5.986%201.095-3.328%200-5.643-.998-8.098-2.046-2.47-1.054-5.029-2.133-8.621-2.133h0c-3.315%200-5.435.32-6.765.674%22%20stroke-width%3D%222.3686439999999997%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); } .question:not(.mQuestion):hover { font-weight: 800; color: white; font-size: 1.2em; } .question.selected { background-color: #FF8500; padding-left: 9px; color: white; width: 41px; } .question.fout:not(.selected) { background-color: #CCC; color: #1E2447; font-weight: 800; } /* dit is de animatie wanneer een vraag goed is */ .question.goed { animation: standingWave2; animation-duration: 0.7s; animation-timing-function: linear; animation-iteration-count: 3; animation-fill-mode: forwards; background: linear-gradient(to right, #009304 0px, #009304 40px, white 70px); background-size: 80px 40px; background-position: 0px 0px; } @keyframes standingWave2 { 0% { background-position: 0% 0%; } 100% { background-position: 80px 0px; } } .question.goed::before { content: '✓'; width: 10px; height: 10px; position: absolute; top: 0px; left: 27px; color: #FFF; font-size: 15px; z-index: 100; } .question:not(.mQuestion).leeg::before { content: '◯'; width: 10px; height: 10px; position: relative; top: -12px; left: 12px; color: #FFF; font-size: 8px; } .question:not(.mQuestion).selected.leeg::before { content: '◯'; width: 10px; height: 10px; position: relative; top: -12px; left: 8px; color: #FFF; font-size: 8px; } /* driehoekje rechts van de vraag-div niet mobiel*/ .question:not(.mQuestion).selected::after { content: ''; width: 0px; height: 0px; display: inline; border-style: solid; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #FF8500; position: absolute; top: 10px; left: 40px; -webkit-transition: border-color 1s; -moz-transition: border-color 1s; -ms-transition: border-color 1s; -o-transition: border-color 1s; transition: border-color 1s; } .question:not(.mQuestion).selected.fout::after { border-color: transparent transparent transparent #FF8500; } .question:not(.mQuestion).selected.goed::after { border-color: transparent transparent transparent #009304; } .questionNumber { width: 30px; height: 20px; position: absolute; left: 5px; top: 10px; } /* 2020415 hier staan twee animatieclassen voor wanneer * we een refresh uitvoeren op alle vragen */ .questionNumberRefresh { animation: rotationNumber 1s 1 linear; } @keyframes rotationNumber { 50% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } } .questionRefresh { animation: animateBackground 1s 1 linear; } @keyframes animateBackground { 10% { background-color: #FCEAC7; } 50% { background-color: #1E2447; } } /* * EINDE Classes voor het vraag-knopje *----------------------------------------------------------------------------*/ /* ---------------------------------------------------------------------------- * START Classes voor de bladerknoppen */ .startKnoppenDesktop { height: 80px; width: 40px; background-color: #1E2447; border-radius: 2 0px; -moz-border-radius: 20px; -webkit-border-radius: 20px; margin-bottom: 5px; } .startKnoppen .vraagKnop { color: #BBB; width: 40px; height: 40px; display: block; margin: 0px; padding: 0px; float: left; text-align: center; } .vraagKnop.buttonDisabled { color: #666 !important; } .startKnoppen .vraagKnop:not(.buttonDisabled):hover { color: #FFF; } .vorigeVraag span { position: relative; left: -1px; top: 5px; float: none; } .volgendeVraag span { float: none; position: relative; left: -1px; top: 5px; } /* * EINDE classes voor de bladerknoppen *----------------------------------------------------------------------------*/ .activePK { color: #FF8500; } .textHidden { color: #1E2447; } .glyphicon { top: 0px; } /*** EINDE menu op cursus scherm ***/ /* */ .icon-medal-empty { background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iQ2FwYV8xIiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgaGVpZ2h0PSIyMi4yNDEiIHZpZXdCb3g9IjAgMCAxNS45ODkwNzQgMjIuMjQwOTc1IiB3aWR0aD0iMTUuOTg5IiB2ZXJzaW9uPSIxLjEiIHk9IjBweCIgeD0iMHB4IiB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPjxnIGlkPSJnODIwNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMzLjM1NSAtNy44OTMyKSI+PGNpcmNsZSBpZD0icGF0aDQxODItMSIgc3R5bGU9ImNvbG9yLXJlbmRlcmluZzphdXRvO2NvbG9yOiMwMDAwMDA7aXNvbGF0aW9uOmF1dG87bWl4LWJsZW5kLW1vZGU6bm9ybWFsO3NoYXBlLXJlbmRlcmluZzphdXRvO3NvbGlkLWNvbG9yOiMwMDAwMDA7aW1hZ2UtcmVuZGVyaW5nOmF1dG8iIHN0cm9rZS13aWR0aD0iMi4wMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZT0iI2ZmYTUwMCIgY3k9IjE1LjYwMSIgY3g9IjQxLjM1IiByPSI2LjY5MTIiIGZpbGw9Im5vbmUiLz48cGF0aCBpZD0icGF0aDctMyIgZmlsbD0iI2ZmYTUwMCIgZD0ibTMzLjU4MiAyNy45NyAyLjk2NjItMS4xOTNjMC4xOTE3NC0wLjA3NzExIDAuNDA1NTcgMC4wMTc0NSAwLjQ3NzM1IDAuMjExM2wxLjExMTEgMi45OTc5YzAuMDcxODIgMC4xOTM4NiAwLjE5Nzg4IDAuMTk3NzIgMC4yODE2MiAwLjAwODdsMi45MzA4LTYuNjIxIDIuOTMwOCA2LjYyMWMwLjA4MzYxIDAuMTg5MDIgMC4yMDk4IDAuMTg1MTYgMC4yODE2Mi0wLjAwODdsMS4xMTExLTIuOTk3OWMwLjA3MTgyLTAuMTkzOSAwLjI4NTU2LTAuMjg4NDUgMC40NzczNS0wLjIxMTNsMi45NjYyIDEuMTkzYzAuMTkxNzQgMC4wNzcxIDAuMjc5NDYtMC4wMTM1OCAwLjE5NTczLTAuMjAyNmwtMi44NjE1LTYuNDY0NGMtMS4zNDUyIDEuMTk1MS0zLjExMDQgMS45MjY0LTUuMDQzOSAxLjk0MDgtMC4wMTkzMiAwLTAuMDM4MjMgMC4wMDE1LTAuMDU3NSAwLjAwMTUtMC4wMTkyOCAwLTAuMDM4MTktMC4wMDE0LTAuMDU3NS0wLjAwMTUtMS45MzM0LTAuMDE0MzYtMy42OTg2LTAuNzQ1NjYtNS4wNDM5LTEuOTQwOGwtMi44NjEzIDYuNDY0NGMtMC4wODM3MyAwLjE4OTA2IDAuMDA0IDAuMjc5NzUgMC4xOTU3MyAwLjIwMjZ6Ii8+PC9nPjwvc3ZnPg==); background-repeat: no-repeat; background-position: 0px 0px; width: 20px; height: 20px; display: inline-block; } /* */ .icon-medal-full { background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iQ2FwYV8xIiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgaGVpZ2h0PSIyMi4yNDEiIHZpZXdCb3g9IjAgMCAxNS45ODkwNzQgMjIuMjQwOTc1IiB3aWR0aD0iMTUuOTg5IiB2ZXJzaW9uPSIxLjEiIHk9IjBweCIgeD0iMHB4IiB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPjxnIGlkPSJnODIwNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMzLjM1NSAtNy44OTMyKSI+PGNpcmNsZSBpZD0icGF0aDQxODItMSIgc3R5bGU9ImNvbG9yLXJlbmRlcmluZzphdXRvO2NvbG9yOiMwMDAwMDA7aXNvbGF0aW9uOmF1dG87bWl4LWJsZW5kLW1vZGU6bm9ybWFsO3NoYXBlLXJlbmRlcmluZzphdXRvO3NvbGlkLWNvbG9yOiMwMDAwMDA7aW1hZ2UtcmVuZGVyaW5nOmF1dG8iIHN0cm9rZS13aWR0aD0iMi4wMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZT0iI2ZmYTUwMCIgY3k9IjE1LjYwMSIgY3g9IjQxLjM1IiByPSI2LjY5MTIiIGZpbGw9IiNmZmE1MDAiLz48cGF0aCBpZD0icGF0aDctMyIgZmlsbD0iI2ZmYTUwMCIgZD0ibTMzLjU4MiAyNy45NyAyLjk2NjItMS4xOTNjMC4xOTE3NC0wLjA3NzExIDAuNDA1NTcgMC4wMTc0NSAwLjQ3NzM1IDAuMjExM2wxLjExMTEgMi45OTc5YzAuMDcxODIgMC4xOTM4NiAwLjE5Nzg4IDAuMTk3NzIgMC4yODE2MiAwLjAwODdsMi45MzA4LTYuNjIxIDIuOTMwOCA2LjYyMWMwLjA4MzYxIDAuMTg5MDIgMC4yMDk4IDAuMTg1MTYgMC4yODE2Mi0wLjAwODdsMS4xMTExLTIuOTk3OWMwLjA3MTgyLTAuMTkzOSAwLjI4NTU2LTAuMjg4NDUgMC40NzczNS0wLjIxMTNsMi45NjYyIDEuMTkzYzAuMTkxNzQgMC4wNzcxIDAuMjc5NDYtMC4wMTM1OCAwLjE5NTczLTAuMjAyNmwtMi44NjE1LTYuNDY0NGMtMS4zNDUyIDEuMTk1MS0zLjExMDQgMS45MjY0LTUuMDQzOSAxLjk0MDgtMC4wMTkzMiAwLTAuMDM4MjMgMC4wMDE1LTAuMDU3NSAwLjAwMTUtMC4wMTkyOCAwLTAuMDM4MTktMC4wMDE0LTAuMDU3NS0wLjAwMTUtMS45MzM0LTAuMDE0MzYtMy42OTg2LTAuNzQ1NjYtNS4wNDM5LTEuOTQwOGwtMi44NjEzIDYuNDY0NGMtMC4wODM3MyAwLjE4OTA2IDAuMDA0IDAuMjc5NzUgMC4xOTU3MyAwLjIwMjZ6Ii8+PC9nPjwvc3ZnPg==); background-repeat: no-repeat; background-position: 0px 0px; width: 20px; height: 20px; display: inline-block; } /* reset/remove right position so scrollbar appears on left */ .mCS-menu { right: auto; } /* switch margin from right to left */ .mCS-menu > .mCSB_container { margin-right: 0; margin-left: 20px; } .mCS-menu_vertical { margin-left: 2px !important; } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown { /* set buttons height to 26 pixels (their width is 100% so it fits .mCSB_scrollTools width we set above) */ height: 26px; /* change their background-position to use your own separate custom images */ background-position: center; } .mCS-menu .mCSB_buttonUp { background-image: url("img/mCSB_buttonUp.png"); background-position: 1px 3px !important; } .mCS-menu .mCSB_buttonDown { background-image: url("img/mCSB_buttonDown.png"); background-position: 0px 4px !important; } .mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #aaa !important; } .mCS-menu .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #CCC; width: 6px; } #divPolarTimePerQuestion { width: 40px; height: 40px; position: relative; margin-bottom: 4px; }