div#flexGrid{
    display:flex;
    flex-direction: row;
}

section{
    display:inline-flex;
    flex-direction: row-reverse;;
    width:100%;
}
.flexTopBar{
 background-color: lightgrey;
 height:3em;
 width:auto;
}
.flexContentArea{
    background-color: whitesmoke;
    width:100%;
    height: 100vh;
}

.flexActionBar{
    background-color: black;
    height:100vh;
    width:3em;
}
.flexChattyBox{
    background-color: grey;
    width:15em;
    height:100vh;
}

//---------------------------------------------------------------------------
div#cssGrid{
    display:grid;
    grid-template-columns: auto 15em 3em;
    grid-template-rows: 3em 10em 1fr;
    height:100vh;
    transition: 15s;
}

div#cssGrid:hover{
    animation: slide-Out 1s;
    -webkit-animation: slide-Out 1s;
    -moz-animation: slide-Out 1s;
    -o-animation: slide-Out 1s;

    animation-timing-function:ease-in-out;
    -webkit-animation-timing-function:ease-in-out;  
    -moz-animation-timing-function:ease-in-out;  
    -o-animation-timing-function:ease-in-out;  
}

  @keyframes slide-Out{
    0% {
        grid-template-columns: auto 15em 3em;  
      }
    100% {
        grid-template-columns: auto 0em 3em; 
    }
  }
  @-webkit-keyframes slide-Out{
    from {
        grid-template-columns: auto 15em 3em;  
      }
    to {
        grid-template-columns: auto 0em 3em; 
    }
  }
  @-moz-keyframes slide-Out{
    from{
      grid-template-columns: auto 15em 3em; 
    }
    to{
      grid-template-columns: auto 0em 3em; 
    }
  }
  @-o-keyframes slide-Out{
    from{
      grid-template-columns: auto 15em 3em; 
    }
    to{
      grid-template-columns: auto 0em 3em; 
    }
  }

.topBar{    
    grid-area: 1/1/1/1; //short form of properties: grid-row-start/grid-column-start/grid-row-end/grid-column-end
    background-color: #f2f2f2;
}

.actionBar{
    grid-area:1/3/4/3; 
    background-color: #373737;
}

.cheerBar{
    grid-area: 1/2/4/2;
    background-color: #d4d0d0;
}