/*!Author information for CSS code
=================================================
   Version 2.00 | Monday, October 21, 2019
   Style sheet © 2012-2019, Keith W Bell (KWB)
   www.december14.biz
   ----------------------------------------------
   This style sheet, associated graphics and web
   page design are copyrighted materials and may
   not be copied or reproduced by any party for
   any reason whatsoever.
   ----------------------------------------------
   Designed 'in the browser' according to the
   'mobile first' philosophy with progressive
   enhancement for wider screens and more
   capable browsers. The base 'mobile' styles
   also serve for printing.
   ----------------------------------------------
   C O N T E N T S                           Flag
   ----------------------------------------------
   Layer 1 - Settings                          =1
   Layer 2 - Generic                           =2
   Layer 3 - Base                              =3
   Layer 4 - Components                        =4
   Adjustments for wider screens               =5
================================================= */


/* Layer 1 - Settings                          =1
=================================================
 * Set the theme colour. Defaults to #333333 if
   custom properties are not supported.
 * Set the width of .col-1 to accommodate the
   domain name. Add 2rem to width required for
   Cabin font to allow for larger metrics of
   possible fallbacks.
================================================= */

:root {
	--theme-colour: #d42333;
	--width-col-1: 11rem;
/*	The next two are constants. */
	--width-col-2-med: 25rem;
	--width-col-2-lge: 31.25rem;
/* Calculated variables save a little typing later. */
	--width-wrapper-med: calc(var(--width-col-1) + var(--width-col-2-med));
	--width-wrapper-lge: calc(var(--width-col-1) + var(--width-col-2-lge));
/* I wish var() could be used in media query declarations! Alas, we need to do
   the arithmetic anyway...
	Calculate the rem values of the wrapper widths and enter these in the media
	queries, i.e. (min-width: Xrem).
      --width-wrapper-med = 36rem
      --width-wrapper-lge = 42.25rem                                        */
	}


/* Layer 2 - Generic                           =2
=================================================
 * Basic reset.
 * Text highlighting.
================================================= */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

::selection {
	color: #ffffff;
	background: #333333;
	text-shadow: none;
	}


/* Layer 3 - Base                              =3
=================================================
   Unclassed elements.
   ----------------------------------------------
   Font stack: Cabin is the webfont; calibri has
   similar metrics and is installed on Windows;
   Trebuchet has slightly larger metrics and is
   installed on macOS and iOS as well as on
   Windows. Linux? Pot luck!
================================================= */

html {
	border-top: 3px solid #333333;
	}

body {
	padding-top: 50px;
	border-top: 15px solid #333333;
	border-color: var(--theme-colour);
	font: 16px/1.5 cabin, calibri, trebuchet ms, sans-serif;
	text-align: center;
	color: #333333;
	background: #ffffff;
	}

strong, b {
	font-weight: bold;
	color: var(--theme-colour);
	}

img,
iframe {
	border: 1px solid #333333;
	border-width: 1px 0;
	border-color: var(--theme-colour);
	width: 100%;
/*	Limit to natural width of images. */
	max-width: 500px;
	}

img {
	display: inline-block;
	margin-bottom: 2em;
	}

iframe {
	margin-top: 0.5em;
	margin-bottom: 2em;
	}

h1 {
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	font-size: 1.5em;
	font-weight: bold;
	}

h2 {
	font-size: 1em;
	font-weight: bold;
	}

ul {
	margin-top: -1.75em;
	margin-bottom: 2em;
	list-style: inside;
	}

li,
p {
	margin-right: 0.5em;
	margin-left: 0.5em;
	margin-bottom: 0.2em;
	}

p {
	margin-bottom: 2em;
	}

hr {
	display: none;
	}


/* Layer 4 - Components                        =4
=================================================
 * Fully designed blocks or UI elements.
 * .desrever is class name for reversed text.
================================================= */

a:link,
a:visited
	{
	color: #0033ee;
	background: #ffffff;
	}

a:hover,
a:focus,
a:active
	{
	color: var(--theme-colour);
	background: #ffffff;
	}

.hr /* On DIV element. */ {
	margin-bottom: 1em;
	border-bottom: 1px solid #333333;
	border-color: var(--theme-colour);
	}

.domain /* On P element. */ {
	border-bottom: 4px solid #333333;
	border-color: var(--theme-colour);
	font-size: 1.2em;
	font-weight: bold;
	display: inline;
	}

.credit /* On P element. */ {
	text-transform: uppercase;
	}

.no-js .desrever /* On A element; reverse text direction when JS is disabled. */ {
	border: 0;
	direction: rtl;
	unicode-bidi: bidi-override;
	text-align: left;
	}


/* Adjustments for wider screens               =5
=================================================
 * The first media query provides for a simpler
   presentation for IE, which doesn't understand
   var() as used in the later @media declarations
   - which overwrite the first set of rules for
   capable browsers.
   ----------------------------------------------
 * The next media query is for medium ('med')
   screens; and the third for large ('lge').
 * Min-widths are set according to the relevant
   .wrapper widths.
================================================= */

@media screen and (min-width: 620px) {
	.wrapper {
		margin: 0 auto;
		width: 600px;
		}
}

@media screen and (min-width: 36rem) {

	body {
	/*	Compensation for added width to .col-1; also avoids 'jump' when crossing
		width boundaries caused by presence of the scrollbar. */
		margin-left: -2rem;
		}

	h1 {
		margin-top: 0;
		}

	ul {
		margin-left: 15px;
		list-style: outside;
		}

	li,
	p {
		margin-right: 0;
		margin-left: 0;
		}

		.domain {
			margin-top: 0.3em;
			display: inline-block;
			}

		.credit {
			text-transform: capitalize;
			}

	.wrapper {
		margin-right: auto;
		margin-left: auto;
		text-align: left;
		width: var(--width-wrapper-med);
		}

	.col-break {
		clear: left;
		}

	.col-1 {
		float: left;
		padding-right: 15px;
		text-align: right;
		width: var(--width-col-1);
		}

	.col-2 {
		 float: left;
		 padding-left: 15px;
		 width: var(--width-col-2-med);
		 text-align: left;
		 }

}

@media screen and (min-width: 42.25rem) {

	.wrapper {
		width: var(--width-wrapper-lge);
		}

	.col-2 {
		width: var(--width-col-2-lge);
		}

}