/* ================================================================ 
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; width:1138px; height:60px; margin:0;}

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

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

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

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

#menu ul {background:transparent;}

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

#menu a {display:block;text-transform:uppercase; line-height:1.0em; font:bold 14px 'Open Sans', sans-serif; color:#000000; letter-spacing:0.2em; text-decoration:none; padding:23px 30px; margin:0px;}

#menu > ul > li > a {float:left; line-height:1.0em; margin-right:0px;}
#menu li.left ul a {text-align:left; padding:0 0px;}
#menu li:hover > a {color:#ffffff; background:#363636; }
#menu ul ul li:hover > a {color:#ffffff; background:#363636; }

#menu .active {color:#ffffff; background:#363636;}

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

}