/* ================================================================ 
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-multi-level-menu-jquery.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
#wrapper {text-align:center;}
.cssplay_menu {width:100%; background:#99ccff; text-align:center; height:2.4em; position:relative; z-index:100;}
.cssplay_menu > span {display:none;}
.cssplay_menu input {position:absolute; display:none;}
.cssplay_menu label {display:none;}
.cssplay_menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;}
.cssplay_menu ul {display:inline-block;} 
.cssplay_menu ul {*display:inline;}

.cssplay_menu li {margin:0; padding:0; list-style:none;}
.cssplay_menu li {display:inline-block; display:inline;}
.cssplay_menu ul ul {position:absolute; left:-9999px; border-left:1px solid #f5f7f9; border-right:1px solid #f5f7f9;}
.cssplay_menu > ul {margin:0 auto;}
.cssplay_menu > ul > li {float:left; display:block; position:relative;}
.cssplay_menu ul ul li a {border-top:1px solid #f5f7f9}
.cssplay_menu > ul > li.has-sub > a {background-repeat: no-repeat; background-position: right center;}
.cssplay_menu ul ul > li.has-sub > a {background-repeat: no-repeat; background-position: right center;}
.cssplay_menu ul li.left ul > li.has-sub > a {background-repeat: no-repeat; background-position:left center;}
.cssplay_menu > ul > li.has-subb > a {background-repeat: no-repeat; background-position: right center; background:#000066; color:#ffffff;}

.cssplay_menu ul li b {display:block; width:100%; height:2.4em; background:transparent; position:relative; z-index:10;
-webkit-transition: 0s 0.5s;
transition: 0s 0.5s;
}
.cssplay_menu ul ul li b {margin-top:-2.4em;}

.cssplay_menu ul li b {*display:none;}

.cssplay_menu ul {background:#99ccff;}

.cssplay_menu a {display:block; font:normal 1.0em "PT Sans", arial, sans-serif; color:#000; line-height:2.4em; text-decoration:none; padding:0 1.0em 0 0.5em;}
.cssplay_menu > ul > li > a {float:left; text-transform:uppercase;}

.cssplay_menu ul li:hover > ul {visibility:visible; left:-1px; top:2.4em; opacity:1;}
.cssplay_menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-2.4em;}
.cssplay_menu li.left:hover > ul {visibility:visible; left:auto; right:-1px; top:2.4em;}
.cssplay_menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; margin-top:-2.4em;}
.cssplay_menu ul li:hover > b {width:0;}

.cssplay_menu li.left ul a {text-align:right; padding:0 0.5em 0 1.0em;}

.cssplay_menu li:hover > a,
.cssplay_menu li.left ul li:hover > a {background-color:#7bbcfe; text-decoration:underline;}

/*********************************************************************************************************************************************************/
@media only screen and (max-width:1023px){
.cssplay_menu ul li b {display:none;}
.cssplay_menu {height:0; padding-top:45px; background:#99ccff; position:relative;}
.cssplay_menu > label {display:block; width:108px; height:36px; background:#f5f7f9; border-radius:5px; position:absolute; right:10px; top:5px; cursor:pointer;}
.cssplay_menu > label:before {display:block; content:""; width:18px; height:2px; background:#000; position:absolute; left:50%; top:50%; margin-left:-9px; margin-top:-1px;
-webkit-transition:0.25s;
transition:0.25s
}
.cssplay_menu > label:after {display:block; content:""; width:2px; height:18px; background:#000; position:absolute; left:50%; top:50%; margin-left:-1px; margin-top:-9px;
-webkit-transition:0.25s;
transition:0.25s
}

.cssplay_menu li {display:block;}
.cssplay_menu ul, 
.cssplay_menu ul ul {margin:0; display:block; position:static; max-height:0; overflow:hidden;
-webkit-transition:0.25s;
transition:0.25s;
}
.cssplay_menu > ul > li.has-sub > a {background-image:none;}
.cssplay_menu ul ul > li.has-sub > a {background-image:none;}
.cssplay_menu ul li.left ul > li.has-sub > a {background-image:none;}

.cssplay_menu ul li {float:none; display:block; position:relative;}
.cssplay_menu ul li label {display:block; width:108px; height:36px; background:#f5f7f9; border-radius:5px; position:absolute; right:10px; top:5px; cursor:pointer;}
.cssplay_menu ul ul li label {margin-top:0;}

.cssplay_menu ul li label:before {display:block; content:""; width:18px; height:2px; background:#000; position:absolute; left:50%; top:50%; margin-left:-9px; margin-top:-1px;
-webkit-transition:0.25s;
transition:0.25s
}
.cssplay_menu ul li label:after {display:block; content:""; width:2px; height:18px; background:#000; position:absolute; left:50%; top:50%; margin-left:-1px; margin-top:-9px;
-webkit-transition:0.25s;
transition:0.25s
}

.cssplay_menu ul {background:#99ccff; border:0;}

.cssplay_menu ul li a {float:none; border-top:1px solid #aaa;}
.cssplay_menu ul ul li a:before {content:""; display:block; width:15px; height:45px; background:no-repeat left 15px; float:left;}

.cssplay_menu ul ul li > ul {margin-top:0;}
.cssplay_menu li.left ul li > ul {margin-top:0;}

.cssplay_menu ul ul li:hover > ul {margin-top:0;}
.cssplay_menu li.left ul li:hover > ul {margin-top:0;}

.cssplay_menu li.left ul a {text-align:left; padding:0 20px 0 10px;}

.cssplay_menu li:hover > a,
.cssplay_menu li.left ul li:hover > a {background-color:#99ccff; text-decoration:none;}

.cssplay_menu input:checked ~ label:before {
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
.cssplay_menu input:checked ~ label:after {
-webkit-transform:rotate(270deg);
transform:rotate(270deg);
}

.cssplay_menu input:checked ~ ul {max-height:3000px;}

.cssplay_menu ul ul {border:0; margin:0 15px;}
}

@media only screen and (orientation: portrait) and (max-width: 400px) {
.cssplay_menu > span {display:block; font:normal 1.3em "PT Sans", arial,sans-serif; color:#000; position:absolute; left:10px; top:14px;}
.cssplay_menu a {display:block; font:normal 1.3em arial,sans-serif; color:#000; line-height:45px; text-decoration:none;padding:0 20px 0 10px;}
}
@media only screen and (orientation: portrait) and (min-width: 401px) and (max-width: 650px) {
.cssplay_menu > span {display:block; font:normal 1.4em "PT Sans", arial,sans-serif; color:#000; position:absolute; left:10px; top:14px;}
.cssplay_menu a {display:block; font:normal 1.4em arial,sans-serif; color:#000; line-height:45px; text-decoration:none;padding:0 20px 0 10px;}
}
@media only screen and (orientation: portrait) and (min-width: 651px) and (max-width: 1023px) {
.cssplay_menu > span {display:block; font:normal 1.0em "PT Sans", arial,sans-serif; color:#000; position:absolute; left:10px; top:12px;}
.cssplay_menu a {display:block; font:normal 1.0em arial,sans-serif; color:#000; line-height:45px; text-decoration:none;padding:0 20px 0 10px;}
}
@media only screen and (orientation: landscape)and (max-width: 900px) {
.cssplay_menu > span {display:block; font:normal 1.0em "PT Sans", arial,sans-serif; color:#000; position:absolute; left:10px; top:14px;}
.cssplay_menu a {display:block; font:normal 1.0em arial,sans-serif; color:#000; line-height:45px; text-decoration:none;padding:0 20px 0 10px;}
}
@media only screen and (orientation: landscape) and (min-width: 901px)  and (max-width: 1023px) {
.cssplay_menu > span {display:block; font:normal 1.0em "PT Sans", arial,sans-serif; color:#000; position:absolute; left:10px; top:14px;}
.cssplay_menu a {display:block; font:normal 1.0em arial,sans-serif; color:#000; line-height:45px; text-decoration:none;padding:0 20px 0 10px;}
}
/*********************************************************************************************************************************************************/
/* this is the 'years' stylesheet */
.cssplay_menu_year {width:100%; background:#000066; text-align:center; height:2.2em; position:relative; z-index:110; left:0; border-top:1px solid #f5f7f9;}
.cssplay_menu_year ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;}
.cssplay_menu_year ul {display:inline-block;} 
.cssplay_menu_year ul {*display:inline;}
.cssplay_menu_year ul.top {border-right:1px solid #f5f7f9;}

.cssplay_menu_year li {margin:0; padding:0; list-style:none;}
.cssplay_menu_year li.close {display:none;}

.cssplay_menu_year li {display:inline-block; display:inline;}
.cssplay_menu_year li.top {border-left:1px solid #f5f7f9;}
.cssplay_menu_year li.topcurrent {border-left:1px solid #f5f7f9; background:#99ccff;}
.cssplay_menu_year ul ul {position:absolute; left:-9999px; border:1px solid #f5f7f9; border-top:0;}
.cssplay_menu_year > ul {margin:0 auto;}
.cssplay_menu_year > ul > li {float:left; display:block; position:relative;}
.cssplay_menu_year ul ul li a {border-top:1px solid #f5f7f9;}
.cssplay_menu_year > ul > li.has-sub > a {background-image:background-repeat: no-repeat; background-position: right center;}
.cssplay_menu_year > ul > li.has-sub-top > a {background-image:background-repeat: no-repeat; background-position: right center; border-left:1px solid #f5f7f9;}
.cssplay_menu_year ul ul > li.has-sub > a {background-image:background-repeat: no-repeat; background-position: right center;}
.cssplay_menu_year ul li.left ul > li.has-sub > a {background-image:background-repeat: no-repeat; background-position:left center;}

.cssplay_menu_year ul li b {display:block; width:100%; height:2.2em; background:transparent; position:relative; z-index:10;
-webkit-transition: 0s 0.5s;
transition: 0s 0.5s;
}
.cssplay_menu_year ul ul li b {margin-top:-2.2em;}

.cssplay_menu_year ul li b {*display:none;}

.cssplay_menu_year ul {background:#000066;}

.cssplay_menu_year a {display:block; font:normal; font-size:1.0em; color:#fff; line-height:2.2em; text-decoration:none; padding:0 10px 0 10px;}
.cssplay_menu_year a.current {display:block; font:normal; font-size:1.0em; color:#000; line-height:2.2em; text-decoration:none; padding:0 10px 0 10px;}
.cssplay_menu_year > ul > li > a {float:left; text-transform:uppercase;}

.cssplay_menu_year ul li:hover > ul {visibility:visible; left:-1px; top:2.2em; opacity:1;}
.cssplay_menu_year ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-2.2em;}
.cssplay_menu_year li.left:hover > ul {visibility:visible; left:auto; right:-1px; top:2.2em;}
.cssplay_menu_year li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; margin-top:-2.2em;}
.cssplay_menu_year ul li:hover > b {width:0;}

.cssplay_menu_year li.left ul a {text-align:right; padding:0 10px 0 10px;}

.cssplay_menu_year li:hover > a,
.cssplay_menu_year li.left ul li:hover > a {font:normal; font-size:1.0em; color:#000; background-color:#7bbcfe; text-decoration:underline;}

/*********************************************************************************************************************************************************/
@media only screen and (orientation: portrait) and (max-width: 400px) {
.cssplay_menu_year {width:100%; background:#000066; text-align:center; height:3.8vh; position:relative; z-index:110; left:0; border-top:1px solid #f5f7f9;}
.cssplay_menu_year li:hover > a,
.cssplay_menu_year li.left ul li:hover > a {font:normal; font-size:1.3em; color:#000; background-color:#7bbcfe; text-decoration:underline;}
.cssplay_menu_year a {display:block; font:normal; font-size:1.3em; color:#fff; line-height:3.8vh; text-decoration:none; padding:0 0.8em 0 0.8em;}
.cssplay_menu_year a.current {display:block; font:normal; font-size:1.3em; color:#000; line-height:3.8vh; text-decoration:none; padding:0 0.8em 0 0.8em;}
}

/*********************************************************************************************************************************************************/
@media only screen and (orientation: portrait) and (min-width: 401px) and (max-width: 500px) {
.cssplay_menu_year {width:100%; background:#000066; text-align:center; height:3.8vh; position:relative; z-index:110; left:0; border-top:1px solid #f5f7f9;}
.cssplay_menu_year li:hover > a,
.cssplay_menu_year li.left ul li:hover > a {font:normal; font-size:1.4em; color:#000; background-color:#7bbcfe; text-decoration:underline;}
.cssplay_menu_year a {display:block; font:normal; font-size:1.4em; color:#fff; line-height:3.8vh; text-decoration:none; padding:0 15px 0 15px;}
.cssplay_menu_year a.current {display:block; font:normal; font-size:1.4em; color:#000; line-height:3.8vh; text-decoration:none; padding:0 15px 0 15px;}
}

/*********************************************************************************************************************************************************/
@media only screen and (orientation: portrait) and (min-width: 501px) and (max-width: 1023px) {
.cssplay_menu_year {width:100%; background:#000066; text-align:center; height:3.6vh; position:relative; z-index:110; left:0; border-top:1px solid #f5f7f9;}
.cssplay_menu_year li:hover > a,
.cssplay_menu_year li.left ul li:hover > a {font:normal; font-size:1.2em; color:#000; background-color:#7bbcfe; text-decoration:underline;}
.cssplay_menu_year a {display:block; font:normal; font-size:1.2em; color:#fff; line-height:3.6vh; text-decoration:none; padding:0 15px 0 15px;}
.cssplay_menu_year a.current {display:block; font:normal; font-size:1.2em; color:#000; line-height:3.6vh; text-decoration:none; padding:0 15px 0 15px;}
}

/*********************************************************************************************************************************************************/
@media only screen and (orientation: landscape)and (max-width: 900px) {
.cssplay_menu_year {width:100%; background:#000066; text-align:center; height:9.5vh; position:relative; z-index:110; left:0; border-top:1px solid #f5f7f9;}
.cssplay_menu_year li:hover > a,
.cssplay_menu_year li.left ul li:hover > a {font:normal; font-size:1.2em; color:#000; background-color:#7bbcfe; text-decoration:underline;}
.cssplay_menu_year a {display:block; font:normal; font-size:1.2em; color:#fff; line-height:9.5vh; text-decoration:none; padding:0 10px 0 10px;}
.cssplay_menu_year a.current {display:block; font:normal; font-size:1.2em; color:#000; line-height:9.5vh; text-decoration:none; padding:0 10px 0 10px;}
}

/*********************************************************************************************************************************************************/
@media only screen and (orientation: landscape) and (min-width: 901px)  and (max-width: 1023px) {
.cssplay_menu_year {width:100%; background:#000066; text-align:center; height:6.0vh; position:relative; z-index:110; left:0; border-top:1px solid #f5f7f9;}
.cssplay_menu_year li:hover > a,
.cssplay_menu_year li.left ul li:hover > a {font:normal; font-size:1.0em; color:#000; background-color:#7bbcfe; text-decoration:underline;}
.cssplay_menu_year a {display:block; font:normal; font-size:1.0em; color:#fff; line-height:6.0vh; text-decoration:none; padding:0 10px 0 10px;}
.cssplay_menu_year a.current {display:block; font:normal; font-size:1.0em; color:#000; line-height:6.0vh; text-decoration:none; padding:0 10px 0 10px;}
}

/*********************************************************************************************************************************************************/
@media only screen and (min-width: 1024px) and (max-width: 1599px) {
.cssplay_menu_year {width:100%; background:#000066; text-align:center; height:5.4vh; position:relative; z-index:110; left:0; border-top:1px solid #f5f7f9;}
.cssplay_menu_year li:hover > a,
.cssplay_menu_year li.left ul li:hover > a {font:normal; font-size:1.1em; color:#000; background-color:#7bbcfe; text-decoration:underline;}
.cssplay_menu_year a {display:block; font:normal; font-size:1.1em; color:#fff; line-height:5.4vh; text-decoration:none; padding:0 10px 0 10px;}
.cssplay_menu_year a.current {display:block; font:normal; font-size:1.1em; color:#000; line-height:5.4vh; text-decoration:none; padding:0 10px 0 10px;}
}