@import "/scripts/shop.css"; /* Import general CSS */

/* Industry template */
@font-face {
	font-family: 'Droid Sans';
	src: local('Droid Sans'),
		url('/scripts/font/Droid Sans.woff2') format('woff2'),
		url('/scripts/font/Droid Sans.woff') format('woff');
}

/* Variables */
html {
	--color1: #fff;		/* Website background */
	--color2: #333;		/* Menu background */
	--color3: #eee;		/* Text color */
	--color4: #444;		/* Hover color */
	--color5: #333;		/* Used for header text and elements */
	--color6: #f80;		/* Sub navigation hover color */
}

/* Containers */
body			{ margin: 0; padding: 0; font-family: Droid Sans,Helvetica,Arial,sans-serif; }

#header1		{ background: var(--color1); }
#header2 {
	display: grid; grid-template-columns: 1fr 4fr 1fr; grid-template-rows: auto auto;
	grid-template-areas: "logo nav nav" "logo . header3";
	margin: 0 auto; padding: 0 10px; background: var(--color1);
}

#logo			{ grid-area: logo; }
nav			{ grid-area: nav; }
#header3		{ grid-area: header3; display: flex; justify-content: flex-end; }
#cont1			{ max-width: 1180px; margin: 0 auto; min-height: 60vh; }
main,
#asidecontent		{ padding: 20px; }
#asidecontent		{ width: 200px; float: right; }

/* Navigation */
nav			{ margin-left: 6px; font-weight: bold; max-height: auto; transition: max-height 1s; }
nav ul, nav li		{ list-style: none; margin: 0; padding: 0; }
nav > ul		{ margin: 0; display: inline-block; }
nav li			{ display: inline-block; }
nav a {
	display: block; text-decoration: none; line-height: 40px;
	font-weight: bold; outline: none; color: var(--color5); transition: 0.3s color;
}
nav a svg,
nav a svg path		{ fill: var(--color5); }
nav > ul > li > a	{ line-height: 50px; padding: 0 20px 0 0; }

/* Sub navigation */
nav > ul ul {
	position: absolute; border-radius: 0 0 5px 5px; margin-left: -4px; min-width: 150px; z-index: 1;
	max-height: 0; opacity: 0; overflow-y: auto; z-index: 2; background: var(--color2);
	transition: max-height 0.3s linear 0s, opacity 0.2s linear 0s; overflow: hidden; border-radius: 5px;
}

nav > ul ul > li	{ display: block; }
nav > ul ul a		{ padding: 0 14px; color: var(--color1); }
nav > ul li:hover > ul	{ opacity: 1; max-height: 100%; }
nav > ul ul a:hover	{ color: var(--color6); }


/* Mobile navigation */
#mnav			{ display: none; grid-area: mnav; margin: 6px; } /* Hide mobile menu hamburger on wide screens */
#mnav a			{ outline: none; }

/* Category navigation */
#cat ul			{ background: var(--color2); text-align: center; }
#cat ul, #cat ul li	{ list-style: none; margin: 0; padding: 0; }

#cat > ul > li		{ display: inline-block; }
#cat a {
	display: inline-block; line-height: 40px; padding: 0 10px; text-decoration: none;
	font-weight: bold; outline: none; color: var(--color3); transition: 0.3s color; white-space: nowrap;
}
#cat li:hover		{ background: var(--color4); }

/* Category sub navigation */
#cat > ul ul {
	position: absolute; border-radius: 0 0 5px 5px; margin-left: -4px; min-width: 150px; z-index: 1;
	max-height: 0; opacity: 0; overflow-y: auto; z-index: 2; background: #fff;
	transition: max-height 0.3s linear 0s, opacity 0.2s linear 0s; overflow: hidden;
}

/* Account navigation */
#accountnav		{ text-align: right; }
#accountnav a		{ padding-right: 10px; text-decoration: none; }

/* Objects */
main a			{ color: #06c; }
svg, svg path		{ fill: #878787; transition: 0.3s fill; }

#cart, #lang		{ margin: 0 9px; }
#cart a			{ text-decoration: none; }
#cart span {
	display: inline-block; margin: -3px 0 0 4px; vertical-align: top; padding: 5px 3px 2px 3px;
	color: #fff; background-color: #06c;
	font-size: 0.8em; font-weight: bold; border-radius: 3px;
}
#lang			{ float: right; margin: 4px 3px 3px 3px; font-weight: bold; }
#lang a			{ color: var(--color5); text-decoration: none; transition: 0.3s color; }
#cart svg,
#cart svg path,
#lang svg,
#lang svg path,
#search svg,
#search svg path	{ fill: var(--color5); }

svg:hover,
svg:hover path,
nav a:hover svg,
#lang a:hover svg,
nav a:hover svg path,
#lang a:hover svg path	{ fill: var(--color4); }
nav a:hover,
#lang a:hover		{ color: var(--color4); }

/* Forms */
.webshop_stylebutton, input[type=submit], input[type=button] {
	display: inline-block;  margin: 0 0 10px 0; padding: 10px 8px;
	white-space: nowrap; text-decoration: none; -webkit-appearance: none; border: 0;
	text-align: center; font-family: inherit; font-size: inherit; cursor: pointer;
	color: #fff; background: #06c; border-radius: 0;
	transition: 0.3s background;
}

.webshop_stylebutton:hover, input[type=submit]:hover, input[type=button]:hover {
	background: #39f;
}

input[type=submit]:disabled, input[type=button]:disabled {
	background: #ccc; cursor: default;
}

/* Footer */
footer a		{ display: inline-block; color: var(--color3); padding: 3px 6px; border-radius: 5px; }
footer a:hover		{ background: var(--color4); }
#footer1		{ color: var(--color3); background: var(--color2); padding: 20px; }
#footer2		{ max-width: 1180px; margin: 0 auto; }

/* Footer navigation */
footer #cat,
#footnav		{ margin-bottom: 40px; }
footer #cat ul,
#footnav ul		{ list-style: none; margin: 0; padding: 0; }
footer #cat li,
#footnav li		{ display: inline-block; width: 190px; vertical-align: top; }
footer #cat ul ul,
#footnav ul ul		{ margin: 0 0 10px 3px; font-size: 0.9em; }
footer #cat a,
#footnav a		{ line-height: 30px; text-decoration: none; }
#footnav svg		{ display: none; }

/* Footer address */
footer address		{ width: 390px; display: inline-block; font-style: normal; }
address p		{ margin-top: 0; }
address a		{ text-decoration: none; }
address svg		{ width: 14px; height: 14px; margin-right: 6px; fill: var(--color3); }
address svg path	{ fill: var(--color3); }
#footercontent		{ display: inline-block; vertical-align: top; }

/* Footer terms */
#terms			{ clear: both; padding: 10px; font-size: 0.9em; color: #666; text-align: right; }
#terms span		{ margin-right: 16px; }
#terms a		{ color: var(--color1); margin-right: 16px; }

/* Responsive */
@media all and (max-width: 600px) {

	#header2 {
		grid-template-columns: 1fr 4fr; grid-template-rows: auto auto;
		grid-template-areas: "mnav header3" "logo logo";
		padding: 8px 0 0 0;
	}
	#logo			{ text-align: center; }
	main,
	#asidecontent		{ padding: 5px; }

	nav			{ position: absolute; z-index: 2; left: 0; max-height: 0; width: 100%; margin: 0; overflow: hidden; background: #fff; }
	nav ul, nav ul li	{ display: block; }
	nav > ul ul		{ position: static; opacity: 1; margin-left: 30px; }
	nav > ul > li > a	{ padding: 0 14px; }
	nav > ul li:hover > ul	{ max-height: 0; }
	#mnav			{ display: inline-block; margin-top: 0; }
	#search, #cart, #lang	{ padding: 0; }
	#asidecontent		{ width: auto; }
	footer address		{ float: none; width: auto; }
}