css.css

.exported_notation, .game_to_import {
	width: 400px;
	height: 400px;
	margin: 10px;
}

.import_buttons {
	margin: 10px;
}

/* saved games and exports */
.games, .exported_list, .import_list {
	display: none;
	overflow: auto;
	width: 450px;
	height: 500px;
	position: absolute;
	left: 10px;
	top: 10px;
	background-color: #edd;
	font-size: 0.9em;
	z-index: 90;
	border: 2px solid black;
}

.games h2 {
	padding: 5px;
	margin: 3px;
}

.game {
	width: 160px;
	background-color: #efe;
}

.games table {	background-color: #fef; }
.games thead td { background-color: #eaf; }
.games td { background-color: white; width: 300px; }
.games td.action { width: 50px; }


.debug {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 1000px;
	height: 200;
	z-index: 500;
	display: none;
	background-color: white;
}

.shown {
	display: block;
}

.boardwrapper, .trap, .controls, .control, .marker, .sound_selection, .shadow_selection {
/*
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	box-shadow: 1px 1px 5px black;
	-webkit-box-shadow: 1px 1px 5px black;
*/
}

.control:hover {
	box-shadow: none;
	-webkit-box-shadow: none;
	background-color: #bbb;
}

.shadowable, .boardwrapper {
/*
	box-shadow: 1px 1px 5px black;
	-webkit-box-shadow: 1px 1px 5px black;
*/
	
	/*
	mozilla seems to slow down with shadows
		-moz-box-shadow: 1px 1px 5px black; 
	*/
}

.comment_panel.control, .setup.control {
	width: 70px;
	height: 45px;
}

.commented_positions h2 {
	margin: 5px;
	padding: 5px;
}

.commented_positions small {
	margin: 10px; padding: 0px;
	display: block;
	margin-bottom: 10px;
}

.commented_position.commented_move {
	background-color: #dcd;
}

.commented_turn {
	font-weight: bold;
}

.commented_positions {
	display: none;
	position: absolute;
	left: 720px; top: 0;
	width: 470px; height: 800px; z-index: 150;
	background-color: #eee;
	overflow: scroll;
}

.commented_position:hover {
	background-color: pink;
	cursor: pointer;
}

.commented_position {
	font-size: 0.8em;
	background-color: white;	
	float: left;
	width: 420px;
	padding: 5px;
	margin: 3px;
	overflow: none;
}

.setup { padding: 5px; }

.settings_swap_piece { background-color: white !important; }

.captured {
	background-color: #888;
	padding: 3px;
	min-height: 80px;
	width: 470px;
	float: left;
}

.captured_pieces img {
	width: 30px;
}

.sound_selection, .shadow_selection {
	float: left;
	padding: 3px; margin: 5px; 
	background-color: #99ff66; color: black; 
}

.square {
/*
	border-radius: 2px;
	-moz-border-radius: 2px; border-radius: 2px;
*/
}


.treemove_hover {
	background-color: #FF6633 !important;
	color: white !important;
}

.jstree a {
	padding: 3px !important;
}

.jstree-clicked /*, .treemove_hover, .treeicon_hover   slows down a bit*/ {
	/* font-size: 1.5em; */
}

.treeicon_hover {
	background-color: #99ff66 !important;
}

.marker_A, .hovermarker_A {
	background-color: #FFFF99 !important;
}

.marker_B, .hovermarker_B {
	background-color: #99CCFF !important;
}

.marker_C, .hovermarker_C {
	background-color: #F8F8F8 !important;
}

.hovermarker_A, .hovermarkerB, .hovermarkerC {
	cursor: pointer;
}

.markers { width: 470px; height: 80px;	background-color: #555; margin: 5px; float: left; }

.markers p {
	color: white;
	margin: 2px;	
}

.marker:hover {
	border: 1px solid pink;
	background-color: pink;
	cursor: pointer;
}

.marker_pressed {
	border: 3px outset white !important;
}

.marker {
	font-size: 1.2em;
	width: 40px;
	height: 30px;
	float: left;
	background-color: white;
	color: black;
	border: 1px solid black;
	margin: 5px;
	text-align: center;
	padding: 3px;
}

.scrollabletree {
	float: left;
  overflow: auto;
  height: 587px;
	width: 450px;
	margin-left: 2px;
	border: 5px solid white;
}

.gametree {
	font-family: Courier New;
	font-size: 1em;
}

body { padding: 0; margin: 0; font-family: Verdana; font-size: 0.8em; width: 1200px; background-color: #333; margin: 0; }

p { color: white; }

h1 { color: gray; font-family: Verdana;  margin: 15px; font-size: 1.0em; }

.selected {	border: 1px red solid !important; }

.arrow { 	padding: 0px; margin: 0px; border: 0px; 	position: absolute; z-index: 2000; display: none; cursor: pointer;}

.nodeinfobox { width: 210px; float: right; margin: 2px; margin-right: 25px; }
.nodeinfobox p { font-size: 0.9em; margin: 10px 5px 5px 5px; }

.turn { color: red; margin: 5px 5px; font-size: 1.5em; }
.comments_for_node, .comments_for_move {
	font-family: Verdana;
	font-size: 1.1em;
	width: 200px; height: 100px; 
	background-color: #ddd; color: black; padding: 5px; 
	margin: 5px; float: left; 
}

.comment { height: 50px; width: 420px; float: left; }
.comment_box { float: left; margin: 2px;}
.make_comment { }

.arrowhover { display: none; }

.arrow img { width: 35px;	margin: 0px; padding: 0px;	border: 0px; }

.clear { clear: both; }

.trap { background-color: pink !important; border: 1px solid black !important; }

.wrapper { width: 720px; border: 1px solid gray; float: left; background-color: #666;}

.nodehandle:hover {	background-color: pink !important; }

.selected_handle { background-color: white !important; }

.selected_handle, .nodehandle:hover { cursor: pointer; border: 1px white solid;	color: black !important; }

.nodehandle {	
	float: left; margin: 0;	padding: 5px;	width: 35px; height: 20px; 
  background-color: orange; color: white; font-size: 0.9em; text-align: center; border: 1px red solid; 
}

.boardwrapper { 
		padding: 13px;
		float: left; width: 450px; height: 100%; background-color: brown;
}

.board {
	float: left; width: 450px; margin: 0px: border: 1px white solid; background-color: brown;
}

.shadow_piece { position: absolute; width: 35px; height: 35px; }
.shadow_piece img { width: 100%; }

.square { width: 50px; height: 50px; padding: 2px; border: 1px #ddd solid; background-color: #bbb; float: left; }

.square img {	width: 100%; }

.row {}

.controls {	width: 220px; height: 305px; background-color: #ccc; margin: 5px;	color: black;	float: left; padding: 5px; border: 1px outset black; }

.control img { margin: 0;	padding: 0; }

.control { font-size: 0.9em; width: 50px;	border: 1px solid #aaa;	float: left;	margin: 3px;	background-color: #ddd; cursor: pointer; text-align: center; }
.prev_step, .next_step { margin-top: 10px; width: 30px !important; height: 30px; padding: 0px;}

.clear_markers_control, .show, .pass, .export, .show_import { padding: 7px;}
.clear_markers_control { width: 190px; }

.feedback { margin-left: 20px; }