/*****************************************
*                  body                  *
*****************************************/

* {outline: 0;}

html {/*padding-top: 55px;*/height: 100%;}

body {
	height: 100%;
	min-width: 1000px;
	color: #3c3c3c;
	font-size: 12px;
	font-family: 'Microsoft JhengHei', Tahoma, Verdana, Arial, Helvetica, sans-serif;
	background-color: #f5f5f5;
	overflow-y: scroll;
}

a {
	color: #3c3c3c;
	text-decoration: none;
	cursor: pointer;
}

a:hover {color: #000000;}

.ipt-text {
	height: 35px;
	font-size: 12px;
	font-family: 'Microsoft JhengHei', Tahoma, Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 5px 10px;
	border: #c7c7c7 1px solid;
	box-sizing: border-box;
	background: #ffffff;
}

textarea {
	font-size: 12px;
	font-family: 'Microsoft JhengHei', Tahoma, Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 5px 10px;
	border: #c7c7c7 1px solid;
	box-sizing: border-box;
	background: #ffffff;
	resize: none;
}

#wrap {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
}

#wrap2 {position: relative; width: 100%; min-height: 100%;}

.inner {
	position: relative;
	width: 100%;
	min-width: 1000px;
	max-width: 1155px;
	margin: 0 auto;
}

/*****************************************
*                 header                 *
*****************************************/

#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 52px;
	z-index: 2;
}

#header .inner {
	height: 100%;
	border-bottom: #41c5e7 3px solid;
	background-color: #000000;
}

#header h1 {height: 100%;}

#header .logo {
	display: block;
	width: 132px;
	height: 100%;
	margin-left: 18px;
	background: url(../images/common/header-logo.png) center center no-repeat;
}

#header #menu {
	position: absolute;
	top: 0;
	right: 0; /* 18px */
	height: 100%;
}

#header #menu li {float: left; height: 100%;}
#header #menu li a {
	position: relative;
	display: block;
	width: 182px;
	height: 100%;
	height: 52px\9;
	color: #ffffff;
	line-height: 52px;
	background-image: url(../images/common/header-menu.png);
	background-repeat: no-repeat;
	overflow: hidden;
}

#header #menu li .find {background-position: 47px 0;}
#header #menu li .edit {background-position: 49px -52px;}
#header #menu li .re-edit {background-position: 49px -416px;}
#header #menu li .account {
	width: auto;
/*	min-width: 136px;*/
	color: #a6a6a6;
	padding-right: 4px;
	background-color: #232323;
	background-position: -18px -104px;
	text-indent: 42px;
	white-space: nowrap;
}
#header #menu li .msg {width: 56px; background-color: #232323; background-position: center -208px;}
#header #menu li .login {
	width: 80px;
	background-color: #232323;
	background-position: center -312px;
}

#header #menu li .logout {
	width: 80px;
	background-color: #232323;
	background-position: center -468px;
}

#header #menu li .find:hover,
#header #menu li .edit:hover,
#header #menu li .re-edit:hover {background-color: #41c5e7;}

#header #menu li .account:hover {background-position: -18px -156px; color: #ffffff;}

#header #menu li .msg:hover {background-position: center -260px;}
#header #menu li .login:hover {background-position: center -364px;}
#header #menu li .logout:hover {background-position: center -520px;}

#header #menu li a span {position: absolute;}

#header #menu li .find span,
#header #menu li .edit span,
#header #menu li .re-edit span {
	top: 50%;
	width: 4px;
	height: 7px;
	margin-top: -4px;
	background: url(../images/common/menu-arrow.png) center top no-repeat;
}

#header #menu li .find span {left: 51px;}
#header #menu li .edit span, #header #menu li .re-edit span {left: 37px;}
#header #menu li .msg span {
	top: 10px;
	right: 8px;
	height: 18px;
	color: #ffffff;
	font-size: 12px;
	text-indent: 0;
	line-height: 16px;
	padding: 0 4px;
	border-radius: 3px;
	background-color: #d54d4d;
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);
	-o-transform: scale(0.8);
	transform: scale(0.8);
}

#header #menu li a:hover span,
#header #menu li.current a span {background-position: center bottom;}

#header #menu li.last {
	padding-left: 1px;
	background: url(../images/common/header-menu-divider.gif) #232323 left center no-repeat;
}

/*****************************************
*                  main                  *
*****************************************/

#main {
	position: relative;
	padding-top: 55px;
	padding-bottom: 150px; /* 96px + 54px */
	overflow: auto;
	z-index: 1;
}

.comboBox {
	position: relative;
	height: 36px;
	background-position: left top;
	background-repeat: no-repeat;
}

.comboBox-label {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.comboBox-label p {
	position: relative;
	display: block;
	height: 100%;
	color: #4c4c4c;
	font-size: 14px;
	font-weight: bold;
	line-height: 34px;
	text-align: left;
	margin-left: 23px;
	white-space: nowrap;
	overflow: hidden;
}

.comboBox-label p span {
	display: inline-block;
	position: relative;
	top: -1px;
	width: 0; /* 0 -> 24px */
	height: 100%;
/*	margin-right: 9px;*/
	vertical-align: middle;
	background: url(../images/common/comboBox-done.png) left center no-repeat;
	opacity: 0; /* 0 -> 1 */
	-webkit-transform-origin: 7px center;
	-moz-transform-origin: 7px center;
	-ms-transform-origin: 7px center;
	-o-transform-origin: 7px center;
	transform-origin: 7px center;
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7);
	-ms-transform: scale(0.7);
	-o-transform: scale(0.7);
	transform: scale(0.7);
}

.comboBox-content {
	display: none;
	position: absolute;
	top: 39px;
	left: 1px;
	background-position: left top;
	background-repeat: no-repeat;
	box-shadow: rgba(0, 0, 0, 0.2) 10px 10px 20px;
	z-index: 1;
}

.comboBox-content .btn {
	display: block;
	background-repeat: no-repeat;
}

.comboBox-content .btn-confirm {
	width: 132px;
	height: 36px;
	background-image: url(../images/common/comboBox-btn-confirm.png);
	background-position: left top;
}

.comboBox-content .btn-confirm:hover {background-position: left bottom;}

.comboBox-content .btn-reset {
	width: 132px;
	height: 36px;
	background-image: url(../images/common/comboBox-btn-reset.png);
	background-position: left top;
}

.comboBox-content .btn-reset:hover {background-position: left bottom;}

.comboBox-content .close {
	position: absolute;
	top: 5px;
	right: 9px;
	width: 40px;
	height: 40px;
	font-size: 0;
	text-indent: -5000px;
	background: url(../images/common/comboBox-close.png) center center no-repeat;
	z-index: 1;
}

.checkBox {text-align: left;}
.checkBox li {
	height: 20px;
	line-height: 20px;
	padding-left: 30px;
	background: url(../images/common/checkBox-uncheck.png) left center no-repeat;
	cursor: pointer;
}
.checkBox li.current {background-image: url(../images/common/checkBox-check.png)}
.checkBox li a {
	font-size: 16px;
}

.btn {
	display: block;
	background-position: left top;
	background-repeat: no-repeat;
}

.btn-delete {background-image: url(../images/common/icon-delete.png);}
.btn-add {background-image: url(../images/common/icon-add.png);}

.data-header {}
.data-list {}

.row {display: block;}
.row .col {display: table-cell; vertical-align: middle;}

.icon {color: #ffffff; font-size: 12px; text-indent: 0; line-height: 19px;}
.icon div {float: left; height: 19px;}

.icon-left {
	width: 5px;
	background-image: url(../images/common/title-icon-left.png);
	background-position: left center;
	background-repeat: no-repeat;
}

.icon-middle {
	padding: 0 5px;
	background-image: url(../images/common/title-icon-middle.png);
	background-position: left center;
	background-repeat: repeat-x;
}

.icon-middle img {position: relative; top: 2px;}

.icon-right {
	width: 5px;
	background-image: url(../images/common/title-icon-right.png);
	background-position: left center;
	background-repeat: no-repeat;
}

.note {color: #7f7f7f; font-size: 12px; line-height: 25px;}
.externaLink {text-decoration: underline;}

.pagination {text-align: center; margin-top: 22px;}
.pagination ul {}
.pagination li {
	display: inline-block;
	height: 27px;
	font-size: 14px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height: 27px;
	vertical-align: middle;
}
.pagination li.prev {width: 27px; margin-right: 24px;}
.pagination li.next {width: 27px; margin-left: 24px;}
.pagination li span {margin: 0 4px; color: #545454; font-weight: bold;}
.pagination li span.current {color: #000000;}
.pagination li a {
	display: block;
	width: 27px;
	height: 27px;
	font-size: 0;
	text-indent: -5000px;
	background-image: url(../images/common/pagination-arrow.gif);
	background-repeat: no-repeat;
}
.pagination li.prev a {background-position: left top;}
.pagination li.next a {background-position: right top;}
.pagination li.prev a:hover {background-position: left bottom;}
.pagination li.next a:hover {background-position: right bottom;}

/*****************************************
*                 footer                 *
*****************************************/

#footer {
	position: relative;
	height: 96px;
	text-align: center;
	margin-top: -96px;
	background-color: #e4e4e4;
	overflow: hidden;
	clear: both;
	z-index: 1;
}

#footer .mark {
	display: block;
	width: 102px;
	height: 40px;
	margin: 4px auto 0;
	background: url(../images/common/footer-mark.png) 0 0 no-repeat;
	cursor: default;
}

#footer .links {margin-top: 5px;}

#footer .links li {
	display: inline-block;
	height: 14px;
	margin-right: 14px;
	padding-right: 24px;
	background: url(../images/common/footer-slash.png) right center no-repeat;
}

#footer .links li.first {margin-left: -12px;}
#footer .links li.last {margin: 0; padding: 0; background: none;}

#footer .links li a {line-height: 14px;}

#footer .copyright {margin-top: 9px;}

/*****************************************
*                   pop                  *
*****************************************/

#pop {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	min-height: 100%;
	background: rgba(0, 0, 0, 0.5);
	background: url(../images/common/pop-bg.png) 0 0 repeat\9;
	z-index: 2;
}

.popMain {
	display: none;
	position: relative;
	margin-right: auto;
	margin-left: auto;
}

.popMain .inner {width: auto; min-width: initial; max-width: initial;}
.popMain .box-content {width: auto;}

.popMain .close {
	position: absolute;
	top: 23px;
	right: 22px;
	width: 50px;
	height: 50px;
	font-size: 0;
	text-indent: -5000px;
	background: url(../images/common/pop-close.png) center center no-repeat;
}

/* chooseAvatar
----------------------------------------*/

#chooseAvatar {
	width: 683px;
	height: auto;
/*	min-height: 618px;*/
	margin-top: 128px;
	margin-bottom: 128px;
	padding-bottom: 35px;
	box-shadow: rgba(0, 0, 0, 0.37) 9px 9px 30px;
	background-color: #ffffff;
}

/* addFriend
----------------------------------------*/

#addFriend {
	width: 491px;
	height: 379px;
	margin-top: 200px;
	margin-bottom: 200px;
	background: url(../images/common/pop-addFriend-canvas.png) 0 0 no-repeat;
	overflow: hidden;
}

#addFriend #canvas {position: absolute; top: 144px; left: 106px;}

#addFriend .name {
	position: absolute;
	top: 38px;
	left: 65px;
	width: 361px;
	height: 36px;
	color: #ffffff;
	font-size: 28px;
	line-height: 36px;
	text-align: center;
	overflow: hidden;
}

#addFriend .battleTag {
	position: absolute;
	top: 78px;
	left: 230px;
	color: #ffffff;
	font-size: 18px;
	border: none;
	padding-right: 0;
	padding-left: 0;
	background: none;
}

#addFriend .battleTag::selection {background-color: #ff7a31;}

/*#addFriend .fist {top: 204px;}
#addFriend .fist-left {left: 42px;}
#addFriend .fist-right {right: 49px;}
*/
#addFriend .mask {width: 100%; height: 100%; background: url(../images/common/pop-addFriend-mask.png) 0 0 no-repeat;}
	
#addFriend .close {
	top: 15px;
	right: 17px;
	background-image: url(../images/common/pop-close-w.png);
}

/* getSerialNumber
----------------------------------------*/

#getSerialNumber {
	width: 577px;
	height: 485px;
	margin-top: 180px;
	margin-bottom: 180px;
	background: url(../images/common/pop-getSerialNumber.jpg) center center no-repeat;
}

#getSerialNumber .number {
	position: absolute;
	top: 335px;
	left: 142px;
	width: 294px;
	height: 38px;
	font-size: 16px;
	text-align: center;
	letter-spacing: 1px;
}

#getSerialNumber .close {
	top: 14px;
	right: 14px;
	background-image: url(../images/common/pop-close-pp.png);
}

/* lottery
----------------------------------------*/

#lottery {
	width: 577px;
	height: 485px;
	margin-top: 180px;
	margin-bottom: 180px;
	background: url(../images/common/pop-lottery.jpg) center center no-repeat;
}

#lottery .close {
	top: 14px;
	right: 14px;
	background-image: url(../images/common/pop-close-pp.png);
}

/* reEditSuccess
----------------------------------------*/

#reEditSuccess {
	width: 577px;
	height: 485px;
	margin-top: 180px;
	margin-bottom: 180px;
	background: url(../images/common/pop-reEditSuccess.jpg) center center no-repeat;
}

#reEditSuccess .close {
	top: 14px;
	right: 14px;
	background-image: url(../images/common/pop-close-pp.png);
}

/*****************************************
*                fetching                *
*****************************************/

.fetching {
	display: none;
	height: 32px;
	padding: 10px 0;
	background: url(../images/common/ajax-loader.gif) center center no-repeat;
}

.fetching img {display: block; margin: 0 auto;}

/*****************************************
*                 loading                *
*****************************************/

#loading {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.6);
	z-index: 2;
}

.ie8 #loading {
	background: url(../images/common/loading-bg.png) 0 0 repeat;
}

#loading img {
	position: absolute;
	top: 50%;
	left: 50%;
	padding: 9px;
	margin: -25px 0 0 -25px;
/*	border-radius: 50%;
	box-shadow: rgba(0, 0, 0, 0.3) 0 0 10px;*/
	border: #41c5e7 3px solid;
	background-color: #ffffff;
}

#loading div:after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50px;
	height: 50px;
	border: #41c5e7 5px solid;
	border-top-color: transparent;
	border-right-color: transparent;
	border-radius: 50%;
	margin: -30px 0 0 -30px;
	content: '';
	-webkit-animation: loaderInner 1.0s linear 0s infinite;
	animation: loaderInner 1.0s linear 0s infinite;
}

#loading div:before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 70px;
	height: 70px;
	border: #41c5e7 5px dotted;
/*	border-top-color: transparent;
	border-bottom-color: transparent;*/
	border-radius: 50%;
	margin: -40px 0 0 -40px;
	content: '';
	-webkit-animation: loaderOuter 10.0s linear 0s infinite;
	animation: loaderOuter 10.0s linear 0s infinite;
}

@keyframes loaderInner {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-webkit-keyframes loaderInner {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes loaderOuter {
	0% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	100% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}

@-webkit-keyframes loaderOuter {
	0% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	100% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}

/*****************************************
*             common settings            *
*****************************************/

.clearFix:after {
	clear: both;
	content: '.';
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
}

.ele {position: absolute;}

.fltR {float: right;}
.fltL {float: left;}

.textHide {font-size: 0; text-indent: -5000px;}