/* Basic styling */

html {
	height: 100%;
}

body {
	position: relative;
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: Arial, sans-serif;
	font-size: 16px;
	background-color: #E9ECC0;
	overflow-y: hidden;
	overflow-x: hidden;
}

p {
	text-align: justify;
	line-height: 130%;
}

/* Header area */

#header {
	width: 100%;

	border-style: none none solid none;
	border-width: 1px;
	border-color: #000000;
}

#headerTable {
	width: 100%;
	border-collapse: collapse;
}

#headerIcon {
	width: 40px;
	margin: 0px 10px;
}

.headerIconOn {
	filter: drop-shadow(3px 0px 0px rgba(19, 22, 23, 0.5))
		drop-shadow(0px 3px 0px rgba(19, 22, 23, 0.5))
		drop-shadow(1px 1px 0px rgba(19, 22, 23, 0.5));
	-webkit-filter: drop-shadow(3px 0px 0px rgba(19, 22, 23, 0.5))
		drop-shadow(0px 3px 0px rgba(19, 22, 23, 0.5))
		drop-shadow(1px 1px 0px rgba(19, 22, 23, 0.5));
	cursor: pointer;
}

.headerIconOff {
	filter: drop-shadow(-2px 0px 0px rgba(113, 113, 70, 0.7))
		drop-shadow(0px -2px 0px rgba(19, 22, 23, 0.5))
		drop-shadow(-1px -1px 0px rgba(19, 22, 23, 0.5));
	-webkit-filter: drop-shadow(-2px 0px 0px rgba(113, 113, 70, 0.7))
		drop-shadow(0px -2px 0px rgba(19, 22, 23, 0.5))
		drop-shadow(-1px -1px 0px rgba(19, 22, 23, 0.5));
	cursor: pointer;
}

#headerTitle {
	font-size: 150%;
	font-weight: bold;
	white-space: nowrap;
}

#headerTabs {
	width: 100%;
	padding: 0 12px 0 0;
	text-align: right;
}

/* Middle area (arena) */

#arena {
	width: 100%;
	visibility: hidden;
}

#arenaTable {
	width: 100%;
	height: 100%;
	border-collapse: collapse;
	border-style: none;
}

#arenaTable td {
	padding: 0;
}

/* Navigator styling */

#navigatorColumn {
	width: 14em;
}

#navigator {
	overflow-y: auto;
}

.nitem {
	display: none;
	padding: 4px 2px 4px 4px;
}

.nitemBullet {
	display: inline-block;
	width: 1em;
	margin: 0 4px 0 0;
	opacity: 0.5;
}

.nitemTitle {
	display: inline-block;
}

#sliderColumn {
	width: 20px;
	min-width: 20px;
	border-style: none solid none none;
	border-width: 1px;
	border-color: transparent;

	background-image: url("../image/misc/slider.png");
	background-repeat: repeat;
	background-size: 20%;

	cursor: ew-resize;
}

#sliderColumn:hover {
	background-image: url("../image/misc/sliderShow.png");
}

/* Main content area atyling */

#main {
	overflow-y: auto;
	overflow-x: auto;
	background-color: #FFFFFF;
}

/* Footer styling */

#footer {
	position: absolute;
	bottom: 0;

	width: 100%;

	border-style: solid none none none;
	border-width: 1px;
	border-color: #000000;
}

#footerTable {
	width: 100%;
	border-collapse: collapse;

	border-style: solid;
	border-width: 10px;
	border-color: transparent;
}

#footerLeft {
	text-align: left;
	width: 50%;
}

#footerCenter {
	text-align: center;
	width: 1px;
	white-space: nowrap;
}

#footerRight {
	text-align: right;
	width: 50%;
}

#licenseIconContainer {
	position: relative;
}

#licenseIcon {
	position: absolute;
	bottom: -15px;
	left: -6px;
	height: 30px;
}

/* Tab buttons styling */

.tab {
	padding: 2px 4px;
	white-space: nowrap;
	overflow: hidden;

	text-shadow: none;
	background-color: #D6D2A0;

	border-style: solid;
	border-width: 1px;
	border-color: #000000;
	border-radius: 2px;
}

.htab {
	display: inline-block;
	margin: 2px 4px;
}

.ntab {
	display: block;
}

.ntabInactive {
	border-style: dotted;
	opacity: 0.5;
}

.tabArmed {
	text-shadow: 0.5px 0px 0px #000000;
	background-color: #FBF8D5;
	cursor: pointer;
}

/* Main content styling */

#mainContent {
	padding: 10px;
}

pre {
	margin: 0;
	padding: 10px;
	overflow: auto;

	color: #101010;
	background-color: #F2F2F2;

	font-family: monospace;
	font-size: 0.90em;

	border-style: solid;
	border-width: 1px;
	border-color: #E0E0E0;
	border-radius: 4px;
}

code {
	font-family: monospace;
	font-size: 0.95em;
}

.input {
	display: inline-block;
	font-style: italic;
	color: #0000A2;
}

.input::after {
	content: '\21B2';
	color: #808080;
}

.inputControl {
	display: inline-block;
	color: grey;
}

.output {
	display: inline-block;
	color: #00541F;
}

.warning {
	margin: 0 20% 0 0;
	padding: 15px;

	font-family: Verdana, sans-serif;
	font-size: 15px;

	border-style: solid;
	border-width: 1px;
	border-radius: 4px;

	color: #A94442;
	background-color: #F2DEDE;
	border-color: #EBCCD1;
}

.warningGreen {
	color: #3C763D;
	background-color: #DFF0D8;
	border-color: #D6E9C6;
}

.warningBlue {
	color: #31708F;
	background-color: #D9EDF7;
	border-color: #BCE8F1;
}

.warningYellow {
	color: #8A6D3B;
	background-color: #FCF8E3;
	border-color: #FAEBCC;
}

.warningRed {
	color: #A94442;
	background-color: #F2DEDE;
	border-color: #EBCCD1;
}

.warning code {
	font-size: 1em;
}