/*
DEBUG_MEGA_MENU

*/
div.dummy{display:none;}
/*
in style.css I have "overflow:hidden" as a "base"
declaration for ul and ol so NEED TO TURN BACK
ON HERE!!
*/
div#main_menu_wrap ul,div#main_menu_wrap ol{overflow:visible;}

div#bs_header_left_region{margin:0 0 0 10px; width:260px; float:left;}
div#bs_header_center_region {display:none;}
div#bs_header_center_region p{font-size:18px;margin:5px 0 10px 0;text-align:center;border:1px solid blue;}
div#bs_header_right_region{display:none;}
div#mobile_header_icons{width:195px;margin:0 auto;margin-top:10px;}

/* ========== CALL_TO_CONTACT ================== */
div#bs_call_to_contact_region{padding:20px 0;}
/* ========== MOBILE_HEADER_REGION ============
===============================================
===============================================
*/

/*
div#bs_main_nav_mobile_email_drop_wrap{padding-bottom:5px;}
*/

div#main_menu_wrap{
/* jQuery button to drop menu */
display:none;
clear:both;
/* START_MOBILE_STYLING */
width:90%;
margin:0 auto;
margin-bottom:10px;


}

div#main_menu_wrap ul a{
color:#FEDC32; /* light yellow */
font-weight:bold;
font-size:100%;
text-align:center;
text-decoration:none;
display:block;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
padding: 5px 0;
background-color:#000000;
background: transparent url('../style/images/main_menu_back.png') repeat-x top left;
margin:0;
margin-top:15px;
/*border: 2px solid #19B7EC;*/
/* This is needed because when "active" there is a border. prevents "jumping" */
/*border: 2px solid transparent;*/
border: 1px solid black;
}

div#main_menu_wrap ul > li a{font-size:120%;}
div#main_menu_wrap.eng ul > li a{font-size:135%;}	

div#main_menu_wrap .mobile_sub_drop_button a{
margin:0;
}

div#main_menu_wrap ul a:hover,
div#main_menu_wrap ul a:active
{
background:none;
background-color:#ffd2aa;
color:#25b501;
}

div#main_menu_wrap li a.active_trail
{
background:none;
background-color:#ffd2aa;
color:#25b501;
}

div#main_menu_wrap ul{
padding:0;margin:0;
width: 100%;
}

div#main_menu_wrap ul li{
padding:0;margin:0;
list-style:none outside none;
position:static;
}

div#main_menu_wrap ul li:last-child{
	margin-bottom:0;
}

/* ===== START_2ND_TIER ============== */
div#main_menu_wrap ul ul {display:none;}
/*
DEBUG_MEGA_MENU START
Turn this on and:
left:0px;
search DEBUG_MEGA_MENU
When you need to debug 2 tier menu
div#main_menu_wrap ul ul {display:block;}
*/
/* DEBUG_MEGA_MENU END */



img.desktop_img_down_arrow{display:none;}

/* ===== START_3RD_TIER ============== */
div#main_menu_wrap ul ul li{display:block;}

/* ========== START_MOBILE_DROP_BUTTON =============== */

div#bs_main_nav_mobile_drop{
float:right;
width:52px;
border:1px solid black;
margin-right:10px;
}
div#bs_main_nav_mobile_drop a{
/*
Image will expand %100 in span... so, higher
pixel images are best
*/
width: 100%;
height: 0;
/*
padding-bottom
Height of Sprite Image / Width of sprite image (NOTE total width of full sprite but of 1 image)
*/
padding-bottom: 77%;
background-image: url("../style/images/mobile_menu_show_hide.png");
background-position: 0 0;
/*
"background-size"
200% for 2 level sprite, 300% for 3 level
exactly DOUBLE (or triple if a 3 level sprite) the "width"
*/
background-size: 300%;
display:block;
}

div#bs_main_nav_mobile_drop a:hover {
background-position: 50% 0; /* Use ONLY percents here */
}
/* "bs_menu_open" class added by javaScript in: bs_main_nav_02.js */
div#bs_main_nav_mobile_drop a.bs_menu_open{
background-position: 100% 0; /* Use ONLY percents here */
}

/* ========== END_MOBILE_DROP_BUTTON =============== */

/* ========== START_MOBILE_MENU_DROP_SUB_MENU_ITEM ========== */
div.bs_menu_a_wrapper{
position:relative;
}
div#main_menu_wrap .mobile_sub_drop_button a {
position:absolute;
top:0;
right:0;
display:block;
width:40px;
box-shadow:none;
/*border:2px solid transparent;*/
border-left:2px solid white;
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
border-top-left-radius: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
border-bottom-left-radius: 0px;
}
/* ========== END_MOBILE_MENU_DROP_SUB_MENU_ITEM ========== */

/* ========== START_MOBILE_MENU_DROP_SUB_MENU_ITEM ========== */
/*
div.bs_menu_a_wrapper{
position:relative;
}
div#main_menu_wrap  .mobile_sub_drop_button a {
position:absolute;
top:1px;
right:11px;
display:block;
width:40px;
height:27px;
box-shadow:none;
font-size: 120%;
font-weight: bold;
text-align: center;
border: none;
border-left:1px solid #62931B;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
*/
/* ========== END_MOBILE_MENU_DROP_SUB_MENU_ITEM ========== */


div.bs_menu_a_level_1_wrapper{
width:100%;margin:0 auto;
}
div.bs_menu_a_level_2_wrapper{
width:80%;margin:0 auto;
}

/*
div#main_menu_wrap  ul ul,
div#main_menu_wrap  ul ul ul
{
margin-top:5px;
margin-left:15px;
}
*/

div#main_menu_wrap  ul li.active_trail > ul,
div#main_menu_wrap  ul ul a.active_trail ul
{display:block;}


div#main_menu_wrap ul ul  a,
div#main_menu_wrap ul ul a:link
{
padding:0;
font-weight:bold;
display:block;
overflow:hidden;
width:80%;
margin:10px auto 0 auto;
font-size:120%;
padding:3px 0 5px 0;

/*
Background Images don't work well with
Responsive Mobile sites because they have
a fixed width. Better to use CSS 3
background:transparent url('mobile_menu_back_2nd_tier.png') no-repeat top left;
*/
}

/*
div#main_menu_wrap ul ul  a:hover{
color:#FFFFFF;
}
*/

div#main_menu_wrap ul ul ul  a,
div#main_menu_wrap ul ul ul a:link
{
padding:8px 0px;
font-size:90%;
font-weight:bold;
display:block;
overflow:hidden;
width:80%;
margin:0 auto;
}

div#main_menu_wrap ul ul  a:hover{
background-position:0px -35px;
}
div#main_menu_wrap ul ul  a:active {
background-position:0px -70px;
}

/**
 * =============================================================
 * =============================================================
 * =============================================================
 * ============== START_MEDIA_QUERRIES =========================
 up to 727 = mobile Devices   xs
 @media (min-width: 728px) {  sm Tablet vertical
 @media (min-width: 984px) { md Tablet Horizontal and Old Desktop
 @media (min-width: 1326px) { lg New Desktop
 */
 
/* ========== START_753 ================================== */
@media only screen and (min-width: 753px){ /* 767 with "Firesizer" - 767x800 */
div#bs_header_center_region{display:block;float:left;margin-left:20px;}
div#bs_header_center_region p{font-size:20px;margin:19px 0 10px 0;text-align:left;}
div#bs_header_right_region{display:block;float:right;}
div#bs_main_nav_mobile_drop{display:none;}
div#mobile_header_icons{display:none;}

/*
div#bs_main_nav_mobile_drop{display:none;}
div#bs_main_nav_mobile_email_drop_wrap{display:none;}
*/

/*
This is needed here because if in mobile
and "close" then go back to full screen
the menu will still be hidden
*/
div#main_menu_wrap{
display:block !important;
float:left;
width:100%;
clear:none;
/*background:transparent url('../css/images/back02_transparent.png') repeat top left;*/
/*background:transparent url('../style/images/main_menu_back.png') repeat-x top left;*/
/* REMOVE_MOBILE_STYLING */
margin:0;
/**/
border-top:1px solid black;
border-bottom:1px solid black;
margin-top:5px;

	-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow:    0px 3px 3px 0px rgba(0, 0, 0, 0.3);
	box-shadow:         0px 3px 3px 0px rgba(0, 0, 0, 0.3);
}

div#main_menu_wrap ul a{
/*border: 1px solid transparent;*/
/* remove mobile styling */
margin:0;
/*background:none;*/
box-shadow: none;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
border:none;
}

div#main_menu_wrap li a.active_trail
{
/* REMOVE_MOBILE_STYLING 
border: 1px solid transparent;
*/
}


div#main_menu_wrap ul a.bs_mobile_has_sub{
/* remove mobile styling */
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}

div#main_menu_wrap .mobile_sub_drop_button{display:none;}
div#main_menu_wrap .menuparent img{border:none;}

/*
The +/- image is added with javascript in bs_main_nav.js
*/


div#main_menu_wrap ul.menu > li{
position:relative;
z-index:2;
float:left;
white-space: nowrap;
/*
Can either devide total links into 100% or set individually
If have different sized links, best to set individually to get best spacing.
*/
width:25%;
/*
margin:0 5px;
border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
border: 1px solid transparent;
*/
}

div#main_menu_wrap > ul > li{width:25%;}

div#main_menu_wrap ul > li a{font-size:100%;}
div#main_menu_wrap.eng ul > li a{font-size:110%;}

div#main_menu_wrap ul li.menuparent:hover{
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-right-radius: 0px;
border-bottom-right-radius: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
border-bottom-left-radius: 0px;
}

div#main_menu_wrap.jpn > ul > li#menu_item_1{width:15%;}
div#main_menu_wrap.jpn > ul > li#menu_item_2{width:30%;}
div#main_menu_wrap.jpn > ul > li#menu_item_3{width:30%;}
div#main_menu_wrap.jpn > ul > li#menu_item_4{width:25%;}

div#main_menu_wrap.eng > ul > li#menu_item_1{width:15%;}
div#main_menu_wrap.eng > ul > li#menu_item_2{width:35%;}
div#main_menu_wrap.eng > ul > li#menu_item_3{width:25%;}
div#main_menu_wrap.eng > ul > li#menu_item_4{width:25%;}


div#main_menu_wrap ul ul {
position:absolute;
z-index:3;
/*Puts sub-menu exactly at bottom of main menu item*/
top:100%;
/*bottom:0px;*/
/*
left:-2000px;

DEBUG_MEGA_MENU START
Set left to 0 > left:0 when you need to debug
2nd tier menu.  Also need:
div#main_menu_wrap ul ul {display:block;}
(above) on as well. Search DEBUG_MEGA_MENU

left:0px;
left:-.5px;
left:50%;
*/
/* DEBUG_MEGA_MENU END */
display:none;
border:1px solid black;
border-top:none;
/*width:300px;  width of longest item + a little */
-webkit-box-shadow: 4px 4px 3px 0px rgba(16, 16, 19, 0.8);
-moz-box-shadow:    4px 4px 3px 0px rgba(16, 16, 19, 0.8);
box-shadow:         4px 4px 3px 0px rgba(16, 16, 19, 0.8);
/*background:transparent url('../css/images/back02_transparent.png') repeat top left;*/
/*background:transparent url('../css/images/main_menu_back.jpg') no-repeat top left;*/
background-color:#ffd2aa;
width:220px;
margin-left:-110px;
}

/* because the last items shadow falls to the right, this causes
the browser to make a scroll bar so shorten the last item

div#main_menu_wrap ul ul:last-child {
width:96%;
}
*/


/*
Show the Sub and Sub-sub on hover or focus (for aria)
:focus-within - see: https://css-tricks.com/solved-with-css-dropdown-menus/
is used to be able to tab to items within the dropdown menu.
*/
div#main_menu_wrap ul li:hover ul,
div#main_menu_wrap ul li:focus-within > ul,
div#main_menu_wrap ul ul.focused
{display:block !important;left:-.5px;left:50%;}
/*div#main_menu_wrap ul li#bs_main_menu_li_5:hover ul{display:block !important;right:0px;}*/
div#main_menu_wrap ul:last-child li:hover ul,
div#main_menu_wrap ul:last-child li:focus-within > ul,
div#main_menu_wrap ul:last-child ul.focused
{display:block !important;right:0px;}

img.desktop_img_down_arrow{display:inline;}

div#main_menu_wrap ul ul li{
/* Reset 2nd Level back to normal li */
position:relative;
/*display:inline;*/
float:none;
text-align:left;
width:auto;
line-height:normal;
border:none;
margin-bottom:0;
}

div#main_menu_wrap ul ul a,
div#main_menu_wrap ul ul a:link
{

width:100%;
margin:0;
font-size:120%;
height:auto;
display:block;
/*
color:#FFFFFF;
color:#FFFFFF;
if no "Width" is set,
will be same as Main li width
*/
padding:10px;
padding:10px 0 10px 0;
padding-left:10px;
text-align:left;
/* border:1px solid rgba(76,94,94,0.85); */
border-top:none;
/*background-clip: padding-box;*/
/*color:black;*/
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
background:none;
color:#A53400;
}

div#main_menu_wrap ul ul li:first-child a
{padding-top:10px;}

div#main_menu_wrap ul ul a:hover,
div#main_menu_wrap ul ul li.active_trail a
{
background:none;
color:#5F8E07;
}


div#main_menu_wrap ul ul > li:hover > ul
{left:220px;left:99.6%;}

div#main_menu_wrap .bs_mega_menu_standard ul ul ul{
top:0px;
left:210px;
left:-2000px;
position:absolute;
z-index:4;
background:white;
border:1px solid grey;
border-left:none;
}



}

@media only screen and (min-width: 984px){ /* 1023 with "Firesizer" - 1023x800*/
	
  div#bs_header_left_region{width:350px;margin:0 0 0 20px;}
  div#bs_header_right_region{margin:5px 20px 0 0;}
	div#bs_header_center_region{}
	div#bs_header_center_region p{margin:23px 0 10px 0;}
	
	div#main_menu_wrap{width:100%;}
	div#main_menu_wrap ul > li a{font-size:110%;}
	div#main_menu_wrap.eng ul > li a{font-size:135%;}	
	
  div#main_menu_wrap ul ul {width:320px;margin-left:-160px;}	
	
}

@media only screen and (min-width: 1326px){ /* 1023 with "Firesizer" - 1365x800*/
	div#main_menu_wrap{width:100%;}
	div#main_menu_wrap ul > li a{font-size:135%;}
}