@import 'base.css';
/**********************************************************
	Layout :
		is this layout part common?
		no. there is lots of pages not using this part.
		this part can be separated. but faster for net transport.
		and easy to programming.
***********************************************************/

header {
	position: relative;
	padding: 3px;
	border-bottom: 2px solid #000000;
	background: #cccccc;
}
header p.manualWindow {
	position: absolute;
	display: none;
	right: 10px;
	width: 300px;
	padding: 15px;
	font-size: 13px;
	border: 5px solid #000000;
	border-radius: 15px;
	line-height: 140%;
	overflow: auto;
	background: #ffffff;
	z-index: 1000;
}

#logo {
display: inline-block;
padding: 2px 20px;
margin: 3px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
}

nav.personal {
position: absolute;
min-width: 350px;
display: block;
top: 6px;
right: 10px;
text-align: right;
z-index: 2;
}
nav.personal>a {
display: inline-block;
padding: 3px 5px;
border: 1px solid #aaaaaa;
border-radius: 5px;
font-size: 12px;
font-weight: 600;
color: #000000;
background: #ffcccc;
}
nav.personal a:hover {
text-decoration: none;
background: #feefee;
}
#personalPopup {
	position: absolute;
	display: none;
	top: 30px;
	left: 0;
	width: 90%;
	border: 3px solid #000000;
	border-radius: 10px;
	padding: 10px;
	background: #ffffff;
	z-index: 999;
}
/************************ main *********************/
#main {
position: relative;
padding: 20px;
padding-bottom: 100px;
}
#main h1 {
font-size: 20px;
margin: 10px 20px;
}
#main h2 {
font-size: 16px;
margin: 10px 10px;
}

.column75 {
	padding-right: 26%;
}
.column25 {
	width: 25%;
}
#main section.container {
position: relative;
}

#main .rightColumn {
position: absolute;
right: 0;
top: 0;
min-height: 300px;
border: 1px solid #000000;
}

/******************** footer ************************/
footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	background: #000000;
	z-index: 1000;
}
footer p.copyright {
	padding: 10px 70px;
	color: #eeeeee;
}
footer a.main {
	position: absolute;
	display: inline-block;
	right: 10px;
	top: 10px;
	color: #000000;
	background: #ffffff;
	padding: 3px 10px;
	border-radius: 5px;
	font-size: 13px;
}

/******************** left ********************/
#left {
display: none;
position: relative;
float: left;
width: 260px;
padding-bottom: 100px;
overflow: hidden;
z-index: 10;
}
#left section.category {
width: 230px;
margin: 5px;
border: 2px solid #999999;
border-radius: 7px;
font-size: 12px;
background: #eeeeee;
}
#left section.category h1 {
border: 1px solid #aaaacc;
padding: 5px 10px;
border-radius: 5px;
margin: 5px;
background: #ccccff;
}
#left section.category nav {
margin: 10px;
}
#left section.category nav a {
text-decoration: none;
}
#left section.category nav dt {
margin-top: 5px;
}
#left section.category nav dd {
margin-left: 10px;
}

#leftGlobalCategory h1 {
background: #cccccc;
}
/***************************** ul.main ****************************/
ul.main {
	position: absolute;
	left: 200px;
	top: 5px;
	z-index: 10;
	background: #cccccc;
}
ul.main li {
	position: relative;
	display: inline-block;;
	min-width: 100px;
}
ul.main li>a {
	display: inline-block;
	margin-left: 5px;
	padding: 5px 20px;
	border: 1px solid #000000;
	border-radius: 5px;
	font-size: 12px;
	font-weight: 600;
	color: #000000;
	background: #ccccff;
}
ul.main li>a:hover {
	text-decoration: none;
	background: #eeeeff;
}
ul.main li nav.sub {
	position: absolute;
	width: 100%;
	display: none;
	border: 1px solid #000000;
	top: 25px;
	font-size: 12px;
	z-index: 1000;
	background: #ffffff;
}
ul.main li nav.sub a {
	display: block;
	padding: 3px 10px;
	border-bottom: 1px solid #000000;
	color: #000000;
}
/***************************** section.summary *****************************/
section.summary {
	border-bottom: 1px solid #000000;
	padding-bottom: 10px;
	float: left;
	width: 100%;
}

section.summary dl {
	float: left;
	border: 1px solid #000000;
	border-left: 0;
	display: inline-block;
	font-size: 12px;
}
section.summary dl.header {
	border-left: 1px solid #000000;
}

section.summary dl dt {
	background: #cccccc;
}
section.summary dl dt ,
section.summary dl dd {
	padding: 3px 20px;
	border-bottom: 1px solid #000000;
}
section.summary dl dd {
	text-align: right;
}
nav.component a.current {
	background: #cfccfc;
}

#right {
display: none;
position: fixed;
width: 25%;
right: 0;
top: 40px;
border: 3px solid #000000;
border-right: 0;
background: #ffffff;
z-index: 1;
}
/************************ right extends ************************/
#right dl > dt {
margin: 0;
padding: 2px 10px;
font-size: 12px;
background: #eeeeee;
border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
cursor: pointer;
}
#right dl:first-child > dt {
border-top: 0;
}

#right dl > dd.rightMenu h1 {
display: none;
}
#right dl > dd.rightMenu ul {
list-style: none;
}
#right dl > dd.rightMenu ul li {
}
#right dl > dd.rightMenu ul li a {
display: block;
font-size: 12px;
color: #000000;
padding: 2px 5px;
border-bottom: 1px solid #000000;
}
#right dl > dd.rightMenu ul li a:hover {
text-decoration: none;
background: #ccccff;
}
#right dl > dd.rightMenu table.list {
}
#right dl > dd.rightMenu table.list th ,
#right dl > dd.rightMenu table.list td {
font-size: 12px;
border-bottom: 1px solid #000000;
vertical-align: middle;
}
#right dl > dd.rightMenu table.list th {
padding: 3px;
border-top: 1px solid #000000;
background: #cccccc;
}
#right dl > dd.rightMenu table.list td a {
color: #000000;
font-size: 12px;
}
#right dl > dd.rightMenu table.list td img {
height: 50px;
}

/***************************** #ItemStatRegistItemList *****************************/
#ItemStatRegistItemList {
}
#ItemStatRegistItemList ul {
margin-left: 30px;
}
#ItemStatRegistItemList td {
padding: 5px 10px;
}
#ItemStatRegistItemList td.title {
width: 40%;
}
#ItemStatRegistItemList td.title h2 {
margin: 0;
}
/**************************** copy/shop item ****************************/
#CopyitemSearch {
display: block;
text-align: right;
}
/********************************* write item container *********************************/ 
.itemContainer dl.targetItem dt img {
width: 178px;
}
.itemContainer dl.targetItem {
position: relative;
display: inline-block;
font-size: 12px;
margin: 5px;
border: 1px solid #000000;
border-radius: 10px;
}
.itemContainer dl.targetItem input[type=number] {
width: 60px;
border: 1px solid #cccccc;
}
.itemContainer dl.targetItem input[type=checkbox] {
position: absolute;
left: 5px;
top: 5px;
z-index: 1;

}
.itemContainer #items {
border: 5px solid #f90;
border-radius: 10px;
margin: 10px;
padding: 10px;
min-height: 200px;
}
form.simple dl.targetItem dt {
	background: transparent;
	padding: 5px;
}
form.simple dl.targetItem dd {
	border: 0;
	border-top: 1px solid #cccccc;
}

#GPerfectItemHistoryList {
}
#GPerfectItemHistoryList tr.use td {
background-color: pink;
}

/*2014-11-04*/
.recommendItem{position:relative;}
.addItem{height:26px;}
.addItem a{position:absolute; top:1px; background:#777; color:#fff; padding:5px 10px; font-weight:bold; border:1px solid #333}
.addItem a:hover{text-decoration:none; background:#333;}

.itemContainer dl.setItem dt .thum_img{width:178px; overflow:hidden; position:relative; margin:0 auto;text-align:center;}
.itemContainer dl.setItem dt img {height:98px; width:178px;}
.itemContainer dl.setItem dt span.title{position:absolute;top:10px; font-weight:bold}
.itemContainer dl.setItem dt a{position:absolute;top:5px;right:5px;display:inline-block; background:#666; height:22px;  padding:0 3px;text-decoration: none; font-size:20px; font-weight:bold; color:#fff}
.itemContainer dl.setItem {position: relative;display: inline-table;font-size: 12px;margin: 5px;border: 1px solid #000000;border-radius: 5px;min-width:189px;vertical-align:top;}
form.simple dl.setItem dt {background: transparent;padding: 30px 5px 5px;}
form.simple dl.setItem dd {border:0; border-top: 1px solid #cccccc;margin:0;padding:5px; }
form.simple dl.setItem dd p{margin:0;}

/*2014-11-06*/
.active{color:#999 !important; background:#E4E7FF !important; border: 1px solid #999 !important;}
td span.mr20{display:inline-block; margin-right:20px}
.capsuleType{margin-top:5px;font-weight:bold}
.capsuleType a{display:inline-block; border-radius:3px; padding:2px !important; margin-right:2px; background:#eee; border:1px solid #999; }
.capsuleType a.active{background:#999 !important; border:1px solid #333 !important;}
.capsuleType a img{width:20px; height:20px;}

/*2014-11-07*/
.itemContainer dl.randomItem dt{background:#fff; padding:2px 2px 0; border-bottom:1px solid #ddd}
.itemContainer dl.randomItem dt p{width:152px;font-weight:bold;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;line-height: 1.5em;}
.itemContainer dl.randomItem dt p span{font-weight:normal}
.itemContainer dl.randomItem dt span.title{position:absolute;top:10px;s font-weight:bold}
.itemContainer dl.randomItem dt a.delete{position:absolute;top:2px;right:1px;display:inline-block; background:#666; height:22px;  padding:0 3px;text-decoration: none; font-size:20px; font-weight:bold; color:#fff}
.itemContainer dl.randomItem dd{margin-top:0; padding:0;}
.itemContainer dl.randomItem dd .thum_img{width:178px; overflow:hidden; position:relative; margin:0 auto;text-align:center;}
.itemContainer dl.randomItem dd img {height:98px; width:178px;}
.itemContainer dl.randomItem {position: relative;display: inline-table;font-size: 12px;margin:4px 3px;border:1px solid #000000;border-radius:5px; max-width:190px; vertical-align:top;}
#right .bottom{display:none}

/*2014-11-10 edit contents layout */
.layoutArea{clear:both}
.layoutArea:after{display:block; content:''; clear:both}
.editLayout{position:relative;float:left;min-width:100%;width:20%;border:1px solid #000; margin-top:20px; margin-right:20px}
.editLayout li{position:relative; display:table; width:100%;border-bottom: 1px solid #000; background:#eee !important}
.editLayout li.active{background:#eee;}
.editLayout li .ico{display:none}
.editLayout li.editActive .ico{display:block; position:absolute; right:-15px}
.editLayout li p.areaTit{width:70%; padding-left:5px; line-height:1.5em}
.editLayout li p{display:table-cell; padding:5px}
.editLayout li p.btnArea a{display:inline-block; color:#000; background:#fff; max-width:36px; text-align:center; padding:3px 6px; border:1px solid #666; border-radius:3px;}
.editLayout li p.btnArea a.edit{width:35px; padding:9px 6px}
.editLayout .fixed{text-align:center;padding:5px 0;background:#bbb !important}
table.layout{float:left; border:1px solid #333; margin-top:20px}
form.simple table.layout tbody th{width:auto;}
form.simple table.layout tbody td{background:#f9f9f9; border:1px solid #333;}
table.layout th{background:#ccc; padding:10px 0}

/*2014.11.18 썸네일 수정*/
.thumBox{border:1px solid #ddd; display:inline-block; background:#fff; padding:5px; margin:10px 10px 0; min-width:180px}
.thum .area .img .corver.point{border:none !important}
.thum .area .img .corver .border{background:url(images/bg_corver01.png) no-repeat;background-size:cover;width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index:2}
.img span{position:absolute; bottom:0; left:-1px; width:23px; height:22px; -webkit-border-top-right-radius:5px; -moz-border-top-right-radius:5px;border-top-right-radius:5px; z-index:1; text-indent:-999em; background:#393738 url(images/ico_temstyle.png) no-repeat;}
.thum{padding:10px 0}
.thum .area{display:inline-block;}
.thum ul{display:inline-block}
.thum ul li{line-height:1.8em}
.thum .area .img span.style{background-position:4px 1px}
.thum .area .img span.markAward{background-position:-22px 1px}
.thum .area .img span.dartThrow{background-position:-43px 1px}
.thum .area .img span.frame{background-position:-63px 1px}
.thum .area .img span.effect{background-position:-88px 1px}
.thum .area .img span.dynamicFrame{background-position:1px -18px}
.thum .area .img span.sound{background-position:-22px -18px}
.thum .area .img span.bull{background-position:-43px -18px}
.thum .area .img span.award{background-position:-62px -18px}
.thum .area .img span.set{background-position:-86px -18px}
.thum .area {margin:0 auto;}
.thum .area .img .corver{width:80px;height:80px;overflow:hidden;position:relative;}
.thum .area .img .corver img{width:80px; height:80px; position:absolute; top:0; left:0; margin-left:0; }

/*2014.11.19 핫 아이템 탭버튼 추가*/
.tabSt01{position:relative; top:12px; clear:both}
.tabSt01:after{display:block; content:''; clear:both;}
.tabSt01 a{float:left; width:20%; padding:20px 70px;text-align:center; background:#666; border:2px solid #666; color:#fff; }
.tabSt01 a.Active{border-bottom:2px solid #fff;color:#333;font-weight:bold; background:#fff; }

/*2014.11.20 추가*/
form.simple dl.setItem dt.pd5{padding:5px}
form.simple dl.setItem dt.pd5 a{z-index:100;background:#000;border:1px solid #fff; }
.itemContainer{position:relative}
form.simple dl.setItem dd p{white-space: nowrap;text-overflow: ellipsis;width: 168px;overflow: hidden;}/*style.css 394라인에 속성만 추가*/
.itemContainer dl.setItem dt.categori{padding:5px}
.itemContainer dl.setItem dt.categori span.title{display:inline-block;position:relative;top:0; width:178px; padding:10px 0;text-align:center; background:#333; color:#fff; font-weight:bold}
.itemContainer dl.setItem dd p.parts{overflow:visible;white-space:normal;height:36px}
.itemContainer dl.setItem dd p.parts span{display:inline-block;margin-bottom:2px; width:16px; height:16px; text-indent:-999em; background:#393738 url(images/ico_temstyle.png) no-repeat;}
.itemContainer dl.setItem dd p.parts span.style{background-position:0px -1px}
.itemContainer dl.setItem dd p.parts span.markAward{background-position:-25px -2px}
.itemContainer dl.setItem dd p.parts span.dartThrow{background-position:-46px -2px}
.itemContainer dl.setItem dd p.parts span.frame{background-position:-66px -2px}
.itemContainer dl.setItem dd p.parts span.effect{background-position:-91px -2px}
.itemContainer dl.setItem dd p.parts span.dynamicFrame{background-position:-2px -20px}
.itemContainer dl.setItem dd p.parts span.sound{background-position:-26px -20px}
.itemContainer dl.setItem dd p.parts span.bull{background-position:-48px -20px}
.itemContainer dl.setItem dd p.parts span.award{background-position:-66px -20px}
.itemContainer dl.setItem dd p.parts span.set{background-position:-89px -20px}



/*2014.11.27 edit_layout*/
a.addItem{position:absolute; right:0; top:0; background:#666; color:#fff; padding:10px 0 0; clear:both; display:inline-block; width:80px;text-align:center;}
.editLayout li.buttons{padding:5px 0; text-align:center;background:#fff !important;}
.editLayout li.buttons a{display:inline-block; margin-left:5px; padding:5px 20px; border:1px solid #000000; border-radius:5px; font-size:12px; font-weight:600; color:#000000; background:#ccccff;}
/*기존 css에 속성만 추가*/

/*추가*/
table.layout.right{position:relative;font-size: 10pt;}
table.layout.right tbody th ,
table.layout.right tbody td {height:27px;border-top: 1px solid #333333;border-bottom: 1px solid #333333;vertical-align: middle;}
table.layout.right tbody th {text-align: right;padding-right: 20px;background: #cccccc;}
table.layout.right tbody td {padding-left: 10px;}
table.layout.right tbody td * {vertical-align: middle;}
table.layout.right tbody td input[readonly] {background: #ccf;}
table.layout.right tbody th.buttons a {display: inline-block;padding: 2px 10px;font-size: 12px;border: 1px solid #000000;border-radius: 8px;background: #ddddff;color: #000000;}
table.layout.right tbody th.buttons a:hover {text-decoration: none;background: #ffcccc;}
table.layout.right tbody td.buttons a {display: inline-block;padding: 2px 10px;font-size: 12px;border: 1px solid #000000;border-radius: 8px;background: #ddddff;color: #000000;}
table.layout.right tbody td.buttons a:hover {text-decoration: none;background: #ffcccc;}
table.layout.right tbody td.title {text-align: left;padding: 0 10px;}
form.simple.right ul li span.notice ,
table.layout.right tbody td span.notice {font-size: 11px;margin-left: 10px;color: #f60f60;}
table.layout.right caption {position: relative;text-align: left;padding: 5px 10px;border: 1px solid #000000;border-radius: 15px;background: #eeeeff;margin-bottom: 5px;}
table.layout.right caption span.title {position: absolute;width: 60%;left: 50%;text-align: center;font-weight: 600;font-size: 14px;margin-left: -30%;}
table.layout.right tbody td {text-align:left;background: #f9f9f9;border: 1px solid #333; }
.left_form {position:absolute; top:68px; left:11px; float:left;width:274px}
.r_cont01_01 {padding:0 15% 0 324px;}


/*2014.12.01*/
td.parts{overflow:visible;white-space:normal;height:36px}
td.parts span{display:inline-block;margin-bottom:2px; width:16px; height:16px; text-indent:-999em; background:#393738 url(images/ico_temstyle.png) no-repeat;}
td.parts span.style{background-position:0px -1px}
td.parts span.markAward{background-position:-25px -2px}
td.parts span.dartThrow{background-position:-46px -2px}
td.parts span.frame{background-position:-66px -2px}
td.parts span.effect{background-position:-91px -2px}
td.parts span.dynamicFrame{background-position:-2px -20px}
td.parts span.sound{background-position:-26px -20px}
td.parts span.bull{background-position:-48px -20px}
td.parts span.award{background-position:-66px -20px}
tr.hotItemList td{background: #ffd5d5;}

td.thum ul{list-style:none; }
td.thum {position:relative;}
td.thum .area{display:block;}
table.layout.right.th10 tbody th{width:10%}

.input_s_s01 {}
.input_s_s01 span {width:160px; padding-top:10px; display:block;}

.lay_sty01 {position:absolute; top:35px; left:10px; background:#fff; border:1px solid #000; z-index:1000;}
.lay_sty01 .lay_tit_s01 {position:relative; padding:10px; background:#ccc; text-align:left;}
.lay_sty01 .lay_tit_s01 a {position:absolute; top:10px; right:12px; color:#000; text-decoration:none;}
.lay_sty01 .lay_cont_s01 {padding:10px;}