@font-face { font-family: "Perspective Sans"; src: url("fonts/PerspectiveSans-Regular.otf"); } @font-face { font-family: "Perspective Sans"; src: url("fonts/PerspectiveSans-Italic.otf"); font-style: italic; } @font-face { font-family: "Perspective Sans"; src: url("fonts/PerspectiveSans-Bold.otf"); font-weight: bold; } @font-face { font-family: "Perspective Sans"; src: url("fonts/PerspectiveSans-BoldItalic.otf"); font-weight: bold; font-style: italic; } @font-face { font-family: "Perspective Sans"; src: url("fonts/PerspectiveSans-Black.otf"); font-weight: 900; } @font-face { font-family: "Perspective Sans"; src: url("fonts/PerspectiveSans-BlackItalic.otf"); font-weight: 900; font-style: italic; } @font-face { font-family: "Linux Biolinum"; src: url("fonts/LinBiolinum_R.otf"); } @font-face { font-family: "Linux Biolinum"; src: url("fonts/LinBiolinum_RI.otf"); font-style: italic; } @font-face { font-family: "Linux Biolinum"; src: url("fonts/LinBiolinum_RB.otf"); font-weight: bold; } body { font-size : 1.2em; font-family : "Linux Biolinum"; font-weight: 400; color : #404040; line-height : 1.5em; } body, .body { padding-left : 2em; padding-right : 2em; padding-top : 1.5em; padding-bottom : 1.5em; } body.commented { padding-left : 2em; padding-right : 240px; } a { color : #00aff0; text-decoration : underline; } a:link { } a:visited { color : #306080; } a:focus { } a:hover { color : #1da64a; text-decoration : underline; } a:active { color : #1da64a; text-decoration : underline; } a.button { color : white; background-color : #00aff0; padding : 4px; font-weight : bold; text-decoration : none; position : relative; top : 0px; left : 0px; right : 4px; bottom : 4px; box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.2); } a.button:link { } a.button:visited { } a.button:focus { } a.button:hover { background-color : #bedc0a; } a.button:active { background-color : #bedc0a; box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2); top : 4px; left : 4px; right : 0px; bottom : 0px; } a.button.active { background-color : black; cursor : default; } p { margin-top : 0.1em; margin-bottom : 0.5em; text-align : justify; } hr { margin-top : 5px; margin-bottom : 5px; border : 0px none transparent; height : 30px; background-color : transparent; background-image : url("../../media/logos/logo-A4.svg"); background-size : 30px 21px; background-repeat : no-repeat; background-position : center; } hr:before, hr:after { content : ''; height : 2px; width : calc(50% - 100px); background-color : #bedc0a; margin-top : 14px; } hr:before { float : left; margin-left : 50px; } hr:after { float : right; margin-right : 50px; } h1 { font-size : 1.8em; padding : 0px; margin-top : 1.2em; } h2 { font-size : 1.5em; padding : 0px; margin-top : 1em; margin-bottom : 0.14em; text-decoration : underline; } h3 { font-size : 1.3em; padding : 0px; margin-top : 0.6em; margin-bottom : 0.12em; } h4 { font-size : 1.1em; padding : 0px; margin-top : 0.4em; margin-bottom : 0.1em; } ul { padding-left : 1.5em; } ul li { margin-bottom : 0.5em; list-style-type : none; } ul li:before { content : ''; float : left; width : 1.5em; height : 1.2em; vertical-align : top; margin : 0px; padding : 0px; margin-left : -1.5em; background-image : url('../images/Stichpunkt.svg'); background-repeat : no-repeat; background-size : 0.8em 0.6em; background-position : center bottom; } blockquote { position : relative; padding : 0px; padding-left : 1em; margin : 0px; text-align : justify; } blockquote:before { content : '\201C'; display : block; position : absolute; width : 0.4em; left : 0px; top : 3px; bottom : 0px; font-size : 2em; font-weight : bold; line-height : 0.2em; box-sizing : border-box; padding-top : 0.5em; margin-bottom : 0.2em; text-align : left; background-color : #efebdc; } sub { line-height : 0.4em; } table { border-collapse : collapse; } table td { border : 1px solid gray; padding : 3px; } table th { padding : 1px; vertical-align : bottom; } table.thborder th { border : 1px solid gray; padding: 3px; } .accepted { background-color: #CFC; } .rejected { background-color: #FCC; } img.rejected { border: 8px solid #FCC; } acceptance { display: none; } commentnote { z-index: 1; width: 0px; height: 0px; float: left; margin-right: 0px; margin-left: 0px; position : relative; white-space : pre-wrap; } commentnote div { counter-increment: comment; position : absolute; right : calc(-100vw + 75px); top : 0px; max-height : 100px; width : 200px; overflow : hidden; background-color: #FFA; border : 2px solid #DA5; font-size: 17px; font-weight: normal; text-decoration: none; } commentnote.redaction div { background-color: #CCF; } commentnote.accepted div { background-color: #CFC; } commentnote.rejected div { background-color: #FCC; } commentnote:hover { z-index: 2; } commentnote:hover div { max-height: 80vh; min-height: 100px; width: 80vw; right : calc(-100vw + 95px); } commentnote:before { content : ''; position : absolute; display : block; height : 2px; background-color: #DA5; width : calc(100vw - 275px); left : calc(0px); } .footnotelink { font-size : 0.7em; font-weight : bold; line-height : 0.6em; } .footnotelink a:before { content : '['; } .footnotelink a:after { content : ']'; } .footnotelink a { text-decoration : none; } footnote, .footnote { display : none; } #footer footnote, #footer .footnote { display : block; padding-left : 3em; font-size : 0.9em; margin-bottom : 0.4em; } #footer footnote .number, #footer .footnote .number { margin-left : -3em; display : inline-block; width : 2.5em; text-align : right; padding-right : 0.5em; } #footer footnote.active, #footer .footnote.active { background-color : #efebdc; } .videolink { float : right; margin : 4px; width : 80px; height : 40px; background-image : url('kamera.svg'); background-size : contain; background-repeat : no-repeat; } .videolink:link { } .videolink:visited { } .videolink:focus { } .videolink:hover { width : 88px; height : 48px; margin : 0px; } .videolink:active { width : 88px; height : 48px; margin : 0px; } .videolink.left { float : left; } body .calendar ul.dates a { color : #3f3f3f; } div.video-js { width : 100%; height : 100%; overflow : hidden; } .video-next-but, .video-prev-but { position : absolute; top : -50px; color : white; border : 1px solid white; padding : 4px; border-radius : 2px; font-weight : bold; font-size : 15px; text-decoration : none; z-index : 1; } .video-next-but { right : 0px; } .video-prev-but { left : 0px; } .video-next-but:hover, .video-prev-but:hover { color : white; text-decoration : none; } .vjs-menu-button-popup { background-image : url('Zahnrad.svg'); background-size : contain; background-repeat : no-repeat; background-position : center; z-index : 2; } .vjs-menu-button-popup div.vjs-menu { left : auto; right : 0px; } .figure { float : right; width : 40%; padding : 10px; margin-left : 20px; border : 1px solid #008bd0; position : relative; font-size : 0.9em; } .figure img { width : 100%; } svg * { font-family : 'Linux Biolinum'; } body .JSW.OuterBox .JSW.Title, body .video-js { font-family : 'Perspective Sans'; } ol.faq { counter-reset : faq; padding-left : 1.3em; } ol.faq li { list-style-type : none; background-color : #efebdc; padding : 3px; margin-bottom : 6px; } ol.faq li b { display : block; cursor : s-resize; } ol.faq li b:before { counter-increment : faq; content : counter(faq) ". "; } ol.faq li.open b { cursor : n-resize; } ol.faq li:before { content : ''; float : left; width : 1.3em; height : 1.2em; vertical-align : top; margin : 0px; padding : 0px; margin-left : -1.3em; background-image : url('../images/Stichpunkt.svg'); background-repeat : no-repeat; background-size : 0.8em 0.6em; background-position : left bottom; transform : rotate(0deg); transition : transform 0.8s; transform-origin : 0.5em 1em; } ol.faq li.open:before { transform : rotate(45deg); } ol.faq li .compressing { overflow: hidden; transition : 0.5s; } ol.faq li.open .compressing { height : 0px !important; } ol.faq li .expanding { max-height : 0px; overflow : hidden; margin-bottom : 0px; transition : 0.5s; transition-timing-function: linear(0, 0.9, 0.96, 0.975, 0.983, 0.99, 0.995, 1); } ol.faq li.open .expanding { max-height : 10000px; margin-bottom : inherit; transition : 1s; transition-timing-function: linear(0, 0.005, 0.01, 0.017, 0.025, 0.04, 0.1, 1); } ol.faq li .expanding:last-child { margin-bottom : 0px; } .carousel-item, .collection-items__item { display: inline-block; padding: 5px; padding-bottom: calc(1.2em + 5px); margin-right: 0px; width: 26vw; max-width: 350px; min-width: 230px; background-color: #efebdc; border: 3px solid #bedc0a; text-decoration: none; color : black; position : relative; } .carousel-item:hover, .collection-items__item:hover { border-color : #00aff0; color : black; text-decoration : none; } .carousel-item:active, .collection-items__item:active { color : black; text-decoration : none; } .carousel-item img, .collection-items__item img { width: 100%; } .carousel-item b, .collection-items__item b { font-size: 1.2em; display: block; } .collection-items { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .collection-items .collection-items__item { margin-bottom: 20px; } .carousel__horizontal { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; overflow-x: scroll; -ms-overflow-style: none; scrollbar-width: none; } .carousel__horizontal::-webkit-scrollbar { display : none; } .carousel__horizontal .carousel-item { margin-right: 20px; } .collection-items h2 { font-size: 1.3em; text-decoration: none; margin-top: 5px; } .collection-items time { font-size: 1.2em; color: #444; position: absolute; bottom: 5px; right: 5px; font-style: italic; font-weight: bold; } .collection__list { padding: 0px; text-align: center; } .collection__list li { display: inline-block; margin-right : 20px; } .collection__list li:before { display: none; } .text-intro-image, .text-and-image__image, .event-intro__image { display: block; width: 80%; margin-left: 10%; } aside { float: right; margin-left: 10px; width: 30%; border: 1px solid gray; padding: 5px; } .event-intro__meta { margin-bottom: 20px; } .dateList { list-style-type : none; } .dateList .date { font-weight : bold; } .dateList .date:after { content : ': '; } .categoryList { text-align: center; margin-top: 10px; margin-bottom: 30px; } .categoryList .button { margin-right: 20px; }