/*
  Styles für hafenstolz.de
  Version 2 Juni 2009
  Autor: Eva Braunsdorf
  Bearbeitung: www.bit-informationsdesign.de
  */

/*******************************************************
	Body mit gesamtem Inhalt/ großer Container
********************************************************/

html,body
{
	background: #d2d2d2 url(../_img/bg_streifen.jpg) repeat-x;
	margin-left: auto;
	margin-right: auto;
	font-family: Verdana, sans-serif;
	color: #706C6C; /*Schriftfarbe*/
	text-align: left; /*Für den Internet Explorer*/
	background-position: top left;
	scrollbar-base-color: #E5DECB;
	scrollbar-face-color: #E5DECB; /*Farbe des Schiebebalkens + der Scroll up & down pfeile der der Scrollbalken*/
	scrollbar-shadow-color: #A59B87; /*Die Farbe des Schattens der Scrollbalken*/
	scrollbar-highlight-color: #A59B87; /*Die Lichtern (links) der Scrollbalken*/
	scrollbar-3dlight-color: #E5DECB; /*3D effekt Farbe*/
	scrollbar-darkshadow-color: #E5DECB; /*Farbe den Schattens der ganz rechts ist*/
	scrollbar-track-color: #E5DECB; /*Farbe von der Laufleiste der Scrollbalken*/
	scrollbar-arrow-color: #A59B87; /*Pfeilfarbe von den Scrollbalken*/
}

img {border:none;}

.clear {clear:both;}

.hide
{
	position: absolute;
	top: -1000em;
	left: -1000em;
	height: 1px;
	width: 1px;
}

div#center
{
	position: absolute;
  	top: 0;
  	left: 50%;
  	width: 30em;
  	height: 20em;
  	margin-left: -23em;
  	margin-top: 0em;

	padding-top: 16px;

	width: 750px;
}

#hintergrund
{
/*	background: #FFFFFF; */
	height: 805px;
}

#container
{
	position: relative;
	left: 0px;
	top: 0px;
	width: 750px;
	border: solid 0px;
	z-index: 1;
}

/*******************************************************
	Header mit Mood
********************************************************/

#logoObenLinks
{
	position: absolute;
	border: solid 0px;
	margin-top: 0px;
	margin-left: 0px;
	width: 190px;
	height: 120px;
	padding: 0px;
}
#logoObenLinks img
{
	width: 190px;
	height: 120px;
}
#mood
{
	position: absolute;
	border: solid 0px;
	margin-top: 0px;
	margin-left: 195px;
	width: 490px;
	height: 120px;
}
#mood img
{
	width: 490px;
	height: 120px;
}

#balkenObenRechts
{
	position: absolute;
	border: solid 0px;
	margin-top: 0px;
	margin-left: 690px;
	width: 60px;
	height: 120px;
	background: #fff;
}

/*******************************************************
	Haupt-Navigation  vertikal
********************************************************/

#navMain
{
	position: absolute;
	border: solid 0px;
	margin-top: 125px;
	margin-left: 0px;
	height: 205px;
	width: 190px;
	background: #B7B7B7 url(../_img/B7B7B7_navi.gif);
}
.navcontainerVerti
{
	font-size: 10px;
	font-weight: bold;
	color: #464545;
	left: 0px;
	top: 0px;
	width: 190px;
	position: absolute;
}

.navlist
{
	list-style: none outside none;
	margin-left: 16px;
	margin-top: 7px;
	padding: 0px;
	border-bottom: solid 0px;
	width: 160px;
	font-size: 10px;
	font-weight: bold;
	letter-spacing: 1px;
}

.navlist li
{
	list-style: none;
	margin: 0;
	padding: 0.4em;
	border-top: solid 0px;
}

.navlist li a
{
	text-decoration: none;
}

#navcontainer ul
{
	list-style-type: none;
}

.navlist a, .navlist a:link, .navlist a:visited
{
	color: #464545;
}

.navlist a:active, .navlist li#active, .navlist li a#current, .navlist a:hover, .navlist li#hover
{
	color: #8D7A45;
}

/*******************************************************
	Box-Highlight links mittig
********************************************************/

#boxHighlight
{
	position: absolute;
	z-index: 1;
	width: 190px;
	height: 185px;
	margin-top: 335px;
	margin-left: 0px;
	border: solid 0px;
}

#boxHighlight img
{
	width: 190px;
	height: 185px;
}

/*******************************************************
	Box-Tips links unten
********************************************************/

#boxTips
{
	position: absolute;
	border: solid 0px;
	margin-top: 525px;
	margin-left: 0px;
	width: 190px;
	height: 280px;
	background: #B7B7B7 url(../_img/B7B7B7_navi.gif);
}

boxTipsImage
{
	position: absolute;
	border: solid 0px;
	margin-top: 525px;
	margin-left: 0px;
	width: 190px;
	height: 280px;
	background: #B7B7B7 url(../_img/B7B7B7_navi.gif);
}

#boxTipsTitle
{
	margin-top: 4px;
	margin-left: 6px;
	border: solid 0px;
	padding: 0;
	font-size: 9px;
	color: #FFFFFF;
	letter-spacing: 0.1em;
}

#boxTipsTitle a
{
	color: #FFFFFF;
	text-decoration: none;
}

/*******************************************************
	Sub-Navigation  horizontal
********************************************************/

#navHori
{
	position: absolute;
	margin-left: 195px;
	margin-top: 125px;
	height: 25px;
	width: 490px;
	background: #B0B0B0 url(../_img/B0B0B0_navi.gif);
	display: block;
	font-size: 10px;
	letter-spacing:1px;
	font-weight: bold;
}
ul.horinavi
{
	margin:0 0 0 16px;
	padding:0;
}
.horinavi li
{
	width:auto;
	float:left;
	display:inline;
	padding:8px 24px 0 0;
}
/*******************************************************
	Zustände Sub-Navigation  horizontal
********************************************************/

.horinavi a, .horinavi a:link, .horinavi a:visited
{
	color: #464545;
	text-decoration: none;
}

.horinavi a:active, .horinavi #active, .horinavi a#current, .horinavi a:hover, .horinavi #hover
{
	color: #8D7A45;
	text-decoration: none;
}

/*******************************************************
	Content I oben
********************************************************/

#content
{
	position: absolute;
	border: solid 0px;
	margin-top: 150px;
	margin-left: 195px;
	height: 334px;
	width: 461px;
	padding:18px 8px 18px 21px;
	background: #ECE6D7 url(../_img/ECE6D7_content.gif);
	display: block;
	z-index: 3;
	color:#8b8c88;
}
#content strong, #content .important
{
	color:#7d6024 !important;
}

#content h1, #content h2
{
	color:#7d6024;
	text-transform:uppercase;
	font-size: 13px;
	font-weight:bold;
	line-height: 20px;
	margin:24px 0 12px 0;
}

#content h1, #content h2.first
{
	margin-top:6px;
}

#content h2.subtitle
{
	color:#8b8c88;
	margin-top:-12px;
	margin-bottom:24px;
}

#content p, #content ul
{
	text-transform:uppercase;
	font-weight:bold;
	font-size:11px;
	line-height: 18px;
	margin:6px 0 12px 0;
	padding-bottom:4px;
}
#content p.first
{
	margin-top:0;
}
#content p.small
{
	font-size:9px;
	line-height: 15px;
}
#content ul
{
	margin-left:-21px;
}
#content li
{
	margin:0 0  0 -18px;
	padding:0 0 0 -18px;
	list-style-type:none;
}
#content a:link, #content a:visited
{
	color:#8b8c88;
	text-decoration: none;
}
#content a:hover, #content a:active, #content a:focus
{
	text-decoration: underline;
	color: #706C6C;
}
#content table
{
	margin-top:-10px;
	padding:0;
}
#content td
{
	vertical-align:top;
	padding-right:14px;
}

/*******************************************************
	Content Bildnavigation
********************************************************/

#contentGalerie
{
	position: absolute;
	margin-left: 195px;
	margin-top: 475px;
	z-index: 5;
	font-size:11px;
	font-weight:bold;
	color:#706C6C;
}

#contentGalerie img
{
	height: 9px;
	width: 9px;
	margin: 0 12px;
}

#contentGalerie a
{
	font-size: 10px;
	font-weight:normal;
	text-decoration: none;
	color: #706C6C;
	border: none;
}

#contentGalerie a:hover
{
	background: transparent;
}

#contentGalerie a span
{
	display: none;
	background: transparent;
}

#contentGalerie a:hover span
{
	position: absolute;
	top: -20px;
	left: 20px;
	width: 300px;
	display: block;
	text-align: left;
	background: transparent;
	letter-spacing: 0.1em;
	line-height: 14px;
}

#contentGalerie a#active
{
	font-size:11px;
	font-weight:bold;
}
#contentGalerie a#active span
{
	position: absolute;
	top: -35px;
	left: 20px;
	width: 300px;
	display: block;
	text-align: left;
	background: transparent;
	letter-spacing: 0.1em;
	font-size:10px;
	font-weight:bold;
	line-height: 14px;
}

/*******************************************************
	Content Popup
********************************************************/

#contentPopup
{
	position: absolute;
	border: solid 0px;
	margin-top: 125px;
	margin-left: -16px;
	height: 306px;
	width: 784px;
	background: #E5DECB url(../_img/E5DECB_popup.gif);
	display: block;
	z-index: 5;
	overflow: auto;
}

#contentPopup ul
{
	position: absolute;
	top:40px;
	left:10px;
}

#contentPopup li
{
	list-style:none;
	float:left;
	display:inline;
	width:auto;
	margin:0 38px 0 0;
}

#contentPopup h2
{
	position: absolute;
	font-size: 10px;
	font-weight: bold;
	letter-spacing: 0.1em;
	margin-top: 200px;
	line-height: 14px;
	white-space: nowrap;
	overflow:visible;
}

#contentPopup img
{
	height:184px;
}

#schliessenLinks
{
	position: absolute;
	top:0;
	left:0;
	z-index: 10;
}

#schliessen
{
	position: absolute;
	margin-top: -56px;
	margin-left:-50px;
}

#schliessenLinks img, #schliessen img
{
	width:58px;
	height:10px;
	margin:8px 10px;
}

/*******************************************************
	Content Popup - Corporate Design
********************************************************/

.cd #contentPopup ul img
{
	height:187px;
	width:631px;
}

/*******************************************************
	Content Popup - Webdesign
********************************************************/

.web #contentPopup ul
{
	left:-20px;
	width:760px;
}
.web #contentPopup li
{
	margin:0 20px 0 0;
}
#contentPopup h2 a
{
	color: #706C6C;
	text-decoration: none;
}
#contentPopup h2 a:hover
{
	color: #706C6C;
	text-decoration: underline;
}


/*******************************************************
	Content II unten
********************************************************/

#content2
{
	position: absolute;
	border: solid 0px;
	margin-top: 525px;
	margin-left: 195px;
	width: 461px;
	height: 244px;
	padding:18px 8px 18px 21px;
	background: #C8E2E2 url(../_img/bg_content2.gif);
	z-index: 20;
}

#content2 h2
{
	margin:0;
	padding-bottom:0;
	font-size: 10px;
	font-weight:bold;
	letter-spacing:1px;
	line-height: 18px;
}
#content2 p, #content2 ul
{
	font-size:11px;
	line-height: 15px;
	margin:6px 0 12px 0;
	padding-bottom:4px;
}

/*******************************************************
	Dekobalken rechts
********************************************************/

#balkenVertiRechts
{
	position: absolute;
	border: solid 0px;
	margin-top: 125px;
	margin-left: 690px;
	width: 60px;
	height: 680px;
	background: #C6C6C6 url(../_img/C6C6C6_VertiRechts.gif);
}