/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/cssplay-ipad-flyout-menu-fixed.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 {position:relative; margin-left:10px; z-index:100;}

#menu ul {padding:0; background-position: 0% 0%;
	margin: 0;
	list-style: none;
	white-space:nowrap; text-align:left; padding:0;
	border: 1px solid #888;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	box-shadow: 0 0 5px rgba(0,0,0,0.4);
	background-image: linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
	background-color: #000;
	background-repeat: repeat;
	background-attachment: scroll;
}

#menu li {display:inline;}
#menu ul ul {position:absolute; left:100%; margin-top:-31px; margin-left:-8px; display:none;}
#menu ul#toplevel {position:relative; float:left;}

#menu a {display:block; font: 13px/30px Oswald, verdana,arial,sans-serif; color:#fff; text-decoration:none; padding:0 15px;} 


#menu li:hover > a {color:#222; text-shadow:1px 1px 2px rgba(255, 255, 255, 0.6);
background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
background-image:-ms-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
background-image:linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
-moz-border-radius:0;
-webkit-border-radius:0;
border-radius:0;
}
#menu ul li:first-child > a {
-moz-border-radius:9px 9px 0 0;
-webkit-border-radius:9px 9px 0 0;
border-radius:9px 9px 0 0;
}
#menu ul li:last-child > a {
-moz-border-radius:0 0 9px 9px;
-webkit-border-radius:0 0 9px 9px;
border-radius:0 0 9px 9px;
}

#menu.red li:hover > a {background-color:#d00;}
#menu.orange li:hover > a {background-color:#fa0;}
#menu.yellow li:hover > a {background-color:#da2;}
#menu.green li:hover > a {background-color:#494;}
#menu.blue li:hover > a {background-color:#0bf;}
#menu.indigo li:hover > a {background-color:#95d;}
#menu.violet li:hover > a {background-color:#e8e;}
#menu.grey li:hover > a {background-color:#999;}

#menu ul li:hover > ul {display:block;}

#menu img {position:fixed; width:0; height:0; left:0; top:0; z-index:-1;}
#menu ul:hover + img {width:100%; height:100%;}