/*
    used in addition to assets/css/main.css
    cf. Arcana by HTML5 UP
    (gl)
*/

/* !gl! banner style */
#bannerGL
{
/*
    background-image: url("../../images/banner-OS.jpg");
*/
    background-position: center center;
    background-size: cover;
    height: auto;
    width: auto;
    text-align: center;
    position: relative;
}

    #bannerGL header {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #212121;
        background: rgba(27, 27, 27, 0.75);
        color: #fff;
        padding: 1.5em 0;
    }

        #bannerGL header h2 {
            display: inline-block;
            margin: 0;
            font-size: 1.25em;
            vertical-align: middle;
        }

            #bannerGL header h2 em {
                opacity: 0.75;
            }

            #bannerGL header h2 a {
                border-bottom-color: rgba(255, 255, 255, 0.5);
            }

                #bannerGL header h2 a:hover {
                    border-bottom-color: transparent;
                }

        #bannerGL header .button {
            vertical-align: middle;
            margin-left: 1em;
        }

/* !gl! image style */
.imageGL img{
 /****** Image Style ******/
   width: 100%;
   height: auto;
   background-size: cover;
}

/* !gl! table style */
.tableGL {
/****** Table Style from Markdown ******/
      table {
      padding: 0;
      word-break: initial;
      }

      table tr {
      border-top: 1px solid #dfe2e5;
      margin: 0;
      padding: 0;
      }

      table tr:nth-child(2n),
      thead {
      background-color: #f5f7f9;
      }

      table tr th {
      font-weight: bold;
      border: 1px solid #dfe2e5;
      border-bottom: 0;
      margin: 0;
      padding: 6px 13px;
      }

      table tr td {
      border: 1px solid #dfe2e5;
      margin: 0;
      padding: 6px 13px;
      }

      table tr th:first-child,
      table tr td:first-child {
      margin-top: 0;
      }

      table tr th:last-child,
      table tr td:last-child {
      margin-bottom: 0;
      }
}

/* !gl! center text */
.centerGL {
  text-align: center;
}

/* !gl! details and summary style */
/* Source - https://stackoverflow.com/a/10813665 */

summary {
    margin: ;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    }

details {
  border: 1px solid gray;
  border-radius: 0.2rem;
  padding: 0.5rem;
  display: block;
}

details>summary {
  list-style-type: '▶️';
}

details[open]>summary {
  list-style-type: '🔽';
  margin-bottom: 0.5rem;
}

/* !gl! no Navigation header */
#headerGL {
  background-color: #37c0fb;
  width: 100%;
  height: 4em;
  padding: 1em 0 0 0;
  position: fixed;
  display: block;
  top: 0;
  z-index: 0;
  font-size: 1.1em;
  letter-spacing: -0.025em;
  text-align: center;
}

/* alert style */
.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}
/*
<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>*/