/* Style Sheet - Index - Uebersicht */
/* http://www.thorsten-reinicke.eu/ */
/* © 2007-2015 Thorsten Reinicke */

html {
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0) ; }

html, body {
	height: 100% ; 
	padding: 0 ; 
	border: 0 ; 
	margin: 0 ; 
	background-color: #FFFFFF ; }

@font-face {
  font-family: Raleway-Thin ;
  src: url(Raleway/Raleway-Thin.ttf) ; }


/* TEXT */

p
{	font-family: Arial, Helvetica, sans-serif ; 
	font-size: 12px ; 
	font-weight: normal ; 
	font-style: normal ; 
	letter-spacing: 1px ; 
	line-height: 1.5 ; 
	color: #000000 ; 
	text-align: center ; 
	padding: 0 ; 
	border: 0 ; 
	margin: 0 0 6px 0 ; }


/* HEADER */

header
{	width: 100% ;  
	text-align: center ; 
	padding: 0 ; 
	border: 0 ; 
	margin: 24px 0 24px 0 ; }

header.flagge {
	background: #FFFFFF url(index/flaggen-web.gif) no-repeat 48px 48px ; }

header h1.img
{	font-size: 0 ; 
	line-height: 0 ; 
	padding: 0 ; 
	border: 0 ; 
	margin: 0 ; }

header h1 img
{	vertical-align: bottom ; 
	padding: 0 ; 
	border: 0 ; 
	margin: 0 ; }

header h1
{	font-family: Times, "Times New Roman", serif ; 
	font-size: 18px ; 
	font-weight: normal ; 
	font-style: italic ; 
	color: #333333 ; 
	line-height: 1 ; 
	letter-spacing: 1px ; 
	padding: 0 ; 
	border: 0 ; 
	margin: 6px 0 6px 0 ; }

header h2
{	font-family: Times, "Times New Roman", serif ; 
	font-size: 24px ; 
	font-weight: normal ; 
	font-style: italic ; 
	color: #333333 ; 
	line-height: 1 ; 
	letter-spacing: 1px ; 
	padding: 0 ; 
	border: 0 ; 
	margin: 6px 0 6px 0 ; }


/* NAVIGATION */

nav {
	padding: 0 ; 
	border: 0 ; 
	margin: 0 ; }

nav p
{	letter-spacing: 1px ; 
	color: #333333 ; }

nav p a, nav p b
{	margin-left: 6px ; 
	margin-right: 6px ; }

nav a {
	padding: 3px 5px 3px 5px ; 
	border-radius: 8px ; 
	-webkit-transition: all 0.5s ease-in-out ; 
	transition: all 0.5s ease-in-out ; }

nav a:link, nav a:visited
{	color:#330033 ; 
	text-decoration: underline ; }

nav a:hover {
	color:#CC3300 ; 
	text-decoration: none ; 
	background: #DDDDDD ; 
	box-shadow: 1px 1px 4px rgba(0,0,0,0.5) ; }

nav a:active
{	color:#CC3300 ; 
	text-decoration: none ; 
	background: #EEEEEE ;
	box-shadow: inset 1px 1px 4px rgba(0,0,0,0.5) ; }


/* ASIDE */

aside
{	text-align: center ; 
	padding: 24px 0 0 0 ; 
	border: 0 ; 
	margin: 0 13% 0 13% ; }

aside p b {
	font-size: 16px ; 
	color: #666666 ; }


/* FOOTER */

footer
{	width: auto ; 
	text-align: center ; 
	padding: 0 ; 
	border: 0 ; 
	margin: 0 48px 0 48px ; }

h4
{	padding: 24px 0 0 0 ; 
	border: 0 ; 
	margin: 0 0 6px 0 ; }

footer h4 img
{	width: 36px ; }

footer img
{	width: 100% ; 
	height: auto ; 
	vertical-align: bottom ; }


/* NAVIGATION */

a:link
{	color:#330033 ; text-decoration: underline ; }

a:visited
{	color:#330033 ; text-decoration: underline ; }

a:hover
{	color:#CC3300 ; text-decoration: none ; 
	background: #DDDDDD ; }

a:active
{	color:#FF9966 ; text-decoration: underline ; 
	background: #EEEEEE ; }


/* SECTION */

section {
	display: -webkit-flex ; 
	display: flex ;
	-webkit-flex-wrap: wrap ; 
	flex-wrap: wrap ; 
	padding: 0 ; 
	border: 0 ; 
	margin: 0 45px 0 45px ; }

section h2 {
	-webkit-flex-grow: 1 ; 
	flex-grow: 1 ; 
	-webkit-flex-shrink: 1 ; 
	flex-shrink: 1 ; 
	width: 384px ; 
	height: 192px ; 
	padding: 0 ; 
	border: 0 ; 
	margin: 0 3px 6px 3px ; 
	box-shadow: 0px 0px 0px rgba(0,0,0,0.5) ; 
	opacity: 1 ; 
	-webkit-transition: all 0.5s ease-in-out ; 
	transition: all 0.5s ease-in-out ; }

section h2:first-child {
	width: 50% ;  }

section h2:hover {
	box-shadow: 3px 3px 12px rgba(0,0,0,0.6) ; 
	-webkit-transition: all 0.5s ease-in-out ; 
	transition: all 0.5s ease-in-out ; 
	z-index: 10 ; }

section h2:active {
	box-shadow: inset 4px 4px 8px rgba(0,0,0,1) ; 
	-webkit-transition: all 0s ease-in-out ; 
	transition: all 0s ease-in-out ; }

section h2 small {
	opacity: 0 ;  
	-webkit-transition: all 0.5s ease-in-out ; 
	transition: all 0.5s ease-in-out ; }

section h2:hover small {
	opacity: 1 ; 
	-webkit-transition: all 0.5s ease-in-out ; 
	transition: all 0.5s ease-in-out ; }


a:hover, a:link, a:visited {
	-webkit-transition: all 0.5s ease-in-out ; 
	transition: all 0.5s ease-in-out ; }

a:active {
	-webkit-transition: all 0s ease-in-out ; 
	transition: all 0s ease-in-out ; }


/* WEBDESIGN */

/* index/back_webdesign.jpg */

h2.webdesign
{	background: #FFFFFF url(webdesign/walk2.jpg) no-repeat top center ; 
	background-size: cover ;  }

h2.webdesign a
{	display: block ; 
	font-family: Raleway-Thin, Arial, sans-serif ; 
	font-size: 24px ; 
	font-weight: normal ; 
	font-style: normal ; 
	color: #fff ; 
	letter-spacing: 1px ; 
	line-height: 36px ; 
	height:  ; 
	text-decoration: none ; 
	text-align: right ; 
	padding: 60px 60px 60px 24px ; 
	border: 0 ; 
	margin: 0 ; }

h2.webdesign a span {
	background: rgba(50,40,55,0.5) ; 
	box-shadow: 12px 12px 8px rgba(0,0,0,0.5) ; }

a.webdesign small
{	font-family: Raleway-Thin, Arial, sans-serif ; 
	font-size: 24px ; 
	color: #fff /* rgb(255,165,0) */ ;  }

a.webdesign:hover
{	background-color: rgba(0,255,255,0.3) ; }

a.webdesign:active
{	background-color: rgba(0,255,255,0.3) ; }


/* AMRUM */

h2.amrum
{	background: #F5F0EB url(index/back_amrum.jpg) repeat center center ; 
	background-size: cover ; 
	background-position: top center ; }

h2.amrum a
{	display: block ; 
	font-family: Times, "Times New Roman", serif ; 
	font-size: 24px ; 
	font-weight: normal ; 
	font-style: italic ; 
	color: #FAF5F0 ; 
	letter-spacing: 1px ; 
	line-height: 24px ; 
	height: 48px ; 
	text-decoration: none ; 
	text-align: center ; 
	padding: 120px 24px 24px 24px ; 
	border: 0 ; 
	margin: 0 ; }

a.amrum small
{	font-size: 18px ; }

a.amrum:hover
{	 background-color: rgba(255,165,0,0.3) ; }

a.amrum:active
{	background-color: rgba(255,165,0,0.3) ; }


/* SPIEKEROOG */

h2.spiekeroog
{	background: #F5F0EB url(index/back_spiekeroog.jpg) repeat center top ; }

h2.spiekeroog a
{	display: block ; 
	font-family: Georgia, serif ; 
	font-size: 24px ; 
	font-weight: normal ; 
	font-style: italic ; 
	color: #0F5544 ; 
	letter-spacing: 1px ; 
	line-height: 24px ; 
	height: 48px ; 
	text-decoration: none ; 
	text-align: center ; 
	padding: 24px 24px 120px 24px ; 
	border: 0 ; 
	margin: 0 ; }

a.spiekeroog small
{	font-size: 18px ; }

a.spiekeroog:hover
{	background-color: rgba(255,215,0,0.3) ; }

a.spiekeroog:active
{	background-color: rgba(255,215,0,0.3) ; }




/* rhododendron */

h2.rhododendron
{	background: #F5F0EB url(rhododendron/foto/20070501_0029_M.jpg) repeat center 20% ; }

h2.rhododendron a
{	display: block ; 
	font-family: Times,'Times New Roman', serif ; 
	font-size: 24px ; 
	font-weight: normal ; 
	font-style: italic ; 
	color: #660033 ; 
	letter-spacing: 1px ; 
	line-height: 24px ; 
	height: 48px ; 
	text-decoration: none ; 
	text-align: center ; 
	padding: 72px 24px 72px 24px ; 
	border: 0 ; 
	margin: 0 ; }

a.rhododendron small
{	font-size: 18px ; }

a.rhododendron:hover
{	background-color: rgba(255,0,127,0.3) ; }

a.rhododendron:active
{	background-color: rgba(255,0,127,0.3) ; }




/* KRAFTSTAU */

h2.kraftstau
{	background: #F5F0EB url(index/back_Kraftstau.jpg) repeat center center ; 
	background-size: cover ; 
	background-position: top center ; }

h2.kraftstau a
{	display: block ; 
	font-family: Arial, Helvetica, sans-serif ; 
	font-size: 24px ; 
	font-weight: normal ; 
	font-style: ormal ; 
	color: #FAF5F0 ; 
	letter-spacing: 1px ; 
	line-height: 24px ; 
	height: 48px ; 
	text-decoration: none ; 
	text-align: center ; 
	padding: 120px 24px 24px 24px ; 
	border: 0 ; 
	margin: 0 ; }

a.kraftstau small
{	font-size: 18px ; }

a.kraftstau:hover
{	 background-color: rgba(0,0,165,0.3) ; }

a.kraftstau:active
{	background-color: rgba(0,0,165,0.3) ; }


/* OUTDOOR */

h2.outdoor
{	background: #FFFFFF url(index/outdoor_back_gross.jpg) no-repeat -4px -51px ; 
	background-size: cover ; 
	background-position: 50% 25% ; }

h2.outdoor a
{	display: block ; 
	font-family: Times, "Times New Roman", serif ; 
	font-size: 24px ; 
	font-weight: normal ; 
	font-style: italic ; 
	color: #1F1913 ; 
	letter-spacing: 1px ; 
	line-height: 24px ; 
	height: 48px ; 
	text-decoration: none ; 
	text-align: left ; 
	padding: 72px 24px 72px 72px ; 
	border: 0 ; 
	margin: 0 ; }

a.outdoor small
{	color: #003333 ; 
	font-size: 18px ; }

a.outdoor:hover
{	background-color: rgba(0,128,0,0.3) ; }

a.outdoor:active
{	background-color: rgba(0,128,0,0.3) ; }


/* FOTOGALERIE */

h2.fotogalerie
{	background: #FFFFFF url(index/back_fotogalerie.jpg) no-repeat -4px -84px ; }

h2.fotogalerie a
{	display: block ; 
	font-family: Times, "Times New Roman", serif ; 
	font-size: 24px ; 
	font-weight: normal ; 
	font-style: italic ; 
	color: #F0F5FA ; 
	letter-spacing: 1px ; 
	line-height: 1 ; 
	height: 48px ; 
	text-decoration: none ; 
	text-align: left ; 
	padding: 72px 24px 72px 72px ; 
	border: 0 ; 
	margin: 0 ; }

a.fotogalerie:hover
{	background-color: rgba(255,0,0,0.3) ; } 

a.fotogalerie:active
{	background-color: rgba(255,0,0,0.3) ; }


/* KANT */

h2.kant
{	background: #f7f7ef url(index/back_kant.jpg) no-repeat -50px center ; }

h2.kant a
{	display: block ; 
	font-family: Arial, Helvetica, sans-serif ; 
	font-size: 24px ; 
	font-weight: normal ; 
	font-style: normal ; 
	color: #444455 ; 
	letter-spacing: 1px ; 
	line-height: 24px ; 
	height: 48px ; 
	text-decoration: none ; 
	text-align: right ; 
	padding: 72px 24px 72px 24px ; 
	border: 0 ; 
	margin: 0 ; }

a.kant:hover
{	background-color: rgba(153,85,68,0.3) ; }

a.kant:active
{	background-color: rgba(153,85,68,0.3) ; }


/* HPV */

h2.hpv
{	background: #FDEEE9 url(index/back_hpv.jpg) repeat center center ; }

h2.hpv a
{	display: block ; 
	font-family: Arial, Helvetica, sans-serif ; 
	font-size: 22px ; 
	font-weight: bold ; 
	font-style: normal ; 
	color: #332211 ; 
	letter-spacing: 1px ; 
	line-height: 24px ; 
	height: 48px ; 
	text-decoration: none ; 
	text-align: left ; 
	padding: 72px 24px 72px 72px ; 
	border: 0 ; 
	margin: 0 ; }

a.hpv small
{	font-size: 16px ; }

a.hpv:hover
{	background-color: rgba(204,0,0,0.3) ; }

a.hpv:active
{	background-color: rgba(204,0,0,0.3) ; }


/* TCPA */

h2.tcpa
{	background: #FFFFFF url(index/back.jpg) no-repeat -200px 50% ; }

h2.tcpa a
{	display: block ; 
	font-family: Times, "Times New Roman", serif ; 
	font-size: 24px ; 
	font-weight: bold ; 
	font-style: normal ; 
	color: #000000 ; 
	letter-spacing: 1px ; 
	line-height: 24px ; 
	height: 48px ; 
	text-decoration: none ; 
	text-align: center ; 
	padding: 72px 24px 72px 24px ; 
	border: 0 ; 
	margin: 0 ; }

a.tcpa small
{	font-family: Arial, Helvetica, sans-serif ; 
	font-size: 14px ; 
	font-weight: normal ; 
	font-style: normal ; 
	color: #998877 ; 
	text-align: center ;  }

a.tcpa:hover
{	background-color: rgba(0,102,153,0.3) ; }

a.tcpa:active
{	background-color: rgba(0,102,153,0.3) ; }


/* VERSCHIEDENES */


/* kontakt */


/* impressum */

#jollyroger {
	position: absolute ; 
	top: 72px ; 
	right: 72px ; 
	z-index: 1 ; 
	}

#jollyrogerschiff2
{	position: absolute ; 
	top: 24px ; 
	left: 96px ; }

#obenlinks {
	position: fixed ; 
	top: -7px ; 
	left: -25px ; 
	z-index: 3 ; 
	}

#obenrechts {
	position: fixed ; 
	top: -7px ; 
	right: -25px ; 
	z-index: 3 ; 
	}

#untenlinks {
	position: fixed ; 
	bottom: -7px ; 
	left: -25px ; 
	z-index: 3 ; 
	}

#untenrechts {
	position: fixed ; 
	bottom: -7px ; 
	right: -25px ; 
	z-index: 3 ; 
	}