@import url(http://fonts.googleapis.com/css?family=Allura|Quattrocento+Sans);

/*
Here are the colours in use here:
What is it?							Where is it used?			HTML Colour
Grey on the outside: 				Body						#c0c0c0
Grey contact text:					#header-contact-details		#707070
Grey article text					#main-info, #main info a	#797979
Grey footer text					footer, footer a			#999999
Off-white article text				article						#e2dfdc
Green background:					#page-holder				#b7c58d
brown text:							header						#807561
Dark brown background for headings	#top-nav-box,#sidebar h2	#736357 or hsl(26,13.64%,39.6%)
Light brown article background		article						#8b7d71 or rgba(139,125,113,0.5)
Red in the title:					#welcome-banner				#9e0039
*/

html{
	width: 100%;
	}
body {
	background-color:#B7C58D;
	color: hsl(338, 6%, 48%);
	margin: 0;
	}
article{
	font-family: "Quattrocento Sans", sans-serif;
	}
	article a, article a:visited, article a:hover{
	color: hsla(338, 6%, 48%, 1);
	text-decoration: none;
	}
h1{
	padding-top: 7px;
	padding-bottom: 5px;
	margin-left: 0px;
	margin-top: 5px;
	font-size: 20pt;
}
h2{
	font-size: 20pt;
	margin-left: 4px;
	margin-top: 5px;
	margin-bottom: 0;
	clear: both;
	}
p, cite{
	font-size: 14px;
	/*margin: 2px 4px 0px 3px;*/
	}
a, a:hover, a:visited{
	text-decoration: none;
	}
li{
	padding-bottom: 1em;
}
.clearer{
	clear: both;
	}
#page-holder{
	max-width:980px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 20px;
	}

/*	This is the header. The first row has the logo, name and strapline on the left; and the contact details on the right.
	Then there's the navigation bar underneath. */
header{
	font-family: "Quattrocento Sans", sans-serif;
	color: #807561;
	margin-bottom: 15px;
	}
	.contact-icon{
		display: none;
		color: #9E0039;
		min-width: 25px;
	}
#menu-switch{
	cursor: pointer;
	position: absolute;
	left: -48px;
	top: 15px;
	opacity: 0.9;
	width: 18px;
	overflow: hidden;
	padding-left: 30px;
	padding-right: 30px;
	z-index: 9;
	}
		.menu-switch-text{
			-webkit-transform: rotateZ(-90deg);
			transform: rotateZ(-90deg);
			position: absolute;
			left: -2px;
			top: 34px;
			width: 85px; /*to match the height of the tab image*/
			color: #E2DFDC;
			font-size: small;
			text-align: center;
		}
	#welcome-banner #hotel-name, .mobile-hotel-name{
		color: #9e0039;
		font-family: "Palatino Linotype", serif;
		font-weight: normal;
		font-size: 31.5pt;
		margin-bottom: 0;
		margin-top: 10px;
		}
	.home-from-home{
		font-family : "Allura", cursive;
		font-size: 28.3pt;
		margin-top: -6px;
		margin-bottom: 0;
		color: #807561
		}
		#header-contact-details {
			font-size: 17.5pt;
			color: #707070;
		}
		#header-contact-details a{
			color: #707070;
		}
		.contact-line img{
			vertical-align: baseline;
		}

	/* Here's the top navigation box */
	#top-nav-box {
		}
	#top-navigation{
		font-size: 12.5pt;
		}
	#top-navigation a:link, #top-navigation a:visited{
		color: #e2dfdc;
		text-decoration: none;
		}
	#top-navigation ul{
		list-style: none;
		}
		#top-navigation ul ul{
			overflow: hidden;
			white-space: nowrap;
			z-index: 9;
		}
			#top-navigation ul ul li:hover{
				background-color: hsl(26, 7%, 50%);
				}
/* End of the 'header' section*/


/* This is the 'intro' section. It's got a welcome section on the left, and a summary of facilities on the right*/

#intro{
	margin-top: 15px;
	margin-bottom: 15px;
}
	#intro article, article#welcome{
		background-color: hsla(338, 8%, 48%, 0.43);
		color: #e2dfdc;
		height: 320px;
		margin-bottom: 15px;
		position: relative;
		z-index: 1;
	}
	#welcome{
		width: 285px;
		padding-top: 15px;
		padding-bottom: 10px;
		padding-left: 15px;
		padding-right: 15px;
		position: relative;
		}
		#welcome h2{
		margin-top: -5px;
		}
	#welcome-image-holder{
		overflow: hidden;
		height: 180px;
		width:285px;
		position: absolute;
		bottom: 15px;
		}
	#features{
		float: right;
		width: 630px;
		padding-top: 15px;
		padding-bottom: 10px;
		padding-left: 5px;
		padding-right: 15px;
		}
	#features-image-holder{
		float: right;
		}
	#features-image{
		width: 430px;
		}
	#features-list{
		float: left;
		width: 195px;
		margin-top: -18px;
		}
	.features-icon{
		/*	This is because the images have a drop shadow,
			but you want the accompanying text centred against the rest of the image.
		*/
		margin-top: 10px;
		}
		#features-list td{
			vertical-align: middle;
			height: 80px;
			font-size: 18px;
			}

/* End of the 'intro' section*/

/*	This is the 'main' section - it's got a sidebar on the left with events and testimonials,
	and four articles in a grid */
.side-holder{
	display: inline-block;
	vertical-align: top;
}
#sidebar{
	width: 315px;
	margin-right: 15px;
	padding-top: 1px;
	padding-bottom: 15px;
	background-color: rgba(139, 125, 113, 0.5);
	color: #e2dfdc;
}
	#sidebar article a, #sidebar article a:visited, #sidebar article a:hover{
		color: #e2dfdc;
		}
	#sidebar .article-box{
		clear: both;
		margin-left: 15px;
		margin-right: 15px;
		margin-top: 15px;
	}
	#sidebar h2{
		background-color: #736357;
		color: #e2dfdc;
		padding-top: 7px;
		padding-bottom: 5px;
		padding-left: 7px;
		margin-left: 0px;
		margin-top: 0px;
		}
	#sidebar p{
		margin: 10px 10px 0 5px;
		}
	#sidebar .event-link{
		font-weight: bold;
		font-style: italic;
		margin-left: 5px;
		margin-top: -3px;
	}
	#sidebar .event-link a{
		color: #e2dfdc;
	}
	.upcoming-event-title{
		font-weight: bold;
	}
	#sidebar #events-read-more{
		font-size: 14px;
		font-weight: bold;
		font-style: italic;
		color: #e2dfdc;
		float:right;
		margin: 0px 10px 5px 0px;
	}
	#sidebar table{
		margin: 15px 0px 0px 1px;
		border-collapse: collapse;
		width: 284px;
		}
	#sidebar td{
		font-size: 8.5pt;
		border: 2px solid #e2dfdc;
		padding: 4px;
		}
	#sidebar td a{
		font-size: 8.5pt;
		}
	#testimonial-holder{
		height: 200px;
		overflow: hidden;
		}
	.testimonial{
		position: relative;
		margin-top: 25px;
		transition: opacity 3s ease-in-out;
		}
		#sidebar blockquote:before{
			position: absolute;
			content: "\201c";
			font-family: serif;
			font-size: 71px;
			left: -40px;
			top: -30px;
			}
		#sidebar blockquote:after{
			position: absolute;
			content: "\201d";
			font-family: serif;
			font-size: 71px;
			left: 235px;
			bottom: -45px;
			}
		#side-nav h2 a, #side-nav h2 a:hover, #side-nav h2 a:visited{
			color: #e2dfdc;
			font-size: 20pt;
			}
		.sidebar-subnav{
			padding-left: 10px;
			padding-top: 5px;
			}
		#side-nav ul{
			padding: 0;
		}
		#side-nav li{
			list-style: none;
		}
		/*This is the TripAdvisor reviews box*/
		/* The height is included because otherwise the page dances about when it's loading */
		#sidebar #tripAdvisor{
			padding-top: 5px;
			padding-bottom: 5px;
			background-color: white;
			/* min-height: 429px; - this is the height if you include the ranking */
			min-height: 205px;
			}
		.TA_selfserveprop{
			margin-left: auto;
			margin-right: auto;
			width: 240px;
			}
#hotel-info{
	vertical-align: top;
	}
	#hotel-info h2{
		padding-top: 7px;
		padding-bottom: 5px;
		margin-left: 0px;
	}
	#hotel-info .article-box{
		width: 318px;
		margin-bottom: 10px;
		}
		#hotel-info .article-box:nth-child(even){
			margin-right: 0px;
		}
		#hotel-info .article-box:nth-child(odd){
			clear: both;
		}
		.heading-and-image{
			position: relative;
			height: 157px;
			overflow: hidden;
		}
			#hotel-info .article-box .heading-and-image h2{
				position: absolute;
				bottom: 4px;
				left: 0px;
				right: 0px;
				padding-left: 5px;
				background-color: hsla(0,0%,50%,0.75);
				color: hsl(0,0%,90%);
			}
		#hotel-info .article-box p{
			margin-bottom: 5px;
			}
		.article-filler{
			width:318px;
			height:158px;
		}
	#hotel-info #inner-content{
		float: none;
		width: initial;
		margin-top: 15px;
		}
		#hotel-info #inner-content p{
			font-size: 16px;
			margin-right: 10px;
		}
		#hotel-info #inner-content ul{
			font-size: 16px;
			margin-right: 10px;
		}
		#hotel-info #inner-content a{
			text-decoration: underline;
		}
	.inner-image{
		float: right;
		margin: 10px 0px 10px 10px;
	}
	#hotel-info-article img{
		margin-left: 5px;
		width: 100px;
		}
	a .read-more{
		font-weight: bold;
		font-style: italic;
		}
	#section-nav{
		margin-top:30px;
		margin-left:40px;
		font-family: "Quattrocento Sans", sans-serif;
		}
		#section-nav a, #section-nav a:hover, #section-nav a:visited{
			text-decoration: none;
			color: #797979;
			}
		#section-nav li{
			list-style-type: disc;
			}
.google-map-holder{
	margin-top: 20px;
	}
table.rates{
	margin: auto auto 15px;
}
	table.rates td{
		padding-bottom: 0.5em;
		vertical-align: top;
	}
	.room-type, .room-price{
		font-weight: bold;
	}

/* And this is the footer section */
footer{
	clear: both;
	margin-top: 15px;
	background-color: rgba(139, 125, 113, 0.5);
	color: #e2dfdc;
	font-family: "Quattrocento Sans", sans-serif;
	}
	#footer-content{
		min-height: 195px;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		justify-content: space-between;
	}
	.footer-block{
		-webkit-align-self: center;
		align-self: center;
		}
	footer p, footer nav div{
		font-size: 8.4pt;
		margin-top: 5px;
		margin-bottom: 7px;
		list-style-type: none;
	}
	#address-name{
		font-weight: bold
		}
	footer a, footer a:visited, footer a:hover{
		text-decoration: none;
		color: #e2dfdc;
		}
	#certificate-of-excellence{
		margin-right: -10px;
	}

.vevent h4{
	font-size: large;
}

/*	The testimonials page has some different rules to the sidebar testimonials */
#testimonials-section p{
	margin-top: 10px;
	}
#testimonials-section blockquote{
	margin-left: 0px;
	}
#page-holder #content-introduction{
	width: 100%;
	text-align: center;
	}