/* Default CSS */
/*Serendipity Homestay */
/*logo #ff9a57 light gold */
/*redgold h1 #df3218 */
/*gold #cc5f1e background menu*/
/*lightgold #ff9a57 background menu hover mouseover*/

body.home 
     {background-image: url(../background/leather.jpg);
	   background-repeat: repeat;
	   background-attachment: fixed;
		 /*background-color: #ff9a57;*/
     overflow:auto;
     font-size: 12px;
	   font-family: arial;
	   padding: 0px 0px 0px 0px;
	   color: #ff0000;
	   text-align: left;
	   margin: 0;}
.bnblogo
     {max-width: 95px;
		 width: 100%;
		 float: left;
		 text-align: right;}
.bnbwords
     {float: left;
		 font-size: 10px;
	   font-family: arial;
	   padding: 4px 0px 0px 5px;
	   color: #000000;
	   text-align: left;}
.bodycopy
     {float: left;
     width: 70%;
     padding: 20px 2.5% 0 0px;
		 margin: 0 0 0 15%;
     font-size: 10pt;
	   font-family: arial;
	   color: #000000;
     text-align: left; }
.bodycopy2
     {float: left;
     width: 70%;
     padding: 20px 2.5% 0 0px;
		 margin: 0 0 0 15%;
     font-size: 10pt;
	   font-family: arial;
	   color: #000000;
     text-align: left; }
.bodycopyleft
     {float: left;
     width: 30%;
     padding: 20px 2.5% 0 0px;
		 margin: 0 0 0 15%;
     font-size: 10pt;
	   font-family: arial;
	   color: #000000;
     text-align: left; }
.bodycopylefttop
     {float: left;
     width: 30%;
     padding: 0px 2.5% 0 0px;
		 margin: 0 0 0 15%;
     font-size: 10pt;
	   font-family: arial;
	   color: #000000;
     text-align: left; }
.bodycopyright
     {float: left;
     width: 34%;
		 font-size: 10pt;
	   font-family: arial;
	   color: #000000;
     padding: 20px 0 0 2.5%;
		 margin: 0 15% 0 0;
     text-align: left;}
.bodycopyrighttop
     {float: left;
     width: 34%;
		 font-size: 10pt;
	   font-family: arial;
	   color: #000000;
     padding: 0px 0 0 2.5%;
		 margin: 0 15% 0 0;
     text-align: left;}
.bodyone{
		 float: left;
     width: 20%;
     padding: 0px 4% 0 0px;
		 margin: 20px 0 0 15%;
     font-size: 10pt;
	   font-family: arial;
	   color: #000000;
     text-align: left; 
     }
.bodytwo{
		 float: left;
     width: 20%;
     padding: 0px 4% 0 0px;
		 margin: 20px 0 0 0;
     font-size: 10pt;
	   font-family: arial;
	   color: #000000;
     text-align: left; 
     }
.bodythree{
		 float: left;
     width: 20%;
     padding: 0px 2.5% 0 0px;
		 margin: 20px 0 0 0;
     font-size: 10pt;
	   font-family: arial;
	   color: #000000;
     text-align: left; 
     }
.bookingform
     {float: left;
     max-width:675px;
     width: 100%;
     padding: 20px 0 0 0px;
     font-size: 9pt;
	   font-family: arial;
	   color: #424242;
     text-align: left;
      }
.bookings
     {float: left;
     width: 90%;
		 height: 300px;
     padding: 20px 0 0 0;
		 margin: 0 0 0 5%;
     font-size: 10pt;
	   font-family: arial;
	   color: #000000;
     text-align: left; }
.bookings2
     {float: left;
     width: 90%;
     padding: 20px 0 0 0;
		 margin: 0 0 0 5%;
     font-size: 10pt;
	   font-family: arial;
	   color: #000000;
     text-align: left; }			 
.containerbig
     {display: block;}
.containersmall
     {display: none;}
.footer
     {float: left;
     width: 70%;
     padding: 20px 2.5% 0 0px;
		 margin: 0 0 0 15%;
     font-size: xx-small;
	   font-family: arial;
	   color: #000000;
     text-align: left; }
.logocontainer
     {float: left;
		 width:30%;
		 height: 145px;
		 padding: 3px 0 0 0;
		 margin: 0px 0 0 10%;
		 text-align: left;}
.menu
     {float: left;
		 width: 47%;
		 padding: 0 0 0 20px;
		 margin: 80px 0 0px 30px;
		 text-align: left;}
.photoslider
     {
		 border-radius: 35px 35px 0 0px;}
.tripadv
     {float: left;
		 width: 100%;}
		 
#wrapper
     {margin: 0 auto;
     max-width: 1000px;
     width: 100%;
		 margin-top:10px;
		 margin-bottom: 10px;
     background-color: #ffffff;
     text-align: center;
		 border-radius: 30px 30px 35px 35px;
		 border: 4px solid #ffffff;}
figure.one
     {display: block;
		 float: left;
		 padding: 20px 2.5% 0 0px;
		 margin: 0 0 0 15%;
		 width: 20%;}
figure.two
     {display: block;
		 float: left;
		 padding: 20px 2.5% 0 0px;
		 margin: 0 0 0 15px;
		 width: 20%;}
figcaption { 
     display: block;
		 font-family: arial;
	   color: #424242;}
font.script
     {font-family: 'Rock Salt', cursive;}
h1   {color: #df3218;
     margin: 0 0 0 0;}
h1.index   
     {color: #df3218;
     margin: 0 0 10px 0;}
h2   {color: #424242;
     padding: 0 0 0 0;
     margin: 7px 0 3px 0;}
h2.red   {
     color: #df3218;
		 font-style: italic;
     padding: 0 0 0 0;
     margin: 0px 0 3px 0;}
h4   {color: #424242;
     padding: 0 0 0 0;
     margin: 0 0 0 0;}
hr
	   {color: #969696;
	   background-color: #969696;
	   width: 70%;
	   border: 0;
	   height: 1px;
	   text-align: center;}
img  {border-radius: 25px 25px 0 0px;
     max-width:100%;
		 width: 100%;}
img.bnb
     {width: 92px;}
img.logo
     {max-width:100%; 
		 max-height:100%;
		 margin:auto;
		 display:block;}
img.one
     {max-width:100%; 
		 max-height:100%;
		 margin:auto;
		 display:block;
		 border-radius: 0 35px 0 0px;
	   box-shadow: 5px 5px 5px #b2b2b2;}
img.two
     {max-width:282px; 
		 max-height:100%;
		 margin:auto;
		 display:block;
		 border-radius: 0 35px 0 35px;
	   box-shadow: 5px 5px 5px #b2b2b2;}
img.third
     {max-width:100%; 
		 max-height:100%;
		 margin:auto;
		 display:block;
		 border-radius: 0 15px 0 15px;
	   box-shadow: 5px 5px 5px #b2b2b2;}
input.contact
     {margin: 3px 0 2px 0;}
/* ------------- start form CSS  -------------------------------------------------------------*/     
div#envelope
    {width: 45%;
    margin: 10px 30% 10px 25%;
    padding:10px 0;
    border: 2px solid gray;
    border-radius:10px;
    }
form
    {width:60%;
    margin:4% 15%;
    }
/* Makes responsive fields. Sets size and field alignment.*/
label
    {background-color: #ff9a57;
    color: #000000;
    font-weight: bold;
    padding: 2px;
    height: 10px;
    border-radius:5px;
    border: 1px solid #424242; }
input[type=text], input[type=email], input[type=tel]
    {margin-bottom: 10px; /* space between input cells */
    margin-top: 5px;/* space between input cells */
    width:100%;
    padding: 5px;
    border-radius:5px;
    border:1px solid #424242;
    }
input[type=submit]
    {margin-bottom: 20px;
    width:30%;
    padding: 5px;
		margin: 0 30px 0 0;
    border-radius:5px;
    border:1px solid #424242;
    background-color: #df3218 ;
    font-size:15px;
    cursor:pointer;
    }
#submit:hover
    {background-color: black;}
textarea
    {width:96%;
    padding: 15px;
    margin-top: 10px;
    border:1px solid #424242;
    border-radius:5px;
    margin-bottom: 20px;
    resize:none;
    }
input[type=text]:focus,textarea:focus 
    {border-color: #4697e4;
    }
input[type=email]:focus,textarea:focus 
    {border-color: #4697e4;}
input[type=tel]:focus,textarea:focus 
    {border-color: #4697e4;}
select
    {margin-bottom: 00px; /* space between input cells */
    margin-top: 0px;/* space between input cells */
    padding: 5px;
    border-radius:5px;
    border:1px solid #424242;
    }
/* ------------- end form CSS  ---------------------------*/ 
/* Media queries
----------------------------------------------------------------*/
/* ipads (portrait and landscape) ------------ */
@media only screen and (max-width: 1024px){

}/* end ipad */
/* -------------------------------------------------------------*/			
/* large screen mobiles */
@media only screen and (max-width: 769px){		 
.bodycopyleft
     {width: 30%;
     padding: 20px 2.5% 0 0px;
		 margin: 0 0 0 0%;}
.bodycopyright
     {float: left;
     width: 52%;
		 font-size: 10pt;
	   font-family: arial;
	   color: #000000;
     padding: 20px 0 0 2.5%;
		 margin: 0 0% 0 0;
     text-align: left;}
.logocontainer
     {margin: 0px 0 0 2%;}
.menu
     {width: 60%;
		 padding: 0 0 0 20px;
		 margin: 55px 0 0px 5px;
		 text-align: left;}
#wrapper
     {width: 95%;}		 
}/*end large screen mobiles */
/* -------------------------------------------------------------*/	
/* iphones and other mobiles */
@media only screen and (max-width: 600px){
.bodycopy
     {padding: 20px 2.5% 0 2.5%;
		 margin: 0 0 0 0px; }
.bodycopy2
     {float: left;
     width: 95%;
     padding: 20px 2.5% 0 2.5%;
		 margin: 0 0 0 0; }
.bodycopyleft
     {width: 75%;
		 text-align: center;}
.bodycopylefttop
     {width: 43%;
     padding: 0px 2.5% 0 2.5%;
		 margin: 0 0 0 0; }
.bodycopyright
     {width: 95%;
     padding: 6px 0 0 2.5%;}
.bodycopyrighttop
     {width: 45%;
     padding: 0px 2.5% 0 2.5%;
		 margin: 0 0 0 0;}
.bodyone{
		 width: 29%;
     padding: 0px 4% 0 2.5%;
		 margin: 20px 0 0 0;}
.bodytwo{
		 width: 29%;
     padding: 0px 4% 0 0px;
		 margin: 20px 0 0 0;}
.bodythree{
		 width: 29%;
     padding: 0px 2.5% 0 0px;
		 margin: 20px 0 0 0;}	
.containerbig
     {display: none;}
.containersmall
     {display: block;}
.footer
     {width: 90%;
		 padding: 20px 2.5% 0 2.5%;
		 margin: 0 0 0 0px; }
figure.one
     {padding: 20px 4% 0 2.5%;
		 margin: 0 0 0 0;
		 width: 28%;}
figure.two
     {padding: 20px 4% 0 0px;
		 margin: 0 0 0 0;
		 width: 28%;}
img  {width: 90%;
     text-align: left;}
.logocontainer
     {height: 80px;
		 width:40%;
		 margin: 0px 0 0 2%;}
.menu
     {float: right;
		 width: 48%;
		 padding: 0 20px 0 0px;
		 margin: 15px 0 0px 0px;}
}/*end iphones and other mobiles */
/* -------------------------------------------------------------*/	
/* small mobiles */
@media only screen and (max-width: 480px){
.bodyone{
		 width: 90%;}
.bodytwo{
		 width: 90%;
		 padding: 0px 4% 0 2.5%;}
.bodythree{
		 width: 90%;
     padding: 0px 4% 0 2.5%;}
figure.one
     {padding: 20px 2.5% 0 0px;
		 margin: 0 0 0 2.5%;
		 width: 72%;}
figure.two
     {padding: 20px 2.5% 0 0px;
		 margin: 0 0 0 2.5%;
		 width: 72%;}
}/*end small mobiles */