/* form */
.col_header {
    width:120px;
}

.col_data {
    width:600px;
}

.field {
    border:1px solid #666;
    padding:1px;
}

input[type="text"], input[type="password"], textarea, select, #cke_body, #cke_body span {
    border: 1px solid #ddd;
    line-height: 19px;
    font-size: 13px;
    outline: none;
}

button {
    background-color:#F28E00;
    border:1px solid #fff;
    display:inline-block;
    display:inline-block;
    padding:2px 10px 2px 10px;
    margin:0 0 15px 0;
    color:#fff;
}

    button:hover {
        cursor: pointer;
    }

.form td {
    padding: 0 0 4px 0;
}

    .form td.info {
        padding-top: 6px;
    }

table {
    border-collapse: collapse;
    margin: 0;
}

table td {
    vertical-align: top;
}


/* messages */
.message ul {
    margin:0;
    padding:0 1em;
    list-style-type:circle;
}

    .message ul li {
    }

#dialog {
    display:none;
}

#ticket_dialog {
    display:none;
}

div#ticket_dialog.ui-dialog-content.ui-widget-content {
    padding: 0;
}

    #ticket_header {
        border-bottom: 1px solid #edc9af;
        background: #f6dbc9;
        overflow: hidden;
        padding: 20px;
    }

    #ticket_content {
        padding: 10px 20px;
    }

        #ticket_content input {
            margin: 6px 0 10px;
            width: 448px;
            padding: 5px;
        }

        #ticket_content textarea {
            height: 100px;
            padding: 5px;
            width: 448px;
        }


/* overview table */
.overview {
    margin:1em 0;
}

    .overview td {
        padding:2px 0;
        border-bottom:1px solid #ccc;
    }

/* maps */
#map {
    width:650px;
    height:300px;
    border:1px solid #aaa;
    color:#000;
}

    #map a {
        color:#555;
    }


/* css */

::-webkit-input-placeholder {
    font-style: italic;
    color: #555;
}

:-moz-placeholder {
    font-style: italic;
    color: #555;
}
.fake-placeholder {
    font-style: italic;
    color: #555;
}


body {
    font-family: 'Open sans', sans-serif;
    background: #F28E00;
    overflow-y: scroll;
    line-height: 27px;
    font-size: 15px;
    color: #90949b;
}

h1 {
    font-family: 'Open Sans Condensed', sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0 0 10px;
    font-size: 36px;
    color: #F28E00;
}

h2 {
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: normal;
    font-size: 18px;
    color: #F28E00;
}

    #content h2 {
        margin-bottom:4px;
    }

h3 {
    font-family: 'Open Sans Condensed', sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 24px;
    color: #F28E00;
}

    #content h3 {
        margin-bottom:4px;
    }

h4 {
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 18px;
    color: #82858c;
}

a { color: #F28E00; }
a:hover,
a:focus { color: #F28E00; text-decoration: none; }

.img, .img-right, .img-left {
    box-shadow: 0 2px 2px #eee;
    border: 1px solid #ddd;
    background: #fff;
    padding: 3px;
}

    .img-left {
        float: left; margin: 5px 15px 0 5px;
        transform: rotate(-1deg);
       -moz-transform: rotate(-1deg);
       -webkit-transform: rotate(-1deg);
        }

    .img-right {
        float: right; margin: 5px 10px 0 10px;
        transform: rotate(1deg);
       -moz-transform: rotate(1deg);
       -webkit-transform: rotate(1deg);
        }

#content.training ul {
    margin: 0 0 20px 20px;
    padding: 0;
}

    #content.training ul li {
        margin: 0 0 0 20px;
        padding: 2px 0;
        margin: 0;
    }

.strong { font-weight: bold; }

th { font-size: 14px; font-weight: bold; }

.icn {
    vertical-align: middle;
    margin-right: 3px;
    }

.btn {
    display: inline-block;
    padding: 8px 10px 10px;
    height: 36px;
    background: url('../img/bg_btn.png') center;
    border: 1px solid #ccc;
    outline: none;
    font-family: Arial;
    line-height: 16px;
    font-size: 14px;
    color: #F28E00;
    border-radius: 3px;
    cursor: pointer;
}

    .btn:hover {
        border: 1px solid #aaa;
        background: url('../img/bg_btn_hover.png') center;
        border: 1px solid #aaa;
        text-shadow: 0 1px 1px #555;
        color: #fff;
    }

.btn_small, #Buttoncontainer {
    display: inline-block;
    background: url('../img/bg_btn.png') center;
    border: 1px solid #ccc;
    text-decoration: none;
    font-family: Arial;
    border-radius: 3px;
    line-height: 12px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    color: #fe6a01;
    outline: none;
}

    #Buttoncontainer {
        margin-bottom: 5px;
    }

    .btn_small:hover {
        background: url('../img/bg_btn_hover.png') center;
        text-shadow: 0 1px 1px #555;
        border: 1px solid #aaa;
        color: #fff;
    }

.btn_blue_small {
    font-family: 'Open Sans Condensed', sans-serif;
    border: 1px solid #F28E00;
    text-transform: uppercase;
    vertical-align: middle;
    padding: 6px 11px 7px;
    display: inline-block;
    text-decoration: none;
    margin-bottom: -1px;
    background: #F28E00;
    border-radius: 3px;
    line-height: 14px;
    font-size: 14px;
    cursor: pointer;
    outline: none;
    color: #fff;
}

    .btn_blue_small:hover {
        background: url('../img/bg_btn_blue_hover.png') center;
        text-shadow: 0 1px 1px #ff700b;
        border: 1px solid #ff700b;
        color: #fff;
    }

.btn_link {
    display: inline-block;
    padding: 10px 10px 0;
    height: 26px;
    background: url('../img/bg_btn.png') center;
    text-decoration: none;
    border: 1px solid #ccc;
    outline: none;
    font-family: Arial;
    line-height: 16px;
    font-size: 14px;
    color: #888;
    text-shadow: 0 1px 1px #fff;
    border-radius: 3px;
    font-weight: bold;
    cursor: pointer;
    }

    .btn_link:hover {
        background: url('../img/bg_btn_hover.png') center;
        border: 1px solid #aaa;
        text-shadow: 0 1px 1px #555;
        color: #fff;
        }

.btn_small_link {
    display: inline-block;
    padding: 5px 10px 0;
    height: 22px;
    background: url('../img/bg_btn.png') center;
    text-decoration: none;
    border: 1px solid #ccc;
    outline: none;
    font-family: Arial;
    line-height: 16px;
    font-size: 13px;
    color: #888;
    text-shadow: 0 1px 1px #fff;
    border-radius: 3px;
    font-weight: bold;
    cursor: pointer;
    }

    .btn_small_link:hover {
        background: url('../img/bg_btn_hover.png') center;
        border: 1px solid #aaa;
        text-shadow: 0 1px 1px #555;
        color: #fff;
        }

.btn_directcontact {
    background: url('../img/btn_directcontact.png') no-repeat;
    padding: 11px 0 9px 45px;
    width: 250px;
    height: 20px;
    overflow: hidden;
    font-size: 14px;
    text-decoration: none;
    color: #fe6a01;
    display: block;
    margin: 10px 0 0 0;
}

.btn_info {
    background: url('../img/btn_info.png') no-repeat;
    padding: 11px 0 9px 45px;
    width: 250px;
    height: 20px;
    overflow: hidden;
    font-size: 14px;
    text-decoration: none;
    color: #fe6a01;
    display: block;
    margin: 10px 0 0 0;
}

.btn_email {
    background: url('../img/btn_email.png') no-repeat;
    margin: 10px 0 0;
    display: block;
    width: 153px;
    height: 22px;
}

#bg_body {
    padding: 20px 0 30px;
    background: #fff;
    overflow: hidden;
    width: 100%;
}

#bg_header {
    top: 0; left: 0; right: 0;
    background: #fff;
    position: fixed;
    z-index: 99;
}

    #bg_header.top_space {
        border-top: 15px solid #fff;
        background: #fff;
        top: 50px;
    }

#header {
    box-sizing: border-box;
    max-width: 1100px;
    min-width: 1000px;
    min-height: 63px;
    padding: 0 10px;
    margin: 0 auto;
    width: 100%;
    color: #fff;
}

    #header .logo {
        font-family: 'Open Sans', sans-serif;
        text-decoration: none;
        position: relative;
        padding: 13px 15px;
        font-weight: 600;
        font-size: 24px;
        width: 230px;
        float: left;
        z-index: 2;
        margin: 0;
    }
    #header .logo img {
        max-height: 105px;
    }

    #header a { color: #fff; }

    #login {
        /*position: absolute; top: 0; right: 0; padding: 15px 10px 20px 40px; background: url('../img/bg_login.png') no-repeat 0 5px;*/
    }

    #header .menu {
        margin: 20px 15px 0 0;
        font-size: 13px;
        float: right;
    }

        @media all and (max-width: 1100px) {
            #header .menu {

            }
        }

        #header .menu ul {
            padding: 0;
            margin: 0;
        }

            #header .menu ul li {
                position: relative;
                margin: 0 30px 0 0;
                list-style: none;
                color: #222;
                float: left;
            }

                #header .menu ul li:last-child {
                    margin-right: 12px;
                }

            #header .menu .small ul li {
                margin: 0 15px 0 0;
            }

                #header .menu ul li a {
                    font-family: 'Open Sans Condensed', sans-serif;
                    text-transform: uppercase;
                    text-decoration: none;
                    font-weight: bold;
                    padding: 0 0 5px;
                    font-size: 20px;
                    display: block;
                    color: #F28E00;
                }

                    #header .menu .small ul li a {
                        font-size: 16px;
                    }

                    #header .menu ul li a:hover {
                        color: #F28E00;
                    }

                    #header .menu ul li.active a {
                        color: #F28E00;
                    }

.breadcrumb {
    border-bottom: 1px solid #ddd;
    padding: 15px 0 15px 0;
    margin: 0 0 30px 0;
    overflow: hidden;
    font-size: 14px;
    color: #a9adb5;
}

    .breadcrumb ul {
        padding: 0;
        margin: 0;
    }

        .breadcrumb ul li {
            padding: 0 5px 0 0;
            list-style: none;
            float: left;
            margin: 0;
        }

            .breadcrumb ul li a {
                color: #a9adb5;
            }

#actionbar {
    background: url('../img/bg_actionbar.png');
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border-bottom: 1px solid #f5f5f5;
    top: 0px; left: 0; right: 0;
    text-align: center;
    position: fixed;
    opacity: 0.95;
    z-index: 99;
    width: 100%;
}

    #actionbar a {
        color: #666;
    }

    .inline-icon {
        vertical-align: middle;
        display: inline-block;
        margin: 0 5px 3px 0;
    }

        #timer {
            background: url('../img/menu_seperator.png') right center no-repeat;
            padding: 7px 12px 10px 10px;
            display: inline-block;
            color: #555;
        }

            #timer_formatted {
                font-size: 21px;
                color: #fe6a01;
                display: inline-block;
                width:90px;
            }

            #timer_remaining {
                font-size: 21px;
                color: #fe6a01;
                display: inline-block;
                width:90px;
            }

            #timer_controls .inline-icon {
                margin-top: -5px;
            }

        #notition_add {
            background: url('../img/menu_seperator.png') right center no-repeat;
            padding: 12px 12px 10px 10px;
            display: inline-block;
        }

            #user_notes_form {
                background: url('../img/bg_actionbar.png');
                box-shadow: 0 2px 4px rgba(0,0,0,0.2);
                top: 55px; left: 50%;
                margin-left: -160px;
                position: absolute;
                padding: 10px;
            }

                #user_notes_form textarea {
                    height: 100px;
                }

                #user_notes_form textarea[placeholder] {
                    color: #777;
                }

        #ticket_add {
            padding: 12px 12px 10px 10px;
            display: inline-block;
        }

#container {
    padding: 50px 10px;
    box-sizing: border-box;
    max-width: 1100px;
    min-width: 1000px;
    text-align: left;
    margin: 0 auto;
    width: 100%;
}

    #container.actionbar {
        padding: 120px 0;
    }

    #content.middle {
        margin: 40px auto 0;
        float: none;
    }

    #content {
        padding: 0 0 0 20px;
        margin-bottom: 40px;
        background: #fff;
        width: 750px;
        float: right;
    }

        @media all and (max-width: 1100px) {
            #content {
                width: 650px;
            }
        }

        #content img {
            max-width: 100%;
            height: auto;
        }

        #content > p {
            padding-right: 20px;
        }

    /* LIJST DASHBOARDS */
    #content ul.list.trajecten.open li {
        background: url('../img/icons/book-open.png') 10px 7px no-repeat;
        padding-left: 34px;
    }

    #content ul.list.trajecten.done li {
        background: url('../img/icons/book-bookmark.png') 10px 7px no-repeat;
        padding-left: 34px;
    }

    #content ul.list.trajecten.closed li {
        background: url('../img/icons/book-closed.png') 10px 7px no-repeat;
        padding-left: 34px;
    }

        #content ul.list.trajecten.open li .trajecten,
        #content ul.list.trajecten.done li .trajecten,
        #content ul.list.trajecten.closed li .trajecten {
            width: 360px;
        }

        #content ul.list.trajecten.open li.top .trajecten,
        #content ul.list.trajecten.done li.top .trajecten,
        #content ul.list.trajecten.closed li.top .trajecten {
            width: 385px;
        }

    #content ul.list.dashboard li.top {
        border-bottom: 1px solid #ccc;
        border-top-right-radius: 3px;
        border-top-left-radius: 3px;
        padding: 8px 5px 5px 10px;
        font-weight: bold;
        background: #eee;
    }

    #content ul.list.dashboard li {
        padding: 7px 0 5px 10px;
        background: none;
        }

        #content ul.list.dashboard li a {
            padding-right: 10px;
            width: 18px;
            float: left;
            }

        #content ul.list.dashboard li span {
            text-align: left;
            width: 150px;
            float: left;
            }

        #content ul.list.dashboard li span.instituut {
            padding-left: 10px;
            background: none;
            display: block;
            height: 18px;
            width: 140px;
        }

    /* LIJST DETAILS */

    #content ul.list {
        margin: 20px 0 15px 0;
        padding: 0;
    }

        #content ul.list a {
            color: #555;
        }

        ul.list li {
            xbackground: url('../img/icn_arrow_small.png') no-repeat 0px 9px;
            border-bottom: 1px dotted #ccc;
            padding: 6px 0 5px 10px;
            overflow: hidden;
            list-style: none;
            margin: 0;
        }

            #content ul.list li:nth-child(even) {
                background: #fff;
            }

            #content ul.list li:nth-child(odd) {
                background: #fafafa;
            }

        #content ul.list li.top,
        #content ul.list.trajecten li.top {
            border-bottom: 1px dotted #ccc;
            border-top-right-radius: 3px;
            border-top-left-radius: 3px;
            padding: 4px 0 2px 8px;
            background: #f5f5f5;
            font-weight: bold;

        }

        #content ul.list li.module_state {
            background-image: url('../img/icn_arrow_small.png');
            background-position: 15px 9px;
            background-repeat: no-repeat;
            padding: 5px 0 5px 30px;
        }


        #content ul.list li.module_state .trajecten {
            width: 380px;
        }
        #content ul.list li .trajecten {
            width: 400px;
            float: left;
        }
            #content ul.list li .voortgang {
                width: 130px;
                float: left;
            }
            #content ul.list li .voortgang.timeout_new {
                width: 60px;
                float: left;
            }

            #content ul.list li .trajecten.statistics {
                width: 270px;
            }
            #content ul.list li .voortgang.statistics {
                width: 100px;
            }
            #content ul.list li .voortgang.timeout {
                width: 75px;
                float: left;
                text-align: center;
            }
            #content ul.list li .voortgang.timing {
                width: 50px;
                float: left;
                font-weight:bold;
            }
            #content ul.list li .continue.statistics {
                width: 120px;
                float: right;
            }

            #content ul.list li .trajecten.statistics.new {
                width: 200px;
            }
            #content ul.list li .voortgang.statistics.new {
                width: 90px;
             }
            #content ul.list li .voortgang.timeout.new {
                width: 65px;
                float: left;
            }
            #content ul.list li .voortgang.timing.new {
                width: 50px;
                float: left;
                font-weight:bold;
            }
            #content ul.list li .continue.statistics.new {
                width: 80px;
                float: left;
            }

            #content ul.list li .bar {
                height: 11px;
                width: 55px;
                background: url('../img/bar_white.png');
                margin: 3px 5px 0 0;
                float: left;
            }

            #content ul.list li .bar .green {
                background: url('../img/bar_green.png');
                display: block;
                height: 11px;
            }

        #content ul.list li .continue {
            width: 180px;
            float: left;
            text-align: right;
        }

            #content ul.list li .continue.login-timing {
                width: 90px;
            }
            

        #content ul.list li .voortgang.antwoord {
            width: 370px;
            float: left;
        }
        #content table.table_results {
            border-collapse: collapse;
            width:100%;
        }
            #content table.table_results tr {
            }
                #content table.table_results td {
                    padding:0 0 0 15px;
                }
                #content table.table_results td.question.correct {
                    background:url('../img/icn_check_small.png') left 4px no-repeat;

                }



            /* extra styling statistics page */
            ul.list ul {
                padding: 0;
                margin: 0;
            }

            #content ul.list li .continue a {
                background: url('../img/icn_next.png') no-repeat 0 1px;
                padding-right: 12px;
                padding-left: 18px;
                display: inline-block;
            }

            #content ul.list li .continue a.resultaten {
                background: url('../img/icn_results.png') no-repeat 0 1px;
                padding-left: 22px;
            }

            #content ul.list.open li {
                background: url('../img/icons/book-open.png') 10px 7px no-repeat;
                padding-left: 34px;
            }

            #content ul.list.done li {
                background: url('../img/icons/book-bookmark.png') 10px 7px no-repeat;
                padding-left: 34px;
            }

            #content ul.list.closed li {
                background: url('../img/icons/book-closed.png') 10px 7px no-repeat;
                padding-left: 34px;
            }


    /* LIJST DOCENTEN */
    #content ul.docenten {
        padding: 0;
        margin: 0;
    }

        #content ul.docenten li {
            list-style: none;
            width: 152px;
            float: left;
            margin: 0 10px 0 0;
            text-align: center;
            min-height:275px;
        }

        #content ul.docenten li span {
            line-height: 28px;
            font-weight: bold;
            font-size: 12px;
        }

        #content ul.docenten li .extra {
            line-height:1.5em;
            font-size:10px;
            text-align:left;
        }

        #content ul.docenten li span.online,
        #content ul.docenten li span.offline {
            font-weight: normal;
            line-height: 16px;
            font-size: 13px;
        }

        #content ul.docenten li:last-child {
            margin: 0;
        }

        #content ul.docenten li img {
            background: #fff;
            border: 1px solid #ccc;
            padding: 3px;
            display: block;
            height: 144px;
            width: 144px;
            box-shadow: 0 2px 2px #ddd;
        }

    /* -- SIDEBAR -- */
    #sidebar {
        width: 290px;
        float: left;
    }

    #sidebar hr {
        margin: 10px 0 15px;
        outline: none;
        height: 1px;
        color: #777;
        padding: 0;
        border: 0;
    }

    #sidebar .menu {
        border-right: 1px solid #ddd;
        padding: 0 20px 0 0;
        background: #fff;
        width: 270px;
    }

        /* -- TRAJECTEN -- */
        #sidebar .menu ul {
            padding: 0;
            margin: 0;
        }

        #sidebar .menu li {
            background: url('../img/icons/book-open.png') 0 8px no-repeat;
            text-transform: uppercase;
            padding: 6px 0 4px 25px;
            font-weight: normal;
            position: relative;
            line-height: 18px;
            list-style: none;
            font-size: 13px;
            color: #2e4f5a;
            margin: 0;
        }

        #sidebar .menu li {
            color: #777;
        }

        #sidebar .menu li a {
            text-decoration: none;
            color: #90949b;
        }

            #sidebar .menu li a:hover {
                color: #777;
            }

            #sidebar .menu li.active a {
                font-weight: bold;
            }

        #sidebar .menu li .title { display: block; position: absolute; width: 200px; height: 10px; overflow: hidden; top: 0; padding: 7px 0; background: #fff; }
        #sidebar .menu li .title:hover { display: block; position: absolute; z-index: 2; width: 200px; height: auto; background: #fff; overflow: hidden; top: 0; left: 21px; padding: 7px; background: #fff; }

        #sidebar .menu li.active { background: url('../img/icons/book-open-next.png') 0 8px no-repeat; }
        #sidebar .menu li.active > span a { color: #555; font-weight: bold; padding-right: 2px; }

        /* -- MODULES -- */
        #sidebar .menu li ul {
            margin: 4px -2px -4px -30px;
            border-bottom: 0;
            padding: 0 2px;
        }

        #sidebar .menu li ul li {
            background: #f8f8f8 url('../img/icn_paragraaf_small.png') no-repeat 9px 7px;
            padding: 5px 10px 4px 28px;
            line-height: 16px;
            list-style: none;
            font-size: 11px;
            margin: 0;
        }

        #sidebar .menu li ul li.afgerond {
            background: #f8f8f8 url('../img/icn_check_small.png') no-repeat 8px 6px;
        }

            #sidebar .menu li ul li span { font-weight: normal; }
            #sidebar .menu li ul li a:hover { text-decoration: none; color: #333; }
            #sidebar .menu li.active ul li.end a { font-weight: bold; }

        #sidebar .menu li ul li.active { background: url('../img/icn_menu_active_small.png') no-repeat 0 5px; }

        /* -- PARAGRAVEN -- */

        #sidebar .menu li ul li ul {
            padding: 5px 0 8px 0;
            border: none;
            margin: 0;
            }

        #sidebar .menu li ul li ul li {
            background: url('../img/icn_paragraaf_small.png') no-repeat 0 5px;
            padding: 2px 0 2px 18px;
            line-height: 16px;
            list-style: none;
            margin: 0;
            }

            #sidebar .menu li ul li ul li span { font-size: 13px; font-weight: normal; }
            #sidebar .menu li ul li ul li.active.end span a { color: #333; text-decoration:none; }

            #sidebar .menu li ul li ul li:hover, #sidebar .menu li ul li ul li.toets:hover { background: url('../img/icn_arrow_hover_small.png') no-repeat 0 5px; }
            #sidebar .menu li ul li ul li.active { background: url('../img/icn_arrow2_small.png') no-repeat 0 5px; }
            #sidebar .menu li ul li ul li.active a { text-decoration: underline; color: #444; }
            /*#sidebar .menu li ul li.afgerond { background: url('../img/icn_check_small.png') no-repeat 0 5px; }*/
            #sidebar .menu li ul li ul li.toets a { font-size: 13px; color: #777; text-decoration: none; }
            #sidebar .menu li ul li ul li.toets a:hover { color: #777; text-decoration: underline; }
            #sidebar .menu li ul li ul li.toets { background: url('../img/icn_toets_small.png') no-repeat 0 5px; }
            #sidebar .menu li ul li ul li.toets.bekijken { background: url('../img/icn_results_small.png') no-repeat 0 5px; }
            #sidebar .menu li ul li ul li.toets.active { background: url('../img/icn_arrow2_small.png') no-repeat 0 5px; }

.online {
    background: url('../img/icn_online.png') no-repeat 0 1px;
    padding: 0 4px 1px 20px;
}

.offline {
    background: url('../img/icn_offline.png') no-repeat 0 1px;
    padding: 0 4px 1px 20px;
}


/* teacher online header */
#teacher_online {
    position:absolute;
    top:48px;
    width:130px;
    text-align:center;
}

    #teacher_online div {
        cursor:pointer;
    }


/* footer */
#footer {
    padding: 20px 10px 40px;
    box-sizing: border-box;
    position: relative;
    max-width: 1100px;
    /*min-width: 1000px;*/
    font-size: 13px;
    margin: 0 auto;
    color: #fff;
    height: auto;
    width: 100%;
}

    #footer a {
        text-decoration: none;
        color: #fff;
    }

        #footer a:hover {
            text-decoration: underline;
        }

    #footer .social {
        display: block;
        float: right;
        height: 16px;
        width: 16px;
        margin: 0 0 0 5px;
    }

    #footer .left {
        float: left;
    }

    #footer .middle {
        float: left; margin: 0 0 0 250px;
    }

    #footer .right {
        float: right; text-align: right;
    }

    #footer .icn_16linkedin { background: url('../img/icn_16linkedin.png'); }
    #footer .icn_16facebook { background: url('../img/icn_16facebook.png'); }
    #footer .icn_16twitter { background: url('../img/icn_16twitter.png'); }

.nopic {
    border: 1px solid #eaeaea;
    margin-bottom: 15px;
    line-height: 1.6em;
    padding: 45px 20px;
    background: #fff;
    font-size: 12px;
}

    .nopic br {
        display: none;
    }

    a .nopic {
        text-decoration: none;
        color: #888;
    }

.info-cell {
    background: url('../img/grey.png') repeat-x 0 45px;
    padding-bottom: 12px;
    vertical-align: top;
    font-weight: bold;
    font-size: 14px;
    height: 55px;
}

    .info-cell span {
        font-family: 'Open Sans Condensed', sans-serif;
        text-transform: uppercase;
        font-weight: bold;
        margin: 10px 0 0;
        font-size: 18px;
        display: block;
        color: #F28E00;
        padding: 0;
    }

input.text {
    margin: 0;
}

input.field {
    padding: 5px;
}

input.radio {
    padding: 5px;
    outline: 0;
    border: 0;
}

    input.field.filter {
        padding: 5px 5px 5px 20px;
        background:#fff url('../img/icons/zoom_16.png') no-repeat 3px 6px;
    }

table.login td.login-left.no-border, table.login td.login-right.no-border {
    border-bottom: 0;
}

table.login tr {
    width: 100%;
}

table.login td.login-left {
    border-bottom: 1px dotted #aaa;
    vertical-align: middle;
    font-size: 14px;
    font-weight: bold;
    width: 150px;
    padding: 8px;
}

table.login td.login-right {
    border-bottom: 1px dotted #aaa;
    vertical-align: middle;
    text-align: left;
    width: 400px;
    padding: 8px;
}

table.login td.login-right span {
    border: 3px solid #eee;
    display: inline-block;
}

td {
    vertical-align: middle;
}

td.top {
    vertical-align: top;
    padding-bottom: 10px;
    padding-top: 4px;
}

.td-left {
    vertical-align: middle;
    width: 150px;
    padding: 8px;
}


/* form elements */
#company_container div {
    max-height:150px;
    overflow:auto;
    width:90%;
}
    #company_result label {
        xdisplay:none;
    }

.lijst.closed {
    display: none;
}

#content .lijst,
#content.training .lijst {
    margin: 0 0 20px 0;
    padding: 0;
}

    #content .lijst li {
        background: no-repeat 4px 10px;
        border-bottom: 1px dotted #aaa;
        padding: 1px 0 3px 21px;
        list-style: none;
        overflow: hidden;
        margin: 0;
    }

        #content .lijst li.top {
            font-weight: bold;
            padding: 8px 5px;
            background: #fff;
            font-size: 14px;
        }

        #content .lijst li.active {
            background: no-repeat 4px 10px;
            font-weight: bold;
        }

        #content .lijst li.toets {
            background: no-repeat 4px 10px;
        }

        #content .lijst li.afgerond {
            background: url('../img/icn_check_small.png') no-repeat 4px 10px;
            padding-left: 25px;
        }

        #content .lijst li.bekijken {
            background: url('../img/icn_results_small.png') no-repeat 4px 10px;
            padding-left: 25px;
        }

        #content .lijst li:hover {
            background: no-repeat 4px 10px;
        }

        #content .lijst li a {
            text-decoration: none;
        }

            #content .lijst li a:hover {
                text-decoration: underline;
            }

#content .message {
    border-bottom-style: solid;
    border-bottom-width: 0;
    margin: -20px 0 20px;
    padding: 16px 20px 14px;
    font-weight: bold;
    border-right: 0;
    border-left: 0;
    border-top: 0;
    display: none;
    width: 710px;
}

    #content .message.ok {
        box-shadow: inset 0 0 5px #c6d880;
        background: #ebf6c1;
        color: #a1b900;
    }

    #content .message.error {
        box-shadow: inset 0 0 5px #fbc2c4;
        background: #fbe3e4;
        color: #cc2200;
    }

    #content .message img {
        vertical-align: middle;
        margin: 10px 7px 0 0;
        float: left;
    }

    #content .message ul {
        vertical-align: middle;
        display: inline-block;
        list-style: none;
        background: none;
        padding: 0;
        margin: 0;
    }

        #content .message ul li {
            display: inline-block;
            background: none;
        }

.profiel_avatar_box {
    width: 140px;
    height: 160px;
    background: #ccc;
    display: block;
    position: absolute;
    top: 200px;
    right: 30px;
    text-align: center;
    padding: 30px;
}

.avatar_small {
    width: 32px;
    height: 32px;
    background: #fff;
    padding: 2px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 2px #eee;
    float: left;
    margin: -10px 10px 0 10px;
}

.search {
    background-color:#f5f5f5;
    border:1px solid #ccc;
    padding:5px;
    border-radius: 3px;
}

    .search table { margin: 0; }

/* tabs */

ul#tabs {
    border-bottom: 1px solid #ddd;
    margin: 20px 0 25px 0;
    clear: both;
    height: 30px;
    padding: 0;
}

    ul#tabs li {
        border-right: 1px solid #ddd;
        border-left: 1px solid #ddd;
        border-top: 1px solid #ddd;
        border-radius: 2px 2px 0 0;
        margin: 0 5px 0 0;
        background: #fff;
        list-style: none;
        float: left;
        padding: 0;
    }

        ul#tabs li a {
            font-family: 'Open Sans Condensed', sans-serif;
            text-transform: uppercase;
            text-decoration: none;
            background: #fafafa;
            font-weight: bold;
            padding: 1px 10px;
            font-size: 18px;
            display: block;
            color: #8f959f;
            margin: 0;
        }

            ul#tabs li a:hover {
                background: #eee;
                color: #F28E00;
            }

            ul#tabs li a.selected {
                padding: 1px 10px 2px;
                background: #fff;
                color: #F28E00;
            }

/* link */
a.link {
    background: #ddd url('../img/arrow_right.gif') no-repeat right 2px;
    border-bottom: 1px dotted #368b9d;
    display: inline-block;
    color: #F28E00;
    padding: 2px;
    margin: 0;
}

    a.link:hover {
        border-bottom: 1px solid #368b9d;
        text-decoration: none;
    }

a.link.back {
    background: #fafafa url('../img/arrow_left.png') no-repeat 4px 10px;
    box-shadow: inset 0 2px 3px #ddd;
    padding: 4px 10px 3px 22px;
    text-decoration: none;
    border-radius: 3px;
    position: absolute;
    border-bottom: 0;
    font-size: 11px;
    float: right;
    color: #555;
    top: 2px;
    right: 0;
}

    a.link.back:hover {
        background: #bbb url('../img/arrow_left_white.png') no-repeat 4px 10px;
        box-shadow: inset 0 2px 3px #aaa;
        color: #fff;
        border: 0;
    }


/* -- navigatie -- */

.navigation {
    text-align: center;
    padding: 0 10px;
    margin: 0;
    }

/* -- sortering lijsten -- */
.overview {
    margin: 10px 0 10px 0;
    padding:0;
    }

    .overview .top {
        border-bottom: 1px solid #ccc;
        }
    .overview .header th {
        border-bottom: 1px solid #ccc;
        }

    .overview tr.bold td {
        font-weight:bold;
    }

    .overview li,
    .overview td {
        list-style: none;
        height: 20px;
        line-height: 20px;
        padding: 5px 10px 5px 5px;
        overflow: hidden;
    }

    .statistics_overview th {
        border-bottom: 1px solid #ccc;
        padding:0 0 5px 0;
    }

    .statistics_overview td {
        padding:5px 0 15px 0;
    }

    .overview_item {
        border-bottom: 1px solid #ccc;
        position: relative;
        width: auto;
    }

        .overview_item .handler {
            display: block;
            cursor:move;
            width: 22px;
            float: left;
        }

        .overview_item .handler.default {
            cursor:default;
        }

        .overview_item .title {
            height:20px;
            width:480px;
            overflow:hidden;
            float: left;
        }

        .overview_item .title_small {
            height:20px;
            width:460px;
            overflow:hidden;
            float: left;
        }

        .overview_item .title_half {
            height:20px;
            width:240px;
            overflow:hidden;
            float: left;
        }

        .overview_item .company,
        .overview_item .institute,
        .overview_item .group,
        .overview_item .date {
            font-weight:100;
            font-size:.85em;
            font-style:italic;
        }

        .overview_item .date {
            width:100px;
        }

        .overview_item .edit a {
            background: url('../img/icn_edit.png') no-repeat 0 3px;
            display: block;
            float: right;
            width: 16px;
            height: 19px;
        }

        .overview_item .view a {
            background: url('../img/icn_view.png') no-repeat 0 3px;
            display: block;
            float: right;
            width: 16px;
            height: 19px;
        }

        .overview_item .delete a {
            background: url('../img/icn_false.png') no-repeat 0 2px;
            width: 16px;
            height: 18px;
            margin: 0 8px;
            display: block;
            float: right;
        }

        .overview_item .deactivate a {
            background: url('../img/icn_close.png') no-repeat 0 2px;
            width: 16px;
            height: 18px;
            margin: 0 8px;
            display: block;
            float: right;
        }

        .overview_item .continue a {
            background: url('../img/icn_results.png') no-repeat 0 3px;
            display: block;
            float: right;
            width: 16px;
            height: 19px;
            margin: 0 8px;
        }

        .placeholder {
            border: 1px dashed #f60;
            background-color: #ffc;
            height: 19px;
        }

        .course_details {
            background-color:#f5f5f5;
            border-bottom:1px dotted #ccc;
            padding:5px;
            border-radius: 3px;
        }
            .course_details .item {
                font-style:italic;
                font-weight:bold;
            }

/* -- sortering lijsten -- */

ul.overview {
    margin: 10px 0 10px 0;
    padding:0;
}

    ul.overview li {
        padding: 5px 10px 5px 5px;
        line-height: 20px;
        list-style: none;
        overflow: hidden;
        height: 20px;
    }

    ul li.overview_item {
        border-bottom: 1px solid #ccc;
        position: relative;
        width: auto;
    }

        ul li.overview_item .title {
            font-weight: normal;
            height: auto;
            width: 480px;
            overflow: hidden;
        }

/* FILE UPLOAD */

.error {
        border:1px dotted red;
        padding:.5em;
        margin:.5em 0;
        display:none;
        }

        .error em {
            color:red;
            font-style:normal;
            }

    .status {
        border:1px dotted green;
        padding:4px;
        margin:.5em 0;
        line-height:18px;
        height:16px;
        display:none;
        overflow:hidden;
        }

        .status em {
            color:green;
            font-style:normal;
            }

    #filesStatus em {
        color:red;
        font-style:normal;
        }

#legenda {
    border: 1px solid #ddd;
    background: #eee;
    padding: 10px;
    }

    #legenda img {
        vertical-align: middle;
        margin: 0 5px 0 0;
        }

#preview_container {
    }

#preview_container #thumbnails {
    border-bottom: 1px solid #ccc;
    }

    #preview_container .file {
        border-top: 1px solid #ccc;
        margin: 0;
        overflow: hidden;
        padding: 5px 10px 7px;
        width: 630px;
        }

    #preview_container .ui-sortable-helper {
            border: 1px solid #205791;
            background: #d5edf8;
            }

        #preview_container .file img {
            vertical-align: middle;
            margin: 0 7px 0 0;
            }

        #preview_container .file .item {
            float: left;
            }

        #preview_container .file .handle {
            padding-top: 2px;
            float: left;
            }

/* RESULTS */

.question {
    }

    .question .correct {
        background: url('../img/icn_check_small.png') 6px 3px no-repeat;
        display: inline-block;
        margin: 2px 0 0 0;
        height: 18px;
        width: 20px;
        }

    .question .false {
        background: url('../img/icn_bullet.png') 3px 1px no-repeat;
        display: inline-block;
        margin: 2px 0 0 0;
        height: 18px;
        width: 20px;
        }

/* IN CONTENT */

/* gallery */

#content.training .galleryList {
    border-top: 1px dotted #ccc;
    border-bottom: 1px dotted #ccc;
    overflow: hidden;
    padding: 0;
    margin: 10px 0;
    }

    #content.training .galleryList li {
        float: left;
        list-style: none;
        background: none;
        padding: 0;
        margin: 0;
        }

    ul.galleryList li a {
        display:block;
        float:left;
        margin: 10px 10px 10px 0;
        height:100px;
        width:100px;
        }

/* --- Profiel foto --- */

#thumbnails .foto {
    text-align: center;
}

    #thumbnails .foto img {
        box-shadow: 0 2px 2px #eee;
        border: 1px solid #ccc;
        margin: 0 0 5px 0;
        padding: 2px;
    }

/* --- Bijlage/Galerij --- */

#prullenbak_container {
    position: relative;
    display: block;
    width: 648px;
    display: block;
    height: 60px;
    overflow: hidden;
    border: 1px solid #ccc;
    display: none;
}

    #prullenbak {
        background:#fff url('../img/icons/trash_48.png') center center no-repeat;
        filter: alpha(opacity=60);
        position: absolute;
        -moz-opacity: 0.6;
        float: left;
        height:50px;
        opacity:.60;
        width:50px;
        right:15px;
        top:1em;
    }

    #prullenbak.droppable-active {
        background:#fff url('../img/icons/trash_actief_48.png') center center no-repeat;
        filter: alpha(opacity=100);
        -moz-opacity: 1;
        opacity:1;
    }

    #prullenbak.droppable-hover {
        background:#fff url('../img/icons/trash_delete_48.png') center center no-repeat;
        filter: alpha(opacity=100);
        -moz-opacity: 1;
        opacity:1;
    }

    #prullenbak_container #legenda {
        position: absolute;
        font-weight:100;
        font-size:.9em;
        top:60px;
        right:0;
        }

.file .item { padding: 5px; }

#thumbnails div.thumb {
    width: 118px;
    height: 130px;
    border: 0;
    float: left;
    display: block;
    margin: 10px 10px 0 0;
    }

    #thumbnails div.handle {
        text-align: center;
        }

        #thumbnails div.handle .bar { margin: 5px; }
        #thumbnails div.handle .del { margin: 5px; }

    #thumbnails div.thumb a {
        display: block;
        }

/* file list */

#content ul.fileList {
    border-bottom: 1px dotted #ccc;
    margin: 20px 0 20px 0;
    padding: 0;
    }

    #content ul.fileList li {
        border-top: 1px dotted #ccc;
        background: none;
        list-style: none;
        padding: 5px;
        }

        ul.fileList li img {
            vertical-align: middle;
            }

        ul.fileList li a {
            text-decoration: none;
            display: block;
            }

/* FORMULIER */
.cropper_user {
    background: #fafafa;
    border: 1px solid #ddd;
    position: absolute;
    line-height: 1.5em;
    padding: 15px;
    width: 150px;
    right: 10px;
}

    .cropper_user.profile {
        text-align: center;
        top: 110px;
        right: 0;
    }

#formulier {
    padding: 10px 0; margin-top: 20px; border-top: 1px dotted #ccc;
}

.tussenkop {
    overflow: hidden; margin: 15px 0 10px;
}

    .tussenkop span {
        background: #fff; margin: 0 10px; padding: 10px; font-weight: bold;
    }

    .tussenkop span.normal {
        background: #fff; margin: 0 10px; padding: 0 10px; font-weight: normal; font-style: italic;
    }

    .tussenkop hr {
        margin-top: -10px;
    }

.antwoord {
    overflow: hidden;
    }

    .antwoord .nummer {
        padding-top: 12px;
        width: 75px;
        float: left;
        }

    .antwoord .select {
        text-align: center;
        padding-top: 11px;
        width: 40px;
        float: left;
        }

    .antwoord .text {
        overflow: hidden;
        width: 535px;
        float: left;
        }

    #content .antwoord .text input { width: 522px; }


/* password strength */

table.login td.login-right span.shortPass {	border-color: #fbccce; }
table.login td.login-right span.badPass { border-color: #ffe1c8; }
table.login td.login-right span.goodPass { border-color: #e6efc2; }
table.login td.login-right span.strongPass { border-color: #e6efc2; }

table.login td.login-right span.shortPass input {	border-color: #da3a49; }
table.login td.login-right span.badPass input { border-color: #fb7418; }
table.login td.login-right span.goodPass input {	border-color: #8ebb0f; }
table.login td.login-right span.strongPass input { border-color: #70bb0f; }

table.login td.login-right span.result {
    padding: 5px;
    font-weight: bold;
    text-align: center;
    width: 170px;
    float: right;
    height: 18px;
    margin: 0;
    border: 0;
    }

    table.login td.login-right span.result span { border: 0; }

    .result.shortPass { background-color: #da3a49; color:#fff; }
    .result.badPass { background-color: #fb7418; color:#fff; }
    .result.goodPass { background-color: #8ebb0f; color:#fff; }
    .result.strongPass { background-color: #70bb0f; color:#fff; }


#result, .margin-top {
    margin:20px 0 0 0;
}

.answer_motivation {
    padding:5px 0 5px 25px;
    font-weight: bold;
    border:1px solid #eee;
    line-height:1.4em;
    min-height:35px;
}

    .answer_motivation p {
        padding:0;
        margin:0;
    }

    .answer_motivation.answer_correct {
        background:#f5f5f5 url('../img/icn_check.png') 5px 4px no-repeat;
    }

    .answer_motivation.answer_false {
        background:#f5f5f5 url('../img/icn_false.png') 5px 4px no-repeat;
    }

    .button_new {
        display:block;

    }


/* tickets */

ul.list.tickets li {
    padding-bottom: 9px;
    padding-top: 10px;
    background: none;
}

ul#ticket_replies {
    border-bottom: 1px dotted #d5d5d5;
    border-top: 1px dotted #d5d5d5;
}

    ul#ticket_replies li:first-child {
        border-top: 1px solid #fff;
    }

    ul#ticket_replies li:last-child {
        border-bottom: 1px solid #fff;
    }

    ul#ticket_replies li {
        border-bottom: 1px dotted #d5d5d5;
        padding-top: 1.5em;
        padding-bottom: 0;
    }

.reply_info {
    margin: 0 0 1em;
    color: #777;
}

.ticket_name {
    float: left;
    width: 300px;
}

.ticket_last_reply {
    float: right;
    width: 200px;
}

.ticket-icon {
    box-shadow: inset 0 0 5px rgba(0,0,0,0.05);
    background: #f5f5f5;
    border-radius: 3px;
    margin: 0 15px 0 0;
    padding: 15px;
    float: left;
}

.ticket_content {
    border-bottom: 1px dotted #ddd;
    border-top: 1px dotted #ddd;
    padding: 15px 10px 0;
    margin: 20px 0;
    clear: both;
}

.ticket_info {
    margin: -5px 0 0;
    padding-left: 0;
    height: 40px;
    float: left;
}

    .ticket-info h1 {
        padding-top: 4px;
    }

.ticket_no {
    position: absolute; top: -6px; right: -7px;
    box-shadow: inset 0 1px 0 #932b0d;
    text-shadow: 0 1px 0 #932b0d;
    padding: 2px 5px 3px;
    background: #bf2e1a;
    border-radius: 9px;
    line-height: 10px;
    font-size: 9px;
    color: #fff;
}

/* questions */
.question_detail {
    padding-bottom: 15px;
}

    .question_item {
        font-weight: bold;
        color: #F28E00;
    }

    .question_detail .info-icon {
        vertical-align: middle;
        display: inline-block;
        margin-left: 3px;
        margin-top: -2px;
        cursor: pointer;
    }

    .question_detail p {
        xdisplay: inline;
    }



#timing {
    position:fixed;
    z-index:999;
    top:100px;
    right:10px;
    border:2px solid red;
    background-color:#fff;
    padding:1em;
    text-align:center;
}

#timing #timer_formatted {
    color: green;
    font-size:2em;
}

#timing #timer_controls {
    background-color:#eee;
}

#notes {
    position:fixed;
    z-index:999;
    top:200px;
    right:10px;
    border:2px solid #aaa;
    background-color:#fff;
    padding:1em;
    text-align:right;
}

#notes #user_notes {
    width:200px;
    height:200px;
}

#notes #user_notes_form {
    display:none;
}


/* cms replace questions */
.answer-left {
    display: inline-block;
    width: 35%;
    padding-right: 15px;
}
.answer-right {
    display: inline-block;
    width: 20%;
}
    .answer-right img {
        height:60px !important;
    }
.heading {
    font-weight:bold;
}



/* replace questions */
.container_question {
    padding: 10px 0 0 0;
    margin: 0 0 10px 0 !important;
}
    .container_answer input {
        padding: 5px !important;
    }

    .container_question.message-error {
        border: 1px solid tomato;
    }

    .container_question .container_message {
        display: none;
        text-align: center;
        background-color: #9ecb2d;
        padding: 3px 0 3px 0;
        color: white;
        margin-top: 15px;
        border: 1px solid #9ecb2d;
        border-radius: 3px;
    }

        .container_question .container_message.message-error {
            background-color: tomato;
            border: 1px solid tomato;
        }

        .chrome_fix {
            position: relative;
        }

            .chrome_fix::after {
                top: 0; right: 0; bottom: 0;
                position: absolute;
                z-index: 2;
                background: #fff;
                height: 100%;
                content: '';
                display: block;
                width: 20px;
            }

        .chrome_fix .container_answer {
            overflow: auto;
        }

.container_explain {
    border: 1px dashed #ddd;
    margin: -15px 0 15px 0;
    line-height: 1.6em;
    font-style: italic;
    font-size: 0.85em;
    padding: 8px 10px;
    color: #999;
}

video {
    background: #ddd;
    height: 350px;
    width: auto;
}

audio {
    width: 468px;
}



/* sortable */
#content.training ul.overview_sort_questions {
    margin: 10px 0 10px 0 !important;
    padding:0;
}

#content.training ul.overview_sort_questions::after {
    display: table;
    content: '';
    clear: both;
}

    #content.training ul.overview_sort_questions li {
        border: 1px solid #ddd;
        vertical-align: middle;
        border-radius: 3px;
        padding: 4px 10px;
        margin: 0 5px 0 0;
        background: #eee;
        list-style: none;
        display: block;
        float: left;
    }

        #content.training ul.overview_sort_questions li.overview_item_questions .handler {
            cursor: move;
        }

        #content.training ul.overview_sort_questions li.questions_placeholder {
            border: 1px dashed #ccc;
            background: #fff;
        }



/* draggable */
.draggable_container {
    box-sizing: border-box;
    padding-right: 15px;
    position: relative;
    width: 33.333%;
    float: left;
}

.droppable_container {
    box-sizing: border-box;
    position: relative;
    width: 66.666%;
    float: right;
}

    .draggable_item_container {
        border: 1px dashed #ddd;
        margin-bottom: 15px;
        position: relative;
        background: #fff;
        height: 66px;
    }

    .draggable {
        box-sizing: border-box;
        border: 1px solid #ddd;
        background: #f5f5f5;
        opacity: 0.8;
        text-align: center;
        margin: -1px;
        border-radius: 3px;
        padding: 5px 10px;
        cursor: move;
        height: 68px;
        display: block;
        z-index: 10;
    }

        .draggable .handler {
            transform: translateY(-50%);
            position: absolute;
            left: 0; right: 0;
            margin-top: -2px;
            top: 50%;
        }

    .droppable-wrapper {
        box-sizing: border-box;
        padding: 0 15px 15px 0;
        float: left;
        width: 50%;
    }

        .droppable {
            box-sizing: border-box;
            background-repeat: no-repeat;
            background-position: center;
            background-color: #f5f5f5;
            border: 1px solid #ddd;
            background-size: cover;
            border-radius: 2px;
            text-align: center;
            padding: 0;
            margin: 0;
        }

            .droppable:nth-of-type(even) {
                margin: 0 0 15px 0;
            }

            .droppable .droparea {
                position: relative;
                height: 150px;
                width: 100%;
            }

                .droppable .droparea .answer_text {
                    top: 0; left: 0; right: 0;
                    box-sizing: border-box;
                    font-weight: bold;
                    position: absolute;
                    padding: 5px 10px;
                    width: 100%;
                    color: #777;
                }

        /* kan weg straks */
        .droppable .text,
        .draggable .text {
            position: absolute;
            display: none;
            right: 0;
            width: 30px;
            color: #fff;
            font-size: 0.9em;
            background: #999;
            text-align: center;
            border: 1px solid #fff;
            border-radius: 35px;
            margin: 5px 5px 0 0;
        }
        .draggable .text {
            margin: 0;
            top: 2px;
        }