html { margin: 0px;
   height: 100%;
   width: 100%;
  }

 
 
 
 
 
body {  
max-width: 1000px;
  font-size:87.5%;
   margin: 0 auto;
   min-height: 100%;
   width: 100%;
   font-family:Verdana, Geneva, sans-serif;
  color: #333;
  line-height:1.5;
}

p {
	font-family: Verdana, Geneva, sans-serif;
	color: #333;
  }


ul {
    list-style: square inside url("../images/illus/blue-dot.jpg");
}

h1 {
	text-align:center;
  color:#006;
  font-family:Tahoma, Geneva, sans-serif;
}

h2 {
  color:#666;
  font-family:Tahoma, Geneva, sans-serif;
}


h3 {
  color:#FFF;
  font-family:Tahoma, Geneva, sans-serif;
  font-size:32px;
}

.head1 {
    text-align: center;
    color: white;
	font-size:36px;
	font-family:Tahoma, Geneva, sans-serif
}


img{
	
max-width:100%;
border-style:none;
}

img.top {
    vertical-align: text-top;
}


/* STRUCTURE */

#pagewrap {
	
	width: 100%;
	
	}

	
	


a:link, a:visited {
	color: #000066;
}
a:hover, a:active{
	color: #FFF;
	background-color: #000000;
}
	


.fixed {
	display:none;
position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #d0cbcb;
  padding:5px 0 0 0;
   border-bottom: 2px solid #7a7979;

}

#spacer1 {
	display:none;
	height:47px;
	float: left;
	
	
}





#left-sidebar {
	
	width: 22%;
	float: left;
	padding: 5px 10px;
	margin: 18px auto 0 0;
}

#butlerstours {
	
	width: 70%;
	float: left;
	padding: 5px 15px;
	margin: 18px 15% 0 15%;
border: 2px solid gray;
	color:#FFF;
	background: #FFF;
		border-radius: 10px;
   -moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

#butlerstours a:link
{
color:#fffff;
 text-decoration: none;
}

#butlerstours a:hover, a:active{
	color:#F00;
	background-color:#FFF;
}

#content {
	width: 62%;
	float: left;
	padding: 0px 0px 0px 10px;
	margin: 18px auto;
}

#sidebar {
	margin: 18px 0px 10px 0px;
	width: 16%;
	float:left;
		
}

footer {
	Padding: 10px 0 10px 0;
	clear: both;
		width: 40%;
		margin:0 auto;
		float: none;}
		


/* Form controls*/

* {
/* With these codes padding and border does not increase it's width and gives intuitive style.*/

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}


form{
width:96%;

}

/* Makes responsive fields. Sets size and field alignment.*/
input[type=text]{

margin-top: 5px;

padding: 5px;
border-radius:5px;
border:1px solid #7ac9b7;
}
input[type=email]{

margin-top: 5px;
width:100%;
padding: 5px;
border-radius:5px;
border:1px solid #7ac9b7;
}
input[type=submit]
{

width:100%;
padding: 5px;
border-radius:5px;
border:1px solid #7ac9b7;
background-color: #4180C5;
color: aliceblue;
font-size:15px;
cursor:pointer;
margin-top: 5px;
}
#submit:hover
{
background-color: black;

}

select {
	padding: 5px;
margin-top: 5px;
border-radius:5px;
border:1px solid #7ac9b7;

}



textarea{

padding: 5px;
margin-top: 5px;
border:1px solid #7ac9b7;
border-radius:5px;

resize:none;
}
input[type=text]:focus,textarea:focus {
border-color: #4697e4;
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/

@media screen and (max-width: 1224px) {





	footer {
		width: 60%;
		}
	
}





@media screen and (max-width: 980px) {
	
		
	#content {
		clear:both;
		width: 65%;
		margin: 0 auto;
		float: none;
		padding: 18px 0px;
		margin-bottom:5px;
		
	}
	
				.fixed {
	display:inline;}
	
#mobile-menu {
	display:none;
}
	

	#left-sidebar {
	display:none;
	
}

		
		 label {  
  cursor: pointer;
}
#menu-toggle {
  display: none; /* hide the checkbox */
}
#menu {
  display: none;
  width: 60%;
  margin: 5px 5px 5px 5px;

}
#menu-toggle:checked + #menu {
  display: block;
}
	#mobile-menu{
		width: 35%;
	margin-bottom:5px;
		
	}
	
	#spacer {		
		width:2%;
	}
	#left-sidebar {
		width: 35%;
	margin-bottom:5px;
		
	}
	

	#sidebar {
	clear: both;
	width:50%;
		margin:0px auto;
		padding: 20px 0 0 0;
		float: none;
}
	

	
	
			#spacer1 {
	display:inline;}
	
		footer {
		width: 90%;
		}
		
		footer {
		width: 75%;
		}
}

/* for 700px or less */
@media screen and (max-width: 600px) {

	
	#content {
		width: 96%;
	}
		
	
	
		#mobile-menu {
		width: 50%;
		float: none;
		clear:both;
		margin: 0 auto;
	
	}
	
	

	
	
	
	

}

/* for 480px or less */
@media screen and (max-width: 480px) {
	

	

	header {
		height: auto;
		
	}
	
	
		
		footer {
		width: 98%;
		}
		

	
	h1 {
		font-size: 2em;
	}
	

}




	



/*#pagewrap, header, #spacer, #left-sidebar, #content, #sidebar, footer {
	border: solid 10px #ccc;}*/