﻿div, img, ul, p, ol, li, table, tr, th, td, form, body {
	margin: 0;
	padding: 0;
	border: none;
	position:relative;
}
table, div {
	width: 100%;
}
img {
	border: none;
}
table {
	border-collapse: collapse;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	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;
}
img {
	-o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;  
}
/* new fonts */
@font-face
{
font-family:bankgothic_mdbt;
src: url(content/style/bankgothic-mdbt.woff);
}
#vw_element {
	width: 1px;
	width: 50vw; 
}
#outer_container {
    width:70%;
	margin: auto;
	min-width:200px;
}

/*  top menu  */

#cmpltmnu {
	background-color: #B0C4DE;
	position: relative;
	display: none; 
	font-family: Arial, Helvetica, sans-serif;
	color:#ffffff;
	background-color:#000066;
	-webkit-box-shadow: 0px 0px 15px rgba(218,218,230,0.7) inset;
	-moz-box-shadow: 0px 0px 15px rgba(218,218,230,0.7) inset;
	box-shadow: 0px 0px 30px rgba(218,218,230,0.7) inset;
	border-radius:5px;
	border-radius:0.5vw;
	padding:5px;
	padding:0.25vw;
	box-sizing:border-box;
	margin:0 auto;
   	z-index: 80;
}



#cmpltmnu .menu-game-info {
  width:31.5%;
  font-family: "bankgothic_mdbt",Arial, Helvetica, sans-serif;
  text-align:center;
  font-size:180%;
}
#cmpltmnu .settings-cnt div {
   padding:5px; 
   padding:0.25vw;
   box-sizing:border-box;
   border:1px #9292b6 solid;
   border-radius:5px;
   border-radius:0.5vw;
   -webkit-box-shadow: 0px 0px 15px rgba(218,218,230,0.7) inset;
   -moz-box-shadow: 0px 0px 15px rgba(218,218,230,0.7) inset;
	box-shadow: 0px 0px 15px rgba(218,218,230,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:#a1a2c7;
	cursor:pointer;  
}
#ngmnu {
  color:#000000;
}
#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;
	width:20%;
	min-width:200px;
	background: #F0F0F0;
	background: -webkit-radial-gradient(50% 0, circle, #dcdcdc , #fcfcfc);
	background: -o-radial-gradient(50% 0, circle, #dcdcdc , #fcfcfc);
	background: -moz-radial-gradient(50% 0, circle, #dcdcdc , #fcfcfc);
	background:radial-gradient(circle at 50% 0, #dcdcdc , #fcfcfc);
    box-shadow: 0px 0px 15px #cccccc inset;
	font-size:120%;
	z-index:100;
}
#ngmnu label, #ngmnu input {
	cursor: pointer;
}

/*  buttons */


#crntvsncnt input, #lvlbrd input, #hlpcnt input, #gmovrcnt 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, #gmovrcnt 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;
}

/* announcements  */
#ancmnt {
	margin:0 auto;
	margin-top:10px;
	width:40%;
	width: 25vw;
	min-width:200px;
}

#frntcnt, #cngrcnt, #mnucnt {
	color: #ffffff;
	cursor: pointer;
	position: absolute;
	left: 0px;
	top: 0px;
	background-color: #354262;
	background: -webkit-radial-gradient(center bottom, rgba(160, 201, 215, 0.8) 0%, rgba(160, 201, 215, 0) 70%), -webkit-linear-gradient(top, black 0%,#282F44 6%,#2C3551 52%,#354262 91%,#050C54 100%);
	background: -o-radial-gradient(center bottom, rgba(160, 201, 215, 0.8) 0%, rgba(160, 201, 215, 0) 70%), -o-linear-gradient(top, black 0%,#282F44 6%,#2C3551 52%,#354262 91%,#050C54 100%);
	background: -moz-radial-gradient(center bottom, rgba(160, 201, 215, 0.8) 0%, rgba(160, 201, 215, 0) 70%), -moz-linear-gradient(top, black 0%,#282F44 6%,#2C3551 52%,#354262 91%,#050C54 100%);
	background: radial-gradient(at center bottom, rgba(160, 201, 215, 0.8) 0%, rgba(160, 201, 215, 0) 70%), linear-gradient(to top, black 0%,#282F44 6%,#2C3551 52%,#354262 91%,#050C54 100%);
    border:2px solid #354262;
  	-webkit-box-shadow: 0px 0px 15px rgba(33,62,83,0.7) inset;
	-moz-box-shadow: 0px 0px 15px rgba(33,62,83,0.7) inset;
	box-shadow: 0px 0px 15px rgba(33,62,83,0.7) inset;	
	font-family: "bankgothic_mdbt",Arial, Helvetica, sans-serif;
	z-index: 50;
}


/* front */
#frntcnt marquee {
    width:100%;
	margin:10px 0;
	margin:1vw 0;
	vertical-align:top;
}
#fmarq1, #fmarq2  {
	width:15%;
}
.frontScreen-templateImage {    
	  width:16%;
	  visibility:hidden;
	  opacity:0;
}
#fmarq2 {
	-webkit-animation: screenImage_flip 3s linear 1.5s infinite reverse ;
	animation: screenImage_flip 3s linear 1.5s infinite reverse ;
}
#fmarq1 {
	-webkit-animation:  screenImage_flip 2s linear 1s infinite reverse;
	animation: screenImage_flip 2s linear 1s infinite reverse;
}
  
/* menu page */
#mnucnt {
	display: none;  
}
#mnucnt ul {
 padding:5%;
	box-sizing: border-box;	
}
#mnucnt li {
	list-style: none;
	padding: 15px 10%;
	font-size: 150%;
	transition: background-color 0.5s ease;
}
#mnucnt .lsten1:hover {
	background-color: #6699FF;
	cursor: pointer;
}
#mnucnt input:hover, #mnucnt label:hover  {
	cursor: pointer;
}
#difcnt  {
   display:none;
}
#difcnt div {
  padding-left:15%;
  box-sizing:border-box;
}
#mnucnt input {
   margin:10px 0;
}

/*  about page */

#about_cnt {
	display: none;
	position: absolute;
	top:0;
	left:0;	
}
#crntvsncnt {
	font-size: 100%;
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;

	width:90%;
	text-align:center;
	background: #000066;
	background: -webkit-radial-gradient(50% 0, circle, #000066, #15197d, #06075);
	background: -o-radial-gradient(50% 0, circle, #000066, #15197d, #06075);
	background: -moz-radial-gradient(50% 0, circle, #000066, #15197d, #06075);
	background: radial-gradient(circle at 50% 0, #000066, #15197d, #060752);
	border: 1px #121380 solid;
	color:#ffffff;
	box-shadow: 0px 0px 15px #ffffff inset;
	border-radius:15px;
	 margin:0 auto;
	 z-index: 100;  
}
#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;
}

/* help */

#hlpcnt {
	position:absolute;
	left:0;
	top:0;
	display:none; 
	background: #000066;
	background: -webkit-radial-gradient(50% 0, circle, #000066, #15197d, #06075);
	background: -o-radial-gradient(50% 0, circle, #000066, #15197d, #06075);
	background: -moz-radial-gradient(50% 0, circle, #000066, #15197d, #06075);
	background: radial-gradient(circle at 50% 0, #000066, #15197d, #060752);
	border: 1px #121380 solid;
	color:#ffffff;
	box-shadow: 0px 0px 15px #ffffff inset;
	border-radius:15px;
    padding:5px 2%;
	box-sizing: border-box;
	z-index: 100; 
 }
#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: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; 
}

/*   level board   */

#lvlbrd, #gmovrcnt {
	position: absolute;
	left: 0px;
	top: 0px;
	color: #ffffff;
	
	font-family: "bankgothic_mdbt","Times New Roman", Times, serif;
	display: none;
	background-color: #354262;
	background: -webkit-radial-gradient(center bottom, rgba(160, 201, 215, 0.8) 0%, rgba(160, 201, 215, 0) 70%), -webkit-linear-gradient(top, black 0%,#282F44 6%,#2C3551 52%,#354262 91%,#050C54 100%);
	background: -o-radial-gradient(center bottom, rgba(160, 201, 215, 0.8) 0%, rgba(160, 201, 215, 0) 70%), -o-linear-gradient(top, black 0%,#282F44 6%,#2C3551 52%,#354262 91%,#050C54 100%);
	background: -moz-radial-gradient(center bottom, rgba(160, 201, 215, 0.8) 0%, rgba(160, 201, 215, 0) 70%), -moz-linear-gradient(top, black 0%,#282F44 6%,#2C3551 52%,#354262 91%,#050C54 100%);
	background: radial-gradient(at center bottom, rgba(160, 201, 215, 0.8) 0%, rgba(160, 201, 215, 0) 70%), linear-gradient(to top, black 0%,#282F44 6%,#2C3551 52%,#354262 91%,#050C54 100%);
    border:2px solid #354262;
  	-webkit-box-shadow: 0px 0px 15px rgba(33,62,83,0.7) inset;
	-moz-box-shadow: 0px 0px 15px rgba(33,62,83,0.7) inset;
	box-shadow: 0px 0px 15px rgba(33,62,83,0.7) inset;
	z-index: 40;
}
#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;
}

/* game over */
#gmovrcnt {
   padding:5px 2%;
   box-sizing: border-box;
}
#gmovrcnt p {
	text-align: center;
	font-size: 160%;
}
#gmovrcnt table {
     font-size: 120%; 
	 margin:5px 2%;
}
#gmovrcnt table td{
     width: 50%;
}

/*  game screen  */
.game-cnt {
    width:100%; 
	margin:0 auto;
}
.game-cnt td {
	vertical-align:top;	
}
.segment-corner {
	z-index:30;	
   background-color:#ffffff;  
}
.segment-top, .segment-bottom {
     z-index:31;	
   background-color:#ffffff;
}
.segment-top div, .segment-bottom div {
   	border:0 #ffffff solid;	
	border-image:url(content/bk/rlbk.png) 10% 5% 10% 5% stretch;  
	width:103%;
	left:-1.5%;
	box-sizing: border-box; 
}
.segment-top div {
     border-bottom:15px #000000 solid;
	 height:100%;
}
.segment-bottom div {
     border-top:15px #000000 solid;	
}
.segment_sideLeft, .segment_sideRight {
    width:30%; 
	z-index:31;
	background-color:#ffffff;
}
.segment_sideLeft div, .segment_sideRight div {
   	border:0 #e0e0e0 solid;	
	border-image:url(content/bk/rlbk.png) 10% 5% 10% 5% stretch;  
	box-sizing: border-box;
	height:100%;
	height:33vw; 
}
.segment_sideLeft div {
      border-right:15px #000000 solid;
}
.segment_sideRight div {
     border-left:15px #000000 solid;
}
#gmsrcnt .corner-templateCard {
      width:80%;
	  height:auto;
	  visibility:hidden;
	  opacity:0; 
}
#gmsrcnt {
 display: none; 
 top: -11vw;  
	width:130%;
	left:-15%;
	z-index:10;
}
#mncnt {
    background-image: url("content/bk/chkbd.jpg");
	background-repeat:no-repeat;
	background-size:100%;
	position:relative;
	width:98%;
	width:66vw;
	height:33vw;  
    margin:0 auto; 
	z-index:20;
	
}
#mncnt table {
   width:98%;
   margin:0 auto;
}
#mncnt td {
  width:11%;
}
#mncnt .screen-templateCard1 {
    width:22%;
	height:auto;
	opacity:0;
	visibility:hidden;	
}
.screen-templateCard2 {
    width:42%;
	height:auto;
	opacity:0;
	visibility:hidden;	
}
.screen-templateCard3 {
    width:32%;
	height:auto;
	opacity:0;
	visibility:hidden; 
}
.screen-templateCard4 {
    width:42%;
	height:auto;
	opacity:0;
	visibility:hidden;	
}
.screen-templateCard5 {
    width:32%;
	height:auto;
	opacity:0;
	visibility:hidden;
}
.screen-templateCard6 {
    width:42%;
	height:auto;
	opacity:0;
	visibility:hidden;
}
.screen-templateCard7 {
    width:42%;
	height:auto;
	opacity:0;
	visibility:hidden;
}
#mncnt td div {
   position:absolute;
   top:0;
   left:0; 
   z-index:21;
  cursor:pointer;  
}
#mncnt td div img {
   width:90%;
   height:auto;
   z-index:21;
}
#mncnt td div img:last-child {
     display:none;
}
#mncnt td div img:first-child {
	 cursor:pointer;
}
#mncnt img {
	cursor: pointer;
	
}

/* animation  */

.activeImage_cnt {
	-webkit-animation: image_rotate 1s linear 0s 1 alternate;
	animation: image_rotate 1s linear 0s 1 alternate;
	z-index:23;
}

@-webkit-keyframes image_rotate
{
0%  {-webkit-transform:none; 
	transform:none;
	}
25% {-webkit-transform: translate3D(0, 0,  -100px) rotateY(0); 
	transform: translate3D(0, 0,  -100px) rotateY(0);
	}	
50% {-webkit-transform: translate3D(0, 0,  -100px) rotateY(90deg); 
	transform: translate3D(0, 0,  -100px) rotateY(90deg); 
	}
75% {-webkit-transform: translate3D(0, 0,  -100px) rotateY(0); 
	transform: translate3D(0, 0,  -100px) rotateY(0);
	}
100% {-webkit-transform:none; 
	transform:none;
	z-index:23;
	}
}
@keyframes image_rotate
{
0%  {-webkit-transform:none; 
	transform:none;
	}
25% {-webkit-transform: translate3D(0, 0,  -100px) rotateY(0); 
	transform: translate3D(0, 0,  -100px) rotateY(0);
	}	
50% {-webkit-transform: translate3D(0, 0,  -100px) rotateY(90deg); 
	transform: translate3D(0, 0,  -100px) rotateY(90deg); 
	}
75% {-webkit-transform: translate3D(0, 0,  -100px) rotateY(0); 
	transform: translate3D(0, 0,  -100px) rotateY(0);
	}
100% {-webkit-transform:none; 
	transform:none;
	z-index:23;
	}
}
.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); 
	transform: rotate(0);}
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); 
	transform:  rotate(0);}
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);
	}
}
.activeImage_cnt2 {
	-webkit-animation: image_rotate2 1s linear 0s 1 alternate;
	animation: image_rotate2 1s linear 0s 1 alternate;
	z-index:21;
}
@-webkit-keyframes image_rotate2
{
0%  {-webkit-transform:none; 
	transform:none;}
25% {-webkit-transform: translate3D(0, 0, -100px) rotateY(0);
	transform: translate3D(0, 0, -100px) rotateY(0);}
50% {-webkit-transform:translate3D(0, 0, -100px) rotateY(90deg); 
	transform:translate3D(0, 0, -100px) rotateY(90deg);
	}
75% {-webkit-transform:translate3D(0, 0, -100px) rotateY(0) ; 
	transform:translate3D(0, 0, -100px) rotateY(0);
	}
100% {-webkit-transform:none; 
	transform:none;
	}
}
@keyframes image_rotate2
{
0%  {-webkit-transform:none; 
	transform:none;}
25% {-webkit-transform: translate3D(0, 0, -100px) rotateY(0);
	transform: translate3D(0, 0, -100px) rotateY(0);}
50% {-webkit-transform:translate3D(0, 0, -100px) rotateY(90deg); 
	transform:translate3D(0, 0, -100px) rotateY(90deg);
	}
75% {-webkit-transform:translate3D(0, 0, -100px) rotateY(0) ; 
	transform:translate3D(0, 0, -100px) rotateY(0);
	}
100% {-webkit-transform:none; 
	transform:none;
	}
}
.inactiveImage_cnt {
	animation-play-state: paused;
	z-index:21;
}
.inactiveImage_cnt2 {
	animation-play-state: paused;
	z-index:21;
}
@-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);
	}
}

/*  game end */


#cngrcnt {
	display: none; 
	background-image: url('content/imgs/firewrks.gif');
	background-repeat: no-repeat;
	background-color: #000000;
	background-size:100%;
	
}
#cngrcnt .title_logo {
    width:80%;
	margin:0 auto;
}
#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);
}
} 

/* 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;  
}
#cmpltmnu .menu-game-info  {
   font-size:150%;
}} 
@media only screen and (max-width: 1000px) {
#outer_container {
	width: 80%;
}
#cmpltmnu {
	width: 100%;
}
 #ngmnu {
    width:50%;
 }
#gmsrcnt {
  top: -12vw; 
}
#mncnt {
	width:76vw;
	height:38vw;
}
.segment_sideLeft div, .segment_sideRight div {
   height:38vw;
} 
.segment-top div  {
	border-bottom:8px #000000 solid;
	 border-bottom:1.5vw #000000 solid; 
}
.segment-bottom div  {
	border-top:8px #000000 solid;
	border-top:1.5vw #000000 solid;  
}
.segment_sideLeft div  {
	border-right:8px #000000 solid;
	 border-right:1.5vw #000000 solid;  
}
.segment_sideRight div  {
	border-left:8px #000000 solid;
	border-left:1.5vw #000000 solid;  
}  
#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_container {
	width: 100%;
}
#crntvsncnt {
    width: 100%;
	border-radius:3vw;
}
#gmsrcnt {
   top: -14vw;  
}
#mncnt {
   	width:96vw;
	height:48vw;
}
.segment_sideLeft div, .segment_sideRight div {
   height:48vw;
}
#cmpltmnu .menu-game-info  {
   font-size:120%;
}
 #ngmnu {
   font-size:110%;
   min-width:100px;
 }
 #ngmnu li  {
     	padding: 10px 8%;
 }
 #ancmnt {
  width:65%;
  top:5px;
 }
 #mnucnt li  {
   font-size:130%;
   padding: 12px 8%;
 }
#lvlbrd {
  font-size:80%;
}
#gmovrcnt {
 font-size:80%;
}


#crntvsncnt img {
    width:50%;
}
} 
/*  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) {
body {
	font-size: 14px;	
}


}
@media only screen and (max-width: 300px) {
body {
	font-size: 12px;	
}
}




