@import "colors";
@import "mixins";

.refinery-pages.show .main-content {
  #body_content {
    min-height: 480px;
  }
}

.refinery-blog-posts .main-content, .refinery-blog-categories .main-content {
  #body_content {
    min-height: 1088px;
  }
}

.refinery-pages.show .main-content, .refinery-blog-posts .main-content, .refinery-blog-categories .main-content {
  background: lighten( $violet, 40% );

  #body_content a, #body_content a:visited {
    color: $violet;
    font-weight: bold;
    text-decoration: none;

    &:hover {
      color: $orange;
      text-decoration: underline;
    }
  }

  #body_content .page-nav {
    li {
      display: inline-block;
      list-style: none;
      margin: 0 1em;
      width: 40%;
    }

    a, a:visited {
      background: $vlight-gray;
      border-radius: .5em;
      display: inline-block;
      margin: .5em 1em;
      padding: 1em 2em;
      text-align: center;
      width: 100%;

      @include transition-bg;

      &:hover {
        background: $orange;
        color: $white;
        text-decoration: none;
      }
    }
  }

  h1#body_content_title {
    background: $violet;
    white-space: nowrap;
  }

  .subtitle {
    font-size: 1.6em;
    font-style: italic;
    margin-left: 2em;
    margin-right: 2em;
    text-align: center;
  }

  /* Hide old category sections for now */
  section#access, section#control, section#activity {
    display: none;
  }

  .body-margin {
    width: 100%;
    margin-left: auto;
    margin-right: auto;

    #body {
      background: $white;
      border-bottom-right-radius: .5em;
      border-bottom-left-radius: .5em;
      display: inline-block;
      width: 100%;
      margin: auto;
      margin-bottom: .5em;
      min-height: 12em;
      padding: .5em 4em;
      vertical-align: top;
    }
  }

  .text-align-center {
    text-align: center;
  }

  .image-align-left {
    display: inline-block;
    float: left;
    margin-left: 0;
    margin-right: 1.5em;
  }

  .image-align-right {
    display: inline-block;
    float: right;
    margin-left: 1.5em;
    margin-right: 0;
  }

  figure.image-align-left, figure.image-align-right {
    max-width: 40%;
  }

  .img-full {
    width: 100%;

    img { 
      max-width: 100%;
      max-height: 100%;
    }
  }

  .img-figures {
    padding: 0;

    figure {
      border: solid 1px $black;
      border-radius: .5em;
      display: inline-block;
      padding: 0;
      margin: 0;
      width: 49%;
    }

    figcaption {
      border-top: solid 1px $black;
      padding-left: 1em;
    }

    img { 
      border-radius: .5em;
      max-width: 100%;
      max-height: 100%;
    }
  }

  #side_body, #sidebar {
    display: none;
    background: $white;
    border-radius: .5em;
    margin: .5em 0;
    min-height: 12em;
    padding: .5em;
    vertical-align: top;
    width: 32%;
  }

  header {
    h1 {
      color: $orange;
      font-size: 1em;
      margin-bottom: .1em;
      text-transform: uppercase;
    }

    .details {
      color: $orange;
      font-size: .8em;

      .blog_author {
        font-weight: bold;
      }
    }
  }

  dl {
    dt {
      clear: left;
      float: left;
      font-weight: bold;
      width: 8em;
    }

    dd {
      margin: 0 0 0 9em;
      padding: 0 0 1em 0;
    }
  }

  #body_content .references a, #body_content .references a:visited {
    font-weight: normal;
  }

  .references {
    font-size: .8em;

    li {
      margin: .5em 0;
      padding-left: .25em;
    }
  }
}

.refinery-pages.layout-embed .main-content {
  background-color: $white;
  font-size: 12px;

  .body-margin {
    margin-left: 0;
    margin-right: 0;

    #body {
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
      margin: 0;
      padding: 0;
    }
  }

  h1 {
    display: none;
  }


}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .refinery-pages.show .main-content, .refinery-blog-posts .main-content, .refinery-blog-categories .main-content {
    .body-margin {
      width: 65%;

      #body {
        padding: 1em 8em;
      }
    }
  }

  .refinery-pages.layout-embed .main-content {
    .body-margin {
      width: auto;

      #body {
        padding: 0;
      }
    }
  }
}

.refinery-pages.show {
  .report-ex-links a {
    margin-right: 3em;
  }

  .report-ex-icon {
    background-image: url(/assets/2107_report_icons.png);
    display: inline-block;
    width: 32px;
    height: 32px;
    vertical-align: middle;
    margin-right: .5em;
  }

  a .report-ex-icon-dashboard {
    background-position: -32px -64px;
  }

  a:hover .report-ex-icon-dashboard {
    background-position: -32px 0px;
  }

  a .report-ex-icon-download {
    background-position: 0px -64px;
  }

  a:hover .report-ex-icon-download {
    background-position: 0px 0px;
  }

}

.refinery-pages.show.layout-report {
  .data-nav-countries {
    color: $white;
    display: inline-block;
    font-size: 16pt;
    position: absolute;
    right: 2em;
    top: 3.25em;
  }

  .countries-nav-list {
    right: 2em;
    top: 8em;
  }

  div > a[href*="core.thenetmonitor.org"] {
    border: solid 1px $light-gray;
    border-radius: 4px;
    display: inline-block;
    overflow: hidden;
    width: 49%;

    img {
      width: 98%;
    }
  }

  .country-pro-icon {
    background-image: url(/assets/block_links.png);
    display: inline-block;
    width: 32px;
    height: 32px;
    background-position: -48px -90px;
    background-size: 128px;
    vertical-align: middle;
    margin-right: .5em;
  }

  .data-nav-countries .country-pro-icon {
    background-position: -48px -8px;
  }
}


/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
  #body {
    font-size: 16px;
  }

  .refinery-pages.show.layout-report {
    .data-nav-countries {
      right: 20%;
    }

    .countries-nav-list {
      right: 20%;
    }
  }
}


