@charset "utf-8";
/* CSS Document */

/* --Reset-- */
a,abbr,acronym,address,applet,article,aside,audio,b,blockquote,big,body,center,canvas,caption,cite,code,command,datalist,dd,del,details,dfn,dl,div,dt,em,embed,fieldset,figcaption,figure,footer,form,
header,hgroup,html,i,iframe,img,ins,kbd,keygen,label,legend,li,meter,nav,object,ol,output,pre,progress,q,s,samp,section,small,span,source,strike,strong,sub,sup,tfoot,thead,th,tdvideo,tt,u,ul,var{
	background:transparent;
	border:0 none;
	margin:0;
	padding:0;
	border:0;
	outline:0;
	vertical-align:top;
	}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
table, table td {border-collapse:collapse;}
img {vertical-align:top;}
embed {vertical-align:top;}
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block;}
mark, rp, rt, ruby, summary, time {display:inline;}
input, textarea {border:0; padding:0; margin:0; outline: 0;}
iframe {border:0; margin:0; padding:0;}
input, textarea, select {margin:0; padding:0px;}
/* --End Reset-- */

/* --Allgemein-- */
body {
	margin: 0;
	padding: 0;
	line-height: 1.5em;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 14px;
	color: #666;
    background-image: url(images/shop_bg.gif);
    background-repeat: repeat;
    background-position: top;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
}


h1{font-size: 26px; color:#990000; line-height: 28px;}
h3{font-size: 18px; color:#333; line-height: 24px;}



.clear{clear:both;}

#page{
	margin: 0px auto;
	width:100%;
	display:flex;
	display:-webkit-flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:flex-start;
	}
font{line-height:1.1em}
/* --Mobile first - alle Dokument-Blöcke bekommen 100% Breite-- */

nav,
nav a,
header,
article,
section,
aside,
footer {
	padding: 10px;
	margin:10px;
	-webkit-flex: 1 100%;
	flex: 1 100%;
	border: none;
	border-radius: 1em;
	box-sizing: border-box;
	}

section, aside, footer {box-shadow: 5px 5px 10px #ccc; min-width:280px; display:block;}
	
article, aside{align-self:flex-start}

aside {}

body{
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	-o-hyphens: auto;
	hyphens: auto;
}

table, tr, td{ max-width:95%;}
/* --Ende Allgemein --*/


/* --Admin- */

#adminframe{
	position:fixed; 
	top:0px; 
	right:0px;
	display:block;
	width:150px;
	color:white;
	background-color: gray;
    border-color:blue; 
	border-style:dashed; 
	border-width: 4px;
	padding:4px; 
	z-index:20;
	}
	
#admin {
	color:black;
	background-color:white;
	padding:6px;
	text-align:left;
	}
	
/* End Admin */


header {
	display:block;
	text-align:center;
	background: transparent;
	overflow:hidden;
	height:auto;
	padding:0px;
	border-radius:1em;
	}
	
#head {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content:space-between;  height:auto; width:100%; text-align:center; vertical-align: central;}

header img{
	height:auto;
	width:auto;
	margin: auto;
	padding: 0px auto; 
	border-radius:1em;
}

/*	
#header nav {-webkit-flex: 1 1 100%;	flex: 1 1 100%;}
*/

/* Linke Navi-Spalte */

#navi {
		background-color:#f1f3ef;
	}

#content img {height:auto;max-width:95%;}

#search-txt{
	font-weight:bold;
	margin:0px;
	padding:0px;
	}

#searchfield{
	background:white ;
	color:black ;
	width:75%;
	}
	
#sendsearch{
	background: url(/images/find.png) no-repeat;
	width:35px;
	height:30px;
	}
	
	
#search_box {
	width:100%;
	height: 35px;
	text-align: right;
	background-color: #F5F5F5;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	}

#search_box form {margin: 0; padding: 5px 20px;}

#search_box #input_field {
	height: 20px;
	width: 300px;
	color: #000000;
	font-size: 12px;
	font-variant: normal;
	line-height: normal;
	border: 1px solid #ccc;
	background: #fff;
	}

#search_box #submit_btn {
 	height: 24px;
	width: 100px;
	cursor: pointer;
	font-size: 12px;
	text-align: center;
	vertical-align: bottom;
	white-space: pre;
	outline: none;
	color:#666666;
	border: 1px solid #CCCCCC;
	background: #FFFFFF;
	}

#bigbasket{
	width:100%;
	border:none;
	margin:0;
	padding10px;
	}

#basket-txt{
	 border-bottom: 1px solid #999999;
	 text-align: bottom;
	 font-weight: bold;
	 colspan: 3;
	}
	
#gotobasket a{
	font-weight:bold;
	vertical-align:bottom;
	border-top:1px solid #999999;
	}

/* Navigation */

nav{
	width:100%;
	margin: 0;
	padding: 0;
	border: none;
	}

#navigation{ 
	margin: 0px 0px 0px 0px;
	}

nav a {
	line-height:1.2em;
	width:100%;
	display: inline-block;
	border-radius:0;
	margin:0px;
	padding:2px 1px;
	text-decoration: none;
	text-align: left;
	font-size: 14px;
}

nav a:hover {color: #000000; text-decoration:underline;}
nav a:active {color:#000000;}

.menu1{background:#dce3e9; padding:2px; padding-left:8px; border-bottom:1px #CCCCCC solid; border-top:1px #ffffff solid;}
.navi1{color:#0000CC; font-weight:bold;}

.menu2{padding: 0px 0px 0px 10px; border-bottom: 1px solid #cccccc;}
.navi2{ color:#009900; font-weight:bold;}

.menu3{padding: 0px 0px 0px 10px; border-bottom: 1px solid #cccccc;}
.navi3{ color: #0000CC; font-weight: normal;}

.menu4{padding: 0px 0px 0px 10px; border-bottom: 1px solid #cccccc;}
.navi4{color: #9900CC; font-weight: lighter;}

.menu5{}
.navi5{color: #9900CC; font-weight: lighter;}

.menu6{}
.navi6{color: #9900CC; font-weight: lighter;}

.menu7{}
.navi7{color: #9900CC; font-weight: lighter;}

/* Ende Navigation */

/* Ende Linke Navi-Spalte */

/* Main */

article { display:box; background: transparent; ; padding: 20px; min-width:200px;}
/*
article img{
	max-width:95%;
	height:auto;
	}

table img{ width:auto; height:auto;}
*/
#title{margin:1em auto;}

/* --Kontakt- */

#thanks{
	width:50%;
	margin: 5px auto 5px auto;
	text-align:left;
	border-width:2px;
	border-style:solid;
	border-color:#00CCCC;
	padding:5px 10px;
	overflow: visible;
}

#contacterror{
	width:50%;
	margin: 5px auto 5px auto;
	text-align:left;
	border:none;
	padding:5px 10px;
	overflow: visible;
	font-weight:bold;
	color:#FF0000;
}

#contactform{ width:70%; margin: 5px auto;}
	
.contact-left{ float:left; margin-right:10px; width:17%;}
	
.contact-right{ text-align:right; width:83%;}

/* Ende Kontakt */

/* Inhalt */
#maincontent img{border-radius:0.5em; max-width:98%; height: auto;}

#content img{ max-width:98%; margin:1em auto; border-radius:0.5em;}

#textcont{
	line-height:150%;
	font-family: Arial,Helvetica Neue,Helvetica,sans-serif; 
	font-size:16px;
	color: #333;
	}
	
p	{margin:0.5em 0 0.5em 0}
address{line-height:100%;}
/* Kategoriebild */	
#ccat_detail_img img{
	margin-top:5px;
	margin-right:10px;
	float:left;
	height:150px;
	width:auto;
	border:none;
	}
	
/* Zusätzloche Bilder */
	
#id_related_images img{
	margin-top:5px;
	margin-right:10px;
	height:150px;
	width:auto;
	border:none;
	}
	
/* Einkauf */
	
#content_article{
	display:block;
	text-align:left;
	width:100%;
	margin:10px 0px;
	min-width:180px;
	}
	
#contentform{
	margin: 20px 5px;
	padding:10px 5px;
	}

#buybutton{
	width:26px;
	text-align:left;
	vertical-align:top;
	float:left; 
	height:100%;
	}
	
#content_art_x_desc{width:474px; font-weight:bold; margin-left:30px;}

#content_art_x_discount{color:red; text-decoration:line-through;}

#warenkorbbutton{height:30px; text-align:left; margin-left:14px; vertical-align:top;}

/* Ende Einkauf */

/* Zusätzliche Dateien */

#id_related_files{
	display:box;
	float:left;
	width:28%;
	min-width:180px;
	max-width:330px;
	height:115px;
	margin:10px;
	padding:10px;
	overflow:hidden;
	border-style:ridge;
	border-color:#0000CC;
	border-width:1px;
	border-radius:0.5em;
	}
	
#files{
	width:100%; 
	padding:0.5em;
	margin-right:10px;
	overflow:hidden;
	}
	
#files img{
	width:auto;
	max-width:98%;
	height:auto;
	max-height:95%;
	text-align:left;
	float:left;
	border:none;
	border-radius:0.5em;
	}
	
/*
#filesimg{
	width:50%;
	height:auto;
	text-align:left;
	float:left;
	margin-right:10px;
	margin-top:0px;
	border:none;
	border-radius:0.5em;
	overflow:hidden;
	}
	
#filesimg img{
	width:100%;
	height:auto;
	max-height:99%;
	}
*/

#filesdesc{
	width:50%;
	vertical-align:top;
	}
	
/* Ende zusätzliche Dateien */

/* --U-Kat.-Vorschau-- */

.content_cat_x{
	display:flex;
	float:left;
	width:31%;
	max-width:330px;
	min-width:180px;
	overflow:hidden;
	margin-right:1%;
	margin-bottom:1em;
	height:120px;
	border-style:ridge;
	border-color:#0000CC;
	border-width:1px;
	border-radius:0.5em;
	}
	
.content_cat_x a img{
	width:auto;
	height:120px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: 0px;
	margin-bottom:0px;
	}
	
.content_cat{
	text-align:left;
	line-height:1.1em;
	padding-top:5px;
	padding-left:5px;
	padding-right:5px;
	max-height:115px; 
	overflow:hidden;
	align-self:center;
	}

.content_cat a{ 
	font-size:12px;
	} 
	
/* --Ende U-Kat.-Vorschau-- */

.attribute{
	display:box;
	width:50%;
	min-width:180px;
	margin-right:10px;
	margin-bottom:10px;
	padding:5px;
	overflow:hidden;
	border: solid #0000CC;
	border-width:1px;
	border-radius:1em;
	}

/* Kasse */

/* Ende Kasse */

/* Ende Main */

/* Rechte Newsbox */

#news{
	background-color:#FFFF33; border:ridge 4px #FF0000;}

#newscontainer h1{
	color:#CC3333;
	font-size:18px;
	font-weight:bold;
	}
	
#newscontainer img {
	max-width:95%;
	height:auto;
	margin:5px auto;}
	
/* Ende Rechte Newsbox */

/* Footer */

footer {
	border-color:#312a24;
	background-color:#554d45;
	text-align: center;
	color: #a9a098;
	display: -webkit-flex;
	-webkit-flex-flow: row wrap;
	display: flex;
	flex-flow: row wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

footer a {color: #d7d1cc; font-weight: normal;}

footer a:hover {
	text-decoration: none;
	color: #FFFF33;
}

.footer-box{ width:25%; min-width:160px; margin: 10px auto;}

footer .heading {
    padding: 5px 0;
    border-bottom: 1px solid #615E5F;
    border-top: 1px solid #615E5F;
    text-align: center;
}

footer .content {
	display:inline-block;
    padding: 5px;
	margin:0 auto;
	text-align:left;
}

footer .content ul {
    font-size: 14px;
}

footer .content ul li {
    padding: 2px 0;
}

/* Ende Footer */

.error{
	font-weight:bold;
	color:#FF0000;}

/*Animation*/
.anim{
	-webkit-animation-name: cssAnimation;
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-timing-function:ease-out;
	
	-moz-animation-name: cssAnimation;
	-moz-animation-duration:2s;
	-moz-animation-iteration-count:1;
	-moz-animation-timing-function:ease-out;
	
	-o-animation-name: cssAnimation;
	-o-animation-duration:2s;
	-o-animation-iteration-count:1;
	-o-animation-timing-function:ease-out;

	-ms-animation-name: cssAnimation;
	-ms-animation-duration:2s;
	-ms-animation-iteration-count:1;
	-ms-animation-timing-function:ease-out;
	
	animation-name: cssAnimation;
	animation-duration:2s;
	animation-iteration-count:1;
	animation-timing-function:ease-out;
	} 
	
	@-webkit-keyframes cssAnimation {
		from {-webkit-transform:rotate(360deg) scale(0.0) skew(1deg) translate(300px);}
		to 	 {-webkit-transform:rotate(0deg) scale(1.00) skew(1deg) translate(0px);} 
		} 
	@-moz-keyframes cssAnimation{
		from 
			{-moz-transform:rotate(360deg) scale(0.0) skew(1deg) translate(300px);}
		to  {-moz-transform:rotate(0deg) scale(1.00) skew(1deg) translate(0px); } 
		}
	@-o-keyframes cssAnimation {
		from 
			{-o-transform:  rotate(360deg) scale(0.0) skew(1deg) translate(300px); }  
		to 
			{-o-transform:  rotate(0deg) scale(1.00) skew(1deg) translate(0px); } 
		}
	@-ms-keyframes cssAnimation {
		from 
			{-ms-transform:  rotate(360deg) scale(0.0) skew(1deg) translate(300px); }  
		to 
			{-ms-transform:  rotate(0deg) scale(1.00) skew(1deg) translate(0px); } 
		}
	@keyframes cssAnimation {
		from 
			{transform:  rotate(360deg) scale(0.0) skew(1deg) translate(300px); }  
		to 
			{transform:  rotate(0deg) scale(1.00) skew(1deg) translate(0px); } 
		}
/* Ende Animation */

.error{
	font-weight:bold;
	color:#FF0000;
	font-size:14px;
	}
	
input, textarea, select,option{
	background:white ;
	color:black ;
	padding:3px;
	margin:3px;
	border: #C8C8C8 solid 1px;
	border-radius:5px; 
	max-width: 100%;
	}
	
.stylefield{
	background:#ffffff;
	padding:3px;
	margin:3px;
	border:1px solid #0099FF;
	}	
	
.divworkhere{	
	border:3px solid #0099FF;
	background:#efefef;
	padding:5px;
	margin:3px;
	}

.div_over{
	background:#efefef;
	padding:5px;
	margin:3px;
	}
.div_out{
	background:#ffffff;
	padding:5px;
	margin:3px;
	}
	
.article_over{
	background:#cccccc;
	padding:5px;
	}
.article_out{
	background:#efefef;
	padding:5px;
	}	
@media all and (max-width: 35em) {	
nav,
nav a,
header,
article,
section,
aside,
footer {
	padding:0.2em;
	margin:0;
	-webkit-flex: 1 100%;
	flex: 1 100%;
	border: none;
	border-radius:0;
	box-sizing: border-box;
	}
header{padding:0;}
header img{border-radius:0;}
#contactform { width: 95%; margin: 5px auto;}
}

/* Smart Phones und Tablets mit mittlerer Auflösung */

@media all and (min-width: 35em) {
	header img { padding: 0px auto; border-radius:1em;}
	nav ul {
		-webkit-flex-direction:column;
		flex-direction: column;
	}
	nav li {
		margin: 0.2em 10px;
		-webkit-flex: 1 1 0%;
		flex: 1 1 0%;
	}

	article {
		-webkit-flex: 3 auto;
		webkit-order: 3;
		flex: 3 auto;
		order: 3;
	}
	#navi {
		-webkit-flex: 1 auto;
		-webkit-order: 2;
		flex: 1 auto;
		order: 2;
	}
	aside {
		/* durch auto werden die beiden asides in eine Zeile gesetzt */
		
		-webkit-flex: 1 auto;
		-webikit-order: 4;
		flex: 1 auto;
		order: 4;
	}
	footer {
		webkit-order: 5;
		order: 5;
	}
}
/* Large screens */

@media all and (min-width: 50em) {
	article {
		/* Der Article wird 2.5x so breit wie die beiden asides! */
		-webkit-flex: 7 1 0%;
		-webkit-order: 3;
		order: 3;
		flex: 7 1 0%;
	}
	aside {
		-webkit-flex: 2 1 0%;
		flex: 2 1 0%;
	}
	#navi {
		-webkit-flex: 2 1 0%;
		-webkit-order: 2;
		flex: 2 1 0%;
		order: 2;
		height: auto;
	}
}