body {
  background-image: url("/img/structure/map-gray.svg");
  font-family: FFDINWebProMedium;
  margin: 0; }

a {
  color: #E13920;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }

#title {
  position: fixed;
  left: 0;
  top: 0;
  width: 450px;
  height: 250px;
  background-color: #E13920; }
  #title a {
    text-decoration: none;
    color: white; }
  #title .titleimage {
    float: left;
    width: 450px;
    height: 250px;
    background-image: url("/img/otherimages/medialandscape-info-3.png");
    background-size: contain; }
    #title .titleimage a {
      display: block;
      width: 400px;
      height: 200px; }
  #title .n {
    font-size: 12px;
    letter-spacing: 0px;
    text-align: none;
    padding-bottom: 3px; }
  #title .m {
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: none;
    text-align: center; }
  #title .l {
    font-size: 16px;
    letter-spacing: 1px;
    /* NOTE(dbp 2015-08-08): It appers that the M in the font has spacing
on the left side; since we want the L to align, we have to pad... */
    text-transform: none;
    text-align: center; }
  #title .t {
    font-size: 40px;
    letter-spacing: 1px;
    padding-left: 1px;
    padding-top: 20px;
    padding-bottom: 5px;
    text-transform: uppercase;
    text-align: center; }
  #title .n {
    font-size: 20px;
    letter-spacing: 0px;
    text-transform: uppercase;
    text-align: center; }

#menu {
  position: fixed;
  right: 0;
  top: 15px; }
  #menu ul {
    list-style-type: none; }
  #menu li {
    text-align: right;
    margin-top: 15px; }
  #menu a {
    color: white;
    text-decoration: none;
    font-size: 17px;
    text-transform: uppercase;
    padding: 3px;
    padding-right: 115px;
    background-color: #E13920; }
  #menu a:hover {
    padding-right: 130px;
    transition: opacity 0.2s 1s ease; }

#bottom {
  position: fixed;
  bottom: 0;
  height: 60px;
  background-color: #E13920;
  width: 100%;
  color: #E7ABA2; }
  #bottom a {
    color: white;
    text-decoration: none; }
  #bottom .program {
    padding-top: 10px; }
  #bottom .program > div {
    line-height: 20px;
    float: center;
    padding-left: 250px;
    padding-right: 250px; }
  #bottom .logo {
    float: right;
    width: 60px;
    height: 60px;
    background-image: url("/img/structure/cpcj-logo-bottom.jpg");
    background-size: contain; }
    #bottom .logo a {
      display: block;
      width: 650px;
      height: 60px; }
  #bottom .socialfb {
    float: left;
    width: 60px;
    height: 60px;
    background-image: url("/img/structure/social-facebook.jpg");
    background-size: contain; }
    #bottom .socialfb a {
      display: block;
      width: 60px;
      height: 60px; }
  #bottom .socialtwitter {
    float: left;
    width: 60px;
    height: 60px;
    background-image: url("/img/structure/social-twitter.jpg");
    background-size: contain; }
    #bottom .socialtwitter a {
      display: block;
      width: 60px;
      height: 60px; }
  #bottom .socialtumblr {
    float: left;
    width: 60px;
    height: 60px;
    background-image: url("/img/structure/social-tumblr.jpg");
    background-size: contain; }
    #bottom .socialtumblr a {
      display: block;
      width: 60px;
      height: 60px; }
  #bottom .socialemail {
    float: left;
    width: 60px;
    height: 60px;
    background-image: url("/img/structure/social-email.jpg");
    background-size: contain; }
    #bottom .socialemail a {
      display: block;
      width: 60px;
      height: 60px; }

#pins {
  position: relative;
  width: 100%;
  height: 100%; }
  #pins .box {
    position: absolute; }
    #pins .box .popup {
      position: absolute;
      z-index: 10;
      bottom: 0;
      left: 50px;
      width: 270px;
      padding-left: 16px; }
      #pins .box .popup .point {
        position: absolute;
        bottom: 40px;
        left: 3px;
        z-index: 11;
        background-image: url("/img/structure/popup-point.png");
        background-repeat: no-repeat;
        background-size: 15px 27px;
        width: 15px;
        height: 27px; }
      #pins .box .popup .content {
        padding: 10px;
        background-color: white;
        border: 2px solid #E13920; }
      #pins .box .popup .subject a, #pins .box .popup .subtitle a {
        color: black; }
      #pins .box .popup .subject {
        text-transform: uppercase;
        font-size: 15px;
        padding: 5px 0; }
      #pins .box .popup .title {
        color: #E13920;
        font-size: 23px;
        padding: 5px 0; }
      #pins .box .popup .subtitle {
        font-style: italic;
        padding-bottom: 15px; }
      #pins .box .popup a {
        color: #E13920;
        text-transform: uppercase;
        text-decoration: none; }
  #pins .box > a {
    display: block;
    padding-left: 50px;
    height: 80px;
    line-height: 80px;
    background-image: url("/img/structure/pin-red.png");
    background-size: 50px 80px;
    background-repeat: no-repeat;
    background-position: center left;
    text-transform: uppercase;
    text-decoration: none;
    color: black; }
    #pins .box > a:hover {
      cursor: pointer; }

#content {
  position: fixed;
  background-color: #EDEAE6;
  z-index: 5;
  right: 0;
  top: 0;
  width: 565px;
  height: 100%;
  overflow-y: scroll; }
  #content .top {
    background-color: #E13920;
    min-height: 30px;
    padding: 15px 30px;
    color: white;
    text-transform: uppercase;
    line-height: 30px;
    display: block;
    width: 565px;
    height: initial;
    position: fixed; }
    #content .top .subject {
      font-size: 25px; }
    #content .top .role {
      font-size: 15px; }
    #content .top .byline {
      color: #E7ABA2; }
    #content .top .close {
      display: block;
      position: fixed;
      right: 0;
      top: 0;
      width: 60px;
      height: 60px;
      background-size: 60px 60px;
      background-image: url("/img/structure/close-top.jpg"); }
      #content .top .close:hover {
        background-image: url("/img/structure/close-top-hover.jpg"); }
  #content .rest {
    padding-top: 20%;
    padding-bottom: 30px;
    padding-left: 30px;
    padding-right: 30px;
    font-family: Georgia;
    font-size: 18px;
    line-height: 30px; }
    #content .rest .dek {
      font-weight: bold;
      font-style: italic; }
    #content .rest hr {
      border: 0;
      margin: 40px 0;
      width: 185px;
      height: 4px;
      background-color: #E13920; }
    #content .rest strong {
      text-transform: uppercase;
      font-weight: bold;
      font-family: FFDINWebProMedium; }
    #content .rest em {
      font-style: italic; }
    #content .rest bold {
      font-weight: bold; }
    #content .rest blockquote {
      font-weight: bold;
      font-family: FFDINWebProMedium;
      font-size: 36px;
      margin: 0; }
    #content .rest .close {
      display: block;
      width: 60px;
      height: 60px;
      background-size: 60px 60px;
      background-image: url("/img/structure/close-bottom.jpg"); }
      #content .rest .close:hover {
        background-image: url("/img/structure/close-bottom-hover.jpg"); }
  #content .page .intro {
    line-height: 20px;
    margin-bottom: -25px; }
    #content .page .intro h2 {
      font-family: FFDINWebProMedium;
      font-size: 22px; }
  #content .page p {
    margin: 5px 0; }
  #content .page em {
    font-weight: normal; }
  #content .page h1 {
    text-transform: uppercase;
    font-size: 22px;
    font-weight: normal;
    font-family: FFDINWebProMedium;
    margin-top: -35px;
    margin-bottom: -0px; }
  #content .page hr {
    width: 100%;
    background-color: black; }
  #content .page .half-hr {
    width: 150px;
    height: 4px;
    background-color: black; }
  #content .page p {
    font-family: Georgia;
    font-size: 18px; }
  #content .page blockquote {
    font-family: Georgia;
    font-weight: normal;
    font-size: 14pt;
    margin-left: 150px;
    margin-bottom: 30px;
    margin-top: 20px; }
  #content .page h2 {
    font-family: Georgia;
    font-size: 18pt;
    margin-bottom: 0; }
  #content .page h3 {
    font-family: Georgia;
    font-size: 18pt;
    font-weight: normal;
    font-style: italic;
    margin-top: 0; }
  #content .page h4 {
    margin-top: 20px;
    margin-bottom: 0; }
  #content .page a.box {
    font-family: FFDINWebProMedium;
    padding: 3px;
    padding-right: 5px;
    padding-left: 25px;
    line-height: 20px;
    background-color: white;
    border: 4px solid #E13920;
    color: #E13920;
    background-repeat: no-repeat;
    background-position: 5px 4px;
    background-size: 15px 15px;
    background-image: url("/img/structure/triangle.png");
    display: inline-block; }
  #content .page img {
    float: left;
    padding-right: 10px; }
  #content .toc h2 {
    font-family: FFDINWebProMedium;
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase; }
  #content .toc .link {
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 60px 60px;
    padding-left: 80px; }
  #content .toc a {
    font-family: Georgia;
    font-weight: bold;
    font-size: 18px;
    display: inline-block;
    background-image: url("/img/structure/triangle-offwhite.jpg");
    background-size: 15px 15px;
    background-position: 0px 10px;
    padding-left: 20px;
    background-repeat: no-repeat; }
  #content .toc p {
    font-family: Georgia;
    font-style: italic;
    font-size: 18px;
    margin: 0px;
    line-height: 30px;
    padding-bottom: 25px; }
  #content .toc .spacing {
    height: 50px; }