@charset "utf-8";

/* ブロック基本 */
.block {
	width: 59px;
	height: 19px;
}

/* 壁ブロック(消えないブロック) */
.fixed {
	width: 60px;
	height: 20px;

	border-color: #90919b;
	background: #90919b; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #90919b 0%, #eaebf2 52%, #90919b 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #90919b 0%,#eaebf2 52%,#90919b 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #90919b 0%,#eaebf2 52%,#90919b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#90919b', endColorstr='#90919b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

/* 消したあとのブロック */
.noblock {
	width: 19px;
	height: 7px;
	margin: 6px 20px;
}

/* 基本情報とトランジションのクラス */
.block_tr {
	display: inline-block;
	box-sizing : border-box;
	border-width: 2px;
	border-style: solid;
	position: absolute;
	border-radius: 5px;

	transition-property: background-color,width,height,margin;
	-moz-transition-property: background-color,width,height,margin;
	-webkit-transition-property: background-color,width,height,margin;
	-o-transition-property: background-color,width,height,margin;
	-ms-transition-property: background-color,width,height,margin;

	transition-duration:600ms;
	-moz-transition-duration:600ms;
	-webkit-transition-duration:600ms;
	-o-transition-duration:600ms;
	-ms-transition-duration:600ms;

	transition-timing-function:ease-out;
	-moz-transition-timing-function:ease-out;
	-webkit-transition-timing-function:ease-out;
	-o-transition-timing-function:ease-out;
	-ms-transition-timing-function:ease-out;
}

/* ボール */
.ball {
	width: 10px;
	height: 10px;
	border-radius: 5px;
/*	background-color: yellow;	*/
	position: absolute;
	background: radial-gradient(ellipse at center, #fefcea 0%,#938b14 70%);
}

/* パドル */
#paddle {
	width: 100px;
	height: 20px;
/*	border: 1px solid gray;	*/
/*	background-color: white;	*/
	box-sizing: border-box;
	position: absolute;
	left: 220px;
	top: 400px;
	background-color: #5f6866; /* Old browsers */
	background: -moz-linear-gradient(-90deg,  #5f6866 0%, #afbfc6 36%, #3e525b 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-90deg,  #5f6866 0%,#afbfc6 36%,#3e525b 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(180deg,  #5f6866 0%,#afbfc6 36%,#3e525b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5f6866', endColorstr='#3e525b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

/*
	------------------------------------------------------------
	メッセージ用
	------------------------------------------------------------
*/

/* メッセージ基本 */
.message {
	border: 4px solid #eeeeee;
	border-radius: 10px;
	color: #eeeeee;
	font-size: 32px;
	display: inline-block;
	top: 240px;
	position: relative;
	text-shadow: 0 0 2px #00ffcc,0 0 6px #ffffee;
	box-shadow: 0 0 6px 2px #ffffee;
	background-color: rgba(192,192,192,0.2);
	animation: flashmessage 2s linear infinite;
	padding: 0.3em 1.0em;
	z-index: 10;
}

/* ゲームオーバー */
.messageGameOver {
	border-color: #ffbbbb;
	background-color: rgba(255,192,192,0.2);
	color: #ffbbbb;
	text-shadow: 0 0 2px #00ffcc,0 0 6px #ff6666;
	box-shadow: 0 0 6px 2px #ff6666;
}
.messageGameOver:AFTER {
	content: 'GAME OVER';
}

/* ゲームクリア */
.messageClear {
	border-color: #bbeeff;
	color: #bbeeff;
	text-shadow: 0 0 2px #00ffcc,0 0 6px #00aaff;
	box-shadow: 0 0 6px 2px #00aaff;
	background-color: rgba(0,192,255,0.2);
}

.messageClear:AFTER {
	content: 'GAME CLEAR';
}

/* ゲーム開始 */
.messageStart {
	border-color: #bbffee;
	color: #bbffee;
	text-shadow: 0 0 2px #00ffcc,0 0 6px #00ffaa;
	box-shadow: 0 0 6px 2px #00ffaa;
	background-color: rgba(0,255,192,0.2);
}
.messageStart:AFTER {
	content: 'CLICK TO START';
}


@keyframes flashmessage {
	20%,80% {
		opacity: 1;
	}

	50% {
		opacity: 0.2;
	}
}

/* メインエリア */
.breakmain {
	background-image: url('block_s.jpg');
	background-repeat: repeat;
	padding-top: 2em;
	height: 580px;
}

.breakmain h2 {
	font-size: 32px;
	text-align: center;
	font-weight: bold;
	color: white;
}

/* ゲームエリア */
.breakarea {
	display: block;
	outline: 5px solid #aaa;
	outline-bottom: none;
	background-image: url("bk_2_s.jpg");
	background-repeat: repeat;
	width: 540px;
	height: 480px;
	position: absolute;
	text-align: center;
	margin: 5px auto ;
	left: 0;
	right: 0;
}

/* 残ボール数 */
.life {
	display: block;
	top: 450px;
	left: 20px;
}

/* ステージ */
.stage {
	display: block;
	color: white;
	position: absolute;
	top: 440px;
	text-align: right;
	font-size: 20px;
	font-weight: bold;
	padding-right: 1em;
	width: 100%;
	box-sizing: border-box;
}

/* フッターエリア */
.breakfooter {
	margin-top: 500px;
}

/*
	------------------------------------------------------------
	スマフォ用（540px以下）
	------------------------------------------------------------
*/
@media only screen and (max-width:580px)
{
	.breakarea {
		width: 300px;
	}

	#paddle {
		width: 70px;
	}

	.message {
		border-width: 2px;
		border-radius: 5px;
		font-size: 18px;
		padding: 0.2em 0.7em;
	}

}