body {
	margin: 0;
	background-color: #0cf;
	padding: 0;
	font-family: sans-serif;	
	font-size: medium;
}

input[type=button], input[type=submit] {
	background-color: #0cf;
	cursor: pointer;
}
img {
	width: 100%;
}

.hidden {
	display: none;
}
.piros,
.required {
	color: red;
}
.veres {
	color: #c00;
	font-size: 156%;
}
.kek {
	border: 2px solid black;
	background-color: #0cf;
	padding-left: 0.5em;
	padding-right: 0.5em;
}
.NarrowScreenOnly {
	display: none;
}
.amount {
	text-align: right;
}
.na {
	text-align: center;
	font-weight: bold;
}
.smaller {
	font-size: smaller;
}
/* messages, errors */
div.errors,
div.messages {
	margin: 0;
	color: white;
	font-weight: bold;
}
div.errors p,
div.messages p {
	margin: 2px 10px;
	padding: 5px;
	text-align: left;
}
div.errors p {
	background-color: red;
}
div.messages p {
	background-color: green;
}

/*	form	*/
input, select, textarea {
	font-size: large;
}
fieldset {
	margin: 1em;
	border: 1px solid #777;
}
legend {
	margin: 0 0.75em;
	padding: 0 0.25em;
} 
.form-item {
	padding: 0.5em;
}
	.form-item_err {
		padding: 0.5em;
		background-color: red;
	}
	.form-item label {
	} 
	.form-item textarea {
		height: 10em;
		width: 100%;
	}
	#remark_len {
		max-width: 3em;
		text-align: right;
	}
	.form-item input[type=text] {
		width: 100%;
		max-width: 25em;
	}
	#zip, #d_zip, #quantity {
		max-width: 4em;
	}
	#tax_number {
		max-width: 13em;
	}
	#digit_request {
		max-width: 8em;
	}
	.description {
		font-size: smaller;
	} 

.form-submit {
	padding: 0.5em;
	text-align: center;
}

#frame {
	margin: 2em auto;
	border-radius: 1em;
	background-color: white;
	padding: 1em;
	color: black;
	max-width: 1250px;
}

#cookie_accept_frame {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #eee;
	padding: 0.5em;
	text-align: center;
	z-index: 102;
}

#header {
	padding-bottom: 3em;
}

#gridcontainer {
	display: grid;
	grid-template-columns: 30% auto;
	grid-template-rows: 30em auto;
	grid-template-areas:
		'menu content'
		'aboutus content';
}

#menu { 
	grid-area: menu; 
	margin-top: 1.5em;
}
	#menu_button {
		display: none;
		background: transparent url('hamburger.png') no-repeat left center;
		padding-left: 30px;
		cursor: pointer;
	}
	#cart_button {
		border: 2px solid black;
		background: #0cf url('cart.png') no-repeat left center;
		padding: 0.25em 0.5em 0.25em 2em;
		font-size: large;
	}
		#menu a {
			color: black;
			text-decoration: none;
		}

	#menu ul {
		list-style: none;
		margin: 1em 0 0 0;
		padding: 0;
	}
		#menu li {
			display: list-item;
			padding: 0.5em;
			color: #bbb;
			font-weight: bold;
		}
			#menu li.indent {
				padding-left: 2em;
			}

		#menu li a {
			color: #777;
			text-decoration: none;
		}
		#menu li a:hover {
		/*	color: #000;*/
			text-decoration: underline;
		}
		#shell.hidden {
			display: block; 
		}

#aboutus {
	grid-area: aboutus; 
}
	#aboutus p {
		margin-right: 1em;
		background-color: #0cf;
		padding: 1em;
		font-size: 125%;
		font-weight: bold;
	}

#content { 
	grid-area: content; 
}
	h2 {
		background-color: #0cf;
		padding: 0.5em;
	}
	.initial {
		float: left;
		padding: 2em;
		width: 30%;
	}
	#content p {
		padding: 0.25em 1em;
	}
	#content p.title {
		font-weight: bold;
	}
	.puder {
		padding: 1em;
	}
		.puder a {
			color: red;
			font-weight: bold;
			text-decoration: none;
		}
		.puder a:hover {
			text-decoration: underline;
		}
	#contact {
		text-align: center;
	}
#overlay {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: #666;	
	z-index: 100;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);
}

#article2order {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 101;
}
	#article2order > div {
		position: relative;
		top: 50%;
		margin: -20em auto;
		background-color: white;
		padding-bottom: 0.1em;
		max-width: 500px;
	}
	#article2order > div > div {
		margin: 1em;
		border: 1px solid #777;
	}
	#article2order p {
		background-color: white;
		padding: 1em 2em;
	}
	#article2order input[type=text] {
		width: 6em;
	}

table.grid {
	margin: 0;
	background-color: #eee;
	width: 100%;
}
table.artabla {
	margin: 0 auto;
	width: 60%;
}
	.grid th {
		background-color: white;
		padding: 0.5em;
		font-size: 80%;
	}
	.grid td {
		background-color: white;
		padding: 0.5em;
		color: black;
		font-size: 80%;
	}
	.larger th {
		padding: 1em;
		font-size: 100%;
	}
	.larger td {
		padding: 1em;
		font-size: 100%;
	}
	.grid tr.article_name th {
		background-color: #0cf;
	}
	.grid tr.article_header th {
		background-color: #0f0;
	}
	.grid tr.emphased th.range {
		background-color: #f9c;
	}
	.grid tr.paper th,
	.grid tr.paper td {
		background-color: #fff;
	}
	.grid tr.vinyl th,
	.grid tr.vinyl td {
		background-color: #ff0;
	}
	.grid tr.magnet th,
	.grid tr.magnet td {
		background-color: #000;
		color: #fff;
	}
	.grid tr.metal th,
	.grid tr.metal td {
		background-color: #00f;
		color: #fff;
	}
	.grid tr.foil th,
	.grid tr.foil td {
		background-color: #9c5;
	}
	.grid tr.plastic th,
	.grid tr.plastic td {
		background-color: #f00;
		color: #fff;
	}
		.grid tr.paper  th a,
		.grid tr.vinyl  th a,
		.grid tr.magnet th a,
		.grid tr.metal  th a,
		.grid tr.foil   th a,
		.grid tr.paper  th a {
			background: transparent url('circle_red.png') no-repeat center center;
			padding: 4px 12px;
			color: white;
			font-size: 156%;
			text-decoration: none;
		}
		.grid tr.plastic th a {
			background: transparent url('circle_white.png') no-repeat center center;
			color: red;
		}

	.grid tr th.thumbnail,
	.grid tr th.pinkienail,
	.grid tr th.naildirt {
		padding: 0;
		background-color: white;
	}
	.grid th.thumbnail img {
		width: 118px;
	}
	.grid th.pinkienail img {
		width: 50px;
	}
	.grid th.naildirt img {
		width: 25px;
	}

@media only screen and (max-width: 1024px) {
	#gridcontainer {
		grid-template-columns: auto;
		grid-template-rows: auto;
		grid-template-areas:
			'menu menu'
			'content content'
			'aboutus aboutus';
	}
	#menu {
	}
		#menu_button {
			display: inline;
		}
		#cart_button {
			margin-left: 2em;
		}
		#shell {
			padding: 1em;
			max-width: 400px;
			overflow: auto;
		}
		#shell.hidden {
			display: none; 
		}
		#menu ul {
			background-color: #0cf;
		}
		#menu li {
			color: #666;
		}
		#menu li a {
			color: black;
		}
	#aboutus p {
		margin-right: 0;
	}
	.grid th.thumbnail img {
		width: 60px;
	}
	input, select, textarea {
		font-size: medium;
	}
	#article2order > div {
		max-width: 360px;
	}
}	
@media only screen and (max-width: 768px) {
	.WideScreenOnly {
		display: none;
	}
	th.NarrowScreenOnly,
	td.NarrowScreenOnly {
		display: table-cell;
	}
}