@charset "utf-8";

/******************************************************************
 *Author: Emanuel Rinne
 *Created: 2009	
 * Aktualisiert: David Wagner
 * 28.08.09				
/******************************************************************


/* --------------------------------------------------------------------------- */
/* -------------------------->>> GLOBAL <<<----------------------------------- */
/* --------------------------------------------------------------------------- */

* { margin: 0;	
	padding: 0; 
	list-style-type: none; 
	text-decoration: none;
	border: none;
	outline: none;
}

html {
	background: url(../images/body.jpg) repeat top center;
	
}

body {
	background:url(../images/bg-html.jpg) top center no-repeat;
	font-family:Arial, Helvetica, sans-serif;
	text-decoration: none;
	list-style-type: none;
	color: #5d533d;
	font-size: 12px;
}

html[xmlns^="http"] { overflow-y: scroll;}


/*
KLASSEN & ANDERE STANDARDS
==================================================*/

.clear { clear: both;}

.floatLeft { float: left;}

.floatRight { float: right;}

hr { 
	color: #41100C; 
	height: 1px; 
	border-top: solid 1px #41100C;
	border-bottom: transparent;
	clear: both;
	margin-bottom: 15px;
}

.bold {
	font-weight:bold;
}

.bolder {
	font-weight:bold;
	font-size:14px;
}

.image {
	border:none;
}

div.seperator {
	background:url(../images/seperator.jpg) top left repeat-x;
	height:1px;
	width:100%;
	padding:5px 0 5px 0;
}

ul.list span {
	width: 20px;
	height:30px;
	display: block;
	float: left;
	line-height:18px;
}

ul.list {
	margin:0 0 20px 0;
	position:relative;
}

ul.list li {
	background:url(../images/li-arrow.gif) top left no-repeat;
	background-position: 0 8px;
	margin:0 0 10px 0;
}




/*
Tabellen
==================================================*/


table.preise tbody {
   border-collapse: seperate; /* Alternative wäre border-collapse: separate */
   background: white;
   color: #5d533d;
}

table.strand {
   width: 290px;
   border-collapse: seperate; /* Alternative wäre border-collapse: separate */
   background: white;
   color: #5d533d;
}


table.termine {
   width: 610px;
   border-collapse: seperate; /* Alternative wäre border-collapse: separate */
   color: #5d533d;
}

table.termine th, td{
   padding: 8px 8px 8px 8px;
   width:260px;
}
th, td {
   padding: 8px 8px 8px 8px;
   width:189px;
}

th {
   font-family:Arial, Helvetica, sans-serif;
   font-size: 12px;
   font-weight: normal;
}

tr.stripes {
   background-color: #FCEBC0;
   color: #5d533d;
}

tr:hover {
   background-color: #91C2FF;
   color: white;
}
/* Im Tabellenkopf und -fuß keinen Hover-Effekt */
thead tr:hover,
tfoot tr:hover {
   background-color: transparent;
   color: inherit;
}


/* --------------------------------------------------------------------------- */
/* -------------------------->>> LAYOUT <<<----------------------------------- */
/* --------------------------------------------------------------------------- */

/*
CONTAINER
==================================================*/

div#container {
	width: 955px;
	margin: 0 auto;
}




/*
HEADER
==================================================*/

div#header {
	width: 950px;
	height:384px;
	background:url(../images/header.jpg) top left no-repeat;
}


/*
LOGO
==================================================*/

h1.logo{
	left:25px;
	top:20px;
	position:relative;
	width:295px;
	height:171px;

}


/*SLIDESHOW
==================================================*/

div#no-slide {
	position: absolute;
	width: 100px;
	height: ;
	background: ;
	color: #fff;
	padding: 5px;
	top: 0;
	left: 0;
	line-height: 16px;
	font-size: 12px;
}

div#slideshow {
	width:290px;
	height:150px;
	float:left;
}


/*
CONTENT
==================================================*/

div#content-container { 
	float: left;
	width: 935px;
}

div#content-sidebar-container { 
	float: left;
	width: 250px;
	margin: 10px 0 0 10px;
}

div#content-main { 
	float: left;
	width: 640px;
	min-height: 300px;
	margin: 10px 0 0 24px;
}

div#wetter {
	width:154px;
	float:left;
	margin:0 15px 0 0;
	background:none;
}


/*
FOOTER
==================================================*/

div#footer {
	background:url(../images/footer.jpg) top left no-repeat;
	float:left;
	width:927px;
	height:162px;
	position:relative;
	margin:0 0 0 20px; 
}

#footer-content1 {
	float:left;
	font-size: 11px;
	width:250px;
	margin:0 0 0 10px;
}

#footer-content2 {
	float:left;
	width:250px;
	margin: 0 0 0 10px;
}

#footer-content3 {
	float:left;
	width:250px;
	margin: 0 0 0 10px;
}




/* --------------------------------------------------------------------------- */
/* --------------------->>> NAVIGATION <<<------------------------------------ */
/* --------------------------------------------------------------------------- */

ul#navi.naviactive,
ul#navi {
	background:url(../images/navi-main.jpg) top left no-repeat;
	position:relative;
	width:905px;
	height:67px;
	display: block;
	margin:0 0 0 22px; 
}

ul#navi li {
	position: relative;
	float:left;
}

ul#navi a {
	display:block;
	height:47px;
}

a.startseite {
	width:95px;
	text-indent:-9999px;
}

a.aktuelles {
	width:90px;
	text-indent:-9999px;
}

a.preise {
	width:75px;
	text-indent:-9999px;
}

a.beachclub {
	width:125px;
	text-indent:-9999px;
}

a.events {
	width:80px;
	text-indent:-9999px;
}

a.media {
	width:80px;
	text-indent:-9999px;
}

a.diarydw {
	width:80px;
	text-indent:-9999px;
}


/*
Active Menu
==================================================*/

ul#navi.naviactive01 li a.startseite,
ul#navi li a.startseite:hover {
	background: url(../images/navi-main.jpg) no-repeat 0px -67px;
}

ul#navi.naviactive02 li a.aktuelles,
ul#navi li a.aktuelles:hover {
	background: url(../images/navi-main.jpg) no-repeat -95px -67px;
}

ul#navi.naviactive03 li a.preise,
ul#navi li a.preise:hover {
	background: url(../images/navi-main.jpg) no-repeat -185px -67px;
}

ul#navi.naviactive04 li a.beachclub,
ul#navi li a.beachclub:hover {
	background: url(../images/navi-main.jpg) no-repeat -260px -67px;
}

ul#navi.naviactive05 li a.events,
ul#navi li a.events:hover {
	background: url(../images/navi-main.jpg) no-repeat -385px -67px;
}

ul#navi.naviactive06 li a.media,
ul#navi li a.media:hover {
	background: url(../images/navi-main.jpg) no-repeat -465px -67px;
}

ul#navi.naviactive07 li a.diarydw,
ul#navi li a.diarydw:hover {
	background: url(../images/navi-main.jpg) no-repeat -545px -67px;
}

/* --------------------------------------------------------------------------- */
/* -------------------------->>> FLYOUT-MENU <<<------------------------------ */
/* --------------------------------------------------------------------------- */

ul#navi li#beachclub ul,
ul#navi li#media ul {
	list-style: none;
	display: none;
	left: 95px;
	top: 46px;
	position: absolute;
	border:1px solid #776937;
	background:url(../images/sub-menu-bg.jpg) top left repeat;
	text-indent:-9999px;
}

ul#navi li#beachclub ul li,
ul#navi li#media ul li {
	background: none;
}

ul#navi li#beachclub ul li a,
ul#navi li#media ul li a {
	height: 32px;
	display: block;
}

ul#navi li#beachclub ul li a.wassersport {
	width:95px;
	text-indent:-9999px;
}

ul#navi li#beachclub ul li a.strand {
	width:85px;
	text-indent:-9999px;
}

ul#navi li#beachclub ul li a.gastronomie {
	width:100px;
	text-indent:-9999px;
}

ul#navi li#beachclub ul li a.bcncrew {
	width:75px;
	text-indent:-9999px;
}

ul#navi li#beachclub ul li a.teambcn {
	width:80px;
	text-indent:-9999px;
}

ul#navi li#beachclub ul li a.shop {
	width:55px;
	text-indent:-9999px;
}

ul#navi li#beachclub ul li a.bahnmiete {
	width:70px;
	text-indent:-9999px;
}

ul#navi li#media ul li a.bilder {
	width:50px;
	text-indent:-9999px;
}

ul#navi li#media ul li a.videos {
	width:60px;
	text-indent:-9999px;
}

ul#navi li#media ul li a.webcam {
	width:60px;
	text-indent:-9999px;
}


ul#navi li#beachclub ul {
	left: 10px;
	top:47px;
	width:568px;
	position: absolute;
	background:url(../images/navi-fly.jpg) top left no-repeat;
	height:33px;
}

ul#navi.naviactive05 li#beachclub a.wassersport,
ul#navi li#beachclub a.wassersport:hover {
	background:url(../images/navi-fly.jpg) no-repeat 0px -33px;
}

ul#navi.naviactive06 li#beachclub a.strand,
ul#navi li#beachclub a.strand:hover {
	background:url(../images/navi-fly.jpg) no-repeat -95px -33px;
}

ul#navi.naviactive07 li#beachclub a.gastronomie,
ul#navi li#beachclub a.gastronomie:hover {
	background:url(../images/navi-fly.jpg) no-repeat -180px -33px;
}

ul#navi.naviactive08 li#beachclub a.bcncrew,
ul#navi li#beachclub a.bcncrew:hover {
	background:url(../images/navi-fly.jpg) no-repeat -280px -33px;
}

ul#navi.naviactive09 li#beachclub a.teambcn,
ul#navi li#beachclub a.teambcn:hover {
	background:url(../images/navi-fly.jpg) no-repeat -355px -33px;
}

ul#navi.naviactive10 li#beachclub a.shop,
ul#navi li#beachclub a.shop:hover {
	background:url(../images/navi-fly.jpg) no-repeat -435px -33px;
}

ul#navi.naviactive11 li#beachclub a.bahnmiete,
ul#navi li#beachclub a.bahnmiete:hover {
	background:url(../images/navi-fly.jpg) no-repeat -490px -33px;
}

ul#navi.naviactive12 li#media a.bilder,
ul#navi li#media a.bilder:hover {
	background:url(../images/navi-fly-add.jpg) no-repeat 0px -32px;
}

ul#navi.naviactive13 li#media a.videos,
ul#navi li#media a.videos:hover {
	background:url(../images/navi-fly-add.jpg) no-repeat -50px -32px;
}

ul#navi.naviactive14 li#media a.webcam,
ul#navi li#media a.webcam:hover {
	background:url(../images/navi-fly-add.jpg) no-repeat -110px -32px;
}

ul#navi li#media ul {
	left: -1px;
	width:181px;
	position: absolute;
	background:url(../images/navi-fly-add.jpg) top left no-repeat;
	height:31px;
}

ul#navi li#beachclub:hover ul,
ul#navi li#media:hover ul {
	display: block!important;
}



/* --------------------------------------------------------------------------- */
/* -------------------------->>> SUBNAVIGATION <<<---------------------------- */
/* --------------------------------------------------------------------------- */

ul#navi-sub.naviactive,
ul#navi-sub {
	background:url(../images/navi-sub.jpg) top left no-repeat;
	position:relative;
	width:175px;
	height:20px;
	display: block;
	top:73px;
	left:743px;
}

ul#navi-sub li {
	position: relative;
	float:left;
}

ul#navi-sub a {
	display:block;
	height:20px;
}

a.kontakt {
	width:50px;
	text-indent:-9999px;
}

a.anfahrt {
	width:60px;
	text-indent:-9999px;
}

a.impressum {
	width:65px;
	text-indent:-9999px;
}


ul#navi-sub.naviactive07 li a.kontakt,
ul#navi-sub li a.kontakt:hover {
	background: url(../images/navi-sub.jpg) no-repeat -0px -20px;
}

ul#navi-sub.naviactive08 li a.anfahrt,
ul#navi-sub li a.anfahrt:hover {
	background: url(../images/navi-sub.jpg) no-repeat -50px -20px;
}

ul#navi-sub.naviactive09 li a.impressum,
ul#navi-sub li a.impressum:hover {
	background: url(../images/navi-sub.jpg) no-repeat -110px -20px;
}

/* --------------------------------------------------------------------------- */
/* -------------------------->>> LINKS <<<------------------------------------ */
/* --------------------------------------------------------------------------- */


div#footer a.email {
	width:163px;
	height:20px;
	background:url(../images/mail.jpg) top left no-repeat;
	position:absolute;
	top:59px;
	left:700px;
}

div#footer a.email:hover {
	width:163px;
	height:20px;
	background:url(../images/mail-hover.jpg) top left no-repeat;
	position:absolute;
	top:59px;
	left:700px;
}

a, div.content-sidebar-container  {
	font-size:11px;
	text-decoration:underline;
	color:#5d533d;
	font-weight:normal;
}

a:hover, div.content-sidebar-container  {
	font-size:11px;
	text-decoration:none;
	color:#5d533d;
}

div#content-main a,
.escape span {
	text-decoration: underline;
	color: #666;
	outline: none;
	font-size:12px;
}

div#content-main a:hover,
.escape:hover span {
	text-decoration: none;
	color: #333;
}



/* --------------------------------------------------------------------------- */
/* -------------------------->>> CONTENT <<<---------------------------------- */
/* --------------------------------------------------------------------------- */



/*
MAIN
=================*/


div.content-column-left {
	width:300px;
	float:left;
}

div.content-column-right {
	width:300px;
	float:left;
	padding: 0 0 0 20px;
}


div.content-column-leftcam {
	width:270px;
	float:left;
}

div.content-column-rightcam {
	width:330px;
	float:left;
	padding: 0 0 0 20px;
}


/*
INDEX
=================*/

/*
TEAM-BCN
=================*/

div.team-container {
	width:620px;
	float:left;
	padding-bottom:20px;
}

div.team-pix {
	width:240px;
	float:left;
}

div.team-txt {
	width:380px;
	float:left;
}


/*
HEADLINES
==================================================*/

h1 {
	font-size: 25px;
	color: #ccc;
	font-weight:lighter;
	font-family:Arial, Helvetica, sans-serif;
	padding: 0 0 20px 0;
}

h2 {
	font-size: 17px;
	color: #333;
	font-weight:lighter;
	font-family:Arial, Helvetica, sans-serif;
	background:url(../images/h2/h2-bg.jpg) top left no-repeat;
	width:258px;
	height:25px;
	text-indent:-9999px;
	margin:0 0 20px 0;
}

h3 {
	font-size: 14px;
	color: #373415;
	font-weight:lighter;
	font-family:Arial, Helvetica, sans-serif;
	padding: 0 0 15px 0;
}

/*
H1
=================*/

h1.willkommen {
	background:url(../images/h1/h1-willkommen.jpg) top left no-repeat;
	height:40px;
	text-indent:-9999px;
}


/*
H2
=================*/

h2.wetter {
	background:url(../images/h2/h2-wetter.jpg) top left no-repeat;
	width:250px;
	height:30px;
}
h2.diary {
	background:url(../images/h2/h2-diary.jpg) top left no-repeat;
	width:250px;
	height:30px;
}

h2.news {
	background:url(../images/h2/h2-news.jpg) top left no-repeat;
	width:250px;
	height:30px;
}

h2.oeffnungszeiten {
	background:url(../images/h2/h2-oeffnungszeiten.jpg) top left no-repeat;
	width:250px;
	height:35px;

}


h2.bgdiary {
	background:url(../images/h2/h2_bg_diary.jpg) top left no-repeat;
	width:258px;
	height:57px;

}


h2.aktuelles {
		background-position: 0 0;

}

h2.preise {
		background-position: 0 -30px;

}

h2.beachclub {
		background-position: 0 -60px;

}


h2.wassersport {
		background-position: 0 -90px;

}


h2.strand {
		background-position: 0 -120px;

}


h2.gastronomie {
		background-position: 0 -150px;

}


h2.bcncrew {
		background-position: 0 -180px;

}


h2.teambcn {
		background-position: 0 -210px;

}


h2.shop {
		background-position: 0 -240px;

}

h2.bahnmiete {
		background-position: 0 -270px;

}

h2.events {
		background-position: 0 -300px;

}

h2.media {
		background-position: 0 -330px;

}

h2.bilder {
		background-position: 0 -360px;

}

h2.videos {
		background-position: 0 -390px;

}

h2.webcam {
		background-position: 0 -420px;

}

h2.kontakt {
		background-position: 0 -450px;

}

h2.anfahrt {
		background-position: 0 -480px;

}

h2.impressum {
		background-position: 0 -510px;

}

h2.danke {
		background-position: 0 -540px;

}

h2.fehler {
		background-position: 0 -570px;

}

/*
H3
=================*/

h3.times {
	padding: 0 20px 0 0 !important;
}

/*
P
==================================================*/

div#content-main p {margin: 0 0 20px 0; line-height: 18px;}
div#content-sidebar-container p {margin: 0 0 10px 0; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size:11px;}

div#datenschutzhinweis p { font-size: 11px;}

	
/*
IMAGEBORDER
==================================================*/

.imgborder {
	border: 3px solid #d4ccb5;
	padding: 2px;
	background:#fff;
	margin: 4px 8px 4px 0;
	cursor: pointer;
    outline: none;
}

.imgborder:hover{
	border: 3px solid #F3A401;
	padding: 2px;
}

.imgbordernohover {
	border: 3px solid #d4ccb5;
	padding: 2px;
}

.imgbordernohover-anfahrt {
	border: 3px solid #d4ccb5;
	padding: 2px;
	width:600px;
}

/* --------------------------------------------------------------------------- */
/* -------------------------->>> KONTAKT | IMPRESSUM <<<---------------------- */
/* --------------------------------------------------------------------------- */


/*
KONTAKT
==================================================*/

div#personalien { float: left; width: 330px!important;}
div#nachrichtenfeld { float: left; width: 200px;}


/*
IMPRESSUM
==================================================*/

div#adressdaten { float: left; width: 300px;}
div#geschaeftsdaten { float: left; width: 300px;}