* {
  margin: 0;
}

html, body {
  height: 100%;
}

body{
	background-color:#e7e7e7;

	margin:0 auto;
	padding:0;
}

a{ color:#333; }
a:hover{ color:#999; }

.shaw{ color: #337ab7;}

label{font-weight:normal;}
audio{ width:100%; }

h4{ padding:0px 10px; }

.right-col h3{
	padding:10px;
	margin: 20px -10px;
}

.menu-button{ width:50%; }

.menu-button:hover{
	background:
    linear-gradient(
      rgba(0, 0, 0, 0.25), 
      rgba(0, 0, 0, 0.25)
    );

	background-size: 80%, 100% 55%, contain, 100%;
	background-repeat: no-repeat; 
	background-position:center;
}

.split, .menu{
	width:100%;

	background-color:#5d0404;
	background-size:cover;
	background-repeat: no-repeat; 

	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;

}

.red-back{ margin-bottom:0px; }

.split{ 
	height:10px; 
	background-color:#390000;
}
.footer-split{ height:4px; }

.mainnav li a:hover{
  background-color:#390000;
  color:#fff;
}

.nav a{ color:#fff; }

#container{
	min-height:100%;
	margin-bottom:-50px;
}

#date{ cursor:pointer; }
.note{ 
	display:block;
	float:right;
	position:relative;
	bottom:10px;
	right:10px;
}

.g-plusone{
	padding-left:5px;
}

/* BANNERS */

.background{
	background: url('../images/fallback-banner.jpg');
	background:
	    url('../images/logo.png'),
	   	linear-gradient(
	      rgba(0, 0, 0, 0.25), 
	      rgba(0, 0, 0, 0.25)
	    ),
	    linear-gradient(
	      rgba(0, 0, 0, 0.25), 
	      rgba(0, 0, 0, 0.25)
	    ),
		url('../images/images.jpg');
}

.background{
	background-size: 100%;
	background-size: 65%, 100% 55%, contain, 100%;
	background-repeat: no-repeat; 
	background-position:center;

	width:100%; 
	padding-top:39%;

	margin:0;
}

/* BANNERS */

.content-body{
	float:left;

	min-height:100%;

	width:100%;
	
	margin-top: 10px;
	padding:4px 20px;

	font-size: 12pt;
	font-family: Arial, Verdana sans-serif;
	
	line-height:175%;

	color:#313131;
}

.room-header, .header{
	font-family: 'Roboto Condensed';
	font-weight: '300';
	font-style: italic;

	padding:5px;
}

.sidebar{

	margin-top: 20px;
	margin-left: 25px;
	margin-bottom:10px;
	padding: 8px 20px 0px;

	font-size: 12pt;
	font-family: Arial, sans-serif;

	line-height:200%;

	color:#313131;
}

.certificate{
	font-family: 'Avro', serif;
	font-weight: '300';
	font-size: 1.5em;

	padding:5px;
	text-align:center;
}

.certificate_bold{
	font-size: 1.2em;
}

.notice{
	font-style: italic;
	font-size: .8em;	
}

#container:after {
  content: "";
  display: block;
}

.footer{

	width:100%;
	line-height: 12pt;
	font-size: 10pt;

	text-align:center;

	color:#fff;

	background-repeat: repeat;
	background-color:#5d0404;
}

#container:after, .footer{
	height:50px;
}

.footer a{ color: #fff;}
.footer a:hover{ color: #fff; }
.footer .nav{ height:auto; }

input[type=checkbox]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(1.4); /* IE */
  -moz-transform: scale(1.4); /* FF */
  -webkit-transform: scale(1.4); /* Safari and Chrome */
  -o-transform: scale(1.4); /* Opera */
  padding: 15px;
  vertical-align: bottom;
}

.btn-green{
	background-color:#033703;
	border-color:#044f0d;
	color:#fff;
}

.btn-green:hover{
	background-color:#066711;
	border-color:#044f0d;
	color:#fff;
}

.form-control[readonly]{
	background-color:#fff;
}

.large-res-gallery{ display:none; }

.copy{
	display:block;
	font-size: 1.2em;
	line-height: 3em;
}

.inline{ display:inline-block; }

.room-card{ margin: 5px; }
.room-card h3{ padding: 0px 10px; }
.room-controls select{ width:80px; margin-right:10px; }

.room-cost{
	padding:10px 10px;
	width:60%;
	float:left;
}

.room-controls .alert-message{ padding: 5px; }

.reserve-photo{
	width:40%;
	padding: 10px;
	float:left;
}

.reserve-photo img{ width:100%; }

.stay_cost_table{  width:100%; }

th.night{ width:40%; }
th.surcharge{ width:30%; }
th.cost{ width:30%; }

input.terms{
	position:relative;
	bottom:6px;
}

input[type="checkbox"]{
	display:inline-block;
	margin-right:5px;
}

.alert-message-error{ color:#fff; }

.alert-message .info h4{ color:white; }

.alert-message-error{
	background-color: #641d25;
	padding-left:20px;
}

#map-canvas{
	width: 100%; 
	height: 450px;
}

.help-block{
	background-color:#641d25;
	color:#fff;

	padding-right:10px;

	text-align:right;
}

.datefields select{
	width:47%;
	margin-right: 10px;
}
div.clearfix .error{
	padding-bottom: 0px;
}

input.terms{
	position:relative;
	width:25px;
}

ul.inputs-list{
	list-style:none;
	margin-left:-30px;
}

.card_drop select{ width:220px; }



 /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
@media (min-width:320px) and (orientation:portrait){ 	

	.header{ font-size: 2em; padding:10px 0px;}
	.room-header{ font-size: 1.6em;	}

	.menu-button{ width:40%; }
	.controls{ display: none; }

	.ctrl-half{ 
		display:block; 
		
		float:right;
		text-align:right;

		padding: 5px;
	}

	.nav{

		font-family: 'Roboto Condensed', sans-serif;
		font-weight: 300;
		font-size: 1.5em;

		background-color:#5d0404;
		background-size:cover;
		background-repeat: no-repeat;

		text-align:center;
	}

	.nav li{ padding:0px 0px; }

	.background{ background-size: 100%, 100% 100%, contain, 100%; }

	.right-col, .left-col, .half-col, .full-col{ width:100%; } 
	.half-col{ padding:10px;}
	.quarter-col{ margin-top:20px;}

	.menu-icon{
		display:visible;
		width:40%;
	}	

	img.tripbadge{ 
		width:90%; 
		height:90%;
		margin: 5% 5%;
	}

	.sidebar{
		width:90%;
		margin-top:10px;
		padding:0;
	}

	#map-canvas{
		height:250px;
	}

	.sideimg{ width:100%; }

	.button-hold{ 
		width:100%; 
		margin-top:20px;
	}

	.footer .nav{ display:none; }

	.copy{ 
		margin-top: 5px;
		line-height: 1.4em; 
	}

	.phonesplit{ 
		margin-top:5px;
		display:block; 

		font-size:1.4em;
	}

	.room-photo img{ display:none; }

	/*.header{ font-size: 1.8em;}*/
	.room-header{ font-size: 1.2em;	padding:10px;}

	.room-cost{
		padding:10px 10px;
		width:100%;
		float:left;
	}

	.room-card, .reserve-photo, .stay_cost_table{
		float:left;
		width:100%;
	}

	.room-visitors{ 
		padding-right:20px;
		text-align:center;
	}

	.breakfast-banner{
		width:100%; 
		margin-left:5px; 
		margin-top:20px; 
		padding-bottom:20px;
	}
}


/* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
@media (min-width:600px) and (orientation:portrait){
	
	.menu-button { width:25%; }
	.controls{display:inline;}
	.right-col, .left-col, .quarter-col, .half-col, .full-col{ width:100%; } 
	.sideimg{ width:100%; }

	.header{ 
		font-size:1.8em;
		padding:5px;
	}

	.phonesplit{ 
		margin-top:5px;
		display:inline;
	}
}

/* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
@media (min-width:550px) and (orientation:landscape){
	
	.controls{ display: inline; }
	
	.room-photo img{ display:none; }

	.menu{
		width:100%;
		height:44px;

		background-color:#5d0404;
		background-size:cover;
		background-repeat: no-repeat; 

	}

	.nav{

		font-family: 'Roboto Condensed', sans-serif;
		font-weight: 300;
		font-size: 1.2em;

		background-color:#5d0404;
		background-size:cover;
		background-repeat: no-repeat;

		text-align:center;

		float:right;
	}

	.nav li{ float:left; }

	#map-canvas{ height:170px; }
	.button-hold{ width:100%; }

	.quarter-col{
		margin-top:20px;
		width:45%;
		float:left;
	}

	.header{ font-size: 1.6em; padding:10px 0px;}
}

/* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
@media (min-width:550px){

	.menu-button { width:18%; }
	.controls{ display: none; }

	.ctrl-half{ display:inline; }
	.nav { text-align: center; }
	.footer .nav{ display:none; }

	.heaader{ font-size:2em; }

	.breakfast-banner{
		width:98%; 
		margin-left:5px; 
		margin-top:20px; 
		padding-bottom:20px;
	}
}



/* tablet, landscape iPad, lo-res laptops ands desktops */ 
@media (min-width:801px){
	
	.menu-button { display:none; }
	.controls{ display: inline; }

	.tablet-hidden{ display:none; }

	.room-photo img{ display:block; }

	h1 .header{ font-size:2em;}

	.left-col{
		width:60%;
		float:left;
	}

	.quarter-col{
		margin-top:20px;
		width:45%;
		float:left;
	}

	.right-col{
		width:30%;
		float:right;

		padding-left:0;
	}

	.tablet-full{
		width:95%;
		float:left;
	}

	.half-col{ 
		width:95%;
		padding:0 4%;
		float:left;
	}

	.mobi-left{
		width:40%;
		float:left;
		text-align:left;
	}

	.mobi-right{
		width:40%;
		text-align:right;
		float:right;
	}

	.comments{
		width:60%;
		float:left;

		padding-left:25px;
	}

	.menu{
		width:100%;
		height:44px;

		background-color:#5d0404;
		background-size:cover;
		background-repeat: no-repeat; 

	}

	.nav{ float:right; }
	.nav li{  float:left; }

	.sideimg{ width:100%; }

	#map-canvas{ height:300px; }

	.room-photo img{
		width:100%;
		height:auto;
	}

	.slide img{
	   -webkit-transform: translate3d(0, 0, 0);
	   -moz-transform: translate3d(0, 0, 0);
	   -ms-transform: translate3d(0, 0, 0);
	   transform: translate3d(0, 0, 0);
	}
}

@media (min-width:1025px) { 
/* big landscape tablets, laptops, and desktops */ 

	.menu-button{ display:none; }
	.controls{ display: inline !important;}

	.tablet-hidden{ display:block; }

	.red-back{
		min-height:100%;

		margin:0 auto;
		padding:0px 0px 5px;
	}

	/**/
	.menu{
		width:100%;
		height:60px;

		background-color:#5d0404;
		background-size:cover;
		background-repeat: no-repeat; 

	}

	.nav{
		float:right;

		list-style: none;

		font-family: 'Roboto Condensed', sans-serif;
		font-weight: 300;
		font-size: 1.4em;

		height:60px;
		width:auto;

		padding-right:5px;
	}

	.nav li{ float:left; }
	.nav li a{ padding: 16px 15px; }
	.mainnav li.active{ background-color:#390000; }

	.header, h2, h3, h4, .right-col h3{ padding:0px; margin-top:0px; }

	.navspan{ 
	  position:absolute; 
	  width:100%;
	  height:100%;
	  top:0;
	  left: 0;

	  /* edit: added z-index */
	  z-index: 1;

	  /* edit: fixes overlap error in IE7/8, make sure you have an empty gif */
	  /*background-image: url('empty.gif');*/
	}

	.left-col{
		float:left;
		width:67%;
	}

	.right-col{
		width:25%;
		height:auto;
		float:right;

		margin-right:3%;
	}

	.quarter-col{
		width:40%;
		float:left;
		padding-top:10px;
	}

	.button-hold{ 
		width:40%; 
		margin-top:10px;
	}

	.comments{ padding-left:0; }

	#map-canvas{ height:500px; }

	.footer .nav{ display:block; }
}

@media (min-width:1281px) { 
	/* hi-res laptops and desktops */
	
	.background{ padding-top:34%; }
	.sideimg{ width:80%; }

	.half-col{ 
		width:45%; 
		float:left;
		padding:0 1%;
	}

	.center-col{
		width:1200px;
		margin: 0 auto;

		background-color: #e7e7e7;
		background-attachment: fixed;
		background-size:100%;

		padding:20px;
	}

	.colheightfix{
		min-height:100%;
		height:88vh;
		margin-bottom:-10px;
	}

	.red-back{
		background-color:#5d0404;
		background-image: url('../img/top-left.png'), url('../img/bottom-right.png');
		background-size:40%, 40%;
		background-position: top left, bottom right;
		background-repeat: no-repeat;
		background-attachment: relative;
	}

	.footer{ margin:0; }
	.footer-split{ 
		height:2px;
		background-color: #e7e7e7; 
	}

}

@media (min-width:1500px) { 
	/* hi-res laptops and desktops */
	
	.large-res-gallery{
		display:block;
		margin-top:-10px;
	}

	.room-gallery{
		display:none;
	}
}