html, body{ height:100%; width:100%; padding:0px; margin:0px; }
*{ font-size:16px; font-family: "Segoe UI",Roboto,Helvetica,Arial,sans-serif; }

h1{ font-size: 36px; font-weight: 300; color:#3c4146; margin:0px 0px 0px 0px; padding:0px; }
h3{ font-size: 18px; color:#414141; font-weight:400; margin:15px 0px 3px 0px;  padding:0px; }
hr{ border-top: 1px dashed silver; border-width: 1px 0px 0px 0px; margin:20px 70px 10px 70px; padding:0px; }
p{ color:#707070; margin:0px 0px 10px 0px; }
a{ text-decoration:none; }
a:hover{ text-decoration:underline; }

pre{ 
    color:white; background-color:#444; padding:8px 10px; border-radius: 6px;
    font-family: Consolas,"Liberation Mono",Menlo,Courier,monospace;
    margin:5px 0px 10px 0px; tab-size: 20px;
}

code{border-radius: 3px; white-space:pre; padding: 5px 10px; width:100%;  box-sizing: border-box; tab-size: 20px;
font-family: Consolas,"Liberation Mono",Menlo,Courier,monospace;
border: 1px solid #ccc;
background-color: #f9f9f9;
display: inline-block; margin: 5px 0px; }

/*---------------------------------------*/
page-layout { display:flex; flex-direction:column; min-height:100vh; }

page-layout .HeaderArea,
page-layout .FooterArea,
page-layout .MainArea
    { max-width: 1020px; margin-right: auto; margin-left: auto;  }

/*---------------------------------------*/
page-layout > header{ padding: 15px 10px; background-color: #3c4146; border-bottom: 1px solid #202326; }

.HeaderArea{ display:flex; flex-direction:row; justify-content: space-between; align-items: center; }
.HeaderArea > label{ color:white; font-size:22px; font-weight:600; }
.HeaderArea > label span{ color:#B3BCC7; font-size:22px; font-weight:100; }
.HeaderArea > label a{ color:white; font-size:22px; font-weight:600; text-decoration:none; }

.HeaderArea > nav{  }
.HeaderArea > nav a{ color:white; text-decoration:none; margin-left:10px; }
.HeaderArea > nav a:hover{ color:lime; }

/*---------------------------------------*/
page-layout > footer{ margin-top: 30px; padding: 15px 10px; border-top:1px solid #e5e5e5; font-size: 13px; color: #767676; }

.FooterArea{ display:flex; flex-direction:row; justify-content: space-between; align-items: center; }
.FooterArea > header{ flex:1 1 35%; }
.FooterArea > main{ text-align:center; flex:1 1 auto; }

.FooterArea > nav{ flex:1 1 35%; text-align:right; }
.FooterArea > nav a{ color:#005b9e; text-decoration:none; margin-left:10px; }
.FooterArea > nav a:hover{ color:navy; text-decoration: underline; }

/*--------------------------------------- */
page-layout > main{ flex:1 1 auto; padding: 0px 10px; }

.MainArea > header{ display:flex; margin:30px 0px 15px 0px; border-bottom: 1px solid #ddd; align-items: stretch; justify-content: space-between; }
.MainArea > header h2{ margin:0px 0px 5px; font-weight:400; font-size:22px;  color:#333; }
.MainArea > header nav{ border:0px solid red; display:flex; align-items: stretch;  }

.MainArea > header nav a.sel{ color: #222; border-bottom-color: #d8d8d8; }
.MainArea > header nav a:hover{ color:blue; }
.MainArea > header nav a{ display:inline-block; border-bottom: 2px solid transparent; 
    font-size:14px; color:#767676;; text-decoration:none; 
    padding: 5px 0px 0px; margin-left:10px; }
    
/*--------------------------------------- */
.ContentNav{ display:flex; }
.ContentNav > main{ flex:1 1 auto; }
.ContentNav > nav{ flex: 0 0 300px; }

/*--------------------------------------- */
.tbl{ border-collapse: collapse; border-color: grey; border-spacing: 0; width:100%; }
.tbl td,
.tbl th { border: 1px solid #ddd; padding: 6px 13px; }
.tbl th{ background-color:#f0f0f0;}

.tbl.info td:first-of-type{ width:110px; }

.note{ color: #264c72; margin:10px 0px; padding: 5px 10px; border: 1px solid #97c1da; border-radius: 3px; background-color: #d8ebf8; }

.detail{ margin:10px 0px; }
.detail > label{ font-size:18px; font-weight:600; }
.detail > label i{ color:#707070; font-weight:400; }
.detail > blockquote{ margin:5px 30px 0px 30px; }
 
/*--------------------------------------- */
ol { padding-left:35px; }
ol a{ color:rgb(2, 0, 146); font-weight:600; transition:all 0.3s ease-out; }
ol a:hover{ color:rgb(255, 41, 41); text-decoration:none; }
ol a:after{ content:" - "; font-weight:900; }

/*--------------------------------------- */
.NavTree{
    margin-top: 12px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    box-shadow: 0px 1px 2px rgba(0,0,0,.1);
}

.NavTree header{ padding:4px; margin: 0;
color: #666;
border-bottom: 1px solid #eee;
font-size: 14px; }

.NavTree a{
    display:block;
    border-bottom: 1px solid #eee;
        font-weight: 700;
    color: #666;
    background-color: #f9f9f9;
    padding:2px 6px;
    font-size:12px; font-weight:400;
    text-decoration:none;
}
.NavTree a:hover{ background-color:#d4d4d4; }