/* —————————————————— RESET CODE —————————————————— */

  html,
  body,
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  img,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  strike,
  strong,
  sub,
  /*sup,*/
  tt,
  var,
  b,
  u,
  center,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td,
  article,
  aside,
  canvas,
  details,
  embed,
  figure,
  figcaption,
  footer,
  header,
  hgroup,
  menu,
  nav,
  output,
  ruby,
  section,
  summary,
  time,
  mark,
  audio,
  video,
  button {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }


  @font-face {
    font-family: U001;
    src: url(u001-reg.ttf);
    font-style: normal;
  }

  @font-face {
    font-family: U001;
    src: url(u001-bol.ttf);
    font-weight: bold;
  }

  @font-face {
    font-family: U001;
    src: url(u001-ita.ttf);
    font-style: italic;
  }

  body {
    font-family: "U001", "Helvetica", sans-serif;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.02em;
    fo
  }


  blockquote {
    font-style: italic;
    margin: 20px 0px 20px 0px;
  }

  blockquote footer {
    font-style: normal;
    font-size: 10px;
  }

  img {
    width: 100%;
    margin: 20px 0px 0px 0px;
  }

  a {
    text-decoration: none;
    color: inherit;
  }

  a:hover {
    text-decoration: underline;
  }

  td:hover {
    cursor: pointer;
  }

  th .tab:hover {
    cursor: pointer;
    text-decoration: underline;
  }

  .project:hover {
    background-color: #003366;
    color: #ffffff;
  }

  .recommendation:hover {
    background-color: #744400;
    color: #ffffff;
  }

  .workshop:hover {
    background-color: #cc0033;
    color: #ffffff;
  }

  b {
    font-weight: bold;
  }

  h1 {
    font-weight: bold;
  }

  p {
    margin: 0px 0px 20px 0px;
  }

  ul {
    margin: 0px 0px 20px 0px;
  }

  #info {
    position: absolute;
    right: 0px;
    margin: 10px 32px 0px 0px;
    font-weight: bold;
    z-index: 999;
  }

  #header {
    margin: 10px 0px 30px 0px;
  }

  .entry {
    height: auto;
  }

  .project {
    font-weight: bold;
    color: #003366;
  }

  .recommendation {
    font-weight: bold;
    color: #744400;
  }

  .workshop {
    font-weight: bold;
    color: #cc0033;
  }

  .projectTag {
    font-weight: bold;
    color: #003366;
  }

  .recommendationTag {
    font-weight: bold;
    color: #744400;
  }

  .workshopTag {
    font-weight: bold;
    color: #cc0033;
  }

  #all {
    font-weight: 800;
  }

  .full {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 40px);
    margin: 10px 0px 10px 20px;
  }

  .fiftyw {
    background-color: inherit;
    display: inline-block;
    vertical-align: top;
    width: calc(50% - 40px);
    margin: 10px 0px 10px 20px;
    text-align: left;
  }

  .fortyw {
    background-color: inherit;
    display: inline-block;
    vertical-align: top;
    width: calc(40% - 32px);
    margin: 10px 0px 10px 20px;
    text-align: left;
  }

  .tenw {
    background-color: inherit;
    display: inline-block;
    vertical-align: top;
    width: calc(10% - 32px);
    margin: 10px 0px 10px 20px;
    text-align: right;
  }

  #contentright {
    margin-top: 20px;
  }

  #tabs {
    font-weight: bold;
  }

  #tagmenu span,
  #currenttags span,
  #all {
    cursor: pointer;
  }

  #tagmenu span:hover .label,
  #currenttags span:hover .label,
  #all:hover .label {
    text-decoration: underline;
  }

  #currenttags #all:hover .label {
    text-decoration: none;
    cursor: default;
  }

  /* comma separator */
  #tagmenu span:not(:last-child)::after,
  #currenttags span:not(:last-child)::after {
    content: ", ";
    text-decoration: none;
  }

  #sortableTable {
    width: 100%;
    padding: 0px 0px 80px 0px;
  }

  #lufplogophone {
    display: none;
    width: 100%;
    height: 300px;
    margin: auto;
    padding: 100px 0px 0px 0px;
    background-image: url("loufplogo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: bottom;
  }

  #aboutlogo {
    display: block;
    width: 300px;
    height: 300px;
    max-width: 100%;
    background-image: url("loufpsmalllogo.png");
    background-size: contain;
    background-repeat: no-repeat;
  }

  .hover-area {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .cursor-image {
    position: absolute;
    width: 340px;
    height: 340px;
    pointer-events: none;
    /* Prevents flickering */
    display: none;
    z-index: -99;
  }

  /* LESS THAN 800 width */

  @media only screen and (max-width: 800px) {

    .fiftyw {

      width: calc(100% - 40px);
    }

    .fortyw {
      display: none;
    }

    .tenw {
      display: none;
    }

    .tags {
      display: none;
    }

    #topright {
      display: none;
    }

    #lufplogophone {
      display: block;
      ;
    }

    .cursor-image {
      display: none !important;
    }
  }