<?php
	header ("Content-type: text/css");
?>
/*Unstyle*/
html {
	overflow: auto;
}

body {
	margin: 0px;
	padding: 0px;
	border: none;
	font-size: 100%;
}

a, p, h1, h2, h3, h4, h5, h6 {
	margin: 0px;
	padding: 0px;
	border: none;
	font-size: 100%;
	line-height: 1.2;
}

h2 {
    color:#e77e22;
}
div {
	position: relative;
}
div:after {
	clear: both;
	display: block;
	content: ".";
	visibility: hidden;
	height: 0px;
	line-height: 0px;
}

a img{
	border:none;
}

/*HTML styling*/
html {
	background-color: #fff;
}

body {
	text-align:center;
}

/*Layout*/
#bcontainer{
	text-align:left;
	width:976px;
	margin:0px auto 0px auto;
	background: #FFF;

}

#header_container{
	margin:auto;
	width: 100%;
	clear: both;
	float: left;
}

#header {
	text-align: center;
	clear:both;
	height:158px;
	width: 100%;
	color: #fff;
}

#title {
    left: -287px;
    top: 44px;
}

#tleft {
    float:right;
    margin-top: -67px;
    margin-right: 166px;
    width: 153px;
    height: 99px;
    padding-top: 3px;
    padding-right: 1px;
    background-color: #BC9075;
	z-index: 1000;
}

#tright {
    float: right;
    margin-top: -67px;
    margin-right: -320px;
    width: 153px;
    height: 99px;
    padding-top: 3px;
    padding-right: 1px;
    background-color: #95b023;
	z-index: 1000;
}

#tleft2 {
    float:right;
    margin-top: -82px;
    margin-right: -154px;
    width: 154px;
    height: 31px;
    background-color: #BC9075;
    font-family: times new roman;
    font-size: 9pt;
    font-weight: bold;
	z-index: 1000;
}

#tleft2 a {
    text-decoration: none;
    color: #fff;
}

#toptitle {
    float:right;
    margin-top:119px;
}

#tright2 {
    float: right;
    margin-top: -82px;
    margin-right: -320px;
    padding-top: 6px;
    width: 154px;
    height: 25px;
    background-color: #95b023;
    font-family: times new roman;
    font-size: 9pt;
    font-weight: bold;
	z-index: 1000;
}

#tright2 a {
    text-decoration: none;
    color: #fff;
}

#navigation-container{
    margin-top: 0px;
    background: #343434;
    border-bottom: solid #e77e22 4px;
    height: 31px;
    padding-top: 6px;
    width: 976px;
}

#image-container {
margin-top: 5px;
}

#image-cycle {
	width: 976px;
	height: 450px;
	position: relative;
}
#image-cycle img{
	width: 976px;
	height: 450px;
	position: absolute;
	top: 0px;
	left: 0px;
}

#selectors{
	display:block;
	background:transparent;
	position:absolute;
	top:5px;
	right:0px;
	overflow:auto;
	margin:0px;
	list-style:none;
	z-index:100;
}
#selectorContainer{
	display:block;
	width:976px;
	height:49px;
	margin:0px auto;
	position:absolute;
	top:400px;
	overflow:hidden;
	z-index:100;
    background-color: rgba(0,0,0,0.5);
    border-top: solid #fff 1px;
}
.selectorCircle{
	float:left;
	width:26px;
	height:26px;
	margin:7px 5px;
	background:transparent url('../images/circle.png') top center no-repeat;

}
.selectorCircle.activeSlide{
	background:transparent url('../images/circle_white.png')top center no-repeat;
}
.selectorCircle a{
	display:block;
	width:26px;
	height:26px;
	margin:0px;
	padding:0px;
	text-decoration:none;
}


#image-cycle2{
float:left;
height: 50px;
margin-top: -36px;
margin-left: 5px;
width:700px;
color: #fff;
font-size: 15pt;
z-index: 10000;
}

#caption {
font-style: italic;
font-weight: bold;
}

#content{
	height: 100%;
	font-family: times new roman;
	font-size:90%;

}

#footer {
	display:inline;
	text-align:center;
	width: 966px;
	float: left;
	font-family: times new roman;
	font-size: 12pt;
	background-color: #343434;
    margin-top: 7px;
    margin-bottom: 3px;
    color: #fff;
    padding: 5px;
}

/*Navigation*/

#navigation {
    float:left;
    margin-top: -38px;
    z-index: 100;
}
#navigation ul{
	margin: 0px;
	padding: 0px;
}

#navigation ul li{
	display: inline;
}

#navigation a {
    font-size: 16pt;
    font-weight: normal;
	font-family:times new roman;
    color: #fff;
    text-decoration: none;
    margin-left: 33px;
		margin-right: 0px;
    padding: 10px 0px;
}

#navigation li:hover a{
	color: #e77e22;
}

#navigation ul li ul{
	display: none;
	position: absolute;
	top: 33px;
	left: 120px;
	z-index: 200;
    background: #e77e22;
    border-bottom: solid #343434 4px;
	width: 165px;
	color: #343434;
	margin: 0px 0px 0px 0px;
	padding: 5px 35px 5px 35px;
}
#navigation ul li:hover ul li a{
	color: #fff;
	font-weight: normal;
}
#navigation ul li:hover ul li:hover{
	color: #343434;
}
#navigation ul li:hover ul li:hover a{
	color: #343434;
}
#navigation ul li ul a{
	margin: 0px;
	font-size: 1.1em;
}
#navigation ul li:hover ul{
	display: block;
}
#navigation ul li ul li{
	display: list-item;
	list-style: circle;
	padding: 4px 0px;
	color: #fff;

}

#navigation .jqueryslide menu ul li ul{
	position: absolute;
	top: 31px;
	left: 210px;
}

/*Content*/
#content {
    float:left;
    display:inline;
    width:100%;

}

#content #content_text{
	float:left;
	display:inline;
	width:936px;
    margin-top: -6px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right:20px;
    background: #eee;
    border-top: solid #e77e22 4px;
    font-size: 13pt;
    color: #343434;
    line-height: 2;
}
#content_text h3{
	font-size: 1.5em;
}

#thirdright{
	float: right;
	width: 33%;
	font-size: 10pt;
	padding: 20px;
	text-align: center;
	border-left: 1px solid #343434;
	margin-left: 20px;
}
dl{
	line-height: 1em;
}
dd{
	margin-left: 15px;
}
dt{
	font-size: 15pt;
	font-weight: bold;
	margin-bottom: 5px;
}
#content_text ul{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
#content_text li{
	display: inline;
	background-color: #e77e22;
	color: #fff;
	padding: 5px;
	margin: 0px;
}
#content_text a{
	color: #343434;
	font-weight: bold;
}
#content_text h3{
	float: left;
	margin-right: 40px;
}
/*Footer*/
#footer{
	z-index: 3000;
}
address{
	display:inline;
	font-style:normal;
}

#footer a{
	color:#fff;
	text-decoration:underline;
}

#footer a:hover,#footer a:focus{
	text-decoration:none;
}


/*Credit*/
#credit {
font-size: 8pt;
text-align: center;
}

#credit a{
	color:#000;
}

#credit a:hover,a:focus{
	text-decoration:none;
}

#content_text .availability-key {
    margin: 0px auto 8px auto;
    padding: 0px;
    width: 140px;
    font-size: 90%;
}
#content_text h4.inline {
    display: inline-block;

    zoom: 1;
    *display: inline;
}
#content_text .availability-key h4 {
    font-size: 110%;
}

#content_text .availability-key span {
    padding: 2px 4px;
}
#content_text .availability-key .available {
    background: #51B44B ;
}
#content_text .availability-key .booked {
    background: #EB5558;
}

#content_text .text-center {
    text-align: center;
    float: none;
    margin: auto;
}
#content_text h3.text-center {
    margin-bottom: 4px;
}

#services:before {
	content: "Please contact us on 01751 474474 or email for prices."
}

.price-table{
    width: 30%;
    text-align: center;
    margin-left: 120px;
	display: none;
}

.price-table th{
    color: #e77e22;
}

.price-table tr:nth-child(2n){
    background-color: gainsboro;
}

.guest-comment {
	margin-left: 10%;
	margin-right:10%;
	font-size: 23px;
}

.guest-comment-sub {
	margin-left: 10%;
	margin-right:10%;
	color: rgb(119, 119, 119);
	font-style: italic;
}


/*--------- RESPONSIVE CSS ------------*/

/*
you always want to start with the widest elements first. 
In this case, the main page of the width is set at 976, so when 
the browser reaches 976px we want the width to be set to 100%
*/

button.nav-btn {
	display: none;
}

@media screen and (max-width: 976px) {
	#bcontainer, #content, #header_container, #header, #navigation-container, #content, #image-container, #image-cycle, #image-cycle img {
		width: 100%;
	}


	#content #content_text {
		width: auto !important;
		margin-top: 0px;
		margin: 0px auto;
	}

	#footer {
		width: 98%;
	}

	/* since the broser width is reducing, we want the nav bar to also 
	reduce in width. Right click on any link in the nav bar and you can see in 
	the css there is a margin of 30px set on the left of each link. We want to redice these.
	*/
	ul li a {
		margin-left: 5px !important;
	}

	#title {
		display: block;
		position: static;
		float: left;
		clear: left;
		margin-top: 30px;
	}
	#tleft, #tright {
		margin-top: 20px;
		margin-right: 10px;
	}
	#navigation {
		margin-top: 0px;
	}

	/*the below code is a quick but very bad fix. Basically the website was so poorly written before this is the only quick way around.*/
	#navigation ul li ul{
		top: 20px;
		left: 100px;
		border-top: 11px solid #343434;
	}
}

@media screen and (max-width: 976px) {
	ul li a {
		font-size: 80% !important;
		padding: 0px 20px !important;
	}
}
@media screen and (max-width: 730px) {
	#title {
		width: 100% !important;
	}
	#title img {
		width: 100% !important;
	}
	#tleft, #tright, #tleft2, #tright2 {
		display: none;
	}
	#header_container {
		height: auto !important;
	}
	#navigation-container {
		margin-top: 50px;
	}
	#navigation ul li {
		padding: 25px 0px !important;
	}

}
@media screen and (max-width: 680px) {
	ul li a {
		padding: 0px 5px !important;
	}
}
@media screen and (max-width: 600px) {
	#image-container, #image-cycle, #image-cycle img {
		height: 250px;
	}
	#thirdright {
		flaot: none;
		clear: both;
		width: 100%;
	}
}

@media screen and (max-width: 545px) {
	/* when you cant really make width of the navbar any smaller when the li's are displayed inline, we hide them and display a button */
	/* We also want the hidden navbar to display as a vertical list, so when the user clicks the menu button it appears vertically */

	button.nav-btn {
		display: block;
		width: 100%;
		padding: 15px;
		margin-top: -38px;
		margin-bottom: 5px;
		background-color: #E77E22;
		color: #343434;
		font-size: 150%;
		border: none;
	}
	#navigation {
		width: 100%;
	}
	#navigation ul {
		display: none;
	}

	ul li {
		float: none !important;
		display: block !important;
		clear: left !important;
	}
	ul li ul {
		display: none;
	}
	ul li a {
		font-size: 100% !important;
	}
	#navigation {
		margin-top: 0px;
	}
	#navigation-container {
		height: auto !important;
		padding: 0px !important;
	}
	#navigation-container {
		height: auto;
		padding: 20px 0px;
	}
	#nav-holder {
		padding-bottom: 15px !important;
		text-align: center !important;
	}
	#navigation li {
		width: 100% !important;
		padding: 10px 0px !important;
	}

	#navigation ul li ul {
		display: none;
		position: static;
		float: none;
		clear: both;
		width: 100%;
		padding: 0px !important;
	}

	#navigation ul li:hover ul{
		display: none;
	}

}
@media screen and (max-width: 500px) {
	#footer {
		width: 97.5%;
	}
}