/* containing anything else, perhaps this is general padding and margin and border size and internal positioning of elements */


/* use border-box sizing  
 *	all elements measure their width (and height) from border to border, including padding
 *	see https://css-tricks.com/box-sizing/
 */
html {
	box-sizing: border-box;
}

*, :after, :before {
	box-sizing: inherit;
}
/*************/


/* Override some default behaviour of browsers
 *  margins, padding, outline
 */
body {
	margin: 0px;
}

* {
	outline: none;
}

form > div > [class*=-Content]{
	position: relative;
}

td, tr {
	padding: 0;
}

[class*=-SURROUND]{
	width: 0;
	flex: 0 0 0;
}

h1,h2,h3,h4,h5,h6 {
	padding: 0;
	margin: 0;
}

/******************/


a{
	cursor: pointer;
}

/* Put some spacing around icons */
.fa{
	margin: 0.5em;
}

.fa-middle{
	vertical-align: middle;
}

.button .fa{
	margin: 0;
}


.align-left{
	text-align: left;
}

.align-right{
	text-align: right;
}

.align-center{
	text-align: center;
}



.underline-on-hover::hover{
	text-decoration: underline;
}



/* style a banner (hero image) to contain the page title
 *	the height is set to give a 16:9 ratio image at smaller screen widths but with a maximum of 15em
 *	the background image for this panel is defined by the theme style sheet (eg. zeus.css)
 *	 but that could be overridden for individual pages on a form.
 */
.title-banner {
	height: 56.25vw;
	max-height: 15em;
	position: relative;

	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

/* turn the title banner into a splash screen by assuming the full height of the viewport */
.title-banner.splash{
	height: 100vh;
	max-height: none;
	overflow:	auto;
}

.title-banner.splash-small{
	min-height: 20em;
	max-height: 25em;
}

/* on mobile devices the header becomes opaque and any title banner moves beneath it,
 *  consequently the splash height should be the height of the view port less the height of the header */
@media screen and (max-width: 40em){ /* MOBILE */
	.title-banner.splash{
		height: calc(100vh - 100px);
	}
}

/* centre-align text and centre a span inside its parent */
.center,
.title-banner > span {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;

	transform: translate(-50%, -40%);
}

.title-banner > span {
	width: 80%;
}

/* on a splash title, align the text to the left */
.title-banner[class*=splash] > span{
	text-align: left;
}
/* and display inline with a semi-transparent highlight on each element */
.title-banner[class*=splash] > span > *{
	display: inline-block;
	margin: 0;
	padding: 0 1rem;
	background: rgba(0, 0, 0, 0.5);
	color: #FFFFFF;
}
/*********************/


.circle{
	border-radius: 50%;
}

.border-indicator-left{
	border-left-style: solid;
	border-left-width: 0.5em;
}

.border-indicator-bottom{
	border-bottom-style: solid;
	border-bottom-width: 0.5em;
}
	



/* style a 'card' similar to Google's material design 'cards'
 *  the card will flex when placed in a flex container (see layout.css)
 *  for style rules which add shadow and scaling see material.css
 */
.card {
	padding: 0;
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
	background-color: #FFFFFF;
	color: #282828;
}

/* clickable and hoverable objects have the 'pointer' (hand) cursor */
.clickable{
	cursor: pointer;
}



/* style buttons, all ebase buttons in this presentation template have this class by default,
		shadow and scaling is again applied by material.css */
.button {
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  border: none;
  font-size: 0.7rem;
  text-transform: uppercase;
  cursor:pointer;
  display:inline-block;
  vertical-align:baseline;
  text-decoration:none;
  padding:1em 2em;
  margin: 0.5em 1em;
  line-height:1.1em;
  text-align:center;
  text-decoration:none;
  font-weight:500;
}


tr > td:last-of-type > *{
	margin-right: 0;
}

tr > td:first-of-type > *{
	margin-left: 0;
}

.h-menu > ul{
	display: -webkit-flex !important;
	display: flex !important;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
}

.h-menu > ul > li{
	padding-left: 1em;
	padding-right: 1em;
}

.h-menu > ul > li:not(.active):hover{
	text-decoration: underline;
}

.h-menu > ul > li.active{
	font-weight: bolder;
	cursor: initial;
}


/* style different types of field element
 *  add padding and a border and a transition for when the field gets the focus
 */
input,
textarea,
select {
  -webkit-transition:border .1s;
  -moz-transition:border .1s;
  -o-transition:border .1s;
  transition:border .1s;
  border: 1px solid #CCCCCC;
  margin:0;
  padding:0.4em 0.5em;
}

/*div[class*=-Field] > div[class*=-Editor],*/
td > div[class*=-Editor]{
	width: 100%;
}

input[type=text],
input[type=password],
input[type=number],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=datetime-local],
input[type=email],
input[type=search],
input[type=tel],
input[type=url],
textarea,
select {
	width: 100%;
}

input[type=text],
input[type=password],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=datetime-local],
input[type=email],
input[type=url],
select{
	max-width: 30em;
}

input[type=number],
input[type=tel]{
	max-width: 10em;
}

/* change the font and border colour when the field has focus */
input:not([type=submit], [type=button]):focus,
textarea:focus,
select:focus {
  border-color: inherit;
  color: inherit;
  outline:0;
}

/* search inputs are only bordered on the bottom */
input[type=search] {
	border-width: 0 0 1px 0;
}

/* placeholder text is greyed out */
::-webkit-input-placeholder,
:-ms-input-placeholder,
::-ms-input-placeholder,
input.empty {
  color: #999999;	
}

/* style the positioning of radio button inputs */
span > input[type=radio] {
	margin-right:1em;
	margin-left:0.3em;
	margin-bottom:0.5em;
}

td span > input[type=radio] {
	margin-bottom:0.4em;
}

td > input[type=radio] {
	margin-left:0.3em;
	margin-bottom:0.2em;
}

/* allow text areas to be resized vertically and horizontally */
textarea {
  overflow:auto;
  resize:both;
  vertical-align:top;
  display:block;
}
/*******************/

/* classes for field containers to change the internal structure for fields */
/* force labels above inputs */
.fields-labels-above [class*="-Editor"] {
	display: block !important;
}

/* labels text is pushed to the placeholder text by javascript, here we hide the label elements */
.fields-labels-in-editor [class*="-Label"] {
	display: none !important;
}


/* useful class to fade an inactive element
 *  NB. this a visual effect only, other steps must be taken to actually render an element inactive
 */
.inactive{
	opacity: 0.6;
}

.padded{
	padding: 1em;
}


/* style error message generated by the server */
.errorMessage {
	font-size: 16px;
  background-image: url('$ws/Presentation/images/error.png');
  background-repeat: no-repeat;
	background-position: 10px center;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
  padding: 0.4em 0.8em 0.4em 35px;
  margin-top: 0 !important;
  font-weight: 600;
}

/* style warning message generated by the server */
.warningMessage {
  background-image: url('$ws/Presentation/images/warning.png');
  background-repeat: no-repeat;
	background-position: 10px center;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
  padding: 0.4em 0.8em 0.4em 35px;
  margin-top: 0 !important;
  font-weight: 600;
}


.section-header{
	padding: 0 !important;
	align-items: center;
}

.section-header > *{
	margin: 0;
}

.section-header > .fa{
	margin-right: 0.5em;
}