/* CSS Document von Konrad Zirm - f�r www.herklotzgasse21.at*/

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>    ELEMENTE DER WEBSEITE */

/*

- Logo
- Men� (drei unterschiedliche)
   - Men� 1 (Presse, G�stebuch, Kontakt, immer sichtbar)
   - Men� 2 (Hauptmen�, immer sichtbar)
   - Men� 3 (Submen�, nicht immer sichtbar, abh�ngig von Men�2)
   ! Gut w�re eine Verbesserung: dass man im Men� immer sieht, wo man gerade ist.
- Bilder
   - Bilder
      - Bilder bei onClick in Popup gr��er
   - Bildunterschriften
- Content
   - Text
   - �berschriften (H1, H2, H3)
   - Links im Text (normal)
   - Links im Text (spezial, kursiv und gr��er)
   - Tabelle (Zeittafel)
   - Aufz�hlung
   - Bild im Text
   - Bildunterschrift im Text
- G�stebuch
- Audio-Files

*/

html {
	height:100%;
	margin-bottom: 1px;
}

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	}


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>    GESAMTE SEITE WIRD ZENTRIERT */

#all { /* NOTWENDIG F�R INTERNET EXPLORER */
	text-align:center;
	margin: 5px 5px 5px 5px;
	padding: 2px;
	}

	
#center {
	width: 980px;
	padding: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: auto;
	margin-left: auto;
	border-top-style: none;
	border-bottom-style: dashed;
	border-right-style: dashed;
	border-left-style: dashed;
	border-color:#999999;
	border-width: 1px;
	}

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

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>    HIER IST NUN LOGO UND BILDER MEN� */
#logo {
	width: 470px;
	padding: 15px 0px 0px 0px;
	margin: 25px 15px 25px 10px;
	float: left;
	text-align: left;
	}
	
#logo img {margin: 0px 0px 0px 25px;}	

#bilder {
	width: 470px;
	padding: 15px 0px 0px 0px;
	margin: 0px 15px 0px 10px;
	float: left;
	text-align: left;
	}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>    HIER IST NUN DAS MEN� */

/* Das funktioniert, allerdings f�r alle drei Men�s das gleiche current-Styling.
.current {font-style:italic; text-transform:uppercase;}
*/

#menu {
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 11px; 
	width: 470px;
	padding: 15px 10px 15px 0px;
	margin: 0px;
	float: left;
	background-color: #FFF;
	}

#menu1 {
	width: 470px;
	padding: 0px;
	margin: 0px;
	text-align: right;
	float: right;
	}
	#menu1 ul {
		float: right;
		text-align: right;
		list-style-type: none;
		margin: 0px;
		padding: 0px;
		}
		#menu1 ul li {
			text-align: left;
			margin: 5px 5px 8px 0px;
			padding: 2px 3px 2px 3px;
			float: left;
			}
			#menu1 ul li a {text-decoration: none; color: #000;}
			#menu1 ul li a:hover {color: #87AAB2;}
			#menu1 ul li a.active {color: #87AAB2;}
			#menu1 ul li a:hover.active {color: #87AAB2;}
			
#menu1 li.current a {color: #87AAB2;}

#menu2 {
	width: 470px;
	padding: 0px;
	margin: 0px;
	text-align: left;
	float: left;
	}
	#menu2 ul {
		text-align: left;
		list-style-type: none;
		margin: 0px;
		padding: 0px;
		}
		#menu2 ul li {
			margin: 5px 5px 0px 0px;
			padding: 3px 4px 3px 4px;
			float: left;
			background-color: #414949;
			}
			
			#menu2 ul li a {text-decoration: none; color: #a4c8d0;}
			#menu2 ul li a:hover {color: #FFF;}
			#menu2 ul li a.active {color: #FFF;}
			#menu2 ul li a:hover.active {color: #FFF;}


#menu2 li.current a {color: #414949; background-color: #FFF; padding:1px;}
#menu2 li.current a:hover {color: #5c6767;}


#menu3 {
	width: 470px;
	height: 60px;
	padding: 0px;
	margin: 0px;
	text-align: left;
	float: left;
	}
	#menu3 ul {
		text-align: left;
		list-style-type: none;
		margin: 0px;
		padding: 0px;
		}
		#menu3 ul li {
			margin: 5px 5px 0px 0px;
			padding: 2px 3px 2px 3px;
			float: left;
			background-color: #A1CBD6;
			}
			#menu3 ul li a {text-decoration: none; color: #414949;}
			#menu3 ul li a:hover {color: #FFF;}
			#menu3 ul li a.active {color: #FFF;}
			#menu3 ul li a:hover.active {color: #FFF;}

#menu3 li.current a {color: #414949; background-color: #FFF; padding:1px;}
#menu3 li.current a:hover {color: #5c6767;}




/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>    HIER IST NUN DER CONTENT-BEREICH */
	
#content {
	width: 470px;
	padding: 15px 10px 0px 0px;
	margin: 0px;
	float: left;
	background-color: #FFF;
	text-align: left;
	}
	
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>    HIER SIND NUN DIE TEXT-ELEMENTE WIE H1, H2, H3, P und A ... */
h1 {
	font-size: 16px;
	color: #87AAB2;
	font-weight: normal;
	margin: 0px 0px 10px 0px;
	}
	
h2 {
	font-size: 13px;
	color: #75949B;;
	font-weight: normal;
	margin: 0px 0px 5px 0px;
	}
	
h3 {
	font-size: 11px;
	color: #000;
	font-weight: bold;
	margin: 0px 0px 3px 0px;
	}	
	
p {
	font-size: 11px;
	line-height: 16px;
	margin: 0px 0px 15px 0px;
	}	
	
a {text-decoration: none; color: #75949B;}
a:hover {color: #000;}
a.active {color: #000;}
a:hover.active {color: #000;}		

a img {border:none;}

ul {list-style-type:disc; list-style-position: outside;}
ul li {font-size: 11px; line-height: 16px; margin-bottom:3px;}


.spezial {font-style:italic; font-size: 12px;}
.bildunterschrift {font-size: 10px;}
.csc-textpic-caption {font-size: 11px;}

table {font-size:11px; border-style:dashed; border-color:#999; border-width:1px; border-collapse:collapse; margin:0px 0px 10px 0px;}
table td {border-style:dashed; border-color:#999; border-width:1px; padding:3px;}



/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>    HIER ALLES F�R DAS G�STEBUCH-FORMULAR */

.csc-mailform {
	border: none;	
	}

#content label {
	display: block;
	width: 90px;
	height: 15px;
	float: left;
	clear: left;
	padding: 0px;
	margin: 5px 0px 0px 0px;
	font-size: 11px;
	}
	
#content input {
	width: 170px;
	height: 17px;
	font-family: Arial, Verdana, Sans-Serif;
	font-size: 11px;
	margin: 2px 0px 0px 0px;
	border: 1px solid #CFF;	
	}

#content textarea {
	border: 1px solid #CFF;	
	width: 330px;
	height: 110px;
	font-family: Arial, Verdana, Sans-Serif;
	font-size: 11px;
	margin: 3px 3px 3px 0px;
	padding: 0px;
	overflow: auto;
	overflow-x: hidden;
	}