@charset "UTF-8";
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 24.06.2017, 09:56:42
    Author     : gju
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0px;
    padding: 0px;
    border: 0px;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    vertical-align: top;
}

/*
input#chat{
  width: 100%;
}

#console-container {
  width: 100%;
}
*/
#console {
  border: 0px solid #CCCCCC;
	margin-left:10px;
  text-align:left;
  border-right-color: #999999;
  border-bottom-color: #999999;
  height: 100%;
  overflow-y: auto;
  /* overflow-y: scroll;
  padding: 5px;
  width: 95%;*/
}

#console p {
  padding: 0;
  margin: 0;
}

.container {
  border: 0px solid rgb(255, 0, 0);
  position: fixed;

	width: 100%;
	height: 100%;
  
	padding: 0;
	margin: 0;
/*
  box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
*/    
}	

.div_container {
  /*border: 0px solid rgba(255, 0, 0,5);
  position: fixed;*/

	width: 100%;
	height: 100%;
  
	padding: 0px;
	margin: 0px;
/**/
  box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
    
}	


/*
figure img { border: 1px solid #ccc; }*/
h1 { 
	
	clear: both; 
    margin: 0px;
    padding: 0px;
    vertical-align: baseline;
    vertical-align: top;
     overflow:auto;

}

h5 { 
	
	clear: both; 
    margin-bottom: 0px;
    padding: 0px;
    vertical-align: top;
    text-align: right;
     overflow:auto;
}

  .draggable {
    width: 32px;
    height: 32px;
    z-index: auto; /* Sit on top */
    text-align: center;
    background: white;
  }
  
 .dropzone {
    width: 32px;
    height: 32px;
    z-index: auto; /* Sit on top */
    /*overflow:auto;*/
   	border: 0px solid #666666; 
     background-color: lightgrey; 
  /*  background: #666666; 
    margin-bottom: 1px;
    padding: 1px;*/
  }
  .dropzone_red {
    background-color: red;
  }
  .dropzone_coral {
    background-color: coral;
  }
  .dropzone_blue {
    background-color: blue;
  }
  .dropzone_turquoise {
    background-color: turquoise;
  }

/* Prevent the contents of draggable elements from being selectable. */
/**/
[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  /*-khtml-user-drag: element;
  -webkit-user-drag: element;*/
}


dd {
  padding: 5px 0;
}
.column {
  /*height: 150px;
  width: 150px;*/
  float: left;
  border: 2px solid #666666;
  background-color: #ccc;
  margin-right: 5px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 3px #000;
  -moz-box-shadow: inset 0 0 3px #000;
  -ms-box-shadow: inset 0 0 3px #000;
  -o-box-shadow: inset 0 0 3px #000;
  box-shadow: inset 0 0 3px #000;
  text-align: center;
  cursor: move;
  margin-bottom: 30px;
  
}

.chat_area{
  border: 0px solid #666666;
   margin-left:0px;
   text-align:left;
   vertical-align:middle;
   vertical-align:top;
  
   /*display:inline-block;*/
   width:100%;
   height:100%;
     overflow:hidden;
 
 }
 
 .chat_input{
   border: 1px solid rgb(240, 5, 5);
   margin-left:10px;
   width: 100%;
   text-align:center;
   display:inline-block;
  }
 
.column header {
  color: #fff;
  text-shadow: #000 0 1px;
  box-shadow: 5px;
  padding: 5px;
  background: -moz-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
  background: -webkit-gradient(linear, left top, right top,
                               color-stop(0, rgb(0,0,0)),
                               color-stop(0.50, rgb(79,79,79)),
                               color-stop(1, rgb(21,21,21)));
  background: -webkit-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
  background: -ms-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
  background: -o-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
  border-bottom: 1px solid #ddd;
  -webkit-border-top-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -ms-border-radius-topleft: 10px;
  -o-border-radius-topleft: 10px;
  border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topright: 10px;
  -ms-border-radius-topright: 10px;
  -o-border-radius-topright: 10px;
  border-top-right-radius: 10px;
}
/*
#columns-full .column
{
  -webkit-transition: -webkit-transform 0.2s ease-out;
  -moz-transition: -moz-transform 0.2s ease-out;
  -o-transition: -o-transform 0.2s ease-out;
  -ms-transition: -ms-transform 0.2s ease-out;
}
*/
#columns-full .column.over,
#columns-dragOver .column.over,
#columns-dragEnd .column.over,
#columns-almostFinal .column.over {
  border: 2px dashed #000;
}
/*
#columns-full .column.over,
#columns-dragOver .column.over,
#columns-dragEnd .column.over,
#columns-almostFinal .column.over {
   opacity: 0.25;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
}
*/
#columns-full .column .count,
#columns-almostFinal .column .count {
  padding-top: 15px;
  font-weight: bold;
  text-shadow: #fff 0 1px;
}

.tile_chr{
	height: 30px;
  width: 30px;
	text-align:left;
	margin-left: 3px;
	overflow: hidden;
/*	position:relative;
  top: -.1em; 
  left: -.5em; */
/*	background-color: rgba(0,0,0,.5);
    color: #fff;*/
	font-size: 120%;
	
}
.tile_val{
	height: 30px;
  width: 30px;
  overflow: hidden;
	/*text-align:right;*/
	/*margin-right:10px;*/
	font-size: 80%;
  
  /**/position:relative;
  /*position:absolute;*/
  
  top: -1.3em; 
 	left: 1.5em; 
	
}
.tile{
  position: absolute;
  height: 28px;
  width: 28px;
 /* float: center;
  vertical-align: top;
  font-size: 24px;*/
  
  border: 1px solid #666666;
  background-color: #cccccc;
  border-radius: 10px;
  
  /*text-align: center;*/
  cursor: move;
  
  overflow: hidden;
 /* 
 margin-left: 3px; 
  margin-top: 3px;
  margin-right: 1px; 
  margin-bottom: 1px;
   */
/*  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  -webkit-box-shadow: inset 0 0 3px #000;
  -moz-box-shadow: inset 0 0 3px #000;
  -ms-box-shadow: inset 0 0 3px #000;
  -o-box-shadow: inset 0 0 3px #000;
  box-shadow: inset 0 0 3px #000;
  */
 

  /* z-index: 10; */
}
.tile header {
	/*
  font-size: 100px;
  color: #ff00ff;
  text-shadow: #000 0 1px;
  box-shadow: 0px;
  padding: 0px;
  */
  /*
  background: -moz-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
  background: -webkit-gradient(linear, left top, right top,
                               color-stop(0, rgb(0,0,0)),
                               color-stop(0.50, rgb(79,79,79)),
                               color-stop(1, rgb(21,21,21)));
  background: -webkit-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
  background: -ms-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
  background: -o-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
  border-bottom: 1px solid #ddd;
  */
  
  -webkit-border-top-left-radius: 0px;
  border-top-left-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  border-top-right-radius: 0px;
  
}
#tile .moving{
    /*border-style: dotted;*/
     border: 2px dashed #000;
}

.main_table{
   border: 1px solid;
   /*border: none;
   border-style: none;*/
   padding: 0px;
   
   padding: 0px;
   margin: 0px;
   
    border-spacing: 0px;
    border-collapse: collapse;
    z-index: -1;
  }
.board_play_table{
  /*  */
   border-style: solid;
   border:0px solid;
   z-index: -1;

}
.board_tr{
    border-style: solid;
}
.board_td{
 height: 40px;
 background-color: lightgrey;
 padding: 0px;
 margin: 0px;
 border: none;
 border-spacing: 0px;
 
 border-collapse: collapse;
/*   width: 30px;
 
    border:1px solid;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;*/
}
/**************Playarea***************/
.main_td{
 height: 0px;
 /*background-color: antiquewhite;*/
 padding: 0px;
 margin: 0px;
 border: none;
 border-spacing: 0px;
 /*cellspacing: 0px;*/ 
 border-collapse: collapse;
 /* border:1px solid;   for testing*/ 
 
/*   width: 30px;
 
    border:1px solid;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;*/
}
/*
.cel{
   width: 39px;
    height: 39px;
  
    overflow:auto;
   	border: 1px solid #666666; 
	
}*/
.tray_td{
    background-color:lightgrey;
    /*border:0px solid;*/
    text-align: center;
   
    width: 40px;
    height: 40px;
}
.coord_td{
    text-align: center;
}    
.msg_main{
    /*text-align: right;*/
    border:1px solid black;
    padding:10px;
    margin:50px;
    
}    
/* The Modal (background) */
.modal {
  /*display: none;  Hidden by default */
  display: block;  /*Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 0px; /* Location of the box */
  left: 0;
  top: 0;
  
 /* width: 50%;  Full width */
 /* height: 10%; Full height */
   border-radius: 20px;
 /*  border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;*/
  overflow: hidden; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(210,105,30,0.8); /* Black w/ opacity */
}

/* Modal Content */
.modal-title {
  background-color: #666666;
  margin: auto;
  padding: 5px;
  font-size: 22px;
  /*padding-top: 20px;  Location of the box */
  border: 1px solid #888;
 width: 100%;
 
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
 
  text-align: center;
  /*padding: 10px;*/
   
  padding: 20px; /* Location of the box */
  /*border: 1px solid #888;
  height: 400px;
  width: 50%;*/
 
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  /*margin:20px;*/
  margin-top: 20px;/*auto;*/
  margin-left: 200px;/*auto;*/
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}