/* 
# 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;
}