@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');@import url('https://fonts.googleapis.com/css?family=Istok+Web');@import url('https://fonts.googleapis.com/css?family=Quattrocento');
/* GiveCredit */
.give-credit {
  color: #555;
  font-style: italic;
  font-size: 0.8em;
}
/* Assumption */
.assumption {
  display: grid;
  grid-template-columns: 200px 1fr;
  margin: 1em 0;
}
.assumption H4 {
  
  align-self: stretch;
  font-weight: normal;
  background-color: #222;
  color: white;
  margin: 0;
  padding: 1em 10px;
}
.assumption > P {
  padding-left: 10px;
  background-color: #eee;
  margin: 0;
  padding: 1em 10px;
}

@media (max-width: 500px) {
  .assumption {
    display: grid;
    grid-template-columns: 1fr;
    margin: 1em 0;
  }
}
/* Can Do Can't Do */
.can-do-cant-do {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 1em;
  margin: 1em 0;
}
.can-do-cant-do H4 {
  grid-row: 1 /2;
  margin: 0;
  padding: 0 10px;
  background-color: #222;
  color: white;
  text-align: center;
  text-shadow: 0 0 3px rgba( 0,0,0,0.3 );
}
.can-do-cant-do H4.left {
  background-color: rgb(104,181,104);
}
.can-do-cant-do H4.right {
  background-color: rgb(204,108,108);
}
.can-do-cant-do div.left, .can-do-cant-do div.right {
  padding: 0 10px;
  background-color: #f5f4f4;
}
.can-do-cant-do .left {
	grid-column: 1 / 2;
}
.can-do-cant-do .right {
  grid-column: 2 / 3;
}

@media ( max-width: 580px ) {
  .can-do-cant-do {
    grid-template-columns: 1fr;
    grid-column-gap: 0;
  }
  .can-do-cant-do H4 {
	grid-row: auto;
	text-align: left;
  }
  .can-do-cant-do .left {
	grid-column: auto;
  }
  .can-do-cant-do .right {
    grid-column: auto;
  }
}
/* DocsPage */
body.docs-page {
  margin: 0;
  padding: 0;
  font-family: 'Quattrocento', serif;
  line-height: 1.4;
  
  --docs-title-font: 'Istok Web', sans-serif;
  --title-color: rgb(0,79,100);
  --title-highlight-color: rgb(217,209,112);
}
body.docs-page header {
  max-width: 800px;
  padding: 0 10px;
  margin: 1em auto;
  color: #555;
  font-family: 'Istok Web', sans-serif;
}
body.docs-page header A {
  text-decoration: none;
  color: inherit;
}
body.docs-page header A:hover {
  text-decoration: underline;
}
body.docs-page H1 {
  font-family: var(--docs-title-font);
  color: var(--title-color);
  border-bottom: 4px solid var(--title-highlight-color); ;
}
body.docs-page article {
  max-width: 700px;
  padding: 0 10px;
  margin: 0 auto;
  
  font-size: 20px;
}
body.docs-page footer {
  text-align: center;
  margin: 2em 0 0 0;
  padding: 2em 0 16em;;
  background-color: #eee;
  color: #999;
}
/* DocsVideo */
.docs-video VIDEO {
  width: 100%;
  box-shadow: 0 0 20px rgba( 0,0,0,0.2 );
}
.docs-video P {
  margin-top: 0;
  font-style: italic;
  color: #666;
  _text-align: right;
}
/* Heading-2 */
H2.docs {
  font-family: var(--docs-title-font);
  position: relative;
  color: var( --title-color );
}
H2.docs:after {
  content: ' ';
  position: absolute;
  width: 40px;
  height: 4px;
  background-color: var(--title-highlight-color);
  left: 0;
  bottom: -4px;
}
/* Heading-3 */
H3.docs {
  font-family: var(--docs-title-font);
  color: var( --title-color );
  margin: 1em 0 0.5em;
}
/* Note */
.docs-note {
  background: linear-gradient( to right, #ffffaa, #fff );
  position: relative;
}
.docs-note:after {
  content: ' ';
  position: absolute;
  top: 0;
  left: -75px;
  height: 100%;
  width: 75px;
  background: linear-gradient( to left, #ffffaa, #fff );
  z-index: -2;
}
.docs-note > .head {
  display: inline-block;
  color: rgb(255,253,241);
  padding: 2px 10px;
  margin-left: -12px;
  margin-right: 10px;
  font-family: var(--docs-title-font);
  font-size: 14px;
  background-color: rgb(168,162,18);
  transform: translate( 0px, -3px) skewY( -12deg ) rotate( 7deg );
}
/* Para */

/* Section */
section.docs-section {
  margin-top: 4em;
  counter-reset: section;
}
section.docs-section H2 {
  font-family: var(--docs-title-font);
  position: relative;
  color: var( --title-color );
}
section.docs-section H2:after {
  content: ' ';
  position: absolute;
  width: 40px;
  height: 4px;
  background-color: var(--title-highlight-color);
  left: 0;
  bottom: -4px;
}
/* Step */
.docs-step {
  display: grid;
  grid-template-columns: [start] 4em [mid] 1fr [end];
  position: relative;
  margin: 1.3em 0;
}
.docs-step .docs-step-number:before {
  counter-increment: section;
  content: counter(section); 
  font-family: var(--docs-title-font);
  color: var(--title-color);
  font-size: 2em;
  font-weight: bold;
  display: block;
}
.docs-step .docs-step-number:after {
  content: ' ';
  position: absolute;
  background-color: #f5f0ea;
  width: 4em;
  height: 2.5em;
  top: 0em;
  left: -1.5em;
  transform: rotateZ( -7deg ) skew(-14deg);
  z-index: -1;
}

@media ( max-width: 600px ) {
  .docs-step {
    grid-template-columns: [start] 1fr [end];
  }
}
/* Step-Image */
.docs-step-image {
  display: grid;
  grid-template-columns: [start] 1fr [mid] 1fr [end];
  grid-column-gap: 1em;
  margin: 1.3em 0;
  position: relative;
}
.docs-step-image .docs-step-number {
  display: block;
}
.docs-step-image .docs-step-number:before {
  counter-increment: section;
  content: counter(section); 
  font-family: var(--docs-title-font);
  color: var(--title-color);
  font-size: 2em;
  font-weight: bold;
}
.docs-step-image .docs-step-number:after {
  content: ' ';
  background-color: var(--title-highlight-color);
  position: absolute;
  background-color: #f5f0ea;
  width: 4em;
  height: 2.5em;
  top: 0em;
  left: -1.5em;
  transform: rotateZ( -7deg ) skew(-14deg);
  z-index: -1;

}
.docs-step-image .text {
  grid-column: start / mid;
}
.docs-step-image > img {
  grid-column: mid / end; 
  _align-self: end;
  min-width: 0;
  width: 100%;
  box-shadow: 0px 0px 5px rgba( 0,0,0, 0.2 );
}

@media (max-width: 600px) {
  .docs-step-image {
    grid-template-columns: [start] 1fr [end];
  }
  .docs-step-image .text {
    grid-column: start / end;
  }
  .docs-step-image > img {
    grid-column: start / end; 
    max-width: 325px;
    justify-self: center;
  }
}
/* UpstreamBug */
.upstream-bug {
  background-color: #e9eebe;
  background: linear-gradient( to right, #f4f7d4, #fff );
  position: relative;
  padding: 5px 10px 1px 10px;
  margin: 1.5em 0;
  border: 3px solid rgb(227,230,215);
  border-radius: 12px;
}
.upstream-bug > img {
  position: absolute;
  width: 70px;
  left: -50px;
  top: -15px;
  transform: rotate( 10deg );
  color: red;
}
.upstream-bug > A {
  color: var( --title-color );
  margin-left: 0px;
}
.upstream-bug > h4 {
  font-family: sans-serif;
  color: rgba(128,35,35,1);
  font-size: 0.8em;
  font-weight: normal;
  margin: 0 0 0 0px;
}

@media (max-width: 740px) {
  .upstream-bug > img {
    width: 70px;
    left: -40px;
    top: -25px;
  }
}
/* circ */
.config-plus {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  vertical-align: middle;
  margin: 0 0 0 0.3em;
  line-height: 1em;
  text-align: center;
  border: 1px solid currentColor;
  border-radius: 50%;
}
/* code */
.docs-code {
  font-family: monospace;
  background-color: rgba(224,224,224,0.61);
  font-size: 18px;
}
/* comment */
.docs-comment {
  background-color: rgb(255,236,182);
  font-style: italic;
  color: rgb(126,97,15);
}
/* hi */
strong.docs-hi {
  font-family: sans-serif;
  font-size: 0.9em;
  font-weight: normal;
  background-color: #d3f2ff;
  color: rgb(45,90,130);
  padding: 0 2px;
}
/* illustration */
.docs-illustration {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.docs-illustration img {
  width: 100%;
  max-width: 400px;
  margin: 1em auto;
}
.docs-illustration figcaption {
  __text-align: center;
  font-style: italic;
  color: #777777;
  max-width:400px;
  margin-left: auto;
  margin-right: auto;
}

@media ( max-width: 400px ) {
  .docs-illustration > img,
    .docs-illustration > figcaption {
      _max-width: none;
  }
}
/* link */

/* adhoc partial */

/* adhoc partial */
body.docs-index {
  margin: 0;
  padding: 0;
  font-family: 'Quattrocento', serif;
  line-height: 1.4;
  overflow-x: hidden;
  
  --docs-title-font: 'Istok Web', sans-serif;
  --title-color: rgb(0,79,100);
  --title-highlight-color: rgb(217,209,112);
}
body.docs-index header {
  max-width: 800px;
  padding: 0 10px;
  margin: 1em auto;
  color: #555;
  font-family: 'Istok Web', sans-serif;
}
body.docs-index header A {
  text-decoration: none;
  color: inherit;
}
body.docs-index header A:hover {
  text-decoration: underline;
}
body.docs-index article {
  max-width: 700px;
  padding: 0 10px;
  margin: 0 auto;
  
  font-size: 20px;
}
body.docs-index footer {
  text-align: center;
  margin: 2em 0 0 0;
  padding: 2em 0 6em;;
  background-color: #eee;
  color: #999;
}
/* adhoc partial */
h1.docs-title {
  font-size: 1.8em;
  text-align: center;
  margin-top: 2em;
}
h1.docs-title > span {
  transform: rotateZ( -7deg ) skew(-14deg);
  
  display: inline-block;
  
  padding: 10px 20px;
  font-family: Istok Web;
  color: white;
  font-weight: normal;
  
  background-color: rgb(76,138,179);
  text-decoration: underline wavy rgba(61,98,173,0.41);
}
.docs-sub-title {
  position: relative;
  margin-left: 50%;
  font-style: italic;
  color: #666666;
  margin-bottom: 2em;
}
.docs-sub-title:before {
  content: '*';
  position: absolute;
  left: -0.5em;
  top: -0.4em;
  font-family: serif;
  font-size: 2em;
  color: #8893a8;
}

@media (max-width: 600px) {
  h1.docs-title {
    font-size: 1.2em;
  }
}
@media (max-width: 400px) {
  .docs-sub-title {
    position: relative;
    margin-left: 30%;
  }
}
/* top-items */
.docs-index-top-head {
  grid-column: 1 / 2;
  font-family: var( --docs-title-font );
  
  background-color: #f5f0ea;
  color: rgb(89,103,143);
  text-decoration: underline double rgba(185,121,3,0.27);
  border: 1px solid #e0d9d0;
  border-left: none;
  border-top: none;

  text-align: center;
  
  font-size: 1.5em;
  font-weight: bold;
   
  transform-origin: 100% 0%;
  transform: rotateZ( -7deg ) skew(-14deg) scale(0.97);
    
  display: flex;
}
.docs-index-top-head span {
  align-self: center;
  margin-left: 40px;
}
.docs-index-top-content {
  grid-column: 2 / 3;
  background-color: #eaecee;
  padding: 10px;
  
  transform: skew(-7deg);
}
.docs-index-top-content DIV {
  transform: skew(7deg);
}

.docs-index-top-action {
  grid-column: 3 / 4;
  font-family: var( --docs-title-font );
  background-color: rgb(73,131,228);
  color: rgb(255,255,255);
  text-align: center;
  
  transform-origin: 0% 100%;
  transform: rotateZ( -7deg ) skew(-14deg) scale(0.97);
    
  display: flex;
  justify-content: space-around;  
  align-items: center;
  
  border: 4px solid;
  
  --border-bright: rgb(136,177,245);
  --border-dark: rgb(99,133,190);
  border-color: var(--border-bright) var(--border-dark) var(--border-dark) var(--border-bright);
}
.docs-index-top-action DIV {
  color: white;
  width: 40px;
  transform: rotateZ( 7deg ) skew(14deg) translateY( 5px );
}
.docs-index-top-action:hover {
  background-color: rgb(25,96,217);
  --border-bright: rgb(155,191,251);
  --border-dark: rgb(9,35,79);
}

@media (max-width: 600px) {
  .docs-index-top-head {
    font-size: 1em;
  }
  .docs-index-top-action DIV {
    width: 30px;
  }
}
@media (max-width: 430px) {
  .docs-index-top-head {
    margin-left: -40px;
    display: block;
    text-align: left;
    line-height: 2em;
    margin-top: 1em;
    z-index: 1;
  }
  .docs-index-top-content {
    grid-column: 1 / 3;
    margin-left: -20px;
    padding-left: 20px;
  }
  .docs-index-top-action {
    border-width: 3px;
  }
}
/* adhoc partial */
.docs-index-top {
  margin: 4em -40px;
  display: grid;
  grid-template-columns: 9em 1fr 120px;
  grid-row-gap: 20px;
  grid-auto-rows: 1fr;
}
@media (max-width: 750px) {
  .docs-index-top {
    margin-right: -20px;
  }
}
@media (max-width: 600px) {
  .docs-index-top {
    grid-template-columns: 7em 1fr 80px;
  }
}
@media (max-width: 430px) {
  .docs-index-top {
    grid-template-columns: 4em 1fr 80px;
    margin: 2em -20px 2em 0;
    grid-row-gap: 0px;
    grid-auto-rows: auto;
  }
}
/* adhoc partial */
SVG.si-glyph-file-download {
  fill: currentcolor;
  width: 100%;
}
/* adhoc partial */
SVG.si-glyph-movie-play {
  fill: currentcolor;
  width: 100%;
}
/* adhoc partial */
SVG.si-glyph-bookmark {
  fill: currentcolor;
  width: 100%;
}
/* toc-item */
.toc-link {
  align-self: start;
  display: flex;
}
.toc-dots {
  flex-grow: 2;
  margin: 0 6px;
  background-image: url( "images/dot-596429.svg" );
  background-repeat: repeat-x;
  background-position-y: 68%;
}
@media (max-width: 630px ) {
  .toc-desc {
    margin: 0 0 1em 1em;
  }
  .toc-dots {
    display: none;
  }
}
/* adhoc partial */
.docs-toc {
  margin: 1em 0px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-row-gap: 1em;
  grid-auto-rows: 1fr;
}
@media ( max-width: 630px ) {
  .docs-toc {
    margin: 2em 0px;
    grid-template-columns: 1fr;
    grid-row-gap: 0;
    grid-auto-rows: auto;
  }
}
/* ReleaseBasic */
Section.release-basic {
  display: grid;
  grid-template-columns: 200px 200px 1fr;
  grid-template-rows: 1fr auto 1fr;
  margin: 4em 2em;
}
.release-basic-version {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  _background-color: blue;
  text-align: center;
}
.release-basic-version > DIV {
  _width: 100%;
  font-size: 1.8em;
  padding: 10px;
  font-family: Istok Web;
  color: white;
  font-weight: normal;

  background-color: rgb(76,138,179);
  _text-decoration: underline wavy rgba(61,98,173,0.41);
  
  _transform: rotateZ( -7deg ) skew(-14deg);
}
.release-basic-date {
  font-size: 0.8em;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  align-self: end;
}
.release-basic .bg-top,
  .release-basic .bg-mid,
  .release-basic .bg-bot {
    grid-column: 2 / 3;
    background: linear-gradient( to right , rgb(76,138,179), #f4f8f9);
}
.release-basic .bg-top {
  clip-path: polygon( 0 100%, 100% 0, 100% 100% );
}
.release-basic .bg-bot {
  clip-path: polygon( 0 0, 100% 0, 100% 100% );
}
.release-basic .section {
  grid-column: 3 / 4;
  grid-row: 1 / -1;
  _background-color: #dddde2;
  border: 1px solid #e3e7ec;
  border-left: none;
}
/* ReleaseGrid */
.release-grid {
  _display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr;
  grid-auto-rows: 1fr;
}
/* adhoc partial */
body.docs-releases {
  margin: 0;
  padding: 0;
  font-family: 'Quattrocento', serif;
  line-height: 1.4;
  overflow-x: hidden;
  
  --docs-title-font: 'Istok Web', sans-serif;
  --title-color: rgb(0,79,100);
  --title-highlight-color: rgb(217,209,112);
}
body.docs-releases header {
  max-width: 960px;
  padding: 0 10px;
  margin: 1em auto;
  color: #555;
  font-family: 'Istok Web', sans-serif;
}
body.docs-releases header A {
  text-decoration: none;
  color: inherit;
}
body.docs-releases header A:hover {
  text-decoration: underline;
}
body.docs-releases article {
  max-width: 960px;
  padding: 0 10px;
  margin: 0 auto;
  
  font-size: 20px;
}
body.docs-releases footer {
  text-align: center;
  margin: 2em 0 0 0;
  padding: 2em 0 6em;;
  background-color: #eee;
  color: #999;
}