/* mobile */
@media screen {
  #container {
    grid-template-columns: auto;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "header"
      "main"
      "footer";
  }

  #details, #metadetails {
    float: none;
  }

  .ccdwidth {
    width: calc(100vw - 60px);
  }

  #searchBox {
    width: calc(100vw - 60px);
  }

  .siteid {
    background: url(/images/logo.png);
    padding: 2px 4px 2px 28px;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 24px 24px;
    font-size: 12px;
  }

  .example {
    width: calc(100vw - 60px);
 }

  header button {
    visibility: collapse;
  }
}

/* tablet */
@media screen and (min-width:768px) {
  #container {
    grid-template-columns: 1fr 828px 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      ". header ."
      ". main ."
      "fspace1 footer fspace2";
  }

  #searchBox {
    width: 400px;
  }

  .example {
    width: inherit;
  }


  .ccdwidth {
    width: 480px;
  }

  .siteid {
    padding: 4px 2px 2px 32px;
    background-size: 28px 28px;
    font-size: 24px;
  }

  #details {
    float: left;
  }

  #metadetails {
    float: right;
    width: 220px;
  }

  header button {
    position: absolute;
    top: 0px;
    left: calc((100vw - 768px) / 2 + 592px);
    visibility: visible;
  }
}

/* desktop */
@media screen and (min-width:1320px) {
  #container {
    grid-template-columns: 1fr 300px 928px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      ". header main ."
      "fspace1 footer footer fspace2";
  }

  header button {
    position: inherit;
  }

  #details {
    float: left;
  }

  .ccdwidth {
    width: 580px;
  }

  header {
    border-right: 1px solid #eee;
  }

  #metadetails {
    float: right;
    width: 220px;
  }

  #searchBox {
    margin: 20px 0px 20px 0px;
    width: 252px;
  }

  .contribute {
    width: 251px;
  }

  header {
    border-bottom: none;
  }

  .siteid {
    padding: 2px 2px 2px 28px;
    background-size: 24px 24px;
    font-size: 18px;
  }

  footer h2, footer h3, footer h4, footer p {
    padding-left: 300px;
  }
}