span.link {
	cursor:pointer;
}

/* This imageless css button was generated by CSSButtonGenerator.com */
span.obutton {
	cursor:pointer;
	-moz-box-shadow:inset 0px 1px 0px -2px #fff6af;
	-webkit-box-shadow:inset 0px 1px 0px -2px #fff6af;
	box-shadow:inset 0px 1px 0px -2px #fff6af;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23) );
	background:-moz-linear-gradient( center top, #ffec64 5%, #ffab23 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23');
	background-color:#ffec64;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #ffaa22;
	display:inline-block;
	white-space:nowrap;
	color:#333333;
        text-align: center;
	font-family:Arial;
	font-size:12px;
	font-weight:bold;
	padding:3px 3px;
        margin: 0px 3px 0px 3px ;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffee66;
}
span.obutton:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64) );
	background:-moz-linear-gradient( center top, #ffab23 5%, #ffec64 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64');
	background-color:#ffab23;
}
span.obutton:active {
	position:relative;
	top:1px;
}


span.button {
	cursor:pointer;
	-moz-box-shadow:inset 0px 1px 0px 0px #caefab;
	-webkit-box-shadow:inset 0px 1px 0px 0px #caefab;
	box-shadow:inset 0px 1px 0px 0px #caefab;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #77d42a), color-stop(1, #5cb811) );
	background:-moz-linear-gradient( center top, #77d42a 5%, #5cb811 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a', endColorstr='#5cb811');
	background-color:#77d42a;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #268a16;
	display:inline-block;
	white-space:nowrap;
	color:#303108;
     text-align: center;
	font-family:arial;
	font-size:18px;
	font-weight:bold;
	padding:3px 3px;
        margin: 0px 5px 0px 3px ;
	text-decoration:none;
	text-shadow:1px 1px 0px #aade7c;
}
span.button:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5cb811), color-stop(1, #77d42a) );
	background:-moz-linear-gradient( center top, #5cb811 5%, #77d42a 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cb811', endColorstr='#77d42a');
	background-color:#5cb811;
}
span.button:active {
	position:relative;
	top:1px;
}



.gameinfo { 
//text-align:right;
//background-color: #6aaa64;
//height: 100%;
 }

body {
	font-family: arial;
	margin: 0px; /* for IE6 / IE7 */
  background: #3b874b;
 background: #a9a879;
  font-family: Verdana,Arial,Helvetica,sans-serif;
  padding: 0px;
position: fixed;
  top: 5px;
}

table.board {
	table-layout:fixed;
 // position:fixed;
// touch-action: manipulation;
 touch-action: none;


}


td.DL {
	background-image:url(pics/dl.png);
	background-repeat:no-repeat;
}

td.DW {
	background-image:url(pics/dw.png);
	background-repeat:no-repeat;
}

td.TL {
	background-image:url(pics/tl.png);
	background-repeat:no-repeat;
}

td.TW {
	background-image:url(pics/tw.png);
	background-repeat:no-repeat;
}


td.ST {
	background-image:url(pics/st.png);
	background-repeat:no-repeat;
}

td.score {
	background-image:url(pics/scorebg.png);
	background-repeat:repeat;
}

/* drag container */
#drag {
	background-image:url(pics/pattern.png);
	background-repeat:repeat;
       background-color: #6aaa64;
	//border: 2px dashed LightBlue;
	display: table;
}

/* set border for images inside DRAG region - exclude image margin inheritance */
/* my WordPress theme had some funny margin settings */
#drag img {
	margin: 1px;
}

/* drag objects (DIV inside table cells)    ...player letters?*/
.drag {
	//filter:alpha(opacity=90); opacity:0.9;
	cursor: move;
	//margin: auto;
	//margin-bottom: 1px;
	//margin-top: 1px;
	margin-left: 2px;
	z-index: 10;
	background-color: white;
	text-align: center;
	font-size: 18pt; /* needed for cloned object */
	width: 36px;
	height: 29px;
overflow: hidden;
	line-height: 22px;
	/*line-height: 23px; /* ugly hack for IE6 */
	/* round corners */
	border-radius: 6px; /* Opera, Chrome */
	-moz-border-radius: 4px; /* FF */
}


/* drag objects border for the first table */
.t1 {
	border: 2px solid #499B33;
	border: 2px solid black;
	background-image: url("pics/tile_dark.png");  
}
/* drag object border for the second table */
.t2 {
	//border: 2px solid IndianRed;
	border: 2px solid black;
	background-image: url("pics/tile_dark.png");  
}

.scroller {
//position:absolute;
//	width:100%;
//	width:180px;
     width: 90%;
//	height:250px;
	//overflow:auto;
	font-size: 14px;
	background-color: #f7fef7;
	background-color: #6aaa64;
 border-radius: 6px;
 padding: 5px;
 border-style:double;
overflow-y: scroll;
//overflow:auto;
 height:140px;
 margin: 0px 0px 5px 5px;
//text-align:right;
text-align: left;

// display: flex; 
// flex-direction: column-reverse;
//position: fixed;

}

/* allow / deny access to cells marked with 'mark' class name */
.mark {
	color: white;
	background-color: #9B9EA2;
}

/* tables */
div#drag table {
	/*background-color: #e0e0e0;*/
	border-collapse: collapse;
}

/* table cells ...board cells*/

div#drag td {
	width: 46px;
	height: 33px;
	border: 1px solid white;
	border: 2px solid #d4fcdb;
	border: 1px solid orange;
	border: 2px solid #a9a879;;

        //border-radius: 5px; 
	text-align: center;
	font-size: 10pt;
	/*padding: 2px;*/
}

div#drags td {
       //for SWAPS??
	width: 36px;
	height: 32px;
	border: 1px solid white;
	border: 1px solid orange;
	border: 2px solid #a9a879;;
	text-align: center;
	font-size: 10pt;
	/*padding: 2px;*/
}


td.swapit {
	background-image:url(pics/trash.png);
	background-repeat:no-repeat;
}

#scoreLook {
    color:black;
    font-size:18px;
}

#player_1_letters_side{
       color:black;
    font-size:18px;
   background-image:url(pics/tile_dark.png);
 background-repeat: repeat-x;
margin: 0px 5px 0px 5px;
 // padding: 0px 5px 0px 5px;
}

#player_1_score{
   //    color:black;
    font-size:18px;
  //  width: 10%;
    background-color: #45aa00;
   background-color: yellow;
 // margin: 0px 5px 0px 5px;
// padding: 0px 5px 0px 5px;
}

#player_2_score{
 //      color:black;
    font-size:18px;
 //   width: 150px;
 // background-color: IndianRed;
  background-color: Cyan;
// margin: 0px 5px 0px 5px;
 // padding: 0px 5px 0px 5px;
}

#content
{
	//margin: 5px ;
      //  padding: 5px;
  //      color:black;
  //  font-size:11px;
 // height: 100%;
// border: 2px solid #000;
//border-radius: 14px;
// overflow: scroll;
// overflow-y: hidden;
// overflow-x: hidden;
//position: fixed;

}

#left {
 // width: 95%;
  width: 68%;
  height: 100%;
// width: 1000px;
  float:left;
// border: 2px solid red;
 // margin: 0px 5px 5px 5px ;
//  padding: 0px 5px 5px 5px ;
}

#right {
//  width: 20%;
// width: 300px;
  height: 100%;
 width: 30%;
  float:right;
 // border: 2px solid blue;
  margin: 0px 5px 0px 0px ;
 // padding: 0px 5px 5px 5px ;

}

#curatedBox {
 width: 100%;
display: inline-block;
 // height: 95%;
 // float:right;
   font-size: 12px;
 // border: 2px solid blue;
//  margin: 0px 5px 5px 5px ;
//  padding: 0px 5px 5px 5px ;
background-color: #6aaa64;
  //overflow: scroll;


}

#reportOne {
  display: inline-block;
  width: 90%;
  margin: 5px 5px 5px 5px ;
  padding: 0px 5px 5px 5px;
  border-radius: 6px;
  background-color: #6aaa64;
  height: 160px;
  overflow-y: scroll;
  border-style:double;
text-align: left;

 
}

#reportTwo {
  display: inline-block;
width: 90%;
  margin: 5px 5px 5px 5px ;
  border-radius: 6px;
  background-color: #6aaa64;
  height: 125px;
  overflow-y: scroll;
  border-style:double;
 // scrollTop =  100;
text-align: left;

}

#reportThree {
  display: inline-block;
width: 90%;
   font-size: 12px;
  margin: 5px 5px 5px 5px ;
  border-radius: 6px;
  background-color: #6aaa64;
  height: 80px; 
  overflow-y: scroll;
  border-style:double;
  text-align: left;
//animation: blinker 1s step-start infinite;
}

//@keyframes blinker {
//  50% {
//    opacity: 0;
//  }
//}

.buttonReset {
   
    border-radius: 4px;
    border: 2px;
    color: white;
    padding: 2px 3px 2px 3px;
    text-align: center;
    //text-decoration: none;
    display: inline-block;
    font-size:18px;
    margin: 0px 1px 0px 1px ;
    //cursor: pointer;
    background-color: #A70000;
}
.buttonReset:hover {background-color: #3e8e41}

.buttonReset:active {
  background-color: #3e8e41;
//  box-shadow: 0 5px #666;
//  transform: translateY(4px);
  transform: scaleY(1.5);
}


.buttonPts {
   
    border-radius: 4px;
    border: 2px;
    color: white;
    padding: 2px 3px 2px 3px;
    text-align: center;
    //text-decoration: none;
    display: inline-block;
    font-size:14px;
    margin: 0px 1px 0px 1px ;
    //cursor: pointer;
    background-color: #A70000;
}

.buttonPts:hover {background-color: #3e8e41}

.buttonPts:active {
  background-color: #3e8e41;
 // box-shadow: 0 5px #666;
//  transform: translateY(4px);
  transform: scaleY(1.5);
}

.buttonBcm {
   
    border-radius: 4px;
    border: 2px;
    color: black;
    padding: 2px 3px 2px 3px;
    text-align: center;
    //text-decoration: none;
    display: inline-block;
    font-size:10px;
    margin: 0px 1px 0px 1px ;
    //cursor: pointer;
    background-color: Yellow;
}

#buttonBcm1 {
   
    border-radius: 4px;
    border: 2px;
    color: black;
    padding: 2px 3px 2px 3px;
    text-align: center;
    //text-decoration: none;
    display: inline-block;
    font-size:14px;
    margin: 0px 1px 0px 1px ;
    //cursor: pointer;
    background-color: Yellow;
    display: none;
}

#buttonBcm1:hover {background-color: #3e8e41}

#buttonBcm1:active {
  background-color: #3e8e41;
//  box-shadow: 0 5px #666;
//  transform: translateY(4px);
  transform: scaleY(1.5);
}

#buttonBcm2 {
   
    border-radius: 4px;
    border: 2px;
    color: black;
    padding: 2px 3px 2px 3px;
    text-align: center;
    //text-decoration: none;
    display: inline-block;
    font-size:14px;
    margin: 0px 1px 0px 1px ;
    //cursor: pointer;
    background-color: Cyan;
    display: none;
}

#buttonBcm2:hover {background-color: #3e8e41}

#buttonBcm2:active {
  background-color: #3e8e41;
//  box-shadow: 0 5px #666;
//  transform: translateY(4px);
  transform: scaleY(1.5);
}



.buttonCpu {
   
    border-radius: 4px;
    border: 2px;
    color: black;
    padding: 2px 3px 2px 3px;
    text-align: center;
    //text-decoration: none;
    display: inline-block;
    font-size:10px;
    margin: 0px 1px 0px 1px ;
    //cursor: pointer;
    background-color: Cyan;
}