/**
 * SteveFryatt.org.uk
 * (c) Stephen Fryatt, 2015-2020
 */

HTML {
	font-family: 'Public Sans', 'Arial', 'Tahoma', 'Helvetica', sans-serif;
	font-size: 100%;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
}

/* Top Level Page Body. */

BODY {
	color: black;
	background: white;
	margin: 0;
	padding: 0;
	font-size: normal;
	min-width: 320px;
}  

/* Page Header Bar (Title & Cog Logo) */

@media (max-width: 549px) {
	#header {
		font-size: 2rem;
		margin: 0px;
		background-color: white;
		color: #228b22;
		text-align: left;
		padding: 5px 5%;
		border-bottom-style: solid;
		border-bottom-width: 4px;
		border-bottom-color: #228b22;
	}

	#header H1.header {
		font-size: 1em;
		margin: 0.1em 0px;
		padding: 0px;
		font-family: 'M PLUS Rounded 1c', sans-serif;
		font-weight: 900;
	}
}

@media (min-width: 550px) and (max-width: 849px) {
	#header {
		font-size: 2rem;
		margin: 0px;
		background-color: white;
		color: #228b22;
		text-align: left;
		padding: 5px 5%;
		border-bottom-style: solid;
		border-bottom-width: 4px;
		border-bottom-color: #228b22;
	}

	#header H1.header {
		font-size: 1.2em;
		margin: 0.1em 0px;
		padding: 0px;
		font-family: 'M PLUS Rounded 1c', sans-serif;
		font-weight: 900;
	}
}


@media (min-width: 850px) {
	#header {
		font-size: 2rem;
		margin: 0px;
		background-color: white;
		color: #228b22;
		text-align: left;
		padding: 5px 5%;
		border-bottom-style: solid;
		border-bottom-width: 4px;
		border-bottom-color: #228b22;
	}

	#header H1.header {
		font-size: 1.5em;
		margin: 0.1em 0px;
		padding: 0px;
		font-family: 'M PLUS Rounded 1c', sans-serif;
		font-weight: 900;
	}
}

/* Breadcrumb Trail */

#breadcrumb {
	font-size: 1rem;
	line-height: 30px;
	background-color: #b7f6b7;
	padding: 0 5%;
}

#breadcrumb SPAN.here {
	color: #228b22;
	font-weight: bold;
	text-decoration: none;
	padding: 4px 5px;
}

#breadcrumb A {
	color: #228b22;
	text-decoration: none;
	padding: 4px 5px;
}

#breadcrumb A:visited {
	text-decoration: none;
	color: #228b22;
}

#breadcrumb A:hover {
	color: #228b22;
	text-decoration: underline;
}

/* Page content style. */

#content {
	font-family: 'Bitter', 'Cambria', 'Times New Roman', serif;
	font-size: 1rem;
}

/* Side/Footer Bar */

/* Below 800px, we show the sidebar at the end of the page. */

@media (max-width: 799px) {

	/* The Main Block Outer Container. */

	#main {
		padding: 5px 5%;
	}

	/* Main Page Content. */

	#content {
		width: 100%;
	}

	/* Sidebar Content. */

	#sidebar {
		width: 100%;
		text-align: center;
	}

	/* Sidebar Divider Heading. */

	#sidebar H1 {
		clear: both;
		width: calc(100% - 20px);
		font-size: 1.2rem;
		border-radius: 5px;
		margin-top: 1.5em;
		margin-bottom: 0;
		text-align: center;
		font-weight: bold;
		background: #b7f6b7;
		color: #228b22;
		padding: 0.5em;
		display: inline-block;
	}

	/* An information box-out panel. */

	DIV.panel {
		position: relative;
		font-size: 1rem;
		margin: 2em 2% 2em 2%;
		padding: 1em;
		border: 3px solid #228b22;
		border-radius: 5px;
		color: #228b22;
		background: #d2f7d2;
	}

	DIV.panel DIV.body {
		width: 100%;
	}

	DIV.panel DIV.icon {
		text-align: center;
		width: 100%;
	}

	/* A download panel. */

	DIV.download {
		position: relative;
		font-size: 1rem;
		margin: 2em 2% 2em 2%;
		padding: 0;
		border: 3px solid #228b22;
		border-radius: 5px;
	}

	DIV.download DIV.metadata SPAN.metadata {
		display: block;
	}
	
	DIV.download DIV.metadata SPAN.metadata-separator {
		display: none;
	}

	DIV.download DIV.test DIV.body {
		width: 100%;
	}

	DIV.download DIV.test DIV.icon {
		text-align: center;
		width: 100%;
	}
}

/* Above 800px, we show the sidebar at the side. */

@media (min-width: 800px) {
	/* The Main Block Outer Container. */

	#main {
		position: relative;
		padding: 5px 0px;
		margin: 0 5%;
	}

	/* Sidebar Content. */

	#sidebar {
		position: absolute;
		top: 0px;
		bottom: 0px;
		overflow: hidden;
		right: 0px;
		vertical-align: top;
		width: 180px;
		text-align: center;
	}

	/* Sidebar Divider Heading. */

	#sidebar H1 {
		clear: both;
		width: calc(180px - 1em);
		border-radius: 5px;
		margin-top: 1.5em;
		margin-bottom: 0em;
		text-align: center;
		font-size: 1rem;
		font-weight: bold;
		background: #b7f6b7;
		color: #228b22;
		padding: 0.5em;
		display: inline-block;
	}

	/* An information box-out panel. */

	DIV.panel {
		position: relative;
		margin: 2em 5em 2em 5em;
		padding: 1em;
		border: 3px solid #228b22;
		border-radius: 5px;
		color: #228b22;
		background: #d2f7d2;
		font-size: 1rem;
	}

	DIV.panel DIV.body {
		margin-left: 32px;
		padding-left: 1em;
		min-height: 32px;
	}

	DIV.panel DIV.icon {
		float: left;
	}

	/* A download panel. */

	DIV.download {
		position: relative;
		margin: 2em 5em 2em 5em;
		padding: 0;
		border: 3px solid #228b22;
		border-radius: 5px;
		font-size: 1rem;
	}

	DIV.download DIV.metadata SPAN.metadata {
		display: inline;
	}
	
	DIV.download DIV.metadata SPAN.metadata-separator {
		display: inline;
	}

	DIV.download DIV.test DIV.body {
		margin-left: 32px;
		padding-left: 1em;
		min-height: 32px;
	}

	DIV.download DIV.test DIV.icon {
		float: left;
	}
}

/* Main Page Content. */

/* Below 1300px, we drop the left-hand margin. */

@media (min-width: 800px) and (max-width: 1299px) {
	#content {
		vertical-align: top;
		text-align: left;
		padding: 0px 220px 0px 0px;
	}
}

/* At 1300px and above, we put a complimentary margin on the left. */

@media (min-width: 1300px) {
	#content {
		vertical-align: top;
		text-align: left;
		padding: 0px 220px 0px 220px;
	}
}

#sidebar P {
	margin-top: 1rem;
	margin-bottom: 0.5rem;
	text-align: center;
}

/* An information box-out panel. */

DIV.panel {
	font-family: 'Public Sans', 'Arial', 'Tahoma', 'Helvetica', sans-serif;
}

DIV.panel H1 {
	margin-top: 0px;
	padding-top: 0px;
}

DIV.panel H2 {
	font-size: 1.2rem;
	margin-top: 0px;
	padding-top: 0px;
}

DIV.panel p:first-child {
	margin-top: 0px;
	padding-top: 0px;
}

DIV.panel P:last-child {
	margin-bottom: 0px;
	padding-bottom: 0px;
}

DIV.panel SPAN.lead-in {
	font-weight: bold;
}

/* A download panel. */

DIV.download {
	font-family: 'Public Sans', 'Arial', 'Tahoma', 'Helvetica', sans-serif;
}

DIV.download DIV.title {
	font-size: 1.2rem;
	font-weight: bold;
	margin: 0px;
	padding: 0px 0.25em;
	background-color: #228b22;
	color: #ffffff;
}

DIV.download DIV.file {
	padding: 2px;
	font-weight: bold;
}

DIV.download DIV.file IMG {
	vertical-align: middle;
}

DIV.download DIV.file IMG.compatibility
{
	float: right;
	padding-left: 2px;
}

DIV.download DIV.info {
	margin: 0.25em;
	font-style: normal;
}

DIV.download DIV.test {
	margin: 0.5em 0.25em;
	font-weight: bold;
}

DIV.download DIV.requirements {
	margin: 0.25em;
	text-align: left;
	font-style: italic;
}

DIV.download DIV.requirements P {
	margin: 0;
}

DIV.download DIV.requirements UL {
	margin: 0;
	padding-left: 2em;
}

DIV.download DIV.metadata {
	margin: 0.25em;
	text-align: center;
	font-style: normal;
}

/* The Page Copyright Footer */

/* Below 800px, all three entries are shown above each other. */

@media (max-width: 799px) {
	#footer {
		color: #228b22;
		clear: both;
		font-size: 1.0rem;
		padding: 5px 5%;
		border-top-style: solid;
		border-top-width: 4px 0px;
		border-top-color: #228b22;
	}

	#footer DIV.date {
		column-span: all;
		text-align: center;
		font-weight: bold;
	}

	#footer DIV.contact DIV.left {
		text-align: center;
	}

	#footer DIV.contact DIV.right {
		text-align: center;
	}
}

/* At 800px and above, the contact and copyright info move alongside each other. */

@media (min-width: 800px) {
	#footer {
		color: #228b22;
		clear: both;
		font-size: 1.0rem;
		padding: 5px 5%;
		border-top-style: solid;
		border-top-width: 4px 0px;
		border-top-color: #228b22;
	}

	#footer DIV.date {
		column-span: all;
		text-align: center;
		font-weight: bold;
	}

	#footer DIV.contact {
		display: table;
		width: 100%
	}

	#footer DIV.contact DIV.left {
		display: table-cell;
		width: 50%;
		padding-right: 2em;
		text-align: right;
	}

	#footer DIV.contact DIV.right {
		display: table-cell;
		width: 50%;
		padding-left: 2em;
		text-align: left;
	}
}

/* Image Selection. */

@media (max-width: 999px) {
	DIV.image-left {
		margin: 1em 0em;
		text-align: center;
	}

	DIV.image-right {
		margin: 1em 0em;
		text-align: center;
	}
}

@media (min-width: 1000px) {
	DIV.image-left {
		float: left;
		padding: 0em;
		margin: 0em 1em 1em 0em;
	}

	DIV.image-right {
		float: right;
		padding: 0em;
		margin: 0em 0em 1em 1em;
	}

	P.image-closeup {
		margin-top: 0em;
	}

}

@media (max-width: 319px) {
	DIV.icon-left {
		margin: 1em 0em;
		text-align: center;
	}
}

@media (min-width: 320px) {
	DIV.icon-left {
		float: left;
		padding: 0em;
		margin: 0em 1em 1em 0em;
	}

	P.icon-closeup {
		margin-top: 0em;
	}

}

/* Banner advert. */

DIV.banner {
	text-align: center;
	margin: 1em 0;
}

DIV.banner IMG {
	max-width: 100%;
	height: auto;
}

/* Images which should scale down to the available width. */

IMG.responsive {
	max-width: 100%;
	height: auto;
}

DIV.titled {
	text-align: center;
}

DIV.titled .title {
	font-family: 'Public Sans', 'Arial', 'Tahoma', 'Helvetica', sans-serif;
}

IMG {
	border: 0;
}

/* New Downloads. */

P.new-downloads {
	width: 100%;
	text-align: center;
	font-weight: bold;
	background: #b7f6b7;
	color: #228b22;
	padding: 2px;
	border-radius: 4px;
}

@media (min-width: 800px) {
}

/* Styles for forms. */

INPUT.action {
	color: #228b22;
	font-weight: bold
}

/* Styles for the login page. */

TABLE.login-form {
	margin: 3em auto;
}

P.login-cookies-note {
	text-align: center;
	font-size: 0.9rem;
}

P.login-error {
	text-align: center;
	color: #ff0000;
}

/* Paragraph spacing. */

P {
	margin: 1rem 0;
}

/* Heading Styles */

H1 {
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: 2rem;
	font-weight: 500;
	text-decoration: none;
	color: #228b22;
	clear: both;
}

H2 {
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: 1.5rem;
	font-weight: 500;
	text-decoration: none;
	color: #228b22;
	margin: 1.5rem 0 1rem;
	clear: both;
}

H3 {
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: 1.2rem;
	font-weight: 500;
	text-decoration: none;
	color: #228b22;
	margin: 1.2rem 0 1rem;
	clear: both;
}

H4 {
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: 1rem;
	font-weight: 500;
	text-decoration: none;
	color: #228b22;
	margin: 1.0rem 0 1rem;
	clear: both;
}

/* Link Styles */

A:link {
	text-decoration: underline;
	color: #228b22;
}

A:visited {
	text-decoration: underline;
	color: #228b22;
}

A:hover {
	text-decoration: underline;
	color: #228b22;
}

A.external {
	background: url("external.png") center right no-repeat;
	padding: 0 13px 0 0;
}

/* Class definitions. */

SPAN.site-name {
	font-weight: bold;
	color: #228b22;
}

P.index-link {
	text-align: right;
	font-weight: bold;
}

/* Potentially obsolete? */

.quote
{
  margin: 0em 0em 1em 0em;
  border: 2px dashed #228b22;
  padding: 1em 2em 2em 2em;
  background-color: #b7f6b7;
  color: #000000;
}

.boxed
{
  border: 2px solid #228b22;
  padding: 0.5em;
}