/*--- CHARA PAGE STYLES ---*/

h2.hchara {
	background: url('http://images3.jlist.com/images/pw/chara_h1.png') no-repeat;
	line-height: 28px;
	width: 200px;
	text-indent: -5000px;
}


img, div, .chara { behavior: url('iepngfix.htc'); }

noscript p, noscript ol {
	color: #a00; font-size: 13px; line-height: 1.4em; text-align: left; }
		
noscript a {
	color: #a00; text-decoration: underline; }

noscript ol {
	margin-left: 25px; }
		
a:focus {
	outline:none; }


.stripViewer .panelContainer .panel ul {
			text-align: left;
			margin: 0 15px 0 30px;
	}
		

		/* These 2 lines specify style applied while slider is loading */
		.csw {width: 100%; height: 509px; background: #fff; overflow: hidden;}
		/*.csw .loading {margin: 200px 0 300px 0; text-align: center;}*/

		.stripViewer { /* This is the viewing window */
			position: relative;
			overflow: hidden; 
			margin: auto;
			width: 852px; /* Also specified in  .stripViewer .panelContainer .panel  below */
			height: 509px;
			clear: both;
		}
		
		.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
			position: relative;
			left: 0; top: 0;
			width: 100%;
			list-style-type: none;
			/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
		}
		
		.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
			float:left;
			height: 100%;
			position: relative;
			background: url('http://images3.jlist.com/images/pw/chara/bluegradient_h.gif') no-repeat top;
			width: 852px; /* Also specified in  .stripViewer  above */
		}
		
		.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
			padding: 5px 0 10px 0;
		}
		
		.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
			margin: auto;
		}
		
		.stripNav ul { /* The auto-generated set of links */
			list-style: none;
		}
		
		.stripNav ul li {
			float: left;
			margin: 0; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */
			padding: 0;
		}
		
		.stripNav a { /* The nav links */
			font-size: 10px;
			font-weight: bold;
			text-align: center;
			line-height: 99px;
			color: #fff;
			text-decoration: none;
			display: block;
			padding: 0;
			margin: 0;
			text-indent: -20000px;
		}
		
		.stripNav li.tab1 a { background: url('http://images3.jlist.com/images/pw/chara/chris_btn.gif') no-repeat; width: 60px; }
		.stripNav li.tab2 a { background: url('http://images3.jlist.com/images/pw/chara/angela_btn.gif') no-repeat; width: 82px; }
		.stripNav li.tab3 a { background: url('http://images3.jlist.com/images/pw/chara/suzu_btn.gif') no-repeat; width: 60px; }
		.stripNav li.tab4 a { background: url('http://images3.jlist.com/images/pw/chara/lilian_btn.gif') no-repeat; width: 70px; }
		.stripNav li.tab5 a { background: url('http://images3.jlist.com/images/pw/chara/liesel_btn.gif') no-repeat; width: 70px; }
		.stripNav li.tab6 a { background: url('http://images3.jlist.com/images/pw/chara/iris_btn.gif') no-repeat; width: 70px; }
		.stripNav li.tab7 a { background: url('http://images3.jlist.com/images/pw/chara/arata_btn.gif') no-repeat; width: 70px; }
		.stripNav li.tab8 a { background: url('http://images3.jlist.com/images/pw/chara/shizuka_btn.gif') no-repeat; width: 60px; }
		.stripNav li.tab9 a { background: url('http://images3.jlist.com/images/pw/chara/nodoka_btn.gif') no-repeat; width: 60px; }
		.stripNav li.tab10 a { background: url('http://images3.jlist.com/images/pw/chara/nanae_btn.gif') no-repeat; width: 70px; }
		.stripNav li.tab11 a { background: url('http://images3.jlist.com/images/pw/chara/kazuko_btn.gif') no-repeat; width: 70px; }
		.stripNav li.tab12 a { background: url('http://images3.jlist.com/images/pw/chara/kazuhiro_btn.gif') no-repeat; width: 76px; }
		
/* --- PANEL CONTENT --- */

.chara {
	height: 509px;
	position: relative;
	text-align: left;
}

.chara a {
	text-decoration:none;	
}

.hiddentext {
	text-indent: -20000px;	
}

.voice {
	position: absolute;
	z-index:3;
	behavior: url('iepngfix.htc');
}

.voice ul {
	list-style-type: none;	
}

.voice ul li {
	float: left;
	margin: 0;
	padding: 0 0 0 15px;
	text-indent: -20000px;
}

.voice ul li a {
	display: block;
	height: 25px;
	width: 26px;	
}

/* CHRIS */
.chris {
	background: url('http://images3.jlist.com/images/pw/chara/chris_bg.jpg') no-repeat;	
}

#chris_art {
	position: absolute;
	bottom: 0;
	right: 40px;
	z-index: 1;
}

#chris_art a {
	height: 474px;
	width: 206px;
	background: url('http://images3.jlist.com/images/pw/chara/chris.png') no-repeat 0 0;
	display:block;
}

#chris_art a:hover {
	height: 474px;
	width: 206px;
	background: url('http://images3.jlist.com/images/pw/chara/chris.png') no-repeat 0 -474px;
	display:block;
}

#chris_info {
	height: 258px;
	width: 375px;
	background: url('http://images3.jlist.com/images/pw/chara/chris_info.png') no-repeat;
	position: absolute;
	z-index: 2;
	top: 120px;
	left: 170px;
	padding: 0;
	margin: 0;
}

.chris_sample {
	top: 345px;
	left: 380px;
}

.chris_sample ul li a {
	background: url('http://images3.jlist.com/images/pw/chara/chris_heart.gif') no-repeat;	
}

/* ANGELA */
.angela {
	background: url('http://images3.jlist.com/images/pw/chara/angela_bg.jpg') no-repeat;	
}

#angela_art {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
}

#angela_art a {
	height: 496px;
	width: 479px;
	background: url('http://images3.jlist.com/images/pw/chara/angela.png') no-repeat 0 0;
	display:block;
}

#angela_art a:hover {
	height: 496px;
	width: 479px;
	background: url('http://images3.jlist.com/images/pw/chara/angela.png') no-repeat 0 -496px;
	display:block;
}

#angela_info {
	height: 243px;
	width: 414px;
	background: url('http://images3.jlist.com/images/pw/chara/angela_info.png') no-repeat;
	position: absolute;
	z-index: 2;
	bottom: 20px;
	left: 420px;
	padding: 0;
	margin: 0;
}

.angela_sample {
	bottom: 27px;
	left: 510px;
}

.angela_sample ul li a {
	background: url('http://images3.jlist.com/images/pw/chara/angela_heart.gif') no-repeat;	
}

	

/* SUZUSHIRO */
.suzushiro {
	background: url('http://images3.jlist.com/images/pw/chara/suzushiro_bg.jpg') no-repeat;	
}

#suzushiro_art {
	position: absolute;
	bottom: 0;
	right: -50px;	
}

#suzushiro_art a {
	height: 509px;
	width: 407px;
	background: url('http://images3.jlist.com/images/pw/chara/suzushiro.png') no-repeat 0 -509px;
	display:block;
}

#suzushiro_art a:hover {
	height: 509px;
	width: 407px;
	background: url('http://images3.jlist.com/images/pw/chara/suzushiro.png') no-repeat 0 0;
	display:block;
}

#suzushiro_info {
	height: 222px;
	width: 421px;
	background: url('http://images3.jlist.com/images/pw/chara/suzu_info.png') no-repeat;
	position: absolute;
	z-index: 2;
	top: 210px;
	left: 130px;
	padding: 0;
	margin: 0;
}

.suzu_sample {
	bottom: 86px;
	left: 385px;
}

.suzu_sample ul li a {
	background: url('http://images3.jlist.com/images/pw/chara/suzu_heart.gif') no-repeat;	
}


/* LILIANA */
.liliana {
	background: url('http://images3.jlist.com/images/pw/chara/liliana_bg.jpg') no-repeat;	
}

#liliana_art {
	position: absolute;
	bottom: 0;
	left: 10px;	
}

#liliana_art a {
	height: 490px;
	width: 370px;
	background: url('http://images3.jlist.com/images/pw/chara/liliana.png') no-repeat 0 0;
	display:block;
}

#liliana_art a:hover {
	height: 490px;
	width: 370px;
	background: url('http://images3.jlist.com/images/pw/chara/liliana.png') no-repeat 0 -490px;
	display:block;
}

#liliana_info {
	height: 246px;
	width: 453px;
	background: url('http://images3.jlist.com/images/pw/chara/liliana_info.png') no-repeat;
	position: absolute;
	z-index: 2;
	bottom: 15px;
	right: 10px;
	padding: 0;
	margin: 0;
}

.liliana_sample {
	bottom: 23px;
	left: 480px;
}

.liliana_sample ul li a {
	background: url('http://images3.jlist.com/images/pw/chara/liliana_heart.gif') no-repeat;	
}


/* LIESEL */
.liesel {
	background: url('http://images3.jlist.com/images/pw/chara/liesel_bg.jpg') no-repeat;	
}

#liesel_art {
	position: absolute;
	bottom: 0;
	right: 10px;	
}

#liesel_art a {
	height: 507px;
	width: 288px;
	background: url('http://images3.jlist.com/images/pw/chara/liesel.png') no-repeat 0 0;
	display:block;
}

#liesel_art a:hover {
	height: 507px;
	width: 288px;
	background: url('http://images3.jlist.com/images/pw/chara/liesel.png') no-repeat 0 -507px;
	display:block;
}

#liesel_info {
	height: 245px;
	width: 385px;
	background: url('http://images3.jlist.com/images/pw/chara/liesel_info.png') no-repeat;
	position: absolute;
	z-index: 2;
	bottom: 30px;
	left: 130px;
	padding: 0;
	margin: 0;
}

.liesel_sample {
	bottom: 37px;
	left: 350px;
}

.liesel_sample ul li a {
	background: url('http://images3.jlist.com/images/pw/chara/liesel_heart.gif') no-repeat;	
}

/* IRIS */
.iris {
	background: url('http://images3.jlist.com/images/pw/chara/iris_bg.jpg') no-repeat;	
}

#iris_art {
	position: absolute;
	bottom: 0;
	left: 15px;	
}

#iris_art a {
	height: 506px;
	width: 354px;
	background: url('http://images3.jlist.com/images/pw/chara/iris.png') no-repeat 0 0;
	display:block;
}

#iris_art a:hover {
	height: 506px;
	width: 354px;
	background: url('http://images3.jlist.com/images/pw/chara/iris.png') no-repeat 0 -506px;
	display:block;
}

#iris_info {
	height: 230px;
	width: 329px;
	background: url('http://images3.jlist.com/images/pw/chara/iris_info.png') no-repeat;
	position: absolute;
	z-index: 2;
	top: 190px;
	left: 400px;
	padding: 0;
	margin: 0;
}


/* ARATA*/
.arata {
	background: url('http://images3.jlist.com/images/pw/chara/arata_bg.jpg') no-repeat;	
}

#arata_art {
	position: absolute;
	bottom: 0;
	right: 30px;	
}

#arata_art a {
	height: 491px;
	width: 229px;
	background: url('http://images3.jlist.com/images/pw/chara/arata.png') no-repeat 0 0;
	display:block;
}

#arata_art a:hover {
	height: 491px;
	width: 229px;
	background: url('http://images3.jlist.com/images/pw/chara/arata.png') no-repeat 0 -491px;
	display:block;
}

#arata_info {
	height: 213px;
	width: 377px;
	background: url('http://images3.jlist.com/images/pw/chara/arata_info.png') no-repeat;
	position: absolute;
	z-index: 2;
	top: 190px;
	left: 160px;
	padding: 0;
	margin: 0;
}


/* SHIZUKA */
.shizuka {
	background: url('http://images3.jlist.com/images/pw/chara/shizuka_bg.jpg') no-repeat;	
}

#shizuka_art {
	position: absolute;
	bottom: 0;
	left: 100px;	
}

#shizuka_art a {
	height: 488px;
	width: 219px;
	background: url('http://images3.jlist.com/images/pw/chara/shizuka.png') no-repeat 0 0;
	display:block;
}

#shizuka_art a:hover {
	height: 488px;
	width: 219px;
	background: url('http://images3.jlist.com/images/pw/chara/shizuka.png') no-repeat 0 -488px;
	display:block;
}

#shizuka_info {
	height: 268px;
	width: 409px;
	background: url('http://images3.jlist.com/images/pw/chara/shizuka_info.png') no-repeat;
	position: absolute;
	z-index: 2;
	bottom: 20px;
	right: 80px;
	padding: 0;
	margin: 0;
}

.shizuka_sample {
	bottom: 28px;
	left: 453px;
}

.shizuka_sample ul li a {
	background: url('http://images3.jlist.com/images/pw/chara/shizuka_heart.gif') no-repeat;	
}

/* NODOKA */
.nodoka {
	background: url('http://images3.jlist.com/images/pw/chara/nodoka_bg.jpg') no-repeat;	
}

#nodoka_art {
	position: absolute;
	bottom: 0;
	right: 90px;	
}

#nodoka_art a {
	height: 468px;
	width: 183px;
	background: url('http://images3.jlist.com/images/pw/chara/nodoka.png') no-repeat 0 0;
	display:block;
}

#nodoka_art a:hover {
	height: 468px;
	width: 183px;
	background: url('http://images3.jlist.com/images/pw/chara/nodoka.png') no-repeat 0 -468px;
	display:block;
}

#nodoka_info {
	height: 211px;
	width: 373px;
	background: url('http://images3.jlist.com/images/pw/chara/nodoka_info.png') no-repeat;
	position: absolute;
	z-index: 2;
	bottom: 70px;
	left: 160px;
	padding: 0;
	margin: 0;
}



/* NANAE */
.nanae {
	background: url('http://images3.jlist.com/images/pw/chara/nanae_bg.jpg') no-repeat;	
}

#nanae_art {
	position: absolute;
	bottom: 0;
	right: 30px;	
}

#nanae_art a {
	height: 483px;
	width: 268px;
	background: url('http://images3.jlist.com/images/pw/chara/nanae.png') no-repeat 0 0;
	display:block;
}

#nanae_art a:hover {
	height: 483px;
	width: 268px;
	background: url('http://images3.jlist.com/images/pw/chara/nanae.png') no-repeat 0 -483px;
	display:block;
}

#nanae_info {
	height: 214px;
	width: 369px;
	background: url('http://images3.jlist.com/images/pw/chara/nanae_info.png') no-repeat;
	position: absolute;
	z-index: 2;
	bottom: 80px;
	left: 150px;
	padding: 0;
	margin: 0;
}


/* KAZUKO */
.kazuko {
	background: url('http://images3.jlist.com/images/pw/chara/kazuko_bg.jpg') no-repeat;	
}

#kazuko_art {
	position: absolute;
	bottom: 0;
	left: 20px;	
}

#kazuko_art a {
	height: 466px;
	width: 251px;
	background: url('http://images3.jlist.com/images/pw/chara/kazuko.png') no-repeat 0 0;
	display:block;
}

#kazuko_art a:hover {
	height: 466px;
	width: 251px;
	background: url('http://images3.jlist.com/images/pw/chara/kazuko.png') no-repeat 0 -466px;
	display:block;
}

#kazuko_info {
	height: 209px;
	width: 379px;
	background: url('http://images3.jlist.com/images/pw/chara/kazuko_info.png') no-repeat;
	position: absolute;
	z-index: 2;
	bottom: 80px;
	left: 330px;
	padding: 0;
	margin: 0;
}


/* KAZUHIRO */
.kazuhiro {
	background: url('http://images3.jlist.com/images/pw/chara/kazuhiro_bg.jpg') no-repeat;	
}

#kazuhiro_art {
	position: absolute;
	bottom: 0;
	right: 30px;	
}

#kazuhiro_art a {
	height: 491px;
	width: 274px;
	background: url('http://images3.jlist.com/images/pw/chara/kazuhiro.png') no-repeat 0 0;
	display:block;
}

#kazuhiro_art a:hover {
	height: 491px;
	width: 274px;
	background: url('http://images3.jlist.com/images/pw/chara/kazuhiro.png') no-repeat 0 -491px;
	display:block;
}

#kazuhiro_info {
	height: 170px;
	width: 348px;
	background: url('http://images3.jlist.com/images/pw/chara/kazuhiro_info.png') no-repeat;
	position: absolute;
	z-index: 2;
	bottom: 115px;
	left: 155px;
	padding: 0;
	margin: 0;
}