/* =====================================
Stylesheet "Florian Grand Cafe"
Datum: 15.04.08
Autor: Thorsten Wessels

Aufbau:	1. Allgemeine Styles
		2. Styles für Grund-Layout
		3. Design Styles
=====================================*/

/* ========================
	1. Allgemeine Styles	
	=====================*/
	
	* {
		margin: 0;
		padding: 0;
	}
	
	body {
		background-image: url(layout/bgoben.jpg);
		background-repeat: repeat-x;
		background-color: #160a0a;
		color: #3f3e3e;
		font-family: Georgia, Times, Verdana, Arial, Helvetica, sans-serif;
		font-size: 14px;	
		text-align: left;
	}
	
	h1 {
		color: #160a0a;
		font-size: 20px;
		font-weight: normal;
		font-style: italic;	
		text-align: right;	
		margin-right: 240px;
	}
	
	h2 {
		color: #160a0a;
		font-size: 16px;
		font-weight: normal;
		font-style: italic;	
		text-align: left;	
	}
	
	h3 {
		color: #160a0a;
		font-size: 20px;
		font-weight: normal;
		font-style: italic;	
		text-align: left;	
		margin-right: 240px;
	}
	
	h4 {
		color: #160a0a;
		font-size: 16px;
		font-weight: normal;
		font-style: italic;	
		text-align: left;	
		margin-right: 240px;
	}
	
	h1, h2, h3, h4, p { padding-bottom: 1em; }
	
	img {
		border: 0;
	}
	
	p {
		margin-right: 240px;
		text-align: left;
	}
	
	/* ====================
		Hyperlinks		 */	
	
	a { 
		color: #b8170d;
		text-decoration: none; 
	}
	
	a:hover {
		color: #ede6ba;
		text-decoration: underline;
	}

/* ==============================
	2. Styles für Layoutbereiche	
   ============================*/
   
   #gesamtkasten {
   		position: relative;
		width: 1000px;
	}
	
	#kasten {
   		width: 680px;
		height: auto;
		margin-left: 280px;
   }
   
   #kopfbereich {
   		background-image: url(layout/oben.jpg);
		background-repeat: no-repeat;
		width: 680px;;
		height: 260px;
   }
   
   #navigation {
   		position: absolute;
		width: 130px;
		color: #b8170d;
		left: 130px;
		top: 300px;
		text-align: right;
		font-size: 18px;
		line-height: 25px;
   }
   		#navigation li {
			list-style-type: none;
		}
		
		#navigation a span {
			display: none;
		}
		
		#navigation a:hover span {
		   display: block;
		   position: absolute; 
		   top: 10px; 
		   left: 670px; 
		   width: 165px;
		   padding: 5px; 
		   color: #b8170d; 
		   background: #160a0a;
		   font: 16px Georgia, Times, serif, Verdana, sans-serif; 
		   text-align: left;
		   text-decoration: none;
		   border: 0;
  		}
		
		.indexcontent a:hover {
			color: #000000;	
		}
		
		#impressum {
			position: absolute;
			color: #b8170d;
			left: 810px;
			top: 245px;
			text-align: right;
			font-size: 18px;
			line-height: 25px;
		}
		
			#impressum li {
				list-style-type: none;
			}
	
			#impressum a span {
				display: none;
			}
		
			#impressum a:hover span {
			   display: block;
			   position: absolute; 
			   top: 66px; 
			   left: -10px; 
			   width: 165px;
			   padding: 5px; 
			   color: #b8170d; 
			   background: #160a0a;
			   font: 16px Georgia, Times, serif, Verdana, sans-serif; 
			   text-align: left;
			   text-decoration: none;
			   border: 0;
  			}
			
			#impressum a:hover {
				color: #b8170d;
			}
			
			#gutschein {
				position: absolute;
				left: 810px;
				top: 430px;
			}
			
			#gutschein a span {
				display: none;
			}
		
			#gutschein a:hover span {
			   display: block;
			   position: absolute; 
			   top: -120px; 
			   left: -10px; 
			   width: 165px;
			   padding: 5px; 
			   color: #b8170d; 
			   background: #160a0a;
			   font: 16px Georgia, Times, serif, Verdana, sans-serif; 
			   text-align: left;
			   text-decoration: none;
			   border: 0;
  			} 
			
			#galerie a span {
				display: none;
			}
		
			#galerie a:hover span {
			   display: block;
			   position: absolute; 
			   top: 310px; 
			   left: 800px; 
			   width: 165px;
			   padding: 5px; 
			   color: #b8170d; 
			   background: #160a0a;
			   font: 16px Georgia, Times, serif, Verdana, sans-serif; 
			   text-align: left;
			   text-decoration: none;
			   border: 0;
  			}

   
   #inhalt {
   		background-image: url(layout/mitte.jpg);
		background-repeat: repeat-y;
		padding-left: 50px;
		text-align:left;

   }
   
   #fussbereich {
   		background-image: url(layout/unten.jpg);
		background-repeat: no-repeat;
		width: 580px;
		height: 100px;
		padding-left: 100px;
		padding-top: 30px;
		color: #160a0a;
   }
   


/* ====================================
	3. sonstige Styles	
	=================================*/
	
	/* ====================
		Index			   */
		
		#index {
			color: #160a0a;
		}
		
		.indexcontent {
			color: #160a0a;
			margin-left: 15px;
		}
		
		#newsletter a {
			color: #160a0a;
		}
		
		#newsletter a:hover {
			color: #b8170d;
		}
		
		#newsformular {
			margin-left: 80px;
		}
		
	/* ====================
		Über uns 	      */	
		
		#unsbild1 {
			float: left;
			margin-top: -20px;
		}
		
		#unsbild2 {
			float: right;
			margin-top: -10px;
			margin-right: 210px;
			padding-left: 5px;
		}
	
		#unsbild3 {
			float: left;
			margin-top: -25px;
			padding-right: 5px;
		}
		
	/* ====================
		Speisen / Getränke */
		
		table {
			margin-top: 10px;
			margin-left: 15px;
		}
		
		.gelb {
			color: #ede6ba;
			font-weight: bold;
			padding-left:5px;
		}
		
		.braun {
			color: #160a0a;
			font-weight: bold;
		}
		
		.braun2 {
			color: #160a0a;
			font-weight: bold;
			text-decoration: underline;
		}
		
		.braun3 {
			color: #160a0a;
		}
		
		#gewaehr {
			margin-top: 40px;
			margin-left: 15px;
		}
		
		#auswaehlen {
			margin-left: 15px;
		}
		
		#getraenkebild {
			float: right;
			margin-right: 270px;
		}
		
		#speisenbild {
			float: right;
			margin-right: 220px;
		}
	
	/* ====================
		Jobben           */
		
		#job {
			float: left;
		}
		
		#jobinfo {
			margin-top: 30px;
			margin-left: 180px;
		}
		
		#jobemail {
			margin-left: 180px;
		}
		
			#jobemail a:hover {
				color: #160a0a;
			}
			
	/* ====================
		Jobben-Formular  */
	
		#formular {
			border: 1px dotted #160a0a;
			height: 520px;
			margin-top: 40px;
			width: 410px;
		}
		
		.links {
			float: left;
			width: 120px;
			margin-bottom: 10px;
			margin-left: 10px;
		}
		
		.rechts {
			float: left;
			width: 170px;
			margin-bottom: 10px;
		}
			
		.formzeile {
			clear: both;
		}
		
		#auswahl { width: 230px;}
		
		#eingabe {
			height: 120px;
			width: 230px
		}
		
		.fehler {
			color: red;
			font-size: 10px;
		}
		
		#button { margin-left: 3px; }
		
		form p { 
			margin-left: 10px; 
			margin-top: 10px;	
		}
		
		#job {
			width: 120px;
		}	
		
		#tag {
			width: 42px;
		}
		
		#monat {
			width: 42px;
		}
		
		#jahr {
			width: 57px;
		}
	
	/* ====================
		Kontakt           */
		
		#kontakt {
			color: #160a0a;
		}
		
		#kontakt a:hover {
			color: #160a0a;
		}	
	
	/* ====================
		Gutschein         */
		
		#gutscheintext {
			color: #160a0a;
			font-size: 16px;
			font-weight: normal;
			font-style: italic;	
			text-align: right;
			margin-right: 220px;	
		}
	
	/* ====================
		Impressum         */
		
		.impressum {
			line-height: 40px;
			color: #160a0a;	
		}
		
		#impressadr {
			color: #160a0a;
			margin-bottom: 30px;
			margin-right: 240px;
			text-align: right;
		}
		
		#impressadr a:hover {
			color: #160a0a;		
		}
		
		#implinks {
			float: left;
		}
		
	/* ====================
		Tool-Tipps       */	
		

		.karte a:hover {	
			position: relative;
			text-decoration: none;
			color: #b8170d;
		}
		
		.karte a span {
			position: absolute;
			top: 2em;
			left: 2em;
			display: block;
			visibility: hidden;
			padding: 10px;
			width: 200px;;
			border: 1px solid #000;
			background-color: #eee;
			color: #000;
			font-size: 12px;
		}
		
		.karte a:hover span {
			visibility: visible;
			display: block;
			left: 30px;
			width: 250px;
			color: #160a0a;
			border: 1px solid;
			border-color: #160a0a #160a0a #160a0a #160a0a;
			border-left: 8px solid #b8170d;
			padding: 2px 10px 10px 10px;
			background: #ffffff;
			font-family: Verdana, Arial, Helvetica, Sans-serif;
			font-style: Normal;
			text-align: left;
		}

/* ====================================
	Ende des Stylesheets
	=================================*/
	
	

#kwicks_container { 
	background-color: violet;
	height: 100px;
}
#kwicks {
	position: relative;
}
 
#kwicks .kwick {
	float: left;
	display: block;
	width: 117px;
	height: 100px;
}
 
#kwick_red {background-color: red;}
#kwick_orange {background-color: orange;}
#kwick_yellow {background-color: yellow;}
#kwick_green {background-color: green;}
#kwick_blue {background-color: blue;}
#kwick_indigo {background-color: indigo; color: #fff; }
#kwick_violet {background-color: violet;}