@import "compass/utilities/general/clearfix";
@import "compass/css3/border-radius";
@import "compass/css3/box-shadow";
//
@import "../declarations/dimensions";
@import "../declarations/colors";
@import "../declarations/sprite-maps";
@import "../mixins/paddingbox";
@import "../mixins/devices";
@import "../mixins/sprite-background";

section#ui {
  @include clearfix;
  @include paddingbox(100%, $ui-height);
  @include box-shadow($ui-shadow);
  @include rgba-background($ui-background);

  overflow: auto;
  position: fixed;
  bottom: $footer-height;
  left: 0px;
  z-index: 4;

  //DEVICE
  @include desktopClient {
    height: 400px;
  }

  @include iPodWebappPortrait {
    height: 408px;
  }

  @include iPodSafariPortrait {
    height: 362px;
  }

  @include iPodSafariLandscapeFullscrren {
    height: 268px;
  }

  @include iPodWebappLandscape {
    height: 248px;
  }

  @include iPodSafariLandscape {
    height: 214px;
  }

  .controls {
    @include paddingbox(100%, auto, 0, 1%, 0, 1%);

    margin: ($def_margin_unit / 4) 0 ($def_margin_unit / 4) 0;

    .close {
      @include sprite-bg('error-default', $x1Icons, $x2Icons);
      &:hover {
        @include sprite-bg('error-hover', $x1Icons, $x2Icons);
      }
    }
  }

  .cmd {
    @include clearfix;
    @include paddingbox(100%, 97.6%, 0, 1%, 0, 1%);

    overflow: visible;
    margin: ($def_margin_unit / 4) 0 0 0;
    max-width: 700px;

    @include desktopClient {
      margin: 0 auto;
      padding: 20px 0 0 50px;
    }

    @import "ui/login";
    @import "ui/new-post";
    @import "ui/colors";
    @import "ui/buttons";

    @import "ui/screens";
    @import "ui/settings";
    @import "ui/timeline";

  }
}

section#ui.closed {
  display: none;
}

section#ui.opened {
  display: block;
}