/*  =========================================================
Flemming CSS-Styleguide 

Datum: 01. Mai 2007
                                 
1. Allgemeine Selektoren 
   - Block-Elemente
   - Inline-Elemente
   - Allgemeine Klassen
   - Non-Layout IDs  
                              
2. Layoutbereiche 
   - Wrapper 
   - Kopfbereich   
   - Navibereich   
   - Textbereich   
   - Fussbereich   

3. Spezielle Seiten 
   - Kontaktformular 

========================================================== */

/* ===============================

   =1. Allgemeine Selektoren

=============================== */



/* ===============================
   =Block-Elemente: h1, ul, li etc 
=============================== */
b {font-size: 110%;}
p { 
	font-size: 0.75em;
	font-weight: normal;
}
#ferien p {
	width: 580px;
	line-height: 1.6em;
	font-size: 1.1em;
}
h1 {
	font-size: 1.5em;
}
h2 {
	font-size:1em;
	font-weight: bold;
	color: #16284e;
}
/* ===============================
   =Inline-Elemente: strong, a etc. 
=============================== */


/* ===============================
   =Classes allgemeiner Art 
=============================== */
.innertube {
	margin: 30px 0 30px 35px;
 /*Margins for inner DIV inside each column (to provide padding)*/
}
* html .innertube {
	padding-top:10px;
	width:580px;
 /*Margins for inner DIV inside each column (to provide padding)*/
}
.gepunktet {
	border-top: 1px dotted #ccc;
}
.clear {
	clear:both;
}

/* ========================================

  =2. LAYOUTBEREICHE

========================================= */ 
body {
	margin:0;
	padding:0;
	line-height: 1.5em;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	background-color: #778CB5;
	background-image: url(http://www.flemming-sylt.de/img/site/background.jpg);
	background-repeat: repeat-x;
}

#maincontainer {
	width: 845px; /*Width of main container*/
	margin: 0 auto; /*Center container on page*/
	background-color: #FFFFFF;
}
* html #maincontainer {
	width: 838px; /*Width of main container*/
}
#rightcolumn {
	float: left;
	width: 200px; /*Set left margin to -(RightColumnWidth) */
	background-color: #CCCCCC;
	height: 100%;
	margin: 1px 0 0 -200px;
}
#rightcolumn .i-kontakt {
	color: #333333;
	font-size:0.75em;
	line-height: 1.5em;
	margin: 40px 10px 10px 10px;
	padding: 5px;
}
#rightcolumn .i-kontakt a:link {
	color: #333333;
	text-decoration: none;
}
#rightcolumn .i-kontakt a:hover {
	color: #CC0000;
	text-decoration: none;
}
/* ===============================
   =KOPFBEREICH
=============================== */

#follownav {
	font-size:60%;
	border-bottom: 1px dotted #16284e;
	height: 20px;
	margin: -15px 0 25px 0;
	color: #16284e;
	width:580px;
}
* html #follownav {
	font-size:90%;
}
*+html #follownav {
	font-size:80%;
}
#follownav a {
	color: #666666;
	text-decoration:none;
}
#follownav a:hover {
	color: #CC0000;
	text-decoration:underline;
}

/* ===============================
   =TEXTBEREICH 
=============================== */
#contentwrapper {
	background-color: #FFFFFF;
	float: left;
	width: 100%;
	_width:845px;
}

#contentwrapper-home {
	width: 100%;
}
#contentcolumn {
	margin: -10px 200px 0 0; /*Set right margin to RightColumnWidth*/
	float: left;
}
* html #contentcolumn {
	margin: -10px 0 0 0; /*Set right margin to RightColumnWidth*/
}

#homeflash {
	background-color: #CCCCCC;
	height: 248px;
	width: 845px;
	margin-top:10px;
}
#homecontent {
	background-color: #FFFFFF;
	height: 212px;
}
#titel {
	height: 27px;
	margin-bottom: 25px;
}
#titel2 {
	color: #16284e;
	height: 27px;
	margin-bottom: 25px;
	background-image: url(http://www.flemming-sylt.de/img/site/ue.gif);
	background-repeat: no-repeat;
	width: 407px;
}
#titel2 h1 {
	float:left;
	font-size: 1.6em;
	font-style: italic;
	font-weight: bold;
	text-indent: 20px;
	margin-top: -3px;
}
#titel2 h4 {
	color:#666666;
	float:left;
	font-style: italic;
	margin: 1px 0 0 5px;
}

/* ===============================

   =3. Spezielle Seiten 

=============================== */

/* ===============================
   Kontaktformular 
=============================== */
#formular {
	color: #16284e;
	font-size: 75%;
	font-weight: bold;
	width:580px;
	padding: 0 0 10px 5px;
	text-align: left;
}
#formular .news {
	font-size:1em;
	font-weight:normal;
	color: #000000;
	line-height:1.5em;
	width:500px;
	margin:0 0 20px 0;
}
#formular .grau {
	background-color:#CCCCCC;
	padding: 7px 0;
}
#formular .white {
	border-top: 1px dotted #16284e;
	border-bottom: 1px dotted #16284e;
	clear:both;
	margin: 5px 0 5px 0;
	padding: 5px 0 5px 0;
}
#formular .white2 {
	border-top: 2px solid #c9221a;
	clear:both;
	margin: 10px 0 5px 0;
	padding: 10px 0 10px 0;
	height: 32px;
}

#formular .links {
	float: left;
	font-size: 100%;
	font-weight: normal;
	margin-top: -5px;
}
label {
	background-color:#16284e;
	border-left: 5px solid #c9221a;
	float: left;
	color: #FFFFFF;
	display: block;
	margin: 0 10px 0 0;
	padding: 0 0 8px 5px;
	_padding: 0 0 1px 5px;
	width: 110px;
	height:14px;
	*height:20px;
}
#formular .abstand {
	margin-left:130px;
}
input {
	float: left;
	color: #16284e;
	display: block;
	margin: 0 5px 10px 0;
	text-align: right;
	width: 65px;
}
select {
	float: left;
	color: #16284e;
	display: block;
	margin: 0 5px 10px 0;
	text-align: right;
	width: 190px;
}
input.name {
	margin: 0;
	width: 150px;
	margin-right:10px;
}
input.date {
	margin: 0;
	width: 80px;
}
input.zahl {
	margin: 0;
	width: 40px;
}
input.radio {
	width: 15px;
	margin-top:5px;
}
input.str {width: 310px;margin:0;}
textarea {width: 460px;height: 80px;}
input.check { width: 10px;}
.submit {text-align:right;}
/* ===============================
   Impressum 
=============================== */
#impressum {
	width:580px;
	font-size: 0.75em;
	line-height: 1.5em;
}
#impressum h3 {
	font-size: 1.1em;
	font-weight: bold;
	color: #16284e;
	margin: 20px 0 10px 0;
	padding: 2px 0 2px 5px;
	background-color: #778eb7;
	display: block;
	width: 570px;
}
.imptrenner {
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #16284e;
	margin: 5px 5px 5px 0;
	width:580px;
}
*html imptrenner {
	border-top-width: 2px;
}
#impressum .kasten1 {
	margin: 2px 0;
	float: left;
}
#impressum .kasten2 {
	float: left;
	margin: 2px 0 2px 15px;
	width: 535px;
}
/* ===============================
   Anfahrt 
=============================== */
#anfahrt {
	width:590px;
	font-size: 0.75em;
	line-height: 1.5em;
}
#anfahrt .plan {
	float:left;
	width: 407px;
	height:300px;
	display: block;
	background-color: #CCCCCC;
	margin-right:13px;
}
#anfahrt .anschrift {
	color: #16284e;
	float:left;
	width: 150px;
}
#anfahrt .anschrift .rahmen {
	color: #16284e;
	width: 150px;
	border: 2px solid #16284e;
	padding:5px;
}
#anfahrt .link a {
	display: block;
	height: 23px;
	width: 150px;
	margin-top:60px;	
}
#anfahrt .link a:link {
	background-image: url(http://www.flemming-sylt.de/img/navi/anfahrt_p.gif);
	background-repeat: no-repeat;
	display: block;
}
#anfahrt .link a:hover {
	background-image: url(http://www.flemming-sylt.de/img/navi/anfahrt_hi.gif);
	background-repeat: no-repeat;
	display: block;
}
/* ===============================
   Service 
=============================== */
#service {
	width:610px;
	font-size: 0.75em;
	line-height: 1.5em;
	height:410px;
	overflow: scroll;
	margin-bottom:-29px;
}
#service .grau {
	background-color:#CCCCCC;
	padding: 7px 0;
	clear:both;
	width:580px;
}

#service .white {
	background-color:#FFFFFF;
	border-top: 1px dotted #16284e;
	border-bottom: 1px dotted #16284e;
	padding: 5px 0;
	clear:both;
	margin: 5px 0;
	width:580px;
}
#service .bild, #service .bild2 {
	border-left: 4px solid #c9221a;
	float: left;
	width: 160px;
	height: 100px;
	margin:0 20px 20px 0;
}
*+html #service .bild2 {
	margin:-7px 20px 20px 0;
}
#service .white .text, #service .grau .text {
	float: left;
	width: 350px;
	padding-left:10px;
}
#service .gepunktet {
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #16284e;
	clear:both;
	margin: 20px 0 20px 0;
	width: 580px;
}
#service h2 {
	font-size: 1.3em;
	margin-top: 0px;
	float: left;
	background-image: url(http://www.flemming-sylt.de/img/navi/arrow.gif);
	background-repeat: no-repeat;
	text-indent: 20px;
}
#service h3 {
	font-size: 1em;
	margin: 0px 0 0 10px;
	float: left;
}
/* ===============================
   Serivce 
=============================== */
#ferien {
	width: 580px;
	font-size:0.7em;
}
#ferien .mini {
	float: left;
	width: 205px;
	height: 210px;
	margin-right:5px;
}
#ferien .minibild {
	background-color:#CCCCCC;
	float: left;
	width: 100px;
	height: 100px;
	margin-bottom:5px;
}
#ferien .grossbild {
	background-color:#CCCCCC;
	float: left;
	height: 280px;
	width:370px;
	margin-bottom:5px;
}
#ferien .gepunktet {
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #16284e;
	clear:both;
	margin: 20px 0 20px 0;
	width: 580px;
}
#ferien .orga {
	background-color:#16284e;
	border-left: 5px solid #c9221a;
	float: left;
	color: #FFFFFF;
	display: block;
	margin: 0 10px 0 0;
	padding: 0 0 8px 5px;
	width: 85px;
	height:14px;
	font-weight:bold;
}
#ferien .fliesstext {
	float:left;
	line-height:1.5em;
	width:470px;
	margin-bottom:5px;
}
#ferien .preise {
	float:left;
	background-color: #CCCCCC;
	width:475px;
}
#ferien .preise .spalte1 {
	float:left;
	width:151px;
	border-left-width: 2px;
	border-left-style: solid;
	border-left-color: #FFFFFF;
}
/* Nachrichtenbox++++++++++++++ */
#ferien .news {
	background-color:#CCCCCC;
	width:550px;
	padding:10px;
	border: 5px solid #c9221a;
}
#ferien .news span {
	font-size:1.1em;
}
#ferien .news span:first-line {
	font-size:2em;
}
/* Sportboxen++++++++++++++ */
.sport1 {
	background-color:#CCCCCC;
	float:left;
	font-size:1.1em;
	width:265px;
	margin:0 20px 20px 0;
	padding:0 5px;
	line-height:1.5em;
	height:145px;
	border-left: 4px solid #c9221a;
}
.sport2 {
	background-color:#CCCCCC;
	font-size:1.1em;
	float:left;
	width:265px;
	border-left: 4px solid #c9221a;
	padding:0 5px;
	line-height:1.5em;
	height:145px;
	margin:0 0 20px 0;
}
.sport1 h1, .sport2 h1 {
	color: #16284e;
	margin-top:5px;
}