BODY {
  font-family: "RobotoDraft", "Dejavu Sans", "Arial", helvetica, sans;
}
#background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-perspective: 500px;
  perspective: 500px;
  -webkit-perspective-origin: 50% 30%;
  perspective-origin: 50% 30%;
}
#background .clouds {
  background-image: url("clouds-seamless.jpg");
  background-size: auto auto;
  background-repeat: repeat;
  position: absolute;
  overflow: hidden;
  left: -500%;
  right: -500%;
  top: -500%;
  bottom: 0;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
}
#background .gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, #3981c0 17%, #629dd0 30%, #cedbe9 40%, rgba(38, 86, 140, 0) 100%);
}
/* Medium wide --- boxes but no cow */
@media (min-width: 38em) {
  BODY {
    display: -webkit-box;
    /* safari */
    display: -webkit-flex;
    /* safari */
    display: flex;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
  }
  #container {
    position: relative;
    display: -webkit-box;
    /* safari */
    display: -webkit-flex;
    /* safari */
    display: flex;
    flex-direction: row;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    width: 36em;
  }
  #titlebar {
    position: absolute;
    top: 0;
    width: 36em;
  }
  #left {
    width: 10em;
    margin-top: 27px;
    margin-right: 1em;
  }
  #right {
    width: 25em;
    margin-top: 27px;
  }
  #logo {
    display: none;
  }
}
/* Very wide --- show cow logo */
@media (min-width: 56em) {
  #container {
    width: 44em;
  }
  #logo {
    display: block;
    width: 7em;
    left: 0;
    margin-right: 1em;
    margin-top: 3em;
  }
  #titlebar {
    left: 8em;
  }
}
/* Narrow --- single column */
@media (max-width: 38em) {
  #container {
    width: 100%;
    margin-top: 3em;
    padding-top: 1px;
    /* uurgh, prevents margins collapsing */
    position: relative;
  }
  #left,
  #right {
    width: auto;
    margin: 1em;
  }
  #left {
    margin-top: 27px;
    min-height: 9em;
  }
  #titlebar {
    display: block;
    position: absolute;
    top: 1px;
    /* counters padding-top on container */
    left: 1em;
    right: 1em;
  }
  #logo {
    display: block;
    width: 7em;
    position: absolute;
    right: 1em;
    top: 27px;
    margin-top: 1em;
    margin-right: 1em;
  }
}
/* Common layout goes here */
#titlebar {
  border-bottom: 1px solid black;
}
#left,
#right {
  background-color: rgba(255, 255, 200, 0.3);
}
#left > *,
#right > * {
  font-size: 10pt;
}
#left UL {
  padding: 1em;
}
#left UL LI {
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  list-style-type: none;
  font-weight: bold;
}
#right UL {
  padding-left: 2em;
  padding-right: 1em;
}
#right UL LI {
  line-height: 120%;
  padding-top: .5em;
  padding-bottom: .5em;
  list-style-image: url('arrow.png');
}
#right UL LI .date {
  color: #444;
  font-size: 80%;
}
#right UL LI .subtitle {
  display: block;
  font-size: 80%;
  padding-left: 2em;
}
#right #rss {
  display: block;
  padding-top: 1em;
  padding-left: 1em;
  font-weight: bold;
}
#right #rss IMG {
  width: 1em;
  height: 1em;
}
#right > A {
  display: block;
  color: #444;
  font-weight: bold;
  padding-left: 1em;
  padding-bottom: 1em;
}