/* -----------------------------------------------------------------------*/
/* paging*/
/* -----------------------------------------------------------------------*/
.paging {
	text-align: center;
	margin-bottom: 20px;
}
.paging li {
	display: inline-block;
}

.paging li span,
.paging li a {
	padding: 4px 7px;
	margin: 0 2px;
	border-radius: 2px;
	text-decoration: none;
}
.paging li.prev a,
.paging li.next a{
	padding: 4px 12px;
}
.paging li span {
	background: #6aa1b5;
	color: #FFF;
}
.paging li a {
	background: #dde4e6;
	color: #6aa1b5;
}
.paging li a:hover {
	filter: alpha(opacity=80);
	opacity:0.8;
}

/* -----------------------------------------------------------------------*/
/* table*/
/* -----------------------------------------------------------------------*/
table.status thead .sub, table.status tbody .sub { width: 200px; }
table.status thead .amount, table.status tbody .amount { width: 90px; }
table.status thead .stt, table.status tbody .stt { width: 80px; }
table.status thead .memo, table.status tbody .memo { width: 130px; }

table.status th, table.status td {
	height: 20px;
}

table.status td.btn {
	text-align: center;
	border-left: none;
}
table.status td.btn a.bank {
	color: #FFF;
	background: #6ba1b5;
	background: linear-gradient(to bottom, #8cbfd1, #6ba1b5);
	background: -webkit-gradient(linear, left top, left bottom, from(#8cbfd1), to(#6ba1b5));
	padding: 5px 10px;
	border-radius: 2px;
	cursor: pointer;
}
table.status td.btn a.prepaid {
	color: #FFF;
	background: #ffaf8d;
	background: linear-gradient(to bottom, #ffc9ae, #ffaf8d);
	background: -webkit-gradient(linear, left top, left bottom, from(#ffc9ae), to(#ffaf8d));
	padding: 5px 10px;
	border-radius: 2px;
	cursor: pointer;
}
table.status td.btn a:hover {
	filter: alpha(opacity=80);
	opacity:0.8;
}

div.detail {
	display: none;
}

@media screen and (max-width: 600px) {
	table.status {
		margin-top: 20px;
	}
	table.status tbody.cont {
		position: static;
	}

	table.status tbody .sub { width: auto; }
	table.status tbody .amount { width: auto; }
	table.status tbody .stt { width: auto; }
	table.status tbody .memo { width: auto; }
	table.status tbody .btn {
		background: none;
		padding: 0;
		height: 36px;
	}

	table.status td.btn a {
		padding:10px 0;
		width: 100%;
		position: absolute;
		left: 0;
		text-align: center;
	}
	table.status td.btn a span {
		padding-left: 20px;
		background: url(/images/status-arrow.png) no-repeat left center;
	}
	table.status td.btn a.active span {
		background: url(/images/status-arrow-close.png) no-repeat left center;
	}
	table.status td.btn a:hover {
		filter: alpha(opacity=100);
		opacity:1;
	}

	div.detail {
		padding: 10px;
		background: #F7F7F7;
	}
}


/* -----------------------------------------------------------------------*/
/* box*/
/* -----------------------------------------------------------------------*/
#box {
	position: fixed;
	left: 50%;
	top: 50%;
	margin-left: -370px;
	width: 700px;
	padding: 20px;
	background: #FFF;
	z-index: 10001;
	display: none;
	text-align: left;
}
#boxBack {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #000;
	filter: alpha(opacity=80);
	opacity:0.8;
	z-index: 10000;
	display: none;
	cursor: pointer;
}
.close {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 10000;
	cursor: pointer;
	height: 25px;
	width: 25px;
	background: url(/images/close.png) no-repeat;
	margin-left: 350px;
}