/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Oct 4, 2014, 8:58:07 AM
    Author     : sbfeibish
*/

html, body{
	width:100%;height:100%;
	margin:0px;padding:0px;
	background-color:#000000;
}

html {
	overflow:hidden;
}

body {
	background-color: black;
}

label:hover {
color:aqua;
}

.scene {
width:1024px;height:768px;
}

.small{
	font-size:small;
}

.normal{
	font-size:medium;
}

.large{
	font-size:large;
}

.tooltip {
	border-bottom: 1px dotted #000000; 
	color: #000000; 
	outline: none;
	cursor: help; 
	text-decoration: none;
	position: relative;
}
.tooltip span {
	margin-left: -999em;
	position: absolute;
}
.tooltip:hover span {
	border-radius: 5px 5px; 
	-webkit-border-radius: 5px; 
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); 
	-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); 
	font-family: Calibri, Tahoma, Geneva, sans-serif;
	position: absolute; 
	left: 1em; 
	top: 2em; 
	z-index: 99;
	margin-left: 0; 
	width: 250px;
}
.tooltip:hover img {
	border: 0; 
	margin: -10px 0 0 -55px;
	float: left; 
	position: absolute;
}
.tooltip:hover em {
	font-family: Candara, Tahoma, Geneva, sans-serif; 
	font-size: 1.2em; 
	font-weight: bold;
	display: block; 
	padding: 0.2em 0 0.6em 0;
}
.custom { 
	padding: 0.5em 0.8em 0.8em 2em; 
	}

.info { 
	background: #9FDAEE; 
	border: 1px solid #2BB0D7;	
}


.header{
	color:skyblue;
	font-size:14px;
}


#drawdate {
  color:white;
  width:144px;
  font-weight:normal;
  font-size:14px;
  font-family:'Times New Roman';
}

.tirage {
  color:white;
  width:144px;
  font-weight:normal;
  font-size:12px;
  font-family:'Times New Roman';
}


.spacer{
	width:10px;
}

.fudge {
	padding-bottom:10px;
}

.disclaimer{
	font-size:10px;
}

.rtm{
vertical-align:super;
font-size:.4em;
}
.tm, .sm{
vertical-align:super;
font-size:.4em;
}

/** 
-webkit-transition: top .5s linear 3s;
-moz-transition: top 3s ease-out .017s;
-ms-transition: top 3s ease-out .017s;
-o-transition: top 3s ease-out .017s;
transition: top .5s linear 3s;
*/

.wheel {
	display:inline-block;
	border-style:solid;
	border-color:silver;
	border-width:3px;
	border-radius:5px;
	margin-right:0.25em;
	float:left;
	position:relative;
    overflow:hidden;
}

.wheel.nbr{
	height:235px;
	width:64px;
	box-shadow: inset 1px 2px 3px #000;
	background-image:url(../images/patterns/WC-3Camel.gif);
	background-repeat:repeat-y;

}

.wheel.cards {
	height:235px;
	width:83px;
    background-color:#343434;
    /* background-image:url('images/patterns/goldfoil.png'); /* fallback */ 
    /* background-image:url('../images/patterns/WC-3Camel.gif'); /* fallback */
    background-repeat:repeat;

}

.wheel.mmc{
	height:235px;
	width:89px;
	box-shadow: inset 1px 2px 3px #000;
	background:white;
}

.payouts {
	display:inline-block;
	float:left;
	margin-left:0.5em;
}

/* state panel (left panel) */

div#st-bar {
	background-color: black;
	width: 17vw;
	padding-bottom: 0.25%;
	padding-top: 0.25%;
	padding-right: 1.5%;
	padding-left: 1.5%;
	white-space:nowrap;
	min-height: 100%;
	height: 100%;
	top: 0px;
	left: -15vw;
	z-index: 602;
	position: fixed;
	overflow: hidden;
	opacity: 0;
	border-width: 0px;
	-webkit-box-shadow: -3px 0px 5px 5px black;
	box-shadow: -2px 0px 5px 5px black;
	-webkit-transition: opacity 0.3s ease-out, left 0.3s ease-out 0.0s;
	-moz-transition: opacity 0.3s ease-out, left 0.3s ease-out 0.0s;
	-ms-transition: opacity 0.3s ease-out, left 0.3s ease-out 0.0s;
	-o-transition: opacity 0.3s ease-out, left 0.3s ease-out 0.0s;
	transition: opacity 0.3s ease-out, left 0.3s ease-out 0.0s;
}

div#st-bar:hover {
	opacity: 1;
	left: 0px;
	overflow: auto;
	transition: left 0.3s 1s ease; /* Mouse enter: delay */
	transition: opacity 0.3s 1s ease; /* Mouse enter: delay */
}

.st {
	color:gold;
	font-size:2vw;
	display: block;
	text-decoration:none;
}

.st:hover {
	color:aqua;
}

/* state panel (top panel) */

div#st-bar-top {
	text-align:center;
	background-color: black;
	height: 2.5vw;
	padding-right: 0.25%;
	padding-left: 0.25%;
	padding-bottom: 1.5%;
	padding-top: 1.5%;
	white-space:nowrap;
	min-width: 100%;
	width: 100%;
	left: 0px;
	top: -2.5vw;
	z-index: 602;
	position: fixed;
	overflow: hidden;
	opacity: 0;
	border-width: 0px;
	-webkit-box-shadow: -3px 0px 5px 5px black;
	box-shadow: -2px 0px 5px 5px black;
	-webkit-transition: opacity 0.3s ease-out, top 0.3s ease-out 0.0s;
	-moz-transition: opacity 0.3s ease-out, top 0.3s ease-out 0.0s;
	-ms-transition: opacity 0.3s ease-out, top 0.3s ease-out 0.0s;
	-o-transition: opacity 0.3s ease-out, top 0.3s ease-out 0.0s;
	transition: opacity 0.3s ease-out, top 0.3s ease-out 0.0s;
}

div#st-bar-top:hover {
	opacity: 1;
	top: 0px;
	overflow: hidden;
	transition: top 0.3s 1s ease; /* Mouse enter: delay */
	transition: opacity 0.3s 1s ease; /* Mouse enter: delay */
}

div#st-bar-top  .st {
	color:gold;
	display:inline-block;
	font-size:2vw;
	text-decoration:none;
	margin-left:1vw;
	margin-right:1vw;
}

div#st-bar-top ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: transparent;#333
}

div#st-bar-top li {
	display: inline-block;
	font-size:2vw;
}

div#st-bar-top li.a {
	text-align: center;
	text-decoration:none;
	padding: 14px 16px;
}

div#st-bar-top a.st:link,a.st:visited {
	color:gold;	
	text-decoration:none;
}

div#st-bar-top a.st:hover {
	color:aqua;
	text-decoration:none;
}

div#st-bar-top a.st:active {
	color:aqua;
	text-decoration:underline;
}






/* preferences panel (right panel) */

div#prefs-bar {
	color: gold;
	background-color: black;
	width: 22vw;
	padding-bottom: 0.25%;
	padding-top: 0.8%;
	padding-right: 1.5%;
	padding-left: 1.5%;
	white-space:nowrap;
	min-height: 100%;
	height: 100%;
	top: 0px;
	right: -20vw;
	z-index: 602;
	position: fixed;
	overflow: hidden;
	opacity: 0;
	border-width: 0px;
	-webkit-box-shadow: -3px 0px 5px 5px blue;
	box-shadow: 2px 0px 5px 5px blue;
	-webkit-transition: opacity 0.3s ease-out, right 0.3s ease-out 0.0s;
	-moz-transition: opacity 0.3s ease-out, right 0.3s ease-out 0.0s;
	-ms-transition: opacity 0.3s ease-out, right 0.3s ease-out 0.0s;
	-o-transition: opacity 0.3s ease-out, right 0.3s ease-out 0.0s;
	transition: opacity 0.3s ease-out, right 0.3s ease-out 0.0s;
}

div#prefs-bar:hover {
	opacity: 1;
	right: 0px;
	overflow: auto;
	transition: left 0.3s 0.3s ease; /* Mouse enter: delay */
	transition: opacity 0.3s 0.3s ease; /* Mouse enter: delay */
}

#helplink, #getHelp {
	color:gold;
	font-size: 2vw;
	text-align:left;
	text-decoration:none; 
}

#themeDiv {
	margin-top:1vw;
	padding-bottom:1em;
}

#gameDiv {
	margin-top:1vw;
}

#themeLbl, #gameLbl, #bkgdLbl {
	color:gold;
	font-size:1.8vw;
	display:block;
	margin-bottom:0.5vw;
}
.gamelink, .bkgdlink {
	color: gold;
	font-size: 1.9vw;
	display:block;
	margin-left:1em;
	text-decoration:none;
}

.gamelink:hover, #helplink:hover, #getHelp:hover  {
	color:aqua;
}

.gamelink:active, #helplink:active, #getHelp:active  {
	color:aqua;
}


div#pjneonsign {
 -webkit-transform:scale(0.75,0.75); /* Safari and Chrome */
  -moz-transform:scale(0.75,0.75); /* Firefox */
   -ms-transform:scale(0.75,0.75); /* IE 9 */
    -o-transform:scale(0.75,0.75); /* Opera */
     transform:scale(0.75,0.75);
}

#pjneonsign {
	 height:49.071px;
	 width:620px;
}

#wheelswrapper{
	 display:inline-block;
	 float:left;
}

#cost{
	width:412.5px;
	height:27px;
	margin-top:5px;
}

#asterisk {
	width:16.5px;
	height:11.25px;
	vertical-align:top;
	margin-top:5px;
}

.strip {
	display:inline-block;
	position:absolute;
	left:2px;
	margin:0px;
	border-style:none;
	border-width:0px;
}


.pndiv {
height:30%;
border-width:1px;
border-color:black;	
}

.mmccard{
/** color:black; */
margin: 4px auto 4px;
left:1px;
height:58px;
width:83px;
border-style:none;
border-width:0px;
border-radius:0%;
background-color:black;
background: -moz-radial-gradient(25% 25%, circle cover, rgba(153, 153, 153, 0.1) 0%, rgba(153, 153, 153, 0.8) 95%, rgba(153, 153, 153, 1) 98%, rgba(153, 153, 153, 0.8) 100%);
background: radial-gradient(circle at 25% 25%, rgba(153, 153, 153, 0.1) 0%, rgba(153, 153, 153, 0.8) 95%, rgba(153, 153, 153, 1) 98%, rgba(153, 153, 153, 0.8) 100%);
-webkit-box-shadow: 2px 2px 5px rgba(50, 50, 50, 0.75);
box-shadow:         2px 2px 5px rgba(50, 50, 50, 0.75);
font-family:'Comic Sans MS', Georgia;
font-size:14px;
font-weight:bold;
vertical-align:middle;
text-align:center;
-webkit-user-select: 	none;
 -moz-user-select: 		none;
	user-select: 		none;
}

.ball{
	margin: 4px auto 4px;
	display: block;
	position:relative;
	left:1px;
	height: 58px;
	width: 58px;
	border-style:none;
	border-width:0px;
	border-color:LightGray;
	border-radius: 50%;
	background-color: LightGray;
	box-shadow: inset -7px -7px 12px rgba(0,0,0,.5);
	background-image: -webkit-linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);
	background-image: -moz-linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);  
	background-image: -o-linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);
	background-image: -ms-linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);		
	font-family:'Comic Sans MS';
	font-size:36px;
	font-weight:bold;
	color:black; /** #charcoal#222222 chocolate */
	vertical-align:middle;
	text-align:center;
	-webkit-user-select: none;
	-moz-user-select:  none;
	user-select:  none;
}

.ball.slim {
	width:56px;
}

.ball.groen, .ball.green{
	border-color:#006400;
	background-color:#006400;
	color:#ffffff;}

.ball.rood{
	border-color:#f9091d;
	background-color:#f9091d;
	color:#ffffff;}

.ball.blauw{
	border-color:#3b4ba3;
	background-color:#3b4ba3;
	color:#ffffff;}

.ball.geel{
	border-color:#ffd700;
	background-color:#ffd700;
	color:#ffffff;}

.ball.paars{
	border-color:purple;
	background-color:purple;
	color:#ffffff;}

.ball.oranje{
	border-color:chocolate;
	background-color:chocolate;
	color:#ffffff;}


.payline {
	width:511px;/** 460 is wildcard 509 or 510 powerball so 509/7=72.7  510/7=72.857 73? */
	height:0px;
	border-style: solid;
	border-width: 1px 0px 0px 0px;
	border-color:orange;
	margin:0px;
	padding:0px;
	position:absolute;
	top:0px;
	left:0px;
	z-index:401;
}

.eastarrow {
	color:orange;
	display:inline-block;
	margin:0px;
	padding:0px;	
	position:relative;
	float:left;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 5px 0 5px 8.7px;
	border-color: transparent transparent transparent #ff8800;
	top:110px;
	left:1px;
}

.westarrow {
	color:orange;
	display:inline-block;
	margin:0px;
	padding:0px;	
	position:relative;
	float:left;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 5px 8.7px 5px 0;
	border-color: transparent #ff8800 transparent transparent;
	top:110px;
	left:-5px;
}

.match {
	color:fuchsia;
	font-size:16px;
	font-family:'Segoe UI','san-serif';
   opacity:0.4;
}



@media only screen and (min-width: 320px)and (max-width: 480px) and (orientation: landscape) {
    
    #signrow,#pjneonsign,#cost,#asterisk,#payouts { display:none; }
    #container { vertical-align:top; }
 
 }

a.btmlnks:link,a.btmlnks:visited {font-size:small;color:#4169E1;text-decoration:none;padding:5px}
a.btmlnks:hover,a.btmlnks:active {font-size:small;color:aqua;text-decoration:underline;padding:5px}
.footer:hover a { color:aqua }
 
/*
@media screen 
	and (device-width: 1920px)
	and (device-height: 1080px) { 
	
	div#st-bar {
		font-size:2vw;
		width:18vw;
		left:-16vw;
	}
	
	div#prefs-bar {
		font-size:2vw;
		width:36vw;
		right:-34vw;
	}
		
}

@media screen 
	and (device-width: 1600px)
	and (device-height: 900px) { 
	
	div#st-bar {
		font-size:2vw;
		width:18vw;
		left:-16vw;
	}
	
	div#prefs-bar {
		font-size:2vw;
		width:30vw;
		right:-28vw;
	}
		
}
 
 @media screen 
	and (device-width: 1680px)
	and (device-height: 1050px) { 

	#st-bar {
		font-size:1.5em;
	}
	
	#prefs-bar {
		font-size:1.5em;
	}
	
}

@media screen 
	and (device-width: 1400px)
	and (device-height: 1050px) { 
	

	#st-bar {
		font-size:1.5em;
	}
	
	#prefs-bar {
		font-size:1.5em;
	}
		
}

@media screen 
	and (device-width: 1440px)
	and (device-height: 900px) { 
}

@media screen 
	and (device-width: 1360px) 
	and (device-height: 768px), 
	screen
	and (device-width: 1366px) 
	and (device-height: 768px) { 
	
	#st-bar {
		font-size:1.4em;

	}
	
	#prefs-bar {
		font-size:1.5em;
	}
	
}

@media screen 
	and (device-width: 1366px)
	and (device-height: 768px)
	and (max-width:42.7em),
	screen 
	and (device-width: 1360px)
	and (device-height: 768px)
	and (max-width:42.5em) {
	
	div#st-bar {
		width:29%;

	}
	
	div#prefs-bar {
		width:19vw;
		right-17vw;
	}
	
}



@media screen 
	and (device-width: 1360px)
	and (device-height: 768px) { 

	#st-bar {
		font-size:1.4em;
	}
	
	#prefs-bar {
		font-size:1.5em;
	}
	
}


 @media screen 
	and (device-width: 1280px)
	and (device-height: 1024px) { 
	
	#st-bar {
		font-size:1.3em;
	}
	
	div#prefs-bar legend{
		font-size:0.8em;
	}
	
	#prefs-bar {
		font-size:1.4em;
	}
		
}

 @media screen 
	and (device-width: 1280px)
	and (device-height: 960px) { 
	
		
}

@media screen 
	and (device-width: 1152px)
	and (device-height: 864px) {
	
	#st-bar {
		font-size:1.3em;
	}
	
	div#prefs-bar legend{
		font-size:0.8em;
	}
	
	#prefs-bar {
		font-size:1.5em;
	}
	
}

@media screen 
	and (device-width: 1050px)
	and (device-height: 1400px) { 
	
	#st-bar {
		font-size:1.2em;
	}

	#prefs-bar legend {
		font-size:0.9em;
	}
	
	#prefs-bar {
		font-size:1.6em;
	}
		
}


@media screen 
	and (device-width: 1024px)
	and (device-height: 1280px) { 
	
	#st-bar {
		font-size:1.2em;
	}

	#prefs-bar legend {
		font-size:0.9em;
	}
	
	#prefs-bar {
		font-size:1.6em;
	}
		
}


@media screen 
	and (device-width: 1024px)
	and (device-height: 768px) { 
	
	#st-bar {
		font-size:1.2em;
	}

	#prefs-bar legend {
		font-size:0.9em;
	}
	
	#prefs-bar {
		font-size:1.6em;
	}		
			
}
*/

@media screen 
	and (device-width: 1024px)
	and (device-height: 600px),
	screen 
	and (device-width: 1024px)
	and (device-height: 576px) { 
	/*
	div#st-bar {
		width: 17vw;
		left: -15vw;
	}
		
	a.st:link {
		font-size:2vw;
	}

	div#prefs-bar {
		width:26vw;
		right:-24vw;
	}	
	
	div#prefs-bar span#themeLbl, div#prefs-bar span#gameLbl{
		font-size:1.4vw;
	}
	
	a.gamelink:link, a#helplink:link {
		font-size:1.9vw;
	}	
	*/
}

/*

@media screen 
	and (device-width: 960px)
	and (device-height: 1280px) { 
	
	#st-bar {
		font-size:1.2em;
	}

	#prefs-bar legend {
		font-size:0.9em;
	}
	
	#prefs-bar {
		font-size:1.6em;
	}
		
}

@media screen 
	and (device-width: 900px)
	and (device-height: 1600px) { 
	
	#st-bar {
		font-size:1.2em;
	}

	#prefs-bar legend {
		font-size:0.9em;
	}
	
	#prefs-bar {
		font-size:1.6em;
	}
		
}
*/

@media screen 
	and (device-width: 800px)
	and (device-height: 600px) { 
	/*
	div#st-bar {
		width:22vw;
		left:-20vw;
	}

	#st-bar a.st:link {
		font-size:2.5vw;
	}	
	
	div#prefs-bar {
		font-size:1.3em;
		width:26vw;
		right:-24vw;
	}		

	a.gamelink:link {
		font-size:2.5vw;
	}

	a#helplink:link {
		font-size:2.5vw;
	}
	*/	
}

@media screen 
	and (device-width: 768px)
	and (device-height: 1024px) {
	/*3x4*/ 
	
	#container {
		vertical-align:top;
		padding-top:5em;
	}
	/*
	div#st-bar {
		font-size:2vw;
		width:23vw;
		left:-21vw;
	}
	
	div#prefs-bar {
		width:34vw;
		right:-32vw;
	}

	div#prefs-bar legend {
		font-size:1.6vw;
	}

	#st-bar a.st:link {
		font-size:2.5vw;
	}

	a.gamelink:link {
		font-size:2.5vw;
	}

	a#helplink:link {
		font-size:2.8vw;
	}
	*/
}

@media screen 
	and (device-width: 720px)
	and (device-height: 1280px) {
	/*3x4*/ 
	
	#container {
		vertical-align:top;
		padding-top:5em;
	}
	/*
	div#st-bar {
		width:25vw;
		left:-23vw;
	}
	
	#st-bar a.st:link {
		font-size:3vw;
	}
	
	div#prefs-bar {
		width:34vw;
		right:-32vw;
	}

	div#prefs-bar div#gameDiv span#gameLbl, div#prefs-bar div#themeDiv  span#themeLbl {
		font-size:2.5vw;
	}

	a.gamelink:link {
		font-size:3vw;
	}

	div#prefs-bar a#getHelp:link {
		font-size:3vw;
	}
	*/
}



@media screen and (max-width: 40em) { 

	div#st-bar{
		-ms-overflow-style:none;
	}
	
	div#prefs-bar{
		-ms-overflow-style:none;
		padding-bottom:0.25em;
		margin-top:-0.25em;
	}
}