/* header object */
#header {
		position: fixed; _position: absolute;
		width: 100%; left: 0; top: 0;background-color: #ffffff; text-align: center; z-index: 3;
		border-bottom:1px #ccc solid; opacity:0.8;
		height:50px;
}
#header ul {	margin: 0 auto 0;width: auto;padding: 0px;list-style-type: none;height: 100%;display: inline-block;*display: inline;zoom: 1; /*float:right;*/}
#header ul li {
		padding: 4px 8px;
		float: left;
		font-size:14pt;
		display: inline;
		height: 100%;
		vertical-align: baseline;
}
#header ul li a {display: block;padding: 8px;}

#staffUL {margin: 0 auto 0;width: auto;padding: 0px;list-style-type: none;height: 100%;display: inline-block;*display: inline;zoom: 1; /*float:right;*/}
#staffUL li {		padding: 4px 8px;
		float: left;
		font-size:14pt;
		display: inline;
		height: 100%;
		vertical-align: baseline;}

#page {	width:100%; height:100%; left:0px; top:0px;}

#page2{	width:100%; height:100%; left:0px; top:0px; margin:0px; min-height:100%; z-index:999;
	background-color:#cccccc;display:none; position:fixed; _position:absolute; overflow:auto;
}

.hide {display:none}
#main {	overflow:hidden;}

.content label {font-size:28pt; color:#781018; padding:4px 0px;}
.content>div {min-height:200px; height:auto;}

.pblock {text-align:center; margin:0 auto 0;}
.pblock>div{
	float:left; display:block;
	padding:2px;border:0px; font-size:18px; margin:4px; border:1px #ccc solid;
	border-radius:4px;-moz-border-radius:4px;box-shadow: 4px 4px 5px #dddddd;
}

#rent_expense {width:820px}
#rent_expense div:nth-child(1) {width:320px; height:auto; min-height:320px}
#rent_expense div:nth-child(2){width:460px; height:auto; min-height:320px;}

.qrpan {
	width:330px; min-height:300px; margin:0 auto 0;
	text-align:center;
	border:1px #eee solid; display:block; padding:3px;
	overflow:hidden;
	background-color:#ffffff;
	border:1px #dcdcdc solid;
	border-radius:12px;
	box-shadow: 0px 4px 5px #dddddd;
}

/* API Box */
	.apiBox .Box input[type=password],  .apiBox input[type=text]{
		width : 100%;
		display : block;
		margin-bottom : 10px;
		z-index : 1;
		position : relative;
		-moz-box-sizing : border-box;
		-webkit-box-sizing : border-box;
		box-sizing : border-box
	}
	.apiBox {
		margin : 20px auto;
		width : 400px;
		min-height : 120px;
		background-color : #eFefEF;
		background : -moz-linear-gradient(center top , #FFFFFF,  #DDDDDD 1px, #FFFFFF 20px);
		background : -webkit-gradient(linear, left top, left 20, from(#FFFFFF), color-stop(5%, #DDDDDD) to(#FFFFFF));
		filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#FBFBFB', endColorstr='#FFFFFF');
		-moz-border-radius : 3px;
		-webkit-border-radius : 3px;
		border-radius : 3px;
		-moz-box-shadow : 0px 6px 4px #bbb;
		-webkit-box-shadow : 0px 6px 4px #bbb;
		box-shadow : 0px 6px 4px #bbb;
		text-decoration : none;
		padding-top : 6px;
		transition : 0.6s;
		transform-style : preserve-3d;
	}
	.apiBox div {padding : 2px 0px;}
	.apiBox div img {transition : 0.6s;transform-style : preserve-3d;}
	.apiBox .Box{width : 320px; padding-top : 12px; text-align : center; margin : 0 auto;}
	.apiBox .Box .Tie{ font-size : 26px; font-weight:bold; }
	.apiBox .exp{width : 320px;font-size : 11px;margin : 0 auto;}

#msger { color:red; font-size:36px; font-weight:bold; padding:6px; font-weight:bold; width:300px; min-height:100px;display:none; margin:0 auto 0;
	border:1px #ddd solid;
		-moz-border-radius : 3px;
		-webkit-border-radius : 3px;
		border-radius : 3px;
		text-decoration : none;
		padding-top : 6px;
		transition : 0.6s;
		transform-style : preserve-3d;
}
.Red {color:red; font-size:24px; text-align:right}
.Blue {color:blue; font-size:24px; text-align:right}
.lup, .lup td {color:red;}
.ldn, .ldn td {color:blue;}
.fontEnabled {color:#111111; font-weight:bold;}
.fontDisabled {color:#bbbbbb}
.button {text-align:center;}
#msg {display:none;padding:4px; font-size:28px; font-weight:bold; color:red}

/**/
#rentIn td input[type="text"], #misOut td input[type="text"]{ text-align:right; width:180px;}
#rentIn td input[type="text"] {color:red}
#misOut td input[type="text"] {color:blue}



.txtNum {text-align:right;}

#numericInput{
    position:relative;
}
#numBox{
    width:150px;
    height:20px;
    text-align:right;
    border:solid 1px black;
    cursor:text;
    overflow:hidden;
}

.numPad2 tr td {text-align:center;}
.numPad2 tr td span {margin:0 auto 0; display:block; width:100px; height:70px; line-height:70px; font-size:36px; font-weight:bold;}
#keypad{
    z-index:9999;width:300px;display:none; position:absolute; background:#ffffff; border:1px #ccc solid; border-radius: 5px;height:auto;box-shadow: 0 2px 4px #999;
}
#keypad table tr td { text-align:center; border:0 solid #ffffff;}
#keypad table tr td span{
	margin:0 auto 0;
	display:block;
    width:76px;
    height:76px;
    line-height:76px;
    border: 2px solid #f5f5f5;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    text-decoration:none;
    background: #464646;
    box-shadow: 0 0 2px gray;
    font-size:36px;
    font-weight:bold;
}
#keypad table tr td span i {color:#ffffff;}


/*
#keypad table tr td span:hover{ background: #cccccc;}
#keypad table tr td span:active{background: #ffffff; border-color:#000000; color:#000000;}
*/
.cic { height:24px; width:80px; line-height:24px; display:inline-block; margin:2px; font-size:14px; border-radius:12px; border:1px solid #444; color:#000000;}
.mcic { height:36px; width:36px; line-height:36px; text-align:center; display:inline-block; font-size:24px; border-radius:50%; border:1px solid #444; color:#000000;}
.RoundBtnRed {
    width:120px; height:120px; line-height:120px;
    border: 5px solid #FFEBEE; color:#FFEBEE;
    background: #B71C1C;
    box-shadow: 0 8px 8px gray;
	margin:4px 8px;
    font-size:50px;

	display:inline-block;
    text-align:center;
    text-decoration:none;
    border-radius: 50%;
    font-weight:bold;
	vertical-align: top;
	cursor:pointer;
}
ul.bigRoundBtn{
	width:1000px;
	margin:-20px auto 0;
	padding: 0px;
	list-style-type: none;
	height: 100%;
	display: inline-block;
	*display: inline;
	zoom: 1;
}
ul.bigRoundBtn li {
	display:inline-block;
    border: 8px solid #f5f5f5;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    text-decoration:none;
    background: #464646;
    box-shadow: 0 8px 8px gray;
    font-size:100px;
    font-weight:bold;
	vertical-align: center;
	margin:10px 20px;
	cursor:pointer;
}

ul.midRoundBtn {	margin:0 auto 0;width: 100%;padding: 0px;list-style-type: none;height: 100%;display: inline-block; *display: inline; zoom: 1;}
ul.midRoundBtn li {
	display:inline-block;
    width:130px; height:130px; line-height:130px;
    border: 3px solid #f5f5f5;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    text-decoration:none;
    background: #464646;
    box-shadow: 0 4px 4px gray;
    font-size:28px;
	vertical-align: center;
	margin:10px 20px;
	cursor:pointer;
	word-spacing:nowrap;
}
ul.midRoundBtn li.active {background:#cccccc;color:red; border-color:#9E9E9E}
ul.midRoundBtn li.inactive {color:#888888;}



ul.staff li {background:#E53935; border-color:#FFEBEE;}
ul.fok li {background:#9C27B0; border-color:#F3E5F5;}
ul.fok li.free {background:#6A1B9A; color:#E1BEE7}
ul.fok li.isReleased {background:#888888; border-color:#cccccc}
ul.wai li {background:#E91E63; border-color:#F8BBD0;}
ul.wai li.free {background:#880E4F;}
ul.wai li.isReleased {background:#888888; border-color:#cccccc}
ul.gameType li {width:110px; height:110px; font-size:22px; line-height:30px;}
/*ul.gameType li {width:110px; height:110px; font-size:22px; line-height:30px;}*/
ul.publicRs  li{ color:#EF5350; width:120px; height:120px; font-size:24px; font-weight:bold; line-height:30px; background:#FFC107; border-color:#EDE7F6;}
ul.publicRs li.down { color:#42A5F5}

.RoundBtn {
    display:inline-block;
    width:90px;
    height:90px;
    line-height:90px;
    border: 2px solid #f5f5f5;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    text-decoration:none;
    background: #464646;
    box-shadow: 0 0 3px gray;
    font-size:36px;
    font-weight:bold;
	margin:0 10px;
}
.RoundBtn:hover {background: #4D4D4D;}
.RoundBtnMid {
    display:inline-block;
    width:70px;height:70px;line-height:70px;
    border: 2px solid #f5f5f5;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    text-decoration:none;
    background: #464646;
    box-shadow: 0 0 3px gray;
    font-size:26px;
    font-weight:bold;
	margin:5px;
	cursor:pointer;
}
.RoundBtnSml {
    display:inline-block;
    width:60px;height:60px;line-height:60px;
    border: 2px solid #f5f5f5;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    text-decoration:none;
    background: #464646;
    box-shadow: 0 0 3px gray;
    font-size:22px;
    font-weight:bold;
	margin:5px;
	cursor:pointer;
}

.RoundBtnMenu {
    width:40px; height:40px; line-height:40px;
	color:#ffffff; border:1px #888 solid;
	background: #ffffff;background-image: -webkit-linear-gradient(top, #ffffff, #dddddd);
	box-shadow: 0 3px 3px gray;
	margin:0px 10px;
    font-size:18px;

	display:inline-block;
    text-align:center;
    text-decoration:none;
    border-radius: 50%;
    font-weight:bold;
	vertical-align: top;
	cursor:pointer;
}
#inputAmount {width:330px; text-align:right;}

.fokLabel { font-size:20px; background:#9C27B0; border-color:#F3E5F5;}
.waiLabel { font-size:20px; background:#E91E63; border-color:#F8BBD0;}
.setupR0 { font-size:14px; background:#795548; border-color:#EFEBE9;}
.setupR1 { font-size:14px; background:#E53935; border-color:#FFEBEE;}
.setupR2 { font-size:14px; background:#9C27B0; border-color:#F3E5F5;}
.setupR3 { font-size:14px; background:#E91E63; border-color:#F8BBD0;}
.setupR40 { font-size:14px; background:#8A4B08; border-color:#DF7401;}
.setupR41 { font-size:14px; background:#B04C96; border-color:#F3BAF8;}
.setupR42 { font-size:14px; background:#4CB097; border-color:#BAF8F1;}
.setupR5 {font-size:12px; font-weight:normal; background:#673AB7; border-color:#EDE7F6;}
.setupR6 { font-size:12px; background:#4CAF50; border-color:#F8BBD0; font-weight:normal; }
.h2 {font-size:24px; font-weight:bold;}
.working {font-size:13px; color:red;}

#submitDetail, #detailQueue { font-size:20px;}
#submitDetail > div, #detailQueue > div {font-size:28px;}
#submitDetail > div > span, #detailQueue > div > span {font-size:34px; font-weight:bold;}
#submitDetail > div > b , #detailQueue > div > b {font-size:30px; color:#8A2908; font-weight:bold;}



.slideThree {
	width: 200px;
	height: 52px;
	background: #ddd;
	margin: 20px auto;

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	position: relative;

	-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
	-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
	box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}

.slideThree:after {
	content: ' \2193 Dn';
	font: 28px/36px Microsoft JhengHei, Verdana,sans-serif;
	font-weight:bold;
	color: blue;
	position: absolute;
	right: 20px; top:7px;
	z-index: 0;
	text-shadow: 1px 1px 0px rgba(255,255,255,.15);
}

.slideThree:before {
	content: '\2191 Up';
	font: 28px/36px Microsoft JhengHei, Verdana,sans-serif;
	font-weight:bold;
	color:red;
	position: absolute;
	left: 20px; top:7px;
	z-index: 0;
}

.slideThree label {
	display: block;
	width: 100px;
	height: 50px;

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;

	-webkit-transition: all .4s ease;
	-moz-transition: all .4s ease;
	-o-transition: all .4s ease;
	-ms-transition: all .4s ease;
	transition: all .4s ease;
	cursor: pointer;
	position: absolute;
	top: 2px;
	left: 2px;
	z-index: 1;

	-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
	background: #fcfff4;

	background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
}

.slideThree input[type=checkbox]:checked + label {
	left: 98px;
}




.sixPicsPage {width:100%;}
.sixPicsPage>div { width:100%; float:left}
@media screen and (max-width:800px){
	.sectionDiv { width:100%;min-width:78px; margin:0 auto; padding-top:50px; clear:both; }
	.content {min-height:120px; height:auto; width:780px; margin:0px auto 0; text-align:center}
	ul.bigRoundBtn {width:780px;}
	ul.bigRoundBtn li {width:160px; height:160px; line-height:160px; font-size:70px;}
	#wai_del >div, #fok_del>div {width:220px; height:auto; min-height:134px;}
	.sixPicsPage>div {width:260px;}
	.sixPicsPage>div>div {width:256px;height:auto;min-height:180px;}
}
@media screen and (min-width:801px) and (max-width:1024px){
	.sectionDiv { width:100%;min-width:98px; margin:0 auto; padding-top:50px; clear:both; }
	.content {min-height:120px; height:auto; width:960px; margin:0px auto 0; text-align:center}
	ul.bigRoundBtn li {width:190px; height:190px; line-height:190px; font-size:70px;}
	#wai_del >div, #fok_del>div {width:280px; height:auto; min-height:154px;}
	.sixPicsPage>div {width:320px;}
	.sixPicsPage>div>div {width:306px;height:auto;min-height:200px;}
}
@media screen and (min-width:1025px) and (max-width: 1200px) {
	.sectionDiv { width:100%;min-width:1200px; margin:0 auto; padding-top:50px; clear:both; }
	.content {min-height:120px; height:auto; width:1000px; margin:0px auto 0; text-align:center}
	ul.bigRoundBtn li {width:200px; height:200px; line-height:200px;}
	.sixPicsPage>div>div,
	#wai_del >div, #fok_del>div {width:308px; height:auto; min-height:154px;}
	.sixPicsPage>div {width:320px;}
	.sixPicsPage>div>div {width:320px;height:auto;min-height:250px;}
}
@media screen and (min-width:1201px) and (max-width: 1400px) {
	.sectionDiv { width:100%;min-width:1200px; margin:0 auto; padding-top:50px; clear:both; }
	.content {min-height:120px; height:auto; width:1080px; margin:0px auto 0; text-align:center}
	ul.bigRoundBtn li {width:200px; height:200px; line-height:200px;}
	.sixPicsPage>div>div,
	#wai_del >div, #fok_del>div {width:318px; height:auto; min-height:154px;}
	.sixPicsPage>div {width:360px;}
	.sixPicsPage>div>div {width:350px;height:auto;min-height:250px;}
}
@media screen and (min-width: 1401px)  {
	.sectionDiv { width:100%;min-width:1300px; margin:0 auto; padding-top:50px; clear:both }
	.content {min-height:120px; height:auto; width:1340px; margin:0px auto 0; text-align:center;}
	ul.bigRoundBtn li {width:230px; height:230px; line-height:220px;}
	.sixPicsPage>div {width:442px;}
	.sixPicsPage>div>div{width:430px; height:auto; min-height:300px; }
	#wai_del >div, #fok_del>div {width:430px; height:auto; min-height:154px;}

ul.midRoundBtn li {
    width:180px; height:180px; line-height:180px;
	font-size:30px;
	margin:10px 20px;
}

ul.publicRs  li{ width:160px; height:160px; font-size:24px; font-weight:bold; line-height:40px; background:#FFC107; border-color:#EDE7F6;}

}

.isReleased table { background-color:#dddddd; }
.isWorking table {background-color:#ffffff;}