/* ################################### General ######################################### */ :root { /* --- platform --- */ --maxWidth: 1024px; --fontSizeBody: 16px; /* --- colors --- */ --colorMainBackground:#262a2d; --colorMainFont:#CCCCCC; --colorHeaderBackground:#1c2224; --colorFooterBackground:#1c2224; --colorHeaderFont:#CCCCCC; --colorFooterFont:#CCCCCC; --colorContainerBackground:#f3f3f3; --colorContainerFont:#3c3c3c; --colorHighlightBackground:#25bcb4; --colorHighlightFont:#ffffff; --colorLineBackground:#f3f3f3; /* --- header and footer --- */ --headerHeight: 60px; --footerHeight: 60px; --logoScale: 100; --headerOuterCellWidth: 50px; --footerDesktopNavigationHeight: 60px; --footerIconMinimalWidth: 50px; /* --- magazine images. private & newspapers (thumb-nails) --- */ --imageBaseThumbWidth: 160px; --imageArticleWidth: 160px; --imageArticleHeight: 216px; --imageNewspaperWidth: 160px; --imageNewspaperHeight: 216px; --imagePrivateArticleWidth: 160px; --imagePrivateArticleHeight: 216px; /* --- stretchedThumbs) --- */ --stretchedArticleWidth: 160px; --stretchedArticleHeight: 216px; --stretchedNewspaperWidth: 160px; --stretchedNewspaperHeight: 216px; --stretchedBranchWidth: 160px; --stretchedBranchHeight: 216px; /* --- reader platform --- */ --imageReaderWidth: 160px; --imageReaderHeight: 216px; /* --- search --- */ --searchSectionMaxWidth: 650px; --categoryBlockWidth: 140px; /* --- html version --- */ --fontSizeHtmlControllers: 14px; --htmlHeaderHeight: 50px; /* --- misc --- */ --blockBorderWidth: 7px; --bannerHeightPerc: 75%; /* ideally 50% -> 2w x 1h */ --tocMaxWidth: 650px; --tocFooterTopPerc: 50%; /* was 50% */ --bookmarksMaxWidth: 650px; --offlineMaxWidth: 650px; } body,html { background-color:var(--colorMainBackground); color:var(--colorMainFont); } h1 { color:var(--colorMainFont); } .hideScrollbar { scrollbar-width:none;} .hideScrollbar::-webkit-scrollbar { display:none; background:transparent;} .colorHighlight { color:var(--colorHighlightBackground);} /* ################################### spinner ######################################### */ .lds-ring {color: var(--colorMainFont);} .lds-ring div {border: 8px solid var(--colorMainFont); border-color: var(--colorMainFont) transparent transparent transparent;} /* ################################### Platform ######################################### */ #divPlatform{ max-width:var(--maxWidth); margin:auto; user-select: none; } .popoverBlock { position:fixed; left:0px; top:var(--headerHeight); bottom:var(--footerHeight); width:100%; background-color: var(--colorMainBackground); overflow:auto; } .fixedScrollSection { height: 100svh; overflow:auto; } #divPlatform[data-in_top_view="1"] #imgTopBackButton {display:none;} /* ################################### Header ######################################### */ header { background-color:var(--colorHeaderBackground); height: var(--headerHeight); position:fixed; top:0px; left:0px; width:100%; z-index:1; padding:0px; overflow:hidden; } header.bottomDivider { border-bottom:1px solid var(--colorLineBackground); } header table {height:var(--headerHeight);max-width:var(--maxWidth);margin:auto;} header table td {height:var(--headerHeight); text-align:center; overflow:hidden; position:relative; } header table td:nth-child(1) {width:var(--headerOuterCellWidth); padding-left:5px;} header table td:nth-child(3) {width:var(--headerOuterCellWidth); padding-right:5px;} header table td:nth-child(2) img {height: calc(85% * var(--logoScale)/100); width: auto; } /* header table td:nth-child(2) img {height: calc(85% * var(--logoScale)/100); width: auto; display:inline-block;} */ header table td img {display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} /* ################################### divBodyContent ######################################### */ #divBodyContent { padding-top: calc(var(--headerHeight)); padding-bottom: calc(var(--footerHeight) + 10px); position: relative; height:auto; min-height: 100dvh; } /* hide body content if a popover is available - sometimes the view is rendered after scrolling (i.e. on android) so you would see background magazines during scrolling */ #divPlatform:has(.popoverBlock:not(.hidden)) #divBodyContent { visibility: hidden; } body:has(#divSpinner) #divStartPageItems { visibility: hidden; } /* ################################### banners ######################################### */ #divBanner { position: relative; width: 100%; overflow:hidden; border-radius:var(--radiusBanner); } #divBanner.extraEdged { width:calc(100% - 24px); /* width: 95%; */ margin:auto; margin-top:15px; } #divBanner[onclick] { cursor:pointer; } /* 2x1 ratio */ #divBanner::before { content: ""; display: block; padding-top: var(--bannerHeightPerc); } #divBanner img {position:absolute;top:0px;left:0px;width:100%;height:auto;} #divBannerSwiper {border:0px solid red;position:absolute;bottom:3px; left:0px;text-align:center; width:100%;} #divBannerSwiper .bannerDot {height: 10px;width: 10px;background-color: #bbb;border-radius: 50%;display: inline-block;margin-right:10px; opacity:0.8;} #divBannerSwiper .bannerDot.active {background-color:white;opacity:1;} @media (max-width: 600px) { #divBannerSwiper .bannerDot {height: 5px;width: 5px;margin-right:5px;} } /* ################################### divHtml ######################################### */ #divHtml { padding-top: var(--blockBorderWidth); } /* ################################### Footer ######################################### */ footer { background-color:var(--colorMainBackground); height:var(--footerHeight); position:fixed; bottom:0px; left:0px; width:100%; z-index:1; overflow: hidden; } footer::before { content:""; position:absolute; display:block; top:0px; left:0px; height: 100%; width:100%; border-radius: var(--radiusFooter) var(--radiusFooter) 0px 0px; background-color:var(--colorFooterBackground); z-index:-1; } #footerContent { height:100%;max-width: var(--maxWidth);margin:auto;width:100%;text-align:center; display: flex; justify-content: space-between; align-items: center; padding-left:10px; padding-right:10px;} footer .iconWrapper { display:inline-block; text-align:center;cursor:pointer; min-width:var(--footerIconMinimalWidth);position:relative;} footer .iconLabelWrapper { text-align:center;padding-top:5px;font-size:10px;color:var(--colorFooterFont);overflow:hidden;} footer .iconLabelWrapper.active { font-weight:bold;} footer img { position: relative; top: 6px; } footer img.icon { width:27px;height:27px; } @media (max-width: 600px) { footer .iconWrapper {margin-left:3px; margin-right:3px; } } @media (min-width: 601px) and (max-width: 900px) { #footerContent {justify-content: center; gap: 30px; align-items: center; } } @media (min-width: 901px) and (max-width: 1023px) { #footerContent {justify-content: center; gap: 70px; align-items: center; } } @media (min-width: 1024px) { #footerContent {justify-content: center; gap: 100px; align-items: center; }} @media (max-width: 601px) { #footerContent .iconWrapper:nth-of-type(n+6) {display: none; } /* only allow for a max of 5 icons (n+6) to be desplayed */ } footer[data-disabled_labels] .iconLabelWrapper { display:none; } footer[data-disabled_labels] .iconWrapper img { top:0px; } /* ------------ more icons div ---------------- */ #footerContentMore { padding:15px; padding-top:5px; position:absolute; bottom: calc(var(--footerHeight) - 2px ); right:0px; overflow:auto; background-color:var(--colorFooterBackground); } footer:has(#footerContentMore:not(.hidden)) { overflow:visible; } #footerContentMore table { width:auto; margin:10px; cursor:pointer; margin-top:15px;} #footerContentMore table div { padding-left:20px;padding-right:10px;} footer .iconWrapper .topWrapper { display:none;} footer:has(#footerContentMore:not(.hidden)) .iconWrapper .topWrapper { display:inline-block; width:100%; height:100%; position:absolute; top:0px; left:0px; } /* ################################### Main Overview Page (and branches-page) ######################################### */ #divAllTitles, #divBranches { text-align:center; font-size:0px; /* else images show bit margin at bottom */ margin-top:10px; } #divAllTitles .imgWrapper, #divBranches .imgWrapper { display:inline-block; overflow:hidden; position:relative; } #divAllTitles .articleCaption, #divBranches .articleCaption, #divPrivate .articleCaption { text-align:left; font-size:var(--fontSizeBody); overflow:hidden; text-overflow: ellipsis; margin-bottom:15px; white-space: nowrap; padding:2px; padding-left:var(--blockBorderWidth); position:relative; font-weight:bold; } #divAllTitles .articleCaption, #divBranches .articleCaption {width:var(--imageArticleWidth);} #divNewspapers .articleCaption {width:var(--imageNewspaperWidth);} #divAllTitles img, #divBranches img { cursor:pointer; margin:var(--blockBorderWidth); border-radius: var(--radiusMagazine); } #divArticles img, #divBranches img { width: var(--imageArticleWidth); height: var(--imageArticleHeight); } #divNewspapers img { width: var(--imageNewspaperWidth); height: var(--imageNewspaperHeight); } #divTitleDescription { font-size:var(--fontSizeBody);text-align:left;margin-bottom:15px;margin-top:10px;padding:10px;} #divTitleDescription div:first-child { text-transform: uppercase;font-size: calc(var(--fontSizeBody) * 1.5); margin-bottom:10px; } #divTitleDescription div:last-child { margin-bottom:10px; } #divTitleDescription.centred { text-align:center; } #divPlatform[data-has_single_issue="1"] #divTitleDescription {padding-top:0px;} /* first branch highlighted magazine */ #divFirstBranchHighlight {margin:auto; margin-top:20px;position:relative;display:inline-block;cursor:pointer;} #divFirstBranchHighlight::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.6) 100%); */ border-radius: var(--radiusMagazine); } #divFirstBranchHighlight img {margin: var(--blockBorderWidth);height:auto;width: calc(2 * var(--imageArticleWidth)); position:relative; } #divFirstBranchHighlight .textBlock { text-align:center; position:absolute; bottom:30px; left:0%; width:100%; z-index:1; color:white; } #divFirstBranchHighlight .inlineCaption1 { font-size:24px; } #divFirstBranchHighlight .inlineCaption2 { margin-top:10px;font-size:16px; } #divFirstBranchHighlight .imgWrapper .articleCaption { visibility:hidden; } #divFirstBranchHighlight .imgWrapper .divCaptionIcon img.icon { z-index:1; } /* ################################### Side Menu ######################################### */ #divSideMenu { border:0px solid red; background-color:var(--colorHeaderBackground); color: var(--colorHeaderFont); width:200px; height:100%; position:fixed; top:0px; right:0px; z-index:2; /* over the footer(z-index 1) if applicable */ width:auto; min-width:290px; font-size:17px; overflow-y:auto; white-space: nowrap; overflow-x:hidden; padding-bottom:var(--footerHeight); max-width:350px; @media (min-width: 601px) { min-width:350px; max-width:450px; } } #divSideMenu .topBlock { width: 100%; padding-top: 50%; overflow:hidden; position:relative; cursor:pointer; } #divSideMenu .topBlock:has(> .backgroundImage:not([style])) { padding-top:60px; } #divSideMenu .header { height: var(--headerHeight); position:relative; display: flex; align-items: center; justify-content: flex-end; padding-right:10px; } #divCategoriesArticles div, #divCategoriesNewspapers div, #divBranchTypesArticles div, #divBranchTypesNewspapers div, #divBranchTypesAll, #divCategoriesAll, #divCategoryToggler, #divBranchTypeToggler, #divDepartmentToggler, #divMenuGameTypesToggler, #divPodcastCategoriesToggler, #divPrivateViewCategoriesToggler, .sortEntry, .departmentSwitchOption {padding:2px;padding-left:30px;padding-right:30px;text-overflow: ellipsis; } #divSortTitles {padding-bottom:20px;margin-top:15px;} #divCategories div[data-category_id], #divArticleBranchTypes div[data-branchtype_id] {cursor:pointer;padding-left:45px;} #divCategories div[data-category_id].active, #divArticleBranchTypes div[data-branchtype_id].active {font-weight: bold;} #divSortTitles div.sortEntry {cursor:pointer;padding-bottom:20px;} #divSortTitles div.sortEntry.active {font-weight: bold;} #divBranchTypesAll {margin-top:20px;} /* department switcher (default)*/ #divDepartmentSwitcher { margin-bottom:25px;} .departmentSwitchOption { cursor:pointer;margin-bottom:20px;padding-left:45px;} .departmentSwitchOption.active { font-weight: bold; } #divDepartmentSwitcher[data-switch_id="1"] { #divDepartmentToggler { display:none; } #divCountryToggler .flagSection:nth-child(1) {padding-left:0px;} } /* country switcher */ #divCountryToggler {width:280px;margin:auto; margin-top:10px; overflow: hidden;} #divCountryToggler .flagSectionWrapper {display: flex;} #divCountryToggler img.flag {border-radius:8px;width:50px;height:auto;cursor:pointer;} #divCountryToggler .flagSection:nth-child(1) {flex-grow: 1;padding-left:25px;} #divCountryToggler .flagSection:nth-child(1) span {display:inline-block;margin-top:10px;} #divCountryToggler .flagSection:nth-child(2) {flex-shrink: 0;min-width:30px;text-align:center;} #divCountryToggler .flagSection:nth-child(2) img {margin-top:10px; width:20px;height:auto; } #divCountryToggler .flagSection:nth-child(2) img.flipped {transform: scaleY(-1); } #divCountryToggler .flagSection:nth-child(3) {flex-shrink: 0; min-width:60px; text-align:center;} .flagChoices {padding-left:25px; padding-top:5px; display: flex; flex-wrap: wrap;} .flagChoices img {margin-top:10px; margin-right:10px;display:inline-block;} @media (max-width: 600px) { #divCountryToggler .flagSection:nth-child(2) img { width:20px; }} /* category toggler */ #divCategoryToggler {display: flex; justify-content: space-between;cursor:pointer; margin-top:15px; } #divCategoryToggler span:last-child {margin-left: auto;} #divCategoryToggler span:last-child img {width:20px;height:auto;} #divCategoryToggler span:last-child img.flipped {transform: scaleY(-1);} #divCategories [data-category_id],#divCategoryToggler {margin-bottom:20px;} /* branchtype toggler */ #divBranchTypeToggler {display: flex; justify-content: space-between;cursor:pointer;margin-top:15px;} #divBranchTypeToggler span:last-child {margin-left: auto;} #divBranchTypeToggler span:last-child img {width:20px;height:auto;} #divBranchTypeToggler span:last-child img.flipped {transform: scaleY(-1);} #divArticleBranchTypes [data-branchtype_id],#divCategorydivBranchTypeTogglerToggler {margin-bottom:20px;} /* department toggler */ #divDepartmentToggler {display: flex; justify-content: space-between;margin-top:15px;margin-bottom:20px; } #divDepartmentToggler span:last-child {margin-left: auto;} #divDepartmentToggler span:last-child img {width:20px;height:auto;} #divDepartmentToggler span:last-child img.flipped {transform: scaleY(-1);} /* search section */ #divSearchSection {margin-top:20px;margin-bottom:20px;position:relative;padding-left:40px;} #divSearchSection img {position:absolute;left:30px;top:50%;transform: translateY(-50%);} #divSearchSection .sortEntry {cursor:pointer;} #divSearchSection .sortEntry.active {font-weight:bold;} /* ################################### Article Reader ######################################### */ #divArticle { text-align:center; overflow:hidden; position:fixed; top:0px; left:0px; margin-top: calc(var(--headerHeight)); height: calc(100% - var(--headerHeight)); width:100vw; font-size:0px; border:0px solid green; } #divArticle:has(#divInlineFooterMenu:not(.hidden)) { height: calc(100% - var(--headerHeight) - var(--footerHeight) ); margin-bottom: calc(var(--footerHeight)); } #divArticle.noNavigationOverlap { height: calc(100% - var(--headerHeight) - var(--footerDesktopNavigationHeight) ); } #divArticle.observeMaxWidth {max-width: var(--maxWidth);left:50%;transform: translateX(-50%);} #divArticleImages {height: 100%;position: relative;white-space: nowrap;font-size:0px; backface-visibility: hidden; /* hides flickering seams */ } #divArticleImages.isLoading {visibility: hidden;} /* while loading and arranging dom elements */ #divArticleImages .divImgWrapper { width: var(--imageReaderWidth); height: var(--imageReaderHeight); overflow:hidden; margin:0px; padding:0px; position:relative; text-align:center; display:inline-block; top:50%; transform: translateY(-50%); } #divArticleImages .divImgWrapper div { top:0px; left:0px; display:inline-block; position:absolute; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; margin:0px; padding:0px; overflow:hidden; } #divArticle[data-quantity_pages="2"] #divArticleImages .divImgWrapper:first-child div {left:1px; /* for pixel rounding to avoid line in middle */} /* inline article footer */ #divInlineFooterMenu { position:fixed; bottom:0px; left:0px; width:100%; height:var(--footerHeight); padding:0px; text-align:left; background-color:var(--colorFooterBackground); z-index:1; display: flex; justify-content: space-between; visibility: hidden; padding-left:20px; padding-right:20px; } #divInlineFooterMenu:has(.block:not(.hidden)) {visibility: visible; } #divInlineFooterMenu .block {min-width:30px;min-height:30px;text-align:center;position:relative;width: fit-content; display: flex;flex-direction: column;padding-bottom:5px;cursor:pointer;} #divInlineFooterMenu .block .wrapper {border:0px solid yellow;position:relative;bottom:0px;left:0px; /* width: fit-content; */ width:80px; margin-top: auto;} #divInlineFooterMenu .block .top {} #divInlineFooterMenu .block .bottom { font-size:10px;text-align:center;padding-top:4px;white-space: nowrap; text-overflow: ellipsis;overflow:hidden; color:var(--colorFooterFont);} #divInlineFooterMenu .block img.icon { width:27px;height:27px; } #divInlineFooterMenu .block.toc .top {position:relative;} #divInlineFooterMenu .block.toc .top img {width:40px;height:auto;position:absolute;bottom:0px;left:50%; transform: translateX(-50%); border-radius:8px 8px 0px 0px;cursor:pointer;border:2px solid var(--colorFooterBackground);} #divInlineFooterMenu .block.toc .bottom {text-align:center;} #divInlineFooterMenu[data-quantity_active="1"]:has(.toc.hidden) {justify-content: center;} #divInlineFooterMenu[data-quantity_active="2"] .block:nth-child(2) { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; } #divPlatform:has(.popoverBlock:not(.hidden)) #divInlineFooterMenu { display: none; } #divPlatform:has(.popoverBlock:not(.hidden)) #divMainExtendedNavigation { display: none; } #divArticle[data-single_page_mode="1"] #divArticleImages .divImgWrapper { position:relative; margin:auto; display:block; top:auto; transform: none; } /* ---------------------------------- (desktop) simplified-navigation ------------------------------------------- */ #divArticleNavigation { position:fixed; bottom:0px; left:0px; width:200px; left:50%; transform: translateX(-50%); background-color: var(--colorMainBackground); border-radius: 10px 10px 0 0; opacity:0.8; } #divArticleNavigation {font-size:var(--fontSizeBody);color: var(--colorMainFont);} #divArticleNavigation img {width:23px;height:23px;margin-top:5px;cursor:pointer;} #tableArticleNavigation td {padding:5px;text-align:center;position:relative;} #divArticleNavigation img.inactive {opacity:0.4;cursor:auto;pointer-events: none;} /* ---------------------------------- (desktop) extended-navigation ------------------------------------------- */ #divArticleExtendedNavigation { position:fixed; bottom:0px; left:0px; width:100%; /* ipv 800px */ left:50%; transform: translateX(-50%); background-color: var(--colorFooterBackground); /* border-radius: 15px 15px 0 0; */ font-size:var(--fontSizeBody); color: var(--colorFooterFont); height:var(--footerDesktopNavigationHeight); } #tableArticleExtendedNavigation {height:100%;width: var(--maxWidth);margin:auto;} #tableArticleExtendedNavigation td {overflow:hidden;} #tableArticleExtendedNavigation td:last-child {overflow:visible;} /* allow for more icons to appear then set by the width (--maxWidth) of the table */ #tableArticleExtendedNavigation input[type="text"] {color:var(--colorFooterFont); border-radius:5px;border:1px solid var(--colorFooterFont); width:55px; background-color: var(--colorFooterBackground); text-align:center; height: 30px;} #tableArticleExtendedNavigationLeftBlock {margin-top:5px;margin-bottom:5px;} #tableArticleExtendedNavigationLeftBlock td {overflow:hidden;} #tableArticleExtendedNavigationLeftBlock img {height:14px;width:auto;margin-top:4px;} #tableArticleExtendedNavigationLeftBlock img.inactive {opacity:0.4;cursor:auto;pointer-events: none;} #tableArticleExtendedNavigationLeftBlock td:nth-child(1) img {transform: rotate(90deg); } #tableArticleExtendedNavigationLeftBlock td:nth-child(4) img {transform: rotate(-90deg); } #tableArticleExtendedNavigationCenterBlock img {height:22px;width:auto;margin-top:5px;} #tableArticleExtendedNavigation input[type="range"] {width:95%;margin-top:8px;} #tableArticleExtendedNavigation input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none;border: 1px solid var(--colorFooterFont);height: 15px;width: 15px;border-radius: 50%;background: var(--colorFooterFont); cursor: pointer;box-shadow: 1px 1px 1px var(--colorFooterFont), 0px 0px 1px var(--colorFooterFont); margin:-7px;} #tableArticleExtendedNavigation input[type="range"]::-webkit-slider-runnable-track {height: 3px;cursor: pointer;background: var(--colorFooterFont);border-radius: 1.3px;border: 0px;} #tableArticleExtendedNavigation input[type="range"]::-moz-range-thumb {box-shadow: 1px 1px 1px var(--colorFooterFont),0 0 1px var(--colorFooterFont);height: 8px;width: 8px;background: var(--colorFooterFont);border:0px;} #tableArticleExtendedNavigation input[type="range"]::-moz-range-track {background: var(--colorFooterFont);} #divArticleExtendedNavigationRightBlock {display: flex; align-items: center; } #divArticleExtendedNavigationRightBlock img {height:22px;width:auto;margin-left:25px;} #spanExtendedTotalPages {margin-left:4px;} #divPlatform[data-in_fullscreen="1"] #divArticleExtendedNavigationRightBlock img[data-filename="block_fullscreen.svg"] {display:none;} #divPlatform[data-in_fullscreen="0"] #divArticleExtendedNavigationRightBlock img[data-filename="block_normalscreen.svg"] {display:none;} #divArticle[data-single_page_mode="1"] #divArticleExtendedNavigationRightBlock img[data-filename="scrollVertical.svg"] {display:none;} #divArticle[data-single_page_mode="0"] #divArticleExtendedNavigationRightBlock img[data-filename="scrollHorizontal.svg"] {display:none;} .divExtNav {position:fixed;width:40px;height:calc(100% - var(--footerDesktopNavigationHeight) - var(--headerHeight) );top:var(--headerHeight); display: flex;justify-content: center; align-items: center; } .divExtNav:hover {background-color:var(--colorMainBackground); opacity: 0.6;} .divExtNav img {width:90%;height:auto;} #divExtNavLeft {left:0px;} #divExtNavRight {right:0px;} .divExtNav.inactive {display:none;} #divArticle[data-single_page_mode="1"] { .divExtNav {width:60px;} .divExtNav img {transform: rotate(90deg);width:40px;height:40px;} #tableArticleExtendedNavigationLeftBlock tr td:first-child img {transform: rotate(180deg);} #tableArticleExtendedNavigationLeftBlock tr td:last-child img {transform: rotate(0deg);} } /* ---------------------------------- article thumbs ------------------------------------------- */ #divArticleThumbs{ position:fixed; bottom:0px; left:0px; width:100%; height:auto; background-color: var(--colorFooterBackground); padding:10px; z-index:1; } #divArticleThumbsListing { white-space:nowrap; width:100%; overflow:auto; overflow-y:hidden; } #divArticleThumbsListing .divImgWrapper{ display:inline-block; position:relative; border:0 solid red; user-select:none } #divArticleThumbsListing .divImgWrapper img { width:auto; height:160px; margin:5px; cursor:pointer; outline:none; border-radius: var(--radiusMagazine); } #divArticleThumbsListing .thumbSubScript { display:inline-block; position:absolute; text-align:center; bottom:19px; left:50%; transform:translateX(-50%); margin:auto; font-size:var(--fontSizeBody); background-color:inherit; border-radius:0px; min-width:30px; padding:2px; padding-bottom:4px; vertical-align:middle; background-color: var(--colorFooterBackground); color: var(--colorFooterFont); } #divArticleThumbsSlider { padding-top:20px; padding-bottom:20px; } #divArticleThumbsSlider input[type="range"] {width:95%;} #divArticleThumbsSlider input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none;border: 1px solid var(--colorFooterFont);height: 15px;width: 15px;border-radius: 50%;background: var(--colorFooterFont); cursor: pointer;box-shadow: 1px 1px 1px var(--colorFooterFont), 0px 0px 1px var(--colorFooterFont); margin:-7px;} #divArticleThumbsSlider input[type="range"]::-webkit-slider-runnable-track {height: 3px;cursor: pointer;background: var(--colorFooterFont);border-radius: 1.3px;border: 0px;} #divArticleThumbsSlider input[type="range"]::-moz-range-thumb {box-shadow: 1px 1px 1px var(--colorFooterFont),0 0 1px var(--colorFooterFont);height: 15px;width: 15px;background: var(--colorFooterFont);border:0px;} #divArticleThumbsSlider input[type="range"]::-moz-range-track {background: var(--colorFooterFont);} /* ################################### PRIVATE ######################################### */ /* ---- side menu items ----- */ #divPrivateView {} #divPrivateView .sortEntry { position:absolute;top:50%; left:0px;transform: translateY(-50%);} #divPrivateView span { position:relative;} #divPrivateView img:not(.icon) { position:absolute;top:50%;transform: translateY(-50%);} /* ---- private main block ----- */ #divPrivate { font-size: var(--fontSizeBody); position:fixed;left:0px;top:var(--headerHeight);bottom:var(--footerHeight); width:100%;background-color: var(--colorMainBackground);overflow:auto; } #divPrivate div[data-category_id="0"] { padding-top:20px; } #divPrivate .imgWrapper { border:0px solid red; display:inline-block; overflow:hidden; position:relative; width:calc( var(--imagePrivateArticleWidth) + (2 * var(--blockBorderWidth)) ); text-align:center; height:calc(1.3 * var(--imagePrivateArticleHeight));} #divPrivate .imgWrapper img:not(.icon) { width: var(--imagePrivateArticleWidth); height: var(--imagePrivateArticleHeight); cursor:pointer; margin:var(--blockBorderWidth); margin-bottom:calc(var(--blockBorderWidth) / 2); } #divPrivate .articleCaption img.icon { position:absolute; right:5px;top:2px; width:17px; height:17px; } #divPrivate .articleCaption { text-align:center; display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; white-space: normal ;} @media (max-width: 600px) { #divPrivate .articleCaption {text-align:left;} } #divPrivateTitles {text-align:center;max-width:var(--maxWidth);margin:auto;} #divPlatform[data-is_digi_hub="1"]:has(#divPrivate:not(.hidden)) { #divDigiHubPlatform{display:none;} } /* --------------------- side menu --------------------- */ #divPrivateViewCategoriesToggler {display: flex; justify-content: space-between;cursor:pointer;margin-top:15px;} #divPrivateViewCategoriesToggler span:last-child {margin-left: auto;} #divPrivateViewCategoriesToggler span:last-child img {width:20px;height:auto;} #divPrivateViewCategoriesToggler span:last-child img.flipped {transform: scaleY(-1);} #divPrivateViewCategoriesListing [data-private_category_id],#divPrivateViewCategoriesToggler {margin-bottom:20px;} #divPrivateViewCategoriesEntries div[data-private_category_id] {cursor:pointer;padding-left:45px;} #divPrivateViewCategoriesEntries div[data-private_category_id].active {font-weight: bold;} #divPrivateViewCategoriesAll {cursor:pointer;padding-left:45px;margin-bottom: 20px;} #divPrivateViewCategoriesAll.active {font-weight: bold;} /* ################################### SEARCH ######################################### */ #divSearchBlock {max-width:var(--searchSectionMaxWidth);border:0px solid red; margin:auto; padding:10px;} #divSearchInput {padding-top:0px;text-align:center;} #divSearchInput input {border:1px solid var(--colorHighlightBackground);background-repeat:no-repeat; background-size:20px 20px; background-position: right 5px center; padding-right:30px;} /* ------------ categories -------------------- */ #divSearchCategories {font-size:0px;text-align:center;min-height:50px;margin:auto;padding-top:20px;} #divSearchCategories .blockWrapper {border:1px solid var(--colorMainBackground);margin:3px;margin-bottom:0px;display:inline-block; width:var(--categoryBlockWidth); height:var(--categoryBlockWidth);position:relative;cursor:pointer;} #divSearchCategories .blockWrapper.noimage {border:1px solid var(--colorMainFont);} #divSearchCategories .blockImage {background-repeat: no-repeat; background-position: center center; background-size: cover; width:100%; height:100%; opacity:0.5;} #divSearchCategories .blockText {font-size:var(--fontSizeBody); text-align:center; position:absolute; top:50%; transform: translateY(-50%);left:0px;border:0px solid red; width:100%; font-weight:bold; text-overflow: ellipsis;} /* ------------ search results -------------------- */ #divSearchResults {padding-top:20px;overflow:hidden;} #tableSearchTabs td {position:relative;padding-bottom:10px;cursor:pointer;color:var(--colorHighlightBackground);} #tableSearchTabs td.active::after {content:' '; border-bottom:1px solid var(--colorHighlightBackground); width:90%; position:absolute; left:0px; bottom:0px; } #tableSearchTabs td:last-child.active::after {right:0px;left:auto;width:100%;} #divResultsMagazinesListing, #divResultsNewspapersListing {white-space:nowrap; overflow:auto; } #divResultsMagazinesListing .imgWrapper, #divResultsNewspapersListing .imgWrapper {display:inline-block;overflow:hidden;position:relative;} #divResultsMagazinesListing img {width: var(--imageArticleWidth); height: var(--imageArticleHeight);cursor:pointer;margin:var(--blockBorderWidth);margin-bottom:calc(var(--blockBorderWidth) / 2);} #divResultsNewspapersListing img {width: var(--imageNewspaperWidth);height: var(--imageNewspaperHeight);cursor:pointer;margin:var(--blockBorderWidth);margin-bottom:calc(var(--blockBorderWidth) / 2);} #divNoResultsTab1, #divNoResultsTab2 {text-align:center;padding-top:40px;} #divResultsArticles {padding-top:40px;} /* ------------ deepsearch blocks -------------------- */ .divDeepsearchBlock { border-radius: var(--radiusContainer); position:relative;margin-bottom:20px;cursor:pointer;background-color: var(--colorContainerBackground);color: var(--colorContainerFont);} .divDeepsearchBlock .deepDiv1 { margin-bottom:7px; padding:2px;padding-top:15px; font-weight:bold; font-size:18px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis;} .divDeepsearchBlock .deepDiv2 { margin-bottom:7px; padding:2px; white-space: nowrap; font-size:14px; overflow:hidden; text-overflow: ellipsis;} .divDeepsearchBlock .deepDiv3 { margin-bottom:7px; font-size:14px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; } .divDeepsearchBlock .deepDiv4 { font-size:12px; vertical-align:top; opacity:0.9; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-top:3px;} .divDeepsearchBlock .deepDiv4.short { -webkit-line-clamp: 2; } .divDeepsearchBlock .deepTable { border:0px solid red; height:150px;} .divDeepsearchBlock .deepTable td { padding-left:15px;overflow:hidden;border:0px solid blue;height:100%;vertical-align:top;} .divDeepsearchBlock .deepTable td:last-child { width:100px; text-align:center; position:relative;} .divDeepsearchBlock .imgBlock { border-radius: 0px var(--radiusContainer) var(--radiusContainer) 0px; width:100% ; height:100% ; overflow:hidden; display:inline-block; background-repeat: no-repeat; background-position: top center; background-size: cover; top:50%; left:50%;position:absolute;transform:translate(-50%,-50%); /* border: 8px solid var(--colorContainerBackground); */ } .divDeepsearchBlock span.highlighted { background-color: var(--colorContainerFont); color: var(--colorContainerBackground);} @media (min-width: 601px) { .divDeepsearchBlock { display:inline-block; flex-basis: calc(50% - 5px); max-width: calc(50% - 5px); display: inline-block; margin-bottom:10px; } #divResultsArticles { display: flex; flex-wrap: wrap; justify-content: space-between; } } /* ################################### HTML VERSION ######################################### */ .divHtmlContent {margin-top:var(--htmlHeaderHeight);} .htmlReader .highlighted {background-color:var(--colorHtmlFont); color: var(--colorHtmlBackground); } /* ------------ html block-------------------- */ #divHtmlWrapper {z-index:2;position:relative; top:0px; left:0px;width:100%;height: 100dvh; text-align:left;background-color:var(--colorHtmlBackground);color:var(--colorHtmlFont);overflow:auto;} #divHtmlWrapper .header {position:fixed;height:var(--htmlHeaderHeight);background-color:var(--colorHtmlBackground); top:0px; } #spanHtmlDurationMessage {font-size: var(--fontSizeHtmlControllers);} #tableHtmlheader {height:100%;} #tableHtmlheader td {padding:5px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;} #tableHtmlheader td:last-child {width:50px;text-align:right;} #tableHtmlheader td:first-child {width:50px;} #tableHtmlheader.hasSpeechBlock td:nth-child(1) {visibility: hidden;} #tableHtmlheader.hasSpeechBlock td:nth-child(2) {visibility: hidden;} #imgPlay.blocked,#spanHtmlDurationMessage.blocked {opacity:0;pointer-events: none;} #divPlatform:has(#divHtmlWrapper:not(.hidden)) #divArticleImages:not(.isLoading) { display:none; } /* image dimensions are calculated while images are retrieved intgo the dom */ #divPlatform:has(#divHtmlWrapper:not(.hidden)) #divArticle { position:relative; margin-top:0px;background-color:white; } /* ------------ html audio-------------------- */ input[name="inputAudioSlider"] {width:100%;} input[name="inputAudioSlider"]::-webkit-slider-thumb {-webkit-appearance: none;border: 1px solid var(--colorHtmlFont);height: 15px;width: 15px;border-radius: 50%;background: var(--colorHtmlFont); cursor: pointer;box-shadow: 1px 1px 1px var(--colorHtmlFont), 0px 0px 1px var(--colorHtmlFont); margin:-7px;} input[name="inputAudioSlider"]::-webkit-slider-runnable-track {height: 3px;cursor: pointer;background: var(--colorHtmlFont);border-radius: 1.3px;border: 0px;} input[name="inputAudioSlider"]::-moz-range-thumb {box-shadow: 1px 1px 1px var(--colorHtmlFont),0 0 1px var(--colorHtmlFont);height: 15px;width: 15px;background: var(--colorHtmlFont);border:0px;} input[name="inputAudioSlider"]::-moz-range-track {background: var(--colorHtmlFont);} #divHtmlSpeechPlayer {position:relative;} #spanCurrentSec {position:absolute; top:14px; font-size:var(--fontSizeBody); left:0px; margin-left: 10px; } #spanDurationSec {position:absolute; top:14px; font-size:var(--fontSizeBody); right: 0px; text-align: right; } #inputAudioSlider {z-index:1;} #imgPause {width:30px;height:30px;} #imgClose {width:35px;height:35px;} /* ################################### HIGHLIGHTS ######################################### */ #divHighlights > div { max-width:var(--maxWidth); margin:auto; padding-top: var(--blockBorderWidth); width:calc(100% - 24px); /* width: 95%; */ } #divHighlights {} @media (max-width: 600px) { .highlightTable {display:block;height:auto;} .highlightTable tr {display:block;height:auto;} .highlightTable td,th {display:block;height:auto;padding:0px; } .highlightTable tbody {display:block;height:auto;} } .highlightBlock { border-radius: var(--radiusContainer); background-color: var(--colorContainerBackground);border-bottom:10px solid var(--colorContainerBackground); margin:var(--blockBorderWidth); position:relative; color: var(--colorContainerFont); margin-bottom: calc(2 * var(--blockBorderWidth)); } @media (max-width: 600px) { .highlightBlock{margin-left:0px;margin-right:0px;}} .highlightBlock .highlightBlockClicker {cursor:pointer; position:absolute; top:0px; left:0px; height:100%; display:inline-block; width:100%;} .highlightBlock .highlightImageContainer {border-radius: var(--radiusContainer) var(--radiusContainer) 0px 0px; width: 100%;padding-bottom: 40%;background-size: 100% auto;background-repeat: no-repeat; background-position: top center; } .highlightBlock .highlightLinesContainer {padding-top:10px;position:relative;bottom:0px;} .highlightBlock .highlightLine {text-overflow: ellipsis; user-select: none; padding-left:10px; padding-right:10px; white-space: nowrap; overflow:hidden; text-transform: none; font-size: var(--fontSizeBody); margin-top:4px; margin-bottom:4px; } .highlightBlock .highlightLine1 {font-weight:bold;} .highlightBlock .highlightLine2 {margin-top:0px;margin-bottom:0px;} .highlightBlock .highlightLine3 {margin-bottom:0px; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; } #divMainPlatformHighlights .highlightBlock {width:300px; flex: 0 0 auto;} @media (max-width: 601px) { #divMainPlatformHighlights .highlightBlock {margin: var(--blockBorderWidth);} } #divPlatform:has(#divArticles.hidden):has(#divFirstBranchHighlight.hidden) #divMainPlatformHighlights {display:none;} /* ################################### PRIVACY POLICY ######################################### */ /* side menu block */ #divPrivacyPolicy {cursor:pointer;position:fixed;height:var(--headerHeight);background-color:var(--colorHeaderBackground);top:calc(100% - 60px); width:100%; /* note overflow-x is hidden for divSideMenu so width 100% is fine */} #divPrivacyPolicy .sortEntry {position:absolute;top:50%;left:0px;transform: translateY(-50%);} #divPrivacyPolicy span {position:relative;} #divPrivacyPolicy img {position:absolute;top:50%;transform: translateY(-50%);} /* Powered by block */ #divPoweredBy {right:0px;border:0px solid red; display: flex; justify-content: flex-end; text-align:right;cursor:pointer;position:fixed;height:var(--headerHeight);top:calc(100% - 60px); width:100px; /* note overflow-x is hidden for divSideMenu so width 100% is fine */} #divPoweredByWrapper {cursor: auto;position:absolute;top:50%;transform: translateY(-50%);margin-right:10px;} #divPoweredBy img {cursor: auto;width:90px;height:auto; display:inline-block;} #divPoweredByLabel {font-style: italic;font-size:11px;padding-right:5px;} /* html block */ #divPrivacyWrapper { z-index:2; position:fixed;top:0px;left:0px;width:100%;height:100%; text-align:left;background-color:var(--colorHeaderBackground);color:var(--colorHeaderFont);overflow:auto;} #divPrivacyWrapper .header { height:var(--htmlHeaderHeight);} #tablePrivacyHeader { height:100%;} #tablePrivacyHeader td { padding:5px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;} #tablePrivacyHeader td:last-child { width:60px;text-align:right;} #tablePrivacyHeader td:first-child { width:50px;} .divPrivacyContent { max-width:var(--maxWidth);margin:auto;} /* ################################### TOC ######################################### */ #divArticleTocListing { text-align:left; max-width: var(--tocMaxWidth); margin:auto; padding:10px; display:flex; flex-wrap:wrap;justify-content: space-between;} .divTocBlock { border-radius: var(--radiusContainer); position:relative;margin-bottom:20px;cursor:pointer;background-color: var(--colorContainerBackground);color: var(--colorContainerFont);} .divTocBlock .tocTable { height:130px;} .divTocBlock .tocTable td { padding-left:15px; padding-right:15px; overflow:hidden;border:0px solid blue;height:100%;vertical-align:top;} .divTocBlock .tocTable td:last-child { width:100px; text-align:center; position:relative;} .divTocBlock .imgBlock { border-radius: 0px var(--radiusContainer) var(--radiusContainer) 0px; width:100% ; height:100% ; overflow:hidden; display:inline-block; background-repeat: no-repeat; background-position: top center; background-size: cover; top:50%; left:50%;position:absolute;transform:translate(-50%,-50%); /* border: 8px solid var(--colorContainerBackground); */ } .tocDivCommon { text-overflow: ellipsis;overflow: hidden; font-size: 12px;} .tocDiv1 { margin-bottom:7px; padding:2px;padding-top:15px; font-weight:bold; white-space: nowrap; } .tocDiv2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; font-weight:bold; text-transform: uppercase; margin-bottom:7px; padding:2px; } .tocDiv3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; vertical-align:top; opacity:0.9; margin-top:3px;} @media (min-width: 601px) { .divTocBlock { display:inline-block; flex-basis: calc(50% - 5px); max-width: calc(50% - 5px); display: inline-block; margin-bottom:10px; } } #divArticleTocHeader { position:sticky; background-color:var(--colorMainBackground); left:0px; top:0px; z-index:1; } #divArticleTocHeaderClose { width:100%; max-width:var(--tocMaxWidth); margin:auto; text-align:right; padding:10px; } /* ################################### INTERACTIONS ######################################### */ .interaction {display:inline-block;position:absolute; min-height:10px; min-width:20px;overflow:hidden;} .interaction.clickable {cursor:pointer;} .interaction div.clickableDivOverlay {cursor:pointer;border:0px solid green;z-index:1;background-color:white;opacity:0;width:100%;height:100%;} .interaction video, .interaction img {object-fit: fill;} .interaction a {width:100%; height:100%; display:inline-block;} .interaction video, .interaction iframe, .interaction div, .interaction img { width: 100%; height: 100%; } .interaction[data-publicationlinkagetype="url"], .interaction[data-publicationlinkagetype="email"], .interaction[data-publicationlinkagetype="gallery"] { z-index:1; } /* ---------------- interaction effect ---------------------------- */ .effects.perspective {--a: 4deg;aspect-ratio: 1; transition: transform 2s; animation: perspectiveAnimation 2s;} @keyframes perspectiveAnimation {0% {transform: perspective(400px) rotate3d(var(--r, 1, -1), 0, calc(var(--i, 1) * var(--a)));} 50% { transform: perspective(400px) rotate3d(var(--r, 1, -1), 0, calc(var(--i, 1) * var(--a) * 2));} 100% { }} .effects.zoomout {transform: scale(1.5); animation: unzoom-animation 1.5s ease-in-out forwards; } @keyframes unzoom-animation {from { transform: scale(1.5);}to {transform: scale(1);}} .effects.flipvert {transform: scaleY(-1); animation: flip-vert 1s ease-in-out forwards; } @keyframes flip-vert {from { transform: scaleY(-1);}to { transform: scaleY(1);}} .effects.fliphor {transform: scaleX(-1); animation: flip-hor 1s ease-in-out forwards; } @keyframes flip-hor {from {transform: scaleX(-1);}to { transform: scaleX(1); }} .effects.unblur {filter: blur(8px) saturate(1.5); animation: blur-to-normal 1.5s ease-in-out forwards;} @keyframes blur-to-normal {from { filter: blur(5px) saturate(1.5); } to { filter: none; } } .effects.greyout {filter: grayscale(100%); animation: grayscale-to-color 1s ease-in-out forwards; } @keyframes grayscale-to-color {from { filter: grayscale(100%);}to {filter: grayscale(0%);}} .effects.rotate {animation: rotation 2s forwards;} @keyframes rotation {from {transform: rotate(0deg);} to {transform: rotate(360deg);}} .effects.zoomin { transform: scale(0.5); animation: zoomin-animation 1.5s ease-in-out forwards;} @keyframes zoomin-animation { from { transform: scale(0.5); } to { transform: scale(1); }} .effects.flashx1 {animation: flash-once 1.5s 1;} @keyframes flash-once {0% { filter: brightness(1); opacity: 1;} 50% { filter: brightness(1.8); opacity: 0;}100% { filter: brightness(1); opacity: 1; }} .effects.flashx2 {animation: flash-anim 1.5s 2; } @keyframes flash-anim {0% { opacity: 0; filter: brightness(1);}50% { opacity: 1; filter: brightness(1.5);}100% { opacity: 0; filter: brightness(1);}} .effects.shake { animation: shake 0.5s; animation-iteration-count: 3;} @keyframes shake { 0%{transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); }} .effects.scroll { animation: scroll 3s linear 1;position:relative;left:0%} @keyframes scroll { 0% {left: 0%;} 49.9% {left: 100%;} 50% { left: -100%;} 100% {left: 0%;} } .effects.wobble {animation: wobble 1s ease-in-out 2;} @keyframes wobble {0% {transform: translateX(0%);} 15% { transform: translateX(-25%) rotate(-5deg);} 30% {transform: translateX(20%) rotate(3deg);} 45% { transform: translateX(-15%) rotate(-3deg);} 60% { transform: translateX(10%) rotate(2deg);} 75% {transform: translateX(-5%) rotate(-1deg);} 100% {transform: translateX(0%);}} .effects.fade {animation: fade 1.5s ease-in-out 2;} @keyframes fade {0%, 100% { opacity: 1; } 50% { opacity: 0; }} .effects.border { border: 0px solid var(--colorHighlightBackground); animation: border 1.5s 3; } @keyframes border { 0% {} 50% {border-width: 5px;} 100% {}} .effects.bounce {animation: bounce 1.5s 2;} @keyframes bounce {0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); }} .effects.swing {animation: swing 2s ease-in-out 2;} @keyframes swing {20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); }} .effects.elastic {animation: elastic 1s ease-in-out 2;} @keyframes elastic {0%, 100% { transform: scale(1); } 30% { transform: scale(1.25, 0.75); } 40% { transform: scale(0.75, 1.25); } 50% { transform: scale(1.15, 0.85); } 65% { transform: scale(0.95, 1.05); } 75% { transform: scale(1.05, 0.95); } } .effects.rollin {animation: rollin 1s ease-out forwards;} @keyframes rollin {0% { transform: translateX(-100%) rotate(-120deg); opacity: 0; } 100% { transform: translateX(0) rotate(0deg); opacity: 1; }} /* default effect for types */ /* .interaction[data-publicationlinkagetype="url"] { animation: flash-url 1.5s 2; } .interaction[data-publicationlinkagetype="gallery"] { animation: flash-url 1.5s 2; } */ @keyframes flash-url { 0% { opacity: 0.3; background-color: transparent; } 50% { opacity: 0.5; background-color: var(--colorMainBackground) } 100% { opacity: 0; background-color: transparent; }} .interaction[data-appended_url] a { position:absolute; width:100%; height:100%; z-index:1; left:0px; top:0px; } /* ################################### SEARCH TEXT HIGHLIGHTS ######################################### */ .searchResultsHighlights { position:absolute; background-color:var(--colorHighlightBackground); opacity:0.5; border:1px solid var(--colorMainFont); overflow:auto; border-radius:5px; } /* ################################### PODCAST LISTING ######################################### */ #divPodcastWrapper { margin:auto; padding:10px; max-width:var(--maxWidth);} /* --------------------- global podcasts view ---------------------------- */ #divPodcastGlobal { text-align:center;margin:auto;} .divPodcastBlock { cursor:pointer; margin:var(--blockBorderWidth); margin-bottom: 40px; width:var(--imageArticleWidth); height:var(--imageArticleWidth); display:inline-block; position: relative; } .divPodcastBlock .imgBlock { background-color:var(--colorContainerBackground); border-radius: var(--radiusMagazine); width:100%;height:100%;overflow:hidden; display:inline-block; background-repeat: no-repeat; background-position: top center; background-size: cover; } .divPodcastBlock .pocastGlobalLabel { width: var(--imageArticleWidth); position: absolute; color: var(--colorMainFont); left: 0px; top: 100%; padding: 7px; text-align: left; font-weight: bold; font-size: var(--fontSizeBody); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} /* --------------------- main podcast title block ------------------------- */ #divPodcastArticle { --mainImageBlockWidth:170px; --subImageBlockWidth:70px; } #tablePodcastArticle { td:first-child {width: calc(var(--mainImageBlockWidth) + 30px);} margin-bottom: 50px; td {vertical-align:top;} } #divPodcastArticleImage { text-align:left;} #divPodcastArticleImage .imgBlock { background-color:var(--colorContainerBackground); margin:auto; width:var(--mainImageBlockWidth); height:var(--mainImageBlockWidth); border-radius: var(--radiusContainer); overflow:hidden; display:inline-block; background-repeat: no-repeat; background-position: center center; background-size: cover; } #divPodcastArticleImage .imgBlock img { width:100%;height:100%;} #divPodcastArticleTitle { text-align:left; font-size:calc(var(--fontSizeBody) + 10px);} /* maindescription */ #divPodcastArticleDescription { margin-top:15px;font-size:14px;font-weight:300;overflow-wrap: break-word; position:relative; overflow: hidden; text-overflow: ellipsis;} #divPodcastArticleDescription.isClamped { display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 4;} #divPodcastArticleDescription .colorHighlight { background-color:var(--colorMainBackground);position:absolute; bottom:0px; right: 0px;text-transform: uppercase; font-weight: bold; cursor: pointer;} #divPodcastArticleDescription:has(.showLess:not(.hidden)) { display: block; -webkit-box-orient: initial;-webkit-line-clamp: unset; } #divPodcastArticleDescription .showLess:not(.hidden) { position:relative;} /* --------------------- side menu --------------------- */ #divPodcastCategoriesToggler {display: flex; justify-content: space-between;cursor:pointer;margin-top:15px;} #divPodcastCategoriesToggler span:last-child {margin-left: auto;} #divPodcastCategoriesToggler span:last-child img {width:20px;height:auto;} #divPodcastCategoriesToggler span:last-child img.flipped {transform: scaleY(-1);} #divPodcastCategories [data-podcastcategory_id],#divPodcastCategoriesToggler {margin-bottom:20px;} #divPodcastCategories div[data-podcastcategory_id] {cursor:pointer;padding-left:45px;} #divPodcastCategories div[data-podcastcategory_id].active {font-weight: bold;} #divPlatform:has(#divPodcast:not(.hidden)) #divCategories { display: none; } #divPlatform:has(#divPodcast:not(.hidden)) #divSortTitles { display: none; } #divPlatform:has(#divPodcast.hidden) #divPodcastCategories { display: none; } /* --------------------- entry podcast ------------------------- */ #divPodcastArticleListing .divAudio {margin-bottom:30px;padding-bottom:10px;position:relative;} #divPodcastArticleListing .divAudio:has(input) {border-bottom:0px;} #divPodcastArticleListing .divAudio::after { content: " "; width:100%;height:4px;background-color:var(--colorContainerBackground);;position:absolute;width:98%;left: 50%; transform: translate(-50%, -50%);bottom:-12px;} #divPodcastArticleListing .divAudio .colorHighlight { background-color:var(--colorMainBackground);position:absolute; bottom:0px; right: 0px;text-transform: uppercase; font-weight: bold; cursor: pointer;} #divPodcastArticleListing .audioTable td {vertical-align:top;} #divPodcastArticleListing .audioTable td:first-child {width: calc(var(--subImageBlockWidth) + 30px); text-align:left;} #divPodcastArticleListing .audioTable td:last-child {padding-right:15px;} #divPodcastArticleListing .audioTable tr:last-child td {padding-top:10px;} #divPodcastArticleListing .audioTable tr:first-child td:last-child {vertical-align:middle;} .podcastPlayBlock {width:70px;text-align:center;} #divPodcastArticleListing .audioTable .div1 {background-color:var(--colorContainerBackground); width:var(--subImageBlockWidth);height:var(--subImageBlockWidth);border-radius: var(--radiusContainer); overflow:hidden; display:inline-block; background-repeat: no-repeat; background-position: center center; background-size: cover;} #divPodcastArticleListing .audioTable .div2 {font-weight:bold;} #divPodcastArticleListing .audioTable .div3 {position:relative;font-size:14px;font-weight:300; overflow-wrap: break-word; overflow: hidden; text-overflow: ellipsis;} #divPodcastArticleListing .audioTable .div3.isClamped {display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 7;} #divPodcastArticleListing .audioTable .div4 {font-size:14px;font-weight:300;margin-top:10px;} #divPodcastArticleListing .audioTable .div3:has(.divLong:not(.hidden)) { display: block; -webkit-box-orient: initial;-webkit-line-clamp: unset; } #divPodcastArticleListing .audioTable .div3 .showLess:not(.hidden) { position:relative;} /* --------------------- player ------------------------- */ #divPodcastArticleListing .divPLayerLine {height:2px;} .imgCircleWrapper {display:inline-block; border:2px solid var(--colorMainFont);border-radius:50%;width:40px;height:40px;position:relative; } .imgCircleWrapper.active {} .imgCircleWrapper img {margin-left:2px;position:absolute;top:50%; left:50%; position:absolute;transform:translate(-50%,-50%); width:20px;height:20px; } .imgCircleWrapper.divPause img {margin:0px;width:23px;height:23px;} /* --------------------- podcast player ------------------- */ #divPodcastPlayer {z-index:1; left:0px; position:fixed;bottom:0px; width:100%; background-color:var(--colorFooterBackground); color:var(--colorFooterFont); } #divPlatform:has(footer:not(.hidden)) #divPodcastPlayer {bottom:var(--footerHeight);} #divPlatform:has(#divPodcast.hidden) #divPodcastPlayer {display:none;} #divPodcastPlayer table {width:100%;} #divPodcastPlayer table td {position:relative;height:35px;font-size:12px;} #divPodcastPlayer table td img {display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);width:30px;height:30px;} #divPodcastPlayerWrapper {width:100%;margin:auto;max-width:var(--maxWidth);position:relative;padding:10px; padding-left:20px;padding-right:20px; } #tablePodcastPlayerHeader {height:35px;} #tablePodcastPlayerHeader td {overflow: hidden; text-overflow: ellipsis; white-space:nowrap;} #tablePodcastPlayerHeader .imgBlock {height:100%;background-color: var(--colorContainerBackground); margin: auto;width: 30px;height: 30px; border-radius: var(--radiusContainer);overflow: hidden;display: inline-block;background-repeat: no-repeat;background-position: center center;background-size: cover;} #tablePodcastPlayerHeader td:nth-child(3) {text-align:right; } #tablePodcastPlayerSlider td:first-child {width:40px;text-align:left;} #tablePodcastPlayerSlider tr td:first-child img {width:20px;height:20px; left: 0;transform: translate(0, -50%);} #tablePodcastPlayerSlider tr td:first-child:not(:has(img)) {display:none;} #tablePodcastPlayerControllers td {vertical-align:middle;} #podcatDurationSec {text-align: right; } input[name="inputPodcastSlider"] {width:100%;padding:0px;} input[name="inputPodcastSlider"]::-webkit-slider-thumb {-webkit-appearance: none;border: 1px solid var(--colorFooterFont);height: 15px;width: 15px;border-radius: 50%;background: var(--colorFooterFont); cursor: pointer;box-shadow: 1px 1px 1px var(--colorFooterFont), 0px 0px 1px var(--colorFooterFont); margin:-7px;} input[name="inputPodcastSlider"]::-webkit-slider-runnable-track {height: 3px;cursor: pointer;background: var(--colorFooterFont);border-radius: 1.3px;border: 0px;} input[name="inputPodcastSlider"]::-moz-range-thumb {box-shadow: 1px 1px 1px var(--colorHtmlFont),0 0 1px var(--colorMainFont); height: 15px;width: 15px;background: var(--colorFooterFont);border:0px;} input[name="inputPodcastSlider"]::-moz-range-track {background: var(--colorFooterFont);} /* input[name="inputPodcastSlider"]::-webkit-slider-thumb { -webkit-appearance: none; margin-top: -6px; height: 15px; width: 15px; background: var(--colorFooterFont); border-radius: 50%; cursor: pointer; } */ /* #divBodyContent > #divPodcastPlayer {margin-top:10px;padding:10px;margin-bottom:10px;} */ /* ################################### BOOKMARKS ######################################### */ #divArticle[data-is_private="1"] #imgBookmarkDesktop[data-allow_private_documents="0"] { display:none; } #divBookmarkIcon {text-align:center;position:absolute;top:0px;left:0px;width:100%;height:100%;} #divBookmarkIcon img { position:absolute;top: 50%; transform: translateY(-50%);} /* ----- side menu ------ */ #divBookmarks {margin-top:20px;margin-bottom:20px;position:relative;padding-left:40px;} #divBookmarks img {position:absolute;left:30px;top:50%;transform: translateY(-50%);} #divBookmarks .sortEntry {cursor:pointer;} #divBookmarks .sortEntry.active {font-weight:bold;} /* ----- popover ------ */ #divBookmarkPopoverListing { text-align:left; max-width: var(--bookmarksMaxWidth); margin:auto; padding:10px; } #divBookmarkPopoverHeader { position:sticky; background-color:var(--colorMainBackground); left:0px; top:0px; z-index:1; } #divBookmarkPopoverHeaderClose { margin:auto; margin-top:15px; width:100%; max-width:var(--bookmarksMaxWidth); text-align:right; padding:10px; font-size:var(--fontSizeBod); } #divBookmarkPopoverHeaderClose table td:nth-child(1) {width:40px;text-align:center;} #divBookmarkPopoverHeaderClose table td:nth-child(1) img {cursor:auto;} #divBookmarkPopoverHeaderClose table td:nth-child(2) {text-align:left;} #divBookmarkPopoverHeaderClose table td:nth-child(3) {width:40px;text-align:center;} #divBookmarkPopoverListing {} #divBookmarkPopoverListing .noResults { text-align:center;padding:20px;width:100%;} #divBookmarkPopoverListing .section { display: flex; flex-wrap: wrap; justify-content: space-between;} .divBookmarkBlock { border-radius: var(--radiusContainer); position:relative;margin-bottom:20px;cursor:pointer;background-color: var(--colorContainerBackground);color: var(--colorContainerFont);} .divBookmarkBlock .bookmarkTable { border:0px solid red; height:150px;} .divBookmarkBlock .bookmarkTable td { position:relative; padding-left:15px;overflow:hidden;border:0px solid blue;height:100%;vertical-align:top;} .divBookmarkBlock .bookmarkTable td:last-child { width:100px; text-align:center; position:relative;} .divBookmarkBlock .imgBlock { border-radius: 0px var(--radiusContainer) var(--radiusContainer) 0px; width:100% ; height:100% ; overflow:hidden; display:inline-block; background-repeat: no-repeat; background-position: top center; background-size: cover; top:50%; left:50%;position:absolute;transform:translate(-50%,-50%); } .bookmarkDivCommon { margin-bottom:5px; padding:2px;margin-top:5px; text-overflow: ellipsis;overflow: hidden; font-size: 12px;} .bookmarkDiv1 { padding-top: 15px; margin-bottom: 7px; font-weight:bold; white-space: nowrap; } .bookmarkDiv2 { margin-bottom:7px; padding:2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; font-weight:bold; text-transform: uppercase; } .bookmarkDiv3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; vertical-align:top; opacity:0.9; } .bookmarkDiv4 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; vertical-align:top; opacity:0.9; } .bookmarkDiv5 { padding-left:15px; padding-bottom:3px; position:absolute;bottom:0px;left:0px;width:100%; } .bookmarkDiv5 img { width:20px; height:auto; } @media (min-width: 601px) { .divBookmarkBlock { display:inline-block; flex-basis: calc(50% - 5px); max-width: calc(50% - 5px); display: inline-block; margin-bottom:10px; } } /* ----- add confirmation block ------ */ #bookmarkConfirmer { width:100px; margin:auto; background-color:var(--colorMainBackground); max-width:300px; position:absolute; display: inline-block; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius:15px; color:var(--colorMainFont); font-size:12px; animation: confirmFader 1.5s forwards; height:70px; } @keyframes confirmFader {0% {opacity: 0.5;} 50% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0.5; }} #bookmarkConfirmer div:first-child {padding-top:5px;} #bookmarkConfirmer div:first-child img {height:40px;width:auto;} #bookmarkConfirmer div:last-child {text-align:center;padding:5px; position:absolute;bottom:0px;left:0px;width:100%; } #bookmarkConfirmer div {overflow:hidden;text-overflow: ellipsis;white-space: nowrap;} /* ----- deletion bookmark ------ */ .bookmarkDeletionWarning {animation: bookmarkWarningIn 0.3s forwards; width:100%;height:100%;background-color:var(--colorContainerBackground);position:absolute;left:0px;top:0px;} @keyframes bookmarkWarningIn {0% {left: 50%; } 100% {left: 0%;}} .bookmarkDeletionWarning img {width:50px;height:auto; display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} /* ################################### OFFLINE MODE ######################################### */ #divPlatform[data-is_online="0"] header .icon {display:none;} #divPlatform[data-is_online="0"] footer .iconWrapper {display:none;} #divPlatform[data-is_online="0"] #divBanner {display:none;} #divPlatform[data-is_online="0"] #divHtml {display:none;} #divPlatform[data-is_online="0"] #divAllTitles {display:none;} #divPlatform[data-is_online="0"] #imgOfflineCloseButton {display:none;} #divPlatform[data-is_online="0"] #divArticleExtendedNavigationRightBlock .icon[data-filename="search.svg"] {display:none;} #divPlatform[data-is_online="0"]:has(#divArticle:not(.hidden)) header td:first-of-type .icon {display: inline-block;} /* allow back button */ #divPlatform[data-is_online="0"] #tableHtmlheader td:not(:last-child) {visibility: hidden;} #divPlatform[data-is_online="0"] #divStartPageItems {visibility: hidden;} #divResultsMagazines .divCaptionIcon img.icon {display:none;} #divBranches .divCaptionIcon,#divAllTitles .divCaptionIcon {text-align:left; overflow:hidden; width:100%;position:absolute; bottom:15px; left:0px; height:20px;} #divBranches .divCaptionIcon img.icon, #divAllTitles .divCaptionIcon img.icon {position:absolute; right:0px;top:-5px; width:17px; height:17px; background-color:var(--colorMainBackground);} #divBranches .divCaptionIcon .downloaded, #divAllTitles .divCaptionIcon .downloaded {cursor:auto;} .imgWrapper .divLoaderWrapper {position:absolute;top:0px;left:0px;width:100%; height:100%;} /* ----- side menu ------ */ #divOffline {margin-top:20px;margin-bottom:20px;position:relative;padding-left:40px;} #divOffline img {position:absolute;left:30px;top:50%;transform: translateY(-50%);} #divOffline .sortEntry {cursor:pointer;} #divOffline .sortEntry.active {font-weight:bold;} /* offline content -------- */ #divOfflinePopoverHeader { position:sticky; background-color:var(--colorMainBackground); left:0px; top:0px; z-index:1; } #divOfflinePopoverHeaderClose { margin:auto; margin-top:15px; width:100%; max-width:var(--offlineMaxWidth); text-align:right; padding:10px; font-size:var(--fontSizeBod); } #divOfflinePopoverHeaderClose table td:nth-child(1) {width:40px;text-align:center;} #divOfflinePopoverHeaderClose table td:nth-child(1) img {cursor:auto;} #divOfflinePopoverHeaderClose table td:nth-child(2) {text-align:left;} #divOfflinePopoverHeaderClose table td:nth-child(3) {width:40px;text-align:center;} #divOfflinePopoverListing { text-align: left; max-width: var(--offlineMaxWidth); margin: auto; padding: 10px;display: flex;flex-wrap: wrap;justify-content: space-between;} #divOfflinePopoverListing .noResults { text-align:center;padding:20px;width:100%;} #divOfflinePopoverListing .section { display: flex; flex-wrap: wrap; justify-content: space-between;} .divOfflineBlock { border-radius: var(--radiusContainer); position:relative;margin-bottom:20px;cursor:pointer;background-color: var(--colorContainerBackground);color: var(--colorContainerFont);} .divOfflineBlock .offlineTable { border:0px solid red; height:150px;} .divOfflineBlock .offlineTable td { position:relative; padding-left:15px;overflow:hidden;border:0px solid blue;height:100%;vertical-align:top;} .divOfflineBlock .offlineTable td:last-child { width:100px; text-align:center; position:relative;} .divOfflineBlock .imgBlock { border-radius: 0px var(--radiusContainer) var(--radiusContainer) 0px; width:100% ; height:100% ; overflow:hidden; display:inline-block; background-repeat: no-repeat; background-position: top center; background-size: cover; top:50%; left:50%;position:absolute;transform:translate(-50%,-50%); } .offlineDivCommon { margin-bottom:5px; padding:2px;margin-top:5px; text-overflow: ellipsis;overflow: hidden; font-size: 12px;} .offlineDiv1 { padding-top: 15px; margin-bottom: 7px; font-weight:bold; white-space: nowrap; } .offlineDiv2 { margin-bottom:7px; padding:2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; font-weight:bold; text-transform: uppercase; } .offlineDiv3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; vertical-align:top; opacity:0.9; } .offlineDiv4 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; vertical-align:top; opacity:0.9; } .offlineDiv5 { padding-left:15px; padding-bottom:3px; position:absolute;bottom:0px;left:0px;width:100%; } .offlineDiv5 img { width:20px; height:auto; } @media (min-width: 601px) { .divOfflineBlock { display: inline-block; flex-basis: calc(50% - 5px); max-width: calc(50% - 5px); display: inline-block; margin-bottom: 10px; } } /* ----- deletion offline ------ */ .offlineDeletionWarning {animation: offlineWarningIn 0.3s forwards; width:100%;height:100%;background-color:var(--colorContainerBackground);position:absolute;left:0px;top:0px;} @keyframes offlineWarningIn {0% {left: 50%; } 100% {left: 0%;}} .offlineDeletionWarning img {width:50px;height:auto; display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} /* ################################### GAMES ######################################### */ /* ----- side menu ------ */ /* type toggler */ #divMenuGameTypesToggler {display: flex; justify-content: space-between;cursor:pointer;margin-top:15px;} #divMenuGameTypesToggler span:last-child {margin-left: auto;} #divMenuGameTypesToggler span:last-child img {width:20px;height:auto;} #divMenuGameTypesToggler span:last-child img.flipped {transform: scaleY(-1);} #divMenuGameTypes [data-gamestype_id],#divMenuGameTypesToggler {margin-bottom:20px;} #divMenuGameTypes div[data-gamestype_id] {cursor:pointer;padding-left:45px;} #divMenuGameTypes div[data-gamestype_id].active {font-weight: bold;} /* listing games and branches */ #divGames { margin-top:10px;} #divGamesListing, #divGamesBranchesListing { text-align:center;margin:auto;} #divGamesBranchesListing #gameBranchTitle { text-transform: uppercase; font-size: calc(var(--fontSizeBody) * 1.5); margin: 20px; text-align:left; } #divPlatform:has(#divGamesBranchesListing:not(.hidden)) #divBanner { display: none; } #divPlatform:has(#divGamesBranchesListing:not(.hidden)) #divHtml { display: none; } #divPlatform:has(#divGamesBranchesListing:not(.hidden)) #divMenuGameTypes { display: none; } #divPlatform:has(#divGamesBranchesListing:not(.hidden)) #divSortTitles { display: none; } /* ----- blocks ------ */ .divGamesBlock { cursor:pointer; margin:var(--blockBorderWidth); margin-bottom: 40px; width:var(--imageArticleWidth); height:var(--imageArticleWidth); display:inline-block; position: relative; } .divGamesBlock .imgBlock { border-radius: var(--radiusMagazine); width:100%;height:100%;overflow:hidden; display:inline-block; background-repeat: no-repeat; background-position: top center; background-size: cover;} .gamesDiv1 { width:var(--imageArticleWidth); position:absolute; color: var(--colorMainFont); left:0px; top:100%; padding:7px;text-align:left;font-weight:bold;font-size:var(--fontSizeBody);overflow:hidden;text-overflow: ellipsis;white-space:nowrap; } /* ------------ platform -------------------- */ #divGamesPlatform {z-index:2;position:fixed; top:0px; left:0px;width:100%;height: 100%; text-align:left;color:var(--colorMainFont);overflow:auto;} #divGamesPlatform .header {pointer-events: none; position:fixed;height:var(--htmlHeaderHeight);overflow:hidden;width:100%; z-index:1; display: flex; justify-content: flex-end; align-items: center; } #tableGamesheader {pointer-events: auto; height:100%;width:100px; background-color:var(--colorMainBackground);opacity:0.7;} #tableGamesheader td {padding:5px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap; text-align:center; } #tableGamesheader td img.icon {margin-top:5px;} #divGameContent {height:100%; background-color:var(--colorMainBackground); } #divGameContent iframe {height:100dvh !important;} @media screen and (orientation: landscape) { #divPlatform[data-has_mouse="0"] #divGameContent[data-isportrait="1"] { transform: rotate(-90deg); transform-origin: left top; width: 100dvh; overflow: hidden; top: 100%; height:100dvw; position:absolute; } } @media screen and (orientation: portrait) { #divPlatform[data-has_mouse="0"] #divGameContent[data-isportrait="0"] { transform: rotate(-90deg); transform-origin: left top; width: 100dvh; overflow: hidden; top: 100%; height:100dvw; position:absolute; } } /* ------------ fullscreen icon -------------------- */ #tableGamesheader td:first-child img:nth-child(2) {display:none;} :fullscreen #tableGamesheader td:first-child img:nth-child(1) {display:none;} :fullscreen #tableGamesheader td:first-child img:nth-child(2) {display:inline-block;} #divPlatform[data-is_ios="1"] #tableGamesheader td:first-child {display:none;} #divPlatform[data-is_ios="1"] #tableGamesheader {width:50px;} /* ################################### ADVERTS ######################################### */ /* ----------- footer ---------------- */ #divFooterAdvert { position:fixed; max-width:var(--maxWidth); width:100%; bottom: var(--footerHeight); overflow:hidden;; margin:auto; display:inline-block; left: 50%; transform: translateX(-50%); max-height:200px; } #divFooterAdvertHeader{ position:absolute; top:0px; left:0px; width:100%; text-align:right; padding:5px; } #divFooterAdvertHeader img { background-color: var(--colorHeaderBackground); padding:5px; opacity:0.8; } #divFooterAdvertContent:has(img) { cursor:pointer; } #divFooterAdvertContent img { width:100%; height:auto; display: block; } #divPlatform:has(#divArticle:not(.hidden)) #divFooterAdvert { display: none; } #divPlatform:has(.popoverBlock:not(.hidden)) #divFooterAdvert { display: none; } /* ------------- inline advert --------------- */ #divInlineAdvert{ border:0px solid var(--colorHeaderBackground); background-color: var(--colorMainBackground); min-width:100px; max-width: calc(var(--maxWidth) / 2 ); width:95%; position:absolute; left: 50%; transform: translateX(-50%); overflow:hidden; padding-bottom:var(--footerHeight); /* max-height:80%; */ /* top set via JS */ } #divInlineAdvertHeader { position:absolute; top:0px; left:0px; width:100%; text-align:right; padding:5px; } #divInlineAdvertHeader img { background-color: var(--colorHeaderBackground); padding:5px; opacity:0.8; } #divInlineAdvertContent { } #divInlineAdvertContent img { width:100%;height:auto;display: block; cursor:pointer; } #divInlineAdvertHeader { text-align:right;} #divBodyContainer:has(#divInlineAdvert:not(.hidden)) #divBodyContent, #divBodyContainer:has(#divInlineAdvert:not(.hidden)) #divArticle, #divBodyContainer:has(#divInlineAdvert:not(.hidden)) .popoverBlock { filter: blur(3px); pointer-events: none; } #divBodyContainer:has(#divInlineAdvert:not(.hidden)) #divFooterAdvert { display:none; } /* estatically avoid footer and inline to appear at same time */ /* ################################### DIGIHUB OVERVIEW PAGE ######################################### */ #divPlatform[data-is_digi_hub="1"]:has(#divDigiHubPlatform:not(.hidden)) { #divAllTitles { display:none; } #divBranches { display:none; } #divCategories { display:none; } #divSortTitles { display:none; } .divGamesBlock { flex: 0 0 auto; } .articleCaption { font-size: var(--fontSizeBody); font-weight:bold; text-overflow: ellipsis; overflow: hidden;width: var(--imageArticleWidth); } .divGamesBlock .articleCaption { margin: var(--blockBorderWidth); margin-left:0px; } .imgWrapper .articleCaption { padding-left:5px; } .divPodcastPreviewBlock .articleCaption { margin: var(--blockBorderWidth); margin-left:0px; } } #divPlatform[data-is_digi_hub="1"]:has(#divDigiHubPlatform.hidden) { #divBanner { display:none; } #divHtml { display:none; } } #divDigiHubPlatform > .digiHubMainWrapper:first-of-type { margin-top:40px; } .digiHubMainWrapper { padding:10px;padding-left:10px;margin-bottom:20px; } .digiHubMainWrapper table td { white-space: nowrap;text-overflow: ellipsis; overflow: hidden;} .digiHubMainWrapper table td:first-child { text-transform:capitalize; font-weight: bold; font-size: calc( var(--fontSizeBody) * 1.5 );padding-left:5px;} .digiHubMainWrapper table td:last-child { font-weight: bold; font-size: var(--fontSizeBody); text-align:right;width:30%;} .digiHubMainWrapper table td:last-child span { cursor:pointer;position: relative;} .digiHubMainWrapper table td:last-child span::after { content: "\2794"; margin-left: 5px; font-size: 0.9em; color: inherit; font-weight: bold; } .digiHubMainWrapper .content { display: flex; align-items: center; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;white-space: nowrap; scrollbar-width: none; -ms-overflow-style: none; position: relative; width: 100%;} .digiHubMainWrapper .content::-webkit-scrollbar { display: none; } .digiHubMainWrapper .content .imgWrapper { display: inline-block; position: relative;} .digiHubMainWrapper .content img { width: var(--imageArticleWidth);height: var(--imageArticleHeight);cursor: pointer; margin: var(--blockBorderWidth); border-radius: var(--radiusMagazine);} #divDigiHubPlatforHighlights .highlightBlock {width:300px; flex: 0 0 auto;} @media (max-width: 601px) { #divDigiHubPlatforHighlights .highlightBlock {margin: var(--blockBorderWidth);} } .divPodcastPreviewBlock { flex: 0 0 auto; cursor: pointer; margin: var(--blockBorderWidth); margin-bottom: 40px; width: var(--imageArticleWidth); height: var(--imageArticleWidth); display: inline-block; position: relative; border-radius: var(--radiusContainer); } .divPodcastPreviewBlock .imgBlock { border-radius: var(--radiusMagazine); width: 100%; height: 100%; overflow: hidden; display: inline-block; background-repeat: no-repeat; background-position: top center; background-size: cover; } /* ################################### NEWSFEEDS ######################################### */ #divNewsfeed {} #divNewsfeedWrapper { margin:auto; padding:10px; max-width:var(--maxWidth);} /* --------------------- global newsfeed view ---------------------------- */ /* --------------------- main newsfeed title block ------------------------- */ #divNewsfeedArticle { --mainImageBlockWidth:170px; --subImageBlockWidth:70px; } #tableNewsfeedArticle { td:first-child {width: calc(var(--mainImageBlockWidth) + 30px);} margin-bottom: 50px; td {vertical-align:top;} } #divNewsfeedArticleImage { text-align:left;} #divNewsfeedArticleImage .imgBlock { background-color:var(--colorContainerBackground); margin:auto; width:var(--mainImageBlockWidth); height:var(--mainImageBlockWidth); border-radius: var(--radiusContainer); overflow:hidden; display:inline-block; background-repeat: no-repeat; background-position: center center; background-size: cover; } #divNewsfeedArticleImage .imgBlock img { width:100%;height:100%;} #divNewsfeedArticleTitle { text-align:left; font-size:calc(var(--fontSizeBody) + 10px);} /* --------------------- entry newsfeed ------------------------- */ #divNewsfeedArticleListing .divFeed {margin-bottom:30px;padding-bottom:10px;position:relative;} #divNewsfeedArticleListing .divFeed:has(input) {border-bottom:0px;} #divNewsfeedArticleListing .divFeed::after { content: " "; width:100%;height:4px;background-color:var(--colorContainerBackground);;position:absolute;width:98%;left: 50%; transform: translate(-50%, -50%);bottom:-12px;} #divNewsfeedArticleListing .divFeed .colorHighlight { background-color:var(--colorMainBackground);position:absolute; bottom:0px; right: 0px;text-transform: uppercase; font-weight: bold; cursor: pointer;} #divNewsfeedArticleListing .newsfeedTable td {vertical-align:top;} #divNewsfeedArticleListing .newsfeedTable td:first-child {width: calc(var(--subImageBlockWidth) + 30px); text-align:left;} #divNewsfeedArticleListing .newsfeedTable td:last-child {padding-right:15px;} #divNewsfeedArticleListing .newsfeedTable tr:last-child td {padding-top:10px;} #divNewsfeedArticleListing .newsfeedTable tr:first-child td:last-child {vertical-align:top;} #divNewsfeedArticleListing .newsfeedTable .div1 {cursor:pointer;background-color:var(--colorContainerBackground); width:var(--subImageBlockWidth);height:var(--subImageBlockWidth);border-radius: var(--radiusContainer); overflow:hidden; display:inline-block; background-repeat: no-repeat; background-position: center center; background-size: cover;} #divNewsfeedArticleListing .newsfeedTable .div2 {cursor:pointer;font-weight:bold;} #divNewsfeedArticleListing .newsfeedTable .div3 {position:relative;font-size:14px;font-weight:300; overflow-wrap: break-word; overflow: hidden; text-overflow: ellipsis;} #divNewsfeedArticleListing .newsfeedTable .div3.isClamped {display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 7;} #divNewsfeedArticleListing .newsfeedTable .div4 {font-size:14px;font-weight:300;margin-top:10px;} #divNewsfeedArticleListing .newsfeedTable .div3:has(.divLong:not(.hidden)) { display: block; -webkit-box-orient: initial;-webkit-line-clamp: unset; } #divNewsfeedArticleListing .newsfeedTable .div3 .showLess:not(.hidden) { position:relative;} #divNewsfeedArticleListing .newsfeedTable .div5 {font-size:14px;font-weight:300;margin-top:4px;} /* --------------------- global newsfeed view ---------------------------- */ #divNewsfeedGlobal { text-align:center;margin:auto;} #divNewsfeedGlobal.hardHidden { display:none;} .divNewsfeedBlock { cursor:pointer; margin:var(--blockBorderWidth); margin-bottom: 40px; width:var(--imageArticleWidth); height:var(--imageArticleWidth); display:inline-block; position: relative; } .divNewsfeedBlock .imgBlock { background-color:var(--colorContainerBackground); border-radius: var(--radiusMagazine); width:100%;height:100%;overflow:hidden; display:inline-block; background-repeat: no-repeat; background-position: top center; background-size: cover; } .divNewsfeedBlock .newsfeedGlobalLabel { width: var(--imageArticleWidth); position: absolute; color: var(--colorMainFont); left: 0px; top: 100%; padding: 7px; text-align: left; font-weight: bold; font-size: var(--fontSizeBody); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} /* ------------ newsfeed html block-------------------- */ #divNewsfeedHtmlWrapper {padding-bottom:var(--footerHeight); z-index:2;position:fixed; top:0px; left:0px;width:100%;height: 100%; text-align:left;background-color:var(--colorMainBackground);color:var(--colorMainFont);overflow:auto;} #divNewsfeedHtmlWrapper .header {top:0px;position:fixed;height:var(--htmlHeaderHeight);background-color:var(--colorMainBackground);} #divNewsfeedHtmlWrapper .intro {font-weight:bold;} #divNewsfeedHtmlWrapper .title {font-weight:bold;font-size:30px;margin-bottom:20px;line-height: 32px;} #tableNewsfeedHtmlheader {height:100%;} #tableNewsfeedHtmlheader td {padding:5px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;} #tableNewsfeedHtmlheader td:last-child {width:50px;text-align:right;} #tableNewsfeedHtmlheader td:first-child {width:50px;} #divNewsfeedHtmlContent { max-width:var(--maxWidth); margin:auto;padding:20px;padding-top:50px;} #divPlatform:has(#divNewsfeedHtmlWrapper:not(.hidden)) footer { display: none; } #divNewsfeedHtmlContent:has(iframe) {height:100%;padding:0px;} #divNewsfeedHtmlContent * {white-space:nowrap; white-space: normal; overflow-wrap: anywhere;word-break: break-word;} #divNewsfeedHtmlContent img { width:auto; height:auto; max-width:75%; margin:auto; margin-bottom:10px; margin-top:10px; } @media (max-width: 600px) { #divNewsfeedHtmlContent img {max-width:100%; width:100%;} } #divNewsfeedHtmlContent video {width: calc(100vw - 50px);max-width:100%;margin-bottom:10px;margin-top:10px;} /* ################################### IMAGE GALLERY ######################################### */ #divImageGallery { background-color:var(--colorMainBackground); position:fixed; top:0; left:0px; width:100%; height:100%; z-index:2; display: flex; flex-direction: column; /* stack vertically */ } #divImageGallery .noImages {text-align:center;padding-top:20%;font-size:var(--fontSizeBody);} #divImageGallery .divCloser {position:absolute;left:0xp;top:0px;width:100%;text-align:right;padding:15px;z-index:1;} #divImageGallery .divImageWrapper {flex: 1; display: flex; justify-content: center; align-items: center; overflow: hidden; } #divImageGallery .divImageWrapper img {max-width: 100%; max-height: 100%; object-fit: contain; } #divImageGallery .nav { position: absolute; width: 40px; height: 100%; top: 0px; display: flex; justify-content: center; align-items: center; z-index:0; } #divImageGallery .nav:hover { background-color: var(--colorMainBackground); opacity: 0.6; } #divImageGallery .navLeft { left:0px;} #divImageGallery .navRight { right:0px;} #divPlatform[data-has_mouse="0"] #divImageGallery .nav {/* display:none; */} /* allow mobile devies to see the arrows */ #divPlatform:has(#divImageGallery:not(.hidden)) header { display:none; } /* ################################### image flower ######################################### */ #divArticleImages .divImgWrapper .flowing { height:var(--imageReaderHeight); width:var(--imageReaderWidth); } #divArticleImages .divImgWrapper:has(.flowing) { overflow:visible; } #divArticleImages .divImgWrapper .flowing.next { left: var(--imageReaderWidth);} #divArticleImages .divImgWrapper .flowing.prev { left: calc(var(--imageReaderWidth) * -1);} #divArticleImages .divImgWrapper[data-full_focus] .flowing {display:none;} /* ################################### thumbnail strecher ROOT ARTICLES ######################################### */ #divArticles[data-quantity_to_stretch] img { width: var(--stretchedArticleWidth); height: var(--stretchedArticleHeight); } #divBranchesTitles[data-quantity_to_stretch] img { width: var(--stretchedBranchWidth); height: var(--stretchedBranchHeight); } #divNewspapers[data-quantity_to_stretch] img { width: var(--stretchedNewspaperWidth);height: var(--stretchedNewspaperHeight);} /* ################################### HTML DESKTOP ######################################### */ /* ------------ click from main reader ----------------- */ #divDesktopHtmlButtonContainer { position:fixed; width:100%; bottom: var(--footerDesktopNavigationHeight); } #divDesktopHtmlButton { background-color: var(--colorFooterBackground); color:var(--colorFooterFont); display: inline-flex; align-items: center; gap: 8px; padding:5px; cursor:pointer; border-radius:5px 5px 0px 0px; } #divDesktopHtmlButton .label { font-size:var(--fontSizeBody); margin-left:5px; } /* ------------ desktop html reader ----------------- */ #divHtmlWrapper.desktop { width: 80dvw; max-width: var(--maxWidth); max-height: 80dvh; min-height: 50dvh; border:10px solid var(--colorMainFont); border-radius: 12px; box-sizing: border-box; display: inline-block; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: var(--colorHtmlBackground); overflow:auto; color: var(--colorHtmlFont); } #divHtmlWrapper.desktop .header { position:sticky; height: var(--htmlHeaderHeight); background-color: var(--colorHtmlBackground); top:0px; } #divHtmlWrapper.desktop .divHtmlDesktopContent { text-align:left; } /* ################################### PWA INSTALLER ######################################### */ /* tenant-theme tokens — override per white-label by redefining --pwaAccent / --pwaSurface */ #divPwaInstallAndroid, #divPwaInstallIos { --pwaAccent: var(--colorHighlightBackground); --pwaSurface: var(--colorFooterBackground); --pwaText: var(--colorFooterFont, #fff); --pwaBtnText: var(--colorHighlightFont); /* highlight colour applies to button text only */ --pwaTextLow: color-mix(in srgb, var(--pwaText) 45%, transparent); --pwaTextMid: color-mix(in srgb, var(--pwaText) 72%, transparent); --pwaBorder: color-mix(in srgb, var(--pwaText) 7%, transparent); } @keyframes pwaBannerIn { from { transform: translate(-50%, -110%); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } } @keyframes pwaTeaserIn { from { transform: translate(-50%, 130%); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } } @keyframes pwaSheetIn { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } } @keyframes pwaScrimIn { from { opacity: 0; } to { opacity: 1; } } @keyframes pwaArrowIn { from { opacity: 0; } to { opacity: 1; } } @keyframes pwaSpin { to { transform: rotate(360deg); } } /* Shared banner shell ---------------------------------- */ .pwaBanner { display: flex; align-items: center; gap: 11px; background: var(--pwaSurface); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--pwaBorder); border-radius: 16px; padding: 11px 13px; box-shadow: 0 12px 36px rgba(0,0,0,0.5); box-sizing: border-box; } .pwaIcon { width: 40px; height: 40px; border-radius: 9px; overflow: hidden; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px color-mix(in srgb, var(--pwaAccent) 35%, transparent); } .pwaIcon svg, .pwaIcon img { width: 100%; height: 100%; display: block; border-radius: 9px; } .pwaIcon svg.pwaGenericIcon rect { fill: var(--pwaAccent); } /* override hardcoded gradient with theme accent */ .pwaIcon.pwaIconLg { width: 50px; height: 50px; border-radius: 11px; } .pwaText { flex: 1; min-width: 0; } .pwaTitle { font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 600; color: var(--pwaText); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pwaSubtitle { font-family: 'Inter', system-ui, sans-serif; font-size: 11px; color: var(--pwaTextLow); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pwaBtn { border: 0; background: var(--pwaAccent); color: var(--pwaBtnText); font-family: 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 600; padding: 8px 13px; border-radius: 999px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 60px; transition: background 0.2s, filter 0.2s; } .pwaBtn:hover { filter: brightness(1.08); } .pwaBtnGlow { box-shadow: 0 4px 12px color-mix(in srgb, var(--pwaAccent) 35%, transparent); } .pwaBtn .pwaSpinner { width: 14px; height: 14px; display: none; animation: pwaSpin 0.8s linear infinite; } .pwaClose { width: 26px; height: 26px; border: 0; background: transparent; color: var(--pwaTextLow); cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 13px; padding: 0; } .pwaClose svg { width: 12px; height: 12px; } /* Android bottom banner (same position as iOS teaser) - */ #divPwaInstallAndroid { position: fixed; bottom: calc(var(--footerHeight, 0px) + 12px); left: 50%; width: calc(100% - 24px); max-width: calc(var(--maxWidth) - 24px); transform: translate(-50%, 0); z-index: 80; box-sizing: border-box; animation: pwaTeaserIn 0.38s cubic-bezier(0.2,0.8,0.3,1) both; } #divPwaInstallAndroid[data-state="installing"] .pwaBtn { background: color-mix(in srgb, var(--pwaAccent) 45%, transparent); } #divPwaInstallAndroid[data-state="installing"] .pwaBtnLabel { display: none; } #divPwaInstallAndroid[data-state="installing"] .pwaSpinner { display: block; } #divPwaInstallAndroid[data-state="done"] .pwaBtn, #divPwaInstallAndroid[data-state="done"] .pwaClose { display: none; } /* iOS root + teaser ----------------------------------- */ #divPwaInstallIos { display: contents; /* keep children as siblings of body; avoid iOS Safari extending scroll bounds via a fixed full-viewport wrapper */ } #divPwaInstallIos.hidden > * { display: none; } .pwaIosTeaser { position: fixed; left: 50%; bottom: calc(var(--footerHeight, 0px) + 12px); width: calc(100% - 24px); max-width: calc(var(--maxWidth) - 24px); transform: translate(-50%, 0); box-sizing: border-box; z-index: 90; animation: pwaTeaserIn 0.38s cubic-bezier(0.2,0.8,0.3,1) both; transition: transform 0.38s cubic-bezier(0.2,0.8,0.3,1), opacity 0.3s ease; } #divPwaInstallIos[data-stage="sheet"] .pwaIosTeaser, #divPwaInstallIos[data-stage="done"] .pwaIosTeaser { /* fade out in place — do NOT translate below the viewport, or iOS Chrome extends the scrollable area and shows empty space under the page. */ opacity: 0; pointer-events: none; } /* iOS scrim + sheet ----------------------------------- */ .pwaIosScrim { position: fixed; inset: 0; background: rgba(2,4,8,0.65); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); pointer-events: none; z-index: 95; /* display:none off-stage — a full-viewport fixed box left in layout (even hidden) extends scroll bounds on iOS Chrome. Fade back in via the pwaScrimIn keyframe. */ display: none; } #divPwaInstallIos[data-stage="sheet"] .pwaIosScrim { display: block; pointer-events: auto; animation: pwaScrimIn 0.35s ease both; } .pwaIosSheetWrap { position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 0); width: 100%; max-width: var(--maxWidth); pointer-events: none; z-index: 100; /* display:none (not visibility:hidden) — an off-screen position:fixed box still extends the scrollable area on iOS Chrome, creating empty space below the page. Only display:none removes it from scroll-bounds; the slide-in is restored via the pwaSheetIn keyframe when the sheet stage activates. */ display: none; } #divPwaInstallIos[data-stage="sheet"] .pwaIosSheetWrap { display: block; pointer-events: auto; animation: pwaSheetIn 0.42s cubic-bezier(0.2,0.8,0.3,1) both; } .pwaIosArrow { display: flex; justify-content: center; padding-bottom: 8px; opacity: 0; transition: opacity 0.2s ease 0.2s; cursor: pointer; } .pwaIosArrow svg { width: 20px; height: 40px; } #divPwaInstallIos[data-stage="sheet"] .pwaIosArrow { opacity: 1; } .pwaIosSheet { background: var(--pwaSurface); border-top-left-radius: 24px; border-top-right-radius: 24px; border-top: 1px solid var(--pwaBorder); padding: 10px 20px 28px; box-shadow: 0 -20px 60px rgba(0,0,0,0.55); font-family: 'Inter', system-ui, sans-serif; } .pwaDragHandle { width: 36px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.18); margin: 0 auto 16px; cursor: grab; } .pwaIosSheet.pwaDragging { transition: none; } .pwaIosSheet.pwaDragging .pwaDragHandle { cursor: grabbing; } .pwaSheetHeader { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; } .pwaSheetTitle { font-size: 16px; font-weight: 700; color: var(--pwaText); letter-spacing: -0.01em; } .pwaSheetSubtitle { font-size: 12px; color: var(--pwaTextLow); margin-top: 3px; } .pwaSteps { border-top: 1px solid var(--pwaBorder); border-bottom: 1px solid var(--pwaBorder); margin-bottom: 30px; } .pwaStepRow { display: flex; align-items: center; gap: 12px; padding: 11px 0; } .pwaStepNum { width: 24px; height: 24px; border-radius: 12px; background: color-mix(in srgb, var(--pwaAccent) 15%, transparent); color: var(--pwaAccent); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .pwaStepText { flex: 1; font-size: 13.5px; color: var(--pwaTextMid); line-height: 1.42; letter-spacing: -0.005em; } .pwaStepText strong { color: var(--pwaText); font-weight: 600; } .pwaStepIcon { width: 36px; height: 36px; border-radius: 9px; flex: 0 0 auto; background: rgba(255,255,255,0.05); border: 1px solid var(--pwaBorder); display: flex; align-items: center; justify-content: center; color: var(--pwaAccent); } .pwaStepDivider { height: 1px; background: var(--pwaBorder); } .pwaIosArrow { color: var(--pwaAccent); } .pwaGotIt { width: 100%; padding: 13px; border: 0; border-radius: 12px; background: var(--pwaAccent); color: var(--pwaBtnText); font-family: 'Inter', system-ui, sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; } #divPlatform:has(#divArticle:not(.hidden)) #divPwaInstallAndroid, #divPlatform:has(#divArticle:not(.hidden)) #divPwaInstallIos, #divPlatform:has(.popoverBlock:not(.hidden)) #divPwaInstallAndroid, #divPlatform:has(.popoverBlock:not(.hidden)) #divPwaInstallIos { display: none; } /* Android title may wrap to 2 lines. Since Android has no subtitle, the title uses the same vertical space the iOS teaser gives title+subtitle; both fit inside the 40px icon height, so the banner height stays constant whether the message is 1 or 2 lines. */ #divPwaInstallAndroidTitle{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; white-space: normal; } /* hide the placeholder subtitle so a wrapped title doesn't add a 3rd line; the done-state code sets subtitle text, which makes it non-empty and visible again. */ #divPwaInstallAndroid .pwaSubtitle:empty { display: none; } /* ################################### END ######################################### */