/* Stylesheet for CodeCup */

body {
	font-family: Arial, sans-serif;
	background-color: white;
	color: black;
}

body > table { margin: 0 auto; }

table.archive {
	border: thin solid black;
	background-color: rgb(255, 255, 192);
}

tr.nobordertop th, tr.nobordertop td { border-top: 0px; }
tr.noborderbottom th, tr.noborderbottom td { border-bottom: 0px; }

th, td {
	font-family: Arial, sans-serif;
	color: black;
}

td.menu { padding-top: 4px; }

div.menu {
	margin-top: 0.5em;
	white-space: nowrap;
	text-align: center;
	font-size: 11pt;
}

.logininfo {
	margin-top: 12px;
	text-align: center;
	font-size: 9pt;
}

.logininfo tt { font-size: 7pt; }

a { color: blue; }
a:hover { color: #c000ff; }
.menu a { font-weight: bold; text-decoration: none; color: black; }
.menu a:hover { text-decoration: none; color: #1F78B4; }

.forumnewcount { font-weight: normal; font-size: small; color: #c00000; }

table.wide th, table.wide td {
	padding-left:  16px !important;
	padding-right: 16px !important;
}

tr.kimborder th, th.kimborder {
	font-weight: bold;
	padding-right: 2px;
	padding-left: 2px;
	background-color: #EEEEEE;
	border: 1px solid #BBBBBB;
}

tr.kimborder td, td.kimborder {
	padding-right: 2px;
	padding-left: 2px;
	background-color: #FAFAFA;
	border: 1px solid #DDDDDD;
}

td.required::after {
	content: "*";
	color: red;
}

hr { border-style: solid; color: black; }
hr.soft {
	margin: -3px 2em -3px 2em;
	border-color: #cccccc #000 #000 #000;
	border-width: 1px 0 0 0;
}

h1, h2, h3 { font-family: Arial, sans-serif; color: black; }
h3 { font-size: 100%; color: #1F78B4; }
h4 { font-size: 100%; color: #1F78B4; }
h5 { font-size: 100%; color: #1F78B4; font-weight: normal; }

tt, code { font-size: large; }

code { white-space: nowrap; color: #000080; }
.error { color: red; }

.wframe { border: 1px solid black; }
.whead  { background-color: #3793D0; }
.wbody  { background-color: #eef0f2; border-top: 1px solid black; padding-left: 8px; padding-right: 8px; }

.smaller, .smaller td, .smaller th { font-size: small; }

.ead { font-family: monospace; color: #006600; }
.ead em { font-family: sans-serif; font-size: small; font-style: normal; color: #006600; }

.player-status { font-size: small; font-style: italic; margin-left: 1em; color: #FF0000; }
.gray { color: #606060; }
.kimgray { color: #E0E0E0; font-size: 8pt; }

table.submissions { border-collapse: collapse; }
.submissions td { border: 1px solid black; }
.submissions th { border: 1px solid black; font-size: small; }
.failedsub td { background-color: #ffeeee; }
.activesub td { background-color: #eeffee; }

table.moves { border-collapse: collapse; }
.moves td, .moves th { border: 1px solid gray; }
.moves td.move { font-family: monospace; }

table.gameboard { border: 1px solid black; border-collapse: separate; }
table.gameboardnrs { border: none; border-collapse: collapse; }

table.example-communication { width: 100%; }
table.example-communication th, table.example-communication td { padding: 4px 10px; }
table.example-communication td { font: 14px monospace; }

.gameboard td {
	border: 1px solid black;
	font-family: monospace;
	font-size: 13pt;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
}
.gameboard td.pts {
	background-color: #f0f0f0;
	font-family: sans-serif;
	font-size: 10pt;
	font-weight: normal;
}
.gameboardnrs td {
	background-color: #f0f0f0;
	border: 1px solid black;
	font-family: sans-serif;
	font-size: 12pt;
	text-align: center;
	vertical-align: middle;
}

.gameboard td.t { background-color: #f0fff0; border-top: 1px solid #f0fff0; }
.gameboard td.b { background-color: #f0fff0; border-bottom: 1px solid #f0fff0; }
.gameboard td.l { background-color: #f0fff0; border-left: 1px solid #f0fff0; }
.gameboard td.r { background-color: #f0fff0; border-right: 1px solid #f0fff0; }
.gameboard td.tb { background-color: #f0fff0; border-top: 1px solid #f0fff0; border-bottom: 1px solid #f0fff0; }
.gameboard td.lr { background-color: #f0fff0; border-left: 1px solid #f0fff0; border-right: 1px solid #f0fff0; }
.gameboard td.tl { background-color: #f0fff0; border-top: 1px solid #f0fff0; border-left: 1px solid #f0fff0; }
.gameboard td.tr { background-color: #f0fff0; border-top: 1px solid #f0fff0; border-right: 1px solid #f0fff0; }
.gameboard td.bl { background-color: #f0fff0; border-bottom: 1px solid #f0fff0; border-left: 1px solid #f0fff0; }
.gameboard td.br { background-color: #f0fff0; border-bottom: 1px solid #f0fff0; border-right: 1px solid #f0fff0; }
.gameboard td.tbl { background-color: #f0fff0; border-top: 1px solid #f0fff0; border-bottom: 1px solid #f0fff0; border-left: 1px solid #f0fff0; }
.gameboard td.tbr { background-color: #f0fff0; border-top: 1px solid #f0fff0; border-bottom: 1px solid #f0fff0; border-right: 1px solid #f0fff0; }
.gameboard td.tlr { background-color: #f0fff0; border-top: 1px solid #f0fff0; border-left: 1px solid #f0fff0; border-right: 1px solid #f0fff0; }
.gameboard td.blr { background-color: #f0fff0; border-bottom: 1px solid #f0fff0; border-left: 1px solid #f0fff0; border-right: 1px solid #f0fff0; }
.gameboard td.tblr { background-color: #f0fff0; border: 1px solid #f0fff0; }
.gameboard td.empty { color: #e0e0e0; font-weight: normal; }
.gameboard td i { font-style: normal; color: #c00000; }
.gameboard td.empty i { font-style: normal; color: #ffd0d0; }

small { font-size: 11px; }

/* amazes */
#rules_amazes .sample {
	width: 200px;
	height:200px;
	float: right;
	padding-left: 10px;
	border: 1px solid black;
}

#rules_amazes .explanation {
	width:312px;
	height:312px;
	float:left;
	margin-right: 8px;
}

#rules_amazes ul.float-list {
	margin-left:0px;
	padding-left:0px;
	list-style-position:inside;
}

/* other */
#backend-nodes, #backend-jobs { border-collapse: collapse; width: 100%; }
#backend-nodes pre { margin: 0; font-size: 0.8em; }
#backend-nodes td, #backend-nodes th,
#backend-jobs td, #backend-jobs th {
	border: 1px solid grey;
	padding: 2px 5px;
	white-space: nowrap;
}

#table-newsmanager { width: 100%; }
#table-newsmanager input[type=text],
#table-newsmanager textarea { width: 100%; box-sizing: border-box; }

.clear { clear:both; }
.social-spacing { height: 20px; }

.social {
	background-color:white;
	position:fixed;
	height:20px;
	bottom:0px;
	left:0px; right:0px;
	padding-left: 200px;
	font-size: 10px;
}

.note {
	display:inline;
	position:relative;
	margin-left:2px;
	padding-right:18px;
}

.note .trigger {
	position:absolute;
	width:16px;
	height:16px;
	z-index:999;
}

.note-collapsed .message { display:none!important; }

.note .message {
	position:absolute;
	display:inline;
	margin-left:-1px;
	margin-top:-1px;
	border: 1px solid #1F78B4;
	background-color: #EEF0F2;
	width:300px;
	font-size:12px;
	font-style:italic;
	padding-left:16px;
	padding-right:16px;
}

.speed { font-style: italic; color: gray; }
.speed small { cursor: pointer; }

span.equation {
	font-style: italic;
	font-family: times, serif;
}

.competitions { font-size: 80%; }

.competitions h5 {
margin-bottom: 0px;
display:inline;
}
.collapsed ul { display:none; }
.competition .trigger { cursor:pointer; }

#compplannedtable { border-collapse: collapse; }
#compplannedtable td, #compplannedtable th {
	border-width: 1px 0 1px 0;
	border-style: solid;
	border-color: #555;
	padding: 3px 5px;
}
#compplannedtable td { text-align: center; }
#compplannedtable td.nr { text-align: right; }

/* NIO reclame banner */
/* https://www.w3schools.com/howto/howto_css_tooltip.asp */
/* Tooltip container */
.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
	visibility: hidden;
	font-size: 13px;
	background-color: #555;
	color: #fff;
	text-align: center;
	padding: 5px 5px;
	border-radius: 6px;

	/* Position the tooltip text */
	position: absolute;
	z-index: 1;
	bottom: 115%;
	left: 50%;
	width: 200px;
	margin-left: -100px;

	/* Fade in tooltip */
	opacity: 0;
	transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}