/* ================================================================ 
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/iPad-Anywidth3.html
Copyright (c) 2005-2011 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

/* set size of buttons and colour*/
.menu {
	height:55px;
	padding-left:30px;
	padding-top: 15px;
	background-color: #80989A;
	z-index: 3;
	position: absolute;
	width: 390px;
}
/* leave these*/
.menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; position:relative;}
.menu > ul {float:left;}

.menu ul ul {position:absolute; left:-9999px;}

/* set size of buttons and colour*/
.menu > ul > li {
	float:left;
	display:block;
	width: auto;
	text-align: centre;
	position: relative;
	
}

/* set size of menu buttons and colour */
.menu ul ul {
	padding:0px 0;
	background-color: #80989A;
	text-align: center;
}
.menu > ul > li > ul {border-top:0;
}

/* set font size of second level menu buttons and colour takes effect for second level buttons as top ones overwritten below*/
.menu a {
	display: block;
	width: auto;
	padding: 10px;
	margin-right: 5px;
	text-align: left;
	text-decoration: none;
	font-size: 1.1em;
}
/* set font size of first level menu buttons and colour*/
.menu > ul > li > a {
	float:left;
	text-decoration: none;
	text-align: center;
	width: auto;
	padding-top: 10px;
}
/* second level menu */
.menu ul ul li a {line-height:20px;}

/* hover effects when over top level menu shows what second level menu looks like before hovering on that make top size of buttons */
.menu ul li:hover > ul {
	left:0;
	top:35px;
	text-align: center;
	width: 100px;
	background-color: #80989A;
}
 
/* hover effects second level menu */
.menu ul ul li:hover > ul {
	left:100%;
	top:auto;
	color:#85441B;
	margin-top: -31px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: -10px;
}

.menu li.left:hover > ul {left:auto; right:0; top:25px;}
.menu li.left ul li:hover > ul {left:auto; right:100%; top:auto; margin:-31px -10px 0 0;}

.menu li.left ul a {text-align:right; padding:0 15px 0 30px;}


/* hover effects first level menu */
.menu > ul li:hover > a {
	color: #FFF;
	width: 163px;
	height: 35px;
	text-align: centre;
	padding-top: 10px;
}
/* hover effects second level menu */
.menu ul ul li:hover > a,
.menu ul ul li:hover > a.fly {background-color:#f2f2f2; color:#85441B;}

/* ipad effect */
.menu > ul > li.close {display:none; position:absolute; right:-30px; top:-22px; width:32px; height:32px; background:none;}


#menu ul {
	margin-left: 0px;
	padding-left: 0px;
	list-style-type: none;
	overflow: hidden;
	zoom: 1;
	}
#menu ul li{
	float:left;
}