/************************************************************************************************************************************/
/** main.css - general styling for the site  (excluding main navigation)                                                           **/
/************************************************************************************************************************************/

/**********************************************/
/** define standard site colours **************/
/*:root {
/*           */
/*  #feffef; /* Page background colour - very light manilla */
/*  #c12126; /* Croquet England Red */
/*  #253d87; /* Croquet England Dark Blue */
/*           */
/*  #d7def4; /* Lightened Croquet England Blue */
/* 	#ebeefa; /* Washed-Out Croquet England Blue */
/*        	  */
/*  #fbe9ea; /* Washed-Out Croquet England Red */
/*        	  */
/* Other used colours:
/* 	color: #ff0000; /* red */
/* 	color: #333333; /* dark grey */
/* 	color: #008080; /* medium dark aquamarine */
/* 	color: #400000; /* dark burgundy */
/*           */
/* table background colouring: */
/* 	background-color: #FFFFD8; /* very light fawn */
/* 	background-color: #FFFFB0; /* almost white */
/* 	background-color: #FFD8FF; /* very light pink */
/* 	background-color: #FFD8D8; /* lightish pink */
/* 	background-color: #D8FFFF; /* light blue */
/* 	background-color: #D8FFD8; /* light green */
/* 	background-color: #D8D8FF; /* light blue-grey */
/* 	background-color: #D8D8D8; /* grey */
/*
/**********************************************/
/*
Note on z-index:
	- The default seems to be 0 (actually 'auto', which means equal to its parent) so it is set explicitly here.
	- tablekit editor uses 100 for cell editor and 5 for its container.
	- JavaScript libraries doing things like drag-and-drop use values like 1000 and 1001, and even one example of 200000.
	- tinyMCE uses 100 for full-page menu.
	- jTabs 5.
	- 2016 site menu is 10.
	- 2020 site Navigator:
		- navContainer z=10
			- navLogo
			= navChoices z=10
				<li>{option}
			# navIconButtons
				{search}
			# navSwitch z=100
		- navCurtain z=9 when active
	- 2020 "Home Page" menu buttons:
		div.navBlock z=7
			- p.navLegend z=9
				{legend}
			- p.navImg z=8
				{img} z=8

* { margin: 0; padding: 0; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ul, ol, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video  { /* "reset" stylesheet - override strange browser defaults - http://meyerweb.com/eric/tools/css/reset/ *//*
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
:focus {
	outline: 0;
}
*/
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	background-color: #feffef; /* Page background colour - very light manilla */
	color: black;
	font-weight: normal;
	font-family: Verdana, Tahoma, Arial, Helv, Helvetica, sans-serif;
	font-size: medium;
	margin: 0px;
	margin-left: 5px; /* we thought the new site would not need a margin, but in Firefox at least, the text is just too close to the frame border */
	margin-right: 5px; /* we thought the new site would not need a margin, but in Firefox at least, the text is just too close to the frame border */
	line-height: 1.2;
	box-sizing: border-box; /* make width include padding and border (but not margins) */
	overflow: auto;
    z-index: 0; /* see z-index note above */
    position: relative; /* required for z-index to work */
}
*, *:before, *:after {
	box-sizing: inherit;
}
/* watermark */
body:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: #feffef; /* Page background colour - very light manilla */
	color: black;
	background-image: url(/scripts/images/graphics/CroquetEngland_Logo_Circle.svg);
	background-origin: border-box;
	background-clip: border-box;
	z-index: -1;
}
@media (max-width: 767px) { /* phone or smaller screen */
	body:before {
		background-position: center;
		background-size: 50%;
		z-index: -1;
		opacity: 0.12;
	}
}
@media (min-width: 768px) { /* bigger than phone screen */
	body:before {
		background-position: 90% 30%;
		background-size: 30%;
		opacity: 0.12;
	}
}
/* /watermark */
#mainContent {
    position: relative;
    opacity: 1;
}
pre, .pre {
	font-family: 'Courier New', Courier, monospace;
	white-space: pre;
}
p {
	display: block;
	margin-top: 1em;
	margin-bottom: 1em;
	padding-bottom: 0px;
	padding-top: 0px;
	orphans: 2;
	widows: 2;
}
a {
	color: #253d87; /* Croquet England Dark Blue */
	text-decoration-line: underline;
	text-decoration-color: #253d87; /* Croquet England Dark Blue */
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}
a:visited {
	color: #253d87; /* Croquet England Dark Blue */
}
a:hover {
	color: #c12126; /* Croquet England Red */
	text-underline-offset: 3px;
}
a:active {
	color: #ff0000; /* red */
}
img {
	border: 0;
	margin: 0;
}
img.center, p.center {
	margin-left: auto;
	margin-right: auto;
}
/* print, noprint, printOnly for screen, print and hand-held display */
@media all {
	.newpage {
		clear: both;
		display: block;
	}
}
@media screen {
	.noprint {
		display: inherit;
	}
	span.noprint {
		display: inline;
	}
	.print {
		display: none;
	}
	.printOnly {
		display: none;
	}
	.BBContainer {
		display: inherit;
	}
}
@media print {
	.print {
		display: inherit;
	}
	.noprint {
		display: none;
	}
	.printOnly {
		display: inherit;
	}
	.newpage	{
		clear: both;
		page-break-before: always;
	}
	.BBContainer {
		display: none;
	}
	a:visited {
		color: black;
	}
	a:hover {
		color: black;
	}
	a:active {
		color: black;
	}
	a {
		text-decoration: none;
		color: black;
	}
}
/** /print, noprint, printOnly **/
.nolink {
	text-decoration: none;
}
.footnote {
	font-size: 80%;
}
/** Tables ********************/
table {
	font-weight: normal;
	/*border-collapse: collapse;*/
	border-collapse: separate;
	border-spacing: 0;
	empty-cells: show;
	margin-bottom: 1em; /* space between consecutive tables */
    border-width: 0;
}
table.center, div.center {
	margin-left: auto;
	margin-right: auto;
}
td.center,
th.center {
	text-align: center;
}
.withBorder { /* not just table */
	border-right: 1px solid #d7def4; /* Lightened Croquet England Blue */
	border-top: 1px solid #d7def4; /* Lightened Croquet England Blue */
	border-left: 1px solid #d7def4; /* Lightened Croquet England Blue */
	border-bottom: 1px solid #d7def4; /* Lightened Croquet England Blue */
	border-radius: 10px;
}
table.withBorder {
	border-right: 1px solid #d7def4; /* Lightened Croquet England Blue */
	border-top: 1px solid #d7def4; /* Lightened Croquet England Blue */
	border-left: 1px solid #d7def4; /* Lightened Croquet England Blue */
	border-bottom: 1px solid #d7def4; /* Lightened Croquet England Blue */
}
div.withBorder {
	padding: 2px;
}
p.withBorder {
	padding: 2px;
}
table.withBorder td {
	border-right: 1px solid #d7def4; /* Lightened Croquet England Blue */
	border-top: 1px solid #d7def4; /* Lightened Croquet England Blue */
	border-left: 1px solid #d7def4; /* Lightened Croquet England Blue */
	border-bottom: 1px solid #d7def4; /* Lightened Croquet England Blue */
}
table.withBorder th {
	border-right: 1px solid #ebeefa; /* Washed-Out Croquet England Blue */
	border-top: 1px solid #ebeefa; /* Washed-Out Croquet England Blue */
	border-left: 1px solid #ebeefa; /* Washed-Out Croquet England Blue */
	border-bottom: 1px solid #ebeefa; /* Washed-Out Croquet England Blue */
}
.noBorder {
    border-width: 0;
}
.border2 {
    border-width: 3px;
}
.border3 {
    border-width: 5px;
}
.nopadding {
	margin-top: 0px;
	margin-bottom: 0px;
	padding-bottom: 0px;
	padding-top: 0px;
}
table th {
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
	background-image: none;
	background-color: #d7def4; /* Lightened Croquet England Blue */
	color: #253d87; /* Croquet England Dark Blue */
	margin-top: 0px;
	padding-top: 2px;
	margin-bottom: 0px;
	padding-bottom: 3px;
	padding-left: 3px;
	padding-right: 3px;
	border-color: black;
}
table td {
	vertical-align: middle;
	font-weight: normal;
	margin-top: 0px;
	padding-top: 2px;
	margin-bottom: 0px;
	padding-bottom: 3px;
	padding-left: 3px;
	padding-right: 3px;
    border-color: #d7def4; /* Lightened Croquet England Blue */
}
table.text th {
	text-align: left;
	vertical-align: middle;
}
th.top, td.top {
	vertical-align: top;
}
table.text th.top, table.data th.top, table.text td.top, table.data td.top {
	vertical-align: top;
}
table.text th.left, table.data th.left, table.text td.left, table.data td.left {
	text-align: left;
}
table.text th.right, table.data, th.right, table.text td.right, table.data, td.right {
	text-align: right;
}
table.text td {
	text-align: Left;
	vertical-align: top;
	background-image: none;
}
table.right td {
	text-align: right;
}
table.data {
	background-image: none;
	vertical-align: middle;
	background-color: #ebeefa; /* Washed-Out Croquet England Blue */
	color: black;
}
table.data td {
	text-align: center;
	vertical-align: middle;
	background-image: none;
}
table.text td.left, table.data td.left, table.left td {
	text-align: left;
}
table.text td.right, table.data td.right, table.right td {
	text-align: right;
}
caption {
	font-weight: bold;
	font-style: italic;
	font-size: 84%;
	caption-side: bottom;
}
/* td.a and td.b are used to make tournament draw backgrounds match for pairs playing a match */
td.a {
	vertical-align: middle;
	background-color: #ebeefa; /* Washed-Out Croquet England Blue */
}
td.b {
	vertical-align: middle;
	background-color: #fbe9ea; /* Washed-Out Croquet England Red */
}
.bgCol_1 {
	background-color: #FFFFD8; /* very light fawn */
}
.bgCol_1a {
	background-color: #FFFFB0; /* almost white */
}
.bgCol_2 {
	background-color: #FFD8FF; /* very light pink */
}
.bgCol_2a {
	background-color: #FFD8D8; /* lightish pink */
}
.bgCol_3 {
	background-color: #D8FFFF; /* light blue */
}
.bgCol_3a {
	background-color: #D8FFD8; /* light green */
}
.bgCol_4 {
	background-color: #D8D8FF; /* light blue-grey */
}
.bgCol_4a {
	background-color: #D8D8D8; /* grey */
}
.highlight td {
	border-top: #c12126 3px solid; /* Croquet England Red */
	border-bottom: #c12126 3px solid; /* Croquet England Red */
	color: #c12126; /* Croquet England Red */
}
tr.highlight td {
	border-top: #c12126 3px solid; /* Croquet England Red */
	border-bottom: #c12126 3px solid; /* Croquet England Red */
	color: #c12126; /* Croquet England Red */
}
td.lowlight {
	background-color: #d7def4; /* Lightened Croquet England Blue */
	color: gray;
}
tr.lowlight td {
	background-color: #d7def4; /* Lightened Croquet England Blue */
	color: gray;
}
td > p:first-of-type, th > p:first-of-type { /* first paragraph in a table cell should not space off more than if it was not present */
	margin-top: 0;
	margin-bottom: 0;
}
.cssTable { /* CSS Table */
    display: table;
}
.cssTable-row {
    display: table-row;
}
.cssTable-header {
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
	background-image: none;
	background-color: #d7def4; /* Lightened Croquet England Blue */
	color: black;
	margin-top: 0px;
	padding-top: 2px;
	margin-bottom: 0px;
	padding-bottom: 3px;
	padding-left: 3px;
	padding-right: 3px;
}
.cssTable-cell {
    display: table-cell;
    vertical-align: top;
    overflow: auto;
}
/** /Tables ********************/
.pageHeader { /* reserved for H1 page heading */
	display: inline;
	font-size: 170%;
	margin-top: 1px;
	font-weight: bold;
	margin-bottom: 1px;
    color: #253d87; /* Croquet England Dark Blue */
    position: relative;
}
.footer {
	clear: both;
	border-top: 1px solid #253d87; /* Croquet England Dark Blue */
	font-size: 84%;
	margin-top: 1px;
}
h1, h2, h3, h4, h5 {
	margin-top: 10px;
	margin-bottom: 10px;
	font-weight: bold;
	color: #253d87; /* Croquet England Dark Blue */
}
h1 {
	font-size: 150%;
}
h2 {
	font-size: 120%;
}
h3 {
	font-size: 100%;
}
h4 {
	font-size: 100%;
	font-style: italic;
}
h5 {
	font-size: 100%;
	font-style: italic;
	text-indent: 2em;
}
.easyRead { /* text blocks user needs to be able to read easily */
    max-width: 35em;
}
.narrowRead { /* text blocks like a newspaper column */
    max-width: 18em;
}
.formText { /* text within forms that needs to be contained for easy reading */
    max-width: 25em;
}
.signature {
	font-style: italic;
	font-size: 90%;
    margin-left: 3em;
}
/** screen size *********************/
@media (min-width: 1101px) { /* bigger than tablet */
    .hideOnBigScreen { /* hide if bigger than tablet - allows an element to relocate in a user-editable page */
       display: none !important;
   }
}
@media (max-width: 1100px) and (min-width: 768px) { /* tablet or smaller - iPad is 1024 wide */
    .hideOnMediumScreen { /* hide if tablet (see also hideOnSmallScreen) - allows an element to relocate in a user-editable page */
       display: none !important;
   }
}
@media (max-width: 767px) { /* phone or smaller screen */
	body {
		min-height: 100vh; /* needed for handheld devices (??) but causes tinyMCE text area to grow and grow */
	}
    .hideOnSmallScreen { /* hide if phone or smaller - allows an element to relocate in a user-editable page */
        display: none !important;
    }
    h1, h2, h3, h4, h5 { /* headings smaller. less white space, border top */
        margin-top: 2px;
        padding-top: 2px;
        padding-bottom: 2px;
        border-top: 1px solid #253d87; /* Croquet England Dark Blue */
        margin-bottom: 3px;
        line-height: 1;
    }
    h1 {
        font-size: 100%;
        text-indent: 0em;
    }
    h2 {
        font-size: 100%;
        text-indent: 2em;
    }
    h3 {
        font-size: 100%;
        text-indent: 4em;
    }
    h4 {
        font-size: 100%;
        text-indent: 6em;
    }
    h5 {
        font-size: 100%;
        text-indent: 8em;
    }
    .pageHeader { /* reserved for H1 page heading */
        font-size: 110%;
        line-height: 1;
        border-top: 0;
    }
    .easyRead {
        max-width: 100%;
    }
    .formText {
        max-width: 100%;
    }
}
/** /screen size ********************/
ul {
	list-style: circle outside url(/scripts/images/blue-circle.gif);
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-bottom: 0px;
	padding-top: 0px;
	padding-left: 24px; /* size of the bullet plus the page padding that will be removed in the new layout */
}
ol {
	list-style-position: outside;
	margin-left: 2em;
	padding-left: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-bottom: 0px;
	padding-top: 0px;
}
ol {
	list-style-type: decimal;
}
ol ol {
	list-style-type: lower-alpha;
}
ol ol ol {
	list-style-type: lower-roman;
}
ol ol ol ol {
	list-style-type: upper-alpha;
}
ol ol ol ol ol {
	list-style-type: decimal;
}
/** regs-numbering - automates list format of the Tournament Regulations **/
.regs-numbering ol {
	list-style-type: lower-alpha;
}
.regs-numbering ol ol {
	list-style-type: decimal;
}
.regs-numbering ol ol ol {
	list-style-type: upper-alpha;
}
.regs-numbering ol ol ol ol {
	list-style-type: lower-roman;
}
.regs-numbering ol ol ol ol ol {
	list-style-type: lower-alpha;
}
/** /regs-numbering **/
li {
	margin-top: 3px;
	margin-bottom: 0px;
	padding-bottom: 0px;
	padding-top: 0px;
}
ul.stylish {
	padding-left: 3em;
	margin: 0.5em 0;
	list-style: circle outside url(/scripts/images/16/point_right.gif);
}
ul.stylish li {
	margin: 0;
	padding: 0.1em 0 0 0.5em;
}
dl {
}
dt {
	font-weight: bold;
}
dd {
}
.disclaimer {
	clear: both;
	border-top: 1px solid #253d87; /* Croquet England Dark Blue */
	font-size: 84%;
	color: #008080; /* medium dark aquamarine */
}
form {
	margin: 0px;
}
.box {
	border-style: solid;
	border-color: #253d87; /* Croquet England Dark Blue */
	/* default border-width to whatever it is, usually 0 - allows override by border2/border3 */
	margin: 2px 2px 2px 2px;
	padding: 3px 3px 3px 3px;
	overflow: auto;
    border-radius: 15px;
}
div.box.withBorder {
	padding: 3px 3px 3px 3px; /* overcome CSS very-specific div.withBorder */
}
.inserted {
	color: #400000; /* dark burgundy */
}
.strikeout {
	text-decoration: line-through;
}
.highlight {
	color: #ff0000; /* red */
}
.highlight_animated {
	color: #ff0000; /* red */
    animation: draw-attention-med 1s;
	animation-delay: 1s;
	animation-iteration-count: 4;
}
.lowlight {
	color: gray;
}
.hidden {
	display: none;
}
.small {
	font-size: 70%;
}
code, .code {
	white-space: pre;
	font-family: Courier, 'New Courier', monospace;
	color: #333333; /* dark grey */
}
.large {
	font-size: 120%;
}
.bold {
	font-weight: bold;
}
.floatL {
	float: left;
	margin-right: 3px;
	margin-bottom: 3px;
}
.floatR {
	float: right;
	margin-left: 3px;
	margin-bottom: 3px;
}
.floatN {
	float: none;
}
.center {
	text-align: center;
}
p.floatL, p.floatR {
	margin-top: 0px;
}
.right {
	text-align: right;
}
.left {
	text-align: left;
}
hr.left {
	text-align: left;
	margin-left: 0;
}
.clear {
	clear: both;
}
.clearAfter:after {
    content: '';
    display: block;
	clear: both;
}
.nowrap {
	white-space: nowrap;
}
.allowWrap {
	white-space: normal;
}
.indent {
	padding-left: 2em !important;
	padding-right: 2em !important;
}
.unindent {
	margin-left: -2em;
	margin-right: -2em;
}
.attention {
	background-color: #d7def4; /* Lightened Croquet England Blue */
	color: black;
	border-top: 2px solid #253d87; /* Croquet England Dark Blue */
	border-bottom: 2px solid #253d87; /* Croquet England Dark Blue */
	padding: 5px 5px 2px 2px;
	margin: 10px auto;
	text-align: center;
	width: inherit;
}
.picture {
	border: 1px solid #d7def4; /* Lightened Croquet England Blue */
	border-radius: 3px;
	padding: 3px 3px 3px 3px;
	text-align: center;
	margin-left: 3px;
	margin-right: 3px;
	margin-top: 3px;
	margin-bottom: 3px;
	font-size: smaller;
	background-color: #ebeefa; /* Washed-Out Croquet England Blue */
	color: #253d87; /* Croquet England Dark Blue */
	display: inline-block;
	vertical-align: middle;
	font-weight: bold;
}
p.picture.floatL, p.picture.floatR {
	width: 32%;
}
.picture img {
	border: 1px solid #d7def4; /* Lightened Croquet England Blue */
	vertical-align: top;
	/*margin-bottom: 3px;*/
	margin-left: auto;
	margin-right: auto;
	display: block;
}
p.picture img {
	width: 98%;
}
sup, .sup {
    vertical-align: super;
    font-size: smaller;
}
sub, .sub {
    vertical-align: sub;
    font-size: smaller;
}
button {
	vertical-align: middle;
	padding: 3px;
	margin-left: 1px;
	margin-right: 1px;
	margin-top: 1px;
	margin-bottom: 1px;
	cursor: pointer;
	overflow: visible;
    border-radius: 4px;
}
button:hover {
    color: #253d87; /* Croquet England Dark Blue */
}
@media print {
	button {
		display: none;
	}
}
.navButton { /* deprecated - 2019 live home page "big buttons" */
    width: 12em;
}
/* columns layout (table replacement) - see also cols12-n */
[class*="columns-"] { /* don't set margins - they are outside the box model for "box-sizing: border-box;" */
	float: left;
	padding-left: 1%;
	background-color: #feffef; /* Page background colour - very light manilla */
	color: black;
	border-color: #253d87; /* Croquet England Dark Blue */
}
.columns-1 {
	width: 100%;
}
.columns-2 {
	width: 50%;
}
.columns-3 {
	width: 33.33%;
}
.cols-heading {
	text-align: center;
	vertical-align: middle;
	clear: both;
	font-size: 120%;
	font-weight: bold;
	background-color: #d7def4; /* Lightened Croquet England Blue */
	color: #253d87; /* Croquet England Dark Blue */
	border: none;
	margin-top: 10px;
	margin-bottom: 2px;
}
/* /columns */
.gazetteContainer {
	width: 110px;
	text-align: center;
	margin-top: 2px;
	margin-right: 2px;
	float: left;
	border-width: 2px;
	border-style: solid;
	border-color: #253d87; /* Croquet England Dark Blue */
}
/** navBlock - block-button menu system *********/
.navBlock {
	border: 2px solid #253d87; /* Croquet England Dark Blue */
	padding: 3px 3px 3px 3px;
	text-align: left;
	margin: 3px;
	padding: 0;
	background-color: #ebeefa; /* Washed-Out Croquet England Blue */
	color: #ffffff; /* white */
	font-weight: bold;
	font-size: 3.5vw;
    height: 3.5em;
	display: inline-block;
    border-radius: 15px;
    overflow: hidden;
	width: 98%; /* seems the only way to have a gap between home page buttons */
		/* setting box-sizing to content has margin collapse problem! WORK IN PROGRESS */
	z-index: 7; /* see z-index note above */
	position: relative; /* to allow absolute positioning of contained elements */
	text-shadow: 0 0 4px #000000; /* black */
}
@media (max-width: 767px) { /* phone or smaller screen */
	.navBlock {
		font-size: 220%;
		height: 2.8em;
	}
}
.navBlock:hover {
    border-color: #d7def4; /* Lightened Croquet England Blue */
    box-shadow: 0 0 20px 10px rgba(37, 61, 165, 0.5);
    position: relative;
    left: -2px;
    top: -2px;
	text-shadow: 3px 3px 3px #000000, 5px 5px 5px #253d87; /* Croquet England Dark Blue */
}
.navBlock p {
	position: absolute;
	background-color: transparent; /* text overlays image */
	color: black;
	margin-top: 0;
	top: 0;
	left: 0;
	display: inline-block;
}
.navBlock a, .navBlock a:visited, .navBlock a:hover, .navBlock a:active {
	/* remove normal link effects */
	color: #ffffff; /* white */
}
.navBlock img {
	padding: 0;
	margin: 0;
	border: none;
	z-index: 8; /* see z-index note above */
	width: 100%;
	object-position: 50% 50%;
	object-fit: cover;
}
.navBlock .navLegend {
	width: 100%;
	text-align: center;
	height: 100%;
	vertical-align: middle;
	padding: 0;
    border-top: none;
}
.navBlock .navImg {
	z-index: 8; /* see z-index note above */
	width: 100% /* required for wide buttons to stretch image beyond its actual width else containing box stops at edge of image */
}
.navBlock .navLegend {
	z-index: 9; /* see z-index note above */
}
.navBlock .navLegend a {
    text-decoration: none;
	width: 100%; /* so can click anywhere in the containing block */
	/* position the clickable text in the middle of the block: */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
/** /navBlock - home page big-button menu system *********/

/** floating layout - see also columns-n **/
[class*="cols12-"] { /* don't set margins - they are outside the box model for "box-sizing: border-box;" */
	float: left;
}
.colsFloat-R {
	float: right;
	margin: 0 0 0 0;
}
/* For desktop */
.cols12-1  {width: 08.33%;}
.cols12-2  {width: 16.66%;}
.cols12-3  {width: 25.00%;}
.cols12-4  {width: 33.33%;}
.cols12-5  {width: 41.66%;}
.cols12-6  {width: 50.00%;}
.cols12-7  {width: 58.33%;}
.cols12-8  {width: 66.66%;}
.cols12-9  {width: 75.00%;}
.cols12-10 {width: 83.33%;}
.cols12-11 {width: 91.66%;}
.cols12-12 {width: 100%;}

@media (max-width: 767px) { /* phone or smaller screen */
    [class*="cols12-"] {
        width: 100%;
    }
}
/* /floating layout */

/* large ball-shaped circle for making a point */
div.ballPointContainer { /* used as container with floatL for ballPoint+ballPointAligned set */
	max-width: 28em; /* define a width, ballPointAligned can also be class narrowRead */
}
div.ballPoint {
	box-sizing: content-box;
	font-size: 125%;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 8px solid #253d87; /* Croquet England Dark Blue */
    color: #253d87; /* Croquet England Dark Blue */
    text-align: center;
    margin-right: 10px;
    margin-bottom: 10px;
    float: left;
}
div.ballPoint p {
    width: 150px;
    height: 150px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    overflow: hidden;
}
.ballPointAligned { /* for a para next to a ballPoint so it is vertically-centred */
    height: 150px;
    display: table-cell;
    vertical-align: middle;
}
/* /ball-shaped circle */

/* Legal List Numbering */
#Table_of_Contents p {
	margin-top: 2px;
	margin-bottom: 0;
}
#Alphabetical_Index p {
	margin-top: 2px;
	margin-bottom: 0;
}
#Glossary p {
	margin-top: 0.8em;
	margin-bottom: 0.8em;
}
div.legalNumbering {
}
.lawlevel0 {
    font-weight: bold; font-size: 120%;
}
.lawlevel1 {
}
.lawlevel2 {
}
.lawlevel3 {
    margin-left: 2em;
}
.lawlevel4 {
    margin-left: 4em;
}
/* /Legal List Numbering */

/* Hierarchical List Numbering */
/* under development for complaints procedure */
.listL0 {
    font-weight: bold; font-size: 120%;
}
.listL1 {
    margin-left: 2em;
	text-indent: -2em;
}
.listL2 {
    margin-left: 4em;
	text-indent: -3em;
}
.listL3 {
    margin-left: 6em;
	text-indent: -4em;
}
.listL4 {
    margin-left: 8em;
	text-indent: -5em;
}
/* /Hierarchical List Numbering */