/*
Author: Richard Cassidy
        Graphite Design www.graphitedesign.net

Colors: 
header bg #3F2000
menu bg #887562
*/

body {
	font-family: 'Open Sans', serif;
	font-style: normal;
	font-size: 11pt;
	color: #777;
	background-color: #fff;
	margin: 0;
	padding: 0;
}

h1,h2,h3,h4 {
	font-weight: 300;
	color: #777;
	text-align: left;
}

h1 { 
	font-size: 200%;
	letter-spacing: .2em;
	text-transform: capitalize;
	margin: 15px 0 30px 0;
}

h2 { 
	font-size: 150%;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin: 15px 0 10px 0;
}

h3 { 
	font-size: 120%;
	font-weight: light;
	text-transform: uppercase;
	margin: 1em 0 0 0;
	padding: 0;
}

p {
	padding: 0;
	margin: 0 0 1em 0;
}


hr {
	border: 0;
	width: 80%;
	border-top: 1px solid #fff;
	margin: 20px auto;
	display: block;
}

a:link, a:visited, a:active, a:hover {
	text-decoration: none;
	color: #3F2000;
}

a:hover {
	text-decoration: underline;
}

a img, a:hover img {
	border: 0;
}

/* structure */

#container {
	max-width: 1000px;
	padding: 0; 
	margin: 0 auto;
	color: #777;
	background: #fff;
}

#header {	
	background: #3F2000;
	padding: 50px 0;
	width: 100%;
	text-align: center;
	color: #887562;
	font-weight: 300;
	font-size: 2em;
	position: relative; 
}

#header .group {
	max-width: 1000px;
	margin: 0 auto;
	position: relative; 
}

#header img {
	max-width: 90%;
}


#content {
	width: 90%;
	margin: 20px auto;
}

#page_content h1 {
	text-align: center;
	font-size: 3em;
	text-transform: none;
}

#pictures {
	max-width: 1000px;
	margin: 0 auto;
	display: table;
	border-collapse: collapse;
}
#pictures .pic {
  display: table-cell;
  vertical-align: top;
  padding: 5px;
}
#pictures .pic img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 250px;
}


#picturesx * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#picturesx .pic {
  min-height: 400px;
  background-image: url(http://lorempixel.com/1800/800/);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  /*padding: 40px; (If don't want to set min-height or some image content is there) */
}


#foot {
	margin: 30px 0 0 0; 
	padding: 30px 0;
	background-color: #887562;
	text-align: center;
	color: #fff;
}

#foot p {
	line-height: 1.5em;
}

.col {
	width: 45%;
	float: left;	
}

.col:nth-child(2) {
	float: right;
}

.col img {
	max-width: 100%;
}


/* header message */

#header_message {
	padding: 10px;
	text-align: center;
	background: #ff9999;
	color: #111;
}
#header_message p {
	padding: 0;
	margin: 0;
}

#header_message a {
	text-decoration: underline;
	}
	
	
/* main menu */

#menures {
	display: none;
	background-color: #887562;
	list-style-type: none;
	padding: 10px 0 10px 20px;
}
#menures ul {
	margin: 0;
	padding: 0;
	}
#menures li {
	padding: 10px 0px;
	margin: 0;
}
#mainmenux {
	display: none;
}

#menuswitcher span {
	padding: 0 0 0px 1em;
	display: table-cell;
	vertical-align: middle;
	color: #fff;
}
#menuswitcher {
	vertical-align: middle;
	display: table-row;
	text-decoration: none;
}
#mainmenu {
	display: block;
	margin: 0;
	padding: 0;
	text-align: center;
	background-color: #887562;
}

#mainmenu li {
	display: inline-block;
	list-style: none;
	padding: 20px 8px;
}

#mainmenu li a:link, #mainmenu li a:visited, #mainmenu li a:hover {
	padding: 0;
	color: #fff;
	background: inherit;
	white-space: nowrap;
	font-size: 1.4vw;  /* font size scales on veiwport width - media rule below caps it */
}

#mainmenu li:hover {
	background: #706050;
	text-decoration: none;
}

#mainmenu li.here {
	background: #706050;
}


/* forms styles */

.form 
{
	font-family: times roman,serif;
	font-style: normal;
	color: #444;
	width: 80%;  
}

input, textarea {
	font: normal .9em arial, verdana, sans-serif;
	border: 1px solid #ddd;
	padding: 3px;
}

select {
	font: normal .9em arial, verdana, sans-serif;
	border: ;
}

.button {
	text-align: center;
	background: #bbb;
	padding: 10px 15px;
	border: none;
}

.button:hover {
	background: #706050;
}

/* styles */

#breakfastmenu li {
	margin-bottom: 1em;
}

.colimg {
	width: 100%;
}

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


#tripadvisor {
	width: 100%;
	text-align: center;
	margin: 2em auto;
}
#tripadvisor img {
	max-width: 100%;
}

#tripad {
	margin: 20px auto;
	display: none;
}
#tripad, #tripad div {
	text-align: center;
	margin: 0 auto;
}



.dir li {
	list-style-type: circle;
	padding-bottom: .5em;
}

#rates td {
	padding: 2px 5px;
}


.directions li {
  list-style-type: square;
  padding: 5px 0;
}


#map iframe {
	width: 100%;
	height: 350px;
	border: none;
}
	
#viewer iframe {
	width: 100%;
	height: 350px;
	border: none;
}


blockquote.warning {
	border: 1px solid #B7545A;
	color: #B7545A;
	background: #FFE3E3;
	padding: 0 8px;
}


#news td{
	vertical-align: top;
}


#offer {
	margin: 2em 0;
	padding: 2em 3em;
	background: #f5f5f5;
	border: 1px solid #ccc;
}

#offer h1 {
	font-size: 1.7em;
	letter-spacing: normal;
	margin: 0 0 .5em 0;
	padding: 0;
}

#guestbookform {
	margin: 2em 0;
	padding: 1em 3em;
	background: #f5f5f5;
	border: 1px solid #ccc;
	
}

.comment {
	margin: 1.5em 0; 
}

.comment p {
	margin: 0;
	padding: 0;
}
.comment .qmessage {
	font-style: italic;
}
.comment .qauthor {
	text-transform: uppercase;
}


.quote {
	padding: 0;
	font-size: 1.3em;
	font-family: serif;
	color: #aaa;
	width: 80%;
	margin: 1.5em auto;
}
	
.quote p {
	font-style: italic;
}
.quote span {
	display: block;
	font-style: normal;
}



a#booking_button, a#booking_button:visited, a#booking_button:hover, a#booking_button:active {
	color: #444;
	background: #ffffff;
	padding: 10px;
	border-radius: 4px 4px 4px 4px;
	position: absolute;
	right: 1em;
	top: -2em;
	font-size: .7em;
	text-transform: uppercase; 
}


.airbnb_button {
	color: #fff;
	background: #ff9600;
	padding: 10px;
	border-radius: 4px 4px 4px 4px;
	font-size: .7em;
	text-transform: uppercase; 
	text-align: center;
	display: block;
	width: 75%;
	margin: .5em auto;
	font-size: 1.2em;
}


/* media scaling responsive stuff */

@viewport {
	zoom: 1.0;
	width: extend-to-zoom;
}

@media all and (min-width: 950px) {
	/* keep the font size to a max of 1em */
	#mainmenu li a:link, #mainmenu li a:visited, #mainmenu li a:hover {
		font-size: 1em;
	}
}
	
@media all and (max-width: 880px) {
	.col {
		width: 100%;
		float: none;
	}
	a#booking_button {
		font-size: .5em;
		top: -2.5em;
	}
}



@media all and (max-width: 700px) {	
	#menures {
		display: block;
	}
	
	#mainmenu {
		display: none;
	}
	#page_content h1 {
		font-size: 2.5em;
	}
		
}


/* fix clearing objects */


.group:after {
  content: "";
  display: table;
  clear: both;
}