/*<editor-fold desc="global" defaultstate="collapsed">*/
html, body/*, div.root*/ {height: 100%;font-family: Arial}
body{margin: 0;padding: 0}
/*<editor-fold desc="Special Effects" defaultstate="collapsed">*/
@-webkit-keyframes fadeinout {0%{background-color: #fff; color: transparent;}}
@keyframes fadeinout {0%{background-color: #fff; color: transparent;}}
.flash{-webkit-animation:fadeinout 6s linear backwards}
/*</editor-fold>*/
/*</editor-fold>*/
/*<editor-fold desc="No Script Phenomena" defaultstate="collapsed">*/
main,header{display: none}
#no_script{background-color: #191919;color: #bbb;max-width: 640px;margin: 0 auto;padding: 1em 0 4px}
#no_script:hover{box-shadow: 0px 0px 17px 1px #777777}
#no_script:hover p{color: #fff;background-color: #808080}
#no_script h1{font-family: calibri, sans-serif;font-size: 14pt;background-color: #000;color: #008c8c;padding: 0 1em}
#no_script p{margin: 1em}
/*</editor-fold>*/
/*<editor-fold desc="header" defaultstate="collapsed">*/
header{box-shadow: 0 5px 7px 5px #044;transition:0.6s}
header:hover{box-shadow: 0 10px 10px 5px #055;transition:0.6s}
header #LOGO{background-color: #191919;width: 302px;height: 80px;position: absolute;top: 0;left: 50px;z-index: 2;}
header #LOGO img{top: 5px;position: absolute}
a.isolate{border-top: 1px dashed #555}
.menu-left,.home-key{float:left}
.menu-right, .avatar{float:right}

div.menu { overflow: hidden; background-color: transparent;  font-family: sans-serif;border: 0 solid #f0f;margin:0;padding:0 ;height:55px;position:static;transition: 1s}
div.menu:hover a{color: #bbb}
div.menu:hover button{color: #bbb}
div.menu:hover input{background-color: #244;color: #ddd}
div.menu:hover .search  input{color: #9dd}
div.menu:hover .search  input::placeholder{color: #ccc}

#nav1{display:none}
#hKey0,#hKey1{opacity: 0.6;transition: 1s}
#hKey0:hover,#hKey1:hover{opacity:1.0}


/*<editor-fold desc="Menu Key" defaultstate="collapsed">*/
div.menu-key{display:inline-block;cursor:pointer;float: right;margin-right: 10px}
div.bar1, div.bar2, div.bar3{width: 70px;height:10px;background-color: #008c8c;margin: 6px 0; transition: 1s}
/* Rotate first bar */
.change div.bar1{ -webkit-transform:rotate(-25deg) translate(-18px, 3px);transform: rotate(-25deg) translate(-18px, 3px)}
.change div.bar2{ opacity: 0}
.change div.bar3{ -webkit-transform:rotate(25deg) translate(-16px, -16px);transform: rotate(25deg) translate(-16px, -16px)}
/*</editor-fold>*/

div.menu img, #nav1 img { display: block ;height: 100%; }
div.menu a, #nav1 a {font-size: 16px;color: #999; text-align: center; padding: 18px 16px;text-decoration: none;margin: 0 ;height: 100%;}
div.menu a:hover { color: #577}

div.dropdown {overflow: hidden;margin:0 ;padding:0;transition: 1s;height:auto}
div.dropdown .dropbtn { font-size: 16px;  border: none;outline: none;color: #999;padding: 17px 16px;background-color: inherit;margin:0}
div.dropdown:active .dropbtn {color: aqua;}
div.dropdown:hover .dropbtn {background-color: #333; color: #499a9a; }

div.dropdown-content {display: none;position: absolute;background-color: #333;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;}
div.dropdown-content a {float: none; color: #999; padding: 12px 16px; text-decoration: none;display: block;text-align: left;}
div.dropdown-content a:hover {color: #fff; ;background-color: #333}
div.dropdown:hover .dropdown-content { display: block; }

div.search {float: right; font-size: 16px;color: white;text-align: center;padding: 11px 16px; text-decoration: none}
div.search  input{border:none; background-color: transparent; color: #499a9a; height:35px; margin : 0 ;margin-bottom : 5px;outline:none;transition:1s}
div.search  input::placeholder{font-size: 100%;color: #999;padding-left:1em;text-align: center}


/*</editor-fold >*/
/*<editor-fold desc="home-fold" defaultstate="collapsed">*/
#home-fold{min-height: 100%;background-color: #2a2a2a;color:#a0a080;padding: 0;width: 100%;overflow-y:auto}
#home-wrapper{background:url('../../usr/img/sys/back.png') repeat center;}
#home-wrapper table{margin: 0 auto;margin-top: 0;}
#home-wrapper table img{opacity:0.4;box-shadow: 0px 0px 23px 0px #008c8c;}
#home-wrapper table a{color:#fff;text-decoration: none}
#home-wrapper td{color: #aaa}
#home-wrapper table img{max-height: 302px;transition: 2s;max-width:302px;border-radius:50% }
#welcomeScreen{opacity:0;transition:6s}

/*#CIDRin{overflow-y:auto;height:100%}*/
main.level1{padding:1em 5px}

div.quick-nav{min-height:100px;max-width:280px;background-color:transparent;position:relative;margin-left:auto}
div.quick-nav a{text-decoration:none;font-size:18pt;color:#008c8c;width:100%}
a.qnItem{padding:10px;background-color:#033;border: 1px dotted #008c8c;transition:0.6s;display:block;-webkit-animation:fadeinout 6s linear backwards}
a.qnItem:hover{ -webkit-transform:rotate(0deg) translate(-32px, 0px);transition:0.6s;background-color:#022}

div.quick-nav{-webkit-transform:rotate(0deg) translate(-28px, 0px)}
/*</editor-fold>*/
/*<editor-fold desc="footer" defaultstate="collapsed">*/
section.feat{height: 100%;overflow-y: auto;position: relative;width: 100%;background-color: #ddd}
footer{;padding: 0 1em;color: #ddd;background :#191919 url('../../usr/img/sys/EQ.png') no-repeat scroll right;background-size: contain;font-size: 10pt;font-weight: 100}
footer .highlight{background-color: #2a2a2a;font-weight: 100;width: 100%;position: absolute}
span.footGroup{max-width: 360px;position: relative;float: left;margin-right:2em}
span.footMid{background-color: #333;width: 65%;position: relative;color: #c4bc96;text-align: center;float: left;border: 0 dashed #f00;min-height: 100px;font-size: 12pt}
footer div{border: 0 solid #f00;display: table;clear: both;position: relative;width: 100%}
/*</editor-fold>*/
/*<editor-fold desc="about" defaultstate="collapsed">*/
#about{background-color:#a0a0a0;height: 100%;color: #000;width:auto}
#about .XCIII{color: #ccc;background-color: #3c3c3c}
#about #overview{background-color: #afafaf;border: 0 dashed #cccccc;float: left;width: 46%;height: 100%;padding: 0 5px 0;margin-left: 10px}
#about #expansion{background-color: #cccccc;border: 0 dashed #cccccc;float: right;width: 47%;height: 100%; padding: 0 5px 0}
#about h1{background-color: transparent;text-align:right;font-family: Old English Text MT;color:#fff}
#about h2{text-align: center}
#about dd{}
#about div.scrollbox {background-color:#a0a0a0;max-width: 1220px;margin: 0 auto;padding: 0 ;height: 512px; overflow: auto;visibility: hidden;border: 3px solid #777777;box-shadow: 0px 0px 17px 4px #777777}
#about div.scrollbox:hover {visibility: visible}
#about div.scrollbox:hover  h1{background-color: #808080}
#about div.main{background-color:#a0a0a0;color: #000000;visibility: visible;padding: 0 ;margin: 0}
#about aside.boxout {float: right;border-radius: 8px;display: block;width: 180px;margin: 0 0 20px 20px;padding: 0 10px;background-color: #e1e1e1;background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#e1e1e1), to(#b5b5b5));background-image: -moz-linear-gradient(top, #e1e1e1, #b5b5b5);background-image: -ms-linear-gradient(top, #e1e1e1, #b5b5b5); background-image: -o-linear-gradient(top, #e1e1e1, #b5b5b5)}
#about aside.boxout h2 {font: bold 1.0em Arial, Helvetica, sans-seri;border-top-left-radius: 8px;border-top-right-radius: 8px;text-transform: uppercase;color: #80a0a0;background-color: #4d4d4d;margin: 0 -10px 10px;padding: 5px 10px;border-bottom: 2px solid #ffffff;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000), to(#4d4d4d));
background-image: -webkit-linear-gradient(top, #000, #4d4d4d);
background-image: -moz-linear-gradient(top, #000, #4d4d4d);
background-image: -ms-linear-gradient(top, #000, #4d4d4d);
background-image: -o-linear-gradient(top, #000, #4d4d4d);
}
#about aside.boxout a{color: #404040;font-weight: 700}
#about dd{color: #4a4a4a}
/*</editor-fold>*/
#demo{ text-align: center}
#demoPreview{margin: 0 auto}
#flash{position: absolute;top: 64px;width: 100%;height: 90%}