html, body{
	margin:0;
	padding:0;

	width:100%;

	background-color: #e7e7e7;
}

p{ margin-bottom:20px; }
a{ color:#14506a; }

a:hover{ }



.banner{
	background: url(../img/logo.png),
				linear-gradient(rgba(0,0,0,.20), rgba(0,0,0,.20)),
				linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.10)),
				url(../img/banner.jpg);

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

	width:100%;
	padding-top:30%;
}

.logo{
	position:absolute;
	top:0px;
	right:0px;
	background:
	   	linear-gradient(
	      rgba(0, 0, 0, 0.25), 
	      rgba(0, 0, 0, 0.25)
	    );

	z-index:1000;
}

.main-container{
	height:auto;

	font-family:'Roboto', Arial, Verdana, sans-serif;
	font-size:1.15em;
	font-weight:300;

	line-height:2.4em;

	margin:5px;
	padding:5px;

	width:100%;
}

.navcontainer li a:hover, .navcontainer li a.active{
	/*background-color:#023246;*/
	/*background-color: #193c0d;*/
	background-color: #335a48;
	-webkit-transition: background-color .3s ease-in-out;
	-moz-transition: background-color .3s ease-in-out;
	-ms-transition: background-color .3s ease-in-out;
	-o-transition: background-color .3s ease-in-out;
	transition: background-color .3s ease-in-out;
}

.mobile{ display:none; }

.navcontainer, .footer{ 
	/*background-color:#14506a;
	background-color:#114f32;*/
	background-color:#05311e;
	margin:0px;
}

.navcontainer{ height:60px; }
.nav li{ float:left; }
.nav li a{
	padding: 16px 20px;
}

.nav a, .footer a{ color:#fff; }

.nav{
  	float:right;
  	list-style: none;

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

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

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

.mobile-logo{ display:none; }

.full-width{ width:100%; }
.full-width img{ width:100%; }

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

.search-header{
	margin-bottom:15px;
}

.header{ font-size: 2em; }
.sub-header{ font-size: 1.4em; }

.content{
	margin: 0 auto;
}

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

.sidebar-col{
	width:23%;
	float:right;
}

.main-content{
	padding-left:10px;
	padding-right:50px;

	/*width: 800px;*/
	float:left;

	text-align:justify;
}


.sidebar{
	/*width: 225px;*/
	float:left;
}

.box{
	padding:20px 20px 20px;
}

.footer{
	color: #fff;
	padding-top:15px;
}

.footer-content{
	text-align:center;
}

#map-canvas{
	width: 100%; 
	padding-top:30%;
}

.availability{ line-height:1.5em; }

.map{
	width: 100%; 
	height: 450px;
}

.calendar-nav, .calendar-select{
	display:inline;
	float:right;
}

.calendar-nav{
	margin-right:5px;
}

.calendar-select{ width: 260px; float:right;}
.calendar-select select{ 
	width: 125px; 
	display:block; 

	margin-top:4px;
	margin-left:5px;
}

#date{ 
	cursor:initial; 
	background-color:#fff;
}

.btn-blue {
    /*background-color: #14506a;*/
    background-color: #335a48;
    border-color: #044f0d;
    color:#fff;
}

.btn-blue:hover {
    background-color: #05311e;
    border-color: #044f0d;
    color: #fff;
}


.mobile .main-pic{ 
	width:100%;
	padding:20px;
}

.main-pic img{
	width:97%;
}

.required-item{
	display:none;
}

@media (max-width:600px) and (orientation:portrait), (max-width:600px) and (orientation:landscape){

	.large{ display:none; }
	.mobile{ display:block; }

	.mobile .menu-button{ 
		width:40%; 
		display:inline;
	}

	.logo{
		background: 
		   	linear-gradient(
		      rgba(0, 80, 160, 0), 
		      rgba(0, 80, 160, 0)
		    );
		
		background-size: 100%;
		background-repeat: no-repeat;
		background-position:center;
	}

	.logo img{
		float:right;
		width:40%;
	}

	.controls{ display:none; }

	.content{ width:100%; }

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

	.sidebar-col{
		width:100%;
		float:right;
	}

	.navcontainer{ height: auto; }
	.nav li { 
		width:100%; 
		text-align:center;
	}

	.img-container{
		width:100%;

		text-align:center;
		vertical-align: middle;

		float:left;
	}

	.img-container img{
		width:100%;
		padding:10px;
	}

	.img-container a:hover{
		opacity:0.4;
		filter:alpha(opacity=40); /* For IE8 and earlier */
	}

	.calendar-select, .calendar-nav{
		float:right;

		display:block;
		width:100%;

		text-align:center;
	}

	.calendar-nav{

	}

	.calendar-nav button, .calendar-select button{
		width:24%;
	}

	.calendar-select select{
		display:inline;
		margin-top:4px;
		width:100%;
	}

	.map{
		width: 100%; 
		height: 200px;
	}
}

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

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

}

/* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
@media (min-width:601px){
	.mobile{ display:none; }
	.large{ display:block; }

	.gallery{ 
		display:flex;
		flex-flow: row wrap;
		justify-content:space-evenly;
		width:100%; 
		margin:0 auto;
	}

	.img-container{

		max-width:200px;
		max-height:200px;

		text-align:center;
		vertical-align: middle;

		float:left;
	}

	.img-container img{

		max-height:200px;
		max-width:200px;
		padding: 10px;
		
		margin: auto;
	}

	.img-container a:hover{
		opacity:0.4;
		filter:alpha(opacity=40); /* For IE8 and earlier */
	}

	.nav{ width:100%; }
	.navcontainer{ height: auto; }
	.nav li { 
		width:100%; 
		text-align:center;
	}
}

/* tablet, landscape iPad, lo-res laptops ands desktops */ 
@media (min-width:801px){
	.nav{ width: auto; }
	.navcontainer{ height:60px; }
	.nav li{ float:left; width:auto;}
	.nav li a{ padding: 16px 30px; }
}

/* big landscape tablets, laptops, and desktops */ 
@media (min-width:1025px){
	.content{ width:100%; }
}

/* hi-res laptops and desktops */
@media (min-width:1281px){
	.large{ display:block; }

	.gallery{ 
		display:flex;
		flex-flow: row wrap;
		justify-content:space-evenly;
		width:100%; 
		margin:0 auto;
	}

	.content{ width:80%; }

	.img-container{

		max-width:200px;
		max-height:200px;

		text-align:center;
		vertical-align: middle;

		float:left;
	}

	.img-container img{

		max-height:200px;
		max-width:200px;
		padding: 10px;
		
		margin: auto;
	}

	.img-container a:hover{
		opacity:0.4;
		filter:alpha(opacity=40); /* For IE8 and earlier */
	}
}

/* hi-res laptops and desktops */
@media (min-width:1500px){
}