/********** BASIS *************/



::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 12px;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}



.basis, td, body {
    font-family: Verdana, Arial;
    font-size: 12px;
    color: #111;
}

body {
    margin: 0px;
}

.div_beheertop {
    background: url(../gfx/beheertop.jpg) #b5b5ab no-repeat;
    width: 100%;
    height: 111px;
    display: block;
}

p {
    margin: 0 0 1em 0;
    padding: 0px;
}

a {
    color: #111;
    font-weight: normal;
}

    a:hover {
        text-decoration: underline;
    }

    a:active {
        color: #dddddd;
    }



textarea {
    resize: none;
}








/* NAVIGATON */


.nav_main {
    display: block;
    padding: 6px;
    background-color: #f7f7f7;
    margin: 12px 0px 0 0;
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;
}

    .nav_main:hover {
        background-color: #ddd;
        text-decoration: none;
    }

.nav_sub {
    display: none;
    padding: 3px 3px 3px 8px;
    text-decoration: none;
}

    .nav_sub:hover {
        background-color: #ddd;
        text-decoration: none;
    }




.header, .titel {
    font-family: 'Open Sans', Tahoma, Arial;
    font-size: 14px;
    font-weight: bold;
    color: #111;
}

table {
    border-collapse: collapse;
}

.beheerbold {
    font-family: 'Open Sans', Tahoma, Arial;
    font-size: 11px;
    font-weight: bold;
    color: #111;
}

body, input, .beheer, textarea, select, table, .basis {
    font-family: 'Open Sans', Tahoma, Arial;
    font-weight: normal;
    color: #111;
}

input {
    padding: 4px;
}

.hand {
    cursor: pointer;
}

.textbox {
    font-size: 11px;
    font-family: 'Open Sans', Tahoma, Arial;
}

.arialbold20px {
    font-weight: bold;
    font-size: 20px;
    font-family: 'Open Sans', Tahoma, Arial;
}

.arialbold16px {
    font-weight: normal;
    font-size: 16px;
    font-family: 'Open Sans', Tahoma, Arial;
}



legend {
    font-size: 14px;
    font-weight: bold;
    background-color: #000;
    color: #fff;
    padding: 3px 6px;
}

label {
    cursor: pointer;
}




/************** DIV ONDER LIJN **************/
.divLijntje, .div_lijntje {
    border-bottom: solid 1px #ccc;
    float: none;
    clear: both;
    display: block;
    font-size: 0px;
    height: 1px;
    width: 100%;
}




/********** LARGE CHECKBOXES *************/
.cb_large, .cb_large input[type="checkbox"] {
    width: 18px;
    height: 18px;
    background-image: none;
    background-color: transparent;
    cursor: pointer;
}


/************ MEGA CHECKBOXES *************/
.cb_mega, .cb_mega input[type="checkbox"] {
    width: 38px;
    height: 38px;
    background-image: none;
    background-color: transparent;
    cursor: pointer;
}



/********** LARGE RADIOBUTTONS *************/
.rb_large input[type="radio"], input[type="radio"].rb_large {
    width: 16px;
    height: 16px;
    background-image: none;
}

.rb_large label {
    margin-right: 5px;
    font-size:150%;
}




/* NO SPACE TABLE */

.tblNoSpace, .tblNoPad, .tbl_nospace, .tbl_nopad, .tblnospace, .tblnopad, .tbl_no_space {
    border: 0px solid #dddddd;
    padding: 0;
    border-collapse: collapse;
}

    .tblNoSpace > tbody > tr > td, .tblNoPad > tbody > tr > td, .tbl_nospace > tbody > tr > td, .tbl_nopad > tbody > tr > td, .tblnospace > tbody > tr > td, .tblnopad > tbody > tr > td, .tbl_no_space > tbody > tr > td {
        vertical-align: top;
        margin: 0;
        padding: 0;
    }


.td_valign_top td {
    vertical-align: top;
}


/********** CONFIG PAGE *************/

.ddPageSize {
    height: 32px;
}

.sectionname {
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
}

.keyname {
    font-family: Arial;
    font-size: 12px;
    display: inline-block;
}

.keyvalue {
    font-family: Arial;
    font-size: 11px;
}

img {
    border: none;
}



/************************* PAGINA NUMMERS ************************/
/* de classe om de totale pagina nummer-label heen */
.pagenrs {
    white-space: nowrap;
}

    /* elk pagina nummer is een link */
    .pagenrs a {
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
        background-color: #f5f5f5;
        border: solid 1px #ddd;
        border-radius: 0px;
        box-shadow: 0 0px 0px rgba(0,0,0,0.3);
        color: #333;
        display: inline-block;
        font-family: 'Open Sans', Tahoma, Arial;
        font-size: 18px;
        font-weight: normal;
        line-height: 22px;
        margin: 0 2px 0 2px;
        padding: 6px 0 6px 0;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        -moz-transition: 0.5s;
        -o-transition: 0.5s;
        -webkit-transition: 0.5s;
        transition: 0.5s;
        width: 60px;
    }

        .pagenrs a:hover {
            background-color: #f0f8ff;
            text-decoration: none;
        }

        .pagenrs a.selected {
            background-color: #dddddd;
            font-weight: bold;
        }




/********** PAGE ALGEMEEN *************/

#tblContainer {
    background-color: #ffffff;
    border-collapse: collapse;
    width: 100%;
}

    #tblContainer > td {
        margin: 0;
        padding: 5px;
    }

/********** PAGE LIST *************/
#dgRows tr {
    border-bottom: 1px solid transparent;
}

.dgRows_tr_even {
    background-color: #f7f7f7;
}

.dgRows_tr_odd {
    background-color: #ffffff;
}

#dgRows tr:hover {
    border-bottom: 1px solid #ccc;
}



/********** PAGE EDIT *************/

.tblFields {
    margin: 1px;
    border: #eee 0px solid;
    position: relative;
    width: 100%;
}

    .tblFields > tbody > tr:nth-child(even) {
        background-color: #f7f7f7;
    }

    .tblFields > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }

    .tblFields > tbody > tr > td {
        border-bottom: #fff 0px solid;
        padding: 10px 5px 10px 5px;
    }

    .tblFields tbody tr td label {
        display: inline-block;
        white-space: normal;
        width: 100px;
    }

.edit_datetime {
    width: 160px;
}





/********** PAGE FILEUPLOADER *************/

.div_thumb {
    position: relative;
    height: 146px;
    width: 106px;
    min-height: 120px;
    float: left;
    padding: 2px 2px;
    margin: 0px 5px 5px 0px;
    background-color: #cccccc;
    text-align: center;
    font-size: 10px;
    font-family: Arial;
}

    .div_thumb .del {
        position: absolute;
        top: 125px;
        left: 5px;
    }

.btn {
    padding: 5px 10px 5px 10px;
    margin: 3px 10px 3px 0px;
    font-family: 'Open Sans', Tahoma, Arial;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    background-color: lightgreen;
    color: #333;
}

.colorpicker_blokje {
    display: block;
    width: 20px;
    height: 20px;
    border: solid 1px black;
}

/********** FILE / DIRECTORY BROWSER *************/

.browse_dir {
    display: block;
    padding: 0px 2px 2px 23px;
    background: url('data:image/gif;base64,R0lGODlhEAAQAKIHAJmZAAAAAP//////zP//mczMZv/Mmf///yH5BAHoAwcALAAAAAAQABAAAANFeLrcCxAG98QYhIDpQPlgEUUKcJ3oRRSTmb0wYbCHG8s4bd+GrGOwnnDVAgZxs+JrKEzWBkykwekJWUGcgHbL5VK+YHACADs=') /*../gfx/folder.gif*/ no-repeat left center;
    font-family: Verdana;
    font-size: 13px;
    font-weight: normal;
    color: #000000;
    line-height: 20px;
}

.browse_file {
    display: block;
    padding: 0px 2px 2px 0px;
    font-family: Verdana;
    font-size: 11px;
    font-weight: normal;
    color: #000000;
}

.FileUploadImageText {
    font-size: 9px;
    font-weight: normal;
    font-family: Arial;
}




/******************** REORDER ITEMS **************/

.ReOrderControl ul, .ReOrderControl li {
    margin: 0;
    padding: 0;
    border: none;
    list-style: none;
}

.ReorderItemClass {
    border: solid 1px black;
    background: url('data:image/gif;base64,R0lGODlhEAAQAOZZAL6+vr+/vw0NDRISEszMzMDAwMHBwUBAQPb29nFxcfX19fr6+nh4eB0dHaWlpY6OjpiYmJubm7e3t7q6uk1NTcbGxtHR0SkpKXl5ee7u7rOzsxcXF7i4uGxsbF5eXq+vr25ubvz8/JWVlU5OTvj4+AkJCT4+Pi4uLjc3NycnJxUVFeDg4AICAt7e3rW1tSMjIyIiIgEBATo6Ot3d3SAgIG1tbbu7u7S0tMXFxcPDw/Dw8O3t7T09PbCwsHNzc/T09Pf39zAwMPHx8VtbW09PTxQUFAwMDHp6eo+Pj9DQ0P39/WVlZfLy8pOTk2ZmZra2tkpKSmtra0hISGFhYREREZmZmeLi4kRERAAAAP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAFkALAAAAAAQABAAAAeagFmCg1kRI4SIhAAbMRiJiB8sWJNOCo+CBDYBBQATlpeghD0Egi4mQTVMghVKggElHFk3RiBNKVckWQlLWVUqWAVZPFGCVgIGWQxYPlCTAVknIoMNGllHWDAIU1gAWR0XK0APAjO6RUlZC0QSWUJSAzRUDoJIOIMIOoIhBk8tgz+hAgqCgOLAARkedoDKQGHSgBwBFwx5YSFRIAA7') /*../gfx/move_icon.gif*/ no-repeat 2px 2px;
    background-color: #ffffff;
    padding: 3px 3px 3px 30px;
    margin: 1px;
    cursor: move;
    width: 560px;
}



/******************** LINK EXTERNAL **************/

.external_link, .externallink, .link_external {
    padding-right: 11px;
    margin-right: 0px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAMAAACecocUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABJQTFRFzMzMgcTb2Oz0veDs4/L3////BJwbGAAAAAZ0Uk5T//////8As7+kvwAAADxJREFUeNpcy7kRACAMA0F/6r9lJGsg4AKzgyHAJreQs3YGA7rtt7DJalvMrnXx5M3sG5H5r/D7BhwBBgBlJgF/44OkcgAAAABJRU5ErkJggg==') /*../gfx/external_link.png*/;
    background-repeat: no-repeat;
    background-position: center right;
}



/************************* PRODUCT KLEUR ************************/

.divKleurKeuze {
    width: 360px;
    display: block;
    height: 40px;
}

.img_color {
    float: left;
    display: block;
    border: solid 1px white;
    margin: 2px 2px 0px 0px;
    padding: 2px;
    width: 27px;
    height: 27px;
}

    .img_color_selected, .img_color:hover {
        float: left;
        display: block;
        border: solid 1px #999;
        margin: 2px 2px 0px 0px;
        padding: 2px;
        width: 27px;
        height: 27px;
    }

        .img_color div, .img_color_selected div {
            margin: 3px;
            border: 1px solid black;
            width: 19px;
            height: 19px;
        }






/******************** TBL_3_COLUMNS *****************************/
.tbl_3_columns {
    width: 100%;
}

    .tbl_3_columns td {
        width: 33%;
    }

    .tbl_3_columns img {
        margin: 0;
        width: 100%;
    }





/********** REORDER TABLE *************/
#tblReorder {
    background-color: #f7f7f7;
}

    #tblReorder thead tr td {
        font-size: 12px;
        font-weight: bold;
        height: 30px;
        padding: 0px 10px 0px 10px;
        vertical-align: middle;
        background-color: #faf0e6;
    }

    #tblReorder tbody tr td {
        font-size: 12px;
        height: 30px;
        font-weight: normal;
        padding: 0px 10px 0px 10px;
        vertical-align: middle;
        white-space: nowrap;
    }

tr.myDragClass td {
    background-color: #cccc99;
}









/************** SHOW MESSAGE **************/
.showMessage_Green {
    font-family: Arial, Helvetica, clean, sans-serif;
    font-size: large;
    font-weight: bold;
    background-color: #eee;
    border: solid 0px green;
    text-align: center;
    color: black;
    padding: 0px;
    margin: 0px;
    height: 100px;
}

.showMessage_Red {
    font-family: Arial, Helvetica, clean, sans-serif;
    font-size: 20px;
    font-weight: bold;
    background-color: #ff5555;
    border: solid 0px red;
    text-align: center;
    color: white;
    padding: 0px;
    margin: 0px;
    height: 100px;
}




.bs-iso .panel-heading,
.bs-iso .btn {
    background-image: none !important;
}