@import 'bootstrap';
@import 'font-awesome';

$red: #ED2B00;
$yellow: #FFC404;
$green: #2AB500;
$violet: #8E0BD6;
$blue: #0D98FF;

$redDark: #B82100;
$yellowDark: #D9A603;
$greenDark: #218F00;
$violetDark: #6B08A1;
$blueDark: #0A7BCF;

body {
  min-width: 950px;
  color: $gray;
}

a {
  &:link {
    color: $blue;
  }

  &:active, &:hover, &:focus {
    color: $red;
  }
}


h3 {
  font-weight: normal;
}

.text-right {
  text-align: right;
}

.avatar {
  @include border-radius(2px);
}

.form-actions {
  background-color: rgba(245,245,245,0.4);
}

.navbar-constructor > .navbar-inner {
  padding: 5px;
  background-color: rgba(245,245,245,0.7);
  background-image: none;
  @include border-radius(0);
  @include box-shadow(none);
  border: none;
  border-bottom: 1px solid #ddd;
}

.navbar .nav > li > a {
  &:hover { color: $red }
}

.btn {
  @include buttonBackground(#fff, #eee, $grayDark);
  background-color: $grayLighter;
  color: $gray;
  border: 1px solid #ddd;
  text-shadow: none;
  font-weight: normal;
  @include box-shadow(none);

  &:active, &:link, &:hover, &:focus {
    color: $gray;
  }

  &.btn-link {
    background-image: none;
    color: $blue;
    border: none;
    background-color: transparent;

    &:link {
      color: $blue
    }

    &:active,  &:hover, &:focus {
      color: $red;
      text-decoration: none;
    }
  }

  &.btn-danger {
    background-image: none;
    border: none;
    color: $red;
    background-color: transparent;


    &:link {
      color: $red;
    }

    &:active,  &:hover, &:focus {
      background-color: $red;
      color: $white;
    }
  }

  &.btn-primary {
    background-image: none;
    border: none;
    background-color: $blueDark;
    color: $white;

    &:link {
      color: $white;
    }

    &:active,  &:hover, &:focus {}
  }

  &.btn-success {
    background-image: none;
    border: none;
    background-color: $green;
    color: $white;

    &:link {
      color: $white;
    }

    &:active,  &:hover, &:focus {}
  }

  &.btn-large { font-size: $baseFontSize*1.5 }
}

.images_controls {
  float: left;
  overflow: hidden;
  display: inline-block;
  width: 180px;
  margin-bottom: 20px;

  .actions {
    margin-top: 5px;
    margin-left: 28px;
  }
}

.sizes .controls {
  margin-bottom: 30px;
}

.url {
  font-size: 12px;

  .full_url {
    margin-top: 6px;
    float: left;
  }

  .icon-pencil {
    margin-top: 10px;
    margin-left: 3px;
  }

  .address {
    font-weight: bold;

    &:hover {
      background-color: #ffa;
    }
  }
}

.url .icon-pencil {
  display: none;
}

.url:hover .icon-pencil {
  display: inline-block;
}

.b-tree {
  ul {
    list-style: none;
    margin-left: 60px;

    &:first-child {
      margin-left: 0;
      padding-left: 0;
    }

    li {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid #eee;


      .btn-group {
        margin-right: 5px;

        > .btn {
          margin-right: 0;
        }
      }

      .btn {
        margin-right: 5px;
      }

      .btn-danger {
        margin-top: 4px;
      }

      &:hover {
        > .b-tree__buttons {
          visibility: visible;
        }
      }
    }
  }
}

.b-tree__buttons {
  @include ie7-inline-block();
  display: inline;
  visibility: hidden;
}