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

* { 
	margin:0;
	padding:0;
}

body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;	
}

h1 {
	/*height:60px;*/
	text-indent:-9999px;
	/*background-repeat:repeat-x;*/
}

h2 {
	margin-bottom:10px;
	/*background-color:#69F;*/ /*blau*/
}

h3 { /*ueberschrift für rezepte in akkordeon*/
	margin-top:0px 0px 15px 0px;
	padding-bottom:7px;
	color:#006;
}

h4 { /*fuer fliesstext*/
	padding:10px 0px 7px 0px;
}

h5 {
	font-size:20px;
	text-align:right;
	padding:10px 0px 7px 0px;
}

p {
	margin-bottom:8px;
	text-align:justify;
	line-height:20px;
	/*background-color:#FC6;*/
}

p a {
	color:#980A22;
	font-weight:bold;
}

p.rechts {
	margin-bottom:8px;
	text-align:right;
}

em {
	font-style:normal;
}

dfn {
	font-style:normal;
}
	
a {
	text-decoration:none;
}

a img {
	border:none;
}

hr {
	clear:both;
	margin:3px 0px 3px 0px;
}

span.floatl {
	float:right;
	width:350px;
	margin:0px 0px 10px 15px;
}

span.floatl img {
	border:1px solid #666;
	float:left;
	width:0px;
}

p span.floatl { /*bildunterschrift fuer grosse bilder auf meinen seiten*/
	font-size:12px;
	margin-top:5px;
	margin-bottom:20px;
	line-height:14px;
}

span.floatl img {
	margin-bottom:5px;
	width:350px;
	border:1px solid #666
}

/*---------Impressum-------*/

img.floatllarge {
	float:left;
	width:0px;
}

span.floatllarge {
	float:right;
	width:450px;
	margin:0px 0px 10px 15px;
}

p span.floatllarge {
	font-size:12px;
	margin-top:5px;
	line-height:14px;
}

span.floatllarge img {
	margin-bottom:5px;
	width:450px;
}

p.gedicht {
	white-space:pre;
}

.ueber {
	color:#006;
}



/*span.floatllarge img {
	width:450px;
}*/

div#container {
	position:relative;
	margin:20px auto;
	margin-bottom:600px;
	padding:0px 0px 0px 0px;
	width:1000px;
	/*height:300px;*/ /*keine Höhe angeben, damit der container flexibel bleibt*/
	border:2px solid #999;
	background-image:url(../bilder/schnoerkel7.jpg);
	background-repeat:no-repeat;
	background-position:bottom left;
	/*background-color:#FFC;*/
}

div#kopf {
	height:150px;
	width:1000px;
	margin:0px 0px 0px 0px;
	padding:0px;
	background-image:url(../bilder/kopf_f.jpg);
	background-repeat:no-repeat;
	background-color:#6F9;
}

div#content {
	margin:0px 0px 0px 140px;
	padding:20px 20px 5px 20px;
	background-image:url(../bilder/schnoerkel7a.jpg);
	background-repeat:no-repeat;
	background-position:bottom right;
	/*background-color:#00F;*/
}

div#startblume {
	float:left;
	width:135px;
	/*background-color:#F6C;*/
}

	

/*--------------------------beginn meiner horizontalen navigation-----------------------------------------*/
div#naviho {
	margin:0px 0px 0px 0px;
	height:34px;
	/*width:1000px;*/
	background-color:#980A22; /*lila*/
}

div#naviho ul {
	margin-left:139px;
	list-style:none;
	/*background-color:#00F*/ /*blau*/
}

div#naviho ul li {
	float:left;
	width:123px;
	/*background-color:#F60;*/
}
	
div#naviho ul li a {
	padding:8px 0px 1px 0px;
	height:25px;
	display:block;
	font-size:14px;
	text-decoration:none;
	font-weight:bold;
	text-align:center;
	color:#FFF; /* weiss*/
	/*background-image:url(regla33.png);
	background-repeat:no-repeat;*/
	background-color:#980A22; /*orange*/
}

div#naviho ul li a:hover {
	color:#600; /*orange*/
	background-color:#F2AAB1; /*gelb*/
}

div#naviho ul li a:active {
	color:#600;/* grau*/
}

div#naviho ul li a.aktivlink {
	font-weight:bold;
	color:#600;	
	background-color:#FFF; /*wie content*/
}

/*beginn meiner subnavi der unterseiten*/
div#subnavi {
	float:left;
	width:139px;
	background-color:#090;
}

div#subnavi ul {
	list-style:none;
}

div#subnavi ul li a {
	display:block;
	font-size:14px;
	text-decoration:none;
	font-weight:bold;
	text-align:center;
	color:#FFF;	
	padding:8px;
	background-color:#980A22;
	/*background-image:url(regla3.jpg);
	background-repeat:no-repeat;*/
}

div#subnavi ul li a:hover {
	color:#600; /*orange*/
	background-color:#F2AAB1;
}

div#subnavi ul li a:active {
	color:#600;
}

div#subnavi ul li a.aktivlink {
	font-weight:bold;
	color:#600;	
	background-color:#FFF;
}
/*ende meiner vertikalen Navigation*/




/*---------------------- vertikale navigation meiner unterseite getraenke-------------------------------*/
div#box1 a{
	position:absolute;
	top:180px;
	left:20px;
	display:block;
	width:120px;
	height:120px;
	z-index:1;
	background-image:url(../getraenke/navi_kaffee.png);
}

div#box1 a:hover {
	top:180px;
	left:10px;
	z-index:10;
	width:140px;
	height:140px;
	background-image:url(../getraenke/navi_kaffee_hover.png);
}

div#box1 a.aktivlinkkaffee {
	top:180px;
	left:10px;
	z-index:10;
	width:146px;
	height:140px;
	background-image:url(../getraenke/navi_kaffee_hover.png);
	background-repeat:no-repeat;
	/*background-color:#FDDA8F;*/
}

div#box2 a {
	position:absolute;
	top:305px;
	left:22px;
	display:block;
	width:120px;
	height:120px;
	z-index:1;
	background-image:url(../getraenke/navi_schoko.png);
}

div#box2 a:hover {
	top:305px;
	left:10px;
	z-index:10;
	width:140px;
	height:140px;
	background-image:url(../getraenke/navi_schoko_hover.png);
}

div#box3 a {
	position:absolute;
	top:425px;
	left:25px;
	display:block;
	width:120px;
	height:120px;
	z-index:1;
	background-image:url(../getraenke/navi_cock.png);
}

div#box3 a:hover {
	top:425px;
	left:10px;
	z-index:10;
	width:140px;
	height:140px;
	background-image:url(../getraenke/navi_cock_hover.png);
}

div#box4 a {
	position:absolute;
	top:550px;
	left:17px;
	display:block;
	width:120px;
	height:120px;
	z-index:1;
	background-image:url(../getraenke/navi_bowle.png);
}

div#box4 a:hover {
	top:550px;
	left:20px;
	z-index:10;
	width:140px;
	height:140px;
	background-image:url(../getraenke/navi_bowle_hover.png);
}
div#box5 a {
	position:absolute;
	top:675px;
	left:17px;
	display:block;
	width:120px;
	height:120px;
	z-index:1;
	background-image:url(../getraenke/navi_punsch.png);
}

div#box5 a:hover {
	top:675px;
	left:10px;
	z-index:10;
	width:140px;
	height:140px;
	background-image:url(../getraenke/navi_punsch_hover.png);
}

/*----------------------------------vertikale navigation meiner unterseite familienrezepte------------------------*/

div#box1r a{
	position:absolute;
	top:180px;
	left:20px;
	display:block;
	width:120px;
	height:120px;
	z-index:1;
	background-image:url(../fam_rezepte/navi_mutti.png);
}

div#box1r a:hover {
	top:180px;
	left:10px;
	z-index:10;
	width:140px;
	height:140px;
	background-image:url(../fam_rezepte/navi_mutti_hover.png);
}

div#box1r a.aktivlinkrezepte {
	top:180px;
	left:10px;
	z-index:10;
	width:146px;
	height:140px;
	background-image:url(../fam_rezepte/navi_mutti_hover.png);
	background-repeat:no-repeat;
	/*background-color:#FDDA8F;*/
}

div#box2r a{
	position:absolute;
	top:305px;
	left:22px;
	display:block;
	width:120px;
	height:120px;
	z-index:1;
	background-image:url(../fam_rezepte/navi_hagen.png);
}

div#box2r a:hover {
	top:305px;
	left:10px;
	z-index:10;
	width:140px;
	height:140px;
	background-image:url(../fam_rezepte/navi_hagen_hover.png);
}

div#box2r a.aktivlinkrezepte {
	top:180px;
	left:10px;
	z-index:10;
	width:146px;
	height:140px;
	background-image:url(../fam_rezepte/navi_hagen_hover.png);
	background-repeat:no-repeat;
	/*background-color:#FDDA8F;*/
}

/*----------------------------------vertikale navigation meiner unterseite spiel und spass------------------------*/

div#box1s a{
	position:absolute;
	top:180px;
	left:20px;
	display:block;
	width:120px;
	height:120px;
	z-index:1;
	background-image:url(../spiele/navi_baby.png);
}

div#box1s a:hover {
	top:180px;
	left:10px;
	z-index:10;
	width:140px;
	height:140px;
	background-image:url(../spiele/navi_baby_hover.png);
}

div#box1s a.aktivlinkrezepte {
	top:180px;
	left:10px;
	z-index:10;
	width:146px;
	height:140px;
	background-image:url(../spiele/navi_baby_hover.png);
	background-repeat:no-repeat;
	/*background-color:#FDDA8F;*/
}

div#box2s a{
	position:absolute;
	top:305px;
	left:22px;
	display:block;
	width:120px;
	height:120px;
	z-index:1;
	background-image:url(../spiele/navi_hoch.png);
}

div#box2s a:hover {
	top:305px;
	left:10px;
	z-index:10;
	width:140px;
	height:140px;
	background-image:url(../spiele/navi_hoch_hover.png);
}

div#box2s a.aktivlinkrezepte {
	top:180px;
	left:10px;
	z-index:10;
	width:146px;
	height:140px;
	background-image:url(../spiele/navi_hoch_hover.png);
	background-repeat:no-repeat;
	/*background-color:#FDDA8F;*/
}


/*-----------------------------foot----------------------------*/
div#foot {
	clear:both;
	width:990px;
	height:35px;
	padding-left:10px;
	background-color:#980A22; /*lila*/
}

div#foot p.text {
	float:left;
	padding:8px 0px 1px 0px;
	color:#FFF;
	/*width:120px;*/
}

div#foot p.text a:visited {
	color:#FFF;
	border:none;
}

div#foot ul {
	/*float:right;*/
	margin:0px 0px 0px 620px;
	list-style:none;
	height:28px;
	/*background-color:#936;*/
}

div#foot ul li {
	float:left;
	width:123px;
	text-align:right;
	/*background-color:#FF6;*/
}

div#foot ul li a {
	padding:8px 0px 1px 0px;
	height:26px;
	display:block;
	font-size:14px;
	text-decoration:none;
	font-weight:bold;
	text-align:center;
	color:#FFF; /* weiss*/
	/*background-image:url(regla33.png);
	background-repeat:no-repeat;*/
	/*background-color:#980A22;*/ /*orange*/
}
	
div#foot ul li a:hover {
	color:#600; /*orange*/
	background-color:#F2AAB1; /*gelb*/
}

div#foot ul li a:active {
	color:#600;/* grau*/
}

div#foot ul li a.aktivlink {
	font-weight:bold;
	color:#600;	
	background-color:#FFF; /*wie content*/
}


/*------------------------content-inhalt der startseite------------------------------*/


div#inhalt {
	padding:20px;
	padding-top:15px;
	height:400px;
	/*background-color:#FCF;*/ /*komisches lila*/
}

/*-------------------------------beginn meiner galerie auf der startseite-----------------------------*/
div#roll {
	margin-left:15px;
	overflow:auto;
}

ul#galerie {
	width:173px;
	overflow:auto;
	height:413px;
	list-style:none;
	background-color:#8F0119; /*orange*/
}

ul#galerie li {
	float:left;
	width:150px;
	height:109px;
	margin:2px;
	/*background-color:#6FF;*/
}

ul#galerie li a {
	display:block; /*Link ueber seine ganze Breite erstrecken*/
	height:111px;
	border:2px;
	/*background-color:#0F0;*/
}

/*---------- grosse Bilder (im span) --------*/

/*span im Normalzustand verstecken*/
ul#galerie li a span.grossbild {
	display:none;
}

/*span im hover-Zustand zeigen*/
ul#galerie li a:hover span.grossbild {
	display:block;
	position:absolute;
	top:387px;
	right:80px;
	width:500px;
	height:400px;
	background-color:#FFC; /*orange*/
}

ul#galerie li a span.grossbild img {
	border:none;  /*Rahmen um das Bild entfernen, der bei Verlinkung entsteht*/
}

/*Bildunterschrift im span*/
ul#galerie li a span.grossbild span.bildtext {
	display:block;
	padding-top:-10px;
	text-align:center;
	color:#000;
	/*background-color:#F9C;*/
}

/*kleine Bilder*/
ul#galerie li a.bild01 {
	border:2px solid #8F0119;
	background-image:url(../feste/achtzehn/start_sm1.jpg);
}

ul#galerie li a.bild01a {
	display:none;
}
	
ul#galerie li a.bild02 {
	border:2px solid #8F0119;
	background-image:url(../feste/sechzig/start_sm1.jpg);
}

ul#galerie li a.bild02a {
	display:none;
}

ul#galerie li a.bild03 {
	border:2px solid #8F0119;
	background-image:url(../feste/hagen/start_sm1.jpg);
}

ul#galerie li a.bild03a {
	display:none;
}

ul#galerie li a.bild04 {
	border:2px solid #8F0119;
	background-image:url(../feste/halloween/start_sm1.jpg);
}

ul#galerie li a.bild04a {
	display:none;
}


ul#galerie li a.bild05 {
	border:2px solid #8F0119;
	background-image:url(../feste/disco/start_sm1.jpg);
}

ul#galerie li a.bild05a {
	display:none;
}

ul#galerie li a.bild06 {
	border:2px solid #8F0119;
	background-image:url(../feste/jenny/start_sm1.jpg);
}

ul#galerie li a.bild06a {
	display:none;
}

ul#galerie li a.bild07 {
	border:2px solid #8F0119;
	background-image:url(../feste/weih/start_sm1.jpg);
}

ul#galerie li a.bild07a {
	display:none;
}

/*Bildbox fuer standild*/

div#bildbox {
	width:460px;
	height:380px;
	margin-left:140px;
	margin-top:-450px;
	margin-bottom:45px;
	padding:0px;
	text-align:center;
	/*background-color:#0F3;*/ /*rot*/
}

div#text {
	width:490px;
	padding:5px;
	height:40px;
	text-align:center;
	/*background-color:#3FF;*/
}
/*--------------------------------ende meines content-inhalts der startseite----------------------------------*/


/*start meiner kaffeeunterseite rezepte*/

div#Accordion1 {
	width:820px;
	margin-bottom:20px;
}
 
.Accordion {
	border-left: solid 1px gray;
	border-right: solid 1px black;
	border-bottom: solid 1px gray;
	overflow: hidden;
}

.AccordionPanel {
	margin: 0px;
	padding: 0px;
}

.AccordionPanelTab {
	border-top:solid 1px black;
	border-bottom:solid 1px gray;
	margin:0px;
	/*margin-bottom:4px;*/
	padding-left:10px;
	font-variant:small-caps;
	font-weight:bold;
	font-size:20px;
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	cursor:pointer;
	color:#FFF;
	-moz-user-select:none;
	-khtml-user-select:none;
	background-color:#980A22;
}

.AccordionPanelContent {
	overflow:auto;
	margin:0px 0px 0px 7px;
	padding:0px;
	height:200px;
}

/*.AccordionPanelContent h3 {
	margin-top:10px;
	font-size:18px;
	color:#009
}*/

.AccordionPanelContent span {
	font-variant:small-caps;
	font-weight:bold;
}

.AccordionPanelOpen .AccordionPanelTab {
	font-variant:small-caps;
	font-weight:bold;
	color:#980A22;
	background-color:#F2AAB1;
}

.AccordionPanelTabHover {
	font-variant:small-caps;
	font-weight:bold;
	color:#980A22;
	background-color:#F2AAB1;
}
.AccordionPanelOpen .AccordionPanelTabHover {
	font-variant:small-caps;
	font-weight:bold;
	color:#980A22;
	background-color:#F2AAB1;
}

.AccordionFocused .AccordionPanelTab {
	font-variant:small-caps;
	font-weight:bold;
	/*color:#FFF;*/
	background-color:#980A22;
}

.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
	font-variant:small-caps;
	font-weight:bold;
	color:#980A22;
	background-color:#F2AAB1;
}

img.rezept {
	/*float:left;*/
	width:140px;
	border:1px solid #666;
	/*padding:5px 7px 0px 0px;*/
}

div.zutaten {
	float:left;
	width:230px;
	padding:15px 0px 0px 10px;
	/*background-color:#6F6;*/ /*gruen*/
}

div.bild {
	float:left;
	width:130px;
	padding-top:15px;
	/*background-color:#6FF;*/ /*blau*/
}

div.zuber {
	margin-left:410px;
	padding:15px 25px 7px 15px;
	/*background-color:#F90;*/ /*orange*/
}

/*ende meiner Kaffeeunterseite*/

/*mein kontaktformular*/
div#formular {
	/*width:775px;*/
	/*margin-left:250px;*/
	/*background-color:#6C9;*/
}

div#kasten {
	width:380px;
	/*border-color:#333;*/
	padding:10px;
	margin-bottom:10px;
	margin-top:20px;
	border:2px solid #999;
	background-color:#F6DEDE; /*gruen*/
}

div#kasten.kontaktfloat {
	float:right;
	width:380px;
	margin-bottom:10px;
	margin-top:0px;
	padding:10px;
	/*background-color:#909;*/ /*lila*/
}

div#kasten label {
	display:block;
	float:left;
	width:100px;
	/*background-color:#F90;*/ /*orange*/
}

legend {
	font-size:12px;
	font-weight:bold;
}

div#kasten input.eingabe {
	margin-bottom:10px;
	width:180px;
	background-color:#09F; /*blau*/
}

div#kasten textarea {
	width:250px;
	height:150px;
	font-family:Arial, Helvetica, sans-serif;
	padding:10px;
}

kasten select {
	width:200px;
}

input.button {
	background-color:#cad13a;
	padding:5px;
	margin-top:5px;
}

input.button:hover {
	background-color:#F2AAB1;
	color:#fff;
}

input.button:active {
	border-top-color:#999;
	border-left-color:#999;
	border-bottom-color:#CCC;
	border-right-color:#ccc;
}

legend {
	font-size:12px;
	font-weight:bold;
}

div#kasten input.eingabe {
	margin-bottom:10px;
	width:180px;
}

div#kasten textarea {
	width:340px;
	height:115px;
	font-family:Arial, Helvetica, sans-serif;
	padding:10px;
}

div#kasten select {
	width:200px;
}

input.button {
	color:#FFF;
	font-weight:bold;
	padding:5px;
	margin-top:5px;
	background-color:#980A22;
}

input.button:hover {
	font-weight:bold;	
	color:#600;
	cursor:pointer;
	background-color:#F2AAB1;
}

input.button:active {
	border-top-color:#999;
	border-left-color:#999;
	border-bottom-color:#CCC;
	border-right-color:#ccc;
}

p.kontakt {
	font-weight:bold;
}

p.name {
	font-size:12px;
}

/*meine diashow auf der getraenkeseite, trinkenbilder_html*/
div#diashow {
	margin:20px auto;
	width:500px;
	background-color:#FFC;
	padding:20px;
}

h4.dia {
	padding:40px 0px 0px 0px;
	font-size:18px;
	color:#980A22;
	text-align:center;
}

p.dia {
	padding-top:10px;
	text-align:center;
	font-size:14px;
	color:#006;
}

/*-------------------meine gedichteseiten-------------------------*/

div#gedicht {
	position:absolute;
	bottom:35px;
	right:70px;
}

div#gedicht.tee {
	position:absolute;
	bottom:35px;
	right:0px;
}

div#gedicht.mutter {
	position:absolute;
	top:300px;
	right:230px;
}

div#gedicht.fuss {
	position:absolute;
	bottom:20px;
	right:180px;
}

div#gedicht.welt {
	position:absolute;
	top:250px;
	right:80px;
}

/*div#gedicht.welt img {
	border:1px solid #666;
}*/

div#ini {
	position:absolute;
	top:230px;
	left:250px;
}

h4.gedicht {
	text-indent:-999px;
}
	
p.gedicht {
	padding:120px 0px 0px 140px;
	color:#980A22;
	padding-bottom:10px;
}

/*h2 a {
	font-weight:normal;
	text-decoration:none;
}*/

/*img {
	float:left;
	margin-right:20px;
}
	
p {
	margin-bottom:20px;
}*/

/*-----------------------------bereich tooltipp-----------------------------*/

div#blumenleiste {
	background-color:#C3C; /*lila*/
}

div.blumen {
	position:relative;
	float:left;
	width:72px;
	height:72px;
}

div.blumen a.tooltip {
	display:block;
	width:72px;
	height:72px;
	background-image:url(../bilder/einzelb.gif);
}

div.blumen a:hover.tooltip span {
	top:20px;
	left:10px;
	z-index:10;
}

/*div.blumen a:hover.tooltipbild span {
	top:40px;
	left:10px;
	z-index:10;
}*/

div#blume1 {
	margin-top:10px;
	margin-left:70px;
}

div#blume2 {
	margin-top:30px;
	margin-left:60px;
}

div#blume3 {
	margin-top:20px;
	margin-left:60px;
}

div#blume4 {
	margin-top:5px;
	margin-left:80px;
}

div#blume5 {
	margin-top:20px;
	margin-left:100px;
}

/*----------------------------------------------------auf festtafel--------------------------------*/
/*div#tool {
	position:absolute;
	bottom:30px;
	left:10px;
	width:100px;
	height:105px;
	background-image:url(sonnen.gif);
	background-color:#69F;
}*/

/*span verstecken*/
a.tooltip span {
	display:none;	
}

/*span zeigen*/
a:hover.tooltip span {
	position:absolute;
	top:50px;
	left:0px;
	display:block;
	width:235px;
	padding:10px;
	border:1px solid #900;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size:12px;
	color:#980A22;
	text-align:center;
	white-space:normal; /*wieder aufheben, damit der Text wieder zu sehen ist*/
	background-color:#F2AAB1;
}

a.tooltip {
	/*position:relative;*/
	color:#009;
	text-decoration:none;
	white-space:nowrap; /*um einen Umbruch zwischen hier testen zu verhindern*/
	font-weight:bold;
}

a.tooltip img {
	margin-bottom:8px;
}

/*------------------tooltip im textfluss---------------*/

/*div#toolfluss {	
	background-image:url(sonnen.gif);
	background-color:#69F;
}*/


div#blume {
	position:absolute;
	top:210px;
	left:-40px;
	/*width:160px;*/
	/*padding:10px;
	border:2px solid #666;
	background-image:url(einzelb.gif);
	background-repeat:no-repeat;*/
}

/*tooltip fuer schild auf auf startseite*/

div#toolklick {
	position:absolute;
	top:190px;
	left:-70px;
	width:100px;
	height:105px;
	/*background-image:url(sonnen.gif);*/
	/*background-color:#69F;*/
}

/*span verstecken*/
a.tooltipklick span {
	display:none;	
}

/*span zeigen*/
a:hover.tooltipklick span {
	position:absolute;
	top:180px;
	left:0px;
	display:block;
	width:235px;
	padding:10px;
	border:1px solid #900;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size:12px;
	color:#980A22;
	text-align:center;
	white-space:normal; /*wieder aufheben, damit der Text wieder zu sehen ist*/
	background-color:#F2AAB1;
}

a.tooltipklick {
	/*position:relative;*/
	color:#009;
	text-decoration:none;
	white-space:nowrap; /*um einen Umbruch zwischen hier testen zu verhindern*/
	font-weight:bold;
}