/*******************************************
*	2015.11.4
*	紙芝居JavaScript用スタイルシート
*	(C) 神尾政和
*******************************************/
/*----------------------------------------*
 * 紙芝居基本領域
 *----------------------------------------*/
/* 表示領域 */
div.KamishibaiArea {
	position: relative;
	width: 640px;
	height: 480px;
	border: 3px solid black;
}

/* 背景画像 */
div.ImageArea {
	width: 100%;
	height: 100%;
	background-size:cover;
	background-position: center;
}

/* 前画面表示領域 */
div.FrontHtml{
	position: absolute;
	top: 0px;
	margin-left: 16.625%;
	margin-right: 16.625%;
	width: 68.75%;
	height: 62.5%;
}

/* セリフ表示領域 */
div.MessageArea {
	width: 100%;
	height: 15%;
	position: absolute;
	bottom: 0px;
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	padding: 10px;
	box-sizing: border-box;
	visibility: hidden;
}

/* 名前表示領域 */
span.NameArea{
	width: 10em;
	height: 3%;
	position: absolute;
	bottom: 15%;
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
	visibility: hidden;
}

/* 左キャラクター表示領域*/
div.CharacterLeft{
	position: absolute;
	bottom: 18%;
	left: 0px;
	right: auto;
	visibility: hidden;
}

img.CharacterLeftImg{
	position: absolute;
	bottom: 0px;
}

/* 右キャラクター表示領域 */
div.CharacterRight{
	position: absolute;
	bottom: 18%;
	left: auto;
	right: 0px;
	visibility: hidden;
}

img.CharacterRightImg{
	position: absolute;
	bottom: 0px;
}

/* コントローラ表示領域 */
#Controller {
	padding-top: 5px;
	height: 25px;
	width: 640px;
}

/* 開始・停止ボタン	*/
#StartButton {
	position:relative;
	width: 6.25%;
}

/* スライダ */
#SlidePosition {
	position:relative;
	width: 80%;
	height: 10px;
}

/*----------------------------------------*
 * TRPG動画用領域
 *----------------------------------------*/
/*	紙芝居とTRPG表示領域をまとめる領域	*/
#KamishibaiTrpgArea {
	position: relative;
}

/* TRPG用パラメータ表示領域 */
#TrpgParamArea {
	position: absolute;
	border-top: 3px solid black;
	border-right: 3px solid Black;
	border-bottom: 3px solid black;
	width: 150px;
	height: 480px;
	top: 0;
	left: 643px;
	background-color: lightgray;
	display: none;
}

/* 1キャラクター分の領域 */
div.CharParamBox {
	width: 100%;
	border-bottom: 1px solid black;
	background-color: white;
	display: none;
}

/* キャラクター名 */
div.CharName {
	border-bottom: 1px dotted Black;
	padding-left: 10px;
	padding-bottom: 1px;
	background-color: rgba(0, 0, 255, 0.3);
}

/* 表示パラメータ */
div.CharParam {
	border-bottom: 1px dotted Black;
	font-size: xx-small;
	padding-left: 10px;
}

/* ヘックス表示領域 */
#HexMapArea {
	position: absolute;
	top: 5px;
	left: 10px;
	width: 620px;
	height: 390px;
}