/* CSS GIMP Document */
* {box-sizing: border-box}
html {font-size: 1rem}
body {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:0.875rem; color: #330; background: #963; background: -webkit-linear-gradient(#3F3, #9F9); background: linear-gradient(#FC6, #630)}
.z1, .z2 { position: absolute; left: .4rem; color: #000; background: transparent; border: 0 }
.z1 {top: clamp(1rem, -0.818rem + 9.091vw, 6rem) }
.z2 {top: 6rem;}
.box {position: relative;padding: .3rem}
/*.h2head-desc { position: absolute; top: 8.5rem; border-style: none; background: transparent; }*/
header, footer, .iframe1, .maincontent {border: 0.125rem solid #960; border-radius:.9375rem}
header {position: relative; background: #fff; color: #A3A3A3; border: 0.1875rem solid #960; padding-top: 0.375rem; padding-left: 0; margin: 1.25rem 0; }
/*.searchbox { background: #5c2205 url(../graphic/middle.gif) repeat-y; width: 12.5rem;  color: #FFF; padding: 0; text-align: center; font-size: 60%; }*/

label { display: inline-block; width:100%}

h1 {position: absolute; top: 1.5rem /*clamp(5.0625rem, 5.1875rem + 8.3333vw, 8.125rem)*/; color: #000; background: transparent/*rgba(255,255,255, 0.5)*/;  font-weight: bold;}
 h1, .hd{left: clamp(0.8rem, 0.2692rem + 1.0256vw, 1.2rem)}
h2 {color: #000; font-size: 120%; width: 98%; background: #FC9; padding: 0.3rem; margin: 1.25rem -0.75rem 1.25rem 0; padding-left: 0.375rem; border: 0.13rem solid #960; border-radius:.9375rem; font-weight: bold}

.hd{ position: absolute; top: 5rem; font-weight: bold; color: #000; }



toph2logo {position: absolute; top: 0.8rem; color: #000; background: transparent; border-style: none; font-family: Arial, Helvetica, sans-serif; font-weight: bold; margin: 0 0 0 0.625rem; padding: 0}
figcaption {font-size: 100%; font-weight: bold; text-shadow: 0.125rem 0.125rem 0.375rem #ccc}
.container {background: #FC9}
/*.logo-txt {position: absolute; width: 100%; margin: 0; padding: 0; top: 1rem}*/
details {background: #EEE; width: 90%; border: 0.0625rem solid #999; border-radius:.9375rem;}
details p {margin-bottom: 0; padding-top: 0; padding-bottom: 0; margin-top: 0}
summary {cursor: pointer; background: #CF9}
fieldset {border: none}
.modal-content {background-color: #f00}
h3 {color: #633; font-size: 115%; margin: 1.25rem 0.5rem 1.25rem 0; background: #ffd; padding: 0.5rem; padding-left: 0.5rem; display: inline-block; border: 0.125rem solid #960; border-radius:.9375rem; border-color: #633; font-weight: bold}
/*h3:after, h4:after {content: "\a"; white-space: pre}     ERROR */
h4 {color: #333; font-size: 106%; margin: 0 0 0.375rem 0.375rem; background: #ffd; display: inline-block; padding: 0.3rem 0.5rem; border: 0.125rem solid #960; border-radius:.9375rem; font-weight: bold}
h5 {color: #333; margin: 0 0 0.375rem 0.375rem; display: inline-block; padding: 0.15rem 0.5rem 0.5rem; background: #ffd; border: 0.1rem solid #840; border: 0.125rem solid #960; border-radius:.9375rem; font-weight: bold}
hr {border: 0; height: 0.0625rem; background: #300}
img {border-style: none}
/*input[type="radio"] {margin-left: 12.5rem}
input[type="radio"] + label {color: #f00; font-family: Arial, sans-serif}
input{transform: translateY(-0.075em)*/
nav {width: 95%; margin-right: auto; margin-left: auto; margin-bottom: 1rem}
ol li {margin-top: 0.625rem}
ol ol li {margin-top: 0.5rem; list-style-type: lower-alpha}
ol ol ol li {margin-top: 0.5rem; list-style-type: lower-roman}
p {font-size: 100%}
/*ERRORS
pre {background: #CCC; white-space: pre-wrap;     
 white-space: -moz-pre-wrap;  
white-space: -pre-wrap; 
white-space: -o-pre-wrap;
 }
pre, .group, .ccode, .hcode, .rcode {margin: -0.625rem 0.5rem 1.875rem; padding: 1.25rem 0.25rem 0.875rem 0.625rem; border: 0.125rem groove #ccc; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; font-size: 1rem; font-weight: bold; background: #eee; -moz-border-radius: 0.9375rem;
-webkit-border-radius:0.9375rem; border-radius:.9375rem;}
*/
h1, hd,  z1,z2, .stw {  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff,1px 1px 0 #fff}


textarea {vertical-align: top; display: inline}
.ccode {padding: 0.9375rem 0.375rem 0.125rem 0.375rem; border: 0.125rem solid #633}
.hcode {margin: 3.7rem 0 0 0; background: #fff}
.rcode {margin: -1.875rem 0 0 0; background: #fff}
.ccode span {margin-bottom: 0.25rem}
.codebox {padding: 0; width: auto; font-family: Arial, Helvetica, sans-serif; font-weight: bold; margin: 0 0 0 0.375rem; background: #fff}
.codehead {font-weight: bold; color: #f66; background-color: #000; margin-bottom: -0.5rem; padding: 0.25rem 0.25rem 0.5rem 0.5rem; border-radius: 0.625rem 0.625rem 0 0; margin-left: 0.125rem; z-index: 2; position: relative; border-top: 0.125rem solid #F00; border-right: 0.125rem solid #F00; border-bottom: none; border-left: 0.125rem solid #F00}
.comment {color: DarkGreen}
.group {padding-top: 0.3125rem; padding-bottom:1.25rem; border: 0.13rem solid #960; background: #FFF}
table {margin-left: 0; vertical-align: top}
table p, .table-full p {margin-left: 0; vertical-align: top}
td {vertical-align: top}
ul li, .custom ul li, .custom ul {font-size: 100%; list-style: url(../../html/graphics/bul/bul1.gif) none; color: #000; margin-bottom: 0.25rem}
ul ul li {font-size: 100%; list-style: url(../../html/graphics/bul/bul2.gif) none; color: #000}
ul ul ul li {font-size: 100%; list-style: url(../../html/graphics/bul/bul3.gif) none; color: #000}
ul ul ul ul li {font-size: 100%; list-style: url(../../html/graphics/bul/bul4.gif) none; color: #000}
ul ul ul ul ul li {font-size: 100%; list-style: url(../../html/graphics/bul/bul5.gif) none; color: #000}
.tutx ul {margin-left: 1.25rem}
.tutx ul li, .tutx li {font-size: 100%; list-style: url(../../html/graphics/bul/bul1.gif) none; color: #000; margin-bottom: 0.25rem}
.footer {
padding: 0 0.625rem; background: #FFCC99; position: relative; text-align: center; width: 100%; margin: auto; margin: 0.85rem}
.h2X {color: #003300; font-weight: bolder; background-color: #FF9966; font-size: 1rem; width: 80%}


.maincontent {background: #fff; width: 100%}
.maincontent .example {background-color: #fe9; font-weight: bold; margin-bottom: -1.25rem; margin-left: 0.5rem; border-radius: 0.5rem; z-index: 2; display: inline-block; padding: 0.1875rem 0.375rem 0.3125rem 0.375rem; border: 0.13rem solid #960;}
.bld{ font-weight: bold; }
.border {border: 0.0625rem solid #000}
.clearfloat {clear: both; height: 0; font-size: 0.0625rem; line-height: 0}
.cols2, .cols3, cols4 .cols4 {column-gap: 0.625rem}
.cols2 {columns: 2 18.75rem}
.cols2 img {max-width: 80%}
.cols3 {columns: 3 }
.cols4 {columns:  3.125rem 4}
.cols5 {columns:  3.125rem 5}
.essencial {font-weight: bold; background: #0F0; display: inline}
.fltlft {float: left; margin-right: 0.5rem}
.fltrt {float: right; margin-left: 0.5rem}
.frame {width: 7.5rem; height: 15rem; text-align: center; border-style: none; overflow: hidden}
.glyphicon {color: red}
.gap-0 {padding-right: 0; padding-left: 0; min-width: 20.625rem; width: 50%}
.indent {padding-top: 0.625rem; padding-left: 1.25rem; margin-top: -0.625rem; margin-right: 0; margin-bottom: 1rem; margin-left: 0.375rem}
.indent2 {padding-top: 0.625rem; padding-left: 2.5rem; margin-top: -0.625rem; margin-right: 0; margin-bottom: 1rem; margin-left: 0.375rem}
.label-group {padding: 0; margin-top: -1.25rem; margin-bottom: -1.25rem; position: relative; left: -0.9375rem}
.left {text-align: left}
.left-10 {margin: 0; padding: 0; left: 1.5rem}
.right {text-align: right}
.result {background: #fff; padding-top: 0.625rem; padding-right: 0.25rem
; border: thin solid #CCC}
.t1 {margin-left: 5% }
.t2 {margin-left: 10% }
.t3 {margin-left: 15% }
.t4 {margin-left: 20% }
.table-full {margin-left: 0; background: #fff; width: 98%; border: 0.0625rem solid #960}
.table-full th, td {text-align: left; vertical-align: top}
.table-full .TAttribute {width: 20%}
.table-full .TBlock {width: 8%}
.table-full .TDescription {width: 40%}
.table-full .TEnd {width: 8%}
.table-full .TTag {width: 20%}
.tip {background: #DFD}
.tut {background: #FF9; display: inline}
.top0 {margin: 0 0 0.625rem; padding: 0}
.w100, w-100 {width: 100%; min-width: 20.625rem; height: auto}
.ZZ {list-style: disc}
a {text-decoration: underline}
.iframe1 {overflow: hidden; width: 7.75rem; height: 15.3125rem; border: 0.125rem solid #960}
.youtubevid {height: auto; max-width: 100%}
.resheight {line-height: 1.25rem}
.videoWrapper {position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 1.5625rem; height: 0}
.videoWrapper iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%}
.nolist {list-style: none}
.noborder {border-style: none; border-width: 0; margin: 0}
.centre { margin: auto; text-align: center; border: 1px solid #000; }
.txt1 {width: 75%; padding: 0.75rem}
.cengrp {border-width: 0.25rem; border-color: #000; padding: 0}
.w100 {max-width: 100%; height: 100%; object-fit: contain}
/*https://maximeroudier.com/typeScaleClampGenerator/ */
h1 {font-size: clamp(1.487rem, 0.75rem + 1.925vw, 2.012rem); line-height: 1.1}
/*h2 {font-size: clamp(1.225rem, 0.75rem + 1.400vw, 1.575rem); line-height: 1.1}
h3 {font-size: clamp(0.997rem, 0.75rem + 1.050vw, 1.313rem); line-height: 1.1}
h4 {font-size: clamp(0.875rem, 0.75rem + 0.700vw, 1.050rem); line-height: 1.1}
p, li {font-size: clamp(0.805rem, 0.75rem + 0.420vw, 0.875rem); line-height: 1.1}
span {font-size: clamp(0.700rem, 0.75rem + 0.280vw, 0.787rem); line-height: 1.1;} */

h1, h2, h3, h4, .h2head-desc, .toph2logo {font-size: clamp(0.5rem, 0.2115rem + 1.2821vw, 1.125rem);}

ul {margin-left: 0.5rem; padding-left: 0.5rem}
ul ul {margin-left: 1rem; padding-left: 1rem}
dl {width: 100%; overflow: hidden; padding: 0; margin: 0; font-weight: bold}
dt, dd {float: left; width: 49%; padding: 0; margin: 0 }
dt {clear: both }