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

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

.divwheelbg { width:980px; height:470px; background-color:transparent; background-image: url('../images/wheelbg.html'); background-repeat:no-repeat; padding:10px 20px 20px 20px; border:0px solid white; }
.divwheel {
	background-image: url('../images/wheel_back.html');
    background-position: center;
    background-repeat: no-repeat;
	width:450px; height:450px; border:0px solid white; /*margin-top:250px;*/
	position:relative; top:50%; left:50%; transform: translate(-50%, -50%);
}
.divcanvas { position:absolute; z-index:1; left:0; }
.divspinarr { 
	cursor:pointer; width:110px; height:133px; position:absolute; border:0px solid black; 
	z-index:2; margin:0 auto; left:0; right:0; top:148px; 
}

/* 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;
}

/* ------------ MOD ------------ */
.divWinAct {
    float: left; width: 150px; min-height: 250px; margin: 80px 0 0 25px; box-shadow: 0 0 10px #000000; padding: 10px;
    border-radius: 5px; background: rgba(255, 255, 255, 0.7); color: #000000; text-align: center;
}

.divWinBig {
    float: right; width: 280px; min-height: 250px; margin: 80px -100px 0 0; box-shadow: 0 0 10px #000000; padding: 10px;
    border-radius: 5px; background: rgba(255, 255, 255, 0.7); color: #000000; text-align: center;
}
.txtWinBigTitle { font-size:20px; color:#13ff2a; font-weight:bold; text-shadow:1px 1px #000000; }

.divWinBig > table { width:100%; border-collapse:separate; border-spacing:1px; margin:10px 0; }
.divWinBig > table > tbody > tr > th { padding:5px; background-color:#91c10e; color:#000000; font-weight:bold; font-size:12px; }
.divWinBig > table > tbody > tr > td { padding:5px; background-color:#e6e6e6; font-weight:bold; font-size:12px; color:#000000; }

.divNumSpin {
    clear: both; float: none; width: 80%; background-color: #91c10e; color:#ffffff; text-shadow:1px 1px 3px #5f2e79;
    padding: 7px 10px; border-radius: 3px; font-weight: bold; margin: 5px 5px 10px 5px; min-height: 20px; font-size:16px;
    box-shadow: inset 0 0 5px #000000;
}
.divWinAmt {  background-color:#91c10e; }

.ext { width: 80%; margin: 5px 5px 10px 5px; border-radius:4px; font-size:12px !important; }
.w90 { width:90%; } .w100 { width:100%; }

.sltbox { margin-bottom:10px; }
/* ------------ MOD ------------ */
/* ---------------------- BLINKER ---------------------- */
/* #f8c011; */
.blink_me {
    color: #f8c011 !important;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@-moz-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}
/* ---------------------- BLINKER ---------------------- */