/*
Copyright (c) 2017, 2018 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 http://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
 The project website pages cannot be redistributed 
 */


/*** GLOBAL CSS ***/
body {
  background-color: #36354f;           /* blue - dark */
  background-color: #404040;
  /* background-image: url("../assets/bg-d.png"); */
  background-image: url("../assets/bg-d.png");
  color: #4c4c4c;                      /* gray - dark */
}


.first-word {
  color: #4c91b1;  /* teal */
  color: #3f7b96;  /* teal - dark */
  color: #bc4321;                      /* orange - dark */
  color: #404040;                      /* dark gray */
  float: left;
  font-size: 2rem;
  line-height: 1.7rem;
}
span.first-word {
  padding: 0.3rem 2rem 0 0;
}

h3 {
  color: #4c91b1;  /* teal */
  color: #3f7b96;  /* teal - dark */
  color: #404040;                      /* dark gray */
  float: left;
  font-size: 2rem;
  line-height: 1.7rem;
  padding: 0 0 1.2rem 0;
  margin-bottom:1rem;
}
h4 {
  color: #4c91b1;  /* teal */
  color: #3f7b96;  /* teal - dark */
  color: #404040;                      /* dark gray */
  float: left;
  font-size: 1.3rem;
  line-height: 1.7rem;
  padding: 0 0 0rem 0;
  margin-bottom:1rem;
}

.fa {
  font-size: 1.5rem;
  vertical-align: text-top;
  margin-left: .3rem;
}

h1, h2, h3, h4, button, input, optgroup, select, textarea {
  font-weight: 300;
}

.no-wrap {
  white-space: nowrap;
}


/*** LINKS ***/
a, a:active, a:visited {
  color: #bc4321;                      /* orange - dark */
  color: #af6e3d;                      /* dark orange - Eclipse link: visited*/
  text-decoration: none;
}

a.dark-link, a.dark-link:active, a.dark-link:visited {
  color: #af6e3d;                      /* dark orange - Eclipse link: visited */
}
a.dark-link:hover {
  color: #ff5424;                      /* orange - bright */
  color: #da7a08;                      /* orange - Eclipse button: hover */
}

a:hover {
  color: #ff5424;                      /* orange - bright */
  color: #da7a08;                      /* orange - Eclipse button: hover */
}


/*** BUTTONS ***/
a.button, a.button:active, a.button:visited, a.button:hover {
  color: #efefef;                      /* gray - light */
  padding: 1rem 2rem;
  display: inline-block;
  opacity: 1;
  text-decoration: none;

  border-radius: 10rem;
  margin: 0.5rem;
  font-size: 1.2rem;
}

a.button.internal-button {
  color: #fff;                         /* white */
  background-color: #49486b;           /* blue - mid */
  background-color: #da7a08;           /* orange - Eclipse cookie compatible */
  text-align: center;
  min-height: 1.6rem;
  box-sizing: border-box;
  width: 100%;
  margin: .1rem 0;
  padding: 1rem;
}
a.button.internal-button:hover {
  background-color: #5c5b92;           /* blue - mid */
  background-color: #ffa02e;           /* orange - Eclipse cookie compatible - hover*/
}

a.button.external-button {
  color: #fff;                         /* white */
  background-color: #da7a08;           /* orange - Eclipse cookie compatible */
  text-align: center;
  min-height: 1.6rem;
  box-sizing: border-box;
  width: 100%;
  margin: .1rem 0;
  padding: 1rem;
}
a.button.external-button:hover {
  background-color: #ff5424;           /* orange - bright */
  background-color: #ffa02e;           /* orange - Eclipse cookie compatible - hover*/
}

a.button.external-button.left-half {
  border-top-right-radius: 0rem;
  border-bottom-right-radius: 0rem;
  margin-right: 0.1rem;
  width: 29%;
}

a.button.external-button.right-half {
  border-top-left-radius: 0rem;
  border-bottom-left-radius: 0rem;
  margin-left: 0.1rem;
  width: 69%;
}

/*** FIGURE ***/



/*** TITLE BAR ***/
div#main-title {
  display: flex;
  justify-content: space-between;
  padding: 1.5rem 0rem 1rem 0rem;
  color: #efefef;                      /* gray - light */
}

div#main-title .nav {
  display: flex;  
  justify-content: flex-start;
  align-items: center;
  color: #aaa;
  margin-left: 2rem;
  width: 3rem;
}
div#main-title .nav p {
	font-size: 1.1rem;
}
div#main-title .nav a.nav-item {
  color: #3f7b96;
  color: #4c91b1;
  color: #65c1bd; /* cyan - OpenJ9 logo */
}
div#main-title .nav a.nav-item:hover {
  color: #ff5424;                      /* orange - bright */
  color: #da7a08;                      /* orange - Eclipse button: hover */
  color: #f7941e;                      /* orange - Eclipse button */
  color: #ffa02e;                      /* orange - Eclipse cookie compatible - hover*/
}
div#main-title .nav .fa {
  font-size: 2rem;
}
div#main-title .nav-content .fa {
  font-size: 1.1rem;
	padding: 0 .5rem 0 0;
}
.nav-content {
  display: none;
  position: absolute;
  align-self: flex-start;
  min-width: 5rem;
  margin: 0 0 0 -1rem;
  padding: 1rem 1rem;
  z-index: 1;
  background-color: #443f5c;           /* blue - dark */
  background-color: #353434;           /* dark grey - Eclipse background */

  border: 1px solid #302d42;           /* blue - very dark */
  border: 1px solid #000;
  box-shadow: .5rem .5rem 1rem rgba(0,0,0,0.5);
}
.nav:hover .nav-content {
    display: block;
}

div#main-title .title {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
} 
/* div#main-title .title #title_icon {
  height: 4rem;
}
 */
.title_icon {
  height: 4rem;
  padding: 0 .4rem 0 .4rem;
}

div#main-title .egg {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 3rem;
  margin-right: 2rem;
}
.egg img {
  height: 3rem;
}







/*** MAIN CONTENT ***/

main {
  background-color: #fbfbfb;           /* gray - very light */
  margin: auto;
}

p {
  margin: 0;
  padding: 0rem 0rem .5rem 0rem;
  line-height: 1.8rem;
}
ol {
  margin: 0;
  padding: 0rem 0rem .5rem 1rem;
  line-height: 1.8rem;
}
ol li {
  color: #3f7b96;                      /* cyan */
}

ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
}

ul li {
  line-height:1.5rem;
  padding-left: 1.8rem;
  text-indent: -1.8rem;
}

ul li::before {
  content: "\25FC";
  padding-right:1rem;
  color: #3f7b96;                      /* cyan */
  color: #aaa;                         /* light gray */
}

li > ul li::before {
  content: "\25FB";
  padding-right:1rem;
  color: #3f7b96;                      /* cyan */
}


pre {
  margin:  0rem 0rem 1rem 0rem;
  padding: 0rem 0rem 0rem .6rem;
  line-height: 1.3rem;
/*  border-left: 10px solid #efefef;     /* gray - light */
}
pre code::before {
  content: ">";
  padding-right:.5rem;
  color: #3f7b96;                      /* cyan */
  color: #aaa;                         /* light gray */
  font-weight: 800;
}

.cmd {
/*
  text-indent: -2rem;
  padding-left: 2rem;
*/
}

pre.output {
  padding: .5rem;
  font-size: .8rem;
  background-color: #eee;
  border: 1px solid gray;
  width:90%;
  overflow-x:scroll;
}

/*** INTRO ***/
#intro-block h1 {
  font-size: 2rem;
}

h2 {
  line-height: 1.5;
  font-size: 1.6rem;
  font-weight; 600;
  margin-top: 2.5rem;
}

#intro-block {
  max-width: 45rem;
  max-width: 55rem;
  padding: 1rem 0rem 3rem 0rem;
  margin: auto;
  text-align: center;
}

/*
#intro-block p {
  font-size: 1.2rem;
}
*/

.product-logo {
  width:180px;
  float:left;
  padding-right:2rem;
  margin-left: -200px;
}


/*** READ MORE ***/
main div#intro-block div#read-more-button {
  margin-top: 2rem;
  cursor: pointer;
  line-height: 1.4rem;
  font-size: 1.2rem;
  display: inline-block;
  text-align: center;
  font-style: italic;
  font-weight: bold;
  color: #5c5b92;                      /* blue - light */
  color: #404040; 
}
.read-more-link {
  line-height: 1.4rem;
  font-size: 1.2rem;
  display: inline-block;
  font-style: italic;
  font-weight: bold;
  color: #5c5b92;                      /* blue - light */
  color: #404040; 
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

main div#intro-block div#read-more-button i {
  vertical-align:middle;
  margin-left: 0.2rem;
  transition-property: transform;
  font-size:2.5rem;
  color: #49486b;                      /* blue - mid */
  color: #404040;
  color: #da7a08;                      /* orange - Eclipse cookie compatible */
}

main div#intro-block div#read-more-button i:hover {
  color: #5c5b92;                      /* blue - light */
  color: #ffa02e;                      /* orange - Eclipse cookie compatible - hover*/
}

#read-more-text {
  transition-duration: .5s;
  transition-property: max-height;
  overflow-y: hidden;
  height: 100%;
  text-align: left;
  padding: 2rem 2rem 0rem 2rem;
}

#read-more-text.closed {
  display: none;
  transition-duration: .5s;
}

.rotate45 { /* see app.js */
  transform: rotate(45deg);
  transition-duration: .1s;
}


main div.home-button-row {
  margin-top: 1.5rem;
  text-align: center;
}


/*** CONTENT ***/

#main-content {
	align-items: center;
}

div.section-content {
  padding-bottom: 3rem;
  align-items: center;
}

div.section-content h1 {
  background-color: #3f7b96;           /* cyan */
  background-color: #ddd;
  /* background-image: url("../assets/bg-l.png"); */
  /* background-image: url("../assets/bg-lg.png"); */
  color: #efefef;                      /* gray - light */
  color: #404040;
  padding: 1.5rem;
  margin: 0;
  text-align:center;
}

.intro-text {
  font-size:1.5rem;
  font-size: 1.6rem;
  padding:2rem 2rem 1rem 2rem ;
  padding:2rem 5rem 1.5rem 5rem ;
  color: #3f7b96;                      /* cyan */
  color: #404040;
  color: #c3751a;                      /* orange - brightish */
  color: #69c1bd;                      /* cyan - ... */
  color: #404040;
  text-align:center;
}
.intro-text1 {
  font-size:1.3rem;
  padding-bottom: 2rem;
  padding: 0 5rem 2rem 5rem;
  color: #407471;                      /*cyan - dark */
  color: #3f7b96;                      /* cyan */
  color: #404040;
  text-align:center;
}

div#get-started p, div#contributing p, div#build p, div.section-content p, div#faq p, div#resources p, div#whatsnew p {
  font-size:1rem;
  display: inline-block;
}
div#performance p, div#whatsnew p {
  display: inline-block;
}
div#get-started p  { max-width: 45rem; }
div#contributing p { max-width: 35rem; }
div#build p        { width: 100%;      }
div#faq p          { max-width: 35rem; }
div#resources p    { max-width: 45rem; }
div#performance p  { width: 100%;      }
div#whatsnew p     { width: 100%;      }

.f-section-item {
	display: flex;
  flex-wrap: wrap;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
/*
  border: 2px solid yellow;
  margin: .1rem;
*/
}

#whatsnew .f-content-container {
  margin-bottom: 1rem;
  background-color: #eee;
  border:1px solid #aaa;
}
#whatsnew h3 {
  font-size: 1.6rem;
  -webkit-margin-before: .6rem;
  -webkit-margin-after: .2rem;
  padding: 0 0 0 0;
}

#get-started .f-section-item {
  margin-bottom: 3rem;
}

#contributing .f-section-item {
  margin-bottom: 2rem;
}


.f-content-container {
	max-width: 45rem;
  padding: 0rem 1rem;
  font-size:1rem;
  color: #4c4c4c;                      /* gray - dark */
/*
  border: 2px solid magenta;
  margin: .1rem;
*/
}
#build .f-content-container, {
  max-width: 55rem;
  flex: 1;
  min-width: 0
}



.f-button-container {
	display: flex;
  flex-wrap: wrap;
	width: 17rem;
/*
border: 2px solid blue;
  margin: .1rem;
*/
}

div#contributing .f-button-container {
	width: 16rem;
  padding: 0 .2rem;
}

.toc li{
  line-height: 1.8rem;
  font-size:1.2rem;
}

/*** FAQ ***/

div#faq {
  background-color: #fbfbfb;           /* gray - very light */
  margin: auto;
  padding-bottom: 3rem;
}

div.section-item-faq {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  max-width: 52rem;
  color: #4c4c4c;
  color: black;
  padding: 0rem 2rem;
  align-items: left;
  margin: 0 auto;
}

div.section-item-faq details {
  text-justify:left;
  margin-bottom: 0.5rem;
}
div.section-item-faq details:hover {
}

div.section-item-faq details summary {
  outline:0;
  border:none;
  -moz-outline-style: none;
  cursor: pointer;
  margin-top: .5rem;
  font-size: 1.2rem;
  color: #3f7b96;                      /* cyan */
  color: #af6e3d;                      /* dark orange - Eclipse link: visited*/
  font-weight: bold;
  padding-left: 1.2rem;
  text-indent: -1.2rem;
}

div.section-item-faq details summary:hover {
  color: #da7a08;                      /* orange - Eclipse button: hover */
}



div.section-item-faq details p {
  max-width: 99rem;
  margin: 0.5rem 0 0 1.2rem;
  display: inline-block;
}

div.section-item-faq details p:last-child {
  padding-bottom: 1.5rem;
}

.stack {
  background-color:#e1ecf4;            /* stack overflow tile blue */
  padding:.1rem .3rem;
}

/*** RESOURCES ***/
#resources li {
	margin-bottom:1rem;
}
#resources li > ul li {
  margin-bottom:0rem;
}
#resources li i {
	margin-right: .5rem;
}


/*** FOOTER ***/
footer {
  background-color: #efefef;           /* gray - light */
  background-color: #ddd;
  /* background-image: url("../assets/bg-lg.png"); */
  color: #4c4c4c;                      /* gray - dark */
  padding: 1rem;
  text-align: center;
}

.social-icon {
  margin: 0.5rem 0.5rem 0rem 0.5rem;
  display: inline-block;
  text-align: center;
  color: #af6e3d;                      /* dark orange - Eclipse link: visited */
}

.social-icon .fa {
  /* filter: brightness(0); */
  margin: 0 auto;
  color: #af6e3d;                      /* dark orange - Eclipse link: visited */
  opacity: 1;
  transition-duration: 0.2s;
  border 1px solid red;
}



.social-icon .fa:hover {
  /* filter: brightness(1); */
  opacity: 1;
  color: #ff5424;                      /* orange */
  color: #c3751a;                      /* orange - brightish */
  color: #da7a08;                      /* orange - Eclipse button: hover */
}

.fa-chevron-circle-right {
	padding: 0 .5rem 0 1rem;
}













.figures {
  display: -webkit-flex; /* Safari */
  -webkit-flex-wrap: wrap; /* Safari 6.1+ */
  display: flex;   
  flex-wrap: wrap;
  justify-content: center;
  align-items: top;
  text-align: center;
}

.figure {
  width: 15rem;
  padding: 0 3rem;
}

.box {
  width: 16rem;
  margin: 0 auto;
  text-align: center;
  /*border:1px solid #ff5424;*/
}
.box:hover {
  box-shadow: 0px 0px 10px #f7941e;
}

.pop span {
    display: none
}
.pop:hover span {
    display: block;
    padding: .5rem .5rem .5rem .5rem;
    color: white;
    background: #f7941e;
    left: 0px;
    position: absolute;
    top: -6rem;
    left: 4rem;
    z-index: 2;
      cursor: pointer;
  border-radius: 2rem;

}

.pop {
  cursor: pointer;
  width: 50rem;
  position: relative;
}
.pop img {
  width: 16rem;
}

.pop-box {
  visibility: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100vw;
  transition: opacity 500ms;
  opacity: 1;
	background-color: #efefef;           /* gray - light */
	color: #4c4c4c;                      /* gray - dark */
  box-shadow: 10px 10px 50px rgba(0,0,0,0.5);
  z-index: 5;
}
.pop-box:target {
  visibility: visible;
}

.pop-box .close {
  position: absolute;
  top: 0rem;
  right: 1rem;
  font-size: 3rem;
  transition: all 200ms;
  font-weight: bold;
  color: #f7941e;
}
.pop-box .close:hover {
  color: #da7a08;
}

.pop-box img {
  max-width: 100%;
}

.caption1 { 
  width: 16rem;
  text-align:center;
  font-style: italic;
  line-height: 1.1rem;
  font-size: 1rem;
	color: #4c4c4c;                      /* gray - dark */
	padding: .5rem 0rem 1rem 0rem;
}
.caption2 { 
  max-width: 100%;
  text-align:center;
  font-style: italic;
  line-height: 1.1rem;
  font-size: .9rem;
	color: #4c4c4c;                      /* gray - dark */
	padding-top: .5rem;
}
@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .pop{
    width: 70%;
  }
}

/* Version tabs */

.tabs_bg {
  background-color: #407471;           /*cyan - dark */
  background-color: #ddd;
  /* background-image: url("assets/bg-l.png"); */
  /* background-image: url("../assets/bg-lg.png"); */
}
section {
  background-color: #fff;
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #000;
  box-shadow: 0px -2px 12px 0px #999;
}
input {
  display: none;
}
label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 10px 25px 10px 25px;
  font-weight: 600;
  text-align: center;
  color: #aaa;
  color: #fff;
  border: 1px solid transparent;
  border-bottom: 1px solid #000;
}
label:hover {
  color: #fff;
  cursor: pointer;
  background-color: #ffa02e;                      /* orange - Eclipse cookie compatible - hover*/
}
input + label {
  background-color: #f7941e;                      /* orange - Eclipse home page compatible */
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
/*
  box-shadow: 4px -4px 5px 0px #2f5d72,  inset 0px -5px 5px 0px #4c91b1;
  box-shadow: 4px -4px 5px 0px #999,  inset 0px -5px 5px 0px #f7941e;
*/
  box-shadow: 2px -2px 8px 0px #999;
}


input:checked + label {
  color: #3f7b96;                      /* cyan */
  color: #404040;
  background-color: #fff;
  border: 1px solid black;
  border-bottom: 1px solid #fff;
  box-shadow: 4px -2px 4px 0px #999;
}

#tab8:checked ~ #content8,
#tab9:checked ~ #content9,
#tab10:checked ~ #content10,
#tab11:checked ~ #content11,
#tab12:checked ~ #content12 {
  display: block;
}

/* End: Version tabs */