/* 
========================================================
1.	Allgemeine Definitionen
2.	Seiten Layout
2.1	Header Layout
2.1.1	Sonne im Header Layout
2.1.2	Menue im Header Layout
2.1.2.1	oberen Menueteil im Header Layout
2.1.2.2	mittlerer Menueteil (Hauptmenu) im Header Layout
2.1.2.3	unterer Menueteil im Header Layout
2.1.3	Packung im Header Layout
2.2.	Content Layout
2.2.1	Submenu im Content Layout
2.2.2	Textbereich im Content Layout
2.2.2.1	Header vom Textbereich im Content Layout
2.2.2.2	Inhalt vom Textbereich (Placeholder) im Content Layout
2.2.2.3	Footer vom Textbereich im Content Layout
2.3	Footer Layout
3	PopDiv Layout
4	Einstiegsseite
======================================================== 
*/


* {
	margin: 0;
	padding: 0;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	list-style: none;
}
body {
	background: #40A0D3;
	font-size: 62.5%;
}

/* 
========================================================
1.	Allgemeine Definitionen
======================================================== 
*/

h1 {
	font-size: 130%;
	color: #00437f;
	font-weight: bolder;
	letter-spacing: 1px;
	margin: 0 0 10px 0;
}

h2 {
	font-size: 120%;
	color: #000000;
	margin: 20px 0 10px 0;
}

h3 {
	font-size: 110%;
	color: #000000;
	margin: 20px 0 10px 0;
	clear: left;
}

h4 {
	font-size: 100%;
	color: #000000;
	margin: 10px 0 10px 0;
	clear: left;
	line-height: 150%;
	font-weight: bold;
}

a {
	color: #00437f;
}
a:hover {
	color: #333;
}
a img {
	border: none;
}
span.nichtanzeigen{
	display: none;
}
/* 
========================================================
2.	Seiten Layout
======================================================== 
*/
div#wrap {
	width: 960px;
	margin: 10px auto;
	position: relative;
	min-height: 780px;
	border: 1px solid #056AA0;
}
*html div#wrap{
	height: 780px;
}
div#wrap a#bimbosanlink{
	position: absolute;
	display: block;
	height: 70px;
	width: 160px;	
	bottom: 15px;
	left: 780px;
}

/* === Hintergrundbild unten je nach Kategorie ausgeben === */
body.kategorie1 div#wrap {background: url(../layout/tasse1.jpg) bottom left no-repeat #007AC1;}
body.kategorie2 div#wrap {background: url(../layout/tasse2.jpg) bottom left no-repeat #007AC1;}
body.kategorie3 div#wrap {background: url(../layout/tasse3.jpg) bottom left no-repeat #007AC1;}
body.kategorie4 div#wrap {background: url(../layout/tasse4.jpg) bottom left no-repeat #007AC1;}
body.kategorie5 div#wrap {background: url(../layout/tasse5.jpg) bottom left no-repeat #007AC1;}
body.kategorie6 div#wrap {background: #007AC1;}

div#bimbosan{
	width: 960px;
	min-height:780px;
	background: url(../layout/bimbosan.gif) bottom right no-repeat;
}
*html div#bimbosan{
	height: 780px;
}
/* 
========================================================
2.1	Header Layout
======================================================== 
*/

div#header{
	width: 960px;
	height: 243px;
}

/* 
========================================================
2.1.1	Sonne im Header Layout
======================================================== 
*/
div#sonne{
	background: url(../layout/sonne.jpg) no-repeat;
	height: 243px;
	width: 263px;
	float: left;
}
div#sonne.fra{
	background: url(../layout/sonne_fra.jpg) no-repeat;
	height: 243px;
	width: 263px;
	float: left;
}
div#sonne a{
	display: block;
	width: 223px;
	height: 95px;
	margin: 95px 0 0 40px;
}

/* 
========================================================
2.1.2	Menue im Header Layout
======================================================== 
*/
div#menu{
	width: 518px;
	height: 243px;
	float: left;
}

/* 
========================================================
2.1.2.1	oberen Menueteil im Header Layout
======================================================== 
*/
ul#menuoben{
	height: 70px;
	width: 398px;
	background: url(../layout/navioben.jpg) no-repeat;
	padding: 40px 0 0 120px;
}
ul#menuoben li{
	float: left;
	padding: 0 10px 0 10px;
}
ul#menuoben li a{
	font-size: 120%;
	color: #FFFFFF;
}
ul#menuoben li a:hover{
	color: #ffe400;
}
ul#menuoben li a.aktiv{
	color: #ffe400;
}
/* 
========================================================
2.1.2.2	mittlerer Menueteil (Hauptmenu) im Header Layout
======================================================== 
*/
ul#menumitte{
	width: 518px;
	height: 76px;	
	background: url(../layout/navicontent_inaktiv.jpg) no-repeat;
}
ul#menumitte.fra{
	width: 518px;
	height: 76px;	
	background: url(../layout/navicontent_inaktiv_fra.jpg) no-repeat;
}
ul#menumitte li { 
	float: left; 
}
ul#menumitte a {
	display: block; 
	height: 76px; 
}

ul#menumitte a.Produkte, ul#menumitte a.ProdukteActive{width: 100px;}
ul#menumitte a.Wissen, ul#menumitte a.WissenActive{width: 100px;}
ul#menumitte a.Spass, ul#menumitte a.SpassActive{width: 100px;}
ul#menumitte a.Links, ul#menumitte a.LinksActive{width: 100px;}
ul#menumitte a.Kontakt, ul#menumitte a.KontaktActive{width: 100px;}

ul#menumitte a.Produits, ul#menumitte a.ProduitsActive{width: 100px;}
ul#menumitte a.Information, ul#menumitte a.InformationActive{width: 110px;}
ul#menumitte a.Fun, ul#menumitte a.FunActive{width: 90px;}
ul#menumitte a.Liens, ul#menumitte a.LiensActive{width: 100px;}
ul#menumitte a.Contact, ul#menumitte a.ContactActive{width: 100px;}

ul#menumitte a.Produkte:hover{background: url(../layout/navicontent_aktiv.jpg) no-repeat 0 0;}
ul#menumitte a.Wissen:hover{background: url(../layout/navicontent_aktiv.jpg) no-repeat -100px 0;}
ul#menumitte a.Spass:hover{background: url(../layout/navicontent_aktiv.jpg) no-repeat -200px 0;}
ul#menumitte a.Links:hover{background: url(../layout/navicontent_aktiv.jpg) no-repeat -300px 0;}
ul#menumitte a.Kontakt:hover{background: url(../layout/navicontent_aktiv.jpg) no-repeat -400px 0;}

ul#menumitte a.Produits:hover{background: url(../layout/navicontent_aktiv_fra.jpg) no-repeat 0 0;}
ul#menumitte a.Information:hover{background: url(../layout/navicontent_aktiv_fra.jpg) no-repeat -100px 0;}
ul#menumitte a.Fun:hover{background: url(../layout/navicontent_aktiv_fra.jpg) no-repeat -210px 0;}
ul#menumitte a.Liens:hover{background: url(../layout/navicontent_aktiv_fra.jpg) no-repeat -300px 0;}
ul#menumitte a.Contact:hover{background: url(../layout/navicontent_aktiv_fra.jpg) no-repeat -400px 0;}

ul#menumitte a.ProdukteActive{background: url(../layout/navicontent_aktiv.jpg) no-repeat 0 0;}
ul#menumitte a.WissenActive{background: url(../layout/navicontent_aktiv.jpg) no-repeat -100px 0;}
ul#menumitte a.SpassActive{background: url(../layout/navicontent_aktiv.jpg) no-repeat -200px 0;}
ul#menumitte a.LinksActive{background: url(../layout/navicontent_aktiv.jpg) no-repeat -300px 0;}
ul#menumitte a.KontaktActive{background: url(../layout/navicontent_aktiv.jpg) no-repeat -400px 0;}

ul#menumitte a.ProduitsActive{background: url(../layout/navicontent_aktiv_fra.jpg) no-repeat 0 0;}
ul#menumitte a.InformationActive{background: url(../layout/navicontent_aktiv_fra.jpg) no-repeat -100px 0;}
ul#menumitte a.FunActive{background: url(../layout/navicontent_aktiv_fra.jpg) no-repeat -210px 0;}
ul#menumitte a.LiensActive{background: url(../layout/navicontent_aktiv_fra.jpg) no-repeat -300px 0;}
ul#menumitte a.ContactActive{background: url(../layout/navicontent_aktiv_fra.jpg) no-repeat -400px 0;}

/* 
========================================================
2.1.2.3	unterer Menueteil im Header Layout
======================================================== 
*/
div#menu div#menuunten{
	width: 518px;
	height: 57px;
	background: url(../layout/naviunten.jpg) no-repeat;
}

/* 
========================================================
2.1.3	Packung im Header Layout
======================================================== 
*/
div#packung{
	background: url(../layout/packung1.jpg) no-repeat;
	height: 243px;
	width: 179px;
	float: left;
}

body.kategorie1 div#packung {background: url(../layout/packung12.jpg) no-repeat;}
body.kategorie2 div#packung {background: url(../layout/packung12.jpg) no-repeat;}
body.kategorie3 div#packung {background: url(../layout/packung3.jpg) no-repeat;}
body.kategorie4 div#packung {background: url(../layout/packung4.jpg) no-repeat;}
body.kategorie5 div#packung {background: url(../layout/packung5.jpg) no-repeat;}
body.kategorie6 div#packung {background: none;}
/* 
========================================================
2.2.	Content Layout
======================================================== 
*/
div#content{
	font-size: 110%;
	line-height: 150%;
}

div#content img#TitelBild{
	margin: 0 0 10px 0;
}

/* 
========================================================
2.2.1	Submenu im Content Layout
======================================================== 
*/
ul#submenu{
	width: 223px; /* plus 60px von Padding */
	background: url(../layout/sonneunten.jpg) no-repeat;
	float: left;
	padding: 25px 0 280px 60px;
}
ul#submenu li{
	padding: 2px 0 2px 0;
	width: 200px;
	border-bottom: 1px solid #006ba4;
}
ul#submenu li a{
	color: #FFFFFF;
	font-weight: bold;
	font-size: 105%;
	padding: 0 0 0 18px;
	letter-spacing: 1px;
	display: block;
	background: url(../layout/subnavi.gif) no-repeat 0px 2px;
}
ul#submenu li a:hover{
	color: #ffe400;
	background: url(../layout/subnavi_aktiv.gif) no-repeat 0px 2px;
}
ul#submenu li a.Active{
	color: #ffe400;
	background: url(../layout/subnavi_aktiv.gif) no-repeat 0px 2px;
}
ul#submenu li ul{
	margin: 2px 0 0 25px;
}
ul#submenu li ul li{
	width: 175px;
	border-top: 1px solid #006ba4;
	border-bottom: none;
}
ul#submenu li ul li a{
	font-size: 100%;
	background: none;
	padding: 0 0 0 5px;
}
ul#submenu li ul li a:hover{
	background: none;
}
ul#submenu li ul li a.Active{
	background: none;
}

/* 
========================================================
2.2.2	Textbereich im Content Layout
======================================================== 
*/
div#text{
	width: 610px;
	float: left;
}

/* 
========================================================
2.2.2.1	Header vom Textbereich im Content Layout
======================================================== 
*/
div#texthead{
	height: 26px;
	width: 610px;
	background: url(../layout/textboxoben.jpg) no-repeat;
}

/* 
========================================================
2.2.2.2	Inhalt vom Textbereich (Placeholder) im Content Layout
======================================================== 
*/
div#inhalt{
	width: 550px;
	background: url(../layout/textboxmitte.jpg) repeat-y;
	padding: 0 40px 0 20px;
}
div#inhalt a{
	text-decoration: underline;
}

div#inhalt a.buttonlink{
	text-decoration: none;
}
div#inhalt ul{
	margin: 0;
	padding: 0;
}
div#inhalt ul li{
	margin: 0 0 0 15px;	
	list-style: disc;
}

/* 
========================================================
2.2.2.3	Footer vom Textbereich im Content Layout
======================================================== 
*/
div#textbottom{
	width: 610px;
	height: 100px;
	background: url(../layout/textboxunten.jpg) no-repeat;
}

/* 
========================================================
2.3	Footer Layout
======================================================== 
*/
div#footer{
	clear: both;
	width: 920px;
	height: 100px;
}

/* 
========================================================
3	PopDiv Layout
======================================================== 
*/
a.popLink img {
	border: 1px solid #7d7d7d;
}

a.popLink {
	position: relative;
	display: block;
}

a.popLink span {
	display: none;
}

/* Achtung: RollOver ist auf Display: none, weil es im IE nicht richtig funktioniert, bitte beheben - zuem */
a.popLink:hover span {
	display: none;
	width: 440px;
	position: absolute;
	left: 1px;
	bottom: 13px;
	border-top: 1px solid #7d7d7d;
	padding: 2px 10px;
	background: #7d7d7d;
	color: #FFF;
}

div#inhalt a.popLink:hover {
	background: none;
}

div#PopDiv {
	position: absolute;
	border: 1px solid #7d7d7d;
	font-size: 11px;
	background: #FFF;
	padding: 4px;
}

div#PopDiv a {
	display: block;
	padding: 3px 15px;
	color: #FFF;
	background: #7d7d7d;
	border: 1px solid #7d7d7d;
	border-bottom: none;
}

div#PopDiv a:hover {
	background: #F2F2F2;
	color: #000;
}

div#PopDiv img {
	border: 1px solid #7d7d7d;
}
/* 
========================================================
4	Einstiegsseite
======================================================== 
*/

div#einstiegsseite{
	width: 800px;
	height: 644px;
	background: url(../layout/einstiegsseite.jpg) no-repeat;
	border: 1px solid #056AA0;
	margin: 10px auto;
	position: relative;
}
ul#einstiegsprachwahl{
	height: 70px;
	width: 398px;
	padding: 40px 0 0 300px;
}
ul#einstiegsprachwahl li{
	float: left;
	padding: 0 10px 0 10px;
}
ul#einstiegsprachwahl li a{
	font-size: 120%;
	color: #FFFFFF;
	font-weight: bold;
}
ul#einstiegsprachwahl li a:hover{
	color: #ffe400;
}
ul#sprachwahl-unsichtbar {
	
}
ul#sprachwahl-unsichtbar a {
	display: block;
	height: 20px;
	width: 300px;
}
ul#sprachwahl-unsichtbar a span {
	display: none;
}
ul#sprachwahl-unsichtbar li#sprachwahl-unsichtbar-deu {
	position: absolute;
	top: 300px;
	left: 250px;
	display: block;
	height: 20px;
	width: 300px;
}
ul#sprachwahl-unsichtbar li#sprachwahl-unsichtbar-fra {
	position: absolute;
	top: 320px;
	left: 250px;
	display: block;
	height: 20px;
	width: 300px;
}

div#einstiegsseite a#hauptlink{
	display: block;
	width: 500px;
	height: 300px;
	margin: 110px 0 0 170px;
}

div#einstiegsseite a#bimbosanlink{
	display: block;
	width: 125px;
	height: 60px;
	margin: 155px 0 0 650px;
}

a.facebook1 {
	background: url(../layout/facebook1.gif) no-repeat 0 0;
	color: #FFF;
	height: 30px;
	line-height: 30px;
	margin: -127px 0 0 744px;
	padding-left: 40px;
	position: absolute;
}
a.facebook1:hover {
	color: #ffe42a;
}