body{
	background-color:#eee;
	font-family:monospaced,"courier new"
}
h1{ /* For SEO-esque stuff and semantic correctness, not to grab attention */
	font-size:10px;
	float:right;
}
h1, h3{
	padding:0px;
	margin:0px;
}
h3{
	font-size:1em;
}
.title{
	background-color:black;
	color:#0f0;
	text-align:center;
}
ul{
	margin-top:0px;
	margin-bottom:0px;
}

.instructions{
	display:table;
	margin-bottom:10px;
}
.instructions div{
	float:left;
	padding: 0px 10px 0px 10px;
}
.instructions li span{
	text-decoration: underline;
}
.hasDetails{
	cursor:pointer;
}
div.details{
	border:1px solid;
	border-radius:10px;
	z-index:200;
	position:absolute;
	padding:10px;
	background-color:black;
	color:#f00;
}

.boardWrapper{
	width:100%;
	text-align:center;
}
#boardDiv{
	background-color:#888;
	border:5px solid black;
	border-radius:10px;
	display:inline-block;
	margin:0 auto;
	/*background:url(./images/bg.jpg);*/ /* Free texture from http://mayang.com/textures/index.htm */
}

#export{
	display:none;
	position:absolute;
	background-color:white;
	border:2px solid black;
	border-radius:10px;
	z-index:500;
	
	width:800px;
	height:250px;
	
	overflow:auto;
}
#export .close{
	color:red;
	text-decoration:underline;
	cursor:pointer;
	float:right;
	padding:15px;
	background-color:black;
	
	/* Only do it this way when .content is a textarea */
	position:absolute;
	right:0px;
}
#export .content{
}
#export textarea.content{
	margin-top:5px;
	width:100%;
	height:90%;
	border:0px;
}

#boardDiv .tile {
	width:48px;
	height:48px;
	background:url(./images/empty.png);
	/*border:1px dotted black;*/

	display:inline-block;
	margin:0px;
	padding:0px;
}
#boardDiv .tile.White{
	/*background:url(./images/hexTile_white.png);*/
}
#boardDiv .tile.Black{
	/*background:url(./images/hexTile_black.png);*/
}
#boardDiv .tile>img{
	/*position:absolute;*/
}

/*
Not sure why masking doesn't work here.
#boardDiv .tile.selected{
	-webkit-mask-image: background:url(./images/cursorOverlay.png);
	-o-mask-image: url(./images/cursorOverlay.png);
	-moz-mask-image: url(./images/cursorOverlay.png);
	mask-image: url(./images/cursorOverlay.png);
}*/
.cursorWrapper{
	z-index:2;
	position:absolute;
}

#boardDiv .row{
	height:48px;
}
#boardDiv .row.odd{}

.coordinatesOverlay{
	position:absolute;
	text-align:center;
	width:48px; /* should be same as .tile */
	height:24px;
	line-height:24px;
	margin:12px 0px;
	font-family:monospace;
	display:inline;
	z-index:3;
	cursor:pointer;
}
.coordinatesOverlay:hover{
	background-color:#555; /* both coord colors will be more visible on hover, and it's darker than the normal board bg. */
}
.whiteText { /* to let the coordinates show up on black squares - TODO: MAKE THIS WORK... REQUIRES SOME JS TO TOGGLE THE CLASS WHEN TOGGLING THE CORRESPONDING TILE'S COLOR. */
	color:white;
}




.startingConfigurations{
	margin-top:10px;
	width:100%;
	text-align:center;
}
.startingConfigurations button {
	-moz-box-shadow:inset 0px 1px 0px 0px #9cf293;
	-webkit-box-shadow:inset 0px 1px 0px 0px #9cf293;
	box-shadow:inset 0px 1px 0px 0px #9cf293;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1afe00), color-stop(1, #01ce00) );
	background:-moz-linear-gradient( center top, #1afe00 5%, #01ce00 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1afe00', endColorstr='#01ce00');
	background-color:#1afe00;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #35d826;
	display:inline-block;
	color:#ffffff;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #3eb235;
}
.startingConfigurations button:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #01ce00), color-stop(1, #1afe00) );
	background:-moz-linear-gradient( center top, #01ce00 5%, #1afe00 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#01ce00', endColorstr='#1afe00');
	background-color:#01ce00;
}
.startingConfigurations button:active {
	position:relative;
	top:1px;
}
/* This imageless css button was generated by CSSButtonGenerator.com */