html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{ margin:0px; padding:0px; border:0px; border-collapse:collapse; border-spacing:0px; } input,select{ margin:0; padding:0; }

#menu {width:1024px; height:50px; text-align:left; position:relative; z-index:100; margin-top:8px; margin-bottom:40px;}

#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left; border-radius:6px; border:2px white solid;}
#menu ul {display:inline-block;}

#menu li {margin:0; padding:0; list-style:none;}
#menu li {display:inline;}

#menu ul ul {position:absolute; left:0; top:50px; display:none; padding:10px 0; z-index:0;
}
#menu ul ul ul {left:100%; top:auto; margin-top:-45px;}
#menu ul li.left > ul {left:auto; right:0; top:50px;}
#menu ul li.left ul li > ul {left:auto; right:100%; top:auto; margin-top:-45px;}

#menu > ul {margin:0 auto;}
#menu > ul > li {float:left; display:block; position:relative;}

#menu ul {background:gray;}
#menu ul ul {background:gray;}
#menu ul ul ul {background:gray;}
#menu ul ul ul ul {background:gray;}

#menu ul,
#menu ul ul,
#menu ul ul ul,
#menu ul ul ul ul {
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
background-image: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
background-image: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
background-image: linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
}
#menu a {display:block; font:normal 14px "Ubuntu Condensed", arial, sans-serif; color:#fff; line-height:35px; text-decoration:none; border-radius:6px; padding:0 25px 0 25px;}
#menu > ul > li > a {float:left; line-height:50px; margin-right:2px;}
#menu li.left ul a {text-align:right; padding:0 10px 0 20px;}
#menu li:hover > a {color:#ff0;}

#menu span {display:block; font:normal 14px "Ubuntu Condensed", arial, sans-serif; color:#fff; line-height:35px; border-radius:6px; padding:0 25px 0 25px; outline:0; cursor:default;}
#menu > ul > li > span {float:left; line-height:50px; margin-right:2px;}
#menu li.left ul span {text-align:right; padding:0 10px 0 20px;}
#menu li:hover > span {color:#ff0;}

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


/* for IE7 to work with hovers instead of clicks */
#menu ul {*display:inline;}
#menu ul ul,
#menu ul ul ul,
#menu ul li.left > ul,
#menu ul li.left ul li > ul {*left:-9999px; *right:auto; *display:block;}
#menu ul li:hover {*direction:ltr;}
#menu ul li:hover > ul {*left:0;}
#menu ul ul li:hover > ul {*left:100%;}
#menu ul li.left:hover > ul {*left:auto; *right:0;}
#menu ul li.left ul li:hover > ul {*left:auto; *right:100%;}

</style>

<style media="only screen and (max-device-width:768px)" type="text/css">
/* for iPhone, iPod Touch and iPad */
#menu ul li b {display:none; width:100%; height:100%; position:absolute; left:0; top:0; z-index:100;}
#menu ul li:hover > ul {display:block;}
#menu ul li:hover > b {display:block;}
#menu ul li:hover b:focus ~ ul {display:none;}
#menu ul li:hover b:focus {display:none;}
#menu ul li:hover b:focus ~ span {color:#fff;}

#menu ul li:hover ~ li ul {display:none;}

/* ================================================================ 
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/cssplay-anywidth-ipad-click-v2.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.
=================================================================== */