* {
	margin: 0;
	padding: 0;
}
body{
	background:#fff;
}
ul {
	list-style: none inside;
}
li {
	list-style: none inside;
}
a:focus {
	outline: none;
	}
.clear {
	clear: both; 
}   /* <div class="clear"> </div> */
a { 
	text-decoration: none; 
	color: black;
}
input, textarea { 
	outline: none;
}
fieldset {
	border: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
::-moz-selection{
	background: pink;
	color: white; 
} 
::selection {
	background: pink;
	color: white;
}   


/* Landscape */
@media (min-aspect-ratio: 1/1){
	/* BOARD SETUP */
	#board { 
		margin-left: 0.5vh;
		border: 1vh solid #7da4b4; 
		margin-top: 1vh;
		margin-bottom: 1vh;  
		-moz-box-shadow:    0 0 0 0.5vh #324f5a;
		-webkit-box-shadow: 0 0 0 0.5vh #324f5a;
		box-shadow:         0 0 0 0.5vh #324f5a; 
	}
	#board td {
		width: 8vh;
		height: 8vh;
		border: 0 solid black;
		background: #fff;
	}
	#board td.wallPlacementVert,
	#board td.wallPlacementVert_NOHOVER {
		width: 1vh;
		border: 0;
		background: #7da4b4;
	}
	#board td.wallPlacementHoriz,
	#board td.wallPlacementHoriz_NOHOVER {
		height: 1vh; 
		border: 0; 
		background: #7da4b4; 
	}     
	#board td.crossSpace {
		width: 1vh;
		height: 1vh;
		border: 0;
		background: #7da4b4;
	}
	#board td.wallPlacementHoriz, #board td.wallPlacementVert {
		cursor: pointer;
	}
	#board td.movableGreenSpaces {
		background: #f3ff6a;
	}    
	textarea{
		visibility: hidden;
		display:none;
	}   

	/* PIECES */
	.pieceComputer {
		border-radius: 50%;
		width: 6vh;
		height: 6vh;
		background: #bc2525;
		margin-left: 1vh;
		border: 0 solid #a31d1d; 
	}
	.piecePlayer {
		border-radius: 50%;
		width: 6vh;
		height: 6vh;
		background: #3ebc25;
		margin-left: 1vh;
		border: 0 solid #34a51d; 
	}

	/* WALL PLACEMENT */
	#board td.possibleWall { 
		background: #5f212d; 
	}
	#board td.keepWall { 
		background: #5f212d; 
	}
	#showCompPieces, #showPlayerPieces {
		margin-top: 1vh;
		text-align: center;
	}
	#showPlayerPieces span, #showCompPieces span {
		font-size: 3vh;
		font-family: "Arial"; 
	}
	#showPlayerPieces span.wallVal, #showCompPieces span.wallVal {
		margin: 0; 
		font-size: 4vh; 
	}

	#play {
		width:83vh;
		margin: auto;
	}
}
/* Portrait */
@media (max-aspect-ratio: 1/1){
	/* BOARD SETUP */
	#board { 
		margin-left: 0.5vw;
		border: 1vw solid #7da4b4; 
		margin-top: 1vw;
		margin-bottom: 1vw;  
		-moz-box-shadow:    0 0 0 0.5vw #324f5a;
		-webkit-box-shadow: 0 0 0 0.5vw #324f5a;
		box-shadow:         0 0 0 0.5vw #324f5a; 
	}
	#board td {
		width: 8vw;
		height: 8vw;
		border: 0 solid black;
		background: #fff;
	}
	#board td.wallPlacementVert,
	#board td.wallPlacementVert_NOHOVER {
		width: 1vw;
		border: 0;
		background: #7da4b4;
	}
	#board td.wallPlacementHoriz,
	#board td.wallPlacementHoriz_NOHOVER {
		height: 1vw; 
		border: 0; 
		background: #7da4b4; 
	}     
	#board td.crossSpace {
		width: 1vw;
		height: 1vw;
		border: 0;
		background: #7da4b4;
	}
	#board td.wallPlacementHoriz, #board td.wallPlacementVert {
		cursor: pointer;
	}
	#board td.movableGreenSpaces {
		background: #f3ff6a;
	}    
	textarea{
		visibility: hidden;
		display:none;
	}   

	/* PIECES */
	.pieceComputer {
		border-radius: 50%;
		width: 6vw;
		height: 6vw;
		background: #bc2525;
		margin-left: 1vw;
		border: 0 solid #a31d1d; 
	}
	.piecePlayer {
		border-radius: 50%;
		width: 6vw;
		height: 6vw;
		background: #3ebc25;
		margin-left: 1vw;
		border: 0 solid #34a51d; 
	}

	/* WALL PLACEMENT */
	#board td.possibleWall { 
		background: #5f212d; 
	}
	#board td.keepWall { 
		background: #5f212d; 
	}
	#showCompPieces, #showPlayerPieces {
		margin-top: 1vw;
		text-align: center;
	}
	#showPlayerPieces span, #showCompPieces span {
		font-size: 3vw;
		font-family: "Arial"; 
	}
	#showPlayerPieces span.wallVal, #showCompPieces span.wallVal {
		margin: 0; 
		font-size: 4vw; 
	}

	#play {
		width:83vw;
		margin: auto;
	}
}