/*body { font-size: 62.5%; }*/


body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;  
    background-color: lightgray;
    cursor: default;
    height: 100%;
    margin: 0 !important;
    padding: 0;
    width: 100%;
}


label, input { 
	display:block; 
}

input.text {
	margin-bottom:12px;
	width:95%;
	padding: .4em; 
}


h1 { 
	font-size: 1.2em; 
	margin: .6em 0; 
}

.ui-dialog .ui-state-error { 
	padding: .3em; 
}

.no-close .ui-dialog-titlebar-close {
	display: none 
}

.ui-widget-overlay{
    position: absolute; 
    z-index: 10000;
}

.ui-dialog{
    z-index: 10001;
}

/* --------------------- Login Page ------------------------------------------*/

#login-body{
    width: 1920px;
    height: 1200px;
    background-image: url("../images/loginback.jpg");
    position: absolute;
    top: 0;
    left: 0;
    font-family: 'Segoe UI', 'Arial','Myriad Pro', sans-serif;
    font-size: 30px;
    display: none;
}

#logo{
    position: absolute;    
    display: none;
}

.dialogBackgr{    
    position: absolute;
    background: -moz-linear-gradient(top,   rgba(243,243,243,1) 0%,rgba(235,235,235,1) 8%,rgba(254,254,254,1) 22%,rgba(235,235,235,1) 35%,rgba(212,212,212,1) 75%,rgba(230,228,228,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(243,243,243,1)), color-stop(8%,rgba(235,235,235,1)), color-stop(22%,rgba(254,254,254,1)), color-stop(35%,rgba(235,235,235,1)), color-stop(75%,rgba(212,212,212,1)), color-stop(100%,rgba(230,228,228,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(243,243,243,1) 0%,rgba(235,235,235,1) 8%,rgba(254,254,254,1) 22%,rgba(235,235,235,1) 35%,rgba(212,212,212,1) 75%,rgba(230,228,228,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(243,243,243,1) 0%,rgba(235,235,235,1) 8%,rgba(254,254,254,1) 22%,rgba(235,235,235,1) 35%,rgba(212,212,212,1) 75%,rgba(230,228,228,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(243,243,243,1) 0%,rgba(235,235,235,1) 8%,rgba(254,254,254,1) 22%,rgba(235,235,235,1) 35%,rgba(212,212,212,1) 75%,rgba(230,228,228,1) 100%); /* IE10+ */    
    background: linear-gradient(to bottom,  rgba(243,243,243,1) 0%,rgba(235,235,235,1) 8%,rgba(254,254,254,1) 22%,rgba(235,235,235,1) 35%,rgba(212,212,212,1) 75%,rgba(230,228,228,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F3F3F3', endColorstr='#E6E4E4',GradientType=0 ); /* IE6-9 */
    box-shadow: 1px 1px 0px 1px rgba(0, 0, 0, 0.3) inset, 2px 2px 7px rgba(0, 0, 0, 0.8);
    border-radius: 20px;
    
}

#dialog-login{    
    top:150px;
    left:900px;
    width: 750px;
    height: 830px;       
}

#dialog-login>div{
    width: 100%
}

.dialogHead{
    background: -moz-linear-gradient(top, rgba(243, 243, 243, 1) 0%, rgba(235, 235, 235, 1) 8%, rgba(244, 244, 244, 1) 22%, rgba(235, 235, 235, 1) 85%, rgba(212, 212, 212, 1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(243, 243, 243, 1)), color-stop(8%,rgba(235, 235, 235, 1)), color-stop(22%,rgba(244, 244, 244, 1)), color-stop(85%,rgba(235, 235, 235, 1)), color-stop(100%,rgba(212, 212, 212, 1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,   rgba(243, 243, 243, 1) 0%, rgba(235, 235, 235, 1) 8%, rgba(244, 244, 244, 1) 22%, rgba(235, 235, 235, 1) 85%, rgba(212, 212, 212, 1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,   rgba(243, 243, 243, 1) 0%, rgba(235, 235, 235, 1) 8%, rgba(244, 244, 244, 1) 22%, rgba(235, 235, 235, 1) 85%, rgba(212, 212, 212, 1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,   rgba(243, 243, 243, 1) 0%, rgba(235, 235, 235, 1) 8%, rgba(244, 244, 244, 1) 22%, rgba(235, 235, 235, 1) 85%, rgba(212, 212, 212, 1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(243, 243, 243, 1) 0%, rgba(235, 235, 235, 1) 8%, rgba(244, 244, 244, 1) 22%, rgba(235, 235, 235, 1) 85%, rgba(212, 212, 212, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F3F3F3', endColorstr='#D4D4D4',GradientType=0 ); /* IE6-9 */
    /*background: linear-gradient(to bottom, rgba(243, 243, 243, 1) 0%, rgba(235, 235, 235, 1) 8%,rgba(244, 234, 234, 1) 27%, rgba(225, 225, 235, 1) 80%,  rgba(212, 212, 212, 1) 100%, rgba(230, 228, 228, 1) 100%);*/
    text-align: center;
    font-size: 50px;
    font-weight: bold;
    line-height: 180%;
    position: absolute;
    border-radius: 20px 20px 0px 0px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);

}

#dialog-login #loginHead{
    
    height: 90px;
    width: 748px;
    top:2px;
    left:2px;
}

fieldset { 
	padding:0; 
	border:0; 
        position: absolute;
        top:145px;
        width: 100%;
}

.validateTips { 
	padding: 0px 10px 0px 50px;
        margin: 65px 0px 10px 0px;
}

.stateHighlighted{
    background-color: rgba(190,0,0,0.8);
}

#dialog-login label{
    margin: 30px 0 10px 159px;
}

#dialog-login #loginInputs{
    position: absolute;
    top:90px;
}

#login-body input{
     -webkit-appearance: none;
  -webkit-box-sizing: content-box;
  outline:none;
    background-image:  url("../images/inputBack.png");
    background-position: -3px -0px;
    width: 447px;
    height: 87px;
    border: 0px solid #8e846b;
    border-radius: 8px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6);
    font-size: 30px;
    margin: 0 0 0 138px;
    padding: 0 0 0 20px
}

#login-body input.error {
    box-shadow: inset 0px 0px 10px 3px #cc0000;
}

/*make default yello background in chrome grey, best solution*/
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px rgb(140,140,140) inset !important;
}

#buttonsBackLogIn{    
    background-color: rgba(0, 0, 0, 0.05);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    height: 244px;
    line-height: 45px;
    text-align: center;
    
}

#buttonsBackLogIn>div{
    background-color: rgba(0, 0, 0, 0.05);
    height: 45px;
    position: absolute;
    width: 100%;
}

#buttonsBackLogIn>span{
    line-height: 45px;
    text-align: center;
}

#submLogin{
    margin: 90px auto;
    color:#fff;    
}

#submLogin>span{
    display: inline-block;
    margin: 15px 0;
}

.grafButton{
    background-image:  url("../images/button.png");
    background-size: 477px 186px;
    background-position: 0px -92px;
    width: 477px;
    height: 95px;
    text-align: center;
    font-weight: bold;
    font-size: 40px;
    cursor:pointer;
    
}

.grafButton:hover{
    background-image:  url("../images/button.png");
     background-size: 477px 186px;
    background-position: 0px 0px;
    width: 477px;
    height: 95px;
}



/*---------------- Toggle design Switch --------------------------------------*/

#dialog-login label.toggle{
    margin: 0;
}

#divSelectDesign{
    left: 320px;
    position: absolute;
    top: 545px;
}

#divSelectDesign span{
    display: inline-block;
    line-height: 29px;
    position: relative;
    top: -30px;
    text-align: center;
    width: 119px;
    height: 36px;
    border-radius: 18px;
    
   
}

#divSelectDesign span.select{    
    background-color: rgba(256,256,256,0.7);
    box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.8);
    -webkit-transition: background-color 500ms linear, box-shadow 500ms linear;
    transition: background-color 500ms linear, box-shadow 500ms linear;
    
}

#divSelectDesign span:not(.select){    
    background-color: rgba(256,256,256,0);
    box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0)    
}

.toggle {
  display:block;
  margin:20px;
  width:160px;
  height:80px;
  border-radius:40px;
  position:relative;
  cursor:pointer;
  background:linear-gradient(to bottom, #9c9c9c, #f9f9f9);
  display: inline-block;
}
.toggle input[type="checkbox"] { display:none }
.toggle:before, .toggle:after, .toggle .switch:after, .switch .brushed-metal:before, .switch .brushed-metal:after {
  content:'';
  display:block;
  position:absolute;
  z-index:1;
}
.toggle:before {
  width:156px;
  height:76px;
  top:2px; left:2px;
  border-radius:38px;
  background:linear-gradient(to bottom, #7b7b7b, #ececec);
}
.toggle:after {
  width:120px;
  height:48px;
  top:16px; left:20px;
  border-radius:24px;
  background-color:#c8c8c8;
  box-shadow:inset rgba(0,0,0,.7) 0 6px 12px;
  -webkit-transition:background-color .3s linear;
     -moz-transition:background-color .3s linear;
          transition:background-color .3s linear;
}
.toggle.checked:after { background-color:#c8c8c8}
.toggle .switch {
  diplay:block;
  width:68px;
  height:68px;
  border-radius:50%;
  position:absolute;
  top:6px; left:6px;
  z-index:9;
  background:linear-gradient(to bottom, #ddd, #636363);
  -webkit-transition:left .2s linear;
     -moz-transition:left .2s linear;
          transition:left .2s linear;
}
.toggle.checked .switch { left:86px }
.toggle .switch:after {
  width:24px;
  height:24px;
  top:22px; left:22px;
  border-radius:50%;
  background:#3b3b3d;
  box-shadow:inset rgba(0,0,0,.6) 0 3px 6px;
  z-index:8;
}
.switch .brushed-metal {
  display:block;
  width:64px; height:64px;
  position:absolute;
  top:2px; left:2px;
  border-radius:50%;
  z-index:4;
  background-color:#a9a9a9;
  /*
  background-image:
    -webkit-radial-gradient(  50%   0%,  8% 50%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
    -webkit-radial-gradient(  50% 100%, 12% 50%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),
    -webkit-radial-gradient(   0%  50%, 50%  7%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
    -webkit-radial-gradient( 100%  50%, 50%  5%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),

    -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   3%, hsla(0,0%,  0%,.1) 3.5%),
    -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%,.1) 7.5%),
    -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),

    -webkit-radial-gradient( 50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);
  */
}
.switch .brushed-metal:before, .switch .brushed-metal:after {
  top:0; left:0;
  width:inherit;
  height:inherit;
  border-radius:inherit;

  /* fake conical gradients */
  /*
  background-image:
    -webkit-radial-gradient(  50%   0%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
    -webkit-radial-gradient(  50% 100%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
    -webkit-radial-gradient(   0%  50%, 50% 10%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
    -webkit-radial-gradient( 100%  50%, 50% 06%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%);
  */
}
.switch .brushed-metal:before { transform:rotate(65deg) }
.switch .brushed-metal:after { transform:rotate(-65deg) }

/*---------------- No game at this time Message ------------------------------*/

#dialog-init{
    display: none;
}

#dialog-init{
    top:180px;
    left:300px;
    width: 1000px;
    height: 400px;
}

#dialog-init #initHead{
    top:2px;
    left:2px;
    height: 90px;
    width: 998px;
}

#initMessageText{
    position: absolute;
    top:90px;
    width: 100%;
    text-align: center;
    margin: 35px auto;
}

#initMessageBorder{    
    position: absolute;
    bottom: 0px;
    width: 100%;
    text-align: center;
    margin: 25px auto;
}

/*---------------- player Message --------------------------------------------*/

.player_message_frame{
	z-index:9999;
	position:absolute;
	top:1050px;left:200px;
	width:1520px;height:150px;
	overflow:hidden;
}

.pmb_visible{
	top:0px;left:0px;
}

.pmb_invisible{
	top:151px;left:0px;
}


.player_message_box{
	position:absolute;
	width:1520px;height:151px;
	 -webkit-box-shadow:inset 0 0 0 1px rgba(196,196,196,255);
 	 		 box-shadow:inset 0 0 0 1px rgba(196,196,196,255);
  -webkit-border-radius: 32px 32px 0 0;
	 	  border-radius: 32px 32px 0 0;
		 	background: -moz-linear-gradient(top,  rgba(76,76,76,0.75) 0%, rgba(89,89,89,0.75) 12%, rgba(102,102,102,0.75) 25%, rgba(71,71,71,0.75) 39%, rgba(44,44,44,0.75) 50%, rgba(0,0,0,0.75) 51%, rgba(17,17,17,0.75) 60%, rgba(43,43,43,0.75) 76%, rgba(28,28,28,0.75) 91%, rgba(19,19,19,0.75) 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76,76,76,0.75)), color-stop(12%,rgba(89,89,89,0.75)), color-stop(25%,rgba(102,102,102,0.75)), color-stop(39%,rgba(71,71,71,0.75)), color-stop(50%,rgba(44,44,44,0.75)), color-stop(51%,rgba(0,0,0,0.75)), color-stop(60%,rgba(17,17,17,0.75)), color-stop(76%,rgba(43,43,43,0.75)), color-stop(91%,rgba(28,28,28,0.75)), color-stop(100%,rgba(19,19,19,0.75))); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top,  rgba(76,76,76,0.75) 0%,rgba(89,89,89,0.75) 12%,rgba(102,102,102,0.75) 25%,rgba(71,71,71,0.75) 39%,rgba(44,44,44,0.75) 50%,rgba(0,0,0,0.75) 51%,rgba(17,17,17,0.75) 60%,rgba(43,43,43,0.75) 76%,rgba(28,28,28,0.75) 91%,rgba(19,19,19,0.75) 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top,  rgba(76,76,76,0.75) 0%,rgba(89,89,89,0.75) 12%,rgba(102,102,102,0.75) 25%,rgba(71,71,71,0.75) 39%,rgba(44,44,44,0.75) 50%,rgba(0,0,0,0.75) 51%,rgba(17,17,17,0.75) 60%,rgba(43,43,43,0.75) 76%,rgba(28,28,28,0.75) 91%,rgba(19,19,19,0.75) 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(top,  rgba(76,76,76,0.75) 0%,rgba(89,89,89,0.75) 12%,rgba(102,102,102,0.75) 25%,rgba(71,71,71,0.75) 39%,rgba(44,44,44,0.75) 50%,rgba(0,0,0,0.75) 51%,rgba(17,17,17,0.75) 60%,rgba(43,43,43,0.75) 76%,rgba(28,28,28,0.75) 91%,rgba(19,19,19,0.75) 100%); /* IE10+ */
			background: linear-gradient(to bottom,  rgba(76,76,76,0.75) 0%,rgba(89,89,89,0.75) 12%,rgba(102,102,102,0.75) 25%,rgba(71,71,71,0.75) 39%,rgba(44,44,44,0.75) 50%,rgba(0,0,0,0.75) 51%,rgba(17,17,17,0.75) 60%,rgba(43,43,43,0.75) 76%,rgba(28,28,28,0.75) 91%,rgba(19,19,19,0.75) 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf4c4c4c', endColorstr='#bf131313',GradientType=0 ); /* IE6-9 */
    -webkit-transition: all 750ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
	   -moz-transition: all 750ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
		 -o-transition: all 750ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
			transition: all 750ms cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */
			
				
}
		
.player_message_box > span{
    display:block;
    text-align:center;
    vertical-align:middle;
    line-height:150px;
    font-size:32px;
    font-weight:bold;
    color:#fff;
    font-family: 'Roboto', sans-serif;	
}