application.css.scss

/*
 *= require_self
 *= require_tree .
 */

@import "compass";
@import "compass/reset";
@import "sprites";
@import "helpers";

body {
  background: $cBackground;
}

header {
  background:url(backgrounds/bkg_header.png);
  height:247px;

  hgroup {
    position:relative;
    top: 52px;
    width:400px;

    h1 {
      @extend .font-big;
      color:$cGray;
    }

    h2 {
      margin: 0 0 2px 0;

      a {
        font: bold 12px "Helvetica Neue", sans-serif;
        color: $cLinkColor;
        text-decoration: none;
        text-transform:uppercase;
      }
    }
  }

  .inner { position:relative; width: 912px; margin: auto; }

  & > .top {
    position:relative;
    background: rgba(117,173,181, 0.8);
    height: 52px;

    .selector {
      position:absolute;
      top: 15px;
      right:0;
      font: bold 11px "Helvetica Neue", sans-serif;
      text-transform: uppercase;
      text-decoration:none;
      color: $cWhite;
    }
  }
}

nav {
  position:absolute;
  top: 47px;
  right: 10px;

  ul {

    li {

      @include inline-block();

      a {

        $height:26px; $mL: 5px; $pT: 7px; $pR: 10px; $pB: 5px; $pL: 5px;

        @include button('buttons/bkg_nav_button.png', $height, $mL, $pT, $pR, $pB, $pL);
        background:none;
        span { background:none; }
        font: bold 12px sans-serif;
        color: #75ADB5;

        &.selected {
          @include button('buttons/bkg_nav_button.png', $height, $mL, $pT, $pR, $pB, $pL);
        }

        &:hover {
          @include button('buttons/bkg_nav_button_hover.png', $height, $mL, $pT, $pR, $pB, $pL);
          color: #75ADB5;
        }
      } // a
    } // li
  } // ul
} // nav



.actions {
  padding: 51px 0 59px 0;
  background: $cBackground;

  .inner { position:relative; width: 912px; margin: auto; }

  ul {
    width:890px;
    margin:auto;

    li {
      @include inline-block();
      width:280px;

      margin: 0 50px 0 0;
      text-align:center;

      h2 {
        margin: 0 0 12px 0;
        font:29px "Georgia", serif;
        color: $cWhite;
      }

      p {
        height:50px;
        margin: 24px;
        font: normal 15px "Helvetica Neue", serif;
        color: $cBlack;
        opacity:0.5;
      }

      .icon {
        margin:auto;
        height:92px;
      }

      &.crowdsourcing {
        width:246px;

      }
      &.analysis {
        width:262px;
      }
      &.keep_updated {
        width:274px;
        margin: 0;
      }

      &.crowdsourcing .icon {
        top: -10px;
        position:relative;
        width:134px;
        @include icons-sprite(crowdsourcing);
      }

      &.analysis .icon {
        width:150px;
        @include icons-sprite(analysis);
      }

      &.keep_updated .icon {
        width:122px;
        @include icons-sprite(updates);
      }
    }
  }
}

.blog-links {
  @extend .actions;

  h3 {
    margin: 0 0 20px 0;

    font: bold 13px "Helvetica Neue", serif;
    color: #264C59;
    text-transform: uppercase;
    opacity: 0.75;
  }

  ul {
    width: 917px;

    li {
      margin: 0 30px 0 0;
      text-align: left;
      &:last-child { margin: 0; }

      h2 a {
        color: $cWhite;
        @extend .classic-hover;
      }

      p {
        height: auto;
        margin: 0;
        padding: 0;

        font: normal 15px "Helvetica Neue", serif;
        color: #264C59;
        opacity: 0.85;

        a {
          color: $cWhite;
          @extend .classic-hover;
        }
      }
    }
  }
}

#country {
  background: $cWhite;
}

.details {

  .inner { position:relative; width: 917px; margin: auto; }
  .inner > div { @include inline-block(); vertical-align: top; }

  h4 {
    margin: 0 0 15px 0;

    font: bold 13px "Helvetica Neue", sans-serif;
    color:$cGray;
    text-transform: uppercase;
  }

  .alerts {
    width:597px;
    margin: 0 26px 0 0;

    ul {
      border-top: 1px solid #f1f1f1;

      li {
        padding:19px 0;
        border-bottom: 1px solid #f1f1f1;
        font: normal 15px "Helvetica Neue", sans-serif;
        color: $cNormalGray;
      }
    }

    .btn { float:right; }
  }

  .description {
    width:285px;

    h4 {
      font-size:12px;
      color: $cGreen;
    }
  }
}

/*
 * BUTTONS
 **/

.btn {

  @include button('buttons/bkg_button.png', 42px, 5px, 14px, 27px, 5px, 27px);

  &:hover {
    @extend .glow;
  }

}

.btn.hollow {

  @include button('buttons/bkg_button_hollow.png', 38px, 5px, 11px, 27px, 5px, 27px);
  font: bold 12px "Helvetica Neue", serif;
  text-transform: uppercase;
  color: $cLinkColor;

  &:hover {
    @extend .no-glow;
    @include button('buttons/bkg_button_hollow_hover.png', 38px, 5px, 11px, 27px, 5px, 27px);
    color: $cWhite;
  }

}

.btn.disabled {

  @include button('buttons/bkg_button_disabled.png', 40px, 5px, 13px, 27px, 5px, 27px);
  color:rgba(255, 255, 255, .3);

  &:hover {
    @extend .no-glow;
  }

}

#map-container .save-area {
  display: none;
}

#map-container.editing-mode .draw-area {
  display: none;
}

#map-container.editing-mode .save-area {
  display: inline;
}