@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);

.mobile-only{
	display: none;
}

@media screen and (min-width: 981px){
	body{
		background-image: url("/images/wallpaper.png");
	}
	header .contact-line{
		color: #707070;
		text-align: right;
		font-size: 17.5pt;
	}
	#header-contact-details p, #header-contact-details a, #header-contact-details a:visited, #header-contact-details a:hover{
		margin: 0;
	}

	#welcome-banner {
		height: 112px;
		position: relative;
	}
	#logo {
		width:85px;
		height: 93px;
		margin: 5px;
		float: left;
	}
	#header-name{
		float: left;
	}
	#header-contact-details{
		bottom: 13px;
		right: 0px;
		position: absolute;
	}
	#header-contact-details p, #header-contact-details a, #header-contact-details a:visited, #header-contact-details a:hover{
		text-align: right;
	}

	/* Here's the top navigation box */
	#top-nav-box {
		clear: both;
		height: 45px;
		line-height: 45px;
		margin-bottom: 0px;
		background-color: hsl(26,13.64%,39.6%);
	}
	#top-nav-box>ul{
		padding: 0 20px 0;
		margin: 0;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}
	#top-nav-box>ul>li{
		display: inline-block;
		padding: 0;
		position: relative;
	}
	#top-navigation ul ul{
		position:absolute;
		top: 45px;
		left: -11px;
		padding-left: 0;
		padding-right: 0;
		background-color: hsl(26, 10%, 45%);
	}
	/*	Some of these properties are marked as important
	because otherwise they're overridden by styles in safari.css */
	#top-navigation ul ul li{
		line-height: initial;
		padding: 5px 10px 5px !important;
		display: block;
	}
	#top-navigation ul ul li:nth-child(1){
		padding-top: 10px !important;
	}
	#top-navigation ul ul li:last-child{
		padding-bottom: 10px !important;
	}
	/* Here's where we make the menus drop down */
	#top-nav-box>ul>li ul {
		max-height: 0px;
		-webkit-transition-property: max-height;
		-webkit-transition-delay: 0.25s;
		transition-property: max-height;
		transition-delay: 0.25s;
	}
	#top-nav-box>ul>li:hover ul {
		max-height: 150px;
		-webkit-transition-property: max-height;
		-webkit-transition-delay: 0s;
		transition-property: max-height;
		transition-delay: 0s;
	}
	/* Here's where we make the menus drop down */
	#top-nav-box>ul>li ul {
		max-height: 0px;
		-webkit-transition-property: max-height;
		-webkit-transition-delay: 0.25s;
		transition-property: max-height;
		transition-delay: 0.25s;
	}
	#top-nav-box>ul>li:hover ul {
		max-height: 150px;
		-webkit-transition-property: max-height;
		-webkit-transition-delay: 0s;
		transition-property: max-height;
		transition-delay: 0s;
	}

	.side-holder{
		float: left;
	}
	#hotel-info{
		float: right;
		width: 650px;
	}
		#hotel-info .article-box{
			float: left;
			margin-right: 14px;
		}
	#hotel-info #inner-content{
		margin-left: 5px;
	}
			#hotel-info #inner-content p{
				/*margin: 14px 40px 14px 0;*/
				text-align: justify;
			}

	#footer-content{
		width:955px;
	}

	table.rates{
		width: 66%;
	}

}

@media screen and (max-width: 980px), print{
	header{
		text-align: center;
	}
	#welcome-banner #hotel-name, .mobile-hotel-name{
		margin-top: 0;
		font-size: 21pt;
	}
		#header-name{
			display: inline-block;
		}
		#header-contact-details{
			font-size: 15pt;
		}
	.contact-icon{
		text-align: center;
		font-size: 23px;
		}
	#top-navigation{
		position: fixed;
		z-index: 7;
		background-color: rgba(114, 99, 87, 0.9);
		padding-right: 20px;
		text-align: left;
		top: 33px;
	}
	#top-nav-box{
		position: relative;
		padding-top: 1em;
	}
	#top-nav-box>ul{
		margin-top: 0;
		margin-bottom: 0;
	}
	#top-nav-box li{
		display: block;
	}
	#top-nav-box li li:first-child {
		padding-top: 1em;
	}
	#top-nav-box li li:last-child {
		padding-bottom: 0;
	}

	.hidden{
		left: 100%;
		-webkit-transform: translateX(0);
		transform: translateX(0);
		-webkit-transition: -webkit-transform linear 0.2s;
		transition: transform linear 0.2s;
	}
	.shown{
		left: 100%;
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
		-webkit-transition: -webkit-transform linear 0.2s;
		transition: transform linear 0.2s;
	}

	#intro{
		display: none;
	}

	.content-page .side-holder{
		display: none;
	}

	.home-page #page-content{
		text-align: center;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		max-width: 650px;
		margin-left: auto;
		margin-right: auto;
	}
	.home-page #page-content>*{
		text-align: left;
	}
	.content-page #page-content{
		margin-left: 15px;
		margin-right: 15px;
	}
	article#tripAdvisor{
		display: none;
	}

	.google-map-holder{
		max-width: 100%;
	}
	.google-map-holder>iframe, .google-map-holder>div{
		max-width: 100%;
	}

	#footer-content{
		max-width: 655px;
		justify-content: space-around;
	}
	.footer-block#footer-navigation{
		display: none;
	}
}

@media screen and (max-width: 980px) and (orientation: landscape){
/*@media screen and (max-width: 980px){*/
	#top-nav-box{
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-count: 2;
		min-width: 415px; /*Because the Android browser goes all narrow */
	}
	#menu-switch{
		top: 0px;
	}
}

@media screen and (max-width: 980px) and (min-width: 640px){
	#sidebar{
		margin-right: 10px;
	}
	#page-content{
		max-width: 630px !important;
	}
	#hotel-info .article-box{
		width: 305px;
	}
	.home-page #page-content{
		display: -webkit-box;
	}
}

@media screen and (max-width: 639px){
	/* Some things are just switched off: */
	#header-name, .home-from-home, #sidebar, #welcome-image-holder, .article-box p{
		display: none;
	}

	#page-holder{
		padding: 0;
		width: 318px;
	}
	#welcome-banner{
		padding-top: 10px;
		width: 100%;
	}
	#welcome-banner{
		margin-left: auto;
		margin-right: auto;
	}
	#logo{
		max-height: 25px;
	}
	header .contact-line{
		padding-top: 10px;
		white-space: nowrap;
	}
	#header-contact-details{
		padding-top: 39px;
	}
	.mobile-hotel-name{
		position: fixed;
		background-color: #b7c58d;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 6;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	#logo{
		position: fixed;
	}
	article#welcome, #welcome-image-holder{
		width: 288px;
	}
	article#welcome{
		height: initial;
	}

	.heading-and-image{
		height: initial;
		min-height: 40px;
	}
	.google-map-holder{
		text-align: center;
	}
	#inner-content ul{
		padding: 0;
	}
	#footer-content{
		display: block;
		position: relative;
		text-align: center;
		padding-top: 15px;
		width: 255px;
		height: 224px;
	}
	.footer-block{
		margin-bottom: 15px;
	}
	.footer-block#footer-address{
		display: none;
	}
	.footer-block#rick-steves, .footer-block#certificate-of-excellence{
		display: inline-block;
		position: absolute;
	}
	#facebook-badge img{
		vertical-align: bottom;
	}
	.footer-block#rick-steves{
		left: 0;
		bottom: 5px;
	}
	.footer-block#certificate-of-excellence{
		right: 0;
		bottom: 0;
	}
	.footer-block#certificate-of-excellence>div>div{
		margin-top: 0;
		margin-right: 0;
	}
	.mobile-only{
		display: block;
	}
}

@media print{
	@page{
		margin: 5mm;
	}
	#page-holder{
		margin-top: 0;
	}
	.contact-line.mobile-only{
		display: block;
	}
	#header{
		page-break-after: avoid;
	}
	#menu-switch{
		display: none;
	}
	#hotel-info .article-box p{
		margin-top: 0;
	}
}