@charset "utf-8";

@import "general/reset.css";
@import "general/clearfix.css";
@import "general/unifyfontsize.css";

/* -------------------------------------- common -------------------------------------- */

a,
a span
{
	color:#cfcfcf;
	text-decoration:none;
}

a:hover,
a:hover span
{
	color:#ffffff;
}

a:active,
a:active span
{
	color:#ffffff;
}

/* -------------------------------------- /common -------------------------------------- */

html
{
	height:100%;
	
	font-family: 'Hiragino Kaku Gothic Pro',"ヒラギノ角ゴ Pro W3", 'メイリオ',Meiryo, "ＭＳ ゴシック", "ＭＳ Ｐゴシック", Helvetica,  Osaka, Arial, sans-serif;
	color:#ffffff;
	font-size:10px;
	line-height:170%;
}

body
{
	height:100%;
	background-size: auto 100%;
	-webkit-background-size: auto 100%;
	-o-background-size: auto 100%;
	-moz-background-size: auto 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
	-o-background-size: auto 100%;           /* Opera 9.5 */
	-webkit-background-size: auto 100%;           /* Safari 3.0 */
	-khtml-background-size: auto 100%;           /* Konqueror 3.5.4 */
	/*background-image:url(../img/bg-nightstreet.jpg);*/
	background-color:#666666;
	background-attachment:fixed;
}

#wrapper
{
	height:100%;
	min-height:100%;
	overflow:hidden;
	_overflow: show;
	margin-bottom:-10px;
	background-image:url(../img/bg_line.png);
}
body > #wrapper 
{
	height:auto;
}

#header
{
	z-index:10;
	position:relative;
	background-color:#1f1f1f;
}

/* -------------------------------------- header -------------------------------------- */

a#logo
{
	float:left;
	width:226px;
	height:80px;
	background-image:url(../img/lifetones-logo.png);
}
a#logo:hover
{
	background-image:url(../img/lifetones-logo-roll.png);
}
a#logo span
{
	visibility:hidden;
}

div#menus
{
	float:left;
	width:380px;
}

ul#languagemenu li
{
	float:left;
}
ul#languagemenu li a
{
	display:block;
	height:20px;
}
ul#languagemenu li a span
{
	visibility:hidden;
}
ul#languagemenu li a#japanese { background-image:url(../img/languagemenu/japanese.png);  width:75px;}
ul#languagemenu li a#english  { background-image:url(../img/languagemenu/english.png);   width:75px;}
ul#languagemenu li a#japanese:hover { background-image:url(../img/languagemenu/japanese-roll.png);  }
ul#languagemenu li a#english:hover  { background-image:url(../img/languagemenu/english-roll.png);   }
ul#languagemenu li a#japanese.current { background-image:url(../img/languagemenu/japanese-active.png);  }
ul#languagemenu li a#english.current  { background-image:url(../img/languagemenu/english-active.png);   }

#globalmenuAndLinks
{
	clear:left;
	padding-top:20px;
	width:380px;
	margin-right:60px;
}

ul#globalmenu li
{
	float:left;
}
ul#globalmenu li a
{
	display:block;
	height:40px;
}
ul#globalmenu li a span
{
	visibility:hidden;
}
li a#menu_top    				{ background-image:url(../img/globalmenu/top.png);     width:60px;}
li a#menu_top:hover    			{ background-image:url(../img/globalmenu/top-roll.png);     }
li a#menu_top.current    		{ background-image:url(../img/globalmenu/top-active.png); }
li a#menu_top.current:hover    	{ background-image:url(../img/globalmenu/top-active-roll.png); }

li a#menu_about  				{ background-image:url(../img/globalmenu/about.png);   width:60px;}
li a#menu_about:hover  			{ background-image:url(../img/globalmenu/about-roll.png);   }
li a#menu_about.current  		{ background-image:url(../img/globalmenu/about-active.png);}
li a#menu_about.current:hover  	{ background-image:url(../img/globalmenu/about-active-roll.png);}

li a#menu_artists				{ background-image:url(../img/globalmenu/artists.png); width:60px;}
li a#menu_artists:hover 		{ background-image:url(../img/globalmenu/artists-roll.png); }
li a#menu_artists.current		{ background-image:url(../img/globalmenu/artists-active.png);}
li a#menu_artists.current:hover	{ background-image:url(../img/globalmenu/artists-active-roll.png);}


ul#links,
ul#links li
{
	float:left;
}
ul#links li a
{
	display:block;
	height:40px;
}
ul#links li a span
{
	visibility:hidden;
}
li a#menu_howto         { background-image:url(../img/globalmenu/howto.png); width:130px;}
li a#menu_howto:hover   { background-image:url(../img/globalmenu/howto-roll.png);}
li a#menu_howto:active  { background-image:url(../img/globalmenu/howto-active.png);}

li a#menu_contact       { background-image:url(../img/globalmenu/contact.png); width:70px;}
li a#menu_contact:hover { background-image:url(../img/globalmenu/contact-roll.png); }
li a#menu_contact.active{ background-image:url(../img/globalmenu/contact-active.png); }

/* -------------------------------------- scene_selector -------------------------------------- */

#scene_selector
{
	float:right;
	/*margin-right:4px;*/
	height:10px;
	background-color:#000000;
	filter:alpha(opacity=90);
	-moz-opacity:0.9;
	opacity:0.9;
	margin-top:50px;
}

#sceneBtn
{
	float:left;
	cursor:pointer;
	background-color:#000000;
}
#sceneBtn.playing
{
	background-color:#cfcfcf;
}
#sceneBtn.pausing
{
	background-color:#000000;
}
#sceneBtn:hover,
#sceneBtn.pausing:hover,
#sceneBtn.playing:hover
{
	background-color:#ffffff;
}

div#scenes
{
	float:left;
}

ul#currentScene li
{
	cursor:pointer;
}

ul#currentScene li a img#close
{
	float:right;
}


#scene_selector ul 
{
	/*
	position:absolute;
	top:110px;
	*/
	list-style-type:none;
	padding-left:0px;
}

#scene_selector ul li
{
	width:270px;
	height:30px;
	border:1px solid #1f1f1f;
	border-top:0px;
	background-color:#000000;
	background-position:center;
}

#scene_selector ul li a
{
	background-color:#000000;
	background-position:left center;
	/*
	background-position:center;
	filter:alpha(opacity=20);
	-moz-opacity:0.2;
	opacity:0.2;
	*/
}

#scene_selector ul#currentScene li
{
	border-bottom:0px;
	border-right-color:#000000;
}
#scene_selector ul.flat li:first-child
{
	border-top:1px solid #1f1f1f;
}

#scene_selector ul li a 
{
	width:244px;
	display:inline-block;
	padding:10px;
}

#scene_selector ul#currentScene li a 
{
	width:250px;
}


body #sm2-container object,
body #sm2-container embed {
	/*
	flashblock handling: hide SWF off-screen by default (until blocked timeout case.)
	include body prefix to ensure override of flashblock.css.
	*/
	left:-9999em;
	top:-9999em;
	/*
	height:30px;
	width:100%;
	background-image:url(../img/bg_line.png);
	*/
}

/* flat CSS example */

ul.flat a.scenesound_link 
{
	/* default state: "a playable link" */
	border-left:6px solid #000000;
}

ul.flat a.scenesound_link:hover 
{
	/* default (inactive) hover state */
	border-left-color:#cfcfcf;
}


ul.flat a.scenesound_playing 
{
	/* "now playing" */
	border-left-color:#00aeff;
	color:#fff;
	background-color:#242424;
}

ul.flat a.scenesound_playing:hover 
{
	/* "clicking will now pause" */
	border-left-color:#FF3399;
}

ul.flat a.scenesound_paused 
{
	/* "paused state" */
	border-left-color:#cfcfcf;
}

ul.flat a.scenesound_paused:hover 
{
	/* "clicking will resume" */
	border-left-color:#FFFF66;
}


/* -------------------------------------- /scene_selector -------------------------------------- */

#mainContents
{
	min-height:514px;
}


/* -------------- tab_top -------------- */

.toneUnit
{
	width:150px;
	height:190px;
	margin-right:2px;
	float:left;
	color:#cfcfcf;
}
.toneUnit .ui360
{
	margin-left:25px;
}
ul.toneInfo,
ul.personInfo
{
	height:50px;
	padding:5px;
	background-color:#000000;
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	opacity:0.8;
}
ul.toneInfo li,
ul.personInfo li
{
	line-height:25px;
}
ul.toneInfo li a,
ul.personInfo li a
{
	cursor:pointer;
}

li.toneName
{
	background: url(../img/tone-icon.png) no-repeat 0px 6px;
	padding-left: 18px;
}
li.artistName
{
	background: url(../img/artist-icon.png) no-repeat 0px 6px;
	padding-left: 20px;
}

a.buyBtn span
{
	visibility:hidden;
}
a.buyBtn
{
	display:block;
	width:150px;
	height:30px;
	background-image:url(../img/buyBtn.png);
}
a.buyBtn:hover
{
	background-image:url(../img/buyBtn-roll.png);
}

/* -------------- tab_about -------------- */

#tab_about
{
	margin-top:10px;
}

#tab_about #aboutLifetones
{
	padding:50px 20px;
	margin-bottom:2px;
	background-color:#000000;
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	opacity:0.8;
	width:566px;
}

#tab_about #aboutLifetones p
{
	width:400px;
	filter:alpha(opacity=100);
	-moz-opacity:1;
	opacity:1;
	padding:20px 10px 10px;
	line-height:200%;
}

#tab_about img#logBig
{
	width:350px;
	height:105px;
}
/* -------------- tab_artists -------------- */

#tab_artists
{
	margin-top:10px;
}

.personUnit
{
	width:150px;
	height:60px;
	margin-right:2px;
	float:left;
}
a .personUnit
{
	cursor:pointer;
}

/* -------------------------------------- popupBox -------------------------------------- */

.popupBox
{
	margin:15px;
	width:450px;
	padding:20px;
	line-height:200%;
}

.popupBox img.label
{
}

.popupBox h2
{
	margin:20px 0px;
	font-size:12px;
	letter-spacing:0.05em;
}
.popupBox.nolabel h2
{
	margin-top:0px;
}
.popupBox.nolabel h2 span
{
	font-weight:normal;
	font-size:10px;
}


.popupBox img.photo
{
	width:220px;
	float:left;
}

.popupBox .links
{
	width:220px;
	float:right;
}

.popupBox p.profile
{
	clear:both;
	display:block;
	padding:20px 0px;
}

/* the overlayed element */
.apple_overlay 
{
	display:none;
	background-image:url(../img/popupBoxBG.png);
}

/* default close button positioned on upper right corner */
.apple_overlay .close {
	background:url(../img/closeBtn.png) no-repeat;
	position:absolute; right:0px; top:10px;
	cursor:pointer;
	height:20px;
	width:20px;
}

/* -------------------------------------- /popupBox -------------------------------------- */

#footer
{
	width:912px;
	margin:30px auto;
	padding:10px 0px;
	/*background-color:#ffffff;*/
	filter:alpha(opacity=60);
	-moz-opacity:0.6;
	opacity:0.6;
}
#footer:hover
{
	filter:alpha(opacity=100);
	-moz-opacity:1;
	opacity:1;
}

#footerlinks
{
	float:right;
}
#footerlinks a,
#footerlinks span
{
	margin:0px 10px;
	color:#FFFFFF;
}