/*
 Theme Name:   LethamLabs
 Description:  LethamLabs Hosting Theme
 Author:       Alan Hobbs - LethamLabs
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/
:root {
    --primary: #2055A4;
    --secondary: #999;
    --content-width: 100%;
    --back-color: white;
    --text-color: #222;
  }
html{font-size:62.5%;}
body{min-height:100vh;max-width:100%;display: grid;grid-template-rows: auto 1fr auto;margin:0;font-family: 'Roboto', sans-serif;background-color: var(--back-color);color:var(--text-color);}
header{min-height:60px;background-color:var(--primary);z-index:9000;}
footer{background:black;}
#header-logo{padding-left:6px;}
.content{font-size:1.6rem;}
.header-inner{height:50px;padding:5px 10px;}
.footer-inner{min-height:30px;padding:10px;font-size:1.4rem;color:white;}
.flex{display:flex;justify-content: space-between;}
a{transition: linear 0.1s opacity;text-decoration:none;color:var(--primary);}
a:hover{opacity:0.6;}
nav {display: inline-block;line-height:50px;}
nav ul {list-style-type: none;display:flex;margin:0;padding-left:0;font-size:1.6rem;}
nav li{margin:0;}
nav li a{text-decoration: none;padding:17px 12px;color: white;text-transform: uppercase;font-weight:bold;}
.jscript{text-align:center;background:darkred;color:white;line-height:32px;font-size:1.6rem;}
.category-grid{grid-column: 1 / span 3;}
.category-column{-moz-column-count: 3;-webkit-column-count: 3;column-count: 3;}
.category-column ul{margin: 0;-webkit-column-break-inside: avoid;page-break-inside: avoid;break-inside: avoid-column;display:table;}
.category-heading{padding:1px 10px;}
.category-heading h1 a{color:white;}
.support-grid{display:grid;grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto; 
  grid-column-gap: 40px;
  grid-row-gap: 40px;margin-top:20px;padding: 0 10px;}
.support-category{display:flex;flex-direction:column;justify-content:space-between;background-color:white;border: 1px solid lightgray;border-radius:3px;}
.support-category h1 a{color:var(--primary);}
.support-category h1{padding: 20px 10px 10px 20px;margin:0;}
.support-category h2{padding-left:10px;}
.support-category ul{font-size:1.6rem;font-weight:bold;}
.support-category p{font-size:1.4rem;padding:0 10px;}
.support-category ul a{color:var(--text-color);}
.support-category ul li {padding: 10px 0px;break-inside: avoid-column;}
.support-category ul li a:hover{opacity: 1.0;text-decoration: underline;}
.breadcrumb{font-size:17px;padding: 20px 0;overflow: auto;line-height: 29px;}
.breadcrumb ul{list-style: none;margin: 0 0 0 10px;padding: 3px 10px;float:left;background-color:white;border-radius: 5px;border: 1px solid var(--primary);}
.breadcrumb ul li{float:left;padding-right:6px;}
.support-search{float:right;margin-right:10px;overflow:auto;}
#search{border: 1px solid var(--primary);border-radius: 5px 0px 0px 5px;padding: 4px;}
#searchform{display:flex;}
#searchform input[type=text]{flex:2;font-family:"Roboto", sans-serif;font-size:17px;padding:6px;}
#searchform button{transition: linear 0.1s opacity;color:white;padding:5px 10px 2px 10px;background:var(--primary);font-size: 18px;border: none;cursor: pointer;border-radius: 0px 5px 5px 0px;}
#searchform button:hover{opacity:0.6;} 
.article-count{padding:20px;font-size:1.2em;font-weight:bold;border-top:1px solid lightgray;text-transform:uppercase;}
.full-width-image{width:100%;}
.back-image{position:relative;text-align:center;}
.image-overlay{color:white;font-size:calc( 14px + 6 * ((100vw - 100px)/140));position:absolute;top:50%;transform: translate(0,-50%);text-align:center;width:100%;}
.image-overlay p{text-shadow: 2px 2px 5px #333,-2px -2px 5px #333;}
.keyboard{height:100%;background:url(assets/images/keyboard-3000w.jpg);background-color:black;background-size: cover;}
.padded{padding:20px;}
.font24{font-size:calc( 10px + 2 * ((100vw - 50px)/200));}
.plain-list{list-style: none;line-height:4rem;padding-left:20px;}
.plain-list i{padding-right:10px;font-size: calc( 16px + 2 * ((100vw - 50px)/200));}
@media screen and (max-width: 1040px){
  .support-grid{grid-template-columns:1fr 1fr;}
  .keyboard{height:100%;background:url(assets/images/keyboard-1200w.jpg);background-color:black;background-size: cover;}
}
@media screen and (max-width: 650px){
  header{min-height:40px;}
  #header-logo,.header-inner{height:30px;}
  nav{line-height:30px;}
  .support-grid{grid-template-columns:1fr;}
  .category-column{-moz-column-count: 2;-webkit-column-count: 2;column-count: 2;}
  .keyboard{height:100%;background:url(assets/images/keyboard-450w.jpg);background-color:black;background-size: cover;}
}
@media screen and (min-width: 410px) {
  #toggle {display:none;}
}
@media screen and (max-width: 409px) {
  #popout {position: fixed;height: 0;width: 100%;
      background: var(--primary);
      color: white;
      top: 40px;
      left: 0;
      overflow:hidden;
      z-index:8000;
      }
  #toggle {
      position: relative;
      top: 4px;
      right: 20px;
      width: 28px;
      height: 24px;
      cursor:pointer; 
      }
      .category-column{-moz-column-count: 1;-webkit-column-count: 1;column-count: 1;}
  .support-search{float:none;margin-left:10px;clear:both;}
  .breadcrumb ul{clear:both;margin:0 0 10px 10px;}
  .keyboard{height:100%;background:url(assets/images/keyboard-450w.jpg);background-color:black;background-size: cover;}
}