laerer

.main.view_laerer {
	color: #fff;
	background-color: #262e38
}

.main.view_laerer #document_title {
color: #fff;
}


/**
*	section
*/
.laerer section {
	padding: 1em 0 0 0;
	overflow: hidden;
}
.laerer section > article {
	float: left;
	width: calc(100% - 37em);
	padding: 0 0 1em 0;
}
.laerer section > article > img {
	float: right;
	margin: 1.4em 0;
}
.laerer section > article > div {
	clear: right;
}
.laerer section > ul {
	list-style-type: none;
	width: 36em;
	padding: 0 0 1em 0;
	margin: auto;
	overflow: hidden;
}
.laerer section > ul > li {
	float: left;
	width: 10em;
	margin: 0;
	padding: 0.4em 1em 0.7em 1em;
	border-radius: 1em;
	cursor: pointer;
	transition: background-color 0.2s; 
}
.laerer section > ul > li.active {
	background-color: #fd6;
}
.laerer section > ul > li > img {
	width: 10em;
	height: 15em;
	padding: 0;
	margin: 0;
}
.laerer section > ul > li:not(.active):hover {
	background-color: #101319;
}


/**
*	aside
*/
.laerer aside > div {
	display: none;
}
.laerer aside > div > h3 {
	padding: 1em 0;
	margin: 0;
	color: #fd6;
	font-size: 1.4em;
	font-weight: bold;
	border-top: 0.25em solid #101319;
}
.laerer aside > div ul {
	list-style-type: none;
	padding: 0 0 2em 0;
	margin: 0;
	overflow: hidden;
}
.laerer aside > div ul li {
	float: left;
	width: 33%;
}
.laerer aside > div ul li > a {
	display: block;
	padding: 1em 1.5em 1em 1.5em;
	height: 3em;
	color: #ddd;
	text-decoration: none;
	border-radius: 1em;
	overflow: hidden;
	transition: background-color 0.2s;
}
.laerer aside > div ul li > a:hover {
	color: #fff;
	background-color: #101319;
}
.laerer aside > div ul li > a:focus {
	color: #101319;
	background-color: #fd6;
}
.laerer aside > div ul li > a:hover > div {
	background-color: #fff;
}
.laerer aside > div ul li > a:target {
	color: #101319;
	background-color: #fd6;
}
.laerer aside > div ul li > a > div {
	float: left;
	width: 4em;
	height: 3em;
	padding: 0;
	margin: 0;
	border-top-left-radius: 1em;
	border-bottom-right-radius: 1em;
	background-color: #ddd;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}
.laerer aside > div ul li > a.filename_pptx > div {
	background-image: url('/data/00db0235-86cc-4899-869e-3a68d7444312');
}
.laerer aside > div ul li > a.filename_docx > div {
	background-image: url('/data/0092be3c-6855-49aa-a173-4e2d35147fe3');
}
.laerer aside > div ul li > a.filename_quiz > div {
	background-image: url('/data/59191f65-16ad-495e-bb08-54e628b6d1a4');
}
.laerer aside > div ul li > a > span {
	float: right;
	display: block;
	width: calc(100% - 5em);
	line-height: 1.25em;
}


/**
*	responsive
*/
/*	section */
@media screen and (max-width: 1023px) {
	.laerer section > article {
		float: none;
		width: 100%;
		padding: 0;
	}
	.laerer section > ul {
		float: none;
		margin: 0 auto;
		padding: 0.75em 0 2em 0;
	}
}

/*	aside */
@media screen and (max-width: 600px) {
	.laerer aside > div ul li {
		width: 100%;
	}
	.laerer aside > div ul li > a {
		text-align: center;
	}
	.laerer aside > div ul li > a > div {
		width: 50%;
		margin: auto;
	}
}
@media screen and (min-width: 601px) and (max-width: 800px) {
	.laerer aside > div ul li {
		width: 100%;
	}
}
@media screen and (min-width: 801px) and (max-width: 1023px) {
	.laerer aside > div ul li {
		width: 50%;
	}
}
Spinner

Login