/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */

/* HAUPTFARBEN
1659AF = blau von Soul
0A3680 = Dunkelblau von Waves
7F492A = Sattes Braun Holz
DBDADA = Grau um Soul
00bf02 = Dunkelgrün
Hintergrund = WHITE
Zeltbeige = FEE5A5
Türkis = 09F 

GRÜN 76BC3D


*/

body
{

	background-image:url(../pix/GlampingPanorama.jpg);
	background-attachment:fixed;
	background-position:center;
	background-repeat:no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	
	/* Grundschriftart für alles */
	font-size:18px;	
	font-family: 'Quattrocento Sans', sans-serif;
	/* font-family: 'Dosis', sans-serif; */
	text-rendering: optimizeLegibility;
	
	color:#0A3680;

	line-height:1.2em; /* Standardabstand einstellen - wird scheinbar vom Resetter gekillt */ 
}

/* Standardeinstellungen die durch den Resetter platt gemacht wurden */
p
{
	/* Standardabstände für Absätze */
	margin-top:17px;
	margin-bottom:17px;
}

td
{
	padding:30px;
}


#Logo
{
	/* zum oberen Rand etwas Abstand */
	margin-top: 20px;
	
	/* Floatet automatisch mit, da Bild */
	
	/* border: 1px double yellow; */
	
}

/* Das Feelingbild ist immer darunter mit etwas Abstand */
#Feelingbild
{
	/* position:relative;
	left:10%;
	width:80%;
	overflow:hidden; */
}

/* Das allgemeine Infoformular */
#InfosAnfordern
{
	text-align:center;
	background-color:white;
	padding:5px;
}

#InfosAnfordern Form
{
	text-align:center;
	background-color:white;
	padding:5px;
	font-size:120%;
	margin:0px;
}

#InfosAnfordern p
{
	margin:5px;
}

#SpecialOffer
{
	text-align:center;
	font-size:130%;
	color:#1659AF;
	padding:5px;
	background-color:white;
	line-height:1.5Em;
	border: 1px #0A3680 solid;
}

#HappyVIPs
{
	text-align:center;
	font-size:80%;
	color:#1659AF;
	padding:5px;
	background-color:white;
	border: 1px #0A3680 solid;
}

#AudioBegruessung
{
	text-align:center;
	font-size:100%;
	color:#0A3680;
	background:white;
	padding:5px;
	text-align:center;
	border: 1px #0A3680 solid;
}

#AudioBegruessung p
{
	margin:0px;
	padding:0px;
}

#AudioBegruessungLinks p
{
	margin:0px;
	padding:0px;
}

#AudioBegruessungLinks
{
	float:right;
	width:150px;
	text-align:center;
	font-size:100%;
	color:#1659AF;
	background:white;
	padding:2px;
	border: 2px #1659AF solid;
	margin-right:15px;
	margin-bottom:10px;

	border-radius: 10px 10px 10px 10px; /* Geht nur bei neueren Browsern */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

#Loesungen
{
	text-align:center;
	font-size:100%;
	color:#0A3680;
	background:white;
	padding:5px;
	text-align:center;
	border: 1px #0A3680 solid;
}

#Loesungen a.tag
{
	font-weight:bold;
	font-size:150%;
}

/* Die Sprachauswahl */
#Languageselector 
{
	text-align:right;
	padding:0px;
	border;0px;
}

#Languageselector span
{
	 background:#66CC00;
	 padding:3px;
}

#Languageselector a:hover
{
	text-decoration:none;
}

#Languageselector a
{
	text-decoration:none;
}

/* Der Footer */
#Footer
{
	padding:1px;
	font-size:80%;
	margin-bottom:20px;
	background-color:#FEE5A5 ;
	
	border-radius: 10px 10px 10px 10px; /* Geht nur bei neueren Browsern */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

/* Innerhalb des Footers gibt es diese 3 Bereiche, welche horizontal dargestellt werden. */
#Footer table td
{
	border-right: 1px white dotted;
	padding:1px;
	color:#0A3680;
}

#Footer a
{
	color:darkblue;
	text-decoration:underline;
}

#Social
{
	color:white;
	text-align:center; /* Weiter oben wirkt es nicht durch */
}

#iLike
{
	text-align:center;
}

#Twitter
{
	text-align:center;
}

#Impressum
{
	text-align:center;
}


#Navigation
{
	/* zum oberen Rand etwas Abstand und GENAU auf Höhe von "Waves"*/
	margin-top: 38px;
	margin-bottom: 20px;
	
}


/* Hier der Erläuterungstext was das ganze eigentlich alles soll */
#Textbereich
{
	margin-bottom:30px;
	padding:15px;
	background-color:#FEE5A5;
	border-radius: 10px 10px 10px 10px; /* Geht nur bei neueren Browsern */
	border-radius: 10px 10px 10px 10px; /* Geht nur bei neueren Browsern */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

div.track
{
	margin-bottom:30px;
	padding:15px;
	background-color:#66CC00;
	border-radius: 10px 10px 10px 10px; /* Geht nur bei neueren Browsern */
	border-radius: 10px 10px 10px 10px; /* Geht nur bei neueren Browsern */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

div.gutschein
{
	border-radius: 10px 10px 10px 10px; /* Geht nur bei neueren Browsern */
	border-radius: 10px 10px 10px 10px; /* Geht nur bei neueren Browsern */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}
				
h1
{
	font-size:26px;
	font-family:'Dosis', sans-serif;
	color:#1659AF;
	font-weight:normal;
	text-align:right;
	padding:2%;
	line-height:1.2em;	/* Muss in den Hs nochmal separat gesetzt werden, warum auch immer */
	margin-top:30px;
}

h1.VideoTeaser
{
	color:white;
	font-size:300%;
	background-color:#1659AF;
	border-radius: 10px 10px 10px 10px; /* Geht nur bei neueren Browsern */
	border-radius: 10px 10px 10px 10px; /* Geht nur bei neueren Browsern */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

h2
{
	font-size:28px;
	font-family:'Dosis', sans-serif;	
	font-weight:normal;
	text-align:right;
	color:#0A3680;
	padding:1%;
	margin-bottom:20px;
	line-height:1.2em;	/* Muss in den Hs nochmal separat gesetzt werden, warum auch immer */
}

p.top
{
	padding-top:15px;
	text-align:center;
	color:#1659AF;
	font-size:110%
}

/* Styles für die Paket-Beraterin */

div.consulting
{
	position:relative;
	
	left:2%;
	width:90%;
	min-width:200px;
	max-width:800px;
	
	overflow:hidden;
	border: 1px solid #0A3680;
	padding: 3%;
	margin:2%;
	/* background-color:#7F492A; */
	background-image:url(../pix/MagicBox.jpg);
	
	color:white;
	
	font-size:140%;
	
}

div.consulting h1
{
	text-align:center;
	font-weight:bold;
	color:white;
	background-color:#1659AF;
	font-size:140%;
	line-height:1.2em;	/* Muss in den Hs nochmal separat gesetzt werden, warum auch immer */
}

div.consulting h3
{
	text-align:left;
	font-weight:bold;
	color:lightyellow;
	font-size:140%;
	line-height:1.2em;	/* Muss in den Hs nochmal separat gesetzt werden, warum auch immer */
}

div.consulting p.Preis
{
	font-weight:bold;
	color:lightyellow;
	font-size:120%;
	margin-top:0px;
	padding-top:0px;
	background-color:#1659AF;
}

table.Kalender
{
	text-align:right;
	font-weight:normal;
	color:#66CC00;
	font-size:60%;
	margin-top:0px;
	margin-bottom:0px;
	padding-top:0px;
	background-color:#1659AF;
	vertical-align:top;
	
}

/* Alles um die Tabelle bei zu geringer Breite scrollen zu können */
.table-scrollable {
  width: 100%;
  overflow-y: auto;
  margin: 0 0 1em;	
}

.table-scrollable::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
}

.table-scrollable::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 3px solid #fff;
  background-color: rgba(0, 0, 0, .3);
}

/* Das sind die einzelnen Einträge mit Termin */
table.Kalender li
{
	font-size:80%;
	margin-bottom:0px;
	color:white;
}

div.consulting b
{
	color:white;
	background-color:#1659AF;
}

div.consulting a em
{
	color:#0A3680;	
	font-weight:bold;
}

div.consulting p.details
{
	color:white;
	background-color:#1659AF;
	padding:15px;
	font-style:italic;
	font-size:80%;
}

div.consulting input
{
	align:center;
	padding:3px;
	width:177px;
	height:40px;
	font-size:100%;
	color:lightyellow;
	font-weight:bold;
	background-color:#1659AF;
}

div.consulting table tr td 
{
	border-bottom:#1659AF dashed;
	vertical-align:top;
	padding-bottom:15px;
	margin-bottom: 15px;
}

div.consulting img
{
	
}

div.consulting table tr td.rechteSpalte 
{
	border-bottom:#1659AF dashed;
	vertical-align:center;
	margin-bottom: 15px;
	width:160px; /* Sonst wird es beim IE 8 gepresst */
}

span.top
{
	color:#1659AF;
	font-weight:bold;
}

/* Bilderzeilen mit etwas Abstand um die Bilder */
p.Bilder img
{

}


/* BIO */
div.Vorstellung 
{
	padding-left:10%;
	padding-right:5%;
	margin-right:2%;
	/* font-family:script; */
	font-style:italic;
	border:4px double #0A3680;
}

/* z.B. Song auf Rezept */
div.Zusatzinfo
{
	border: 1px double #0A3680;
	padding: 10px;
	background-color:white;
	font-size:80%;
}

p.Statement
{
	font-size:120%;
}

p.centered
{
	text-align:center;
}

div.Paket
{
	position:relative;
	
	left:0%;
	width:90%;
	min-width:20px;

	
	overflow:hidden;
	border: 1px solid #0A3680;
	padding: 3%;
	margin:2%;
	background-color:#09F;
	
	color:white;
	
}


div.Paket h1
{
	text-align:center;
	font-weight:bold;
	color:white;
	background-color:#1659AF;
	/* font-style:italic; */
	font-size:140%;
}

div.Paket p.NochBesserIst
{
	text-align:right;
	color:white;
	font-style:italic;
	font-size:120%;
	margin-top:40px;
	margin-bottom:5px;
}

div.box
{
	border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	
	background-color:#1659AF;
	padding:15px;
	margin-bottom:5px;
	margin-top:5px;
	color:white;
}

div.box h2
{
	color:white;
}

div.box h3
{
	color:white;
	font-weight:normal;
	line-height:1.2em;
}

div.PreisUndTermin 
{
	border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;

	text-align:left;
	color:darkblue;
	background-color:#FEE5A5;
	padding:15px;
	line-height:1em;
}

div.PreisUndTerminEinspaltig 
{
	text-align:left;
	background-color:#66CC00;
	font-size:20px;
	padding:10px;
	line-height:1em;
}

div.PreisUndTermin p.Preis
{
	text-align:right;
	color:#1659AF;
;
}

div.Spezialmeldung
{
	font-size:150%;
	text-align:center;
	font-weight:bold;
	color:#1659AF;
	line-height:1em;
}

div.DreamsComeTrue
{
	border: 4px double blue;
	padding: 3%;
	margin:2%;
	background-color:white;
	font-size:90%;
}

/* Die Kontaktformulare */
form.Contact
{
	overflow:hidden;
	/* border: 1px solid #0A3680; */
	text-align:center;
		
	color:white;
	/* font-style:italic; */
	font-size:110%;
	padding:10px;
	margin:10px;
}

form.Contact h1
{
	border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;

	text-align:center;
	font-weight:bold;
	color:white;
	background-color:#0A3680;
	/* font-style:italic; */
	font-size:120%;
	
}

form.Contact span
{
	border-radius: 5px 5px 5px 5px; /* Geht nur bei neueren Browsern */
	border-radius: 5px 5px 5px 5px; /* Geht nur bei neueren Browsern */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	padding:3px;
	margin:4px;
}
form.Contact input
{
	font-size:100%;	
	font-family: 'Quattrocento Sans', sans-serif;
	text-rendering: optimizeLegibility;
	border-radius: 5px 5px 5px 5px; /* Geht nur bei neueren Browsern */
	border-radius: 5px 5px 5px 5px; /* Geht nur bei neueren Browsern */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

form.Contact select
{
	font-size:100%;	
	font-family: 'Quattrocento Sans', sans-serif;
	text-rendering: optimizeLegibility;
	margin:7px;
	border-radius: 5px 5px 5px 5px; /* Geht nur bei neueren Browsern */
	border-radius: 5px 5px 5px 5px; /* Geht nur bei neueren Browsern */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

form.Contact textarea
{
	font-size:100%;	
	font-family: 'Quattrocento Sans', sans-serif;
	text-rendering: optimizeLegibility;
	margin:4px;
	border-radius: 5px 5px 5px 5px; /* Geht nur bei neueren Browsern */
	border-radius: 5px 5px 5px 5px; /* Geht nur bei neueren Browsern */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

form.Contact b
{
	color:#1659AF;
	background-color:white;
}

form.Contact span
{
	background-color:#0A3680;
}

form.Contact td
{
	margin:0px;
	padding:0px;
}

form.Contact table
{
	position:relative;
	left:30%;
}

form.Reminder
{
	overflow:hidden;
	border: 1px solid #0A3680;
	background-color:white;
	padding:10px;
	
	color:#0A3680;
	font-size:100%;
	text-align:center;
}

.SubmitButton
{ 
		color:white;
		box-shadow: 2px 2px 0 #09F;
    background-color:darkblue;
    border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px;
		-moz-border-radius: 10px;
    padding:10px;
    border: none;
}


#ContactFreeGift
{
	color:#0A3680;
	background-color:lightyellow;
	padding:10px;
	border:5px dotted;
}

#ContactFreeGift input
{
	background-color:white;
	color:#1659AF;
	font-weight:bold;
	padding:2px;
}

#ContactFreeGift input#button
{
	background-color:#0A3680;
	color:white;
	font-weight:bold;
	font-size:100%;
}

table
{
	font-size:95%;
}

li
{
	margin-bottom:10px;
}


/* Alles für die Testimonials */
/* ========================== */

div.Testimonials
{
	/* Sie sollen durchsichtig über dem Hintergrundbild liegen */
}

div.Testimonial
{
	/* Jedes aber in seiner eigenen abgerundeten Box und mit Abstand */
	
	background-color:#09F;
	font-style:normal;
	border-radius: 10px 10px 10px 10px; /* Geht nur bei neueren Browsern */
	border-radius: 10px 10px 10px 10px; /* Geht nur bei neueren Browsern */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	padding:2px;
	margin-bottom:20px;
	
}

.Left
{
	/* Das ist eine der linken Boxen */
	width:70%;
	left:5%;
	
}

.Right
{
	/* Das ist eine der rechten Boxen */
	margin-left:30%; margin-right:0;
	
}

div.Testimonial div.Photo
{
	float: left; width: 10%;
	min-width:100px;
	padding:3px;
}

img.Testimonial
{
	border-radius:  50%;
	-webkit-border-radius: 50%;
}

div.Testimonial div.Text
{
	text-align:center;
	color:white;
}

div.Testimonial div.Text p.Who
{
	/* Der Name des Kunden in Kursiv */
	font-style:italic;
}



div.Testimonial div.Text strong
{
	/* Der Name BLAU */
	color:#0A3680;
}




/* Links */
/* ===== */

a
{
	color:#1659AF;
	text-decoration:underline;

}



/* Weg da es die Fancybox stört 
a:hover
{
	color:#1659AF;
	background-color:white;
} */

a.nogimmick:hover
{
	text-decoration:none;
	background-color:transparent;
}

/* In diesem Fall ist der Hintergrund sonst die gleiche Farbe wieder Link. Hier andere Farbe nutzen */
div.box a
{
	color:lightyellow;
	text-decoration:underline;
}

div.box a:hover
{
	color:#1659AF;
	text-decoration:underline;
	background-color:white;

}

div.consulting a
{
	color:lightyellow;
	text-decoration:underline;

}

div.consulting a:hover
{
	color:#1659AF;
	text-decoration:underline;
	background-color:white;

}



/* ALLGEMEINES */
/* =========== */

/* Unterstrichen als zweiter Hervorhebungsebene innerhalb von FETT. Aber nicht wirklich unterstrichen, da das mit Links verwechselt
   werden könnte. */
span.highlight
{
	background-color:lightyellow;
	text-decoration:none;
}

span.highlightBox
{
	background-color:#00bf02;
	color:white;
	padding:1px;
	text-decoration:none;
}

b.highlight
{
	color:#1659AF;
	background-color:white;
}

img
{
	border:0;
	padding: 10px;
}

img.minwidth
{
	min-width:100px;
}


li
{
	margin-left:30px; /* Etwas vom Text eingezogen. Evtl. durch Reset geändert */
}

/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

@media handheld, only screen and (max-width: 767px)

{

	body
	{
		/* Vereinfachte Version für schnelleres laden */
		background-image:url(../pix/GlampingPanorama.jpg);
		background-attachment:fixed;
		background-position:center;
		background-repeat:no-repeat;
		background-size: cover;
		
		/* Grundschriftart für alles */
		font-size:16px;	/* etwas kleiner */
		text-rendering: optimizeLegibility;
			
		line-height:1.2em; /* Standardabstand einstellen - wird scheinbar vom Resetter gekillt */ 
	}

		
	h1
	{
		font-size:26px;
	}

	h2
	{
		font-size:26px;
	}
	
	h3
	{
		font-size:24px;
	}

}


/* ========================================== */
/* ! Provide higher res assets for iPhone 4   */
/* ========================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 

/*	.logo {
		background: url(logo2x.jpg) no-repeat;
		background-size: 212px 303px;
	}*/

}