/* CSS Document

Stylesheet für Villa Lagoinha
Stand:  Draft 0.1
Datei:	bilschirm.css
Datum: 	05.09.09
Autor:	Michael Hofer

Aufbau:	1.	Kalibrierung 
		2.  Allgemeine Regel (Tag)
		2.	Hyperlinks
		3.  Gerüst
		4.  Header
		5.  Navigation
		6.  Galerie
		7.  Content
		8.  Footer
		9.  Formular
		10.	Index CSS styles

*/

/*
----------------------------------------------------------------
Kalibrierung 
----------------------------------------------------------------
*/

*	{	
	padding: 0;
	margin: 0;
}

h2, p, ul, ol	{ margin-bottom: 1em; }

ul ul { margin-bottom: 0px; }

li { margin-left: 1em; } 

ul {list-style: none; }

html { height: 101%; } /*erzwingt Scrollbar im Firefox */


/*
----------------------------------------------------------------
2.  Allgemeine Regel (Tag)
----------------------------------------------------------------
*/


body {
	background-color: #746353;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	/*background-image: url(images/background.jpg);*/
	background-repeat: repeat-x;
	/*background-attachment: fixed;*/
}

h1 { font-size: 150%; }


h2 { 
	font-size: 130%;
	color: #a28B77;
	margin-bottom: 5px;
	font-weight: normal;
}

h3 {
	color: #a28b77;
	font-weight: normal;
	margin-bottom: 5px;
	font-size: 110%;
}

.clear {clear: both}

strong {
	color: #a28b77;
	font-weight: normal;
}


/*
----------------------------------------------------------------
Hyperlinks
----------------------------------------------------------------
*/

a { text-decoration: none; outline: none; }

a:link {color: #F6AA63;}

a:visited {color: #F6AA63;}

#header #logo a:link, 
#header #logo a:hover,
#header #logo a:focus,
#header #logo a:visited,
#header #logo a:active {
	text-decoration: none;
	border-bottom: none;
}

#faq #text img {
	text-decoration: none;
	border: none;
	position: absolute;
	margin: 3px 0 0 6px;
}



#metanavi a:hover, 
#content  a:hover, 
#metanavi a:focus,
#languageselection a:hover, 
#content a:focus  { color: #B41F23; }

#content .images a:hover,
#content .images a:focus {border-bottom: none;}

/*
----------------------------------------------------------------
Gerüst
----------------------------------------------------------------
*/
#wrapper {
	width:950px;
	margin: 10px auto 10px auto;
}


/*
----------------------------------------------------------------
Header
----------------------------------------------------------------
*/
#header {
	background-color: #352c25;
	height: 150px;
	position: relative;

}


#header img {
	margin-top: 20px;
	border: none;
	border-bottom: none;
	text-decoration: none;
}


#metanavi {
	text-align: right;
	margin: 30px;
	float: right;
	font-size: 90%;
	width: 300px;


}

#metanavi li {
	display: inline;
	list-style: none;
	
}

#languageselection {
	width: 220px;
	float:right;
	margin-top: 30px;
	font-size: 90%;

}	

#languageselection li {
	display: inline;
}	

/*
----------------------------------------------------------------
Navigation
----------------------------------------------------------------
*/

#navigation ul {
	margin-right: 20px;
}


#navigation li {
	background: #352C25; 
	display: inline;
	

}

#navigation li a {
	color: #F6AA63;
	padding: 10px 23px 15px 23px;
	background: #352c25;
	border-top: solid #746353 1px;
	border-left: solid #746353 1px;
	border-right: solid #746353 1px;
	/*border-bottom: solid #746353 1px;*/
}
	


#guesthouse #navi01 a,
#reservation #navi02 a,
#kiten #navi03 a,
#umgebung #navi04 a,
#navigation li a:hover {
	color: #f2f2f2;
	background-color: #746353;
	border-bottom: solid #746353 1px;
} 

#navigation {
	text-align: right;
}




/*
----------------------------------------------------------------
Galerie
----------------------------------------------------------------
*/

.images {
	position: relative;
	margin: 20px 0 15px 0;


	
}

.images li {
	display: inline;
	margin-left: 0;
	margin-right: 0;

}

#content .images .margin {
	margin-left: 8px;
	margin-right: 7px;
}

#content .images .marginleft {
	margin-left: 8px;
}



#content .images .marginright {
	margin-right: 8px;
}


.images li img {
	border: 13px solid #F2F2F2;
  
}




body #galerie	{
	width: 800px;
	background-color: black;
	
}

#bild {
	margin: 10px auto 10px auto;
	width: 560px;
}

#bild img {
	border: 10px solid #f2f2f2;
	border-bottom: 40px solid #f2f2f2;

}

#links img {
	border: none;
	width: 50px;
	position: relative;
	top: -47px;
	left: 10px;
}
#rechts img {
	border: none;
	width: 50px;
	position: relative;
	top: -97px;
	right: -500px;
}

#galeriesmall address {
	position: relative;
	top: -90px;
	left: 8px;

}
	

/*
----------------------------------------------------------------
Content
----------------------------------------------------------------
*/

#content {
	height: 520px;
	width: 100%;
	margin-top: 10px;
	position: relative;

}

#guesthouse #content,
#kiten #content,
#umgebung #content,
#reservation #content,
#faq #content,
#kontakt #content {
	height: 100%;
}



#content #text,
.textbox{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height: 1.5em;
	letter-spacing: 0.08em;
	width: 100%;
	background-color: #352c25;
	position: relative;
	height: 100%;
	overflow: hidden;

}


.textbox {
	width: 28%;
	float: left;	
	color: #F2F2F2;
	padding: 10px;
	margin: 10px;

}

#text .textbox1 {
	width: 85%;
	float: left;	
	color: #F2F2F2;
	margin: 10px 20px 10px 10px;
	padding: 10px;
	
	

}
#text .textbox li { margin-left: 0; } 

#content li {margin-bottom: 10px;}

#kiten .textbox li,
#umgebung .textbox li {
	list-style-type: circle;
	margin: 3px 0 0 10px;
}



#multimedia {
	width: 100%;
	overflow: hidden;
	background-color: #352c25;

}

#multimedia #google {

	float: left;
	margin: 20px;
}

#google h2 {
	margin-bottom: 10px;
}

#multimedia #youtube {
	width: 600px;
	float: left;
	overflow: hidden;
	margin: 20px 0px 20px 40px;
}

#youtube ul {
	margin-top: 10px;
	list-style-type: disc;
	margin-left: 5px;
	color:#F6AA63;
}

#youtube ul li {
margin-bottom: 2px;
}

#multimedia #vimeo {
	width: 600px;
	float: left;
	overflow: hidden;
	margin-left: 20px;
}

#tripadvisor {
float: left;
margin: 10px;
padding: 10px;
width: 280px;
}

#tripadvisor #CDSWIDSSP {
width: 280px !important;
float: left;
margin-top: 5px
}

		

/*
----------------------------------------------------------------
Footer
----------------------------------------------------------------
*/

#footer {
	background-color: #352c25;
	height: 40px;
	margin-top: 10px;
	padding: 10px;
	color: #f2f2f2;
	overflow: hidden;
	font-style: normal;
}

#galerie #footer {
	position: absolute;
	top: 960px;
	width: 930px;
}

address {
	font-style: normal;
	text-align:left;
	display: inline;
	width: 600px;

}

#addthis {


margin-left: 10px;
margin-bottom: 10px;
display: inline;
width: 240px;
float: right;
z-index: 20;
}

/*

----------------------------------------------------------------
Formular
----------------------------------------------------------------
*/


#text #formular {
	width: 63%;
	float: left;
	color: #F2F2F2;
	padding: 10px;
	margin: 10px;

}

fieldset {
	padding: 10px;
	border: 1px solid #B41F23;
	margin: 10px 10px 10px 0;
}

label {
	position: relative;
	top: 2px;
	cursor: pointer;
}


input, select, #bemerkung {
	margin: 5px 0 5px 0;
	
}

input#anrede_herr {
	padding-left: 0;
	margin: 0 0 10px 135px;
	position: relative; 
	top: 4px;
}

input#anrede_frau {
	margin: 0 0 10px 0;
		position: relative; 
		top: 4px;
}




#formular #bemerkung,
#formular #name,
#formular #strasse,
#formular #ort,
#formular #mail {

	width: 380px;
}

#formular #land,
#formular #telefon  {

	width: 200px;
}

#formular #type,
#formular #reisende,
#formular #kurs,
#formular #ankunft,
#formular #abreise {
	width: 150px;
}

label.davor {
	float: left;
	clear: left;
	width: 120px;
	text-align: left;
	margin-right: 10px;
	margin-left: 10px;
}

.pflichtfeld {
	color: #F6AA63;
}


legend {
	color: #a28b77;

}

textareia {
	font-family: Verdana, Arial, Helvetica, sans-serif; }