@charset "UTF-8";

/*
@font-face {
	font-family: mplus;
	src: url('mplus-1p-bold.ttf')
	format("truetype");
}
*/

/*-------------------------

 	Elements

--------------------------*/

html {
	height: 100%;
	
}

body {
	margin: 0;
	color: #fff;
	background-color: #000;
	background: -webkit-gradient(linear, 0% 0%, 0% 70%, from(#000000), to(#000523));
	font-family: Verdana, Tahoma, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", 'メイリオ','Meiryo', "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	overflow: hidden;
}

article {
	display: block;
}

body > h1 {
	position: relative;
	color: transparent;
}

audio {
	padding: 20px 0;
	position: absolute;
	top: 50%;
	left: 37%;
	width: 300px;
	text-align: center;
	background-color: rgba(0,0,0,0.6);
	-webkit-border-radius: 5px;
}

/*-------------------------

 	Layer Dept

--------------------------*/

aside.note  {
	z-index: 35;
}

aside.option {
	z-index: 30;
}

article.main {
	z-index: 25;
}

/*or earth*/

ul.owata li:nth-child(2) {
	z-index: 20;
}

/*earth*/

ul.owata li:nth-child(1) {
	z-index: 15;
}

/*Moon*/

ul.owata li:nth-child(5) {
	z-index: 10;
}

/*star*/

ul.owata li:nth-child(3) {
	z-index: 5;
}

/*flash*/

ul.owata li:nth-child(6) {
	z-index: 6;
}


/*flash*/

ul.owata li:nth-child(4) {
	z-index: 0;
}

/*-------------------------

 	LV.

--------------------------*/

/*-----------
	Low
------------*/

body.low :before,
body.low ul.owata li:nth-child(2) {
	visibility: hidden;
}

/*-----------
	Normal
------------*/

body.normal ul.owata li:nth-child(2){
	visibility: hidden;
}

/*-----------
	High
------------*/

body.high ul.owata li:nth-child(2){
	visibility: visible;
}

/*-------------------------

 	Mode

--------------------------*/

body.box-v article.main h1,
body.box-v p.i-want-to,
body.box-v ul.owata li,
body.box-v p.i-want-to span {
	outline: 1px solid #0ff!important;
}

/*-------------------------

 Animation Settings (Sync Sound)

--------------------------*/

input,
a.norinori,
ul.owata li,
p.i-want-to,
p.i-want-to span,
article.main,
article.main h1,
aside.option menu.quality li {
	-webkit-animation-duration: 7.396s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-perspective: 800; /* Memo */
}

/*-------------------------

 	article.main

--------------------------*/

article.main {
	position: absolute;
	bottom: 200px;
	width: 100%;
	-webkit-transform-origin: bottom center;
	-webkit-transition-property: -webkit-transform;
	-webkit-transition-duration: 1s;
}

body.low article.main {
	-webkit-transform: scale(0.3);
}

body.normal article.main {
	-webkit-transform: scale(0.8);
}

body.high article.main {
	-webkit-transform: scale(1);
}

/*-------------------------

 	p.i-want-to

--------------------------*/

p.i-want-to {
	margin: 0 auto 0;
	width: 800px;
	height: 600px;
	-webkit-transform-origin: bottom center;
	-webkit-animation-name: box;
	-webkit-transform: scale(1);
}

@-webkit-keyframes box {
	0%{
		
		}

/*---------------
	Action 1
----------------*/

	81.25% {
		
	}
	84.375% {
		-webkit-transform: scale(0.1);	
	
	}
		85.9375% {
			-webkit-transform: scale(1);	
		}
	100% {
	
	}
}

/*------------------

	p.owata
	
-------------------*/

p.i-want-to span {
	margin: 0;
	width: 200px;
	display: inline-block;
	font-size: 1150%;
	font-weight: bold;
	text-align: center;
	-webkit-text-stroke-width: 3px;
}

ul.owata li {
	font-size: 0;
	color: transparent;
}

/*------------------
	1 Earth
-------------------*/

ul.owata li:nth-child(1) {
	margin: 0;
	position: absolute;
	left: 0;
	bottom: 0;
	height: 350px;
	width: 100%;
	background-image: url(images/earth.png);
	background-repeat: no-repeat;
	background-position: bottom center;
	-webkit-transform: scale(1);
	-webkit-transform-origin: bottom center;
}

/*------------------
	2 Earth beat
-------------------*/

ul.owata li:nth-child(2) {
	position: absolute;
	left: 0;
	bottom: 3px;
	height: 350px;
	width: 100%;
	background-repeat: no-repeat;
	background-position: bottom center;
	-webkit-transform-origin: bottom center;
	-webkit-animation-name: earthbeat;
	opacity: 0;
}

body.high ul.owata li:nth-child(2) {
	background-image: url(images/ov_earth.gif);
}

@-webkit-keyframes earthbeat {
	6.25%,12.5%,18.75%,
	25%,31.25%,37.5%,43.75%,
	50%,56.25%,62.5%,68.75%,
	75% {
		opacity: 0;
	}
	
	0%,6.251%,12.501%,18.751%,25.001%,
	31.251%,37.501%,43.751%,50.001%,
	56.251%,62.501%,68.751%,75.001% {
		opacity: 1;
	}

/*---------------
	Action 1
----------------*/

	81.25% {
		opacity: 0;
	
	}
	100% {

	}
}

/*------------------
	3 Star Scroll
-------------------*/

ul.owata li:nth-child(3) {
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(images/stars.png);
	background-repeat: repeat-x;
	-webkit-transform: scale(1);
	}

/*---------------
	LV.
----------------*/

body.high ul.owata li:nth-child(3) {
	-webkit-animation-name: scroll;
}

/* Side Box */

body.high ul.owata li:nth-child(3):before,
body.high ul.owata li:nth-child(3):after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	background-image: url(images/stars.png);
}

body.high ul.owata li:nth-child(3):before {
	top: 0;
	left: -100%;
}

body.high ul.owata li:nth-child(3):after {
	top: 0;
	right: -100%;
}

@-webkit-keyframes scroll {
	0% {
		-webkit-transform: translate(-100%,0);
	}
	100% {
		-webkit-transform: translate(100%,0);
	}
}

/*------------------
	4 Back flash
-------------------*/

ul.owata li:nth-child(4) {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-animation-name: flash;
	background: -webkit-gradient(linear, 0% 0%, 0% 85%, from(#000523), to(#092F96), color-stop(.2,#000523));
	opacity: 0;
}

@-webkit-keyframes flash {
	0% {
		
	}

/*---------------
	Action 1
----------------*/

	82.8124% {
		opacity: 0;
	}
	82.8125% {
		opacity: 1;
	}
	87% {
		opacity: 0;
	}
	100% {
	
	}
}

/*------------------
	5 Moon
-------------------*/

ul.owata li:nth-child(5) {
	position: absolute;
	bottom: 300px;
	left: 0;
	width: 180%;
	height: 100px;
	background-image: url(images/moon.png);
	background-repeat: no-repeat;
	background-position: left center;
	opacity: 0;
}

body.high ul.owata li:nth-child(5) {
	-webkit-animation-duration: 10s;
	-webkit-animation-name: moon;
	opacity: 1;
}

@-webkit-keyframes moon {
	0% {
		-webkit-transform: translate(-100%,0);
	}
	100% {
		-webkit-transform: translate(100%,0);
	}
}

/*------------------
	6 flash beat
-------------------*/

ul.owata li:nth-child(6) {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-animation-name: flashbeat;
	-webkit-transform: scale(1);
	background: -webkit-gradient(linear, 0% 0%, 0% 85%, from(#000523), to(#092F96), color-stop(.2,#000523));
	opacity: 0;
	}

@-webkit-keyframes flashbeat {
	0% {
		
	}

/*---------------
	Action 1
----------------*/

	82.8124% {
		opacity: 0;
	}
	82.8125% {
		opacity: 1;
	}
	87% {
		opacity: 0;
	}
	100% {
	
	}
}

/*-------------------------

 	article.main h1

--------------------------*/

article.main h1 {
	margin: 30px auto -620px;
	width: 800px;
	height: 600px;
	color: transparent;
	font-size: 12px;
	-webkit-transform-origin: bottom center;
	position: relative;
	background-color: #f1166b;
	-webkit-transform: scale(1);
	-webkit-mask-box-image: url(images/bg_flash.png);
	-webkit-animation-name: lineLight;
}

@-webkit-keyframes lineLight {
	6.25%,12.5%,18.75%,
	25%,31.25%,37.5%,43.75%,
	50%,56.25%,62.5%,68.75%,
	75% {
		-webkit-transform: scale(1);
	}
	
	0%,6.251%,12.501%,18.751%,25.001%,
	31.251%,37.501%,43.751%,50.001%,
	56.251%,62.501%,68.751%,75.001% {
		-webkit-transform: scale(0.98);
	}

	0%,
	10.9375%,
	21.875%,
	32.8125%,
	43.75%,
	54.6875%,
	65.625%,
	76.5625% {
		background-color: #f1166b;
	}
	
	1.5625%,
	12.5%,
	23.4375%,
	34.375%,
	45.3125%,
	56.25%,
	67.1875% {
		background-color: #dc14f0;
	}
	
	3.125%,
	14.0625%,
	25%,
	35.9375%,
	46.875%,
	57.8125%,
	68.75% {
		background-color: #2314e6;
	}
	
	4.6875%,
	15.625%,
	26.5625%,
	37.5%,
	48.4375%,
	59.375%,
	70.3125%,
	81.25% {
		background-color: #15d6ee;
	}

	6.25%,
	17.1875%,
	28.125%,
	39.0625%,
	50%,
	60.9375%,
	71.875% {
		background-color: #16f098;
	}
	
	7.8125%,
	18.75%,
	29.6875%,
	40.625%,
	51.5625%,
	62.5%,
	73.4375% {
		background-color: #77ed19;
	}
	
	9.375%,
	20.3125%,
	31.25%,
	42.1875%,
	53.125%,
	64.0625%,
	75% {
		background-color: #f0dc14;
	}

	0%,
	18.75%,
	43.75%,
	68.75% {
			-webkit-transform: scale(1);
	}

/*---------------
	Scale
----------------*/

	0.01%,
	18.76%,
	43.76%,
	68.76% {
			-webkit-transform: scale(1.2);
	}
	
	15.625%,
	40.625%,
	65.625% {
		-webkit-transform: scale(.95);	
	}

/*---------------
	Action 1
----------------*/

	81.25% {
		
	}
	84.375% {
		background-color: #9e1743;
		-webkit-transform: scale(0.1);	
	}
	85.9375% {
		background-color: #650a28;
		-webkit-transform: scale(1);	
	}

	100% {
	
	}
}

/*----------------------------------------

 Character 1

----------------------------------------*/

p.i-want-to span:nth-child(1) {
	color: #fffdc2; /*7黄色*/
	-webkit-text-stroke-color: #fcec29;
	-webkit-transform-origin: bottom right;
	-webkit-transform: rotate(-30deg) translateX(0.21em) translateY(0.1em) scale(1);
	-webkit-animation-name: c1;
	-webkit-text-stroke-width: 3px;
}

@-webkit-keyframes c1 {
	0% {
		
	}

	1.5625%,
	12.5%,
	23.4375%,
	34.375%,
	45.3125%,
	56.25%,
	67.1875%,
	78.125% {-webkit-transform: rotate(-30deg) translateX(0.21em) translateY(0.1em) scale(1.01);
		color: #ffc6df; /*1赤*/
		-webkit-text-stroke-color: #f53465;
	}
	
	3.125%,
	14.0625%,
	25%,
	35.9375%,
	46.875%,
	57.8125%,
	68.75%,
	79.6875% {-webkit-transform: rotate(-30deg) translateX(0.21em) translateY(0.1em) scale(0.99);
		color: #fdc2ff; /*2紫*/
		-webkit-text-stroke-color: #df32ef;		
	}
	
	4.6875%,
	15.625%,
	26.5625%,
	37.5%,
	48.4375%,
	59.375%,
	70.3125%,
	81.25% {
		color: #d0c2ff; /*3青紫*/
		-webkit-text-stroke-color: #4a33ef;	
	}

	6.25%,
	17.1875%,
	28.125%,
	39.0625%,
	50%,
	60.9375%,
	71.875%,
	82.8125% {
		color: #bdf6ff; /*4青*/
		-webkit-text-stroke-color: #33ace5;
	}
	
	7.8125%,
	18.75%,
	29.6875%,
	40.625%,
	51.5625%,
	62.5%,
	73.4375% {
		color: #c4ffee; /*5青緑*/
		-webkit-text-stroke-color: #34f190;
	}
	
	9.375%,
	20.3125%,
	31.25%,
	42.1875%,
	53.125%,
	64.0625%,
	75% {
		color: #e0ffbf; /*6黄緑*/
		-webkit-text-stroke-color: #6ce636;		
	}

	10.9375%,
	21.875%,
	32.8125%,
	43.75%,
	54.6875%,
	65.625%,
	76.5625% {
		color: #fffdc2; /*7黄色*/
		-webkit-text-stroke-color: #fcec29;
	}
	
/*---------------
	Action 1
----------------*/

	84.375% {
		color: #070333;
		-webkit-text-stroke-color: #54497f;
	}
	
	90.625%,
	93.75% ,
	96.875%,
	100% {
		text-shadow: 0 0 50px #d9fc29;
	}
}

/*----------------------------------------

 Character 2

----------------------------------------*/

p.i-want-to span:nth-child(2) {
	color: #e0ffbf; /*6黄緑*/
	-webkit-text-stroke-color: #6ce636;
	-webkit-transform: rotate(-4deg) translateX(3%) scale(1);
	-webkit-animation-name: c2;
}

@-webkit-keyframes c2 {
	0% {
		
	}

	1.5625%,
	12.5%,
	23.4375%,
	34.375%,
	45.3125%,
	56.25%,
	67.1875%,
	78.125% {
		color: #fffdc2; /*7黄色*/
		text-shadow: 0 0 0px #d9fc29;
		-webkit-text-stroke-color: #fcec29;
	}
	
	3.125%,
	14.0625%,
	25%,
	35.9375%,
	46.875%,
	57.8125%,
	68.75%,
	79.6875% {-webkit-transform: rotate(-4deg) translateX(3%) scale(1.04);
		color: #f1dbc7; /*1オレンジ*/
		text-shadow: 0 0 0px #f53434;
		-webkit-text-stroke-color: #f54b34;
	}
	
	4.6875%,
	15.625%,
	26.5625%,
	37.5%,
	48.4375%,
	59.375%,
	70.3125%,
	81.25% {-webkit-transform: rotate(-4deg) translateX(3%) scale(0.99);
		color: #fdc2ff; /*2紫*/
		text-shadow: 0 0 0px #fc29d9;
		-webkit-text-stroke-color: #df32ef;
	}

	6.25%,
	17.1875%,
	28.125%,
	39.0625%,
	50%,
	60.9375%,
	71.875%,
	82.8125% {
		color: #d0c2ff; /*3青紫*/
		text-shadow: 0 0 0px #6e2afc;
		-webkit-text-stroke-color: #4a33ef;
	}
	
	7.8125%,
	18.75%,
	29.6875%,
	40.625%,
	51.5625%,
	62.5%,
	73.4375% {
		color: #bdf6ff; /*4青*/
		text-shadow: 0 0 0px #2aaff9;
		-webkit-text-stroke-color: #33ace5;
	}
	
	9.375%,
	20.3125%,
	31.25%,
	42.1875%,
	53.125%,
	64.0625%,
	75% {
		color: #c4ffee; /*5青緑*/
		text-shadow: 0 0 0px #2bfcdc;
		-webkit-text-stroke-color: #34f190;	
	}

	10.9375%,
	21.875%,
	32.8125%,
	43.75%,
	54.6875%,
	65.625%,
	76.5625% {
		color: #e0ffbf; /*6緑*/
		text-shadow: 0 0 0px #55f92e;
		-webkit-text-stroke-color: #6ce636;
	}

/*---------------
	Action 1
----------------*/

	84.375%,
	87.5% {
		color: #070333;
		-webkit-text-stroke-color: #54497f;
	}
	
	90.625%,
	93.75% ,
	96.875%,
	100% {
		text-shadow: 0 0 50px #55f92e;
	}
}

/*----------------------------------------

 Character 3

----------------------------------------*/

p.i-want-to span:nth-child(3) {
	color: #bdf6ff; /*4青*/
	-webkit-text-stroke-color: #33ace5;
	-webkit-transform: rotate(4deg) translateX(-3%) scale(1);
	-webkit-animation-name: c3;
}

@-webkit-keyframes c3 {
	0% {
		
	}

	1.5625%,
	12.5%,
	23.4375%,
	34.375%,
	45.3125%,
	56.25%,
	67.1875%,
	78.125% {
		color: #e0ffbf; /*6緑*/
		text-shadow: 0 0 0px #55f92e;
		-webkit-text-stroke-color: #6ce636;
	}
	
	3.125%,
	14.0625%,
	25%,
	35.9375%,
	46.875%,
	57.8125%,
	68.75%,
	79.6875% {
		color: #fffdc2; /*7黄色*/
		text-shadow: 0 0 0px #d9fc29;
		-webkit-text-stroke-color: #fcec29;
	}
	
	4.6875%,
	15.625%,
	26.5625%,
	37.5%,
	48.4375%,
	59.375%,
	70.3125%,
	81.25% {-webkit-transform: rotate(4deg) translateX(-3%) scale(1.04);
		color: #f1dbc7; /*1オレンジ*/
		text-shadow: 0 0 0px #f53434;
		-webkit-text-stroke-color: #f54b34;
	}

	6.25%,
	17.1875%,
	28.125%,
	39.0625%,
	50%,
	60.9375%,
	71.875%,
	82.8125% {-webkit-transform: rotate(4deg) translateX(-3%) scale(0.99);
		color: #fdc2ff; /*2紫*/
		text-shadow: 0 0 0px #fc29d9;
		-webkit-text-stroke-color: #df32ef;
	}
	
	7.8125%,
	18.75%,
	29.6875%,
	40.625%,
	51.5625%,
	62.5%,
	73.4375% {
		color: #d0c2ff; /*3青紫*/
		text-shadow: 0 0 0px #6e2afc;
		-webkit-text-stroke-color: #4a33ef;
		
	}
	
	9.375%,
	20.3125%,
	31.25%,
	42.1875%,
	53.125%,
	64.0625%,
	75% {
		color: #bdf6ff; /*4青*/
		text-shadow: 0 0 0px #2aaff9;
		-webkit-text-stroke-color: #33ace5;
	}

	10.9375%,
	21.875%,
	32.8125%,
	43.75%,
	54.6875%,
	65.625%,
	76.5625% {
		color: #c4ffee; /*5青緑*/
		text-shadow: 0 0 0px #2bfcdc;
		-webkit-text-stroke-color: #34f190;
	}

/*---------------
	Action 1
----------------*/

	84.375%,
	87.5%,
	90.625%{
		color: #070333;
		-webkit-text-stroke-color: #54497f;
	}

	93.75%,
	96.875%,
	100% {
		text-shadow: 0 0 50px #2aaff9;
	}
}

/*----------------------------------------

 Character 4

----------------------------------------*/

p.i-want-to span:nth-child(4) {
	color: #ffc6df; /*1赤*/
	-webkit-text-stroke-color: #f53465;
	-webkit-transform-origin: bottom left;
	-webkit-transform: rotate(30deg) translateX(-0.21em) translateY(0.1em) scale(1);
	-webkit-animation-name: c4;
}

@-webkit-keyframes c4 {
	0% {
		
	}

	1.5625%,
	12.5%,
	23.4375%,
	34.375%,
	45.3125%,
	56.25%,
	67.1875%,
	78.125% {
		color: #fdc2ff; /*2紫*/
		text-shadow: 0 0 0px #fc29d9;
		-webkit-text-stroke-color: #df32ef;
	}
	
	3.125%,
	14.0625%,
	25%,
	35.9375%,
	46.875%,
	57.8125%,
	68.75%,
	79.6875% {
		color: #d0c2ff; /*3青紫*/
		text-shadow: 0 0 0px #6e2afc;
		-webkit-text-stroke-color: #4a33ef;
	}
	
	4.6875%,
	15.625%,
	26.5625%,
	37.5%,
	48.4375%,
	59.375%,
	70.3125%,
	81.25% {
		color: #bdf6ff; /*4青*/
		text-shadow: 0 0 0px #2aaff9;
		-webkit-text-stroke-color: #33ace5;
	}

	6.25%,
	17.1875%,
	28.125%,
	39.0625%,
	50%,
	60.9375%,
	71.875%,
	82.8125% {-webkit-transform: rotate(30deg) translateX(-0.21em) translateY(0.1em) scale(1.01);
		color: #c4ffee; /*5青緑*/
		text-shadow: 0 0 0px #2bfcdc;
		-webkit-text-stroke-color: #34f190;
	}
	
	7.8125%,
	18.75%,
	29.6875%,
	40.625%,
	51.5625%,
	62.5%,
	73.4375% {-webkit-transform: rotate(30deg) translateX(-0.21em) translateY(0.1em) scale(0.99);
		color: #e0ffbf; /*6緑*/
		text-shadow: 0 0 0px #55f92e;
		-webkit-text-stroke-color: #6ce636;
		
	}
	
	9.375%,
	20.3125%,
	31.25%,
	42.1875%,
	53.125%,
	64.0625%,
	75% {
		color: #fffdc2; /*7黄色*/
		text-shadow: 0 0 0px #d9fc29;
		-webkit-text-stroke-color: #fcec29;
	}

	10.9375%,
	21.875%,
	32.8125%,
	43.75%,
	54.6875%,
	65.625%,
	76.5625% {
		color: #f1dbc7; /*1オレンジ*/
		text-shadow: 0 0 0px #f53434;
		-webkit-text-stroke-color: #f54b34;
	}

/*---------------
	Action 1
----------------*/

	84.375%,
	87.5%,
	90.625%,
	93.75% {
		color: #070333;
		-webkit-text-stroke-color: #54497f;
	}

/*----*/

	100% {
		text-shadow: 0 0 30px #fd2b48;
	}
}

/*----------------------------------------

 Others

----------------------------------------*/

/*---------------
	note
----------------*/

aside.note {
	padding-left: 10px;
	position: absolute;
	bottom: 3px;
	left: 5px;
	background-color: rgba(0,0,0,0.4);
}

aside.note h1 {
	display: none;
}

aside.note ul {
	margin: 10px 10px;
	padding: 0 10px;
}

aside.note ul li {
	font-size: 11px;
	font-family: Verdana, Geneva, sans-serif;
	text-transform: uppercase;
	text-shadow: 1px 1px 2px #000;
}

aside.note ul li a {
	color: #CC0;
	border-bottom: 1px solid #06F;
}

aside.note ul li a:hover {
	color: #F90074;
}

aside.note ul li a.norinori {
	display: inline-block;
	-webkit-animation-name: sBeat@;
	-webkit-transform: scale(1);
	text-decoration: none;
}

@-webkit-keyframes sBeat {
	6.25%,12.5%,18.75%,
	25%,31.25%,37.5%,43.75%,
	50%,56.25%,62.5%,68.75%,
	75% {
		-webkit-transform: scale(1);
	}
	
	0%,6.251%,12.501%,18.751%,25.001%,
	31.251%,37.501%,43.751%,50.001%,
	56.251%,62.501%,68.751%,75.001% {
		color: #3E6B0D;
		-webkit-transform: translate(0,1%) scale(0.95);
	}

/*---------------
	Action 1
----------------*/

	81.25% {
		-webkit-transform: scale(1);		
	}
	
	100% {

	}
}

/*-------------------------

 	Option

--------------------------*/

/*-----------------
	LV.
-----------------*/

aside h1 {
	font-size: 12px;
	color: transparent;
}

aside.option {
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
}

aside.option p {
	margin: 0 auto 0;
	padding: 8px 10px 6px;
	-webkit-border-top-left-radius: 7px;
	-webkit-border-top-right-radius: 7px;
	width: 190px;
	background-color: rgba(0,0,0,0.5);
	border-right: 1px solid rgba(0,0,0,0.5);
}

aside.option input[type=text] {
	font-size: 12px;
	padding: 4px 10px;
	color: #fff;
	background-color: #000;
	border-width: 1px;
	border-style: solid;
	border-color: #000 #555 #555 #000;
}

aside.option input[type=button] {
	margin-left: 5px;
	padding: 1px 5px 4px;
	border-width: 1px;
	border-style: solid;
	border-color: rgba(255,255,255,0.3) rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(255,255,255,0.3);
	color: #fff;
	background-color: #0F87CB;
	font-weight: bold;
	font-size: 12px;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
	-webkit-border-radius: 2px;
	-webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.8);
}

aside.option input[type=button]:hover {
	-webkit-animation-name: lineLight;	
}

aside.option menu.quality {
	display: block;
	margin: 0 auto 70px;
	padding: 8px 10px 8px;
	border-top: 1px solid rgba(0,0,0,0.5);
	border-right: 1px solid rgba(0,0,0,0.5);
	border-bottom: 1px solid rgba(0,0,0,0.5);
	-webkit-border-bottom-left-radius: 7px;
	-webkit-border-bottom-right-radius: 7px;
	width: 190px;
	background-color: rgba(0,0,0,0.7);
	overflow: auto;
}

aside.option menu.quality li {
	display: inline-block;
	margin-left: 4px;
	padding: 3px 8px;
	float: left;
	border-width: 1px 0 0 1px;
	border-style: solid;
	border-color: rgba(255,255,255,0.2) rgba(0,0,0,0.5) rgba(0,0,0,0.5) rgba(255,255,255,0.2);
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	color: #F9D8DF;
	background-color: #5B6D88;
	cursor: pointer;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
	text-align: center;
	-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,1);
	-webkit-border-radius: 2px;
}

aside.option menu.quality li.current {
	background-color: #C90064;
}

aside.option menu.quality li:hover {
	-webkit-animation-name: lineLight;
}

/*-----------------
	Visual Mode
-----------------*/

menu.visualMode {
	margin: 0;
	padding: 0;
	position: absolute;
	width: 100px;
	bottom: 10px;
	right: 30px;
	background-color: #fff;
	list-style-type: none;
	cursor: pointer;
}

menu.visualMode li.outline {
	padding: 3px 10px;
	font-size: 11px;
	color: #000;
	background-color: #fff;
}

menu.visualMode li.outline:hover {
	color: #9F0;
	background-color: #111;
}

/*
menu.visualMode li.outline.on {
	background-color: #111;
}

menu.visualMode li.outline.on:before {
	margin-right: 5px;
	content: "*";
	color: #9F0;
}
*/

/*-------------------------

 	Browser

--------------------------*/

html body h1,
html body article,
html body aside,
html body ul.owata {
	display: none!important;
}

body {
	/* for IE6 */
	_background-color: #fff;
	_background-image: url(images/maquneko.gif);
}

div.browser {
	margin:200px auto 0;
	display: block;
	padding: 1px;
	width: 242px;
	height: 284px;
	color: #000;
	background-color: #3c3c3c;
	background: url(images/browser2.png) no-repeat;
	
	/* for IE6 */
	_width: 300px;
	_background: none;
	_color: orangered;
	_font-weight: bold;
	_font-size: 14px;
}

div.browser ul {
	margin: 180px 20px 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
	font-size: 12px;
	_display: none; /* for IE6 */
}

div.browser ul li a {
	color: #fff;
	display: block;
}

div.browser ul li a:hover {
	color: #9CF;
}

/* Webkit hack. */

@media screen and (-webkit-min-device-pixel-ratio:0) {
	html body > h1,
	html body > article,
	html body > article.main h1,
	html body > aside,
	html body > ul.owata {
		display: block!important;
	}
	div.browser {
		display: none;
	}
}