/*****************************************************************
 *                                                               *
 *  XCSS Menu Styles Belleville                                  *
 *  ----------------                                             *
 *                                                               *
 * This area will include details regarding the required and     *
 * optional styles, how they are used, and in most cases why.    *
 *                                                               *
 *                                                               *
 *                                                               *
 *****************************************************************/

/******************************************************** 
 * Top Horizontal Menu Styles                           * 
 ********************************************************/
.hnav .xcsstitle {
	display: none;
}
/* Container div, mainly used to cascade defaults so that multiple menus 
   can coexist on a single page without having to share a layout and design. */
.hnav {
	position: relative;
	z-index: 20;
	height: 50px;
	display: inline-block;
}
/* Setup appearance of the top level menu "button", including background images*/
.hnav .button {
	float: left;
	z-index: 20;
	padding-top: 0px;
	height: 50px;
	margin-left: 2px;
	margin-right: 2px;
}
/** html .hnav #button1 {width:165px;}
* html .hnav #button2 {width:125px;}
* html .hnav #button3 {width:120px;}
* html .hnav #button4 {width:210px;}
* html .hnav #button5 {width:205px;}
* html .hnav #button6 {width:60px;}
* html .hnav #button7 {width:150px;}*/

.hnav .button:hover {
    color: #0750a4!important;
    box-shadow: inset 0 -2px 0 #0750a4;   
}
/* Setup the currently active button to look different. Optional, but nice */
.hnav .activebutton { 
	z-index:100;
	float: left;
}
.hnav .activebutton a {
	color: #0750a4!important;
    box-shadow: inset 0 -2px 0 #0750a4;    
}
.hnav .activebutton ul {
}

.button .parent .xcssCategoryItemsUL { top:0px; padding:5px 0; }

/* Setup the currently active button to look different. Optional, but nice */
/* Setup appearance of links */
.hnav a {
	height: 34px;
	display: block;
	color: #000!important;
	text-decoration: none;
	font-weight: normal;
	font-size: 18px;
	padding-right: 15px;
	padding-left: 15px;
	vertical-align: middle;
	padding-top: 16px;
	padding-bottom: -1px;
}
.hnav a:hover {
	color: #0750a4!important;
}
/* This is the arrow shown in the top level, where there is a dropdown level of menu */
.hnav a.navarrow {
}
/* This is the arrow shown in the dropdown where there is a third level of menu */
.hnav a.subarrow {
	/*background-image: url(../images/flyout_indicator.png);*/
	background-repeat: no-repeat;
	background-position: right center;
}

/* dropdown font colour, when you are on the active section sk */
.hnav .parent ul a {
	color: #ffffff;
   box-shadow: inset 0 -2px 0 #ffffff;
}

.hnav .parent ul a:hover {
    color: #0750a4;
    box-shadow: inset 0 -2px 0 #0750a4;
}

/* Hide the dot on unordered lists */
.hnav ul, .hnav li {
	padding: 0;
	margin: 0;
	list-style: none;
}
.hnav li:hover {
    border-bottom: 0px solid #0750a4;
}

/* Could be different for each of the container navs... hnav, vnav, etc. */
/* Main flyout tier*/
.hnav .xcssCategoryItemsDiv {
	/*width: 250px;*/
	/*width: 100%;*/
	position: absolute;
	/*left: -3000px;*/
	top: auto; /* puts dropdowns directly under top nav */
	text-align: left; /* needed because IE misapplies text centering to boxes */
	/*background: url(../images/flyout_indicator.png/bgfix.gif);*/
	z-index: 200;
	display: none;
	left: 0px;
	top: 0px;
	right: 0px;
	color: #000 !important;
}
/*this is the main container where background color appears on the flyout */
.hnav .xcssCategoryItemsUL {
	width: 100%;
	padding: 30px 0px 20px 0px;
	z-index: 200;
	position: absolute;
	margin-top: 50px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	color: #ffffff !important;
	background-color: #fff;
    box-shadow: 0px 4px 6px 0px rgba(0,0,0,.15);
	visibility: hidden;
}
/* when hovering a section item, make the main tier appear */
.hnav .parent:hover .xcssCategoryItemsDiv {
	display: block;
}
.hnav .parent:hover .xcssCategoryItemsUL {
	visibility: visible;
}
/* Category list items on the flyout, the main structure of flyout tier */
.hnav .xcssCategoryItemLI {
	position: relative;
	vertical-align: top;
	width: 100%;
	text-align: left;
	border: none;
	display: inline-block;
	float: left;
	padding-bottom: 10px;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
	color: #ffffff !important;
}
/* Category item <a> */
.hnav .xcssCategoryItemLI a {
	font-family: 'Lato', sans-serif;
	color: #000 !important;
	font-size: 16px;
	line-height: 20px;
	font-weight: 400;
	text-transform: none;
	text-decoration: none;
	vertical-align: middle;
	height: 100%;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-right: 20px;
	padding-left: 12px;
}
.hnav .xcssCategoryItemLI a:hover {
	text-decoration: none;	
	background-color: rgba(255, 255, 255, 0.05);
    color: #0750a4 !important;
}
/* page items */
/* ul tag under the category link */
.hnav .xcssPageItemsUL {
	width: 100% !important;
	left: 0px;
	top: 0px; /* puts dropdowns directly under top nav */
	text-align: left; /* needed because IE misapplies text centering to boxes */
	z-index: 200;
	padding: 0px !important;
	margin: 0px !important;
	position: relative !important;
	z-index: 200;
}
/* page item <li> */
.hnav .xcssPageItemLI {
	padding: 0px !important;
	width: 100% !important;
	display: block !important;
}
/* page item links on the flyout */
.hnav .xcssPageItemLI a {
	color: #ffffff;
	text-decoration: none;
	font-size: 14px;
	font-weight: 400;
	vertical-align: middle;
	height: 100%;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-right: 0px;
	padding-left: 25px;
	font-family: 'Lato', sans-serif;
	line-height: 20px;
	background: url(../images/menu_page_indicator.png) no-repeat left center;
	z-index: 1200;
	text-transform: none;
}
/*************************************************************** 
 * Mobile Regular Menu (Chauntel Popout Menu)                  * 
 * ------------------------------------------                  *
 *                                                             *
 * The main consideration for this menu is simplicity, with no *
 * z-indexes on menu elements. Instead, we simply display      *
 * the dropdowns when the associated "button" hover occurs,    *
 * thus pushing the rest of the menu down instead of having    *
 * menu content overlap.                                       *
 *                                                             *
 ***************************************************************/

.mnav .xcsstitle { 
    display: none; 
}
.mnav { 
    border:0px; 
    padding-top: 20px;
}
.mnav a:link, .mnav a:visited {
    display:block; 
    color:#000000; 
    font-size:18px; 
    text-decoration:none; 
    border:0px; 
    line-height:28px; 
}
.mnav a:hover { 
    color: #0750a4; 
}
.mnav .button { 
    float:left; 
    color: #000000!important; 
    box-shadow: inset 0 -2px 0 #0750a4;
    width:99%; 
    display:block; 
    font-size: 18px;
    text-decoration: none;
    border: 0px;
    line-height: 28px;
    padding: 10px 0px;
}
.mnav .button:hover { 
    box-shadow:inset 0 -2px 0 #0750a4; 
}
.mnav .activebutton { 
    box-shadow: inset 0 -2px 0 #0750a4; 
}
.mnav .activebutton a:link, .mnav .activebutton a:visited { 
    color: #0750a4 !important; 
}

.mnav .dropdown  { 
    display:none; 
    padding-left: 20px;
}
.mnav .parent:hover .dropdown  { 
    display:block; 
    padding:1px 1px 1px 20px; 
}

.mnav .dropdown .xcssCategoryItemLI {
    padding: 10px 0px;
}
.mnav .dropdown ul li {
    position: relative;
    display: block;
    text-align: left;
    background-color: #ffffff;
}
.mnav .parent {
    background-color: #ffffff;
    position: relative;
}

/******************************************************** 
 * Vertical Side-Bar Menu Styles (most of them anyway)  * 
 ********************************************************/

/* Container div, mainly used to cascade defaults so that multiple menus 
   can coexist on a single /* Container div, mainly used to cascade defaults so that multiple menus 
   can coexist on a single page without having to share a layout and design. */

.vnav .xcsstitle {
    font-family: 'Lora', serif;
    font-size: 21px;
	background-color: #4e4943;
    color: #fff;
    padding: 8px;
    text-transform: uppercase;
    display: none;
}
.vnav {
	position: relative;
	border: 0px;
	border-width: 0px 0;
	text-align: left;
	font-family: 'Lato', sans-serif;
	z-index: 10;
	width: 100%;
}
.vnav a {
	display: block;
	color: #000!important;
	font-weight: normal;
	font-size: 18px;
	font-family: 'Lato', sans-serif;
	text-decoration: none;
	padding: 8px;
	border: 0px; /* makes the dividers between the top nav links */
	line-height: 28px;
}
.vnav a:hover {
	color: #0750a4!important;
	font-weight: normal;
    
}
/* borders the bottoms of the dropdown and flyout links */
.vnav ul ul a {
	color: #fff;
	font-weight: normal;
}
.vnav .button {
	float: left;
	z-index: 0;
	color: #000;
	background-color: #e5dbcf;
	margin-bottom: 0px;
	padding-right: 0px;
	padding-left: 0px;
	width: 100%;
     border-bottom: 2px solid #fff;
}
.vnav .button:hover {
    box-shadow: inset 0 -2px 0 #0750a4;
}
/* Setup the currently active button to look different. Optional, but nice */
.vnav .activebutton a{
	font-weight: normal;
	color: #0750a4 !important;
}
.vnav .activebutton {
	float: left;
	font-weight: normal;
    box-shadow: inset 0 -2px 0 #0750a4;
}
.vnav .button .dropdown {
	display: block;
}
.vnav .activebutton .dropdown {
	display: block;
	color: #fff !important;
}
/* borders the bottoms of the dropdown and flyout links */
.vnav .dropdown li {
	color: #fff !important;
}
.vnav .dropdown a {
	display: block;
	color: #000 !important;
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	line-height: 20px;
	font-weight: normal;
	text-align: left;
	padding-bottom: 7px;
	padding-top: 7px;
	padding-left: 40px;
	padding-right: 10px;
	border-top: 1px solid #fff;
	max-width: 280px;
	background-image: url(../../../images/menu_page_indicator.png);
	background-repeat: no-repeat;
	background-position: left center;
}
.vnav .dropdown a:hover {
	display: block;
	color: #0750a4 !important;    
}
/* This is the arrow shown in the top level, where there is a fly-out level of menu */
.vnav a.navarrow {
	background: url(../../../images/dropdown_indicator.png) no-repeat right center;
}
/* This is the arrow shown in the fly-out where there is a third level of menu */
.vnav a.subarrow {
	background-image: url(../../../images/dropdown_indicator.png);
	background-repeat: no-repeat;
	background-position: right center;
}
/* Hide the dot on unordered lists */
.vnav ul, .vnav li {
	padding: 0px;
	margin: 0px;
	list-style: none;
}
.vnav .parent div.dropdown {
	color: #fff !important;
}
/* hover rule for 1st flyouts */

/* hover rule for 2nd flyouts */
.vnav .dropdown li:hover div {
	left: 0px; /* this value controls the amount of flyout "overlap" */
	top: 0px; /* this value controls the amount of flyout vertical offset */
}
.vnav .parent {
	position: relative;
}
/* Could be different for each of the container navs... hnav, vnav, etc. */
.vnav .dropdown {
	position: relative;
	left: 0px;
	top: 0px; /* puts dropdowns directly under top nav */
	text-align: left; /* needed because IE misapplies text centering to boxes */
	background: url(/images/bgfix.gif);
	width: 100%;
}
/* The margins on the UL's replace the div paddings to create "sticky hovering"
zones,  and the margins should "fill" the divs, making the IE BG fix unnecessary.
Unfortunately the BG fix is still needed, although this method does eliminate
possible box model problems */
.vnav .dropdown ul {
	position: relative;
	margin: 0 0px 0px 0px; /* creates "sticky hovering" zones for dropdowns */
}
/* rules for divs inside dropdown */
.vnav .dropdown div {
	position: relative;
	left: 0px;
	top: auto;
	background: url(/images/bgfix.gif);
	text-align: left; /* needed because IE misapplies text centering to boxes */
	display: block;
	color: #fff;
}
/* Background colour for flyouts, and "sticky hovering" zones for flyouts */
.vnav .dropdown div ul {
	margin: 0px 0px 0px 0;
}
.vnav .dropdown div ul a {
	color: #fff;
	background-image: none;
}
/* Foreground colour for  flyouts */
.vnav .dropdown li {
	position: relative;
	vertical-align: bottom;
	color: #fff;
}
/* IE5/win bugfix */
.vnav .dropdown li:hover {
}
/* hover color effect on dropdown links */
.vnav .dropdown div li:hover {
}
/* hover color effect on flyout links */

/* Setup defaults for the second level items (we need one per, so they can be styled differently) */
.vnav .drop1 ul {
}
.vnav .drop2 ul {
}
.vnav .drop3 ul {
}
.vnav .drop4 ul {
}
.vnav .drop5 ul {
}
.vnav .drop6 ul {
}
.vnav .drop7 ul {
}
.vnav .drop8 ul {
}
.vnav .drop9 ul {
}
.vnav .drop10 ul {
}
.vnav .drop11 ul {
}
.vnav .drop12 ul {
}
.vnav .drop13 ul {
}
.vnav .drop14 ul {
}
.vnav .drop15 ul {
}
.vnav .drop16 ul {
}
.vnav .drop17 ul {
}
.vnav .drop18 ul {
}
.vnav .drop19 ul {
}
.vnav .drop20 ul {
}
.vnav .drop21 ul {
}
.vnav .drop22 ul {
}
.vnav .drop23 ul {
}
.vnav .drop24 ul {
}
.vnav .drop25 ul {
}
/* Setup styles for the third level items... with a cascade to keep it simple */
.vnav .drop4 ul div ul {
}
/******************************************************** 
 * Bottom Horizontal Menu Styles                        * 
 ********************************************************/

/* Container div, mainly used to cascade defaults so that multiple menus 
   can coexist on a single page without having to share a layout and design. */
.bnav {
	position: relative;
	background: #ddeeff;
	border: 1px solid #888888;
	border-width: 1px 0;
	width: 100%;
	z-index: 20;
}
/* Setup appearance of the top level menu "button", including background images*/
.bnav .button {
	float: left;
	z-index: 0;
	border: 1px solid #888888;
	background: #90cccc;
	background-image: url(../images/flyout_indicator.png/buttonbackbottom.gif);
}
/* Setup the currently active button to look different. Optional, but nice */
.bnav .activebutton {
	float: left;
	z-index: 0;
	border: 1px solid #888888;
	background-image: url(../images/flyout_indicator.png/buttonback.gif);
}
.bnav a {
	display: block;
	color: #880000;
	font-weight: bold;
	font-size: 10px;
	font-family: Verdana, Arial;
	text-decoration: none;
	border-right: 1px solid #888;  /* makes the dividers between the top nav links */
	padding-top: 6px;
	padding-right: 3px;
	padding-bottom: 10px;
	padding-left: 3px;
}
.bnav a:hover {
	color: #ffffff;
}
/* Hide the dot on unordered lists */
.bnav ul, .bnav li {
	padding: 0;
	margin: 0;
	list-style: none;
}
/* You'll notice that .bnav is missing a number of cascaded defaults... 
   ithis s because (in this example) the bottom nav only shows the top 
   level of items. In other words, there are no fly-outs or dropdowns to 
   style. The SiteApex code will generate all of the html for the other 
   menu items but they will not display if you do not style them to.    */



/******************************************************** 
 * Common/Shared Dropdown Menu Styles                   * 
 ********************************************************/

/* this parent div does not provide "sticky hovering", but instead fixes a 
strange bug in Op7. When an element serves as a hovered popup "parent" element, 
that element must not also be floated or all heck breaks loose in Opera 7. 
To prevent this, we have floated the top level list items, while nesting 
hoverable parent divs inside that are then hovered to generate the dropdowns. */

/******************************************************** 
 * Misc Styles and IE Fixes                             * 
 ********************************************************/

.floatfix {
	margin-right: -3px;
}
/* this fixes the IE 3px bug that is common in this type of float arrangement */ 

/* This is to hide the following from IE/Mac. \*/
* html .button .dropdown li {
	height: 1%;
	margin-left: -16px;
	mar\gin-left: 0;
}
/* */

/* The first rule above fixes "bullet region" problems in IE5.x/win, 
and the 2nd is to make all links fully clickable. */    

/*\*/ /*/
.hnav .dropdown, .hnav .dropdown div {width: 189px;}
.hnav .button .dropdown ul {margin: 0px;}
.hnav .dropdown, .hnav .dropdown div {position: static;}
.hnav .dropdown ul {border: 0;}

.vnav .dropdown, .vnav .dropdown div {width: 189px; top: -30px}
.vnav .button .dropdown ul {margin: 0px;}
.vnav .dropdown, .vnav .dropdown div {position: static;}
.vnav .dropdown ul {border: 0;}
/* */
/* div container control for expanding into the next tier for a certain Section/Category. */


.mp-menu ul {
    list-style: none;
}
.mp-menu {
    text-align: left;
}
.mp-pusher, .mp-level {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.2s;
}
.mp-level {
    top: 0;
    left: 0;
    width: 100%;
}


.hnav a.navarrow  { z-index:1 !important; }
.dropdown  { z-index:10 !important;}
.xcssCategoryItemsUL { z-index:10 !important; top:-5px; }

@media  (max-width:768px) {
.menu-trigger {
    display: none;
}
/* This is the label class applied to divs within the main div container */
.menu-trigger-label {
}
/* Hides the xcsstitle div generated by xcss */
.xcsstitle { display:none; }
/* This applies to the 1st section level display */
.hnav .button {
    width: 100%;
}
.hnav .button {
    box-shadow: inset 0 -2px 0 #0750a4;
}
.mp-arrow {
	position: absolute;
	display: inline-block;
	width:24px;
    height: 24px;
	top: 3px;
	bottom: 0px;
	right: 0px;
	cursor: pointer;
}
.mp-arrow:hover {
}

/* div element which makes up the arrow by setting a border top/right then rotating 45degrees with css */
.mp-arrow-inner {
    display: inline-block;
    font-style: normal;
    position: absolute;
    background-image: url("../images/keyboard_arrow_down-24px.svg");
    width: 24px;
    height: 24px;
}
.mp-arrow-inner:hover {
    background-image: url("../images/keyboard_arrow_up-24px.svg");
}    
}