/* Layout */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--palette-background-divider); border-radius: 2px; overflow: hidden; } ::-webkit-scrollbar-thumb { background: var(--palette-primary-main); border-radius: 2px; overflow: hidden; } ::-webkit-scrollbar-thumb:hover { background: var(--palette-primary-dim); } /* Layout structure */ /* .stripe-view should not have any left/righ padding or resizing will fail. */ .stripe { position: relative; margin: 0; padding: 0; border: none; } /* hide h1 - it will be moved by JS into #summary */ #content h1 { display: none; } .stripe-view { --stripe-margin-x: auto; width: 1000px; margin: 0px var(--stripe-margin-x); text-align: left; overflow-x: hidden; box-sizing: border-box; } .admin .stripe-view { width: 1600px; } @media screen and (max-width: 1700px) { .admin .stripe-view { --stripe-margin-x: 10px; width: calc(100% - 2 * var(--stripe-margin-x)); margin: 0px var(--stripe-margin-x); } } @media screen and (max-width: 1100px) { .admin .stripe-view, .stripe-view { --stripe-margin-x: 10px; width: auto; } } @media screen and (max-width: 700px) { .admin .stripe-view, .stripe-view { --stripe-margin-x: 4px; width: auto; } } @media screen and (max-width: 400px) { .admin .stripe-view, .stripe-view { --stripe-margin-x: 1px; width: auto; } } /* Menu */ #header { --header-side-gap: 10px; position: fixed; left: 0px; top: 0px; width: 100%; height: 100vh; z-index: var(--layer-upper); pointer-events: none; } @media screen and (max-width: 700px) { #header { --header-side-gap: 4px; } } @media screen and (max-width: 400px) { #header { --header-side-gap: 1px; } } #header-mobile, #header-desktop { position: fixed; width: 100%; top: 0; } #header-desktop { visibility: var(--header-desktop-visibility-hint); } #header-mobile { visibility: var(--header-mobile-visibility-hint); } .headerGap { height: var(--header-height); flex-grow: 0; flex-shrink: 0; } /* Main layer */ #layer-main { z-index: var(--layer-main); display: flex; flex-direction: column; height: 100vh; } /* Visual */ .visualGap { height: 0px; flex-grow: 0; flex-shrink: 0; } .visualStripe { position: absolute; width: 100%; text-align: center; z-index: 3; } .visualStripe div.background { height: 70px; overflow: hidden; background-position: center top; background-size: auto 100%; } /* Content */ .contentStripe { z-index: 0; flex-grow: 0; flex-shrink: 0; } .contentStripe.contentStripe-stretch { flex-grow: 1; display: flex; flex-direction: column; align-items: stretch; } .contentStripe .stripe-view { position: relative; overflow: hidden; z-index: 5; } /* Use this class (in customization) in case does not scroll the content. */ .content-scroll { overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; } /* Summary Area */ .summary-area { display: flex; flex-direction: column; justify-content: flex-end; color: var(--palette-background-paper); white-space: nowrap; text-align: center; min-height: 120px; box-sizing: border-box; } @media screen and (max-width: 700px) { .summary-area { min-height: 80px; } } .summary-area:empty { display: none; } .summary-area h1 { margin: 20px; padding: 0; text-shadow: 0px 5px 20px rgba(0, 0, 0, 0.7); white-space: normal; vertical-align: bottom; text-align: center; flex-shrink: 0; flex-grow: 0; } .summary-area h1 p { text-align: center; margin: 0; padding: 0; } /* Content Area */ .content-area { --content-area-side-padding: 60px; --content-area-top-padding: 20px; --content-area-bottom-padding: 48px; flex-grow: 1; flex-shrink: 0; position: relative; display: block; min-height: 10px; padding-top: var(--content-area-top-padding); padding-left: var(--content-area-side-padding); padding-right: var(--content-area-side-padding); padding-bottom: var(--content-area-bottom-padding); margin-top: 20px; margin-bottom: 20px; color: var(--palette-background-text); background-color: var(--palette-background-paper); border-radius: var(--border-radius); overflow-x: hidden; box-sizing: border-box; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.3); } .content-area.background-none { background: none; box-shadow: none; } @media screen and (max-width: 1100px) { .content-area { --content-area-side-padding: 40px; } } @media screen and (max-width: 700px) { .content-area { --content-area-side-padding: 20px; } } /* Footer */ .footerStripe { flex-grow: 0; flex-shrink: 0; padding-top: 70px; z-index: 0; color: var(--palette-background-paper); font-family: var(--regular-font); background-color: transparent; background-image: url('gfx-2020/style/footer-background.png'); background-size: contain; background-repeat: repeat-x; background-position: left bottom; } @media screen and (max-width: 700px) { .footerStripe { padding-top: 40px; } } @media screen and (max-width: 400px) { .footerStripe { padding-top: 30px; } } .footerStripe .stripe-view { text-align: center; z-index: var(--layer-main); } #footer-social-media { white-space: nowrap; text-align: center; padding: 0; margin: 6px 0px; } #footer-social-media .button { margin-left: 10px; margin-right: 10px; } #footer-menu { font-size: 15px; padding: 0; margin: 0; } #footer-menu .item { display: inline-block; } #footer-menu .sep { display: inline-block; width: 10px; } #footer-menu a { color: inherit; font-weight: bold; font-size: 16px; line-height: 30px; padding: 6px 10px; margin: 0; text-decoration: none; text-shadow: 0.9px 0.5px 3px rgba(0, 0, 0, 0.3); } #footer-menu a:hover { color: var(--palette-primary-bright); } #footer-notice { font-size: 80%; padding-top: 8px; padding-bottom: 22px; padding-left: 20px; padding-right: 20px; text-shadow: 0.9px 0.5px 3px rgba(0, 0, 0, 0.3); } @media screen and (max-width: 400px) { #footer-notice { padding-left: 10px; padding-right: 10px; } } #footer-notice a { color: inherit; text-decoration: underline; } #footer-notice a:hover { color: var(--palette-primary-dim); text-decoration: none; } /* FAQ */ #faqs .textBody { padding-bottom: 22px; margin-bottom: 2px; } #faqs .textBody:last-of-type { padding-bottom: 44px; margin-bottom: 0px; } #faqs h3 { font-size: 12pt; font-weight: bold; margin-top: 0px; margin-bottom: 4px; } #faqs hr { margin-top: 18px; } #faqs hr + h3 { margin-top: 22px; } #faqs p { margin-top: 4pt; margin-bottom: 0pt; } #faqs p:first-of-type { margin-top: 0pt; } /* Prices */ table.prices tr:first-of-type th:first-of-type { text-align: left; } table.prices td:not(:first-of-type) { white-space: nowrap; text-align: right; } /* Registration */ .inputForm .accommodation-preference-prolog { margin-bottom: 20px; } .inputForm .accommodation-preference-control input { margin-bottom: 5px; } .inputForm .input.accommodation-preference { margin-bottom: 0px; }