/*Layout - enthält alle Inhalts Elemente -----------------------------------*/
body{
	text-align:center;
	/*background:#684b24;*/
	background:url(images/bg_all.jpg);
	font-size:75%;
	font-family:Lucida Grande, Verdana, Helvetica, sans-serif;
	color:#333;
}
/* Headlines */
h1{
	padding:4px .2em .3em 1em;
	font-size:1.1em;
	text-transform:uppercase;
	color:#333;
}
h2{
	font-size:1.1em;
	margin:0 .2em .3em 1em;
	padding-top:1em;
	color:#c3193d;
	text-transform:uppercase;
}
h2 a{
	color:#c3193d;
	text-decoration:none;
}
h2 a:hover{
	text-decoration:underline;
}

a:link, a:visited, a:active {color:#C3193D;
text-decoration:none;}
a:hover { text-decoration:underline;}
/* Paragraph */
p{
padding:.5em .5em .5em 1em;
}
p.huge{
font-size:1.3em;
}
/* Listen */
ul.list{
margin:.5em 0;
}
ul.list li{
background:url(images/icon-list.gif) no-repeat 3px 5px;
padding-left:1em;
margin:0 0 .5em 1em;
}

/* UL/LI in body - by Flo */
#content ul{
margin:.5em 0;
}
#content ul li{
background:url(images/icon-list.gif) no-repeat 3px 5px;
padding-left:1em;
margin:0 0 .5em 1em;
}
/* UL/LI in body - Ende */


/*Classes---------------------------------------------------------------*/
/*Align*/
.la{/* Linksausrichtung*/
	float:left; 
	margin:0 .5em;
}
.ra{/* Rechtsausrichtung*/
	float:right;
	margin:0 .5em;
}
/*Clear All*/
.clear {
	height:1px; 
	font-size:.0001em; 
	clear:both; 
}
/*Align center*/
.center{
	text-align:center;
	margin-bottom:1em;
	}
/*Highlight mit rotem hg*/
.highlight{
background:#D55873;
padding:.3em;
color:#fff;
margin:1em;
display:block;
}
.highlight strong{
font-size:1.1em;
}
/*images-------*/
#logo-print{
position:absolute;
top:-400px;
left:-400px;}
img.logo{
margin:2em 0 0 2em;
float:left;
}
img.i-left{
float:left;
margin:.2em 1em 0 .7em;
width:3em;
}
/*TextLink mit rotem Pfeil-------*/
.link{
padding-left:1em;
color:#C3193D;
text-decoration:none;
border:none;
margin-left:.3em;
background:url(images/icon-link-red.gif) no-repeat 2px 3px;
}
.link:hover{
text-decoration:underline;
}
/*HR---*/
hr {
  background-color:#eaeaea;
  color:#eaeaea;
  border:#eaeaea;
  height:1px;
	clear:both; 
}
/*Form Elemente-------*/
/*Form---------------------------*/
label{
	display:block;
	width:100px;
	margin:.5em 0;
	float:left;
	font-weight:bold;
	font-size:1.1em;
}
.required{
color:#C3193D;
margin-left:.5em;
}
#content form{
	margin:2em 1em;
}
#content form .but{
	margin-left:100px;
}
#content form input.text, textarea{
	margin:.5em .3em;
}
textarea{
	height:120px;
	width:350px;
	font-size:1.2em !important;
}
input.text, textarea{
	border:1px solid #eaeaea;
	margin-left:.3em;
	padding:.2em .5em;
	font-size:1em;
	color:#333;
}
input.but{
	margin-bottom:-.4em;
}
input.but:hover{
	position:relative;
	top:1px;
}
input.text.medium{
	width:10em;
}
input.text.large{
	width:14em;
}
input.text.small{
	width:7em;
}
/*table*/
table td{
padding:.3em;
}
table th{
font-weight:bold;
padding-right:.7em;
}
/* Inhaltselemente---------------------------------------------------*/
/*Umschließender Div*/
#wrap{
	margin:auto;
	position:relative;
	width:960px;
	background:#fff;
	text-align:left;
	border:1px solid #7b6e55;
}
/*Header-------*/
#header{
	height:13em;
	position:relative;
	background:url(images/bg-header.jpg) center center no-repeat;
}
#header #imagerow{
	float:right;
	margin-top:2em;
	margin-left:.3em;
	width:500px;
}
#header #imagerow img{
	float:right;
	margin-left:.3em;
}
#header #login{
	margin-top:4em;	/* margin-top:1em; */
	margin-right:10px;
	width:400px;
	text-align:right;
	float:right;
}
#line{
        height:5px;
        background:url(images/bg_line_header.gif);
}/* topanavi--------------------------------------- */
#topnavi{
	height:6.5em;
	background:#eef1e9;	
}
/* Tabs */
#topnavi #tabs{
	height:20px;
	margin-bottom:-.5em;
	width:960px;
	background:url(images/tab-bg.png) top left repeat-x;
	display:block;
}
#topnavi #tabs ul{
	margin-left:18em;
}
#topnavi #tabs ul li{
	background:url(images/tab.png) top left no-repeat;
	height:20px;
	float:left;
	margin:0;
	padding:3px 0 0 1.8em;
	text-transform:uppercase;
}
#topnavi #tabs ul li.on{
	background:url(images/tab-on-r.png) top left no-repeat;
}
#topnavi #tabs ul li.on a{
	color:#333;
}
#topnavi #tabs ul li a{
	color:#fff;
	text-decoration:none;
}
#topnavi #tabs ul li a:hover{
	color:#333;
}
/* aktive tab - muss als Body ID definiert werden!*/
	body#tab1 #topnavi .tab1,
	body#tab2 #topnavi .tab2,
	body#tab3 #topnavi .tab3,
	body#tab4 #topnavi .tab4,
	body#tab5 #topnavi .tab5,
	body#tab6 #topnavi .tab6
{
	background:url(images/tab-on-r.png) top left no-repeat;}
	body#tab1 #topnavi .tab1 a,
	body#tab2 #topnavi .tab2 a,
	body#tab3 #topnavi .tab3 a,
	body#tab4 #topnavi .tab4 a,
	body#tab5 #topnavi .tab5 a,
	body#tab6 #topnavi .tab6 a
{
	color:#333;}
/* wenn rechter Tab aktiv */
	body#tab1 #topnavi .tab2,
	body#tab2 #topnavi .tab3,
	body#tab3 #topnavi .tab4,
	body#tab4 #topnavi .tab5,
	body#tab5 #topnavi .tab6,
	body#tab6 #topnavi #tabs .last
{
	background:url(images/tab-on-l.png) top left no-repeat;}
	/* Links - für Suche */
#topnavi .left{
	width:20em;
	float:left;
}
/* Mitte - für Subnavigation */
#topnavi .sub{
	float:left;
}
#topnavi .sub ul li{
	float:left;
	margin-right:1em;
	padding-right:1em;
	color:#999;
	border-right:1px solid #999;
}
#topnavi .sub ul li a{
	color:#999;
	text-decoration:none;
}
#topnavi .sub ul li a:hover{
	text-decoration:underline;
}
#topnavi .sub ul li.on a{
	color:#333;
}
#topnavi .sub ul li.last{
	border:none;
}
/* Rechts - Schriftgröße ändern */
#topnavi .right{
	padding:0 1em 0 0;
	float:right;
	width:6em;
}
#topnavi .right p{
	margin:0 .3em 0 0;
	padding:0;
	color:#666;
	font-style:oblique;
}
#topnavi .right .textresizer{
	height:2.3em;
	width:2em;
	float:right;
	text-align:center;
}
#topnavi .right .textresizer.on,
#topnavi .right .textresizer.on:hover{
	background:url(images/icon-textresizer-on.gif) bottom center no-repeat;
}
#topnavi .right .textresizer:hover{
	background:url(images/icon-textresizer-hover.gif) bottom center no-repeat;
}

/* Breadcrumb Navi */
#breadcrumb{
	margin:.0em 0 .0em 0;
	padding:.1em 1em .2em 200px;	
	background:#fff;
}
#breadcrumb ul li{
	float:left;
	margin-right:1em;
	color:#999;
	padding-left:1em;
	font-size:.9em;
	background:url(images/icon-link-lightgrey.gif) 2px 4px no-repeat;
}
#breadcrumb ul li.on{
	font-weight:bold;
}
#breadcrumb ul li a{
	color:#999;
	text-decoration:none;
}
#breadcrumb ul li a:hover{
	text-decoration:underline;
}
#breadcrumb ul li.on a:hover{
	text-decoration:none;
}
/* Container - Umschließt Sidebars(r/l) und Content */
#container{
	width:960px;
	margin:0;	
}
/* Sidebar */
.sidebar{
	width:190px;
	margin:0;	
}
.sidebar .box{
	width:190px;
}
.sidebar .body,
#content .body{
	border:1px solid #eaeaea;
	border-bottom:4px solid #eaeaea;
	margin-bottom:1em;	
}
.sidebar .box h1{
	background:url(images/bg-sidebox-header.jpg) no-repeat;
}
/* Content */
#content{
	width:560px;
	margin-left:10px;
	float:left;	
}
#content .body{
	width:558px;
}
#content .box{
	width:560px;
}
#content .box h1{
	background:url(images/bg-content-header.jpg) no-repeat;
}

/* right-extended Content */
#content_extended{
	width:760px;
	margin-left:10px;
	float:left;	
}
#content_extended .body{
	width:758px;
}
#content_extended .box{
	width:760px;
}
#content_extended .box h1{
	background:url(images/bg-content-header-extended.jpg) no-repeat;
}

/*section - schließt mit Linie ab-------*/
p.section{
	border-bottom:1px solid #eaeaea;
}
div.section{
	border-bottom:1px solid #eaeaea;
	height:4em;
	margin:.5em 0;
	padding-top:.5em;
}
div.section.last{
	border:none;
	margin-bottom:0;
}
/* Navigation Kategorien */
#categories ul li a{
	display:block;
	border-bottom:1px solid #eaeaea;
	color:#333;
	text-decoration:none;		
}
#categories ul li a{
	padding:8px 0 8px 15px;
	display:block;
}
#categories ul li a:hover{
	text-decoration:underline;	
}
#categories ul li.level1 a{
	border-color:#eaeaea;	
}
#categories ul li.level1active{
	background:#eaeaea;
}
#categories ul li.level1active a{
	color:#fff !important;
	background:#88a941 url(images/icon-red-on.gif) no-repeat 3px 10px !important;	
}
#categories ul li.level1_sub{
	background:#eaeaea url(images/icon-categories-on1-2.gif) no-repeat 3px 10px;
}
#categories ul li.level2active{
	background:#ccc;
}
#categories ul li.level2active a{
	color:#fff !important;
	background:#88a941 url(images/icon-red-on.gif) no-repeat 20px 10px !important;	
}
#categories ul li.level2_sub{
	background:#ccc url(images/icon-categories-on1-2.gif) no-repeat 20px 10px;
}
#categories ul li.level3active{
	background:url(images/icon-categories-red.gif) no-repeat 34px center;
}
#categories ul li.level3active a{
	color:#fff !important;
	background:#88a941 url(images/icon-red-on.gif) no-repeat 34px center !important;	
}
#categories ul li.level2 a{
	background-image:none;
	border-bottom:none !important;		
	padding-left:32px;
	font-weight:normal;
	border-top:1px solid #fff !important;	
}
#categories ul li.level3 a{
	padding-left:45px;
	font-weight:normal;
	border-bottom:none !important;
	border-top:1px solid #fff !important;	
}

/* Button Rot und grau*/
.button a{
	padding:.1em .3em !important;
	text-transform:uppercase;
	color:#fff !important;
	border:1px solid;
	display:block;
	text-decoration:none;
	font-size:1.1em;
	margin:0 !important;
	text-align:center;
	-moz-border-radius:3px;
}
.button a:hover{
	position:relative;
	text-decoration:none !important;
	top:1px;
}
#content .productteaser.button{
	margin:0 6px;
}
.button{
	margin:.5em 1em;
}
.button.red a{
	background:#C3193D url(images/bg-button-red.gif) repeat-x;
	border-color:#C3193D;
}
.button.grey a{
	background:#666 url(images/bg-button-grey.gif) repeat-x;
	border-color:#666;
	font-size:.8em;
}
.sidebar .button a{
	margin:.5em 1em;
}
/* Produktteaser  */
#content .productteaser{
	width:170px;
	margin:1em 0;
	padding:0 7px;
	border-right:1px solid #eaeaea;
	float:left;
}
.sidebar .productteaser{
	width:190px;
	margin:1em 0;
	padding:.6em 0;
	border-bottom:1px solid #eaeaea;
}
.productteaser.last{
	padding-right:0px !important;
	border:none !important;
}
.productteaser p.image{
	height:110px;
	width:170px;
	vertical-align:middle;
	text-align:center;
	display:table-cell;
}

.productteaser .cost span{/*  Preis größer */
	font-size:2em;
	position:relative;
}
.productteaser .cost span span{/*  Centbetrag höher gestellt */
	position: absolute; 
	top:-3px;
	border-bottom:2px solid #c3193d;
	font-size:.5em !important;
}
.cost{
	font-family:Comic Sans MS;
	float:left;
	color:#c3193d !important;	
	margin:10px 0 10px 7px;
	font-size:1.3em !important;
	border-bottom:5px solid #5eaf4b;
	border-top:1px solid #5eaf4b;
		padding:5px;
	
}
.productteaser p{
	margin:5px 7px 5px 2px;
	padding:0;
	font-size:.8em;
}
.productteaser h2{
	text-transform:none;
	color:#666;
	background:#eaeaea;
	font-size:1em;
	padding:.2em .5em;
	margin:0;
}
.productteaser h2 a{
	color:#666;
}
/* Teaser für Startseite je Kategorie */
.startteaser{
	height:150px !important;
	border-bottom:1px solid #eaeaea;
	padding:0 1em 0 264px;
}
.startteaser h2{
	font-size:1.4em !important;	
}
.startteaser hr {
  background-color:#ccc;
  color:#ccc;
  border:#ccc;
  height:2px;
	margin:.2em .5em .2em 1.5em ;
	clear:both; 
}
/* Bild für Kategorie Tiere */
.startteaser.tiere{
	background:url(images/i-start-tiere.jpg) top left no-repeat;
}
/* Produkt-teaser-reihe */
 .st-product a{
   display:block;
	width:120px;
	text-align:center;
	text-decoration:none;
	float:left;
	padding:15px 0;
	border-right:1px solid #eaeaea;
}
 .st-product p{
	padding:0;
}
/* Pfeil */
 .st-forward a{
	background:url(images/icon-forward.jpg) no-repeat center center;
	height:120px;
	width:50px;
	text-indent:-999em;
	float:right;
}
 .st-forward a:hover{
	position:relative;
	top:1px;
}
/* Productimage auf Detailseite */
#productimage{
	float:left;
	width:280px;
	border-right:1px solid #eaeaea;
	border-bottom:1px solid #eaeaea;
	text-align:center;
}
#productimage .zoom{
	height:40px;
	text-align:right;
	padding:0 1em;
}
#productimage .big{
	margin:1em 0;	
}
#productimage .small{
	margin:1em 0;	
}
#productimage .small .preview{
	border:1px solid #eaeaea;
	float:left; 
	margin:0 .3em;
	text-align:center;
	padding:.3em;
}
#productdescription{
	float:right;
	padding:20px 10px;
	width:250px;
}
#productdescription .cost span{
	font-size:3.5em;
	position:relative;
}
#productdescription .cost span span{/*  Centbetrag höher gestellt */
	position: absolute; 
	top:-3px;
	border-bottom:2px solid #c3193d;
	font-size:.5em !important;
}
#productdescription p{
	padding:0;
	margin-bottom:1em;
}
/* Tabs Detailseite */
#detailtab ul{
	height:25px;
	margin-bottom:-3px;
	position:relative;
	z-index:10;
	white-space:nowrap;
}
#detailtab ul li{
	display:block;
	float:left;
	margin:0 .3em 0 0em;
}
#detailtab ul li{
	background:url(images/bg-tab-detail-l.gif) no-repeat top left;
}
#detailtab ul li a{
	background:url(images/bg-tab-detail-r.gif) no-repeat top right;
	color:#999;
	display:block;
	padding:4px 6px;
	text-decoration:none;
}
#detailtab ul li a:hover{
	text-decoration:none;
	color:#333;
}
#detailtab ul li.on{
	background:url(images/bg-tab-detail-l-on.gif) no-repeat top left !important;
}
#detailtab ul li.on a{
	background:url(images/bg-tab-detail-r-on.gif) no-repeat top right !important;
	color:#333;
}

/* Footer */
#footer{
	width:960px;
	position:relative;
	background:url(images/bg-footer.gif) top left no-repeat;
	border-bottom:4px solid #eaeaea;
	padding:.5em 0 1em 0;
	text-align:center;
	margin:2em 0;
}

#footer ul li{
	display:inline;
	margin-right:1em;
	padding-right:1em;
	color:#999;
	border-right:1px solid #999;
}
#footer ul li a{
	color:#999;
	text-decoration:none;
}
#footer ul li a:hover{
	text-decoration:underline;
}
#footer ul li.on a{
	color:#333;
}
#footer ul li.last{
	border:none;
}