/*lichtgroen van de rechter vleugel - dec=190 213  62 hex=BED53E  */
/*lichtblauw van de linkervelugel   - dec=147 214 227 hex=93D6E3  */
/*donkerblauw van achtergrond logo  - dec= 83 112 182 hex=5370B6  */
/*Heellichtblauw                    - dec=171 222 233 hex ABDEE9  */
/*Schokking licht blauw             - dec=204 234 242 hex CCEAF2             */

/*Algemene css*/
tr.pro {
    display:none;
}




body{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: grey;
    background-color:white;
    font-size: 14px;
    border: 0px dotted #00FF00;
    margin-top:100px;
}

.top{
    border:0px #FF0000 solid;
    height:100px;
    position:fixed;
    left:0px;
    top:0px;
    width:100%;
    /*padding-left:100px;  */
    /*padding-right:100px; */
    /*padding-top:50px;    */
    background-image: linear-gradient(white, lightgrey 80%);
}
.menu-pos{
    position:fixed;
    width:90%;
    left:10px;
    top:40px;
}
.logo-pos{
     float: right;
     margin-right:20px;
     margin-top:5px;
}

.onder{
    margin-top: 20px;
    margin-bottom: 60px;
    padding: 40px 120px 40px 80px;          /*  boven rechts onder links  */
    border: 0px dotted #FF0000;
    background: #FFFFFF;
}

.box{
    border-radius: 25px;
    background: white;
    padding: 20px;
    width: 100%;
    height: auto;
    border: 2px solid grey;
    line-height: 190%;
}

.kop{
    font-size: 22px;
    font-weight: bold;
    height: 50px;
    border-bottom:2px solid;
    margin-bottom: 20px;
}

.line{
    height: 0px;
    border-top:2px solid;
    margin-top:2px;
}
.titel{
    font-size: 18px;
    font-weight: bold;
    height: 40px;
    margin-bottom: 5px;
}
.verhaal{
    font-size: 14px;
}

.image{
    margin:0px;
    padding:0px;
    height: 130px;
}
.image-right{
    float: right;
    margin:10px;
}
.image-left{
    float: left;
    margin:10px;
}

.klik{
}
.klik:hover{
    background: #93D6E3;
}

.inline{
    display: inline-block;
}
form{
    display:inline-block;
    margin-right:5px;
    margin-bottom:10px;
}

.knop{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    color: #5370B6;
    background: #f3f3f3;
    text-align: center;
    padding: 5px 10px;
    line-height:20px;
    margin-right: 2px;
    cursor: pointer;
    border: 0px;
}
.knop:hover{
    background: #93D6E3;
}



.knopimg{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: #5370B6;
    background: #f3f3f3;
    text-align: center;
    padding: 0px 0px 10px 0px;
    line-height:40px;
    margin-right: 2px;
    cursor: pointer;
}

.bot{
    background: grey;
    color: white;
    position:fixed;
    left:0px;
    bottom:0px;
    height:60px;
    width:100%;
}

table {
    margin-left:auto;
    margin-right:auto;
}

th {
   font-weight:bold;
   background: #f0f0f0;
}

tr{
    border-spacing:0px
    padding:0px;
    margin:0px;
}

td {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #5370B6;
    font-weight:bold;
    font-size: 14px;
    line-height:24px;
    border:0px solid red;
    padding:5px;
    margin:0px;
}

td input[type=text],td input[type=password],td input[type=date]{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #5370B6;
    font-weight:bold;
    font-size: 14px;
    width:100%;
}

td input[type=text]:focus,td input[type=date]:focus {
    color: #FF7070;
}

td input[type=submit] {
    color: #5370B6;
    font-size: 14px;
    background: #f3f3f3;
    text-align: center;
    padding: 8px 20px;
    border: 0px dotted #FF0000;
    line-height:18px;
}

select {
    color: #5370B6;
    font-weight:bold;
    font-size: 14px;
}






/*Strip the ul of padding and list styling*/
ul {
    list-style-type:none;
    margin:0;
    padding:0;
    position: absolute;
}
/*Create a horizontal list with spacing*/
li {
    display:inline-block;
    float: left;
    margin-right: 1px;
}
/*Style for menu links*/
li a {
    display:block;
    min-width:140px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #5370B6;
    font-weight: bold;
    background: #F3F3F3;                    /*knop niet actief*/
    text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
    background: #93D6E3;

}
/*Style for dropdown links*/
li:hover ul a {
    background: #e3e3e3;                   /*achtergrondkleur van pulldown f3f3f3  */
    color: #5370B6;
    font-weight: bold;
    height: 40px;
    line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
    background: #93D6E3;
    color: #5370B6;
}
/*Hide dropdown links until they are needed*/
li ul {
    display: none;
}
/*Make dropdown links vertical*/
li ul li {
    display: block;
    float: none;
}

/*Prevent text wrapping*/
li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
}

/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
    display: block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #5370B6;
    background: #F3F3F3;   /*93D6E3;*/
    text-align: center;
    padding: 10px 0;
    display: none;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}

/*Responsive Styles*/
/*=================*/
@media screen and (max-width : 900px){
    /*Make dropdown links appear inline*/
    ul {
        position: static;
        display: none;
    }
    ul li a + .hidden, .hidden:hover {
        display: block;
    }
    li:hover ul a {
        background: #F3F3F3;                                         /*achtergrondkleur van pulldown f3f3f3  */
    }
    /*Create vertical spacing*/
    li {
        margin-bottom: 0px;
    }
    /*Make all menu links full width*/
    ul li, li a {
        width: 250px;
    }
    .sub{
        display: none;
    }
    /*Display 'show menu' link*/
    .show-menu {
        display:block;
        border:0px solid black;
        width:40px;
        float:center;
    }
    body{
        margin-top:30px;
    }
    .onder{
        padding: 80px 50px 10px 10px;                                /*  ? rechts onder links    */
        /*padding: 80px 120px 80px 80px;*/                           /*  ? ? onder links  */
    }
    
    table {
        width:100%;
    }
    thead {display: none;}
    tr td:first-child {
        /*background: #f0f0f0;*/
        font-weight:bold;
        width:100%;
    }

    tbody td {display: block;  text-align:center;}
    tbody td:before {
      content: attr(data-th);
      display: block;
      text-align:center;
    }

}