﻿/* CSS Aareschlucht */

html {
	height: 100.3%;				/* verhindert Scrollbalken im FireFox */
	font-size: 62.5%;			/* Norm füe arbeiten im 'em' */
}
body {
	text-align: center;			/* body im Fenster zemtrieren */
	font-family: Verdana, Arial, Helvetica, Sans-Serif;	
	font: 1.3em/1.6em Verdana, sans-serif;
	color: #003399;
	background-color: #c2c2c2;
}

* {margin: 0px; padding: 0px; border: 0px;}



h4 {
	font-family: "Century Gothic", sans-serif; 
	font-weight: 200;
	margin: 0em 0em 0.5em 0em;
	padding: 0.2em 0em 0.2em 1em; 
	color: #003399;
}

h3 {
	font-family: "Century Gothic", sans-serif; 
	margin: 0em 0em 0em 0em;
	padding: 0.2em 0em 0.2em 0em; 
	font-weight: normal;
	color: #003399;
}

h2 {
	font-family: "Century Gothic", sans-serif; 
	font-size: 1.8em; 
	font-weight: normal;
	padding-top: 0.6em; 
	padding-bottom: 0.4em;
	margin: 0em 0em 0em 0em; 
	color: #003399;
}


h1 {
	font-family: "Century Gothic", sans-serif; 
	font-size: 2.0em;
	font-weight: normal;
	padding: 0.6em 0em 0.8em 0em; 
	color: #003399;
}

h3 {font-size: 1.8em;}
h4 {font-size: 1.5em;}
h5 {
	font-size: 1.4em;
	font-family: "Century Gothic", sans-serif; 
	color: #003399;
	font-weight: normal;
	padding-left: 0.3em;
	padding-top: 0.5em;
}
h6 {
	font-family: "Century Gothic", sans-serif; 
	color: #003399;
	font-size: 1em; 
	font-weight: bold;
	padding-left: 0.5em;
}

a {
}

a:link {
}
a:visited {	
}
a:hover {
}
a:active {}
	
	
}
div#center	{								/* um beliebige Elemente zu zentrieren */
	text-align:center;
}
div#left	{								/* um beliebige Elemente nach links verschiebenzu zentrieren */
	text-align:left;
}
div#wrapper {
	width: 800px; 
	margin-top: 0px;			/*Abstand vom oberen Fensterrand */
	text-align: left;			/*hebt das 'center' im body wieder auf */
	/*background-image: url("../images/msfp_smbus2_03.gif"); grauer Untergrund (cccccc) mit Rand-Verlauf 
	background-repeat: repeat-y;*/
	background-color: #cccccc;
	margin-left: auto;			/*zentriert die Seite im Fenster */
	margin-right: auto;
	margin-bottom: 0px;
}

div#header {
	width: 802px;
	height: 123px;						/* 2px grösser als Bild, sonst gibt es einen Scrollbalken */
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
	overflow: auto;
	background-repeat: no-repeat;		/* weil height grösser als Bild, darf Bild nicht repetiert werden */
	background-image: url("../images/banner-kehrli-798-120.jpg"); /* Untergrund-Bild, damit die Sprachen sichtbar sind  */
}

div#wrap_content {
	position: relative;	/* ist nötig, damit im 'picture_fotogalerie' das position: absolute funktioniert*/
	margin-left: 0px;
	margin-right: 0px;
}

							/* 3 Kolonnen für Menü, Bild, Text 
					/* Kolonne 1 Menü */
div#col1 {
	width: 140px;
	margin-left: 0px;
	float: left;
	background-color: #cccccc;
	border-left: 0px solid #aaaaaa; 
}
		/* Navigation Sprache */
div#sprache {
	float: left;
	margin: 0px;
	padding-top: 102px;
}
div#sprache ul {
	margin: 0em;
}	

div#sprache li {
	list-style-type: none;
	display: inline;
	font-size:0.83em;
	padding-left: 3px;
	padding-right: 0px;
	vertical-align:bottom;	
}
div#sprache a {
	color: #003366;
	text-decoration: none;
}
div#sprache a:hover {
	color: #ff0000;
	text-decoration: none;
}
div#sprache a:active {
	color: #ff0000;
	text-decoration: none;
	background-color: #fff;
}
.aktivsprache {
	color: #003366;}
}
				/* Ende Navigation Sprache */

					/* Navigation Menü */

#aareschlucht {	/* Tab Die Aareschlucht */
	left: 0px;
	width: 138px;
}
#aareschlucht ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#aareschlucht a {
	text-decoration: none;
	color: #118;
	display: block;
	padding: 2px 5px 2px 5px;
	border-bottom: 1px solid #f2f2f2; 
}
#aareschlucht a:hover {
	text-decoration: none;
	color: #118;
	border-bottom: 1px solid #f2f2f2; 
	background-color: #f2f2f2;
}
						/* Navigation im 1. Menü*/
#aareschlucht2 {			
	left: 0px;
 	margin-top: 0px; 
	width: 138px;
	height:155px;
	background-color: #ccc;	
	border-top: 1px solid #f2f2f2; 	
}
#aareschlucht2 ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#aareschlucht2 a {
	text-decoration: none;
	color: #118;
	display: block;
	padding: 2px 5px 2px 5px;
	border-bottom: 1px solid #f2f2f2;
}
#aareschlucht2 a:hover {
	text-decoration: none;
	color: #118;
	border-bottom: 1px solid #f2f2f2; 
	background-color: #f2f2f2;
}
						/* Navigation im sekundären Menü*/
#aareschlucht1 {				
	width: 140px;
	height: 10.50em;
	display: block;
	background-color: #ccc;
}

#aareschlucht1 ul {
	list-style-type: none;
	margin: 0px;
}
div#aareschlucht1 li {
	padding-left: 20px;
	display: block;
	background-color: #ccc;
}

#aareschlucht1 a {
	text-decoration: none;
	color: #118;
	display: block;
	padding: 2px 5px 2px 5px;
	border-bottom: 1px solid #f2f2f2;
	background-color: #ccc; 
}

#aareschlucht1 a:hover {
	text-decoration: none;
	color: #118;
	border-bottom: 1px solid #f2f2f2; 
	background-color: #f2f2f2;
}
div#adds	{				/* Raum unter Menü für Buttons */
	margin-top: 2px;
}														
div#logo_haslital	{
	margin-top: 16em;
}
div#logo_haslital_bau	{
	margin-top: 68em;
}
div#logo_haslital_lit	{
	margin-top: 94em;
}
div#logo_haslital_lit_eng	{
	margin-top: 86em;
}
div#logo_haslital_geol	{
	margin-top: 14em;
}


							/* Ende 1. Kolonne */
		
							/* Kolonne Bild */
div#picture {
	width: 173px;
	float:right;
	margin-right: 3px;
	margin-bottom: 0px;
	padding-bottom: 0px;	
	background-color:;
}

div#picture_fotogalerie {	/* Page Fotogalerie */
	position: absolute;
	left: 155px;
	top: 20px;
	width: 270px;
	height: 659px;
	text-align: center;
	vertical-align: middle;
	background-image: url('../album/flyer-ohne-zahlen.jpg');
	float: left;
	clear: right;
	background-color: #ccc;
}
div#text_fotogalerie ul {	/* Liste im Textbereich der Fotogalerie */
	display: block;
	list-style-type: none;
	margin: 0px;
	padding-left:20px;	
}
div#text_fotogalerie	{
	background-color: #e6e6e6;
	width: 350px;
	min-height: 655px;
	float: right;
	padding: 0.415em 0.415em 0.08em 0.83em;	
}
.zahl	{
	font-family:arial;
	font-size:0.9em;
	font-style:normal;
	font-weight:bold;
	color: #003399;
}
							/* Ende Page Fotogalerie */
div#bildtext	{
	float: left;
	font-size: 0.8em;
	line-height: 0.95em;
	background-color: #ccc;
	width: 166px;
	padding: 5px 0px 5px 2px;
	margin-top: -6px; /* deckt schwarzen Rand unten am Bild, warum gibt's den? */;
	border-left: 1px #003399 solid;
	border-right: 1px #003399 solid;
}
div#bild_top	{
	background-color: #cccccc;
	width: 170px;
	height: 12px;
}
div#bild_top_map	{
	background-color: #cccccc;
	width: 170px;
	height: 21px;
}
div#bild_center	{
	background-color: #cccccc;
	width: 170px;
	height: 22px;
	margin-top: -6px; /* deckt schwarzen Rand unten am Bild, warum gibt's den? */;
}
div#seite_top	{
	background-color: #cccccc;
	width: 170px;
	height: 16px;
	padding-top: 50px;
}
div#seite_top_franc	{
	background-color: #cccccc;
	width: 170px;
	height: 16px;
	padding-top: 30px;
}
div#seite_top_lit	{
	background-color: #cccccc;
	width: 170px;
	height: 10px;
	padding-top: 40px;
}
div#seite_top_lit_eng	{
	background-color: #cccccc;
	width: 170px;
	height: 10px;
	padding-top: 30px;
}

								/* Ende Kolonne Bilder */
		
								/* 3. Kolonne */
																		
div#col3 {
	width: 463px;
	margin-right: 10px;
	float: right;
	background-color: #ffff00;
}

								/* Navigation im Kopf rechts */
div#nav_hr {
	width: 448px;
	float:right;
	background-color: #003366;
	display: inline;
	text-align: left;
	padding-left: 24px;
}
div#nav_hr ul {
	list-style-type: none;
	margin: 0;
}
div#nav_hr li {
	list-style-type: none;
	display: inline;
	margin:  2px 12px 2px 0px;
}
div#nav_hr a {
	color: #ffffff;
	text-decoration: none;	
	border: 1px solid fff;
}
#nav_hr a:hover {
	color: #ff0000;
	text-decoration: none;
}

						/* Text */						
div#text	{
	background-color: #e6e6e6;
	width: 450px;
	min-height: 422px;
	float: right;
	padding: 0.415em 0.83em 0.08em 0.83em;	
}
												/* Tabellen*/
table#table_bau {								/* Tabelle Baugeschichte */
	width: 450px;
	border: 0px solid #669999;
}
td	{
	padding: 0.5em;
	border-bottom: 0px dotted #669999;
	text-align: left;
	font-weight: normal;
	vertical-align: top;
}

th	{
	padding: 0.5em;
	border-bottom: 1px dotted #669999;
	text-align: left;
	font-weight: normal;
	vertical-align: top;
}

th {
 	text-align: center;
 	font-weight:bold;
}
table#oeffnungszeit {							/* Tabelle Öffnungszeit */
	width: 450px;
	border: 0px;
	border-collapse: collapse;
}

td	{
	padding: 0.5em;
	padding-left: 0px;
	border-bottom: 0px dotted #669999;
	text-align: left;
	font-weight: normal;
	vertical-align: top;
}
col#zeit_text	{
	text-align: left;
}

th	{
	padding: 0.5em;
	padding-left: 0px;
	border-bottom: 0px dotted #669999;
	text-align: left;
	font-weight: normal;
	vertical-align: top;
}

th {
 	text-align: left;
 	font-weight:bold;
 	vertical-align: bottom;
}
td.rechts{text-align: right;}
tr.eng {line-height: 0.5em;}
}

#preise_schlucht tr.odd td {					/* Tabelle Preise Aareschluch MIB*/
	background-color: #f2f2f2;
	line-height: 0.5em;
}
col#colperson	{
	width: 330px;
}
table#preise_schlucht_k1 {							
	width: 450px;
	border: 0px;
	border-collapse: collapse;
}
#preise_schlucht_k1 tr.odd td {
	background-color: #f2f2f2;
	line-height: 0.5em;
}
col#colperson_k1	{
	width: 330px;
}

.defloat {
	clear: both;	/*float aufheben, damit das nächste Element immer am Fuss der längsten Kol. ist */
}

/* Fussleiste formatieren */
div#footer {
	float: left;
	text-align: center;
	width: 800px;
	margin: 0px auto 0px auto;
	overflow: auto;
}
div#footer p	{
	font-size: 0.85em;
	line-height: 1.6em;
	color: #fff;
	margin: 0px 2px	0px	2px;
	padding: 10px;
	background-color: #003300;
}

#footer a {
	color: #fff;
	text-decoration: underline;
}
#footer a:hover {
	color: #fff;
	text-decoration: none;
}
div#fussrand	{
	width: 816px;
	height: 0px;
	margin-top: 2px;	
	/*background-image: url("../images/bottomborder.gif");	*/
	background-repeat: repeat-x;
	background-attachment: scroll;
}
div#kopfrand	{
	width: 816px;
	height: 10px;
	margin-top: 2px;	
	background-image: url("../images/headborder.gif");	
	background-repeat: repeat-x;
	background-attachment: scroll;
}

div#ersteraugust{														/* Seite Aktuelles */
	width: 170px;
	height: 110px;
	background-image: url("../images/westeingang_170_128.jpg");	
}
																		/* Seite  Links */
div#link_content	{
	margin-left: 15px;
	margin-right: 15px;
	background-color:#ccc;

}
div#linkcol1	{
	width: 230px;
	float: left;
	margin: 0.5em 0.5em 0.5em 0.3em;
}
div#linkcol2	{
	width: 270px;
	float: left;
	clear: right;
	margin-bottom: -0.4em;
	margin-left: 0.8em;
	margin-right: auto;	
	margin-top: 0.5em;
}
div#linkcol3	{
	width: 230px;
	float: right;
	margin: 0.5em 0.3em 0.5em 0.5em;	


}

div#link_content li {
	list-style: circle;
	list-style-position: inside;
	padding-left: 0.3em;
}
div#link_content a {
	text-decoration: none;
	color: #118;
	border-bottom: 0px solid #f2f2f2;

}
div#link_content a:hover {
	text-decoration: underline;
	color: #118;
	border-bottom: 0px solid #f2f2f2; 
}
/*div#link_content a:visited	{
	text-decoration: none;
	color: #800000;
	border-bottom: 0px solid #f2f2f2; 
}
*/
table#geolit {									/* Tabelle Geologie Literatur */
	width: 760px;
	margin-top: 20px;
	text-align: center;
	background-color: #f2f2f2;
}
table#geolit td	{
	padding-left: 5px;
	padding-right: 3px;
	border-bottom: 0px dotted #669999;
	text-align: left;
	font-weight: normal;
	vertical-align: top;
}
																			/* Prospekte */


table#prospekte	{							/* Tabelle Prospekte */
	width: 600px;
	margin-top: 0px;
	margin-left: 105px;
	background-color: #f2f2f2;	
}
table#prospekte td	{
	padding-left: 10px;
	padding-right: 3px;
	text-align: left;
	font-weight: normal;
}
table#prospekte th {
	padding-left: .5em;
	border: 0px solid #669999;
	text-align: left;
	font-weight: bold;
	background-color: #f2f2f2;
}

table#prospekte .img	{
	margin-left: 20px;
	margin-right: 0px;
	padding: 5px 0px 5px 0px;
	border-bottom: 0px dotted #669999;
	text-align: right;
}
											/* Formular Prospektbestellung */
#personform fieldset {		
	border: 1px solid #CCCCCC; 
	display: block;
	float: left;
	width: 27em;
	margin: 0.2em 0em 0.5em 8em;
	padding: 0.7em;
	background: #F2F2F2 url(images/bg_fieldset.jpg) repeat-x left bottom; 
}
											
#personform select {border: 1px solid #CCCCCC;}
#personform input {border: 1px solid #CCCCCC; display: block;}
#personform select {display: block;}


#personform label {display: block;}



#personform fieldset.anzahl{width: 16em; float: right; 
	font: inherit; color: inherit; font-weight: normal; padding: 0.7em; margin-left:0.1em; margin-right: 6.5em; 	
	background: #F2F2F2 url(images/bg_fieldset.jpg) repeat-x left bottom; 
}

#personform label {
	margin-bottom: 0.1em;
	font-weight: bold;
	text-indent: 0.6em;
	width: 26em;
}
#personform label.anzahl {
	margin-bottom: 0.1em;
	font-weight: bold;
	text-indent: 0.6em;
	width: 15em;
}

#personform input {
	width: 25em;
	padding: 0.1em 0.6em 0.2em 0.6em;
	background-color: #ffffff;
}
#personform input#plz{
	width: 6em;
	padding: 0.1em 0.6em 0.2em 0.6em;
}
#personform input.anzahl {
	width: 3em;
	padding: 0.1em 0.6em 0.2em 0.6em;
}
table#prospekt {						/* Tabelle Löschen/Senden */
	width: 16em;
	margin-top: 9.5em;
	background: #F2F2F2 url(images/bg_fieldset.jpg) repeat-x left bottom; 
}
table#prospekt td {
	padding: 0.5em;
	border: 1px solid #669999;
	text-align: center;
	font-weight: normal;
	background-color: #ffffff;
}

																/* Bestellung Touristik-Info  */
												
table#tourinfo	{							/* Tabelle Touristik-Info */
	width: 760px;
	margin-top: 0px;
	margin-left:1em;
	margin-right: 0em;
	background-color: #f2f2f2;	
}
table#tourinfo td	{
	padding-left: 10px;
	padding-right: 3px;
	text-align: left;
	font-weight: normal;
}
											/* Formular Touristik-Info  */

#tourinfoform fieldset {		
	border: 1px solid #CCCCCC; 
	display: block;
	float: left;
	width: 26em;
	margin: 0.2em auto 0.5em 1em;
	padding: 0.7em;
	background: #F2F2F2 url(images/bg_fieldset.jpg) repeat-x left bottom; 
}
#tourinfoform fieldset#mitteilung {		
	display: block;
	float: left;
	width: 29em;
	margin: 0.2em auto 0.5em 0.em;
	padding: 0.7em;
	background: #F2F2F2 url(images/bg_fieldset.jpg) repeat-x left bottom; 
}

										
#tourinfoform select {border: 1px solid #CCCCCC;}
#tourinfoform input {border: 1px solid #CCCCCC; display: block;}
#tourinfoform select {display: block;}


#tourinfoform label {display: block;}
				/* Warum können die beiden label nicht zusammengeführt werden? */
#tourinfoform label {
	margin-bottom: 0.1em;
	font-weight: bold;
	text-indent: 0.6em;
	width: 20em;
}
#tourinfoform label.sachbearb	{ 							/* Zwischentitel Sachbearbeiter */
	padding: 1.5em 1em 0.5em 0em;
}
#tourinfoform label.besuch	{ 							/* Zwischentitel Sachbearbeiter */
	padding: 0.1em 1em 1.6em 0em;
}
#tourinfoform input {
	width: 23em;
	padding: 0.1em 0.6em 0.2em 0.6em;
	background-color: #ffffff;
}
#tourinfoform input#plz{
	width: 6em;
	padding: 0.1em 0.6em 0.2em 0.6em;
}
#tourinfoform input.anzahl {
	width: 3.5em;
	padding: 0.1em 0.6em 0.2em 0.6em;
	text-align:right;
}
#tourinfoform input.reset {
	margin: 1em 0.2em 0.2em 0.2em; 																/* submit-reset taste  */
	width: 7em;
	padding: 0.1em 0.1em 0.1em 0.1em;
	text-align:center;
	font-size: 1.1em;
	color:black;
	border:1px black solid;
	background-color:#cccccc;
	border-bottom:2px black solid;
	border-right:2px black solid;
}
																				/* Page Restaurant */
div#restaurant_content	{
	margin-left: 15px;
	margin-right: 15px;
	background-color:#ccc;

}
div#restaurantcol1	{
	width: 420px;
	float: left;
	margin: 0.5em 0.5em 1em 0.5em;
}
div#restaurantcol2	{
	width: 300px;
	float: left;
	margin-bottom: -0.4em;
	margin-left: 0.8em;
	margin-right: auto;	
	margin-top: 0.5em;
}
div#text_restaurant	{
	background-color: #e6e6e6;
	width: 400px;
	float: right;
	padding: 0.415em 0.415em 0.08em 0.83em;	
}

}
/*#tourinfoform input#submit {width: 21.4em; margin-top: 2em; border: 2px solid #999999; border-color: #CCCCCC #CCCCCC #999999 #999999;}*/
*/
/*#tourinfoform input#submit:hover {background: #990000; color: #FFFFFF; font-weight: bold;}*/




a:link {
}
a:visited {	
}
a:hover {
}
a:active {}


