/**************************
    通用
***************************/
html,body {
	padding: 0;
	margin: 0;
}
nav,section,menu {
	display: block;
	padding: 0;
	margin: 0;
}
table, th, td {
	border: 1px solid black;
	padding: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0px;
}
table[noborder] {
	border: none;
}
table[noborder] th,table[noborder] td {
	border: none;
}
ol,ul,li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
h1,h2,h3,h4 {
	padding: 0;
	margin: 0;
	font-size: 100%;
}
a {
	text-decoration: none;
	color: inherit;
}
input[type="checkbox"] {
	display: none;
}
input[type="checkbox"] + span {
	color: #FF005D;
}
input[type="checkbox"] + span::before {
	content: '\2718';
}
input[type="checkbox"]:checked + span {
	color: green;
}
input[type="checkbox"]:checked + span::before {
	content: '\2714';
}

/**************************
    全局
***************************/
body {
	font-size: 16px;
	background-color: #eee;
	font-family: 'Microsoft YaHei','WenQuanYi Zen Hei',sans-serif;
}
*[unselectable] {
	user-select: none;
	-webkit-user-select: none;
}

/**************************
    input
***************************/
input[type="text"] {
	outline: none;
	padding: 0;
	margin: 0;
	color: #2196F3;
	background-color: rgba(0,0,0,0);
	border: none;
	border-bottom: #CCCCCC solid 1px;
	transition: border-bottom 0.3s;
}
input[type="text"]:focus {
	border-bottom: #2196F3 solid 1px;
}
/* button {
	background: none;
	border: none;
	box-shadow: none;
	outline: none;
} */

/**************************
    图标
***************************/
span[icon] {
	/* display: inline-block; */
	vertical-align: middle;
	text-align: center;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}

/**************************
   主导航栏
***************************/
#side-bar, #nav {
	background-color: #2196F3;
	color: white;
}
#side-bar {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;/* 填充到底部 */
	overflow-y: auto;
	min-width: 160px;
	text-align: center;
	font-weight: bold;
	z-index: 100;
}
#div-logo {
	display: inline-block;
	color: black;
}
#logo {
	font-size: 200%;
	font-weight: bold;
}
#version {
	font-size: 50%;
	text-align: center;
}
#nav {
	display: block;
	position: absolute;
	color: white;
	font-size: 130%;
	font-weight: bold;
	text-align: left;
}
#nav > li {
	padding: 1em 0 0 0.5em;
	cursor: pointer;
}
#toolbar-header {
	display: none;
}

@media (max-width: 767px) {
	#side-bar {
		position: relative;
		top: initial;
		left: initial;
		bottom: initial;
		padding: initial;
		overflow-y: initial;
		min-width: initial;
		text-align: initial;
		/* box-shadow: #2196F3 0 0 10px; */
	}
	#nav {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 0;
		overflow-x: auto;
		overflow-y: hidden;
		white-space: nowrap;
		font-size: 130%;
		font-weight: bold;
		background-color: white;
		border-top: solid #CCCCCC 1px;
		color: gray;
		text-align: center;
	}
	#nav::-webkit-scrollbar {
		display: none;
	}
	#div-logo {
		padding-left: 0.5em;
		display: inline-block;
		color: white;
	}
	#version {
		text-align: left;
	}
	#nav > li {
		display: inline-block;
		margin: 0 0.5em;
		padding: 0.5em 0;
		text-align: center;
	}
	#toolbar-header {
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		height: 30px;
		right: 0px;
		margin: auto;
	}
	#toolbar-header > span[icon] {
		min-width: 30px;
		min-height: 30px;
		line-height: 30px;
		font-size: 150%;
		margin-right: 0.5em;
	}
}
@media (max-height: 149px) {
	/* 触摸设备打开键盘时隐藏底部导航栏 */
	#nav {
		display: none;
	}
}

/**************************
   content
***************************/
#content {
	position: fixed;
	padding-left: 160px;/* 侧边栏宽度 */
	box-sizing: border-box;
	width: 100%;
	top: 0;
	bottom: 0;
	text-align: center;
	overflow: auto;
}
#content > section {
	display: none;
	text-align: left;
}
@media (max-width: 909px) {
	/* 为了在iPad(宽768px)上放下侧边栏和卡组栏(620px) */
	/* 把侧边栏调整为144px */
	#content {
		padding-left: 144px;
	}
	#side-bar {
		min-width: 144px;
	}
}
@media (max-width: 767px) {
	#content {
		position: relative;
		padding: 0;
		padding-bottom: 45px; /* 底部导航栏的高度 */
	}
}


/**************************
   Battle(Lobby)
***************************/
body[tab="lobby"] #lobby {
	display: inline-block;
}
#lobby {
	width: 80%;
	max-width: 600px;
}
#lobby-title {
	margin-top: 1em;
	text-align: center;
}
#lobby-logo {
	font-size: 300%;
	font-weight: bold;
	/* color: white; */
	/* text-shadow: #2196F3 0 0 10px; */
}
#lobby-header-bar {
	position: relative;
}
#input-nickame {
	width: 10em;
}
#input-nickame:invalid {
	border-color: #2196F3;
}
#input-nickame:valid {
	border-color: rgba(0,0,0,0);
}
#lobby-options {
	position: absolute;
	right: 0;
	bottom:0;
}
/* 房间列表 */
#room-list {
	padding-left: 2em;
	height: 20em;
	overflow: auto;
	border: solid #CCCCCC 1px;
}
#room-list > li {
	cursor: pointer;
	line-height: 150%;
	transition: all 0.3s;
}
#room-list > li:hover {
	color: #2196F3;
}
#room-list > li.password-required::before {
	/*color: #888;*/
	content: '\1F512';
}
#room-list,#room-list > li {
	list-style-type: decimal;
}
#room-list > li.live::before {
	color: red;
	content: '\25CFLive ';
}
#select-language {
	border: none;
}
#input-room-name,#input-create-room-password {
	max-width: 13em;
}
#button-create-room {
	height: 100%;
}
#lobby-add {
	display: none;
}
@media (max-width: 767px) {
	#lobby {
		width: 100%;
		min-height: 200px;
		margin-top: 10px;
	}
	#table-create-room {
		display: none;
	}
	#input-room-name,#input-create-room-password {
		width: 100%;
		max-width: 100%;
	}
	/* 加号下拉框 */
	#lobby-add {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 40%;
		max-width: 220px;
		min-width: 180px;
		background-color: #eee;
		padding: 0 1em;
		font-size: 150%;
		box-shadow: black 0 0 1em;
		border-left: solid #999 1px;
		border-bottom: solid #999 1px;
		visibility: hidden;
		transform: scaleY(0);
		transform-origin: top;
		transition: transform 0.3s;
	}
	#lobby-add.open {
		visibility: visible;
		transform: scaleY(1);
	}
	#lobby-add input {
		width: 100%;
	}
	#button-create-room-mobile {
		margin: 0;
		padding: 0;
		border: none;
		width: 100%;
		padding: 0.5em 0;
		margin: 1em 0;
		color: white;
		background-color: #2196F3;
	}
	#lobby-header-bar {
		line-height: 200%;
	}
	#room-list {
		padding-left: 0;
		border: none;
		height: auto;
	}
	#room-list > li {
		line-height: 100%;
		padding: 0.7em 0 0.7em 3px;
		border: solid #CCCCCC 1px;
		border-top: none;
	}
	#room-list > li:first-child {
		border-top: solid #CCCCCC 1px;
	}
	#room-list > li:nth-child(even) {
		background-color: rgba(0,0,0,0.03);
	}
	#room-list,#room-list > li {
		list-style-type: none;
	}
	#room-list > li:hover {
		background-color: white;
	}
	@media (max-device-height: 699px) {
		#lobby-title {
			display: none;
		}
	}
}


/**************************
   Deck
***************************/
/*
	侧边栏: 160px;
	详情栏: 260px; (图片高349)
	卡组栏: 620px;
	搜索栏: 180px;
 */
body[tab="deck"] #deck {
	display: inline-block;
}
#deck {
	text-align: center;
	white-space: nowrap;
	min-width: 1080px;
}
#deck > section {
	display: inline-block;
	vertical-align: top;
	text-align: left;
}
/* 详情栏 */
#Detail {
	width: 260px;
}#detail-card-figure {
	height: 349px;
}
#detail-card-image {
	border-radius: 4%;
}
#detail-card-data {
	height: 340px;
	overflow-y: auto;
	overflow-x: hidden;
	position: relative;
}
#detail-card-wxid {
	font-size: small;
}
#detail-card-name {
	font-weight: bold;
}
#detail-card-name > a {
	color: inherit;
	text-decoration: none;
}
#detail-card-name > a:active {
	color: red;
}
#detail-card-limiting {
	position: absolute;
	top: 0;
	right: 0.5em;
}
#detail-table {
	width: 100%;
	white-space: pre-line;
}
/* 卡组栏 */
#deck-main {
	position: relative;
	width: 620px;
}#select-decks,
#input-new-deck-name {
	width: 10em;
	box-sizing: border-box;
}
#main-deck-text-bar,
#lrig-deck-text-bar {
	font-size: small;
}
#main-deck-burst {
	float: right;
}
#main-deck-title,
#lrig-deck-title {
	color: green;
	transition: color 0.5s,background-color 0.5s;
}
#main-deck-title.invalid,
#lrig-deck-title.invalid {
	color: red;
	background-color: yellow;
}
#main-deck-title::before,
#lrig-deck-title::before {
	content: '\2714';
}
#main-deck-title.invalid::before,
#lrig-deck-title.invalid::before {
	content: '\2718';
}
#main-deck-zone img,
#lrig-deck-zone img {
	position: absolute;
	width: 62px;
	height: 87px;
	transition: left 0.3s, top 0.3s;
	cursor: pointer;
}
#main-deck-zone {
	position: relative;
	width: 620px;
	height: 435px;
}
#lrig-deck-zone {
	position: relative;
	width: 620px;
	height: 174px;
}
/* 搜索栏 */
#deck-search {
	width: 180px;
	text-align: center;
}
#div-search-tips {
	text-align: right;
}
#link-search-tips {
	font-size: small;
	color: inherit;
	text-decoration: underline;
}
#search-input {
	text-align: center;
	width: 100%;
	min-width: 5em;
	box-sizing: border-box;
}
#div-search-results {
	max-height: 600px;
	overflow-y: auto;
}
#search-list {
	text-align: center;
}
#search-list li {
	margin: 5px 0;
}
#search-list img {
	width: 127px;
	height: 176px;
	cursor: pointer;
}
#search-show-more {
	cursor: pointer;
	color: blue;
	text-align: center;
	padding: 0.5em 0;
}
@media (max-width: 1259px) {
	#deck {
		min-width: 820px;
	}
	#Detail {
		display: none !important;
	}
}
@media (max-width: 1019px) {
	#deck {
		min-width: inherit;
	}
	#deck-search {
		position: fixed;
		right: 0;
		top: 0;
		width: auto !important;
	}
	#div-search-tips {
		display: none;
	}
	#div-search-results {
		display: none;
	}
	#deck-search.open {
		background-color: #FFF;
		border-left: solid #999 1px;
		box-shadow: black 0 0 25px;
		bottom: 0;
	}
	#deck-search.open #div-search-tips {
		display: block;
	}
	#deck-search.open #div-search-results {
		display: block;
	}
	#deck-search.open #search-input {
		background-color: rgba(0,0,0,0);
		border: none;
		outline: none;
		color: #2196F3;
		border-bottom: #2196F3 solid 1px;
	}
}
@media (max-width: 767px) {
	#deck-search {
		position: absolute;
	}
}