body{
	/* background-color:#00FF00; */
	margin:0 0 0 0;
	transform-origin:0 0;
	overflow:hidden;
	background-color:rgb(0,0,0);
	user-select:none;
}

.divMainVideo{

}


/*
.divVideoCtrl{
	position: absolute;
	*/
	/*　640x480の場合
	left: 0px;
	top: 438px;
	*/
	/*  1024x768の場合
	left: 192px;
	*/
	/*
	top: 724px;
}
*/

/****************************
	チャプタ一覧
****************************/
.divVideoCtrl > div {
	display:inline-block;
}

.divChapters{
	display: none;
	position: absolute;
	background-color:rgba(0,0,0,0.5);
}

.divChapterThumb{
	/*
	border: 1px solid rgba(0,0,0,0);
	*/
	/*
	conets ビューアでタブ切り替え時問題対策の為、HTML側(data-chapter-thumb-width)で指定する。HTMLでも省略した場合は、64x48になる
	width: 64px;
	height: 48px;
	*/
	cursor: pointer;
}

.divChapterThumb img {
	border: 1px solid rgba(0,0,0,0);
}

.divChapterThumb:hover img {
	border: 1px solid #EEEEEE;
}

.divChapterThumb .chapterHilight img {
	border-color: rgb(0, 208, 255);
}

.imgChapterThumb{
	position:absolute;
	margin:auto;
	left:0;
	right:0;
	top:0;
	bottom:0;
}
/*
.chapterHilight{
	border-color: rgb(0, 208, 255);
}
*/

/****************************
再生モード選択ボタン	
****************************/
.divPlayModePopupMenu {
	position:absolute;
	cursor:pointer;
	background-color:rgba(0,0,0,0.5);
	
}

.playModeItem img,.playModeItem canvas{
	height: 80px;/*TOOL_BUTTON_SIZE*/
	display:table-row;
	border:1px solid rgba(0,0,0,0);
}

div.selected.playModeItem img,div.selected.playModeItem canvas{
	border:1px solid rgb(0, 208, 255);
}

.playModeItem img:hover,.playModeItem canvas:hover {
	border:1px solid rgba(255,255,255,1);
}



/***************************
コントロールバー上の要素
****************************/

.controlBarBack {
	top: 0px;
	height: 44px;
	left: 0px;
}


/*再生モード選択ボタンdiv*/
.divPlayModeSelector {
	position:absolute;
	left: 80px;
	top: 0px;

	width: 80px;/*TOOL_BUTTON_SIZE*/
	height: 80px;/*TOOL_BUTTON_SIZE*/
	
	cursor:pointer;
}
/*再生モード選択ボタン画像*/
.divPlayModeSelector img,.divPlayModeSelector canvas{
	position:absolute;
	left: 0px;
	width: 80px;/*TOOL_BUTTON_SIZE*/
	height: 80px;/*TOOL_BUTTON_SIZE*/
}

.chapterListButton {
	position:absolute;
	left:160px; 
	top:0px;
	width: 80px;/*TOOL_BUTTON_SIZE*/
	height: 80px;/*TOOL_BUTTON_SIZE*/
	cursor:pointer;
}

.mediaPauseButton {
	cursor: pointer;
	position: absolute;
	left: 0px;
	width: 80px;/*TOOL_BUTTON_SIZE*/
	height: 80px;/*TOOL_BUTTON_SIZE*/
	top: 0px;
	display: none;
}

.mediaPlayButton {
	cursor: pointer;
	position: absolute;
	width: 80px;/*TOOL_BUTTON_SIZE*/
	height: 80px;/*TOOL_BUTTON_SIZE*/
	left: 0px;
	top: 0px;
}


/*字幕選択ポップアップ*/
.divSubtitleFontSizePopupMenu {
	position:absolute;
	cursor:pointer;
	background-color:rgba(0,0,0,0.5);
}

.subtitleFontSizeItem img,.subtitleFontSizeItem canvas{
	height: 80px;/*TOOL_BUTTON_SIZE*/
	display:table-row;
	border:1px solid rgba(0,0,0,0);
}

div.subtitleFontSizeItem.selected img,div.subtitleFontSizeItem.selected canvas{
	border:1px solid rgb(0, 208, 255);
}

.subtitleFontSizeItem img:hover,.subtitleFontSizeItem canvas:hover{
	border:1px solid rgba(255,255,255,1);
}

/*再生モード選択ボタンdiv*/
.divSubtitleFontSizeSelector {
	position:absolute;
	right: 162px;
	top: 0px;

	width: 80px;/*TOOL_BUTTON_SIZE*/
	height: 80px;/*TOOL_BUTTON_SIZE*/
	
	cursor:pointer;
}
.divSubtitleFontSizeSelector img,.divSubtitleFontSizeSelector canvas {
	width: 80px;/*TOOL_BUTTON_SIZE*/
	height: 80px;/*TOOL_BUTTON_SIZE*/
}


/*シークバー*/
.divSeekBar {
	cursor: pointer;
	position: absolute;
	left: 105px;
	top: 0px;
	display: inline-block;
	touch-action: none;
}

/*シークバープログレス*/
.divSeekBar .divSeekBarProgress{
	position:absolute; 
	left:2px; 
	top:35px;
	width:0px; 
	height:12px;
}

/*シークバー枠線*/
.divSeekBar > .divSeekBarBackFrame {
	position:absolute; 
	background-color:rgb(0, 0, 0); 
	left: 0px; 
	/*
	top:33px; 
	height:12px; 
	*/
	top:0px; 
	height: 80px;
	display:inline-block; 
}

.divSeekBar > .divSeekBarBackFrameInner {
	position:absolute; 
	background-color:rgb(89, 87, 87); 
	border: 2px solid white;
	left: 0px; 

	top:33px; 
	height:12px; 
	
	display:inline-block; 
	border-style:solid;
}

/*シークバーハンドル*/
.divSeekBar .imgSeekHandle {
	position:absolute;
	left: -20px;
	top: 21px;
	width: 40px;
	height: 40px;
}



/*音量*/
/*
.divVolume {
	position: absolute;
	top: 20px;
	left: 660px;
	width: 100px;
	height: 38px;
	cursor: pointer;
}
*/
.divVolumeButton {
	position: absolute;
	left: 660px;
	top: 0px;
	cursor:pointer;
}

.divVolumeControl {
	position: absolute;
	display:none;
	top: -290px;
	left: 660px;
	width: 80px;
	height: 290px;
	cursor: pointer;
	background-color:rgba(0,0,0,0.5);
	touch-action: none;
}
.divVolumeControl .divSeekBarBackFrame {
	position:absolute;
}
.divVolumeControl .imgProgressBack {
	position:absolute;
	top: 10px;
	left: 36px;
}
.divVolumeControl .divSeekBarProgress {
	position:absolute;
	width: 7px;
	top: 14px;
	left: 37px;
}
.divVolumeControl .imgSeekHandle {
	position:absolute;
	cursor:pointer;
	top: -20px;
	left: 22px;
}

/*再生時間表示*/
.divMediaTime {
	position: absolute;

	left : 525px;
	height: 42px;
	top: 28px;
	font-size: 20px;
	font-family:'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ;
	color:#b5b5b5;
	cursor:default;
	white-space:nowrap;
}


/*字幕選択ポップアップ*/
.divSubtitleModePopupMenu {
	position:absolute;
	cursor:pointer;
	background-color:rgba(0,0,0,0.5);
}

.subtitleModeItem img,.subtitleModeItem canvas{
	height: 80px;/*TOOL_BUTTON_SIZE*/
	display:table-row;
	border:1px solid rgba(0,0,0,0);
}

div.subtitleModeItem.selected img,div.subtitleModeItem.selected canvas{
	border:1px solid rgb(0, 208, 255);
}

.subtitleModeItem img:hover,.subtitleModeItem canvas:hover{
	border:1px solid rgba(255,255,255,1);
}

.divSubtitleModeSelector {
	position:absolute;
	/* right: 1px;*/
	right: 81px;
	top: 0px;
	width: 80px;/*TOOL_BUTTON_SIZE*/
	height: 80px;/*TOOL_BUTTON_SIZE*/
	cursor:pointer;
}

.divSubtitleModeSelector img,.divSubtitleModeSelector canvas {
	width: 80px;/*TOOL_BUTTON_SIZE*/
	height: 80px;/*TOOL_BUTTON_SIZE*/
}

.divFullscreenButton{
	color:white;
	cursor: pointer;
	position: absolute;
	width: 80px;/*TOOL_BUTTON_SIZE*/
	height: 80px;/*TOOL_BUTTON_SIZE*/
	right: 0px;
	top: 0px;
}

.divFullscreenButton>canvas{

}

.divPlaybackRateButton{
	color: white;
	position:absolute;
	cursor:pointer;
	width: 80px;
	height: 80px;
	left: 0px;
	top: 0px;
}
.divPlaybackRateButton>canvas{
	
}

/*****************************
	資料一覧
*****************************/
.divVideoSelector {
	background-repeat:repeat;

	position: absolute;
	top : 0px;
	left : 0px;
	/*
	width: 1024px;
	height: 728px;
	*/
	right:0px;
	bottom:0px;
	margin:auto;
	overflow:auto;
}


/*
	資料サムネイル
*/
.listThumb{
	position: absolute;
	background-color: white;
	/*
	conets ビューアでタブ切り替え時問題対策の為、HTML側(data-thumb-width)で指定する
	width : 162px;
	height : 162px;
	*/
	border: solid 1px rgb(209,200,180);
	color: rgb(102, 51, 34);
	border-radius: 4px;
	cursor: pointer;
}

.listThumb img {
	width: 144px;
	height: auto;
	position: absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin: auto;
}

.listThumb p{
	position:absolute;
	top: 130px;
	left:12px;
	text-align: left;
	font-size: 12px;
	font-weight: bold;
}

.showVideoSelectorButton{
	position: absolute;
	top: 2px;
	right: 20px;
	cursor:pointer;
}

.listThumb .imgVideoMark {
	width: 40px;
	height: 40px;
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin: auto;
}
	
.divMediaPlayer {
	visibility: hidden;
}
/*
.divMediaPlayer > video {
	position:absolute;
	left:0px;
	top:0px;
	width:1024px;
	height:768px;
}

.divMediaPlayer.subtitleOff > video{
	left:0px;
	top:0px;
	width:1024px;
	height:768px;
}

.divMediaPlayer.subtitleRight > video, 
.divMediaPlayer.subtitleLeft > video{
	top:0px;
	width:1000px; //1024 - vSubtitleWidth
	height:768px;
}

.divMediaPlayer.subtitleLeft > video{
	left:24px; // vSubtitleWidth 
}

.divMediaPlayer.subtitleRight > video{
	left:0px; // vSubtitleWidth 
}

.divMediaPlayer.subtitleBottom > video{
	top:0px;
	left:0px;
	width:1024px;
	height:744px; // 768-vSubtitleWidth
}
*/

/*
	字幕領域
*/
.divSubtitle
{
	position: absolute;
	background-color: rgba(255, 0, 0, 0.0);
	color: white;
	font-size: 24px;
	visibility: hidden;
	text-align: center;
	line-height: 1.75;
		
	/* ipad で正常に字幕サイズを取得するために必須 */
	font-family:'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ;
}

.divSubtitle.subtitleFontSS {
	font-size:24px;
}
.divSubtitle.subtitleFontS {
	font-size:38px;
}
.divSubtitle.subtitleFontM {
	font-size:48px;
}
.divSubtitle.subtitleFontL {
	font-size:62px;
}
.divSubtitle.subtitleFontLL {
	font-size:76px;
}


.subtitleV {
	writing-mode: tb-rl;
	writing-mode: vertical-rl;
	-moz-writing-mode: vertical-rl;
	-o-writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	text-align: left;

	padding-top: 10px;
	padding-bottom: 10px;

}

.subtitleH {
	writing-mode: horizontal-tb;
	-moz-writing-mode: horizontal-tb;
	-o-writing-mode: horizontal-tb;
	-webkit-writing-mode: horizontal-tb;
	/*
	padding-left:10px;
	padding-right:10px;
	*/
}


.divSubtitle > .subtitleSentence
{
	display:inline-block;
	white-space:nowrap;
	background-color:rgba(0,0,0,0.0);
}

/*
.divMediaPlayer.subtitleRight,.divMediaPlayer.subtitleLeft > .divSubtitle{
	
	writing-mode: tb-rl;
	writing-mode: vertical-rl;
	-moz-writing-mode: vertical-rl;
	-o-writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;

	text-align:center;
	display:block;
}

.divMediaPlayer.subtitleRight,.divMediaPlayer.subtitleLeft > .divSubtitl > .subtitleSentence{
	
	writing-mode: tb-rl; 
	writing-mode: vertical-rl;
	-moz-writing-mode: vertical-rl;
	-o-writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;

	white-space:nowrap;
	display:inline-block;
}

.divMediaPlayer.subtitleBottom > .divSubtitle{

	writing-mode: horizontal-tb;
	-moz-writing-mode: horizontal-tb;
	-o-writing-mode: horizontal-tb;
	-webkit-writing-mode: horizontal-tb;

	text-align:center;
	display:block;
}


.divMediaPlayer.subtitleBottom > .divSubtitle > .subtitleSentence{

	writing-mode: horizontal-tb;
	-moz-writing-mode: horizontal-tb;
	-o-writing-mode: horizontal-tb;
	-webkit-writing-mode: horizontal-tb;

	white-space:nowrap;
	display:inline-block;
}

.divMediaPlayer.subtitleOff > .divSubtitle {
	display:none;
}
*/

.divMediaPlayer > video{
	background-color:black;
}