input {
  display: block;
  cursor: text;
  background: #ECE5B6;
  color: #111;
  padding: .1em .3em 0 .3em;
  border-radius: 5px;
  border: 1px solid #555;
  font-weight: bold;
  height: 15%;
  width: 95%;
  font-size: 16px;
}

input:hover {
  border: 1px solid #157DEC;
  box-shadow: 0px 0px 5px #F7F7E3 inset;
}

input:-moz-placeholder {  
    color: #aaa;  
}

#board {
  width: 78.5%;
  float: left;
  /*background: rgba(100,100,100,.5); */
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

#board table {
  margin: 0 auto;
  border-collapse: collapse;
  border: 10px solid #4D4A3D;
}

#board td {
  float: left;
  background: #B3A185; 
  border: 1px solid #B3A185; 
}

#board td:hover {
  border: 1px dashed yellow !important;
}

#board tr:nth-child(odd) td:nth-child(even), #board tr:nth-child(even) td:nth-child(odd) {
   background: #724D39; 
   border: 1px solid #724D39; 
}


#board .white {
  color: white; 
  display: block;
  width: 100%;
  cursor: move;
}

#board .black {
  color: black; 
  display: block;
  width: 100%;
  cursor: move;
  /*-webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);*/
}

#board .possibleMoves {
  /*border: 1px solid black;*/
  box-shadow: 0 0 .1em .1em #ccc inset;
  border: 1px solid #777 !important;
}

#board .flip {
  /*-webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  transform: scaleX(-1);*/
}

#board .tile {
  display: block;
  width: 100%;
  cursor: move;
}
  
#board .tile.selected {
   background: #598242;
   border: 0;
}

#panel {
	position: fixed;
	right: 0;
	z-index: -1;
	/*float: left;*/
	background: #555;
	background: -webkit-gradient( linear, left bottom, left top, color-stop(0,rgba(255,255,255,0)), color-stop(1, rgba(100,100,100,100)) );
	background: -moz-linear-gradient( center bottom, rgba(255,255,255,0) 0%, rgba(100,100,100,100) 100% );
	/*border-radius: 0px 20px 0px 0px;*/
	border-top: 2px solid #555;
	padding: .5%;
	width: 20.5%;
	height: 35.5em;
}

#panel.startTurn {
  background: -webkit-gradient( linear, left bottom, left top, color-stop(0,rgba(255,255,255,0)), color-stop(1, rgba(0,200,0,100)) );
  background: -moz-linear-gradient( center bottom, rgba(255,255,255,0) 0%, rgba(0,200,0,100) 100% );
}

#panel.endTurn {
  background: -webkit-gradient( linear, left bottom, left top, color-stop(0,rgba(255,255,255,0)), color-stop(1, rgba(200,0,0,100)) );
  background: -moz-linear-gradient( center bottom, rgba(255,255,255,0) 0%, rgba(200,0,0,100) 100% );
  
}

#panel button span{
   padding: 0em .7em .2em .7em;
}


#panel table#players {
  margin: 0 auto;
  margin-bottom: 8px;
  margin-top: 8px;
  border-collapse: collapse;
  background: rgba(0,0,0,.5);
  border-radius: 5px;
}

#panel #players tr {
  margin: 0; padding: 0;
}

#panel #players td {
  padding: .2em .3em .2em .3em;
  border-left: 1px solid #ddd;
}

#panel #players td:first-child {
  border: 0; 
}

#panel #players h3 {
  display: inline-block; 
  margin: 0; padding: 0;
  white-space: nowrap;
  overflow: hidden; 
  /*line-height: .8em;*/
}

#panel #players span.white {
  color: white;
}

#panel #players span.black {
  color: black;
}

#panel #players div {
    border-radius: 12px;
    background: rgba(200,200,200,200);
    color: black;
}



#panel button#settings {
  margin-top: .4em; 
}

#panel button#leaveRoom {
  margin-top: .4em; 
}

#panel #message {
	position: relative;
	text-align: center;
	margin: 0;
	margin-bottom: .5em;
	font-size: 16px;
	
}


#panel #chat {
	padding-top: .1em;
	border-radius: 5px;
	background: rgba(0,0,0,.5);
	position: relative;
}

#panel #chat p {
	padding: .1em .5em;
	font-size: 14px;
	line-height: 130%;
	height: 110px;	
	text-align: left;
	overflow-y: auto;
	
}

#panel #chat input {
	text-align: left;	
	/*width: 14.5em;*/
	position: absolute;
	font-size: 14px;
	bottom: 0;
	width: 93.5%;
	padding: .5% 3%;
	/*height: 1.5em;*/
}

#panel #logs {
	padding: 0;	
	border-radius: 5px;
	background: rgba(0,0,0,.5);
	position: relative;
}

#panel #logs p {
	padding: .1em .5em;
	font-size: 14px;
	line-height: 130%;	
	height: 140px;	
	text-align: left;
  overflow-y: auto;
}

#panel #logs img {
  position: absolute;
  bottom: 2%;
  right: 2%; 
  cursor: pointer;
  opacity: .9;
}

#panel #logs img:hover {
  opacity: 1; 
}

#swapDialog {
  padding: .25em;
}

#swapDialog ul {
  background: #777;
  border-radius: 5px; 
}

#swapDialog ul li {
  display: inline;
  text-align: center;
  cursor: default;
}

#swapDialog ul li:hover {
  background: #598242;
}

#endGame {
	position: absolute;
	top: .7em;
	left: .7em;
	width: 572px;
	height: 572px;
	opacity: .6;
	background: #111;
	display: none;
}


#settingsDialog {
   display: none;
}

#settingsDialog img {
   float: left;
}

#settingsDialog span {
   float: left;
   margin: 6px 0 0 8px;
}

#settingsDialog #volSlider {
   margin-top: .7em; 
}