@charset "utf-8";
/*======================================
	PHANTASY STAR PORTABLE
	http://phantasystar.sega.jp/psp/
----------------------------------------
	description: game page stylesheet
	edit: 2008/5/14
	update:

======================================*/

/*
	content
--------------------------------------*/

ul.ss{
	position: relative;
	width: 489px;
	height: 159px;
	margin: 15px auto 0;
	overflow: visible;
}

ul.ss span{
	position: absolute;
	top: -10px;
	left: 159px;
	display: block;
	width: 48px;
	height: 10px;
	background: url(../image/point_vivian.jpg) no-repeat;
	
}

#btnVivian{
	margin-right: 5px;
}

#btnVivian a{
	display: block;
	width: 242px;
	height: 159px;
	text-indent: -9999px;
	text-decoration: nnone;
	outline: none;
	background: url(../image/btn_vivian_off.jpg) no-repeat;

}

#btnHelga a{
	display: block;
	width: 242px;
	height: 159px;
	text-indent: -9999px;
	text-decoration: nnone;
	outline: none;
	background: url(../image/btn_helga_off.jpg) no-repeat;
}

#btnVivian a:hover{
	background: url(../image/btn_vivian_on.jpg) no-repeat;
}

#btnHelga a:hover{
	background: url(../image/btn_helga_on.jpg) no-repeat;
}

#charaList{
	width: 489px;
	margin: 10px auto 0;
}
#charaList dt{
	display: none;
}
#charaList dd{
	margin-top: 10px;
}
#charaList dd.first{
	margin-top: 0;
}


/* キャラ一覧 */
#charaList dd ul {
	width: 478px;
	padding: 42px 0 0 11px;
}
#charaList dd ul li {
	float: left;
	width: 112px;
	height: 109px;
	padding: 0 7px 7px 0;
}
#charaList dd ul li a {
	display: block;
	width: 112px;
	height: 109px;
	text-indent: -9999px;
	font-size: 0;
	line-height: 0;
}
#charaList dd ul li a:hover {
	background: url(../image/btn_character_on.gif) no-repeat 0 0;
}
.charaListGuardians {
	height: 352px;/*+42*/
	background: url(../image/background_guardians.jpg) no-repeat;
}
.charaListCog {
	height: 120px;/*+42*/
	background: url(../image/background_cog.jpg) no-repeat;
}
.charaListRogues {
	height: 120px;/*+42*/
	background: url(../image/background_rogues.jpg) no-repeat;
}
.charaListOther {
	height: 120px;/*+42*/
	background: url(../image/background_other.jpg) no-repeat;
}



#exsampleVivian{
	position: relative;
	width: 501px;
	height: 342px;
	margin: 0 auto;
	background: url(../vivienne/image/bg_vivian_top.jpg) no-repeat;
}

#exsampleVivian dt,
#exsampleVivian dd{
	display: none;
}

#exsampleVivian dd.textIn{
	position: absolute;
	top:  200px;
	left: 30px;
	display: inline;
	width: 230px;
	height: 140px;
}


#exsampleVivian dt.point{
	position: absolute;
	top: -64px;
	left: 326px;
	display: block;
	width: 126px;
	height: 65px;
	text-indent: -9999px;
	background: url(../vivienne/image/point_vivian.jpg) no-repeat;
}

#exsampleVivianBottom{
	width: 493px; /* 501 */
	height: 165px; /* 231 */
	padding-top: 66px;
	padding-left: 8px;
	margin: 0 auto;
	background: url(../vivienne/image/bg_vivian_bottom.jpg) no-repeat;
}

#exsampleVivianBottom ul.ss{
	margin-top: 0;
}

#exsampleVivianBottom ul.ss li{
	margin-right: 3px;
}

#exsampleVivianBottom ul.ss li p{
	color: #f287ff;
}

#exsampleHelga{
	position: relative;
	width: 501px;
	height: 368px;
	margin: 0 auto;
	background: url(../helga/image/bg_helga_top.jpg) no-repeat
}

#exsampleHelga dt,
#exsampleHelga dd{
	display: none;
}

#exsampleHelga dd.textIn{
	position: absolute;
	top:  200px;
	left: 30px;
	display: inline;
	width: 230px;
	height: 140px;
}

#exsampleHelgaBottom{
	width: 493px; /* 501 */
	height: 165px; /* 205 */
	padding-top: 40px;
	padding-left: 8px;
	margin: 0 auto;
	background: url(../helga/image/bg_helga_bottom.jpg) no-repeat;
}

#exsampleHelgaBottom ul.ss{
	margin-top: 0;
}

#exsampleHelgaBottom ul.ss li{
	margin-right: 3px;
}

#exsampleHelgaBottom ul.ss li p{
	color: #f287ff;
}



/* ガーディアンズ */
#characterList {
	position: relative;
	width: 501px;
	margin: 0 auto 12px auto;
}
#characterList dt {
	position: absolute;
	text-indent: -9999px;
}
#characterList dd {
	position: absolute;
	width: 265px;
}
#characterList .summary01 {
	left: 226px;
	top: 56px;
}
#characterList .summary02 {
	left: 12px;
	top: 230px;
}
#characterList .summary03 {
	left: 226px;
	top: 394px;
}
#characterList .summary04 {
	left: 12px;
	top: 568px;
}
#characterList .summary05 {
	left: 226px;
	top: 732px;
}
#characterList .summary06 {
	left: 12px;
	top: 906px;
}
#characterList .summary07 {
	left: 226px;
	top: 1070px;
}
#characterList .summary08 {
	left: 12px;
	top: 1244px;
}
#characterList .summary09 {
	left: 226px;
	top: 1408px;
}

.charaG {
	height: 1525px;
	background: url(../guardians/image/background_character.jpg) no-repeat;
}
.charaCog {
	height: 337px;
	background: url(../cog/image/background_character.jpg) no-repeat;
}
.charaR {
	height: 511px;
	background: url(../rogues/image/background_character.jpg) no-repeat;
}
.charaOther {
	height: 337px;
	background: url(../other/image/background_character.jpg) no-repeat;
}


#laia, #mirei, #tylor, #lumia {
	top: 0px;
}
#ethan, #rutsu, #liina, #curtz {
	top: 164px;
}
#hyuga, #vol{
	top: 338px;
}
#maya {
	top: 502px;
}
#lou {
	top: 676px;
}
#leo {
	top: 840px;
}
#tonio {
	top: 1014px;
}
#dall {
	top: 1178px;
}
#nav {
	top: 1352px;
}