// Fonts and color

@baseFontSize:      14px;
@baseFontFamily:    'Open Sans', 'Droid Arabic Naskh', 'Mplus Fulah', sans-serif;
@baseLine:          20px;
@smallFontSize:     12px;
@largeFontSize:     16px;

@textColorPrimary:   #333;
@textColorSecondary: #484848;
@textColorTertiary:  #666;
@textColorLight:     #bbb;

@textColorSpaceYellow: #ffbb38;

@linkRed:            rgb(175,50,50);
@linkBlue:           rgb(0,150,221);
@linkBlueHover:      rgb(0,83,159);
@linkSkyBlue:        rgb(103,167,208);
@linkSpaceBlue:      rgb(47,138,202);
@linkSpacePurple:    rgb(147,111,188);

@buttonGreen: #81bc2e;
@buttonGreenDark: darken(@buttonGreen, 10%);
@buttonTextColor: #fff;
@buttonBlue: #43a6e2;
@buttonBlueDark: #277ac1;

.open-sans() {
    font-family: 'Open Sans', 'Droid Arabic Naskh', 'Mplus Fulah', sans-serif;
}

.open-sans-light() {
    font-family: 'Open Sans Light', 'Droid Arabic Naskh', 'Mplus Fulah Light', sans-serif;
    font-weight: normal;
}

// Button shadows

@shadowPartBottom:      0px 1px 0px 0px rgba(0, 0, 0, 0.2);
@shadowPartBottomInset: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.3);
@shadowPartHover:       inset 0px 12px 24px 2px saturate(@buttonBlue, 10%);
@shadowPartFocusRing:   0 0 0 2px rgba(73,173,227,0.4);

@buttonShadow:          @shadowPartBottom, @shadowPartBottomInset;
@buttonShadowHover:     @shadowPartBottom, @shadowPartBottomInset, @shadowPartHover;
@buttonShadowFocus:     @shadowPartBottom, @shadowPartBottomInset, @shadowPartHover, @shadowPartFocusRing;

@buttonShadowActive:     inset 0px 2px 0px 0px rgba(0, 0, 0, 0.2),
                         inset 0px 12px 24px 6px rgba(0,0,0,0.2),
                         inset 0px 0px 2px 2px rgba(0,0,0,0.2);

@borderColor: #d6d6d6;

// Gutter width remains the same for all grids
@gridGutterWidth:         20px;

// Default grid: 12 columns at 60px
@gridColumns:             12;
@gridColumnWidth:         60px;
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

// Tablet grid: 12 columns at 40px
@gridColumnWidthNarrow:   40px;
@gridRowWidthTablet:      (@gridColumns * @gridColumnWidthNarrow) + (@gridGutterWidth * (@gridColumns - 1));

// Mobile grid: 5 columns at 40px
@gridColumnsMobile:       5;
@gridRowWidthMobile:      (@gridColumnsMobile * @gridColumnWidthNarrow) + (@gridGutterWidth * (@gridColumnsMobile - 1));

// Mobile landscape grid: 7 columns at 40px
@gridColumnsMobileWide:   7;
@gridRowWidthMobileWide:  (@gridColumnsMobileWide * @gridColumnWidthNarrow) + (@gridGutterWidth * (@gridColumnsMobileWide - 1));

// Breakpoints for common devices
@breakDesktop:            1000px;
@breakTablet:             760px;
@breakMobileLandscape:    480px;
@breakMobile:             320px;

// Page widths for common breakpoints

// Desktop:
//           (12cols ✕ 60px) =  720
// +     (11 gutters ✕ 20px) =  220
// + (2 page gutters ✕ 30px) =   60
// --------------------------------
//                           = 1000px
//
// Tablet:
//           (12cols ✕ 40px) =  480
// +     (11 gutters ✕ 20px) =  220
// + (2 page gutters ✕ 30px) =   60
// --------------------------------
//                           =  760px
//
// Phone (landscape):
//            (7cols ✕ 40px) =  280
// +      (6 gutters ✕ 20px) =  120
// + (2 page gutters ✕ 20px) =   40
// --------------------------------
//                           =  440px
//
// Phone (portrait):
//            (5cols ✕ 40px) =  200
// +      (4 gutters ✕ 20px) =   80
// + (2 page gutters ✕ 20px) =   40
// --------------------------------
//                           =  320px

@widthDesktop:            1000px;
@widthTablet:             760px;
@widthMobileLandscape:    440px;
@widthMobile:             320px;



.clearfix() {
    zoom: 1;
    &:after {
        display: block;
        visibility: hidden;
        height: 0;
        clear: both;
        content: ".";
    }
}

.inset() {
    background-color: rgb(233,233,233);
    background-color: rgba(0,0,0,0.02);
    @shadow: 0 0 3px rgba(0,0,0,0.1) inset;
    .box-shadow(@shadow);
    border-bottom: 1px solid #fff;
}

// Some mixins from http://markdotto.com/bootstrap
// http://creativecommons.org/licenses/by/3.0/

.border-radius(@radius: 0.25em) {
  -moz-border-radius: @radius;
  border-radius: @radius;
}

.inline-block() {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

.box-shadow(@shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1)) {
  -webkit-box-shadow: @shadow;
  -moz-box-shadow: @shadow;
  box-shadow: @shadow;
}

.transition(@transition: all linear .25s) {
  -webkit-transition: @transition;
  -moz-transition: @transition;
  -o-transition: @transition;
  -ms-transition: @transition;
  transition: @transition;
}

.transform(@transform: inherit) {
  -webkit-transform: @transform;
  -moz-transform: @transform;
  -o-transform: @transform;
  -ms-transform: @transform;
  transform: @transform;
}

.transform-origin(@transform-origin: left top) {
  -webkit-transform-origin: @transform-origin;
  -moz-transform-origin: @transform-origin;
  -o-transform-origin: @transform-origin;
  -ms-transform-origin: @transform-origin;
  transform-origin: @transform-origin;
}

.transform-style(@transform-style: inherit) {
  -webkit-transform-style: @transform-style;
  -o-transform-style: @transform-style;
  -ms-transform-style: @transform-style;
  -moz-transform-style: @transform-style;
  transform-style: @transform-style;
}

// Extra mixins for fine-tuned transitions
.transition-property(@transition-property: all) {
  -webkit-transition-property: @transition-property;
  -moz-transition-property: @transition-property;
  -o-transition-property: @transition-property;
  -ms-transition-property: @transition-property;
  transition-property: @transition-property;
}

.transition-duration(@transition-duration: 1s) {
  -webkit-transition-duration: @transition-duration;
  -moz-transition-duration: @transition-duration;
  -o-transition-duration: @transition-duration;
  -ms-transition-duration: @transition-duration;
  transition-duration: @transition-duration;
}

.transition-timing-function(@transition-timing-function: linear) {
  -webkit-transition-timing-function: @transition-timing-function;
  -moz-transition-timing-function: @transition-timing-function;
  -o-transition-timing-function: @transition-timing-function;
  -ms-transition-timing-function: @transition-timing-function;
  transition-timing-function: @transition-timing-function;
}

.transition-delay(@transition-delay: 0s) {
  -webkit-transition-delay: @transition-delay;
  -moz-transition-delay: @transition-delay;
  -o-transition-delay: @transition-delay;
  -ms-transition-delay: @transition-delay;
  transition-delay: @transition-delay;
}

.animation(@parameters) {
  -webkit-animation: @parameters;
  -moz-animation: @parameters;
  -o-animation: @parameters;
  -ms-animation: @parameters;
  animation: @parameters;
}

.border-box() {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

// Gradients
#gradient {
  .horizontal (@startColor: #555, @endColor: #333) {
    background-color: @endColor;
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(left, @startColor, @endColor); /* Safari 5.1+, Chrome 10+ */
    -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor); /* IE8+ */
    background-image: linear-gradient(to right, @startColor, @endColor); /* the standard */
  }
  .vertical (@startColor: #555, @endColor: #333) {
    background-color: @endColor;
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(top, @startColor, @endColor); /* Safari 5.1+, Chrome 10+ */
    -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor); /* IE8+ */
    background-image: linear-gradient(to bottom, @startColor, @endColor); /* the standard */
  }
  .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
    background-color: @endColor;
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); /* Safari 5.1+, Chrome 10+ */
    background-image: linear-gradient(@deg, @startColor, @endColor); /* the standard */
  }
  .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
    background-color: @endColor;
    background-repeat: no-repeat;
    background-image: -webkit-linear-gradient(top, @startColor 0%, @midColor @colorStop, @endColor 100%); /* Chrome10+,Safari5.1+ */
    background-image: linear-gradient(to bottom, @startColor 0%, @midColor @colorStop, @endColor 100%); /* the standard */
  }
  .radial(@posX:center, @posY:center, @shape:circle, @size:closest-side, @startColor:white, @endColor:black){
    background-image: -webkit-radial-gradient(@posX @posY, @shape @size, @startColor, @endColor);
    background-image: radial-gradient(@shape @size at @posX @posY, @startColor, @endColor);
  }
}


// Column spans for standard column widths
.span(@columns) {
    float: left;
    width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
    margin: 0 (@gridGutterWidth / 2);
}

.span-all() {
    float: none;
    width: auto;
    margin: 0 (@gridGutterWidth / 2);
}

.offset(@columns) {
    margin-left: ((@gridColumnWidth + @gridGutterWidth) * @columns) + (@gridGutterWidth * 0.5);
}

// Column spans for narrow column widths
.span_narrow(@columns) {
    float: left;
    width: (@gridColumnWidthNarrow * @columns) + (@gridGutterWidth * (@columns - 1));
    margin: 0 (@gridGutterWidth / 2);
}

.offset_narrow(@columns) {
    margin-left: ((@gridColumnWidthNarrow + @gridGutterWidth) * @columns) + (@gridGutterWidth * 0.5);
}

.button-hover-box-shadow(@color: #ffffff) {
    @shadow:  @shadowPartBottom,
              @shadowPartBottomInset,
              inset 0px 12px 24px 2px saturate(@color, 10%);
    .box-shadow(@shadow);
}

.button-focus-box-shadow(@color: #ffffff) {
    @shadow:  @shadowPartBottom,
              @shadowPartBottomInset,
              0 0 0 2px fade(@color, 40%);
    .box-shadow(@shadow);
}

@formFieldErrorShadow:       0 0 0 2px rgba(175, 50, 50, .4);
@formFieldSelectErrorShadow: 0 0 0 3px rgba(175, 50, 50, .4);

.form-field-error {
  border-color: rgb(175,50,50);
  .box-shadow(@formFieldErrorShadow);
}

.required-star() {
    content: " *";
    font-size: @smallFontSize;
    font-weight: bold;
    color: @linkRed;
}

// Hide visually, but not to screen readers
.visually-hidden() {
    position: absolute!important;
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    padding: 0;
    border: 0;
}

// not the most up to date method, but works in IE7
.image-replaced {
    text-indent: 110%; // extra 10% to account for fancy fonts that may overhang
    white-space: nowrap;
    overflow: hidden;
}

// Add chevron character after text (with space)
.trailing-arrow() {
    &:after {
        content: " »"; /* nbsp raquo */
    }
}
