html {
	height:101%;
	padding-bottom:1px;
}

body {
	left: 0px;
	top: 0px;
	margin: 0; //
	position:absolute;
	left: 0px;
	right: 0px;
	background-color:black;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	outline: none;
	color: #fff;
	margin: 0;
	height: 100vh;
	-webkit-touch-callout: none;
	-webkit-user-select:none;
	-webkit-user-drag: none;
	width: 100%;	
	overflow: hidden;
	font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
	display:block;
}

iframe {
	z-index:21;

}

.forward  {
		translate3d(0px,0px,0px)
      -webkit-transform:translateZ(1px);
      -moz-transform:translateZ(1px);
      -o-transform:translateZ(1px);
      transform:translateZ(1px);
      position:fixed;
      position:sticky;
}


canvas {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	position: absolute;
	top: 0px;
	left: 0px;
	display:none;
	z-index:20;
}

#mainCanvas {
	width:100%;
	height:100%;
}

#gameContent {
	position: absolute;
	width:100%;
	height:100%;
}

#page {
	position: absolute;
	width:100%;
	height:101%;
	z-index: -5;
}

a:active,a:focus {
	outline: none;
	-webkit-touch-callout: none;
}

a img {
	border: none;
	-webkit-touch-callout: none;
}

img {
	-webkit-tap-highlight-color: rgba(255, 255, 0, 0);
	-webkit-touch-callout: none;
	-webkit-user-select:none;
	-webkit-user-drag: none;
}

#loading {
	position:absolute;
	display:none;
	top:0px;
	left:0px;
		width:100%;
	height:100%;
	
	z-index:35;
}



@media all and (orientation:portrait) {
#loadPort {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	z-index:30;
	display:none;
}

#loadLand {
	display:none;
	width:100%;
	height:100%;
}

#bar {
	//background-image:url('../images/en/1920x1080/portrait/loader.png');
	background-size: cover;
	width:46%;
	display:none;
	height:1.4%;
	position:absolute;
	top:88%;
	left:27%;
	z-index:21;
	color:#00ff00;
	
}
	
	
}

@media all and (orientation:landscape) {
#loadPort {
	display:none;
}

#loadLand {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	z-index:30;
	display:none;
}


#bar {
	background-image:url('../images/en/1920x1080/landscape/loader.png');
	background-size: cover;
	width:34.5%;
	height:2.2%;
	position:absolute;
	display:none;	
	top:81.9%;
	left:32.7%;
	z-index:21;
	color:#00ff00;
	
}
	
	
}


.main-content {
	height: 800px;
	width: 1000px;
	margin: 0 auto;
}

.overlay-bg {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	cursor: pointer;
	-webkit-user-select: text;
	z-index: 1000; /* high z-index */
	background: #000; /* fallback */
	background: rgba(0, 0, 0, 0.45);
}

.overlay-content {
	background: #fff;
	padding: 1%;
	width: 40%;
	position: relative;
	top: 15%;
	left: 50%;
	-webkit-user-select: text;
	font-size: 24px;
	color: black;
	margin: 0 0 0 -20%;
	/* add negative left margin for half the width to center the div */
	cursor: default;
	border-radius: 4px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
}



.close-btn {
	cursor: pointer;
	border: 1px solid #333;
	padding: 2% 5%;
	background: #a9e7f9; /* fallback */
	background: -moz-linear-gradient(top, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a9e7f9),
		color-stop(4%, #77d3ef), color-stop(100%, #05abe0));
	background: -webkit-linear-gradient(top, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);
	background: -o-linear-gradient(top, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);
	background: -ms-linear-gradient(top, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);
	background: linear-gradient(to bottom, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);
	border-radius: 4px;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.close-btn:hover {
	background: #05abe0;
}

/* media query for most mobile devices */
@media only screen and (min-width: 0px) and (max-width: 480px) {
	.overlay-content {
		width: 80%;
		margin: 5%;
		left: 0;
	}
}

.dboverlay-bg {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	cursor: pointer;
	-webkit-user-select: text;
	z-index: 300; /* high z-index */
	background: #000; /* fallback */
	background: rgba(0, 0, 0, 0.45);
}

.dboverlay-content {
	background: #fff;
	padding: 2%;
	width: 90%;
	height: 70%;
	position: relative;
	top: 5%;
	left: 5%;
	-webkit-user-select: text;
		font-size: 24px;
	color: black;
	
	font-size: 18px;
	cursor: default;
	border-radius: 4px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
}

.dbclose-btn {
	cursor: pointer;
	border: 1px solid #333;
	padding: 2% 5%;
	position: absolute;
	bottom: 1%;
	left: 1%;
	font-size: 24px;
	color: black;
	
	z-index:1001;
	background: #a9e7f9; /* fallback */
	background: -moz-linear-gradient(top, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a9e7f9),
		color-stop(4%, #77d3ef), color-stop(100%, #05abe0));
	background: -webkit-linear-gradient(top, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);
	background: -o-linear-gradient(top, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);
	background: -ms-linear-gradient(top, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);
	background: linear-gradient(to bottom, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);
	border-radius: 4px;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.dbclose-btn:hover {
	background: #05abe0;
}

/*#popupPanel {
	display:block;
}*/

.popup-bg {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	cursor: pointer;
	-webkit-user-select: text;
	z-index: 200; /* high z-index */
	background: #000; /* fallback */
	background: rgba(0, 0, 0, 0.60);
}
.popup-message {
	margin-top:5%;	
	width:inherit;
	height:inherit;
	font-size:32px;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	
}

.popup-small-message {
	margin-top:2%;
	width:inherit;
	height:inherit;
	font-size: 24px;
	z-index:201;
	width:80%;
	margin-right:auto;
	margin-left:auto;
	text-align:center;
	
}
.popupclose-btn {
	float:right;
	text-align:center;
	display:none;
	vertical-align:top;
	font-size: 400%;
	cursor: pointer;
	border: 1px solid #000000;
	color:white;
	z-index: 201; /* high z-index */
	background: #c00000; /* fallback */
	border-radius: 3px;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.popupclose-continue {
	position:absolute;
	bottom:1px;
	left:1px;
	
	display:none;
	text-align:center;
	vertical-align:bottom;
	font-size: 200%;
	cursor: pointer;
	border: 1px solid #000000;
	color:black;
	margin:1% 1% 1% 1%;
	z-index: 201; /* high z-index */
	background: #909090; /* fallback */
	border-radius: 3px;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}



.popupclose-cancel {
	position:absolute;
	bottom:0px;
	display:none;
	right:0px;
	text-align:center;
	vertical-align:bottom;
	font-size: 200%;
	cursor: pointer;
	border: 1px solid #000000;
	color:black;
	z-index: 201; /* high z-index */
	background: #909090; /* fallback */
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.popup-content {
	background: #b0ffff;
	width: 80%;
	height:35%;
	position: relative;
	top: 35%;
	-webkit-user-select: text;
	z-index: 200; /* high z-index */
	color: black;
	margin-left:auto;
	margin-right:auto;
	border-radius:5%;
	/* add negative left margin for half the width to center the div */
	cursor: default;
		border: 4px solid #800000;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.9);
}


.popup-wait {
	position:relative;
	display:none;
	-webkit-user-select: text;
	z-index: 201; /* high z-index */
	color: black;
	cursor: default;
	margin-left: auto;
    margin-right: auto;
    margin-top:1%;
    height:50%;
}




.popup-wait-canvas {	
	position:relative;
	display:none;
	-webkit-user-select: text;
	z-index: 201; /* high z-index */
	color: black;
	cursor: default;
	padding-left: 0;
    padding-right: 0;
   	margin-left: auto;
    margin-right: auto;
    margin-top:1%;
    height:50%;
  
}

.confirm-bg {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	cursor: pointer;
	-webkit-user-select: text;
	z-index: 200; /* high z-index */
	background: #000; /* fallback */
	background: rgba(0, 0, 0, 0.50);
}


@font-face {
    font-family:textBox;
    src: url(mega.otf);
}

@font-face {
    font-family:ClarendonBold;
}


canvas {
	-webkit-touch-callout: none;
	-webkit-user-select:none;
	-webkit-user-drag: none;
}

* {
	-webkit-touch-callout: none;
	-webkit-user-select:none;
	-webkit-user-drag: none;
}

.gameText {
	font-family:Arial;
	-webkit-touch-callout: none;
	-webkit-user-select:none;
	-webkit-user-drag: none;
}


.infobody {
	background-color:#000000;
	color: white;
	text-align: center;
	text-decoration: none;
	font-size:14px;
	width:100%;
	height:100%;
	font-family: "Verdana", Times New Roman, Serif;
}
 
.infocurrency {
	
}

table.center {
    margin-left:auto; 
    margin-right:auto;
    border-collapse: collapse;
	body {text-align:center;}
}
th, td {
padding: 15px;
}
img {
    vertical-align:middle;
} 










@font-face {
    font-family:bigPrizeFont;    
}

.prizeFont {
	font-family:textBox;
}


.confirm-content {
	background: #bff;
	padding: 1%;
	width: 70%;
	position: relative;
	top: 35%;
	left: 50%;
	height:20%;
	-webkit-user-select: text;
	font-size: 18px;
	text-align:center;
	color: black;
	margin: 0 0 0 -35%;
	/* add negative left margin for half the width to center the div */
	cursor: default;
	border-radius: 8px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.9);
}

.confirm-message {
	position: absolute;
	top: 10%;
	left: 50%;
	width: 70%;
	margin: 0 0 0 -35%;
}


.yes-btn {
	cursor: pointer;
	border: 1px solid #333;
	padding: 2% 5%;
	position: absolute;
	bottom: 5%;
	left: 5%;
	background: #a9e7f9; /* fallback */
	background: -moz-linear-gradient(top, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a9e7f9),
		color-stop(4%, #77d3ef), color-stop(100%, #05abe0));
	background: -webkit-linear-gradient(top, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);
	background: -o-linear-gradient(top, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);
	background: -ms-linear-gradient(top, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);
	background: linear-gradient(to bottom, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);
	border-radius: 4px;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.no-btn {
	cursor: pointer;
	border: 1px solid #333;
	padding: 2% 5%;
	position: absolute;
	bottom: 5%;
	right: 5%;
	background: #a9e7f9; /* fallback */
	background: -moz-linear-gradient(top, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a9e7f9),
		color-stop(4%, #77d3ef), color-stop(100%, #05abe0));
	background: -webkit-linear-gradient(top, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);
	background: -o-linear-gradient(top, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);
	background: -ms-linear-gradient(top, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);
	background: linear-gradient(to bottom, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);
	border-radius: 4px;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.dropDown {
	position:absolute;
	font-family:ClarendonBold;
	font-size: 2.4vw;
	padding-left:2%;
	vertical-align:bottom;
	width:20%;
	height:5.8%;
	background-size: 20% 100%;
	background-repeat: no-repeat;
	background-position: 100%;
	-webkit-appearance:none;
}

select option {
	position:absolute;
	left:5%;
	padding:2%;
}



.autoCheckBox {
	-webkit-appearance:none;
	position:absolute;
	left:68.5%;
	top:61%;
	width:4%;
	height:5.5%;
}

.dropDown1 {
	left:52.5%;
	top:34%;			
}

input[type=checkbox]:checked  { 
-webkit-appearance:none;
   background-size: 100% 100%;
	background-repeat: no-repeat;
	
}

input[type=checkbox]:not(:checked)  { 
	-webkit-appearance:none;
   background-size: 100% 100%;
	background-repeat: no-repeat;
	
}


.dropDown2 {
	left:52.5%;
	top:46.5%;			
}

.dropDown3 {
	left:52.5%;
	top:59.2%;			
}



.autoPlayPanel {
	display:block;
	opacity: 0.99;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position:absolute;
	left:0%;
	top:0%;
	width:100%;
	height:100%;
}

#autoPlayContainer {
	display:block;
	position:absolute;
	left:0%;
	top:-100%;
	width:100%;
	height:100%;
}

@-webkit-keyframes slidePanelInFrames {
    0% {
    	display:block;
    	position:absolute;
    	left:0%;
    	width:100%;
    	height:100%;
    	top: -100%;
    }
    100% {
    	display:block;
    	position:absolute;
    	left:0%;
    	width:100%;
    	height:100%;
    	top: 0%;
    }
}

@-moz-keyframes slidePanelInFramesMoz {
    0% {top: -100%;display:block:position:absolute;left:0%;width:100%;height:100%}
    100% {top:top: -50%;display:block:position:absolute;left:0%;width:100%;height:100%}
}


@-webkit-keyframes slideInfoInFrames {
    0% {
    	display:block;
    	left:-100%;
    }
    100% {
    	display:block;
    	left:0%;
    }
}

@-moz-keyframes slideInfoInMozFrames {
	0% {
    	display:block;
    	left:-100%;
    }
    100% {
    	display:block;
    	left:0%;
    }	
}

.hlInfo {
	z-index:200;display:none;position:fixed;left:0;width:84.44vw;height:100vh;
}


.slideInfoIn {
	z-index:90;position:fixed;left:0;width:84.44%;height:100%;
	display:block;
	-webkit-animation-name: slideInfoInFrames;
	-webkit-animation-duration:1s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-name: slideInfoInMozFrames 1s;
	-moz-animation-duration:1s;
	-moz-animation-iteration-count: 1;
	-moz-animation-timing-function: ease;
	-moz-animation-fill-mode: forwards;
	-moz-animation-timing-function: linear;	
}




.slidePanelIn {
	top: -100%;display:block;
	position:absolute;
	left:0%;
	width:100%;
	height:100%;
	-webkit-animation-name: slidePanelInFrames;
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-name: slidePanelInFramesMoz 2s;
	-moz-animation-name: slidePanelInFrames;
	-moz-animation-duration:3s;
	-moz-animation-iteration-count: 1;
	-moz-animation-timing-function: ease;
	-moz-animation-fill-mode: forwards;
	-moz-animation-timing-function: linear;
	
}

@-webkit-keyframes rotateRound {
    0% {
		-webkit-transform-origin:50% 50%;
		-webkit-transform:rotate(0deg);
    }
    100% {
		-webkit-transform-origin:50% 50%;
		-webkit-transform: rotate(-90deg);
    }
}

    
#orientationWarn {
	display:block;
	z-index:100;
	
}

.bad {
	z-index:101;
	display:block;
	position:absolute;left:0%;top:0%;text-align:center;vertical-align:middle;width:100%;height:100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size:35.8% 62%;
	background-image:url('../images/bad_orient.png');
	
	
	-webkit-transform-origin:50% 50%;
	-webkit-transform:rotate(0deg);
					
	-webkit-animation-name: rotateRound;	
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: forwards;
	
	
	
}

.good {
	z-index:102;
	position:absolute;left:0%;top:0%;text-align:center;vertical-align:middle;width:100%;height:100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size:62% 35.8%;
	background-image:url('../images/good_orient.png');
}