@import url('https://fonts.googleapis.com/css2?family=Lato:wght@900&display=swap');

* {
	margin: 0;
}
html, body{
	height: 100%;
	margin: 0;
	padding: 0;
}

html, body, input {
	font-family: 'Lato', sans-serif;
}

@keyframes bodyLogin {
	from {background-color: rgb(255, 204, 204)}
	to {background-color: rgb(0, 0, 0)}	
}
@keyframes bodyLogout {
	from {background-color: rgb(0, 0, 0)}
	25% {background-color: rgb(255, 204, 204)}
	to {background-color: rgb(255, 204, 204)}
}
body {
	background: #fcc;
	animation-fill-mode: forwards;
	animation-duration: 3500ms;
}

ul {
	list-style: none;
}

@keyframes wrapperLogin {
	from {grid-template-rows: 600px 125px auto 40px;}
	to {grid-template-rows: 83px 0px auto 40px;}
}
@keyframes wrapperLogout {
	from {grid-template-rows: 83px 0px auto 40px;}
	to {grid-template-rows: 600px 125px auto 40px;}
}
#wrapper {
	display: grid;
	height: 100%;
	grid-template-areas:
		'left header right'
		'left menu right'
		'left main right'
		'footer footer footer';
	grid-template-rows: 600px 125px auto 40px;
	grid-template-columns: 80px auto 80px;
	animation-duration: 500ms;
	animation-fill-mode: forwards;
}

@keyframes heaLogin {
	from {margin-top: 67px}
	to {margin-top: -40px}
}
@keyframes heaLogout {
	from {margin-top: -40px;}
	to {margin-top: 67px;}
}
header {
	width: 800px;
	/*overflow: hidden;*/
	grid-area: header;
	margin-left: auto;
	margin-right: auto;
	margin-top: 67px;
	animation-duration: 600ms;
	animation-fill-mode: forwards;
}

@keyframes logoLogin {
	from {filter: grayscale(0)}
	to {filter: grayscale(1)}
}
@keyframes logoLogout {
	from {filter: grayscale(1)}
	to {filter: grayscale(0)}
}
#logo {
	position: relative;
	left: -15px; /* title is not centred in image */
	filter: grayscale(0);
	animation-fill-mode: forwards;
	animation-duration: 3500ms;
}

#main {
	width: 100%;
	grid-area: main;
}

#mainWrapper {
	overflow-x: hidden;
	margin-bottom: 2em;
}

#menu {
	grid-area: menu;
	overflow: hidden;
}

#menu ul {
	display: flex;
	justify-content: space-evenly;
	align-items: flex-start;
	flex-direction: row;
	padding-bottom: 40px;
	grid-area: menu;
}

#menu ul .label {
	font-size: 70%;
	text-transform: uppercase;
	color: #f00;
	display: inline-block;
	width: 75px;
}

#menu ul button, #menu ul input {
	border: none;
	padding: 2px 15px;
	text-transform: uppercase;
	font-family: 'Lato', sans-serif;
	background: #fff;
	color: #f00;
}

#menu ul input[type="text"], #menu ul input[type="password"] {
	background: #fff;
	color: #f00;
	text-align: right;
	width: 75px;
}

footer {
	background: #fff;
	color: #f00;
	position: relative;
	z-index: 3;
	text-align: right;
	width: 100%;
	padding: 10px 0px;
	align-self: end;
	height: 20px;
	grid-area: footer;
}

footer address {
	display: inline;
}

footer a {
	color: #500;
	text-decoration: none;
	flex-grow: 0;
	margin-right: 20px;
}

div.tabAccordion form table {
	width: 100%; }
div.tabAccordion form table td:nth-of-type(2) {
	width: 80%; }
div.tabAccordion form table textarea {
	width: 100%;
	height: 5em; }

.textEntryLimCont {
	float: right; }
.textEntryLim {
	color: #777777; }
.textEntryLimCont .ui-icon {
	margin-right: 0.5em; }

div.accNote {
	background: #333333;
	border: #0b3e6f solid 0.25em;
	padding: 1em; }
.accNote ul {
	display: grid;
	padding: 0;
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-rows: auto 1em; }
.accNote ul li {
	color: #aaaaaa;
	font-size: 80%; }
.accNote li .value {
	color: #d9d9d9; }
.accNote .visibility {
	grid-area: 2 / 4 / 3 / 5; }
.accNote .editability {
	grid-area: 2 / 3 / 3 / 4; }
.accNote .content {
	grid-area: 1 / 1 / 2 / 5;
	font-size: 100%;
	color: #d9d9d9;
	padding-bottom: 0.5em; }
.accNote:not(:first-of-type) {
	margin-top: 1em; }

	
.editNote {
	padding-bottom: 0.5em;
}

ul.noteGallery {
	display: flex;
	flex-wrap: wrap; }
ul.noteGallery li {
	height: 4em;
	flex-grow: 1;
	padding: 2px; }
ul.noteGallery li:last-child {
	flex-grow: 10; }
ul.noteGallery img, ul.noteGallery canvas {
	max-height: 100%;
	min-width: 100%;
	object-fit: cover;
	vertical-align: bottom}
	
tr.propGapUp {
	vertical-align: bottom; }
tr.propGapUp td {
	padding-top: 0.5em; }

.info {
	margin-left: 1em;
	cursor: pointer; }
/*
########################################
########################################
########################################
########################################
*/

/*html					{
	position:			relative;
	min-height:			100%;
						}

body					{
	background:			#000000;
	color:				#dddddd;
	margin:				0 0 60px 0;
	font-size:			14px;
						}
						
header					{
	background:			#003054;
	height:				50px;
	width:				100%;
	margin-bottom:		10px;
						}
						
#footer					{
	background:			#003054;
	position:			absolute;
	left:				0;
	bottom:				0;
	height:				50px;
	width:				100%;
						}*/

#overlay				{
	position:			absolute;
	display:			none;
	top:				0;
	left:				0;
	width:				100%;
	height:				100%;
	z-index:			10;
						}
#overlay canvas			{
	position:			fixed;
	left:				50%;
	top:				50%;
	margin-left:		-640px;
	margin-top:			-640px;
	width:				1280;		/* set attribute is what is obeyed for webgl */
	height:				1280px;		/* set attribute is what is obeyed for webgl */
						}

.hide					{
	display:			none;
						}

.dg.ac					{
	z-index:			11;
						}

#issue					{
	background:			black;
	color:				red;
	position:			absolute;
	z-index:			1;
	width:				50%;
}

#issue, #content		{
	padding-bottom:		20px;
						}

/*#logo					{
	position:			relative;
	left:				5px;
	top:				5%;
	height:				90%;
	float:				left;*/
						}
header span			{
	display:			block;	
	position:			relative;
	text-shadow: 		3px 3px 2px #000;
	color:				#55ccff;
	top:				43%;
	transform: 			perspective(1px) translateY(-50%);
	width:				500px;
	font-size:			42px;
	margin-left:		auto;
	margin-right:		auto;
	text-align:			center;
	font-variant:		small-caps;
						}
						
#copyright				{
	color:				#306084;
	position:			absolute;
	right:				5px;
	bottom:				5px;
	font-size:			80%;
						}

@keyframes tabsLogin {
	from {left: -100%;}
	to {left: 0%;}
}
@keyframes tabsLogout {
	from {left: 0%;}
	to {left: -100%;}
}
#tabs					{
	left:				-100%;
	animation-fill-mode: forwards;
	animation-duration:	300ms;
	display: none;
	}

#promo					{
	}
						
/* jquery theme overrides */

.ui-widget-content		{
	background:			#282828;
						}
.ui-accordion-content	{
	background:			#000000;
						}
.ui-widget.ui-widget-content {
	border-color:		#4a4a4a;
						}
button.ui-button-icon-only {
	width:				30px;
	height:				21px;
						}
.ui-widget				{
	font-size:			100%;
						}
button.ui-button, .ui-selectmenu-button {
	padding:			0.1em 1em;
	top:				-1px;
						}
.ui-datepicker-trigger	{
	position:			relative;
	top:				3px;
	left:				5px;
						}
.ui-tabs-tab.ui-state-disabled {
	display:			none;
						}

/* login/logout */

form#logout				{
	position:			absolute;
	top:				30px;
	right:				5px;
						}
form#login				{
						}

/* calendar */

div#calendar .ui-datepicker-calendar td {
	width:				14.285%;
						}
div#calendar .ui-datepicker-calendar td a {
	height:				3em;
						}
div#calendar div.ui-datepicker-inline {
	width:				80em !important;
						}
div#calendar td.buildCheck a {
	background:			#553300;
	color:				#000000;
						}
div#calendar td.buildComp a {
	background:			#ffff00;
	color:				#000000;
						}
						
/* user notes */

div.userCritical		{
	padding:			5px;
	border:				2px solid #aa0000;
						}
div.userCritical div	{
	position:			relative;
	clear:				both;
						}
div.userCritical .ui-icon-alert {
	position:			relative;
	top:				3px;
	float: 				left;
						}
div.userCritical .who 	{
	float:				left;
	padding-left:		15px;
						}
div.userCritical .when	{
	display:			inline-block;
	width:				40px;
	font-size:			60%;
	float:				left;
	padding-left:		15px;
						}
div.userCritical .what	{
	background:			#880000;
	padding:			0 5px;
	margin-left:		15px;
						}
div.userCritical form	{
	display:			inline;
	float:				right;
						}
div.userCritical .delete {
	position:			relative;
	top:				-2px;
						}
						
/* universal */

.gapBot					{
	padding-bottom:		30px;
						}
.gapTop					{
	padding-top:		30px;
						}

/* ratiobar code */

.ratioBar {
	display: inline-block;
	text-align: center;
	font-size: 12px;
	}
.ratioBar .lowLabel, .ratioBar .highLabel { display: inline-block; }
.ratioBar .back {
	background: #aaaaaa;
	border: 1px solid #999999;
	position: relative;
	display: inline-block;
	}
.ratioBar .fill {
	position: absolute;
	display: inline-block;
	height: 100%;
	}
.ratioBar .marker {
	position: absolute;
	display: inline-block;
	height: 100%;
	background: #ffffff;
	}
.ratioBar .fill.low {background: #ee3300;}
.ratioBar .fill.high {background: #88ddff;}

/* splitter code */

span.split, span.split span {
	position: absolute;
	height: 20px;
	top: 0px;
	}
span.split {
	background: #000000;
	width: 240px;
	}
span.split .leftArrow, span.split .rightArrow {
	background: #00aa00;
	width: 20px;
	z-index: 2;
	}
span.split .leftArrow {
	left: 0px;
	}
span.split .rightArrow {
	left: 220px;
	}
span.split .backBar {
	background: #333333;
	width: 200px;
	left: 20px;
	}
span.split .slider {
	width: 6px;
	height: 100%;
	margin-left: -3px;
	background: #aa8800;
	left: 50%;
	}

/* alert box code */

.alert {
	background: #222222;
	color: #ffffff;
	border: 0.25em solid #ff0000;
	display: none;
	position: fixed;
	width: 35vw;
	left: 50%;
	top: 20vh;
	margin-left: calc(-35vw / 2 - 1em - 0.25em);		/* width/2 + padding + border */
	margin-right: auto;
	padding: 1em 1em 5em 1em;
	z-index: 5;
	}
.alert.good {
	background: #ffffff;
	color: #000000;
	border-color: #55aaff;
	}
.alert.info {
	background: #aaaaaa;
	color: #000022;
	border-color: #55aaff; }
.alert.modal {
	z-index: 11;
	}
.alert .title {
	text-decoration: none;
	margin: 0;
	padding: 10px;
	text-align: center;
	}
.alert.good .title {
	color: #0000ff;
	}
.alert .buttons {
	position: absolute;
	right: 1.0em;
	bottom: 1.5em; }
.alert .clk {
	background: #ffffff;
	color: #000000;
	cursor: pointer;
	text-align: center;
	padding: 0.5em 1.0em 0.6em 1.0em;
	margin: 0 0 0 1.0em;
	}
.alert.good .clk {
	background: #55aaff;
	color: #ffffff;
}
.alert .clk:hover {
	outline: 0;
	border-radius: 20px;
}
.alert form .clk {
	border-width: 0;
}

/* textbox box code */

#textboxBox {
	background: #888888;
	border: 1px solid #ffffff;
	display: none;
	position: absolute;
	width: 350px;
	height: 250px;
	left: 50%;
	top: 90px;
	margin-left: -175px;
	margin-right: auto;
	z-index: 5;
	}
#textboxBox .title {
	text-decoration: none;
	margin: 0;
	padding: 0;
	}
#textboxBox .clk {
	background: #ffff55;
	position: absolute;
	width: 60px;
	height: 20px;
	top: 220px;
	text-align: center;
	}
#textboxBox .fir { right: 10px; }
#textboxBox .sec { right: 80px; }
#textboxBox .thi { right: 150px; }
#textboxBox .fou { right: 220px; }

/* selector box code */

#picker .pick {
	background: #999999;
	}
#picker .pick.selected {
	background: #ffffff;
	}

#pickerBox {
	background: #888888;
	border: 1px solid #ffffff;
	display: none;
	position: absolute;
	width: 300px;
	height: 250px;
	left: 50%;
	top: 90px;
	margin-left: -150px;
	margin-right: auto;
	z-index: 5;
	}

#pickerBox #title {
	text-decoration: none;
	margin: 0;
	padding: 0;
	}