/**
NOTE THAT THE MIT LICENSE APPLIES TO THE SOFTWARE CODE BELOW 
AND NOT TO ANY NON-SOFTWARE GENERATED IMAGES PRESENT ON THE WEBPAGES.
(i.e., .png, .gif, etc. images)
*/
/**
The MIT License (MIT)
[OSI Approved License]

The MIT License (MIT)

Copyright (c) <year> <copyright holders>

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/

/**
company:  Games Inc. (of Nevada)
author:  Stephan B. Feibish (modifications to codepen's suprsidr/Patrick Denny code)
date:  Jan 7, 2014
*/
/**
    Created on : Jan 10, 2014, 9:10:44 AM
    Author     : sbfeibish
@import url(http://fonts.googleapis.com/css?family=Droid+Sans:bold+Lobster);

1024x768
decrease size of wheels so can display at 100%
same for other relevant sizes

*/

.date {
    position:relative;
    margin:1em;
    font-size:2.5em;
    color:gold;
    opacity:0.6;
    font-family:"ar_berkleyregular", Arial, san serif;
}

body {
  background-color:black;
  font-family: Tahoma, sans-serif;
}

html {
	overflow:hidden;
}

/** 
  The background-color == the larges piece.
   -webkit-transform:scale(0.75,0.75);
  -moz-transform:scale(0.75,0.75);
   -ms-transform:scale(0.75,0.75);
    -o-transform:scale(0.75,0.75);
     transform:scale(0.75,0.75);
*/

.whole {
    /** 
    -webkit-transform:scale(0.5,0.5);
    -moz-transform:scale(0.5,0.5);
    -ms-transform:scale(0.5,0.5);
    -o-transform:scale(0.5,0.5);
     transform:scale(0.5,0.5);
    */
}

	
#whole {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	flex-wrap:nowrap;
}
	
#riseofthemachines {
	display:inline-flex;
	flex-direction:row;
	justify-content:center;
	flex-wrap:nowrap;
}

.machine {
    position:relative;
    display:inline-block;
    margin:10px;
}
h1, h2 {
  font-family: 'Arial',san-serif;
}

h1 {
  font-size:25px;    
}

h2 {
  font-size:22px;
}

h1, h2  {
	
    color: #D5AD6D; /*if no support for background-clip*/
	
    background: -webkit-linear-gradient(transparent, transparent),
        -webkit-linear-gradient(top, rgba(213,173,109,1) 0%, rgba(213,173,109,1) 26%, rgba(226,186,120,1) 35%, rgba(163,126,67,1) 45%, rgba(145,112,59,1) 61%, rgba(213,173,109,1) 100%);
    background: -o-linear-gradient(transparent, transparent);
	-webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
}

/* the circle */
.flapper {
    position:relative;
    display:inline-block;
    width:30px;
    height:30px;
    margin:0px;
    padding:0px;  
    background-color:grey;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    border-radius:50%;
    border-style:none;
    border-width:0px; 
  -moz-transform-origin:center center;
  -ms-transform-origin:center center;
  -o-transform-origin:center center;
  -webkit-transform-origin:center center;
  transform-origin:center center;
    left:185px;
    z-index: 10;
}

/* the southward pointing arrow */
.southarrow {  
    position:relative;
    display:inline-block;
    width: 0px;
    height: 0px;
    margin:0px;
    padding:0px;  
    border-style: solid;
    border-width: 40px 14px 0px 14px;
    border-color: grey transparent transparent transparent;
    -moz-transform-origin:center center;
    -ms-transform-origin:center center;
    -o-transform-origin:center center;
    -webkit-transform-origin:center center;
    transform-origin:center center;
    left:151px;
    top:30px;
    z-index: 10;
}

.backboard {
    position:relative;
    top: 20px;
    height: 400px;
    width: 400px;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    border-radius:50%;
    background-image:url(../../images/textures/wood/wood1.png);
  -webkit-box-shadow: inset 0px 0px 4px #000;
  -moz-box-shadow: inset 0px 0px 4px #000;
  box-shadow: inset 0px 0px 4px #000;
  
}

.pie-pan {
  position:absolute;
  top:-54px;
  left:-54px;
  -moz-transform-origin:center center;
  -ms-transform-origin:center center;
  -o-transform-origin:center center;
  -webkit-transform-origin:center center;
  transform-origin:center center;
  height: 380px;
  width: 380px;
  background-color: rgb(125, 39, 15);
  -moz-border-radius:50%;
  -webkit-border-radius:50%;
  border-radius:50%;
  overflow:hidden;
  margin: 4em;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.5);
  -webkit-box-shadow:  0 0 40px 0 rgba(0, 0, 0, 0.5);
  -moz-box-shadow:  0 0 40px 0 rgba(0, 0, 0, 0.5);
}
/* The inset shadow  -moz-box-shadow*/
.pie-pan::before {
  content: '';
  position:absolute;
  top: 0px;
  left: 0px;
  height: 380px;
  width: 380px;
  background-color: transparent;
  -moz-border-radius:50%;
  -webkit-border-radius:50%;
  border-radius:50%;  
  -webkit-box-shadow: inset 0px 0px 4px #000, inset 0 0 100px 20px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: inset 0px 0px 4px #000, inset 0 0 100px 20px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0px 0px 4px #000, inset 0 0 100px 20px rgba(0, 0, 0, 0.4);
  z-index: 10;
  
	/*to remove shade and make colors brighter*/
	display:none;
}
/* The Hole */
.pie-pan::after {
  content: attr(data-icon);
  height: 130px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -65px auto auto -65px;
  background-color: white;
  font-size: 100px;
  line-height: 130px;
  text-align: center;
  box-shadow: 0 0 100px 20px rgba(0, 0, 0, .2), inset 0 0 10px 0 rgba(0,0,0,.6);
  -moz-border-radius:50%;
  -webkit-border-radius:50%;
  border-radius:50%;  z-index: 10;
  font-family: 'droid_sansbold', Tahoma, sans-serif;
  font-weight: bold;
  opacity:1;
}

/* 
  make each pie piece a rectangle twice as high as it is wide.
  move the transform origin to the middle of the left side.
  Also ensure that overflow is set to hidden.
*/
.pie {
  position:absolute;
  width:190px;
  height:380px;
  overflow:hidden;
  left:190px;
  -moz-transform-origin:left center;
  -ms-transform-origin:left center;
  -o-transform-origin:left center;
  -webkit-transform-origin:left center;
  transform-origin:left center;
}
/*
  this is the actual visible part of the pie. 
  Give it the same dimensions as the regular piece.
  Use border radius make it a half circle.
  move transform origin to the middle of the right side.
  Push it out to the left of the containing box.
*/
.pie::before {
  content:"";
  position:absolute;
  width:190px;
  height:380px;
  left:-190px;
  border-radius:50% 0 0 50%;
  -moz-transform-origin:right center;
  -ms-transform-origin:right center;
  -o-transform-origin:right center;
  -webkit-transform-origin:right center;
  transform-origin:right center;
}

/*
  now rotate each piece based on their cumulative starting
  position
*/
.pie[data-start="18"] {
  -moz-transform: rotate(18deg); /* Firefox */
  -ms-transform: rotate(18deg); /* IE */
  -webkit-transform: rotate(18deg); /* Safari and Chrome */
  -o-transform: rotate(18deg); /* Opera */
  transform:rotate(18deg);
}
.pie[data-start="54"] {
  -moz-transform: rotate(54deg); /* Firefox */
  -ms-transform: rotate(54deg); /* IE */
  -webkit-transform: rotate(54deg); /* Safari and Chrome */
  -o-transform: rotate(54deg); /* Opera */
  transform:rotate(54deg);
}
.pie[data-start="90"] {
  -moz-transform: rotate(90deg); /* Firefox */
  -ms-transform: rotate(90deg); /* IE */
  -webkit-transform: rotate(90deg); /* Safari and Chrome */
  -o-transform: rotate(90deg); /* Opera */
  transform:rotate(90deg);
}
.pie[data-start="126"] {
  -moz-transform: rotate(126deg); /* Firefox */
  -ms-transform: rotate(126deg); /* IE */
  -webkit-transform: rotate(126deg); /* Safari and Chrome */
  -o-transform: rotate(126deg); /* Opera */
  transform:rotate(126deg);
}
.pie[data-start="162"] {
  -moz-transform: rotate(162deg); /* Firefox */
  -ms-transform: rotate(162deg); /* IE */
  -webkit-transform: rotate(162deg); /* Safari and Chrome */
  -o-transform: rotate(162deg); /* Opera */
  transform:rotate(162deg);
}
.pie[data-start="198"] {
  -moz-transform: rotate(198deg); /* Firefox */
  -ms-transform: rotate(198deg); /* IE */
  -webkit-transform: rotate(198deg); /* Safari and Chrome */
  -o-transform: rotate(198deg); /* Opera */
  transform:rotate(198deg);
}
.pie[data-start="234"] {
  -moz-transform: rotate(234deg); /* Firefox */
  -ms-transform: rotate(234deg); /* IE */
  -webkit-transform: rotate(234deg); /* Safari and Chrome */
  -o-transform: rotate(234deg); /* Opera */
  transform:rotate(234deg);
}
.pie[data-start="270"] {
  -moz-transform: rotate(270deg); /* Firefox */
  -ms-transform: rotate(270deg); /* IE */
  -webkit-transform: rotate(270deg); /* Safari and Chrome */
  -o-transform: rotate(270deg); /* Opera */
  transform:rotate(270deg);
}
.pie[data-start="306"] {
  -moz-transform: rotate(306deg); /* Firefox */
  -ms-transform: rotate(306deg); /* IE */
  -webkit-transform: rotate(306deg); /* Safari and Chrome */
  -o-transform: rotate(306deg); /* Opera */
  transform:rotate(306deg);
}
.pie[data-start="342"] {
  -moz-transform: rotate(342deg); /* Firefox */
  -ms-transform: rotate(342deg); /* IE */
  -webkit-transform: rotate(342deg); /* Safari and Chrome */
  -o-transform: rotate(342deg); /* Opera */
  transform:rotate(342deg);
}
/*
  and rotate the amount of the pie that's showing.

  NOTE: add an extra degree to all but the final piece, 
  to fill in unsightly gaps.
*/
.pie[data-value="36"]::BEFORE {
  -moz-transform: rotate(36deg); /* Firefox */
  -ms-transform: rotate(36deg); /* IE */
  -webkit-transform: rotate(36deg); /* Safari and Chrome */
  -o-transform: rotate(36deg); /* Opera */
  transform:rotate(36deg);
}

/** Begin Result */
@keyframes resultOne /* generic */
{
from { opacity:0;}
to { opacity:1;}
}

@-moz-keyframes resultOne /* Firefox */
{
from { opacity:0;}
to { opacity:1;}
}

@-webkit-keyframes resultOne /* Chrome, Safari */
{
from { opacity:0; }
to { opacity:1;}
}

@-o-keyframes resultOne /* Opera */
{
from { opacity:0; }
to { opacity:1;}
}

@-ms-keyframes resultOne /* Internet Explorer */
{
from { opacity:0; }
to { opacity:1;}
}

/* The Number */
.pie::after {
  content: attr(data-label);
  height: 30px;
  width: 30px;
  position: absolute;
  top: 22%;
  left: 52%;
  margin: -65px auto auto -65px;
  background-color: transparent;
  color:black;
  font-size: 2.5em;
  text-align: center;
  font-family: 'droid_sansbold', Tahoma, sans-serif;
  font-weight: bold;
  transform: rotate(18deg);
  -moz-transform: rotate(18deg);
  -ms-transform: rotate(18deg);
  -webkit-transform: rotate(18deg);
    z-index: 10;
}


/* Labels */
.numbers {
  height: 100px;
  width: 100px;
  position: absolute;
  color: black;
  top: 277px;
  left: 217px;
  margin: -65px auto auto -65px;
  background-color: transparent;
  font-size: 96px;
  line-height: 100px;
  text-align: center;
  vertical-align:middle;
  font-family: 'droid_sansbold', Tahoma, sans-serif;
  font-weight: bold;
  opacity:0;
  z-index: 100;
}

.casinoSign {
    height:150px;
    width:640px;
    display:block;
    background-size:640px 150px;
    background-image:url(../../images/Casino_Gold_And_Diamonds_640x150.jpg);
    background-repeat:no-repeat;
    border-width:0px;
    border-style:none;
}


/* 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;
-moz-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, opacity 0.3s 1s ease; /* Mouse enter: delay */
-webkit-transition: left 0.3s 1s ease, 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;
-moz-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-top:hover {
opacity: 1;
top: 0px;
overflow: auto;
transition: top 0.3s 1s ease, opacity 0.3s 1s ease; /* Mouse enter: delay */
-webkit-transition: left 0.3s 1s ease, 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 .st:hover {
color:aqua;
}


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






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


/** preferences panel (right panel) */

div#prefs-bar {
	color: gold;
	background-color:black;
	width: 23vw;
	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: -21vw;
	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, opacity 0.3s 0.3s ease; /* Mouse enter: delay */
 	-webkit-transition: left 0.3s 0.3s ease, opacity 0.3s 0.3s ease; /* Mouse enter: delay */
}

label:hover {
	color:aqua;
}


#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;
}

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 }	

#helpTxtWrapper {
	position:absolute;
	z-index:100;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    height:100%;
    width:100%;
    margin-top:6.5em;
    cursor:pointer;
}

#helpTxtBorder {
    height:0px;
    width:0px;
    background:black;
    /*
    -webkit-transition: height 0.3s ease-out, width 0.3s ease-out 0.0s;
    -moz-transition: height 0.3s ease-out, width 0.3s ease-out 0.0s;
    -ms-transition: height 0.3s ease-out, width 0.3s ease-out 0.0s;
    -o-transition: height 0.3s ease-out, width 0.3s ease-out 0.0s;
    transition: height 0.3s ease-out, width 0.3s ease-out 0.0s;
    */
}

#closeHelp {
	opacity:0;
	margin-right:3em;
	margin-top:2.4em;
	float:right;
}

#closeXHelp {
	display:inline;
	border-style:solid;
	border-width:1px;
	font-size:x-large;
	padding:0.2em 0.5em 0.2em 0.6em;
	margin-right:0.5em;	
}

#closeHelpTxt {
 	display:inline;
 	font-size:large;
}

#helpTxt {
	opacity:0;
	margin-left:3em;
	margin-top:2.1em;
	font-size:x-large;
}

.showHelpTxt {
    animation: showHelpTxt 1s ease 2.5s 1 normal forwards;
  -moz-animation: showHelpTxt 1s ease 2.5s 1 normal forwards;
  -webkit-animation: showHelpTxt 1s ease 2.5s 1 normal forwards;
  -o-animation: showHelpTxt 1s ease 2.5s 1 normal forwards;
  -ms-animation: showHelpTxt 1s ease 2.5s 1 normal forwards;	
}

@keyframes showHelpTxt /* generic */
{
from { opacity: 0; }
to { opacity: 1; }
}

@-webkit-keyframes showHelpTxt /* Chrome, Safari */
{
from { opacity: 0; }
to { opacity: 1; }
}

.openSezMe {
    animation: openSezMe 2s ease 0.5s 1 normal forwards;
  -moz-animation: openSezMe 2s ease 0.5s 1 normal forwards;
  -webkit-animation: openSezMe 2s ease 0.5s 1 normal forwards;
  -o-animation: openSezMe 2s ease 0.5s 1 normal forwards;
  -ms-animation: openSezMe 2s ease 0.5s 1 normal forwards;
}

@keyframes openSezMe /* generic */
{
from { height: 2px; width:2px; }
50% {height: 80%; width:2px; }
to {height: 80%; width:60%;}
}

@-moz-keyframes openSezMe /* Firefox */
{
from { height: 2px; width:2px; }
50% {height: 80%; width:2px; }
to {height: 80%; width:60%; }
}

@-webkit-keyframes openSezMe /* Chrome, Safari */
{
from { height: 2px; width:2px; }
50% {height: 80%; width:2px; }
to {height: 80%; width:60%;}
}

@-o-keyframes openSezMe /* Opera */
{
from { height: 2px; width:2px; }
50% {height: 80%; width:2px; }
to {height: 80%; width:60%; }
}

@-ms-keyframes openSezMe /* Internet Explorer */
{
from { height: 2px; width:2px; }
50% {height: 80%; width:2px; }
to {height: 80%; width:60%; }
}


.blueneon
	{
	color:#aefcfc;	
	text-shadow: 
	0 0 8px #03d7fc,
	0 0 8px #03d7fc,
	0 0 8px #03d7fc,
	0 0 60px #077ef5,
	0 0 60px #077ef5,
	0 0 60px #077ef5,
	0 0 60px #077ef5,
	0px 12px 10px #000000;
	border-color:#aefcfc;
	-webkit-box-shadow:	
	0 0 10px 2px rgba(3, 215, 252, 0.7) inset, 0 0 10px 2px rgba(3, 215, 252, 0.7),
	0 0 70px 2px rgba(7, 126, 245, 0.6) inset, 0 0 60px 2px rgba(7, 126, 245, 0.6),
   	0 6px 8px 2px rgba(0, 0, 0, 0.8);
	-moz-box-shadow: 	
	0 0 10px 2px rgba(3, 215, 252, 0.7) inset, 0 0 10px 2px rgba(3, 215, 252, 0.7),
	0 0 70px 2px rgba(7, 126, 245, 0.6) inset, 0 0 60px 2px rgba(7, 126, 245, 0.6),
   	0 6px 8px 2px rgba(0, 0, 0, 0.8);
	box-shadow: 
	0 0 10px 2px rgba(3, 215, 252, 0.7) inset, 0 0 10px 2px rgba(3, 215, 252, 0.7),
	0 0 70px 2px rgba(7, 126, 245, 0.6) inset, 0 0 60px 2px rgba(7, 126, 245, 0.6),
   	0 6px 8px 2px rgba(0, 0, 0, 0.8);
	}
	
	

@media screen 
	and (device-width: 1920px)
	and (device-height: 1080px) { 

	#riseofthemachines {
    	-webkit-transform:scale(1.1,1.1);
    	-moz-transform:scale(1.1,1.1);
    	-ms-transform:scale(1.1,1.1);
    	-o-transform:scale(1.1,1.1);
     	transform:scale(1.1,1.1);
	}

	.casinoSign {
		padding:0.5em;
	}

	.date {
		font-size:3em;
		padding-top:0.5em;
	}

	.footer {
		font-size:2em;
		padding:0em;
	}

	#helpTxtWrapper {
	    margin-top:0em;
	}

	/*
	div#st-bar {
		width:14%;
		left:-12%;
	}

	#prefs-bar legend {
		font-size:0.9em;
	}		
	
	div#prefs-bar {
		width:20%;
		right:-18%
	}
	*/
	
}

@media screen 
	and (device-width: 1600px)
	and (device-height: 1200px) { 
	
	.date {
		font-size:3em;
	}

	.footer {
		font-size:1.7em;
	}
	/*
	#st-bar {
		font-size:1.1em;
	}

	#prefs-bar legend {
		font-size:0.9em;
	}		
	
	#prefs-bar {
		font-size:1.7em;
	}
	*/
	div#helpTxtWrapper {
		margin-top:-5em;
	}
				
}

@media screen 
	and (device-width: 1680px)
	and (device-height: 1050px) { 
	/*only needed width tweak for state bar on Linux Firefox*/
	/*
	div#st-bar {
		font-size:1.1em;
		width:20%;
	}
	
	div#prefs-bar {
		font-size:2em;
	}	
	*/	
}

/*1600x900 just works without change, thank the laptop
chromium ok
firefox cuts of date at bottom at 100%
firefox smooth at 100%, steppy at 90%, when layout fits
*/



@media screen 
	and (device-width: 1600px)
	and (device-height: 900px) { 
	/*
	div#st-bar {
		font-size:1vw;
		width:18vw;
		left:-16vw;
	}
	
	div#prefs-bar {
		font-size:2vw;
		width:23vw;
		right:-21vw;
	}
	*/
}


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

	.date {
		font-size:3em;
	}

	.footer {
		font-size:1.7em;
	}
	/*
	#st-bar a:link {
		font-size:1.5em;
	}

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

@media screen 
	and (device-width: 1440px)
	and (device-height: 900px) {
	/*16x10*/ 

	
	div#helpTxtWrapper {
		margin-top:-5em;
	}
			
}

/*

not needed Chromium, but needed firefox
firefox shows well at 90%, but animation
becomes stepwise at 90%, smooth at 100%
so will let user go 90% with his own zoom
@media screen 
	and (device-width: 1440px)
	and (device-height: 900px) { 
}
*/

/*1280x768 Firefox Linux needs one of horizontal toolbars not to show or time of day gets cut off*/
/*1280x720 Firefox Linux date cutoff completely, one toolbar hidden shows date, two toolbars hidden shows most of time of day */
@media screen 
	and (device-width: 1366px)
	and (device-height: 768px), 
	screen
	and (device-width: 1360px)
	and (device-height: 768px),
	screen 
	and (device-width: 1280px)
	and (device-height: 800px),
	screen 
	and (device-width: 1280px)
	and (device-height: 768px),
	screen 
	and (device-width: 1280px)
	and (device-height: 720px)  {

	#whole {
    	-webkit-transform:scale(0.75,0.75);
    	-moz-transform:scale(0.75,0.75);
    	-ms-transform:scale(0.75,0.75);
    	-o-transform:scale(0.75,0.75);
     	transform:scale(0.75,0.75);
     	margin-top:-6.5em;
	}
	
	.date {
		font-size:2.25em;
		margin:0.7
	}

	.footer {
		font-size:1.7em;
	}
	/*
	#st-bar a:link {
		font-size:1.5em;
	}

	#prefs-bar legend {
		font-size:0.9em;
	}		
	
	#prefs-bar {
		font-size:2.5em;
	}
	*/
	/*
	.casinoSign {
    	height:112.5px;
    	width:480px;
    	display:block;
    	background-size:480px 112.5px;	
    }

	.backboard {
    	position:relative;
    	top: 15px;
    	height: 300px;
    	width: 300px;
	}

	.pie-pan {
	  /*top:-54px;
	  left:-54px;*//*
	  top:-40.5px;
	  left:-40.5px;
	  height: 285px;
	  width: 285px;
	  /*margin: 4em;*//*
	  margin: 3em;
	}

	.pie-pan::before {
	  height: 285px;
	  width: 285px;
	  /*to remove shade and make colors brighter*//*
	  display:none;
	}

	.pie-pan::after {
	  height: 97.5px;
	  width: 97.5px;
	  margin: -48.75px auto auto -48.75px;
	  font-size: 75px;
	  line-height: 97.5px;
	  box-shadow: 0 0 75px 15px rgba(0, 0, 0, .2), inset 0 0 7.5px 0 rgba(0,0,0,.6);
	}

	.pie {
	  width:142.5px;
	  height:285px;
	  left:142.5px;
	}

	.pie::before {
	  width:142.5px;
	  height:285px;
	  left:-142.5px;
	}

	/* The Number *//*
	.pie::after {
	  height: 22.5px;
	  width: 22.5px;
	  margin: -48.75px auto auto -48.75px;
	  font-size: 1.875em;
	}
	
	/* Labels *//*
	.numbers {
	  height: 75px;
	  width: 75px;
	  top: 207.75px;
	  left: 162.75px;
	  margin: -48.75px auto auto -48.75px;
	  font-size: 72px;
	  line-height: 75px;
	}

	.southarrow {  
	    border-width: 30px 10.5px 0px 10.5px;
	    left:113.25px;
	    top:22.5px;
	}

	/* the circle *//*
	.flapper {
	    width:22.5px;
	    height:22.5px;
	    left:138.75px;
	}
	*/
	
}


/*
@media screen 
	and (device-width: 1360px)
	and (device-height: 768px) { 
	
	.date {
		font-size:3em;
	}

	.footer {
		font-size:1.7em;
	}
	
	#st-bar a:link {
		font-size:1.5em;
	}

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

@media screen 
	and (device-width: 1280px)
	and (device-height: 1024px) { 
	/*firefox on linux layout perfect
	firefox flyins match with chromium size
	
	*/
	
	#riseofthemachines {
    	-webkit-transform:scale(0.75,0.75);
    	-moz-transform:scale(0.75,0.75);
    	-ms-transform:scale(0.75,0.75);
    	-o-transform:scale(0.75,0.75);
     	transform:scale(0.75,0.75);
	}

	.casinoSign {
		padding:0em;
	}

	.date {
		font-size:3em;
		padding-top:0em;
	}

	.footer {
		margin-top:-1em;
		font-size:2em;
		padding:0em;
	}
	/*
	div#prefs-bar legend {
		font-size:0.9em;
	}		
	
	div#st-bar {
		font-size:1vw;
		width:18vw;
		left:-16vw;
	}
	
	div#prefs-bar {
		font-size:2vw;
		width:26vw;
		right:-24vw;
	}	
	*/
	div#helpTxtWrapper {
		margin-top:-5em;
	}	
			
}

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

	#whole {
    	-webkit-transform:scale(0.75,0.75);
    	-moz-transform:scale(0.75,0.75);
    	-ms-transform:scale(0.75,0.75);
    	-o-transform:scale(0.75,0.75);
     	transform:scale(0.75,0.75);
    	margin-top:-5em; 	
	}	
	
	.date {
		font-size:3.5em;
	}

	.footer {
		font-size:1.7em;
	}
	/*
	#st-bar a:link {
		font-size:1.4em;
	}

	#prefs-bar legend {
		font-size:0.8em;
	}		
	
	#prefs-bar {
		font-size:2.5em;
	}
	*/
}

/*
1280 X 800
STATES AND PREFS MENUS DID NOT NEED TO BE SET

CHROMIUM SET CIRCLE, FIREFOX STILL SLIGHTLY PANCAKE
*/

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

	.date {
		font-size:2.8em;
		margin-bottom:0.1em;
	}
			
}

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

	.date {
		font-size:3em;
		margin-bottom:0.1em;
	}
			
}

@media screen 
	and (device-width: 1280px)
	and (device-height: 720px) { 
	
	.date {
		font-size:3em;
		margin-bottom:0.1em;
	}
	
}

@media screen 
	and (device-width: 1152px)
	and (device-height: 864px) { 

	#whole {
    	-webkit-transform:scale(0.75,0.75);
    	-moz-transform:scale(0.75,0.75);
    	-ms-transform:scale(0.75,0.75);
    	-o-transform:scale(0.75,0.75);
     	transform:scale(0.75,0.75);
     	margin-top:-6em;
	}
	
	.date {
		font-size:3em;
	}

	.footer {
		font-size:1.7em;
	}
	/*
	div#st-bar {
		font-size:1em;
		width:28%;
	}

	#prefs-bar legend {
		font-size:0.9em;
	}		
	
	div#prefs-bar {
		font-size:1.7em;
		width:34%;
	}
	*/	
}

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

	#whole {
    	-webkit-transform:scale(0.67,0.67);
    	-moz-transform:scale(0.67,0.67);
    	-ms-transform:scale(0.67,0.67);
    	-o-transform:scale(0.67,0.67);
     	transform:scale(0.67,0.67);
     	margin-top:-8.5em;
	}	
	
	.date {
		font-size:3em;
	}

	.footer {
		font-size:1.7em;
	}
	/*
	div#st-bar {
		font-size:0.8em;
		width:23%;
	}

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


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

	
	.date {
		font-size:3em;
	}

	.footer {
		font-size:1.7em;
	}
	/*
	#st-bar {
		font-size:0.8em;
	}

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

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


	
	.date {
		font-size:3em;
	}

	.footer {
		font-size:1.7em;
	}
	/*
	#st-bar {
		font-size:1.1em;
	}

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

@media screen 
	and (device-width: 1024px)
	and (device-height: 768px) { 
	
	#whole {
    	-webkit-transform:scale(0.67,0.67);
    	-moz-transform:scale(0.67,0.67);
    	-ms-transform:scale(0.67,0.67);
    	-o-transform:scale(0.67,0.67);
     	transform:scale(0.67,0.67);
     	margin-top:-8.5em;
	}
	/*
	#riseofthemachines, .casinoSign {
    	-webkit-transform:translateY(-12em);
    	-moz-transform:translateY(-12em);
    	-ms-transform:translateY(-12em);
    	-o-transform:translateY(-12em);
     	transform:translateY(-12em);
	}

	.date {
		font-size:3em;
    	-webkit-transform:translateY(-4em);
    	-moz-transform:translateY(-4em);
    	-ms-transform:translateY(-4em);
    	-o-transform:translateY(-4em);
     	transform:translateY(-4em);
	}

	.footer {
		font-size:1.7em;
    	-webkit-transform:translateY(-7em);
    	-moz-transform:translateY(-7em);
    	-ms-transform:translateY(-7em);
    	-o-transform:translateY(-7em);
     	transform:translateY(-7em);
	}
	*/
	
	.footer {
		margin-top:-1em;
	}
	/*
	div#st-bar {
		font-size:0.9em;
		width:18vw;
	}

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


@media screen 
	and (device-width: 1024px)
	and (device-height: 600px),
	screen 
	and (device-width: 1024px)
	and (device-height: 576px) { 
	
	#whole {
    	-webkit-transform:scale(0.5);
    	-moz-transform:scale(0.5);
    	-ms-transform:scale(0.5);
    	-o-transform:scale(0.5);
     	transform:scale(0.5);
     	margin-top:-12.2em;
	}
	
	.footer {
		margin-top:-1em;
	}
	/*
	div#st-bar {
		font-size:0.9em;
		width:28%;
	}

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


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

	
	.date {
		font-size:3em;
	}

	.footer {
		font-size:1.7em;
	}
	/*
	#st-bar {
		font-size:1.1em;
	}

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

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


	
	.date {
		font-size:3.5em;
	}

	.footer {
		font-size:2.3em;
	}
	/*
	#st-bar {
		font-size:1em;
	}

	#prefs-bar legend {
		font-size:1em;
	}		
	
	#prefs-bar {
		font-size:3em;
	}
	*/	
}


@media screen 
	and (device-width: 832px)
	and (device-height: 624px) { 
	
	.date {
		font-size:3em;
	}

	.footer {
		font-size:1.7em;
	}
	/*
	#st-bar {
		font-size:1.1em;
	}

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

@media screen 
	and (device-width: 800px)
	and (device-height: 600px) { 

	#whole {
    	-webkit-transform:scale(0.5,0.5);
    	-moz-transform:scale(0.5,0.5);
    	-ms-transform:scale(0.5,0.5);
    	-o-transform:scale(0.5,0.5);
     	transform:scale(0.5,0.5);
     	margin-top:-14em;
	}

	.date {
		font-size:3em;
	}
	/*
	div#st-bar {
		font-size:0.7em;
		width:20vw;
	}
	
	.footer {
		font-size:2em;
		margin-top:-1em;
	}

	#prefs-bar legend {
		font-size:0.9em;
	}		
	
	div#prefs-bar {
		font-size:1em;
		width:24vw;
	}		
	*/	
}


@media screen 
	and (device-width: 768px)
	and (device-height: 1024px) { 
	/*3x4*/
	
	#whole {
    	-webkit-transform:scale(0.5,0.5);
    	-moz-transform:scale(0.5,0.5);
    	-ms-transform:scale(0.5,0.5);
    	-o-transform:scale(0.5,0.5);
     	transform:scale(0.5,0.5);
     	margin-top:-14em;
	}

	.date {
		font-size:3.5em;
		white-space:nowrap;
	}

	a.btmlnks:link {
		font-size:1.5em;
		padding:0.5em;
	}
	/*
	div#st-bar {
		font-size:2vw;
		width:23vw;
		left:-20vw;
	}
	
	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) { 
	/*x*/
	
	#whole {
    	-webkit-transform:scale(0.5,0.5);
    	-moz-transform:scale(0.5,0.5);
    	-ms-transform:scale(0.5,0.5);
    	-o-transform:scale(0.5,0.5);
     	transform:scale(0.5,0.5);
     	margin-top:-14em;
	}

	.date {
		font-size:3.5em;
		white-space:nowrap;
	}

	a.btmlnks:link {
		font-size:1.5em;
		padding:0.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;
	}
	*/
	div#helpTxt {
		clear:both;
		margin-top:4em;
	}
		
}


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

	div#st-bar{
		-ms-overflow-style:none;
	}
	
}


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

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