﻿/*　*/
html, body
{
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	overflow:hidden;
	
	word-wrap: break-word;	
	font-family:sans-serif;
	user-select:none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
body
{
	background:-webkit-gradient(linear, left top, left bottom, from(#eee), to(#999));
	background:linear-gradient(to bottom, #eee 0%, #999 100%);
	background-color:#ddd;
}
#preloader
{
	position:absolute;
	width:100%;
	height:100%;
	background-color:#000;
	color:#fff;
}
#preloader p
{
	margin:1em;
}
#wrapper
{
	box-sizing:border-box;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	padding:4px;
	background:-webkit-gradient(linear, left top, left bottom, from(#eee), to(#999));
	background:linear-gradient(to bottom, #eee 0%, #999 100%);
	background-color:#ddd;
	overflow:hidden;
}
#header
{
	position:relative;
	width:100%;
	height:28px;
	margin:0 0 4px 0;
	line-height:28px;
	text-indent:1em;
	font-size:14px;
	color:#fff;
	background:-webkit-gradient(linear, left top, left bottom, from(#49c), to(#229));
	background:linear-gradient(to bottom, #49c 0%, #229 100%);
	background-color:#36a;
}
#main
{
	position:relative;
	width:100%;
	maring:0;
}
#videoView
{
	position:absolute;
	background-color:#000;
}
#slideView
{
	position:absolute;
	background-color:#333;
}
#listView
{
	position:absolute;
	overflow-x:hidden;
	overflow-y:auto;
	background-color:rgba(255,255,255,.3);
}
#slideView, #videoView, #listView
{
	box-shadow:rgba(0, 0, 0, 0.5) 1px 1px 1px 0px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.5) 1px 1px 1px 0px;
	-moz-box-shadow:rgba(0, 0, 0, 0.5) 1px 1px 1px 0px;
}
.slideList, .slideListSelected
{
	margin:1px;
	left:50%;
	top:50%;
	width:auto;
	font-size:14px;
	background-color:#f90;
	cursor:pointer;
}
.slideList p,
.slideListSelected p
{
	margin-left:.5em;
	margin-right:.5em;
	margin-top:1px;
	margin-bottom:2px;
	padding-top:3px;
	padding-bottom:2px;
}
.slideList:hover
{
	background-color:#fc0;
}
.slideList:active
{
	background-color:#960;
}
.slideListSelected
{
	background-color:#ff0;
}




#videoBar
{
	position:relative;
	margin:4px 0 0 0;
	width:100%;
	height:28px;
	color:#fff;
	background:-webkit-gradient(linear, left top, left bottom, from(#49c), to(#229));
	background:linear-gradient(to bottom, #49c 0%, #229 100%);
	background-color:#36a;
	
}
.timeDisp
{
	position:absolute;
	width:100px;
	top:50%;
	height:16px;
	line-height:16px;
	margin-top:-8px;
	background-color:rgba(0,0,0,0.666);
	cursor:default;
	
	font-family: monospace;
	text-align:center;
	white-space:nowrap;
}
.timeDisp span
{
	margin:0;
	padding:0;
}
.timeDispCurrent
{
	color:#ccc;
}
.timeDispTotal
{
	color:#090;
}

#timeBarBase
{
	position:absolute;
	left:90px;
	top:50%;
	height:16px;
	margin-top:-8px;
	background-color:rgba(0,0,32,.5);
}
.timeBarBase{		right:240px;	}
.noVolume .timeBarBase{	right:220px;	}

#timeBar
{
	position:absolute;
	left:2px;
	right:2px;
	top:50%;
	height:12px;
	margin-top:-6px;
	background-color:#111;
	overflow:hidden;
}
#timeBarFill
{
	position:absolute;
	left:0;
	top:0;
	width:0;
	height:100%;
	background-color:#e10;
}
.bufferFill
{
	position:absolute;
	left:0;
	right:0;
	top:0;
	height:100%;
	background-color:#030;
}
#markerWrapper,#bufferWrapper
{
	position:absolute;
	width:100%;
	height:100%;
	overflow:hidden;
}
.slideMarker
{
	position:absolute;
	top:0;
	bottom:0;
	width:0;
	border:1px solid #f90;
}
.button
{
	cursor:pointer;
}
.buttonDimm
{
	cursor:default;
}
.button, .buttonDimm
{
	position:absolute;
	top:4px;
	bottom:4px;
	width:40px;
	background:-webkit-gradient(linear, left top, left bottom, from(#eee), to(#999));
	background:linear-gradient(to bottom, #eee 0%, #999 100%);
	background-color:#ddd;
	box-shadow:rgba(0, 0, 0, 0.5) 1px 1px 0px 0px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.5) 1px 1px 0px 0px;
	-moz-box-shadow:rgba(0, 0, 0, 0.5) 1px 1px 0px 0px;
}
.button:hover
{
	background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#bbb));
	background:linear-gradient(to bottom, #fff 0%, #bbb 100%);
	background-color:#f8f8f8;
}
.button:active
{
	background:-webkit-gradient(linear, left top, left bottom, from(#ddd), to(#888));
	background:linear-gradient(to bottom, #ddd 0%, #888 100%);
	background-color:#ccc;
}
#playButton, #pauseButton
{
	left:4px;
}
#x1Button, #x15Button, #x2Button, #rateDimm
{
	left:46px;
}
#playButton::before
{
	content:"";
	position:absolute;
	margin-left:-5px;
	margin-top:-5px;
	left:50%;
	top:50%;
	width:0;
	height:0;
	border-left:10px solid #000;
	border-right:10px solid transparent;
	border-top:5px solid transparent;
	border-bottom:5px solid transparent;
}
#pauseButton::before, #pauseButton::after
{
	content:"";
	position:absolute;
	margin-left:-4px;
	margin-top:-5px;
	left:50%;
	top:50%;
	width:3px;
	height:10px;
	background-color:#000;
}
#pauseButton::after
{
	margin-left:1px;
}
#x1Button, #x15Button, #2Button
{
}
#rateDimm
{
	color:#999;
}
#x1Button
{
	color:#666;
}
#x15Button,
#x2Button
{
	color:#f60;
}
#x1Button::after,#x15Button::after,#x2Button::after, #rateDimm::after
{
	position:absolute;
	font-size:13px;
	font-weight:800;
	text-align:center;
	line-height:14px;
	width:100%;
	bottom:2px;
}
#x1Button::after, #rateDimm::after
{
	content:"x1";
}
#x15Button::after
{
	content:"x1.5";
}
#x2Button::after
{
	content:"x2";
}
#prevButton::before, #prevButton::after,
#prevButtonDimm::before, #prevButtonDimm::after
{
	content:"";
	position:absolute;
	margin-left:-20px;
	margin-top:-5px;
	left:50%;
	top:50%;
	width:0;
	height:0;
	border-left:10px solid transparent;
	border-right:10px solid #000;
	border-top:5px solid transparent;
	border-bottom:5px solid transparent;
}
#prevButtonDimm::before, #prevButtonDimm::after
{
	border-right:10px solid #666;
}
#prevButton::after, #prevButtonDimm::after
{
	margin-left:-10px;
}

#nextButton::before, #nextButton::after,
#nextButtonDimm::before, #nextButtonDimm::after
{
	content:"";
	position:absolute;
	margin-left:-10px;
	margin-top:-5px;
	left:50%;
	top:50%;
	width:0;
	height:0;
	border-left:10px solid #000;
	border-right:10px solid transparent;
	border-top:5px solid transparent;
	border-bottom:5px solid transparent;
}
#nextButtonDimm::before, #nextButtonDimm::after
{
	border-left:10px solid #666;
}
#nextButton::after, #nextButtonDimm::after
{
	margin-left:0px;
}
/* with/without volumeButton -20px */
.nextButton{	right:24px;	}
.noVolume .nextButton{	right:4px;	}
.prevButton{	right:66px;	}
.noVolume .prevButton{	right:46px;	}

#volumeButton
{
	position:absolute;
	right:0;
	width:24px;
	height:20px;
}
#volumeButton::before
{
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	width:5px;
	height:8px;
	margin-left:-5px;
	background-color:#ddd;
}
#volumeButton:hover::before
{
	background-color:#fff;
}
#volumeButton::after
{
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	width:0;
	height:0;
	margin-left:-11px;
	margin-top:-4px;
	border-left:8px solid transparent;
	border-right:8px solid #ddd;
	border-top:8px solid transparent;
	border-bottom:8px solid transparent;
}
#volumeButton:hover::after
{
	border-right:8px solid #fff;
}
#volumeBarBase
{
	position:absolute;
	right:2px;
	bottom:100%;
	height:100px;
	width:18px;
	background-color:#000;
}
#volumeBar
{
	position:absolute;
	left:2px;
	right:2px;
	top:2px;
	bottom:2px;
	background-color:#333;
}
#volumeBarFill
{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	background-color:#0f0;
}
.viewCover
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

#slideWrapper
{
	position:absolute;
	width:100%;
	height:100%;
	overflow:hidden;
}
#slideWrapper img
{
	position:absolute;
	width:100%;
	height:100%;
}
.slide
{
	position:absolute;
	width:100%;
	height:100%;
	background-position:50%;
	background-size:contain;
	background-repeat:no-repeat;
}
video
{
	width:100%;
	height:100%;
}

#logElement
{
	position:absolute;
	left:4px;
	right:4px;
	top:0;
	height:200px;
	border:1px solid #000;
	font-size:12px;
	overflow-y:scroll;
}

.searchForm
{
	position:absolute;
	margin:0;
	padding:0;
	right:0;
	top:0;
	height:28px;
	
	width:320px;
	
	line-height:28px;
	overflow:hidden;
	text-align:right;
}
.searchForm input[type="submit"]
{
	display:block;
	position:absolute;
	top:0;
	right:0;
	margin:0;
	padding:0;
	width:28px;
	height:28px;
	border:none;
	background-color:transparent;
	background-position:50%;50%;
	background-repeat:no-repeat;
	background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAr1JREFUeNrslk9o0mEYx2f0x20WxDoYtdps7DC6TWjMDusk0zoqdGlQIJ2kHcSDOYoOhTttDiGhSKUd8xp6ckJ2mV1qa2V5mXgqxfyf/uz7hVexPz+nUoOoBz68r6/P+3zfP8/7qKLRaAzspx0Y2Gf7L/iPCBYKBXWpVFquVCpbkiSVST6fT+zs7Dy22+1ahUIxDH6KhbEWLeOz6ESxWLwKgS8NGcMiKn6//z5CjYJD7XPbrTXWSQy7uIZWYuBoNJoyGAxvVCpVDGwYjcZX4XD4E7/DghorKytPEHcSHO5LEGJqBMozoMvleoc5L4EXWIBRYFldXY3RB0dem52dvY2xM7yqngVxlMsMFIlEUkLsHpgBI9yFgP2ZeDy+TV+fz8eFXQaqngVxNW8ZZH5+/jX8HwqxIz/6cczj8dykbyKRKOLzHTDWs2C9Xq8wyNDQUEwc44icr16vP0nfarVah99TMC0nuOezQEp/RbMLcnI+U1NTWeGrEMc82PM7xB1SZGBubu7oXotyOp1atqlUqtT3w0+n0xtsrVYr39cpcEzOV6lU3mIbCoUyaD4DeWG5e1lcXNTyUfNukPov4HrhV0mDKnSdPuVyuarRaDb7ThrYcCAQeMBHTWPqr62tWZggWMxgLpfT4diftVWcutls3sK8BXC8H0EmwKjb7fZh9TW50sadQUwSfclmsz3CvHMscz2XNjFpUqfTLaFevk8mkyWmfq1Wk9AveL3e3YmJiU2TybRNseZOkURuzBtvF+1KUIiyopwFV8BdsA6eC9bFnS1wZxSTE+1aUIgym1UiwDS4KGB/jHfGY6RIUzSTyVQxdgOoexbsclHcybjD4XBns9lqMBhkofCA8+2CCrm/id/9aHZvFD0NLgEWg48gCD40dX63IO0gOCFgAUizcP1JQdkC01xNR4e//l/bNwEGADWrd3DlF/dtAAAAAElFTkSuQmCC);
}
.searchForm.closed
{
	width:28px;
	height:28px;
	opacity:0.5;
}
.searchForm.closed:hover
{
	opacity:1;
}
.searchForm.closed input[type="text"]
{
	display:none;
}
.searchForm input[type="text"]
{
	display:inline-block;
	margin-right:28px;
	width:272px;
}
.searchResult
{
	color:#fff;
	background-color:#f00;
}
.layoutButton, .layoutSelectorButton
{
	position:absolute;
	box-sizing:border-box;
	top:0;
	bottom:0;
	width:28px;
	right:108px;
	background-repeat:no-repeat;
	background-position:50% 50%;
	opacity:0.75;
}
.noVolume .layoutSelectorButton
{
	right:88px;
}
.layoutSelector
{
	position:absolute;
	bottom:34px;
	height:30px;
	width:233px;
	right:4px;
	background-color:rgba(0,0,0,0.777);
}
.layoutSelector::before
{
	content:"";
	position:absolute;
	bottom:-9px;
	left:111px;
	border-top:9px solid rgba(0,0,0,0.777);
	border-left:4px solid transparent;
	border-right:4px solid transparent;
}
.noVolume .layoutSelector::before
{
	left:131px;
}
.layoutSelector .layoutButton
{
	position:relative;
	display:inline-block;
	left:auto;
	right:auto;
	top:auto;
	bottom:auto;
	width:28px;
	height:28px;
	margin:1px 0 0 1px;
	background-color:rgba(0,0,192,0.25);
	
	opacity:0.5;
}
.layoutSelector .layoutButton:hover
{
	opacity:0.75;
	background-color:rgba(0,0,96,1);
}
.layoutSelector .layoutButton:active
{
	opacity:1;
	background-color:rgba(0,64,192,1);
}
.layoutSelector .selected
{
	opacity:0.777;
	background-color:rgba(0,64,192,1);
}
.layoutButton.layout0,
.layout0 .layoutSelectorButton
{
	background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAdCAYAAAC5UQwxAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAANhJREFUeNpi/P//PwM9ARMDncGohaMWDn4LWRBMRrwZkpERqICyTMs4ZIP0AxAnArEiEAsCcSAQP8CpGhRKEIzExIKharGBBKjcehCGsgOwqAMbxEIlH4LAQSC2Bxr6HkgL0NKH74HYAck8ASCej8uHcBOJAf/xg/dQiwSgat9js5ARbtksAtkiHWe2EITS96FBacjIyHgBS9AyogQpBT5cD/MVMUFKDR/CwAEobYAj0TBCiheoGcBgIMqHlJY08GzxfyYDQR9So6RhHG3TjFo4auHIsxAgwAB2j2GX9RKpOAAAAABJRU5ErkJggg==);
}
.layoutButton.layout1,
.layout1 .layoutSelectorButton
{
	background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAdCAYAAAC5UQwxAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAANdJREFUeNpi/P//PwM9ARMDncGohaMWDn4LWZDYeDMkIxAAsywFmfY/45AM0kJGRgaQyycgiS2AihXSwsJ4KH0QSWwjmhxayIIiBoLxAohaZOVwrACVew/lC4DEMNVBGNSIwwAovQGEgcH5AUkMtw+JSmfYfXgeKhcAxAlQ9nlcPmSEWzaLEX+2SGfAly0UgfgDlC0AxPdxZQtq+BCEC5DUFGBXQ10fXgDGnSEsOIGUAS4fwi0EFiRE+ZDSkgZetP2fyUDQh9QoaRhH2zSjFo5aOPIsBAgwAABH6hrAega0AAAAAElFTkSuQmCC);
}
.layoutButton.layout2,
.layout2 .layoutSelectorButton
{
	background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAdCAYAAAC5UQwxAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAL9JREFUeNpi/P//PwM9ARMDncGohaMWDn4LWZDYtM6QjAPuQ2LBBiC+CGXLA3ECLeOwkZGRMRBIfwDiC0B2IkiMJBNAZSkUEwMcoHrOQ/n9SGxCAGwPqT6MB8c+I6MhkBKEBq0ASSkHqbYgNpU+gMbjQaDFG4D6FYDs+8SmUlItdARikAXzoXxDoKUX/hNXxzGSk0oNgBZMAJoPSjQCUMsSaB2kC4D4IRnZgpFcC4duScM4Wj2NWjhq4ciwECDAAJ8xmSaOBt11AAAAAElFTkSuQmCC);
}
.layoutButton.layout3,
.layout3 .layoutSelectorButton
{
	background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAdCAYAAAC5UQwxAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAKxJREFUeNpi/P//PwM9ARMDncGohaMWDn4LWRBMRhpnyP+Mgz5ICxkZGUCunIAktgAqVkgLC+Oh9EEksY1ockSELLAshWAkJm6sANHD8B7KFwCJEacXwiA1DgOg9AYQBgbnByQxmmSLeKSgJD04wXkBXj0RnS0UgfgDlC0AxPdpnS0CQEFJTnCSk2hA+DxCL8N54vVBGOQE6dAqaVjQXTBaPY1aOGrh8LcQIMAAvBe5UV4mpL8AAAAASUVORK5CYII=);
}
.layoutButton.layout4,
.layout4 .layoutSelectorButton
{
	background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAdCAYAAAC5UQwxAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMVJREFUeNpi/P//PwM9ARMDncHwt5AFjxylkcs4JIP0AhAbMkIBkK0IFaOZhY1Aey4As9J7ID4P5H8A4o3UikN8IBGI7YEYZKkCSTpBGR8HxgZAPksAYgEk/Q041GI1lxFPSYNN4gAQgywzgMadIzCIP/zHbggjNYI0ERpv+6EWC5BaNJKaaNaDLAH6CpRSFaFi+0nKnCQG6dDL+DjjEJqxyQa4Qg6nhf9n0iZIccYhhR4c9eGoD0d9SAUfjrZLh4yFAAEGAEaprOTlQYM/AAAAAElFTkSuQmCC);
}
.layoutButton.layout5,
.layout5 .layoutSelectorButton
{
	background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAdCAYAAAC5UQwxAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAM5JREFUeNpi/P//PwM9ARMDncHwt5AFtxQjhZH7n3HIBWkjIyMDyNUTkMQWQMUaifc4MFtgxxhC9yHqGQKQxAKgYvcx1WM3lxQLQdgBasF7KF8AJIZdLXYDSI3DeCi9AYSBwfkBSYwowIi7pMGZSgWBGORTAajF96FsolIpCxkJLQBqEYwtQFpuIS0OQfg8Qi/DftzqsEuQE6RDK+PjjENohibff/9JtPD/TAZKK0pGkrIFIyMjZTGIw9xRH476cNSHpFRPo+3SIWIhQIABALbtKV0Bk0neAAAAAElFTkSuQmCC);
}
.layoutButton.layout6,
.layout6 .layoutSelectorButton
{
	background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAdCAYAAAC5UQwxAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAARxJREFUeNrsVoENgjAQ5A0D1A1wA51A3IANlE1kA0dwBJ0AN4ANGAE2qP/6xkbbxg+FiPGTC+VKe/DPH4DWOhozZtHI8fuCsWeub3FhkimtESvgwPGCucEEC9SpsZVaRIXnHeIcqoa+yBFrBIkmopXU+A7Ygp5sh1DG+r3jWuu+4HEa28QFQWJLrt0GU9xp+yYQIqU5161kYSW2RmFKK0RirE2YGyyl02v8WHiDkmJN72uBLnN77IPBHZkrArylb1Rzvz7KDC5jrrG85NZ9JYKElAVaPlfEObrKuoG0hls+ngiYzs7gPusVdx+Ca2KOSNlpSLjh8WuxINTXImOhx1gFsjbnVPVcG5UeZ5RaG/S0Nv0d1gb/P+/QcRVgAD4C19KiL8jrAAAAAElFTkSuQmCC);
}
.layoutButton.layout7,
.layout7 .layoutSelectorButton
{
	background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAdCAYAAAC5UQwxAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAR5JREFUeNrsVosNgjAQ7RkGqBvgBjqBugEbKJvIBo7gCDoBbqAbMIJsUO/iGZtwRQ6BKPGSF8px7WvvR8E5Z4aUiRlYxk8YhT/Bh8F18HMuzQAM7Xrv6Q6sy5ofHMtCRkVVPOxN4ukS1hVVe3ldDSFhxQQ3frekk23lBbQx3PDzSEB3lp6ukUC40wSzdIqgk1omLnjcKEujFomWMNFzbHXVoosh4fKaa/KwnfyhjUt/q/BrYujG0by1hFfEAlhwPGNdb4TYT+GKiYadxlG2UuGfOophraSIJYJI447qUBQ62RZhvfm7gK22DsU0PXNnmXPs1uji0smLdNLaUo5bzsRWfetTuvSCiL25Met6c6nqT/TtrU3e4f8i/E7uAgwAo73V2NHzonsAAAAASUVORK5CYII=);
}

