/* ================================================================ 
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:transparent;width:980px; height:56px; margin:25px auto 0 auto;}

/* url('../images/line-nav.png') no-repeat bottom center*/

#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:56px; display:none; padding:0px 0px; z-index:0;}
#menu ul ul ul {left:100%; top:auto; margin-top:-56px;}
#menu ul li.left > ul {left:auto; right:0; top:56px; }
#menu ul li.left ul li > ul {left:auto; right:100%; top:auto; margin-top:-56px;}

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

#menu ul {background:transparent;}
#menu ul ul {background:#ffffff; 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;  font: 1.3em 'Crimson Text', serif; font-weight:600; text-transform:uppercase; color:#512f7e; line-height:56px; text-decoration:none; padding:0 20px;}
/*#menu .start {border-left:1px solid #ffffff;}*/

#menu ul ul li a {display:block; font: 1.3em 'Crimson Text', serif; color:#512f7e; line-height:1.6em; text-decoration:none; padding:4px 20px; width:180px; }

#menu > ul > li > a {float:left; line-height:56px; margin-right:0px;}
#menu li.left ul a {text-align:right; padding:0 20px;}
#menu li:hover > a {color:#aed081; border-bottom:3px solid #512f7e;}

#menu span {display:block; font:1.3em 'Crimson Text', serif; font-weight:600; text-transform:uppercase; color:#512f7e;  line-height:56px;padding:0 20px; outline:0; cursor:default;}
#menu > ul > li > span {float:left; line-height:56px; margin-right:0px;}
#menu li.left ul span {text-align:right; padding:0 20px;}
#menu li:hover > span {color:#aed081;border-bottom:3px solid #512f7e;}

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

#menu #active {color:#aed081;border-bottom:3px solid #512f7e;}

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

}