#playgametab {
  opacity: 1;
}



#canvas {
 position:relative;
 top:5px;	
}

#canvas_menu {
 margin-top:5px;	
}

#canvas_menu h2 {
 margin-bottom:30px;	
}

#messageboard {
 position:absolute;
 left:70px;
 top:50px;	
 z-index:200;
 display:none;
 background:#268574;
 opacity:0.95;
 padding:20px;
 border-radius:10px;
 border:1px solid #AAA;
 box-shadow:2px 3px 10px #222; 
 color:#e3e2d8;
 text-align:left;
}

#messageboard a {
 color:#fef9c3;
 cursor:pointer;
}
#messageboard a:hover {
 color:#f7a750;
}

.messageboard_button {
 display:inline-block;
 background:#EEE;
 color:#034D63;
 padding:3px 20px 3px 20px;
 cursor:pointer;
 text-align:center;
}
.messageboard_button:hover {
 background:#28d5db;	
}

#messageboard h1,#messageboard h2,#messageboard h3 {
 margin-top:0; 
 color:#fef9c3;
}

#messageboard input {color:#000;}



#draggable_deck {

 display:block;	
 z-index:5;
 width:252px;
 margin:0;
 padding:0;
 z-index:10; 
 margin-bottom:4px;
}

#draggable_deck div {
 display:block;
 background:#dddddd;
 float:left;
  
 padding:0;
 margin:0;
 margin-right:2px; 
 
 border-right:1px solid #000;
 border-bottom:1px solid #000; 
   
 height:40px;
 width:40px; 
}

#draggable_deck div span {
 height:39px;
 width:39px; 	
}

#zoom_div {
  display:inline-block;
  position:relative;
  top:-2px;
}

#score_player_div {
 color:#0237a3;
 display:inline-block;
 font-size:18px;
}

#score_computer_div {
 margin-left:20px;
 color:#C40339;	
 display:inline-block; 
 font-size:18px; 
}

#scomputer.winner {
  border-bottom:2px solid #E55306;
}
#splayer.winner {
  border-bottom:2px solid #02ACF4;
}


#scoreboard1 {
 float:left;
 margin:0;	
 margin-bottom:4px;
 display:inline-block;
 width:280px;
}

#scoreboard2 {
 margin:0;
 margin-top:4px; 
 display:inline-block;	
 width:200px;
}

#bag_status {
 color:#349201;	
 float:left;
}


#scoreboard2 div {
 display:block;
 float:left;
 height:60px;	
 width:40px;
 height:40px;
}

#okay {
  cursor:pointer;	
  margin-right:10px; 
}

#swapable {
 cursor:crosshair;
 display:block;
 margin-right:10px;
 background:#F7AC32;
 color:#000;
 padding-top:6px;
 text-align:center;
 height:60px; 
 font-size:12px;
 z-index:15;
 line-height:16px;
}

#undo {
  cursor:pointer;
  margin-right:10px;  
}

#newgame {
 cursor:pointer;
}


#board { 
 display:block;
 background:#dddddd;
 width: 0px; 
 height: 0px; 
 padding:0;
 margin:0;  
 line-height:8px;
 margin-top:0px;
 margin-bottom:5px; 
}

#board div,#tilediv {
 display:inline-block;
 width:40px;
 height:40px;
 
 margin:0px;
 padding:0px;
 border:none;
 border-right:1px solid #000;
 border-bottom:1px solid #000;
 z-index:1;
}

#board img {
 float:left;	
 z-index:2;
}

#boardeffects {
 display:block;
 position:absolute;
 top:0px;
 left:0px;
 z-index:250; 
}

#playerpopup,#computerpopup {
 display:none;
 position:absolute;
 top:0px;
 left:0px;	
 border:none;
 box-shadow:2px 2px 6px #000;
 color:#FFF;
 background:#FFF;
 padding:2px 5px 0px 5px;
 border-radius:5px;
 border:2px solid #000;
 height:30px;
 line-height:18px;
 font-size:18px; 
 color:#DB2504;
 font-weight:bold;
}

#playerpopup {
 color:#007FB4;	
}


.popup {
 
 border:none;
 text-align:center;

 animation-name: fontzoom;
 animation-duration: 1.5s;  
 animation-iteration-count: 1;
 animation-timing-function:linear;   
 
 opacity:0;
}

@keyframes fontzoom {
    0% { opacity:1;display:block;}	
	75% { transform: translateY(-30px);opacity:1;display:none;}
    100% {transform: translateY(-110px);opacity:0;display:none;} 
}

	


#selectdeck {
 display:none;
 position:absolute;
 top:0px;
 left:0px;
 background:#000;
 padding:0;
 width:260px;
 height:60px;
 z-index:20; 
 box-shadow:0px 0px 30px #444;
}

.selectdeck {
 border:2px solid #000;	
}

.selectdeck:hover {
 border:2px solid #0499F8;	
}

#tilediv { display:none;}

.active_player{
  border:2px solid #08b1ff;  
  z-index:3;
}

@keyframes move_computer {
    from {top:-1000px;left:-1000px;}
    to {top:0;left:0px;}
}

.last,.lastotherplayer{
  position:relative;
  top:0px;
  left:0px;
  border:2px solid #F00;  
  z-index:2;
}

.lastotherplayer{
  animation-name: move_computer;
  animation-duration: 1s;  
  animation-timing-function: ease-out;   
}


#score_player {
 display:inline-block;
 width:120px;
}

  
.clear {
 clear:both;	
}

.dropped {
 background:#E13235;	
}

.post-header.post-author {
 margin:0; 
}

h1 {
 padding:0;	
 margin:0;
 font-size:32px;
 line-height:18px;
}

.zoom {
 cursor:pointer;
 margin-right:2px;
}

.qversion {
 float:right;
 font-size:11px;
 color:#C1DFD0;
}

@media(max-width:1024px){
	
 #board div,#tilediv {	
	width:35px;
	height:35px;  
 }
 #draggable_deck div {
	width:35px;
	height:35px; 
 }	
}

@media(max-width:768px){

 #zoom_div img {height:25px;}
 
 #board div,#tilediv {	
	width:30px;
	height:30px;  
 }
 #draggable_deck div {
	width:30px;
	height:30px; 
 }
}

@media(max-width:600px){ 

 #zoom_div img {height:20px;}

 #score_computer_div {margin-left:0px;}
 #score_player_div,#score_computer_div {font-size:16px;}
 #scoreboard1 { width:350px;}

 .active_player{ border:1px solid #08b1ff; }
 .last,.lastotherplayer{ border:1px solid #F00; }
 
 #board {
   margin:2px;	
 }	
 #board div,#tilediv {	
	width:25px;
	height:25px;  
 }
 #draggable_deck div {
	width:29px;
	height:29px; 
 }
#messageboard {
 left:10px;
 top:20px;	
}
 
}

@media(max-width:460px){	


 #zoom_div img { height:15px; }
 #score_player_div,#score_computer_div {font-size:13px;	}
 #scoreboard1 { width:350px; }

 .active_player{ border:1px solid #08b1ff; }
 .last,.lastotherplayer{ border:1px solid #F00; }
 
	
 #board {
   margin:1px;	
 }
 #board div,#tilediv {	
	width:18px;
	height:18px;  
 }
 #draggable_deck {
   height:22px; 
 }
 #draggable_deck div {
	width:22px;
	height:22px; 
 }	
 #sscoreboard2 { 
	height:42px;  
 } 
 #swapable {
   margin-right:3px;
 }
 #newgame {
  margin-left:3px;
  width:60px;
 }
#messageboard {
 left:0px;
 top:20px;	
}
 #undo {
  width:60px;	 
  margin-right:0px; 
 }
}