/* The wrapper div should be wrapped around the page content and be at least 100% page height for the iPad, iPhone and iPod Touch */
html, body {padding:0; margin:0;}
.wrapper {display:block; padding:10px;}
header {display:block; width:80%; margin:0 auto;}
article {display:block; width:80%; margin:0 auto;}
/********
h1 {margin:0; padding:0; font:normal 30px/50px TeXGyreAdventorBold, arial, sans-serif; color:#333;}
h2 {margin:0; padding:0; font:normal 25px/40px TeXGyreAdventorBold, arial, sans-serif; color:#333;}
h3 {margin:0; padding:0; font:normal 20px/30px TeXGyreAdventorBold, arial, sans-serif; color:#333;}
h4 {margin:0; padding:0; font:normal 15px/20px TeXGyreAdventorBold, arial, sans-serif; color:#333;}
p {margin:0; padding:0; font:normal 13px/18px TeXGyreAdventorRegular, arial, sans-serif; color:#333;}
p b {margin:0; padding:0; font:normal 14px/18px TeXGyreAdventorBold, arial, sans-serif; color:#333;}
article ul.lists {clear:left;}
article ul.lists li {margin:0; padding:0; font:normal 13px/18px TeXGyreAdventorRegular, arial, sans-serif; color:#666;}
article ul.lists li b {margin:0; padding:0; font:normal 14px/18px TeXGyreAdventorBold, arial, sans-serif; color:#333;}
article ul.lists li a {margin:0; padding:0; font:normal 13px/18px TeXGyreAdventorBold, arial, sans-serif; color:#069;}
**********/

/* ==
p a {margin:0; padding:0; font:normal 14px/18px TeXGyreAdventorBold, arial, sans-serif; color:#fff; padding:2px 5px; 
background:#069; text-decoration:none; margin:5px 0 5px 0; border-radius:5px;}
== */

p a:link { text-decoration: none; }
p a:hover { text-decoration: underline; }

.googlemedium {float:right; width:300px;}
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/cssplay-responsive-dropdown-touch-screen.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 {width:100%; margin:0px 0; text-align:center; position:relative; z-index:100;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
-ms-touch-action: none;
}

.menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left; border-radius:8px;}
.menu ul {display:inline-block;}
.menu > ul {width:100%;}

.menu li {display:block; position:relative; z-index:10;}

.menu ul ul {position:absolute; left:-9999px; top:50px; padding:10px 0; z-index:10;
-webkit-transition: opacity 0.5s;
-o-transition:0.5s;
-moz-transition:0.5s;
transition: opacity 0.5s;
}
.menu ul ul ul {left:100%; top:auto; margin-top:-40px;}
.menu ul li.left > ul {left:auto; right:0; top:70px;}
.menu ul li.left ul li > ul {left:auto; right:100%; top:auto; margin-top:-40px;}

.menu > ul > li {float:left;}

.menu ul {background:#09c;}
.menu ul ul {background:#c60;}
.menu ul ul ul {background:#690;}
.menu ul ul ul ul {background:#66c;}

.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.5) 100%);
background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
background-image: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
background-image: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
box-shadow:0px 5px 5px rgba(0,0,0,0.4);
}
.menu a {display:block; font:normal 16px/40px "Ubuntu Condensed", arial, sans-serif; color:#fff; text-decoration:none; border-radius:8px; padding:0 10px; position:relative; z-index:10;}
.menu > ul > li > a {line-height:50px;}
.menu > ul > li > b {display:block; position:relative; width:100%; margin-top:-70px; height:70px; background: url(menus/trans.gif); z-index:50;
-webkit-transition:0.75s;
-o-transition:0.75s;
-moz-transition:0.75s;
transition:0.75s;
}
.menu ul ul > li > b {display:block; position:relative; margin-top:-50px; width:100%; height:30px; background: url(menus/trans.gif); z-index:50;
-webkit-transition:0.75s;
-o-transition:0.75s;
-moz-transition:0.75s;
transition:0.75s;
}
.menu li:hover {z-index:100;}
.menu li:hover > b {width:0;}
.menu li.left ul a {text-align:right;}

.menu li:hover > a,
.menu ul li:hover > a {color:#ff0; text-decoration:underline;}

.menu ul li a.hassub {background:url(down.gif) no-repeat right center;}
.menu li.left ul li a.hassub {background:url(down.gif) no-repeat left center;}


.menu ul ul,
.menu ul ul ul,
.menu ul li.left > ul,
.menu ul li.left ul li > ul {left:-9999px; right:auto; opacity:0;}

.menu ul li:hover > ul {left:0; opacity:1;}
.menu ul ul li:hover > ul {left:100%; opacity:1;}
.menu ul li.left:hover > ul {left:auto; right:0; opacity:1;}
.menu ul li.left ul li:hover > ul {left:auto; right:100%; opacity:1;}

.menu ul li:hover > a.hassub {background:url(right.gif) no-repeat right center;}
.menu li.left ul li:hover > a.hassub {background:url(left.gif) no-repeat left center;}