@charset "utf-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Gudea:400,400italic,700);

@-webkit-viewport {  width: device-width; }
@-moz-viewport {  width: device-width; }
@-ms-viewport {  width: device-width; }
@-o-viewport {  width: device-width; }
@viewport {  width: device-width; }

*{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.clear-fix {  clear: both;}

/* Formatierte Tags */
html { width:100%; height:100%; font-size:62.5%;}
body {
	background-color: #FFF;	background-image: url(../images/bg_sea_big.jpg);	background-size:cover;	background-repeat: no-repeat;
	margin: 0px;	padding: 0px;	height: 100%;	width: 100%;
	font-family:'Gudea', sans-serif;	background-attachment: fixed;	background-position: center center;	color: #333;
}
a { color: #005A9A; }
td { font-size: 13px;  margin: 0px; padding-right: 6px;  }
img {/*width:auto;*/ max-width:100%; height:auto;}
video, embed, object { max-width: 100%;}
table, tr, tr {	border-collapse: collapse;}
iframe { position: relative; width: 100%; max-width:100%;  }

/* Schrift */
h1{ font-size: 20px; padding: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 14px; margin-left: 0px; font-weight: bold; }
h2{ font-size: 16px; padding: 0px; margin-top: 5px; margin-right: 0px; margin-bottom: 12px; margin-left: 0px; font-weight: bold; }
h3 { font-size: 13px;	padding: 0px;	margin-top: 5px;	margin-right: 0px;	margin-bottom: 3px;	margin-left: 0px;	font-weight: bold;}
h4{ font-size: 12px; padding: 0px; margin-top: 5px; margin-right: 0px; margin-bottom: 12px; margin-left: 0px; font-weight: bold; }
p, #content li{ font-size: 14px; padding: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; }

td { font-size: 14px; padding: 0px;  }


/* Container */
#rahmen {
	position:relative;  max-width:1370px; width:98%;	min-width:300px;	height:auto;	z-index:1;	margin-top: 0%;	margin-right: auto;	margin-bottom: 0%;	margin-left: auto;
	text-align: left;	padding: 0px;	float: none;
	clear: both;
}
header {
	position:relative;
	width:100%;	height:95px;
	z-index:2;	margin: 0;	float: left;	background-color: #FFF;
	padding-top: 5px;	padding-right: 0px;	padding-bottom: 0px;	padding-left: 0px;
}
.header_inner {
	position:relative;  max-width:1370px; width:98%;margin-left: auto;margin-right: auto;	float: none;
}
#logo_and_nav {
	height: 100%;	width:87.591%; max-width:1200px;
	margin-top: 0px;	margin-bottom: 0px;	
	padding-top: 20px;	padding-right: 40px;	padding-bottom: 0px;	padding-left: 40px;
	box-sizing: border-box;
	float:left;
	position:relative;
}

#site {
	position:relative;
	width:87.591%; max-width:1200px;	height:auto;
	float: left;
	background-color: #FFF;
	padding-top: 0px;	padding-right: 0px;	padding-bottom: 30px;	padding-left: 0px;	margin: 0px;
}
.button {float: right;  margin-right: 10px;}
.button_margin { margin-right: 10px;}
#button_nav {
	float: right;	height: auto;	min-height: 48px;	width: 50%;
	padding: 0px;
	clear: both;
	position: absolute;
	z-index: 25;
	top: 0px;
	right: 0px;
	margin-top: 15px;	margin-right: 1.5%;	margin-bottom: 0px;	margin-left: 0px;
}
/*
#welcome {	float: none;	height: auto;	width: 100%;	padding-top: 15px;}

#welcome p {	float: none;	height: auto;	width: 80%;	text-align: center;	padding: 0px;	font-size: 16px;	margin-top: 0px;	margin-right: auto;	margin-bottom: 0px;	margin-left: auto;}
#welcome_text p {	margin-top: 0px;	margin-right: auto;	margin-bottom: 0px;	margin-left: auto;}
#welcome h1 {	text-align: center;}
*/
#content {
	float: left;
	height: auto;
	width: 84%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: 8%;
	padding-top: 30px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

#latest_articles {	height: auto;	}
.row {	height: auto;	margin: 0px;	padding-top: 5px;	padding-bottom: 30px;	}

#video_start {	
width: 66%;	float: left;position: relative;
padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/
padding-top: 0px; height: 0;  overflow: hidden; }

#rangliste {
	float: left;	width: 30%; height: auto;
	margin-left: 4%;	margin-top: 0px;	margin-right: 0px;	margin-bottom: 0px;
	padding: 0px;
}
#rangliste #top10 {	font-size: 16px;	float: left;	height: auto;	width: 100%; max-width: 312px;	margin: 0px;	padding: 0px;
}
#top10 td {	padding-top: 3px;	padding-bottom: 3px;
}
#meta {	height: 40px;	position: relative;	clear: both;	float: left;	padding-top: 15px;	width: 100%;}


/* Klassen */
.logo {
	width:18%; max-width: 175px; height:auto; float: left; margin-right: 8px;	padding: 0px; }
.logo img {	width:100%;	height:auto;}
.haupt_nav {	position:relative;	padding: 0px;	float: right;	width: auto;	margin: 0px;	height: auto;}
.startnav {margin-bottom: 15px;}
.regatten_nav { margin-bottom: 0px;}
.sub_nav {
	padding: 0px;
	position:relative;
	margin-top: 4px;
	margin-right: 5px;
	margin-bottom: 0;
	margin-left: 0;
	float: right;
}
.metanav { position:relative; width:100%; height:20px; z-index:2; padding: 0px; margin-top: 10px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; float: left; text-align: right; color: #666; }

.start_teaser {	position:relative;	width:100%;	padding: 0px;	margin: 0px; float: none;	height: auto;}
.slider_caption {
	margin: 0px;	float: left;	height: auto;	width: 100%;
	position: absolute;	z-index: 14;	left: 0px;	bottom: 0px;
	padding-top: 0px;	padding-right: 0px;	padding-bottom: 0px;	padding-left: 40px;
	font-size: 200%; font-weight:bold;	clear: both;	text-align: left;	color: #FFF;
}


.newscontainer {
	margin: 0px; padding: 0px;
	max-height: 320px;	height: auto; width: 32%; max-width: 312px;	float: left;	position: relative;		}
	
.newsteaser {	font-size: 14px;	color: #333;}	
	
.newscaption {	font-size: 14px;	color: #333;
	margin: 0px;	padding-top: 0px;	padding-right: 0px;	padding-bottom: 0px;	padding-left: 8px;
	float: left;	height: auto;	width: 100%;}

.regattacontainer {
	margin: 0px; width: 32%; max-width: 312px;	padding: 0px;	height: auto;	float: left;	position: relative;	}

.regatta_caption {
	margin: 0px;	float: left;	height: auto;	width: 100%;
	position: absolute;	z-index: 12;	left: 0px;	bottom: 0px;
	background-color: #FFF;	opacity: 0.8;	padding-top: 0px;	padding-right: 0px;	padding-bottom: 0px;	padding-left: 8px;
	font-size: 14px;	clear: both;	text-align: left;	color: #333;
}
.container_middle {	padding: 0px;	margin-top: 0px;	margin-right: 2%;	margin-bottom: 0px;	margin-left: 2%;}
.bodytext { line-height: 1.3;}

.img_article { width:100%; max-width: 656px; height: auto; margin-bottom: 15px;}
.left { position:relative; padding: 0px; height: auto; min-height: 150px; width: 65.22%; margin-top: 0px; margin-right: 4.348%; margin-bottom: 0px; margin-left: 0px; float: left; }
.right { position:relative; margin: 0px; padding: 0px; height: auto; width: 29.167%; float: left; }
.col_1 {position:relative;padding: 0px; height: auto; margin: 0px; width: 100%;  float: left; }

/* Werbung */
#adverts_bottom {
	padding: 0px;	height: 90px;	width:87.591%; max-width:1200px;	margin-top: 25px;	margin-right: 0px;	margin-bottom: 30px;	margin-left: 0px;	position: relative;	float: left;	clear: both;
}
#adverts_bottom div {float: left; margin-right:60px;}
#adverts_bottom div:last-of-type { margin-right:0;}
#adverts_right {	height: auto; width:11.678%; max-width: 160px;	padding: 0px;	margin-top: 544px;	position: relative;	z-index: 30; float:right;	}
.minibanner {	height: 100px;	width: 100%;	background-color: #333;	margin-top: 20px;}
.skysraper {	height: 600px;	width: 100%;	background-color: #333;}

.superbanner {	margin: 0px;	padding: 0px;	clear: none;	float: left;	height: 100%;	width: 55%;	background-color: #666;}
.midibanner {	margin: 0px;	padding: 0px;	clear: none;	float: right;	height: 100%;	width: 40%;	background-color: #666;}

.ad_col_right {	height: 180px;	width: 100%;	background-color: #333;	margin-top: 20px;}

/* Navigation */
.active {color:#005a9a;}
.metanav {
	float: left;
	margin-top: 0px;	margin-right: auto;	margin-bottom: 0px;	margin-left: auto;
	clear: both;
	text-align: center;	position: relative;
	padding: 0px;	height: auto;	z-index: 11;	width: 100%;
}
.metanav a {
	font-size: 13px;	color: #333;	text-decoration: none;
	font-weight: normal;	margin-right: 5px;	position: relative;
}
.mobile-nav { display:none;}
.menu-toggle {
	text-indent: -9000px;
	display: none;
	height: 60px;
	width: 60px;
	background-image: url(../images/menu_icon.png);
	background-repeat: no-repeat;
	background-size:cover;
	cursor:pointer;
	z-index:100;
	float: right;
	margin-top:0;
}
.haupt_nav ul { padding: 0px; list-style-type: none; margin: 0px;}
.haupt_nav ul li {
	float: left;
	margin-top: 0px;	margin-right: 35px;	margin-bottom: 0px;	margin-left: 0px;	padding: 0px;
}
.haupt_nav ul li:last-child{ margin:0;}
.haupt_nav ul li a {
	font-size: 16px;	color: #000;	text-decoration: none;	display: block;
	margin-top: 0px;	margin-right: 0px;	margin-bottom: 0px;	margin-left: 0px;
	padding-top: 6px;	padding-right: 6px;	padding-bottom: 6px;	padding-left: 6px;
	background: rgba(255,255,255,0) bottom no-repeat;
	background-size: 90% 3px;
	-webkit-transition: 0.4s ease-in-out;
	-o-transition: 0.4s ease-in-out;
	transition: 0.4s ease-in-out;
}
.haupt_nav ul li a:hover {   background: -webkit-linear-gradient(right, #005A9A 0, #005A9A 33.3%, #efd400 33.3%, #efd400 66.6%, #005A9A 66.6%, #005A9A) bottom no-repeat;
  background: -o-linear-gradient(right, #005A9A 0, #005A9A 33.3%, #efd400 33.3%, #efd400 66.6%, #005A9A 66.6%, #005A9A) bottom no-repeat;
  background: linear-gradient(to right, #005A9A 0, #005A9A 33.3%, #efd400 33.3%, #efd400 66.6%, #005A9A 66.6%, #005A9A) bottom no-repeat;
  background-size: 100% 3px; }
.haupt_nav ul li a.active { background: -webkit-linear-gradient(right, #005A9A 0, #005A9A 33.3%, #efd400 33.3%, #efd400 66.6%, #005A9A 66.6%, #005A9A) bottom no-repeat;
  background: -o-linear-gradient(right, #005A9A 0, #005A9A 33.3%, #efd400 33.3%, #efd400 66.6%, #005A9A 66.6%, #005A9A) bottom no-repeat;
  background: linear-gradient(to right, #005A9A 0, #005A9A 33.3%, #efd400 33.3%, #efd400 66.6%, #005A9A 66.6%, #005A9A) bottom no-repeat;
  background-size: 100% 3px; }

.haupt_nav ul li ul { padding: 0px; list-style-type: none; position:absolute; right:5px; margin-top: 4px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; }
.haupt_nav ul li ul li { float: left; margin-top: 0px; margin-right: 20px; margin-bottom: 0px; margin-left: 0px; padding: 0px; }
.haupt_nav ul li ul li a { font-size: 14px; color: #333; text-decoration: none; display: block; margin-top: 0px; margin-right: 0px; margin-bottom: 0; margin-left: 0px; padding: 0;  background: none;  border-bottom: solid 2px rgba(255,255,255,0); }
.haupt_nav ul li ul li  a:hover { background: none; border-bottom: solid 2px #efd400;}
.haupt_nav ul li ul li  a.active { background: none; border-bottom: solid 2px #efd400;}

.regatten-toggle { display:none; cursor:pointer;}
.sub_nav ul { padding: 0px; list-style-type: none; margin:0; }
.sub_nav ul li { float: left; margin-top: 0px; margin-right: 20px; margin-bottom: 0px; margin-left: 0px; padding: 0px; }
.sub_nav ul li:last-of-type { margin-right: 0; }
.sub_nav ul li a { font-size: 14px; color: #333; text-decoration: none; display: block; margin-top: 0px; margin-right: 0px; margin-bottom: 0; margin-left: 0px; padding: 0;  background: none;  border-bottom: solid 2px rgba(255,255,255,0); }
.sub_nav ul li a:hover { background: none; border-bottom: solid 2px #efd400;}
.sub_nav ul li a:active { background: none; border-bottom: solid 2px #efd400;}

/* Containertags */




/* Designklassen */
.clear-fix {  clear: both;}

.margin_bot30 {
	padding-top: 0px;	padding-right: 0px;	padding-bottom: 30px;	padding-left: 0px;
	border-bottom:#efd400 solid 1px;
	margin-top: 0px;	margin-right: 0px;	margin-bottom: 30px;	margin-left: 0px;}
.full_width_content {	float: left;	width: 100%; }
.twocolumn_left {	float: left;	width: 65.5%; }
.onecolumn_right {	float: left;	width: 30%; margin-left: 4.5%; }
.wrapper_article {padding-top: 30px;}


.tab_bg_grau {  background-color: #F5F5F5;  padding: 6px; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #FFF; }
.bg_gelb  { background-color: #efd400; }

.container_linie_gelb {border-bottom:#efd400 solid 1px; margin-bottom:30px; padding-bottom:30px;}
.container_linie_blau {border-bottom:#005a9a solid 1px; margin-bottom:10px;}
.container_rahmen_grau {border:#ccc solid 1px; margin-bottom:10px;}
.container_hellblau { background-color:#ccdbe0; margin-bottom:10px; padding: 10px;}
.container_rahmen_grau_abstand { border:#ccc solid 1px; margin-bottom:10px; padding: 10px; }
a.downloads { background-image: url(../images/external_link.gif); background-repeat: no-repeat; padding-left: 20px; background-position: 0px 4px; }
.grau { color: #CCC;  }

/* Specials */
a#top {  position: fixed; top: 90%;right: 5%; display: block; text-decoration: none; z-index: 50; }



#socialshareprivacy { width:290px; height:50px; overflow: hidden; }


@media only screen and (max-width: 1240px) {
	a#top { top: 90%;right: 1%; }
	.haupt_nav ul li {	margin-right: 20px;	}
	#logo_and_nav {	padding-right: 25px;	padding-left: 25px;	}
	#adverts_right { margin-top:480px;}
	.slider_caption {	padding-left: 25px;	font-size: 190%; }
}

@media only screen and (max-width: 1100px) {
	a#top { top: 90%;right: 1%; }
	.haupt_nav ul li {	margin-right: 12px;	}
	#logo_and_nav {	padding-right: 20px;	padding-left: 20px;	}
	.slider_caption {	padding-left: 20px;	font-size: 190%; }
	#adverts_right { margin-top:380px;}
	
}


@media only screen and (max-width: 1000px) {
	.haupt_nav ul li { margin-right: 10px; }
	a#top { top: 90%;right: 1%; width:40px; height:40px; }
	#logo_and_nav {	padding-right: 20px;	padding-left: 20px;	}
	.slider_caption {	padding-left: 20px;	font-size: 180%; }
	#site { width:100%; padding: 0;}
	#logo_and_nav, #adverts_bottom { width:100%;}
	#adverts_right { display:none;}

}

@media only screen and (max-width: 870px) {
	header { height: 140px;}
	#rahmen, .header_inner { width:96%;  margin-right: 2%;  margin-left: 2%; }
/* Navigation*/
	.haupt_nav { width: 100%; float:left;}
	.sub_nav {margin-left:5px; float:left; width: 100%;}
	.haupt_nav ul li { margin-right: 15px; }
	.haupt_nav ul li a { font-size: 16px;}
	.haupt_nav ul li ul {
    left: 5px;
    right: auto;
}
	.haupt_nav ul li ul li { margin-right: 10px; }
	.sub_nav ul li { margin-right: 10px; }
	

	.regatta_caption {	background-color: #FFF;	opacity: 0.8;	padding-top: 0px;	padding-right: 0px;	padding-bottom: 0px;	padding-left: 8px;	font-size: 13px;}
}
@media only screen and (max-width: 760px) {
	body { background-color: #FFF;	background-image: url(../images/bg_sea_small.jpg);	}
	img {width:auto; }
	header {height:100px; }
	.logo { position:absolute; top:10px; left:20px; z-index:100; width:auto; margin-right: 8px;	padding: 0px; width:33%; max-width: 175px; }
	.logo img {	width:100%;	height:auto;}
	#content {width:90%; margin-left:5%;padding-top: 10px; }

	iframe { margin-bottom: 15px;}
	.twocolumn_left {    float: left;    width: 100%;}
	.onecolumn_right {    float: left;    margin-left: 0;    width: 100%;}
    a#top { top: 95%;}
	
	/* Navigation*/
	.haupt_nav { position:absolute; right:0; top:5px; padding-right:10px;}
	.menu-toggle { display:block; }
	.haupt_nav ul { display:none;  background-color:rgba(255,255,255,0.8); padding:10px; position: absolute;  right: 0;  top: 85px; width: 50%; }
	.haupt_nav ul li { float: none; margin-top: 0px; margin-right: 0; margin-bottom: 4px; margin-left: 0px; padding: 0px; }
	.haupt_nav ul li a {margin-bottom: 0px;}
	.haupt_nav ul li a.active, .haupt_nav ul li a:hover {background:none;}
	.haupt_nav ul li ul {  background-color:rgba(255,255,255,0); padding:10px; position: relative;  right: 0;  top: 0px; width: 100%; margin:0;}
	.haupt_nav ul li ul li { float: none; margin-top: 0px; margin-right: 0; margin-bottom: 10px; margin-left: 0px; padding: 0px; }
	.haupt_nav  ul li ul li a {margin-bottom: 0px;}

	.sub_nav { position:absolute; top:60px; left:16px; z-index:50; width:80%}
	.sub_nav ul { display:none;  background-color:rgba(255,255,255,0.8); padding:10px; position: absolute; left: 0;  top: 15px; width: auto; }
	.sub_nav ul li { float: none; margin-top: 0px; margin-right: 0; margin-bottom: 4px; margin-left: 0px; padding: 0px; }	
	.sub_nav ul li a { font-size:15px;}
}
@media only screen and (max-width: 640px) {
	img {width:auto; }
	header {height:90px; }
	.logo { position:absolute; z-index:100; width:auto }
	
/* Navigation*/
	.haupt_nav { position:absolute;}
	.menu-toggle { display:block; }
	.haupt_nav ul { display:none;  background-color:rgba(255,255,255,0.9); padding:10px; position: absolute;  right: 0;  top: 85px; width: 60%; }
	.haupt_nav ul li { float: none; margin-top: 0px; margin-right: 0; margin-bottom: 4px; margin-left: 0px; padding: 0px; }
	.haupt_nav ul li a {margin-bottom: 0px;}
	
	.haupt_nav ul li ul {  background-color:rgba(255,255,255,0); padding:10px; position: relative;  right: 0;  top: 0px; width: 100%; margin:0;}
	.haupt_nav ul li ul li { float: none; margin-top: 0px; margin-right: 0; margin-bottom: 10px; margin-left: 0px; padding: 0px; }
	.haupt_nav  ul li ul li a {margin-bottom: 0px;}

	.sub_nav ul { display:none;  background-color:rgba(255,255,255,0.8); padding:10px; position: absolute; left: 0;  top: 15px; width: auto; }
	.sub_nav ul li { float: none; margin-top: 0px; margin-right: 0; margin-bottom: 4px; margin-left: 0px; padding: 0px; }	
	.sub_nav ul li a { font-size:15px;}


	.regattacontainer { width: 100%; 	padding: 0px;	height: auto;	float: none;	position: relative;	margin-left: auto; margin-right: auto;}
	.newscontainer { width: 100%; 	padding: 0px;	height: auto;	float: none;	position: relative;	margin-left: auto; margin-right: auto;}
	.regatta_caption {	background-color: #FFF;	opacity: 0.8;	padding-top: 0px;	padding-right: 0px;	padding-bottom: 0px;	padding-left: 8px;	font-size: 16px;}

  /* Video und Rangliste */	
	iframe { margin-bottom: 15px; max-height: 300px; }
	#video_start {	
	width: 100%; height: auto;	float: none; position: relative; padding: 0; /*padding-bottom: 56.25%;  Default for 1600x900 videos 16:9 ratio*/ padding-top: 0px;  overflow: hidden; }
	
	#rangliste {	float: none;	width: 100%; height: auto;	margin: 0;	padding-left: 3%; padding-right: 3%;}
	#rangliste #top10 {	font-size: 16px;	float: left;	height: auto;	width: 100%; max-width: 312px;	margin: 0px;	padding: 0px;}
	#top10 td {	padding-top: 3px;	padding-bottom: 3px;}



  
  a#top { top: 95%;}
  
  /* Werbung */
#adverts_bottom {
	padding: 0px;	height: auto;	width:100%; margin-top: 25px;	margin-bottom: 30px;	position: relative;	float: none;	clear: both;}

.superbanner {	margin-bottom: 20px;	padding: 0px;	clear: both;	float: none;	height: 50%;	width: 100%;	background-color: #666;}
.midibanner {	margin-bottom: 20px;	padding: 0px;	clear: both;	float: none;	height: 50%;	width: 100%;	background-color: #666;}
#adverts_right {	display:none;	}
.ad_col_right {	display:none;}

/* Social Buttons */

.button a {float: right;  margin-right: 10px; }
#button_nav {
	float: right;	height: auto;	min-height: 30px; height: auto;	width: auto;
	padding: 0px;
	clear: both;
	position: absolute;
	z-index: 25;
	top: 0px;
	right: 0px;
	margin-top: 10px;	margin-right: 1.5%;	margin-bottom: 0px;	margin-left: 0px;
}

.button { width:40px; height:40px;}


}
@media only screen and (max-width: 460px) {
	#content { padding-top: 5px; }
	h1{ font-size: 20px; }
	.logo {  width:60%; }
	.menu-toggle{ height: 50px; width: 50px; }

	.haupt_nav ul {  top: 65px; width: 60%; }
	.container_linie_gelb {    border-bottom: 1px solid #efd400;    margin-bottom: 20px;    padding-bottom: 20px;
}
}

@media only screen and (max-width: 360px) {
	.logo { width:55%; }
	.haupt_nav ul {  top: 65px; width: 60%; }
	

}