@charset "utf-8";
/* CSS Document
craps5.css
11/03/15
updating the styles to integrate into technovice

*/

section{
	/*height: 575px;*/
}

section#gameInfo{
	width: 300px;
	height: 200px;
	border:none;
	
	/*float:right;
	clear: both;*/
}

aside{
	float: right;
	/*background-color:#0F6;*/
	margin-right: 250px;
	height: 600px;
}

figure img{
	border:thin double #999;
	box-shadow: 3px 3px 3px 2px gray;
}

/*change positions for the playImage*/
img#playImage{
	/*float acts like a layering that removes an element from the flow of the page
	and repositions it with respect to other elements*/
	float:right;
	position:relative;
	/*these values were obtained by trial and errors*/
	left: 100px;
	top: -100px;
	
}
/*right justify the tabular data, multiple selectors*/
td#gameCount, td#score, td#status, td#point, td#rollCount{
	text-align:right;
	width:80px;
	background-color:#FF6;
}

/*right justify the table labels*/
td{
	text-align:right;
	/*trbl listing*/
	padding:2px 2px 2px 0px;
	
}

div#myRolls{
	float:right;
	margin-right: 180px;
	/*if the margin is too big, it crowds the label 
	and causes a jumpy type of effect -- always to be avoid
	*/
}

input#button{
	width: 100px;
	height: 50px;
	/*background-color:white;*/
}

td#status{
	font-weight:bold;
	font-size:larger;
	background-color:white;
}

canvas#canvas
{
  background-color: #00cc66;
  border-top-width: medium;
  border-right-width: medium;
  border-bottom-width: medium;
  border-left-width: medium;
  border-top-style: double;
  border-right-style: double;
  border-bottom-style: double;
  border-left-style: double;
  border-top-color: #006600;
  border-right-color: #006600;
  border-bottom-color: #006600;
  border-left-color: #006600;
  border-image-source: none;
  border-image-slice: 100% 100% 100% 100%;
  border-image-width: 1 1 1 1;
  border-image-outset: 0 0 0 0;
  border-image-repeat: stretch stretch;
}