@keyframes working_indicator {
	0% {
		margin-left: 3px;
		width: 15px
		}
	25% {
		width: 20px
		}
	50% {
		margin-left: 55px;
		width: 15px
		}
	75% {
		width: 20px
		}
	100% {
		margin-left: 3px;
		width: 15px
		}
	}
:root {
	--highlight_colour: green;
	--inactive_colour: mediumseagreen;
	--inset_border: none;
	--inset_button_border: none;
	--outset_border: none;
	--surface_colour: white;
	--tree_view_branches: 1px solid var(--shadow_colour)
	}
a {
	color: var(--highlight_colour);
	text-decoration: none
	}
body.main_body {
	background-color: aqua
	}
canvas {
	padding: 1px
	}
canvas,
fieldset,
input[type = "button"],
input[type = "email"],
input[type = "number"],
input[type = "password"],
input[type = "reset"],
input[type = "submit"],
input[type = "tel"],
input[type = "text"],
progress,
select,
.panel,
.sunken_panel,
.working_indicator {
	border: 1px solid black
	}
fieldset {
	padding-bottom: calc(var(--element_spacing) + 3px)
	}
input[type = "button"],
input[type = "email"],
input[type = "number"],
input[type = "password"],
input[type = "reset"],
input[type = "submit"],
input[type = "tel"],
input[type = "text"],
select,
.sunken_panel,
#windows > * {
	box-shadow: 2px 2px black
	}
input[type = "button"],
input[type = "reset"],
input[type = "submit"],
legend,
menu[role = "tablist"] > li > a,
select,
th {
	font-weight: bold
	}
input[type = "checkbox"],
input[type = "radio"] {
	all: revert;
	margin: 0
	}
input[type = "checkbox"] + label,
input[type = "radio"] + label {
	margin-left: var(--grouped_element_spacing)
	}
input[type = "checkbox"] + label::before,
input[type = "checkbox"]:checked + label::after,
input[type = "radio"] + label::before,
input[type = "radio"]:checked + label::after {
	content: none
	}
input[type = "range"]::-moz-range-thumb {
	background: var(--highlight_colour);
	height: 19px;
	transform: translateY(0)
	}
input[type = "range"]::-moz-range-track {
	background: none;
	border-bottom: var(--range_border);
	border-right: none;
	box-shadow: none;
	height: 1px
	}
input[type = "range"]::-webkit-slider-runnable-track {
	background: none;
	border-bottom: var(--range_border);
	border-right: none;
	box-shadow: none;
	height: 1px
	}
input[type = "range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	background: var(--highlight_colour);
	box-shadow: none;
	height: 19px;
	transform: translateY(-8px)
	}
select,
select:active {
	background-image: url("../images/interface_elements/dropdown_button_-_plain.svg")
	}
select:focus {
	background-image: url("../images/interface_elements/dropdown_button_-_plain_-_white.svg")
	}
th[onclick]:active {
	background: var(--highlight_colour) !important;
	text-shadow: 1px 1px var(--highlighted_text_colour) !important
	}
.image_view {
	margin-left: -1px;
	width: calc(100% + 2px)
	}
.panel {
	padding :2px
	}
.sunken_panel {
	padding-bottom: 1px;
	padding-top: 1px
	}
.titlebar,
.titlebar.inactive {
	background-color: var(--surface_colour)
	}
.titlebar input[type = "button"] {
	background: var(--warning_colour);
	border: none;
	border-radius: 9px;
	box-shadow: none;
	color: transparent;
	height: 18px;
	width: 18px
	}
.titlebar input[type = "button"]:active {
	background: aqua;
	text-shadow: none !important
	}
.titlebar.inactive input[type = "button"] {
	background-color: var(--inactive_colour);
	}
.titlebar_text {
	color: var(--text_colour);
	font-style: normal;
	text-shadow: none
	}
.working_indicator {
	background-image: none
	}
.working_indicator::after {
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-name: working_indicator;
	background: var(--highlight_colour);
	content: "";
	height: 18px;
	margin-left: 3px;
	margin-top: 3px;
	position: absolute;
	width: 15px
	}
::selection {
	background: rgba(0, 0, 0, 1);
	color: aqua
	}