// Place all the styles related to the Countries controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

@import "colors";

.country-name {
  color: #676767;
  white-space: nowrap;

  a, a:visited {
    color: #676767;
    text-decoration: none;
  }

  a:hover {
    color: #F15C23;
  }
}

.country-description {
}

.categories {
  th {
    text-align: left;
  }

  td {
    padding: 0 .5em;
  }

  a, a:visited {
    color: #676767;
    display: inline-block;
    font-size: .75em;
    font-weight: bold;
    margin-bottom: .3em;
    text-transform: uppercase;
    text-decoration: none;
  }

  a:hover {
    color: #F15C23;
  }
}

.countries.index .view {
  padding: 0 1em 1em 1em;

  ol, ul {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      margin: .25em 0;
    }
  }
}

/* countries#show & country_categories#show */
.country-data-view {
  & > h1 {
    .category-name {
      font-weight: bold;
    }
  }

  h2 {
    font-size: 1.2em;
  }

  h3 {
    font-size: 1em;
    font-style: italic;
  }

  a {
    color: $violet;
    font-weight: bold;
    text-decoration: none;

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

  .main-column {
  }

  .sidebar-column {
    display: inline-block;
    margin-left: 2%;
    vertical-align: top;
    width: 32%;
  }

  .block {
    background: $white;
    border-radius: .5em;
    margin: .5em 0;
    min-height: 12em;
    padding: .5em;

    h1, h2, h3, h4 {
      text-transform: uppercase;
    }

    h1 {
      color: $black;
      font-size: 1.2em;
    }

    h2 {
      color: $gray;
      font-size: 0.9em;
    }

    h3 {
      color: $gray;
      font-size: .8em;
      font-style: italic;
    }

    h4 {
      color: $light-gray;
      font-size: .7em;
      margin-bottom: 0;
    }

    iframe {
      border: 0 none;
      display: inline-block;
      overflow: hidden;
    }
  }

  /* specific datum block styles */

  .sidebar {
    padding: 1em .5em;

    .static-map img {
      display: block;
      margin: 0 auto;
    }

    dl {
      font-size: .7em;
      margin: 1em 0 0 0;
    }

    dt, dd {
      display: inline;
    }

    dt {
      font-weight: bold;
    }

    dt:before {
      content: "";
      display: block;
      margin-bottom: .5em;
    }

    dd {
      float: right;
      margin: 0;
    }
  }
}

