/* ========================================================================================================== */

div-semantic-layout,
div-semantic-header, div-semantic-title,
div-semantic-main, div-semantic-navlist
{display: block; margin: 0em; padding: 0em; width: auto; height: auto;}

* {box-sizing: border-box;}

div-semantic-layout {
   position: absolute;
   top: 0px; right: 0px; bottom: 0px; left: 0px;
   display: flex; display: -ms-flexbox;
   flex-direction: column; -ms-flex-direction: column;   
}

div-semantic-header {
   flex: 0 0 auto; -ms-flex: 0 0 auto;
   display: flex; display: -ms-flexbox;
   flex-direction: row; -ms-flex-direction: row;
   color: WhiteSmoke; background-color: Gray;
   background-image: linear-gradient(to bottom,DarkGray,Gray,DimGray);
   padding: 0.25em;
}

div-semantic-header div-semantic-title {
   flex: 1 1 auto; -ms-flex: 1 1 auto;
   display: block;
}

div-semantic-header div-semantic-title h1 {display: none; font-size: 110%; margin: 0em; padding: 0em;}
div-semantic-header div-semantic-title h2#def {display: block; font-size: 108%; margin: 0em; padding: 0em;}
div-semantic-header div-semantic-title h2#rwd {display: none; font-size: 108%; margin: 0em; padding: 0em;}

div-semantic-header button {
   flex: 0 0 auto; -ms-flex: 0 0 auto;
   display: inline-block;
   border-style: none;
   background-color: transparent;
   background-size: cover;
   margin: auto; padding: 0em;
   width: 1.25em; height: 1.25em;
   cursor: pointer;
}

div-semantic-header button:hover {width: 1.50em; height: 1.50em;}
div-semantic-header button:active {width: 1.25em; height: 1.25em;}
div-semantic-header button#btnKebab {background-image: url('../btn-kebab.ico'); display: none;}
div-semantic-header button#btnHmbgr {background-image: url('../btn-hamburger.ico'); display: inline-block;}

div-semantic-main {
   flex: 1 1 auto; -ms-flex: 1 1 auto;
   display: flex; display: -ms-flexbox;
   flex-direction: row; -ms-flex-direction: row;
   border-top: thin solid DimGray;
   border-bottom: thick solid DimGray;
   overflow: auto;
}

div-semantic-main div-semantic-navlist {
   flex: 0 0 auto; -ms-flex: 0 0 auto;
   display: none;
   padding-right: 1.25em; padding-left: 0.25em;
   overflow: auto;
}

div-semantic-main div-semantic-navlist p {margin: 1em 0em; padding: 0em;}
div-semantic-main div-semantic-navlist p:last-of-type {padding-bottom: 3em;}
div-semantic-main div-semantic-navlist a {text-decoration: none; border: none; color: DimGray;}
div-semantic-main div-semantic-navlist a:hover {color: DimGray; background-color: LightGray;}
div-semantic-main div-semantic-navlist a:active {font-size: 97.5%; color: Gainsboro; background-color: DimGray;}
div-semantic-main div-semantic-navlist a.StayHighlight {color: Gainsboro; background-color: DimGray;}
div-semantic-main div-semantic-navlist a.StayHighlight {padding-right: 0.5em; padding-left: 0.5em;}
div-semantic-main div-semantic-navlist ol {margin: 0em; padding: 0em;}
div-semantic-main div-semantic-navlist li {margin: 0em; padding: 0em;}
div-semantic-main div-semantic-navlist ol {list-style-type: upper-alpha; font-weight: bold;}
div-semantic-main div-semantic-navlist ol li {margin-top: 1em; margin-left: 1.75em;}
div-semantic-main div-semantic-navlist ol li ol {list-style-type: decimal; font-weight: normal;}
div-semantic-main div-semantic-navlist ol li ol li {margin-top: 0em; margin-left: 1.25em;}

div-semantic-main iframe {
   flex: 1 1 auto; -ms-flex: 1 1 auto;
   display: inline-block;
   border-style: none;
   height: 100%;
   overflow: auto;
}

/* ========================================================================================================== */

header, main, footer,
article, section,
dv-hd3, dv-hd4, dv-hd5, dv-hd6,
dv-table-container, dv-table-wrapper,
dv-info-container, dv-info-wrapper, dv-info-capsule-left, dv-info-capsule-right
{display: block;}

* {box-sizing: border-box;}


body {margin: 0em; padding: 0em 0em 3em 0em;}
body {color: DimGray; background-color: WhiteSmoke;}


header {
   color: WhiteSmoke; background-color: Gray;
   background-image: linear-gradient(to bottom,DarkGray,Gray,DimGray);
   padding: 0.25em 0.50em;
}

main {margin: 0em; padding: 0em 1em;}
footer {margin: 0em; padding: 0em 1em;}

article {margin: 1em 0em; padding: 0em 0em 0em 1em;}
section {margin: 1em 0em; padding: 0em 0em 0em 1em;}


dv-hd3, dv-hd4, dv-hd5, dv-hd6 {margin: 0em 0em 0em -1em; padding: 0em;}
dv-hd3 {color: DimGray; border-bottom: medium ridge DimGray;}
dv-hd4 {color: DarkOrange; border-bottom: thin solid DarkOrange;}
dv-hd5 {color: DarkSalmon; border-bottom: thin solid DarkSalmon;}
dv-hd6 {color: DarkGoldenRod;}

h1 {font-size: 110%; margin: 0em; padding: 0em;}
h2 {font-size: 108%; margin: 0em; padding: 0em;}
h3 {font-size: 106%; margin: 0em; padding: 0em;}
h4 {font-size: 104%; margin: 0em; padding: 0em;}
h5 {font-size: 102%; margin: 0em; padding: 0em;}
h6 {font-size: 100%; margin: 0em; padding: 0em;}

h2 span {display: none;}

p {margin: 1em 0em; padding: 0em; text-align: justify;}
pre {margin: 1em 0em; padding: 0em; text-align: justify;}

ol {padding-left: 1.25em;}
ul {padding-left: 1.25em;}

a {text-decoration: none; color: Blue;}
a:hover {color: Cyan; background-color: RoyalBlue;}
a:active {font-size: 97.5%;}
p a {border-bottom: thin dashed Blue;}

dv-table-container {margin: 1em 0em 1em 1em; padding: 0em; border: medium ridge DimGray;}
dv-table-wrapper {margin: 0em; padding: 0em; overflow: auto;}

table {border-collapse: collapse; margin: 0em; padding: 0em;}
table caption {background-color: LightGray; padding: 0.25em;}
table thead {background-color: Gainsboro; padding: 0em;}
table thead {border-top: medium ridge Silver; border-bottom: medium ridge Silver;}
table th {padding: 0.00em 0.25em; border: thin solid Silver;}
table td {padding: 0.00em 0.25em; border: thin solid Silver;}
dv-table-wrapper table {width: 100%;}

dv-info-container {margin: 0em; padding: 0em;}
dv-info-container p {margin: 0em; padding: 0em;}
dv-info-container pre {color: Yellow; margin: 0em; padding: 0em;}
dv-info-wrapper {display: table-row;}
dv-info-capsule-left {display: table-cell; margin: 0em; padding: 0em 0em 0em 1em;}
dv-info-capsule-right {display: table-cell; margin: 0em; padding: 0em 1em 0em 1em;}

dv-info-container.Notes {margin: 1em 0em 1em 1em; padding: 1em 0em; border: thin solid Gray;}
dv-info-container.Notes {border-radius: 8px; box-shadow: 2px 2px 4px;}

dv-info-container.Terminal {margin: 1em 0em 1em 1em; padding: 1em 0em; overflow: auto;}
dv-info-container.Terminal {color: Lime; background-color: Black; border: thick ridge LightGray;}
dv-info-container.Terminal dv-info-capsule-right {white-space: nowrap;}

dv-info-container.Configure {margin: 1em 0em 1em 1em; padding: 1em 0em; overflow: auto;}
dv-info-container.Configure {color: Azure; background-color: Black; border: thick ridge LightGray;}
dv-info-container.Configure dv-info-capsule-right {white-space: nowrap;}

dv-info-container.PowerShell {margin: 1em 0em 1em 1em; padding: 1em 0em; overflow: auto;}
dv-info-container.PowerShell {color: Azure; background-color: DarkBlue; border: thick ridge LightGray;}
dv-info-container.PowerShell dv-info-capsule-right {white-space: nowrap;}

/* ========================================================================================================== */

@media only screen and (min-width: 640px) { /* VGA screen */
   div-semantic-header {padding-top: 0em; padding-bottom: 0em;}
   div-semantic-header div-semantic-title h1 {display: block;}
   div-semantic-header div-semantic-title h2#def {display: none;}
   div-semantic-header div-semantic-title h2#rwd {display: block;}
   div-semantic-header button {width: 1.75em; height: 1.75em;}
   div-semantic-header button:hover {width: 2.25em; height: 2.25em;}
   div-semantic-header button:active {width: 1.75em; height: 1.75em;}
   div-semantic-header button#btnKebab {display: inline-block;}
   div-semantic-header button#btnHmbgr {display: none;}
   div-semantic-main div-semantic-navlist {display: block;}
   div-semantic-main div-semantic-navlist p:last-of-type {padding-bottom: 6em;}
   body {padding-bottom: 6em;}
   main {padding-left: 3em;}
   footer {padding-left: 3em;}
   article {padding-left: 3em;}
   section {padding-left: 3em;}
   dv-hd3, dv-hd4, dv-hd5, dv-hd6 {margin-left: -3em;}
   h2 span {display: inline-block;}
   ol {padding-left: 2.5em;}
   ul {padding-left: 2.5em;}
   dv-table-container {margin-left: 3em;}
   table th {padding: 0.25em 0.50em;}
   table td {padding: 0.25em 0.50em;}
   dv-info-container.Notes {margin-left: 3em;}
   dv-info-container.Terminal {margin-left: 3em;}
   dv-info-container.Terminal dv-info-capsule-right {padding-right: 3em;}
   dv-info-container.Configure {margin-left: 3em;}
   dv-info-container.Configure dv-info-capsule-right {padding-right: 3em;}
   dv-info-container.PowerShell {margin-left: 3em;}
   dv-info-container.PowerShell dv-info-capsule-right {padding-right: 3em;}
}

@media only screen and (min-width: 800px) { /* Super VGA screen */
}

@media only screen and (min-width: 2048px) { /* 2K screen */ 
   div-semantic-layout {margin: auto; width: 2048px;}
   div-semantic-header {border-top-right-radius: 8px; border-top-left-radius: 8px;}
   div-semantic-main {border-bottom-right-radius: 8px; border-bottom-left-radius: 8px;}
   div-semantic-main div-semantic-navlist {border-left: thin solid Silver;}
   div-semantic-main iframe {border-right: thin solid Silver;}
}

/* ========================================================================================================== */
/* Nor Azizan Morban (+60139361330)                                                                           */
/* 29-May-2020 22:04:55 (UTC+08:00)                                                                           */
/* ========================================================================================================== */