/*
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;}
div#bs_header_right_region{display:none;}
div#mobile_header_icons{width:256px;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;
width:90%;
margin:0 auto;
margin-bottom:10px;
/*background: transparent url('../style/images/main_menu_back_default.png') repeat-x top left;*/
}

div#main_menu_wrap ul a{
transition: none;
color:#FEDC32;
font-weight:bold;
text-align:center;
text-decoration:none;
display:block;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
padding: 5px 0;
margin:0;
margin-top:15px;
line-height: 1.2;
}

div#main_menu_wrap ul > li a{
font-size:3.2rem;
background:#E0DFDA url('../style/images/main_menu_back.jpg') no-repeat top left;
}
div#main_menu_wrap.eng ul > li a{font-size:2.6rem;}
div#main_menu_wrap.jpn ul > li a{font-size:2.6rem;}

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

div#main_menu_wrap li a:hover, div#main_menu_wrap li a:active{
background-color:#ffd2aa;
color:#5F8E07;
}

div#main_menu_wrap a.active_trail{
background:none;
background-color:#ffd2aa;
color:#5F8E07;
}

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;}

img.desktop_img_down_arrow{display:none;}

div#main_menu_wrap ul ul{display:none;}
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{
transition: none;
/*
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 ========== */

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 li.active_trail > ul,
div#main_menu_wrap  ul ul a.active_trail ul
{display:block;}


div#main_menu_wrap ul ul a{
padding:0;
font-weight:bold;
display:block;
overflow:hidden;
width:80%;
margin:10px auto 0 auto;	
padding:3px 0 5px 0;
}
div#main_menu_wrap.eng ul ul a{font-size:2.2rem;}
div#main_menu_wrap.jpn ul ul a{font-size:2.2rem;}

div#main_menu_wrap ul ul ul a{
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;}

/*
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;
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{
margin:0;
box-shadow: none;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
border:none;
}


div#main_menu_wrap ul a.bs_mobile_has_sub{
-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;}

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%;
}

div#main_menu_wrap.eng ul > li a{font-size:2.2rem;}
div#main_menu_wrap.jpn ul > li a{font-size:2.2rem;}
div#main_menu_wrap.eng ul ul a{font-size:1.8rem;}
div#main_menu_wrap.jpn ul ul a{font-size:1.8rem;}

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 > ul > li{width:25%;}

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:15%;}
div#main_menu_wrap.eng > ul > li#menu_item_4{width:35%;}


div#main_menu_wrap ul ul {
position:absolute;
z-index:3;
top:100%;
left:-2000px;
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/main_menu_back.jpg') no-repeat top left;*/
background-color:#ffd2aa;
width:220px;
margin-left:-110px;
}

/* ========== 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

div#main_menu_wrap ul ul {
left:0px;
left:50%;
display:block;
}
*/
/* ========== DEBUG_MEGA_MENU END ========== */

/*
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: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{
position:relative;
float:none;
text-align:left;
width:auto;
line-height:normal;
border:none;
margin-bottom:0;
}

div#main_menu_wrap ul ul a{
width:100%;
margin:0;
font-size:120%;
height:auto;
display:block;
padding:10px;
padding:10px 0 10px 0;
padding-left:10px;
text-align:left;
border-top:none;
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-color:#003361;
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){
	
  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.eng ul > li a{font-size:2.6rem;}
  div#main_menu_wrap.jpn ul > li a{font-size:2.6rem;}
  div#main_menu_wrap.eng ul ul a{font-size:2.2rem;}
  div#main_menu_wrap.jpn ul ul a{font-size:2.2rem;}
	
	div#main_menu_wrap{width:100%;}
  div#main_menu_wrap ul ul {width:320px;margin-left:-160px;}	
	
}

@media only screen and (min-width: 1326px){ /* 1023 with "Firesizer" - 1365x800*/

}