/* CSS Document */
body {
font-family:Arial, Helvetica, sans-serif;
}

#game-container {
position:relative;
height:500px;
width:800px;
}

h1 {
	color:#666666;
	font-weight:bold;
	display:inline;
}

.window {
position:absolute;



/* should have a subtle gradient here */
background-image: url(images/window.png);
/*background-repeat:no-repeat;*/
visibility:hidden;

text-align:center;
width:360px;
	height:160px;
	left:200px;
	top:150px;
	padding:20px;
}

.inner-window {
height:100%;
width:100%;
padding:0px;
text-align:center;
visibility:hidden;
}

#chance-picked-screen {
position:absolute;
padding-top:30px;
height:120px;
width:300px;
top:25px;
left:50px;
background-color:#FF9933;
	border: 1px solid #999999;
	font-weight:bold;

}

#pick-characters-screen div.box {
	position:absolute;
	height:100px;
	width:80px;
	top:70px;
	text-align:center;
	font-weight:bold;
}

#pick-characters-screen div.human {
left:80px;
}

#pick-characters-screen div.computer {
left:240px;
}

#pick-characters-screen .box .image {
position:absolute;
height:80px;
width:80px;
bottom:0px;
left:0px;
}

#pick-characters-screen .human .image {
background-image: url(images/black-token-big.png);
}

#pick-characters-screen .computer .image {
background-image: url(images/white-token-big.png);
}

.chance-card {
	display:block;
	height:100px;
	width:60px;
	background-color:#FF9933;
	border: 1px solid #999999;
	float:right;
	margin-right:10px;
	margin-top:10px;
	background-image: url(images/chance-small.png);
}

.chance-card:hover {
border-color:#FFFFFF;
}

#pick-chance-screen {
font-weight:bold;
}

#roll-button-container {
position:absolute;
width: 75px;
height: 75px;
bottom:25px;
left:30px;
background-color:#666666;
}

.die {
position:absolute;
height:100px;
width:100px;
font-weight:bold;
font-size:48px;
text-align:center;
vertical-align:middle;
/*background-color:#FFFFFF;*/
background-image:url(images/dice.png);
background-position:top left;
background-repeat:no-repeat;
/*border: 2px solid #000000;*/
}

#loading {
position:absolute;
width:100%;
height:100%;
background-color:#FFFFFF;
top:0px;
left:0px;
text-align:center;
font-weight:bold;
font-size:26px;
color:#666666;
z-index:30;
line-height:11px;
}

#loading small {
font-style:italic;
font-size:10px;
}

#die1 {
left:67px;
top:50px;
}
#die2 {
left:234px;
top:50px;
}

#roll-button-container .background-color {
position:absolute;
left: 0px;
top: 0px;
height:100%;
width:100%;
background-color:#990000;
opacity:0;
}

#roll-button-container a {
position:absolute;
left: 0px;
top: 0px;
height:100%;
width:100%;
background-image: url(images/rolldicebutton.png);
}
/*
#start-screen.window {
	
}

#pick-chance-screen.window {
	width:400px;
	height:200px;
	left:200px;
	top:150px;
}


#pick-characters-screen.window {
	width:400px;
	height:200px;
	left:200px;
	top:150px;
}
*/

#alert.window {
text-align:center;
vertical-align:middle;
font-size:16px;
font-weight:bold;
padding-top:90px;
padding-bottom:0px;
height:110px;
}

#dice-roll {
font-weight:bold;
}
 .button {
text-decoration:none;
background-color:#666666;
color:#FFFFFF;
padding: 2px;
border: 1px solid #FFFFFF;
font-size:16px;
}

 .button:hover {
background-color:#888888;
border-color:#000000;
}

.byline {
font-size: 10px;
color:#666666;
}

#board {
position:absolute;
height:100%;
width:800px;
height:500px;
top:0px;
left:0px;
background-image: url(images/board.gif);
}

.token {
position:absolute;
height:30px;
width:30px;
top:0px;
left:0px;
}

#human.token {
background-image: url(images/black-token.png);
/*background-color:#663300;*/
}

#computer.token {
background-image: url(images/white-token.png);
/*background-color:#FFCCCC;*/
}