.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%;
}
}