@font-face { font-family: OpenSans_Light; src: url('../Fonts/OpenSans_Light.woff') format('woff'); } @font-face { font-family: OpenSans_LightItalic; src: url('../Fonts/OpenSans_LightItalic.woff') format('woff'); } @font-face { font-family: OpenSans_Regular; src: url('../Fonts/OpenSans_Regular.woff') format('woff'); } @font-face { font-family: OpenSans_Italic; src: url('../Fonts/OpenSans_Italic.woff') format('woff'); } html, html.light { font-family: OpenSans_Light; font-size: calc(11.5px + 0.7vmin); --stroke-width: 0.2rem; --stroke-color: #689F38; } html em, html.light em { font-style: normal; font-family: OpenSans_LightItalic; } html header, html.light header, html footer, html.light footer, html blockquote, html.light blockquote, html pre, html.light pre, html form, html.light form, html iframe, html.light iframe, html p.externalCalender, html.light p.externalCalender, html p.reviewHeader, html.light p.reviewHeader, html div#thumbnails img, html.light div#thumbnails img, html div#thumbnailCaption, html.light div#thumbnailCaption { border-width: 0.05rem; } html svg g path, html.light svg g path { stroke-width: 0.2rem; } html.regular { font-family: OpenSans_Regular; font-size: calc(13px + 0.8vmin); --stroke-width: 0.3rem; --stroke-color: #689F38; } html.regular em { font-style: normal; font-family: OpenSans_Italic; } html.regular header, html.regular footer, html.regular blockquote, html.regular pre, html.regular form, html.regular iframe, html.regular p.externalCalender, html.regular p.reviewHeader, html.regular div#thumbnails img, html.regular div#thumbnailCaption { border-width: 0.1rem; } html.regular svg g path { stroke-width: 0.3rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; } h2, h3 { margin-top: 2.5ex; margin-bottom: 1ex; } h1, h2, h3 { font-weight: normal; } a { color: #689F38; cursor: pointer; text-decoration: underline #DCEDC8; border-style: solid; border-color: #F1F8E9; border-width: 0 0.3em; margin: -0.3em; } a:hover { background-color: #DCEDC8; border-color: #DCEDC8; } ul, ul ul { list-style-type: disc; } ul { padding-left: 1em; margin-left: 1em; } pre { font-family: 'Lucida Console', 'Consolas', monospace; font-size: 80%; background: #ecf5e1; padding: 1rem 0; border-style: dotted; border-left-style: none; border-right-style: none; overflow: auto; scrollbar-width: thin; scrollbar-color: #689F38 #DCEDC8; } div#coverFOUC { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; animation-name: coverFOUC; animation-duration: 0.8s; background-color: rgba(241, 248, 233, 0); } @keyframes coverFOUC { from { background-color: #f1f8e9; } 50% { background-color: #f1f8e9; } to { background-color: rgba(241, 248, 233, 0); } } body { overflow-y: scroll; color: black; margin: 0; padding-top: 0; padding-left: 3rem; padding-right: 3rem; padding-bottom: 12ex; font-weight: 300; background: #F1F8E9; } header { position: fixed; top: 0; left: 3rem; right: 3rem; z-index: 1; display: flex; justify-content: center; align-items: center; border-bottom-style: solid; border-bottom-color: #689F38; background: rgba(241, 248, 233, 0.9); } header h1 { width: 75%; text-align: center; padding: 1.5ex; margin: 0; } header h1 a { text-decoration: none; } article { max-width: 600px; padding-top: 16ex; padding-left: 0; padding-right: 0; padding-bottom: 3ex; margin: 0 auto; } article img.landscape { max-height: 66vh; max-width: 50vw; } article img.portrait { max-height: 80vh; max-width: 33vw; } article img.left { float: left; position: relative; left: 0; border: 2ex solid #F1F8E9; border-left-style: none; } article img.right { float: right; position: relative; right: 0; border: 2ex solid #F1F8E9; border-right-style: none; } @media (min-width: 700px) { article img.right { right: calc(-1 * (100vw - 700px) / 3); margin-left: calc(-1 * (100vw - 700px) / 3 + 2ex); } article img.left { left: calc(-1 * (100vw - 700px) / 3); margin-right: calc(-1 * (100vw - 700px) / 3 + 2ex); } } article img.icon { float: left; margin-top: 2ex; margin-right: 2ex; margin-bottom: 1ex; } article blockquote, article pre, article iframe, article p.externalCalender, article p.reviewHeader { border-color: #9CCC65; } article blockquote, article form { margin: 2em; padding: 0.5em 2em; border-style: dotted; border-right-style: none; color: #9CCC65; } article blockquote p, article form p { margin: 0.25em 0; } article blockquote p.quote, article form p.quote { color: black; } article iframe { width: calc(100% - 2em); height: 25ex; margin-left: 2em; margin-top: 0.5em; border-style: dotted; } article p.externalCalender, article p.reviewHeader { margin-left: 2em; padding-left: 2em; border-left-style: dotted; } article p.reviewHeader { color: #9CCC65; } article span.reviewStars { color: #689F38; margin-right: 1em; } article span.reviewStars svg.star { height: 0.8em; width: 0.8em; } article p#foreignIframeNotification { display: none; color: #689F38; } div#gallery { z-index: 3; position: fixed; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; } div#gallery.normal { top: 1.5rem; left: 1.5rem; width: calc(100vw - 3rem); height: calc(100vh - 3rem); background-color: rgba(51, 105, 30, 0.95); } div#gallery.normal div.top, div#gallery.normal div.bottom, div#gallery.normal div.left, div#gallery.normal div.right, div#gallery.normal div#icon { display: flex; } div#gallery.normal div.center { justify-content: space-between; } div#gallery.magnified { top: 0; left: 0; width: 100vw; height: 100vh; background-color: #295518; } div#gallery.magnified div.top, div#gallery.magnified div.bottom, div#gallery.magnified div.left, div#gallery.magnified div.right, div#gallery.magnified div#icon { display: none; } div#gallery.magnified div.center { justify-content: center; } div#gallery div.center { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; } div#gallery div.center div.middle { position: relative; } div#gallery div.center div.middle div#icon { position: absolute; right: 1.5rem; bottom: 1.5rem; } div#gallery div.center div.middle:hover svg { background-color: #558B2F; } div#gallery div.center div.left, div#gallery div.center div.right { width: 4.5rem; height: 30vh; justify-content: center; align-items: center; } div#gallery img#image { cursor: pointer; } div#gallery img#image.normal { max-width: calc(100vw - 4 * 3rem); max-height: calc(100vh - 4 * 3rem); } div#gallery img#image.magnified { max-width: 100vw; max-height: 100vh; } div#gallery p { max-width: 80vw; color: white; text-align: center; } div#gallery p span#imageNumber { font-style: italic; } div#gallery p a { color: white; text-decoration: underline #558B2F; border-color: rgba(51, 105, 30, 0.95); } div#gallery p a:hover { background-color: #558B2F; border-color: #558B2F; } div#gallery svg { width: 1.98rem; height: 1.98rem; } div#gallery svg path { stroke: white; } div#gallery .hover svg:hover, div#gallery .left:hover, div#gallery .right:hover { background-color: #558B2F; cursor: pointer; } div#gallery div#close { position: fixed; top: 3rem; right: 3rem; cursor: pointer; } div#thumbnails { display: grid; grid-template-columns: repeat(auto-fill, 101px); grid-gap: 1em; } div#thumbnails img { cursor: pointer; border-style: solid; border-color: #F1F8E9; } div#thumbnails img:hover { border-color: #689F38; } div#thumbnailCaption { z-index: 1; position: fixed; bottom: 5vh; padding: 1em; display: flex; justify-content: center; align-items: center; text-align: center; border-style: solid; border-color: #689F38; background: rgba(241, 248, 233, 0.9); } @media (orientation: landscape) { div#thumbnailCaption { height: 5vh; left: 20vw; right: 20vw; } } @media (orientation: portrait) { div#thumbnailCaption { height: 10vh; left: 10vw; right: 10vw; } } div#thumbnailCaption.invisible { opacity: 0; } div#thumbnailCaption.visible { opacity: 1; } div#thumbnailCaption.hidden { opacity: 0; animation-name: hideCaption; animation-duration: 2s; } @keyframes hideCaption { from { opacity: 1; } to { opacity: 0; } } div#pictures { display: flex; flex-direction: column; align-items: center; padding-top: 3em; } div#pictures p { text-align: center; padding: 0em 3em 3em; } form { display: flex; align-items: center; justify-content: space-between; padding-bottom: 2ex !important; } form div.price { text-align: right; } form span#price { font-size: 200%; } form label { font-size: 80%; } div.statistics span.label { float: left; padding-right: 2ex; } div.statistics span.value { padding-left: 1ex; } div.statistics span.bar, div.statistics span.bar2 { float: left; } div.statistics span.bar { background-color: #C5E1A5; border-right: 1px solid #7CB342; } div.statistics span.bar2 { background-color: #DCEDC8; border-right: 1px solid #8BC34A; } aside { position: fixed; right: 0; top: 0; width: 3rem; height: 100vh; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; align-items: center; } aside div.top { display: flex; justify-content: center; align-items: center; } aside div#icons { padding: 1.5rem 0; background-color: rgba(220, 237, 200, 0.5); } aside div.icon, aside div.iconCurrent { height: 1.98rem; margin: 0.75rem 0; cursor: pointer; } aside div.icon:hover, aside div.iconCurrent:hover { background-color: #9fce68; } aside div.icon svg, aside div.iconCurrent svg { width: 1.98rem; height: 1.98rem; } aside div.iconCurrent { background-color: #c4e0a2; } aside div#iconClose { display: none; } aside div.icon svg path { animation-name: fadeOut; animation-delay: 0.8s; animation-duration: 0.8s; stroke: #9CCC65; } aside:hover div.icon svg path, aside div.iconCurrent svg path { stroke: #689F38; } @keyframes fadeOut { from { stroke: #689F38; } to { stroke: #9CCC65; } } div#menu { display: none; z-index: 2; position: fixed; right: 3rem; top: 3rem; background-color: rgba(241, 248, 233, 0.95); border: 1px solid #689F38; padding: 1ex 5ex 1ex 1ex; width: auto; height: auto; text-align: left; } div#menu ul { list-style-type: none; margin: 0; padding-left: 2ex; padding-right: 0ex; } div#menu a { display: inline-block; width: 100%; padding-left: 2ex; } aside div#modus { position: fixed; left: 0; top: 50vh; transform: translateX(-50%) translateX(1.5rem) rotate(-90deg); color: #9CCC65; } table.icons svg, p.icons svg { height: 3ex; } table.icons svg path, p.icons svg path { stroke: #9CCC65; } table.icons svg:hover path, p.icons svg:hover path { stroke: #689F38; } div#browse { color: #689F38; width: 100%; display: flex; } div#browse div.center { padding: 0 1em; } div#browse div#previousPage, div#browse div#nextPage { flex: 1 1 0px; } div#browse div#previousPage { text-align: right; } div#browse div#nextPage { text-align: left; } footer { z-index: 1; padding: 0; margin: 2ex 1ex; border-top-style: solid; border-top-color: #689F38; } footer p { text-align: center; } footer p#noScriptLament { color: #9CCC65; } @media print { header { position: absolute; } aside, footer { display: none; } }