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