/* -- Responsive design additions -- */

@media only screen and (max-width: 899px) {
/* For mobile: */

  body {
      background-color: #111;
      justify-content: center;
      padding: 20px;
      font-family: Courier, monospace;
   } 
   
   a:link {
      color: #fff;
      text-decoration: none;
   }
   
   a:visited {
      color: #fff;
   }
   
   ul { 
      width: 100%;
      margin: 15px 0px 15px -40px;
   }
   
   ul li {
      list-style: none;
      border-left: solid 2px #ffb000;
      border-top: solid 2pt #ffb000;
      text-align: left;
      margin: 0;
   } 

   ul li a {
      display: block;
      color: #ffb000;
      text-decoration: none;
      padding: .25em;
      padding-top: 8px;
      border-bottom: solid 1px #ffb000;
      border-right: solid 2px #ffb000;
      
   }

   h1, h2, h3, h4 {
      line-height: 1em;
      color: #ffb000;
   } 
   
   img {
      max-width: 100%;
   }
   
   iframe {
      display: none;
   }      
   
   .daughter-container {
      color: #ffb000;
   }
   
   .home-container {
      color: #ffb000;
   }
   
   .item-scroll {
      border: 0px solid #ffb000;     
      align-items: center;
      font-size: 14px;
      font-weight: bold;
      overflow-y: auto;
      overflow-x: auto;
      padding-left: 5px;
   } 
     
   .item-noscroll {
      border: 2px solid #ffb000;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: #ffb000;
      font-weight: bold;
      overflow-y: hidden;
      overflow-x: hidden;
      padding-left: 15px;
      padding-right: 5px;
      padding-top: 5px;
      padding-bottom: 5px;
   }

   .epi-hilite {
      color: white;
      font-size: 18px;
   }
   
   .sidebar-wrapper h1 {
      font-size: 20px;
      padding-top: 7px;
   }

   .running-log {
      display: none;
   } 

   .desktop-post-links {
      display: none;
   }
   
   /* Width sets the width of the content block */
   /* This is optimized for a vertical phone screen.*/
   .daughter-content-item { 
      width: 19em;   
      font-size: 18px;
      color: #ffb000;
      font-weight: normal;
   } 
   
/* Navbar for class chat transcript */

   .nav-inline-li { 
      display:inline;
      border-left: 0;
      border-top: 0;
   }
   
    .nav-inline-a { 
      display:inline;
      border-bottom: 0;
      border-right: 0;
   }  
   
   .nav-inline-ul { 
      width: 100%;
      margin: left;
      padding-bottom: 5px;
   } 
   
   /* daughter content theme */

   .daughter-main-cell-wrapper {
      border: 0;
      left: 10px;
   }

   .daughter-main-cell-wrapper a:link {
      color: #fff;
      text-decoration: none;  
   }

   .daughter-main-cell-wrapper a:visited {
     color: #fff;
   }

   .daughter-main-cell-wrapper a:hover { 
      color: #777;
   }

   .daughter-main-cell-wrapper h1 {
      font-size: 20px;
      padding-top: 7px;
   }  
}


@media only screen and (min-width: 900px) {
/* For desktop: */

   /* ------------- Grid definitions ------------- */

   .home-container {
      display: grid;
      width: 95%;
      height: 95%;
      grid-template-columns:225px 1fr 225px;
      grid-template-rows: 95px 1fr 1fr 50px;
      
      grid-gap: 1rem;
      position: absolute;
      top: 2.5%;
      bottom: 2.5%;
      left: 2.5%;
      right: 2.5%;
      overflow: hidden;
      z-index:-1;
      color: #ffb000;
   }

   .daughter-container {
      display: grid;
      width: 95%;
      height: 95%;  
      grid-template-rows: auto 1fr 1fr 50px; 
      grid-gap: 1rem;
      position: absolute;
      top: 2.5%;
      bottom: 2.5%;
      left: 2.5%;
      right: 2.5%;  
      z-index:-1;
      color: #ffb000;
   }

   .header {
      grid-row: 1 / 2;
      grid-column: 1 / 4;
      flex-direction: row;
      justify-content: center;
      align-items: center;
   }

   .home-main-cell {
      grid-row: 2 / 4;
      grid-column: 2 / 3;
   }

   .daughter-main-cell {
      grid-row: 2 / 4;
      grid-column: 1 / 4;
   }

   .sidebar-left {
      grid-row: 2 / 4;
      grid-column: 1 / 2
   }

   .sidebar-right {
      grid-row: 2 / 4;
      grid-column: 3 / 4;
   }

   .footer {
      grid-row: 4 / 5;
      grid-column: 1 / 4;
   }

   /* ------------- Element customizations ------------- */

   body {
      background: #111;
      display: flex;
      justify-content: center;
      padding: 20px;
      font-family: Courier, monospace;
   }

   h1, h2, h3, h4{
      line-height: 1em;
   }

   ul { 
      width: 14em;
      margin: 15px 0px 15px -40px;
   }

   ul li {
      list-style: none;
      border-left: solid 2px #ffb000;
      border-top: solid 2pt #ffb000;
      text-align: left;
      margin: 0;
   } 


   ul li a {
      display: block;
      color: #ffb000;
      text-decoration: none;
      padding: .25em;
      padding-top: 8px;
      border-bottom: solid 1px #ffb000;
      border-right: solid 2px #ffb000;      
   }

   iframe {
      margin: 0;
      padding: 0;
      border: 0;
      width: 100%;
      height: 100%;
   }

   a:link {
      color: #fff;
      text-decoration: none;
   }

   a:visited {
      color: #fff;
   }

   a:hover {
      color: #777;
   }

   /* ------------- Class definitions ------------- */

   .header-wrapper {
      display: flex;
      flex-direction: row;
      align-items: center;
   } 

   .header-wrapper h1 {
      width:40%;
      padding-left: 20px;
      padding-right: 10px;
      line-height: 1em;
   }

   .header-wrapper p {
      width: 65%;
      padding-left: 10px;
      padding-right: 20px;
      padding-top: 10px;
      padding-bottom: 10px;
   }

   /* sidebar-wrapper classes enable the menu block color change */

   .sidebar-wrapper {
      border: 0;
      left: 10px;
   }

   .sidebar-wrapper a:link {
       color: #fff;
   }

   .sidebar-wrapper a:visited {
       color: #fff;
   }

   /* orange-brown menu background is #993000 */
   .sidebar-wrapper a:hover { 
      background-color: #993000;
   }

   .sidebar-wrapper h1 {
      font-size: 20px;
      padding-top: 7px;
   }

   .item-scroll {
      border: 2px solid #ffb000;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 14px;
      font-weight: bold;
      overflow-y: auto;
      overflow-x: hidden;
      padding-left: 5px;
   }

   .item-noscroll {
      border: 2px solid #ffb000;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-weight: bold;
      overflow-y: hidden;
      overflow-x: hidden;
      padding-top: 7px;
   }

   .epi-hilite {
      color: white;
      font-size: 18px;
   }

   .iframe-sidebar {
      color: white;
   }

   .right-header {
       float: right;
   }

   .daughter-content-item { 
      width: 50em;
      font-size: 16px;
      font-weight: normal;
   }
   
   .mobile-post-links {
      display: none;
   }
   		   
   .programlisting {
      display: inline-block;
      background-color: #333333;
      padding: 10px;
      font-size: 80%;
   }			

   .daughter-content-item { 
      width: 50em;   /* Sets the width of the content block */
      font-size: 18px;
      font-weight: normal;
   }

   /* daughter content theme */

   .daughter-main-cell-wrapper {
      border: 0;
      left: 10px;
   }

   .daughter-main-cell-wrapper a:link {
      color: #fff;
      text-decoration: none;  
   }

   .daughter-main-cell-wrapper a:visited {
     color: #fff;
   }

   .daughter-main-cell-wrapper a:hover { 
      color: #777;
   }

   .daughter-main-cell-wrapper h1 {
      font-size: 20px;
      padding-top: 7px;
   }

   /* 
   This creates the horizontal scroll-bar for program listings.
   Options on overflow-x are scroll, hidden, auto. 
   https://codeburst.io/how-to-create-horizontal-scrolling-containers-d8069651e9c6
   */
      
   .horizontal-scrolling-wrapper {
     	overflow-x: auto;
     	overflow-y: hidden;
     	white-space: nowrap; 
   }


   /* 
   Some code styling
   */

   .prompt {} /* default for now */

   .command {
        font-weight: strong;
   }

   .computeroutput {} /* default for now */


/* Nav for class chat transcript */

   .nav-inline-li { 
      display:inline;
      border-left: 0;
      border-top: 0;
   }
   
    .nav-inline-a { 
      display:inline;
      border-bottom: 0;
      border-right: 0;
   }  
   
   .nav-inline-ul { 
      width: 100%;      
      margin: auto;
      padding-bottom: 15px;
   }
   
   .nav-return {
      text-align: right;
   }
   
/* Style for random song widget */
   
   .songs a:link {
      color: #fff;
      text-decoration: none;  
   }

   .songs a:visited {
     color: #fff;
   }

   .songs a:hover { 
      color: #777;
   }
   
}