charset "UTF-8";
/*
Description:    Style Sheet for siquijorcasa.com
Author:         Andreas Wiedebruch
*/
/* ********************************************************************************************* */ 
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
   
Media queries from http://foundation.zurb.com/sites/docs/v/5.5.3/media-queries.html   

// Small screens
@media only screen { } /* Define mobile styles *

@media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues *

// Medium screens
@media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens *

@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues *

// Large screens
@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens *

@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues *

// XLarge screens
@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens *

@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues *

// XXLarge screens
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */

/* ************************************************* C S S  -  R E S E T ********************************** */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
}

/*HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	overflow-x: hidden; 
	width:100%;}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* color for links */
a {color:rgb(0, 0, 238)}
a:visited {color:rgb(85, 26, 139)}
a {text-decoration:none;}
/* ************************************************* C S S  -  R E S E T  E N D E ************************* */


/* *************************************** W B, 29 Apr 2016: C O M M O N  R U L E S  *************************************** */
/*class for links in text */
.spanlinks{font-style:italic;font-weight: bolder;}

/* class to keep text together in a small layout. The underscore will not be seen - it is outside the viewport */
.underscore{position:relative;left:-9999px;}

/* highlithed text like "Pagoda verde"*/
.highlight {
  font-family: "Lato",serif !important;
  font-style: italic;
  line-height: 1.0rem;
  text-align: center !important;
}

.clear{clear:both;}
#with-portrait {
  float: left;
  width: 75%;
}
/* e.g. with message in casa_booling-request 
.hiddentxt{display:none;}
*/
/* *************************************** E N D  W B, 29 Apr 2016: C O M M O N  R U L E S  *************************************** */
body {
  background-image: url("../images/BLUE.JPG");
  background-size: cover;
  margin: 0;
}

/* for test to see where you are in the code */ 
#info {
  color: black;
  display: none;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.drohne{
	width:50%;
	margin: 0 auto;
}

.pdrohne {
	color: blue;
	font-family: "Times New Roman",Times,serif;
	font-size: 1em;
	font-style: italic;
	line-height: 1rem;
	text-align: center;
	margin: 2% 20% 2% 30%;
	width: 50%;
}

#drohne-block{
	margin-bottom: 3%;
}

#drohne_img{
	with: 50%;
	margin: 0 auto;
}

/* layout for all layouts smaller than 641px => in the index-file */
#block-layout{display:none; margin-top:3%;}

/* layout for all layouts smaller than 641px => in all other php-files */
#container-rates-div{height:auto; width:90%;}
#img-big {margin: 0 2%;width: 98%;}

/* layout for all layouts greater than 640px */ 
#table-layout-header {
  display: block;
  /*wb, 18Jan2020: wg. casa video
  margin-top: 2%;
  padding-top: 2%;
  */
}

/* used in header.php to reconnect user to a noscript warning page */
#noscript {
  background-color: #ff6600;
  font-size: 1.2em;
  margin: 5% auto;
  padding: 5%;
  text-align: center;
  width: 75%;
}

/* ****************** H E A D E R  I N D E X  S T A R T  ************************************** */
/* table1: Table with bamboo and panorama image, table2: Table for text under the casa image */

/*wb,18Jan2020:  wg casa video
#table1, #table2{width:95%; margin:0 auto;}
*/
#table1, #table2 {
	width: 95%;
	margin: 2% auto 0%;
}
#txt-sub-header-index {
  color: blue;
  font-family: "Times New Roman",Times,serif;
  font-size: 2em;
  font-style: italic;
  line-height: 2.5rem;
  text-align: center;
}

#casa-pano-img {
  height: auto;
  margin: 0 auto;
  width: 100%;
}

#div_casatxt {
  color: blue;
  font-family: "Times New Roman",Times,serif;
  font-size: 2.2em;
  font-style: italic;
  line-height: 2.5rem;
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

.span-capital-index{font-size:xx-large;}

.sel-lang {
	background-color: #7dc5f2;
	font-family: "Trebuchet MS","Lucida Sans Unicode","Lucida Grande","Lucida Sans",Arial,sans-serif;
	font-size: 1.1rem;
	height: 25px;
	margin-bottom: 10%;
	margin-left: 10%;
	margin-top: 5%;
	padding: 5% 2%;
	position: relative;
	text-align: center;
	width: 45%;
	-webkit-box-shadow: 10px 10px 5px 1px rgba(105, 105, 226, 1);
	-moz-box-shadow: 10px 10px 5px 1px rgba(105, 105, 226, 1);
	box-shadow: 10px 10px 5px 1px rgba(105, 105, 226, 1);
}


/* **************************************** H E A D E R  I N D E X  E N D  ******************************************** */

/* **************************************** H E A D E R  P H P  F I L E S  ******************************************** */
/* header small layout - less than 641px */
#table-layout-header-640 {
	display: none;
	margin: 5% auto 0;
	width: 95%;
}	

/* table with images and text in header for php-files */ 
#table-header {
  margin: 0 auto;
  width: 95%;
}
/* class for the bothe images in the header for php-files */
.img-header {
  height: auto;
  max-width: 150px;
  width: 100%;
}
/*
#accu-weather {
  float: right;
}
*/
/*wb, 04Aug2016
#accu-weather {
  margin-left: 10%;
  width: 70%;
}
*\

/* div to manage text under weather sticker *\
#weather-txt {
  font-family: sans-serif;
  font-size: 0.7rem;
  width: 100%;
  margin-left:20%}

#image-weather-sticker {width: 90%;}
*/

/* image header with casa text */
#casa-img {
  height: auto;
  position: relative; /* relative because of positioning the text below it */
  width: 100%;
}

.span-capital {font-size: 4rem;}

.cbtoggle {
  display: none;
  height: 5px;
  left: 0;
  margin: 0;
  position: absolute;
  top: 0;
  width: 2%;
}

/* text for the hamburger menu button */
#menu-txt {
  color: rgb(143, 247, 153);
  display: none;
  font-weight: normal;
  height: auto;
  line-height: 1.5rem;
  margin-left: 3%;
  position: relative;
  top:12%;
  }

#navul-container {
  background: rgb(19, 109, 200) none repeat scroll 0 0;
  display: none;
  float: right;
  height: 40px;
  margin-bottom: 2%;
  margin-top: 2%;
  position: relative;
  width: 100%;
}

/* label for the checkbox to toogle responsive designe menu*/
#label-check-input {
  background: rgb(125, 197, 242) none repeat scroll 0 0;
  background: rgb(24, 255, 49) none repeat scroll 0 0;
  border: 2px solid #6969e2;
  border-radius: 5px;
  color: #000000;
  display: none;
  height: 30px;
  left: 0;  
  margin-right:3%;
  max-width: 40px;
  min-width: 30px;
  position: relative;
  text-align: center;
  top: 13%;
  transition: all 1.4s linear 0s;
  width: 7%;
  float:right;
  }

/* container for the 3 lines for the hamburger */
#container-nav-link {
  height: 1.4em;
  margin: 0 auto;
  position: absolute;
  top: 0;
  width: 100%;
}

ul#navul_menu {
  display: none;
  height: 0;
  left: 0%;
  list-style: outside none none;
  margin: 0 auto;
  position: absolute;
  top: 100%;
  width: 100%;
}

ul#navul_menu li {
  background-color: rgb(127, 178, 236);
  color: rgb(0, 0, 255);
  line-height: 2.5rem;
  text-align: center;
  font-size:1.3rem;
  
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,2989d8+0,7db9e8+99,7db9e8+100 */
background: rgb(30,87,153); /* Old browsers */
background: -moz-linear-gradient(left,  rgb(30,87,153) 0%, rgb(41,137,216) 0%, rgb(125,185,232) 99%, rgb(125,185,232) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgb(30,87,153) 0%,rgb(41,137,216) 0%,rgb(125,185,232) 99%,rgb(125,185,232) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgb(30,87,153) 0%,rgb(41,137,216) 0%,rgb(125,185,232) 99%,rgb(125,185,232) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 */
}

#casa-menu-div {
  height: 60px;
  line-height: 0.9rem;
  margin: 1% auto 3%;
  width: 90%;
}

#casa-menu-ul {
  height: 5px;
  position: relative;
  top: 0;
}

/* hide div for the ul-menu in big layout */
nav#casa-menu-ul{display:none;}

#lang-container{
	width:80%;
	margin:0 auto;
}

.mitem {
  background-color: #7dc5f2;
  float: left;
  font-family: "Trebuchet MS","Lucida Sans Unicode","Lucida Grande","Lucida Sans",Arial,sans-serif;
  font-size: 0.9rem;
  height: 35px;
  margin: 0 0.5%;
  padding: 1% 0.5% 0.5%;
  text-align: center;
  width: 14.6%;
-webkit-box-shadow: 10px 10px 5px 0 #6969e2;
-moz-box-shadow: 10px 10px 5px 0 #6969e2;	
box-shadow: 10px 10px 5px 0 #6969e2;
}

.welcome {width: 12%;}
.show {width: 14%;}
.tour {width: 15%;}
.videos {width: 6%;}
.bike {width: 10%;}
.bike-de {width: 10%;}
.gb-us {width: 10%;}
.links {width: 5%;}
.bookreq{width: 12%;}

.select {
  box-shadow: 10px 20px 25px 5px #6969e2;
  font-weight: bold;
-webkit-box-shadow: 10px 20px 25px 5px #6969e2;
-moz-box-shadow: 10px 20px 25px 5px #6969e2;	
box-shadow: 10px 20px 25px 5px #6969e2;
}

li#selectli {
  background: rgb(143, 247, 153) none repeat scroll 0 0 !important;
  color: #000000 !important;
  font-style: italic;
  font-weight: normal;
  width: 100%;
  }
  
.mitem a {text-decoration:none;}

/* ********************** E N D  F O R  A L L  P H P-F I L E S  H E A D E R ********************************* */  

/* ********************** L A Y O U T S  F O R  D IF F E R E N T  S I Z E S ********************************* */
#table-layout-content{display:block;}
#div-layout-content{display:none;}
.page-footer {
  margin-top: 3%;
  width: 100%;
  text-align:center!important;
}

/* ******************************* F O O T E R ******************************************** */
#footer {
	text-align: center;
	margin-bottom: 5%;
}

/* ******************************* I M P R E S S U M ******************************************** */
#impressum{
	width: 80%;
	margin: 0 auto;
	border:5 solid red;
	
}

/* ******************************* P R I V A C Y ******************************************** */
#privacy{
	width: 80%;
	margin: 0 auto;
	line-height:1.5;
}

/* ******************************* W E L C O M E  P A G E *************************************** */

/* *** T a b l e s  *** */
.tables-welcome {width: 90%; margin-top:1%;}
.tables-welcome-rates {width: 87%; margin-top:1%;}
.tables-welcome-th{font-weight:bold!important;}

/* width for standart text in coloumns */
.td-width-txt{width:60%;}
/* width for the rates table */
.td-width1{width:2%;}
.td-width2{width:48%;}
.th-rates {background-color: rgb(125, 197, 242);}
  
.td-footer {
  font-size: 0.8rem !important;
  text-align: center !important;
  font-family: 'Lato', serif !important;
}

.td-footer-communications {
  font-size: 0.8rem !important;
  padding: 0 1% !important;
  text-align: center !important;
}

.td-width-communications{width: 40%;}
.td-width-mail{width: 30%;}
.td-width-cell {width: 40%;}
.td-width-phone{width: 20%;}

.td-txt {
  color: #0000ff;
  font-family: Tahoma;
  font-size: 1.2rem;
  font-weight: normal;
  text-align: left;
  padding:1%;
  vertical-align:top;
}
/* class for a empty coloum in a table */
.td-space{width:5%;}
.td-img {padding: 1%;vertical-align: top;width: 30%;}

.img-scaled {height: auto;width: 100%;}
.img-scaled-big {height: auto;width: 80%;}
.td-houserates {font-size: 0.9rem;line-height: 1.4rem;}

#small-line {color: #0000ff;font-size: 0.8rem;font-family: 'Lato', serif;}

/* ******************************************** S T A R T  T O G G L E  H O U S E  M A P ********************************* */
/* ID for the map with the house plan */
#effect {
  background-color: #7fb3e8;
  border: 2px solid rgba(105, 105, 226, 1);
  display: none;
  height: auto;
  max-width: 800px;
  padding: 1.2em;
  position: absolute;
  width: 100%;
  border: 1px solid blue;
  left: 6%;
-webkit-box-shadow: 10px 10px 5px 1px rgba(105, 105, 226, 1);
-moz-box-shadow: 10px 10px 5px 1px rgba(105, 105, 226, 1);
box-shadow: 10px 10px 5px 1px rgba(105, 105, 226, 1);
}

/* label for the checkbox to toogle house map image */
#label-toggle-house-map-show,#label-toggle-house-map-hide{
  background: rgb(125, 197, 242) none repeat scroll 0 0;
  border: 2px solid #6969e2;
  border-radius: 5px;
  color: #000000;
  display: inline-block;
  height: 30px;
  left: 0;
  max-width: 100px;
  min-width: 60px;
  position: relative;
  text-align: center;
  top: 0;
  /*transition: all 0.4s linear 0s;*/
  width: auto;
  }

/* initially label "hide" has to be set to display none */  
#label-toggle-house-map-hide{display:none;}

/* here we have to have two classes 
	=> .cbtoggle-house-map is used for the input checkbox in the table-layout
	=> .cbtoggle-house-map-div is used for the input checkbox in the block-layout */
.cbtoggle-house-map, .cbtoggle-house-map-div{
  display: none;
  height: 5px;
  left: 0;
  margin: 0;
  position: absolute;
  top: 0;
  width: 2%;
}

/* **************** show the map was not ckicked ******************************************** */
	/* ~ => is valid for the next div under input ("~" ==>> sibling selector) 
	   div-container with id "effect" (for the image "housemap" ) is not to see when label is like "show" => height = 0	*/ 
	   
	/* For Table Layout => class for the input field is cbtoggle-house-map */
	input.cbtoggle-house-map ~ #label-toggle-house-map-show{display:inline-block;}
	input.cbtoggle-house-map ~ #label-toggle-house-map-hide{display:none;}
    input.cbtoggle-house-map ~ #effect 
	{
	  height: 0; 
	  /*background: none repeat scroll 0 0 rgba(0, 0, 0, 0);*/
	  margin: 0.2rem;
	  overflow: hidden;
	  /*transition: all 2s linear -0.5s;*/
	}
	
	/* For Block Layout => class for the input field is cbtoggle-house-map-div */
	input.cbtoggle-house-map-div ~ #label-toggle-house-map-show{display:inline-block;}
	input.cbtoggle-house-map-div ~ #label-toggle-house-map-hide{display:none;}
    input.cbtoggle-house-map-div ~ #effect 
	{
	  height: 0; 
	  /*background: none repeat scroll 0 0 rgba(0, 0, 0, 0);*/
	  margin: 0.2rem;
	  overflow: hidden;
	  /*transition: all 2s linear -0.5s;*/
	}

/* *************** show the map was clicked           ******************************************** */
	/* For Table Layout => class for the input field is cbtoggle-house-map */
	input.cbtoggle-house-map:checked ~ #label-toggle-house-map-show{display:none;}
	input.cbtoggle-house-map:checked ~ #label-toggle-house-map-hide{display:inline-block;}
	input.cbtoggle-house-map:checked ~ #effect {
	  display: block;
	  height: auto;
	  width:100%;
	  margin: 0;
	}
	
	/* For Block Layout => class for the input field is cbtoggle-house-map-div */
	input.cbtoggle-house-map-div:checked ~ #label-toggle-house-map-show{display:none;}
	input.cbtoggle-house-map-div:checked ~ #label-toggle-house-map-hide{display:inline-block;}
	input.cbtoggle-house-map-div:checked ~ #effect {
	  display: block;
	  height: auto;
	  width:80%;
	  margin: 0;
	}

/* ***************************************** E N D  T O G G L E  H O U S E  M A P *************************************** */

#buchung {font-size: 1.3rem; text-align:center; margin: 0;}
  
#img-effect{height: auto;width: 100%;}

/* *** B I K E S  P A G E ********************************* */ 
#bikecontainer {height: auto;margin: 0 auto;width: 80%;}
#bike_img {float: left;padding: 0 2%;width: 60%;}

#bike_img-scale{max-width:100%;height:auto;}

#bike_txt {
  color: #0000ff;
  float: left;
  font-family: Tahoma;
  font-size: 1.2rem;
  margin-bottom: 10%;
  padding: 1%;
  width: 32%;
}

#hr-bike{color:#b36d06;height:2px;width:80%;}

/* *** P H O T O - S H O W  P A G E ********************************* */ 
#show-txt {
  color: rgb(0, 0, 255);
  font-family: Tahoma,Arial,sans-serif;
  font-size: 1rem;
  margin-bottom: 0.5%;
  margin-left: 10%;
  width: 100%;
}
  
#show-container {
  height: auto;
  margin: 0 auto;
  width: 80%;
}

/* The Image Box */ 
div.img {
  float: left;
  padding: 0.2%;
  width: 24.6%;
}

div.img-portrait {
  float: left;
  padding: 0.4%;
  width: 32.5%;
}

.img-right {
  float: left !important;
  height: auto !important;
  padding: 0.3%;
  width: 24.4% !important;
}

.margintop10{margin-top:10%;}

.show-image {
	width:30%;
	height:auto;
	float:left;
}

.img-show-image {
  cursor: pointer;
  float: left;
  height: auto;
  width: 100%;
}

div.desc {padding: 5px; text-align: center;}

/* container for the gallery */
.modal-content {
  display: block;
  margin: auto;
  width: 50%;
}

 
/* wb, 07May2016: to arrange some images for photoshow in a special way */
.img-show-image-special {width: 49.8%;}
.img-show-image-dummy {width: 12.3%;}
/* End */

#wbanchor{
  background-color: #7dc5f2;
  color: blanchedalmond;
  left: 11%;
  position: fixed;
  top: 600px;
  font-weight:bold;
}
/* wb, 04May 
.to-top {
  left: 15%;
  margin: 1% 0 2%;
  padding: 1% 2%;
  position: fixed;
  text-align: center;
  top: 540px;
}
*/

/* *** F L I C K R  P A G E ********************************* */ 

#click-hint{
	width: 89%;
	margin-left:6%;
	color:#0033CC;
	font-weight:bold;
	font-style:italic;
	font-size:1.2rem;
	margin-top:0;
	margin-bottom:2%;
	}
	
#flickr-container {
  height: 1000px;
  margin: 0 auto;
  width: 90%;
}
	
.style3 {
  color: blue;
  font-size:1.0rem;
  font-weight: bold;
}


img {
	height:auto;
	width:100%;
}

#div1 {
  float: left;
  margin-left: 20%;
  margin-right: 10%;
  width: 20%;
}

#div2 {
  float: left;
  margin-left: 10%;
  width: 20%;
}

#div3 {
  clear: both;
  float: left;
  margin-left: 10%;
  margin-right: 20%;
  margin-top: 3%;
  width: 20%;
}

#div4 {
  float: left;
  margin-left: 20%;
  margin-top: 3%;
  width: 20%;
}

#div5 {
  clear: both;
  float: left;
  margin-left: 0;
  margin-right: 10%;
  margin-top: 5%;
  width: 20%;
}

#big {
  float: left;
  height: auto;
  margin-left: 5%;
  margin-top: -5%;
  width: 30%;
}

#div6 {
  float: left;
  margin-left: 15%;
  margin-top: 3%;
  width: 20%;
}

#div7 {
  clear: both;
  float: left;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 3%;
  width: 20%;
}

#div8 {
  float: left;
  margin-left: 0;
  margin-right: 5%;
  margin-top: 10%;
  width: 20%;
}

#div9 {
  float: left;
  margin-left: 5%;
  margin-top: 2%;
  width: 20%;
}

/* ****************** V I D E O S  ********************************************** */
/*
#video-container{
	width:auto;
	margin:0 auto;
}
#video-table{
	width:100%;
}
*/

#video-container {
  height: 600px;
  margin: 0 auto;
  width: 80%;
}
	
#video-headline-source, #video-headline-content {
  font-size: 1.5rem;
  margin-bottom: 2%;
  width: 100%;
  margin-top:2%;
}

#video-source, #video-content-txt {margin-left: 20%; width: 100%; font-size:1.2rem;}
#video-content-txt {margin-bottom:2%;}
#video-content {
  height: auto;
  margin-left: 1%;
  width: 80%;
}

#video-object{width:100%;height:310px;}

embed{width:100%;height:300px;}

/* ****************** L I N K S ********************************************** */
#table-links{display:block;width:100%;}
#links-responsive{display:none; width:100%;}

.link-header, .link-value {width: 100%;margin-left:6%;}
.link-value {margin-bottom: 1%;margin-left: 8%;}

#tb-links {margin: 0 auto;width: 90%;}
#tb-links td {height: 30px;margin-right: 2px;}
/* ****************** B O O K I N  R E Q U E S T  **************************** */
/* the p-tag is normally with the reset of this page - but here we need exeptions from this reset. Therefore we will habe a class here for <p> */
p.request {
	margin:3% 0;
}

#mail_container_big {
  margin: 1% auto;
  width: 90%;
  display:block;
}

/* wb, 07Sep2016: Display none to avoid this block to be seen undernece the original email form block*/
#mail_container_responsive {
	display:none;
	width:90%;
	margin:1% auto;
}

#booking_form {width: 100%;}

.red {color:#ED1C24;}

#booking_request {
  border: 3px groove #ccc;
  padding: 2%;
  width: 92%;
}

/* wb, 15Jun2018: due to DSGVO in Europe */
#user-consent {
	/* display: inline-block; */
	float: left;
}
#user-consent-label {
	width: 80%;
	margin-bottom: 1%;
	font-size: 0.8rem;
	display: inline-block;
	float: left;
}

legend {
  margin: 0 2%;
  padding: 0 1%;
  width: auto;
}

/*
#personal, #general {
  float: left;
  min-height: 200px;
  padding-bottom: 0;
  width: 45%;
}
*/

#personal, #general {
	float: left;
	min-height: 200px;
	padding-bottom: 0%;
	width: 45%;
	margin-left: 1%;
	margin-bottom: 2%;
}

#general {margin-left: 3%;}

#message, #preferences {
  border: medium none;
  /*float: left;*/
  margin-top: 0;
  padding-bottom: 0.5%;
  padding-top: 0;
  width: 100%;
}

/* wb,24Jul2016 #message{margin-left: 10%;}*/

#send-request {
  float: left;
  height: 2em;
  line-height: 0;
  margin-right: 80%;
  width: 15%;
}

label {
  display: inline-block;
  /* wb,24Jul2016 float: left;*/
  width: 8em;
}

/* wb,24Jul2016 #preftxt, msgtxt{width:100%;}*/
#preftxt{width:100%;}

input.reqinput{width:95%; font-size:0.8rem;}

/* label for textarea preferences */
label#area {width:100%;}

textarea#prefs, textarea#msg  {
  position: relative;
  top: 5%;
  width: 98%;
  font-size:0.8rem;
  font-weight:bold;
}

#content{clear:both;}

/* wb, 09Jun2016: As of now it is not clear why this was defined here */
input[type=checkbox] { clear:both;width :20px; margin-right:10px; }
.terms { display:none; }

/* ***************************** RESPONSIV BOOKING FORM (WILL SWITCH OFF THE NORMAL BOOK******************************* */
/*wb, 24Jul: #div_booking_form{width:100%;}*/
#div_booking_form {
  width: 95%;
  /*border: 2px solid grey;*/
  padding: 2%;
  /*height: 885px;*/
}

/*legend{padding: 1%;width:auto;}*/

#div_personal, #div_general {float: left;width: 100%;}

#div_send-request {
  float: left;
  height: 2em;
  line-height: 0;
  margin-right: 80%;
  width: 15%;
  margin-bottom:5%;
}

input.reqinput{width:95%}

/* label for textarea preferences */
#div_area {width:100%;}

#div_content{
clear:both;
}

/* wb, 09Jun2016: As of now it is not clear why this was defined here */
input[type=checkbox] { width :20px; margin-right:10px; }
.terms { display:none; }
/* ***************************** E N D  S M A L L  B O O K I N G  F O R M  *************************** */


/*@media only screen and (max-width: 1000px) and (Orientation: landscape)*/
@media only screen and (min-width: 600px) and (max-width: 1000px)
{
#info{color:green;}

/* ****** H E A D E R  I N  T H E  I N D E X.P H P  F I L E  ************************ */
.img-header { max-width: 100px;}
	
/* rules for start page (index.html) */
.sel-lang {width: 75%;}
		
#txt-sub-header-index{
	font-size: 1.2rem;
	line-height: 1.5rem;
	margin-top: 1%;
}

/* ****** E N D  H E A D E R  I N  T H E  I N D E X.P H P  F I L E  E N D E **************** */

/* ****** H E A D E R  F O R  A L L  P A G E S   **************** */

/* *** Header in php-files *** */
#div_casatxt{font-size: 1.2em;}
.span-capital {font-size: 1.8rem;}

/* *** Menue *** */
/* for screens more than 641px the div-menu and the block-layout is not to be shown */
nav#casa-menu-div{display:none;}
#table-layout-header {display:block;}

#menu-txt{display:inline-block;}
nav#casa-menu-ul{display:block;}
#label-check-input{display: inline-block;}
ul#navul_menu{display:block;}
#navul-container{display:block;}

/* ******************************* S T A R T  R E S P O N S I V E  M E N U  ************************************** */
/* ~ => is valid for the next div under input ("~" ==>> sibling selector) */
/* responsive menu is not to bee seen when page is called => height = 0 */
input.cbtoggle ~ ul#navul_menu li 
{
  height: 0; 
  /*background: none repeat scroll 0 0 rgba(0, 0, 0, 0);*/
  margin: 0.2rem;
  overflow: hidden;
  transition: all 2s linear -0.5s;
  border:0;
}

input.cbtoggle:checked ~ ul#navul_menu li{
  display: block;
  height: 40px;
  margin: 0;
  border:1px solid rgb(0,0,255);
}

/* 
(max-width: 1000px) and (Orientation: landscape)
bar for the hamburger of the responsive menu 
acts as basis for the three lines which are build as borders of this main bar */
.nav-link {
  height: 0.2em;
  padding: 1em 1.1em;
  position: relative;
}

/* pseudo class to realize the borders which will be the three lines for the hamburger icon */
.nav-link::before {
  border-bottom: 0.57em double blue;
  border-top: 0.2em solid blue;
  content: "";
  height: 0.2em;
  left: 15%;
  /*margin-left: 5%;*/
  position: absolute;
  top: 20%;
  width: 70%;
}


/* pseudo class to realize the borders which will be the three lines for the hamburger icon 
.nav-link::before {
  border-bottom: 0.6rem double blue;
  border-top: 0.2rem single  blue;
  content: "";
  height: 0.2em;
  left: 0;
  margin: 0 17%;25%;
  position: absolute;
  top: 0.3em;
  width: 50%;
}

.nav-link {
  /*display: table;*/
/*  
  height: 0.2em;
  padding: 1rem 1.1rem;
  position: relative;
}
*/

/*
.nav-link2 {

  height: 0.2em;
  padding: 1rem 1.1rem;
  position: relative;
}

/* pseudo class to realize the borders which will be the three lines for the hamburger icon 
.nav-link2::before {
  border-bottom: 0.2rem solid blue;
  /*border-top: 0.2rem double blue;
  content: "";
  height: 0.2em;
  left: 0;
  margin: 0 17%;25%;
  position: absolute;
  top: 0.3em;
  width: 50%;
}
*/

/* ******************************* E N D  R E S P O N S I V E  M E N U  ************************************** */

/* ****************************** E N D E  H E A D E R  F O R  A L L  P A G E S ****************************** */
	
/* T E X T  O F  W E L C O M E  P A G E S ********************************** */	
.tables-welcome {width:98%;}

/*.td-txt {font-size:1.1rem;}*/
.td-width-txt{width:50%;}
.td-img{width: 40%;}

/* tables for the rates */
.td-txt{font-size:1rem;}
.td-houserates{font-size:0.8rem; line-height: 1.2rem;}
.td-footer{font-size: 0.7rem !important;}

/* wb, 22 Apr 2016: smaller font for communications */
.td-width-mail{width: 27%;font-size:1.0rem!important;}
.td-width-cell{width: 45%;font-size:1.0rem!important;}
.td-width-phone{width: 21%;font-size:1.0rem!important;}
		
/* *** rule for the image with house map *** */
input.cbtoggle-house-map:checked ~ #effect { width:90%;}

.img-scaled-big{width:95%;}

/* *** text for booking information *** */
#buchung {font-size: 1.0rem;}

/* *************** P H O T O S H O W ************************************ */
.modal-content {width: 85%;}
div.desc {font-size: 0.9rem;}

/* *************** F L I C K R ****************************************** */
#click-hint {font-size: 1.2rem;}
.style3 {font-size: 0.9rem;}

/* *************** B I K E S  ******************************************* */ 
#bike_img {width: 100%;}
#bike_txt {width: 100%;}

/* ****************** L I N K S ********************************************** */
#table-links{display:none;}
#links-responsive{display:block;}

/* *************** B O O K I N G  R E Q U E S T ************************* */
input.reqinput {font-size:1.2rem;height: 30px;width: 95%;}
textarea#prefs, textarea#msg {font-size:1.2rem}

#preferences, #messages{
	margin-left: 0;
	padding-left: 0;
}
}
/*
@media only screen and (max-width: 1000px) and (Orientation: portrait)
/*@media only screen and (max-width: 1000px)*\
{
#info{color:red;}

/* ****** H E A D E R  I N  T H E  I N D E X.P H P  F I L E  ************************ *\
.img-header { max-width: 100px;}
	
/* rules for start page (index.html) *\
.sel-lang {
  margin: 4% auto;
  width: 50%;
}
#txt-sub-header-index 
{
	font-size: 1.2rem;
	line-height: 1.5rem;
	margin-top: 1%;
}
	
.span-capital-index{font-size: 1.8rem;}

/* ****** E N D  H E A D E R  I N  T H E  I N D E X.P H P  F I L E  E N D E **************** */

/* ****** H E A D E R  F O R  A L L  P A G E S                       **************** *\
#div_casatxt {font-size: 1.2em;}
.span-capital {font-size: 1.4rem;}


/* *** Menue *** *\
	nav#casa-menu-div{display:none;}
	#block-layout{display:none;}
	#table-layout-header {display:block;}
	
	#menu-txt{display:inline-block;}
	nav#casa-menu-ul{display:block;}
	#label-check-input {display: inline-block;}
	ul#navul_menu{display:block;}
	#navul-container {display:block;}
  
/* ******************************* S T A R T  R E S P O N S I V E  M E N U  ************************************** */	
	/*wb, 04 Apr 2016 ~ => is valid for the next div under input ("~" ==>> sibling selector) *\
    input.cbtoggle ~ ul#navul_menu li 
	{
	  height: 0; 
	  /*background: none repeat scroll 0 0 rgba(0, 0, 0, 0);*\
	  margin: 0.2rem;
	  overflow: hidden;
	  transition: all 2s linear -0.5s;
	  border:0;
	}
	
	input.cbtoggle:checked ~ ul#navul_menu li {
	  display: block;
	  height: 40px;
	  margin: 0;
	  border:1px solid rgb(0,0,255);
	}
	
.nav-link {
  height: 0.2em;
  margin: 0 auto;
  position: relative;
  width: 90%;
}

/* pseudo class to realize the borders which will be the three lines for the hamburger icon *\
.nav-link::before {
  border-bottom: 0.57em double blue;
  border-top: 0.2em solid blue;
  content: "";
  height: 0.2em;
  left: 0;
  margin-left: 5%;
  position: absolute;
  top: 230%;
  width: 90%;
}
	

/* ******************************* E N D  R E S P O N S I V E  M E N U  ************************************** */	
	
/* ******************************* T E X T  O F  W E L C O M E  P A G E S ************************************ *\	
	.tables-welcome {margin-top: 4%;width: 90%;}
		
	.td-txt {font-size: 1.1rem;}
	.td-width-txt{width:40%;}
	.td-img {width: 30%;}

	/* table for the rates *\
	.tables-welcome-rates{margin-top: 1%;width: 87%;}
	.td-houserates{font-size: 0.7rem !important;line-height: 1.4rem;}
	.td-footer {font-size: 0.6rem !important;}
	
	/* wb, 22 Apr 2016: smaller font for communications *\
	.td-width-mail{width: 27%;font-size:1.0rem!important;}
	.td-width-cell{width: 45%;font-size:1.0rem!important;}
	.td-width-phone{width: 21%;font-size:1.0rem!important;}

	.img-scaled-big{width:95%;}
	
	/* *** text for booking information *** *\
	#buchung {font-size: 1.0rem;}
	
	/* *** rule for the image with house map *** *\
	input.cbtoggle-house-map:checked ~ #effect { width:80%;}



/* ******************** P O T O S H O W ************************************** *\
.modal-content {width: 85%;}
div.desc {font-size: 0.8rem;}

/* *************** F L I C K R ************************************ *\
#click-hint {font-size: 1.2rem;}
.style3 {font-size: 0.9rem;}

/* *************** B I K E S  ******************************************* *\
#bike_img {width: 100%;}
#bike_txt {width: 100%;}

/* ****************** L I N K S ********************************************** *\
#table-links{display:none;}
#links-responsive{display:block;}

/* *************** B O O K I N G  R E Q U E S T ************************* *\
input.reqinput {font-size:1.2rem;height: 30px;width: 95%;}
textarea#prefs, textarea#msg {font-size:1.2rem}
}
*/

/* *********************************************************************** */
/* max-width 640px, mobile-only styles, use when QAing mobile issues *\ 
@media only screen and (max-width: 640px) and (orientation:landscape)*/
@media only screen and (max-width: 600px)
{
#info{color:blueviolet;}
/* ****** H E A D E R  F O R  A L L  P A G E S   **************** */

#iframe{
	width:100%;
	height:auto;
}


#casa-logo-640{
	float:left;
	width:20%;
}
	
#casa-txt-640{
	float:left;
	width:60%;
}

/*wb, 04Aug2016
#accu-weather {
  float: right;
  font-size: 0.8rem;
}
	
#weather-txt{
	float:left;
	width:20%;
	margin-left:0%
}

#weather-txt-sticker{
	display: block !important; 
	/*width: 100px; *\
	text-align: center; 
	font-family: sans-serif; 
	font-size: 10px;"
}
*/

	/* image header with casa text */
	#casa-img {width: 100%;}

	#div_casatxt {font-size: 1.0rem;line-height:0.5rem;}
	.span-capital {font-size: 1.8rem;}
	#table-layout-content{display:none;}
	#div-layout-content{display:block;width:90%;height:auto;margin:0 auto;}
	
	/* Menu */
	#table-layout-header{display:none;}
	#table-layout-header-640 {display: block;}
	
	#block-layout{display:block;}
	#image-weather-sticker {width: 70%;}
	
	/* Content */
	.div-txt {line-height: 1.5rem;margin-bottom: 2%;padding: 0 2%;width: 90%;}
	.tables-welcome-rates{width:100%;}
	.td-houserates{font-size:0.9rem;border-bottom:1px solid blue;}
	
	#label-toggle-house-map-show, #label-toggle-house-map-hide {line-height: 1.8rem;left:6%;}
	/* for the blockl-layout  
	input.cbtoggle-house-map:checked ~ #effect {width:90%;padding: 0rem;}
	*/
	
	.div-img{width:100%; margin-bottom:4%;}
	.img-scaled-big {float: left;width: 50%;}
	

	/* *** C O M M U N I C A T I O N  *** */
	#communication-div{width:98%; margin-top:3%;}
	
/* ****** H E A D E R  I N  T H E  I N D E X.P H P  F I L E  ************************ */

/* ********************** wb, 11Jun2018 START PAGE  **************************************** */


/*
#lang-container {margin: 10% auto;}
.sel-lang {
	margin: 5% auto 7%;
}
	
#txt-sub-header-index {
	font-size: 1.5rem;
	line-height: 2rem;
	color: yellow;
}
*/
	
/* rules for start page (index.html) */

/*wb, 18Jan2020: wg. drohnen video */
.sel-lang {
	width: 75%;
	font-size: 1.5rem;
	padding-top: 1%;
	margin-top: 3%;
	margin-bottom: 3%;
}
	
#txt-sub-header-index {
  font-size: 1.5rem;
  line-height: 2rem;
  margin-bottom: 2%;
  margin-top: 3%;
}

/* wb, 18Jan2020: wg. Drohnen Video */
.pdrohne {
	margin: 5% auto;
}

	
/* ****** H E A D E R  I N  T H E  I N D E X.P H P  F I L E  E N D E **************** */

/* *** Menue *** */
	nav#casa-menu-div{display:none;}
	#menu-txt{display:inline-block;}
	nav#casa-menu-ul{display:block;}
	#label-check-input {display: inline-block;}
	ul#navul_menu{display:block;}
	#navul-container {display:block;}

/* ******************************* S T A R T  R E S P O N S I V E  M E N U  ************************************** */	
	/* ~ => is valid for the next div under input ("~" ==>> sibling selector) */
  input.cbtoggle ~ ul#navul_menu li 
	{
	  height: 0; 
	  /*background: none repeat scroll 0 0 rgba(0, 0, 0, 0);*/
	  margin: 0.2rem;
	  overflow: hidden;
	  transition: all 2s linear -0.5s;
	  border:0;
	}
	
	input.cbtoggle:checked ~ ul#navul_menu li {
	  display: block;
	  height: 40px;
	  margin: 0;
	  border:1px solid rgb(0,0,255);
	}	
	
	/* bar for the hamburger of the responsive menu 
	acts as basis for the three lines which are build as borders of this main bar */
	
	.nav-link {
	  display: inline-block;
	  height: 0.5em;
	  padding-left: 1.25em;
	  position: relative;
	}
	
	/* pseudo class to realize the borders which will be the three lines for the hamburger icon */
.nav-link::before {
	border-bottom: 0.6em double blue;
	border-top: 0.2em solid blue;
	content: "";

	height: 0.2em;
	left: 3%;
	margin-left: 10%;
	position: absolute;
	top: 0%;
	width: 70%;
	margin-top: -10%;
	/* margin: 10% auto; */
	margin-bottom: 5%;
}

	
/* ******************************* E N D  R E S P O N S I V E  M E N U  ************************************** */
/* *******************************  F L I C K R  ************************************************************* */
#click-hint {font-size: 1.0rem;}
.style3 {font-size: 0.8rem;}


/*video600landscape*/
/* *************** V I D E O S ************************* */
/*#video-headline-source, #video-headline-content {font-size: 1.5rem;}*/
#video-source, #video-content-txt {font-size: 1.2rem;width: 100%;}

/* *************** B I K E S  ******************************************* */ 
#bike_img {width: 100%;}
#bike_txt {width: 100%;}

/* ****************** L I N K S ********************************************** */
#table-links{display:none;}
#links-responsive{display:block;}


/* *************** B O O K I N G  R E Q U E S T ************************* */
#mail_container_big {display: block;}
/* wb, 07Sep2016: Display none to avoid this block to be seen undernece the original email form block*/
#mail_container_responsive {display: none;}

input.reqinput{width:95%;height: 30px;}
#personal, #general {width: 100%;}
#general {margin-left: 0;}

/*wb, 24Jul */
#div_send-request{width:auto;} 
textarea#prefs, textarea#msg {font-size:1.2rem}

}

/* max-width 640px, mobile-only styles, use when QAing mobile issues *\ 
@media only screen and (max-width: 640px) and (orientation:portrait)
{
#table-layout-header{display:none}
#table-layout-header-640 {display: block;}
#block-layout{display:block; margin-top: 10%;}
	
tb-header-640{width:100%;}
		
#info{color:gold;}
	
#casa-logo-640{float:left;width:20%;}
	
#casa-txt-640 {
  float: left;
  margin-left: 5%;
  width: 60%;
}

/*wb, 04Aug2016*\
#accu-weather {float: right;font-size: 0.8rem;}
#weather-txt{float:left;width:20%;margin-left:0%}
#weather-txt-sticker{
	display: block !important; 
	/*width: 100px; *\	text-align: center; 
	font-family: sans-serif; 
	font-size: 0.4rem;
}

/* image header with casa text *\
#casa-img {width: 100%;}
	
#table-layout-content{display:none;}
#div-layout-content{display:block;width:100%}

/* ********************** START PAGE  **************************************** *\
#casa-pano-img {margin-top: 2%; margin-bottom: 5%;}

#lang-container {margin: 10% auto;}
.sel-lang {
	margin: 5% auto 7%;
}
	
#txt-sub-header-index {
	font-size: 1.5rem;
	line-height: 2rem;
}

/* *** Menue *** *\
	nav#casa-menu-div{display:none;}
	#menu-txt{display:inline-block;}
	nav#casa-menu-ul{display:block;}
	#label-check-input {display: inline-block;}
	ul#navul_menu{display:block;}
	#navul-container {display:block;}
	
	/* bar for the hamburger of the responsive menu 
	acts as basis for the three lines which are build as borders of this main bar *\
	
	.nav-link {
	  display: inline-block;
	  height: 0.5em;
	  padding-left: 1.25em;
	  position: relative;
	}
	
	/* pseudo class to realize the borders which will be the three lines for the hamburger icon *\
.nav-link::before {
	border-bottom: 0.6em double blue;
	border-top: 0.2em solid blue;
	content: "";

	height: 0.2em;
	left: 3%;
	margin-left: 10%;
	position: absolute;
	top: 0%;
	width: 70%;
	margin-top: -10%;
	/* margin: 10% auto; *\
	margin-bottom: 5%;
}



/* ****** H E A D E R  F O R  A L L  P A G E S   **************** *\
#div_casatxt {font-size: 1rem;}
.span-capital {font-size: 1.4rem;}
#label-check-input {width: 7%;}
#image-weather-sticker {width: 70%;}
	
/* ******************************* S T A R T  R E S P O N S I V E  M E N U  ************************************** */	
	/*wb, 04 Apr 2016 ~ => is valid for the next div under input ("~" ==>> sibling selector) *\
    input.cbtoggle ~ ul#navul_menu li 
	{
	  height: 0; 
	  /*background: none repeat scroll 0 0 rgba(0, 0, 0, 0);*\
	  margin: 0.2rem;
	  overflow: hidden;
	  transition: all 2s linear -0.5s;
	  border:0;
	}
	
	input.cbtoggle:checked ~ ul#navul_menu li {
	  display: block;
	  height: 40px;
	  margin: 0;
	  border:1px solid rgb(0,0,255);
	}	
	
	.div-img{width:100%; margin-bottom:4%;}
	.img-scaled-big {width: 48%;}
	
/* ******************************* E N D  R E S P O N S I V E  M E N U  ************************************** */
	
/* ************************************** HOUSE MAP ************************************************** *\	
	#label-toggle-house-map-show, #label-toggle-house-map-hide {line-height: 1.8rem; left: 6%;}

/* *** Content *** *\
	.div-txt {line-height: 1.5rem;margin-bottom: 2%;padding: 0 2%;width: 90%;}
	/* table with rates *\
	.tables-welcome-rates{width:100%;}
	.td-houserates {font-size: 0.7rem;line-height: 1.2;}
	#buchung {font-size: 0.9rem;}

	/* *** C O M M U N I C A T I O N  *** *\
	#communication-div{width:90%; margin-top:3%;}
	.td-footer-communications {font-size: 0.7rem !important;}
	
/* *******************************  F L I C K R  ************************************************************* *\
#click-hint {font-size: 1.3rem;}
.style3 {font-size: 0.8rem;}

/*videos600potrait*/
/* *************** V I D E O S ************************* *\
#video-source, #video-content-txt {font-size: 1.0rem;margin: 2%;width: 100%;}
#video-content{width:99%;}
#video-headline-source, #video-headline-content {margin:0;}
#video-object {margin-top: 5%;width: 100%;}

.link-value {font-size: 0.7rem;}

object{width:20%;}

/* *************** B I K E S  ******************************************* *\ 
#bike_img {width: 100%;}
#bike_txt {width: 100%;}

/* ****************** L I N K S ********************************************** *\
#table-links{display:none;}
#links-responsive{display:block;}
	
/* *************** B O O K I N G  R E Q U E S T ************************* *\
#mail_container_big {display: block;}
/* wb, 07Sep2016: Display none to avoid this block to be seen undernece the original email form block*\
#mail_container_responsive {display: none;}

legend {font-size:1.2rem;}
input.reqinput{width:95%;height: 30px;}

#personal, #general {width: 100%;}
#general {margin-left: 0;}

/*wb, 08Aug2016 , wb, 09Aug2016 coz no more small container 
#div_send-request {height: 3em;margin-top: 5%;width:auto;font-size:1.5rem;}
*/
/* wb, 09Aug2016*\
#send-request {height: 3em;width: 40%;}
textarea#prefs, textarea#msg {font-size:1.2rem}


}