/*
Description:
	Contains all the styles for the winning wheel page.
	
Verison History:
	2012-01-28
	- Created based off earlier version.
	
	2013-07-14
	- Changed font from arial to verdana so works nicely when example is displayed in site.
	- Added noCanvasMsg style so that the paragraph advising the user that their browser does not support canvas works correctly.
	
*/

.prizeWheel table {
	width:23em;
	margin:0 auto;
	margin-top:1em;
	padding-top:1.5em;
}

td.the_wheel {
	margin:0px auto;
	position:relative;
	line-height:0;
}
.arrow {
	position:absolute;
	left:50%;
	top:-1em;
	width:2em;
	margin-left:-1em;
	filter: drop-shadow(0px 4px 6px black);
}
.msgComplete {
	display:none;
	position: absolute;
    color: #fff;
    z-index: 5;
    text-align: center;
    bottom: 5em;
    left: 0;
    right: 0;
    background-color: #d1225b;
    width: 23em;
    max-width: 70vw;
    margin: auto;
    padding: 2em;
}

/* Sets the background image for the wheel */
.prizeWheel {
	position:relative;
}
#spin_button {
    position: absolute;
	top: 50%;
    left: 50%;
    width: 7em;
	margin-left:-3.5em;
	margin-top:-3.5em;
	/*opacity:.5;*/
}
#spin_button:hover {
	transform:scale(1.05);
	transition: all ease-in .15s;
    filter: drop-shadow(.25em .25em .25em rgba(0,0,0,.5));
}
#spin_button img {
	width:100%;
}



.the_canvas {
	width:100%;
	aspect-ratio: 1/1;
}

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

/*div.power_controls
{
	margin-right:70px;
}*/

div.html5_logo
{
	margin-left:70px;
}

/* Styles for the power selection controls */
table.power
{
	background-color: #cccccc;
	cursor: pointer;
	border:1px solid #333333;
}

table.power th
{
	background-color: white;
	cursor: default;
}

td.pw1
{
	background-color: #6fe8f0;
}

td.pw2
{
	background-color: #86ef6f;
}

td.pw3
{
	background-color: #ef6f6f;
}

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

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

p.noCanvasMsg
{
	color: white;
}


@media only screen and (max-width: 793px) {
	.prizeWheel table {
		/*width:25em;*/
	}
}
@media only screen and (max-width: 580px) {
	.prizeWheel table {
		/*width:25em;*/
	}
}