@charset "UTF-8";
/* CSS Document */
/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/iPad-Anywidth3.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

.menu {height:25px; width: 70%; margin: auto; padding-left:20px;

}

.menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; position:relative;}
.menu > ul {float:left;}

.menu ul ul {position:absolute; left:-9999px;}
.menu > ul > li {float:left; display:block; position:relative;}

.menu ul ul {background:#fff; padding:10px 0; border:1px solid grey;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
.menu > ul > li > ul {border-top:0;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-ms-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}

.menu a {display:block; font:normal 13px helvetica, arial, sans-serif; color:#000; line-height:25px; text-decoration:none;padding:0 15px 0 15px; text-align: center;}
.menu > ul > li > a {float:left; background: #E2FFF0; color:#000; font-weight:bold; border: 1px solid #bbb;}
.menu ul ul li a {line-height:20px; text-align: left;}

.menu ul li:hover > ul {left:0; top:25px;}
.menu ul ul li:hover > ul {left:100%; top:auto; margin:-31px 0 0 -10px;}
.menu li.left:hover > ul {left:auto; right:0; top:25px;}
.menu li.left ul li:hover > ul {left:auto; right:100%; top:auto; margin:-31px -10px 0 0;}

.menu li.left ul a {text-align:right; padding:0 15px 0 30px;}

.menu > ul li:hover > a {background-color:#efeff7;}
.menu ul ul li:hover > a,
.menu ul ul li:hover > a.fly {background-color:#f2f2f2; color:#000;}

.menu > ul > li.close {display:none; position:absolute; right:-10px; top:-22px; width:32px; height:32px; background:none;}

</style>

<style media="only screen and (max-device-width:768px)" type="text/css">
/* for iPhone, iPod Touch and iPad */
/* this is a CSS answer to fix the hover/focus '~' and hover/focus '+' problem in safari and chrome */
.menu:active,
.menu:hover {}
.menu ul ul {display:none;}
.menu ul li:hover > ul {display:block;}
.menu ul li.hasSub:hover ~ li.close {display:block;}