/* CSS Settings */
body{
	margin     : 0px;
	background : #e8ecf7;
	color      : #1d1d1d;
}

header{
	display    : block;
	width      : 100%;
	min-height : 50px;
	margin     : 0px;
	padding    : 0px;
	background : #2a2a2a;
	color      : #a0a7e5;
}

header h1{
	width         : 80%;
	margin        : 0px 0px 0px 15px;
	padding       : 25px 10px 10px 10px;
	border-bottom : solid 2px;
	font-size     : 26px;
}

header h2{
	display     : none;
	margin      : 0px 0px 0px 25px;
	padding     : 0px;
	font-size   : 14px;
}

.location{
	margin  : 0px;
	padding : 10px 0px 15px 30px;
}

.location li{
	display : inline;
	padding : 0px 0px 0px 10px;
}

.footer{
	display        : block;
	width          : 100%;
	margin         : 0px 0px 0px 0px;
	padding        : 0px;
	background     : #2a2a2a;
	color          : #a0a7e5;
	text-align     : center;
	vertical-align : middle;
}

.copyright{
	text-align     : center;
	vertical-align : middle;
	padding        : 10px 0px 10px 0px;
}

/*---------------------------------------*/

header a:link, footer a:link{
	color : #d7dafa;
}
header a:visited, footer a:visited{
	color : #b0baf0;
}
header a:hover, footer a:hover{
	color : #333333;
	background : #b3bef6;
}
header a:active, footer a:active{
	color : #eaefff;
	text-decoration : none;
	border : dashed 1px #eaefff;
}
a:link{
	color : #252caf;
}
a:visited{
	color : #414fc6;
}
a:hover{
	color : #24283f;
	background : #c3ccfd;
}
a:active{
	color : #252cab;
	background : #cdd8ff;
}

/*---------------------------------------*/

.main{
	margin : 0px;
	display : table-cell;
	color : #071448;
}
.main h1{
}
.main h2{
}
.main h3{
	margin        : 25px 0px 25px 10px;
	padding       : 2px 5px 1px 10px;
	font-size     : 20px;
	border-left   : solid 6px #a8aaea;
	border-bottom : solid 1px #808aa3;
	min-width     : 200px;
}

.main h4{
	width         : 85%;
	margin        : 20px 0px 20px 15px;
	padding       : 0px 0px 3px 5px;
	font-size     : 16px;
	border-bottom : solid 1px #808aa3;
}

.main div{
	/*margin : 10px;*/
}

.main p{
	/*margin : 10px;*/
	margin : 20px 0 20px 15px;
}

.indent{
	padding : 0 0 0 15px;
}

.shelf{
	margin : 20px 0 20px 10px;
	/*padding : 5px 0 5px 10px;*/
	/*width : 100%;*/
	clear : both;
}

.partIndex{
	text-align : center;
	vertical-align : bottom;
	min-width : 75px;
	margin : 0;
	padding : 0px 5px 5px 5px;
	display : table-cell;
}

.divider{
	text-align : center;
	vertical-align : bottom;
	min-width : 40px;
	margin : 0;
	padding : 0 0 5px 0;
	display : table-cell;
}

.itemBox{
	text-align : center;
	vertical-align : bottom;
	padding : 0 0 0 0;
	display : table-cell;
}

.chkbox{
	text-align : center;
	vertical-align : bottom;
	width : 62px;
	padding : 5px;
	display : table-cell;
}

.innerRight{
	float : right;
}

/*---------------------------------------*/

.exp{
	border-collapse : collapse;
	margin :0px;
	padding :0px;
}

.exp th{
	background : #dce3fd;
	margin : 0px;
	padding : 5px;
	border : solid 1px;
}

.exp td{
	text-align : right;
	margin : 0px;
	padding : 5px;
	border : solid 1px;
}

.grp1{
	background : #fafafa;
}

.grp2{
	background : #efefef;
}

.grp3{
	background : #e2e2e2;
}

.grp4{
	background : #d7d7d7;
}
.grp5{
	background : #cacaca;
}

.expInfo td{
	background : #bebebe;
}

.grp0{
	display : none;
}

/*---------------------------------------*/

.chkBox{
	width : 26px;
	height : 26px;
}

.inputItem{
/*input[type="number"], input[type="text"], select{*/
	text-align : center;
	padding : 3px;
	font-size : 20px;
	border : solid 1px;
	margin : 0;
	width : 85px;
	box-sizing : border-box;
}

.setting{
	text-align : center;
	padding : 3px;
	font-size : 20px;
	border : solid 1px;
	margin : 0;
	width : 120px;
	box-sizing : border-box;
}

input[type="number"]:focus, input[type="text"]:focus, select:focus{
	background : #fdde5c;
}

input[type="submit"], input[type="reset"]{
	text-align : center;
	padding : 3px;
	font-size : 18px;
	margin : 0;
	width : 90px;
}

/*---------------------------------------*/

.card{
	overflow      : hidden;
	width         : 350px;
	height        : 142px;
	margin        : 10px 0px 10px 0px;
	padding       : 0px;
	border        : solid 1px;
	border-radius : 10px;
	list-style    : none;
	text-align    : left;
}

.cardRightTop{
	float      : right;
	width      : 55px;
	margin     : 0px 0px 0px 0px;
	padding    : 4px 4px 0px 0px;
	text-align : right;
}
.cardLeftTop{
	display : none;
	float   : left;
	width   : 30px;
	margin  : 0px 0px 0px 0px;
	padding : 4px 0px 0px 4px;
}
.cardTitle{
	width         : 100%;
	margin        : 0px 0px 0px 0px;
	padding       : 4px 0px 4px 0px;
	border-bottom : solid 1px;
	text-align    : center;
}
.cardImagePort{
	overflow : hidden;
	float    : left;
	width    : 100px;
	height   : 100px;
	margin   : 5px 5px 5px 5px;
	padding  : 0px;
}
.cardIcon{
	width         : 100px;
	height        : 100px;
	margin        : 0px;
	border-radius : 10px;
}
.isLeader{
	display  : none;
	position : relative;
	top      : -100%;
	right    : -80%;
	width    : 18px;
	height   : 18px;
	margin   : 0px 0px 0px 0px;
	padding  : 0px;
}
.cardParamFullWidth{
	float   : left;
	width   : 230px;
	margin  : 5px 5px 5px 5px;
	padding : 0px 0px 0px 0px;
}
.cardParamHalfWidth{
	float   : left;
	width   : 100px;
	margin  : 5px 5px 5px 5px;
	padding : 0px 0px 0px 0px;
}
.cardName{
	width      : 250px;
	border     : solid 1px #aaaaaa;
	background : none;
	text-align : center;
	font-size  : 11pt;
}
/*.cardName:focus{
	width      : 250px;
	border     : solid 1px #333333;
	background : #fafafa;
	text-align : center;
	font-size  : 11pt;
}*/
.cardInputNumber{
	width      : 60px;
	height     : auto;
	margin     : 0px 0px 0px 0px;
	padding    : 0px 0px 0px 0px;
	border     : solid 1px #333333;
	box-sizing : border-box;
	background : #f3f3f3;
	text-align : right;
	font-size  : 12pt;
}
.cardSelectAuto{
	width      : auto;
	margin     : 0px;
	padding    : 1px;
	border     : solid 1px;
	box-sizing : border-box;
	background : #f3f3f3;
	font-size  : 11pt;
}
.cardSelectLimitWidth{
	width      : 150px;
	margin     : 0px;
	padding    : 1px;
	border     : solid 1px;
	box-sizing : border-box;
	background : #f3f3f3;
	font-size  : 11pt;
}

.innerBox{
	text-align : center;
	vertical-align : bottom;
	padding : 0 0 0 0;
	display : table-cell;
}



.winRateView{
	overflow       : hidden;
	display        : table-cell;
	width          : 100px;
	margin         : 0px;
	padding        : 0px;
	list-style     : none;
	text-align     : left;
	vertical-align : bottom;
}
.winRateBox{
	overflow      : hidden;
	display       : block;
	width         : 100px;
	height        : 144px;
	margin        : 10px 0px 10px 0px;
	padding       : 0px;
	text-align    : center;
}
.winRateView fieldset{
	width         : 100px;
	height        : 124px;
	margin        : 30px 10px 10px 10px;
	padding       : 0px;
	text-align    : center;
	border        : none;
	line-height   : 1em;
}
.winRateView fieldset legend{
	position      : relative;
	top           : 1px;
	text-align    : center;
	font-size     : 13pt;
	/*height        : 25px;*/
	line-height   : 1em;
	/*border-left   : solid 1px;
	border-right  : solid 1px;*/
	padding       : 0px 5px 0px 5px;
}
.winRateView fieldset p{
	margin        : 30px 0px 0px 0px;
	padding       : 0px;
	text-align    : center;
}




/*.inputItem{
input[type="number"], input[type="text"], select{
	text-align : center;
	padding : 3px;
	font-size : 20px;
	border : solid 1px;
	margin : 0;
	width : 85px;
	box-sizing : border-box;
}*/

.tableFrame{
	overflow-y : scroll;
	width      : 800px;
	height     : 570px;
}
#cardTable{
	width           : 780px;
	background      : #cccccc;
	border-collapse : collapse;
	cursor          : pointer;
}
#cardTable THEAD{
	text-align : center;
	font-weight : bold;
}
#cardTable TBODY{
}
#cardTable TD{
	border : solid 1px;
}
#cardTable TD:first-child{
	width : 50px;
}
#cardTable TR:hover{
	background : #fde56a;
}
.oddTR{
	height     : 35px;
	background : #caf8d3;
}
.evenTR{
	height     : 35px;
	background : #eeeeee;
}



.labelRarity{
	display    : block;
	width      : 100px;
	height     : 25px;
	position   : absolute;
	top        : 100%;
	left       : 0;
	border     : solid 1px;
}
.labelAttribute{
	visibility : hidden;
	display    : block;
	border     : solid 1px;
}
.labelPersonality{
	display    : block;
	border     : solid 1px;
}

/*********************************************************************************/

.dropmenu{
	overflow   : visible;
	width      : 100%;
	height     : 30px;
	background : #3a3a3a;
	margin     : 0px;
	padding    : 0px;
	text-align : center;
}
.dropmenu li{
	float      : left;
	position   : relative;
	top        : 0px;
	left       : 0px;
	width      : 124px;
	height     : 24px;
	padding    : 3px;
	background : #2f2f2f;
	color      : #fafafa;
	list-style : none;
}
.dropmenu li:hover{
	background : #e0e0e0;
	color      : #333333;
}
/*.dropmenu li:hover dl{
	background : #3a3a3a;
}*/
.dropmenu li dl{
	position   : absolute;
	top        : 0;
	left       : 0;
	margin     : 0px;
}
/* 2ƒyƒCƒ“ */
.doublePane{
	width      : 200%;
}
.dropmenu li dl dt{
	width      : 124px;
	height     : 24px;
	margin     : 0px;
	padding    : 2px;
	border     : solid 1px #000000;
}
.dropmenu li dl dd{
	display    : none;
	float      : left;
	margin     : 0px;
	padding    : 0px;
	border     : solid 1px #000000;
}
.dropmenu li:hover dl dd{
	display    : block;
}
.dropmenu .pager{
	float      : right;
	/*position   : relative;
	top        : 0px;
	left       : 0px;*/
	width      : 170px;
	height     : 30px;
	margin     : 0px;
	padding    : 0px;
	background : #2f2f2f;
	color      : #fafafa;
	list-style : none;
	text-align : center;
}
.dropmenu .pager:hover{
	background : #2f2f2f;
	color      : #fafafa;
}
.pager span{
	display       : block;
	float         : left;
	width         : 60px;
	height        : 20px;
	margin        : 2px 2px 2px 2px;
	padding       : 2px;
	color         : #2f2f2f;
	background    : #dddddd;
	border-radius : 3px;
}
.pager div{
	float         : left;
	width         : 30px;
	height        : 20px;
	margin        : 2px 2px 2px 2px;
	padding       : 2px;
	/*border        : solid 1px;*/
	color         : #2f2f2f;
	background    : #dddddd;
	border-radius : 3px;
	cursor        : pointer;
}
.pager div:hover{
	background    : #fdde5c;
}
.dropmenu .search:hover{
	background : #2f2f2f;
	color      : #fafafa;
}
.dropmenu .search{
	float      : left;
	/*position   : relative;
	top        : 0px;
	left       : 0px;*/
	width      : 240px;
	height     : 30px;
	margin     : 0px;
	padding    : 0px;
	background : #2f2f2f;
	color      : #fafafa;
	list-style : none;
	text-align : center;
}
.search div{
	float      : left;
	text-align : center;
}
.search div input{
	display    : block;
	float      : left;
	background : #dddddd;
	width      : 150px;
	height     : 20px;
	margin     : 2px 0 0 25px;
	padding    : 2px 2px 2px 10px;
	border     : solid 0px;
	border-radius : 4px 0 0 4px;
	/*border-radius : 10px 0 0 10px;*/
}
.search div img{
	display       : block;
	float         : left;
	background    : #bbbbbb;
	margin        : 2px 0 0 0;
	padding       : 2px 5px 2px 4px;
	/*padding       : 2px 5px 2px 2px;*/
	border        : solid 0px;
	border-radius : 0 4px 4px 0;
	/*border-radius : 0 10px 10px 0;*/
}
.search div img:hover{
	background    : #fdde5c;
}

#modalBase{
	position      : fixed;
	top           : 0;
	left          : 0;
	z-index       : 9;
	width         : 100%;
	height        : 100%;
}
#modalBG{
	position      : fixed;
	top           : 0;
	left          : 0;
	z-index       : 10;
	width         : 100%;
	height        : 100%;
	background    : #000000;
	opacity       : 0.8;
	cursor        : pointer;
}
#conform{
	position      : absolute;
	z-index       : 12;
	left          : 35%;
	top           : 35%;
	width         : 380px;
	background    : #efefef;
	overflow      : visible;
	border-radius : 5px;
}
#conform p{
	margin        : 10px;
	padding       : 10px;
	text-align    : center;
}

#keyURL{
	position      : absolute;
	z-index       : 12;
	left          : 25%;
	top           : 25%;
	/*width         : 420px;*/
	background    : #efefef;
	overflow      : visible;
	border-radius : 5px;
}
#keyURL p{
	margin        : 10px;
	padding       : 10px;
	text-align    : center;
}
#keyURL textarea{
	width         : 400px;
	height        : 100px;
	margin        : 0px 20px 0px 20px;
	padding       : 3px;
	/*text-align    : center;*/
	resize        : none;
	word-wrap     : break-word;
}

#cardList{
	position      : absolute;
	z-index       : 11;
	left          : 5%;
	top           : 5%;
	height        : 600px;
	width         : 800px;
	background    : #aaaaaa;
	overflow      : visible;
}






/*********************************************************************************/

form fieldset{
	margin        : 10px 15px 10px 15px;
	width         : 290px;
	text-align    : left;
}


.filterSW{
	display : block;
	width : 124px;
	height : 24px;
	padding : 2px;
	background : #666666;
	text-align : center;
	vertical-align : middle;
	color : #fafafa;
	/*border : solid 1px #000000;*/
}
input[type=checkbox]:checked + .filterSW{
	background : #efefef;
	color : #333333;
}


.leaderMark{
	visibility: hidden;
	display: block;
	padding: 2px;
	background: #ff0099;
	position : relative;
	width: 80px;
	text-align: center;
	color: #fafafa;
	font-size: 10px;
	left: -25px;
	top: -98px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	/*letter-spacing: -0.07em;
	box-shadow: 0 1px 5px rgba(0,0,0,0.2);*/
}
input[type=checkbox]:checked + .leaderMark{
	visibility: visible;
}








/*---------------------------------------*/