/*
orange: #de7d00
blue: #0088bb
link blue: #473bae
*/

body { margin: 0; padding: 0;
	font-family: Verdana, Geneva, sans-serif; font-size: 12px;
	color: #444; background: white;
}

.row, .col { overflow: hidden; position: absolute; box-sizing: border-box; }
.row { left: 0; right: 0; }
.col { top: 0; bottom: 0; }
.scroll-x { overflow-x: auto; }
.scroll-y { overflow-y: auto; }

.header.row { padding-left: 4px; height: 26px; top: 0; background: #ccc; color: white; border-bottom: 1px solid black; }
.body.row { top: 26px; bottom: 20px; }
.footer.row { height: 20px; bottom: 0; color: white; background: #0088bb; }

.header.row a { color: white; }
.footer.row a { color: white; }

.left.col { width: 200px; border-right: 2px solid #de7d00; }
.mid.col { left: 200px; width: 300px; border-right: 2px solid #de7d00; }
.right.col { right: 0; }
.hidden { display: none; }

#mod_info { left: 500px; }
#repo_info { left: 200px; padding: 60px; }
#search_results { left: 200px; padding: 20px; }
#welcome { left: 200px; padding: 60px; }

hr { border: 0; height: 0; border-top: 1px solid #0088bb; }

a:link, a:visited { color: #473bae; text-decoration: none; }
a:active, a:hover { color: #473bae; text-decoration: none; }

h1 { margin: 10px 0; padding: 0; font-size: 30px; font-weight: bold; color: #de7d00; border-bottom: 1px solid #0088bb; }
h2 { margin: 5px 0 10px 0; padding: 0; font-size: 34px; font-weight: normal; color: #444; border-bottom: 1px solid #0088bb; }
h3 { margin: 5px 0 10px 0; padding: 0; font-size: 20px; font-weight: bold; color: #444; border-bottom: 1px solid #eef; }

table { background: #eee; border-spacing: 0; }
table td { border-top: 2px solid white; padding-left: 4px; padding-right: 4px; margin: 0px; }
table th { background: black; padding-left: 4px; padding-top: 6px; border-bottom: 4px solid #de7d00; color: white; text-align: left; }

table.library_list { width: 100%; }
table.module_list { width: 100%; }

#modlib_metadata { padding-left: 50px; }
.modthumb { background: black; }
img.modthumb { padding: 10px; vertical-align: bottom;  width: 48px; height: 48px; }

#mod_metadata { padding-left: 10px; height: 200px; box-sizing: border-box; overflow-y: auto; }
#canvas_toolbar { text-align: center; padding-top: 4px; height: 32px; box-sizing: border-box; width: 100%; background: #de7d00; }
canvas#canvas { bottom: 16; position: absolute; width: 100%; height: calc(100% - 248px); background: black; cursor: pointer; }
#canvas_statusbar { height: 18px; bottom: 0; position: absolute; background: #222; box-sizing: border-box; width: 100%; color: #edc; padding-left: 4px; font-size: 90%; }

.message { border: 1px solid #0088bb; padding: 5%; padding-right: 15%; border-radius: 2ex; background: white }

.repolink { width: 60%; background: #eee; padding: 6px; margin: 3px; border-left: 6px solid #de7d00; color: #473bae; cursor: pointer; }

.selected { background: #0088bb; }
.selected a { color: white; }

input.button { background: #0088bb; font-weight: bold; color: #eee;
	margin: 0px 2px;
	border-radius: 3px; border: 1px solid #006699; cursor: pointer; font-size: 14px;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); }
.header input.button { margin-top: 4px; }
input.button:hover { background: #1199cc; transition-duration: 0.2s; }
input.button:active { background: white; color: black; }
input.button.on { color: #fff; text-decoration: underline; }

.searchtab { background: #0088bb; font-weight: bold; color: #eee;
	height: 26px;
	margin: 0px; padding-left: 4px; padding-right: 4px;
	border-left: 1px solid #006699; font-size: 14px;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	display: none }
.searchfield { background: white; border: 0px;
	width: 20em;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); }

.notImplemented { background: gray !important; color: #caa !important; }