/**
    All styles related to the display of the Banner
    and the menu contained in it.
    Size and position of background image are changed
    when the menu collapses.
*/


/**
    ---------------------------------------------------------------------------
    BANNER

    The div Banner is on the template Griel.Master.
    It contains WUCBanner, so it is the actual root element.
    It defines the background image, minimum height.
    The background color is overridden in javascript
    depending on the environment the site runs in.
    The JavaScript assigns a class to #Banner.
*/
#Banner {
    background-image: url('../Img/pnlogo.png');
    background-position: bottom left;
    background-repeat: no-repeat;
    min-height: 138px;
    border: 1px solid Gray;
    margin-bottom: 0px;
    padding-top: 5px;
    background-color: white;
}

    /**  
        classes to overwrite the background color in the 
        different environments (prod being white, see above):
    */
    #Banner.acc {
        background-color: #ffb3ba !important;
    }

    #Banner.tst {
        background-color: #ffdfba !important;
    }

    #Banner.dev {
        background-color: #ffffba !important;
    }

/**  
    ---------------------------------------------------------------------------
*/


/*
    ---------------------------------------------------------------------------
    BANNERENV

    BannerEnv is a small div, top left, that shows
    environment and screen resolution in non-prod
    environments. It contains a EnvName div and 
    a Resolution div.
*/
#BannerEnv {
    position: absolute;
    margin-left: 16px;
    margin-top: -9px;
    top: 35px;
    height: 65px;
    /*line-height: 30px;*/
    font-family: Verdana;
    font-weight: bold;
    color: black;
}

    /**
        EnvName contains the name of the environment when not
        Production.
        Value set by JavaScript (WUCBanner.js).
    */
    #BannerEnv #EnvName {
    }

    /**
        Resolution contains the resolution (widthxheight)
        when not in Production. 
        Values set by JavaScript (WUCBanner.js).
    */
    #BannerEnv #Resolution {
    }

/**  
    ---------------------------------------------------------------------------
*/



/**  
    ---------------------------------------------------------------------------

    The rest of the navigation is contained in 

    nav #GrielNavigation - the menu itself
    div #quick-menu - the quick menu beneath the main menu
    div #quick-menu-short - contains current user, this is only displayed
                            when menu is collapsed and 'replaces' user-info

    for override of Bootstrap nav and navbar classes see
    OVERRIDE BOOTSTRAP DEFAULTS

    ---------------------------------------------------------------------------
*/

/**
    position the menus in relation to background menu
    (see @media 900 for collapsed)
*/
#GrielNavigation, #quick-menu {
    margin-left: 172px;
}



/**  
    ---------------------------------------------------------------------------

    GRIELNAVIGATION

    GrielNavigation contains

    div .navbar-header - for collapsed menu on small screens 
                        (button with three lines)
    div #mainmenu - the main menu with dropdowns, which in its turn consists
                   of three ul's:

        ul #PublicMenu - menu for unauthenticated user
        ul #UserMenu - menu for authenticated user
        ul #TopMenu - the login/logout and end impersonation buttons on the right

        Which of these sections (and what elements within them) are visible 
        is determined by JavaScript (WUCBanner.js) and depend on the roles of
        the user.

        The sections are styled ul .nav .navbar-nav (BootStrap).
        Each button in the menu is a li containing an anchor (nav-link).

        If a button has a dropdown list it is marked with class .dropdown. The
        dropdown itself is an ul .dropdown-menu, within the li. 

    ---------------------------------------------------------------------------
*/
#GrielNavigation {
    padding-right: 15px;
}




/**
    ---------------------------------------------------------------------------

    Global UTILITY classes specific for the menu

*/

.no-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.no-padding-right {
    padding-right: 0 !important;
}

.no-padding-left {
    padding-left: 0 !important;
}

.dropdown-menu li a {
    margin-left: 0;
}

#mainmenu .nav > li > a:hover {
    background: #fff !important;
}

#mainmenu #TopMenu > li > a.btn:hover {
    font-weight: normal;
    background-color: lightblue !important;
}

.menuitem-small {
    min-width: 100px;
    color: black;
    padding: 6px;
    padding-left: 10px;
    background-color: rgba(211, 211, 211, 0.31);
    border: solid 1px;
    border-radius: 4px;
    margin: 1px;
    font-size: 0.85em;
}

/**
    Initially hide user menu
*/
#UserMenu {
    display: none;
}

/**
    Quick-menu-short is hidden when menu is not collapsed
*/
#quick-menu-short {
    display: none;
}

/**
    To avoid overlap between Usermenu and Topmenu when impersonating:
*/
@media (min-width: 993px) and (max-width: 1300px) {
    #TopMenu {
        max-width: 200px;
    }
}


/** 
    OVERRIDE BOOTSTRAP DEFAULTS 
    This is necessary to maintain integrity of display
*/

.navbar {
    border-radius: 0;
}

.navbar-default {
    background-color: transparent;
    border-color: transparent;
}

.navbar-default .navbar-nav .open .dropdown-menu > li > a {
}

.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
    background: lightgray;
}

.navbar-nav .open .dropdown-menu {
    background: white;
    margin: 0;
    margin-right: 8px;
}

.nav-link {
    font: inherit;
    /*font-size: 14px;*/
    line-height: 30px !important;
    margin-right: 5px;
    padding: 2px 2px 2px 10px;
    min-width: 100px;
    background: rgba(183, 239, 136, 0.74);
    text-align: center;
    border: 1px solid;
    border-radius: 4px;
}

.navbar-nav.navbar-right > li {
    float: right;
}

/* moved from VT-Layout.css */
.navbar-nav > li > a {
    padding-bottom: 2px !important;
    padding-top: 2px !important;
}

.navbar {
    min-height: 10px !important;
}
/*.rcbInput
{
    margin-top:15px !important;
}*/
.dropdown-menu {
    min-width: 20px !important;
}



.white {
    background: #fff;
}


/*
    SCREEN WIDTH LESS THAN 1100 PIXELS

    Make smaller buttons
*/

    
@media screen and (max-width: 1100px) {

    .nav-link {
        min-width: 24px;
    }

    #UserMenu.nav > li > a, #TopMenu.nav > li > a {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* 
    SCREEN WIDTH LESS THAN 900 PIXELS 

    Styles for the Collapsed navbar
*/
    
@media screen and (max-width: 991px) {

/**
    position of the GRIEL specific elements
*/

    #GrielNavigation {
        margin-left: 110px;
    }

    #Banner {
        min-height: 103px;
        padding-bottom: 40px;
    }

    #BannerEnv {
        margin-left: 19px;
        margin-top: -26px;
    }

    /**
        menu with shortcuts not visible in collapsed menu
    */
    #quick-menu {
        display: none !important;
    }

    /** 
        Quick-menu-short shows name of impersonated user in collapsed menu.
    */
    #quick-menu-short {
        display: block;
        margin-right: 10px;
    }

    #TopMenu {
        max-width: auto;
    }

    /*
        The Toggle-button and its three horizontal bars (icon-bar)
        in the collapsed menu
    */
    .navbar-toggle {
        height: 48px;
        width: 48px;
    }

    .icon-bar {
        height: 4px !important;
        width: 28px !important;
    }

    /**
        overriding bootstrap collapse: 
    */

    .navbar-header {
        float: none;
    }

    .navbar-toggle {
        display: block;
    }

    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }

        .navbar-collapse.collapse {
            display: none !important;
        }

    .navbar-nav {
        float: none !important;
        margin: 7.5px -15px;
    }

        .navbar-nav > li {
            float: none;
            width: 100%;
        }

            .navbar-nav > li > a {
                padding-top: 10px;
                padding-bottom: 10px;
            }

    .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

        .navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header {
            padding: 5px 15px 5px 25px;
        }

    .navbar-text {
        float: none;
        margin: 15px 0;
    }

    /**
        since 3.1.0 
    */

    .navbar-collapse.collapse.in {
        display: block !important;
    }

    .collapsing {
        overflow: hidden !important;
    }

}