/*
 
Dark Blue
#155872

Light Blue
#ADC4CE

Gold
#ffd700

NB: I am trying to get used to coding for responsive sites, hense the use of % in some places. It is not responsive, but could be.

*/

*{
	padding: 0;
	margin: 0;
	color: #155872
}

a{
	text-decoration: none;
	color: inherit
}

li{
	list-style:none
}

p{
	margin-top: 2%;
	max-width: 540px
}

body{
	font-family: 'Open Sans', sans-serif;
	font-size: 10pt;
	line-height: 1.3em
}

#wrapper{
	max-width: 1200px;
	margin: auto;
	background-color: white
}

/*header*/

#header{
	background-image: url(../images/header.jpg)
}

#logo{
	margin-left: 60px
}

/*menu*/

nav{
	width: 68%;
	border-bottom: solid 1px whitesmoke;
	margin: auto
}

nav a{
	margin: 1% 4%;
	display: inline-block;
	font-size: 1.2em;
	opacity: 0.6;
	-webkit-transition: opacity 1s;
	padding-top:2%		
}

nav a:hover{
	opacity: 1
}

#selected{
	color: #ffd700
}

/*headings*/

h1{
	margin-bottom: 3%
}

h2{
	font-weight: 600;
	color: #ADC4CE	
}

/*content*/

#content{
	width: 90%;
	padding: 5%
}

/*footer*/

#footer{
	background-color: #ADC4CE;
	width: 95%;
	padding: 3% 0 6% 5%
}

#footer p{	
	width: 600px;
	margin:0
}

/*homepage*/

.ad{
	padding: 3%;
	background-color: whitesmoke;
	border:  solid 1px white;
	width: 25%;
	height: 350px;
	display: inline-block;
	margin:0;
	-webkit-transition: opacity 1s;
	vertical-align: top
}

.ad:hover, .attractAd:hover{ /*from attractions page*/
	opacity: 0.4	
}

#middleAd{
	margin: 0 2.5%
}

.ad h2{
	margin-top: 8%
}

#introGallery{
	width: 820px;
	margin: 2% auto 5% auto
}

#introPara{
	max-width: 800px;
	margin: 0 auto 3% auto;
	font-size: 1.1em;
	line-height: 1.4em
}

span{
	color: #ffd700;
	font-weight:600
}

#drivingDiv{
	margin-top: 5%
}

#drivingDiv a:hover{
	color: #ADC4CE
}
/*roompage*/

.roomAd, .attractAd{
	padding:4% 5%;
	border: solid 1px white;
	background-color: whitesmoke;
	margin-bottom: 2%;	
	position:relative;
	-webkit-transition: opacity 1s
	}

.info{
	display: inline-block;
	margin-left: 3%;
	vertical-align: top;
	width: 60%	
}

.price{
	background-color:#ADC4CE;
	border: solid 1px white;
	padding: 1% 2%;
	width: 100px;
	position: absolute;
	top: 20px;
	right: -2px
}
h4{
	margin-top: 2%
}

#roomH1{
	margin-top: 6%
}

.bookButton{
	background-color: #FFD700;
	border: solid 1px white;
	padding: 1% 2%;
	opacity: 0.6;
	-webkit-transition: opacity .5s;	
	width: 80px;
	height: 20px;
	position:absolute;
	bottom: 20px;
	right: 20px
}

.bookButton:hover{
	opacity: 1
}
	
.bookButton h4{
	color:white
}

/*Forms*/

input, label{
	display:block
}

fieldset{
	padding:4% 8% 8% 8%;
	background-color:white;
	border:solid 1px whitesmoke;
	margin: 10% 0
}

input, textarea{
	width: 500px;
	border:solid 1px #ADC4CE;
	margin-top:1px
}

label{
	font-size: 0.8em;
	margin: 4% 0 1% 2%
}

#bookingFieldSet label{
	font-size: 1em	
}

textarea{
	font-size:0.8em;
	font-family: 'open sans';
	padding: 2%;
	margin-top: 4%;
	color: #C7D2D2
}

input{
	height:26px;
	padding: 1% 2%;
	color: #C7D2D2
}

form{
	max-width: 300px
}

select{
	width: 145px;
	padding: 2%;
	margin-bottom:5%
}

input[type="submit"]{
	color:#155872;
	background-color:#C7D2D2;
	opacity: 0.6;
	-webkit-transition: opacity .5s;	
		width: 80px;
	height: 40px;
	margin-top: 4%
}

input[type="submit"]:hover{
	opacity: 1
}

.dateTextBox{
	width: 130px
}

input[type="radio"]{
height: 15px;
width: 15px;
float:left;
margin-right: 2%
}

#bookingFieldSet input, #bookingFieldSet label{
	margin-top: 5%
}