/* ================================================================ 
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/iPad4.html
Copyright (c) 2005-2011 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
/* this is a CSS answer to fix the hover/focus '~' and hover/focus '+' problem in safari and chrome */
html {-webkit-animation: safariSelectorFix infinite 1s;}
@-webkit-keyframes safariSelectorFix {
0% {zoom:1;} 
100% {zoom:1;}
}

.menu {height:25px; background:#8b9dc3; margin:0 0 200px 0; padding-left:20px;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-ms-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}

.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 #ddd;
-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 11px verdana, arial, sans-serif; color:#666; line-height:25px; text-decoration:none;padding:0 10px 0 5px;}
.menu > ul > li > a {float:left; text-transform:uppercase; color:#fff; font-weight:bold;}
.menu ul ul li a {line-height:20px;}

.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 li a.fly {background:transparent url(/graphics/arrow.gif) no-repeat right center;}
.menu li.left ul a.fly {background:transparent url(/graphics/arrowl.gif) no-repeat left center;}

.menu > ul li:hover > a {background-color:#3b5998;}
.menu ul ul li:hover > a,
.menu ul ul li:hover > a.fly {background-color:#dfe3ee; color:#000;}

.menu > ul > li.close {display:none; position:absolute; left:0; top:-25px; width:100%; height:25px; background:none;}
.menu > ul > li.close a {width:100%; padding:0; text-indent:15px; background:#036; color:#fff;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-ms-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}