/*
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.
	
*/

/* body
{
	font-family: verdana, arial, sans-serif;
} */

#wheel table {
	margin: 0 0 0 90px;
}

/* Sets the background image for the wheel */
td.the_wheel
{
	background-image: url(ss_pointer.png);
	background-position: 96% 23%;
	background-repeat: no-repeat;
}

/* td.the_wheel canvas
{
  max-width: 100%;
  max-height: 100%;
} */

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

div.power_controls
{
	margin-left: -100px;
	z-index: 999999;
}

/* 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 (max-width: 978px) {
  .box-modal {
    padding: 0;
  }
  #wheel table {
    margin: 0 0 0 0px;
  }

  td.the_wheel {
    background-position: 95% 38%;
    background-size: 55px auto;
  }

  td.the_wheel canvas{
    max-width: 100%;
    max-height: 100vh;
  }

  div.power_controls {
    margin-left: -101px;
    margin-top: -63px;
  }
  
}