html { background-color: #ccc; }

body {margin-top:20px;}







#wrapper {

	width: 980px;

	margin:40px auto;

	border: 0px solid #000;

	padding: 0px;

	top: 50px;

	background: #eee;

	font-family:PT Sans Narrow;

}





#headerline {

	width: 980px;

	margin-top:-25px;	

	border: 0px solid #000;

	padding: 0px;

	float: left;

    height: 20px;

    background: #ccc;
	
	text-align: right;
	
	padding-right: 10px;
}

#headerline a {text-decoration: none; color: #555;}
#headerline a:visited {text-decoration: none; color: #555;}
#headerline a:active {text-decoration: none; color: #555;}
#headerline a:hover {text-decoration: none; color: #222;}




#header {

	width: 980px;

	margin-top:0px;  /* 5px */

	margin-bottom:0px;  /* 20 px */

	

	border: 0px solid #000;

	padding: 0px;

	

  

	float: left;

    height: 300px;

    background: #fff;

/* 	background-image: url("http://denetix.de/entwuerfe/esser/bilder/header-background.jpg"); */
 

}



#content {

	position: relative;

	width: 670px;

	margin-left:0px;

	margin-right:0px;

	border: 0px solid #fff;	

	padding-left: 25px;
	padding-right: 20px;



	float: left;

    background: #fff;

	

	min-height:400px;

  _height:400px;

    

}



#right {

	width: 210px;

	margin-left:10px;

	margin-right: 0px;

	border: 0px solid #fff;	

  padding-top:00px;
	padding-left:20px;
	padding-right:20px;
  padding-bottom:0px;



	float: right;

	background: #fff;

	

	min-height:400px;   

}





#produktbild {

	/*position: absolute;

	left: 20px;

	top: 100px; */

	

	float: left;

	width: 350px;

	margin:0px;

	padding:0px;

	height: 400px;

	

	}



#produktparameter {

	/*position: absolute;

	width: 310px;

	left: 380px;

	top: 100px; */

	

	float: left;

	margin:0px;

	padding:0px;

	width: 300px;

	min-height: 300px;

	

	}



	

	

.clearfloat{

	clear: both;

	}



.a{

      appearance: button; /* CSS3 */    

      -webkit-appearance: button; /* Safari and Chrome */

      -moz-appearance: button; /* Firefox */

      -ms-appearance: button; /* Internet Explorer */

      -o-appearance: button; /* Opera */

      cursor: default;
	  
	  padding: 0px 15px;
	  
	  text-decoration: none;
	  
	  color: #000;
	  
	  font-size: 0.8em;
	  

} 





.linie { border: 0;

 height: 1px;

 background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
 }











.button {
	
/*
width: 250px;
margin: 30px;
padding: 35px;
*/

width: 325px;
margin: 3px;
padding: 8px;


display: inline-block;
box-sizing: border-box;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
/*display: inline; */ 

/*height: 180px; */
vertical-align: baseline;

outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 16px/100% Arial, Helvetica, sans-serif;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em; 
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.button:hover {
text-decoration: none;
}

.button:active {
position: relative;
top: 1px;
}





/* gray */

.gray {
color: #e9e9e9;
border: solid 1px #555;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#999));
background: -moz-linear-gradient(top,  #ddd,  #999);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ddd', endColorstr='#999');
}

.gray:hover {
background: #616161;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#bbb));
background: -moz-linear-gradient(top,  #888,  #bbb);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888', endColorstr='#bbb');
}

.gray:active {
color: #afafaf;
background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
background: -moz-linear-gradient(top,  #575757,  #888);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');
}

table.warenkorb {
    border-spacing: 10px;
    border-collapse: collapse;
    border: 1px #000000 solid;
   	margin: 0px auto; 
	  padding: 5px;
    width: 90%;
	/*margin-right:auto; */
}

.warenkorb td, tr {
    border: 1px #999999 solid;
    padding: 6px;
  	text-align: center;
    max-width: 150px;
    max-height: 150px;
    overflow: hidden;    
}

.anmerkung {
  color:#ff0000;
  font-size: 8pt;
}


.zentriert {
text-align: center;

}

.schlagschatten {
    background: #ddd; padding: 1px;
    -webkit-box-shadow: 5px 5px 5px #666;
    -moz-box-shadow: 5px 5px 5px #666;
    box-shadow: 5px 5px 5px #666;
}


/*css für slidepanel*/

#slidepanel {
	padding: 20px;
	background: #eee;
	height: 200px;
	display: none;
	overflow: auto;
}
.slidepanel {
	margin: 0;
	padding: 0;
	border-top: solid 1px #ddd;
	background: url(images/btn-slide.gif) no-repeat center top;
}
.slidepanel-btn {
	background-color: red;
	text-align: center;
	width: 200px;
	height: 30px;
	padding: 5px 5px 0 0;
	margin: 0 auto;
	display: block;
	border-radius: 10px;
	/*font: bold 120%/100% Arial, Helvetica, sans-serif;*/
	color: #fff;
	text-decoration: none;
}

.active {
	background-position: right 12px;
}

/*css für uploader*/

#uploader{
width: 300px;
margin: 10px auto;
border: 0px solid black;
}

#uploader label{

	display: block;
	width: 100%;	
	
	background-color: #D4D0C8;
	border: 1px solid #666;
	cursor: pointer; /* Mauszeiger wird zur Hand */
	font: bold 15px arial, sans-serif;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-top: 10px;
	margin-bottom: 10px;
	border-radius: 5px;		
	
	border-style: outset;
}


#uploader label:hover{
background-color: #eee;
}




.submit { /* Beschriftung auf eigener Zeile */
	display: block;
	width: 100%;
	background-color: red;
	color: #222;
	border-style: outset;
	border-color: #666;
	font: bold 15px arial, sans-serif;
	margin:10px auto;
	padding: 5px;
	width: 300px;
	border-radius: 5px;	
	cursor: pointer;
	
	border-style: outset;
	


}

.submit:hover{
	background-color:  #dc1717 ;
	}


.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.input_text{
width:300px;
}


.button_breit{
background-color: #666;
    color: #222;
    padding: 30px 20px;
    text-align: center;	
    text-decoration: none;
    display: block;
width: 600px;
margin-top: 20px;
 margin-left: auto;
 margin-right: auto;
border-radius: .5em; 
font-size:22px;
}

.bildtext{
padding: 10px;
font-size: 14px; 
color: red;
  }
  

.katalogliste{
color:blue;
display:block;
font-size:18px;
width:600px;
margin:10px auto;
text-decoration:none;
}


.katalogliste:hover{
color:#666;
}

figure {
display:inline-block;
width:150px;
height:150px;
padding: 5px;
margin:5px;
border: 1px solid #666;
border-radius: 5px;
text-align:center;
}

figure:hover{
background-color: #888;
opacity: 0.7;
}

figure img {
border-radius: 3px 3px 0 0;
}

figcaption {
padding: 2px 2px 2px 2px;
background-color: #fff;
color: #333;
border-radius: 0 0 3px 3px;
/* Ergänzungen Armin am 26.09.2016 */
position:absolute; 
bottom:1px;
left:15px;
margin: 0px auto;
text-align: center;
}




.rounddiv {
position: relative;
display:inline-block; 
width:150px; 
height:170px; 
border: 1px solid #666;
border-radius: 5px;
text-align:center;
background-color: #fff;
/* Ergänzungen Armin am 26.09.2016 */
vertical-align: top;
padding-top:15px;
padding-left:5px;
padding-right:5px;
margin:5px;

}

.rounddiv:hover{
background-color: #aaa;
opacity: 0.7;
}

.imgdiv  img{
margin: auto;
/*position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;*/
}

.txtdiv {
position: absolute;
top: 160;
left: 0;
bottom: 0;
right: 0;
text-align:center;
color: #333;
}

#bestellformular{
width:570px;
margin:0px auto;
border:0px solid #666;
min-height: 400px;
}

#bestellformular label{
background: transparent;
display: block;
width: 90%;
padding:5px 5px;
margin:5px;
margin:5px;
font-size: 14px;
text-align: right;
border: 1px solid #666;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

#bestellformular select{
background: transparent;
width: 90%;
padding:5px;
margin:5px;
margin:5px;
font-size: 14px;
border: 1px solid #666;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(arrow_select1.jpg) no-repeat right 3px #fff;
}

#bestellformular select::-ms-expand {
    display: none;
}

#bestellformular input{
background: transparent;
width: 90%;
padding:5px;
margin:5px;
margin:5px;
font-size: 14px;
border: 1px solid #666;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

#bestellformular table{
margin:0px;
padding:0px;
width:100%;
border:0px solid #444;
}

#bestellformular td{
margin:0px;
padding:0px;
width:50%;
border:0px solid #444;
}

#bestellformular p{
margin: 15px 0px 0px 10px;
padding:0px;
width:100%;
border:0px solid #444;
}

#bestellformular button{
display:block;
margin: 15px 5px;
width: 540px;
padding: 10px;
font-size: 16px;
}


/* pt-sans-narrow-regular - latin */
@font-face {
  font-family: 'PT Sans Narrow';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/pt-sans-narrow-v8-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('PT Sans Narrow'), local('PTSans-Narrow'),
       url('../fonts/pt-sans-narrow-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/pt-sans-narrow-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/pt-sans-narrow-v8-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/pt-sans-narrow-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/pt-sans-narrow-v8-latin-regular.svg#PTSansNarrow') format('svg'); /* Legacy iOS */
}