/* CSS Document */
* { box-sizing: border-box; }
html { font-size: 16px; }
body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #330; background: #963; background: -webkit-linear-gradient(#3F3, #9F9); background: -o-linear-gradient(#3F3, #9F9); background: -moz-linear-gradient(#3F3, #9F9); background: linear-gradient(#FC6, #630); }
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 }
h2 { color: #000; font-size: 120%; width: 98%; background: #FC9; padding: .3rem;
margin: 1.25rem -12px 1.25rem 0; padding-left: 6px; border: .13rem solid #960;
-moz-border-radius: .9375rem;
-webkit-border-radius:.9375rem;
border-radius:.9375rem;
font-weight: bold; }
.toph2logo { color: #000; background: transparent; border-style: none; width: 100%; font-family: "Arial Black", Arial, Verdana; font-weight: bold; margin: 0 0 0 10px; padding: 0px; }
figcaption { font-size: 100%; font-weight: bold; text-shadow: -3px -3px 6px #FFF, 2px 2px 6px #ccc; }
h1 { color: #000; display: inline-block; background: rgba(255,255,255, .5); position: absolute; top: clamp(4.0625rem, 2.1875rem + 8.3333vw, 8.125rem);  font-weight: bold;  left: clamp(0.5rem, 0.2692rem + 1.0256vw, 1rem); }
.h2head-desc { color: #330; background: #fff; border: 1px solid #F93; border-radius: 0; Arial, Helvetica, sans-serif; padding-top: 0px; }
.container { background: #FC9; }
.logo-txt { position: absolute; width: 100%; margin: 0px; padding: 0px; }
.logo-txt { top: 4px; }
.logo-txt { top: 16px; }
details { background: #EEE; width: 90%; border: 1px solid #999; border-radius:.9375rem;}
details p { margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; margin-top: 0px; }
summary { cursor: pointer; background: #CF9; }
/*ul details { margin-left: 30px; }*/
fieldset { border: none; }
.modal-content { background-color: #f00; }
h3 { color: #633; font-size: 115%; margin: 1.25rem -8px 20px 0; background: #ffd; padding: 0.5rem; padding-left: 0.5rem; display: inline-block; border: .125rem solid #960;
-moz-border-radius: .9375rem;
-webkit-border-radius:.9375rem;
border-radius:.9375rem;
border-color: #633; font-weight: bold; }
h3:after, h4:after { content: "\a"; white-space: pre; }
h4 { color: #333; font-size: 106%; margin: 0 0 0.375rem 0.375rem; background: #ffd; display: inline-block; padding: 0.3rem 0.5rem; border: .125rem solid #960;
-moz-border-radius: .9375rem;
-webkit-border-radius:.9375rem;
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: .1rem solid #840;
border: .125rem solid #960;
-moz-border-radius: .9375rem;
-webkit-border-radius:.9375rem;
border-radius:.9375rem;
font-weight: bold; }
hr { border: 0; height: 1px; background: #300; }
img { border-style: none; }
input[type="radio"] { margin-left: 206px; }
input[type="radio"] + label { color: #f00; font-family: Arial, sans-serif; }
nav { width: 95%; margin-right: auto; margin-left: auto; margin-bottom: 16px; }
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%; }
pre { background: #CCC; white-space: pre-wrap;       /* Since CSS 2.1 */ white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */ white-space: -pre-wrap;      /* Opera 4-6 */ white-space: -o-pre-wrap;    /* Opera 7 */ }
pre, .group, .ccode, .hcode, .rcode { margin: -10px 0.5rem 30px 0; padding: 20px 4px 14px 10px; border: 2px 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: 16px; font-weight: bold; background: #eee; -moz-border-radius: .9375rem;
-webkit-border-radius:.9375rem;
border-radius:.9375rem;
}
code { padding: 1px 6px; box-shadow: 0 3px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset; border-radius: 6px; border: 1px solid #999; background-color: #efefef; color: #000; font-weight: bold; margin-bottom: 6px; }
textarea { vertical-align: top; display: inline; }
.ccode { padding: 15px 6px 2px 6px; border: 2px solid #633; }
.hcode { margin: -60px 0 0 0; background: #fff; }
.rcode { margin: -30px 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: 10px 10px 0 0; margin-left: 0.125rem; z-index: 2; position: relative; border-top: 2px solid #F00; border-right: 2px solid #F00; border-bottom: none; border-left: 2px solid #F00; }
.comment { color: DarkGreen; }
.group { padding-top: 5px; padding-bottom: 20px; border: .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(../graphics/bul/bul1.gif) none; color: #000; margin-bottom: 0.25rem; }
ul ul li { font-size: 100%; list-style: url(../graphics/bul/bul2.gif) none; color: #000; }
ul ul ul li { font-size: 100%; list-style: url(../graphics/bul/bul3.gif) none; color: #000; }
ul ul ul ul li { font-size: 100%; list-style: url(../graphics/bul/bul4.gif) none; color: #000; }
ul ul ul ul ul li { font-size: 100%; list-style: url(../graphics/bul/bul5.gif) none; color: #000; }
.tutx ul { margin-left: 20px; }
.tutx ul li, .tutx li { font-size: 100%; list-style: url(../graphics/bul/bul1.gif) none; color: #000; margin-bottom: 0.25rem; }
.footer {
padding: 0 .625rem; background: #FFCC99; position: relative; text-align: center; width: 100%; margin: auto; margin: 0.85rem; }
.Ex { color: #003300; font-weight: bolder; background-color: #FF9966; font-size: 10px; }
header, footer, .iframe1, .maincontent, {
border: .125rem solid #960;
-moz-border-radius: .9375rem;
-webkit-border-radius:.9375rem;
border-radius:.9375rem;
}
header { background: #fff; color: #A3A3A3; border: 3px solid #960; padding-top: 6px; padding-left: 0; margin: 1.25rem 0; position: relative; }
.box { position: relative; }
.btmm { margin-bottom: 10px; padding-bottom: 30px; border: 2px solid #363; display: inline-block; }
.maincontent { background: #fff; width: 100% }
.maincontent .example { background-color: #fe9; font-weight: bold; margin-bottom: -20px; margin-left: 0; border-radius: 0.5rem; z-index: 2; display: inline-block; padding: 3px 6px 5px 6px; border: .13rem solid #960;
}
.maincontent p { margin-left: 10.375px }
.border { border: 1px solid #000; }
.clearfloat { clear: both; height: 0; font-size: 1px; line-height: 0; }
.cols2, .cols3, .cols4 .cols4 { -webkit-column-gap: 10px; -moz-column-gap: 10px; -ms-column-gap: 10px; column-gap: 10px; }
.cols2 { -webkit-columns: 2 330px; -moz-columns: 2 330px; columns: 2 330px; }
.cols2 img { max-width: 80%; }
.cols3 { -webkit-columns: 3; -moz-columns: 3; columns: 3 }
.cols4 { -webkit-columns: 50px 4; /* Chrome, Safari, Opera */ -moz-columns: 50px 4; /* Firefox */ columns: 50px 4; }
.cols5 { -webkit-columns: 50px 5; /* Chrome, Safari, Opera */ -moz-columns: 50px 5; /* Firefox */ columns: 50px 5; }
/*{-webkit-columns: 30px 4; -moz-columns: 30px 4; columns: 30px 4;}*/
.essencial { font-weight: bold; background: #0F0; display: inline; }
.fltlft { float: left; margin-right: 0.5rem; }
.fltrt { float: right; margin-left: 0.5rem; }
.frame { width: 120px; height: 240px; text-align: center; border-style: none; overflow: hidden; }
.glyphicon { color: red; }
.gap-0 { padding-right: 0; padding-left: 0; min-width: 300px; width: 50%; }
.indent { padding-top: 10px; padding-left: 20px; margin-top: -0.625rem; margin-right: 0; margin-bottom: 1rem; margin-left: 0.375rem; }
.indent2 { padding-top: 10px; padding-left: 40px; margin-top: -0.625rem; margin-right: 0; margin-bottom: 1rem; margin-left: 0.375rem; }
.label-group { padding: 0px; margin-top: -20px; margin-bottom: -20px; position: relative; left: -15px; }
.left { text-align: left; }
.left-10 { margin: 0; padding: 0; left: 24px; }
.right { text-align: right; }
.result { background: #fff; padding-top: 10px; padding-right: 4px; 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: 1px 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: 300px; height: auto; }
.ZZ { list-style: disc; }
a { text-decoration: underline; }
.iframe1 { overflow: hidden; width: 124px; height: 245px; border: 2px solid #960; }
.youtubevid { height: auto; max-width: 100%; }
.resheight { line-height: 20px; }
.videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; 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: 0px; }
.centre { margin: auto; text-align: center; }
.txt1 { width: 75%; padding: 0.75rem; }
.cengrp { border-width: 4px; border-color: #000; ; padding: 0px; }
.w100 { max-width: 100%; height: 100%; object-fit: contain; }
/*https://maximeroudier.com/typeScaleClampGenerator/ */
/*h1 { font-size: clamp(1.487rem, 12px + 1.925vw, 2.012rem); line-height: 1.1; }
h2 { font-size: clamp(1.225rem, 12px + 1.400vw, 1.575rem); line-height: 1.1; }
h3 { font-size: clamp(0.997rem, 12px + 1.050vw, 1.313rem); line-height: 1.1; }
h4 { font-size: clamp(0.875rem, 12px + 0.700vw, 1.050rem); line-height: 1.1; }
p, li { font-size: clamp(0.805rem, 12px + 0.420vw, 0.875rem); line-height: 1.1; }
span { font-size: clamp(0.700rem, 12px + 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; }