@font-face {
    font-family: 'Titillium Web';
    src: url('../fonts/titillium-web/titillium-web-v8-latin-regular.eot'); /* IE9 Compat Modes */
    src: url('../fonts/titillium-web/titillium-web-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
        url('../fonts/titillium-web/titillium-web-v8-latin-regular.woff') format('woff'), /* Pretty Modern Browsers */
        url('../fonts/titillium-web/titillium-web-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
        url('../fonts/titillium-web/titillium-web-v8-latin-regular.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}
@font-face {
    font-family: 'Cutive Mono';
    src: url('../fonts/cutive-mono/cutive-mono-v8-latin-regular.eot'); /* IE9 Compat Modes */
    src: url('../fonts/cutive-mono/cutive-mono-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
        url('../fonts/cutive-mono/cutive-mono-v8-latin-regular.woff') format('woff'), /* Pretty Modern Browsers */
        url('../fonts/cutive-mono/cutive-mono-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
        url('../fonts/cutive-mono/cutive-mono-v8-latin-regular.svg#CutiveMono') format('svg'); /* Legacy iOS */
}
  
* { font-family: 'Titillium Web', Verdana, Geneva, Tahoma, sans-serif; }

.sidebar { height: 100%; width: 20vw; position: fixed; z-index: 1; top: 0; left: 0; background-color: #444444; overflow-x: hidden; padding-top: 2vh; color: #FFFFFF}
.sidebar .hdr { text-align: center; font-size: 26px }
.sidebar hr { margin-bottom: 30px; }
.sidebar a { color: #FFFFFF; padding: 3px 5px 3px 5px; }
.sidebar a:hover { color: #AAAAFF; }
.sidebar a.sel { background-color:#d8a13c; color: #000000; }
.sidebar ul { padding-left: 30px; }
.sidebar ul li { margin: 5px 0px 5px 0px; }

.main { margin-left: 20vw;  padding: 0px;}
.main iframe { height: 100vh; width: 100%; margin: 0px; padding: 0px}

.ctt_header { background-color: #444444; color: #FFFFFF; padding: 5px; border-radius: 5px; }
.ctt_header .title { font-size: 28px; margin-bottom: 10px; }
.ctt_header .desc { font-size: 20px; color: #FFFF99; }

.ctt_main { margin-top: 4vh; }
.ctt_main .row { margin-bottom: 2vh;}
.ctt_main .colH { display: inline-block; width: 20vw; font-weight: bold; font-size: 18px;}
.ctt_main .colD { width: 86vw; word-wrap: break-word;}
.ctt_main .dataVal { font-family: 'Cutive Mono'; font-size: 20px; padding: 5px; border: 1px dotted #888888; border-radius: 5px;}
.ctt_main .dataVal a { font-family: 'Cutive Mono'; }

.ctt_main table { width: 90vw; }
.ctt_main td { border-bottom: 1px dotted #AAAAFF; margin: 0px; padding: 4px; font-size: 14px;}
.ctt_main .bld { font-weight: bold; }
.ctt_main .gap { padding-top: 20px; }
.ctt_main .bgf { font-size: 18px; }
.ctt_main .nam { width: 20vw; vertical-align: top;}
.ctt_main .des { width: 80vw; vertical-align: top;}
.ctt_main .hdr { background-color: #AAAAFF; color: #333333; font-family: 'Cutive Mono'; padding: 10px; width: 70vw; font-size: 18px;}
.ctt_main .code { background-color: #333333; color: #F9F9F9; font-family: 'Cutive Mono'; padding: 10px; width: 70vw; font-size: 18px; overflow-x: auto;}
.ctt_main .grnbld { color: #008800; font-weight: bold;}
.ctt_main .orgbld { color: #CC9900; font-weight: bold;}
.ctt_main .redbld { color: #990000; font-weight: bold;}