/*
   fonts imports
*/
@font-face {
   font-family: "ichroma-reg";
   src: url("/fonts/michroma-reg.ttf") format("opentype");
}


/* under dev csss */
div.under-dev-frame {
   display: inline-block;
   position: fixed;
   top: 20vh;
   left: 0;
   width: 16vw;
   height: 18vh;
   border: 4px solid rgb(196, 104, 12);
   border-left: 0 !important;
   background-color: rgba(255, 255, 255, 0.86);
   border-radius: 0 2vh 2vh 0;
   z-index: 100;
   /* -- */
   background-size: 102%;
   background-position: center;
   background-repeat: no-repeat;
   background-image: url(/imgs/under_dev.jpg);
   opacity: 0.8;
}


html, body {
   margin: 0;
   padding: 0;
   overflow-y: scroll;
}


body {
   background: url(/bg/white-pcb-1600px.jpg) !important;
   background-position: center;
   background-size: 100%;
}


div.top-bar {
   width: 100vw;
   height: 8.4vh;
   line-height: 8.4vh;
   text-align: right;
   background-color: rgba(255, 255, 255, 0.66);
   border-top: 1px solid rgb(61, 89, 180);
   border-bottom: 2px solid rgb(61, 89, 180);
}

div.top-bar a {
   text-decoration: none;
}

div.top-bar div {
   display: inline-block;
   vertical-align: top;
}

div.logo_img {
   width: 22vw;
   height: 8vh;
   line-height: calc(8vh - 2px);
   margin-left: 0.42vw;
   float: left;
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   background-image: url(/imgs/left-logo.png);
}

div.logo-no-img {
   width: 22vw;
   height: 8vh;
   line-height: calc(8vh - 2px);
   margin-left: 1vw;
   float: left;
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   background-image: url(/imgs/logo-no-img.png);
}

div.top-menu {
   width: auto;
   height: inherit;
   text-align: center;
   margin-right: 1vw;
}

div.top-menu div {
   margin-right: 1.2vw;
}

/* menu items */
div.menu-item {
   height: 4vh;
   line-height: 4vh;
   margin-top: calc(2.2vh - 1px);
   padding: 0 16px;
   border: 1px solid transparent;
   border-radius: 0.8vh;
}

div.menu-item:hover {
   background-color: rgba(219, 226, 231, 0.514);
   border: 1px solid rgb(55, 50, 124);
}

div.top-menu div:hover {
   cursor: pointer;
   color: darkblue;
}

div.top-ico {
   height: 6vh;
   line-height: 6vh;
   width: 6vh;
   margin-top: 1.2vh;
   margin-right: 1.6vw;
}

div.top-ico a {
   width: 100%;
   height: 100%;
   line-height: inherit;
}

div.top-ico:hover {
   cursor: pointer;
}

div.top-info-bar {
   margin-right: 2vw;
}

div.top-ico:first-child {
   margin-right: 0.8vh !important;
}


/* page load */
img.laoding-gif {
   height: 16vh;
   margin: 34vh auto;
   opacity: 0.92;
}


/* 
   nav icons 
*/

div.home-lnk {
   height: inherit;
   width: inherit;
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   background-image: url(/xicons/home64.png);
}

div.youtube-lnk, div.github-lnk { 
   height: inherit;
   width: inherit;
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
}

div.youtube-lnk {
   background-image: url(/xicons/yt_blue_128px.png);
}

div.github-lnk {
   background-image: url(/xicons/github128.png);
}


div.page-bdy {
   width: 90vw;
   margin: auto;
}

div.splash-panel {
   width: 100%;
   min-height: 16vh;
}

div.info-panel {
   width: 100%;
   min-height: 16vh;
   margin: 4vh auto;
   border: 1px dotted transparent;
   border-radius: 1vh;
}

div.info-panel div.form-hdr {
   display: inline-block;
   width: calc(100% - 8px);
   height: 4vh;
   line-height: 4vh;
   vertical-align: top;
   font-size: 2vh;
   color: rgb(59, 59, 94);
   text-indent: 1vw;
   /* border */
   border-left: 4px solid rgb(17, 17, 87);
   border-right: 4px solid rgb(17, 17, 87);
   border-top:  1px solid rgb(17, 17, 87);
   border-bottom: 1px solid rgb(17, 17, 87);
   border-radius: 1vh;
}

div.info-panel p {
   width: 90%;
   margin: 2vh auto 0 auto;
   text-indent: 2vw;
   text-align: justify;
   font-size: 2.2vh;
}

div.info-panel li {
   width: 90%;
   margin: 2vh auto 0 auto;
   text-align: justify;
}

span.sub-sp-hdr {
   float: right;
   margin-right: 1vw;
}

span.sub-sp-hdr-item {
   margin-left: 2vw;
   font-size: 1.8vh;
}

span.sub-sp-hdr-item a {
   text-decoration: none;
}

span.sub-sp-hdr-item:hover {
   cursor: pointer;
   color: rgb(4, 4, 87);
}

/* 
   blog & iframe 
*/

div.page-tag {
   font-size: 2.8vh;
}

iframe#blogFrame {
   width: 100%;
   height: 80vh;
   margin: 2vh auto;
   border: 2px solid rgb(166, 166, 172);
   border-radius: 1vh;
}




/* 
   index sections 
*/

div#engServicesID {
   min-height: 24vh;
}




/* 
   foooter 
*/

div._footer {
   width: 100%;
   min-height: 24vh;
   background-color: rgba(219, 224, 230, 0.445);
   border-top: 1px solid rgba(171, 172, 177, 0.473);
   padding-bottom: 4.8vh;
}

div._footer a {
   text-decoration: none;
}

div._fline {
   width: 80%;
   margin: auto;
   height: 8vh;
   line-height: 8vh;
   text-align: center;
}

div._fline-cell {
   display: inline-block;
   padding: 0 2vw;
}

div._fline:last-child {
   text-align: center;
   font-size: 1.6vh;
}

/*  _ft-top-line */
div._ft-top-line {
   font-size: 2vh;
}