@charset "utf-8";
/*  CSS Document für Restaurant Piccolo */
/*
******************************************************************************************************

Title:			piccolo.css
Browser(s): 	All 

Author: 		Juergen Amann (http://www.um-bruch.eu)
Created: 		29.04.2009

******************************************************************************************************
*/


/*-------------------------------BODY EIGENSSCHAFTEN----------------------------------------*/

* {
	margin: 0 auto 0 auto; /* GLOBAL RESET */
	padding: 0;
}

body{
	margin:0;
	background-color: #f1f0ec;
	font: 7px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}


#main{
	width: 100%;
	height: 100%;
	margin-top: 125px;
	padding: 0;
	
}


#seite{
	width: 772px;
	height: 391px;
	background: url(images/mainbox.gif) no-repeat;
	margin: auto;
	padding-top: 15px;
	padding-left: 1px;
	padding-right: 1px;
	
}

.header{
	width: 759px;
	height: 108px;
	background: url(images/headbild.jpg) no-repeat;
}

#mainnav{
	
	width: 465px;
	height: 65px;
	float: right;
	text-decoration: none;
	margin-top: 0;
	margin-right: 15px;
	margin-left: 0;
}





    a.piccolo,
	a.karte,
	a.ansichten,
	a.kontakt,
	a.impressum
	{		
	float: left;
	width: 93px;
	height: 66px;
	background: url(images/piccolo.gif) no-repeat -93px;
}


    a.karte {
	background: url(images/karte.gif) no-repeat -93px;
    }
	a.ansichten {
	background: url(images/ansichten.gif) no-repeat -93px;
	}
	a.kontakt {
	background: url(images/kontakt.gif) no-repeat -93px;
	}
	a.impressum {
	background: url(images/impressum.gif) no-repeat -93px;
	}
	
	
	
	
	
    a.piccolo:hover,
    a.piccolo#active{		
	background: url(images/piccolo.gif) no-repeat 0px;
}

 	a.karte:hover,
 	a.karte#active{
	background: url(images/karte.gif) no-repeat 0px;
    }
	a.ansichten:hover,
	a.ansichten#active {
	background: url(images/ansichten.gif) no-repeat 0px;
	}
	a.kontakt:hover,
	a.kontakt#active {
	background: url(images/kontakt.gif) no-repeat 0px;
	}
	a.impressum:hover,
	a.impressum#active {
	background: url(images/impressum.gif) no-repeat 0px;
	}
		
.text{
	color: #eb0000;
	font: bold .5em/1.2em "Lucida Grande", Lucida, Verdana, sans-serif;
}
	
	
	
.hinweis{
	float: right;
	width: 475px;
	height: 35px;
	margin-top: 8px;
	color: white;
	font: 12px/130% Arial, Helvetica, Geneva, Verdana, "Lucida Grande", sans-serif;
	letter-spacing: 0;
	margin-right: -16px;
	padding: 0;
}

.contentleft{	
	padding-top: 50px;
	width: 263px;
	height: 256px;
	float: left;
	overflow: hidden;
	padding-left: 0;
}

.contentleft2{	
	padding-top: 1px;
	width: 193px;
	height: 200px;
	float: left;
	overflow: hidden;
	margin-left: 173px;
	margin-top: 51px;
	display: inline;
}

.slide{	
	padding-top: 51px;
	width: 483px;
	height: 210px;
	float: left;
}

.pano{
	width: 476px;
	height: 232px;
	float: right;
	margin-top: 8px;
	margin-right: 9px;
	border: 5px double #b6ad98;
	padding: 0;
}




/*-----TAGESKARTE LAYER----*/
.tageskarte{
		
	padding-top: 40px;
	width: 209px;
	height: 198px;
	float: left;
	background: url(images/tageskarte.gif) no-repeat;
	margin-top: 55px;
	padding-left: 31px;
	margin-left: 3px;
	overflow: hidden;
}

/*-----------TAGESMENUE--------*/

#imgbild
{
	width: 188px;
	margin: 31px 0 0;
	padding: 0;
}


#dienstag
{
	width: 188px;
	height: 167px;
	z-index:1;
	background-color: #fff;
	margin: 0;
	padding: 0;
	font: 6px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}




.zwgrau{
	font: bold 2em/120% "Lucida Grande", Lucida, Verdana, sans-serif;
	color: #7f7f7f;
	margin-bottom: 6px;
}

a.download{
	color: #ea0000;
	text-decoration: none;
	font: bold 11px/120% "Lucida Grande", Lucida, Verdana, sans-serif;
}

/*-----TAGESKARTE LAYER ENDE----*/

#frame{
	width: 166px;
	height: 150px;
	margin-right: 44px;
	overflow: hidden;
	margin-top: 6px;
	border-color: #fff;
	border-width: 1px;
}

/*------WERBEBOX STARTSEITE FUER TEXT-------*/
.inhalt{
	text-align: left;
	margin-top: 140px;
	width: 220px;
	font: 11px/130% "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: black;
	overflow: hidden;
}
/*------WERBEBOX STARTSEITE ENDE-------*/

/*------TEXTINHALT ALS HEADLINE-------*/

.inhalt2{
	text-align: left;
	width: 178px;
	font: normal 2.8em/150% "Lucida Grande", Lucida, Verdana, sans-serif;
	color: #7f7f7f;
	height: 100%;
	margin-top: 45px;
	margin-left: 22px;
	float: left;
}
/*------TEXTINHALT ALS HEADLINE ENDE-------*/

#box{
	float: left;
	width: 194px;
	height: 205px;
	background: url(images/content_box.gif) no-repeat;
	margin-top: 17px;
	margin-left: 64px;
	padding-top: 9px;
	padding-left: 14px;
	font: 7px/130% "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}


#box, li{
	margin-bottom: 3px;
}

/*------------------------------------WOCHENKALENDER------------------------------------------*/

#wkalender{
	width: 510px;
	height: 77px;
	margin-top: 23px;
	background: url(images/wkalender.gif) no-repeat;
	padding: 0 2px 0 1px;
	float: left;
	margin-left: 0;
	text-decoration: none;
}

h1{
	font: 11px/120% "Lucida Grande", Lucida, Verdana, sans-serif;
	color: white;
}

/*----KALENDERBLATT---*/

#mtag{
	width: 70px;
	margin: 0;
	padding: 0;
	float: left;
}

#dtag{
	width: 70px;
	margin: 0;
	float: left;
	padding: 0;
}

#miwo{
	width: 70px;
	padding: 0;
	float: left;
	margin: 0;
}

#dotag{
	width: 70px;
	padding: 0;
	float: left;
	margin: 0 0 0 3px;
}

#ftag{
	width: 70px;
	margin: 0 0 0 7px;
	padding: 0;
	float: left;
}

#satag{
	width: 70px;
	padding: 0;
	float: left;
}

#stag{
	width: 70px;
	margin: 0 0 0 3px;
	padding: 0px;
	float: left;
}

.tag{
	text-align: center;
	text-transform: uppercase;
	font: bold 1.8em "Arial",sans-serif;
	color: gray;
}

.date{
	text-align: center;
	text-transform: uppercase;
	font: bold 4em "Lucida Grande", Lucida, Verdana, sans-serif;
	color: gray;
	margin-left: 0;
	margin: 0;
	text-decoration: none;
}

a.date{
	
	text-align: center;
	text-transform: uppercase;
	font: bold 1em "Lucida Grande", Lucida, Verdana, sans-serif;
	margin-left: 0;
	margin: 0;
	
	
}

a.date:hover,
a.date#visit{
	
	text-align: center;
	text-transform: uppercase;
	font: bold 1em "Lucida Grande", Lucida, Verdana, sans-serif;
	color: #e80000;
	margin-left: 0;
	margin: 0;
	
	
}

.month{
	text-align: center;
	text-transform: uppercase;
	font: bold 1.8em "Arial",sans-serif;
	color: gray;
}

/*----KALENDERBLATT ENDE---*/

/*----------------------------------------WOCHENKALENDER ENDE------------------------------------*/




/*----WOCHEN MENÜKARTE---*/
.tgkarte{
	padding-top: 7px;
	color: #404040;
	font: 1.7em/130% "Lucida Grande", Lucida, Verdana, sans-serif;
	list-style-image: none;
}

/*----------INFORMATIONSBOX STARTSEITE RECHTS------*/
.termine{
	padding-left: 12px;
	padding-top: 7px;
	color: #404040;
	font: 1.7em/130% "Lucida Grande", Lucida, Verdana, sans-serif;
	list-style-image: url(images/pfeil.gif);
	
}

.termine a{
	text-decoration: none;
	color: #000;
}

.termine a:hover{
	text-decoration: underline;
	color: #000;
}



.zw{
	padding-left: 27px;
	padding-top: 0;
	color: #404040;
	font: 1.7em/130% "Lucida Grande", Lucida, Verdana, sans-serif;
	list-style-image: url(images/pfeil.gif);
	margin: 0;
}



ul,li.termine{
	list-style-type: none;
}

.spacer{ 
	font-size:0px; 
	line-height: 0;
	clear: both;
}

/*----------INFORMATIONSBOX STARTSEITE RECHTS ENDE------*/





/*------------------------------GLOBALE TYPOGRAPHY--------------------------------*/

p  {font-size: 12px;
	padding-right: 0;
	padding-left: 0;
	margin-top: 7px;
}

.fat{
	color: #ea0000;
	font: bold 11px/13px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
.small  {font-size: 11px; padding:0; line-height: 12px;}
.big {font-size: 12px; padding:0; line-height: 180%; color:#666666;}
.white {font-size: 1.2em; padding:0 10px 0 0; line-height:1.4em; color:#fff;}
.heading {font-size: 14px; font-weight: normal; border:none; padding:0;
	margin: 0;
}

/*------------------------------GLOBALE TYPOGRAPHY ENDE--------------------------------*/



/*------------------------------Reservierung--------------------------------*/


.reservierung{
	text-align: left;
	width: 280px;
	color: #7f7f7f;
	height: 150px;
	font: normal 1.6em "Lucida Grande", Lucida, Verdana, sans-serif;
	margin: 3px 0 0;
	float: right;
}

* html .reservierung{
	width: 285px;
	height: 160px;
}


form#one {width: 100px; padding: 0;
	margin: 11px 0 0;
}
form#one fieldset {width: 275px;padding: 0;border: 0;
	font: 1.1em "Trebuchet MS", Arial, sans-serif;
	height: 116px;
	margin: 0;
}

* html form#one fieldset {
	width: 275px;
	height: 92px;
	margin: 0;
	padding-top: 5px;
}

form#one input {border:1px solid #b6b6b6;padding:0.2em 0 0 0.3em;margin: 3px 14px 3px 0; width: 160px; height:20px; color:#666;
	float: right;
	font: 1em "Trebuchet MS", Arial, sans-serif;
}

* html form#one input {
	width: 160px;
	height: 20px;
	margin: 0 5px 5px 0;
}


form#one label{font-family: "Trebuchet MS", Arial, sans-serif; color:#666;
	line-height: 14px;
	margin: 7px 29px 8px 0;
	padding: 0;
	display: block;
	float: left;
}

*html form#one label{
	width: 75px;
	height: 15px;
	margin: 6px 0;
	padding: 0;
	line-height: 14px;
	float: left;
}



td.label{font-family: "Trebuchet MS", Arial, sans-serif; color:#666; padding: 0 13px 0 0;
	line-height: 1.2em;
	font-weight: bold;
	margin: 0;
	display: block;
}

td.label2{font-family: "Trebuchet MS", Arial, sans-serif; color:#666; padding: 8px 0 0;
	margin-bottom: 0;
	line-height: 1.2em;
	font-weight: bold;
	margin-top: 0;
	margin: 0;
}



form#one textarea 

{
	width: 160px;height: 20px;border:1px solid #b6b6b6; 
	margin: -37px 14px 0 0;
	overflow:auto; font-family:"Trebuchet MS", Arial, sans-serif; font-size:1em; color:#666;
	float: right;
	padding: 0.2em 0.3px 0.2em 0.2em;
}


* html form#one textarea{
	width: 162px;
	height: 20px;
	margin: -36px 5px 0 0;
}

form#one #button1 { color:#333;padding: 0;cursor:pointer;width:50px;margin: -18px -160px 0 0; background:#fff;border:1px solid #b6b6b6;font-family:"Trebuchet MS",   Arial, sans-serif;font-size: 11px;
	float: right;
}

* html form#one #button1{
	margin: -6px 0 0 220px;
}


form#one #button1:hover{ color:#000;padding: 0;cursor:pointer;width:50px;margin: -18px -160px 0 0; background:#fff;border:1px solid #b6b6b6;font-family:"Trebuchet MS",   Arial, sans-serif;font-size: 11px;
	float: right; background-color: #dad7c0;
}

* html form#one #button1:hover{
	margin: -6px 0 0 220px;
}


/*------------------------------Reservierung Ende--------------------------------*/


/*----------mail formular-----------*/

.mailformular{
	text-align: left;
	width: 329px;
	color: #7f7f7f;
	height: 250px;
	font: normal 1.6em "Lucida Grande", Lucida, Verdana, sans-serif;
	margin: 3px 0 0;
	float: right;
}


form#two {width: 100px; padding: 0;
	margin: 11px 0 0;
}
form#two fieldset {width: 312px;padding: 0;border: 0;
	font: 1.1em "Trebuchet MS", Arial, sans-serif;
	height: 212px;
	margin: 0;
}
form#two input {border:1px solid #b6b6b6;padding:0.2em 0 0 0.3em;margin: 3px 0; width: 240px; height:20px; color:#666;
	font: 1.1em "Trebuchet MS", Arial, sans-serif;
	float: right;
}
form#two label{font-family: "Trebuchet MS", Arial, sans-serif; color:#666;
	line-height: 15px;
	margin: 7px 9px 8px 0;
	padding: 0;
	display: block;
	float: left;
	width: 50px;
	display: inline;
}



td.label{font-family: "Trebuchet MS", Arial, sans-serif; color:#666; padding: 0 13px 0 0;
	line-height: 1.2em;
	font-weight: bold;
	margin: 0;
	display: block;
}

td.label2{font-family: "Trebuchet MS", Arial, sans-serif; color:#666; padding: 8px 0 0;
	margin-bottom: 0;
	line-height: 1.2em;
	font-weight: bold;
	margin-top: 0;
	margin: 0;
}



form#two textarea 

{
	width: 240px;height: 68px;border:1px solid #b6b6b6;
	padding:0.2em; 
	margin: -21px 0 0;
	overflow:auto; font-family:"Trebuchet MS", Arial, sans-serif; font-size:1em; color:#666;
	float: right;
}

form#two #button1 { color:#333;padding: 0;cursor:pointer;width:50px;margin: -28px -210px 0 0; background:#fff;border:1px solid #b6b6b6;font-family:"Trebuchet MS",   Arial, sans-serif;font-size: 11px;float: right;display: inline;
}

form#two #button1:hover{ color:#000;padding: 0;cursor:pointer;width:50px;margin: -28px -210px 0 0; background:#fff;border:1px solid #b6b6b6;font-family:"Trebuchet MS",   Arial, sans-serif;font-size: 11px;
	float: right; background-color: #dad7c0;
}

/*----------mail formular ende-----------*/


/*-----------impressum----------------*/
#boxlinks{
	width: 230px;
	height: 137px;
	float: left;
	margin-top: 142px;
	margin-bottom: 0;
	margin-left: 22px;
	border-top-width: 5px;
	border-top-color: white;
	padding-right: 11px;
	text-align: right;
	padding-top: 2px;
	border-right: 1px dotted #b6ad98;
}

*html #boxlinks{
	width: 230px;
	height: 137px;
	float: left;
	margin-top: 142px;
	margin-bottom: 0;
	margin-left: 10px;
	border-top-width: 5px;
	border-top-color: white;
	padding-right: 11px;
	text-align: right;
	padding-top: 2px;
	border-right: 1px dotted #b6ad98;
}

#boxrechts{
	width: 480px;
	height: 200px;
	float: left;
	border-top-width: 5px;
	padding: 0;
	margin-top: 60px;
	margin-left: 2px;
	overflow: hidden;
}


* html #boxrechts{
	width: 480px;
	height: 200px;
	float: left;
	border-top-width: 5px;
	padding: 0;
	margin-top: 60px;
	margin-left: 0;
	overflow: hidden;
}


.angaben{
	color: #696969;
	font: bold 11px/130% "Lucida Grande", Lucida, Verdana, sans-serif;
	letter-spacing: 0.1em;
	padding: 0;
}

.angaben2{
	color: #000;
	font: 11px/120% "Lucida Grande", Lucida, Verdana, sans-serif;
}

a.textlink{
	color: #000;
	font: 11px/120% "Lucida Grande", Lucida, Verdana, sans-serif;
	text-decoration: none;
}

a.textlink:hover{
	color: #000;
	font: 11px/120% "Lucida Grande", Lucida, Verdana, sans-serif;
	text-decoration: underline;
}



/*----------impressum ende-----------*/

	

/*--------------footer--------------*/

#footer{
	width: 801px;
	margin-top: -5px;
	color: #7e7d70;
	font: 11px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	text-align: center;
}


a.link{
	
	font: bold 11px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #7e7d70;
	text-decoration: none;
}

a.hover{
	
	color: #eb0000;
}