    @import '../global';
    @import 'compass/css3/box-sizing';
    @import 'blueprint/typography';

    $experimental-support-for-mozilla: false;
    $experimental-support-for-opera: false;
    $experimental-support-for-microsoft: false;
    $experimental-support-for-khtml: false;

    html, body {
      font-family: $font-family;
      font-weight: normal;
      position: relative;
      -webkit-text-size-adjust: none;
    }

    body.x-desktop {
      overflow: hidden;
    }

    *, *:after, *:before {
      @include box-sizing(border-box);
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      -webkit-user-select: none;
      -webkit-touch-callout: none;
      -webkit-user-drag: none;
    }

    .x-ios.x-tablet .x-landscape * {
      -webkit-text-stroke: 1px transparent;
    }

    body {
      font-size: 104%;
    }

    body.x-ios {
      -webkit-backface-visibility: hidden;
    }

    body.x-android.x-phone {
      font-size: 116%;
    }

    body.x-ios.x-phone {
      font-size: 114%;
    }

    body.x-desktop {
      font-size: 114%;
    }

    input, textarea {
      -webkit-user-select: text;
    }

    .x-hidden-visibility {
        visibility: hidden !important;
    }

    .x-hidden-display {
        display: none !important;
    }

    .x-hidden-offsets {
      position: absolute !important;
      left: -10000em;
      top: -10000em;
      visibility: hidden;
    }

    .x-fullscreen {
      position: absolute !important;
    //  removing this so floating items dont always stick to the top. i've seen no downside to this. ^robert
    //  top: 0px;
    //  left: 0px;
    }

    .x-desktop .x-body-stretcher {
      margin-bottom: 0px;
    }

    .x-mask {
      $min-width: 8.5em;

      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      height: 100%;
      z-index: 10;

      @include display-box;
      @include box-align(center);
      @include box-pack(center);

      background: rgba(0,0,0,.3) center center no-repeat;

      &.x-mask-gray {
        background-color: rgba(0, 0, 0, 0.5);
      }

      &.x-mask-transparent {
        background-color: transparent;
      }

      .x-mask-inner {
        background: rgba(0, 0, 0, .25);
        color: #fff;
        text-align: center;
        padding: .4em;
        font-size: .95em;
        font-weight: bold;
        @if $include-border-radius { @include border-radius(.5em); }
      }

      .x-loading-spinner-outer {
        @include display-box;
        @include box-orient(vertical);
        @include box-align(center);
        @include box-pack(center);
        width: 100%;
        min-width: $min-width;
        height: $min-width;
      }

      &.x-indicator-hidden {
        .x-loading-spinner-outer {
          display: none;
        }
      }

      .x-mask-message {
        @include bevel-text;
        -webkit-box-flex: 0 !important;
        max-width: 13em;
        min-width: $min-width;
      }
    }

    .x-draggable {
      z-index: 1;
    }

    .x-dragging {
      opacity: 0.7;
    }

    .x-panel-list {
      background-color: saturate(lighten($base-color, 50%), 15%);
    }

    @if $include-html-style {
      .x-html {
        -webkit-user-select: auto;
        -webkit-touch-callout: inherit;

        @include blueprint-typography;
        line-height: 1.5;
        color: #333;
        font-size: .8em;
        padding: 1.2em;

        ul li {
          list-style-type: circle;
        }
        ol li {
          list-style-type: decimal;
        }
      }
    }

    .x-video {
      background-color: #000;
    }

    .x-sortable .x-dragging {
      opacity: 1;
      z-index: 5;
    }

    .x-fullscreen {
      background: $page-bg-color;
    }