/* Main style sheet etc. */

/* general style declarations */
html, body {
	padding: 0%;
	margin: 0%;
	font-family: Calibri, Verdana, Geneva, sans-serif;
	font-size: 1.05em;
}

body {
	min-width: 640px;
	background-color: rgb(210, 210, 220); /* The overall background colour - overriden for the main content in the .content style */
}

/* Heading styles for the site */
h1, h2 {color: rgb(0, 80, 0);}	/* Colour for all headings regardless of hierarchy */
h1 {font-size: 140%;}				/* Size for primary headings on a given page */
h2 {font-size: 110%;}				/* Size for secondary headings */

/* Bullet point list styling */
ul {list-style: none;
	padding-left: 2em;
	margin-left: 0em;}				/* Remove default bullets */
li {padding: 0.1em 0;}				/* slightly increase spacing between bullet lines */
ul li::before {
	content: "\2022"; 				/* Add content: \2022 is the CSS Code/unicode for a bullet */
	color: rgb(80, 80, 140);		/* The colour of the bullet points themselves */
	display: inline-block;			/* Needed to add space between the bullet and the text */
	width: 1em;						/* Also needed for space (tweak if needed) */
	margin-left: -1em;				/* Also needed for space (tweak if needed) */
}

ol {padding-left: 0em; margin-left: 1.2em;}
ol li {
  padding-left: 0.5em;
  margin-left: 0em;
}

p {text-align: justify;}

img {max-width: 100%;
	border: none;
	padding: 0em;
	margin: 0em;}
	
td {padding: 0em 0.2em;}
hr {height: 1px;
	border: 0px;
	background-image: linear-gradient(to right, rgba(20, 20, 160, 0), rgba(20, 20, 160, 0.7), rgba(20, 20, 160, 0.9), rgba(20, 20, 160, 1), rgba(20, 20, 160, 0.9), rgba(20, 20, 160, 0.7), rgba(20, 20, 160, 0));}

.playerControls .button {
  background-color: rgb(60, 60, 120);
  border: 1px solid green;
  margin: 0em 1em;
  color: white;
  padding: 0.5em 1em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.playerControls .button:not(:last-child) {
  border-right: none; /* Prevent double borders */
}

.playerControls .button:hover {
  background-color:rgb(50, 50, 160);
}

/* Top level styling rules for all links on the site, overwritten on a case by case basis only (and mostly for the header and footer links */
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:focus {text-decoration: underline;}
a:hover {text-decoration: underline;}
a {color: rgb(20, 20, 150); font-weight: bold;}

/* The header contains the top banner only */
.header {border: none;
	margin: 0em;
	padding: 0em;
	display: block;
	background-color: rgb(80, 80, 96);
	color: rgb(255, 255, 0);}

.header a {color: rgb(255, 255, 0);}
.header a:hover {text-decoration: none; color: rgb(255, 255, 0);}

/* The topmenu class deals with the main navigation menu at the top only */
.topmenu {
	margin: 0% 0% 0% 0%;
	padding: 0.4em 0em 0.4em 0em;
	background-color: rgb(100, 100, 120);
	text-align: center;	
}
.topmenu a {color: rgb(255, 255, 235); font-weight: normal;}
.topmenu a:hover {text-decoration: none; color: rgb(255, 255, 100); font-weight: normal;}

/* Main content pane */
.content {
	/* prevent nested items from appearing outside the content pane */
	max-width: 1400px;
	overflow: hidden;
	margin: 0 auto;
	padding: 1% 1% 0% 1%;
	border-style: solid;
	border-width: 0em;
	border-color: rgb(0, 0, 0);
	font-size: 90%;
	font-family: Verdana, Arial, Helvetica, sans-serif, Calibri;
	line-height: 120%;
	color: rgb(30, 30, 36);
	background-color: rgb(210, 210, 220);
}

td.sidebar {margin: 0px;
	width: 25%;
	padding: 2px;
	background-color: #bbb;
	border: 1px solid #080;
	text-align: center;}


p.sidemenu {color: #008000;
    font: bold 12pt verdana, tahoma, arial, sans-serif;}

.highlightbox
{
	float: right;
	clear: right;
	padding: 0em 1em 1em 1em;
	margin: 1.2em 0em 0em 1.5em;
	border: 2px solid rgb(160, 160, 190);
	background-color: rgb(230, 230, 240);
}

/* The infobox class is just a super simple right hand side inset box */
.infobox
{
	float: right;
	clear: right;
	padding: 0em 1em 1em 1em;
	margin: 0.5em 0em 0em 1.5em;
}

/* For standardised dark green table column/row header information */
.tableheader
{
	font-weight: bold;
	color: #272;
}

/* Footerbar is the bottom navigation bar, footer is the copyright tagline underneath */
.footerbar
{
	margin: 1% 0% 0% 0%;
	clear: both;
	text-align: right;
	font-family: Calibri, Verdana, Geneva, sans-serif;
	font-size: 0.8em;
	padding: 0.5em 12em 0.5em 0em;
	background-color: rgb(100, 100, 120);
	color: rgb(255, 255, 235);
}

.footerbar a {color: rgb(255, 255, 235); font-weight: normal;}

.footer
{
	margin: 0% 10% 1% 10%;
	clear: both;
	text-align: center;
	font-family: Calibri, Verdana, Geneva, sans-serif;
	font-size: 0.75em;
	padding: 0.5em 2% 0% 2%;
	color: rgb(50, 50, 60);
}