@import "jquery_ui_overrides";
@import "humpyard_form";

$hy_panel_bg_color: #eee;
$hy_panel_bg_gradient: #aaa;
$hy_panel_border_color: #a5a5a5 !default;
$hy_selection_color: #ffcc00 !default;
$hy_top_bar_height: 20px !default;
$hy_bottom_bar_height: 80px !default;
$hy_bottom_padding: 5px !default;
$hy_bottom_bg_color: #444;
$hy_bottom_bg_gradient: #000;

@mixin humpyard-base {
  @include jquery-ui-overrides;
  @include humpyard-form;
  a:focus {
    outline: none; }
  body {
    margin: 0;
    padding: 0;
    font-size: 10px;
    #hy-top {
      display: none; }
    #hy-side {
      display: none; }
    #hy-bottom {
      display: none; } }
  body.hy-logged-in {
    margin: 0;
    padding: 0;
    overflow: hidden;
    .ajax-indicator {
      display: none;
      position: absolute;
      left: 50%;
      top: 4px; }
    .ajax-indicator.active {
      display: block; }
    #hy-top {
      @include linear-gradient(color-stops($hy_panel_bg_color, $hy_panel_bg_gradient));
      border-bottom: $hy_panel_border_color solid 1px;
      padding: 0.2em;
      height: $hy_top_bar_height;
      display: block;
      #hy-top-left {
        float: left; }
      #hy-top-right {
        float: right; } }
    #hy-top.hy-edit-active {
      border-bottom: $hy_selection_color solid 1px; }
    #hy-side {
      position: absolute;
      background: $hy_panel_bg_color;
      @include linear-gradient(color-stops($hy_panel_bg_color, $hy_panel_bg_gradient));
      border-right: $hy_panel_border_color solid 1px;
      left: -200px;
      top: 36px;
      bottom: 0;
      width: 199px;
      display: block; }
    #hy-side.hy-edit-active {
      left: 0; }
    #hy-bottom {
      position: absolute;
      @include linear-gradient(color-stops($hy_bottom_bg_color, $hy_bottom_bg_gradient));
      border-top: $hy_bottom_bg_gradient solid 1px;
      left: 0;
      right: 0;
      bottom: -$hy_bottom_bar_height - 1 - 2 * $hy_bottom_padding;
      height: $hy_bottom_bar_height;
      padding: $hy_bottom_padding;
      display: block;
      
      .element {
        display: block;
        float: left;
        border: 1px solid #ccc;
        @include border-radius;
        @include linear-gradient(color-stops(#555, #888));
        color: #fff;
        width: 64px;
        height: 64px;
        padding: 5px; 
        margin-left: 5px;
        
        span {
          display: block;
          text-align: center;
          width: 80px;
          margin-left: -7px;
          margin-top: 25px;
          font-family: Sans-Serif;
          font-weight: bold;
          font-size: 8px;
          @include rotate;
        }
      } 
    }
    #hy-bottom.hy-edit-active {
      bottom: 0;
      left: 0px; }
    #hy-body {
      position: absolute;
      overflow: auto;
      top: $hy_top_bar_height + 5;
      bottom: 0;
      left: 0;
      right: 0;
      .hy-el-menu {
        a {
          font-size: 11px;
          color: #555555;
          text-decoration: none; }
        position: absolute;
        background: none;
        top: 0;
        left: 0;
        display: none; }
      .hy-marker-frame {
        position: absolute;
        top: 0;
        left: 0;
        background: $hy_selection_color;
        display: none; }
      .hy-el-share-info {
        display: inline;
        .description {
          display: inline;
          background: $hy_selection_color;
          color: black;
          padding: 2px; } } }
    #hy-body.hy-edit-active {
      left: 0px;
      bottom: $hy_bottom_bar_height + 2 * $hy_bottom_padding + 1;
      .hy-el-active {
        .hy-el-menu, .hy-marker-frame {
          display: block; } } }
    .hy-locale-info {
      float: right;
      color: black;
      padding: 3px;
      border: 1px solid $hy_selection_color;
      border-radius: 2px; } } }