/* ================================================================
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-three.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.
=================================================================== */

/*
changed color 'ccc' to #003334 (green)
green: 40676D
brown: 855832
brown: 513603
gray: 333333
gray: 4C4C4C
changed color 'bbb' to #440800 (brown)
background: #909497 (grey)
changed font color '000' to fff
changed max-height:3000px; to max-height:4000px;
changed font 14px to font: .65em, and 1em for mobile
changed @media only screen and (max-width:768px) to (max-width:60em)
Catamaran
*/

.cssplay_menu {width:100%; background:#4C4C4C; text-align:center; height:45px; 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 #ddd; border-right:1px solid #ddd;}
.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 #ddd}
.cssplay_menu > ul > li.has-sub > a {background-image:url(../png/down.png); background-repeat: no-repeat; background-position: right center;}
.cssplay_menu ul ul > li.has-sub > a {background-image:url(../png/right.png); background-repeat: no-repeat; background-position: right center;}
.cssplay_menu ul li.left ul > li.has-sub > a {background-image:url(../png/left.png); background-repeat: no-repeat; background-position:left center;}

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

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

.cssplay_menu ul {background:#4C4C4C;}

.cssplay_menu a {display:block; font:normal .61em "Verdana", arial, sans-serif; color:#fff; line-height:45px; text-decoration:none; padding:0 30px 0 10px;}
.cssplay_menu > ul > li > a {float:left; /*text-transform:uppercase;*/}

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

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

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


/*############################################################*/

@media only screen and (max-width:69.999em)
{

.cssplay_menu ul li b {display:none;}
.cssplay_menu {height:0; padding-top:45px; background:#4C4C4C; position:relative;}
.cssplay_menu > label {display:block; width:36px; height:36px; background:#ddd; 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 > span {display:block; font:normal .80em "Verdana", arial,sans-serif; color:#fff; position:absolute; left:10px; top:15px;}

.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:36px; height:36px; background:#ddd; 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:#4C4C4C; border:0;}

.cssplay_menu a {display:block; font:normal .80em "Verdana", arial,sans-serif; color:#fff; line-height:45px; text-decoration:none;padding:0 20px 0 10px;}
.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:url(../png/right.png) 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:#440800; 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:4000px;}

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