/*
blue: #213975
pink: #e20071
*/

/* -----------------------------------*/
/* --->>> helpers <<<-----------------*/
/* -----------------------------------*/
.width100{ width: 100%; }
.width75{ width: 75%; }
.width50{ width: 50%; }
.floatLeft{ float: left; }
.floatRight{ float: right; }
.alignLeft{ text-align: left; }
.alignRight{ text-align: right; }
/* -----------------------------------*/
/* --->>> reset blueprint <<<---------*/
/* -----------------------------------*/
div.box{ background-color: transparent; }
div.clear{ margin: 0; padding: 0; }
/* -----------------------------------*/
/* --->>> global <<<------------------*/
/* -----------------------------------*/
html{
  height:100%;
}
body{
  margin: 0;
  background: #efd8c9 url('../images/bg_body_ani.gif') center left repeat-x !important;
/*  background: #efd8c9 url('../bg_body_ani.gif') center left repeat-x;*/
  color: #213975;
  font-size: 12px;
}
a{
  outline: none;
  cursor: pointer;
}
a:link,
a:visited{
  color: #e20071;
  text-decoration: none;
}
a:hover,
a:active{
  color: #213975;
  text-decoration: underline;
}
div.mainContainer{
  height: 1px !important;
  left: 0px !important;
  overflow: visible !important;
  position: absolute !important;
  top: 50% !important;
  width: 100% !important;
}
div.container{
float: left;
  height: 600px;
  left: 50% !important;
  margin-left: -475px !important;  /***  width / 2   ***/
  position: absolute !important;
  top: -300px !important;          /***  height / 2   ***/
  width: 950px;
}
div.leftPanel, 
div.mainPanel{
  height: 570px;
}

div.leftPanel{
/* background: aqua; */
  width: 310px;
  padding: 0;
  overflow: hidden;
}


div.mainPanel{
/*  background: yellow; */
  overflow: hidden;
}

.blue{
  color: #213975;
  }
.pink {
  color: #e20071;
  }

/* topleft Logo */
div.leftTop{
  background: url('../images/logo_topleft.png') no-repeat top left;
  height: 108px;
}

/* main nav */
div.mainNav{
/*   margin: 28px 0 0 16px; */
  margin: 28px 0 0 0px;
}
ul.mainNav{
  list-style-type: none;
}
ul.mainNav li{
  height: 45px;
}
div.mainNav a:link,
div.mainNav a:visited{ /* global */
  display: block;
  height: 32px;
  text-indent: -999em;
  width: 178px;
}
div.mainNav a:hover{ /* global mouseover */
  background-position: 0 64px;
}
div.mainNav li.selected a{ /* selected */
  background-position: 0 32px !important;
}
div.mainNav a.prod, 
div.mainNav a.prod:link{
  background-image: url('../images/nav/prod.gif');
}
div.mainNav a.quali, 
div.mainNav a.quali:link{
  background-image: url('../images/nav/quali.gif');
}
div.mainNav a.shop, 
div.mainNav a.ahop:link{
  background-image: url('../images/nav/shop.gif');
}
div.mainNav a.design, 
div.mainNav a.design:link{
  background-image: url('../images/nav/design.gif');
}
div.mainNav a.ueber, 
div.mainNav a.ueber:link{
  background-image: url('../images/nav/ueber.gif');
}
/* main nav EOF */

/* footer */
div.siteFooter{
  background: url('../images/bg_footer_opacity.png');
  color: #fff;
  font-size: 15px;
  height: 30px;
  text-align: right;
  z-index: 2;
}
div.siteFooter a:link,
div.siteFooter a:visited{
  color: #fff;
}
div.siteFooter a:hover,
div.siteFooter a:active{
  color: #e20071;
  text-decoration: none;
}
div.siteFooter .pad{
  padding: 6px 15px 0 0;
}
div.siteFooter img{
  margin-left: 10px;
}
/* footer EOF */

a.backHome{ /* topleft Logo home link  */
  display: block;
  height: 116px;
  width: 310px;
}

a.backHomeSmall:link,
a.backHomeSmall:visited{ /* back home link */
  background: url('../images/home.gif') no-repeat;
  display: block;
  height: 23px;
  margin: 44px 0 0 0;
  text-indent: -999em;
  width: 75px;
}
a.backHomeSmall:hover{
  background-position: 0 0px;
}


/* Debug stuff*/
.red{
  background: red;
}
.green{
  background: green;
}
.blue{
  background: blue;
}
/* Debug stuff EOF */


/* scrollPanel */
div.scroll-pane div.hr{
  background: url('../images/scroll_hr.gif') no-repeat;
  height: 38px;
  margin: 10px 0;
  width: 380px;

}


/* -----------------------------------*/
/* --->>> Startseite <<<--------------*/
/* -----------------------------------*/
.indexLinks{
/* background: blue; */
}
.indexLinks .pad{
	padding-left: 50px;
}

.indexSlidePanel{
/* background: aqua; */
	height: 555px;
	position: relative;
}

.indexSlide{
/* 	background: url('../images/bg_indexslide.png') top left no-repeat !important; */
	background: transparent;
	overflow: hidden;
	position: absolute;
	bottom: 9px;
	height: 288px;
 	width: 153px;
}
/*
#slideshow{
	background: url('../images/bg_indexslide.png') top left no-repeat !important;
}
*/


.indexZuProdukte,
.indexZuProdukte:link{
	background: url('../images/sprite_link_produkte_button.png');
	background-position: 140px 135px;
	background-repeat: no-repeat;
	color: #e20071;
	display: block;
	font-size: 16px;
	height: 190px;
	line-height: 1.4em;
	margin-left: 28px;
	margin-top: 245px;
	width: 262px;
}
a.indexZuProdukte:hover{
	background-position: 140px -55px;
	background-repeat: no-repeat;
	color: #e20071;
	font-size: 16px;
	text-decoration: none;
}

a.indexZumShop,
a.indexZumShop:link{
  background: url('../images/index_zum_shop.png') no-repeat;
  display: block;
  height: 52px;
  margin: 50px 0 0 0;
  text-indent: -999em;
  width: 255px;
}
a.indexZumShop:hover{
  background-position: 0 -52px;
}
/* -----------------------------------*/
/* --->>> Produkte <<<----------------*/
/* -----------------------------------*/
div.produktItem{
  width: 99%;
}

/* -----------------------------------*/
/* --->>> Qualitaet <<<---------------*/
/* -----------------------------------*/


/* -----------------------------------*/
/* --->>> Shop <<<--------------------*/
/* -----------------------------------*/
a.prodShoplink,
a.prodShoplink:link{
  background: url('../images/prod_shoplink.gif') no-repeat;
  display: block;
  width: 170px;
  height: 22px;
  text-indent: -999em;
}
a.prodShoplink:hover{
  background-position: 0 -22px;
}

/* -----------------------------------*/
/* --->>> Design <<<------------------*/
/* -----------------------------------*/
/* Celine */
.cel_prod{
	background: url('../images/design/cel_all.png') no-repeat;
	height: 360px;
	margin: 205px 0 0 22px;
	position: absolute;
	width: 159px;
	z-index: 1;
}
div.prod1Lotion_c{background-position: 0 0;}
div.prod1Shampoo_c{background-position: -159px 0;}
div.prod1Dusche_c{background-position: -318px 0;}

div.prod1Lotion_p{background-position: 0 -360px;}
div.prod1Shampoo_p{background-position: -159px -360px;}
div.prod1Dusche_p{background-position: -318px -360px;}

/* Frida */
.fri_prod{
	background: url('../images/design/fri_all.png') no-repeat;
	height: 346px;
	margin: 3px 0 0 260px;
	position: absolute;
	width: 153px;
	z-index: 1;
}
div.prod2Lotion_c{background-position: 0 0;}
div.prod2Shampoo_c{background-position: -153px 0;}
div.prod2Dusche_c{background-position: -306px 0;}

div.prod2Lotion_p{background-position: 0 -346px;}
div.prod2Shampoo_p{background-position: -153px -346px;}
div.prod2Dusche_p{background-position: -306px -346px;}

/* Jaqueline */
.jaq_prod{
	background: url('../images/design/jaq_all.png') no-repeat;
	height: 367px;
	margin: 202px 0 0 450px;
	position: absolute;
	width: 172px;
	z-index: 1;
}
div.prod3Lotion_c{background-position: 0 0;}
div.prod3Shampoo_c{background-position: -172px 0;}
div.prod3Dusche_c{background-position: -344px 0;}

div.prod3Lotion_p{background-position: 0 -367px;}
div.prod3Shampoo_p{background-position: -172px -367px;}
div.prod3Dusche_p{background-position: -344px -367px;}

/* nav items */
a.navDusche,
a.navDusche:link{
  background: url('../images/design/nav/dusche.gif') no-repeat;
  display: block;
  height: 22px;
  text-indent: -9999em;
  width: 70px;
}
a.navDusche:hover, 
a.duscheActive{
  background-position: 0 -22px !important; 
}

a.navLotion,
a.navLotion:link{
  background: url('../images/design/nav/lotion.gif') no-repeat;
  display: block;
  height: 23px;
  text-indent: -9999em;
  width: 70px;
}
a.navLotion:hover,
a.lotionActive{
  background-position: 0 -22px !important; 
}

a.navShampoo, 
a.navShampoo:link{
  background: url('../images/design/nav/shampoo.gif') no-repeat;
  display: block;
  height: 23px;
  text-indent: -9999em;
  width: 70px;
}
a.navShampoo:hover, 
a.shampooActive{
  background-position: 0 -23px !important; 
}


a.button_typ_active{
  background-position: 0 -23px !important;
}

/*Typ = cooles Girl*/
a.button_typ_c, 
a.button_typ_c:link{
  background: url('../images/design/nav/typ_c.gif') no-repeat;
  display: block;
  height: 23px;
  text-indent: -9999em;
  width: 70px;
}
a.button_typ_c:hover, 
a.button_typ_c_active{
  background-position: 0 -23px !important; 
}
/*Typ = Prinzessin*/
a.button_typ_p, 
a.button_typ_p:link{
  background: url('../images/design/nav/typ_p.gif') no-repeat;
  display: block;
  height: 23px;
  text-indent: -9999em;
  width: 70px;
}
a.button_typ_p:hover, 
a.button_typ_p_active{
  background-position: 0 -23px !important; 
}



div.prod1Nav{/*Celine Nav*/
  margin: 400px 0 0 -40px;
  position: absolute;
  z-index: 2;
}
div.prod2Nav{/*Frida Nav*/
  margin: 135px 0 0 200px;
  position: absolute;
  z-index: 2;
}
div.prod3Nav{/*Jaqueline Nav*/
  margin: 415px 0 0 408px;
  position: absolute;
  z-index: 2;
}
/* nav items ende */

/* -----------------------------------*/
/* --->>> Ueber uns <<<---------------*/
/* -----------------------------------*/

/* -----------------------------------*/
/* --->>> Kontakt <<<-----------------*/
/* -----------------------------------*/
div.kontaktForm {
  margin-top: 50px;
}

div.kontaktForm .inputRow{
  line-height: 20px;
  margin: 0 0 10px 0;
  overflow: hidden;
  width: 460px;
}
div.kontaktForm input.textfield,
div.kontaktForm textarea.textfield{
  border: 1px solid #e20071;
  color: #213975;
  width: 300px;
  font-size: 13px;
}
div.kontaktForm textarea.textfield{
  height: 80px;
}
div.kontaktForm label{
  color: #e20071;
  display: block;
  font-size: 14px;
  width: 130px;
  float: left;
  clear: left;
  text-align: left;
}
div.kontaktForm input.submit{
  margin: 0 20px 0 0;
}

table.successSend{
  margin: 200px 0 0 0;
  width: auto;
}
td.successLeft{
  background: url('../images/thanks_left.gif') no-repeat;
  width: 38px;
  height: 41px;
  padding: 0;
  margin: 0;
}
td.successRight{
  background: url('../images/thanks_right.gif') no-repeat;
  width: 38px;
  height: 41px;
  padding: 0;
  margin: 0;
}
td.successCenter{
  background: url('../images/thanks_bg.gif') repeat-x;
  text-align: center;
  color: #e20071;
  font-size: 14px;
}

/* -----------------------------------*/
/* --->>> Weiterempfehlen <<<---------*/
/* -----------------------------------*/
div.empfehlForm {
  margin-top: 50px;
}

div.empfehlForm .inputRow{
  line-height: 20px;
  margin: 0 0 10px 0;
  overflow: hidden;
  width: 520px;
}
div.empfehlForm input.textfield,
div.empfehlForm textarea.textfield{
  border: 1px solid #e20071;
  color: #213975;
  width: 250px;
  font-size: 13px;
}
div.empfehlForm textarea.textfield{
  height: 80px;
}
div.empfehlForm label{
  color: #e20071;
  display: block;
  font-size: 12px;
  width: 230px;
  float: left;
  clear: left;
  text-align: left;
}
div.empfehlForm input.submit{
  margin: 0 20px 0 0;
}


#pane2{
overflow: visible;
}

#pane2{
/* display: none; */
}

ul.prodTabsList{
	list-style-type: none;
	margin: 35px 0 30px 0;
	overflow: hidden;
}

ul.prodTabsList li{
	float: left;
	height: 30px;
	margin-right: 20px;
	width: 150px;
}

a.prodTab{
	background: url('../images/sprite_prod_tabs.gif');
	display: block;
	height: 30px;
	text-indent: -9999em;
	width: 150px;
}
a#prodTab1{background-position: 0 30px;}
a#prodTab2{background-position: 150px 30px;}

/*active*/
ul.prodTabsList li a#prodTab1.active{background-position: 0 0 !important; cursor: default;}
ul.prodTabsList li a#prodTab2.active{background-position: 150px 0 !important; cursor: default;}

a:hover#prodTab1,
a:active#prodTab1{	background-position: 0 0;}
a:hover#prodTab2,
a:active#prodTab2{	background-position: 150px 0;}


#pane2{ /* hide pane#2 initially */
visibility:hidden;
}

.botright_girl_yes{
	background: url('../images/bg_prod_allgemein.png') bottom right no-repeat;
}
.botright_girl_no{
	background: none;
}

a.produkt_link_pfeil{
	background: url('../images/produkt_link_pfeil') center left no-repeat;
	display: block;
	height: 28px;
	line-height: 28px;
	margin: 0 0 0 200px;
	text-indent: -9999em;
	width: 28px;
}
div.social_links{
	height: 26px;
	margin-top: 10px;
	padding-right: 0 !important;
}
a#dbsLink{
	background: url(../images/Testsiegel_2011_trans_80x131.png) 0 0 no-repeat;
	bottom: 40px;
	display: block;
	height: 131px;
	left: 12px;
	overflow: hidden;
	position: absolute;
	width: 80px;
	text-indent: -999em !important;
}
a#dbsLink:hover{
	opacity: .8;
}
a#dbsLinkShop{
	background: url(../../../images/Testsiegel_2011_trans_54x88.jpg) 0 0 no-repeat;
	bottom: 185px;
	display: block;
	height: 88px;
	left: 177px;
	overflow: hidden;
	position: absolute;
	width: 54px;
	text-indent: -999em !important;
}
a#dbsLinkShop:hover{
	opacity: .8;
}