/*!
 * Yamm!3 - Yet another megamenu for Bootstrap 3
 * http://geedmo.github.com/yamm3
 * 
 * @geedmo - Licensed under the MIT license
 */
.yamm .nav,
.yamm .collapse,
.yamm .dropup,
.yamm .dropdown 
{
    position: static; 
}
.yamm-container 
{
    position: relative;
}
.yamm .dropdown-menu 
{
    left: auto;
}

/* This forces the mega menu area to be full width if using the yamm-fw on the top level li */
.yamm .yamm-fw > .dropdown-menu 
{
    left: 10px; /* set to 0 for full width */
    right: 10px;
    margin-top: -2px;
}


/* Class Is used to make text invisible but still readable by screen readers */
.element-invisible 
{ 
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
	padding:0 !important;
	border:0 !important;
	height: 1px !important; 
	width: 1px !important; 
	overflow: hidden;
}

/* MD devices */
@media (min-width:992px)
{
    .yamm .yamm-content
    {
        padding: 0px 20px;
    }
}

/* Menu items */
/*Notes
navbar-default is the full screen mega menu
navbar-collpase is the phone/tablet menu from the hamburger icon
*/

.navbar
{
    min-height: 0;
    margin-bottom: 0;
    position: static; /* Testing for mobile menu to line up with search and logo.  Defaults to relative that doesn't allow it to show next to it */
}
.navbar-collapse
{
    border-top: none;
    padding-left: 0px;
    padding-right: 0px;
}

/* Top level items (with > then it's the li that immediately follows .navbar-nav ) */
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a:link,
.navbar-default .navbar-nav > li > a:visited
{
    font-size: 14px;
    color: #FFFFFF;
    padding-top: 5px;
    padding-bottom:5px;
    padding-left: 10px;
    padding-right: 10px;
}

/* Hover on top level menu links (with > then it's the li that immediately follows .navbar-nav ) */
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:active
{
    color: #E2992D;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:link,
.navbar-default .navbar-nav > .open > a:visited,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:active
{
    color: #FFFFFF !important; 
    background-color: #E2992D; /*to match the breadcrumb bar*/
    border-color: #E2992D; 
    border-radius: 1px;
}

@media (max-width:992px) /*little menu - white background*/
{
	.navbar-default .navbar-nav > .open > a,
    .navbar-default .navbar-nav > .open > a:link,
    .navbar-default .navbar-nav > .open > a:visited
	{
	color: #2F444F  !important;
	}
	.navbar-default .navbar-nav > .open > a:hover,
    .navbar-default .navbar-nav > .open > a:focus,
    .navbar-default .navbar-nav > .open > a:active
	{
	color: #B67724 !important; /*darker yellow for clarity*/
	}	
}

.navbar-default
{
    /* Override the top/bottom margin but leave the left/right in */
    border-radius: 0px;  /* Turn off rounded corners on top level menu bar */
    border: none;
    background-color: #4F5C65;
}

/* Collapsed menu toggle button with the lines */
.navbar-default .navbar-toggle
{
    border: 2px #FFFFFF solid !important; /* Set to white and then dim it with opacity so we can then make it brighter on hover */
    opacity: 0.8;
    filter: alpha(opacity=80); /* for IE8 and earlier */
    margin-right: 1px;
    margin-top: 0px;
}

@media (max-width: 479px) {
   .navbar-default .navbar-toggle {
        clear: both;
    }
}

.navbar-default .navbar-toggle:hover
{
    opacity: 1; /* Make it brighter on hover */
    filter: alpha(opacity=100); /* for IE8 and earlier */
    background-color: transparent;
}

.navbar-default .navbar-toggle:focus
{
    background-color: transparent;
}

.navbar-default .navbar-toggle .icon-bar
{
    
    background-color: #FFFFFF; /* Set to white and then dim it with opacity so we can then make it brighter on hover */
    opacity: 0.8;
    filter: alpha(opacity=80); /* for IE8 and earlier */
}

/*  Effectively turn off the animated menu pull down transition.
    Need to do this as the javascript isn't running til the transition finishes so you can see certain
    elements get hidden. */
.no-transition 
{
  -webkit-transition: height 0.001s;
  -moz-transition: height 0.001s;
  -ms-transition: height 0.001s;
  -o-transition: height 0.001s;
  transition: height 0.001s;
}

.navbar-nav
{
    margin: 0;
}

/*media all*/
.navbar-nav > li > .dropdown-menu 
{
    border-top-right-radius: 1px; /* Stop bootstrap turning off rounded corners at top of menu */
    border-top-left-radius: 1px;
}

/* The menu once clicked the top level */
.navbar-nav .dropdown-menu
{
    /* Moved into skin.css so can override it in other css files 
	(as cannot seem to override it if within MainMenu.css with it using !important) */
    border: 2px solid #E2992D;
    border-radius: 1px;
    z-index: 10001;
}

/* Every link below the top level must be a block to format correctly */
.navbar-nav .dropdown-menu a,
.navbar-nav .dropdown-menu a:link,
.navbar-nav .dropdown-menu a:visited
{
    display: block;
}

.navbar-nav .dropdown-menu a:hover,
.navbar-nav .dropdown-menu a:focus,
.navbar-nav .dropdown-menu a:active
{
    text-decoration: none;
}

/* Remove margin to make the mega menu balance */
.navbar-nav .dropdown-menu ul
{
    margin-left: 0px;
    margin-right: 0px;
}

/* Add any padding to the a tags so it is still clickable */
.navbar-nav .dropdown-menu ul li a
{
    text-decoration: none;
    padding: 0px 15px 5px 15px;
    color: #2F444F;
}

/*  Forces every 5th column to start a new line on the mega menu.  4x0+5=5. 4x1+5=9 etc.
    Issues with float not always
    going to the first column and sometimes can be middle or last depending on the height of the others */
.navbar-nav .column-stack4:nth-child(4n+5)
{
    clear: left;
}
/* Add top padding to all the other divs once we have started to stack. 1x0+5=5. 1x1+5=5 etc. */
.navbar-nav .column-stack4.padtop:nth-child(1n+5)
{
    padding-top: 20px;
}

@media (max-width:992px)
{
	.navbar-nav .column-stack4.padtop:nth-child(1n+5)
	{
		padding-top: 0px;
	}
}

.navbar-nav .column-stack4-float-fix:nth-child(4n+1)
{
    clear: left;
}

.navbar-nav .column-stack1
{
    clear: left;
}

/*Will need 3 versions of these with a width for 1,2 and 3 columns  say 250, 500 and 750
    Number based on the value on .list-unstyled ul .  Add 20 to whatever that is.*/
.navbar-nav .width-1col
{
    width: 230px;
}
.navbar-nav .width-2col
{   
    width: 460px;
}
.navbar-nav .width-3col
{   
    width: 690px;
}

/* Used to style the menus in mega menu.  Level 1 only shows for touch.  2 & 3 are just for sm and below.*/
.navbar-nav .menu-level1,
.navbar-nav .menu-level2,
.navbar-nav .menu-level3
{
    color: #2F444F;
	text-decoration:none;
    text-transform: none;
}


.navbar-nav .menu-level1 ul li
{
    font-weight: 700;
    font-size: 18px;
    /*padding-bottom: 15px; if no divider then reinstate */
}
.navbar-nav .menu-level1 .divider 
{
    margin: 0px -20px 8px -20px /* Set to the .yamm-content margin left/right values */
}

.navbar-nav .menu-level1 ul li .arrow
{
    font-family:Arial, Helvetica, sans-serif;
}

.navbar-nav .menu-level1 ul li .glyphicon 
{
    font-size: 12px;
    padding-left: 5px;
    vertical-align: top;
    margin-top: 5px;
}

.navbar-nav .menu-level1 ul li a:hover,
.navbar-nav .menu-level1 ul li a:focus,
.navbar-nav .menu-level1 ul li a:active
{
    color: #B67724;
} 

.navbar-nav .menu-level1:hover,
.navbar-nav .menu-level2:hover,
.navbar-nav .menu-level3:hover,
.navbar-nav .menu-level1:focus,
.navbar-nav .menu-level2:focus,
.navbar-nav .menu-level3:focus,
.navbar-nav .menu-level1:active,
.navbar-nav .menu-level2:active,
.navbar-nav .menu-level3:active
{
    color: #B67724;
}

.navbar-nav .menu-level2-heading
{
    color: inherit;
    font-size: 14px;
    font-weight: bold;
    text-transform: none;
    padding-bottom: 5px;
}

/* Devices larger than tablets */
@media (min-width:992px)
{   
    /* Enable bootstrap menu to use a hover rather than a click, but only on tablets and above.
    Ensure min-width value is in sync with what we have used on bootstrap */
    .navbar-nav .dropdown:hover .dropdown-menu
    {
        /* Uncomment if want HOVER back */
        /*display: block;*/
    }

}

/* MOBILES & Tablets */
/* .in.navbar-collapse means we are in the collapsed menu view for mobiles */

/* Top level menu items */
.in.navbar-collapse .navbar-nav > li
{
    border-bottom: 1px solid #57656F;
    /* box shadow is causing the extra line at the top for mobile.*/
    /*box-shadow:  inset 0px 1px 0px rgba(255,255,255,9.1);*/
}
.in.navbar-collapse .navbar-nav > li:last-of-type
{
    border-bottom: none;
}

.in.navbar-collapse .navbar-nav .dropdown-menu a:hover,
.in.navbar-collapse .navbar-nav .dropdown-menu a:focus,
.in.navbar-collapse .navbar-nav .dropdown-menu a:active
{
    color: #B67724;
}

/* Border on 2nd level items */
.in.navbar-collapse .navbar-nav .dropdown-menu li ul li
{
    border-top: 1px solid #DCEFF2;
}

/* Formatting for the sub menu items */
.in.navbar-collapse .navbar-nav .menu-level2 
{
    font-weight: normal;
    padding-left: 30px !important;
}

.in.navbar-collapse .navbar-nav .menu-level3
{
    padding-left: 50px !important;
}

/* The collapsible caret area */
.in.navbar-collapse .navbar-nav .collapse-toggle
{
    background-color: #717881;
    float: right;
    position: relative;
    height: 40px;
    top: -40px; /*To match the bootstrap style on .navbar-nav > li > a padding-top: 10px;  padding-bottom: 10px;  line-height: 20px;*/
    padding-left: 10px; /* Less padding for the caret area otherwise looks too big */
    padding-right: 10px;
    margin-right: 15px /* To line it up with the collapsed menu */
}

/* Second level menu */
.in.navbar-collapse .navbar-nav .dropdown-menu
{
    border-top: none;
    border-radius: 0; /* Turn off rounded corners bottom of menu */
    background-color: #FFFFFF; /* #efefef!important; /* overriding the boostrap transparent setting */
    padding: 0px; /* overriding the boostrap setting */
    border: none !important;    
}

.in.navbar-collapse .navbar-nav .dropdown-menu a,
.in.navbar-collapse .navbar-nav .dropdown-menu a:link,
.in.navbar-collapse .navbar-nav .dropdown-menu a:visited
{
    color: #2F444F;
}
.in.navbar-collapse .navbar-nav .dropdown-menu a:hover,
.in.navbar-collapse .navbar-nav .dropdown-menu a:focus,
.in.navbar-collapse .navbar-nav .dropdown-menu a:active
{
    color: #B67724;
}

/* Make the caret larger for mobiles as this will be a clickable to expand menu */
.in.navbar-collapse .navbar-nav .dropdown-toggle .caret
{
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #FFFFFF;
}

/* Each item in the menu */
.in.navbar-collapse .navbar-nav li a,
.in.navbar-collapse .navbar-nav li a:link,
.in.navbar-collapse .navbar-nav li a:visited,
.in.navbar-collapse .navbar-nav li a:hover,
.in.navbar-collapse .navbar-nav li a:focus,
.in.navbar-collapse .navbar-nav li a:active
{
    line-height: 20px;
    font-size: 14px;
    padding: 10px 20px;
}

/* Opened second level mobile caret background */
.in.navbar-collapse .navbar-nav .dropdown.open > a.dropdown-toggle.collapse-toggle
{
    background-color: #C3C5C9 !important;
    border-radius: 0;
    height: 39px;
}

/* Top level menu item styled if dropdown and open */
.in.navbar-collapse .navbar-nav .dropdown a.dropdown-toggle.collapse-toggle:hover
{
    background-color: #C3C5C9 !important;
}

/* Top level menu item styled if dropdown and open */
.in.navbar-collapse .navbar-nav .dropdown.open > a.dropdown-toggle,
.in.navbar-collapse .navbar-nav .dropdown.open > a.dropdown-toggle:link,
.in.navbar-collapse .navbar-nav .dropdown.open > a.dropdown-toggle:visited
{
    color: #2F444F;
    background-color: #FFFFFF;
    border-radius: 0;
}

.in.navbar-collapse .navbar-nav .dropdown.open > a.dropdown-toggle:hover
{
    color: #B67724;
}

/* Top level menu item styled if dropdown and open */
.in.navbar-collapse .navbar-nav .dropdown.open > a.dropdown-toggle.collapse-toggle:hover,
.in.navbar-collapse .navbar-nav .dropdown.open > a.dropdown-toggle.collapse-toggle:focus,
.in.navbar-collapse .navbar-nav .dropdown.open > a.dropdown-toggle.collapse-toggle:active
{
    background-color: #717881;
}

/* Opened second level mobile caret so reverse it */
.in.navbar-collapse .navbar-nav .dropdown.open > a.dropdown-toggle.collapse-toggle .caret
{
    background-color: transparent;
    border-bottom: 8px solid #FFFFFF;
    border-top: 0;
}

/* Turn off top padding to all the other divs once we have started to stack. 1x0+4=4. 1x1+4=5 etc. */
.in.navbar-collapse .navbar-nav .column-stack3:nth-child(1n+4)
{
    padding-top: 0px;
}

/* Turn off margin on collapsed menu to stop an overlapping scrollbar */
.in.navbar-collapse .navbar-nav .row
{
    margin: 0;
}

/* With margin off we need to turn the padding off so the lines fit the whole screen */
.in.navbar-collapse .navbar-nav .row > div
{
    padding-left: 0;
    padding-right: 0;
}