@charset "UTF-8";

/* default CSS stylesheet */

/* For margins, borders, padding, etc:
   - a single value applies to all four sides 
   - sets of two values follow the sequence top+bottom, left+right 
   - sets of three values follow the sequence top, left+right, bottom 
   - sets of four values follow the sequence top, right, bottom, left 
*/

/* 
 * Using variables from imported stylesheets
 * =========================================
 * 
 * Write e.g. color: var(--color-crimson); font-family: var(--heading-typeface);
 * 
 */


/*****************************************************************************/
/*                                                                           */
/*  IMPORTS                                                                  */
/*                                                                           */
/*****************************************************************************/

/* constant colours */
@import "const-colors.css";

/* Font names and scaling */
@import "fonts/fonts.css";





/*****************************************************************************/
/*                                                                           */
/*  VARIABLES                                                                */
/*  (variables must go inside the :root psuedo-selector)                     */
/*                                                                           */
/*****************************************************************************/

:root {
	--main-accent-color: #0059b2;
}





/*****************************************************************************/
/*                                                                           */
/*  PAGE SETUP FOR PRINT                                                     */
/*                                                                           */
/*****************************************************************************/

@page {
	size: A4;
	margin: 20mm 25mm;
	padding-bottom: 0.5em;
	border-bottom: thin solid red;
	/* no user agents (except PrinceXML) appear to support the following rule */
	@bottom-center {
		font-size: 10pt;
		font-family: var(--heading-typeface), "Constantia", "Georgia", sans-serif;
		content: counter(page) "/" counter(pages);
		vertical-align: top;
		padding-top: 0.5em;
		margin: 0.5em;
	}

}





/*****************************************************************************/
/*                                                                           */
/*  SCREEN MEDIA RULES                                                       */
/*                                                                           */
/*****************************************************************************/

@media screen {

	html {
		margin-left: 10%;
		margin-right: 10%;
		/* don't have the text go right to the bottom of the viewport */
		padding-bottom: 2em;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		background-color: var(--main-accent-color);
		color: white;
		border: 12px;
		border-radius: 6px;
		padding: 0.25em 0.5em 0.25em 0.5em;
	}

	table {
		border: var(--main-accent-color) solid 2px;
	}

	thead {
		border-bottom: var(--main-accent-color) solid 2px;
	}

	tfoot {
		border-top: var(--main-accent-color) solid 2px;
	}

	td,
	th {
		border: var(--main-accent-color) solid 1px;
	}
}





/*****************************************************************************/
/*                                                                           */
/*  PRINT MEDIA RULES                                                        */
/*                                                                           */
/*****************************************************************************/

@media print {

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		color: black;
		padding: 0pt;
	}

	table {
		border: #aaaaaa solid medium;
	}

	thead {
		border-bottom: #aaaaaa solid medium;
	}

	tfoot {
		border-top: #aaaaaa solid medium;
	}

	td,
	th {
		border: #aaaaaa solid thin;
	}

	a,
	a:active,
	a:link,
	a:visited {
		color: black;
		padding: 0 0.15em;
	}

	a[href]:after {
		content: " [" attr(href) "]";
	}

	a:link {
		background-color: #dddddd;
		text-decoration: none;
	}
}





/*****************************************************************************/
/*                                                                           */
/*  ANY-MEDIA RULES                                                          */
/*                                                                           */
/*****************************************************************************/

/*********************************************************/
/*                                                       */
/*  LINKS                                                */
/*                                                       */
/* ***************************************************** */

/* 
 * The order of link states is important, as the priority of styling is set by 
 * the order of the styles.
 * 
 * The order should be:
 * link
 * visited
 * hover
 * active
 * focus
 */

a:link {
	color: var(--main-accent-color);
	border: #ffffff solid 1px;
	margin: -1px;
	text-decoration: none;
}

a:visited {
	color: var(--main-accent-color);
	border: #ffffff solid 1px;
	margin: -1px;
	text-decoration: none;
}

a:hover {
	color: var(--main-accent-color);
	background-color: var(--color-yellow-L95);
	border: var(--main-accent-color) solid 1px;
	margin: -1px;
	text-decoration: none; /* set to highlight links when mouse over */
	cursor: pointer;
}




/*********************************************************/
/*                                                       */
/*  TOP-LEVEL ELEMENTS AND GLOBAL RULES                  */
/*                                                       */
/*=*******************************************************/

/* 
 *   set the box sizing model so that the specified width 
 *   and height _includes_ padding and border widths. 
 */

html {
	box-sizing: border-box;
}

/* 
 *   and inherit border-box all the way down the cascade  
 */

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

body {
	position: relative;
	padding: 0;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.2;

	font-family: var(--body-typeface), "Constantia", "Georgia", sans-serif;
	width: 100%;
	max-width: 1000px;
	min-width: 500px;
	min-height: 100%;
}

section {
	margin-bottom: 4em;
	/*border-bottom-style: solid;
	border-bottom-width: 8px;
	border-bottom-color: red;*/
}

.nodisplay,
.hide {
	display: none;
}



/*********************************************************/
/*                                                       */
/*  PARAGRAPHS AND HEADINGS                              */
/*                                                       */
/*=*******************************************************/

p {
	margin-bottom: 1em;
}

h1 {
	font-size: 250%;
}

h2 {
	font-size: 208%;
}

h3 {
	font-size: 173%;
}

h4 {
	font-size: 144%;
}

h5 {
	font-size: 120%;
}

h6 {
	font-size: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--heading-typeface), "Candara", sans-serif;
	margin-top: 1em;
	margin-bottom: 0.25em;

}



/*********************************************************/
/*                                                       */
/*  ORDERED AND UNORDERED LISTS                          */
/*                                                       */
/*=*******************************************************/

ol,
ul {
	margin-bottom: 0;
}

li p {
	margin-bottom: 0.5em;
}

li {
	margin-bottom: 1.5em;
}



/*********************************************************/
/*                                                       */
/*  DEFINITION LISTS                                     */
/*                                                       */
/*=*******************************************************/

dt {
	font-weight: bold;
}

dd {
	margin-bottom: 0.5em;
}



/*********************************************************/
/*                                                       */
/*  TABLES                                               */
/*                                                       */
/*=*******************************************************/

table {
	padding: 0px;
	border-collapse: collapse;
}

td,
th {
	padding: 2px;
}

td:empty::before {
	content: "\0000a0"; /* Prefix empty cell content with a non-breaking space so that cells don't collapse */
}



/*********************************************************/
/*                                                       */
/*  INLINE ELEMENTS                                      */
/*                                                       */
/*=*******************************************************/

pre,
code,
mono,
tt {
	font-family: var(--mono-typeface), "Consolas", "Menlo", monospace;
	font-size: 85%; /* size to look nice in proportion to body text */
}

.em {
	font-style: italic;
}

.strong {
	font-weight: bold;
}

.emstrong,
.strongem {
	font-style: italic;
	font-weight: bold;
}