/*
Description:
    Contains all the styles for the winning wheel page.
    
Verison History:
    2012-01-28, Douglas McKechie
    - Created based off earlier version.
    
    2015-09-26, Douglas McKechie
    - Minor updates for the 2.0 winwheel example.
*/

html
{
	height: 100%
}

body
{
    font-family: arial;
	background-color: #77AB51;
	color: #ffffff;
	padding: 0.1em;
	user-select: none;
-	height: 95%;
}

h1
{
	font-size: 0em;
	color: white;
	margin: 5px;
}

div.game-board
{
	text-align: center;
	padding: 0.1em;
	margin-top: 2em;
	height: 80%;
}

div.game-board #main
{
	padding: 4em 1em;
	border: 5px solid white;
	margin: 1em 0.2em;
	background-color: lightskyblue;
	color: black;
}


div.game-board div.button
{
	background-color: #EBBE45;
	cursor: pointer;
	display: inline-block;
	padding: 10px;
	border: 5px none #000000;
	width: 70%;	
	-height: 120px;
	line-height: 2em;
	color: black;
	margin: 5px;
	font-size: 2em;
	display: inline-table;
}

#logo
{
	width:50%
}

#taskTodo
{
	font-size: 2em;
}

#btnDraw 
{
	background-color: #F0DA4F;
}

#btnDraw.disabled
{
	background-color: dimgrey;
}

#btnPantomime
{
	background-color: #E59EC0;
}

#btnPantomime.disabled
{
	background-color: dimgrey;
}

#btnDescribe
{
	background-color: #56BAEB;
}

#btnDescribe.disabled
{
	background-color: dimgrey;
}
div.game-board div.button.disabled
{
  background-color: dimgrey;
  color: linen;
  opacity: 1;
}

div.button a {
  color: white;
  display: table-cell;
  vertical-align: middle;
}

div.button
{
	background-color: #cccccc;
	cursor: pointer;
	display: inline-block;
	padding: 10px;
	border: 1px solid #333333;
	text-align: center;
	color: #000000;
}

/* Do some css reset on selected elements */
p
{
    margin: 0;
}


#message
{
	font-size: 24;
	height: 24px;
}

#todo
{
	font-weight: bold;
}

/* Style applied to the spin button once a power has been selected */
.clickable
{
    cursor: pointer;
}

/* Other misc styles */
.margin_bottom
{
    margin-bottom: 5px;
}

#timerPanel
{
	position: absolute;
	font-size: 1.8em;
	right: 0.2em;
	top: 0.8em;
}

#timerPanel #maxSeconds
{
	font-size: 0.9em;
	width: 2em;
}

#timerPanel #seconds
{
	font-size: 0.9em;	
}

#timerPanel #doubleTime
{
	font-size: 0.8em;
	color: red;
}

#timerPanel #doubleTime.disabled
{
	font-size: 0.8em;
	color: gray;
}