@import compass

$font-stack-safe: Helvetica, sans-serif
$font-stack-main: "Roboto", $font-stack-safe
$font-stack-highlight: "Roboto Condensed", $font-stack-safe

$color-background: rgb(26, 26, 26)
$color-highlight: rgb(175, 225, 250)
$color-highlight-light: lighten($color-highlight, 10%)
$color-highlight-dark: darken($color-highlight, 10%)

$color-foreground: invert($color-background)
  
$map-dot-size: 40px

$transition-time: 0.25s
  
html
  background: $color-background
  color: $color-foreground
  text-align: center
  font-family: $font-stack-main
  
body
  max-width: 1200px
  margin: 20px auto
  padding: 0 100px
  overflow-x: hidden

.description
  max-width: 600px
  margin: 0 auto
  color: transparentize($color-foreground, 0.3)
  
div, img, footer
  position: relative
  @include box-sizing(border-box)

h1, h2, h3, h4, h5, h6
  margin-bottom: 20px
  text-transform: uppercase
  font-family: $font-stack-highlight
  font-weight: 300

h1
  font-size: 36pt

h2
  font-size: 24pt

h3
  font-size: 18pt

h4
  font-size: 16pt

h5
  font-size: 14pt

h6
  font-size: 12pt

p
  font-size: 12pt
  margin-bottom: 12pt

strong
  font-weight: 900
  font-family: $font-stack-highlight
  color: $color-foreground
    
a
  @include transition(color $transition-time ease-in-out)
  font-family: $font-stack-highlight
  text-transform: uppercase
  text-decoration: none
  color: $color-highlight-light
  &:visited
    color: $color-highlight-light
  li.active &,
  &:hover,
  &:active
    color: $color-foreground
  
.centered
  position: absolute
  top: 50%
  left: 50%
  @include translate(-50%, -50%)

.centered-y
  position: absolute
  width: 100%
  top: 50%
  @include translateY(-50%)
  
.distribution-map
  position: relative
  width: 100%
  padding: 20px
  @include box-sizing(border-box)
  margin: 0 auto
  >img
    width: 100%
    position: relative
    margin: 0
    padding: 0
  .map-point
    cursor: pointer
    outline: none
    z-index: 0
    position: absolute
    width: $map-dot-size
    height: $map-dot-size
    @include border-radius($map-dot-size/2)
    @include opacity(0.8)
    @include translate(-50%, -50%)
    @include transition(opacity $transition-time ease-in-out $transition-time, width $transition-time ease-in-out $transition-time, height $transition-time ease-in-out $transition-time, z-index $transition-time ease-in-out $transition-time)
    background: transparentize($color-background, 0.15)
    border: $map-dot-size/8 solid $color-highlight-dark
    .content
      @include opacity(0)
      @include transition(opacity $transition-time ease-in-out)
      width: 100%
      height: 100%
      left: 50%
      @include translateX(-50%)
      overflow: overlay
    &:active, &:focus
      //Deal with Firefox :active styling
      margin: 0
      padding: 0
      @include opacity(1)
      width: 300px
      height: 220px
      color: $color-foreground
      z-index: 1
      @include transition(opacity $transition-time ease-in-out, width $transition-time ease-in-out, height $transition-time ease-in-out)
      .content
        @include opacity(1)
        @include transition(opacity $transition-time ease-in-out $transition-time, height 0 ease-in-out $transition-time, overflow 0 ease-in-out $transition-time)
        overflow: hidden
        a:hover, a:active
          color: $color-highlight