/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* -------------------------------------------------------- */
/* VARIABLES */

  :root {
    /* Background Colors: */
  --background-color: #96D586;
  --header-background-color: #173011;
  /*--sidebar-background-color: lavenderblush;*/
  /*--blockquote-background-color: #dce7ed;*/
  
  /* Text Colors: */
  --header-text-color: #EFF8EC
  }

/* -------------------------------------------------------- */
/* -------------------------------------------------------- */

body {
  background-color: var(--background-color);
  color: black;
  font-family: Georgia;
}

/* -------------------------------------------------------- */
/*FRONT PAGE */
/* -------------------------------------------------------- */

.indexlayout {
  /*width: 100%; */
  display: grid;
  margin: 40px 50px;
  grid-gap: 15px;
  grid-template: 
    "indexHeader indexHeader indexHeader" auto 
    "indexLeft indexCenter indexRight" auto
    "indexLeft2 indexCenter2 indexRight2" auto 
    / 1fr 1fr 1fr;
    /* var(--sidebar-width) auto; */
  /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
}

.indexHeader {
  grid-area: indexHeader;
  background-color: var(--header-background-color);
  color: var(--header-text-color);
  padding: 30px
}

h1 {
  font-size: 18px
}

.indexLeft {
  grid-area: indexLeft;
  background-color: var(--header-background-color);
  color: var(--header-text-color);
  padding: 30px;
  font-size: 14px
}



.indexLeft2 {
  grid-area: indexLeft2;
  color: blue
}

.indexCenter {
  grid-area: indexCenter;
  background-color: var(--header-background-color);
  color: var(--header-text-color);
  padding: 30px;
  font-size: 14px
}

.indexCenter2 {
  grid-area: indexCenter2;
  color: blue
}

.indexRight {
  grid-area: indexRight;
  color:red
}

.indexRight2 {
  grid-area: indexRight2;
  text-align: right;
  color:red
}

/* -------------------------------------------------------- */
/* NAVIGATION */
/* -------------------------------------------------------- */

/* -------------------------------------------------------- */
/* SIDEBAR */
/* -------------------------------------------------------- */

.layout {
  /*width: 100%;*/
  display: grid;
  margin: 40px 50px;
  grid-gap: 15px;
  grid-template: 
    "subpHeader subpHeader" auto 
    "aside main" auto
    "footer footer" auto 
    / 275px 1fr;
    /* var(--sidebar-width) auto; */
  /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
}

.subpHeader {
  grid-area: subpHeader;
  background-color: var(--header-background-color);
  color: var(--header-text-color);
  padding: 30px;
}

.leftalign  {
  float: left;
  vertical-align: middle
}

.rightalign  {
  float: right;
  vertical-align: middle
}

.aside {
  grid-area: aside;
  /*border: var(--border);
  /*border-radius: var(--round-borders); */
  overflow: auto;
  background: var(--header-background-color);
  padding: 30px;
  color: var(--header-text-color);
  max-height: 800px;
  overflow-y: auto.
}

.main {
  grid-area: main;
  background: var(--header-background-color);
  padding: 30px;
  color: var(--header-text-color);
  max-height: 800px;
}

.summarybox {
  background: #4A9B36;
  padding: 7px;
  margin: 10px 0px 10px 0px ;
  color: var(--header-text-color)
}

/*  */
.linkbox  {
  background: #3A792A;
  padding: 0px 2px 0px 2px;
  color: var(--header-text-color)
  link-color: 
}

a {
  color: var(--header-text-color);
  font-weight: bold
}
a:link {
  text-decoration: none;
}

/* -------------------------------------------------------- */
/* UNUSED DROPDOWN */
/* https://jsfiddle.net/Cerebrl/uhykY/ */
/* -------------------------------------------------------- */

  .dropdown {
    background: #5BBD42;
    padding: 2px 0px 2px 12px;
    color: var(--header-text-color);
  }
  
  .wrapper {
        display: inline-block;
        width: 180px;
        margin: 0 10px 0 0;
        height: 20px;
        position: relative;
    }
    
  .parent {
        height: 100%;
        width: 100%;
        display: block;
        cursor: pointer;
        line-height: 30px;
        height: 30px;
        border-radius: 5px;
        background: #F9F9F9;
        border: 1px solid #AAA;
        border-bottom: 1px solid #777;
        color: #282D31;
        font-weight: bold;
        z-index: 2;
        position: relative;
        -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
        -webkit-transition-delay: .8s;
        text-align: center;
    }
    
  .parent:hover,
  .content:hover ~ .parent {
        background: #fff;
        -webkit-transition-delay: 0s, 0s, 0s;
    }
    
  .content:hover ~ .parent {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        z-index: 0;
    }
    
  .content {
        position: absolute;
        top: 0;
        display: block;
        z-index: 1;
        height: 0;
        width: 180px;
        padding-top: 30px;
        -webkit-transition: height .5s ease;
        -webkit-transition-delay: .4s;
        border: 1px solid #777;
        border-radius: 5px;
        box-shadow: 0 1px 2px rgba(0,0,0,.4);
    }
    
  .wrapper:active .content {
        height: 123px;
        z-index: 3;
        -webkit-transition-delay: 0s;
    }
    
  .content:hover {
        height: 123px;
        z-index: 3;
        -webkit-transition-delay: 0s;
    }
    
    
  .content ul {
        background: #fff;
        margin: 0;
        padding: 0;
        overflow: hidden;
        height: 100%;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    
  .content ul a {
        text-decoration: none;
    }
    
  .content li:hover {
        background: #eee;
        color: #333;
    }
    
  .content li {
        list-style: none;
        text-align: left;
        color: #888;
        font-size: 14px;
        line-height: 30px;
        height: 30px;
        padding-left: 10px;
        border-top: 1px solid #ccc;
    }
    
  .content li:last-of-type {
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }