.menu {height:32px; position:absolute; z-index:100; left:175px; right:auto; top:37px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
-ms-touch-action: none;
}
.menu.menu-right {left:auto; right:175px;}

.menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;}
.menu ul {display:inline-block;} 
.menu ul {*display:inline;}

.menu li {}

.menu li {display:inline-block; display:inline;}
.menu ul ul {position:absolute; right:-99999px; border:1px solid #dfdfdf; border-top:0; margin-top:-200000px; background:#b0aeaf;}
.menu ul ul ul {border-top:1px solid #dfdfdf;}

.menu > ul > li > ul {width:175px; visibility:visible; right:auto; left:0; top:33px; margin-top:0; opacity:1; border:0;}

#about .menu > ul > li > ul {background:#b4975c;}
#contact .menu > ul > li > ul {background:#aa81a1;}
#exhibitions .menu > ul > li > ul {background:#d0bd7a;}
#gallery .menu > ul > li > ul {background:#95b0b9;}
#links .menu > ul > li > ul {background:#a0bb5a;}
#products .menu > ul > li > ul {background:#b66666;}
#recent .menu > ul > li > ul {background:#dd9E46;}
#tips .menu > ul > li > ul {background:#6da5bc;}
#travelogues .menu > ul > li > ul {background:#8db089;}
#diaries .menu > ul > li > ul {background:#cb86a8;}

.menu > ul > li.left > ul {visibility:visible; left:auto; right:0; top:33px;}

.menu > ul {margin:0 auto;}
.menu > ul > li {float:left; display:block; position:relative; height:33px;}

.menu a {display:block; font:normal 14px "Lato", arial, sans-serif; color:#000; line-height:40px; text-decoration:none; padding:0 10px 0 20px; text-align:right;}
.menu span {display:block; font:normal 14px "Lato", arial, sans-serif; color:#000; line-height:40px; text-decoration:none; padding:0 10px 0 20px; cursor:default; text-align:right;}

.menu > ul > li > span {color:#fff; display:none;}
.menu > ul > li.left > span {color:#fff;}

.menu ul ul > li > span {background-image:url(/nav_bar/left-arrow.png); background-repeat: no-repeat; background-position: left center;}
.menu ul li.left ul > li > span {background-image:url(/nav_bar/right-arrow.png); background-repeat: no-repeat; background-position:right center;}
.menu > ul > li > ul > li > span,
.menu > ul > li > ul > li > a {padding:0 10px;}

.menu > ul > li > span {float:left; text-transform:uppercase; line-height:33px;}

.menu > ul > li:hover > ul {visibility:visible; left:0; top:33px; margin-top:0; opacity:1;}

.menu ul ul li:hover > ul {visibility:visible; right:100%; top:auto; margin-top:-41px;}
.menu ul ul li:hover > ul.up1 {margin-top:-81px;}
.menu ul ul li:hover > ul.up2 {margin-top:-121px;}
.menu ul ul li:hover > ul.up3 {margin-top:-161px;}
.menu ul ul li:hover > ul.up4 {margin-top:-201px;}
.menu ul ul li:hover > ul.up5 {margin-top:-241px;}
.menu ul ul li:hover > ul.up6 {margin-top:-281px;}
.menu ul ul li:hover > ul.up8 {margin-top:-361px;}
.menu ul ul li:hover > ul.up9 {margin-top:-401px;}


.menu > ul > li.left:hover > ul {visibility:visible; left:auto; right:0; top:33px;}
.menu li.left ul li:hover > ul {visibility:visible; right:auto; left:100%; top:auto; margin-top:-41px;}

.menu li.left ul a {text-align:left; padding:0 10px 0 10px;}
.menu li.left span {text-align:left; padding:0 10px 0 10px;}

.menu li:hover > a,
.menu li.left ul li:hover > a {color:#fff; background-color:#999; text-decoration:underline;}
.menu li:hover > span,
.menu li.left:hover > span {color:#fff; background-color:#999;}
.menu > ul > li:hover > span,
.menu > ul > li.left:hover > span {color:#95b0b9; background-color:transparent;}

.menu li.nbon > span,
.menu li.nbon > a {color:#fff; background-color:#3e3e3e;}

@media only screen and (max-width:1200px) {
.menu {left:0; top:67px;}
.menu.menu-right {right:0;}
.menu > ul > li > ul {visibility:hidden; right:-9999px; margin-top:-200000px;}
.menu > ul > li.left > ul {visibility:hidden; right:-9999px; left:auto;}
.menu > ul > li > span {display:block;}
.menu > ul > li:hover > ul {right:0; left:auto;}
.menu > ul > li.left:hover > ul {left:0; right:auto;}
}
@media only screen and (max-width:750px) {
.menu > ul > li > ul {min-height:auto;}
}

/* mobile menu */
.mobile-menu {height:32px; position:absolute; z-index:100; left:1px; top:67px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
-ms-touch-action: none;
}
.mobile-menu.menu-right {left:auto; right:1px;}

.mobile-menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;}
.mobile-menu ul {display:inline-block;} 
.mobile-menu ul {*display:inline;}

.mobile-menu li {margin:0; padding:0; list-style:none;}

.mobile-menu li {display:inline-block; display:inline;}
.mobile-menu ul ul {position:absolute; right:0; top:33px; display:none; width:200px;}
.mobile-menu ul li.left ul {left:0; right:auto;}

.mobile-menu > ul > li > ul {border:1px solid #dfdfdf;}
#about .mobile-menu > ul > li > ul {background:#b4975c;}
#contact .mobile-menu > ul > li > ul {background:#aa81a1;}
#exhibitions .mobile-menu > ul > li > ul {background:#d0bd7a;}
#gallery .mobile-menu > ul > li > ul {background:#95b0b9;}
#links .mobile-menu > ul > li > ul {background:#a0bb5a;}
#products .mobile-menu > ul > li > ul {background:#b66666;}
#recent .mobile-menu > ul > li > ul {background:#dd9E46;}
#tips .mobile-menu > ul > li > ul {background:#6da5bc;}
#travelogues .mobile-menu > ul > li > ul {background:#8db089;}
#diaries .mobile-menu > ul > li > ul {background:#cb86a8;}

.mobile-menu ul ul ul {position:static; display:none; background:#a09e9f; width:180px; margin-right:20px;}
.mobile-menu ul ul ul ul {position:static; display:none; background:#908e8f; width:160px; margin-right:20px;}
.mobile-menu ul li.left ul ul {margin-right:0; margin-left:20px;}

.mobile-menu > ul {margin:0 auto;}
.mobile-menu > ul > li {float:left; display:block; position:relative;}

.mobile-menu > ul > li > span {color:#fff;}
.mobile-menu > ul > li.left > span {color:#fff;}

.mobile-menu ul ul > li > span {background-image:url(/nav_bar/down-arrow.png); background-repeat: no-repeat; background-position: left 10px center; text-align:right;}
.mobile-menu ul li.left ul > li > span {background-image:url(/nav_bar/down-arrow.png); background-repeat: no-repeat; background-position:right 10px center; text-align:left;}

.mobile-menu ul ul {background:#b0aeaf;}

.mobile-menu a {display:block; font:normal 14px "Lato", arial, sans-serif; color:#000; line-height:40px; text-decoration:underline; padding:0 10px 0 30px;}
.mobile-menu span {display:block; font:normal 14px "Lato", arial, sans-serif; color:#000; line-height:40px; padding:0 10px 0 30px; cursor:default;}
.mobile-menu ul ul span.select {color:#fff;background-image:url(/nav_bar/up-arrow.png);}
.mobile-menu ul li.left ul span.select {color:#fff;background-image:url(/nav_bar/up-arrow.png);}

.mobile-menu > ul > li > a {float:left; text-transform:uppercase;}

.mobile-menu li.left ul a {text-align:right; padding:0 30px 0 10px;}
.mobile-menu li.left span {text-align:right; padding:0 30px 0 10px;}

.mobile-menu ul ul > li > a {text-align:right;}
.mobile-menu ul li.left ul > li > a {text-align:left;}

.mobile-menu li.nbon > span,
.mobile-menu li.nbon > a {color:#fff; background-color:#3e3e3e;}