@charset "UTF-8";
/* CSS Document */

/*verwendete farben*/

/****** #333333 = grau ******************/
/****** #678b3f = gruen *********/
/****** #CC0066 = pink/magenta ***************/



/* formate der tags */
/*******************************/

* {
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;	
}

body, html {
	margin-top:0;
	font-size:13px;	
}

form {
	/*background-color:#f2f4f1; /*#eaeae1;fcf1fc*/
}

body {
	color:#333333;
	background:url(layout/st.gif) #ffffff fixed;
}

abbr, acronym {
	border-bottom:dotted thin;
}

p  {
	font-size:13px;
	line-height:16px;  
	text-align:justify;
}




a {
	color:#678b3f;
	
}

a:hover {
	color:#CC0066;
}

img a:active {
	border:0px;
}

a:visited {
	color:#5d8333;
}
a.pdf {padding-left:16px;background: url(layout/pdf-icon.gif) no-repeat;}
a.doc {padding-left:19px;background: url(layout/doc-icon.gif) no-repeat;}
a.odt {padding-left:19px;background: url(layout/odt-icon.gif) no-repeat;}


h1,h2, h3, h4, h5 {
	line-height:18px;
}

h1 {
	font-size:8px;
	color:#678b3f;
}
 
h2 {
color:#c7295b;
/*letter-spacing:0.5px;*/
font-size:16px;
text-align: left;
 }

h2.grau {
	color:#333333;
	font-size:20px;
}

h3  {
	font-size:15px;
}

h3.detail  {
	color:#c7295b;
	font-size:14px;
}

h3.small  {
	font-size:12px;
	color:#CC0066;
}

h4 {
	color:#c7295b;
	font-size:14px;  
}
.block { /* verhindert zeilenumbruch nach blockelement */
display:inline;
}

h4 a img {
    color:#c7295b;
	font-size:14px; 
	text-decoration:none;
	border:none;
}
#kb h4{
font-size:12px;
color:#333333;
}
#kb h3{
font-size:14px;
}
h4 a {
	color:#c7295b;
	font-size:13px; 
	text-decoration:none;
	border:none;
}
h4 a:visited {
    color:#c7295b;
	font-size:13px; 
	text-decoration:none;
	border:none;
}
h4 a:hover {
	text-decoration:underline;
}

img {
	font-size:11px; /* this is for the alt ! */
	border:none;
}

/*table { border-collapse:collapse oder
border-collapse:separate; border-spacing:5px}
td { border:1px solid pink; }*/

/*td {vertical-align:top;}
img {border:none;}*/

hr {
	width:97%;
	height:1px;
	border:dotted #cccccc 1px;
	
}

ol {
line-height:20px;
}

ul {
line-height:20px;
list-style-image: url('layout/haken-k.gif');
}



/* content design*/
/*****************/

#content {
	padding-left:20px;
	padding-right:20px;
}



/* formate für die ids */
/***********************/

#outline {
	background:#FFFFFF;
	border:#eeeeee 1px solid;
	text-align:left;
}

#outline, #header, #navcontainer, #subnav, #navlist,  #navquick, #footer {
	width:930px; 
}

#content  {
	width:890px; 
	margin-bottom:20px;
}



/* brotkrümel/ subnav design */
/*****************/

#subnav {
	font-size:11px;
	height:25px;
}
#subnav {
	margin-bottom:10px;
}

#subnav p {
	padding-left:15px;
}



/* header und logo design*/
/*************************/

#header {
	background-color:#ffffff;
	height:145px;
	/*height:135px; height:165px;*/
	position:relative;
	z-index:0;
}

#header h2 {
	width:380px;
	height:50px;
	position:absolute;
	left:290px;
	top:16px;
	color:#c7295b;
	font-size:12px;	
	line-height:16px;  
	word-spacing:-1px;
}

#logo {
	width:231px;
	height:94px;
	position:absolute; 
	top:3px; 
	left:10px;
	margin:0; padding:0;  
}



/* hauptnavigation (registerblätter) */
/*****************************************/

.kochenohne {
	padding:0 0 0 20px;
	margin:0; list-style:none; 
	height:32px; 
	background:transparent url(layout/nav_back1.gif); 
	position:absolute; 
	/*top:104px;   top:134px;*/ 
	top:113px;
	width:910px; 
	z-index:50 ; 
}

.kochenohne li.top {
	display:block; float:left;
}

.kochenohne li a.top_link {
	display:block; 
	float:left; 
	height:29px; 
	line-height:28px; 
	color:#fff; 
	text-decoration:none; 
	font-weight:bold; 
	padding:0 0 0 10px; 
	cursor:pointer; 
	background: url(layout/nav_0a1.gif) no-repeat;
}

.kochenohne li a.top_link span {
	float:left; 
	display:block; 
	padding:0 20px 0 10px; 
	height:29px;
	background:url(layout/nav_0b1.gif) right top;
}

.kochenohne li a.top_link:hover {
	color:#333; 
	background: url(layout/nav_2a1.gif) no-repeat; 
	line-height:32px;
}

.kochenohne li a.top_link:hover span {
	background:url(layout/nav_2b1.gif) no-repeat right top;
}

.kochenohne li:hover > a.top_link {
	color:#fff; background: url(layout/nav_2a1.gif) no-repeat; line-height:28px;
}

.kochenohne li:hover > a.top_link span {
	background:url(layout/nav_2b1.gif) no-repeat right top;
}

.kochenohne table {
	border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;
}

/* style der liste oder link hover - abhängig vom browser */
.kochenohne a:hover {
	visibility:visible; 
	position:relative; 
	z-index:20;
}
.kochenohne li:hover {
	position:relative; z-index:20;
}

.kochenohne ul, .kochenohne iframe {
	position:absolute; 
	left:-9999px; 
	top:-9999px; 
	width:0; 
	height:0; 
	margin:0; 
	padding:0; 
	list-style:none;
	list-style-image:none;
}

/*rausklappende untermenues - grössenangabe*/
.kochenohne ul.unt1 {width:160px;}
.kochenohne ul.unt2 {width:130px;}
.kochenohne ul.unt3 {width:149px;}
.kochenohne ul.unt4 {width:175px;}
.kochenohne ul.unt5 {width:130px;}

/*rausklappende untemenues*/
.kochenohne :hover ul {
	left:1px; 
	top:29px; 
	background:#BD015F; 
	padding:3px;   
	white-space:nowrap; 
	height:auto; 
	z-index:60;
}
.kochenohne :hover ul li {
	display:block; 
	height:20px; 
	position:relative; 
	font-weight:normal; 
	width:auto;
}
.kochenohne :hover ul li a {
	display:block; 
	font-size:11px; 
	height:20px; 
	line-height:20px; 
	width:auto; 
	padding:0 10px; color:#fff; 
	text-decoration:none;}
	
.kochenohne :hover ul li a:hover {
	background:#D8287C; 
	color:#fff;
}

/*aktiver reiter*/
.kochenohne li a.top_link_active{
	display:block; 
	float:left; 
	height:29px; 
	line-height:28px;
	 color:#fff; 
	 text-decoration:none; 
	 font-weight:bold; 
	 padding:0 0 0 10px; 
	 cursor:pointer; 
	 background: url(layout/nav_2a1.gif) no-repeat;
}

.kochenohne li a.top_link_active span {
	float:left; 
	display:block; 
	padding:0 20px 0 10px; 
	height:29px;
	background:url(layout/nav_2b1.gif) right top;
}


.kochenohne :hover iframe.one {left:0; top:35px; width:150px; height:100px;}
.kochenohne :hover iframe.two {left:0; top:35px; width:100px; height:65px;}

/* navquickdesign (oben rechts) */
/*******************************/

#navquick {
	position:absolute;
	font-size:12px;	
	top:9px;
	width:280px;
	margin-left:655px;
}

#navquick ul {  
	list-style-type:none;
}

#navquick  ul li{
	float:left;
	padding-left:6px;	
	list-style-image:none;
}

#navquick ul li a {
	text-decoration:none;
	font-weight:normal;
	color:#678b3f;
}

#navquick a:hover {
	text-decoration:underline;
	color:#CC0066;
}

/* such-fenster */
/****************/
#suche {
	width:220px;
	margin-left:50px;
	margin-top:15px;
}


/* footerdesign */
/****************/

#footer {
	background:#c7295b;
	height:25px;
}

#footer p , #footer a {
	font-size:11px;
	text-align:right;
	padding-top:7px;
	color:#ffffff;
	padding-right:10px;
}

#footer link, #footer a:link {
	color:#fabcd0;
}

#kochen	{
	float:right;
	width:15%;
}
/* diverse klassen es gibt auch ein #weg mit display none: s. weiter u.*/
/*******************/

.klein {
	font-size:10px;
}

.hide {
  visibility:hidden;
}

.ohnedeco a {
	text-decoration:none;
	color:#333333;
}
.center {
text-align:center;
}

.greenb {
color:#678b3f;
font-weight:bold;
}

.greenbg { /*gruen, fett, gleiche optik wie h2 */
color:#678b3f;
font-weight:bold;
font-size:16px;
}

.pinkbg { /*pink, fett, gleiche optik wie h2 */
color:#c7295b;
font-weight:bold;
font-size:16px;
}

.piggy { /*pink, fett */
color:#c7295b;
font-weight:bold;
}

.piggyb { /*pink, fett, größer, kursiv, zentrier*/
color:#c7295b;
font-size:15px;
font-style:italic;
text-align:center;
}

.piggyc { /*pink, fett, center*/
color:#c7295b;
font-weight:bold;
text-align:center;
}

.pi { /*helles pink z.b. fuer zellenhintergrund tabelle*/
background-color:#fdecf7;
}

.pink { /* dunkles pinkz.b. fuer zellenhintergrund tabelle*/
background-color:#c7295b;
border:1px;
border-style: solid;
border-color:#dddddd;

}
.versteck {
visibility:hidden;
}

.gre { /*z.b. fuer zellenhintergrund tabelle*/
background-color:#f4fcea;
}

.gruen { /* dunkles gruen z.B. fuer zellenhintergrund tabelle*/
background-color:#678b3f;
border:1px;
border-style: solid;
border-color:#dddddd;
}

.table {
outline:1px;
border:2px;
border-style: solid;
border-color:#dddddd;
line-height:18px;
}
td { }

.table2 {

border:2px solid #dddddd;
line-height:18px;
}


.t2 {
border-bottom:1px;
border-style: solid;
border-color:#dddddd; 
}

.td {
border:1px;
border-style: solid;
border-color:#dddddd; 
}

.biggy {
font-weight:bold;

}
.big {font-weight:bold;font-size: 24px;}
.big2 {font-weight:bold;font-size: 23px;line-height:28px;}

#rechts {
    	float: right; 
    	width: 305px; 
    	background: #ffffff; /* Die Hintergrundfarbe wird nur für die Länge des Spalteninhalts angezeigt. */
    	padding: 0px 20px;
}
 /*#inhalt {
    	margin: 0 480px 0 0; 
    	padding: 0 20px; 
}*/
#icons {
padding-top: 30px;
text-align:right;
}

.hervorg {
font-size:14px;
color:#555; 
}
span.hervorg2 {
/*position:absolute;*/
font-size:14px;
/*line-height:10px;*/
}

ul.links {
list-style-image: url('layout/plus-m.gif');
}
ul.links li a {
font-size:15px;
line-height:22px;
}
/* bildunterschriften mittels definitionslisten*/
dl { 
display: table;
float: right;
width: auto;
margin: 10px;
background-color: #eee;
} 

dt img { 
width: auto;
height: auto;
display: block;
} 

dd {
padding: 3px;
margin: 3px;
font-size: 12px;
font-style:italic;
background-color: #fff;
color: #666;
}


.flowre { /* lässt element nach rechts fließen; das floatende element muss vor dem element stehen, neben dem es auf der seite erscheinen soll. */
float: right;
margin-left: 8px;
}

.flowli { /*lässt elemente nach links fließen*/
float: left;
margin-right: 8px;
}

/*listenansicht rezepte*/
.rtitel{
font-weight:bold;
color:#FF3399;
}

.rzutat {
color:#9900CC;
}

img .unten {
vertical-align:middle; 
}



/*detailansicht rezepte mit 3-spalten */
/*************************************/

#zutaten {
width:380px;
}

#info {
margin-right:20px;
text-align:left;
float:right;
}

#h1rezeptdetail{
float:left;
width:auto;
}

#titel2rezeptdetail{
	width:340px;
	float:right;
	background-color:#fff;
}


/*superschöner kommentar*/

.pullquote {
color:#c7295b;
font-size:15px;
line-height:15px;
margin:10px;
background: url(layout/p-closequote.gif) no-repeat bottom right !important;
background /**/:url(); /* removing quote graphic in IE5+ */
padding:0px 15px 5px 0px;
margin-top:15px;
}

.pullquote:first-letter {
background: url(layout/p-openquote.gif) no-repeat left top !important;
padding:0px 0px 0px 20px!important;
padding /**/:0px; /* resetting padding in IE5+ */
background /**/: url(); /* removing quote graphic in IE5+ */
}


/* 3-spalten */
    
.rezeptdetail #container { 
	width: 910px;  
	background: #FFFFFF;
	margin: 0 auto; /* durch automatische ränder (in verbindung mit einer Breite) wird die seite zentriert */
	text-align: left; 
} 
.rezeptdetail #linkespalte {
	float: left; 
	width: 180px; 
	background: #fff; /* hintergrundfarbe nur für die länge des spalteninhalts */
	padding: 0px 10px 15px 0px; /* dafür dass der Inhalt nicht die Kanten berührt */		
}

.rezeptdetail #rechtespalte {
	float: right; 
	width: 155px; 
	padding: 0px 20px 15px 10px; /* dafür dass der Inhalt nicht die Kanten berührt */
}

.rezeptdetail #mitte { 
	margin: 0 210px; /* rechter + linker rand dieses div = die beiden äußeren spalten. unabhängig von der Inhaltsmenge der spalten rechts und links gleichbleibend.  rand entfernen, falls der Text um die linke und rechte spalte laufen soll, wenn diese enden */
	padding: 0 10px;
}
.rezeptdetail #disclaimer {
	padding: 0px 20px 0px 0px; /* dafür dass der Inhalt nicht die Kanten berührt */
}

.clearfloat { /* sollte in ein div- oder break-Element als letztes element des gefloateten containers  */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/* übersichtstabelle rezepteseite*/
/*************************/
#aussen {width:740px; margin:0 auto;}

.angel {width:160px; height:180px; float:left; position:relative; font-family:arial, sans-serif;}
.qu1 {width:150px; height:180px; position:absolute; top:0; left:0; position:absolute;}
.qu1 a {display:block; width:150px; height:84px;position:absolute; left:5px; top:5px; border:0; text-decoration:none;}
.qu1 a span {display:none;}
.qu1 a img {display:block; width:150px; height:60px; border:0;}
.qu1 a:hover {left:0; top:0; border:1px solid #ccc; background:#f4f4f4; height:178px; width:150px;}
.qu1 a:hover img {display:none;}
.qu1 a:hover span {display:block; width:130px; height:60px; position:absolute; left:4px; top:4px; background:#fff; border:1px solid #ccc; overflow:hidden; font-size:11px; color:#666; padding:2px; line-height:13px; cursor:pointer;}

.qu2 {width:16px; height:16px; position:absolute; left:101px; top:73px;}
.qu2 a {display:block; width:200px; height:16px; overflow:hidden; background:url(cross.gif);}

.qu3 {width:150px; height:94px; position:absolute; left:5px; top:90px; padding-top:5px; font-size:11px;}
.qu3 p {color:#666; line-height:14px; margin:0; padding:0;}
.qu3 p a {text-decoration:none; color:#06c;}
.qu3 p a:hover {text-decoration:underline;}

/* formularformatierungen*/
/*************************/

#weg {
display:none;
}

.weg {
display:none;
}

#ver a span {
	display: none;
}

#ver a:focus span,  #ver a:active span {
	display: block;
	border:  0 none;
	padding: 1em;
	text-decoration: none;
	background-color: #99CCFF;
}

input, textarea {
 background: #eee;
 margin-top:6px;
 margin-bottom:6px;
}
input {
	vertical-align:middle;
}

fieldset {
margin-top:12px;
font-size:12px;
}

label, legend {
font-size:12px;

}

input:focus, textarea:focus {
color: #000;
background: #fff;
outline: 1px solid mediumvioletred;
 }
 
 
 /*formular-php-errormeldungsformatierungen  (used z.b. beim feedback)*/
 /**************************************************************************/
 
 .inputField { 
border-right: #ddd 1px solid; 
border-top: #ddd 1px solid; 
border-left: #ddd 1px solid; 
border-bottom: #ddd 1px solid; 
font-size: 9px; 
width: 350px; 
} 

.errorField {
border-right: #c7295b 1px solid;
border-top: #c7295b 1px solid;
border-left: #c7295b 1px solid;
border-bottom: #c7295b 1px solid;
font-size: 9px;
width: 350px;
background-color: #fdecf7;
} 

.errorTable {
font-size: 14px;
background-color: #fdecf7;
}  


#ohnezutatupdate ul li:hover, #mitzutatupdate ul li:hover {
	background-color:#ddd;
	cursor:pointer;
}

/* ############# STARTSEITE ################# */

#startlinks {
	width:560px;
}
#movie {
	width:300px;
	text-align:center;
}

#startrechts {
	float:right;
}

#zufall {
	width:450px;
}

#zufall img {
	margin:2px;
	vertical-align:middle;
}
#zufall a {
	line-height:35px;
	font-size:14px; 
}
#zufall a:hover {
	color:#CC0066;	
}

.linkbig a {
	color:#CC0066;
	font-size:16px;
}

.linkbig a:hover, .linkbig a:active {
	color:#678b3f;
}	

.linkbig p {
	margin-top:10px;
	text-align:left;
	line-height:20px;
}

span.ohnedeco img {
	vertical-align:middle;
}

.rezepteingeben {
	margin-top:30px;
	margin-left:40px;
}

#buttonsoben {
	top:80px;
	left:750px;
	position:absolute;
}
/* ############# rezept suche ################# */

.bordertr td {
	border-bottom:1px dotted #333;
}

#tabellezutat {
	border-collapse:collapse;
}

#tabellezutat tr, #tabellezutat td {
	height:180px;	
}
/* ############# klappen styling ################# */

#basic-klappen{
padding:0px;
width:478px;
height:500px;
}
.klappen_headings{
width:468px;
height:26px;
padding:10px 0 0 10px;
background:url(layout/tab.gif) no-repeat;
color:#8c7589;
cursor:pointer;
font-weight:bold;
margin:0 0 4px 0;
}
.klappen_headings:hover{
color:#4b2e47;
}
.klappen_child{
padding:0px;
}
.klappen_highlight{
color:#4b2e47;
}