@charset "utf-8";
/* -------------------------------------------------- COLOURS, SHADINGS AND SHADOWS --------------------------------------------------- */

html  {
	background-color: #9b5801; /* added this tag with 100% height so that the colour at the bottom of page matches footer background and have a different background colour in the body */
    }
body {
	color: #FFF;
	background-color: #452003;
}
h1 , h2{
	color: #A45E00;
	text-shadow: 2px 2px 2px #111;
}
a:link {
	color: #ffddaf;
}
a:visited {
	color: #fcc070;
}
a:hover, a:active, a:focus {
	color: #feb149;
}
#page-title  {
	border-bottom-color: #A45E00;
	color: #A45E00;
	box-shadow: 0 6px 6px #222;
}
.highlight-colour {
	color: #A45E00;
}
cite.credit {
	color: #A45E00;
	}
cite.caption {
	color: #A45E00;
}
#top{
background: #1c191b; /* Old browsers */
background: -moz-linear-gradient(top,  #1c191b 0%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1c191b), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1c191b 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #1c191b 0%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #1c191b 0%,#000000 100%); /* IE10+ */
background: linear-gradient(top,  #1c191b 0%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1c191b', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
	box-shadow: 0 5px 12px #111;
}
#phone, #site-title  {
	color: #A45E00;
}
nav ul a, nav ul a:link , nav ul a:visited{
	background: #A45E00; /* Old browsers */
	background: -moz-linear-gradient(top,  #A45E00 0%, #773B00 32%, #A45E00 53%, #000000 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#A45E00), color-stop(32%,#773B00), color-stop(53%,#A45E00), color-stop(100%,#000000)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #A45E00 0%,#773B00 32%,#A45E00 53%,#000000 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #A45E00 0%,#773B00 32%,#A45E00 53%,#000000 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #A45E00 0%,#773B00 32%,#A45E00 53%,#000000 100%); /* IE10+ */
	background: linear-gradient(top,  #A45E00 0%,#773B00 32%,#A45E00 53%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A45E00', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
	color: #FFF;
}
nav ul a:hover, nav ul a:active, nav ul a:focus {
	color: #A45E00;
	background: #442813; /* Old browsers */
background: -moz-linear-gradient(top,  #442813 0%, #452003 32%, #442813 53%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#442813), color-stop(32%,#452003), color-stop(53%,#442813), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #442813 0%,#452003 32%,#442813 53%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #442813 0%,#452003 32%,#442813 53%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #442813 0%,#452003 32%,#442813 53%,#000000 100%); /* IE10+ */
background: linear-gradient(to bottom,  #442813 0%,#452003 32%,#442813 53%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#442813', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

}
#banner img {
	box-shadow: 0 8px 12px #111;
}

.sidebar img {
	border: 1px solid #A45E00;
}
#bottom {
	background: #a45e01; /* Old browsers */
background: -moz-linear-gradient(top,  #a45e01 0%, #824900 50%, #844600 51%, #9b5801 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a45e01), color-stop(50%,#824900), color-stop(51%,#844600), color-stop(100%,#9b5801)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #a45e01 0%,#824900 50%,#844600 51%,#9b5801 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #a45e01 0%,#824900 50%,#844600 51%,#9b5801 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #a45e01 0%,#824900 50%,#844600 51%,#9b5801 100%); /* IE10+ */
background: linear-gradient(to bottom,  #a45e01 0%,#824900 50%,#844600 51%,#9b5801 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a45e01', endColorstr='#9b5801',GradientType=0 ); /* IE6-9 */
	box-shadow: 0 -8px 12px #111;
}

footer {
	color: #FFF;
}
footer a.logo {
	background-color: #000;
	box-shadow: 0 0 6px #000;
}
footer a, footer a:link {
	color: #ffddaf;
}
footer a:visited {
	color: #FFF;
}
footer a:hover, footer a:active, footer a:focus {
	color: #feb149;
}
#contactForm {
	background: #452003;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #452003), color-stop(74%, #3F1A00),	color-stop(100%, #452003) 
          );
	background: -moz-linear-gradient(
                            left top, left bottom, color-stop(0%, #452003), color-stop(74%, #3F1A00),
	color-stop(100%, #452003) 
                        );
	box-shadow: 0 5px 6px #111;
}
#contactForm a {
	color: #ffddaf;
	text-shadow: 0px -1px 0px #000;
      }
fieldset {
	color: #A45E00;
	  }
fieldset label.infield {
	color: #A45E00;
	text-shadow: 0px 1px 0px #fff;
    }
label {
	color: #FFF;
}
input {
	color:#eef0e0;
	background: #452003 url('../images/inputSprite.png') no-repeat 4px 5px;
	background: url('../images/inputSprite.png') no-repeat 4px 5px, -moz-linear-gradient(top, #452003 0%, #682f02 50%);
	background:  url('../images/inputSprite.png') no-repeat 4px 5px, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#452003), color-stop(50%,#682f02)
          );
	box-shadow: inset 1px 1px 0px #777;
}	  
	input::-webkit-input-placeholder, textarea::-webkit-input-placeholder   {
    	color: #ffddaf;
		text-shadow: 0px -1px 0px #38506b;
	}
	input:-moz-placeholder, textarea:-moz-placeholder  {
	    color: #ffddaf; 
		text-shadow: 0px -1px 0px #38506b;
	}
textarea {
	background: #452003;
	background: -moz-linear-gradient(top, #452003 0%, #682f02 50%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#452003), color-stop(50%,#682f02)); /* webkit */
	border:1px solid #452003;
	box-shadow: 0px 1px 0px #f2f2f2;
	color: #cacbc4;
	text-shadow: 0px -1px 0px #334f71;
	}
input:focus, textarea:focus {
	background: #3e1c01;
	}
input[type=submit] {
	background-color: #A45E00;
	background-image: none;
}
#sendMessage {
	background: -moz-linear-gradient(top, #A45E00 0%, #452003 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#A45E00), color-stop(100%,#452003)); /* webkit */
	box-shadow: 0px 1px 5px #111;
	color: #FFF;
	text-shadow:0px 1px 0px #000;
	}
#sendMessage:hover {
	background-color: #452003;
	background: -moz-linear-gradient(top, #452003 0%, #8f4206 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#452003), color-stop(100%,#8f4206)); /* webkit */
	box-shadow: inset 1px 1px 5px #000;
	color: #ffddaf;
	text-shadow:0px 1px 2px #111;
	 }
#sendMessage:active {
	background: -moz-linear-gradient(top, #8f4206 0%, #a45e00 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8f4206), color-stop(100%,#a45e00)); /* webkit */
	color: #ffddaf;
	text-shadow:0px 1px 2px #111;
}



/* ----------------------------------------------------- END OF COLOURS, SHADING AND SHADOWS ------------------------------------------- */



/* ----------------------------------------------------- END OF COLOURS, SHADING AND SHADOWS ------------------------------------------- */




/* STRUCTURE */
html  {
	height: 100%;
    }
body {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	line-height: 1.4;
	background-image: url(../images/background.jpg);
	background-repeat: repeat;
	background-position: center top;
}
section {
	padding-bottom: 12px;
	width: 100%;
	margin-bottom: 24px;
	display: block;
	clear: both;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl {
	text-align: left;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 24px;
	padding-left: 0px;
	display: block;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 12px;
	margin-left: 0px;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
	padding-right: 15px;
	padding-left: 15px; 
}
h1 {
	font-size: xx-large;
}
a img {
	border: none;
}
a:link {
	text-decoration: underline;
}
a:visited {
	text-decoration: underline;
}
a:hover, a:active, a:focus { 
	text-decoration: none;
}
#page-title  {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	padding-bottom: 6px;
	margin-bottom: 36px;
}
cite.credit {
	font-size: small;
	text-align: center;
	display: block;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 24px;
}
cite.caption {
	font-size: medium;
	text-align: center;
	display: block;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 24px;
}
.wrapper {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	display: block;
}
#top {
	width: 100%;
	padding-top: .5em;
	display: block;
	clear: both;
	margin-bottom: 0em;
	z-index: 10;
}
header {
	max-width: 1000px;
	min-width: 226px;
	margin-right: auto;
	margin-left: auto;
	display: block;
	z-index: 1000;
	padding-bottom: 1em;
}
#logo {
	margin-bottom: 0em;
	margin-top: 10px;
	display: block;
	float: left;
	min-width: 144px;
	max-width: 288px;
	width: 30%;
	height: auto;
	padding-bottom: 0em;
	margin-left: 2%;
}
hgroup , nav{
	padding-bottom: 0em;
	margin-left: 35%;
	text-align: right;
	display: block;
	min-width: 240px;
	max-width: 100%;
	width: 65%;
}
#phone, #site-title, #contact{
	text-align: right;
	display: block;
	padding: 0px;
	margin-right: 2%;
}
#site-title {
	font-size: 110%;
	font-weight: bold;
}
#phone  {
	font-size: xx-large;
	margin-top: 1.5em;
}
nav {
	display: block;
	min-height: 2em;
	padding: 0px;
}
nav ul {
	list-style: none;
	display: block;
	width: 100%;
	text-align: right;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
nav ul li {
	display: inline-block;
	width: 15%;
	text-align: center;
	padding-right: 0px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: .5%;
	margin-bottom: 0px;
	margin-left: .5%;
}
nav ul a, nav ul a:link , nav ul a:visited {
	display: inline-block;
	width: 96%;
	text-decoration: none;
	text-align: center;
	font-size: 100%;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	-moz-border-radius: 10px 10px 0px 0px / 10px 10px 0px 0px;
	border-radius: 10px 10px 0px 0px / 10px 10px 0px 0px;
	margin-top: 0px;
	margin-right: 2%;
	margin-bottom: 0px;
	margin-left: 2%;
}
nav li ul {
	display: none;
}
nav li:hover ul {
	display: block;
	position: absolute;
	width: 10.2em;
	text-align: left;
	padding-top: 1em;
	padding-bottom: 1em;
	margin: 0;
	border: none;
	-moz-border-radius: 0px 0px 10px 10px / 0px 0px 10px 10px;
	border-radius: 0px 0px 10px 10px /0px 0px  10px 10px;
	background-image: url(../images/background.jpg);
	background-repeat: repeat;
	z-index: 1000;
}
nav li:hover li {
	float: none;
	width: 10em;
	padding:0;
	margin:0;
}
nav li:hover li {
    float: none;
}
nav li:hover li a, nav li:hover li a:hover {
	-moz-border-radius: 0px;
	border-radius: 0px;
	text-align:left;
	margin: 0;
}

/* ~~ This fixed width container surrounds all other blocks ~~ */
.container {
	max-width: 1000px;
	min-width: 226px;
	clear: left;
	padding-top: 1em;
	padding-right: 0px;
	padding-bottom: 2em;
	padding-left: 0px;
	height: auto !important;

	display: block;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0em;
	margin-left: auto;
	z-index: 0;
	}
#banner {
	height: auto;
	margin-left: auto;
	float: none;
	z-index: 0;
	margin-right: auto;
	display: block;
	text-align: center;
	margin-top: -1em;
	width: 100%;
}
#banner img {
	width: 100%;
	height: auto;
	margin-bottom: 0em;
	padding: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

.sidebar {
	float: left;
	width: 30%;
	min-width: 240px;
	max-width: 288px;
	padding-bottom: 10px;
	margin-top: 18px;
	margin-right: 2%;
	margin-left: 2%;
	padding-top: 2em;
	padding-right: 0px;
	padding-left: 0px;
}
.sidebar h1 {
	font-size: large;
	font-weight: bold;
}
.sidebar h2, .sidebar h3 {
	font-size: medium;
	font-weight: bold;
}
.sidebar ul, .sidebar ol {
	padding: 0 15px 15px 40px; 
}
.sidebar img {
	width: 96%;
	max-width: 300px;
	margin-right: auto;
	margin-left: auto;
	border: 1px solid;
	padding: 3px;
	text-align: center;
	height: auto;
	display: block;
}
.sidebar .MediaPlayer {
	width: 100%;
	max-width: 240px;
	margin-right: auto;
	margin-left: auto;
	border: none;
	padding: 0px;
	text-align: center;
	max-height: 180px;
	display: block;
}
img.png {
	border: none;
}
.content {
	min-width: 226px;
	max-width: 650px;
	width: 63%;
	float: right;
	padding-top: 3em;
	padding-right: 0px;
	padding-bottom: 0em;
	padding-left: 0px;
	margin: 0px;
}
.content img{
	display: block;
	margin-right: auto;
	margin-left: auto;
	padding: 3px;
	border: 1px solid;
	max-width: 95%;
}
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
	padding-top: 0;
	padding-right: 15px;
	padding-bottom: 0px;
	padding-left: 40px;
}
.col-3  {
	width: 33%;
	min-width:206px;
	float: left;
	text-align: left;
	padding-bottom: 2em;
}
.last {
	clear: both;
}
#bottom {
	width: 100%;
	min-width: 226px;
	clear: both;
	margin-right: 0px;
	margin-left: 0px;
	padding-top: 10px;
	padding-bottom: .2em;
	display: block;
	margin-top: 0em;
}

/* ~~ The footer ~~ */
footer {
	position: relative;
	clear: both;
	max-width: 1000px;
	min-width: 226px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 1.2em;
	padding-left: 0;
}
footer a.logo {
	height: auto;
	padding-top: 12px;
	padding-bottom: 12px;
	float: left;
	display: block;
	text-align: center;
	margin-top: 0px;
	margin-right: 1%;
	margin-bottom: 24px;
	margin-left: 1.25%;
	width: 31%;
	min-width: 196px;
}
footer .logo img {
	width: 65%;
	max-width:196px;
	height: auto;
}
footer address {
	float: left;
	text-align: left;
	font-size: small;
	width: 48%;
	margin-right: 1%;
	margin-left: 1%;
	display: block;
	margin-bottom: 0px;
	padding: 0px;
}
address#webmaster {
	text-align: right;
	padding-bottom: .5em;
}

/*HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. */
.container, header, section, footer, aside, nav, article, figure {
	display: block;
}

/* THE CONTACT FORM */
form, fieldset, input    {
  margin: 0;
  padding: 0;
  border: none;
  }
#contactForm {
	max-width: 280px;
	width: 98%;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 24px;
	margin-left: auto;
}
#contactForm fieldset {
	padding: 6px;
      }
#contactForm h1, #contactForm h2 {
	text-align: center;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 12px;
	margin-left: 0;
}
#contactForm h2 {
	margin: 0px;
	font-weight: bolder;
	font-size: 115%;
	}
#contactForm p {
      position: relative;
      }
fieldset {
	padding: 12px;
	  }
fieldset label.infield {
	position: absolute;
	text-align: left;
	top: 3px !important;
	left: 35px !important;
	line-height: 29px;
    }
label {
	float: left;
	clear: left;
	text-align: right;
	font-size: 70%;
	text-transform: uppercase;
	margin-top: 11px;
	margin-right: 20px;
	margin-bottom: 0;
	margin-left: 6px;
}
input {
	font-size: 14px;
	width: 85%;
	padding: 7px 8px 7px 30px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	-webkit-border-radius: 24px;
	-moz-border-radius: 24px;
	border-radius: 24px;
}	  
	
input#email { 
 	background-position: 4px 5px; 
	background-position: 4px 5px, 0px 0px;
	}
 input#location { 
 	background-position: 4px -20px; 
	background-position: 4px -20px, 0px 0px;
	}
 input#name { 
 	background-position: 4px -46px; 
	background-position: 4px -46px, 0px 0px; 
	}
 input#tel { 
 	background-position: 4px -76px; 
	background-position: 4px -76px, 0px 0px; 
	}
textarea {
	width: 90%;
	height: 150px;
	padding: 12px 10px 0px 10px;
	margin: 0 0 20px 0;
	border:1px solid;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	font-family: sans-serif;
	font-size: 16px;	
}
input[type=submit] {
	font-size: 16px;
	line-height: 14px;
	background-image: none;
	float: right;
	cursor: pointer;
	border: none;
	width: 40%;
	margin-top: 0;
	margin-right: 5px;
	margin-bottom: 12px;
	margin-left: 0;
	height: 30px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	font-weight: bold;
	text-indent: 0px
	 }
	#map {
		margin-top: 1em;
		margin-bottom: 1em;
		padding-top: 1em;
		padding-bottom: 1em;
		display: block;
		}
	footer a.logo span {
		display:none;
		}


/* ----------------------------------------------- =Responsive Structure
----------------------------------------------- */

@media (max-width: 800px) {
	
	/* Nothing needed for this size */
	
	#contact {
		font-size: 110%;
	}
	#phone {
		font-size: 150%;
		}
	nav ul a, nav ul a:link , nav ul a:visited {
		font-size: 90%;
	}
	

}
@media (max-width: 650px) {
	/* @media (max-width: 650px) Reduce font-sizes for better readability on smaller devices and centre content */
	p {
		line-height: 1.5;
		font-size: 110%;
	}

	h1, .sidebar h1 {
		18px;
	}

	h2, .sidebar h2 {
		14px;
	}

	h3, .sidebar h3 {
		12px;
	}
	#top hgroup, nav, #logo, #site-title, #phone, #contact, .sidebar, .content {
		margin-left: auto;
		margin-right: auto;
		float: none;
		text-align: center;
		width: 100%;
	}
	nav ul li {
		min-width: 80px;
	}
	header {
		padding-bottom: 0;
	}
		#contact {
		font-size: 110%;
	}
	#site-title {
		display:none;
	}
	#logo {
		width: 70%;
	}
	nav  {
		min-height: 1.5em;
		max-width:100%;
		width: 100%;
		text-align: center;
		margin-top: 0;
		margin-right: 0%;
		margin-left: 0%;
	}
	nav ul {
		float: none;
		text-align: center;
		width: 100%;
		margin-right: auto;
		margin-left: auto;
	}	
	nav ul li{
		font-size: 15px;
		padding-top: 4px;
		padding-bottom: 4px;
	}
	.sidebar{
		min-width: 80%;
		max-width: 96%;
	}
	footer a.logo {
		float: none;
		margin-left: auto;
		margin-right: auto;
	}
	footer .logo img {
		width: 90%;
	}
		footer address, address#webmaster  {
		float: none;
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		font-size: x-small;
}
}
@media (max-width: 450px) {
	html, body {
    	height: auto;
	}
	#logo {
		margin-bottom: 0em;
		padding-bottom: .5em;
		width: 80%;
	}
	#phone  {
		margin-top: 0;
		margin-bottom: 1em;
	}
	#site-title {
			display: none;
		}
	.col-3 {
		float: none;
		margin-left: auto;
		margin-right: auto;
	}
	.sidebar {
		margin-top: 1em;
	}
	#map {
		display: none;
	}
	#contactForm {
		width: 96%;
		max-width: 300px;
		margin-top: 1em;
		margin-right:auto;
		margin-left: auto;
		padding-top: 0;
	}
	h1, .sidebar h1 {
		font-size: 130%;
	}
	h2, .sidebar h2 {
		font-size: 120%;
	}
	h3, .sidebar h3 {
		font-size: 110%;
	}	
}
	
	
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
	body {
		padding: 0;
	}
	#logo {
		min-width: 144px;
	}
}


/* =Print
----------------------------------------------- */

@media print {

	body {
		background: none !important;
		font-size: 10pt;
		color: #000;
	}
	.wrapper {
	clear: both !important;
	display: block !important;
	float: none !important;
	max-width: 100%;
	position: relative !important;
	width: 1000px;
	}
	#logo {
		padding: 0;
	}
	#top {
		background: none;
	}
	#top hgroup {
		margin: 0;
	}
	#site-title a {
		font-size: 21pt;
	}
	#phone {
		font-size: 16pt;
	}

	#nav {
		display: none;
	}

	#content {
		margin: 0;
		width: auto;
	}

	.page-link {
		display: none;
	}

	#footer {
		display: none;
	}
}