/* The following styles are associated with the general theme of the
   entire website.*/
.site-theme {
	background-color: #E0E0E0;
	}
.body-text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	}
.body-subtext {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	font-style: italic;
	}

/* 	The following styles are used to display a box that contains a video, subheading and
	descriptive text, giving the user the chance to click inside the box as a link */
.video-clickable-area {
    display: block;
    width: 100%;
    border: 1px solid #0000FF;
    border-radius: 16px;
    padding: 16px;
    box-sizing: border-box;
    text-decoration: none;
    color: #333333;
    margin-bottom: 24px; /* Creates spacing between the stacked boxes */
	}
.video-container {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
	}
.video-container video, 
.video-container img {
    width: 100%;
    display: block;
    border-radius: 12px;
	}
.video-text-subheading {
    margin: 0 0 8px 0;
    font-family: sans-serif;
    font-size: 20px;
    font-weight: bold;
	}
.video-text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
    margin: 0;
}

/* The following styles are used to display a box that contains a heading, image and text. */     
.bhit-outer {
	display:flex;
	}
.bhit-left {
	flex-direction:column; 
	}
.bhit-heading {
	font-family:"Arial Rounded MT Bold", "Helvetica Rounded","Arial Black", sans-serif;
	font-size: 1.2em;
	}
.bhit-image {
	max-width:100%;
	padding:1em;
	}
.bhit-video-container {
	display:inline-block;
	width: 100%; 
	max-width: 320px; 
	text-decoration: none; 
	cursor: pointer;
	}
.bhit-video {
	display:block;
	width:100%;
	height:auto;
	border-radius:6px;
	}
.bhit-text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-style: normal;
}

/* The following styles are associated with the display of buttons */
.button-container {
	display:flex;
	flex-direction:row; 
	justify-content:flex-end; 
	flex-wrap:wrap;
	margin: 0.5em;
	}
.button-shape {
	display: inline-block;  
	background-color: #0008ff;
	border: none;
	border-radius: 0.5em;
	padding: 0.5em 1em 0.5em 1em;
	margin: 0.2em 0.2em 0.2em 0.2em;  
	color: white;
	text-align: center;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: bold;
	}
  
/* The following styles are used in Contact Us, About etc. */
.guidebox {
	overflow:auto; /* Forces the box to stretch and contain the image */
 	font-family: "Arial Rounded MT Bold", Arial, sans-serif;
	font-size:1em;
	background:#F0F0F0;
	border-radius: 1em;
	border: 0.4em solid #00F;
	margin: 0.5em;
	padding: 0.7em 1em 0.5em 1em;
	}
.guidebox_image {
	float:right; /* Pushes the image to the top right and lets text wrap around it */	
	max-width:40%; /* Keeps it full size, but restricts it on small screens */
	height:auto; 
	border-radius: 0.5em; /* Gives the image rounded corners */
	margin-left: 1em;
	margin-bottom: 0.5em
	}
.guidebox_email {
	max-width:100%; /* Keeps it full size, but restricts it on small screens */	
	height:auto; /* Keeps the shape of the email so it doesn't look stretched or squished */
	display:block /* Ensures it displays nicely as a block element */
	}

/* The following styles are used for debugging */
.debugging-box {
	font-family: "Arial Rounded MT Bold", Arial, sans-serif;
	font-size:0.9em;
	background:#faf9f9;
	border-radius: 1em;
	border: 0.2em solid red;
	margin: 0.5em 0.5em 0.5em 0.5em;
	padding: 0.7em 1em 0.5em 1em;
	}

/* The following styles are used in the cookies box */
.cookie-container {
	border: 0.2em solid #000000;
	background: #a7ff44;
	border-radius: 1em;
	margin: 0.5em 0.5em 0.5em 0.5em;
	padding: 0.2em 0.5em 0.2em 0.5em;
	animation: fadeIn 5s;
	}
@keyframes fadeIn {
	0% {opacity:0;}
	100% {opacity:1;}
	}
.cookie-heading {
	font-family:"Arial Black", Gadget, sans-serif;
	font-size:1em;
	}
.cookie-text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	}

/* The following styles are associated with user login status at the top of the screen,
   it consists of the container which in turn has a right justified inner container that
   in turn has the statustext and the login button */
.login-container {
	display:flex;
	flex-direction:row; 
	justify-content:flex-end;
	}
.login-innercontainer {
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	align-items:centre;
	border-style:solid;
	border-radius:0.5em;
	border-color:#555555;
	background-color:#f0f0f0;
	}
.login-status {
	display:flex;
	flex-direction:row;
	align-items:center;
	padding:0em 0.4em;0em; 0.4em;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	font-weight: bold;
	}
	
/* The following are associated with the forms that are used to read the user information */
.account-textbox {
	border-radius: 0.7em;
	background: #f3f3fe;
	padding: 0.6em;
	margin-bottom:1em;
	height: 0.8em;
	font-size:1em;
	font-weight:bold;	
	}
.account-selectlist {
	border-radius: 0.7em;
	background: #f3f3fe;
	padding: 0.6em;
	margin-bottom:1em;
	height: auto;
	font-size:1em;
	font-weight:bold;	
	}