/*
Item Name : Vertical CSS3 Mega Menu
Author URI : http://codecanyon.net/user/Pixelworkshop/
Version : 1.0
*/

/*

TABLE OF CONTENTS

00 PAGE STYLING (REMOVABLE)
01 MENU BUTTON
   1. Mega Menu Container
   2. Mega Menu Button
02 DROP DOWNS
   1. Drop Downs Default Behavior
   2. Fade Transition
   3. Slide Transition
   4. Toggle Transition
03 DROP DOWN ELEMENTS
   1. Arrows
   2. List Elements
   3. Typography
   4. Icons
   5. Large Icons

*/



/*  _______________________________________

	00 PAGE STYLING (REMOVABLE)
    _______________________________________  */



/* 
The following markup is used only for demonstration purposes,
this whole section can be removed.

body {font-family:Arial,Helvetica,sans-serif;background:url(../img/page_bg.gif) repeat}
p{font-size:12px; line-height:21px; margin-bottom:18px}
*/


/*  _______________________________________

    01 MENU BUTTON
    _______________________________________  */



/* 1. Mega Menu Container */


.megamenu_container {
	width:127px;
	height:40px;
	margin:0;
	position:absolute;
	top:10px;
	left:0px;
	float:left;
	z-index:9000;
	background: url(../../../../../img/dummyHeader.png) no-repeat 0 0px;
/*	background: #3d3d3d; 
	background: -moz-linear-gradient(top, #3d3d3d 0%, #282828 100%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3d3d3d), color-stop(100%,#282828)); 
	background: -webkit-linear-gradient(top, #3d3d3d 0%,#282828 100%); 
	background: -o-linear-gradient(top, #3d3d3d 0%,#282828 100%); 
	background: -ms-linear-gradient(top, #3d3d3d 0%,#282828 100%); 
	background: linear-gradient(to bottom, #3d3d3d 0%,#282828 100%); 
	border:solid 1px #434343;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;	
	-webkit-box-shadow: 0 2px 3px #cccccc;
	-moz-box-shadow: 0 2px 3px #cccccc;
	-o-box-shadow: 0 2px 3px #cccccc;
	box-shadow: 0 2px 3px #cccccc;
*/
	}
	.megamenu_container:hover {
		cursor:pointer;
	}
	.megamenu_container a {
		text-decoration: none;
	}
		.megamenu_container a:focus {
			outline:none;
		}


/* 2. Mega Menu Button */


.megamenu {
	font-family: Arial, Helvetica, sans-serif;
	font-size:10px;
	list-style:none;
	padding:0;
	margin:0;
}

.catmenu {display:inline-block;text-align:left;font-size:14px;height:14px;}

	.megamenu .top_level {
		/*display:inline;*/
		display:block;
		border:none;
		margin:0;
		/*padding: 14px 0 15px 15px;*/
	}
	.megamenu .cat_top_level {
		display:inline-block;
		position:relative;
		border:none;
		margin:0;
		height:20px;
	}	
		.megamenu .top_level > span {
			font-size:12px;
			color:#ffffff;
			line-height:44px;
			text-transform:uppercase;
			outline:0;
			text-decoration:none;
			color:#ffffff;
			/*
			text-shadow:1px 1px 1px #000000;
			background:url("../img/arrow_down.png") no-repeat 80px 18px;
			padding:14px 32px 20px 0;
			*/
			display:block;
			text-indent: -1000px;
		}
		/* MX */
		#cartcontent .megamenu .top_level > span {
			font-size:12px;
			color:#ffffff;
			line-height:44px;
			text-transform:uppercase;
			outline:0;
			text-decoration:none;
			color:#ffffff;
			/*
			text-shadow:1px 1px 1px #000000;
			background:url("../img/arrow_down.png") no-repeat 80px 18px;
			padding:14px 32px 20px 0;
			*/
			display:block;
			text-indent:-10000px;
		}	



/*  _______________________________________

    02 DROP DOWNS
    _______________________________________  */



/* 1. Drop Downs Default Behavior */

.megamenu .megamenu_main,
.megamenu .megamenu_main ul {
	position:absolute;
	top:-9999px; /* Used to avoid scrollbars */
	left:-9999px;
	width: 245px;
	margin:0 0 40px 1px;
	padding:0;
	-webkit-border-radius:0 0 3px 3px;
	-moz-border-radius:0 0 3px 3px;
	border-radius:0 0 3px 3px;	
	-webkit-box-shadow: 0 2px 5px #dddddd;
	-moz-box-shadow: 0 2px 5px #dddddd;
	-o-box-shadow: 0 2px 5px #dddddd;
	box-shadow: 0 2px 5px #dddddd;
	border:solid 1px #dddddd;
	/*border-top:solid 3px #202020;*/
	background:#FCFCFC;
	opacity:0;
}
.megamenu .megamenu_main li .megamenu_2col {
	width: 400px;
}
.megamenu .megamenu_main li .megamenu_3col {
	width: 600px;
}
.megamenu > li:hover .megamenu_main {
	top:49px;
	left:0;
	opacity:1;
}
.megamenu .cat_top_level:hover .megamenu_main {
	top:20px;
	left:0;
	opacity:1;
}
.catmenu .cat_top_level span {font-family: Arial,sans-serif;font-size:14px;font-weight:bold;color:#0066EE; }

.megamenu .megamenu_main li:hover > ul {
	top:-3px;
	left:100%;
	opacity:1;
}
.megamenu .megamenu_main li:hover > .left_dropdown {
	left:-100%;
}

.megamenu > li .main_opened {
	top:42px;
	left:0;
	opacity:1;
}

/* 2. Fade Transition */

.megamenu_fade .megamenu_main,
.megamenu_fade .megamenu_main ul {
	-webkit-transition: opacity 0.4s 0.2s;
	-moz-transition: opacity 0.4s 0.2s;
	-o-transition: opacity 0.4s 0.2s;
	-ms-transition: opacity 0.4s 0.2s;
	transition: opacity 0.4s 0.2s;
}

/* 3. Slide Transition */

.megamenu_slide .megamenu_main {
	top:30px;
	-webkit-transition: top 0.3s 0.2s, opacity 0 0.2s;
	-moz-transition: top 0.3s 0.2s, opacity 0 0.2s;
	-o-transition: top 0.3s 0.2s, opacity 0 0.2s;
	-ms-transition: top 0.3s 0.2s, opacity 0 0.2s;
	transition: top 0.3s 0.2s, opacity 0 0.2s;
}
.megamenu_slide .megamenu_main ul {
	left:80%;
	-webkit-transition: left 0.2s 0.2s, opacity 0 0.2s;
	-moz-transition: left 0.2s 0.2s, opacity 0 0.2s;
	-o-transition: left 0.2s 0.2s, opacity 0 0.2s;
	-ms-transition: left 0.2s 0.2s, opacity 0 0.2s;
	transition: left 0.2s 0.2s, opacity 0 0.2s;
}
.megamenu_slide .megamenu_main li > .left_dropdown {
	left:-80%;
}

/* 4. Toggle Transition */

.megamenu_toggle .megamenu_main {
	top:30px;
	-webkit-transition: opacity 0.4s 0.2s, top 0.3s 0.2s;
	-moz-transition: opacity 0.4s 0.2s, top 0.3s 0.2s;
	-o-transition: opacity 0.4s 0.2s, top 0.3s 0.2s;
	-ms-transition: opacity 0.4s 0.2s, top 0.3s 0.2s;
	transition: opacity 0.4s 0.2s, top 0.3s 0.2s;

}
.megamenu_toggle .megamenu_main ul {
	left:90%;
	-webkit-transition: opacity 0.4s 0.2s, left 0.2s 0.2s;
	-moz-transition: opacity 0.4s 0.2s, left 0.2s 0.2s;
	-o-transition: opacity 0.4s 0.2s, left 0.2s 0.2s;
	-ms-transition: opacity 0.4s 0.2s, left 0.2s 0.2s;
	transition: opacity 0.4s 0.2s, left 0.2s 0.2s;
}
.megamenu_toggle .megamenu_main li > .left_dropdown {
	left:-90%;
}



/*  _______________________________________

    03 DROP DOWN ELEMENTS
    _______________________________________  */



/* 1. Arrows */


.megamenu .dropdown_arrow {
	background-image:url("../img/arrow_left.png");
	background-repeat: no-repeat;
	background-position: 95% 48%;
}
.megamenu .dropdown_arrow:hover {
	background-image:url("../img/arrow_left_hover.png");
}

.megamenu > li .megamenu_main a {
	text-decoration: none;
	color:#555;
	display:block;	/*MX*/
	font: 13px/16px Arial, sans-serif normal;
}
.catmenu > li .megamenu_main a {}

/* 2. List Elements */


.megamenu > li ul {
	list-style: none;
	padding:0 0 0 18px;
	margin:0 0 18px 0;
}
.megamenu > li ul li {
	/*font-size:8px;                            MX*/
	position:static;
	color:#333333;
	padding: 8px 15px 8px 15px;
	-webkit-transition: background-color 0.3S;
	-moz-transition: background-color 0.3s;
	-o-transition: background-color 0.3s;
	-ms-transition: background-color 0.3s;
	transition: background-color 0.3s;
	background-color:#F9F9F9;
	border-bottom:1px solid #F9F9F9;
}

.cartbutton .megamenu > li ul li:first-child {border-bottom:1px solid #eee}   /*gruener Rand erstes Item*/
.catmenu  > li ul li.AlleTitel:first-child {border-bottom:1px solid #eee}   /*gruener Rand erstes Item*/

.cartbutton .megamenu > li ul li:first-child {background:#F7F7F7} /* no background first li cartbutton*/

.megamenu > li ul li:hover {
	background-color: #e8e8e8;
	background-position:0px bottom;
	border-bottom:1px solid #fff;
}
.megamenu > li ul .relative_dropdown {
	position:relative;
}


/* 3. Typography */


.megamenu p {
	padding:0;
	margin:0 0 12px 0;
}
.megamenu h3 {
	font-size: 14px;
	font-weight:bold;
	padding:0;
	margin:6px 0 12px 0;
}
.megamenu .new {
	font-size:xx-small; 
	vertical-align:text-top;
	color:#e10000;
}
.megamenu .small {
	font-size: 11px;
	color: #888888;
	display: block;
	padding: 0;
	margin-top: 4px;
}
.megamenu .title {
	display: block;
	font-size: 14px;
	line-height: 12px;
}


/* 4. Icons */


.megamenu .icon_bookmark,
.megamenu .icon_bubble,
.megamenu .icon_charts,
.megamenu .icon_check,
.megamenu .icon_cross,
.megamenu .icon_favorite,
.megamenu .icon_help,
.megamenu .icon_info,
.megamenu .icon_magnifier,
.megamenu .icon_mail,
.megamenu .icon_marker,
.megamenu .icon_pencil,
.megamenu .icon_settings {
	padding-left:38px;
	background-repeat: no-repeat;
	background-position: 12px 50%;
}
.megamenu .icon_bookmark {
	background-image:url("../img/icons/icon_bookmark.png");
}
.megamenu .icon_bubble {
	background-image:url("../img/icons/icon_bubble.png");
}
.megamenu .icon_charts {
	background-image:url("../img/icons/icon_charts.png");
}
.megamenu .icon_check {
	background-image:url("../img/icons/icon_check.png");
}
.megamenu .icon_cross {
	background-image:url("../img/icons/icon_cross.png");
}
.megamenu .icon_favorite {
	background-image:url("../img/icons/icon_favorite.png");
}
.megamenu .icon_help {
	background-image:url("../img/icons/icon_help.png");
}
.megamenu .icon_info {
	background-image:url("../img/icons/icon_info.png");
}
.megamenu .icon_magnifier {
	background-image:url("../img/icons/icon_magnifier.png");
}
.megamenu .icon_mail {
	background-image:url("../img/icons/icon_mail.png");
}
.megamenu .icon_marker {
	background-image:url("../img/icons/icon_marker.png");
}
.megamenu .icon_pencil {
	background-image:url("../img/icons/icon_pencil.png");
}
.megamenu .icon_settings {
	background-image:url("../img/icons/icon_settings.png");
}


/* 5. Large Icons */


.megamenu .megamenu_main .large_icons {
	width: 534px;
}
.megamenu .large_icons li {
	width: 128px;
	float: left;
	text-align:center;
	position:relative;
	padding: 25px;
}
.megamenu .large_icons li span {
	font-weight: bold;
	font-size: 14px;
	padding-top:10px;
	display: block;
}
.megamenu img {
	border:none;
}

.mega-menu-close {position:absolute;z-index:5000;bottom:0px;width:114px;height:24px;left:50%;margin-left:-57px;
text-align:right;color:#06e !important;text-decoration:underline !important;font-weight:normal !important;
background:url(../../../../../img/close_category.png) no-repeat white;
}