@blue: #4183C4;
@red: #c20000;
@green: #73ab00;

@grey: #666666;
@darkGrey: #333333;
@lightGrey: #999999;
@lighterGrey: #eeeeee;
@lightHover: #ffffcc;

@smallFont: 11px;
@normalFont: 13px;
@largeFont: 16px;

@webWidth: 1020px;

@normalFontFamily: arial, verdana;
@technicalFontFamily: 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', 'Courier New', monospace;
@codeFontFamily: 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', 'Courier New', monospace;

@font-face { font-family: raphaelicons; src: url('../font/raphaelicons-webfont.woff'); }

@import "_list.less";
@import "_comment.less";
@import "_data.less";
@import "_form.less";
@import "_button.less";
@import "_popup.less";

/* Utils functions */
.radius (@radius: 3px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

.radius-bottom (@radius: 3px) {
  -webkit-border-bottom-right-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.radius-top (@radius: 3px) {
  -webkit-border-top-right-radius: 5px;
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

.gradient (@from: #f4f4f4, @to: #ececec, @default: #ececec) {
  background-color: @default;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@from), to(@to));
  background-image: -moz-linear-gradient(@from, @to);
  background-image: -o-linear-gradient(@from, @to);
  background-image: linear-gradient(@from, @to);
}

.box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {
  @val: @x @y @blur rgba(0, 0, 0, @alpha);
  box-shadow:         @val;
  -webkit-box-shadow: @val;
  -moz-box-shadow:    @val;
}

.transition (@property, @duration, @timing-function) {
  transition: @property @duration @timing-function;
  -webkit-transition: @property @duration @timing-function;
  -moz-transition: @property @duration @timing-function;
}

/* Flash messages */
.flashMessage {
  line-height: 2em;
  padding: 0 0.8em;
  margin: 0 0 1em 0;
  .radius;

  &.warning {
    border: 1px solid #FC6C06;
    background-color: #ffe4d3;
  }

  &.success {
    border: 1px solid #73AB00;
    background-color: #f1ffd3;
  }

  &.error {
    border: 1px solid #C20000;
    background-color: #ffd6d6;
  }

  &.notice {
    border: 1px solid @blue;
    background-color: #d6ebff;
  }
}

.ricon {
  font-family: 'raphaelicons';
  font-size: 20px;
  text-decoration: none;
  vertical-align: bottom;
}

.vertical-text {
    writing-mode:tb-rl;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    display: block;
    float: left;
}

/* Basic elements ui */
h2 {
  color: @darkGrey;
  font-size: @largeFont;
  text-transform: uppercase;
  text-shadow: white 1px 1px 0px;
}

h3 {
  color: @blue;
  font-weight: bold;
}

a {
  color: inherit;
  text-decoration: none;

  &:hover { text-decoration: underline; }

  &.anchor {
    padding: 2px;
    color: #eee;
    font-size: @normalFont;

    &:hover {
      color: @grey;
      text-decoration: underline;
    }
  }

  &.disabled {
    opacity: 0.25;
    filter: alpha(opacity=25);
    .transition(opacity, .3s, ease-out);

    &:hover {
      opacity: 0.6;
      filter: alpha(opacity=60);
    }
  }
}

a, span {
  &.icon {
    font-size: @smallFont;
    font-weight: bold;
    color: @lightGrey;
    padding-left: 5px;
  }
}

img {
  &.avatar {
    height: 24px;
    vertical-align: middle;
    .radius;
  }
}

.right { float: right; }
.left { float: left; }
.hidden { display: none; }
table { width: 100% }
strong { font-weight: bold; }

.dropdown {
  position: relative;

  &.open {
    .dropdown-menu {
      display: block;
    }

    .dropdown-toggle {
      .radius-top(5px);
    }
  }

  .dropdown-toggle {
    z-index: 1001;
  }

  .dropdown-menu {
    z-index: 1000;
    float: left;
    display: none;
    position: absolute;
    min-width: 100%;

    & > li {
      width: 100%;
      display: block;
      white-space: nowrap;
    }
  }
}

/* Crew structure */
html {
  height: 100%;

  body {
    color: @grey;
    font-size: @normalFont;
    font-family: @normalFontFamily;

    .header {
      font-size: @smallFont;
      color: #333;
      overflow: hidden;
      background-color: #f8f8f8;
      border-bottom: 1px solid #e9e9e9;
      opacity: 0.3;
      .transition(opacity, .3s, linear);
      padding: 3px 0 0 5px;

      &:hover {
         opacity: 1;
      }

      ul#userbox {
        float: right;
        font-size: @normalFont;
        font-weight: bold;
        color: #4183C4;

        li {
          display: inline;
          padding: 10px;
          line-height: 27px;

          a {
            text-decoration: none;
          }

          &.username {
            padding-left: 2px;
            font-weight: bold;
            color: black;

            img.avatar {
              height: 20px;
              border: 1px solid #E1E1E1;
            }
          }
        }
      }

      a#crew-logo {
        float: left;
      }
    }

    .site {
      margin: 10px auto 0;
      width: @webWidth;
      padding: 0 15px;

      .page {
        line-height: 1.4em;
        margin: 0 auto 15px auto;
        position: relative;
        padding-top: 32px; /* It's breadcrumb height, because breadcrumb is on absolute position */

        .avatared {
          color: @blue;
          margin-bottom: 10px;
          font-weight: bold;
        }

        ul.breadcrumb {
          position: absolute;
          top: 0;
          z-index: 1000;
          font-size: 0px; /*Hack for inline-block propertie*/

          li {
            display: inline-block;
            line-height: 31px;
            font-size: @normalFont;
            padding: 0 5px;
            margin: 0 5px 0 0;
            border: 1px solid #ccc;
            border-bottom: none;
            color: @lightGrey;
            .radius-top(5px);

            a {
              color: @blue;
              text-decoration: none;
            }

            &:hover {
              background-color: @lightHover;
            }

            &.selected {
              background-color: whiteSmoke;
              color: @grey;
              position: relative;
              top: 1px;
              a {
                font-weight: bold;
              }
            }

            &.dropdown {
              a {
                display: inline-block;

                &.dropdown-toggle {
                  font-family: 'raphaelicons';
                  font-size: 18px;
                  text-decoration: none;
                  color: @blue - #111;
                  vertical-align: bottom;
                  padding: 0 5px;
                }
              }

              &.open {
                .dropdown-toggle {
                  background-color: @blue;
                  color: white!important;
                }
              }

              ul.dropdown-menu {
                background-color: @blue;
                top: 26px;
                left: -1px;
                padding: 0;
                .radius(5px);
                .box-shadow(2px, 5px, 10px, 0.4);

                & > li {
                  line-height: 24px;
                  color: white;
                  border: none;
                  margin: 0;
                  padding: 0;
                  .radius(0px);

                  span.ricon {
                    width: 16px;
                    display: inline-block;
                    margin-left: 5px;
                  }

                  a {
                    margin: 0 5px;
                    display: inline-block;
                    width: 100%;
                    height: 100%;
                    color: white;
                    font-weight: normal;
                  }
                }

                & > li:hover {
                  .radius(0px);
                  background-color: @blue + #222;
                }
              }
            }

            a.logo {
              display: block;
              width: 21px;
              text-indent: -9999px;
              background: url("../images/logo.png") center center no-repeat transparent;
              vertical-align: bottom;
            }
          }
        }
      }
    }

    .footer {
      text-align: center;

      a { color: @blue; }

      .logoCrew {
        display: inline-block;
        width: 195px;
        padding-left: 80px;
        line-height: 70px;
        background: url('../images/crew-logo.png') 0 22px no-repeat;
        color: #636363;
        font-size: @normalFont;
        opacity: 0.3;
        .transition(opacity, .3s, linear);
        &:hover {
           opacity: 1;
        }
      }
    }
  }
}

.tooltip {
  .ui-tooltip-content {
    .radius;
    .gradient;
    .box-shadow (2px, 2px, 8px, 0.2);
    border-color: #CCC;
    color: @grey;
    font-size: @normalFont;
    line-height: 16px;
  }
}

.navigation_links {
  clear: both;
  overflow: auto;
}

.select2-drop {
  .ricon {
    font-size: inherit;
  }
}

/* Filtre du context */
#sfWebDebugBar[id]
{
  positino: absolute;
  bottom:0;
  right: 0;
  top: auto;
}

.clickable {
  cursor: pointer;
}

#admin_project_add { width: 510px; }
