| /* |
| # Licensed to the Apache Software Foundation (ASF) under one |
| # or more contributor license agreements. See the NOTICE file |
| # distributed with this work for additional information |
| # regarding copyright ownership. The ASF licenses this file |
| # to you under the Apache License, Version 2.0 (the |
| # "License"); you may not use this file except in compliance |
| # with the License. You may obtain a copy of the License at |
| # |
| # http://www.apache.org/licenses/LICENSE-2.0 |
| # |
| # Unless required by applicable law or agreed to in writing, |
| # software distributed under the License is distributed on an |
| # "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| # KIND, either express or implied. See the License for the |
| # specific language governing permissions and limitations |
| # under the License. |
| */ |
| |
| book { |
| display: flex; |
| flex-direction: column; |
| } |
| |
| @supports(display: grid) { |
| book { |
| width: auto; |
| } |
| } |
| |
| book:nth-of-type(2) { |
| grid-column: 2; |
| grid-row: 2 / span 2; |
| } |
| |
| h3 { |
| order: 0; |
| } |
| |
| footer { |
| background-color: #9E2064; |
| text-align: right; |
| padding-right: 20px; |
| } |
| |
| section { |
| background-color: #dfe5e8; |
| display: grid; |
| grid-template: [header-left] "head head" 30px [header-right] |
| [main-left] "nav main" 1fr [main-right] |
| [gridfooter-left] "nav foot" 30px [gridfooter-right]; |
| grid-gap: 0.5em; |
| width: 100%; |
| height: 250px; |
| } |
| |
| section:after { |
| clear: both; |
| content: ""; |
| display: table; |
| } |
| |
| header { |
| background-color: #F69923; |
| grid-area: head; |
| } |
| |
| nav { |
| background-color: #F79A23; |
| grid-area: nav; |
| } |
| |
| main { |
| background-color: #E97826; |
| grid-area: main; |
| } |
| |
| gridfooter { |
| background-color: #9E2064; |
| text-align: center; |
| grid-column: foot; |
| } |
| |
| .tabs-nav-container { |
| display: flex; |
| flex-direction: column; |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| } |
| |
| .tabs-nav { |
| text-align: center; |
| } |
| |
| .tabs-nav:hover { |
| color: #6d6d6d; |
| } |
| |
| .tabs-nav.is-active { |
| color: white; |
| background-color: #C92037; |
| min-width: 400px; |
| } |
| |
| .tabs-nav span { |
| display: none; |
| } |
| |
| .tab { |
| display: none; |
| background-color: #dfe5e8; |
| } |
| |
| .tab.is-active { |
| display: block; |
| } |
| |
| .tab-content { |
| padding: 0.5em; |
| } |