/**** bootstrap nav default overrides */

/* the structure of a BS navbar and classes look like this, indention implies containment:

.ssdNavWrap (this is my nav wrapper for targetting MY navbars vs genericially, site wide BS navbars the rest if BS )
	div.navbar
		div.navbar-header
			div.brand
				div.ssdAgencyBrand
				div.ssdProjectBrand
			btn.navbar-toggle target-id="#navbar-collapse-1"  (hamburger icon, placement correct here? wrapped correctly?)
			
		div.collapse.navbar-collapse id="#navbar-collapse-1" 
			(container holding real nav, diff classes inserted to track state on this container based on breakpoints so you can define behavior and layout of nav based on state: collapse.IN = expanded, lack on the .in class means collapsed. Poor choice of naves.)
		(  div.navbar-nav   need this here?... I applied it to UL)
			ul.nav  (or place navbar-nav class here to?)
				ul.dropdown
					li (0-x)
					li.dropdown dropdown-submenu
						ul.dropdown-menu (0-x)
								li (0-x)
								li.dropdown dropdown-submenu
								ul.dropdown-menu (0-x)
									repeat...

*/


/*** BS OVERRIDES:  NOTE targetting in these.  These overrides are mainly for the BS navbar and related classes. Note: unless they are targetted/ qualified by outer wrapper class, they apply to the ENTIRE SITE. For navbar and related, this is fine since I use same site wide, top of page navbar for home and internal pages. */

.navbar {
	padding: 9px 0px; /* centers BS navbar in expanded ssdHeader vertically. */	
}

.navbar-brand { /* reset their brand element so it doesnt conflict with or add to spacing in  my brand wrap ssdBrandWrap classes */
    padding: 0 0; 
	margin: 0 0;
}


.navbar-nav { /* this is the actual NAV portion of navbar (which contains brand, collapse icon and nav) outermose ul.navbar-nav, IE the container for the entire BS nav, the uncollapsed desktop nav  (lacks the .in state but at breakpts set state?) and the expanded (collapse.in state) expanded mobile nav */
	float:right; /* floated >1000px, then left <1000 px so expanded mobile nav is left aligned def is left */
}

@media  (max-width: 999px) 
  {

  .navbar-nav {
	float:none; /* override default float right, let expanded mobile nav align left */  
  }
}
  
.navbar-collapse {
padding-right: 0 !important;	
padding-left: 0 !important;  /* on mobile expanded wrapper, remove 15px left/right marg that BS adds for its fluid container classes, my outcontainers have enough */
}


/* hamburger btn (or element) styling */
@media  (max-width: 999px) 
  {

  .navbar-toggle { /* this is the hamburger icon, reset all white space on toggle icon */
  	color:#ccc;
	padding:0 ;
	margin:8px 0 0 0;
	padding-top: 0;
	text-align:center;
  }

 .navbar-toggle:hover { /* reset all white space on toggle icon */
  	color:#fff;  
 }
}

/*** NAV BAR DROP DOWN OVERRIDES: these overrides are for drop downs that are wrapped in BS .nav class specifically so apply site wide. Note use of direct descendant vs offspring. Note: unless they are targetted/ qualified by another outer wrapper class, they apply to the ENTIRE SITE. For navbar and related, */

/* NOTE: 
	These are all qualified by the .nav outer container class which I apply to outermost UL of the nest ULs that make the nav.
	
	???PERHAPS THESE SHOULD BE QUALIFIED BY 
	.ssdNavWrap.navbar to target only MY navbars, 
	and then by: DESKTOP uncollapsed state class = .collapse > 999px and MOBILE uncollapsed state= ".collapse.in"
*/

.nav, .nav > li, .nav > li > a { /* reset all white space on 1st tier ul/li/a */
padding:0 ;
margin:0 ;
list-style:none;
}


ul.nav > li {
  padding:0 6px;
}


/* DROPDOWN POSTIONING: 
	AGAIN: these must be qualified by .nav or .navbar to ONLY apply to navbar dropdowns and not site wide.
	
	???ssmod: added .nav target, but are these generic?
*/	
.nav .dropdown-submenu {
    position:relative;
}

.nav .dropdown-submenu>.dropdown-menu {
   top:0;left:100%;
   margin-top:-6px;margin-left:-1px;
   -webkit-border-radius:0 3px 3px 3px;
   -moz-border-radius:0 3px 3px 3px;
   border-radius:0 3px 3px 3px;
 }
 

/* 2nd Tier dropdowns override the above */
.nav ul.dropdown-menu { /* align right edge not left */
  background-color:#000;
    
  position:absolute;
  top:50px;
  left:auto; /* setting left to auto resets to browser default, only way to override it. */
  right: -20px !important; /* adds a little overlap for less mouse errors moving down onto dropdown */
  min-width: 190px; 
  box-shadow:rgba(0,0,0,.5) 4px 8px 8px; 	
}


/* 2nd tier and below dropdowns @ssMod 3/17 to manage wideth on new  4 tier multimedia nav */
.nav ul.dropdown-menu > li > a  {
	white-space:normal;  /* override BS default of nowrap */
	padding: 5px 5px 5px 10px; /* override BS default, 10px left pad, and 3px right between link txt and expand arrow   */
}


/**** customizing nav style */

/* indent all nested UL' LIs after 2nd level (there is alreay a built in indent on 1st lvl drop */


/* Nav Menus Styling */

/* ALL LEVELS: link styling */
.nav li a {
	color:#ccc;
	background-color: rgba(0,0,0,.75); /* #111; */
	text-decoration:none !important;	/* need important to override since this rule is less specific that deeply nested dropdown children rules */
}

.nav li a:hover { /* turn off underlines for all navbar liks */
/*	color:#fff;
	background-color:#222 !important; */
}

/* override default BS white BG hover and mouseOUT (turned white on rollOUT) */
.nav .open>a, .nav .open>a:hover, .nav .open>a:focus {
 /*   background-color: transparent;
	border-color: transparent;  */
}

/* overrides for collapse mods */
@media (max-width: 999px) {
	
  .navbar-collapse .nav li a { 
	  background-color: transparent !important; /* #111; */
  }
  
  .navbar-collapse .nav li a:hover { /* turn off underlines for all navbar liks */
	  background-color:rgba(0,0,0,.25) !important; */
  }
	
}
 
/* left border accent */

.nav LI a { /* ALL LEVELS: left border accent spacer */ 
	border-left: 6px solid #1F2F3F; /* 1F2F3F is a shade of highlight #69c; royal=428BCA */
	/* color:#fff; text color controlled by a:hover or vertnav a:hover */	
}

/* ALL LEVELS: Hover, Open, Active States  */
.nav li.open>a, .nav li.open>a:focus,  .nav li.open>a:active, .nav li >a:active, .nav li>a:hover   {
	color:#fff;
 	border-left: 6px solid #69c ; /* was #69c; royal=428BCA 3cf*/
	background-color:#222 ;         
	}
 
/* set trans black BG for entire the EXPANDED STATE ( .in) on the collapse menu */
@media (max-width: 999px) {

  .navbar-collapse.collapse.in ul.dropdown-menu { /* was .navbar-collapse .nav ul.dropdown-menu, reset BG for dropdowns specifically for collapsed*/
  	background-color:transparent !important;;
  }
}
 
/* 1ST TIER: note direct descendant operators, override of the above for 1st tier - note ul.nav is the outermost container/ul */
ul.nav > li > a, 
ul.nav > li > a:hover,
ul.nav > li.open>a:active, 
ul.nav > li >a:active { /* turn off underlines for all navbar liks */
	background-color: transparent !important;
 	border-left: 6px solid transparent !important;
	background-color:transparent !important; 
}

/* 1st TIER CARETS: note down caret glyphs are used on 1st tier, whereas BS uses border built right arrows at lower tiers */
ul.nav > li a:hover > .caret, ul.nav > li.dropdown.open > a > .caret { /* over ride 1st tier caret hover color */
color:#fc0;
} 

/*** 2nd Tier and Below */

/* indent all submenu ULs */ 

/* collapse mode submenu spacing */
@media (max-width: 999px) {

.navbar-collapse .nav li.dropdown > ul.dropdown-menu {
	margin-left: 20px; 	
}

.navbar-nav .open .dropdown-menu > li > a 
{ /* tighten horo padding on collapsed version of SUBMENU Link blocks, widen vert pad for fat fingers on mobile */
    /* was padding: 5px 15px 5px 25px; */
    padding: 10px 8px 10px 8px;
}

}




/* ALL SUBMENUS: 
	RIGHT ARROW EXPAND indicators (could replace with carets for collapsed) 
	note: built from 3 sided borders should ONLY be on NON collapsed menu - use media queries */
.nav .dropdown-submenu > a:after {
  border-color: transparent transparent transparent #960;

  border-style: solid;
  border-width: 5px 0 5px 5px;
  content: " ";
  display: inline-block; /* was block for float right */
  /* float: right; */ 
  height: 0;  
  margin-left: 6px; /* @ssMod 3/17 was 10px */
  /* margin-right: -10px; */
  margin-top: 5px;
  width: 0;
}
/*.nav li.open>a, .nav li.open>a:focus,  .nav li.open>a:active, .nav li >a:active, .nav li>a:hover */
.dropdown-submenu > a:hover:after, .nav li.open>a:after {
    border-color: transparent transparent transparent #fc0;
}


/* top tier STYLING */

/* ICONS: top tier icon and font color */
.nav > li > a > .icon1stTier { /* adding these styles to glyphs for top navbar targets */
color:#cccccc; 
font-size:22px;	

display: block; /* ICON stacked over text */
}

/* ICONS */
.nav > li:hover > a > .icon1stTier { /* adding these styles to glyphs for top navbar targets */
color:#428BCA; 
}

.nav > li.active > a > .icon1stTier { /* adding these styles to glyphs for top navbar targets */
color:#428BCA;  
}

@media (max-width: 999px) {
  .nav > li > a > .icon1stTier { /* adding these styles to glyphs for top navbar targets */
  	font-size:28px;	
	display: inline-block !important; /* ICON INLINE over text */
  }
  
  .nav > li > a { /* adding these styles to glyphs for top navbar targets */
  	padding: 10px 0px !important; /* more vert height for fat fingers */
  }  
}