@charset "utf-8";
/* CSS Document */


/* inPageNav element styles */
.ssdInPageNavWrap { /* locating this at right edge of pageHeader */
 padding-left:12px;  display:inline-block; vertical-align:middle;

}


.ssdInPageNavWrap:before {
 	content:"";   /* the actual content charater inserted before this element */
	
	font-family: Oswald, helvetica, verdana, sans-serif;
	color:#666666;  /* #428BCA= royal blue,  mid lite purple= #7777bb; */
	font-weight:400;
	font-size:22px;
	letter-spacing: -1px;
	line-height:100%;
	
	display:inline-block; /* so I can vert align to middle all sub parts */
	vertical-align:middle;	
}
.ssdInPageNavWrap.btn-group {
	padding-left:30px;	/* pad out from breadcrumb end */
}
.ssdInPageNavWrap .btn-primary {  /* Button text style */
	background-color:#1468B0; /* @ss for 508 -- override BS btn padding in this specific context */	
 	padding:8px; /* override BS btn padding in this context and match NON button subtitle to it */	
	color:#eee;  /* #fc0= brightOrange E2DA82=dullYellowOrange #428BCA= royal blue, hoverBlue=#3071a9 mid lite purple= #7777bb; */		
	border:none;	

    font-family: Arial, helvetica, sans-serif;
    font-weight: bold;
	text-transform:Capitalize;
    line-height: 100%;
    font-size: 14px;
}


.ssdInPageNavWrap UL, .ssdInPageNavWrap UL LI { /* text IN the DROPDOWN as opposed to the BTN title text */
	/*background-color:#7777bb; /* override BS btn padding in this context */	
 	padding:4px; 
	color:#fff;  /* #fc0= brightOrange E2DA82=dullYellowOrange #428BCA= royal blue, hoverBlue=#3071a9 mid lite purple= #7777bb; */		
	border:none;	

    font-family: Arial, helvetica, sans-serif;
    font-weight: normal;
	text-transform:Capitalize;
    line-height: 100%;
    font-size: 14px;
}

.ssdInPageNavWrap .btn-primary:hover {
	background-color:#428BCA; /* override BS btn padding in this context */	
	color:#fff;  /* #fc0= brightOrange E2DA82=dullYellowOrange #428BCA= royal blue,  mid lite purple= #7777bb; */		
}


.ssdInPageNavWrap .btn .caret  {
}

.ssdInPageNavWrap .btn:hover .caret  {
	color:#fc0;  /* #fc0= brightOrange E2DA82=dullYellowOrange #428BCA= royal blue,  mid lite purple= #7777bb; */
}


/* top level nav icon - hamburger */
.ssdInPageNavWrap A > span.glyphicon, .ssdInPageNavWrap A > span.glyphicon {
	    display:inline-block;
		position: relative;
		top: 8px;
		height:36px;
		color: #666;  /* on white 999999 */
		font-size:24px;
}

.ssdInPageNavWrap A:hover> span.glyphicon, .ssdInPageNavWrap A:hover > span.glyphicon {
	    color: #fc0;    /* on white: 00F */
}


.ssdInPageNavWrap  .dropdown-menu { /* note this class only applies to the inPagenav dropdown nav pill btn */
	width:650px;  /* !!! fixed width due to absolute positioning, will need a responsive method in future */
	padding:12px 0px 12px 20px;
	/* border:5px #bbb solid; */	
	background-color:#eee;
	
	/* positioning just for THIS inPageNav btn dropdown */
	left:-150px !important;
	
}

.ssdInPageNavWrap  .leftColumn {
	float:left; width:47%; margin-left:2%; /* note this shifted left and other shifted right leaves center gutter of 2% */
}

.ssdInPageNavWrap  .rightColumn {
	float:right; width:47%; margin-right:2%;
}

/* go to single column for small screens. Note using 768 (ipad in portrait) due to products 2 column menu is cut off <768 */
@media (max-width:768px) { 
  .ssdRespOn .ssdInPageNavWrap .leftColumn,
  .ssdRespOn .ssdInPageNavWrap .rightColumn {
	float:none; 
	width:100%;
}

.ssdInPageNavWrap  .dropdown-menu { /* note this class only applies to the inPagenav dropdown nav pill btn */
	width:300px;  /* !!! fixed width due to absolute positioning, will need a responsive method in future */
	/* positioning just for THIS inPageNav btn dropdown */
	left:-20px !important;
	max-height:660px;  /* this keeps menu from being cut off on short products pages. It creates a scroll-y condition */
	overflow-y:scroll; /* if content overflow off short screeens support scroll rather than truncate */
	overflow-x:hidden;
}

} 


.ssdInPageNavWrap  UL {
	/* list-style-type:square !important;
	list-style:inside;
	list-style-position:inside; */
	list-style-type:none;;
	list-style:none;
	color: #B1C8DC; /* since there's no non link text, this will only affect bullets */
	padding: 0px 0 4px 0px;
	margin:0 10px; /* this indents sub menus */
}
.ssdInPageNavWrap  LI {
	/* list-style-type:square !important;
	list-style:inside;
	list-style-position:inside; */
	list-style-type:none;;
	list-style:none;
	color: #B1C8DC; /* since there's no non link text, this will only affect bullets */
	padding: 0px 0 0px 15px;
	margin: 0;

}

.ssdInPageNavWrap  LI:hover {
	background-color:#ddd; /* was B1C8DC #8D87AB; */
}

.ssdInPageNavWrap  LI A {
	color:#039; /* since there's no non link text, this will only affect bullets */
	text-transform:none;
	padding:0;
	line-height:100%;
}

.ssdInPageNavWrap LI A:hover {
	background-color:#ddd; /* override BS hover of white-ish. */
}

.ssdInPageNavWrap  LI.sectionHeading {

	list-style-image:none; /* dont show bullet on sectionHeading */
	
	width:100%;
	background-color:#B1C8DC; 
	color:#000;  
	padding: 5px 0 5px 12px;
	margin: 16px 0 4px 0;
	
    font-family: Oswald, helvetica, verdana, sans-serif;
    font-weight: 400;
	text-transform:uppercase;
    line-height: 100%;
    font-size: 14px;
	
	/* color: #555; 
	text-indent:-8px;
	font-weight:bold;
	padding-top:8px; */
}


/* BREADCRUMB DropDowns *******************************************/

.breadCrumbWrap {
	display:inline-block; /* all elements in contentHeader and in breadcrumb are inline */	
}

.breadCrumbWrap .btn {
 	padding:6px 6px; /* override BS btn padding in this context and match NON button subtitle to it */			
}

.breadCrumbWrap .btn:hover {
 	background-color:transparent; /* override BS btn padding in this context */	
	color:#fff;  /* #fc0= brightOrange E2DA82=dullYellowOrange #428BCA= royal blue,  mid lite purple= #7777bb; */		
}

.breadCrumbWrap .btn .caret  {
	color:#428BCA;  /* E2DA82=dullYellowOrange #428BCA= royal blue,  mid lite purple= #7777bb; */	
	vertical-align:bottom;
	letter-spacing:4px;		
}

.breadCrumbWrap .btn:hover .caret  {
	color:#fc0;  /* #fc0= brightOrange E2DA82=dullYellowOrange #428BCA= royal blue,  mid lite purple= #7777bb; */
			
}

.breadCrumbWrap .collapsed {
display:none;
}

.ssdBreadcrumbSeparator:before {
	
	content:":";   /* the actual content charater of the separator */
	
	font-family: Oswald, helvetica, verdana, sans-serif;
	color:#666666;  /* #428BCA= royal blue,  mid lite purple= #7777bb; */
	font-weight:400;
	font-size:22px;
	letter-spacing: -1px;
	line-height:100%;
	
	display:inline-block; /* so I can vert align to middle all sub parts */
	vertical-align:middle;
		
}


/* drop down bread crumbs: breadCrumbWrap is the wrapper to target btn-primary  and restyle in this contenxt, btn-primary is bootstrap 
see example html in baseline-aerosol-detection.html*/
.breadCrumbWrap .btn-primary  {
	
	font-family: Oswald, helvetica, verdana, sans-serif;
	color:#cccccc;
	font-weight:300;
	font-size:14px;
	line-height:100%;
	letter-spacing: .03em;
	
    background-color:transparent; /* override btn-group BG for breadcrumb drop downs */
	border: none; /* override btn-group BG for breadcrumb drop downs */
	
	display:inline-block; /* so I can vert align to middle all sub parts */
	vertical-align:middle;		
}

.breadCrumbWrap  LI {
	list-style-type:none;
	list-style:none;
	color: #bbbbbb; /* since there's no non link text, this will only affect bullets */
	padding: 0;

}

.breadCrumbWrap  LI A {
	color:#ccc; /* since there's no non link text, this will only affect bullets */
}

.breadCrumbWrap  LI.sectionHeading {
	
	display:none;
	/* no section heading in breadCrumbWrap 
	
	width:100%;
	background-color:#45456F;
	color:#fff;
	padding: 5px 0 5px 12px;
	margin: 16px 0 4px 0;
	
    font-family: Oswald, helvetica, verdana, sans-serif;
    font-weight: 400;
	text-transform:uppercase;
    line-height: 100%;
    font-size: 14px;
		
	list-style:none;
	*/
	
	/* color: #555; 
	text-indent:-8px;
	font-weight:bold;
	padding-top:8px; */
}



/* breadcrumbDropMenus **************************************/


/* bootstrap overrides */

.breadCrumbWrap  .dropdown-menu { /* note this class only applies to the dropdown nav in upper right */
	width:auto;  /* !!! fixed width due to absolute positioning, will need a responsive method in future */
	min-width:250px;
	padding:4px;  /* 12px 0px 12px 20px; */
	background-color:#000;
	
}

.breadCrumbWrap ul.dropdown-menu {/* get menus to drop left aligned with title */
    left: 0px !important; 
	width:auto;
	/* float:none; */
}
.breadCrumbWrap .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
     background-color:#111;
	 color:#FFF;
	 text-transform:none;
}

.breadCrumbWrap .open>.dropdown-toggle.btn-primary {  /* turn of BG color shift when open */
    color:#7FB3DF;   /*  section icon color to dark on text: #428BCA */
    background-color:transparent;
    border-color: transparent;
}

    

	
/* native styling */
.breadCrumbWrap UL {
	margin:0;
	margin-top:6px; /* create small vert break for each new UL group */
	padding:0;
	list-style:none;
	width:100%;
}

.breadCrumbWrap UL LI {
	text-transform:capitalize;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	background-color:#333 !important; 
	padding:0px;
	margin-bottom:1px;
	border-left: 6px solid transparent; /* same as hover width! */
/*	set fonts on A tags in uls
	font-family: Oswald,arial,sans_serif !important;
	letter-spacing: .05em;
	font-weight:normal;
*/	
}

.breadCrumbWrap UL LI A, .breadCrumbWrap UL LI A:hover {
	text-decoration:none;
}

	
.breadCrumbWrap UL .sectionhead { /* sectionhead is an override of a residual style in old nav.css */

	display:none; /* hide any embedded section headings in this context */

}

.breadCrumbWrap UL LI:hover { 
	border-left: 6px solid #fc0 ; /* was #69c; royal=428BCA */
	background-color:#111;
	/* color:#fff; text color controlled by a:hover or vertnav a:hover */	
}

.breadCrumbWrap UL LI.selected { /* note selected is set via JS */
	background-color:#222 !important; 
	border-left: 6px solid #428BCA; /* was #69c; */
	 
}