@import "menu.css";

/*
--------------------------------------------------------
project meltemi-power.de
author: Judith Hettlage
last updated: 2011.05.09
----------------------------------------------------- */
/* 
Colors:
Header H1 : #CACDD2;
Footer: #A7AEBE
blau: #51698D

Global Resetting */

#debug { 
	visibility: hidden;
	position: absolute; 	
	top: 10px;  left: 40px;  
	float: left;  
	color: #993333;
	}

html{	
	width: 100%;
	height: 100%;
	}
	
body {
	width: 100%;
	height: 100%;
	font-size: 62.5%;
	background-color: #F0F1F2;
	/* reset font-sizes to 1em == 10px */
	}
* {
	font-size: 1em;
	/* reset font-sizes to 1em == 10px */
	padding: 0;
	margin: 0;
	font-family:Trebuchet MS, Arial, Helvetica, Sans-Serif;
	list-style:none;
	}

a, a img {
	border: 0; outline: none !important;
	}
	
.clear { clear:both; }

.nowrap { white-space: nowrap; }
	
#aktuell { padding: 5px; 
	border: 1px solid #adb4c2; 
	background-color: #f0f1f3;
	}
	
#stoerer { 	position: absolute; right: 0; top: 400px; float: right;  }

hr { clear:both;
	height: 1px;
	color:#fff;
	background-color: #fff;
	border-top: 0px; 
	border-left: 0px;
	border-bottom: 1px solid #ddd; 
	border-right: 0px;
	margin-bottom: 15px;
 	}

/* Layout CSS */

#BG { 
	position: fixed; 
	/* left: 10%; */
	background-color: #fff;
	margin: -30px -60px 60px; 
	width: 1100px;
	height: 100%;
	z-index: 0;
	border: 0px dotted green;
	}
	
#Main {
	position: relative;
	text-align: left;
	margin: 0px auto 0px;
	width:980px;
	background: #fff;
	/* padding: 30px 2px 0 7px; */
	padding: 30px 14px 45px;
	border: 0px dotted aqua;
	overflow-x: hidden;
	z-index: 1;
	}
	
#Header	 { position: relative; height: 110px;}
	
#logo { 
	position: absolute;
	float: left;
	margin: 0 0 15px 5px;
	}

#TopHead {
	position: relative;
    color:#CACDD2;
    float: right;
    font-size:3.5em;
    font-style: italic;
    margin: 5px 6px 0 0;
    text-transform: uppercase;
    padding-left:20px;
    border: 0px dotted green;
	}

.LanguageChooser { position: absolute; margin: -30px 0 0 920px; }

#lang {  
	float: right; 
	/* position: absolute; */
	/* margin: 0px 0 0px 850px; */
	color: #4B78AF;
	font-weight: bold;
	font-size: 12px; 
	width: 200px; 
	border: 0px dotted green;
	}
	
#lang ul { float: right; }
	
#lang ul li {
	display: inline; 
	margin-right: 5px; 
	border: 0px dotted lime;
	}
	
#lang ul li img {
	border: 1px solid gray;  
	}
	
	
#lang ul li a {
	color: #8B8B8B;
	font-weight: normal;
	text-decoration: none;
	}
	
#lang ul li a:hover {
	color: #6E6E6E;
	text-decoration: none;
	}
	
#lang ul li.current a { color: #4B78AF; font-weight: bold;  }

/* * * * * * * * * * * * START CONTENT  * * * * * * * * * * * * * * * */ 

#ContentContainer { position: relative;
	clear: left;
	/* width: 980px; */
	margin: 0px 0 15px 5px;
	border-bottom: 0px solid #ddd; 

	overflow: hidden ;
	}
	
/* http://cssglobe.com/lab/easyslider1.7 */

#banner, #slideshow {	height: 370px; }

#banner, #slideshow, #VideoBanner  {  
	width: 980px; 
	margin: 0px auto;
	padding: 0px; 
	overflow: hidden;
	background-color: #fff;
	clear: both; 
	}

#slideshow img { 
	display: none; 
	padding: 0px; 
	margin: 0px !important;  
	border: none !important; 
	background-color: #eee; 
	}
	
#nav { /* display: none;  */
	position: absolute;
	float: left; 
	width: 960px;
	height: 20px;  
	text-align: right;
	border: 0px dotted #eee; 
	padding-right: 20px; 
	top: 340px;  
	z-index: 11 !important; 
	}

#nav a { 
	color: #bbb; 
	border: 0px solid #ccc; 
	background: url(../images/opacity_60k.png) repeat;
	text-decoration: none;
	text-align: center;
	margin: 0 5px; 
	padding: 5px 7px; 
	/*display: block; 
	width: 25px; 
	height: 25px;*/
	}
	
#nav a.activeSlide { 
	font-weight: bold; 
	}
	
#nav a.activeSlide, #nav a:hover { 
	color: #fff; 
	background: #000;
	}
	
#nav a:focus { 
	outline: none; 
	}

.pics img { display: none }

#VideoBanner { 
	height: 355px; 
	text-align: center;
	padding: 15px 0 0 0; 
	background-color: #E6E8EA; 
	}
	
#VideoBanner object { 
	border: 0px solid red; }

/* * * * * * * * * * * * START Menu 2  * * * * * * * * * * * * * * * */ 
#Menu2, #Breadcrumbs { 	
	padding:0px; 
	margin: -40px 0 0 0px !important;
	height: 2em;
	color: #6E6E6E; 
	border-collapse: collapse;
	position: absolute; 
	}
	
#Menu2 li {	display: inline; border: 0px dotted green; }
	
#Breadcrumbs p { font-size:12px; }

#Menu2 li  { 
	border: 0px dotted green;
	height: 20px;
	margin: 0px; 
	font-size:12px;
	line-height:1.6em;
	text-decoration:none;
	}
	
#Menu2 li a {	
	color:#AFB3BB;
	padding: 0 3px;
	}
	
#Menu2 a:hover {
	color:#4B78AF;
	}
		
#Menu2 li.current,
#Menu2 li.section {
	border-top: 0px solid #4B78AF;
	}
	
#Menu2 li.current a,
#Menu2 li.section a {
	color:#4B78AF;
	}
	
/* .Menue2Spacer { width: 4px; } */

	
/* * * * * * * * * * * *  H O M E P A G E  / Station * * * * * * * * * * * * * * * */ 

#Content {	
	clear: both; 
	width:100%;
	padding: 45px 0 0 0;
	margin: 0px 0 15px 0; 
	}
	
.boldblue { 
	font-weight: bold;
	color: #4B78AF;
	background: #E0E0E0;  }

#TopContent { width: 645px; }

.TopContent { width: 645px; }

#Formular { width: 100%; }

#Formular td { vertical-align: top; border: 0px solid red; }

#Formular iframe {margin: 40px 0 0 0 ;}

#HomeWrapper { float: left; overflow: auto; border: 0px dotted #ccc; }

#wrapper, #HomeWrapper { width: 1020px;  }

#wrapper { border: 0px solid #51698D; width: 1020px;  }

/* .introbox, .introbox h2 { width: 313px; } */

div.introbox { 
	border-bottom: 0px solid #A7AEBE;
	float: left; 
	margin: 0px 20px 0px 0;
	padding: 0px 0 10px ; 
	width: 313px;
	height: 225px;
	line-height: 0px;
	/* overflow: hidden !important;  */
	}
	
div.introbox a { 
	/* display: block; */
	font-size:14px;
	line-height: 0px;
	}
	
.introbox a img, .introbox img  { 
	z-index: 0 !important;
	border: 0px dotted fuchsia;	
	}

.introbox h2, .introbox a h2 { position: relative;
	line-height: 22px;
	height: 26px; 
	background: url(../images/opacity_60k.png) repeat; 
	color: #fff !important; 
	padding: 4px 0 0 10px; 
	margin-top: -30px;
	z-index: 5 !important;  
	font-size: 18px !important;
	letter-spacing: 0.04em !important; 
	text-transform: uppercase;  
	border: 0px dotted blue;
	}
	
.introbox p { 	
	margin: -10px 0 10px 0 !important;
	border: 0px dotted green;
	}
			
/* * * * * Overlay * * * * */	

.iframeOverlay {
	padding:12px;	
	width:640px; 
	height:570px; 
	display:none;
	z-index:10000 !important;
	background: #fff ;	
	border: 0px dotted fuchsia; 
	}
	
.iframeOverlay iframe { background: #F0F1F2 url(../images/ajax-loader.gif) no-repeat 300px 220px; padding: 0; margin: 0;  }
.iframeOverlay iframe * { padding: 0; margin: 0;  }
.iframeOverlay iframe [img] { color: #F0F1F2; }

.close {
	background:url(../images/close.png) no-repeat;
	position:absolute;
	top:0px;
	right:0px; 
	display:block;
	width:35px;
	height:35px;
	cursor:pointer;
}

.iframeOverlay .details { padding: 10px; }

.iframeOverlay .details h1 {
	margin-bottom:5px;
	text-transform: uppercase;
	padding-left: 2px; 
	color:#CACDD2; 
	font-style: italic;
	font-size: 35px;  /* layout 40pt. */  
	}
	
.iframeOverlay .details p {
	color:#6E6E6E;
	line-height:22px;
	font-size:14px;
	}



/* * * * * * * * * * * *  BASIC CONTENT * * * * * * * * * * * * * * * */ 

.ContentBox { width: 1020px; 

	/* padding-left: 20px;  */
	
	margin-left: -20px; 

	border-top: 1px solid #ddd; 
	
	/* border: 1px dotted fuchsia;   */
	
	padding-top: 10px; 
	
	clear: both; 
	
	}
	
.ContentBox p { clear: both; }

.ContentBox	h1 a, #SectionList li h1 a { color:#CACDD2; }

.ContentBox	h1 a:hover, #SectionList li h1 a:hover { color: #51698D;
	text-decoration: none; }

.ContentBox img { margin: 0px 20px 15px 0px; float: right;}

.ContentBox div, #SectionList li div { 	
	border: 0px dotted blue; 
	float: left; 
	width: 470px;  
	}
	 
	.ContentBox div { clear: both; margin: 0 20px; }
	#SectionList li div { margin: 0px; padding-top: 10px;  }
	
	.Video div { width: 315px; }
	
	.ContentBox object { float: left; 
		border: 0px dotted fuchsia; 
		margin-bottom: 20px; }
		
#SectionList {  margin: 0px;  }

#SectionList li { 
	margin: 0px; 
	overflow: auto; 
	padding: 15px 0px; 
	list-style-type: none; 
	border-top: 1px solid #ddd; 
	}
#SectionList li img { float: right; }

div.breadcrumbs {
	margin-bottom:10px;
	font-size:1em;
	color:#666;
	}
	
div.breadcrumbs a {
	text-decoration:none;
	}

#Formular { border: 0px solid #ddd; 
	margin-top: 0px; }
	
/* * * * * * * * * * * *  B L U E   B U T T O N S  * * * * * * * * * * * * * * * */ 	
	
div.blueButton { 
	width: 150px; 
	height: 25px; 
	margin: 0px 0px 25px 0px !important; 
	background:transparent url(../images/button-mbp-150.jpg) no-repeat scroll 0px -0px;
	border: 0px dotted fuchsia; 
	clear: both;
	}
	
div.blueButton a { 
	text-align: center; 
	display: block;   
	color: #eee; 
	font-size: 13px; 
	border: 0px dotted green; 
	}
	
	
div.blueButton a:hover {  
	color: #fff; 
	text-decoration: none;	}

div.blueButton:hover {	
	background-position: 0px -25px ;
	}


/* * * * * * * * * * * *  TEAM * * * * * * * * * * * * * * * */ 


#intro div , #TeamEnd div, #TeamContent div { margin-right: 15px; float: left;  }

.Lead { width: 230px; height: 230px; }
	
.TeamList { width: 150px; height: 150px; }

.Lead, .TeamList { border: 0px dotted blue; 

	margin: 0 0 30px 0;
	/* position: relative; bottom: 0px; */ }

#TeamEnd {border: 0px dotted blue;}

.Lead p { position: static;/*  display: block; */
	margin: -5px 0 20px 0; border: 0px dotted fuchsia;  
	}
	
.TeamList img, .Lead img { position: relative; /* float: left; */ }
	
.TeamList, .Lead { float: left; 
	
	margin: 0 15px 14px 0; }
	 
.Lead h2, .TeamList h2 {
	position: relative;
	bottom: 0px !important; 
	background: url(../images/opacity_60k.png) repeat; 
	color: #fff !important;
	height: 20px;
	margin-top: -28px;
	padding: 3px 10px; 
	font-size: 12px !important;
	letter-spacing: 0.04em !important; 
	border: 0px dotted red; 
	}

#TeamContent { height: 280px; width: 470px; border: 0px dotted red; }

/* * * * * * * * * * * *  OUR OFFER * * * * * * * * * * * * * * * */ 	

#courses { width: 1000px; 
	
	margin: -15px 0 0 -10px; 
	
	}
 
/* #courses tr {padding: 0; margin: 0;} */

#courses td { 

	vertical-align: top;
	
	padding: 0; margin: 0;
	
	height: 100%;
	
	}
	

#courses table, .ContentBox table, #sails { 

	width: 100%; height: 100% !important;

	border: 0px dotted gray;

	padding: 0px; 
	
	color:#6E6E6E;
	
	line-height: 22px !important;
	
	font-size: 14px !important;
	
	}
	
#courses table tr td, .ContentBox table tr td

	{ padding: 10px; }


th { vertical-align: middle !important; 
	
	border: 0px dotted gray !important; }


#courses table p, #courses table h1 { padding: 0; margin: 0; }
	
#courses table th, .ContentBox table th, #sails table th {
	font-size: 35px; 	
	margin: 0px; padding: 0;
	height: 50px !important; 	
	text-transform: uppercase;	
	color:#CACDD2; 	
	font-style: italic;	
	border: 0px dotted gray;

	}
	
#courses table td, #courses table th, #sails tr td,
.ContentBox table td, .ContentBox table th 
	{ 
	background-color: #F0F1F3;	
	vertical-align: top;
	padding: 5px;	
	}
	
#sails { margin: 0 0 15px; }
	
.amount { float: right; }


#ContentContainer .equipment { width: 313px; 
	float: left; 
	margin: 0 16px 16px 0;
	border-bottom: 1px solid #ddd;
	}

.equipment img { border: 0px dotted blue;
	margin: 0px 0 10px 0;}
	
.equipment h4 { margin-bottom: 10px !important;}

/* * * * * * * * * * * *  Jquery / Tooltip * * * * * * * * * * * * * * * */	
#tooltip {
	position: absolute;
	z-index: 3000;
	border: 1px solid #111;
	background-color: #eee;
	padding: 25px;
	opacity: 0.85;
	}

#tooltip h3, #tooltip div { margin: 0; }

#tooltip.pretty {
	font-family: Arial;
	border: none;
	width: 210px;
	padding:20px;
	height: 135px;
	opacity: 0.8;
	background: url('../images/shadow2.png');
}

#tooltip.pretty h3 {
	margin-bottom: 0.75em;
	font-size: 12pt;
	width: 220px;
	text-align: center;
}

#tooltip.pretty div { width: 220px; text-align: left; }

/* * * * * * * * * * * *  FOOTER * * * * * * * * * * * * * * * */ 

#Footer {  
	position: relative;
	display: table;	
	clear:both;
	vertical-align: middle;
	height: 170px;
	width: 1010px;
	padding-right:0px;
	margin: 0 0 0 -14px;
	background:url(../images/FooterGradient.jpg) repeat-x;
	}
	
#Footer table {
	position: absolute; width: 980px;
	height: 130px;
	margin: 20px auto;
	border-collapse: separate;
	border-spacing: 0;
	padding: 0;
	}
	
#Footer td { border: 0px dotted gray; text-align: center;}

#imprint { 
	font-size: 12px; 
	position: relative; 
	color: #fff;
	float: right; 
	top: 20px; 
	left: -30px;
	border: 0px dotted lime; 
	z-index: 5; 
	}
	
	#imprint li, #legal-notice li{ 
	display: inline; 
	}
	
.social { border-right: 1px solid #fff !important;}
	
	.quater { 
	width: 25%; }

/* Social Media Links Rollover Images */

#socialmedia { border:0px solid #ddd; padding-left: 40px; auto; text-align: center;}

#socialmedia li a.fb-s {
	background:transparent url(../images/facebook_48.png) no-repeat scroll 0 0;
	}
#socialmedia li a.sk-s {
	background:transparent url(../images/skype_48.png) no-repeat scroll 0 0;
	}
#socialmedia li a.wg-s {
	background:transparent url(../images/windguru_48.png) no-repeat scroll 0 0;
	}

#socialmedia li {
	float:left;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin: 5px 0 0 -2px;
	border: 0px dotted fuchsia;
	}
	
#socialmedia a:before { content: "" !important; }

#socialmedia li a {
	display:block;
	height:48px;
	width:48px;
	margin-right:10px;
	}

#socialmedia li a.fb-s, #socialmedia li a.sk-s, 
#socialmedia li a.wg-s {
	-moz-background-clip:border;
	-moz-background-inline-policy:continuous;
	-moz-background-origin:padding;
	}
	
#socialmedia li a.fb-s:hover, #socialmedia li a.sk-s:hover,
#socialmedia li a.wg-s:hover {
	background-position:-48px 0;
	}
	
#Footer span {
    color:#ccc;
    font-size:1.1em;
    line-height:2em;
    font-weight:bold;
    padding-left:20px;
	}

#Footer a {
    color:#fff;
    text-decoration:none;
	}

#Footer a:hover {
	text-decoration:underline;	
	}