/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* HTML, BODY /////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////*/

html { height: 100%; font-size: 100%}
body { position:absolute; top:0; bottom:0; right:0%; left:0%; margin-top: 10vh;}
body { width: 100%; margin-left: 0px; margin-right: 0px;}

html {
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-kerning: auto;
      font-size: 24px;
      font-stretch: normal;
      font-style: normal;
      font-variant: normal;
      font-variant-ligatures: normal;
      font-weight: normal;
}

/*html { overflow-x: hidden; }*/

/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* PRE ////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////*/


         pre {
            overflow-x: auto;
            white-space: pre-wrap;
            white-space: -moz-pre-wrap;
            white-space: -pre-wrap;
            white-space: -o-pre-wrap;
            word-wrap: break-word;
         }

/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* PLAIN TEXT /////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////*/

.plain_text {
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-kerning: auto;
      font-size: 24px;
      font-stretch: normal;
      font-style: normal;
      font-variant: normal;
      font-variant-ligatures: normal;
      font-weight: normal;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* REDIRECT ///////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////*/

.bodycolor {
    background-color: rgb(70,70,70);  /*powderblue;*/
}

.redirect {
    font-family:Rubik Mono One;
    font-size:8em;
    text-align: center;
}

.aa { color: mintcream; }
.zz { color: azure; }
.bb { color: deepskyblue; }
.cc { color: lightskyblue; }

/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* FRAME  /////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////*/

.top_frame { position:fixed;
             bottom: 92%; height:8%; left:0; width:100%;
             text-align: right;
             display: block; background-color: black ; color: rgb(40,100,200);
             font-weight:bold;
             z-index:499;
           }

.bottom_frame { position:fixed;
                bottom: 0%; height: 8%; left: 0; width:100%;
                display: block; background-color: #d4d8dd ; 
                z-index:499;
              }

.menu { position: fixed; top:0%; left: 2%; height: 6%; padding-top: 1%; font-weight: bold;
        background-color: transparent; color: gray; z-index: 1001;}

.icon { position: fixed; top:0%; right: 1%; height: 6%; padding-top: 1%; text-align: right;
        font-weight: bold; background-color: transparent; z-index: 1000;}

.status { position: fixed; top:93%; left: 2%; height: 6%; padding-top: 1%;
        background-color: transparent; color: gray; font-weight: bold; z-index: 1001;}

/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* MARGIN  ////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////*/

.bottom_margin { position: absolute; 
                 left: 0; width: 100%; height: 200%; 
                 display: block;
                 background-color: rgb(50,50,50); 
                 z-index: -1;
               }

/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* LINK ///////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////*/

a:link, a:visited {color: #1564b2;}
a:hover {color: #1e90ff}
a {text-decoration: none;}

/*
a.main:link, a.main:visited, .main { color: coral }
a.main:hover {color: lightpink}

a.data:link, a.data:visited, .data { color: mediumturquoise; }
a.data:hover {color: paleturquoise; }

a.science:link, a.science:visited, .science { color: cornflowerblue }
a.science:hover {color: lavender}

a.info:link, a.info:visited, .info { color: DarkGoldenRod; }
a.info:hover {color: LightGoldenRodYellow}

a.art:link, a.art:visited, .art { color: crimson; }
a.art:hover {color: pink } /*IndianRed*/

a.poetry:link, a.poetry:visited, .poetry { color: lightsalmon; }
a.poetry:hover {color: lightpink }

a.code:link, a.code:visited, .code { color: mediumturquoise; }
a.code:hover {color: paleturquoise }
*/

/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* COLOR //////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////*/

.dodgerblue { color: dodgerblue; }
.navy       { color: rgb(0,100,200); }
.coral      { color: coral }
.powderblue { color: rgb(140, 179, 184) }

/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* BANNER /////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////*/

.banner { position: absolute; left: 0; width: 100%; height: 1em;
            background-color: rgb(200,230,255); display-block; }

hr { border-style: solid; border-width: 1px; border-color: lightgray;
    padding: 0px;
    margin: 0px;
}


.dashed { border-style: dashed; border-width: 5px; border-color: lightgray;
    padding-bottom: 0;
    margin: 3px;
}

/*
.dashed {
         border-style: dashed; border-bottom: none; border-width: 5px; color: lightgray;
         border-left: none; border-right: none;
         padding-bottom: 1em; margin: 3px;
}
*/

.text_banner {
	display: block; 
	background-color: rgb(250,250,150);
        padding: 1em; 
	margin-top: 1em; 
	margin-bottom: 1em;
	text-align: center;
	font-weight: bold;
	font-style: italic;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* sub ////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////*/

.sub {
    position:fixed;
    top: 8%;
    height: 84%;
    left: 0;
    width: 100%;
    display: block;
    background-color: rgb(200,200,200);
    z-index: -1000;
}

.subs {
      font-size: x-large;
      font-weight: bold;
	margin-left: 5%; 
/*	display: block; */
	text-align: center;
     }

/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* IMAGE //////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////*/

.image_container {
    position:fixed;
    top: 8%;
    height: 84%;
    left: 0;
    width: 100%;
    display: block;
    background-color: rgb(70,70,70);
}

.image{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    overflow: auto;
    zoom: 10;
}

.img {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    overflow: auto;
    zoom: 10;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* POST SINGLE ////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////*/

.code_ {
	padding: 1em;
	margin-top: 0em;
	margin-bottom: 0em; 
	display: block; 
	background-color: rgb(239,240,241);
}

.inline_code {
	background-color: rgb(239,240,241);
	padding-left: 0.3em;
	padding-right: 0.3em;
	font-family: monospace;
	white-space: nowrap;
}

/* symbol */
.sss {
      font-size: xx-large;
      font-weight: bold;
     }

.ssh {
      font-size: x-large;
      font-weight: bold;
     }

/* sys */
.sys {
      color: rgb(100,100,100);
/*      font-size: xx-large; */
      font-weight: bold;
    }

/* single header */
.sh {
      padding-top: 1em;
      padding-bottom: 1em;
      color: dodgerblue;
      font-size: xx-large;
      font-weight: bold;
    }

/* single header paragraph*/
.shp { 
      font-size: large;
      font-weight: bold; 
    }
/* single link arrow */
.sa {
      font-size: x-large;
      font-weight: bold;
      font-family: monospace;
    }

/* single filename */
.sf {
      font-size: large;
      font-weight: bold;
      color: #1564b2;
    }

/* single title */
.st {
      font-size: large;
      font-weight: bold;
      color: rgb(140, 179, 184);
    }

/* single subtitle */
.ss {
      font-size: large;
    }

/* single text */
.sx {
      font-size: large;
      font-style: italic;      
    }

/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* RESPONSIVE TABLES //////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////*/

.table_header {width: 100%; font-size: medium;
               border-top: 2px solid lightgray; border-bottom: 2px solid lightgray;}
.th_a { text-align: left; width:  5%; padding-left: 2% }
.th_b { text-align: left; width: 15%; padding-left: 2% }
.th_c { text-align: left; width: 30%; padding-left: 1% }
.th_d { text-align: left; width: 20%; padding-left: 2% }
.th_e { text-align: left; width: 15%; }
.th_f { text-align: left; width: 15%; }

.main_table { width: 100%; border-bottom: 2px solid lightgray; table-layout: fixed; }

.symbol_all { width:  5%; padding-left: 2%; vertical-align: top; padding-top: 1%;}
.text_all   { width: 45%; padding-left: 2%; padding-right:11%;}
.image_all  { width: 20%; padding-left: 2%; overflow: hidden;}
.menu_all   { width: 15%; padding-left: 1em; background-color: rgb(245,245,245);}
.status_all { width: 15%; padding-left: 2%; background-color: rgb(245,245,245); white-space: nowrap}


.table_single { width: 100%; }

.image_single  { width: 20%; padding-left: 2%; vertical-align: top; 
                 padding-bottom: 1em; padding-top: 1em; overflow: hidden; }
.text_single   { width: 50%; padding-left: 2%; padding-right:5%; 
                 vertical-align: bottom; padding-bottom: 1em;}
.text_single2   { width: 70%; padding-left: 2%; padding-right:5%;
                 vertical-align: bottom; padding-bottom: 1em;}
.menu_single   { width: 15%; padding-left: 1em; background-color: rgb(245,245,245); 
                 vertical-align: top; padding-top: 2em; padding-right: 1em;}
.status_single { width: 15%; padding-left: 2%; background-color: rgb(245,245,245); 
                 white-space: nowrap; vertical-align: top; padding-top: 2em;}

.single_link { margin-left: 22%; padding-bottom: 1em;}


.tree_table { width: 100%; border-bottom: 2px solid lightgray; table-layout: fixed; }
.tree_symbol { width:  5%; padding-left: 2%; vertical-align: top; padding-top: 0%;}
.tree_text   { width: 65%; padding-left: 2%; padding-right:11%;}
.tree_status { width: 30%; padding-left: 2%; background-color: rgb(245,245,245); white-space: nowrap }


@media all and (max-width: 800px) {
  table,
  thead,
  tbody,
  th,
  td,
  tr {
       display: block;
  }

  th { display: none; }

  .symbol_all { width: 100%; padding-left: 10%; padding-top: 5%;}
  .text_all   { width: 100%; text-align: center; padding-top: 5%; padding-right: 0%; }
  .image_all  { width: 100%; text-align: center;
                padding-top: 3%; padding-bottom: 5%;}
  .menu_all   { width: 100%; padding-left: 10%; }
  .status_all { width: 100%; padding-left: 10%;
                padding-bottom: 2%; border-bottom: 20px solid white;}

  .image_single  { width: 100%; text-align: center; padding-right: 10%; 
                   padding-left: 10%; padding-top: 10%; padding-bottom: 5%}
  .text_single   { width: 100%; padding-right: 0%; padding-left: 10%; 
                   padding-right: 10%; padding-bottom: 5%;}
  .menu_single   { width: 100%; padding-left: 10%; padding-top: 1em;}
  .status_single { width: 100%; padding-left: 10%; 
                   padding-bottom: 1em; border-bottom: 20px solid white;}

  .single_link { margin-left: 0%; padding-left: 10%; }


  .symbol_all, .text_all, .image_all, .menu_all, .status_all, 
  .image_single, .text_single, .menu_single, .status_single, .single_link {
                box-sizing: border-box;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
               }

}

/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* RESPONSIVE SISTER LINKS ////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////*/

.sister {}

@media all and (max-width: 800px) {

.sister {padding-top: 1em; padding-bottom: 1em;}

}

/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* RESPONSIVE LIST-BUTTONS ////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////*/

.normal { background-color: rgb(225,236,244);}
.current { background-color: rgb(236,236,236); color: rgb(170,170,170); font-weight: bold;} 
/* rgb(150,175,200);} /*rgb(200,211,219); } */

.buttons_align { text-align: left; padding-top: 1em; padding-bottom: 1em;
                 padding-left: 1em; padding-right: 1em;}

.list-button {
    padding: 4px 20px;
    text-align: center;
    text-decoration: none;
    font-size: 0.7em;
    display: inline-block;
    margin: 4px;
}

.cursor_default {
    cursor: default;
}

@media all and (max-width: 800px) {

.buttons_align { text-align: center; padding-left: 0; padding-right: 0;}

.list-button {
    padding: 8px 30px;
    text-align: center;
    text-decoration: none;
    font-size: 0.7em;
    display: inline-block;
    cursor: pointer;
    margin: 8xpx
}

}