@charset "UTF-8";

/*
black colors  lower = darker : 
5% 0b0d0e,  body
10% 171a1c,  main left nav
15% 22272a, 
17% 262c2f
20% 2d3539
*/

html, body { background-color: #0b0d0e; color: #E4E7EA;
    font-family:  "Segoe UI", "Helvetica Neue", "Helvetica", Arial, "Noto Sans", "sans-serif";
    font-size: 0.98rem;
    margin:0;
}

a { color: #4d94ff; text-decoration-style: none; text-decoration: none; }

a:hover { color: #E4E7EA; }

h1 { font-size: 130%; }
h2 { font-size: 120%; }
h3 { font-size: 115%; }
h4 { font-size: 110%; }

h1, h2, h3, h4, h5, h6 { color: #e6e6e6;  display: inline;}


  .wrapper { width: 100%;}

  .crumb { color: #E4E7EA; background-color: #262c2f;
      padding: 10px 10px 10px 25px;
      border-bottom: #1a1a1a solid 1px;
      margin:0px;
    }
    
  .crumb a { color: #E4E7EA; margin-right:8px;  }
    
  .crumb a:hover { color: #20a8d8; }
    
  .crumb span { margin-right:3px;}
  
  .top_text { float: right; text-align: right;   }

  .menu_icon { border-bottom: #707f8f solid 1px;
    text-align: right;
    padding-right: 15px;
    padding-bottom: 8px;
  }
  
  .left_nav { background-color: #171a1c; border: #1a1a1a solid 1px;
    float: left;
    width: 20%;
    padding-left: 10px;
    padding-right: 5px;
    padding-bottom: 5px;
  }

  .body_nav_link { position: relative; right: 25px;  }
  
  .main { background-color: #171a1c; border: #1a1a1a solid 1px;
    float: left; width: 75%;
    padding: 0px 15px 15px 20px;
    box-sizing: border-box;
  }

  .foot { 
    float: left;
    padding: 0px 15px 15px 20px;
    width: 100%;
  }

  .line { background-color: #4d4d4d;
    width: 100% ;
    padding-bottom: 0px;
    border-bottom: 1px solid #4d4d4d;
   }


@supports (display: grid) {/*   ----- browser with grid support------ */

  .crumb { grid-area: crumb; 
    padding: 10px 10px 10px 25px;
    margin-bottom: 1px;
   }
  .crumb a { margin:0px 5px 0px 5px;  }
  .crumb a:hover { color: #4d94ff;   }
  
  .top_text { float: right; text-align: right;   }
  
  .left_nav { grid-area: left_nav; 
    padding: 5px 5px 5px 10px;
    float: none;
    border: #1a1a1a solid 1px;
    width: auto;
    align-self: start;
    height: fit-content;
   }

  .main { grid-area: main; 
    padding: 0px 20px 15px 20px;
    margin-left: 1px;
    border: #1a1a1a solid 1px;
    float: none; 
    box-sizing: none;
    width: auto;
  }

  .foot { grid-area: foot; 
    padding: 0px 15px 15px 20px;
  }
  
  .wrapper {
    display: grid;
    grid-template-areas:
      'crumb crumb crumb crumb crumb crumb crumb crumb crumb crumb crumb'
      'left_nav left_nav main main main main main main main main main'
      'foot foot foot foot foot foot foot foot foot foot foot';
    grid-gap: 0px;
    padding: 0px;
    height: fit-content;
  }
  

}           /*   ----- END browser with grid support ------ */

ul.menu_tree {
  list-style-image : url('http://vangkin.com/images/menu_line.png'); 
  list-style-position: outside;
  border-left: 1px solid #a1a1a1;
  padding-top: 0px;
  margin-top: 0px;
  padding-left: 26px;
  }

ul.menu_tree ul {
  list-style-image : url('http://vangkin.com/images/menu_line.png'); 
  list-style-position: inside;
  border-left:1px solid #a1a1a1;
  padding-left: 0px;
  }

ul.menu_tree ul ul {
  list-style-image : url('http://vangkin.com/images/menu_line.png'); 
  list-style-position: inside;
  border-left:1px solid #a1a1a1;
  padding-left: 0px;
  margin-left: 28px;
  }

ul.menu_tree li {padding-bottom: 10px;}

.button_menu {color: #fff; background-color: #22272a; 
font-size: 16px;
font-weight: bold;
position: absolute;
left: 3px;
border:1px solid #a1a1a1;
padding: 0px;
margin: 0px;
width: 20px;
height: 24px;
}

.button_menu_lvl2 {color: #fff; background-color: #22272a; 
  font-size: 16px;
  font-weight: bold;
  position: absolute;
  left: 29px;
  border:1px solid #a1a1a1;
  padding: 0px;
  margin: 0px;
  width: 20px;
  height: 24px;
  }

.button_menu_body {color: #fff; background-color: #171a1c; 
  font-size: 16px;
  font-weight: bold;
  position: relative;
  right: 36px;
  border:1px solid #a1a1a1;
  padding: 0px;
  margin: 0px;
  width: 20px;
  height: 24px;
  }

.button_menu:hover {color: #fff;}

.button_menu_lvl2:hover {color: #fff;}

.button_text {
  background-color: #20a8d8; 
  border: 1px solid #0f7194; 
  border-radius: 3px;
  color: white;
  padding-top: 4px;
  padding-right: 9px;
  padding-bottom: 4px;
  padding-left: 9px;
  margin: 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 100%;
}

.button_text:hover {
  background-color: rgb(216, 216, 216); 
  color: #425b74;
  border: 1px solid rgb(161, 161, 161); 
  box-shadow: 3px 3px 5px #b3b3b3;
}

.button_line_text {
  color: #FFF;
  background-color: #394247; 
  border: 1px solid #000; 
  border-radius: 3px;
  font-size: 95%;
  margin-top: 5px;
}

.button_letter {
  color: #FFF;
  background-color: #394247; 
  border: 1px solid #000; 
  border-radius: 3px;
  font-size: 95%;
  margin-top: 5px;
}

.button_tshirt {
  background-color: #22272a; 
  color: #FFF;
  border: none; 
  font-size: 14px;
font-weight: bold;
}


  

.hide {display: none;}

.show_block {display: block;}

.size_85_percent {font-size: 85%;}

.size_75_percent {font-size: 75%;}

.size_65_percent {font-size: 65%;}

.size_110_percent {font-size: 110%; font-weight: bold;}

.text-red {color: #f63c3c;}

.text-blue {color: #4d94ff;}

.text-green {color: #4dbd74;}

.text-yellow {color: #ffc107;}

.text-orange {color: #ec8f33;}

.text-link {color: #4d94ff;}

.text-purple {color: #bb86fc;}

.text-turquoise   {color: #59ac90;}




.text-grey {color: #4f5c63;}

.text-dark-grey {color: #22272a;}

@media screen and (max-width: 900px) {
  .display_panel_p1,  .display_panel_p2 { width: 43%; }
}

@media screen and (max-width: 736px) {
  .display_panel_p1,  .display_panel_p2 { width: 41%; }
}

@media screen and (max-width: 560px) {
  .display_panel_p1,  .display_panel_p2 { width: 90%; }
}


@media screen and (max-width: 578px) { /****   Media 578px ################### **/
  .main { grid-area: main; 
    width: auto;
  }

  .wrapper {
    display: grid;
    grid-template-areas:
      "crumb"
      "left_nav"
      "main"
      "foot";
    grid-gap: 0px;
    padding: 0px;
    height: fit-content;
  }

  .crumb { padding: 5px 10px 5px 15px;}

  .left_nav { 
      width: 98%;
      padding: 0px 5px 0px 10px;
      border-bottom: #394247 solid 1px;
    }
  .main { 
      width: 100%;
    }

  .menu_icon { border: none; padding-bottom: 4px;}

} /****  End Media 512px ################### **/