/* design.css for www.cafe-voll.de */


div, table, tr, td,span, a, p
{
	/*border: 1px solid;*/
}


body  
{ 
	margin: 0px; padding: 0px; 
	width: 100%; 
	background: #cdcdcd;
	text-align: center;
	font: 14px "Trebuchet MS", sans-serif;
}

#head /* alles über der Navigationsleiste */
{
	margin-left: auto; margin-right: auto; 
	width: 100%;  
	padding-top: 2px;
	padding-bottom: 2px;
	background-color: rgb(255, 142, 40);
	background-image: url('bg_picture_div.gif'); 
	background-repeat: repeat-x;
}

#headline
{
text-decoration: none;
font-size: 21px; 
letter-spacing: 1.5px; 
font-family: "Trebuchet MS",tahoma,sans-serif; 
color: rgb(244, 255, 225); 
font-style: italic;
}

#picture /* Bild auf der Startseite */
{
	margin-left: auto; margin-right: auto; 
	width:	608px;
	height: 322px;
	background-repeat: no-repeat; 
	background-position: center top; 
	
		background-image: url('../pictures/start.jpg'); 
		border: 1px solid white;
		margin-bottom: 2px;
}
        #picture  #headline { margin-top: 220px; }
#without_picture  #headline { margin-top:  30px; }

#without_picture /* Anstelle des Bildes auf der Startseite - für Unterseiten */
{
	margin-left: auto; margin-right: auto; 
	padding: 5px;
	margin-top: 10px;
	height: 85px;
	margin-bottom: 2px;
	width: 30%;
}

#nav_div img
{ 
	position: absolute;
	border: 0px solid white; 
	margin: 0px; 
	padding: 0px; 
	
	width: 2px; 
	height: 50px;
}

#body /* Unter der Navigationsleiste, weißer Kasten mit Inhalt */
{
	position: absolute;
	top: 60px;
	text-align: center;
	margin: 0 auto;
	width: 700px;
	position: relative;
	background: #ffffff;
	padding: 10px 50px 10px 50px;
	margin-top: 10px;
	margin-bottom: 70px;
	padding-bottom: 10px;
	border-top:		2px solid #DDD;
	border-right:	2px solid #DDD; 
	border-left:	2px solid #AAA;
	border-bottom:	2px solid #AAA;
}


.quote /* Zitate */
{
	margin-left: auto; margin-right: auto; 
	text-indent:1em;
	font-style:italic;
	text-align: justify;
	/*font-family: 'Times New Roman',Times,serif;*/
	line-height: 24px;
	
	/* width: im <TAG> selbst, da variabel je quote */
}

.p_style
{
	margin-left: auto; margin-right: auto; 
	font-style:italic;
	text-align: justify;
	font-family: 'Times New Roman',Times,serif;
	position: relative; 
	
	/* width: im <TAG> selbst, da variabel je quote */
}
.p { text-indent:1em; 	 }
p   { text-align: justify; }
br { line-height: 10px;   }



h1
{
	text-align: center;
	width: 300px;
	margin-left: auto; margin-right: auto; 
	font-family: "Trebuchet MS",tahoma,sans-serif; 
	color: rgb(245, 131, 0);  
	font-style: italic;
	font-size: 28px;
}

.h_orange
{
	text-align: left;
	font-family: "Trebuchet MS",tahoma,sans-serif; 
	font-style: italic;
	font-size: 19px; 
	color: rgb(245, 131, 0); 
	margin-bottom: 20px;  
	padding-bottom: 5px; 
}

h2 
{ 
	text-align: left;
	border-bottom: 1px  dashed rgb(245, 131, 0); 
	font-family: arial, sans-serif; 
	font-style: italic;
	font-size: 20px; 
	color: rgb(245, 131, 0); 
	margin-bottom: 20px;  
	padding-bottom: 5px; 
	line-height: 35px;
}

.before_after_quote /* Dies gilt nur für die Anführungstriche */
{
	font-family: 'Times New Roman'; /*,Times,serif;*/
	font-size: 50px;
	font-weight: bold;
	color: rgb(255, 142, 40);
	letter-spacing:  5px;
	position: absolute;
	
	/*Positionierung im jeweiligen <TAG>, da jedes mal frei wählbar (abhängig von Textlänge und -breite) */
}

#nav_div /* Navigationsleiste */
{	
	margin-left: auto; margin-right: 20px;; 
	position: absolute;
	left: 0px;
	
	width: 100%; 
	height: 50px;
	background-image: url('active.gif'); 
	background-repeat: repeat-x;
	background-position: center top; 
	background-color: blue;
	/*border: 2px solid red; */
	
	z-index: 1;
}

#nav
{
	margin-left: auto;
	margin-right: auto;
	width: 0px; 
	height: 55px; position: absolute; top: 0px; left: 50%
}

/* Positionierung der Links und der Cuts */

.cut1	  	{ left: -304px; }	
	.a1    	{ left: -302px;	}	/*  878 + 2   =  880 */
.cut2		{ left: -182px; }	/*  880 + 120 = 1000 */
	.a2    	{ left: -180px;	}	/*  878 + 2   = 1002 */
.cut3		{ left:  -60px; }	/* 1002 + 120 = 1122 */
	.a3    	{ left:  -58px;	}	/* 1122 + 2   = 1124 */
.cut4		{ left:   62px; }	/* 1124 + 120 = 1244 */
	.a4    	{ left:   64px;	}	/* 1244 + 2   = 1246 */
.cut5		{ left:  184px; }	/* 1246 + 120 = 1366 */
	.a5   	{ left:  186px;	}	/* 1244 + 2   = 1246 */
.cut6		{ left:  306px; }	/* 1246 + 120 = 1366 */
	.a6  	{ left:  308px;	}	/* 1244 + 2   = 1246 */
.cut7      	{ left:  428px; }	/* 1246 + 120 = 1366 */


/* Appearange of links of navigation bar */

#nav a, #nav a:visited, #nav a:active
{
	position: absolute;
	z-index: 2;
	border: 0px solid white; 
	padding: 0px; margin: 0px;
	height: 50px; line-height: 50px;
	display: block;
	background-image: url('active.gif'); 
	background-repeat: repeat-x;
	text-decoration: none; 
	font-size: 14px; 
	font-family: arial,helvetica,tahoma,verdana,sans-serif;  
	color: rgb(180, 180, 180);
	
		width: 120px;
}
#nav a:hover 
{ 
	background: url('hover.gif'); 
	background-repeat: repeat-x;
	text-decoration: underline;
	color: white; 
}
.show
{
	width:300px;
	padding: 4px;
	
}
.show img:hover
{
	width: 500px;
}

#ende {
  
  text-align: center;
  border-top: solid black 1px;
  margin-top: 20px;
  padding-bottom: 40px;
  height: 20px;

}

#ende #bild1 {

  margin-right: auto;
  position: relative;
  top: -20px;
  width: 88px;
  height: 35px;
  padding-top: 4px;
}

#ende #links 
{
  margin-right: auto; margin-left: auto;
  text-align: center;
  padding-top: 0px;
  width: 100%;

}

#ende #bild2 {

  margin-left: auto; 
  margin-right: -5px;
  position: relative;
  top: -59px;
  width: 88px;
  height: 35px;
  padding-top: 4px;
}

.pictures
{
	padding: 5px;
	width: 300px;
}

.center
{
	text-align: center;
}

ul li {
    list-style-type: none;
}
#route
{
	visibility: hidden;
}

#body a:visited
{
	color: rgb(245, 131, 0);
}
.aktuell { text-decoration: none; }

.float_pic_l
{
	 border: 1px solid black; 
	 float:  left; 
	 margin: 10px;
}
.float_pic_r
{
	 border: 1px solid black; 
	 float:  right; 
	 margin: 10px;
}