@charset "UTF-8";

/* Character Common
---------------------------------------------------------------------*/
#container {
    float:left;
	width:785px;
}

/* visual text */
#container #main3column .jobIntroduction p {
	width: 300px;
	height: 140px;
}

/* job change chart */
#container #main3column .imgChartJobChange li a {
	display: block;
	width: 120px;
	height: 140px;
	text-indent: -9999px;
	border: none;
}
#container #main3column .imgChartJobChange li.firstJob01 a {
	position: absolute;
	left: 10px;
	top: 240px;
}
#container #main3column .imgChartJobChange li.firstJob02 a {
	position: absolute;
	left: 13px;
	top: 159px;
}
#container #main3column .imgChartJobChange li.firstJob03 a {
	position: absolute;
	left: 13px;
	top: 248px;
}
#container #main3column .imgChartJobChange li.firstJob04 a {
    position: absolute;
    left: 13px;
    top: 53px;
}
#container #main3column .imgChartJobChange li.secondJob01 a {
	position: absolute;
	left: 170px;
	top: 50px;
}
#container #main3column .imgChartJobChange li.secondJob02 a {
	position: absolute;
	left: 170px;
	top: 260px;
}
#container #main3column .imgChartJobChange li.secondJob03 a {
	position: absolute;
	left: 170px;
	top: 465px;
}
#container #main3column .imgChartJobChange li.secondJob04 a {
    position: absolute;
    left: 313px;
    top: 51px;
}
#container #main3column .imgChartJobChange li.secondUpperJob01 a {
	position: absolute;
	left: 316px;
	top: 50px;
}
#container #main3column .imgChartJobChange li.secondUpperJob02 a {
	position: absolute;
	left: 316px;
	top: 260px;
}
#container #main3column .imgChartJobChange li.secondUpperJob03 a {
	position: absolute;
	left: 316px;
	top: 465px;
}
#container #main3column .imgChartJobChange li.thirdJob01 a {
	position: absolute;
	left: 462px;
	top: 50px;
}
#container #main3column .imgChartJobChange li.thirdJob02 a {
	position: absolute;
	left: 462px;
	top: 260px;
}
#container #main3column .imgChartJobChange li.thirdJob03 a {
	position: absolute;
	left: 462px;
	top: 465px;
}

/* job change step */
#container #main3column .jobChangeStep {
	background: url(/gameguide/character/images/bg_jobchange_step.gif) no-repeat left top;
	padding: 10px;
	height: 180px;
	width: 182px;
	margin: 0 1px 10px 0;
	float: left;
}
#container #main3column .jobChangeStep p {
	float: left;
	width: 72px;
	margin: 0 5px 0 0;
}
#container #main3column .jobChangeStep img.map {
	margin: 5px 0 0;
	float: left;
}

/* job skill */
#container #main3column .thumbJobSkill img {
	margin: 0 0 10px;
	border: solid 1px #CCC;
}

/* tab - skill table */
div.skillArea div {
	padding: 10px;
}

#tab {
	margin-left: 0;
	padding-left: 0;
	margin-bottom: 1em;
	border-bottom: 2px solid #333;
	height: 1.5em;
	overflow: hidden;
}
#tab li {
	float: left;
	width: 64px;
	height: 1.5em;
}
#tab li a {
	display: block;
	width: 60px;
	height: 1.5em;
	border: 1px solid #ccc;
	border-bottom: 0;

	color: #777;
	text-align: center;
}
#tab li a:hover,
#tab li.present a {
	border-color: #333;
	color: #000;
}
#page1, #page2, #page3, #page4, #page5,
#page6, #page7, #page8, #page9, #page10 {
	margin-bottom: 12em;
	padding-top: 1em;
}
/*#skillArcher,
#skillHunter,
#skillBard,
#skillDancer,
#skillSniper,
#skillClown,
#skillGypsy,
#skillRanger,
#skillMinstrel,
#skillWanderer {
	margin-bottom: 12em;
	padding-top: 1em;
}
*/

/* archer
---------------------------------------------------------------------*/
#container #main3column .jobIntroduction {
	background: url(/gameguide/character/images/archer/job_image.jpg) no-repeat left top;
	width: 610px;
	height: 376px;
}
#container #main3column .imgChartJobChange {
	background: url(/gameguide/character/images/archer/chart_job_change.jpg) no-repeat left top;
	display: block;
	width: 610px;
	height: 631px;
	position: relative;
	margin: 20px 0 0;
}

/* swordman
---------------------------------------------------------------------*/
#container #main3column .swordman .jobIntroduction{
	background: url(/gameguide/character/images/swordman/job_image.jpg) no-repeat left top;
	width: 610px;
	height: 376px;
}
#container #main3column .swordman .imgChartJobChange{
	background: url(/gameguide/character/images/swordman/chart_job_change.jpg) no-repeat left top;
	display: block;
	width: 610px;
	height:423px;
	position: relative;
	margin: 20px 0 0;
}

/* magician
---------------------------------------------------------------------*/
#container #main3column .magician .jobIntroduction{
	background: url(/gameguide/character/images/magician/job_image.jpg) no-repeat left top;
	width: 610px;
	height: 376px;
}
#container #main3column .magician .imgChartJobChange{
	background: url(/gameguide/character/images/magician/chart_job_change.jpg) no-repeat left top;
	display: block;
	width: 610px;
	height:423px;
	position: relative;
	margin: 20px 0 0;
}

/* thief
---------------------------------------------------------------------*/
#container #main3column .thief .jobIntroduction{
	background: url(/gameguide/character/images/thief/job_image.jpg) no-repeat left top;
	width: 610px;
	height: 376px;
}
#container #main3column .thief .imgChartJobChange{
	background: url(/gameguide/character/images/thief/chart_job_change.jpg) no-repeat left top;
	display: block;
	width: 610px;
	height:423px;
	position: relative;
	margin: 20px 0 0;
}

/* acolyte
---------------------------------------------------------------------*/
#container #main3column .acolyte .jobIntroduction{
	background: url(/gameguide/character/images/acolyte/job_image.jpg) no-repeat left top;
	width: 610px;
	height: 376px;
}
#container #main3column .acolyte .imgChartJobChange{
	background: url(/gameguide/character/images/acolyte/chart_job_change.jpg) no-repeat left top;
	display: block;
	width: 610px;
	height:423px;
	position: relative;
	margin: 20px 0 0;
}

/* marchant
---------------------------------------------------------------------*/
#container #main3column .merchant .jobIntroduction{
	background: url(/gameguide/character/images/merchant/job_image.jpg) no-repeat left top;
	width: 610px;
	height: 376px;
}
#container #main3column .merchant .imgChartJobChange{
	background: url(/gameguide/character/images/merchant/chart_job_change.jpg) no-repeat left top;
	display: block;
	width: 610px;
	height:423px;
	position: relative;
	margin: 20px 0 0;
}

/* taekwon-kid
---------------------------------------------------------------------*/
#container #main3column .taekwon-kid .jobIntroduction{
	background: url(/gameguide/character/images/taekwon-kid/job_image.jpg) no-repeat left top;
	width: 610px;
	height: 376px;
}
#container #main3column .taekwon-kid .imgChartJobChange{
	background: url(/gameguide/character/images/taekwon-kid/chart_job_change.jpg) no-repeat left top;
	display: block;
	width: 610px;
	height:423px;
	position: relative;
	margin: 20px 0 0;
}

/* supernovice
---------------------------------------------------------------------*/
#container #main3column .supernovice .jobIntroduction{
	background: url(/gameguide/character/images/supernovice/job_image.jpg) no-repeat left top;
	width: 610px;
	height: 376px;
}

/* ninja
---------------------------------------------------------------------*/
#container #main3column .ninja .jobIntroduction{
	background: url(/gameguide/character/images/ninja/job_image.jpg) no-repeat left top;
	width: 610px;
	height: 376px;
}
#container #main3column .ninja .imgChartJobChange{
	background: url(/gameguide/character/images/ninja/chart_job_change.jpg) no-repeat left top;
	display: block;
	width: 610px;
	height:423px;
	position: relative;
	margin: 20px 0 0;
}

/* gunslinger
---------------------------------------------------------------------*/
#container #main3column .gunslinger .jobIntroduction{
	background: url(/gameguide/character/images/gunslinger/job_image.jpg) no-repeat left top;
	width: 610px;
	height: 376px;
}
#container #main3column .gunslinger .imgChartJobChange{
	background: url(/gameguide/character/images/gunslinger/chart_job_change.jpg) no-repeat left top;
	display: block;
	width: 610px;
	height:217px;
	position: relative;
	margin: 20px 0 0;
}



#skill-1 .skillName,#skill-2 .skillName,#skill-3 .skillName,#skill-4 .skillName,
#skill-5 .skillName,#skill-6 .skillName,#skill-7 .skillName,#skill-8 .skillName,
#skill-9 .skillName,#skill-10 .skillName{
	width: 20%;
}
#skill-1 .skillimage,#skill-2 .skillimage,#skill-3 .skillimage,#skill-4 .skillimage,
#skill-5 .skillimage,#skill-6 .skillimage,#skill-7 .skillimage,#skill-8 .skillimage,
#skill-9 .skillimage,#skill-10 .skillimage{
	width: 11%;
}
#skill-1 .skillimageArea,#skill-2 .skillimageArea,#skill-3 .skillimageArea,#skill-4 .skillimageArea,
#skill-5 .skillimageArea,#skill-6 .skillimageArea,#skill-7 .skillimageArea,#skill-8 .skillimageArea,
#skill-9 .skillimageArea,#skill-10 .skillimageArea{
	text-align:center;
}
#skill-1 .skilldata01,#skill-2 .skilldata01,#skill-3 .skilldata01,#skill-4 .skilldata01,
#skill-5 .skilldata01,#skill-6 .skilldata01,#skill-7 .skilldata01,#skill-8 .skilldata01,
#skill-9 .skilldata01,#skill-10 .skilldata01{
	width: 8%;
}
#skill-1 .skilldata02,#skill-2 .skilldata02,#skill-3 .skilldata02,#skill-4 .skilldata02,
#skill-5 .skilldata02,#skill-6 .skilldata02,#skill-7 .skilldata02,#skill-8 .skilldata02,
#skill-9 .skilldata02,#skill-10 .skilldata02{
	width: 8%;
}
#skill-1 .skilldata03,#skill-2 .skilldata03,#skill-3 .skilldata03,#skill-4 .skilldata03,
#skill-5 .skilldata03,#skill-6 .skilldata03,#skill-7 .skilldata03,#skill-8 .skilldata03,
#skill-9 .skilldata03,#skill-10 .skilldata03{
	width: 8%;
}
#skill-1 .skilldetail,#skill-2 .skilldetail,#skill-3 .skilldetail,#skill-4 .skilldetail,
#skill-5 .skilldetail,#skill-6 .skilldetail,#skill-7 .skilldetail,#skill-8 .skilldetail,
#skill-9 .skilldetail,#skill-10 .skilldetail{
	width: 45%;
}
#main3column #skillInformationArea {
	padding-bottom: 10px;
}
#main3column #skilt {
	display: none;
}


/* superbox 背景の色
---------------------------------------- */
#superbox-overlay{background:#00344e;}

/* superbox ローディング画像呼び出し
---------------------------------------- */
#superbox-container .loading{width:32px;height:32px;margin:0 auto;text-indent:-9999px;background:url(../../character/css/styles/loader.gif) no-repeat 0 0;}

/* superbox closeボタン
---------------------------------------- */
#superbox .close a{float:right;padding:0 5px;line-height:20px;background:#007fbe;cursor:pointer; text-decoration:none;}
#superbox .close a span{color:#fff;}

/* superbox next　prev要素指定
---------------------------------------- */
#superbox .nextprev a{float:left;margin-right:5px;padding:0 5px;line-height:20px;background:#333;cursor:pointer;color:#fff;}
#superbox .nextprev .disabled{background:#ccc;cursor:default;}

/* コンテンツ要素
---------------------------------------- */
#superbox #column	{ text-align: left; }
#superbox #column h2	{
	font-size: 116.6%;
	border-bottom: solid 1px #646464;
	padding: 5px;
	margin-bottom: 10px;
}