div, img, ul, p, ol, li, table, tr, th, td, form, body {
	margin: 0;
	padding: 0;
	border: none;
}
table, div {
	width: 100%;
	position:relative
}
img {
	border: none;
	-o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
table {
	border-collapse: collapse;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	background-color: #ffffff;	
	color: #000000;	
	font-size: 16px;  
	font-size: 1.1vw;
}
a {
	color: #000000;
	text-decoration: none;
	border: none;
}
a:hover {
	text-decoration: underline;
}

/* new fonts */
@font-face
{
	font-family:bankgothic_mdbt;
	src: url(content/style/bankgothic-mdbt.woff); 
}
#vw_element {
	width: 1px;
	width: 50vw;
}
#outer_wrapper {
    width:70%;
	margin: auto;
	min-width:200px;
}

/* menu  */

#cmpltmnu {
	position: relative;
	z-index: 8;
	display: none;  
	font-family: Arial, Helvetica, sans-serif;
	color:#ffffff;
	background-color:#8abc00;
	-webkit-box-shadow: 0px 0px 15px rgba(92,117,136,0.7) inset;
	-moz-box-shadow: 0px 0px 15px rgba(92,117,136,0.7) inset;
	box-shadow: 0px 0px 15px rgba(92,117,136,0.7) inset;
	border-radius:5px;
	border-radius:0.5vw;
	padding:5px;
	padding:0.25vw;
	box-sizing:border-box;
}
#cmpltmnu .menu-game-info {
  width:47%;
  font-family: "bankgothic_mdbt",Arial, Helvetica, sans-serif;
  text-align:center;
  font-size:180%;
}
#mlvlnm {
color:#e0f59b;
}
#cmpltmnu .settings-cnt div {
   padding:5px; 
   padding:0.25vw;
   box-sizing:border-box;
   border:1px #7b8593 solid;
   border-radius:5px;
   border-radius:0.5vw;
   -webkit-box-shadow: 0px 0px 15px rgba(92,117,136,0.7) inset;
   -moz-box-shadow: 0px 0px 15px rgba(92,117,136,0.7) inset;
	box-shadow: 0px 0px 15px rgba(203,210,219,0.7) inset;
	transition: background-color 0.5s ease;
}
#cmpltmnu .settings-cnt img{
	width:100%;
}
#cmpltmnu .settings-cnt {
   min-width:40px;
}
#cmpltmnu .settings-cnt div:hover {
	background-color:#eeeeee;
	cursor:pointer;  
}
#ngmnu li {
	list-style: none;
	padding: 15px 15%;	
}
#ngmnu li p:hover {
	cursor: pointer;
	text-decoration:underline;
}
#ngmnu {	
	padding: 0;
	margin: 0;
	display: none;
	position:absolute;
	right:0;
	top:0;
	z-index:10;
	width:30%;
	min-width:100px;
	background: #e0f59b;
	-webkit-box-shadow: 0px 0px 15px #cccccc inset;
	-moz-box-shadow: 0px 0px 15px #cccccc inset;
    box-shadow: 0px 0px 15px #cccccc inset;
	font-size:120%;
}
#ngmnu label, #ngmnu input {
	cursor: pointer;
}

/*  game board */

#gmsrcnt {
	display: none; 
}
#mncnt {
    background-image: url("content/bk/chkbd.jpg");
	background-repeat:no-repeat;
	background-size:100%;
	width:98%;
	width:66vw;
	height:33vw;
    margin:0 auto; 	
	border:10px #e0e0e0 solid;	
	border-image:url(content/bk/rlbk.png) 10% 5% 10% 5% stretch;
	background-color:#000000;
	border-radius:15px;
}
#mncnt table {
   width:93%; 
   margin-top:10px;
   margin-top:1vw;
}
#mncnt table td {
  vertical-align:top;
}
#mncnt .game-cnt-card {
    width:16%;
}
#mncnt .game-cnt-spacer1 {
    width:5%;
}
.gameScreen-templateImage {
    width:18%;
	opacity:0;
	visibility:hidden;  
}
.game-cnt-table1 {
  position: absolute;
  top:0;
  left:3.5%;
}
.game-cnt-table2 {
  margin-left:3.5%;

}

.game-cnt-card  img {
    width:100%;
	height:auto;
	transform-style: preserve-3d;
}
.game-cnt-card div img:first-child {
	 cursor: pointer;
}
.activeImage_cnt {
	-webkit-animation: image_rotate 1s linear 0s 1 alternate;
	animation: image_rotate 1s linear 0s 1 alternate;
	-webkit-transform: scale(1,1); 
	transform: scale(1,1); 
}
@-webkit-keyframes image_rotate
{
0%  {-webkit-transform: rotateY(0); 
	transform: rotateY(0);
	}
25% {-webkit-transform: rotateY(0); 
	transform: rotateY(0);}	
50% {-webkit-transform: rotateY(90deg); 
	transform: rotateY(90deg) ; 
	}
75% {-webkit-transform: rotateY(0) ; 
	transform: rotateY(0);
	}
100% {-webkit-transform: rotateY(0) ; 
	transform: rotateY(0);
	}
}
@keyframes image_rotate
{
0%  {-webkit-transform: rotateY(0); 
	transform: rotateY(0);
	}
25% {-webkit-transform: rotateY(0); 
	transform: rotateY(0);}	
50% {-webkit-transform: rotateY(90deg); 
	transform: rotateY(90deg); 
	}
75% {-webkit-transform: rotateY(0); 
	transform: rotateY(0);
	}
100% {-webkit-transform: rotateY(0); 
	transform: rotateY(0);
	}
}

.scaledownImage_cnt {
	-webkit-animation: scaledown_cnt 0.5s linear 0s 1 alternate;
	animation: scaledown_cnt 0.5s linear 0s 1 alternate;
}
@-webkit-keyframes scaledown_cnt
{
0%  {-webkit-transform: rotate(0) scale(1,1); 
	transform: rotate(0) scale(1,1);}
25% {-webkit-transform: rotate(180deg) scale(0.5,0.5);; 
	transform: rotate(180deg) scale(0.5,0.5);}
50% {-webkit-transform: rotate(360deg) scale(0.2,0.2); 
	transform: rotate(360deg) scale(0.2,0.2);
	}
75% {-webkit-transform: rotate(0) scale(0.1,0.1); 
	transform: rotate(0) scale(0.1,0.1);
	}
100% {-webkit-transform: rotate(0) scale(0.01,0.01); 
	transform: rotate(0) scale(0.01,0.01);
	}
}
@keyframes scaledown_cnt
{
0%  {-webkit-transform: rotate(0) scale(1,1); 
	transform: rotate(0) scale(1,1);}
25% {-webkit-transform: rotate(-360deg) scale(0.5,0.5);; 
	transform: rotate(-360deg) scale(0.5,0.5);}
50% {-webkit-transform: rotate(360deg) scale(0.2,0.2); 
	transform: rotate(360deg) scale(0.2,0.2);
	}
75% {-webkit-transform: rotate(0) scale(0.1,0.1); 
	transform: rotate(0) scale(0.1,0.1);
	}
100% {-webkit-transform: rotate(0) scale(0.01,0.01); 
	transform: rotate(0) scale(0.01,0.01);
	}
}


.activeImage_cnt2 {
	-webkit-animation: image_rotate2 1s linear 0s 1 alternate;
	animation: image_rotate2 1s linear 0s 1 alternate;
}
@-webkit-keyframes image_rotate2
{
0%  {-webkit-transform: rotateY(0) ; 
	transform: rotateY(0);}
25% {-webkit-transform: rotateY(0);
	transform: rotateY(0);}
50% {-webkit-transform: rotateY(90deg); 
	transform: rotateY(90deg);
	}
75% {-webkit-transform: rotateY(0) ; 
	transform: rotateY(0);
	}
100% {-webkit-transform: rotateY(0); 
	transform: rotateY(0);
	}
}
@keyframes image_rotate2
{
0%  {-webkit-transform: rotateY(0); 
	transform: rotateY(0);}
25% {-webkit-transform: rotateY(0); 
	transform: rotateY(0);}
50% {-webkit-transform: rotateY(90deg); 
	transform: rotateY(90deg);
	}
75% {-webkit-transform: rotateY(0) ; 
	transform: rotateY(0);
	}
100% {-webkit-transform: rotateY(0); 
	transform: rotateY(0);
	}
}
.inactiveImage_cnt {
	animation-play-state: paused;
}
.inactiveImage_cnt2 {
	animation-play-state: paused;
}

/* announcements  */

#ancmnt {
	top:50px;
	top:5vw;
	margin:auto;
	width:40%;
	width: 25vw;
	min-width:200px;
}
#frntcnt, #cngrcnt, #mnucnt, #lvlbrd  {	
	color: #ffffff;
	z-index: 5;
	font-family: "bankgothic_mdbt",Arial, Helvetica, sans-serif;
	background-color: #8abc00;
    border:2px solid #8998ab;  
	-webkit-box-shadow: 0px 0px 15px rgba(92,117,136,0.7) inset;
	-moz-box-shadow: 0px 0px 15px rgba(92,117,136,0.7) inset;
	box-shadow: 0px 0px 15px rgba(92,117,136,0.7) inset; 	
}
#frntcnt, #cngrcnt {
    cursor: pointer;
}

/* front screen */

#fmarq1, #fmarq2 {
    width:15%;
}
#fmarq1 {
	-webkit-animation: screenImage_flip 3s linear 1.5s infinite reverse ;
	animation: screenImage_flip 3s linear 1.5s infinite reverse ;
}
#fmarq2 {
	-webkit-animation:  screenImage_flip 2s linear 1s infinite reverse;
	animation: screenImage_flip 2s linear 1s infinite reverse;
}
.frontScreen-templateImage {
	 width:16%;
	opacity:0;
	 visibility:hidden;	  
}
@-webkit-keyframes screenImage_flip
{
35% {-webkit-transform: rotateY(0) ; 
	transform: rotateY(0) ;}
50% {-webkit-transform: rotateY(90deg) ; 
	transform: rotateY(90deg);
	}
65% {-webkit-transform: rotateY(0) ; 
	transform: rotateY(0);
	}
}
@keyframes screenImage_flip
{
35% {-webkit-transform: rotateY(0) ; 
	transform: rotateY(0) ;}
50% {-webkit-transform: rotateY(90deg) ; 
	transform: rotateY(90deg);
	}
65% {-webkit-transform: rotateY(0) ; 
	transform: rotateY(0);
	}
}

/* menu page */

#mnucnt {
	background-color: #8abc00;
	display: none;   	
}
#mnucnt ul {
	padding:5%;
	box-sizing: border-box;	
}
#mnucnt li {
	list-style: none;
	padding: 15px 15%;
	font-size: 150%;
	transition: background-color 0.5s ease;
}
#mnucnt li:hover {
	background-color: #b1e218;
	cursor: pointer; 
}

/* level board  */
#lvlbrd td{
     vertical-align:top;
}
#lvlbrd table tr td:first-child {
   width:40%;
}
#lvlbrd table tr td:last-child {
   width:60%;
   padding-left:5%;
}
#lvlbrd p {
   text-align:center;
}
#lvlbrd {
	display:none;
	padding:5px;
	background-color: #e0f59b;
	color:#282828;
     border:2px solid #dce9ad;  
	-webkit-box-shadow: 0px 0px 15px #dce9ad inset;
	-moz-box-shadow: 0px 0px 15px #dce9ad inset;
	box-shadow: 0px 0px 15px #dce9ad inset;   
}
#lvlbrd p:last-child {
	color:#B22222;
}
#lvlbrd p:first-child {
	color:#008000;
}
#lvlbrd table tr td:last-child {
	color:#606060;
}

/* end game  */
#cngrcnt {
	background-image: url('content/imgs/firewrks.gif');
	background-repeat: no-repeat;
	background-color: #000000;
	display: none;	
}
#cngrcnt .title_logo {
    width:80%;
	margin-left:10%;
}
#cngrcnt .cngrcnt-templateImage {
    width:48%;
	opacity:0;
	visibility:hidden;
}
#wincrd {
  position:relative;
  transform-style: preserve-3d;
  perspective: 1000px;
  width:40%;
  margin:10px auto; 
  background-color: #000000;
}
#wincrd img {
    width:100%;  
    position:absolute;
	left:0;
	top:0;
  }
#wincrd img:first-child {
-webkit-transform:rotateY(0deg);
 transform: rotateY(0deg);
 -webkit-animation:image_flip 5s linear 0s infinite;
 animation: image_flip 5s linear 0s infinite;  
}
#wincrd img:last-child {
-webkit-transform:rotateY(90deg);
 transform: rotateY(90deg);
 -webkit-animation:image_flip 5s linear 2.5s infinite;   
 animation: image_flip 5s linear 2.5s infinite;   
} 
@-webkit-keyframes image_flip
{
0% {
-webkit-transform:rotateY(-90deg);
 transform: rotateY(-90deg);
}
25% {
-webkit-transform:rotateY(-90deg);
transform: rotateY(-90deg);
}
45%  {
-webkit-transform:rotateY(0deg);
  transform: rotateY(0deg);
}
55% {
-webkit-transform:rotateY(0deg);
transform: rotateY(0deg);
}
75% {
-webkit-transform:rotateY(90deg);
transform: rotateY(90deg);
}
100% {
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
}
}

@keyframes image_flip {
0% {
-webkit-transform:rotateY(-90deg);
 transform: rotateY(-90deg);
}
25% {
-webkit-transform:rotateY(-90deg);
transform: rotateY(-90deg);
}
45%  {
-webkit-transform:rotateY(0deg);
  transform: rotateY(0deg);
}
55% {
-webkit-transform:rotateY(0deg);
transform: rotateY(0deg);
}
75% {
-webkit-transform:rotateY(90deg);
transform: rotateY(90deg);
}
100% {
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
}
}

/*  about page */

#about_cnt {
	display: none;
	position: absolute;
	top:0;
	left:0;
}
#crntvsncnt {
	font-size: 100%;
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	z-index: 10; 
	width:90%;
	text-align:center;
	background: #e0f59b;
	-webkit-box-shadow: 0px 0px 15px #cccccc inset;
	-moz-box-shadow: 0px 0px 15px #cccccc inset;
    box-shadow: 0px 0px 15px #cccccc inset;
	border-radius:15px;
	margin-left:5%;
}
#crntvsncnt img {
    width:30%;
}
#crntvsncnt .about_info {
   width:96%;
    margin:0 2%; 
	text-align:left;
}
#crntvsncnt p {
  padding:10px 0;
  padding:1vw 0;
  font-size:90%;
}
#crntvsncnt input {
    margin:10px auto;
	padding:1vw auto;
}
#crntvsncnt input, #lvlbrd input, #hlpcnt input {
	border: 1px #000000 solid;
	border-color: #808080 #000000 #000000 #808080;  
	font-family: "bankgothic_mdbt",Arial, Helvetica, sans-serif;
	background: #abaecb;
	background: -webkit-linear-gradient(bottom, #989cc0 0%,#cbcee5 6%,#abaecb 52%,#878cb7 91%,#989cc0 100%);
	background: -o-linear-gradient(bottom, #989cc0 0%,#cbcee5 6%,#abaecb 52%,#878cb7 91%,#989cc0 100%);
	background: -moz-linear-gradient(bottom, #989cc0 0%,#cbcee5 6%,#abaecb 52%,#878cb7 91%,#989cc0 100%);
	background: linear-gradient(to top, #989cc0 0%,#cbcee5 6%,#abaecb 52%,#878cb7 91%,#989cc0 100%);  
	font-size:130%; 	
}
#lvlbrd input {
    font-size:150%;
}
#crntvsncnt input:hover, #lvlbrd input:hover, #hlpcnt input:hover {
	background: #d6d7e0;
	background: -webkit-linear-gradient(bottom, #dadcea 0%,#c9cce7 6%,#d6d7e0 52%,#c2c3ce 91%,#a0a3b8 100%);
	background: -o-linear-gradient(bottom, #dadcea 0%,#c9cce7 6%,#d6d7e0 52%,#c2c3ce 91%,#a0a3b8 100%);
	background: -moz-linear-gradient(bottom, #dadcea 0%,#c9cce7 6%,#d6d7e0 52%,#c2c3ce 91%,#a0a3b8 100%);
	background: linear-gradient(to top, #dadcea 0%,#c9cce7 6%,#d6d7e0 52%,#c2c3ce 91%,#a0a3b8 100%);	
	cursor: pointer;
}

/*  help  */
#hlpcnt {
	position:absolute;
	left:0;
	top:0;
	display:none; 
	background: #e0f59b;
	-webkit-box-shadow: 0px 0px 15px #cccccc inset;
	-moz-box-shadow: 0px 0px 15px #cccccc inset;
    box-shadow: 0px 0px 15px #cccccc inset;
	color:#000000;
	border-radius:15px;
	z-index: 10; 
    padding:5px 2%;
	box-sizing: border-box;
 }
#hlpcnt li {
	list-style: none;
	margin: 10px 0;
	font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
	font-size: 120%;
}
#hlpcnt li span {
 color:#008000;
}
#hlpcnt li span:hover {
	text-decoration: underline;
	cursor: pointer;
	
}
#hlpcnt li div {
	display: none;
	margin: 10px 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 90%;
	text-decoration: none;
}
#hlpcnt li div p {
     margin: 8px 0; 
}

/*audio  */
#audio_cnt {
	position: absolute;
	left: 0;
	top: -300px;
}

/* connection status  */

.status-window-mask {
	background-color: #483429;
	background-color: rgba(72,52,41,0.5);  
	width:100%;
	height:100%;
	position:fixed;
	left:0;
	top:0;
	z-index:1500;
}
.status-warning-wrapper {
   position:absolute;
}
.status-warning-wrapper div{
     max-width:70%;
	 margin:auto;
	 padding:1em 2em;
	 background-color:#ffffff;
	 border:1px #cccccc solid;
	z-index:1600;
	text-align:center;
	position:relative;
	top:10em;
}
.status-warning-wrapper div p:last-child {
   margin:1em auto 0.5em auto;
   	background-color: #c7d0d5;
	background: -webkit-linear-gradient(#c7d0d5, #e5ecef, #c7d0d5);
	background: -o-linear-gradient(#c7d0d5, #e5ecef, #c7d0d5);
	background: -moz-linear-gradient(#c7d0d5, #e5ecef, #c7d0d5);
	background: linear-gradient(#c7d0d5 , #e5ecef, #c7d0d5 );  
	color:#000000;
	border-top:2px #E8E8E8 solid;
	border-left:2px #E8E8E8 solid;
	border-bottom:2px #A0A0A0  solid;
	border-right:2px #A0A0A0  solid;
	-webkit-box-shadow: 0px 0px 8px rgba(176,189,198,0.5) inset;
	-moz-box-shadow: 0px 0px 8px rgba(176,189,198,0.5) inset;
	box-shadow: 0px 0px 8px rgba(176,189,198,0.5) inset;
   	cursor:default;
	padding-left:5px;
	padding-right:5px;
	min-width:40px;
	text-align:center;
	width:8em;
}
.status-warning-wrapper div p:last-child:hover {
    background-color:#ecf0f2;
	background: -webkit-linear-gradient(#ecf0f2, #ecf0f2, #ecf0f2);
	background: -o-linear-gradient(#ecf0f2, #ecf0f2, #ecf0f2);
	background: -moz-linear-gradient(#ecf0f2, #ecf0f2, #ecf0f2);
	background: linear-gradient(#ecf0f2, #ecf0f2, #ecf0f2); 
	cursor:pointer;
}


/*  query styles   */

@media only screen and (max-width: 1400px) {
body {
	font-size: 16px;  
}
#outer_wrapper {
	width: 70%;	
}
#mncnt {
	width:66vw;
	height:33vw;
}
#cmpltmnu .menu-game-info  {
   font-size:150%;
}
} 
@media only screen and (max-width: 1000px) {
#outer_wrapper {
	width: 80%;
}
#mncnt {
	width:76vw;
	height:38vw;
}
 #ancmnt {
  width:50%;
 width:40vw; 
}
}
@media only screen and (max-width: 800px), (max-width: 900px) and (min-resolution: 115dpi), (max-width: 1025px) and (min-resolution: 128dpi), (max-width: 1150px) and (min-resolution: 146dpi), (max-width: 1300px) and (min-resolution: 165dpi), (max-width: 1500px) and (min-resolution: 185dpi), (min-resolution: 215dpi) {
#outer_wrapper {
	width: 100%;
}
#mncnt {
   	width:96vw;
	height:48vw;
}
 #cmpltmnu .menu-game-info  {
   font-size:120%;
}
 #ngmnu {
   font-size:100%;
 }
 #ancmnt {
  width:65%;
  top:5px;
 }
 #mnucnt li  {
   font-size:120%;
 }
#lvlbrd {
  font-size:80%;
}
#crntvsncnt img {
    width:50%;
}
#ngmnu {	
  width:40%;

}
} 
/*  small screen */
@media (max-width: 500px), (max-width: 600px) and (min-resolution: 100dpi), (max-width: 700px) and (min-resolution: 120dpi), (max-width: 850px) and (min-resolution: 140dpi),(max-width: 1000px) and (min-resolution: 170dpi), (max-width: 1200px) and (min-resolution: 200dpi) {
#ngmnu {	
  width:60%;
}

}
@media only screen and (max-width: 150px) {
body {
	font-size: 12px;	
}
}