/* CSS Document

Sections:
1a Global and Resets
1b General Styling
2 id/section specific
	2a header
		2a1 Nav
		2a2 Nav Areas
	2b Sections, etc
		2b0 main
		2b1 Areas
		2b2 Welcome
		2b3 Credentials
		2b4 types
	2c footer
3 Contact Form Styling
	3a FieldSets and Legends
	3b Form Input Sytling
	3c Form Validation
	3d Form: ID-specific, inc widths
4 Slideshow Test2zz1
*/

/* 1a Global and Resets */
:root {
	/*font-size: large;*/
}
* {
	margin: 0;
	border: 0;
	padding: 0;
}
body {
	margin: 0;
	border: 0;
	padding: 0;
	display: flex;
	flex-flow:column nowrap;
	align-items: center;
/*	height: 100vh;*/
	background-color: #fff;
	/*background-image: linear-gradient(0deg, transparent 7.9rem, #abced4 7.9rem, #abced4 8.1rem, transparent 8.1rem), linear-gradient(#eee .1rem, transparent .1rem);
	background-size: 100% 3rem;
	http://lea.verou.me/css3patterns/#lined-paper */
}
header, main, footer {
	width: 55rem;
/*	display: block;
	float: left;
	clear: left;*/
/*	margin: 0 calc(50% + 27.5rem) 1rem calc(50% - 27.5rem);/*(sorted by body_flex&column&center*/
/*	border: solid black 1rem;
	border-radius: 2rem;/*(testing)*/
	padding-bottom: .1rem;
	font-size: 1.7rem;
}

/* 1b General Styling */
/* h1 in header */
h2 {
	font-size: 2.2rem;
	line-height: 2.5rem;	
}
p {
	margin: .5rem;
	font-size: 1.7rem;
	line-height: 2.4rem;
}
a:link,
a:visited {
	color: red;/*was #FF0000 #CC0000*/
	text-decoration: none;
}
a:hover {
	color: darkorange;
/*	text-shadow: 0 0 .5rem rgba(0,100,0,0.3);
	text-shadow: 0 0 1rem red;*/
}
a:active {
	color: darkgreen;
}
.divCen {
	margin: 0 auto;
}
.pCen {
	text-align: center;
}
.pStandout {
	color: darkred;
}
.spanUnd {
	text-decoration: underline;
}
.span-hfds {
	color: darkgreen;
	text-shadow: .2rem .2rem .05rem rgba(255,140,0,0.25);
}

/*	2a Header */
header {
/*	width: 50rem;*/
/*	padding: .4rem;*/
/*	position: sticky;	top: 0;*//*would allow sliding header. Not currently used*/
}
h1 {
	/*background: -webkit-linear-gradient(#600, #006);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;*/
	font-size: 4rem;
	text-align: center;
	color: darkgreen;
}
header p {
	word-spacing: 0.3rem;
	letter-spacing: 0.5rem;
	text-transform: uppercase;
	text-align: center;
	font-size: 1.2rem;
/*	line-height: 1.5rem;*/
	color: darkgreen;
}
header p.header-tagline {
	padding-bottom: 1rem;
	letter-spacing: 0.7rem;
	font-size: 1.8rem;
/*	font-style: oblique;*/
	text-shadow: .2rem .2rem .05rem rgba(255,140,0,0.25);
}
header a.aNavWebsite {
	color: darkgreen;
	/*text-shadow: 0 0 1px silver, 0 0 1rem yellow, 0 0 2rem white, 0 0 3rem orange, 0 0 4rem lightyellow, 0 0 5rem olive, 0 0 6rem yellow;*/
	font-size: 4rem;
	padding: .5rem;
}
header p.header-contact {
	
}

/*	2a1 Header Nav (so each page can be highlighted when 'active')*/
body.body-nav-home #header-nav-pages a.header-nav-home {
	background-color: darkgreen;
	color: white;
	/*text-shadow: 0 0 .5rem gold;*/
}
body.body-nav-contact #header-nav-pages a.header-nav-contact,
body.body-nav-review #header-nav-pages a.header-nav-review,
body.body-nav-area #header-nav-pages a.header-nav-area,
body.body-nav-area-hc #header-nav-pages a.header-nav-area-hc,
body.body-nav-area-hfds #header-nav-pages a.header-nav-area-hfds,
body.body-nav-area-powys #header-nav-pages a.header-nav-area-powys,
body.body-nav-area-shrs #header-nav-pages a.header-nav-area-shrs,
body.body-nav-subject #header-nav-pages a.header-nav-subject,
body.body-nav-subject-cc #header-nav-pages a.header-nav-subject-cc,
body.body-nav-subject-english #header-nav-pages a.header-nav-subject-english,
body.body-nav-subject-hsmt #header-nav-pages a.header-nav-subject-hsmt,
body.body-nav-subject-ict #header-nav-pages a.header-nav-subject-ict,
body.body-nav-subject-maths #header-nav-pages a.header-nav-subject-maths {
	background-color: black;
	color: white;
	/*text-shadow: 0 0 .5rem gold;*/
}
/*	2a2 head nav list styling */
ul.navMenu {
	margin:0;
/*	border-radius: .5rem;*/
	padding: 0;
/*	width:60rem;*/
	list-style:none;
	font-size: 1.5rem;
	position:relative;
	white-space:nowrap;/* bonus: forces no word-wrap */	
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	-webkit-flex-flow: row wrap;
	flex-direction: row;
	justify-content: center;
}
ul.navMenu > li {
/*	border: thin red solid;*/
	padding: 0;
	display:inline;
	/*float:left;*/
	position:relative;
}
ul.navMenu a {
	text-decoration: none;
	border: .1rem solid red;
	padding: .7rem;
	width: 9rem;
	background: #fff;
	color: red;
	float: left;
	text-align: center;
}
ul.navMenu > li > a {
	border-top-left-radius: .5rem;
	border-top-right-radius: .5rem;	
}

ul.navMenu > li > a.header-nav-area:after,
ul.navMenu > li > a.header-nav-subject:after{
	/*content: ' ▾';*/
	content: ' ↓';
	font-size: 1rem;
}
ul.navMenu a:hover {
	background:#eee;
	color: orange;
	border-color: orange;
}
ul.navMenu a:active {
	background:#eee;
	color: green;
	border-color: green;
}

ul.navMenu ul {
	position:absolute;
	margin: 0;
	/*border: .05em orange solid;/*(testing purposes)*/
	padding: 0;
	left: 0;
	top: 100%;
	width: inherit;
	display:none;
	/*	height: 1rem;
	width: 100%;*/
/*	border-radius: .5rem;
	padding: .5rem .1rem;*/
	white-space:nowrap;/* (bonus: forces no word-wrap)*/	
	/*list-style: none; (removes bullets and cleans white-space)*/
/*	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	-webkit-flex-flow: row wrap;
	flex-direction: row;*/
}
ul.navMenu li:hover ul {
	display:block;
}
ul.navMenu ul a {
/*	width:15rem;*/
	font-size: 1rem;
}
ul.navMenu ul li {
	display:block;
	margin:0;
}

.NavX2 li {
/*	display: inline;*/
	justify-content: flex-start;/* sets up your display method: flex-start|flex-end|space-between|space-around */
}
.NavX2 li a {
	display: inline-block;
	margin: .1rem .1rem .1rem 0;
	border: thin dotted black;
	border-radius: .3rem;
	padding: .1rem .3rem;
}
.NavX2 li a:hover {
	background-color: #f0f0f0;
}
.NavX2 li a:active {
	background-color: #eee;
}

/*.left_bar:hover, .left_bar:focus, .left_bar:active{*/
header p.dwtLocation {
	text-align: center;
	font-weight: 200;
	font-size: large;
}
/* 2b Sections, etc */
/*2b0 main */
main {
	margin: 1rem;
	/*max-width: 60rem;
	width: 50rem;*/
/*	padding: 1rem;*/
}
p#nav-breadcrumb {}
section {
	margin-bottom: 1rem;
	border-top: #a00 dotted .15rem;
	border-left: #a00 solid .15rem;
	border-bottom: #a00 dotted .15rem;
	border-right: #a00 solid .15rem;
	border-radius: 2rem;	
	padding: .2rem;
	width: calc(100% - 0.7rem);
	display: block;
	float: left;
	clear: left;
	background-color: white;
	color: black;
}
section:first-of-type {
	border-color: green;
	border-top-style: solid;
	border-bottom-style: dotted;
}
/*
section:last-of-type {
	border-top-style: dotted;
	border-bottom-style: dotted;
}
*/
section:hover {
	box-shadow: 1rem 1rem 5rem lightgrey;
	background-color: #fafafa;
	color: #500;
}
section h2 {
	padding: .3rem;
	margin: 0;
	border: 0;
	border-radius: inherit;
	background: linear-gradient(to right, #fffff0, white, #fffff0); /* Standard syntax */
	/*	text-align: center;*/
}
section ul {
	margin: .5rem 2.5rem;
}
section li {
	padding: .3rem;
	font-size: 1.7rem;
}
section img.imgSubject {
	border-radius: 2rem;
	padding: 1rem;
	width: calc(100% - 2.3rem);
	text-align: center;
}

/* 2b2 Welcome */
/*
section#secWelcome {
	border-top-style: solid;
	border-bottom-style:dotted;
}
*/
section#secWelcome p,
section#secWelcome h2 {
	text-align:center;
}
section#secWelcome p {
/*	margin-bottom: .5rem;*/
}
section#secWelcome img {
	margin-top: 1rem;
}
section#secWelcome img.img-top-section {
	border-radius: 1rem;
	margin: 1rem;
	width: calc(100% - 2.3rem);
}
.pImgHome img {
	border-radius: .5rem;
	height: 9rem;
}

/* 2b3 Credentials */
#secCred li {
	padding: .2rem;
}
#secCred li:nth-of-type(2n) {
	color: #006;
}
/* 2b4 types */

/*	2b1 Areas Section (list anchor styles; not currently used: hence Xyz) */
.liNest1 {
/*	display: block;*/
}
.liNest1 li {
	/*display: block;*/
}
ul.liNest2 {
/*	height: 1rem;
	width: 100%;*/
	margin: 0;
/*	border: thin orange solid;(testing purposes)*/
	border-radius: .5rem;
	padding: .5rem .1rem;
	white-space:nowrap;/* bonus: forces no word-wrap */	
	list-style: none;/* removes bullets and cleans white-space*/

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	-webkit-flex-flow: row wrap;
	flex-direction: row;
}
.liNest2 li {
/*	display: inline;*/
	justify-content: flex-start;/* sets up your display method: flex-start|flex-end|space-between|space-around */
}
.liNest2 li a {
	display: inline-block;
	margin: .1rem .1rem .1rem 0;
	border: thin dotted black;
	border-radius: .3rem;
	padding: .1rem .3rem;
}
.liNest2 li a:hover {
	background-color: #f0f0f0;
}
.liNest2 li a:active {
	background-color: #eee;
}
section#secAreas {
/*	margin-top: 1rem;*/
}
body.body-nav-area section#secAreas {
	/*background-image: url(../images/kington-view.jpg);
	background-size: contain;
	background-repeat: no-repeat;*/
}

/* 2c footer */
footer {
	margin-bottom: 1rem;
	border-top: green dotted .15rem;
	border-left: green solid .15rem;
	border-right: green solid .15rem;
	border-bottom: green solid .15rem;
	border-radius: 2rem;	
	padding: .2rem;
	background-color: white;
	color: black;
}
footer p {
	text-align: center;
}

/* 3 Contact Form: General Syling */

fieldset, label, label span, fieldset p, input, textarea, select, div#recaptcha_placeholder {
	display: block;
	float: left;
	clear: left;
	/*width: 10rem;*/
	/*margin-right: 1rem;*/
/*	font-size: 1.7rem;*/
}
form#contactFormDefault /*div#formWrapper*/ {
	display: block;
	float: left;
	clear: left;
	width: calc(100% - 2.3rem);
	/*margin-bottom: 1rem;*/
	margin-bottom: 1rem;
	border: .15rem solid orange;
	border-radius: 2rem;
	padding: 1rem;
/*	overflow:auto;*/
	background-color: white;
	font-size: 1.7rem;
}
/*	3a FieldSets and Legends */
fieldset {
	width: calc(100% - 2.3rem);
	margin-bottom: 1rem;
	border: solid .15rem black;
	border-radius: 2rem;
	padding: 1rem;
	background-color: white;
}
legend {
/*	text-decoration: underline overline;*/
/*	border: ridge .08rem black;*/
	margin-left: 1rem;
	border: solid .15rem black;
	border-radius: 2rem;
	padding: .5rem;
	background-color: white;
}
fieldset:hover {
	background-color: papayawhip;
}
fieldset:active, fieldset:focus {
	background-color: moccasin;
}
fieldset:nth-child(1), fieldset:nth-child(1) legend {
	border-color: green;
}
/*fieldset:nth-child(1) legend {
	background-color: green;
	color: white;
}
*/fieldset:nth-child(2), fieldset:nth-child(2) legend {
	border-color: springgreen;
}
/*fieldset:nth-child(2) legend {
	background-color: springgreen;
	color: white;
}
*/fieldset:nth-child(3), fieldset:nth-child(3) legend {
	border-color: yellowgreen;
}
/*fieldset:nth-child(3) legend {
	background-color: yellowgreen;
	color: white;
}*/

/*	3b Form Input Sytling */
label {
	margin: .5rem;
	width: calc(100% - 2rem);
	max-width: 40em;
}
input, textarea, select {
    background-color: whitesmoke;
    color: black;
/*    padding: 1rem 2rem;
    margin: .5rem 0 0 0;*/
    border: thin solid orange;
	border-radius: .3rem;
	padding: .5rem;
}
textarea:required:valid {
	border-color: green;
}
input:hover, textarea:hover, select:hover {
    background-color: floralwhite;
}
input:active, input:focus, textarea:active, textarea:focus, select:active, select:focus {
    background-color: antiquewhite;
}
/*	3c Form Validation */
input:required:invalid, input:focus:invalid {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAeVJREFUeNqkU01oE1EQ/mazSTdRmqSxLVSJVKU9RYoHD8WfHr16kh5EFA8eSy6hXrwUPBSKZ6E9V1CU4tGf0DZWDEQrGkhprRDbCvlpavan3ezu+LLSUnADLZnHwHvzmJlvvpkhZkY7IqFNaTuAfPhhP/8Uo87SGSaDsP27hgYM/lUpy6lHdqsAtM+BPfvqKp3ufYKwcgmWCug6oKmrrG3PoaqngWjdd/922hOBs5C/jJA6x7AiUt8VYVUAVQXXShfIqCYRMZO8/N1N+B8H1sOUwivpSUSVCJ2MAjtVwBAIdv+AQkHQqbOgc+fBvorjyQENDcch16/BtkQdAlC4E6jrYHGgGU18Io3gmhzJuwub6/fQJYNi/YBpCifhbDaAPXFvCBVxXbvfbNGFeN8DkjogWAd8DljV3KRutcEAeHMN/HXZ4p9bhncJHCyhNx52R0Kv/XNuQvYBnM+CP7xddXL5KaJw0TMAF8qjnMvegeK/SLHubhpKDKIrJDlvXoMX3y9xcSMZyBQ+tpyk5hzsa2Ns7LGdfWdbL6fZvHn92d7dgROH/730YBLtiZmEdGPkFnhX4kxmjVe2xgPfCtrRd6GHRtEh9zsL8xVe+pwSzj+OtwvletZZ/wLeKD71L+ZeHHWZ/gowABkp7AwwnEjFAAAAAElFTkSuQmCC);
	background-position: right top;
	background-repeat: no-repeat;
	-moz-box-shadow: none;
	box-shadow: none;
}
input:required:valid {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAepJREFUeNrEk79PFEEUx9/uDDd7v/AAQQnEQokmJCRGwc7/QeM/YGVxsZJQYI/EhCChICYmUJigNBSGzobQaI5SaYRw6imne0d2D/bYmZ3dGd+YQKEHYiyc5GUyb3Y+77vfeWNpreFfhvXfAWAAJtbKi7dff1rWK9vPHx3mThP2Iaipk5EzTg8Qmru38H7izmkFHAF4WH1R52654PR0Oamzj2dKxYt/Bbg1OPZuY3d9aU82VGem/5LtnJscLxWzfzRxaWNqWJP0XUadIbSzu5DuvUJpzq7sfYBKsP1GJeLB+PWpt8cCXm4+2+zLXx4guKiLXWA2Nc5ChOuacMEPv20FkT+dIawyenVi5VcAbcigWzXLeNiDRCdwId0LFm5IUMBIBgrp8wOEsFlfeCGm23/zoBZWn9a4C314A1nCoM1OAVccuGyCkPs/P+pIdVIOkG9pIh6YlyqCrwhRKD3GygK9PUBImIQQxRi4b2O+JcCLg8+e8NZiLVEygwCrWpYF0jQJziYU/ho2TUuCPTn8hHcQNuZy1/94sAMOzQHDeqaij7Cd8Dt8CatGhX3iWxgtFW/m29pnUjR7TSQcRCIAVW1FSr6KAVYdi+5Pj8yunviYHq7f72po3Y9dbi7CxzDO1+duzCXH9cEPAQYAhJELY/AqBtwAAAAASUVORK5CYII=);
	background-position: right top;
	background-repeat: no-repeat;
	border-color: green;
}
textarea:required:valid {
	border-color: green;
}
input[type=submit] {
	width: 100%;
	background-color: green;
	color: white;
	padding: 1rem 2rem;
	margin: .5rem 0 0 0;
	border: thin solid orange;
	border-radius: 1.5rem;
	cursor: pointer;
}
input[type=submit]:hover {
	background-color: springgreen;
}
input[type=submit]:active {
	background-color: yellowgreen;
}

/*	3d Form: ID-specific, inc widths */
#contactFormName, #contactFormEmail, textarea#contactFormMessage {
	width: 100%;
}
textarea#contactFormMessage {
	height: 10rem;
/*cols="45" rows="10"*/
}
#contactFormSubject, #contactFormKeyStage, #contactFormBackground {
	width: 15rem;
}
#contactFormPostcode, #contactFormStartDate {
	width: 15rem;
}

/* 4 Slideshow Test */
/*@import url(https://fonts.googleapis.com/css?family=Varela+Round);

html, body { background: #333 url("https://codepen.io/images/classy_fabric.png"); }

.slides {
padding: 0;
width: 609px;
height: 420px;
display: block;
margin: 0 auto;
position: relative;
}

.slides * {
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}

.slides input { display: none; }

.slide-container { display: block; }

.slide {
top: 0;
opacity: 0;
width: 609px;
height: 420px;
display: block;
position: absolute;

transform: scale(0);

transition: all .7s ease-in-out;
}

.slide img {
width: 100%;
height: 100%;
}

.nav label {
width: 200px;
height: 100%;
display: none;
position: absolute;

opacity: 0;
z-index: 9;
cursor: pointer;

transition: opacity .2s;

color: #FFF;
font-size: 156pt;
text-align: center;
line-height: 380px;
font-family: "Varela Round", sans-serif;
background-color: rgba(255, 255, 255, .3);
text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide:hover + .nav label { opacity: 0.5; }

.nav label:hover { opacity: 1; }

.nav .next { right: 0; }

input:checked + .slide-container  .slide {
opacity: 1;

transform: scale(1);

transition: opacity 1s ease-in-out;
}

input:checked + .slide-container .nav label { display: block; }

.nav-dots {
width: 100%;
bottom: 9px;
height: 11px;
display: block;
position: absolute;
text-align: center;
}

.nav-dots .nav-dot {
top: -5px;
width: 11px;
height: 11px;
margin: 0 4px;
position: relative;
border-radius: 100%;
display: inline-block;
background-color: rgba(0, 0, 0, 0.6);
}

.nav-dots .nav-dot:hover {
cursor: pointer;
background-color: rgba(0, 0, 0, 0.8);
}

input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,
input#img-5:checked ~ .nav-dots label#img-dot-5,
input#img-6:checked ~ .nav-dots label#img-dot-6 {
background: rgba(0, 0, 0, 0.8);
}*/