/*
 * Paul Irish's Universal Box Sizing
 * http://paulirish.com/2012/box-sizing-border-box-ftw/
 * 
 * Be wary of using in conjuction with third-party widgets that may not be expecting border-box
 */

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: @pacific;
    color: #fff;
    text-shadow: none;
}
::selection {
    background: @pacific;
    color: #fff;
    text-shadow: none;
}

// Remove the gap between images and the bottom of their containers: h5bp.com/i/440
img {
    vertical-align: middle;
}

// Remove default fieldset styles.
fieldset {
    padding: 0;
    border: 0;
    margin: 0;
}

// Allow only vertical resizing of textareas.
textarea {
    resize: vertical;
}

/* Helper classes
   ========================================================================== */

// Hide from both screenreaders and browsers: h5bp.com/u
.hidden {
    display: none !important;
}

// Show both to screenreaders and browsers
.visible {
    display: block;
    visibility: visible;
}

// Hide only visually, but have it available for screenreaders: h5bp.com/v
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible() {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

  /* IE 5-7 */
  filter: alpha(opacity=0);

  /* Netscape */
  -moz-opacity: 0;

  /* Safari 1.x */
  -khtml-opacity: 0;

  /* Good browsers */
  opacity: 0;
}

// Retina images

@highdpi: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";

.at2x(@path, @w: auto, @h: auto) {
  background-image: url(@path);
  @at2x_path: ~`@{path}.replace(/\.\w+$/, function(match) { return "_2x" + match; })`;

  @media @highdpi {
    background-image: url("@{at2x_path}");
    background-size: @w @h;
  }
}

/*
 * Transparency
 */

.transparent() {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

  /* IE 5-7 */
  filter: alpha(opacity=0);

  /* Netscape */
  -moz-opacity: 0;

  /* Safari 1.x */
  -khtml-opacity: 0;

  /* Good browsers */
  opacity: 0;
}

/*
 * Translucency
 */

.translucent() {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";

  /* IE 5-7 */
  filter: alpha(opacity=30);

  /* Netscape */
  -moz-opacity: .3;

  /* Safari 1.x */
  -khtml-opacity: .3;

  /* Good browsers */
  opacity: .3;
}

/*
 * Opaqueness
 */

.opaque() {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

  /* IE 5-7 */
  filter: alpha(opacity=100);

  /* Netscape */
  -moz-opacity: 1;

  /* Safari 1.x */
  -khtml-opacity: 1;

  /* Good browsers */
  opacity: 1;
}

// CSS3 fade-in

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

// CSS3 fade-out

@keyframes fadeout {
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}
@-moz-keyframes fadeout { /* Firefox */
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}
@-webkit-keyframes fadeout { /* Safari and Chrome */
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}

// Zooming animation

.zoom-out() {
  -webkit-transition: all 0.2s ease-in-out 0.1s;
  -moz-transition: all 0.2s ease-in-out 0.1s;
  -o-transition: all 0.2s ease-in-out 0.1s;
  -ms-transition: all 0.2s ease-in-out 0.1s;
  transition: all 0.2s ease-in-out 0.1s;
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
}

.zoom-in() {
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  -webkit-transition-delay: .1s;
  -moz-transition-delay: .1s;
  -o-transition-delay: .1s;
  -ms-transition-delay: .1s;
  transition-delay: .1s;
}

// JavaScript

.no-js {
  #share {
    .hidden;
  }
  .fields {
    display: block;
  }
}

// Loading spinner

.spin_16 {
  height: 30px;
  width: 30px;
  text-indent: -999999px;
  .at2x( '../img/icon_spinner.gif', 30px, 30px );
}

// Full-screen spinner

.spinning {
  .at2x( '../img/icon_spinner.gif', 30px, 30px );
  background-color: rgba(255, 255, 255, .6);
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}