/* ================================================================ 
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-two.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.
=================================================================== */
.trigger {width:40px; height:40px; position:fixed; left:0; top:5px; background:#044a8c; color:#fff; border-radius:0 2px 2px 0;
-webkit-transition: 0.5s;
-o-transition:  0.5s;
-moz-transition:  0.5s;
transition:  0.5s;
}
.trigger label {display:block; width:40px; height:38px; position:absolute; left:0; top:0; background:url(http://www.creatrix.com/m/images/menu-icon.png) no-repeat center center; cursor:pointer;} 
.trigger label span {position:absolute; left:-9999px;}

input.submenus,
input#toggle {position:absolute; display:none;}
.menuHolder {width:100%; position:fixed; right:0; top:0; background:#F00; z-index:400;}
.menu {float:right; 
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
-ms-touch-action: none;
}

.menuHolder {position:fixed; left:-300px; width:300px; top:0; bottom:0; height:auto; overflow-x:hidden; background:#044a8c;
-webkit-transition: left 0.5s;
-o-transition: left 0.5s;
-moz-transition: left 0.5s;
transition: left 0.5s;
}
.menu {width:305px; text-align:center; position:absolute; z-index:100; background:#044a8c; left:0; top:0; 
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
-ms-touch-action: none;
-webkit-transition:0.5s;
-o-transition:0.5s;
-moz-transition:0.5s;
transition:0.5s;
}

.menu ul {margin:0; padding:0; width:295px; list-style:none; white-space:nowrap; text-align:left; background:#044a8c;}

.menu li {display:block; position:static; width:305px; height:38px; }
.menu ul li.back {display:block;}

.menu ul ul {position:absolute; left:290px; top:-5000px; padding:0; z-index:0; opacity:1; background:#044a8c;
-webkit-transition:0s 0.5s;
-o-transition:0s 0.5s;
-moz-transition:0s 0.5s;
transition:0s 0.5s;
}
.menu ul ul ul {left:300px; top:-5000px; margin-top:0; opacity:1;}


.menu ul li.left > ul {left:300px; right:auto; top:-5000px;}
.menu ul li.left ul li > ul {left:300px; right:auto; top:-5000px; margin-top:0;}

.menu > ul {margin:0;}
.menu > ul > li {float:left; position:static;}

.menu ul {background:#044a8c;}

.menu a {display:block; font:normal 16px/50px  Verdana, arial, sans-serif; color:#FFF; text-decoration:none; padding:0 0 0 12px; margin-right:30px; position:relative; z-index:10; background:transparent;}
.menu > ul > li > a {line-height:50px; color:#FFF; font-weight:normal; }
.menu > ul > li > label,
.menu ul ul > li > label {display:block; position:relative; margin-top:-46px; margin-right:4px; width:40px; height:30px; float:right; background: #F00 url(http://www.creatrix.com/m/images/arrow-right.png) no-repeat center center; z-index:100; cursor:pointer;
-webkit-transition:0s;
-o-transition:0s;
-moz-transition:0s;
transition:0s;
}

.menu li:hover > label {width:40px;}
.menu li.left ul a {text-align:left; padding:0 20px 0 20px; color:#FFF; font-weight:normal; } 

.menu ul li:hover > a {color:#FFF; background:#044a8c; text-decoration:none;}
.menu ul li a:hover,
.menu ul li a.hassub:hover {color:#FFF; background:#044a8c; text-decoration:none; font-weight:normal; }

.menu ul li a.hassub,
.menu li.left ul li a.hassub,
.menu li ul li a.hassub {background:none; color:#FFF; font-weight:normal; }

.menu ul li.back label {display:block; width:40px; height:30px; margin-top:4px; float:right; background: #F00 url(http://www.creatrix.com/m/images/arrow-left.png) no-repeat center center; z-index:100; cursor:pointer;}
.menu ul li.back span {display:block; font:normal 16px/18px Verdana, arial, sans-serif; color:#FFF; width:180px; padding:18px 0 0 12px; white-space:normal; float:left; position:relative; }

.menu ul ul,
.menu ul ul ul,
.menu ul li.left > ul,
.menu ul li.left ul li > ul {left:300px; top:-5000px; right:auto; opacity:1;}


.menu ul li:hover > ul,
.menu ul ul li:hover > ul,
.menu ul li.left:hover > ul,
.menu ul li.left ul li:hover > ul {left:300px; right:auto; opacity:1;}

.menu ul li:hover > a.hassub,
.menu li.left ul li:hover > a.hassub {background:none; color:#FFF; font-weight:normal; text-decoration:none;}
.menu ul li a.hassub:hover,
.menu ul ul li a.hassub:hover,
.menu li.left ul li a.hassub:hover {color:#FFF; background:#044a8c; text-decoration:none;}

#submenu1:checked ~ .menu #p1,
#submenu2:checked ~ .menu #p2,
#submenu3:checked ~ .menu #p3,
#submenu4:checked ~ .menu #p4,
#submenu5:checked ~ .menu #p5,
#submenu6:checked ~ .menu #p6,
#submenu7:checked ~ .menu #p7,
#submenu8:checked ~ .menu #p8,
#submenu9:checked ~ .menu #p9,
#submenu10:checked ~ .menu #p10,
#submenu11:checked ~ .menu #p11 {top:0;
-webkit-transition:0s;
-o-transition:0s;
-moz-transition:0s;
transition:0s;
}

#submenu1:checked ~ .menu,
#submenu2:checked ~ .menu,
#submenu7:checked ~ .menu,
#submenu8:checked ~ .menu,
#submenu5:checked ~ .menu,
#submenu6:checked ~ .menu,
#submenu9:checked ~ .menu,
#submenu3:checked ~ .menu,
#submenu10:checked ~ .menu,

#submenu4:checked ~ .menu,
#submenu11:checked ~ .menu {left:-300px;}

#toggle:checked ~ .wrapper {left:300px;} 
#toggle:checked ~ .wrapper .menuHolder {left:0;} 
#toggle:checked ~ .wrapper .trigger {left:310px;}

.norm {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	color: #000;
	line-height:150%;
	text-decoration: none;
}

.norm a:link { color: #F00; font-weight: bold; text-decoration: none; }
.norm a:visited { color: #F00; font-weight: bold; text-decoration: none; }
.norm a:active { color: #F00; font-weight: bold; text-decoration: none; }
.norm a:hover { color: #F00; font-weight: bold; text-decoration: none; }
.norm a:visited:hover { color: #F00; font-weight: bold; text-decoration: none; }