stylesheets/oj9.css

/*
* Copyright (c) 2017, 2020 IBM Corp. and others
*
* This program and the accompanying materials are made
* available under the terms of the Eclipse Public License 2.0
* which accompanies this distribution and is available at
* https://www.eclipse.org/legal/epl-2.0/ or the Apache
* License, Version 2.0 which accompanies this distribution and
* is available at https://www.apache.org/licenses/LICENSE-2.0.
*
* This Source Code may also be made available under the
* following Secondary Licenses when the conditions for such
* availability set forth in the Eclipse Public License, v. 2.0
* are satisfied: GNU General Public License, version 2 with
* the GNU Classpath Exception [1] and GNU General Public
* License, version 2 with the OpenJDK Assembly Exception [2].
*
* [1] https://www.gnu.org/software/classpath/license.html
* [2] http://openjdk.java.net/legal/assembly-exception.html
*
* SPDX-License-Identifier: EPL-2.0 OR Apache-2.0 OR GPL-2.0 WITH
* Classpath-exception-2.0 OR LicenseRef-GPL-2.0 WITH Assembly-exception
*/



[data-md-color-primary=cyan] .md-header {
  height: 4rem;
  padding-top: 1rem;
  background-color: #434343;
}

[data-md-color-primary=cyan] .md-typeset a {
  padding-right: 0rem;
  color: #af6e3d;                      /* dark orange - Eclipse link: visited */
}


[data-md-color-primary=cyan] a.md-icon {
  color: white;
  padding-right: 1.5rem;
  padding-left: 2rem;
}


[data-md-color-primary=cyan] .md-typeset a:hover {
  color: #da7a08;                      /* orange - Eclipse button: hover */
}

/*
[data-md-color-accent=cyan] .md-nav__link:focus, 
[data-md-color-accent=cyan] .md-nav__link:hover, 
[data-md-color-accent=cyan] .md-typeset .footnote li:hover .footnote-backref:hover, 
[data-md-color-accent=cyan] .md-typeset .footnote li:target .footnote-backref, 
[data-md-color-accent=cyan] .md-typeset [id] .headerlink:focus, 
[data-md-color-accent=cyan] .md-typeset [id]:hover .headerlink:hover, 
[data-md-color-accent=cyan] .md-typeset [id]:target .headerlink,
*/
[data-md-color-accent=cyan] .md-typeset .md-clipboard:active:before, 
[data-md-color-accent=cyan] .md-typeset .md-clipboard:hover:before {
  color: #da7a08;                      /* orange - Eclipse button: hover */
}

[data-md-color-primary=cyan] .md-nav__item--active>.md-nav__link, [data-md-color-primary=teal] .md-nav__link:active {
  color: #af6e3d;                      /* dark orange - Eclipse link: visited */
}

[data-md-color-primary=cyan] .md-nav__item--active>.md-nav__link:hover, [data-md-color-primary=teal] .md-nav__link:hover {
  color: #da7a08;                      /* orange - Eclipse button: hover */
}

.md-flex__ellipsis, .md-footer-nav__button {
  color: #af6e3d;                      /* dark orange - Eclipse link: visited */
}
.md-flex__ellipsis:hover, .md-footer-nav__button:hover {
  color: #da7a08;                      /* orange - Eclipse button: hover */
}
.md-footer-nav__link:hover {
    opacity: 1;
}

@media only screen and (max-width: 76.1875em) {

  html [data-md-color-primary=cyan] .md-nav--primary .md-nav__title--site {
      background-color: #353434;
  }

  [data-md-color-primary=cyan] .md-nav__source {
    background-color: #69c1bd;  /* cyan */
  }
}

@media only screen and (min-width: 60em) {
  [data-md-color-primary=cyan] .md-nav--secondary {
    border-left: .4rem solid #888888;
  }
}

.md-logo {
  text-align: center;
}
.md-logo img {
  width: 100px;
  /*margin-left:32rem;*/
}

.md-sidebar__scrollwrap::-webkit-scrollbar {
  width: .8rem;
}

[data-md-color-accent=cyan] .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover {
  background-color: #69c1bd;  /* cyan */
}


.md-typeset h1 {
/*  background: #69c1bd url(../cr/bg-l.png);  */
  background: #888888;
  color: white;
  padding-left: 1rem;
  font-weight: 500;
}
.md-typeset h1 code {
  padding-left: 0;
  color: white;
}
.md-typeset h1[id]:before {
  margin-top: 0;
  padding-top: 0;
    content: "";
}

.md-typeset h2, .md-typeset h3, .md-typeset h4, .md-typeset h5, .md-typeset h6 {
  color: #4c4c4c;  /* gray - dark */
}
.md-typeset h2 code, .md-typeset h3 code, .md-typeset h4 code, .md-typeset h5 code, .md-typeset h6 code {
  color: #4c4c4c;  /* gray - dark */
}
.md-typeset h2 {
  font-weight: 500;
  font-weight: 600;
}
.md-typeset h3 {
  font-weight: 600;
}
.md-typeset h3 code {
  font-size: 0.95rem;
}

.md-nav__title {
  color: #69c1bd;
}

/*
.md-footer-nav__inner.md-grid img {
height 3rem;
}
*/
.md-footer-nav__inner.md-grid {
margin-top: 5rem;
}

/* HEADER */

.md-header {
  height: 2.4rem;
  padding: .15rem 0rem 2.5rem 0rem;
}

/* Logo in the header - container */
.md-header-nav__button {
  padding-left: 1rem;
  margin: 0;
  position: absolute;
}

.egg {
  height: 2rem;
  transition: opacity .4s;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.egg:hover {
  opacity: .7;
  transition: opacity .4s;
}



/* LH NAV */

/* Add a > twisty symbol as a pseudo-element before every parent item in the TOC */
.md-nav__item--nested>.md-nav__link:before {
  content: "➤";
  color: #69c1bd;  /* cyan */
}

/* Remove the original twisty symbol */
.md-nav__item--nested>.md-nav__link:after {
  content: "";
}

.md-nav__item--nested .md-nav__toggle:checked~.md-nav__link:before {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.js .md-nav__item--nested>.md-nav__link:before {
  -webkit-transition: -webkit-transform .4s;
  transition: transform .4s, -webkit-transform .4s;
  display: inline-block;
}


/* RH NAV */

[data-md-color-accent=cyan] .md-nav__link:hover {
  color: #da7a08;                      /* orange - Eclipse button: hover */
}
/*
[data-md-color-accent=cyan] .md-nav__link {
  color: #B63814;  /* orange - dull
}
*/

@media only screen and (min-width: 76.25em) {
  .md-sidebar__inner {
    border-right: .1rem solid rgba(0,0,0,.1);
  }
}

/* FOOTER CSS */

.md-footer-meta {
  color: white;
  background-color: #434343;
  z-index: 1000;
  padding: 1rem;
  padding-bottom: 0;
/*   background-image: url(../cr/bg-lg.png); */
}

.md-flex__ellipsis {
  font-size: initial;
}

/* DRAFT COMMENTS */

aside {
  background-color: #ddffee;
  padding: 0 0 .15rem 0;
  margin: 0 0 0 0;
}
aside p {
  padding: 0rem .4rem 0rem 0.5rem;
  font-size: 0.65rem;
  }
aside p:first-child {
  padding: .3rem .4rem .3rem 0.5rem;
  background-color: #bbffcc;
  font-size: 0.75rem;
  font-weight: bold;
}

.fa-pencil-square-o, .fa-external-link {
  color: #69c1bd;  /* cyan */
}


/* TABLES */

.md-typeset table:not([class]) th {
  min-width: 5rem;
  padding: .2rem 0.8rem;
  background-color: #888888;
  color: #fff;
  vertical-align: top;
}

.md-typeset table:not([class]) th code {
  color: #fff;
  background-color: #888888;
  box-shadow: none;
}

.md-typeset table:not([class]) td {
  padding: .25rem 0.8rem;
  border-top: .05rem solid rgba(0,0,0,.07);
  vertical-align: top;
}

/* CHECK MARKS (tick and cross) */

.fa-check {  
  color: #407471;  /* cyan - dark */
  opacity: 0.8;
}

.fa-times {  
  color: #744043;  /* red - dark */
  opacity: 0.8;
}

/* Stop code wrapping except in a list items */
code {
  white-space: pre;
}
li code {
  white-space: pre-wrap;
}

/* Hide H4 and below in secondary sidebar
(use "Inspect > Copy > Copy selector" to find correct selector! */
body > div > main > div > div.md-sidebar.md-sidebar--secondary > div > div > nav > ul > li:nth-child(2) > nav > ul > li:nth-child(1) > nav > ul > li {
	display: none;
}

/* Just tweak in-line icons a bit! */
img {
	vertical-align: -.1rem;
}

.md-nav__item, .md-nav__link {
	white-space: nowrap;
}

.md-content__icon, .md-footer-nav__button, .md-header-nav__button, .md-nav__button, .md-nav__title:before, .md-search-result__article--document:before {
  padding: .2rem;
}

.md-sidebar__inner {
  margin-top: 2rem;
}

.md-container {
  margin-top: 0.5rem;
}


.md-source {
  width: inherit;
}

@media only screen and (min-width: 60em) {
  .md-source {
    margin-left: 4rem;
  }
}

.md-search__icon[for=__search]:before {
  margin-left: 5rem;
}

@media only screen and (min-width: 60em) {
  .md-search__input {
    margin-left: 5rem;
  }
}

.fa-chevron-circle-right:before {
  color: white;
}

.footer {
  display: "flex";
  background-color: "#434343";
  color: "white";
  flex-wrap: "wrap";
}

.horizontal-line{
  height: 2px;
  background-color: var(--theme-ui-colors-secondary,#5DA7A3);
  width: 100%;
  padding: 0 2.5rem 0 2.5rem;
}

.below-line {
  display: flex;
  flex: 80%;
  justify-content: flex-start;
}

.below-line-links {
  padding: 1rem 0.35rem;
  font-size: 0.8rem;
  padding-bottom: 0;
}

.below-line-social-media-icons {
  display: flex;
  flex: 20%;
  justify-content: flex-end;
}

.social-media-link {
  margin: 1rem 0.7rem;
}

.above-line {
  display: flex;
  flex: 80%;
  justify-content: flex-start;
}

.above-line-links {
  display: flex;
  flex-direction: row;
}

.column {
  display: flex;
  flex-direction: column;
  padding: 1rem 0.5rem;
  padding-right: 5rem;
  font-size: 0.8rem;
}

.column h3 {
  font-size: 0.9rem;
  margin: 0;
}

.column-incubator h3 {
  font-size: 0.9rem;
  margin: 0;
  margin-bottom: 1rem ;
}

.column-incubator {
  display: flex;
  flex: 20%;
  justify-content: flex-end;
  padding: 1rem 0;
}

.arrange-column {
  display: flex;
  flex-direction: column;
}

.incubator-image {
  margin-left: calc(100% - 2.5rem);
}

.footer-link {
  padding: 0.1rem 0;
}

@media only screen and (max-width: 1040px), (min-device-width: 768px) and (max-device-width: 1024px) { 
  .column-incubator h3 {
    font-size: 0.8rem;
  }
  
  .column h3 {
    font-size: 0.8rem;
  }

  .column {
    font-size: 0.7rem;
    padding-right: 1rem;
  }

  .below-line-links {
    font-size: 0.65rem;
  }
}

@media only screen and (max-width: 767px) {
  .above-line {
    display: flex;
    flex:"100%";
    flex-direction: column-reverse;
    justify-content: center;
  }

  .above-line-links {
    display: flex;
    flex-direction: column;
  }

  .below-line {
    display: flex;
    flex:"100%";
    flex-direction: column;
    justify-content: center;
  }

  .column-incubator {
    display: flex;
    flex: 100%;
    justify-content: center;
    padding: 1rem 0;
  }

  .incubator-image {
    margin-left: 0;
    margin-bottom: 1rem;
  }

  .arrange-column {
    align-items: center;
    display: flex;
    flex-direction: column-reverse;
  }

  .below-line-social-media-icons {
    display: flex;
    flex: 20%;
    justify-content: center;
  }

  .column h3 {
    font-size: 1rem;
  }

  .column a {
    font-size: 0.8rem;
  }
}

.footer a:hover {
  color: #5DA7A3;
}