/*    
    Layout styles for 3voor12 WWW
    Author: J.N. van Oosten (www.jannico.nl) for Rimote

    Table of Contents
    ==================================================
    - General Styles
        -Layout
    - Header
    - Top menu
    - Support form
    - Page-specific
        - Welcome
        - Login
        - Dashboard
        - WWW (Events)
        - Event options
        - Edit applications
        - Contacts
        - Event publish
        - Event press card requests
        - Accounts
        - Download
        - Help
        - Forum
    - Forms
    - Tabs
    - Labels
    - Wells
    - Dropdowns
    - Modals
    - Accordions
    - Popovers
    - Alerts
    - Monthicker
    - WYSIWYG
    - Tables
    - Datatables
    - Buttons
    - Datepicker
    - Footer
    - Media Queries
        - Desktop large
        - Desktop small up to 1024 pixels (netbooks)
        - Desktop small
        - Tablet to desktop
        - Tablet
        - Landscape phones
        - Portrait phones
    - Font-Face
*/

/* =============================================================================
    General Styles
   ========================================================================== */
html,
body {
    height:100%;
}

html {
    overflow-y: scroll;
}
    
    h1, h2, h3 {
        font-family: 'vpro_thonik', Arial, Helvetica, Sans, FreeSans, 'Nimbus Sans L', Garuda, sans-serif;
        font-weight: bold;
    }
    
    h2, h3, h4, h5, h6 {
        margin-bottom: 5px;
    }
    

    a {
        color: red;
        text-decoration: none;
        -webkit-transition: all 0.3s ease-out;  /* Safari 3.2+, Chrome */
        -moz-transition: all 0.3s ease-out;  /* Firefox 4-15 */
        -o-transition: all 0.3s ease-out;  /* Opera 10.5–12.00 */
        transition: all 0.3s ease-out;  /* Firefox 16+, Opera 12.50+ */
    }
    
        a:hover {
            background: none repeat scroll 0 0 red;
            color: #FFFFFF;
            text-decoration: none;
        }
        
        /*a:visited {
            color: #B42828;
        }*/
        
        a:focus {
            outline: 0 none;
        }

    #content p,
    #content li {
        line-height: 1.6em;
    }
    
    .remove-bottom {
        margin-bottom: 0;
    }
    
    .offset0 {
        margin-left: 0;
    }
    
    .close {
        opacity: 0.5;
        text-shadow: none;
        -webkit-transition: all 0.3s ease-out;  /* Safari 3.2+, Chrome */
        -moz-transition: all 0.3s ease-out;  /* Firefox 4-15 */
        -o-transition: all 0.3s ease-out;  /* Opera 10.5–12.00 */
        transition: all 0.3s ease-out;  /* Firefox 16+, Opera 12.50+ */
    }
    
        .close:hover {
            opacity: 0.8;
        }

    .avatar {
        margin: 0px 10px 0px 0px;
        float: left;
    }
    
    .attachment-link {
        display: inline-block; 
        margin-right: 20px;
    }

    /* Layout
       ========================================================================== */
    #content-wrapper {
      min-height: 100%; 
    }

        #content {
            padding-top: 40px;
            padding-bottom: 230px; /* this needs to be bigger than footer height */
        }

    .footer {
        position: relative;
        margin-top: -200px; /* negative value of footer height */
        height: 140px;
        clear:both;
    } 
       
/* =============================================================================
    Header
   ========================================================================== */
.header {
    height: 50px;
    padding: 30px 0;
    background-color: #ff0000;
}
      
    #header-slogan h2 {
        color: #000;
        font-size: 25px;
        line-height: 30px;
        margin: 0;
    }
    
    /* Default */
    #logo-wrapper img {
        float: left;
    }
    
    #logo-wrapper h1 {
        color: #FFFFFF;
        float: left;
        font-size: 25px;
        line-height: 25px;
        margin: 12px 0 0 10px;
    }
       
/* =============================================================================
    Top menu
   ========================================================================== */
#top-menu {
    background-color: #a5b4be;
    display: block;
    width: auto;
}

    #top-menu .btn-navbar {
        background-color: #000;
        background-image: none;
        color: #FFFFFF;
        float: right;
        margin-left: 5px;
        margin-right: 0;
        margin-top: 0;
        padding: 15px;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    }

        #top-menu .btn-navbar.collapsed {
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
        }

        #top-menu .btn-navbar,
        #top-menu .btn-navbar:focus,
        #top-menu .btn-navbar:active,
        #top-menu .btn-navbar:hover {
            -webkit-box-shadow: 0 0 0 3px rgba(255,255,255,0.5);
            -moz-box-shadow: 0 0 0 3px rgba(255,255,255,0.5);
            box-shadow: 0 0 0 3px rgba(255,255,255,0.5);
        }

    #top-menu .brand {
        color: #000;
        display: none;
        font-size: 15px;
        font-weight: bold;
        line-height: 50px;
        margin: 0;
        padding: 0;
        text-shadow: none;
    }

        #top-menu .brand:hover {
            background-color: transparent;
        }

    #top-menu .navbar-inner {
        background-color: #a5b4be !important;
        background-image: none;
        border: 0 none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        padding-bottom: 30px;
        padding-top: 30px;
        filter: none;
    }    

        #top-menu .nav {
            width: 100%;
        }

            #top-menu .nav > li > a {
                color: #000000;
                font-family: 'vpro_thonik',Arial,Helvetica,Sans,FreeSans,'Nimbus Sans L',Garuda,sans-serif;
                font-size: 1.2em;
                padding: 10px 15px;
                text-shadow: none;
                -webkit-box-shadow: none;
                -moz-box-shadow: none;
                box-shadow: none;
            }
            
            #top-menu .nav > .active > a, 
            #top-menu .nav > .active > a:hover, 
            #top-menu .nav > .active > a:focus
            #top-menu .nav li.dropdown.open > .dropdown-toggle, 
            #top-menu .nav li.dropdown.active > .dropdown-toggle, 
            #top-menu .nav li.dropdown.open.active > .dropdown-toggle {
                background-color: #fff;
                color: #000;
            }
            
            #top-menu .nav > li > a:hover, 
            #top-menu .nav > li > a:focus {
                background-color: #64646e;
                color: #fff;
            }
            
            .nav-collapse .nav > li > a, 
            .nav-collapse .dropdown-menu a {
                -webkit-border-radius: 0;
                -moz-border-radius: 0;
                border-radius: 0;
            }
            
            #top-logout-link {
                float: right;
            }
        
                #top-menu #top-logout-link a {
                    background-color: #000000;
                    color: #FFFFFF;
                }
            
                    #top-menu #top-logout-link a:hover {
                        background-color: #64646e;
                    }
                    
                    #top-menu #top-logout-link a i {
                        margin-top: 3px;
                    }
       
/* =============================================================================
    Support form
   ========================================================================== */
#support-form-modal {
    margin: -250px 0 0 -405px;
    width: 810px;
}

    #support-form-modal > .modal-body > .row > .span3 {
        width: 270px;
    }
   
    #support-form {
        margin-bottom: 0;
    }
    
    /* Feedback button */
    #feedback-button {
        height: 101px;
        left: 0;
        position: fixed;
        top: 40%;
        width: 35px;
        z-index: 1000;
    }
    /* DISABLED DUE TO CLICKABLE AREA BUG. Replaced with feedback.png
        #feedback-button .support-trigger {
            background-color: #000000;
            color: #FFFFFF;
            display: block; 
            font-size: 1.1em;
            line-height: 1em;
            padding: 10px;            
            text-decoration: none;
        }

            #feedback-button .support-trigger:hover { 
                background-color: #64646e;
            }
   */
    #support-form .modal-body small {
        color: #888888;
        display: block;
        margin-top: 15px;
    }
       
/* =============================================================================
    Page-specific
   ========================================================================== */
   
    /* =============================================================================
        Welcome
       ========================================================================== */
    #welcome-logo-www, #welcome-logo-lokaalagenda {
        margin: -19px 0 40px;
    }
      
    #welcome-header-slogan h2 {
        color: #FFFFFF;
        font-size: 25px;
        line-height: 1.2em;
        margin: 0;
    }
    
    #welcome-logo-wrapper {
        margin: 0 auto;
        padding-top: 85px;
    }
    
        #welcome-logos li {
            margin-bottom: 25px;
            text-align: center;
        }
    
            #welcome-logos li a:hover {
                opacity: 0.5;
            }
   
    /* =============================================================================
        Login
       ========================================================================== */
    #login-wrapper {
        margin: -77px 0 0;
        position: relative;
        z-index: 999;
    }
    
        #login-wrapper .nav-tabs {
            border-bottom-color: #fff;
        }
        
            #login-wrapper .nav-tabs > li > a {
                border-color: transparent;
                color: #000;
                font-size: 1.2em;
                font-family: 'vpro_thonik';
            }    

                #login-wrapper .nav-tabs > .active > a, 
                #login-wrapper .nav-tabs > .active > a:hover {
                    border-color: #fff #fff transparent;
                }

                    #login-wrapper .nav-tabs > li > a:hover {
                      border-color: transparent transparent #ffffff transparent;
                    }
        
        #login-wrapper .tab-content {
            padding-top: 10px;
        }    
   
    /* =============================================================================
        Dashboard
       ========================================================================== */
    #dashboard-alert {
        padding-bottom: 19px;
        padding-top: 19px;
    }
    
        #dashboard-alert h4 {
            margin-bottom: 5px;
        }
    
        #dashboard-alert p {
            margin-bottom: 0;
        }

        #dashboard-alert ul {
            list-style: none;
            margin-left: 0px;
        }

        #dashboard-alert ul li {
            padding-bottom: 3px;
            border-bottom: 1px solid #d9d9d9;
        }
        
    #dashboard-quick-link a {
        margin-bottom: 5px;
    }
    
    .home_block ul,
    .home_block ol {
        font-size: 0.9em;
    }
    
    .home_block ul {
        list-style: none outside none;
        margin: 0;
    }
    
        .home_block ul li {
            padding: 0 0 4px;
        }
    
        .home_block ul li + li {
            border-top: 1px solid #ddd;
            padding: 4px 0;
        }
    
            .home_block ul li span.label {
                margin-right: 4px;
            }
    
    .home_block ol {
        margin: 0 0 0 20px;
    }
    
        .home_block .btn-more {
            margin: 10px 0 0 0;
        }
        
        #list_hof em {
            color: #555;
            font-size: 0.9em;
        }
    
    #quick-link-agenda {
        font-size: 0.7em;
    }
    
        #quick-link-agenda img {
            height: 50px;
            width: 145px;
            display: block;
        }
    
    #activity-message {
        width: 98%;
    }
    
    #actions {
    
    }
        
        #actions .action {
            border-bottom: solid 1px #ccc;
            border-width: 99%;
            min-height: 48px;
            padding-bottom: 10px;
            margin-bottom: 10px;
        }
            #actions .action p {
                margin-bottom: 0;
                padding-bottom: 0;
            }
        
            #actions .action.unread {
                background-color: #FFF6DB;
            }
            
            #actions span.action_time {
                display: block; 
                font-size: 0.8em;
                color: #999;
            }
       
    /* =============================================================================
        WWW (Events)
       ========================================================================== */
    .subscriptions-info {
    }
    
        .subscriptions-info strong {
            display: block;
            text-decoration: underline;
        }
    
        .subscriptions-info .subscriptions strong{
            margin-top: 5px;
        }
    
        .subscriptions-info > span {
            display: block;
            margin-bottom: 2px;
        }
    
            .subscriptions-info > span i {
            }

    #events table tbody td,
    #press-card-requests-list table tbody td,
    #unapproved table tbody td,
    #applications table tbody td {
        cursor: pointer;
    }

        #events table .popover-trigger i {
            margin-left: 3px;
        }

        #events table .event-status {
            color: #64646E;
            font-size: 85%;
        }

        #total-events-list table .progress,
        #events table .progress {
            background-color: #F7F7F7;
            background-image: -moz-linear-gradient(center top , #F5F5F5, #F9F9F9);
            background-repeat: repeat-x;
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0;
            height: 10px;
            margin-bottom: 0;
            margin-top: 10px;
            overflow: hidden;
        }

            #total-events-list table .progress .bar,
            #events table .progress .bar {
                background-color: #999;
                background-image: none;
                filter: none;
            }
        
    #events table tr.full td,
    #total-events-list table tr.full td,
    #press-card-requests-list table tr.full td {
        background-color: #DCF5AB !important;
    }
    
    #events table tr.full td abbr,
    #total-events-list table tr.full td abbr,
    #press-card-requests-list table tr.full td abbr {
        font-weight: bold;
    }
    
    #press-card-requests-list table span.assigned,
    #applications table span.assigned {
        font-size: 0.8em;
    }
    
        #press-card-requests-list table span.assigned > span,
        #applications table span.assigned > span {
            display: block;
        }
        
    .row_id {
        display: none;
    }
    
    span.only-icon {
        display: inline-block;
        padding-right: 10px;
    }
    
    #total-events-list {
        margin-top: 15px;
    }
   
    /* =============================================================================
        Event options
       ========================================================================== */
    .edit-btn-wrapper {
        margin-bottom: 15px;
    }
    
        .edit-btn-wrapper a {
            margin: 10px 5px 0 0;
        }
    
    #event-subscriptions {
        margin-bottom: 0;
    }

        #event-subscriptions p {
        }
        
            #event-subscriptions p > strong {
                display: block;
                margin-top: 10px;
            }
            
            #event-subscriptions p > strong:first-child {
                margin-top: 0;
            }
            
            #event-subscriptions p > span {
                display: block;
            }
    
        .event-details .progress {
            background-color: #F7F7F7;
            background-image: -moz-linear-gradient(center top , #F5F5F5, #F9F9F9);
            background-repeat: repeat-x;
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0;
            border: 1px solid #999;
            display: block;
            float: left;
            height: 10px;
            margin: -26px 0 0 75px;
            width: 200px;
            z-index: 999;
        }

            .event-details .progress .bar {
                background-color: #999;
                background-image: none;
                filter: none;
            }
    
        /* Modal view */
        #event-options-wrapper, 
        #show-feedback-wrapper {
            margin: -400px 0 0 -400px;
            width: 800px;
        }
           
            #event-options form {
                margin-bottom: 0;
            }
           
                #event-options .modal-header .label {
                    font-weight: normal;
                    margin-right: 5px;
                }
           
                #event-options .modal-body, 
                #show-feedback-wrapper .modal-body
                                {
                    max-height: 600px;
                }
                
                @media screen and (max-height: 600px) {
           
                    #event-options .modal-body, 
                    #show-feedback-wrapper .modal-body 
                                        {
                        max-height: 190px !important;
                    }
                    
                }

        span.application {
            display: inline-block !important;
        }

            span.application.approved a {
                color: green;
            }

            span.application.rejected a {
                color: #aaa;
            }

        /* Full view */
        .full-event-options h2 .label {
            font-weight: normal;
            margin-right: 5px;
        }
    
    /* =============================================================================
        Edit applications
       ========================================================================== */    
    #edit-apps .too-much {
        color: red;
    }
    
        #edit-apps .too-much:after {
            background-color: red;
            color: #FFFFFF;
            content: "!";
            display: inline-block;
            font-weight: bold;
            height: 1em;
            margin: 0 0 -2px 4px;
            padding: 0 3px 6px 1px;
            text-indent: 6px;
            width: 1em;
        }
   
    /* =============================================================================
        Event publish
       ========================================================================== */    
    #event-subscriptions ul {list-style-type:square;}
    
    /* =============================================================================
        Event feedback
       ========================================================================== */
    textarea#remarks {
        height: 250px;
        width: 65%;
    }
    
    div#remarks-alert {
        width: 60%;
    }
    
    /* =============================================================================
        Event show press card requests
       ========================================================================== */    
    #event-show-press-card-requests span.assigned {
        font-size: 0.8em;
    }
    
        #event-show-press-card-requests span.assigned > span {
            display: block;
        }
    
    /* =============================================================================
        Contacts
       ========================================================================== */
    .contacts-listing .btn + .btn {
        margin-left: 5px;
    }
        
        .contacts-listing span.contact-role {
            display: block;
            color: #999;
            font-size: 0.8em;
        }
    
        .contacts-listing select.team-select {
            font-size: 0.8em;
            height: 24px;
            width: 150px;
        }
        
    #teams-listing span.team-members {
        font-size: 0.8em;
    }
        
    #subscriptions-listing tbody td {
        cursor: pointer;
    }
   
    /* =============================================================================
        Accounts
       ========================================================================== */
    #subscriptions-table-legend {
        color: #888888;
        display: block;
        margin-top: 75px;
        font-size: 0.85em;
    }
    
        #subscriptions-table-legend span.admin-reservation {
            background-color: #D9EDF7;
            display: block;
            float: left;
            height: 1.6em;
            margin-right: 7px;
            width: 1.6em;
        }
    
        #subscriptions-table-legend p {
            
        }
   
    /* =============================================================================
        Download
       ========================================================================== */
    #downloads-table a {
        -ms-word-break: break-all;
        word-break: break-all;
        word-break: break-word;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        hyphens: auto;
    }
    
    
   
    /* =============================================================================
        Help
       ========================================================================== */
    .youtube-player {
        max-width: 480px;
        min-height: 288px;
        margin-bottom: 20px;
        margin-top: 10px;
    }
    
    /* =============================================================================
        Forum
       ========================================================================== */
    .topics .sticky td {
        background-color: #FFF6DB !important;
    }
        .topics .sticky td:nth-of-type(1) {
            font-weight: bold;
        }
    
    .post {
    }
    
        .post div.post-info,
        .post div.post-body {
            min-height: 150px;
        }
        
            .post div.post-info p:nth-of-type(1) {
                height: 64px;
            }
        
        .post div.post-time {
            border-bottom: solid 1px #ccc;
        }
        
            .post div.post-time span {
                0.8em;
                color: #aaa;
                font-style: italic;
            }
            
        .post div.post-text {
            min-height: 75px;
        }
    
        .post h3.attachment-title {
            margin-top: 20px;
            margin-bottom: 0px;
            font-size: 1.2em;
            line-height: 1.2em;
        }
        
        .post div.post-controls {
            border-top: solid 1px #ccc;
            margin-top: 5px;
        }
        
            .post div.post-controls a {
                margin: 10px 5px 0 0;
            }
            
            .post div.post-controls span.edited_by {
                color: #aaa;
            }
    
    /* =============================================================================
        Settings
       ========================================================================== */
    #settings-form label:not(.inline) {
        font-weight: bold;
    }
    
       
/* =============================================================================
    Forms
   ========================================================================== */
legend {
    margin-bottom: 10px;
}

legend + .control-group {
    margin-top: 10px;
}
   
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
  border-color: rgba(165,180,190, 0.8);
  outline: 0;
  outline: thin dotted \9;  /* IE6-9 */
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(165,180,190, 0.6);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(165,180,190, 0.6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(165,180,190, 0.6);
}  

select, 
textarea, 
input[type="text"], 
input[type="password"], 
input[type="datetime"], 
input[type="datetime-local"], 
input[type="date"], 
input[type="month"], 
input[type="time"], 
input[type="week"], 
input[type="number"], 
input[type="email"], 
input[type="url"], 
input[type="search"], 
input[type="tel"], 
input[type="color"], 
.uneditable-input {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.control-group .help-inline {
    font-size: 0.8em;
}

label {
    cursor: pointer;
}
       
/* =============================================================================
    Tabs
   ========================================================================== */
.nav-tabs > li > a {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}    

.nav-tabs > .active > a, 
.nav-tabs > .active > a:hover {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #FFFFFF;
}

    .nav-tabs > li > a:hover {
      color: #555555;
      background-color: #F2F4F3;
    }
       
/* =============================================================================
    Labels
   ========================================================================== */
.label {
    background-color: #999999;
    background-color: rgba(153, 153, 153, 0.9);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    font-size: 0.8em;
    font-weight: bold;
    line-height: 1em;
    padding: 2px 4px 2px;
    text-shadow: none;
    vertical-align: baseline;
    white-space: nowrap;
}
       
/* =============================================================================
    Wells
   ========================================================================== */
.well {
    background-color: #f5f5f5;
    border: 1px solid transparent;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

    .well h1:first-child,
    .well h2:first-child,
    .well h3:first-child,
    .well h4:first-child {
        margin-top: 0;
    }
       
/* =============================================================================
    Dropdowns
   ========================================================================== */
.dropdown-menu {
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.1);
}

    .dropdown-menu li > a:hover, 
    .dropdown-menu li > a:focus, 
    .dropdown-submenu:hover > a {
        background-color: #64646E;
        background-image: none;
        color: #FFFFFF;
    }
    .dropdown-menu .active > a, 
    .dropdown-menu .active > a:hover {
        background-color: #64646E;
        background-image: none;
        color: #FFFFFF;
    }
       
/* =============================================================================
    Modals
   ========================================================================== */
.modal {
    border: 1px solid rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

/* body.modal-open { prevent scrolling while during modal
    overflow: hidden;
} */

    .modal-header {
        background-color: #000;
        border-bottom: 0 none;
        padding: 15px;
    }
    
        .modal-header .close {
            color: #fff;
            text-shadow: none;
        }

        .modal-header h1,
        .modal-header h2,
        .modal-header h3,
        .modal-header h4 {
            color: #fff;
        }

    .modal-footer {
        background-color: #F2F4F3;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        border-top: 0 none;
        box-shadow: none;
    }
    
/* =============================================================================
    Accordions
   ========================================================================== */
.accordion-group {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
   
    .accordion-heading .accordion-toggle.collapsed {
        background-color: #E6E6E6;
        color: #000;
    }
           
    .accordion-heading .accordion-toggle:hover,
    .accordion-heading .accordion-toggle {
        background-color: #64646E;
        color: #fff;
    }
    
        .accordion-heading .accordion-toggle.collapsed span:before {
            content: "\25BA";
        }
    
        .accordion-heading .accordion-toggle span:before {
            color: #aaa;
            content: "\25BC";
            margin-right: 4px;
        }
       
/* =============================================================================
    Popovers
   ========================================================================== */
.popover {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.1);
    padding: 0;
}

    .popover-title {
        background-color: #64646e;
        border-bottom: 0 none;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        color: #fff;
        padding: 9px 15px;
    }
    
    .popover-content {
        font-size: 0.9em;
    } 
       
/* =============================================================================
    Alerts
   ========================================================================== */
#alert-area {
    bottom: 0;
    position: fixed;
    right: 10px;
    z-index: 99999;
}

    .alert {
        color: #468847;
        background-color: #FFF6DB;
        border-color: #FFF6DB;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        text-shadow: none;
    }

    #alert-area .alert {
        -webkit-box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.1);
        box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.1);
        margin-bottom: 0;
        margin-top: 20px;
        padding-bottom: 14px;
        padding-top: 14px;
        width: 600px;
    }

    .alert-success {
        color: #000;
        background-color: #ACC8BB;
        border-color: #ACC8BB;
    }

    .alert-danger,
    .alert-error {
        color: #b94a48;
        background-color: #FFE4DB;
        border-color: #FFE4DB;
    }

    .alert-info {
        color: #fff;
        background-color: #36607C;
        border-color: #36607C;
    }
    
        .alert-info .close {
            color: #fff;
        }

    .alert-warning {
        color: #000;
    }

       
/* =============================================================================
    Monthicker
   ========================================================================== */
.monthpicker {
    background-color: #64646e;
    padding: 10px;
    margin-bottom: 25px;
    margin-top: 15px;
    -moz-user-select:none; 
    user-select:none
}
    .monthpicker table {
        width: 100%;
        -moz-user-select:none; 
        user-select:none
    }
    
    .monthpicker th{display: none;}
    .monthpicker td{padding:0px}
    .monthpicker a{text-decoration:none; color:#fff}
    .monthpicker a:hover{background:#fff;color:#000;}
    .monthpicker a:hover span{background:#fff;color:#000;}
    .monthpicker a.li{position:relative}
    .monthpicker .li:hover ul{background-color: #F2F4F3;color:#000;visibility:visible}
    .monthpicker .li:hover li a:hover{background:#000;color:#fff;}
                        
    .monthpicker span{display:inline-block; width:58px; padding:1px; line-height:19px; text-align:center; cursor:pointer}
    .monthpicker .month span{width:40px}
    .monthpicker .selected{background:#fff;color:#000;}
    
    .monthpicker ul{float: right;list-style:none; margin:0; padding:0;}
        .monthpicker ul table{width:100%; border-collapse:collapse}
            .monthpicker ul ul{
                position:absolute;
                visibility:hidden;
                left:0px;
                top:20px;
                z-index:2;
                border:1px solid transparent;
            }
                .monthpicker ul ul .selected{background:#a5b4be; color:#fff;}
                    .monthpicker li {position:relative; width: 58px; float:left; text-align:center}
                        .monthpicker li a{
                            color:#000;
                            display:block;
                            -webkit-transition: none 0s ease 0s;  /* Safari 3.2+, Chrome */
                            -moz-transition: none 0s ease 0s;  /* Firefox 4-15 */
                            -o-transition: none 0s ease 0s;  /* Opera 10.5–12.00 */
                            transition: none 0s ease 0s;  /* Firefox 16+, Opera 12.50+ */
                        }
    
/* print style */
@media all and print{
    #monthpicker {display:none}
}
   
/* =============================================================================
    WYSIWYG
   ========================================================================== */
ul.wysihtml5-toolbar {
    margin: 0;
    padding: 0;
    display: block;
}

ul.wysihtml5-toolbar::after {
    clear: both;
    display: table;
    content: "";
}

    ul.wysihtml5-toolbar > li {
        float: left;
        display: list-item;
        list-style: none;
        margin: 0 5px 10px 0;
    }

    ul.wysihtml5-toolbar a[data-wysihtml5-command=bold] {
        font-weight: bold;
    }

    ul.wysihtml5-toolbar a[data-wysihtml5-command=italic] {
        font-style: italic;
    }

    ul.wysihtml5-toolbar a[data-wysihtml5-command=underline] {
        text-decoration: underline;
    }

    ul.wysihtml5-toolbar a.btn.wysihtml5-command-active {
        background-image: none;
        -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);
        -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);
        background-color: #D9D9D9;
        color: #000;
        outline: 0;
    }

    ul.wysihtml5-commands-disabled .dropdown-menu {
        display: none !important;
    }

    ul.wysihtml5-toolbar div.wysihtml5-colors {
      display:block;
      width: 50px;
      height: 20px;
      margin-top: 2px;
      margin-left: 5px;
      position: absolute;
      pointer-events: none;
    }

    ul.wysihtml5-toolbar a.wysihtml5-colors-title {
      padding-left: 70px;
    }

    ul.wysihtml5-toolbar div[data-wysihtml5-command-value="black"] {
      background: black !important;
    }

    ul.wysihtml5-toolbar div[data-wysihtml5-command-value="silver"] {
      background: silver !important;
    }

    ul.wysihtml5-toolbar div[data-wysihtml5-command-value="gray"] {
      background: gray !important;
    }

    ul.wysihtml5-toolbar div[data-wysihtml5-command-value="maroon"] {
      background: maroon !important;
    }

    ul.wysihtml5-toolbar div[data-wysihtml5-command-value="red"] {
      background: red !important;
    }

    ul.wysihtml5-toolbar div[data-wysihtml5-command-value="purple"] {
      background: purple !important;
    }

    ul.wysihtml5-toolbar div[data-wysihtml5-command-value="green"] {
      background: green !important;
    }

    ul.wysihtml5-toolbar div[data-wysihtml5-command-value="olive"] {
      background: olive !important;
    }

    ul.wysihtml5-toolbar div[data-wysihtml5-command-value="navy"] {
      background: navy !important;
    }

    ul.wysihtml5-toolbar div[data-wysihtml5-command-value="blue"] {
      background: blue !important;
    }

    ul.wysihtml5-toolbar div[data-wysihtml5-command-value="orange"] {
      background: orange !important;
    }
    
    /* Prettify */
    .com { color: #93a1a1; }
    .lit { color: #195f91; }
    .pun, .opn, .clo { color: #93a1a1; }
    .fun { color: #dc322f; }
    .str, .atv { color: #D14; }
    .kwd, .linenums .tag { color: #1e347b; }
    .typ, .atn, .dec, .var { color: teal; }
    .pln { color: #48484c; }

    .prettyprint {
      padding: 8px;
      background-color: #f7f7f9;
      border: 1px solid #e1e1e8;
    }
    .prettyprint.linenums {
      -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
         -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
              box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
    }

    /* Specify class=linenums on a pre to get line numbering */
    ol.linenums {
      margin: 0 0 0 33px; /* IE indents via margin-left */
    } 
    ol.linenums li {
      padding-left: 12px;
      color: #bebec5;
      line-height: 18px;
      text-shadow: 0 1px 0 #fff;
    }

       
/* =============================================================================
    Tables
   ========================================================================== */
.table th, 
.table td {
    border-top: 1px solid transparent;
}
       
/* =============================================================================
    Datatables
   ========================================================================== */
.dataTables_wrapper table {
    margin-bottom: 25px;
}

/* Top controls */
.dt_top {
    padding: 0 0 25px;
}

    .dt_top .dataTables_filter {
        display: block;
        float: left;
    }

    .dt_top .dataTables_length {
        display: block;
        float: left;
    }

    .dt_top label,
    .dt_top select,
    .dt_top input {
        margin-bottom: 0;
    }
    
    .dt_top select,
    .dt_top input {
        display: inline-block;
    }
    
    .dt_top select {
        width: 70px;
    }
    
    .dt_top label {
        margin-right: 10px;
    }
    
/* Pagination */
.dataTables_paginate {
    display: block;
    float: right;
}

    .dataTables_paginate a {
        background-color: #000000;
        background-image: url("../img/glyphicons-halflings-white.png");
        display: block;
        cursor: pointer;
        float: left;
        height: 30px;
        margin-left: 10px;
        width: 30px;
    }

        .dataTables_paginate a:hover,
        .dataTables_paginate a:focus {
            background-color: #64646E;
        }
    
    .dataTables_paginate .paginate_disabled_next,
    .dataTables_paginate .paginate_disabled_previous {
        background-color: #ccc;
        cursor: default;
    }

    .dataTables_paginate .paginate_disabled_previous {
        background-position: -232px -88px;
    }

    .dataTables_paginate .paginate_enabled_previous {
        background-position: -232px -88px;
    }

    .dataTables_paginate .paginate_disabled_next {
        background-position: -256px -88px;
    }

    .dataTables_paginate .paginate_enabled_next {
        background-position: -256px -88px;
    }
    
/* Loading mssg */
@-webkit-keyframes dt-processing-animation {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

@-moz-keyframes dt-processing-animation {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

@-ms-keyframes dt-processing-animation {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

@-o-keyframes dt-processing-animation {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 40px 0;
  }
}

@keyframes dt-processing-animation {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

.dataTables_processing {
    -webkit-animation: dt-processing-animation 2s linear infinite;
    -moz-animation: dt-processing-animation 2s linear infinite;
    -ms-animation: dt-processing-animation 2s linear infinite;
    -o-animation: dt-processing-animation 2s linear infinite;
    animation: dt-processing-animation 2s linear infinite;
    background-color: #A5B4BE;
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    -webkit-box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.1);
    -webkit-background-size: 40px 40px;
    -moz-background-size: 40px 40px;
    -o-background-size: 40px 40px;
    background-size: 40px 40px;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;        
    color: #FFFFFF;
    font-size: 1.2em;
    font-weight: bold;
    left: 50%;
    margin-left: -50px;
    margin-top: 100px;
    padding: 20px;
    position: absolute;
    text-align: center;
    width: 100px;
}

.dataTables_processing:not(.offset3) {
    margin-left: -50px;
    left: 50%;
}
    
/* Table head */
.dataTable th {
    background-color: #000;
    color: #FFFFFF;
    line-height: 20px;
    padding: 8px;
    text-align: left;
}
.table-condensed.dataTable th {
    padding: 4px 5px;
}

/*
 * Sorting
 */
.sorting { background: url('../img/sort_both.png') no-repeat center right; }
.sorting_asc { background: url('../img/sort_asc.png') no-repeat center right; }
.sorting_desc { background: url('../img/sort_desc.png') no-repeat center right; }

.sorting_asc_disabled { background: url('../img/sort_asc_disabled.png') no-repeat center right; }
.sorting_desc_disabled { background: url('../img/sort_desc_disabled.png') no-repeat center right; }
    
/* Table body */
.lt-ie9 .table-striped tbody tr.odd td,
.lt-ie9 .table-striped tbody tr.odd th {
    background-color: #f0f0f0;
}
    
/* Footer info */
.dataTables_info {
    background-color: #64646e;
    color: #FFFFFF;
    display: block;
    float: left;
    font-size: 0.9em;
    line-height: 1em;
    padding: 10px;
}
    
/* =============================================================================
    Buttons
   ========================================================================== */
.btn {
    color: #fff;
    text-shadow: none;
    background-color: #64646E;
    background-image: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border: 0 none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    filter: none;
    -webkit-transition: background 0.3s ease-out;  /* Safari 3.2+, Chrome */
    -moz-transition: background 0.3s ease-out;  /* Firefox 4-15 */
    -o-transition: background 0.3s ease-out;  /* Opera 10.5–12.00 */
    transition: background 0.3s ease-out;  /* Firefox 16+, Opera 12.50+ */
}

    .btn:hover i,
    .btn:active i {        
        background-image: url("../img/glyphicons-halflings.png");
    }

.btn-primary {
  color: #ffffff;
  background-color: #ff0000;
}    

    .btn-primary:hover,
    .btn-primary:active,
    .btn-primary.active,
    .btn-primary.disabled,
    .btn-primary[disabled] {
      color: #ffffff;
      background-color: #b42828;
    }

    .btn-primary:active,
    .btn-primary.active {
      background-color: #c67605 \9;
    }

        .btn-primary:hover i,
        .btn-primary:active i {        
            background-image: url("../img/glyphicons-halflings-white.png");
        }

.btn-warning {
  color: #ffffff;
  background-color: #faa732;
}

    .btn-warning:hover,
    .btn-warning:active,
    .btn-warning.active,
    .btn-warning.disabled,
    .btn-warning[disabled] {
      color: #ffffff;
      background-color: #f89406;
    }

    .btn-warning:active,
    .btn-warning.active {
      background-color: #c67605 \9;
    }

        .btn-warning:hover i,
        .btn-warning:active i {        
            background-image: url("../img/glyphicons-halflings-white.png");
        }

.btn-danger {
  color: #ffffff;
  background-color: #da4f49;
}

    .btn-danger:hover,
    .btn-danger:active,
    .btn-danger.active,
    .btn-danger.disabled,
    .btn-danger[disabled] {
      color: #ffffff;
      background-color: #bd362f;
    }

    .btn-danger:active,
    .btn-danger.active {
      background-color: #942a25 \9;
    }

        .btn-danger:hover i,
        .btn-danger:active i {        
            background-image: url("../img/glyphicons-halflings-white.png");
        }

.btn-success {
  color: #ffffff;
  background-color: #5bb75b;
}

    .btn-success:hover,
    .btn-success:active,
    .btn-success.active,
    .btn-success.disabled,
    .btn-success[disabled] {
      color: #ffffff;
      background-color: #51a351;
    }

    .btn-success:active,
    .btn-success.active {
      background-color: #408140 \9;
    }

        .btn-success:hover i,
        .btn-success:active i {        
            background-image: url("../img/glyphicons-halflings-white.png");
        }

.btn-info {
  color: #ffffff;
  background-color: #49afcd;
}

    .btn-info:hover,
    .btn-info:active,
    .btn-info.active,
    .btn-info.disabled,
    .btn-info[disabled] {
      color: #ffffff;
      background-color: #2f96b4;
    }

    .btn-info:active,
    .btn-info.active {
      background-color: #24748c \9;
    }

        .btn-info:hover i,
        .btn-info:active i {        
            background-image: url("../img/glyphicons-halflings-white.png");
        }

.btn-inverse {
  color: #ffffff;
  background-color: #000;
}

    .btn-inverse:hover,
    .btn-inverse:active,
    .btn-inverse.active,
    .btn-inverse.disabled,
    .btn-inverse[disabled] {
      color: #ffffff;
      background-color: #363636;
    }

    .btn-inverse:active,
    .btn-inverse.active {
      background-color: #080808 \9;
    }

        .btn-inverse:hover i,
        .btn-inverse:active i {        
            background-image: url("../img/glyphicons-halflings.png");
        }
    
.btn-group > .btn:first-child, 
.btn-group > .btn:last-child, 
.btn-group > .dropdown-toggle {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

/* =============================================================================
    Datepicker
   ========================================================================== */
.datepicker {
    top: 0;
    left: 0;
    padding: 4px;
    margin-top: 1px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.datepicker:before {
    content: '';
    display: inline-block;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: -7px;
    left: 6px;
}
.datepicker:after {
    content: '';
    display: inline-block;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #ffffff;
    position: absolute;
    top: -6px;
    left: 7px;
}
.datepicker > div {
    display: none;
}
.datepicker table {
    width: 100%;
    margin: 0;
}
.datepicker td, .datepicker th {
    text-align: center;
    width: 20px;
    height: 20px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.datepicker td.day:hover {
    background: #eeeeee;
    cursor: pointer;
}
.datepicker td.old, .datepicker td.new {
    color: #999999;
}
.datepicker td.active, 
.datepicker td.active:hover {
    background-color: #000;
    filter: none;
    border-color: transparent;
    color: #fff;
    text-shadow: none;
}
.datepicker td.active:hover,
.datepicker td.active:hover:hover,
.datepicker td.active:active,
.datepicker td.active:hover:active,
.datepicker td.active.active,
.datepicker td.active:hover.active,
.datepicker td.active.disabled,
.datepicker td.active:hover.disabled,
.datepicker td.active[disabled],
.datepicker td.active:hover[disabled] {
    background-color: #000;
}
.datepicker td.active:active,
.datepicker td.active:hover:active,
.datepicker td.active.active,
.datepicker td.active:hover.active {
    background-color: #003399 \9;
}
.datepicker td span {
    display: block;
    width: 47px;
    height: 54px;
    line-height: 54px;
    float: left;
    margin: 2px;
    cursor: pointer;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.datepicker td span:hover {
    background: #eeeeee;
}
.datepicker td span.active {
    background-color: #000;
    filter: none;
    border-color: transparent;
    color: #fff;
    text-shadow: none;
}
.datepicker td span.active:hover,
.datepicker td span.active:active,
.datepicker td span.active.active,
.datepicker td span.active.disabled,
.datepicker td span.active[disabled] {
    background-color: #000;
}
.datepicker td span.active:active, .datepicker td span.active.active {
    background-color: #003399 \9;
}
.datepicker td span.old {
    color: #999999;
}
.datepicker th.switch {
    width: 145px;
}
.datepicker thead tr:first-child th {
    cursor: pointer;
}
.datepicker thead tr:first-child th:hover {
    background: #eeeeee;
}
.input-append.date {
    display: inline-block;
    margin-bottom: 9px;
}
.input-append.date .add-on i, .input-prepend.date .add-on i {
    display: block;
    cursor: pointer;
    width: 16px;
    height: 16px;
}
           
/* =============================================================================
    Footer
   ========================================================================== */
.footer {
    padding: 30px 0;
    background-color: #F2F4F3;
}

    .footer p {
        margin-bottom: 0;
        color: #777;
        font-size: 0.9em;
    }
    
    #footer-promo a {
        color: #444;
        text-decoration: underline;
    }
    
        #footer-promo a:hover {
            color: #fff;
        }
        
    #footer-about-link {
        bottom: 0;
        margin-left: -117px;
        padding: 9px 10px;
        position: absolute;
    }
      
/* =============================================================================
    Media Queries
   ========================================================================== */


    /* Desktop large
       ========================================================================== */
    @media all and (min-width: 1200px) {
        #header-slogan h2 {
            line-height: 30px;
        }
    }
    
    @media all and (max-width: 1100px) {
        
        #header-slogan h2,
        #welcome-header-slogan h2 {
            margin-top: -10px;
        }
            
            #top-menu .nav > li > a {
                font-size: 1.1em;
                padding: 10px;
            }

        #support-email {
            min-width: 178px !important;
            width: 178px !important;
        }
    }

    /* Desktop small up to 1024 pixels (netbooks)
       ========================================================================== */
    @media all and (max-width: 1024px) {
        #feedback-button {
            display: none;
        }
        
        /* (Data)Tables */
        .contacts-listing tr th:nth-child(4),
        .contacts-listing tr td:nth-child(4) {display:none; visibility:hidden;}
    }

    /* Desktop small
       ========================================================================== */    
    @media all and (max-width: 980px) {
      body  {
        font-size: 13px;
      }

        #welcome-logo-www, #welcome-logo-lokaalagenda {
            max-height: 178px;
        }
        
        #header-slogan {
            display: none;
        }
        
        #top-menu .navbar-inner {
            padding-bottom: 10px;
            padding-top: 10px;
        }
        
            #top-menu .nav-collapse .nav{
                margin-top: 15px;
            }
            
            #top-menu .nav > li > a {
                font-size: 1.3em;
            }
            
            #top-logout-link {
                float: none;
            }
                        
                #top-menu #top-logout-link a i {
                    margin-top: 0px;
                }    
        
        /* (Data)Tables */    
        #edit-apps th i {
            display: none;
        }
        
        #events_dt tr th:nth-child(4),
        #events_dt tr td:nth-child(4),
        #events_dt tr th:nth-child(7),
        #events_dt tr td:nth-child(7)  {display:none; visibility:hidden;}
        
        .footer {
            height: auto;
        } 
    }

    /* Tablet to desktop
       ========================================================================== */
    @media all and (min-width: 768px) and (max-width: 980px) {
        body  {
            font-size: 12px;
        }
            
            #top-menu .brand {
                display: block;
            }

            /* Feedback button */
            #feedback-button {
                display: none;
            }
        
        #list_hof em {
            display: none;
        }
    }

    /* Tablet
       ========================================================================== */
    @media all and (max-width: 767px) {
        body {
            font-size: 11px;
        }
        
            #content {
                padding-top: 20px;
            }
        
            h1 {
                font-size: 26px;
                line-height: 36px;
            }
        
            h2 {
                font-size: 20px;
                line-height: 30px;
            }
        
            h3 {
                font-size: 14px;
                line-height: 30px;
            }

            legend {
                font-size: 18px;
            }
            
            .btn-small {
                font-size: 10px;
            }
            
            .btn-large {
                font-size: 14px;
            }
            
                .btn-large [class^="icon-"] {
                    margin-top: 0;
                }
            
            .btn {
                font-size: 12px;
            }
            
            .header,
            .footer {
            margin-left: -20px;
            margin-right: -20px;
            padding-left: 20px;
            padding-right: 20px;
            }

            .header {
            }

            #logo-wrapper h1 {
                font-size: 15px;
            }

                #welcome-logo-www, #welcome-logo-lokaalagenda {
                    max-height: 78px; 
                    margin-bottom: 0;
                }

                #welcome-header-slogan h2 {
                    color: #000;
                    font-size: 14px;
                    line-height: 30px;
                    float: left;
                    margin-bottom: 20px;
                    margin-top: 20px;
                }
    
            #welcome-logo-wrapper {
                padding-top: 15px;
            }

            #login-wrapper {
                margin: -57px 0 0;
            }
    
                #login-wrapper-tabs {
                    margin: 0 -20px 0 0;
                }


                    #login-wrapper .nav-tabs > li > a {
                        font-size: 1.1em;
                        padding-left: 8px;
                        padding-right: 8px;
                    }
            
            #top-menu .brand {
                display: none;
            }            

            .footer p {
                margin-bottom: 9px;
            }

            .footer .pull-left,
            .footer .pull-right {
                float: none !important;
                display: block;
            }
        
                #footer-about-link {
                    display: block;
                    margin-left: 0;
                    margin-top: 10px;
                    position: relative;
                }

            #alert-area {
                width: 100%;
            }

                #alert-area .alert {
                    padding: 20px;
                    width: 100%;
                }

                    #alert-area .alert .close {
                        right: 20px;
                    }

                    #alert-area .alert p {
                        padding-right: 25px;
                    }
    
            /* DataTables */
            .dt_top {
            }
            
                .dt_top .dataTables_length {
                    display: none;
                }
            
                .dataTables_paginate {
                    width: 100%;
                }
            
                    .dataTables_paginate a {
                        margin: 0;
                    }
            
                    .dataTables_paginate .paginate_disabled_previous,
                    .dataTables_paginate .paginate_enabled_previous {
                        float: left;
                    }
            
                    .dataTables_paginate .paginate_disabled_next,
                    .dataTables_paginate .paginate_enabled_next {
                        float: right;
                    }

            #edit-apps .checkbox {
                font-size: 10px;
            }

                .contacts-listing tr th:nth-child(6),
                .contacts-listing tr td:nth-child(6),
                .contacts-listing tr th:nth-child(7),
                .contacts-listing tr td:nth-child(7)    {display:none; visibility:hidden;}                
                .contacts-listing tr td:nth-child(8)    {text-align: center;}
                    .contacts-listing tr td:nth-child(8 ) a    {margin-bottom: 5px;}

                #events_dt tr th:nth-child(8),
                #events_dt tr td:nth-child(8)    {display:none; visibility:hidden;}
                    
            #subscriptions-table-legend {
                margin-top: 120px;
            }
            
            #events_dt tr td:nth-child(3) { 
                width: 200px !important;
            }

            /* Logout button */
            #logout_wrapper {
                display: none;
            }

            /* Feedback button */
            #feedback-button {
                display: none;
            }
            
            .event-details .progress {
                margin: -24px 0 0 62px;
            }
            .youtube-player {
                min-height: auto;
            }
    }

    /* Landscape phones
       ========================================================================== */
    @media all and (max-width: 480px) {
        body {
            font-size: 11px;
        }
        
            h1 {
                font-size: 20px;
                line-height: 36px;
            }
        
            h2 {
                font-size: 14px;
                line-height: 30px;
            }
        
            h3 {
                font-size: 13px;
                line-height: 30px;
            }

            #logo-wrapper h1 {
                font-size: 13px;
            }

                #welcome-logo-www, #welcome-logo-lokaalagenda {
                    max-height: 38px; 
                }

            #welcome-header-slogan h2 {
                font-size: 12px;
            }

            #login-wrapper .nav-tabs > li > a {
                font-size: 1em;
                padding-left: 4px;
                padding-right: 4px;
            }
            
            .popover {
                display: none !important;
            }
            
        /* (Data)Tables */            
        /* Force table to not be like tables anymore */
        #hof-tabs-content  table, 
        #hof-tabs-content thead, 
        #hof-tabs-content tbody, 
        #hof-tabs-content th, 
        #hof-tabs-content td, 
        #hof-tabs-content tr,
        .contacts-listing table, 
        .contacts-listing thead, 
        .contacts-listing tbody, 
        .contacts-listing th, 
        .contacts-listing td, 
        .contacts-listing tr,
        #edit-apps table, 
        #edit-apps thead, 
        #edit-apps tbody, 
        #edit-apps th, 
        #edit-apps td, 
        #edit-apps tr,
        #events_dt table, 
        #events_dt thead, 
        #events_dt tbody, 
        #events_dt th, 
        #events_dt td, 
        #events_dt tr,
        #subscriptions-listing table, 
        #subscriptions-listing thead, 
        #subscriptions-listing tbody, 
        #subscriptions-listing th, 
        #subscriptions-listing td, 
        #subscriptions-listing tr { 
            display: block; 
        }
        
        
        
        /* Hide table headers (but not display: none;, for accessibility) */
        #hof-tabs-content .table thead tr { 
            position: absolute;
            top: -9999px;
            left: -9999px;
        }
        
            #events_dt tr td:nth-child(3),
            .table thead th { 
                width: auto !important;
            }
        
        #hof-tabs-content tr:first-child {border-width: 1px 1px 1px 1px !important; }
        
        .table:not(.contacts-listing) tr { border: 1px solid #ddd; border-width: 0 1px 1px 1px; }
        
            #edit-apps table td,
            #hof-tabs-content td,
            #events_dt td,
            #subscriptions-listing td { 
                /* Behave  like a "row" */
                border: none;
                border-bottom: 1px solid #eee; 
                position: relative;
                padding-left: 30%; 
                padding-bottom: 5px;
                padding-top: 5px;
            }
            
            #edit-apps td { 
                padding-left: 35% !important;
            }
            
            #hof-tabs-content table td:before,
            #edit-apps table td:before,
            #events_dt td:before,
            #subscriptions-listing td:before { 
                /* Now like a table header */
                position: absolute;
                font-weight: bold;
                /* Top/left values mimic padding */
                top: 5px;
                left: 5px;
                width: 25%; 
                padding-right: 10px; 
                white-space: nowrap;
            }
                
            #edit-apps td:before,
            #hof-tabs-content td:before {
                width: 35%; 
            }
        
        /* Label the data */
        #hof-tabs-content td:nth-of-type(1):before { content: "Rang:"; }
        #hof-tabs-content td:nth-of-type(2):before { content: "Naam:"; }
        #hof-tabs-content td:nth-of-type(3):before { content: "Artikelen:"; }
        #hof-tabs-content td:nth-of-type(4):before { content: "Artikelen/Mnd:"; }
        
        #subscriptions-listing td:nth-of-type(1):before { content: "Wat:"; }
        #subscriptions-listing td:nth-of-type(2):before { content: "Titel:"; }
        #subscriptions-listing td:nth-of-type(3):before { content: "Datum:"; }
        #subscriptions-listing td:nth-of-type(4):before { content: "Deadline:"; }
        #subscriptions-listing td:nth-of-type(5):before { content: "Rol:"; }
        
        #events_dt td:nth-of-type(1):before { content: "Datum:"; }
        #events_dt td:nth-of-type(2):before { content: "Wat:"; }
        #events_dt td:nth-of-type(3):before { content: "Titel:"; }
        #events_dt td:nth-of-type(4):before { content: "Genre:"; }
        #events_dt td:nth-of-type(5):before { content: "Waar:"; }
        #events_dt td:nth-of-type(6):before { content: "Aanmelden:"; }
        #events_dt td:nth-of-type(7):before { content: "Status:"; }
        #events_dt td:nth-of-type(8):before { content: "Prioriteit:"; }
        
        #edit-apps td:nth-of-type(1):before { content: "Schrijver:"; }
        #edit-apps td:nth-of-type(2):before { content: "Fotograaf:"; }
        #edit-apps td:nth-of-type(3):before { content: "Filmer:"; }
        #edit-apps td:nth-of-type(4):before { content: "Tekstredacteur:"; }
        #edit-apps td:nth-of-type(5):before { content: "Fotoredacteur:"; }
        
        /* Specific */
        .contacts-listing tr td:nth-child(1) {
            font-size: 1.2em;
            font-weight: bold;
        }

        #total-events-list table .progress,
        #events table .progress {
            margin-bottom: 5px;
            margin-top: 5px;
        }

        #events table .popover-trigger:after {
            content: " [Klik om je aan te melden]";
        }
        
        /* Various */
        .dt_top label {
            font-size: 0.9em;
            display: block;
        }
        
            .dt_top div + div label {
                margin-top: 10px;
            }
        
            .dataTables_paginate {
                margin-top: 20px;
            }
    }

    /* Portrait phones
       ========================================================================== */
    @media all and all and  (max-width: 320px) {
        .dt_top div + div label {
            margin-top: 10px;
        }
    }


   
/* =============================================================================
    Font-Face
   ========================================================================== */
/*     This is the proper syntax for an @font-face file
        Just create a "fonts" folder at the root,
        copy your FontName into code below and remove
        comment brackets

@font-face {
    font-family: 'MayberryPro-Semibold';
    src: url('../font/mayberrypro-semibold.eot');
    src: url('../font/mayberrypro-semibold.eot?#iefix') format('embedded-opentype'),
         url('../font/mayberrypro-semibold.woff') format('woff'),
         url('../font/mayberrypro-semibold.ttf') format('truetype'),
         url('../font/mayberrypro-semibold.svg#mayberrypro-semibold') format('svg');
    font-weight: normal;
    font-style: normal;
} */

/* Declaration for normal variant */
@font-face {
    font-family: 'vpro_thonik';
    src: url('../font/vpro_thonik_medium.eot'); /* IE9 Compatibility Modes */
    src: url('../font/vpro_thonik_medium.eot?#iefix') format('eot'),  /* IE6-IE8 */
         url('../font/vpro_thonik_medium.woff') format('woff'); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}

/* Declaration for the bold variant (this is also used in the logo */
@font-face {
    font-family: 'vpro_thonik';
    src: url('../font/vpro_thonik_bold.eot'); /* IE9 Compatibility Modes */
    src: url('../font/vpro_thonik_bold.eot?#iefix') format('eot'),  /* IE6-IE8 */
         url('../font/vpro_thonik_bold.woff') format('woff'); /* Modern Browsers */
    font-weight: bold;
    font-style: normal;
}

.vpro-thonik-medium {
    font-family: 'vpro_thonik', Arial, Helvetica, Sans, FreeSans, 'Nimbus Sans L', Garuda, sans-serif;
    font-weight: normal;
    /* This is a special hack for IE */
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://files.vpro.nl/fontface/iefix.png,sizingMethod=crop);
    zoom: 1;
}

.vpro-thonik-bold {
    font-family: 'vpro_thonik', Arial, Helvetica, Sans, FreeSans, 'Nimbus Sans L', Garuda, sans-serif;
    font-weight: bold;
    /* This is a special hack for IE */
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://files.vpro.nl/fontface/iefix.png,sizingMethod=crop);
    zoom: 1;
}

.default-font {
    font-family: Arial, Helvetica, Sans, FreeSans, 'Nimbus Sans L', Garuda, sans-serif;
    font-weight: bold;
    /* This is a special hack for IE */
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://files.vpro.nl/fontface/iefix.png,sizingMethod=crop);
    zoom: 1;
}