css/new-style.css

/*
   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.
*/
.main {
  font-family: DejaVu Sans, Helvetica, sans-serif;
  width: 60em;
}

#topButton {
    position: fixed;
    bottom: 0rem;
    right: 0rem;
    background: #dedede;
    margin: 1rem;
    padding: .5rem;
    border-radius: 10px;
    border-color: #a0a0a0;
    display: none;
    z-index: 999;
}

.social-media {
  display: inline-block;
  float: right;
}

.social-media-links {
  display: inline-block;
}

.social-media-links li {
  display: inline-block;
  margin-left: 1rem;
  padding: 0.3rem;
  background-color: #bbb;
}

.share-links ul {
  display: inline-block;
}

.share-links li {
  display: inline-block;
  margin-right: 1rem;
  background-color: #bbb;
  padding: 0.3rem;
}

.social-media-links a, .share-links a,
.social-media-links :visited, .share-links :visited,
.social-media-links :hover, .share-links :hover,
.social-media-links :link, .share-links :link {
  color: white !important;
}

.social-media-links i, .share-links i {
  padding-right: 0.2rem;
}

.twitter {
  background-color: #55acee !important;
}

.fb {
  background-color: #3b5998 !important;
}

.github {
  background-color: #333333 !important;
}

a {
  color: brown;
}

.menu a {
  text-decoration-line: none;
}

a:hover {
  color: black;
}

img {
  border: 0;
  width: auto;
  max-width: 95%;
  height: auto;
}

img.logo {
  max-height: 88px;
}

img.asf-logo {
  width: 217px;
  max-height: 88px;
}


.menu, h1, h2, h3, h4, h5, .go-top, .title {
  font-family: "Merriweather";
}

h1, h2, h3, h4, h5, .title {
  border-bottom: 0.2rem solid orange;
}

.title>.title {
  border-bottom: 0px;
}

.footer {
  background-color: #444;
  border-top: 1px solid black;
  color: white;
  margin-top: 3em;
  padding: 2em 0 1em;
  text-align: center;
  box-shadow: 0 -8px 21px 0 rgba(0, 0, 0, 0.2);
}

.menu {
  border: 1px solid lightgray;
  list-style: none;
  margin: 0.5em;
  padding: 0.5em;
  font-size: 90%;
}

.menu+.menu {
  margin-top: 1.5em;
}

.menu img {
  margin-left: 0.3em;
  vertical-align: middle;
  width: auto;
  max-width: 95%;
  height: auto;
}

.menu ul {
  list-style: outside;
  padding-left: 1.5rem;
}

.menu-title {
  font-size: 105%;
}

.banner>iframe {
  width: 270px;
  height: 70px;
}
.banner>iframe>body {
  margin: 0px;
  padding: 0px;
}
.banner>iframe img {
  width: auto;
  max-width: 100%;
  height: auto;
}

body {
  margin: 0px;
  padding: 0px;
}

.section pre, .source {
  background: none repeat scroll 0 0 black;
  color: orange;
  border: 1px solid gray;
  padding: 0.3rem;
  margin: 0.3rem;
  font-family: dejavu sans mono, monospace, sans-serif;
  overflow: auto;
}

.code {
  padding: 0.1em;
  font-weight: bold;
  color: brown;
  font-family: dejavu sans mono, monospace, sans-serif;
}

.required-Yes>span {
  font-weight: bold;
}

.deprecated, .note {
  background: none repeat scroll 0 0 #fee;
  border: 1px solid #dbb;
  margin: 1em;
  padding: 1em;
}

.component {
  background: none repeat scroll 0 0 #fff;
  margin: 1em;
  padding: 0.4em;
}

.subsection {
  background: none repeat scroll 0 0 white;
  margin: 1em;
  padding: 1em;
}

.screenshot {
  margin: 2em;
  padding: 0;
}

figure {
  margin: 1em 2em;
}

figcaption {
  font-family: "Merriweather";
  font-style: italic;
}

figure>a>img, .screenshot>a>img {
  overflow: auto;
  width: auto;
  max-width: 100%;
  height: auto;
}

.clear {
  clear: both;
}

.nostyle {
  border: 1px solid black;
}

.title {
  font-size: 120%;
  font-weight: bold;
}

.example {
  background: none repeat scroll 0 0 lightgray;
  border: 1px solid gray;
  clear: both;
  padding: 1em;
  margin: 1em;
}

.property .name,
.property .description,
.property .required {
  display: inline-block;
}

.property .name {
  font-style: italic;
  vertical-align: top;
  width: 20%;
  word-wrap: break-word;
}

.property .description {
  vertical-align: top;
  width: 60%;
  /* add padding so description does not run into side columns */
  padding-left: 1.5em;
  padding-right: 1.5em;
  /* treat padding as part of the content, so we don't need to adjust width to compensate */
  box-sizing: border-box;
}

.property .required {
  vertical-align: top;
}

.property+.property {
  margin-top: 0.5em;
}

.required.req-false {
  font-weight: lighter;
}

.go-top {
  margin: 1em 0;
  font-size: 120%;
}

.properties {
  background: none repeat scroll 0 0 lightgoldenrodyellow;
  border: 1px solid darksalmon;
  margin: 1em;
  padding: 1em;
}

.properties .title {
  font-size: 100%;
}

th {
  border-bottom: 1px solid black;
  font-family: "Merriweather";
  text-align: left;
}

td {
  vertical-align: top;
}

tr+tr {
  margin-top: 0.2em;
}

table {
  border-bottom: 2px solid;
  border-top: 2px solid;
}

.nav {
  display: inline-block;
  max-width: 20rem;
  vertical-align: top;
  width: 25%;
}

.main {
  display: inline-block;
  margin-left: 2em;
  max-width: 60em;
  width: 60%;
}

.header {
  clear: both;
  display: table;
  margin-bottom: 1rem;
  width: 100%;
  box-shadow: 0px 5px 33px 0px rgba(0, 0, 0, 0.1);
  padding: 0.1rem 0em 0.2rem 0em;
  border-bottom: 1px solid lightgray;
}

.header>div {
  display: table-cell;
  vertical-align: middle;
  text-align: center;

}

.header>div+.header>div {
  text-align: center;
}

.sectionlink {
  display: none;
}

:hover>.sectionlink {
  display: inline;
  color: orange;
}

.pagelinks {
  list-style: none;
}

.pagelinks li {
  display: inline-block;
  margin: 1em;
}

.pagelinks>li {
  border: 1px solid lightgray;
  padding: 0.5em 1em;
}

.pagelinks li {
  display: inline-block;
  margin: 1em;
  font-family: "Merriweather";
}

.section-index {
  font-family: "Merriweather";
  list-style: none;
}

.section-index>li {
  margin: 1em;
  padding: 1em;
  border: 1px solid lightgray;
}

.hidden {
  display: none;
}

.menuchoice > span {
  color: brown;
  font-style: italic;
}

.keysym {
  background-color: #f0f0f0;
  border: 1px solid lightgray;
  border-radius: 0.3rem;
  padding: 0.1rem;
  font-style: normal;
  font-weight: bold;
}

.example .keysym {
  background-color: white;
}

@media screen and (max-width: 1000px) {
  .nav {
  width: 100%;
  max-width: 100%;
  border-bottom: 1px solid lightgray;
  box-shadow: 0px 20px 15px -15px rgba(20,20,20,0.1);
}
.header {
  box-shadow: none;
  margin-bottom: 0px;
}
.menu {
  display: inline-block;
  width: auto;
  border: 0px;
  box-shadow: none;
  margin: 0px;
}
.menu + .menu {
  margin-top: 0.2rem;
}
.menu ul {
  display: none;
  position: absolute;
  padding: 1rem;
  box-shadow: 10px 10px 10px rgba(20,20,20,0.2);
  border: 1px solid #808080;
  list-style: none;
}

.menu li:hover ul {
  display: block;
  background: white;
}

.social {
  display: block;
}

.social > div {
  display: inline-block;
  margin-right: 0.2em;
}

.social div img {
  vertical-align: inherit !important;
}

.main {
 width: auto;
 max-width: 95%;
 margin: 0.5rem;
 }
 .header {
    display: block;
  }
  .header span {
    display: inline;
  }
  .pagelinks li {
    margin: 0.5rem;
  }
  .header>div {
    display: inline-block;
    vertical-align: middle;
    width: 32%
  }
  .header>div+.header>div {
    text-align: center;
  }
}

@media screen and (max-width: 600px) {
  .header {
    box-shadow: none;
    margin-bottom: 0px;
    padding: 0px;
  }
  .header > div:first-child {
    padding: 0px;
  }
  .nav {
    display: block;
    width: 100%;
    max-width: 100%;
    border-bottom: 1px solid lightgray;
    box-shadow: 0px 15px 10px -10px rgba(20,20,20,0.1);
  }
  .menu {
    box-shadow: none;
    display: block;
    border: 0px;
    padding: 0.2rem 0.5rem;
    margin: 0.2rem 0.5rem;
  }
  .menu + .menu {
    margin-top: 0.2rem;
    border-top: 1px solid orange;
  }
  .main {
    display: block;
    width: 95%;
    max-width: 95%;
    margin-left: 0.5em;
  }
  .section-index, pagelinks {
    padding-left: 0px;
    margin-left: 0px;
  }
  figure {
    margin: 1em 0px;
  }
  .properties {
    margin: 1rem 0px;
  }
  .property .name, 
  .property .description,
  .property .required {
    display: block;
    width: 100%;
    /* lose the padding applied for wider screens */
    padding: 0;
  }
  .property .required {
    border-bottom: 1px solid #ddd;
  }
  .property .required::before {
    content: 'R: ';
  }
  .property .name::before {
    content: 'N: ';
  }
  .property .description::before {
    content: 'D: ';
  }
  .header {
    display: block;
  }
  .header span {
    display: inline;
  }
  .pagelinks li {
    margin: 0.5rem;
  }
  .header>div {
    display: inline-block;
    vertical-align: middle;
    width: 47%
  }
  .header>div+.header>div {
    text-align: center;
  }
  .menu ul {
    display: none;
    position: relative;
    box-shadow: none;
    border: 0px;
    padding: 0.1rem 1rem;
  }
  .menu li:hover>ul {
    display: block;
  }
  .section-index ul {
    display: none;
  }
  .section-index li:hover>ul {
    display: block;
  }
  .subsection {
    padding: 0.3rem;
    margin: 0.1rem;
  }
  .header > .twitter {
   width: 100%;
   text-align: center;
  }
  .header > .twitter > div {
    display: inline;
    width: 50%;
  }
  .header > .banner {
    width: 100%;
    text-align: center;
  }

  .share-links li, .social-media-links li {
    margin-right: 0.5rem;
  }
}

@media print {
  .nav, .header, .footer, .pagelinks, .go-top, .social-media, .share-links {
    display: none;
  }

  #content {
    display: block;
    width: 70rem;
    max-width: 70rem;
  }

  .section pre, .source {
    background-color: none;
    color: brown;
  }

  .menu, figure > a > img, .screenshot > a > img, .section-index > li {
    box-shadow: none;
  }

  .section-index {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
  }

  .section-index > li {
    border: none;
  }
}