/* ================================================================ 
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.
=================================================================== */

#menu {text-align:center; position:relative; z-index:100;background:#2e2b22 url(images/nav.jpg) no-repeat top center;width:957px;height:49px;margin:0 auto;border-top:2px solid #ffffff; border-bottom:2px solid #ffffff;}

#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left; }
#menu ul {display:inline-block;}

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

/*#menu li li {margin:0; padding:0; list-style:none;background:none !important; line-height:49px; width:250px;}*/

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

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

#menu ul {background:transparent;}
#menu ul ul {background:#2e2b22; zoom: 1; filter: alpha(opacity=90); opacity: 0.9;}

#menu ul,
#menu ul ul,
#menu ul ul ul,
#menu ul ul ul ul {
}

#menu a {display:block; text-transform:uppercase; font:bold 18px calibri, Arial, sans-serif; color:#ffffff; line-height:49px; text-decoration:none; padding:0 40px;}

#menu ul ul li a {display:block; text-transform:uppercase; font:bold 16px calibri, Arial, sans-serif; color:#ffffff; line-height:1.6em; text-decoration:none; padding:4px 20px; width:180px;}

#menu > ul > li > a {float:left; line-height:49px; margin-right:2px;}
#menu li.left ul a {text-align:right; padding:0 40px;}
#menu li:hover > a {color:#ce7a42;}

#menu span {display:block; text-transform:uppercase; font:bold 18px calibri, Arial, sans-serif; color:#ffffff;  line-height:49px;padding:0 40px; outline:0; cursor:default;}
#menu > ul > li > span {float:left; line-height:49px; margin-right:2px;}
#menu li.left ul span {text-align:right; padding:0 40px;}
#menu li:hover > span {color:#ce7a42;}

#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%;}


/*@media settings */

@media screen and (max-width: 768px) {

/* 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;}

}