@charset 'utf-8';


*{margin:0;padding:0}

.article_80{height:70px;overflow:hidden}
*,*:hover,*:focus,*:active { outline: 0px none; }

html, body {height: 100%; background:#2c2c2c; }
body{height:100%;overflow:hidden;color:#999;min-width:750px;font-family:arial,sans-serif;font-size:small;line-height:1.6;background:#888}

.ellipsis {
        white-space: nowrap;
        overflow: hidden;
		display:block;
}

.ellipsis.multiline {
        white-space: normal;
}



#firstImage_top{position:absolute;top:0;left:0;width:100%;background:url(../image/us/topImg.jpg) center center no-repeat;background-color:#2e2e2e;}


#firstImage_top .txt{position:absolute;width:510px;color:#ccc;text-align:center;font-family:georgia,serif;text-shadow: 1px 1px 1px #000}
#firstImage_top .txt h1{color:#fff;font-style:italic;font-weight:normal;font-size:220%}
#firstImage_top .txt .subTitle{margin-bottom:5px;font-size:130%;font-style:italic;color:#999 }
#firstImage_top .txt .btnArea{margin-top:30px;}
#firstImage_top .txt .btnArea a{margin:0 15px;}
a.btn{display:inline-block;height:41px;width:170px;}
a.btn:hover{background-position:0 -100px;}
a.btn span{display:inline-block;text-indent:-9999px;overflow:hidden}
a.btnElyosPath{background:url(../image/us/btnElyosPath.png)}
a.btnAsmodianPath{background:url(../image/us/btnAsmodianPath.png)}


.gradient_new{
	background:url(../image/us/copyright_bg.png) center center no-repeat;	
}

.gradient{
	
	/* webkit example */
	background-image: -webkit-gradient(
		linear,
		left bottom,
		right top,
		color-stop(0.2, rgba(0,0,0,0.2)),
		color-stop(0.5, rgba(0,0,0,0.6)),		
		color-stop(0.8, rgba(0,0,0,0.2))
		);
	);

	

	/* mozilla example - FF3.6+ */
	background-image: -moz-linear-gradient(
		right center,
		rgba(0, 0, 0, 0.2) 20%, 
		rgba(0, 0, 0, 0.6) 60%,
		rgba(0, 0, 0, 0.2) 80%
	);



	/* IE 5.5 - 7 */
	/* approximately a 33% opacity on blue */
	filter: progid:DXImageTransform.Microsoft.gradient(
		gradientType=1,
		startColorstr=#FF000000, endColorstr=#00000000,		
	);

	/* IE8 uses -ms-filter for whatever reason... */
	-ms-filter: progid:DXImageTransform.Microsoft.gradient(		
		startColorstr=#550000FF, endColorstr=#55FFFF00
	);


	
	
}



#mainMenu{position:absolute;top:0;left:0;height:60px;background:url(../image/us/mainMenuBg.png) repeat-x;}
#mainMenu .ul1 li{float:left;width:163px;height:55px;list-style:none}
#mainMenu .ul1 li span{display:block;background:url(../image/us/mainMenuSepalater.png) right top no-repeat}
#mainMenu .ul1 li span a{display:block;width:163px;height:55px;background-position:center top;text-indent:-9999px;overflow:hidden}
#mainMenu .ul1 li span a:hover{background-position:center -100px;}
#mainMenu .ul1 li.current{background:url(../image/us/black50.png)}
#mainMenu .ul1 li.current span a{background-position:center -100px;}
#mainMenu .ul1 .li0{width:164px;}
#mainMenu .ul1 .li0 span a{background-image:url(../image/us/mainMenu0.png)}
#mainMenu .ul1 .li1 span a{background-image:url(../image/us/mainMenu1.png)}
#mainMenu .ul1 .li2 span a{background-image:url(../image/us/mainMenu2.png)}
#mainMenu .ul1 .li3 span a{background-image:url(../image/us/mainMenu3.png)}
#mainMenu .ul2{float:right;margin:16px 14px 0 0}
#mainMenu .ul2 li{list-style:none; float: right;}
#mainMenu .ul2 li a { color: #FFF; font-style: italic;}
#mainMenu .ul2 li.aion-web a{margin-left: 14px; display:block;width:116px;height:23px;background:url(../image/us/homeLink.png);text-indent:-9999px;overflow:hidden}

#roadArea{position:absolute;top:56px;left:0;border:0;overflow:hidden;border:none}
#roadArea_2{position:absolute;top:56px;left:0;border:0;overflow:hidden;border:none}

	




#mapObj{position:absolute;top:0;left:280px;overflow:hidden}
#firstImage{position:absolute;top:0;left:0;width:100%;background-position:center center;z-index:5;font-family:georgia,serif;}
#firstImage .txt{position:absolute;bottom:100px;right:70px;width:510px;color:#ccc;text-shadow:0 1px 0 #111;}
#firstImage .txt h1{font-weight:normal;font-style:italic;font-size:220%}
#firstImage .txt p{font-size:110%}
.firstImageElyosPath{background:url(../image/us/ElyosFirstImg.jpg) no-repeat; background-color:#2e2e2e;}
.firstImageAsmodianPath{background:url(../image/us/AsmodianFirstImg.jpg)  no-repeat; background-color:#ffffff;}
.firstImageAsmodianPath .txt{color:#353434 !important;text-shadow:0 1px 0 #f0f0f0 !important;}
.firstImageAsmodianPath .txt h1{color:#000}



#sideMenu{position:absolute;top:0;left:0;width:280px;padding-right:5px;background:url(../image/us/sideMenuBg.png) repeat-y;overflow:hidden;z-index:10}
#loginArea .preLogin{padding-left:13px;padding-top:12px;height:31px;}


#loginArea .preLogin p a{display:block;height:26px;width:255px;background:url(../image/us/login/login.png) left top no-repeat;text-indent:-9999px;overflow:hidden}
#loginArea .preLogin p a.nocharacter{display:block;height:26px;line-height:26px;padding-left:10px;width:255px;background:url(../image/us/login/login_bg.png) left top no-repeat;overflow:hidden;text-indent:0px;}



#loginArea .epiLogin{padding:20px 0 0 12px;height:106px;}
#loginArea .epiLogin .icon{float:left;margin-left:8px;margin-right:10px;margin-bottom:17px;}
#loginArea .epiLogin .name{color:#fff;font-size:110%;font-family:georgia,serif}
#loginArea .epiLogin .selectArea{clear:both;}

#sideMenu #missionList{margin-bottom:5px;}
#sideMenu #missionList ul{width:280px}
#sideMenu #missionList ul li:after{content:url(../image/us/spacer.gif);display:block;clear:both;height:0;} /* clearFix */
#sideMenu #missionList ul li{display:inline-block;} /* clearFix */
#sideMenu #missionList ul li{display:block;} /* clearFix */
#sideMenu #missionList ul li{padding:7px 10px 7px 12px;line-height:1.4;cursor:pointer}

#sideMenu #missionList ul li.no_hover:hover{background:none;cursor:auto;}

#sideMenu #missionList ul li:hover{background:#444}
/* icon部分についてwebkitでスクロールの問題があったためpositionを使用していない */
#sideMenu #missionList ul li .icon{float:left;margin-right:10px;height:71px;background:url(../image/us/missionIconBottomBg.gif) left bottom no-repeat}
#sideMenu #missionList ul li .icon .waku{display:none;float:left;margin-left:-70px;height:70px;width:70px;background:url(../image/us/missionIconCurrent.gif)}
#sideMenu #missionList ul li .icon .dark{display:none;float:left;margin-left:-70px;height:70px;width:70px;background:url(../image/us/black60.png)}
#sideMenu #missionList ul li .icon img{float:left;}
#sideMenu #missionList ul li .name{margin-bottom:0.1em;font-size:110%;color:#fff;font-family:georgia,sans-serif;line-height:1.2}
#sideMenu #missionList ul li .name .lv{margin-left:0.5em;font-size:85%;color:#999;font-family:arial,sans-serif;font-style:italic}
#sideMenu #missionList ul li .exp{font-size:90%}
#sideMenu #missionList ul li.current{background:url(../image/us/black50.png);color:#6dcff6}
#sideMenu #missionList ul li.current .name{color:#6dcff6}
#sideMenu #missionList ul li.current .name .lv{color:#6dcff6}
#sideMenu #missionList ul li.current .exp{color:#6dcff6}
#sideMenu #missionList ul li.current .icon .waku{display:block}
#sideMenu #missionList ul .finished .name{color:#555}
#sideMenu #missionList ul .finished .name .lv{color:#555}
#sideMenu #missionList ul .finished .exp{color:#555}
/* #sideMenu #missionList ul .finished .icon img{filter: alpha(opacity=25);-moz-opacity:0.25;opacity:0.25;} 透明度の指定でwebkitでスクロールの問題 */
#sideMenu #missionList ul .finished .icon .dark{display:block}
#sideMenu #missionList ul .finished .icon .waku{background-position:0 -100px}
#sideMenu #missionList ul .current .finished .name{color:#999}
#sideMenu #missionList ul .current .finished .name .lv{color:#999}
#sideMenu #missionList ul .current .finished .exp{color:#999}

#infoMationArea{display:none;position:absolute;top:0;right:0;width:430px;background:url(../image/us/infomationAreaBg.png);overflow:hidden;z-index:1}
#infoMationArea .infoMationAreaNull1{padding:15px 0 5px 18px;}
#infoMationArea .infoMationAreaNull3{padding-right:15px;}
#infoMationArea .youtubeMovie{margin-bottom:20px;width:397px;background:#000}
#infoMationArea .missionName{font-size:120%;color:#fff;font-family:georgia,sans-serif}
#infoMationArea .infoTable{margin-top:1em;}
#infoMationArea .infoTable th{padding:5px 10px 5px 0;font-weight:normal;color:#fff;vertical-align:top;text-align:left}
#infoMationArea .infoTable td{padding:5px 0px}
#infoMationArea .infoTable .stars{display:inline-block;width:85px;height:20px;background-image:url(../image/us/stars.png);}
#infoMationArea .infoTable .stars span{display:inline-block;text-indent:-9999px;}
#infoMationArea .infoTable .oneStars{background-position:0 -50px}
#infoMationArea .infoTable .twoStars{background-position:0 -100px}
#infoMationArea .infoTable .threeStars{background-position:0 -150px}
#infoMationArea .infoTable .fourStars{background-position:0 -200px}
#infoMationArea .infoTable .fiveStars{background-position:0 -250px}
#infoMationArea dl{margin-top:5px;}
#infoMationArea dl dt{color:#fff}
#infoMationArea .itemTable{margin:5px 0;line-height:1.4}
#infoMationArea .itemTable .iconCell{position: relative; padding:5px 10px 5px 0}
#infoMationArea .itemTable .iconCell img{ border:1px solid #6b6a69}
#infoMationArea .itemTable .iconCell .count { margin-top: 26px;  width: 34px; position: absolute; left: 8px; color: #FFF; text-shadow: #000 0 0 1px, #000 0 0 2px, #000 0 0 3px; font-size: 12px; text-align: right; }
#infoMationArea .itemTable .name{color:#fff}
#infoMationArea .btnArea{margin:20px 0;}


/*
#infoMationArea .btnArea .btnNeedLogin{display:block;width:230px;height:40px;background:url(../image/us/btnNeedLogin.png);text-indent:-9999px;}
#infoMationArea .btnArea .btnNotCompleted{display:block;width:230px;height:40px;background:url(../image/us/btnNotCompleted.png);text-indent:-9999px;}
#infoMationArea .btnArea .btnCompleted{display:block;width:230px;height:40px;background:url(../image/us/btnCompleted.png);text-indent:-9999px;cursor:pointer}
#infoMationArea .btnArea .btnCompleted:hover{background-position:0 -100px;}
#infoMationArea .btnArea .btnCompletedDelivered{display:block;width:280px;height:40px;background:url(../image/us/btnDelivered.png);text-indent:-9999px;}
*/

#infoMationArea .btnArea .btnNeedLogin{display:block;width:230px;height:40px;line-height:40px;background:url(../image/us/btn.png);text-align:center;font-family:"Georgia,sans-serif";color:#212121;font-size:15px;}
#infoMationArea .btnArea .btnNotCompleted{display:block;width:230px;height:40px;line-height:40px;background:url(../image/us/btn.png);text-align:center;font-family:"Georgia,sans-serif";color:#212121;font-size:20px;}
#infoMationArea .btnArea .btnCompleted{display:block;width:230px;height:40px;line-height:40px;background:url(../image/us/btn_over.png);cursor:pointer;text-align:center;font-family:"Georgia,sans-serif";color:#212121;font-size:20px;}
#infoMationArea .btnArea .btnCompleted:hover{background-position:0 -100px;color:#2b86c5;}
#infoMationArea .btnArea .btnCompletedDelivered{display:block;width:230px;height:40px;line-height:40px;background:url(../image/us/btn.png);text-align:center;font-family:"Georgia,sans-serif";color:#212121;font-size:20px;}


#infoMationArea .link{text-decoration:underline;cursor:pointer}

#infoToggle p{position:absolute;top:0;right:427px;width:30px;height:26px;background:url(../image/us/infomationAreaClose.png) no-repeat;text-indent:-9999px;cursor:pointer;}
#infoToggle p.open{right:0;background-position:0 -50px;}

.selectElement{display:inline-block;width:240px;height:29px;padding-left:16px;background:url(../image/us/selectBg.png) right top no-repeat;line-height:27px;cursor:pointer;}
.selectElement:hover{background-position:right -50px;color:#6dcef5}
.selectLayer{position:absolute;display:none;padding-top:25px;width:256px;background:url(../image/us/spacer.gif);z-index:11}
.selectLayer ul{background:#212121;border:1px solid #2b2b2b;border-top:none}
.selectLayer li:after{content:url(../image/us/spacer.gif);display:block;clear:both;height:0;} /* clearFix */
.selectLayer li{display:inline-block;} /* clearFix */
.selectLayer li{display:block;} /* clearFix */
.selectLayer li{padding:8px;cursor:pointer}
.selectLayer li:hover{background:#181818}

#charactorSelectLayer li .icon{float:left;margin-left:8px;margin-right:10px;}
#charactorSelectLayer li .name{color:#fff;font-size:110%;font-family:georgia,serif}

.selectLayer li.selected{color:#6dcff6}
#charactorSelectLayer li.selected .name{color:#6dcff6}


#getItem{display:none;position:absolute;top:0;left:0;width:100%;height:100%;color:#666;}
#getItem .getItemNull1{position:relative;margin:50px auto 0;width:420px;background:#fff;border:1px solid #aaa}
#getItem .getItemNull2{padding:20px;}
#getItem .titleArea{font-size:120%;font-family:georgia,serif;color:#000}
#getItem .exp{margin:10px 0}
#getItem .exp ul{margin:5px 0;list-style:square;}
#getItem .exp ul li{margin-left:20px;color:#999}
#getItem .exp ul li span{color:#666}
#getItem .itemList{max-height:300px;margin:15px -20px;padding:5px 10px;background:#eaeaea;overflow:auto;}
#getItem .itemList table{border-collapse:collapses;}
#getItem .itemList table td{padding:5px;vertical-align:top}
#getItem .itemList table td.radioCell{padding-top:18px;}
#getItem .itemList .name{color:#fb7f34}
#getItem .itemList .link{text-decoration:underline;cursor:pointer}
#getItem .cancel{position:absolute;bottom:30px;right:30px;text-decoration:underline;cursor:pointer;font-family:georgia,serif;}
#getItem .btn{display:inline-block;height:42px;width:172px;cursor:pointer;}
#getItem .btn span{display:inline-block;text-indent:-9999px;}
#getItem .btn:hover{background-position:0 -100px;}
#getItem .btnConfirm{background-image:url(../image/us/btnConfirm.png)}
#getItem .btnArea{margin-top:5px;text-align:center}

#getItem .close{position:absolute;top:14px;right:14px;height:20px;width:20px;background:url(../image/us/close.png);cursor:pointer;text-indent:-9999px;}
#getItem .close:hover{background-position:0 -50px}