rowsandall/static/css/styles2.css

* {box-sizing: border-box;}

    .wrapper {
        max-width: 1400px;
        margin: 0 auto;
        font: 1.2em Helvetica, arial, sans-serif;
    }

    
    .wrapper > * {
        /*    border: 2px solid #f08c00; */
        border 0;
        padding: 5px; 
    }

    a {
        text-decoration: none;
        color: #1c75bc;
    }

    nav ul {
        list-style: none;
        margin: 0;
        display: flex;
        justify-content: space-between;
    }

    footer ul {
        list-style: none;
        display: flex;
        justify-content: space-between;
        /* justify-content: flex-start; */
        flex-direction: row;
    }

    footer ul ul {
        flex-direction: column;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 0;
        padding-right: 2em;
    }

    footer li {
        margin: 0;
        padding-bottom: 0.4em;
    }

    footer h1 {
        font-weight: bold;
        text-align: left;
        font-size: 1.0em;
    }

    header ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    aside ul {
        margin-bottom: 0;
        margin-top: 15px;
        margin-bottom: 15px;
        left: 15px;
    }

    aside ul label,
    aside ul a {
        padding-left: 15px;
    }

    aside ul ul label,
    aside ul ul a {
        padding-left: 30px;
    }
    
    aside ul ul ul label,
    aside ul ul ul a {
        padding-left: 45px;
    }

    aside ul ul ul ul label,
    aside ul ul ul ul a {
        padding-left: 60px;
    }
    
    aside li,
    aside a,
    aside ul label,
    aside ul li,
    aside ul a,
    aside ul ul label,
    aside ul ul li,
    aside ul ul a,
    aside ul ul ul label,
    aside ul ul ul li,
    aside ul ul ul a {
        list-style: none;
        margin: 0;
        background: #35383d;   
    }


    aside ul label:hover,
    aside ul a:hover,
    aside ul ul label:hover,
    aside ul ul a:hover,
    aside ul ul ul label:hover,
    aside ul ul ul a:hover {
        background: #4d5158; 
    }


    aside a {
        color: #a0f6aa;
        text-decoration: none;
        padding: 0.2em 0em 0.2em 0em;
    }



        
    aside .cd-accordion-menu {
        width: 100%;
        max-width: 600px;        
        background: #35383d;   
    }
    
    aside .cd-accordion-menu ul {
        /* by default hide all sub menus */
        display: none;
    }

    aside .cd-accordion-menu li {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    aside .cd-accordion-menu input[type=checkbox] {
        /* hide native checkbox */
        position: absolute;
        opacity: 0;
    }    

    aside .cd-accordion-menu label,
    aside .cd-accordion-menu a {
        position: relative;
        display: block;
        color: #dddddd;
        font-size: 1.2em; 
    }

    aside i {
        font-size: 1.2em;
    }

    aside a::before {
        content: '\00a0';
        width: 16px;
        height: 16px;
        display: inline-block;
        font-size: inherit;
        text-rendering: auto;
    }
                 

    aside .cd-accordion-menu label::before
    {
        /* icons */
        font:  normal normal normal 1.2em/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        content: '\f0da';
        display: inline-block;
        width: 16px;
        height: 16px;
        
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform:  translateY(0%);
        -o-transform: translateY(0%);
        transform: translateY(0%); 
    }

    aside .cd-accordion-menu label {
        cursor: pointer;
        background: #35383d;
    }


    aside .cd-accordion-menu input[type=checkbox]:checked + label::before {
        /* rotate arrow */
        -webkit-transform: translateY(20%) rotate(90deg);
        -moz-transform: translateY(20%) rotate(90deg);
        -ms-transform:  translateY(20%) rotate(90deg);
        -o-transform: translateY(20%) rotate(90deg);
        transform: translateY(20%) rotate(90deg); 

    }
    
    
    aside .cd-accordion-menu input[type=checkbox]:checked + label + ul,
    aside .cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {
        /* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/
        /* show children when item is checked */
        display: block;
    }
    

    
    user ul {
        list-style: none;
        margin: 0;
        padding: 0.2em 0.0em 0.2em 0.0em;
        display: flex;
        justify-content: flex-end;
    }

    user a i {
        color: #1c75c;
    }

    nav li {
        padding: 0.2em 0.0em 0.2em 0.0em;
    }

    nav a {
        color: white;
    }
    
    nav a i {
        color: white;
    }

.main-head {
    grid-area: header;
}
.main-user {
    grid-area: user;
    background: #ededed;
}

.content {
  grid-area: content;
  padding:  1.2em 1.2em 1.2em 1.2em;
}
.main-nav {
    grid-area: nav;
    background: #1c75bc;
}
.side {
  grid-area: sidebar;
  background: #35383d;
  padding: 0;
}

.ad {
  grid-area: ad;
  background: #35383d;
  color: #dddddd;
  padding: 1em 1em 1em 1em;
}
.main-footer {
  grid-area: footer;
  background: #ededed;
  padding:  1.2em 1.2em 1.2em 1.2em;
}

.wrapper {
  display: grid;
/*  grid-gap: 2px; */
  grid-template-areas: 
  "header"
   "user"
   "nav"
   "content"
   "sidebar"
   "ad"
   "footer";
}

@media (max-width: 449px) {
    nav a {
        font-size: 0px;
    }

    nav a i {
        font-size: 20px;
    }
}

@media (min-width: 450px) {
  .wrapper {
    grid-template-columns: 1fr 3fr;
    grid-template-areas: 
    "header  header"
        "user user"
      "nav     nav"
      "sidebar content"
      "ad      footer";
  }

  nav ul {
      display: flex;
      justify-content: space-between;
  }

  header ul {
/*      flex-direction: row;*/
      display: flex;
      justify-content: space-between; 
  }

  
}



@media (min-width: 768px) {
  .wrapper {
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-areas: 
    "header header  user"
        "nav nav  nav"
      "sidebar     content content"
      "sidebar     content content"
      "ad  footer footer"
   }

  nav ul {
      flex-direction: row;
/*      display: flex;
      justify-content: space-between; */
  }

   header ul {
     flex-direction: row; 
   }



}


aside .cd-accordion-menu.animated label::before {
  /* this class is used if you're using jquery to animate the accordion */
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}