html, body  {height:100%;width:100%;margin:0;padding:0;}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: normal; 
	font-weight: normal;
	font-size: 12pt;
	text-decoration: none;
	background:silver;
	background-color: silver;
	color:black;
	text-rendering: optimizeLegibility;
}
input, select, textarea {
	font-size:inherit;
}
input.btn {
	cursor:pointer;
}
button {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 6px 18px;
  text-align: center;
  vertical-align:top;
  text-decoration: none;
  display: inline-block;
  font-family:'Source Sans Pro', sans-serif;
  font-size: 17px;
  margin: 4px 2px;
  text-align:center;
  cursor:pointer;
}
button:hover {background-color: #3e8e41}

button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
button.enquire {border-radius: 5px;}

@media only screen and (max-width: 600px) {
  span.notmobile {
    display: none;
  }
}

/*  general purpose styles */panel
a:focus, *:focus {outline: none;}
a:link, a:visited {text-decoration: none; color:blue;font-style:italic;}
a:active {text-decoration: none; color:blue;}
a:hover{ text-decoration: underline}

h1 {margin-top:1em; color:#7f3e98; font-weight:normal; font-size:140%; }
h2 {margin-top:1em; color:#7f3e98; font-weight:normal; font-size:120%;}
h3 {color:#7f3e98; font-size:100%; font-weight:normal;}

img {border: 0;}

#hdr {
	display:inline-block;
	margin:0 0 0 0;
	width:100%;
	background-color:#808080
}
div.hdr-right {
	margin:1em;
	float:right;
	color:red;
	font-size:xx-large;
	font-weight:bold;
}
#processHeading {
	margin: 1em;
	float:left;
}
#hdr h1 {
	font-weight:bold;
	font-size:200%;
	margin-top:0;
	margin-bottom:0;
	padding:0.2em 1em 0.2em 0;
	color:white;
}
#hdr h2 {
	margin-top:0;
	margin-bottom:0;
	padding:0 1em 0.5em 0;
	color:white;
}
#ftr {
	display:inline-block;
	margin:0 0 1em 0;
	width:100%;
}
.footerText {
	font-size:small;
	margin-left:0.5em;
}
.footerText h3 {
	color:black;
	font-weight:bold;
}
#main {
	clear:both;
	margin:0;
}
.bg {
  background-image: url("../images/penhill_1.jpg");
  position: relative;
  opacity: 0.85;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}
.hdrbg {
  background-image: url("../images/sign7.jpg");
  position: relative;
  opacity: 0.85;
  background-position: left;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}
.hdrbg2 {
  background-image: url("../images/sign6.jpg");
  position: relative;
  opacity: 0.85;
  background-position: left;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}
#banner p {
    padding: 15px;
	text-align:center;
	color:purple;
	font-size: 18pt;
	font-weight: bold;
}
div.panel-center {
	margin: auto;
	width: 90%;
	border: 0;
	padding: 10px;
}
div.panel-container {
	display:inline-block;
	width: 100%;
    margin: 0;
    padding: 10px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	-opera-border-radius:6px;
	-khtml-border-radius:6px;
	border-radius:6px;
	background: silver;
	opacity: 1;
	border: 0;
	color:black; 
}
div.panel-header {
	display:inline-block;
	width: 100%;
    margin: 0;
    padding: 10px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	-opera-border-radius:6px;
	-khtml-border-radius:6px;
	border-radius:6px;
	background: green;
	opacity: 1;
	border: 0;
	color:white; 
}
div.panel-content {
	display:inline-block;
	width: 275px;
	float:left;
    margin: 15px;
    padding: 10px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	-opera-border-radius:6px;
	-khtml-border-radius:6px;
	border-radius:6px;
	background: white;
	background-color: white;
	opacity: 1;
	border: 0;
	color:black;
}
div.panel-wide {
	display:inline-block;
	float:left;
    margin: 15px;
    padding: 10px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	-opera-border-radius:6px;
	-khtml-border-radius:6px;
	border-radius:6px;
	background: white;
	background-color: white;
	opacity: 1;
	border: 0;
	color:black;
}
.caption {
	float: left;
	font-size: 14pt;
	font-weight: bold;
}

.topicstate {
	float: right;
	font-size: medium;
	color:#222222;
}

/* 2/3 column with responsive behaviour */
* {
  box-sizing: border-box;
}
/* Responsive layout - stops content panel overflow for mobile (one column) displays */
@media screen and (max-width: 370px) {
	div.panel-content {
		width: 240px;
	}
}
@media screen and (max-width: 570px) {
	#hdr h1 {margin-top:1em; font-size:140%; }
	.hdrbg {
		background-image: url("../images/sign6.jpg");
	}
}