@import url('https://fonts.googleapis.com/css?family=Alegreya+SC|Alegreya+Sans:300,400|Cousine');

  sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
        this.className+=" sfhover";
      }
      sfEls[i].onmouseout=function() {
        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
      }
    }
  }
  if (window.attachEvent) window.attachEvent("onload", sfHover);



  /* ---------added up to here   */

  .affiliations {
    margin: 0;
  }

  .affiliations img {
    margin: 0;
    height: 30px;
    padding: 5px;
  }

  .affiliations a, .affiliations a:hover {
      border: none;
  }

  /* ==========================================================================
     Styling and layout for all media
     ========================================================================== */

  /* HTML5 display definitions
     ========================================================================== */

  /**
   * Correct `block` display not defined for any HTML5 element in IE 8/9.
   * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
   * Correct `block` display not defined for `main` in IE 11.
   */
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  main,
  nav,
  section,
  summary {
    display: block;
  }

  /**
   * 1. Correct `inline-block` display not defined in IE 8/9.
   * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
   */
  audio,
  canvas,
  progress,
  video {
    /* 1 */
    display: inline-block;
    /* 2 */
    vertical-align: baseline;
  }

  /**
   * Prevent modern browsers from displaying `audio` without controls.
   * Remove excess height in iOS 5 devices.
   */
  audio:not([controls]) {
    display: none;
    height: 0;
  }

  /**
   * Address `[hidden]` styling not present in IE 8/9/10.
   * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
   */
  [hidden],
  template {
    display: none;
  }

  /**
   * 1. Always force scrollbar padding so we don't get 'jumping'.
   * 2. Prevent iOS text size adjust after orientation change, without disabling
   *    user zoom.
   * 3. As 2 above, for Windows Phone.
   */
  html {
    -webkit-tap-highlight-color: rgba(0, 102, 255, 0.5);
    /* 1 */
    overflow-y: scroll;
    /* 2 */
    -webkit-text-size-adjust: 100%;
    /* 3 */
    -ms-text-size-adjust: 100%;
  }

  /**
   * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
   */
  b,
  strong {
    font-weight: bold;
  }

  /**
   * Prevent `sub` and `sup` affecting `line-height` in all browsers.
   */
  sub,
  sup {
    /* 12px */
    font-size: 0.8571429em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sup {
    top: -0.5em;
  }

  sub {
    bottom: -0.25em;
  }

  /**
   * 1. Remove the gap between images and the bottom of their containers.
   * 2. Remove border when inside `a` element in IE 8-10.
   */
  img {
    /* 1 */
    vertical-align: middle;
    /* 2 */
    border: 0;
  }

  /**
   * Consistent tables.
   */
  table {
    margin-bottom: 1em;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
  }

  /**
   * Make table cells align top and left by default.
   */
  th,
  td {
    vertical-align: top;
    text-align: left;
  }

  /**
   * Address paddings set differently.
   */
  menu,
  ol,
  ul {
    padding: 0 0 0 2em;
  }

  /**
   * Remove margins from nested lists.
   */
  li > ul,
  li > ol {
    margin: 0;
  }

  /**
   * Address margins set differently.
   */
  dd {
    margin: 0 0 0 2em;
  }

  /**
   * Italicise definition terms.
   */
  dt {
    font-style: italic;
  }

  /* Clearfix
     ========================================================================== */

  /**
   * Clearfix using the 'A new micro cleafix hack' method.
   *
   * More info: http://nicolasgallagher.com/micro-clearfix-hack/
   */
  .clearfix:after,
  header:after,
  nav ul:after,
  .container:after,
  footer:after,
  .entry-content:after,
  #paginator:after,
  #monthly-list:after {
    content: "";
    display: table;
    clear: both;
  }


  /* ==========================================================================
     MP - simple version header for small mobiles */
  #head {
    width: auto;
    margin: 0 auto;
    padding: 0;
    height: 120px;
    background: #996666;
    background-image: url(/images/labss.png), url(/images/44.png);
    background-size: 600px, auto;
    background-repeat: no-repeat, no-repeat;
    background-position: 10% 70%, right center;
  }


  /* Layout
     ========================================================================== */

  /**
   * Outer wrapper for main layouts.
   *
   * Example HTML:
   *
   * <div class="wrapper">
   *     <div class="container">
   *         Content
   *     </div>
   * </div>
   */
  .wrapper {
    border-bottom: solid 1px #ccc;
  }

  div.container {
    margin: 0 auto;
    max-width: 100em;
  }

  /**
   * Styling for articles.
   *
   * 1. Prevent really, really long words in article from breaking layout.
   */
  [role="main"] {
    float: left;
    width: 60%;
    margin: 2em 1em 2em 2em;
    /* 1 */
    word-wrap: break-word;
  }

  /**
   * Styling for sidebar.
   *
   * Initially the sidebar appears under main content, it is then repositioned
   * with media queries at 2nd breakpoint.
   *
   * 1. Prevent really, really long words in article from breaking layout.
   */
  [role="complementary"] {
    float: left;
    width: 20em;
    margin: 2em 2em 2em 1em;
    background: #fff;
    border: solid 1px #CAD3D3;
    border-radius: 10px;
    box-shadow: 1px 1px 1px #aaa;
    padding: 10px 20px;
    word-wrap: break-word;
  }

  [role="search"] p {
    margin-top: 0;
  }

  .entry-title, .entry-content {
    background: #fff;
    border: solid 1px #CAD3D3;
    padding: 10px 20px;
  }

  .entry-image {
    margin: 0 1em 1em 0em;
    padding: 0;
    float: left;
  }

  .entry-title {
    border-radius: 10px 10px 0 0;
    box-shadow: 1px 1px 1px #aaa;
  }

  img.people {
    border-width: 0 1px;
  }

  .entry-content {
    margin-bottom: 1em;
    border-top-width: 0;
    border-radius: 0 0 10px 10px;
    box-shadow: 1px 1px 1px #aaa;
  }


  /**
   * Additional styling for child content within `footer`.
   */
  #subfoot {
    padding: 5px;
    background: white;
  }

  #subfoot p {
   margin: 0;
  }

  /* Links
     ========================================================================== */

  a {
    text-decoration: none;
    font-weight: 400;
    color: #173939;
    background-color: transparent;
    border-bottom: dashed 1px #CAD3D3;
  }

  a:visited {
    color: #284040;
  }

  a:hover {
    color: #5F2626;
    border-bottom: solid 1px #6B4242;
  }


  h1 a, h2 a, h3 a, h4 a, h5 a {
    border: none;
  }

  a:focus {
    outline: thin dotted #999;
  }

  /* Navigation */

  nav h1 {
    display: none;
  }

  nav {
    background-color: #E7D3C3;
    border-top: solid 1px #5F2626;
    border-bottom: solid 1px #BCA28D;
    letter-spacing: 1px;
  }

  nav ul {
    margin: 0 auto;
    list-style: none;
    list-style-image: none;
    line-height: 1;
  }

  nav ul li ul {
    padding: 0;
    width: 9em;
    position: absolute;
    left: -999em;
  }
  #nav li:hover ul {
    left: auto;
  }

  nav li {
    float: left;
    margin: 0;
    width: 9em;
  }

  #nav li a {
    padding: 7px;
    display: block;
    color: black;
    background-color: #E7D3C3;
    border: none;
    border-right: solid 1px #BCA28D;
  }
  #nav li:first-child a {
    border-left: solid 1px #BCA28D;
  }

  #nav li ul li a {
    border: solid 1px #BCA28D;
    border-top: none;
  }
  #nav li ul li:first-child a {
    border-top: solid 1px #BCA28D;
  }
  #nav li ul li:last-child a {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }


  #nav a:hover {
    color: black;
    background-color: #BCA28D;
    background-image: -webkit-linear-gradient(#E7D3C3, #BCA28D);
    background-image: linear-gradient(#E7D3C3, #BCA28D);
  }

  #nav a.active_class {
    background-color: #996666;
    color: white;
    font-weight: bold;
  }
  #nav a.active_class:hover {
    background-image: -webkit-linear-gradient(#996666, #5F2626);
    background-image: linear-gradient(#996666, #5F2626);
  }



  /* Typography
     ========================================================================== */


  body {
    /* 1 */
    margin: 0;
    background: #FBF7F4;
    font-size: 100%;
    font-family: 'Alegreya Sans', sans-serif;
    font-weight: 300;
    line-height: 1.5;
    color: #333;
  }

  .entry-content {
    font-size: 1.5em;
  }

  nav {
    font-size: 1.2em;
  }

  h1, h2, h3, h4, h5 {
    font-family: 'Alegreya SC', serif;
    letter-spacing: 3px;
    margin: 0;
    padding: 5px;
  }

  h1 { font-size: 2.0em; }
  h2 { font-size: 1.8em; }
  h3 { font-size: 1.6em; }
  h4 { font-size: 1.4em; }

  p {
    margin: 0 0 1em 0;
  }

  /**
   * Additional styling for blockquotes.
   */
  blockquote {
    /* 16px */
    font-style: italic;
    margin: 0.5em;
    padding: 0.5em;
    border-radius: 0.3571429em;
    background: #f8f8f8;
    border: solid 1px #ccc;
    color: black;
  }

  /**
   * Add vertical margin to addresses.
   */
  address {
    margin: 1em 0;
  }

  /**
   * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
   */
  abbr[title],
  dfn[title] {
    border-bottom: dotted 1px;
    cursor: help;
  }

  dfn,
  mark,
  q,
  var {
    padding: 0 0.2142857em;
    border-radius: 0.2142857em;
    color: #333;
    background: #fff6d3;
  }

  /**
   * Address styling not present in Safari and Chrome.
   */
  dfn,
  q {
    font-style: italic;
  }

  var {
    font-weight: bold;
  }

  pre,
  code,
  kbd,
  samp {
    font-family: Cousine, monospace;
  }

  code,
  kbd,
  samp {
    /* 13px */
    font-size: 0.9285714em;
    border: 1px solid #e3e3e3;
    padding: 0 0.2307692em;
    border-radius: 0.2307692em;
    background: #f7f7f7;
  }

  pre {
    font-size: 70%;
    overflow-x: auto;
    border: 1px solid #e3e3e3;
    padding: 0.5em;
    border-radius: 5px;
    background: #f7f7f7;
    tab-size: 4;
  }

  pre code {
    border: 0;
  }

  /* Embedded content
     ========================================================================== */

  /**
   * Make embedded elements responsive.
   */
  img,
  video {
    max-width: 100%;
    height: auto;
  }

  /**
   * Address margin not present in IE 8/9 and Safari.
   */
  figure {
    margin: 0;
  }

  /**
   * Image alignment (compatible with Textile markup syntax).
   *
   * Example HTML:
   *
   * <img class="align-left">
   * <img class="align-right">
   * <img class="align-center">
   */
  img.align-left {
    float: left;
    margin: 1em 1em 1em 0;
  }
  img.align-right {
    float: right;
    margin: 1em 0 1em 1em;
  }
  img.align-center {
    display: block;
    margin: 1em auto;
  }

  /**
   * Correct overflow not hidden in IE 9/10/11.
   */
  svg:not(:root) {
    overflow: hidden;
  }

  /* ==========================================================================
     Fix for reponsive embedded content in IE8
     ========================================================================== */

  @media \0screen {

    img,
    video {
      width: auto;
    }

  }

@media screen and (max-width: 1200px) {
  [role="main"] { width: 90%; }
}

@media screen and (max-width: 460px) {
  #head { background-size: 100%, auto; }
}