/*
File		=	bw_css_01.css
Location	=	basingstoke.wiki/styles/bw_css_01.css
Created		=	2023-07-11
Updated		=	2023-07-11
Author		=	Andrew Watten
Description	=	Style sheet for basingstoke.wiki pages

Notes on 'padding' & 'margin':
	padding =	Internal to an element.
				In a text box with a border:
					It would define the distance between the text and the border.
	margin	=	External to an element.
				On a page with many text boxes with borders:
					It would define the distance between the many text boxes.
	Setting	=	When 1 or more 'padding' or 'margin' settings are used, always define all 4 attributes as below:
					padding-top: 0px;
					padding-bottom: 0px;
					padding-left: 0px;
					padding-right: 0px;
						or
					margin-top: 0px;
					margin-bottom: 0px;
					margin-left: 0px;
					margin-right: 0px;
				In the hierarchy of CSS commands, put 'margin' 1st, then 'padding', then all other commands.
				If some values are not defined, then do not omit them as the above method generates the least confusion!
				Use the '0px' or 'auto' values instead!
				Note that '0px', 'auto' or not defining a 'margin' behave in different ways!
				The 'auto' can actually centre an item where '0px' will not, so be careful!
	Usage	=	This CSS only defines 'margin' in rare cases, like the header items & core blocks, as they never change.
				For other elements, they are not defined.
				This is because each element could sit on a page differently.
				This means you will have to add a 'margin' attribute as needed, but NOT in this CSS file!
				Note that in some cases, 'padding' behaves like 'margin' and visa-versa, so please experiment!
*/


/* Main body of page */
body {
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
	background-color: #C0C0C0;
	font-family: Arial, Helvetica, sans-serif;
}


/* Footer */
.footer {
	width: 100%;
	color: white;
	text-align: center;
}


/* Any selected or highlighted text */
::selection {
	background: #38C6F4;
}


/* Boxed sections */
.boxed {
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	background-color: #FFFFFF;
	border-radius: 6px;
	border: 2px solid #993333;
}


/* Centred header section */			
div#header {
	outline: none;
	text-align:center;
	font-family: Arial, Helvetica, sans-serif;	
	width:100%;
	background-color: #C0C0C0;
}


/* Items in header section */
.logo {
	/* Based on file logo_399x58_no_border.png */
	margin-top: 5px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 200px;
}
.page-title {
	font-size: 16px;
	text-align: center;
}
.page-info {
	margin-top: 15px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	font-size: 14px;
	text-align: justify;
}


/* Left sidebar section */
div#sidebar {
	float: left;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;	
	list-style-type: square;
	list-style-position: inside;
	height:100%;
	width: 240px;
	background-color: #C0C0C0;
}


/* Tools section. Tool area for when no sidebar used */
div#tool {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;	
	list-style-type: square;
	list-style-position: inside;
	height:100%;
	background-color: #C0C0C0;
}


/* Items in footer section */
.return-link {
	margin-top: 10px;
	margin-bottom: 8px;
	margin-left: 0px;
	margin-right: 0px;
	font-size: 14px;
	text-align: center;			
}
.copyright {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: white;
}

.copyright-boxed {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}


/* Input box basic */
.inputbox-label {
	font-size: 16px;
	display:inline-block;
	font-weight: normal;
	transition: 0.4s;
}
.inputbox-label-bold {
	font-size: 16px;
	display:inline-block;
	font-weight: bold;
	transition: 0.4s;
}
.inputbox-small-ro {
	/* Just a small text box for displaying read only comments */
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
	padding-right: 5px;
	border: 1px solid #993333;
	border-radius: 6px;
	font-family:courier, courier new, serif;
	font-size: 14px;
	transition: 0.4s;
	outline: none;	
	text-align: center;
}
.inputbox-med-ro {
	/* Just a medium text box for displaying read only comments */
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 2px;
	padding-right: 2px;	
	border: 2px solid #993333;
	border-radius: 6px;
	font-size:14px;
}
.inputbox-large {
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 10px;	
	padding-right: 10px;
	border: 1px solid #993333;
	border-radius: 6px;
	font-family:courier, courier new, serif;
	font-size: 16px;
	width: 100%;
	transition: 0.4s;
	box-sizing: border-box;
	outline: none;	
}


/* Lists of items */
.list-title {
	font-size: 16px;
	font-weight: bold;
}
.list-box {
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 2px;
	padding-right: 2px;
	border-radius:6px;
	border:2px solid #993333;
	width: 250px;
	font-family: Arial, Helvetica, sans-serif;
}
.list-box:active,
.list-box:hover,
.list-box:focus {
	outline-color: #993333;
}


/* Lumen hyperlink colours */
a:link {
	color: #0C9ED9;
	background-color: transparent;
	text-decoration: none;
}
a:visited {
	color: #0075C9;
	background-color: transparent;
	text-decoration: none;
}
a:hover {
	color: #38C6F4;
	background-color: transparent;
	text-decoration: underline;
}
a:active {
	color: #E77528;
	background-color: transparent;
	text-decoration: underline;
}


/* Lumen button */
.button-generic {
	/* Not greyed out when built */
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 32px;
	padding-right: 32px;
	text-align: center;
	display: block;
	background-color: #993333;
	border-radius:6px;
	border: none;
	color: white;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	cursor: pointer;
	opacity: 1;
	transition: 0.4s;
	transition-duration: 0.4s;
}
.button-generic:hover:enabled {
	background-color: #38C6F4;
}
.button-off {
	/* Greyed out when built */
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 32px;
	padding-right: 32px;
	text-align: center;
	display: block;
	background-color: #993333;
	border-radius:6px;
	border: none;
	color: white;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	cursor: pointer;
	opacity: 0.3;
	transition: 0.4s;
	transition-duration: 0.4s;
}
.button-off:hover:enabled,
.button-on:hover:enabled {
	background-color: #38C6F4;
	color: white;
}


/* Lumen radio controls */
.container-radio {
	margin-top: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
	margin-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 25px;
	padding-right: 0px;
	display: block;
	position: relative;
	cursor: pointer;
	font-size: 16px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
/* Hide the browser's default radio button */
.container-radio input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}	
/* On mouse-over, add a grey background color */
.container-radio:hover input ~ .checkmark-radio {
	background-color: #F2F0F1;
}
/* When the radio button is checked, add a white background */
.container-radio input:checked ~ .checkmark-radio {
	background-color: #white;
}
/* Show the indicator (dot/circle) when checked */
.container-radio input:checked ~ .checkmark-radio:after {
	display: block;
}
/* Style the indicator (dot/circle) */
.container-radio .checkmark-radio:after {
	top: 2px;
	left: 2px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #993333;
}
/* Create a custom radio button */
.checkmark-radio {
	position: absolute;
	top: 0;
	left: 0;
	height: 14px;
	width: 14px;
	background-color: #FFFFFF;
	border: 1px solid #993333;
	border-radius: 50%;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark-radio:after {
	content: "";
	position: absolute;
	display: none;
}

	
/* Lumen check controls */
.container-check {
	margin-top: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
	margin-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 25px;
	padding-right: 0px;
	display: block;
	position: relative;
	cursor: pointer;
	font-size: 16px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
/* Hide the browser's default check button */
.container-check input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}	
/* On mouse-over, add a grey background color */
.container-check:hover input ~ .checkmark-check {
	background-color: #F2F0F1;
}
/* When checked, add a white background */
.container-check input:checked ~ .checkmark-check {
	background-color: #white;
}
/* Show the indicator (dot/circle) when checked */
.container-check input:checked ~ .checkmark-check:after {
	display: block;
}
/* Style the indicator (dot/circle) */
.container-check .checkmark-check:after {
	top: 2px;
	left: 2px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #993333;
}
/* Create a custom check button */
.checkmark-check {
	position: absolute;
	top: 0;
	left: 0;
	height: 14px;
	width: 14px;
	background-color: #FFFFFF;
	border: 1px solid #993333;
	border-radius: 50%;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark-check:after {
	content: "";
	position: absolute;
	display: none;
}


/* Lumen dropdown controls */
select.dropdown {
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 15px;
	padding-right: 15px;
	color: white;
	font-size: 16px;
	border: 1px solid #993333;
	border-radius: 6px;
	transition: 0.3s;
	width: 162px;				
	background-color: #993333;
}
select.dropdown:focus {
	outline: none !important;
	border: 1px solid #0075C9;
}


/* Lumen table with rounded corners */
table.rounded-corners {
	background-color: #FFFFFF;
	--border: 2px solid #993333;
	border-radius: 6px;
	border-spacing: 0;
	border-collapse: separate;
	border: var(--border);
	overflow: hidden;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	text-align: center;
}
/* Apply padding to header and normal rows */
table.rounded-corners th,
table.rounded-corners td {
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 6px;
	padding-right: 6px;	
}
/* Apply a border to the right of all but the last column */
table.rounded-corners th:not(:last-child),
table.rounded-corners td:not(:last-child) {
	border-right: var(--border);
}
/* Apply a border to the bottom of all but the last row */
table.rounded-corners>thead>tr:not(:last-child)>th,
table.rounded-corners>thead>tr:not(:last-child)>td,
table.rounded-corners>tbody>tr:not(:last-child)>th,
table.rounded-corners>tbody>tr:not(:last-child)>td,
table.rounded-corners>tfoot>tr:not(:last-child)>th,
table.rounded-corners>tfoot>tr:not(:last-child)>td,
table.rounded-corners>tr:not(:last-child)>td,
table.rounded-corners>tr:not(:last-child)>th,
table.rounded-corners>thead:not(:last-child),
table.rounded-corners>tbody:not(:last-child),
table.rounded-corners>tfoot:not(:last-child) {
	border-bottom: var(--border);
}

	
/* Lumen table with rounded corners - sortable */
table.rounded-corners-sort {
	background-color: #FFFFFF;
	--border: 2px solid #993333;
	border-radius: 6px;
	border-spacing: 0;
	border-collapse: separate;
	border: var(--border);
	overflow: hidden;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	text-align: center;
}
/* Apply padding etc. to header and normal rows */
table.rounded-corners-sort th,
table.rounded-corners-sort td {
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 6px;
	padding-right: 6px;
	text-align: center;
}
/* Apply a border to the right of all but the last column */
table.rounded-corners-sort th:not(:last-child),
table.rounded-corners-sort td:not(:last-child) {
	border-right: var(--border);
}
/* Apply a border to the bottom of all but the last row */
table.rounded-corners-sort>thead>tr:not(:last-child)>th,
table.rounded-corners-sort>thead>tr:not(:last-child)>td,
table.rounded-corners-sort>tbody>tr:not(:last-child)>th,
table.rounded-corners-sort>tbody>tr:not(:last-child)>td,
table.rounded-corners-sort>tfoot>tr:not(:last-child)>th,
table.rounded-corners-sort>tfoot>tr:not(:last-child)>td,
table.rounded-corners-sort>tr:not(:last-child)>td,
table.rounded-corners-sort>tr:not(:last-child)>th,
table.rounded-corners-sort>thead:not(:last-child),
table.rounded-corners-sort>tbody:not(:last-child),
table.rounded-corners-sort>tfoot:not(:last-child) {
	border-bottom: var(--border);
}
/* Apply a border to the bottom of the header column and set position*/
table.rounded-corners-sort th {
	border-bottom: 2px solid #993333;
	position: relative;
}
/* Button in header to do the sorting */
table.rounded-corners-sort th button {
	position: absolute;
	font-size: 100%;
	font-weight: bold;
	background: transparent;
	border: none;
	display: inline;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	text-align: center;
	outline: none;
	cursor: pointer;
}
/* Offset the up / down arrows */
table.rounded-corners-sort th button span {
	position: absolute;
	right: 4px;
}
/* Sort descending */
table.rounded-corners-sort th[aria-sort="descending"] span::after {
	content: "▼";
}
/* Sort ascending */
table.rounded-corners-sort th[aria-sort="ascending"] span::after {
	content: "▲";
}
/* Removes the up and down arrow when column no longer being sorted */
table.show-unsorted-icon th:not([aria-sort]) button span::after {
	content: "♢";
	position: relative;
	top: -3px;
	left: -4px;
}			
/* Class needed for Java-script to sort a column header numerically */
	table.sortable td.num {
}
/* Set the colour to grey for every odd row in the table */
table.rounded-corners-sort tbody tr:nth-child(odd) {
	background-color: #d0d4d9;
}
/* Set the colour when hovering over a sortable column header */
table.rounded-corners-sort th button:hover {
	background-color: #38c6f4;
}
/* Shows a down-arrow when hovering over a sortable column */
table.rounded-corners-sort th:not([aria-sort]) button:focus span::after,
table.rounded-corners-sort th:not([aria-sort]) button:hover span::after {
	content: "▼";
}


/* End of CSS file */