body {
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #222222;
	color: #CCCCCC;
	font-size: 16px;
	font-family: 'Calibri Light', 'Open Sans', Corbel, sans-serif;
	overflow: hidden;
}
/* Seitengalerie */
#sidebar.outsidebar {
	transition: all 0.4s cubic-bezier(.65,0,.35,1);
	left: 0;
}
.outsidebar + #anzeige #show {
	transition: all 0.4s cubic-bezier(.65,0,.35,1) 0.05s;
	background-position: 750px center;
}
#sidebar {
	transition: all 0.4s cubic-bezier(.65,0,.35,1);
	position: absolute;
	width: 725px;
	height: 100%;
	padding: 0;
	margin: 0;
	left: -680px;
	top: 0;
	z-index: 200;
}
#galerie {
	position: absolute;
	width: 650px;
	height: 100%;
	padding: 0 15px;
	margin: 0;
	left: 0;
	top: 0;
	background-color: #222222;
}
.file {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 20px 0;
	top: 0;
	left: 0;
}
.file h2 {
	font-size: 2rem;
	height: 2rem;
	width: 80%;
	padding: 0.5rem 10% 1.5rem 10%;
	margin: 0;
	font-weight: normal;
	border-top: 3px #1F1F1F solid;
}
.imgwrapper {
	transition: all 0.2s cubic-bezier(.65,0,.35,1);
	position: relative;
	display: inline-block;
	width: 200px;
	height: 140px;
	padding: 0;
	margin: 0;
	opacity: 1;
	cursor: pointer;
	background-color: #111111;
}
.imgwrapper:hover .imgthumb {
	transition: all 0.2s cubic-bezier(.65,0,.35,1);
	opacity: 0.75;
}
.actualimg .imgthumb {
	transition: all 0.2s cubic-bezier(.65,0,.35,1);
	border: 3px #CCCCCC solid;
}
.imgthumb {
	position: relative;
	display: inline-block;
	width: 194px;
	height: 134px;
	border: 3px #222222 solid;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;	
}
/* Bilderanzeige */
#anzeige {
	position: absolute;
	display: inline-block;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
}
#showwrapper {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 1;
}
#show {
	transition: all 0.4s cubic-bezier(.65,0,.35,1) 0.05s;
	transform: scale(1);
	position: absolute;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	cursor: pointer;
	opacity: 1;
}
#show:active {
	transition: all 0.2s cubic-bezier(.65,0,.35,1) 0.05s;
	transform: scale(0.75);
}
#controlbar.outsidecontrol {
	transition: all 0.4s cubic-bezier(.65,0,.35,1);
	bottom: 0;
}
#controlbar {
	transition: all 0.4s cubic-bezier(.65,0,.35,1);
	position: absolute;
	width: 100%;
	height: 292px;
	bottom: -128px;
	left: 0;
	z-index: 150;
}
#controlwrapper {
	position: absolute;
	width: 100%;
	height: 128px;
	left: 0;
	bottom: 0;
	background-color: rgba(34,34,34,0.85);
}
#controls {
	position: absolute;
	width: 240px;
	height: 64px;
	top: 0;
	left: 50%;
	margin-left: -120px;
}
.cont {
	transition: all 0.2s cubic-bezier(.65,0,.35,1);
	position: relative;
	display: inline-block;
	width: 72px;
	height: 64px;
	left: 0;
	top: 32px;
	margin: 0;
	padding: 0;
	cursor: pointer;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	opacity: 0.7;
}
.cont:after,
#fullscreen:after {
	transition: all 0.2s cubic-bezier(.65,0,.35,1);
	display: inline;
	position: absolute;
	top: -48px;
	left: 0;
	margin: 0;
	padding: 5px;
	border: 3px #CCCCCC solid;
	color: #CCCCCC;
	background-color: #111111;
	text-align: center;
	opacity: 0;
}
.cont:hover::after,
#fullscreen:hover::after {
	transition: all 0.2s cubic-bezier(.65,0,.35,1) 0.75s;
	opacity: 1;
}
#prev {
	background-image: url('prev.png');
}
#prev:after {
	content: 'Vorheriges';
}
#start {
	background-image: url('play.png');
	z-index: 150;
	opacity: 0;
}
#start:after {
	content: 'Starten';
}
#stop {
	position: relative;
	display: inline-block;
	width: 72px;
	height: 64px;
	top: 32px;
	left: -72px;
	margin-right: -72px;
	background-image: url('pause.png');
	z-index: 150;
	opacity: 0;
}
#stop:after {
	content: 'Anhalten';
}
#controls .diactive {
	transition: all 0.2s cubic-bezier(.65,0,.35,1);
	z-index: 151;
	opacity: 0.7;
}
#next {
	background-image: url('next.png');
}
#next:after {
	content: 'Nächstes';
}
.cont:hover,
#controls .diactive:hover {
	transition: all 0.2s cubic-bezier(.65,0,.35,1);
	opacity: 1;
}
#fullscreen {
	position: absolute;
	display: inline-block;
	width: 72px;
	height: 64px;
	top: 32px;
	right: 32px;
	margin: 0;
	padding: 0;
	cursor: pointer;
	background-repeat: no-repeat;
	background-size: 48px;
	background-position: center;
	background-image: url('expand.png');
	opacity: 0.7;
}
#fullscreen.activefullscreen {
	transition: all 0.2s cubic-bezier(.65,0,.35,1);
	background-image: url('shrink.png');
}
#fullscreen:hover  {
	transition: all 0.2s cubic-bezier(.65,0,.35,1);
	opacity: 1;
}
#fullscreen:after {
	content: 'Vollbild';
}