body {
  margin: 0 auto;
  /*max-width: 60em;*/
  font-family: sans-serif;
  color: #333333;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: "head head"
                       "nav  nav "
                       "main main"
                       "foot foot";
}
/*
@media (min-width: 50em) {
  body {
    grid-template-columns: 25% 75%;
    grid-template-areas: "head head"
                         "nav  main"
                         "foot foot";
  }
}
*/

/*
article,
section,
*/
main,
footer {
  padding: 0.5em;
  margin: 0.5em;
}

header {
  padding: 0.5em;
  background: #F1F3F4;
  grid-area: head;
}

nav {
  grid-area: nav;
}

main {
  grid-area: main;
}

h2 {
  color: white;
  background: hsl(13, 96%, 49%) ;
  box-shadow: 0.1em 0.1em 0.1em 0 hsl(0, 0%, 50%) ;
  padding: 0.2em 0.2em 0.2em 2em;
  width: 10em;
  margin-top: 0em;
  margin-left: -0.5em;
  position: relative;
}

h2::before {
  content: "";
  position: absolute;
  display: block;
  height: 0;
  width: 0;
  top: 1em;
  left: -0.5em;
  border-style: solid;
  border-width: 0.6em;
  border-color: transparent hsl(13, 96%, 35%) transparent transparent;
  z-index: -1;
}

/*
article {
  background: #ffede0;
  border-color: #df6c20;
  grid-area: main;
}
*/

footer {
/*
  background: #e4ebf2;
  border-color: #8a9da8;
*/
  grid-area: foot;
}

/*
body {
  margin: 0 auto;
  max-width: 60em;
  display: flex;
  flex-flow: row wrap;
}

header, nav, footer {
  flex: 1 100%;
}

article {
  flex: 3 1 0%;
}
*/

/* Settings for top navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 0.8em 1em;
  text-decoration: none;
  font-size: 1em;
}
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
.topnav .active {
  background-color: #4CAF50;
  color: white;
}
.topnav .icon {
  display: none;
}
.topnav {
  overflow: hidden;
  background-color: #333;
}
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* TODO: move to a class */
table {
  max-width: 60em;
  border-collapse: collapse;
  border: 1px solid #666;
  padding: 0.5em;
}
th { 
  padding-left: 0.5em;
  padding-right: 0.5em;
  background-color: #666; 
  color: #fff; 
  border: 1px solid #666;
}
td {
  background-image: linear-gradient(#f9f9f9, #e3e3e3);
}
tr td {
  padding-left: 0.5em;
  padding-right: 0.5em;
}

/* Styles for mediadb navigation */
div.mediadb_nav {
  width: 30%;
  max-width: 20em;
  float: left;
  /*display: inline-block; TODO: check what it does */
  border: 1px solid #666;
  /*border-radius: 0px 0.5em 0.5em; TODO */
  margin-right: 1em;
  margin-bottom: 1em;
}
div.mediadb_nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
}
div.mediadb_nav li a {
  display: block;
  color: #000;
  padding: 0.2em 1em;
  text-decoration: none;
}
/* Change the link color on hover */
div.mediadb_nav li a:hover {
  background-color: #555;
  color: white;
}

div.mediadb_main {
  width: 65%;
  float: left;
}
/* Responsive layout - when the screen is less than 30em wide, make the two
 * columns stack on top of each other instead of next to each other */
@media screen and (max-width: 60em) {
  div.mediadb_nav {
    width: 100%;
  }
  div.mediadb_main {
    width: 100%;
  }
}

/* Styles for mediadb input forms */
div.mediadb_add {
  background: #F1F3F4;
  border: 1px solid #666;
  padding: 0.5em;
  max-width: 30em;
}
div.mediadb_add * {
  box-sizing: border-box;
}
div.mediadb_add input, select, textarea {
  width: 60%;
  float: left;
}
div.mediadb_add label {
  width: 40%;
  display: inline-block;
  float: left;
  text-align: right;
  padding-right: 1em;
}
div.mediadb_add input[type=submit] {
  float: right;
  background-color: #4CAF50;
  color: white;
  padding: 0.7em 1em;
  border: none;
  cursor: pointer;
}
div.mediadb_add input[type=submit]:hover {
  background-color: #45a049;
}
div.mediadb_add .row {
  margin: 0.5em;
}
/* Clear floats after the columns */
div.mediadb_add .row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 30em wide, make the two
 * columns stack on top of each other instead of next to each other */
@media screen and (max-width: 30em) {
  div.mediadb_add label {
    text-align: left;
  }
  div.mediadb_add label, input, select, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}