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

body
{
    font-family: arial;
}

/* Sets the background image for the wheel */
td.the_wheel
{
    background-image: url(./wheel_back.png);
    background-position: center;
    background-repeat: none;
}

/* 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;
}
/*.jackpot > .row > .col-md-6 > #spin_button {
	position: absolute;
	top: 37%;
	left: 31%;
	width: 120px;
	height: 120px;
}*/
.jackpot > .row > .col-md-6 > canvas {
	width: 90%;
}

@media (max-width:300px){
	.jackpot > .row > .col-md-6 > #spin_button {
	position: absolute;
	top: 42%;
	left: 31%;
	width: 75px;
	height: 75px;
 }
 #prizePointer {
	 width: 35px;
	 margin-left: 38%;
 }
}
@media (min-width:300px) and (max-width:400px){
	.jackpot > .row > .col-md-6 > #spin_button {
	position: absolute;
	top: 44%;
	left: 34%;
	width: 75px;
	height: 75px;
 }	
 #prizePointer {
	 width: 35px;
	 margin-left: 40%;
 }
}
@media (min-width:400px) and (max-width:500px){
	.jackpot > .row > .col-md-6 > #spin_button {
	position: absolute;
	top: 43%;
	left: 36%;
	width: 75px;
	height: 90px;
 }	
 #prizePointer {
	 width: 35px;
	 margin-left: 38%;
 }
}
@media (min-width:500px) and (max-width:600px){
	.jackpot > .row > .col-md-6 > #spin_button {
	position: absolute;
	top: 44%;
	left: 36%;
	width: 90px;
	height: 90px;
 }	
	#prizePointer {
	 width: 35px;
	 margin-left: 42%;
 }
}
@media (min-width:600px) and (max-width:650px){
	.jackpot > .row > .col-md-6 > #spin_button {
	position: absolute;
	top: 43%;
	left: 35%;
	width: 120px;
	height: 120px;
 }	
 #prizePointer {
	 width: 35px;
	 margin-left: 42%;
 }
}
@media (min-width:650px) and (max-width:768px){
	.jackpot > .row > .col-md-6 > #spin_button {
	position: absolute;
	top: 43%;
	left: 36%;
	width: 120px;
	height: 120px;
 }
 #prizePointer {
	 width: 35px;
	 margin-left: 43%;
 }
}
@media (min-width:768px) and (max-width:850px){
	.jackpot > .row > .col-md-6 > #spin_button {
	position: absolute;
	top: 44%;
	left: 37%;
	width: 120px;
	height: 120px;
 }	
 #prizePointer {
	 width: 35px;
	 margin-left: 43%;
 }
}
@media (min-width:850px) and (max-width:992px){
	.jackpot > .row > .col-md-6 > #spin_button {
	position: absolute;
	top: 45%;
	left: 38%;
	width: 120px;
	height: 120px;
 }
 #prizePointer {
	 width: 35px;
	 margin-left: 43%;
 }
}
@media (min-width:992px) and (max-width:1000px){
	.jackpot > .row > .col-md-6 > #spin_button {
	position: absolute;
	top: 39%;
	left: 30%;
	width: 100px;
	height: 100px;
 }
 #prizePointer {
	 width: 35px;
	 margin-left: 41%;
 }
}
@media (min-width:1000px) and (max-width:1200px){
	.jackpot > .row > .col-md-6 > #spin_button {
	position: absolute;
	top: 39%;
	left: 31%;
	width: 120px;
	height: 120px;
 }	
 #prizePointer {
	 width: 35px;
	 margin-left: 41%;
 }
}
@media (min-width:1200px) and (max-width:1350px){
	.jackpot > .row > .col-md-6 > #spin_button {
	position: absolute;
	top: 41%;
	left: 33%;
	width: 120px;
	height: 120px;
 }
 #prizePointer {
	 width: 35px;
	 margin-left: 42%;
 }
}
@media (min-width:1350px){
	.jackpot > .row > .col-md-6 > #spin_button {
	position: absolute;
	top: 41%;
	left: 34%;
	width: 120px;
	height: 120px;
 }	
 #prizePointer {
	 width: 35px;
	 margin-left: 42%;
 }	
}
.jackpot > .row > .col-md-6 > #spin_button:hover {
	cursor: pointer;
}