.onoffswitch {
    position: relative; width: 90px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
	.onoffswitch-inner {
	    width: 200%; margin-left: -100%;
	    -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
	    -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
	}

	.onoffswitch-inner:before, .onoffswitch-inner:after {
	    float: left; width: 50%; height: 20px; padding: 0; line-height: 20px;
	    font-size: 11px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
	    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
	}


.onoffswitch-inner:before {
    content: "HINTS ON";
    padding-left: 5px;
    background: rgba(0,0,0,.4); color: #FFFFFF;
    text-align: left;
}
.onoffswitch-inner:after {
    content: "HINTS OFF";
    padding-right: 5px;
     background: rgba(0,0,0,.2);
//    background-color: #000000;
    color: #000000;
    text-align: right;
}

.onoffswitch-switch {
    display: block; width: 9px; margin: 5.5px;
    background: #A1A1A1;
    position: absolute; top: 0; bottom: 0;
    right: 66px;
    border: 2px solid #999999; border-radius: 20px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
    background-color: #FFFFFF; 
}
.hider {
  visibility: visible;
}

.unhider {
  visibility: visible;
}

#ipadcontent {
 display: none;
}

.html { 
  width: 100%;
  height: 768px;
  background: url(images/clear.gif) center top no-repeat #005077; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow-x: hidden;
}

.level1back {
  width: 100%;
  height: 768px;
  background: url(images/background1-new.jpg) left top no-repeat #C7C975; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow-x: hidden;
}

.level2back {
  width: 100%;
  height: 768px;
  background: url(images/background2.jpg) left top no-repeat #FEC576; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow-x: hidden;
}

.level3back {
  width: 100%;
  height: 768px;
  background: url(images/background3-new.jpg) left top no-repeat #EAE3DD; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow-x: hidden;
}

.level4back {
  width: 100%;
  height: 768px;
  background: url(images/background4-med.jpg) left top no-repeat #AAB37C; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow-x: hidden;
}

.glow {
background-color:   #005077;
background-image:   -moz-radial-gradient(center, ellipse cover, #029CC9 0%, #005077 100%);
background-image:   -webkit-gradient(radial,center center, 0, center center, 500, from(#029CC9), to(#005077));
background-image:   -o-radial-gradient(center, ellipse cover, #029CC9 0%, #005077 100%);
background-image:   -ms-radial-gradient(center, ellipse cover, #029CC9 0%, #005077 100%);
background-image:   -webkit-radial-gradient(center, ellipse cover, #029CC9 0%, #005077 100%);
background-image:   radial-gradient(center, ellipse cover, #029CC9 0%, #005077 100%);
filter:             progid:DXImageTransform.Microsoft.gradient(startColorstr = '#029CC9', endColorstr = '#005077', GradientType = 0);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.maintitle {
 color: black;
    text-shadow:
    -1px -1px 3px #FFFFFF,
    1px -1px 3px #FFFFFF,
    -1px 1px 3px #FFFFFF,
    1px 1px 3px #FFFFFF;
 width: 100%;
 font-family: Georgia, serif;

 font-size: 44px;
 font-weight: 550;
 text-align: center;
 padding: 10px 0px 25px 5px;
 z-index: 1;
}

.canvasarea {
 clear: both;
 position: absolute;
 left: 0px; 
 top: 250px;
 z-index: 1;
 margin: 0px;
 padding: 0px;
 text-align: right;
}

/* filters for iPad BUT allows low res screen also */


body {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 font-family: Arial, Helvetica, sans-serif, sansserif;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-text-size-adjust: none;
}

.loadscreen{
	position: absolute;
    z-index:1010;
	top: 0px; 
    left: 0px;
    width: 100%;
    height: 1000px;
    text-align: center;
	color: #ffffff; 
}

.loading{
 background: url(images/pickets-trans.gif);  
 background-size: 250px 103px;
 background-position: 50% 92%;  
 background-repeat: no-repeat; 
	color: #ffffff; 
	width: 100%; 
	margin: auto;
    text-align: center;
height: 100%;
}

#overlay {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
//     height: 789px; 
     height: 100%; 
     text-align:center;
     z-index: 1500;
     background: rgba(0,0,0,.6);
}

.createdby {
text-align: right; 
font-family: Georgia, serif; 

font-size: 16px; 
font-style: normal; 
color: #FFFFFF;
padding: 0px;
}

.createdby a:link {
    text-decoration: underline;
    color: #FFFFFF;
}

.createdby a:visited {
    text-decoration: underline;
    color: #FFFFFF;
}

.createdby a:hover {
    text-decoration: underline;
    color: #FFFFFF;
}

.createdby a:active {
    text-decoration: underline;
    color: #FFFFFF;
}

#transholder {
	position: absolute;
	top: 0px;
    left: 0px;
    width: 100%;
//	height: 780px; 
	height: 100%; 
    z-index:1010;
    visibility: hidden;
}

.transclass {
	color:#FFF;
    text-shadow: black 0.1em 0.1em 0.2em;
    display: table;
    z-index:1200;
    width: 100%;
//	height: 780px; 
	height: 100%; 
    font-family: Georgia, serif; 

    font-size: 48px;
    line-height: 30px;
}

.democlass {
      visibility: hidden;
line-height: 210%; 
    color: #E0E0E0;
    text-shadow: black 0.1em 0.1em 0.2em;
    width: 100%;
    height: 0px; 
    overflow: visible; 
    text-align: center;
    font-family: Georgia, serif; 

    font-size: 48px;
}

.transclass p {
 display: table-cell;
 vertical-align: middle;
 text-align: center;
}
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.textstorage {
 position: absolute; 
 top: 0px; 
 left: 0px; 
 visibility: hidden;
}

.mycontainer {
 position: relative;
 top: 0; right 0; bottom: 0; left: 0;
 margin: auto;
height: 100%;
width: 920px;
 margin: auto auto auto auto;
}


.lefttop {
 border-style: none;

 float: left;
 width: 250px;
 height: 220px;

 padding: 40px 0px 0px 3px;
 margin: 0px 0px 0px 0px;
}
.centertop {
 display: inline-block;
 height: 220px;
 padding: 0px 0px 0px 0px;
 margin: 10px 0px 0px 0px;
}

.alertbox {
 border-radius: 10px;
 border: #000000;
 border-style: double;
 visibility: hidden; 
 min-height: 40px;
 line-height: 40px; 
 color: black; 
 background: #FFFFFF; 
 position: absolute; top: 20px; 
 left: 0; 
 right: 0; 
 width: 600px; 
 margin: 0 auto; 
 padding: 0;
}

.badge {
 min-height: 130px;
 width: 380px;

 padding: 5px 10px 5px 10px;
 margin: auto 0px auto 5px;
 border-radius: 25px;
 border: 0px solid rgba(000,000,000,0.0);
	-moz-box-shadow:
		3px 3px 12px rgba(000,000,000,0.5),
		inset 3px 3px 12px rgba(255,255,255,0.7);
	-webkit-box-shadow:
		3px 3px 12px rgba(000,000,000,0.5),
		inset 3px 3px 12px rgba(255,255,255,0.7);
	box-shadow:
		3px 3px 12px rgba(000,000,000,0.5),
		inset 3px 3px 12px rgba(255,255,255,0.7);

}


.gradlevel1 {
   background: -moz-linear-gradient(
		top,
		#ccff66,
		#718e39);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#ccff66),
		to(#718e39));
	background: linear-gradient(to bottom, #ccff66, #718e39);
    background: -o-linear-gradient(bottom left, #ccff66, #718e39);
}


.gradlevel2 {
background: -moz-linear-gradient(
		top,
		#FFFF99,
		#959557);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#FFFF99),
		to(#959557));
	background: linear-gradient(to bottom, #FFFF99, #959557);
    background: -o-linear-gradient(bottom left, #FFFF99, #959557);

}


.gradlevel3 {
background: -moz-linear-gradient(
		top,
		#DAC2FF,
		#9D5CFF);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#DAC2FF),
		to(#9D5CFF));
	background: linear-gradient(to bottom, #DAC2FF, #9D5CFF);
    background: -o-linear-gradient(bottom left, #DAC2FF, #9D5CFF);

}

.gradlevel4 {
background: -moz-linear-gradient(
		top,
		#BBBBFF,
		#5C5CE6);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#BBBBFF),
		to(#5C5CE6));
	background: linear-gradient(to bottom, #BBBBFF, #5C5CE6);
    background: -o-linear-gradient(bottom left, #BBBBFF, #5C5CE6);

}

.header {
    font-size: 14px;
    width: 380px;

 }

.righttop {
  border-style: none;

 float: right;
 width: 250px;
 height: 220px;

 padding: 40px 3px 0px 0px;
 margin: 0px 0px 0px 0px;
}
.centerbot {
  border-style: none;

 width: 100%;
 padding: 0px 0px 0px 0px;
 margin: 0px 0px 0px 0px;
}
.spacer {
  border-style: none;

 padding: 0px 0px 0px 0px;
 margin: 0px 0px 0px 0px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.icons {
 overflow: hidden;
 color: black;
 font-size: 10px;
 text-align: center;
 background: rgba(255,255,255,.5);
 padding: 3px;
 margin: 0px;
 cursor: pointer;
 -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.iconbar {
position: absolute;
right: 5px;
top: -40px;
z-index:5;
}

.nobox:focus, .nobox:active, .nobox.active, .nobox:focus:active {
  background-image: none;
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
 -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.mutebtnson {
background-image: url(images/sound-on-tiny.gif); 
background-size: 25px auto; 
background-position: top center; 
background-repeat: no-repeat; 
display: inline-block; 
text-align: center; 
line-height: 35px; 
height: 35px;
}

.mutebtnsoff {
background-image: url(images/sound-off-tiny-gray.gif); 
background-size: 25px auto; 
background-position: top center; 
background-repeat: no-repeat; 
display: inline-block; 
text-align: center; 
line-height: 35px; 
height: 35px;
}

.button {
    font-family: Droid Sans, Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 16px;
	background: white;
 -webkit-tap-highlight-color: rgba(0,0,0,0);
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
transform: translateZ(0);
  cursor: pointer;

}

.button:focus, .button:active, .button.active, .button:focus:active {
  background-image: none;
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
 -webkit-tap-highlight-color: rgba(0,0,0,0);
}

@-webkit-keyframes myPulse {
  from { background-color: black;  color: white; }
  50% { background-color: white;  color: black;}
  to { background-color: black;  color: white;}
}

@-moz-keyframes myPulse {
  from { background-color: black;  color: white; }
  50% { background-color: white;  color: black;}
  to { background-color: black;  color: white;}
}

@-o-keyframes myPulse {
  from { background-color: black;  color: white; }
  50% { background-color: white;  color: black;}
  to { background-color: black;  color: white;}
}
@keyframes myPulse {
  from { background-color: black;  color: white; }
  50% { background-color: white;  color: black;}
  to { background-color: black;  color: white;}
}



.pulse {

  -webkit-animation: myPulse 4s infinite;
  -moz-animation:  myPulse 4s infinite;
  -o-animation:  myPulse 4s infinite;
  animation:  myPulse 4s infinite;
}

.horsestandleft {
 position: relative;
 left: 300px;
 z-index: -1;
    -webkit-transition: all 4s linear;
     -moz-transition: all 4s linear;
     -o-transition: all 4s linear;
     transition: all 4s linear;
}

.horsestandright {
 position: relative;
 left: -300px;
 z-index: -1;
    -webkit-transition: all 4s linear;
     -moz-transition: all 4s linear;
     -o-transition: all 4s linear;
     transition: all 4s linear;
}
.easehold {
    -webkit-transition: all 5s ease-out;
     -moz-transition: all 5s ease-out;
     -o-transition: all 5s ease-out;
     transition: all 5s ease-out;
}

.arealabel {
 padding: 3px 8px 3px 8px;
    font-family: Droid Sans, Arial, Helvetica, sans-serif;
    border-radius: 8px;
 border: 0px solid rgba(000,000,000,0.0);
    font-size: 18px;
    opacity: 1.0;
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}


.shrink {
-webkit-transform:scale(.01,.01);
-moz-transform:scale(.01,.01);
-o-transform:scale(.01,.01);
-ms-transform:scale(.01,.01);
transform:scale(.01,.01);
 opacity: 0.0;
}


.scorelight {
 color: #000000;
 padding: 0px 0px 0px 0px;
 margin: 0px 0px 0px 0px;
 position: absolute; 
 top: 60px; 
 left: 570px;
 width: 80px; 
 height: 147px; 
 font-size: 21px;
 text-align: center;
 line-height: 80px;
 visibility: hidden;
 background: url(images/clear.gif); 
 background-size: 80px 147px; 
 background-position: 0px 0px;  
 background-repeat: no-repeat; 
}

.rosettes {
 color: #000000;
 padding: 0px 0px 0px 0px;
 margin: 0px 0px 0px 0px;
 position: absolute; 
 top:10px; 
 width: 50px; 
 height: 50px; 
 font-size: 10px;
 text-align: center;
 line-height: 50px; 
 visibility: visible;
 z-index: 2;
 }

.scoreposition {
 position: absolute;
 top: 92px; 
 left: 273px;
}

ul {
    list-style: none;
    padding: 0px;
	display:table; 
	margin:0 auto;
}

ul li:before
{
//    content: '\#';
    margin: 0px;    /* any design */
}

.vc {
 display: inline-block;
 vertical-align: middle;
 line-height: normal;
}

.do {
 font-weight: 600;
}

.glasspane {
            position: absolute;
            width: 200px; 
            min-height: 70px;
            line-height: 70px; 
            z-index: 4;
            top: -100px;
            padding: 10px 22px 10px 22px;
            background: rgba(200, 200, 200, 0.7);
            border: thin solid rgba(0, 0, 0, 0.6);
            color:#000000;
            font-family: Droid Sans, Arial, Helvetica, sans-serif;
            font-weight: bold;
            cursor: pointer;
            -webkit-box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
            -moz-box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
            box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
            text-align: center;
            visibility: visible;
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;

         }

.hintpane {
            position: absolute;
            width: 450px; 
            min-height: 40px;
            line-height: 20px; 
            z-index: 4;
            top: 300px; // 350px;
// bottom: 800px;
left:0; right:0;
            margin: 0 auto;
            padding: 10px 22px 10px 22px;
            background: rgba(200, 200, 200, 0.7);
            border: thin solid rgba(0, 0, 0, 0.6);
            color:#000000;
            font-family: Droid Sans, Arial, Helvetica, sans-serif;
            font-weight: bold;
            cursor: pointer;
            -webkit-box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
            -moz-box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
            box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
            text-align: center;
   //         visibility: hidden;
 //   -webkit-transition: 1s ease-in-out;
 //   -moz-transition: 1s ease-in-out;
 //   -o-transition: 1s ease-in-out;
 //   transition: 1s ease-in-out;

         }


.showmessage {
    -webkit-transform: translate(0,100px);
    -moz-transform: translate(0,100px);
    -o-transform: translate(0,100px);
    -ms-transform: translate(0,100px);
    transform: translate(0,100px);
}

.hidemessage {
    -webkit-transform: translate(0,-150px);
    -moz-transform: translate(0,-150px);
    -o-transform: translate(0,-150px);
    -ms-transform: translate(0,-150px);
    transform: translate(0,-150px);
}


/* styles for settings page */
.diva {
 background-color: #ffffff;
 text-align: left;
 font-size: small;
  border:1px solid #000000;
 padding: 10px;
 margin: 10px 0px 10px 10px;
}
.divb {
}


table, td, form {
 font-size: small;
 margin: 0;
 padding: 0;
}