body {
    background-color: white !important;
}
#instruction-header table {
    margin-bottom: 0;
    border-collapse:separate;
}
#instruction-header-table td {
    padding:0;
    background-color: #3391BD;

}
a.instruction-breadcrumb {
    color: #666666;
}

.greentext {
    color: #00b419;
    display: inline-block;
}

a.greentext:hover {
    color: #00b419;
    box-shadow: inset 0 -1px 0 #7fd98c;
}

ul.category-articles-list li:after {
    position: absolute;
    content: "";
    left: 0px;
    top:0;
    width: 24px;
    height: 24px;
    background-image:url(/template/images/support/support-icons-sprite-compact.svg);
    background-size: 48px 300px;
    background-repeat: no-repeat;
}



ul.category-articles-list li.root-title {
    padding:0;
}
ul.category-articles-list li.root-title:after {
    background: none;
}

@media only screen and (min-width: 40.0625em) {
    h1 {
        font-size: 2.625rem;
        line-height: 1.05;
    }

    div.front-row {
        margin-bottom: 30px;
    }
}

.siteblock_front {
    padding-top: 10px;
    margin: 15px 30px 0 0;
    border-top: 1px solid #cee5ef;
}

@media only screen and (max-width: 40em) {
    h1 {
        line-height: 1.05;
        font-size: 2rem;
    }


    .restore-gutter {
        padding: 0 8px !important;
    }

    .siteblock_front {
        margin: 15px 0 0 0 !important;
        border-top: none;
    }

    h4.site-name {
        margin-left: 8px;
    }

    .related-articles-instruction {
        margin: 1rem 0;
    }

}

.article-count {
    font-size: 0.85rem;
    color: #999;
    margin-left: 3px;
}



a.front-subcat {
    display: block;
}

a.front-subcat:hover {
    color:#2c6289;
}

a.front-sub-subcat {
    color: #222;
}

a.front-sub-subcat:hover {
    color:#377aab;
}

.recent-header {
    background-color: #e7f2f7;
    padding: 5px 15px;
}

a.front-recent {
    font-size: 0.875rem;
    color: black;
}

a.front-recent:hover {
    box-shadow: inset 0 -1px 0 #999;
}

ul.front-recent {
    list-style: none;
    margin: 0 15px;
}

li.front-recent {
    border-bottom: 1px solid #cee5ef;
    display: inline-block;
    position: relative;
    width: 100%;
    padding: 8px 0;
}

li.front-recent:last-child {
    border-bottom: none;
}

i.front-recent {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0.875rem;
    color: #377aab;
    font-size: 0.875rem;
}

ul.front-subcat-list {
    list-style-type: none;
    margin: 0;
}



li.front-subcat-listitem {
    position: relative;
    padding: 8px 15px 8px 2.8rem;
    line-height: 2rem;
    border-bottom: 1px solid #cee5ef;
}

@media only screen and (max-width: 40em) {
    li.front-subcat-listitem:first-child {
        border-top: 1px solid #cee5ef;
        margin-top: 10px;
    }

    a.front-sub-subcat {
        display: block;
    }

}

ul.front-subcat-list li:after {
    position: absolute;
    content: "";
    left: 8px;
    /*margin-top;10px;*/
    width: 20px;
    height: 20px;
    background: url('/template/images/sprite_cp.png') no-repeat -300px 0px;
}

ul.category-articles-list {
    list-style-type: none;
    margin: 0;
}

ul.category-articles-list li {
    position: relative;
    padding: 0.1rem 0.5rem 0.1rem 2rem;
    line-height: 1.6rem;
    margin: 0.3rem 0;
}

li.lines {
    border-bottom: 1px solid #cee5ef;
    padding: 0.5rem 0.5rem 0.5rem 2rem !important;
    margin: 0 !important;
}

@media only screen and (max-width: 40em) {
    li.lines a.link {
        display: block;
        padding: 0.5rem 0.5rem 0.5rem 2.8rem !important;
    }
}

li.lines:first-child {
    border-top: 1px solid #cee5ef;
}

li.lines:after {
    top: 0.55rem !important;
}

ul.category-articles-list li.active:after {
    background-image:url(/template/images/support/support-icons-sprite-compact.svg);
    background-size: 48px 300px;
    background-repeat: no-repeat;
    background-position: 0 -120px;
}

ul.category-articles-list li.article:after {
    background-image: url(/template/images/sprite_subcat.svg);
    background-size: 300px 900px;
    background-repeat: no-repeat;
    background-position: 0 -24px;
}

a.front-subcat-listitem {
    color: black;
    display: block;
}

.hcat-menu {
    background-color: #f5f9fb;
    padding: 15px !important;
}

.list-articles-subcats {
    padding: 0 15px !important;
}




/* Styles voor articles */

.simplebox {
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100% !important;
    margin-bottom: 20px;
}

.simplebox-title {
    display: inline-block;
    padding: 2px 10px;
    font-size: 14px;
    font-weight: 200;
}

.simplebox-title:after {
    clear: both;
    content: "";
    display: block;
}

.simplebox.type-example .simplebox-title {
    background-color: #c8eebf;
    color: #018814;
    font-weight: 400;
}

.simplebox.type-example .simplebox-content {
    border: 1px solid #c8eebf;
}

.simplebox.type-rule .simplebox-title {
    background-color: #b9d3e3;
    color: #24658d;
    font-weight: 400;
}

.simplebox.type-rule .simplebox-content {
    border: 1px solid #b9d3e3;
}

.simplebox-content {
    padding: 10px 20px;
}


.article-content h2 {
    font-size:1.9rem;
}

.article-content h3 {
    font-size:1.7rem;
}

.article-content h4 {
    font-size:1.5rem;
}

.article-content h5 {
    font-size:1.3rem;
}

.article-content h6 {
    font-size:1.125rem;
}

@media screen and (max-width: 39.975em) {
    .article-content h2 {
        font-size:1.6rem;
    }

    .article-content h3 {
        font-size:1.4rem;
    }

    .article-content h4 {
        font-size:1.2rem;
    }

    .article-content h5 {
        font-size:1.125rem;

    }

    .article-content h6 {
        font-size:1rem;
    }
}
/* Steps */

div.steps {
    width: 100%;
}



div.steps div.first div.title {
    float: left;
    font: 400 24px/26px 'Source Sans Pro',sans-serif;
    color: #337AAB;
    padding-left: 5px;
    margin-top: 15px;
    width: 80%;
}

div.steps div.first div.corner {
    float: left;
    width: 48px;
    height: 59px;
    background: url('/template/images/topleft_bg.png') no-repeat top left;
}

div.steps div.step-heading {
    width: 100%;
}

div.steps div.step-heading div.step-title {
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    padding-left: 20px;
}

div.steps div.step-heading div.step {
    display: inline-block;
    line-height: 29px;
    text-align: center;
    color: white;
    font-size: 14px;
    background-color: #337AAB;
    width: 29px;
    height: 29px;
}

div.steps div.step-body {
    width: 100%;
    overflow: hidden;
    position: relative;
}

div.steps div.step-body div.connector {
    position: absolute;
    left: 0;
    width: 29px;
    height: 100%;
    background: url('/template/images/left_bg.png') repeat;
}

div.steps div.step-heading:after {
    display: block;
    clear: both;
    content: "";
}

*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

div.first:after {
    display: block;
    clear: both;
    content: "";
}

div.steps div.step-body div.explanation {
    display: inline-block;
    margin: 10px 0px 30px 53px;
}

div.steps:after {
    display: block;
    clear: both;
    content: "";
    width: 25%;
    border-top: 1px solid #b9d3e3;
    margin-left: 14px;
}

#video-icon span a {
    display: block;
    width: 69px;
    height: 57px;
    background: url(/template/images/sprite_cp.png) no-repeat -150px 0px;
    text-indent: -9999px;
    margin-top: 0.625rem;
    margin-bottom: 0.625rem;
}

#video-icon span a:hover {
    background: url(/template/images/sprite_cp.png) no-repeat -150px -60px; }

#video-icon span a:active {
    background: url(/template/images/sprite_cp.png) no-repeat -150px -120px; }

@media screen and (min-width: 64em) {
    div.article {
        padding-right: 30px !important;
    }
}


.article-content div.simplebox{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.article-content table.exercises-table tr:first-child > td {
    border-top: 1px solid #cde4ee;
}

@media screen and (max-width: 39.975rem) {
    .article-content.ad {
        margin-top: 1rem;
    }
}

span.blue strong, span.green strong, span.orange strong, span.red strong {
    font-weight: bold;
}


div.floating-image-container.float-left {
    margin: 0 1rem 1rem 0 !important;
}

div.floating-image-container.float-right {
    margin: 0 0 1rem 1rem !important;
}