$base_color: #852800;

$faint_color: desaturate(lighten($base_color, 65%), 50%);
$light_color: desaturate(lighten($base_color, 40%), 50%);
$dark_color: darken($base_color, 40%);

body {
  font-family: arial;
}

.fancybox-title.fancybox-title-float-wrap {
  bottom: -20px;
  a {
    color: #fff;
    text-decoration: none;
    font-weight: normal;
    padding: 10px;
    display: block;
  }
}

.images {
  overflow: hidden;
  .image {
    float: left;
    .image-inner {
      margin: 5px;
    }
    .original-link {
      color: $base_color;
      text-decoration: none;
      font-weight: bold;
      display: block;
      padding: 5px 10px;
      background-color: $faint_color;
      font-size: 14px;
      &:hover {
        background-color: $base_color;
        color: #fff;
      }
    }
    .image-link {
      overflow: hidden;
      display: block;
      text-align: center;
    }
  }
}

.image-title {
  display: none;
}

.inner-image {
  margin: 5px;
  overflow: hidden;
  background-color: #f2f2f2;
}

.image img {
  width: 100%;
}

.navigation {
  overflow: auto;
  margin: 20px 10px;
  ul, li {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  li {
    float: left;
    margin-right: 2px;
    margin-bottom: 2px;

  }
  a {
    display: inline-block;
    text-decoration: none;
    padding: 7px 10px 5px;

    background: #ddd;

    color: $base_color;
    font-weight: bold;
  }
  a:hover {
    background-color: $base_color;
    color: #fff;
  }

  .active {
    a {
      background-color: $base_color;
      color: #fff;
    }
  }
}

.page-title {
  margin: 20px 5px 5px 5px;
  color: $base_color;
}

@media (min-width: 0px) and (max-width: 500px) {
  body {
    margin: 0;
    padding: 0;
  }
  .images {
    .image {
      width: 100%;
      .image-inner {
        margin: 0;
        margin-bottom: 1px;
      }
    }
  }
}

@media (min-width: 501px) and (max-width: 1000px) {
  body {
    margin: 0;
    padding: 0;
  }
  .images {
    .image {
      width: 50%;
      .image-inner {
        margin: 0;
        margin-bottom: 2px;
      }
      &:nth-child(odd) {
        .image-inner {
          margin-right: 2px;
        }
      }
    }
  }
}

@media (min-width: 1001px) and (max-width: 1600px) {
  .image {
    width: 33%;
  }
}

@media (min-width: 1601px) and (max-width: 2000px) {
  .images {
    .image {
      width: 25%;
      .image-inner {
        margin: 10px;
      }
    }
  }
}

@media (min-width: 2001px) and (max-width: 2800px) {
  .images {
    .image {
      width: 20%;
      .image-inner {
        margin: 20px;
      }
    }
  }
}

@media (min-width: 2801px) {
  .image {
    width: 15%;
  }
}

.fancybox-title-float-wrap .child {
  background-color: $base_color;
  text-shadow: 0 1px 2px $dark_color;
  a {
    font-weight: bold;
  }
}