﻿/*
* Copyright 2014 Seven Spikes Ltd. All rights reserved. (http://www.nop-templates.com)
* http://www.nop-templates.com/t/licensinginfo
*/

.header-menu,
.back-button,
.mega-menu {
	display: none;
}

@media all and (min-width: 941px) {

	/* DO NOT REMOVE. The default autocomplete should appear above the Mega Menu */
	.ui-autocomplete {
		z-index: 1002 !important;
	}

	/* RESETS */

	.menu-title,
	.plus-button,
	.mega-menu-responsive {
		display: none;
	}

	.mega-menu a, .mega-menu a:hover {
		text-decoration: none;
	}

	/* MAIN PANEL */

	.mega-menu {
		display: block;
		position: relative;
		z-index: 1001;
		margin: 10px auto 0;
		padding: 0;
		border: 1px solid #aaa;
		border-radius: 5px;
		background: rgb(252,252,252);
		background: url("images/bg-menu.jpg") repeat-x left top;
		background: -moz-linear-gradient(top, rgba(252,252,252,1) 0, rgba(224,224,224,1) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0,rgba(252,252,252,1)), color-stop(100%,rgba(224,224,224,1)));
		background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0,rgba(224,224,224,1) 100%);
		background: -o-linear-gradient(top, rgba(252,252,252,1) 0,rgba(224,224,224,1) 100%);
		background: -ms-linear-gradient(top, rgba(252,252,252,1) 0,rgba(224,224,224,1) 100%);
		background: linear-gradient(to bottom, rgba(252,252,252,1) 0,rgba(224,224,224,1) 100%);
		list-style: none;
		clear: both;
	}

		.mega-menu:after {
			display: block;
			visibility: hidden;
			clear: both;
			height: 0;
			content: ".";
			line-height: 0;
		}

		.mega-menu > li {
			float: left;
			height: 32px;
			border-right: 1px dotted #999;
		}

			.mega-menu > li:first-child {
				border-radius: 5px 0 0 5px;
			}

			.mega-menu > li:hover {
				background: rgb(224,224,224);
				background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2UwZTBlMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmY2ZjZmMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
				background: -moz-linear-gradient(top, rgba(224,224,224,1) 0%, rgba(252,252,252,1) 100%);
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(224,224,224,1)), color-stop(100%,rgba(252,252,252,1)));
				background: -webkit-linear-gradient(top, rgba(224,224,224,1) 0%,rgba(252,252,252,1) 100%);
				background: -o-linear-gradient(top, rgba(224,224,224,1) 0%,rgba(252,252,252,1) 100%);
				background: -ms-linear-gradient(top, rgba(224,224,224,1) 0%,rgba(252,252,252,1) 100%);
				background: linear-gradient(to bottom, rgba(224,224,224,1) 0%,rgba(252,252,252,1) 100%);
			}

			.mega-menu > li > a,
			.mega-menu > li > span {
				display: block;
				padding: 0 20px;
				color: #333;
				text-transform: uppercase;
				text-shadow: 1px 1px 0 #fff;
				font: normal bold 12px/32px Arial, Helvetica, sans-serif;
				cursor: pointer;
			}

		.mega-menu a.view-all {
			font-weight: bold !important;
			background: none;
		}

		/* DROPDOWN */

		.mega-menu .dropdown {
			overflow: hidden;
			opacity: 0.95;
		}

		.mega-menu .dropdown,
		.mega-menu .sublist {
			display: none;
			position: absolute;
			top: 32px;
			border: 1px solid #aaa;
			border-bottom-left-radius: 5px;
			border-bottom-right-radius: 5px;
			background: #fafafa;
			box-shadow: 0 1px 1px 0 #555;
			list-style: none;
			min-width: 200px;
		}

			.mega-menu .sublist.active {
				display: block;
			}

			.mega-menu .sublist .sublist {
				top: -1px;
				left: 100%;
			}

			.mega-menu .sublist li {
				position: relative;
			}

				.mega-menu .sublist li a {
					display: block;
					padding: 10px 20px;
				}

			.mega-menu .dropdown.fullWidth {
				left: -1px;
				width: 928px;
				border-radius: 0 0 5px 5px;
			}

		/* ROWS AND BOXES */

		.mega-menu .row {
			overflow: hidden;
			min-height: 188px;
			width: 100%;
			border-spacing: 10px 5px;
		}

		.mega-menu .box {
			float: left;
			margin: 0 6px;
			padding: 10px;
		}

		.mega-menu .categories .box {
			width: 200px;
		}

		.mega-menu .manufacturers .box {
			width: 200px;
		}

		.mega-menu .manufacturers.fullWidth .box {
			width: 122px;
		}

		.mega-menu .box ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		.mega-menu .picture {
			float: left;
			box-shadow: 0 0 2px #999;
		}

			.mega-menu .picture img {
				border-width: 0px;
			}

			.mega-menu .picture a {
				display: block;
				overflow: hidden;
				width: 90px;
				height: 90px;
			}

		.mega-menu .box .subcategories {
			float: right;
			margin: 0;
			margin-top: -8px;
			width: 95px;
		}

		.mega-menu .box strong {
			display: block;
			margin-bottom: 5px;
			padding: 5px 0 10px;
			color: #333;
			text-transform: uppercase;
			font: normal bold 14px Arial, Helvetica, sans-serif;
		}

			.mega-menu .box strong a {
				color: #333;
				letter-spacing: 0.5px;
				font-weight: bold;
			}

				.mega-menu .box strong a:hover {
					color: #AF0304;
					text-decoration: none;
				}

		.mega-menu .box li a {
			display: block;
			padding: 5px 0 5px 10px;
			background: url('images/arrow1.png') left center no-repeat;
			color: #111;
			text-decoration: none;
			font: normal normal 12px Arial, Helvetica, sans-serif;
			font-size: 13px;
		}

			.mega-menu .box li a:hover {
				background: url('images/arrow2.png') left center no-repeat;
				color: #AF0304;
			}

		.mega-menu .box li:last-child:hover a {
			border-bottom: none;
		}

		/* MANUFACTURER DROPDOWN */

		.mega-menu .manufacturer {
			display: block;
			background: none !important;
		}

			.mega-menu .manufacturer span {
				display: block;
				overflow: hidden;
				width: 90px;
				height: 90px;
				margin-bottom: 5px;
			}

		.mega-menu li a.manufacturer,
		.mega-menu li a.manufacturer:hover {
			font: normal bold 13px Arial, Helvetica, sans-serif !important;
			background: none !important;
		}

		.mega-menu .topic-wrapper p {
			margin: 0;
			padding: 10px;
			color: #333;
		}
}



@media all and (max-width: 940px) {



	/* MENU BUTTON */

	.menu-title {
		width: 480px;
		max-width: 100%;
		margin: 10px auto 0;
		padding: 0;
		border: 1px solid #aaa;
		border-radius: 5px;
		background: rgba(240,240,240,1);
	}

		.menu-title span {
			display: block;
			text-align: center;
			color: #333;
			text-shadow: 1px 1px 0 #fff;
			font: normal 20px/2 Arial, Helvetica, sans-serif;
			cursor: pointer;
		}

	/* RESPONSIVE MENU */

	.mega-menu-responsive {
		display: none;
		width: 480px;
		max-width: 100%;
		margin: -4px auto 20px;
		list-style: none;
		border: 1px solid #aaa;
		border-radius: 0 0 5px 5px;
	}

		.mega-menu-responsive .sublist {
			display: none;
			list-style: none;
		}

		.mega-menu-responsive li {
			position: relative;
			border-bottom: 1px solid #aaa;
		}

			.mega-menu-responsive li:last-child {
				border-bottom: 0;
			}

		.mega-menu-responsive a,
		.mega-menu-responsive span {
			display: block;
			position: relative;
			z-index: 1;
			color: #333;
			font-size: 18px;
			line-height: 2.2;
			text-decoration: none;
			padding: 0 54px 0 15px;
		}

	.plus-button {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 2;
		width: 39px;
		height: 39px;
		border-left: 1px solid #aaa;
		background-image: url(images/responsive-plus.png);
		background-position: center;
		background-repeat: no-repeat;
	}

		.plus-button.close {
			background-image: url(images/responsive-minus.png);
			background-position: center;
			background-repeat: no-repeat;
		}

	.sublist > li:nth-child(2) {
		border-top: 1px solid #aaa;
	}

	.sublist.active {
		display: block;
	}
}
