/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	font:normal 15px/24px 'open_sanslight', Arial, sans-serif;
}

p {margin:0 0 1em 0;}

b {font-family:'open_sanssemibold', Arial, sans-serif;}

.emphasis {font-family:'open_sanssemibold', Arial, sans-serif;}

.buPink,
.buPink-large {
	display:inline-block;
	background:#a46e7c;
	padding:7px 15px 7px 15px;
	font-size:16px;
	font-family:'oswaldregular', Arial, sans-serif;
	color:#fff;
	text-transform:uppercase;
	text-decoration:none;
}
.buPink-large {
	padding:15px 20px 12px 20px;
	font:normal 24px 'oswaldbold', Arial, sans-serif;
}

.buPink:hover,
.buPink-large:hover {
	background:#ad7d89;
}

.black {
	display:inline-block;
	padding:15px 20px;
	background:#333;
	font:normal 24px 'oswaldlight', Arial, sans-serif;
	color:#fff;
	text-transform:uppercase;
	text-decoration:none;
}

.container {width:100%;text-align:center;}

.shadow {
	-webkit-box-shadow:  5px 5px 0px 0px rgba(0, 0, 0, .3);
	        box-shadow:  5px 5px 0px 0px rgba(0, 0, 0, .3);
}

a.shadow:hover {
	-webkit-box-shadow:  5px 5px 3px 1px rgba(0, 0, 0, .2);
	        box-shadow:  5px 5px 3px 1px rgba(0, 0, 0, .2);
}



.lc {
	margin:0 auto;
	padding:0 10px;
	text-align:left;
	max-width:960px;
}

.error-message {
	padding:15px 20px;
	background:#633;
	color:#fff;
}
#contactForm input[type=text].error,
#contactForm textarea.error {
	background:#efd7dd;
	border:5px solid #633;
}

/* ------------- Modal Window -------------- */

#overlay {
	
	min-height: 100%;
	width:100%;
	position:fixed;
	left:0;
	top:0;
	background-color:#000;
	
	/* IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

	/* Netscape */
	-moz-opacity: 0.5;

	/* Safari 1.x */
	-khtml-opacity: 0.5;

	/* Good browsers */
	opacity: 0.5;
	
	z-index:1000;
	
	
}
.fadeIn {
	-webkit-animation: fadeIn 0.4s 1 ease;
			animation: fadeIn 0.4s 1 ease;
}

.modal {
	
	position:absolute;
	left:33%;
	/*
	top:25%;
	*/
	width:33%;
	min-width:400px;
	max-width:600px;
	margin:0 auto;
	padding:30px;
	background:#fff;
	-webkit-border-radius: 10px;
			border-radius: 10px;
			
	-webkit-box-shadow:  0px 0px 20px 5px rgba(0, 0, 0, 0.3);
			box-shadow:  0px 0px 20px 5px rgba(0, 0, 0, 0.3);
	z-index:1001;
	
	
			
}

.grow {
	-webkit-animation: grow 0.4s 1 ease;
			animation: grow 0.4s 1 ease;
}

a.modal-close {
	position:absolute;
	right:-10px;
	top:-10px;
	padding: 5px 10px 4px 10px;
	border:1px solid #E5E5E5;

	-webkit-border-radius: 25px;
	    	border-radius: 25px;
	font:normal 14px 'open_sanssemibold', Arial, serif;
	color:#fff;
	text-decoration:none;
	text-shadow: 0px -1px 0px #fff;
	filter: dropshadow(color=#fff, offx=0, offy=-1);
	
	background: #333;
	
}

.modal h3 {
	margin:0 0 5px 0;
	font: normal 24px 'oswaldregular', Arial, sans-serif;
	text-transform:uppercase;
}


#header {
	height:84px;
	background:#333;
	position:fixed;
	color:#ccc;
	font:normal 15px/24px 'open_sanslight', Arial, sans-serif;
	z-index:100;
}

#header h1 {
	float:left;
	width:194px;
	height:84px;
	background:url('../images/hsr_logo.png') no-repeat 0 10px;
	background-size:100%;
	text-indent:-9999px;
}

#phone {
	position:absolute;
	top:29px;
	right:110px;
}

#nav {
	position:absolute;
	top:23px;
	right:10px;
	font-family:'oswaldregular', Arial, sans-serif;
}

#nav-header {
	padding-right:25px;
	background-image:url('../images/nav_arrows.png');
	background-repeat:no-repeat;
	background-position:57px 13px;
}

#nav-header.active {
	background-position:57px -17px;
}

#nav ul#nav-links {display:none;
	
	-webkit-box-shadow:  3px 3px 0px 0px rgba(0, 0, 0, .3);
	        box-shadow:  3px 3px 0px 0px rgba(0, 0, 0, .3);
	
	background: #f1f0f0;
	width:125px;
	position:absolute;
	right:0;
	z-index:100;
	text-align:right;
	}
	
/* #nav:hover ul#nav-links {display:block;} */
#nav-links a {padding:10px 15px;display:block;text-transform:uppercase;text-decoration:none;color:#333;}
#nav-links a:hover {
	background:#dadada;
}


#hero-container {
	padding:84px 0 0 0;
	position:relative;
}

#hero-container-one,
#hero-container-two,
#hero-container-three {
	height:400px;
}

#hero-container-one img,
#hero-container-two img,
#hero-container-three img {
	width:100%;
	height:400px;
	min-width:1024px;
}

.headline-container {
	position:absolute;
	top:0;
	left:50%;
	width:960px;
	height:400px;
	margin-left:-480px;
	text-align:center;
}

.headline-container h2 {
	margin:125px 0 0 0;
	display:inline-block;
	padding:10px 25px 7px 25px;
	background:#fff;
	font:normal 72px 'oswaldregular', Arial, sans-serif;
	color:#333;
	text-transform:uppercase;
}

.headline-container h2 em {
	color:#6ea496;
}

.odd {
	overflow:hidden;
	padding:40px 0;
	background:#6ea496;
	border-top:5px solid #4d8976;
	color:#fff;
}

.even {
	overflow:hidden;
	padding:40px 0;
	background:#f1f0f0;
	color:#666;
}

.photo {display:block;width:300px;}
.photo img {
	width:100%;
	height:100%;
}

.odd .photo {float:left;margin:0 30px 0 0;}
.even .photo {float:right;margin:0 0 0 30px;}

.benefit {width:630px;}

.odd .benefit {float:left;}
.even .benefit {float:right;text-align:right;}

.benefit ul {
	margin:15px 0 0 0;
	list-style-type:disc;
}
.benefit ul li {
	margin:0 0 0 40px;
}
.odd a {color:#fff;}
.odd a:hover,
.even a:hover {text-decoration:none;}
.even a {color:#a46e7c;}
.even a.buBlack {color:#fff;}
.even p {
	margin:15px 0 0 0;
}

#contactForm ul,
#confirmation {
	position:relative;
	margin:0;
	padding:20px 20px 10px 20px;
	list-style-type:none;
	background:#4d8976;
}
#confirmation {padding:20px;}

#contactForm ul li {
	display:block;
	clear:both;
	overflow:hidden;
	margin:0 0 10px 0;
	line-height:30px;
}

#contactForm label {
	float:left;
}

#contactForm input, #contactForm textarea {
	float:right;
	width:350px;
	height:30px;
	padding:4px 8px;
	border:1px solid #366052;
	background:#f1f0f0;
	font:normal 15px/30px 'open_sanslight', Arial, sans-serif;
	-webkit-box-shadow:inset 3px 3px 0 0 rgba(0,0,0,.1);
			box-shadow:inset 3px 3px 0 0 rgba(0,0,0,.1);
}

#contactForm textarea {
	height:100px;
}
#contactForm ul li#submit-container {
	margin:0;
	padding:0 0 10px 345px;
	}
	
#footer {
	overflow:hidden;
	padding:40px 0;
	background:#333;
	font:normal 12px 'open_sanslight', Arial, sans-serif;
	color:#999;
}

#footer-links ul {
	float:left;
}

#footer-links a {
	font:normal 12px 'open_sansbold', Arial, sans-serif;
	text-transform:uppercase;
	color:#999;
	text-decoration:none;
}

#footer-links a:hover {
	color:#fff;
}

#footer #legal {
	float:right;
}

#confirmation h3 {
	font: normal 24px 'oswaldlight', Arial, sans-serif;
}

#photos img {
	width:100%;
}

#gallery.modal {
	left:25%;
	width:50%;
	max-width:800px;
}

#next {
	position:absolute;
	right:30px;
	top:50%;
	padding:10px 20px;
	background:#333;
	opacity:0.75;
	color:#fff;
	text-decoration:none;
	text-transform:uppercase;
}

#next:hover {
	background:#6ea496;
	opacity:1;
}



#tariffs ul {
	margin:0 0 2em 0;
}
#tariffs li {
	clear:both;
	overflow:hidden;
	padding:2px 0;
	border-bottom:1px solid #f1f1f1;
}
#tariffs .room {
	float:left;
}
#tariffs .cost {
	float:right;
}
#terms ul {
	margin:0;
}
#terms ul li {
	overflow:visible;
	margin:0 0 0 20px;
	list-style-type:disc;
	border:none;
	font-size:12px;
	line-height:16px;
}
#amenities li {
	padding:2px 0;
	border-bottom:1px solid #f1f1f1;
}

#contactForm input[type=text].destination {display:none;} 

/* ----------------- Animations ------------------- */

@-webkit-keyframes grow {
	from {-webkit-transform: scale(0);}
	to {-webkit-transform: scale(1);}
}
@keyframes grow {
	from {transform: scale(0);}
	to {transform: scale(1);}
}

@-webkit-keyframes fadeIn {
	0% {zoom: 1;filter: alpha(opacity=0);opacity: 0;}
	100% {zoom: 1;filter: alpha(opacity=50);opacity: 0.5;}
}
@keyframes fadeIn {
	0% {zoom: 1;filter: alpha(opacity=0);opacity: 0;}
	100% {zoom: 1;filter: alpha(opacity=50);opacity: 0.5;}
}



/* ------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------
--  iPad Portrait & Kindle Landscape -- 768-959: Based on 748px, with 1em padding
---------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------- */

@media screen and (max-width:959px) {
	
	.modal {left:20%;}
	
	.lc {max-width:748px;}
	
	.buBlack,
	.buPink-large {
		padding:10px 15px;
		font-size:18px;
	}
	
	#hero-container-one,
	#hero-container-two,
	#hero-container-three {height:300px;}
	
	#hero-container-one img,
	#hero-container-two img,
	#hero-container-three img {
		max-height:300px;
		min-width:100%;
	}
	.headline-container {
		width:748px;
		height:300px;
		margin-left:-374px;
	}
	.headline-container h2 {
		margin:100px 0 0 0;
		padding:10px 25px 7px 25px;
		font-size:56px;
	}
	
	.odd, .even, #footer {padding:30px 0;}
	.photo {width:225px;}
	.benefit {width:478px;}
	
	#contactForm input, #contactForm textarea {width:220px;}
	#contactForm ul li#submit-container {padding: 0 0 10px 270px;}
	
	#gallery.modal {
		left:15%;
		width:70%;
		max-width:500px;
	}
	
}


/* ------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------
--  iPhone Landscape & Kindle Portrait -- 568-767: Based on 548px, with 1em padding
---------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------- */

@media screen and (max-width:767px) {
	
	body {
		font:normal 14px/21px 'open_sanslight', Arial, sans-serif;
	}
	
	.modal {left:10%;}
	
	.lc {max-width:548px;padding:0 10px 10px 10px;}
	
	#hero-container-one,
	#hero-container-two,
	#hero-container-three {height:215px;}

	#hero-container-one img,
	#hero-container-two img,
	#hero-container-three img {
		max-height:215px;
		min-width:100%;
	}
	.headline-container {
		width:548px;
		height:215px;
		margin-left:-274px;
	}
	.headline-container h2 {
		margin:70px 0 0 0;
		padding:8px 20px 5px 20px;
		font-size:40px;
	}

	.odd, .even, #footer {padding:20px 0;}
	.photo {display:none;}
	.benefit {width:528px;}

	#contactForm input, #contactForm textarea {width:275px;}
	#contactForm ul li#submit-container {padding: 0 0 10px 285px;}
	
	#gallery.modal {
		left:8%;
	}
	
}



/* ------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------
--  iPhone Portrait -- 300-567: Based on 300px, with 1em padding
---------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------- */

@media screen and (max-width:567px) {
	
	
	
	.modal {left:10px;width:260px;min-width:260px;max-width:260px;padding:20px;}
	.lc {max-width:300px;padding:0 10px 10px 10px;}

	.error {padding:5px;}
	
	
	#header {
		height:65px;
	}
	
	#header h1 {
		height:65px;
		width:135px;
	}
	
	#nav {height:65px;top:13px;}
	
	#phone {
		width:300px;
		height:36px;
		margin:0;
		line-height:36px;
		position:fixed;
		bottom:0;
		top:auto;
		right:auto;
		color:#fff;
		text-align:center;
		background:#a46e7c;
		-webkit-box-shadow:  3px 3px 0px 0px rgba(0, 0, 0, .3);
		        box-shadow:  3px 3px 0px 0px rgba(0, 0, 0, .3);}
	
	#hero-container {
		padding:65px 0 0 0;}
		
	#hero-container-one,
	#hero-container-two,
	#hero-container-three {height:215px;}

	#hero-container-one img,
	#hero-container-two img,
	#hero-container-three img {
		max-height:215px;
		min-width:100%;
	}
	.headline-container {
		width:300px;
		height:215px;
		margin-left:-150px;
	}
	.headline-container h2 {
		margin:75px 0 0 0;
		padding:8px 20px 8px 20px;
		font-size:33px;
		line-height:42px;
	}
	#hero-container-two .headline-container h2 {
		margin:55px 0 0 0;
	}

	.odd, .even, #footer {padding:20px 0;}
	.photo {display:none;}
	.benefit {width:300px;}

	#contactForm input, #contactForm textarea {width:240px;}
	#contactForm ul li {margin:0;}
	#contactForm ul li#submit-container {margin:10px 0 0 0;padding: 0 0 10px 80px;}
	
	#footer-links ul {
		float:none;
	}

	#footer #legal {
		float:none;
	}
	
	#gallery.modal {
		left:8%;
		width:70%;
		min-width:70%;
	}
	
	#next {
		right:20px;
		top:auto;
		bottom:25px;
		padding:7px 10px;
	}
	
}