* { 
 margin: 0; 
 padding: 0; 
} 
body { font: 12px/18px "Lucida Grande", Verdana, sans-serif; text-align: left; color: #01345b; background: #fef9f4; } 
a:link, a:visited { color: #0265ae; background-color: #fceee0; background-repeat: repeat; text-decoration: none; border-color: #2fccf6 #00a3bc #00a3bc #2fccf6; border-style: outset inset outset outset; border-width: 1px; } 
a:hover { color: #f00; background-color: #fceee0; text-decoration: none; border-color: #b2eaf9 navy navy #b2eaf9; border-style: outset; border-width: 1px; } 
h1 { 
 margin-bottom: 11px; 
 margin-left: -108px; 
 padding: 15px 0 21px 108px; 
 border-bottom: 1px solid #ccc; 
 font: italic 1.5em/18px "Lucida Grande", Verdana, sans-serif;; 
 text-align: center;
 color: #01345b; 
} 
h2, h3{ 
 font-weight: normal; 
 font-size: 1em; 
 line-height: 18px; 
 text-align: center;
} 
h2 { margin-left: -204px; padding: 10px 0 20px 204px; font-size: 1.25em; text-transform: uppercase; color: #369; } 
h3 { 
 padding-bottom: 6px; 
 font-weight: bold; 
 text-transform: uppercase; 
 letter-spacing: -1px; 
 color: #369; 
}
h6 { color: navy; font-size: 1.25em; background-image: url(images/1_18hell.gif); border-color: navy aqua aqua navy; border-width: 1px; }

/*Der Abschnitt Wrap färbt den hintergrund mit einer Grafik ein*/
#wrap { background-color: #ffffe0; background-image: url(images/Meer_hell.gif); background-repeat: repeat; background-position: 0 top;}


/*Der Abschnitt page definiert die Gesamtbreite der eigentlichen Seite, die mittig auf wrap sitzt*/
#page { background-color: #fef9f4; background-attachment: scroll; background-position: 0 0; margin: 0 auto; width: 960px; text-align: left; height: 100%; }


/*Der Header ist mit einer gif-Grafik von 1mm Breite hinterlegt, enthält den titel und eine kleine Linkleiste*/
#header { background-image: url(images/Meer.gif); background-repeat: repeat; background-attachment: scroll; background-position: 0 0; height: 192px; }
#header_apart { background-image: url(images/header_meer_960_192.jpg); background-repeat: no-repeat; background-attachment: scroll; background-position: 0 0; height: 192px; }
#header p { 
 float: left; 
 padding: 50px 24px 24px 40px; 
 font-size: 7em; 
 line-height: 1em; 
 color: #fff; 
}
#header_apart p { color: #fff; font-size: 7em; line-height: 1em; padding: 50px 24px 24px 40px; float: left; }
#header h4 { color: #fff; font-size: 1.8em; line-height: 1em; padding: 110px 24px 24px 126px; float: left; }
#header_apart h4 { color: #fff; font-size: 1.8em; line-height: 1em; padding: 50px 24px 24px 126px; float: left; }
/*Im Header werden die Links als horizontale Liste definiert*/
#header ul { 
 padding-top: 170px; 
 padding-right: 12px; 
 text-align: right; 
 list-style: none; 
}
#header_apart ul { text-align: right; list-style: none; padding-top: 170px; padding-right: 12px; }
#header li { 
 display: inline; 
 margin: 0 12px; 
}
#header_apart li { display: inline; margin: 0 12px; }
#header li a { font-size: 0.8em; line-height: 1em; text-decoration: none; color: #fff; background-color: transparent; text-transform: uppercase; }
#header_apart li a { color: #fff; font-size: 0.8em; line-height: 1em; background-color: transparent; text-decoration: none; }
#header li a:hover { color: #ff9; background-color: transparent; text-transform: uppercase; }
#header_apart li a:hover { color: #ff9; background-color: transparent; text-transform: uppercase; }
#header IMG { float: left; padding: 20px 24px 24px 20px; }


/*content-primary ist der große Textteil rechts von der Navigation. In der Regel ist dort ein iframe eingebettet, dieser Abschnitt hat eine feste Breite und große Außenränder*/
#content-primary { 
 float: right; 
 margin: 12px 24px 60px 24px; 
 width: 528px; 
}
#content-primary p { 
 padding-bottom: 18px; 
}
/*der img tag hat für diesen Bereich einen negativen Außenabstnd nach links, so dass er nach links aus der Textllinie herausragt. Die Bilder sind dezent umrahmt.*/
#content-primary img { 
 float: left; 
 margin: -6px 24px 0 -114px; 
 padding: 3px; 
 border: solid 3px #eee; 
 background: #fff; 
} 

/*Für den Iframe, der im content primary eingebettet wird, habe ich die styles aus diesem kopiert*/
iframe { width: 658px; height: 1400px; overflow: auto; float: right; margin-top: 12px; margin-right: 12px; margin-bottom: 16px; border-style: none; outline-style: none; }
#id beleg  /* iframe für belegungspläne soll geringere höhe haben */ { width:511px; height:410px; }
#content-iframe { 
 margin: 12px 24px 60px 60px; 
 width: 528px; 
}
#content-iframe p { 
 padding-bottom: 18px; 
}
#content-iframe img { 
 float: left; 
 margin: -6px 24px 0 -60px; 
 padding: 3px; 
 border: solid 3px #eee; 
 background: #fff; 
}

/*Die Navigationsbox ist absolut positioniert, direkt unter dem header, mit einem Rahmen versehen.*/
#nav /* navigationsbox */ { font-size: 11px; text-indent: 5px; position: relative; top: 20px; left: 24px; width: 165px; height: 250px; float: left; padding: 6px; border: solid 3px #eee; }
/*Es ist ein zweistufiges Navigationsmenü in senkrechter Listenform definiert*/
li#navi  /* Listen für Navigation */ { list-style-type: none; list-style-image: none; }
li#navi2  /* Listen für Navigation Unterpunkte*/ { text-indent: 15px; list-style-type: none; list-style-image: none; }
/*Das nav-image hat einen oberen Abstand, sonst klebt es an dem Navigationsmenü dran*/
#nav img { background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; padding: 3px; float: left; margin-top: 6px; }


#content-secondary { float: right; width: 164px; font-size: 11px; color: #020247; margin-top: 30px; margin-right: 100px; margin-bottom: 60px; }
#content-secondary p { 
 padding-bottom: 18px; 
}


/*Der Footer hat die gleiche Höhe wie der Header, also ziemlich mächtig. Mit der gleichen gif-Grafik hinterlegt wie der Header*/
#footer { clear: both; height: 192px; font-size: 10px; line-height: 1em; text-shadow: 1px 1px 1px #333; color: #fff; background-image: url(images/Meer.gif); } 
#footer a:link, #footer a:visited { 
 color: #fbf8ec; background-color: transparent; text-transform: uppercase; 
}   
#footer li a:hover { color: #ff9; background-color: transparent; text-transform: uppercase; }  
#footer p { 
 padding: 132px 24px 0 24px; 
} 
.clear { 
 clear: both; 
}




/*Die drei Definitionen albumlist dienen zur Einrichtung einer horizontalen Bildergalerie, die ohne Tabellen auskommt*/
#albumlist {
	list-style-type: none;
}
#albumlist li {
	float: left;
	margin-right: 6px;
	margin-bottom: 10px;
	font: 0.8em;
}
#albumlist img {
	display: block;
	border: 2px solid #eee; 
}


/*Die Formulare werden mit den folgenden styles ansprechend gelayoutet, Eingabefelder und Textarea erhalten hellblaue Hintergründe, Button werden etwas stärker betont*/
input.txt {
  color: #00008b;
  background-color: #e3f2f7;
  border: inset 1px;
  width: 200px;
}
input.btn { color: #02024a; background-color: #e3f2f7; background-image: url(images/1_18hell.gif); background-repeat: repeat; border-color: #b2eaf9 navy navy #b2eaf9; border-style: outset; border-width: 1px; }
form p {
  clear: left;
  margin: 0;
  padding: 0;
  padding-top: 5px;
}
form p label {
  float: left;
  width: 35%;
}

textarea {
	clear: left;
	width: 382px;
	height: 200px;
	color: #00008b;
	background-color: #e3f2f7;
	border: solid 1px;
}