this lack of whitepsace was bothering me

@import 'lib';

#addon {
    font-size: 1.2em;
    font-family: @sans-stack;
    position: relative;
    padding: 20px 20px 20px 104px;
    .icon {
        position: absolute;
        top: 20px;
        left: 20px;
        margin: 0 12px 1em 0;
    }
    h1 {
        padding-right: 54px;
    }
    .badge {
        font-size: 14px;
        margin: 0 1em 0 .5em;
    }
}
.html-rtl #addon {
    padding: 20px 104px 20px 20px;
    .icon {
        left: auto;
        right: 20px;
        margin: 0 0 1em 12px;
    }
    h1 {
        padding-right: 0;
        padding-left: 54px;
    }
    .notavail {
        padding: 1px 18px 1 0;
        margin-right: 0;
        margin-left: 14px;
    }
}

#addon .notavail,
#eula .notavail {
    font-family: @sans-stack;
    font-size: 12px;
    line-height: 12px;
    padding: 1px 0 1px 18px;
    margin-right: 14px;  /* Match the padding of .install. */
    background: url(../../img/impala/no.png) 0 30% no-repeat;
    white-space: nowrap;
}

.html-rtl #addon .notavail,
.html-rtl #eula .notavail {
    background-position: 100% 30%;
    padding: 1px 18px 1px 0;
}

.version-number {
    color: #999;
    font-size: .8em;
}

.notice {
    .border-radius(5px);
    .box-shadow(0 -1px 0 #D7E1ED inset, 0 1px 0 rgba(0, 0, 0, 0.05));
    border: 1px solid #CCD6E3;
    padding: 14px 14px 14px 104px;
    background: #E3EDFA;
    margin-bottom: 1em;
    h3 {
        font-style: italic;
        font-size: 16px;
    }
    p {
        margin-top: .5em;
    }
    b {
        color: #333;
    }
}

.notice.author {
    min-height: 64px;
    position: relative;
    .aux {
        float: right;
        margin-left: 7px;
        text-align: center;
        p {
            font-size: 11px;
        }
    }
    .continue {
        display: block;
        margin-top: .25em;
    }
    .avatar {
        height: 64px;
        width: 64px;
        position: absolute;
        left: 20px;
        top: 1em;
    }
    #contribute-box {
        display: none;
    }
}

.notice.performance-note {
    background: url("../../img/impala/turtle.png") no-repeat 28px 16px #FFF8DC;
    border-color: #e2dbbf;
    .box-shadow(0 -1px 0 #F7F0D5 inset, 0 1px 0 rgba(0, 0, 0, 0.05));
}

.addon-vitals {
    .stars {
        margin: 0 0 4px;
    }
    font-size: 16px;
    line-height: 1.4em;
    .widgets {
        margin: 23px 0 8px;
        font-size: 14px;
        .widget {
            color: #999;
            display: block;
        }
    }
    .stats {
        padding-right: 20px;
        b {
            color: #333;
        }
        color: @medium-gray;
        background: url("../../img/impala/stats.png") no-repeat right top;
        &:hover {
            color: @link;
            background-position: right -20px;
        }
    }
}

.gutter aside {
    color: @medium-gray;
    padding-top: 1em;
}

.addon-reviews > div {
    margin-bottom: 1em;
    font-size: 14px;
}

.widget {
    padding-left: 21px;
    background: url(../../img/impala/widgets.png) no-repeat 0 4px;
    white-space: nowrap;
    &:hover {
        color: @link;
    }
    &.favorite {
        &.faved {
            .sprite-pos(2, 20, 4px);
        }
        &:hover {
            .sprite-pos(1, 20, 4px);
        }
    }
    &.collection-add {
        .sprite-pos(3, 20, 4px);
        &:hover {
            .sprite-pos(4, 20, 4px);
        }
    }
    &.share {
        .sprite-pos(5, 20, 4px);
        &:hover {
            .sprite-pos(6, 20, 4px);
        }
    }
    &.ajax-loading {
        background: url(../../img/zamboni/loading-white.gif) no-repeat 0 2px !important;
    }
}
.html-rtl {
    .widget {
        padding-right: 21px;
        padding-left: 0;
        background-position: right 4px;
        &.favorite {
            &.faved {
                .sprite-pos-right(2, 20, 4px);
            }
            &:hover {
                .sprite-pos-right(1, 20, 4px);
            }
        }
        &.collection-add {
            .sprite-pos-right(3, 20, 4px);
            &:hover {
                .sprite-pos-right(4, 20, 4px);
            }
        }
        &.share {
            .sprite-pos-right(5, 20, 4px);
            &:hover {
                .sprite-pos-right(6, 20, 4px);
            }
        }
        &.ajax-loading {
            background-position: right 2px;
        }
    }
}

.previews {
    background: -moz-radial-gradient(top,
                                     ellipse farthest-side,
                                     rgba(16, 83, 130, 0.5),
                                     rgba(16, 83, 130, 0)),
                -moz-radial-gradient(bottom,
                                     ellipse farthest-side,
                                     rgba(16, 83, 130, 0.5),
                                     rgba(16, 83, 130, 0)),
                -moz-linear-gradient(left,
                                     #F4F8FC,
                                     rgba(255,255,255,0),
                                     #F4F8FC),
                -moz-linear-gradient(top,
                                     rgba(255,255,255,0),
                                     #F4F8FC 50px,
                                     #F4F8FC 180px,
                                     rgba(255,255,255,0));
    background-size: 100% 5px, 100% 5px, auto, auto;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: 0 0, 0 bottom, 0 0, 0 0;
    overflow: hidden;
    clear: both;
    position: relative;
    margin: 2em 0;
    padding: 30px 5%;
    li a {
        display: block;
        margin: 0 auto;
        text-align: center;
        height: 150px;
        width: 200px;
        background: #fff;
        padding: 5px;
        border: 1px solid #ccc;
        img {
            display: inline-block;
            vertical-align: middle;
        }
    }
    .panel {
        width: 100% / 3;
        a {
            display: block;
            text-align: center;
        }
    }
    .control {
        &.next {
            background: -moz-linear-gradient(left, fadeOut(#fff, 100%), #fff 50%);
        }
        &.prev {
            background: -moz-linear-gradient(left, #fff 50%, fadeOut(#fff, 100%));
        }
    }
}

.previews, #lightbox {
    .control {
        display: block;
        position: absolute;
        height: 100%;
        width: 5%;
        text-decoration: none;
        font-size: 48px;
        font-family: @serif-stack;
        text-align: center;
        line-height: 200px;
        top: 0;
        z-index: 100;
        -moz-transition: .3s color;
        &.next {
            right: 0;
        }
        &.prev {
            left: 0;
        }
        &.disabled {
            color: #ccc;
        }
    }
}

.metadata {
    li {
        line-height: 1.4em;
        border: none;
        a {
            padding: 0;
            display: inline;
            line-height: 1;
        }
        a:hover {
            background: transparent;
            text-decoration: underline;
        }
    }
    .links {
        font-size: 14px;
        margin-bottom: 1em;
        li {
            margin-bottom: 4px;
        }
        a {
            padding-left: 18px;
        }
        .support, .home {
            background: url(../../img/impala/home.png) no-repeat left -18px;
        }
        .email {
            background: url(../../img/impala/email.png) no-repeat left -18px;
        }
        .support-gs {
            background: url(../../img/impala/getsatisfaction.png) no-repeat left -18px;
        }
    }
}
#tagbox {
    li, a {
        border: none;
        display: inline;
        padding: 0 1px 0 0;
        line-height: 1.2em;
    }
    li:not(:last-child):after {
        content: '\00B7';
    }
}

#privacy-policy {
    overflow: hidden;
    position: relative;
    padding: 1em;
    h1 {
        line-height: 25px;
    }
    .prose {
        height: 400px;
        padding: 1em 0 0;
        overflow: auto;
    }
}
.banner-box {
    position: absolute;
    top: -1px;
    right: -1px;
    height: 100px;
    width: 100px;
    overflow: hidden;
    pointer-events: none;
}
.banner {
    padding: 6px 60px;
    background: #489615;
    text-transform: uppercase;
    font: bold 13px serif;
    font-family: @sans-stack;
    color: #fff;
    font-weight: bold;
    text-align: center;
    position: absolute;
    top: 0px;
    right: 0px;
    .transform(translate(50%, -50%) rotate(45deg) translateY(55px));
    white-space: nowrap;
}

.version {
    margin-top: .5em;
    ul {
        padding-left: 4px;
    }
    .install {
        display: inline-block;
        margin-bottom: 1em;
    }
}

.secondary .addon {
    hgroup {
        position: relative;
        padding-left: 40px;
        img {
            position: absolute;
            left: 0;
            top: 0;
            width: 32px;
            height: 32px;
        }
        h1 {
            font: bold 16px/18px @serif-stack;
            text-transform: none;
            margin: 0 0 4px;
            padding: 0;
        }
        h4 {
            font-size: 12px;
            line-height: 14px;
        }
    }
}

span.no-restart,
span.featured {
    background-color: #e8933a;
    border-radius: 2px;
    color: #fff;
    display: inline-block;
    font: bold 9px/11px Arial;
    margin: 4px 0 0 4px;
    padding: 3px 6px;
    text-transform: uppercase;
    vertical-align: 3px;
}
span.featured {
    background-color: #093;
}

@import 'lib';

#addon {
    font-size: 1.2em;
    font-family: @sans-stack;
    position: relative;
    padding: 20px 20px 20px 104px;
    .icon {
        position: absolute;
        top: 20px;
        left: 20px;
        margin: 0 12px 1em 0;
    }
    h1 {
        padding-right: 54px;
    }
    .badge {
        font-size: 14px;
        margin-right: 1em;
    }
}
.html-rtl #addon {
    padding: 20px 104px 20px 20px;
    .icon {
        left: auto;
        right: 20px;
        margin: 0 0 1em 12px;
    }
    h1 {
        padding-right: 0;
        padding-left: 54px;
    }
    .notavail {
        padding: 1px 18px 1 0;
        margin-right: 0;
        margin-left: 14px;
    }
}

#addon .notavail,
#eula .notavail {
    font-family: @sans-stack;
    font-size: 12px;
    line-height: 12px;
    padding: 1px 0 1px 18px;
    margin-right: 14px;  /* Match the padding of .install. */
    background: url(../../img/impala/no.png) 0 30% no-repeat;
    white-space: nowrap;
}

.html-rtl #addon .notavail,
.html-rtl #eula .notavail {
    background-position: 100% 30%;
    padding: 1px 18px 1px 0;
}

.version-number {
    color: #999;
    font-size: .8em;
}

.notice {
    .border-radius(5px);
    .box-shadow(0 -1px 0 #D7E1ED inset, 0 1px 0 rgba(0, 0, 0, 0.05));
    border: 1px solid #CCD6E3;
    padding: 14px 14px 14px 104px;
    background: #E3EDFA;
    margin-bottom: 1em;
    h3 {
        font-style: italic;
        font-size: 16px;
    }
    p {
        margin-top: .5em;
    }
    b {
        color: #333;
    }
}

.notice.author {
    min-height: 64px;
    position: relative;
    .aux {
        float: right;
        margin-left: 7px;
        text-align: center;
        p {
            font-size: 11px;
        }
    }
    .continue {
        display: block;
        margin-top: .25em;
    }
    .avatar {
        height: 64px;
        width: 64px;
        position: absolute;
        left: 20px;
        top: 1em;
    }
    #contribute-box {
        display: none;
    }
}

.notice.performance-note {
    background: url("../../img/impala/turtle.png") no-repeat 28px 16px #FFF8DC;
    border-color: #e2dbbf;
    .box-shadow(0 -1px 0 #F7F0D5 inset, 0 1px 0 rgba(0, 0, 0, 0.05));
}

.addon-vitals {
    .stars {
        margin: 0 0 4px;
    }
    font-size: 16px;
    line-height: 1.4em;
    .widgets {
        margin: 23px 0 8px;
        font-size: 14px;
        .widget {
            color: #999;
            display: block;
        }
    }
    .stats {
        padding-right: 20px;
        b {
            color: #333;
        }
        color: @medium-gray;
        background: url("../../img/impala/stats.png") no-repeat right top;
        &:hover {
            color: @link;
            background-position: right -20px;
        }
    }
}

.gutter aside {
    color: @medium-gray;
    padding-top: 1em;
}

.addon-reviews > div {
    margin-bottom: 1em;
    font-size: 14px;
}

.widget {
    padding-left: 21px;
    background: url(../../img/impala/widgets.png) no-repeat 0 4px;
    white-space: nowrap;
    &:hover {
        color: @link;
    }
    &.favorite {
        &.faved {
            .sprite-pos(2, 20, 4px);
        }
        &:hover {
            .sprite-pos(1, 20, 4px);
        }
    }
    &.collection-add {
        .sprite-pos(3, 20, 4px);
        &:hover {
            .sprite-pos(4, 20, 4px);
        }
    }
    &.share {
        .sprite-pos(5, 20, 4px);
        &:hover {
            .sprite-pos(6, 20, 4px);
        }
    }
    &.ajax-loading {
        background: url(../../img/zamboni/loading-white.gif) no-repeat 0 2px !important;
    }
}
.html-rtl {
    .widget {
        padding-right: 21px;
        padding-left: 0;
        background-position: right 4px;
        &.favorite {
            &.faved {
                .sprite-pos-right(2, 20, 4px);
            }
            &:hover {
                .sprite-pos-right(1, 20, 4px);
            }
        }
        &.collection-add {
            .sprite-pos-right(3, 20, 4px);
            &:hover {
                .sprite-pos-right(4, 20, 4px);
            }
        }
        &.share {
            .sprite-pos-right(5, 20, 4px);
            &:hover {
                .sprite-pos-right(6, 20, 4px);
            }
        }
        &.ajax-loading {
            background-position: right 2px;
        }
    }
}

.previews {
    background: -moz-radial-gradient(top,
                                     ellipse farthest-side,
                                     rgba(16, 83, 130, 0.5),
                                     rgba(16, 83, 130, 0)),
                -moz-radial-gradient(bottom,
                                     ellipse farthest-side,
                                     rgba(16, 83, 130, 0.5),
                                     rgba(16, 83, 130, 0)),
                -moz-linear-gradient(left,
                                     #F4F8FC,
                                     rgba(255,255,255,0),
                                     #F4F8FC),
                -moz-linear-gradient(top,
                                     rgba(255,255,255,0),
                                     #F4F8FC 50px,
                                     #F4F8FC 180px,
                                     rgba(255,255,255,0));
    background-size: 100% 5px, 100% 5px, auto, auto;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: 0 0, 0 bottom, 0 0, 0 0;
    overflow: hidden;
    clear: both;
    position: relative;
    margin: 2em 0;
    padding: 30px 5%;
    li a {
        display: block;
        margin: 0 auto;
        text-align: center;
        height: 150px;
        width: 200px;
        background: #fff;
        padding: 5px;
        border: 1px solid #ccc;
        img {
            display: inline-block;
            vertical-align: middle;
        }
    }
    .panel {
        width: 100% / 3;
        a {
            display: block;
            text-align: center;
        }
    }
    .control {
        &.next {
            background: -moz-linear-gradient(left, fadeOut(#fff, 100%), #fff 50%);
        }
        &.prev {
            background: -moz-linear-gradient(left, #fff 50%, fadeOut(#fff, 100%));
        }
    }
}

.previews, #lightbox {
    .control {
        display: block;
        position: absolute;
        height: 100%;
        width: 5%;
        text-decoration: none;
        font-size: 48px;
        font-family: @serif-stack;
        text-align: center;
        line-height: 200px;
        top: 0;
        z-index: 100;
        -moz-transition: .3s color;
        &.next {
            right: 0;
        }
        &.prev {
            left: 0;
        }
        &.disabled {
            color: #ccc;
        }
    }
}

.metadata {
    li {
        line-height: 1.4em;
        border: none;
        a {
            padding: 0;
            display: inline;
            line-height: 1;
        }
        a:hover {
            background: transparent;
            text-decoration: underline;
        }
    }
    .links {
        font-size: 14px;
        margin-bottom: 1em;
        li {
            margin-bottom: 4px;
        }
        a {
            padding-left: 18px;
        }
        .support, .home {
            background: url(../../img/impala/home.png) no-repeat left -18px;
        }
        .email {
            background: url(../../img/impala/email.png) no-repeat left -18px;
        }
        .support-gs {
            background: url(../../img/impala/getsatisfaction.png) no-repeat left -18px;
        }
    }
}
#tagbox {
    li, a {
        border: none;
        display: inline;
        padding: 0 1px 0 0;
        line-height: 1.2em;
    }
    li:not(:last-child):after {
        content: '\00B7';
    }
}

#privacy-policy {
    overflow: hidden;
    position: relative;
    padding: 1em;
    h1 {
        line-height: 25px;
    }
    .prose {
        height: 400px;
        padding: 1em 0 0;
        overflow: auto;
    }
}
.banner-box {
    position: absolute;
    top: -1px;
    right: -1px;
    height: 100px;
    width: 100px;
    overflow: hidden;
    pointer-events: none;
}
.banner {
    padding: 6px 60px;
    background: #489615;
    text-transform: uppercase;
    font: bold 13px serif;
    font-family: @sans-stack;
    color: #fff;
    font-weight: bold;
    text-align: center;
    position: absolute;
    top: 0px;
    right: 0px;
    .transform(translate(50%, -50%) rotate(45deg) translateY(55px));
    white-space: nowrap;
}

.version {
    margin-top: .5em;
    ul {
        padding-left: 4px;
    }
    .install {
        display: inline-block;
        margin-bottom: 1em;
    }
}

.secondary .addon {
    hgroup {
        position: relative;
        padding-left: 40px;
        img {
            position: absolute;
            left: 0;
            top: 0;
            width: 32px;
            height: 32px;
        }
        h1 {
            font: bold 16px/18px @serif-stack;
            text-transform: none;
            margin: 0 0 4px;
            padding: 0;
        }
        h4 {
            font-size: 12px;
            line-height: 14px;
        }
    }
}

span.no-restart,
span.featured {
    background-color: #e8933a;
    border-radius: 2px;
    color: #fff;
    display: inline-block;
    font: bold 9px/11px Arial;
    margin: 4px 0 0 4px;
    padding: 3px 6px;
    text-transform: uppercase;
    vertical-align: 3px;
}
span.featured {
    background-color: #093;
}


refactoring

refactoring

@import "foundation.less";
@import "icons.less";
@import "typography.less";
@import "layout.less";

/*

Inputs

All forms and buttons used in extended mind UI. Imports following less libraries:

* foundation.less
* icons.less
* typography.less
* layout.less
*/

@plus-button-width: 27px;
@icon-button-width: @plus-button-width;

/*
# Forms
*/

/*
* `<input>`, `<select>` and `<textarea>` use maximum width and inherit their background color.
* `<textarea>` height is @vertical-grid / 2 and uses `.break-words` (foundation.less)

*/
input, select, textarea {
  width: 100%;
  background-color: inherit;
}

textarea {
  min-height: @vertical-grid / 2;
  height: @vertical-grid / 2;
  vertical-align: middle;
  .break-words;
}

/*
Use `.simple-input` to create minimalist input fields (no borders or shadows).

```markup
<input type="text" class="simple-input" value="simple input"/>
<textarea class="simple-input">simple textarea</textarea>
```
*/

.simple-input {
  outline: none;
  border: none !important;
  box-shadow: none !important;
  padding: 0;
  background-image: none;
}

/*
Inline form fields have wider bottom padding (used mainly when viewing item details).
```markup
<div class="inline-form-fields">select context...</div>
<div class="inline-form-fields">select repeating...</div>
<div class="inline-form-fields">description...</div>
```
*/
.inline-form-fields {
  padding-bottom: 10px;
}

/*
`.form-group` is used to make inline forms width 100%.
```markup
  <div class="form-group">
    <input type="password" class="simple-input" placeholder="enter old password..." />
  </div>
```
*/
.form-group {
  width: 100%;
}

/*
To indicate errors inside `.form-group` and `<p>`, use `.validation-error`.
```markup
  <div class="form-group">
    <input type="password" name="password" id="input-password" class="simple-input ng-dirty ng-valid-required ng-invalid ng-invalid-minlength" ng-model="user.password" ng-minlength="7" ng-blur="passwordAttempted=true" placeholder="enter password..." required="">
    <p ng-show="loginForm.password.$invalid && !loginForm.password.$pristine && passwordAttempted" class="validation-error">password must be 7 characters or more</p>
  </div>
```

If you want to display the error right under an element, use `<a>` and `.text-link`.
```markup
  <div class="form-group button-container">
    <button type="submit" class="wide-button normal-button" ng-disabled="!loginForm.$valid" ng-click="userLogin()">
      <span>log in</span>
    </button>
    <p ng-show="loginFailed" class="validation-error">invalid username or password.</p>
  </div>
```
*/
// TODO: NEEDS REFACTORING
.form-group {
  p.validation-error {
    display: inline;
    font-size: @font-smallest-size;
    color: @warning;
    line-height: @vertical-grid-half;
    vertical-align: top;
    a.text-link {
      vertical-align: top;
    }
  }
}

/*
Date input gets formatted by `.date-input-placeholder`.
```markup
<div ng-if="showDateInput" class="ng-scope">
  <input type="date" class="simple-input date-input-placeholder" placeholder="08/07/2014" />
</div>
```
*/
//TODO MENEE UUSIKSI (PIKADAY)
.date-input-placeholder {
  display: block;
}

/*
## Form wrapping (horizontal positioning)
Following are used to divide form items horizontally:
* `.table-wrapper`
* `.left-input-wrapper`
* `.right-button-wrapper`
* `.center-input-wrapper`
* `.left-checkbox-wrapper`

Input on the left and button on the right OR checkbox on the left, input in the center, and button on the right.

```markup
<div class="table-wrapper">
  <input type="checkbox" class="left-checkbox-wrapper" />
    <label></label>
    <a href="" class="center-input-wrapper">
      book flight
    </a>
</div>
```
*/
.table-wrapper {
  display: table;
  .center-horizontally;
  width: 100%;
}
.left-input-wrapper, .right-button-wrapper, .center-input-wrapper, .left-checkbox-wrapper {
  display: table-cell;
  vertical-align: middle;
}
.left-input-wrapper, .center-input-wrapper {
  width: 100%;
}
.right-button-wrapper, .left-checkbox-wrapper {
  line-height: 100%;
  button {
    // Quick fix to center the plus button
    // NOTE! Tested with application font!
    padding-top: 5px;
  }
}
.left-checkbox-wrapper {
  width: @icon-button-width + 8px;
}
.right-button-wrapper {
  width: @icon-button-width + 8px;
  button {
    padding-left: 20px;
  }
}

/*
# Buttons

Basic buttons
```markup
<div class="form-group button-container vertical-buttons">
  <button type="submit" class="normal-button wide-button">normal button</button>
  <button type="submit" class="cancel-button wide-button">cancel button</button>
  <button type="submit" class="border-button wide-button">border button</button>
  <button type="submit" class="delete-button wide-button">delete button</button>
  <button type="submit" class="transparent-button wide-button">transparent button</button>
  <button type="submit" class="tab-button wide-button">tab button</button>
  <button type="submit" class="add-button wide-button">add button</button>
</div>
```
*/
button {
  padding: 0;
  margin: 0;
}
button.normal-button {
  color: white;
  & {
    background-color: @normal-button;
  }
  &:active {
    background-color: @normal-button-pressed;
  }
  &[disabled] {
    background-color: @normal-button-disabled;
  }
}
button.cancel-button {
  color: white;
  & {
    background-color: @cancel-button;
  }
  &:active {
    background-color: @cancel-button-pressed;
  }
}
button.border-button {
  border-style: solid !important;
  border-width: 2px !important;
  background-color: white;
  font-size: @default-font-size;
  & {
    color: @normal-button;
    border-color: @normal-button;
  }
  &:active {
    color: @normal-button-pressed;
    border-color: @normal-button-pressed;
  }
  &[disabled] {
    color: @normal-button-disabled;
    border-color: @normal-button-disabled;
  }
}
button.delete-button {
  color: white;
  & {
    background-color: @delete-button;
  }
  &:active {
    background-color: @delete-button-pressed;
  }
}
button.transparent-button {
  color: @normal-button;
  &:hover {
    color: @normal-button-hover;
  }
  &:active {
    color: @normal-button-pressed;
  }
  &[disabled] {
    color: @normal-button-disabled;
  }
}
button.tab-button {
  color: white;
  background-color: @tab-button;
  &:hover {
    background-color: @tab-button-hover;
  }
  &:active {
    background-color: @tab-button-pressed;
  }
  &[disabled] {
    color: black;
    background-color: white;
  }
}
button.add-button {
  .simple-input;
  background-color: white;
  color: @default-element;
}

/*
Use `.button` minimalist look (no default button borders or shadings).

```markup
<button class="button">sort inbox</button>
```
*/
.button {
  background: none;
  cursor: pointer;
  border: none;
  border: 0px;
  display: inline-block;
}

/*
* Use `.button-container` to group buttons
* The parent must be wrapped with `.button-row`

```markup
<ul class="button-row">
<li class="button-container left-of-two">
  <button type="button" class="default-button font-small">change password</button>
</li>
<li class="button-container right-of-two">
  <button type="button" class="default-button font-small">logout</button>
</li>
</ul>
```
*/
// TODO: refactoring needed
.button-row {
  width: 100%;
  height: @vertical-grid;
  vertical-align: middle;
  .button-container {
    button {
      .simple-input;
      width: 100%;
      height: @vertical-grid;
    }
  }
}
.button-container {
  text-align: center;
}

/*
TODO: Refactoring needed, button presentation more clearly (like in Yelp Styleguide)
http://stackoverflow.com/a/12198561/2659424

* `.default-button` gives the basic button coloring (pressed and disabled states)

```markup
<ul class="button-row">
<li class="button-container left-of-two">
  <button type="button" class="default-button font-small highlighted-button">highlighted</button>
</li>
<li class="button-container right-of-two">
  <button type="button" class="default-button disabled="disabled" font-small">disabled</button>
</li>
</ul>
```
*/
button.default-button {
  color: white;
  & {
    background-color: @default-button;
  }
  &:active {
    background-color: @default-button-pressed;
  }
  &[disabled] {
    background-color: @default-button-disabled;
  }
}
button.highlighted-button {
  background-color: white;
  & {
    color: @highlighted-button;
  }
  &:active {
    color: @highlighted-button-pressed;
  }
  &[disabled] {
    color: @highlighted-button-disabled;
  }
}

/*
Use `.wide-button` to make full width buttons.

```markup
<button type="submit" class="wide-button normal-button">
<span>done</span>
</button>
```
*/
.wide-button {
  .simple-input;
  .center-horizontally;
  height: @vertical-grid;
  width: 100%;
  display: block;
}

/*
Use `.vertical-buttons` to make buttons align in a vertical column

```markup
 <div class="form-group button-container vertical-buttons">
<button type="submit" class="wide-button normal-button">
  <span>send</span>
</button>
<button type="submit" class="wide-button cancel-button">
  <span>cancel</span>
</button>
</div>
```
*/
.vertical-buttons {
  button {
    margin-top: @vertical-grid / 4;
    margin-bottom: @vertical-grid / 4;
  }
}

// CHECKBOXES

/*
Basic checkbox

TODO: write example when icons are working with styleguide
*/
// Make labels also clickable
label {
  cursor: pointer;
}
 // Hide default HTML checkbox
 input[type=checkbox] {
  display: none;
}
input[type='checkbox'] + label:before {
  font-family: 'icomoon';
  font-size: @icon-size;
  padding-right: 10px;
  vertical-align: middle;
  color: @default-button;
}
input[type="checkbox"] + label:before {
  .icon-selection-empty;
}

input[type="checkbox"] + label.overdue:before {
  color: @overdue-task;
}

input[type="checkbox"]:checked + label:before {
  .icon-selection-checked;
  color: @highlighted-element;
}

// Android hack: 10px padding caused redraw problems
// on the checkbox while swiping, and no other CSS
// solution fixed the problem. Something like this:
// http://stackoverflow.com/a/16174338/2659424
// might be the only proper solution to the repaint
// problems with Android's WebKit.
.android input[type='checkbox'] + label:before {
  padding-right: 15px;
}

// TODO Changes with pikaday?
input[type=date] {
  &.simple-input {
    color: @default-element;
  }
  background: none;
  border: none;
  outline: none;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

// SELECTIONS

select {
  &.simple-input {
    color: @default-element;
    background: none;
    padding: 0;
  }
  option {
    color: black;
  }
  option:first-child {
    color: @default-element;
  }
}

::-webkit-resizer {
  display: none;
}

// PLACEHOLDER TWEAK

::-webkit-input-placeholder { /* WebKit browsers */
  color: @default-element;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: @default-element;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: @default-element;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: @default-element;
}

@import "foundation.less";
@import "icons.less";
@import "typography.less";
@import "layout.less";

/*

Inputs

All forms and buttons used in extended mind UI. Imports following less libraries:

* foundation.less
* icons.less
* typography.less
* layout.less
*/

@plus-button-width: 27px;
@icon-button-width: @plus-button-width;

/*
# Forms
*/

/*
* `<input>`, `<select>` and `<textarea>` use maximum width and inherit their background color.
* `<textarea>` height is @vertical-grid / 2 and uses `.break-words` (foundation.less)

*/
input, select, textarea {
  width: 100%;
  background-color: inherit;
}

textarea {
  min-height: @vertical-grid / 2;
  height: @vertical-grid / 2;
  vertical-align: middle;
  .break-words;
}

/*
Use `.simple-input` to create minimalist input fields (no borders or shadows).

```markup
<input type="text" class="simple-input" value="simple input"/>
<textarea class="simple-input">simple textarea</textarea>
```
*/

.simple-input {
  outline: none;
  border: none !important;
  box-shadow: none !important;
  padding: 0;
  background-image: none;
}

/*
Inline form fields have wider bottom padding (used mainly when viewing item details).
```markup
<div class="inline-form-fields">select context...</div>
<div class="inline-form-fields">select repeating...</div>
<div class="inline-form-fields">description...</div>
```
*/
.inline-form-fields {
  padding-bottom: 10px;
}

/*
`.form-group` is used to make inline forms width 100%.
```markup
  <div class="form-group">
    <input type="password" class="simple-input" placeholder="enter old password..." />
  </div>
```
*/
.form-group {
  width: 100%;
}

/*
To indicate errors inside `.form-group` and `<p>`, use `.validation-error`.
```markup
  <div class="form-group">
    <input type="password" name="password" id="input-password" class="simple-input ng-dirty ng-valid-required ng-invalid ng-invalid-minlength" ng-model="user.password" ng-minlength="7" ng-blur="passwordAttempted=true" placeholder="enter password..." required="">
    <p ng-show="loginForm.password.$invalid && !loginForm.password.$pristine && passwordAttempted" class="validation-error">password must be 7 characters or more</p>
  </div>
```

If you want to display the error right under an element, use `<a>` and `.text-link`.
```markup
  <div class="form-group button-container">
    <button type="submit" class="wide-button normal-button" ng-disabled="!loginForm.$valid" ng-click="userLogin()">
      <span>log in</span>
    </button>
    <p ng-show="loginFailed" class="validation-error">invalid username or password.</p>
  </div>
```
*/
// TODO: NEEDS REFACTORING
.form-group {
  p.validation-error {
    display: inline;
    font-size: @font-smallest-size;
    color: @warning;
    line-height: @vertical-grid-half;
    vertical-align: top;
    a.text-link {
      vertical-align: top;
    }
  }
}

/*
Date input gets formatted by `.date-input-placeholder`.
```markup
<div ng-if="showDateInput" class="ng-scope">
  <input type="date" class="simple-input date-input-placeholder" placeholder="08/07/2014" />
</div>
```
*/
//TODO MENEE UUSIKSI (PIKADAY)
.date-input-placeholder {
  display: block;
}

/*
## Form wrapping (horizontal positioning)
Following are used to divide form items horizontally:
* `.table-wrapper`
* `.left-input-wrapper`
* `.right-button-wrapper`
* `.center-input-wrapper`
* `.left-checkbox-wrapper`

Input on the left and button on the right OR checkbox on the left, input in the center, and button on the right.

```markup
<div class="table-wrapper">
  <input type="checkbox" class="left-checkbox-wrapper" />
    <label></label>
    <a href="" class="center-input-wrapper">
      book flight
    </a>
</div>
```
*/
.table-wrapper {
  display: table;
  .center-horizontally;
  width: 100%;
}
.left-input-wrapper, .right-button-wrapper, .center-input-wrapper, .left-checkbox-wrapper {
  display: table-cell;
  vertical-align: middle;
}
.left-input-wrapper, .center-input-wrapper {
  width: 100%;
}
.right-button-wrapper, .left-checkbox-wrapper {
  line-height: 100%;
  button {
    // Quick fix to center the plus button
    // NOTE! Tested with application font!
    padding-top: 5px;
  }
}
.left-checkbox-wrapper {
  width: @icon-button-width + 8px;
}
.right-button-wrapper {
  width: @icon-button-width + 8px;
  button {
    padding-left: 20px;
  }
}

/*
# Buttons

Basic buttons
```markup
<div class="form-group button-container vertical-buttons">
  <button type="submit" class="normal-button wide-button">normal button</button>
  <button type="submit" class="cancel-button wide-button">cancel button</button>
  <button type="submit" class="border-button wide-button">border button</button>
  <button type="submit" class="delete-button wide-button">delete button</button>
  <button type="submit" class="transparent-button wide-button">transparent button</button>
  <button type="submit" class="tab-button wide-button">tab button</button>
  <button type="submit" class="add-button wide-button">add button</button>
</div>
```
*/
button.normal-button {
  color: white;
  & {
    background-color: @normal-button;
  }
  &:active {
    background-color: @normal-button-pressed;
  }
  &[disabled] {
    background-color: @normal-button-disabled;
  }
}
button.cancel-button {
  color: white;
  & {
    background-color: @cancel-button;
  }
  &:active {
    background-color: @cancel-button-pressed;
  }
}
button.border-button {
  border-style: solid !important;
  border-width: 2px !important;
  background-color: white;
  font-size: @default-font-size;
  & {
    color: @normal-button;
    border-color: @normal-button;
  }
  &:active {
    color: @normal-button-pressed;
    border-color: @normal-button-pressed;
  }
  &[disabled] {
    color: @normal-button-disabled;
    border-color: @normal-button-disabled;
  }
}
button.delete-button {
  color: white;
  & {
    background-color: @delete-button;
  }
  &:active {
    background-color: @delete-button-pressed;
  }
}
button.transparent-button {
  color: @normal-button;
  &:hover {
    color: @normal-button-hover;
  }
  &:active {
    color: @normal-button-pressed;
  }
  &[disabled] {
    color: @normal-button-disabled;
  }
}
button.tab-button {
  color: white;
  background-color: @tab-button;
  &:hover {
    background-color: @tab-button-hover;
  }
  &:active {
    background-color: @tab-button-pressed;
  }
  &[disabled] {
    color: black;
    background-color: white;
  }
}
button.add-button {
  .simple-input;
  background-color: white;
  color: @default-element;
}

/*
Use `.button` minimalist look (no default button borders or shadings).

```markup
<button class="button">sort inbox</button>
```
*/
.button {
  background: none;
  cursor: pointer;
  border: none;
  border: 0px;
  display: inline-block;
}

/*
* Use `.button-container` to group buttons
* The parent must be wrapped with `.button-row`

```markup
<ul class="button-row">
<li class="button-container left-of-two">
  <button type="button" class="default-button font-small">change password</button>
</li>
<li class="button-container right-of-two">
  <button type="button" class="default-button font-small">logout</button>
</li>
</ul>
```
*/
// TODO: refactoring needed
.button-row {
  width: 100%;
  height: @vertical-grid;
  vertical-align: middle;
  .button-container {
    button {
      .simple-input;
      width: 100%;
      height: @vertical-grid;
    }
  }
}
.button-container {
  text-align: center;
}

/*
TODO: Refactoring needed, button presentation more clearly (like in Yelp Styleguide)
http://stackoverflow.com/a/12198561/2659424

* `.default-button` gives the basic button coloring (pressed and disabled states)

```markup
<ul class="button-row">
<li class="button-container left-of-two">
  <button type="button" class="default-button font-small highlighted-button">highlighted</button>
</li>
<li class="button-container right-of-two">
  <button type="button" class="default-button disabled="disabled" font-small">disabled</button>
</li>
</ul>
```
*/
button.default-button {
  color: white;
  & {
    background-color: @default-button;
  }
  &:active {
    background-color: @default-button-pressed;
  }
  &[disabled] {
    background-color: @default-button-disabled;
  }
}
button.highlighted-button {
  background-color: white;
  & {
    color: @highlighted-button;
  }
  &:active {
    color: @highlighted-button-pressed;
  }
  &[disabled] {
    color: @highlighted-button-disabled;
  }
}

/*
Use `.wide-button` to make full width buttons.

```markup
<button type="submit" class="wide-button normal-button">
<span>done</span>
</button>
```
*/
.wide-button {
  .simple-input;
  .center-horizontally;
  height: @vertical-grid;
  width: 100%;
  display: block;
}

/*
Use `.vertical-buttons` to make buttons align in a vertical column

```markup
 <div class="form-group button-container vertical-buttons">
<button type="submit" class="wide-button normal-button">
  <span>send</span>
</button>
<button type="submit" class="wide-button cancel-button">
  <span>cancel</span>
</button>
</div>
```
*/
.vertical-buttons {
  button {
    margin-top: @vertical-grid / 4;
    margin-bottom: @vertical-grid / 4;
  }
}

// CHECKBOXES

/*
Basic checkbox

TODO: write example when icons are working with styleguide
*/
// Make labels also clickable
label {
  cursor: pointer;
}
 // Hide default HTML checkbox
 input[type=checkbox] {
  display: none;
}
input[type='checkbox'] + label:before {
  font-family: 'icomoon';
  font-size: @icon-size;
  padding-right: 10px;
  vertical-align: middle;
  color: @default-button;
}
input[type="checkbox"] + label:before {
  .icon-selection-empty;
}

input[type="checkbox"] + label.overdue:before {
  color: @overdue-task;
}

input[type="checkbox"]:checked + label:before {
  .icon-selection-checked;
  color: @highlighted-element;
}

// Android hack: 10px padding caused redraw problems
// on the checkbox while swiping, and no other CSS
// solution fixed the problem. Something like this:
// http://stackoverflow.com/a/16174338/2659424
// might be the only proper solution to the repaint
// problems with Android's WebKit.
.android input[type='checkbox'] + label:before {
  padding-right: 15px;
}

input[type=date] {
  &.simple-input {
    color: @default-element;
  }
  background: none;
  border: none;
  outline: none;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

// SELECTIONS

select {
  &.simple-input {
    color: @default-element;
    background: none;
    padding: 0;
  }
  option {
    color: black;
  }
  option:first-child {
    color: @default-element;
  }
}

::-webkit-resizer {
  display: none;
}

button {
  padding: 0;
  margin: 0;
}

// PLACEHOLDER TWEAK

::-webkit-input-placeholder { /* WebKit browsers */
  color: @default-element;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: @default-element;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: @default-element;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: @default-element;
}


Reduced mastedhead p font-size and added fixed height for masthead.

@import (reference) "{thriver:core-styles}/lib/index.less";
@import (reference) "{thriver:core-styles}/lib/styles/context.import.less";

section#masthead, section.masthead{
    //background: black;
    overflow: hidden;
    position: relative;
    border-bottom: none !important;
    //height:570px;
    //@media (min-width:1101px){ height: 570px !important;}
    //padding: 0px 0px 60px 0px;
    //@media (min-width:768px){ padding: 0px 0px 60px 0px !important;}
    //@media (max-width:1100px){ height: 610px;}
    //@media (max-width:945px){ height: 700px;}
    background: lighten(@navy,10%) !important;
    padding: 40px 0px 40px 0px;
    > .container{
        //padding: 40px 40px 40px 40px;
        padding: 40px 0px;
        @media @mobile{
            //padding: 20px;
        }
    }
    menu.tabs{
        float: right;
        display: block;
        width: 30%;
        li{
            display: block;
            clear: both;
            text-align: left;
            width: 100%;
            a{
                justify-content: flex-start;
                align-items: left;
                display: block !important; //override standard tab flex behavior
            }
        }
    }
    div.tabs{
        float: left;
        width: 69%;
    }
}

section#masthead, section.masthead{
    menu.tabs, menu.tabs li a, div.tabs, div.tabs > div{ background-color: transparent !important; }
}

section#masthead menu.tabs, section.masthead menu.tabs{
    //margin-top: @headerH - 65px;
    position: relative;
    z-index: 3;
    border-left: 2px solid #fff; //fallback
    border-left: 2px solid rgba(255,255,255,0.75);
    padding: 20px 0px 50px 0px;
}
section#masthead div.tabs, section.masthead div.tabs{
    >article{
        padding: 10px 40px 0px 40px;
        //padding-top: @headerH - 65px;
        .masthead-bg{
            position: absolute;
            top: 0; left: 0;
            min-width:100%;
            min-height: 100%;
            z-index: 0;
        }
        *{position: relative; z-index: 3;}
    }
    > article:first-child{
       // background-image: url('/lib/img/mastheadArticle.gif');
        a{.textButtonColor(@yellow) !important;}
        a.button{.buttonColor(rgba(34,119,180,1)) !important; color:@white !important;}
        &:after{
            content:'';
            top: 0; left: 0;
            opacity: 0.9;
            width:100%;
            height: 100%;
            position: absolute;
            background: #2277b4;
            background: -moz-linear-gradient(left, #2277b4 0%, #00a5a8 100%);
            background: -webkit-gradient(left top, right top, color-stop(0%, #2277b4), color-stop(100%, #00a5a8));
            background: -webkit-linear-gradient(left, #2277b4 0%, #00a5a8 100%);
            background: -o-linear-gradient(left, #2277b4 0%, #00a5a8 100%);
            background: -ms-linear-gradient(left, #2277b4 0%, #00a5a8 100%);
            background: linear-gradient(to right, #2277b4 0%, #00a5a8 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2277b4', endColorstr='#00a5a8', GradientType=1);
        }
    }
    > article:nth-child(2){
        a{.textButtonColor(lighten(@yellow,15%)) !important;}
        a.button{.buttonColor(rgba(34,119,180,1)) !important; color:@white !important;}
        &:after{
            content:'';
            top: 0; left: 0;
            opacity: 0.9;
            width:100%;
            height: 100%;
            position: absolute;
            background: #4b6cb7;
            background: -webkit-linear-gradient(to left, #4b6cb7, #182848);
            background: linear-gradient(to left, #4b6cb7, #182848);
        }
    }
    > article:nth-child(3){
       // background-image: url('/lib/img/mastheadArticle.gif');
        a{.textButtonColor(@yellow) !important;}
        a.button{.buttonColor(#f46b45) !important; color:@white !important;}
        &:after{
            content:'';
            top: 0; left: 0;
            opacity: 0.9;
            width:100%;
            height: 100%;
            position: absolute;
            background: #f46b45;
            background: -webkit-linear-gradient(to left, #f46b45, #eea849);
            background: linear-gradient(to left, #f46b45, #eea849);
        }
    }
}
//section#masthead, section.masthead{

section#masthead, section.masthead{
    color:@white;
    height: 375px;
    @media (max-width:990px){
        height: 490px;
    }
    h1,p, a.cta{
        color: @white;
    }
    a.cta{
        display: inline-block;
        .buttonColor(@orange);
        margin: 7px 0px 0px 0px;
        padding: 20px;
    }
    h1{
        margin: 0px;
        .font(3.6,4.2,0.15,@bold,uppercase);
        @media @mobile{
            .font(2.6,3.2,0.15,@bold,uppercase);
            text-align: center;
            padding-top: 0px !important; //override tabs
        }
    }
    p{
    .font(1.4,2.0,0,@normal,none);
    @media @mobile{
        .font(1.4,1.9,0.025,@normal,none);
    }
    }
    ul{margin-left: 0px;}
    li{
        list-style: none;
    }
    a{cursor: pointer;}
}

// Slide Styles
section#masthead, section.masthead{
    //Nav styles
    menu.tabs{
        &:before{
            content:"What's New";
            .font(1.8,2.2,0.025,@normal,uppercase);
            color: @white;
            margin: 0px 0px 16px 0px;
            padding: 0px 0px 0px 30px;
            .opacity(0.7);
        }
        > li a{
            list-style: none;
            display: inline-block;
            .font(1.4,1.7,0.025,@normal,uppercase);
            margin: 0px;
            //.textButtonColor(@gray);
            cursor: pointer;
            .opacity(1);
            border-bottom: 2px solid transparent;
            padding:25px 15px 15px 30px;
            .trans(opacity @durationDefault @easeDefault 0ms);
            width: auto;
            &[aria-expanded="true"]{
                .opacity(1);
                //border-bottom: 2px solid @gray;
                //border-bottom: 2px solid rgba(255,255,255,0.15);
            }
            &:last-child{
                margin:0px;
            }
            //display: block;
            position: relative;
            //margin: 0px 12px 0px 12px;
            &:after {
                .trans(all @durationDefault @easeDefault 0ms);
            }
            &:focus{.shadowNone !important;}
            &:after {
                content: '';
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                height: 2px;
                background-color: @white;
                top: 100%;
                width: ~'calc(100% - 20px)';
                .opacity(0);
                .transform(translate(0px,10px));
            }
            &:hover {
                .opacity(0.9);
                &:after {
                    .opacity(0.5);
                    .transform(translate(0px,0px));
                }
            }
            &[aria-expanded="true"]{
                &:after{
                    .opacity(0.75);
                    .transform(translate(0px,0px));
                    //background-color: @teal;
                }
            }
        }
    }
}

//Mobile
main section#masthead, main section.masthead{
    background: @sidebarPrimaryColor;
    @media @mobile{
        height: 267px !important;
        overflow: hidden !important;
        width: 100%;
        display: table;
        min-height: 0px;
        > div.container{
            display: table-cell;
            vertical-align: middle;
        }
        menu.tabs, div.tabs article, div.tabs{
            padding:0px; margin:0px !important;
            width: 100% !important;
        }
        div.tabs{
            > article *{ display: none; }
            > article h1,  article img{ display: block; }
            > article .cta { display: inline-block; }
            > article{ text-align: center; margin-top: -40px;}
            h1{ font-size: 22px; padding-top: 20px; }
        }
        //menu.tabs{display: none;}
        menu.tabs{
            width: auto !important;
            border: none;
            position: absolute;
            bottom: 10px;
            left:50%;
            margin-left:-43px !important;
            &:before{ display: none; }
            li{
                display: inline-block;
                margin-right: 10px !important;
                a{
                    &:after{ display: none; }
                    width: 18px;
                    height: 16px;
                    background: #fff !important;
                    overflow: hidden;
                    padding: 0px;
                    border-radius: 50%;
                    -webkit-border-radius:50%;
                    opacity: 0.5 !important;
                    &[aria-expanded="true"]{
                        opacity: 1 !important;
                    }
                    -moz-user-select: none; /* Firefox */
                    -ms-user-select: none; /* Internet Explorer */
                    -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
                    -webkit-user-select: none; /* Chrome, Safari, and Opera */
                    -webkit-touch-callout: none; /* Disable Android and iOS callouts*/
                }
            }
        }
    }
}

@import (reference) "{thriver:core-styles}/lib/index.less";
@import (reference) "{thriver:core-styles}/lib/styles/context.import.less";

section#masthead, section.masthead{
    //background: black;
    overflow: hidden;
    position: relative;
    border-bottom: none !important;
    //height:570px;
    //@media (min-width:1101px){ height: 570px !important;}
    //padding: 0px 0px 60px 0px;
    //@media (min-width:768px){ padding: 0px 0px 60px 0px !important;}
    //@media (max-width:1100px){ height: 610px;}
    //@media (max-width:945px){ height: 700px;}
    background: lighten(@navy,10%) !important;
    padding: 40px 0px 40px 0px;
    > .container{
        //padding: 40px 40px 40px 40px;
        padding: 40px 0px;
        @media @mobile{
            //padding: 20px;
        }
    }
    menu.tabs{
        float: right;
        display: block;
        width: 30%;
        li{
            display: block;
            clear: both;
            text-align: left;
            width: 100%;
            a{
                justify-content: flex-start;
                align-items: left;
                display: block !important; //override standard tab flex behavior
            }
        }
    }
    div.tabs{
        float: left;
        width: 69%;
    }
}

section#masthead, section.masthead{
    menu.tabs, menu.tabs li a, div.tabs, div.tabs > div{ background-color: transparent !important; }
}

section#masthead menu.tabs, section.masthead menu.tabs{
    //margin-top: @headerH - 65px;
    position: relative;
    z-index: 3;
    border-left: 2px solid #fff; //fallback
    border-left: 2px solid rgba(255,255,255,0.75);
    padding: 20px 0px 50px 0px;
}
section#masthead div.tabs, section.masthead div.tabs{
    >article{
        padding: 10px 40px 0px 40px;
        //padding-top: @headerH - 65px;
        .masthead-bg{
            position: absolute;
            top: 0; left: 0;
            min-width:100%;
            min-height: 100%;
            z-index: 0;
        }
        *{position: relative; z-index: 3;}
    }
    > article:first-child{
       // background-image: url('/lib/img/mastheadArticle.gif');
        a{.textButtonColor(@yellow) !important;}
        a.button{.buttonColor(rgba(34,119,180,1)) !important; color:@white !important;}
        &:after{
            content:'';
            top: 0; left: 0;
            opacity: 0.9;
            width:100%;
            height: 100%;
            position: absolute;
            background: #2277b4;
            background: -moz-linear-gradient(left, #2277b4 0%, #00a5a8 100%);
            background: -webkit-gradient(left top, right top, color-stop(0%, #2277b4), color-stop(100%, #00a5a8));
            background: -webkit-linear-gradient(left, #2277b4 0%, #00a5a8 100%);
            background: -o-linear-gradient(left, #2277b4 0%, #00a5a8 100%);
            background: -ms-linear-gradient(left, #2277b4 0%, #00a5a8 100%);
            background: linear-gradient(to right, #2277b4 0%, #00a5a8 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2277b4', endColorstr='#00a5a8', GradientType=1);
        }
    }
    > article:nth-child(2){
        a{.textButtonColor(lighten(@yellow,15%)) !important;}
        a.button{.buttonColor(rgba(34,119,180,1)) !important; color:@white !important;}
        &:after{
            content:'';
            top: 0; left: 0;
            opacity: 0.9;
            width:100%;
            height: 100%;
            position: absolute;
            background: #4b6cb7;
            background: -webkit-linear-gradient(to left, #4b6cb7, #182848);
            background: linear-gradient(to left, #4b6cb7, #182848);
        }
    }
    > article:nth-child(3){
       // background-image: url('/lib/img/mastheadArticle.gif');
        a{.textButtonColor(@yellow) !important;}
        a.button{.buttonColor(#f46b45) !important; color:@white !important;}
        &:after{
            content:'';
            top: 0; left: 0;
            opacity: 0.9;
            width:100%;
            height: 100%;
            position: absolute;
            background: #f46b45;
            background: -webkit-linear-gradient(to left, #f46b45, #eea849);
            background: linear-gradient(to left, #f46b45, #eea849);
        }
    }
}
//section#masthead, section.masthead{

section#masthead, section.masthead{
    color:@white;
    h1,p, a.cta{
        color: @white;
    }
    a.cta{
        display: inline-block;
        .buttonColor(@orange);
        margin: 7px 0px 0px 0px;
        padding: 20px;
    }
    h1{
        margin: 0px;
        .font(3.6,4.2,0.15,@bold,uppercase);
        @media @mobile{
            .font(2.6,3.2,0.15,@bold,uppercase);
            text-align: center;
            padding-top: 0px !important; //override tabs
        }
    }
    p{
    .font(1.6,3.0,0.025,@normal,none);
    @media @mobile{
        .font(1.4,1.9,0.025,@normal,none);
    }
    }
    ul{margin-left: 0px;}
    li{
        list-style: none;
    }
    a{cursor: pointer;}
}

// Slide Styles
section#masthead, section.masthead{
    //Nav styles
    menu.tabs{
        &:before{
            content:"What's New";
            .font(1.8,2.2,0.025,@normal,uppercase);
            color: @white;
            margin: 0px 0px 16px 0px;
            padding: 0px 0px 0px 30px;
            .opacity(0.7);
        }
        > li a{
            list-style: none;
            display: inline-block;
            .font(1.4,1.7,0.025,@normal,uppercase);
            margin: 0px;
            //.textButtonColor(@gray);
            cursor: pointer;
            .opacity(1);
            border-bottom: 2px solid transparent;
            padding:25px 15px 15px 30px;
            .trans(opacity @durationDefault @easeDefault 0ms);
            width: auto;
            &[aria-expanded="true"]{
                .opacity(1);
                //border-bottom: 2px solid @gray;
                //border-bottom: 2px solid rgba(255,255,255,0.15);
            }
            &:last-child{
                margin:0px;
            }
            //display: block;
            position: relative;
            //margin: 0px 12px 0px 12px;
            &:after {
                .trans(all @durationDefault @easeDefault 0ms);
            }
            &:focus{.shadowNone !important;}
            &:after {
                content: '';
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                height: 2px;
                background-color: @white;
                top: 100%;
                width: ~'calc(100% - 20px)';
                .opacity(0);
                .transform(translate(0px,10px));
            }
            &:hover {
                .opacity(0.9);
                &:after {
                    .opacity(0.5);
                    .transform(translate(0px,0px));
                }
            }
            &[aria-expanded="true"]{
                &:after{
                    .opacity(0.75);
                    .transform(translate(0px,0px));
                    //background-color: @teal;
                }
            }
        }
    }
}

//Mobile
main section#masthead, main section.masthead{
    background: @sidebarPrimaryColor;
    @media @mobile{
        height: 267px !important;
        overflow: hidden !important;
        width: 100%;
        display: table;
        min-height: 0px;
        > div.container{
            display: table-cell;
            vertical-align: middle;
        }
        menu.tabs, div.tabs article, div.tabs{
            padding:0px; margin:0px !important;
            width: 100% !important;
        }
        div.tabs{
            > article *{ display: none; }
            > article h1,  article img{ display: block; }
            > article .cta { display: inline-block; }
            > article{ text-align: center; margin-top: -40px;}
            h1{ font-size: 22px; padding-top: 20px; }
        }
        //menu.tabs{display: none;}
        menu.tabs{
            width: auto !important;
            border: none;
            position: absolute;
            bottom: 10px;
            left:50%;
            margin-left:-43px !important;
            &:before{ display: none; }
            li{
                display: inline-block;
                margin-right: 10px !important;
                a{
                    &:after{ display: none; }
                    width: 18px;
                    height: 16px;
                    background: #fff !important;
                    overflow: hidden;
                    padding: 0px;
                    border-radius: 50%;
                    -webkit-border-radius:50%;
                    opacity: 0.5 !important;
                    &[aria-expanded="true"]{
                        opacity: 1 !important;
                    }
                    -moz-user-select: none; /* Firefox */
                    -ms-user-select: none; /* Internet Explorer */
                    -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
                    -webkit-user-select: none; /* Chrome, Safari, and Opera */
                    -webkit-touch-callout: none; /* Disable Android and iOS callouts*/
                }
            }
        }
    }
}


[FIX] core.BusyIndicator: Removed Vendor-Prefixes for Animations

As from Internet Explorer 10 and newer Firefox, the vendor prefix
for keyframes animation isn't needed anymore it could be removed.

On the other hand using attributes within an animation with unknown
vendor prefix in Internet Explorer, the browser crashed and was also
not able to fetch the stylesheet at all.
So a removal was necessary for this specific case.

Even though Internet Explorer 9 isn't able to handle keyframes
animation the workaround for the BusyIndicator remained.

Change-Id: I37f4383976c0f71ec8d345513d8220bccbbdc4da
BCP: 0020283765 0000224717 2016
BCP: 0020283765 0000246537 2016
BCP: 0020283765 0000192865 2016

@sapUiLocalBusyIndicatorBG: fade(@sapBackgroundColor, 72%);
@sapUiLocalBusyIndicatorBG_IE: @sapBackgroundColor;

@sapUiLocalBusyIndicatorColor: @sapBrandColor;

@sapUiLocalBusyIndicatorBorderRadius: 100%;

@sapUiLocalBusyIndicatorSizeMedium: 1rem;
@sapUiLocalBusyIndicatorSizeBig: 2rem;

.sapUiLocalBusyIndicator {
	background-color: @sapUiLocalBusyIndicatorBG;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;

	opacity: 0;
	transition: opacity 0.3s ease-in;
	-webkit-transition: opacity 0.3s ease-in;
}

/* Make sure busy indicators are not "nested", and the animations do not overlay each other */
.sapUiLocalBusy .sapUiLocalBusy .sapUiLocalBusyIndicator {
	display: none;
}

.sapUiLocalBusyIndicatorFade {
	opacity: 1;
}

/* Class for medium sized indicator in control overlay */
.sapUiLocalBusyIndicatorSizeMedium {
	font-size: @sapUiLocalBusyIndicatorSizeMedium;
}

/* Class for fullscreen block overlay */
.sapUiLocalBusyIndicatorSizeBig {
	font-size: @sapUiLocalBusyIndicatorSizeBig;
	background-color: transparent;

}

/* Centers the busy indicator markers */
.sapUiLocalBusyIndicatorAnimation {
	position: absolute;
	width: 3em;
	top: 50%;
	left: 50%;
}

/* indicator bubble */
.sapUiLocalBusyIndicatorAnimation > div {
	width: 1em;
	height: 1em;
	border-radius: @sapUiLocalBusyIndicatorBorderRadius;
	display: block;
	float: left;
	margin: 0px;
	position: relative;
	top: -0.5em;
	left: -1.5em;
	text-indent: 1px;
}

/* General pseudo-element styles for background/shadow animation */
.sapUiLocalBusyIndicatorAnimation > div::before,
.sapUiLocalBusyIndicatorAnimation > div::after {
	content: "";
	opacity: 1;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: @sapUiLocalBusyIndicatorBorderRadius;
}

/* Background animation element */
.sapUiLocalBusyIndicatorAnimation > div::before {
	background: fade(@sapUiLocalBusyIndicatorColor, 100%);
}

/* Shadow animation element */
.sapUiLocalBusyIndicatorAnimation > div::after {
	box-shadow: inset 0px 0px 2px 1px fade(@sapUiLocalBusyIndicatorColor, 80%);
}

/* Animations Starting Classes */
.sapUiLocalBusyIndicatorAnimation > div,
.sapUiLocalBusyIndicatorAnimation > div::before,
.sapUiLocalBusyIndicatorAnimation > div::after {
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

/* Big Animation for Elments >= (3rem x 3rem) */
.sapUiLocalBusyIndicatorAnimStandard > div {
	-webkit-animation: sapUiBusyAnimationStandard 1.8s infinite ease-in-out;
	animation: sapUiBusyAnimationStandard 1.8s infinite ease-in-out;
}

.sapUiLocalBusyIndicatorAnimStandard > div::before {
	-webkit-animation: sapUiBusyAnimationStandardBackground 1.8s infinite ease-in-out;
	animation: sapUiBusyAnimationStandardBackground 1.8s infinite ease-in-out;
}

.sapUiLocalBusyIndicatorAnimStandard > div::after {
	-webkit-animation: sapUiBusyAnimationStandardShadow 1.8s infinite ease-in-out;
	animation: sapUiBusyAnimationStandardShadow 1.8s infinite ease-in-out;
}

.sapUiLocalBusyIndicatorAnimStandard > div:nth-child(1) {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}

.sapUiLocalBusyIndicatorAnimStandard > div:nth-child(2) {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

/* Small animation for elements < (3rem x 3rem) */
.sapUiLocalBusyIndicatorAnimSmall > div {
	-webkit-animation: sapUiBusyAnimationSmall 1.6s infinite ease-in-out;
	animation: sapUiBusyAnimationSmall 1.6s infinite ease-in-out;
}

.sapUiLocalBusyIndicatorAnimSmall > div::before {
	-webkit-animation: sapUiBusyAnimationSmallBackground 1.6s infinite ease-in-out;
	animation: sapUiBusyAnimationSmallBackground 1.6s infinite ease-in-out;
}

.sapUiLocalBusyIndicatorAnimSmall > div::after {
	-webkit-animation: sapUiBusyAnimationSmallShadow 1.6s infinite ease-in-out;
	animation: sapUiBusyAnimationSmallShadow 1.6s infinite ease-in-out;
}

/* marker class for switching horizontal and small animation */
.sapUiLocalBusyIndicatorAnimSmall > div:nth-child(1),
.sapUiLocalBusyIndicatorAnimSmall > div:nth-child(3) {
	visibility: hidden;
}

#sapUiBusyIndicator {
	right: 0px;
}

/**
 * Keyframe definitions
 */
.mixin-standard-animation-frames {
	0%, 80%, 100% {
		-webkit-transform: scale(0.4);
		transform: scale(0.4);
	}
	40% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}
.mixin-standard-background-animation-frames {
	0%, 80%, 100% {
		opacity: 1;
	}
	40% {
		opacity: 0.1;
	}
}
.mixin-standard-shadow-animation-frames {
	0%, 80%, 100% {
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
}

.mixin-small-animation-frames {
	0%, 100% {
		-webkit-transform: scale(0.2);
		transform: scale(0.2);
	}
	50% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}
.mixin-small-background-animation-frames {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.1;
	}
}
.mixin-small-shadow-animation-frames {
	0%, 100% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
}

/**
 * Animations for different browser vendors
 */
@keyframes sapUiBusyAnimationStandard { .mixin-standard-animation-frames; }
@-webkit-keyframes sapUiBusyAnimationStandard { .mixin-standard-animation-frames; }
@-moz-keyframes sapUiBusyAnimationStandard { .mixin-standard-animation-frames; }
@-ms-keyframes sapUiBusyAnimationStandard { .mixin-standard-animation-frames; }

@keyframes sapUiBusyAnimationStandardBackground { .mixin-standard-background-animation-frames; }
@-webkit-keyframes sapUiBusyAnimationStandardBackground { .mixin-standard-background-animation-frames; }
@-moz-keyframes sapUiBusyAnimationStandardBackground { .mixin-standard-background-animation-frames; }
@-ms-keyframes sapUiBusyAnimationStandardBackground { .mixin-standard-background-animation-frames; }

@keyframes sapUiBusyAnimationStandardShadow { .mixin-standard-shadow-animation-frames; }
@-webkit-keyframes sapUiBusyAnimationStandardShadow { .mixin-standard-shadow-animation-frames; }
@-moz-keyframes sapUiBusyAnimationStandardShadow { .mixin-standard-shadow-animation-frames; }
@-ms-keyframes sapUiBusyAnimationStandardShadow { .mixin-standard-shadow-animation-frames; }

@keyframes sapUiBusyAnimationSmall { .mixin-small-animation-frames; }
@-webkit-keyframes sapUiBusyAnimationSmall { .mixin-small-animation-frames; }
@-moz-keyframes sapUiBusyAnimationSmall { .mixin-small-animation-frames; }
@-ms-keyframes sapUiBusyAnimationSmall { .mixin-small-animation-frames; }

@keyframes sapUiBusyAnimationSmallBackground { .mixin-small-background-animation-frames; }
@-webkit-keyframes sapUiBusyAnimationSmallBackground { .mixin-small-background-animation-frames; }
@-moz-keyframes sapUiBusyAnimationSmallBackground { .mixin-small-background-animation-frames; }
@-ms-keyframes sapUiBusyAnimationSmallBackground { .mixin-small-background-animation-frames; }

@keyframes sapUiBusyAnimationSmallShadow { .mixin-small-shadow-animation-frames; }
@-webkit-keyframes sapUiBusyAnimationSmallShadow { .mixin-small-shadow-animation-frames; }
@-moz-keyframes sapUiBusyAnimationSmallShadow { .mixin-small-shadow-animation-frames; }
@-ms-keyframes sapUiBusyAnimationSmallShadow { .mixin-small-shadow-animation-frames; }

@sapUiLocalBusyIndicatorBG: fade(@sapBackgroundColor, 72%);
@sapUiLocalBusyIndicatorBG_IE: @sapBackgroundColor;

@sapUiLocalBusyIndicatorColor: @sapBrandColor;

@sapUiLocalBusyIndicatorBorderRadius: 100%;

@sapUiLocalBusyIndicatorSizeMedium: 1rem;
@sapUiLocalBusyIndicatorSizeBig: 2rem;

.sapUiLocalBusyIndicator {
	background-color: @sapUiLocalBusyIndicatorBG;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;

	opacity: 0;
	transition: opacity 0.3s ease-in;
	-ms-transition: opacity 0.3s ease-in;
	-moz-transition: opacity 0.3s ease-in;
	-webkit-transition: opacity 0.3s ease-in;
}

/* Make sure busy indicators are not "nested", and the animations do not overlay each other */
.sapUiLocalBusy .sapUiLocalBusy .sapUiLocalBusyIndicator {
	display: none;
}

.sapUiLocalBusyIndicatorFade {
	opacity: 1;
}

/* Class for medium sized indicator in control overlay */
.sapUiLocalBusyIndicatorSizeMedium {
	font-size: @sapUiLocalBusyIndicatorSizeMedium;
}

/* Class for fullscreen block overlay */
.sapUiLocalBusyIndicatorSizeBig {
	font-size: @sapUiLocalBusyIndicatorSizeBig;
	background-color: transparent;

}

/* Centers the busy indicator markers */
.sapUiLocalBusyIndicatorAnimation {
	position: absolute;
	width: 3em;
	top: 50%;
	left: 50%;
}

/* indicator bubble */
.sapUiLocalBusyIndicatorAnimation > div {
	width: 1em;
	height: 1em;
	border-radius: @sapUiLocalBusyIndicatorBorderRadius;
	display: block;
	float: left;
	margin: 0px;
	position: relative;
	top: -0.5em;
	left: -1.5em;
	text-indent: 1px;
}

/* General pseudo-element styles for background/shadow animation */
.sapUiLocalBusyIndicatorAnimation > div::before,
.sapUiLocalBusyIndicatorAnimation > div::after {
	content: "";
	opacity: 1;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: @sapUiLocalBusyIndicatorBorderRadius;
}

/* Background animation element */
.sapUiLocalBusyIndicatorAnimation > div::before {
	background: fade(@sapUiLocalBusyIndicatorColor, 100%);
}

/* Shadow animation element */
.sapUiLocalBusyIndicatorAnimation > div::after {
	box-shadow: inset 0px 0px 2px 1px fade(@sapUiLocalBusyIndicatorColor, 80%);
}

/* Animations Starting Classes */
.sapUiLocalBusyIndicatorAnimation > div,
.sapUiLocalBusyIndicatorAnimation > div::before,
.sapUiLocalBusyIndicatorAnimation > div::after {
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

/* Big Animation for Elments >= (3rem x 3rem) */
.sapUiLocalBusyIndicatorAnimStandard > div {
	-webkit-animation: sapUiBusyAnimationStandard 1.8s infinite ease-in-out;
	animation: sapUiBusyAnimationStandard 1.8s infinite ease-in-out;
}

.sapUiLocalBusyIndicatorAnimStandard > div::before {
	-webkit-animation: sapUiBusyAnimationStandardBackground 1.8s infinite ease-in-out;
	animation: sapUiBusyAnimationStandardBackground 1.8s infinite ease-in-out;
}

.sapUiLocalBusyIndicatorAnimStandard > div::after {
	-webkit-animation: sapUiBusyAnimationStandardShadow 1.8s infinite ease-in-out;
	animation: sapUiBusyAnimationStandardShadow 1.8s infinite ease-in-out;
}

.sapUiLocalBusyIndicatorAnimStandard > div:nth-child(1) {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}

.sapUiLocalBusyIndicatorAnimStandard > div:nth-child(2) {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

/* Small animation for elements < (3rem x 3rem) */
.sapUiLocalBusyIndicatorAnimSmall > div {
	-webkit-animation: sapUiBusyAnimationSmall 1.6s infinite ease-in-out;
	animation: sapUiBusyAnimationSmall 1.6s infinite ease-in-out;
}

.sapUiLocalBusyIndicatorAnimSmall > div::before {
	-webkit-animation: sapUiBusyAnimationSmallBackground 1.6s infinite ease-in-out;
	animation: sapUiBusyAnimationSmallBackground 1.6s infinite ease-in-out;
}

.sapUiLocalBusyIndicatorAnimSmall > div::after {
	-webkit-animation: sapUiBusyAnimationSmallShadow 1.6s infinite ease-in-out;
	animation: sapUiBusyAnimationSmallShadow 1.6s infinite ease-in-out;
}

/* marker class for switching horizontal and small animation */
.sapUiLocalBusyIndicatorAnimSmall > div:nth-child(1),
.sapUiLocalBusyIndicatorAnimSmall > div:nth-child(3) {
	visibility: hidden;
}

#sapUiBusyIndicator {
	right: 0px;
}

/**
 * Keyframe definitions
 */
.mixin-standard-animation-frames {
	0%, 80%, 100% {
		-webkit-transform: scale(0.4);
		-moz-transform: scale(0.4);
		-ms-transform: scale(0.4);
		transform: scale(0.4);
	}
	40% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
	}
}
.mixin-standard-background-animation-frames {
	0%, 80%, 100% {
		opacity: 1;
	}
	40% {
		opacity: 0.1;
	}
}
.mixin-standard-shadow-animation-frames {
	0%, 80%, 100% {
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
}

.mixin-small-animation-frames {
	0%, 100% {
		-webkit-transform: scale(0.2);
		-moz-transform: scale(0.2);
		-ms-transform: scale(0.2);
		transform: scale(0.2);
	}
	50% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
	}
}
.mixin-small-background-animation-frames {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.1;
	}
}
.mixin-small-shadow-animation-frames {
	0%, 100% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
}

/**
 * Animations for different browser vendors
 */
@keyframes sapUiBusyAnimationStandard { .mixin-standard-animation-frames; }
@-webkit-keyframes sapUiBusyAnimationStandard { .mixin-standard-animation-frames; }
@-moz-keyframes sapUiBusyAnimationStandard { .mixin-standard-animation-frames; }
@-ms-keyframes sapUiBusyAnimationStandard { .mixin-standard-animation-frames; }

@keyframes sapUiBusyAnimationStandardBackground { .mixin-standard-background-animation-frames; }
@-webkit-keyframes sapUiBusyAnimationStandardBackground { .mixin-standard-background-animation-frames; }
@-moz-keyframes sapUiBusyAnimationStandardBackground { .mixin-standard-background-animation-frames; }
@-ms-keyframes sapUiBusyAnimationStandardBackground { .mixin-standard-background-animation-frames; }

@keyframes sapUiBusyAnimationStandardShadow { .mixin-standard-shadow-animation-frames; }
@-webkit-keyframes sapUiBusyAnimationStandardShadow { .mixin-standard-shadow-animation-frames; }
@-moz-keyframes sapUiBusyAnimationStandardShadow { .mixin-standard-shadow-animation-frames; }
@-ms-keyframes sapUiBusyAnimationStandardShadow { .mixin-standard-shadow-animation-frames; }

@keyframes sapUiBusyAnimationSmall { .mixin-small-animation-frames; }
@-webkit-keyframes sapUiBusyAnimationSmall { .mixin-small-animation-frames; }
@-moz-keyframes sapUiBusyAnimationSmall { .mixin-small-animation-frames; }
@-ms-keyframes sapUiBusyAnimationSmall { .mixin-small-animation-frames; }

@keyframes sapUiBusyAnimationSmallBackground { .mixin-small-background-animation-frames; }
@-webkit-keyframes sapUiBusyAnimationSmallBackground { .mixin-small-background-animation-frames; }
@-moz-keyframes sapUiBusyAnimationSmallBackground { .mixin-small-background-animation-frames; }
@-ms-keyframes sapUiBusyAnimationSmallBackground { .mixin-small-background-animation-frames; }

@keyframes sapUiBusyAnimationSmallShadow { .mixin-small-shadow-animation-frames; }
@-webkit-keyframes sapUiBusyAnimationSmallShadow { .mixin-small-shadow-animation-frames; }
@-moz-keyframes sapUiBusyAnimationSmallShadow { .mixin-small-shadow-animation-frames; }
@-ms-keyframes sapUiBusyAnimationSmallShadow { .mixin-small-shadow-animation-frames; }


[INTERNAL] sap.m.CheckBox: Align control with the new sap-horizon theme

JIRA: BGSOFUIPIRIN-5449
Change-Id: Ia0fcd6ff366e8dbc2625adee384bc8bc28c9f58f

/* =============================== */
/* CSS for control sap.m/CheckBox  */
/* Horizon theme                   */
/* =============================== */

.sapMCb {
	height: 2.75rem;
	line-height: 2.75rem;
	padding: 0 0 0 2.75rem;

	.sapMLabel {
		color: @sapButton_TextColor;
	}
}

.sapMCbBg {
	left: 0.6875rem;
	top: 0.6875rem;
	height: 1.375rem;
	width: 1.375rem;
	line-height: 1.125rem;
	border-width: 0.125rem;
	box-sizing: border-box;
	border-radius: 0.25rem;

	&:not(.sapMCbErr):not(.sapMCbInfo):not(.sapMCbWarn) > & {
		line-height: 1.25rem;
	}

	&.sapMCbMarkChecked {
		border-color: @sapContent_FocusColor;
	}
}

&.sapMCbMarkChecked.sapMCbHoverable:hover {
	border-color: @sapContent_FocusColor;
}

.sapMCb.sapMCbWarn .sapMCbBg {
	background-color: @sapUiFieldWarningBackground;
	border: 0.125rem solid @sapUiFieldWarningColor;
	&.sapMCbMarkChecked:before {
		color: @sapUiFieldTextColor;
	}
}

.sapMCb.sapMCbSucc .sapMCbBg {
	background-color: @sapUiFieldSuccessBackground;
	border: 0.0625rem solid @sapUiFieldSuccessColor;
	&.sapMCbMarkChecked:before {
		color: @sapUiFieldSuccessColor;
	}
}

.sapMCb.sapMCbErr .sapMCbBg {
	background-color: @sapUiFieldInvalidBackground;
	border: 0.125rem solid @sapUiFieldInvalidColor;
	&.sapMCbMarkChecked:before {
		color: @sapUiFieldInvalidColor;
	}
}

.sapMCb.sapMCbInfo .sapMCbBg {
	background-color: @sapUiFieldInformationBackground;
	border: 0.125rem solid @sapUiFieldInformationColor;
	&.sapMCbMarkChecked:before {
		color: @sapUiFieldInformationColor;
	}
}

.sapUiForm .sapMCbBg { /* In forms, align left with '0.0625rem(1px)' ( the focus width) */
	left: 1px; // Must be in pixels to behave correctly in IE
}

.sapMCbBg.sapMCbMarkChecked:before {
	color: @sapContent_FocusColor;
}

.sapMCbBg.sapMCbMarkChecked.sapMCbMarkPartiallyChecked:before {
	border: 0.25rem solid transparent;
}

/* CheckBox focus */
.sapMCb:focus {
	outline: none;
}

html.sap-desktop {
	.sapMCbBg:focus,
	.sapMCbBg:active,
	.sap-desktop .sapMCbBg.sapMCbBgDis:focus {
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
		outline: none;
	}

	.sapMCb:not(.sapMCbBgDis):not(.sapMCbHasLabel):focus > .sapMCbBg {
		outline-width: 1px;
		outline-style: dotted;
		outline-color: @sapUiContentFocusColor;
	}

	.sapUiForm .sapMCb:not(.sapMCbBgDis).sapMCbHasLabel:focus:before {
		left: 0px; /* Cb in SimpleForm: left border adjustment */
	}
}

/* CheckBox in Footer Context */
.sapMFooter-CTX .sapMCb:not(.sapMCbBgDis):focus > .sapMCbBg,
.sapMFooter-CTX .sapMCb:not(.sapMCbBgDis)		> .sapMCbBg:focus {
	outline-color: @sapUiContentContrastFocusColor;
}

.sapMLIBActive .sapMCbBg,
.sapMLIBActive .sapMCbBg.sapMCbMarkChecked,
.sapMLIBActive .sapMCbBg.sapMCbBgDis,
.sapMLIBActive .sapMCbBg.sapMCbBgDis.sapMCbMarkChecked{
	border-color: @sapUiListActiveTextColor;
}

.sapMLIBActive .sapMCbBg{
	background-color: @sapUiListActiveBackground;
}

.sapMCbHoverable:hover{
	border-color: @sapUiFieldHoverBorderColor;
	background: @sapUiFieldHoverBackground;
}

.sapMCbBgDis {
	opacity: @sapUiContentDisabledOpacity;
}

.sapMLIBActive .sapMActive .sapMCbBg.sapMCbActiveStateOff.sapMCbMarkChecked:before,
.sapMLIBActive .sapMCbBg:active.sapMCbActiveStateOff.sapMCbMarkChecked:before,
.sapMLIBActive .sapMCbBg.sapMCbMarkChecked:before,
.sapMLIBActive .sapMActive .sapMCbBg.sapMCbMarkChecked:before,
.sapMLIBActive .sapMCbBg:active.sapMCbMarkChecked:before,
.sapMLIBActive .sapMCbBg.sapMCbBgDis.sapMCbMarkChecked:before{
	color: @sapUiListActiveTextColor;
}

.sapMCbBg.sapMCbBgDis.sapMCbMarkChecked:before {
	color: fade(@sapUiSelected, 25);
}

/* Compact size */
.sapUiSizeCompact{
	.sapUiForm .sapMCbBg { /* In forms, align left with '0.0625rem(1px)' ( the focus width) */
		left: 1px; // Must be in pixels to behave correctly in IE
	}
	.sapMCbBg {
		border-radius: 0.125rem;
	}
}

html.sap-desktop {
	.sapUiSizeCompact {
		.sapMCb:not(.sapMCbBgDis).sapMCbHasLabel {
			&:focus:before {
				top: 0.365rem;
				bottom: 0.365rem;
				left: 0.365rem;
			}

			&:not(.sapMCbErr):not(.sapMCbInfo):not(.sapMCbWarn):focus:before {
				bottom: 0.375rem;
			}
		}

		.sapMCbBg.sapMCbMarkChecked.sapMCbMarkPartiallyChecked:before {
			border-width: 0.1875rem;
		}

		.sapUiForm .sapMCb:not(.sapMCbBgDis):focus:before {
			left: 0px;
		}

		.sapMCbBg {
			height: 1rem;
			width: 1rem;
			box-sizing: border-box;
		}

		.sapMCb:not(.sapMCbErr):not(.sapMCbInfo):not(.sapMCbWarn) > .sapMCbBg {
			line-height: 0.875rem;
		}
	}
}

/* =============================== */
/* CSS for control sap.m/CheckBox  */
/* Horizon theme                   */
/* =============================== */

.sapMCb {
	height: 2.75rem;
	line-height: 2.75rem;
	padding: 0 0 0 2.75rem;
}

.sapMCbBg {
	left: 0.6875rem;
	top: 0.6875rem;
	height: 1.375rem;
	width: 1.375rem;
	line-height: 1.125rem;
	border-width: 0.0625rem;
	box-sizing: border-box;

	&:not(.sapMCbErr):not(.sapMCbInfo):not(.sapMCbWarn) > & {
		line-height: 1.25rem;
	}
}

.sapMCb.sapMCbWarn .sapMCbBg {
	background-color: @sapUiFieldWarningBackground;
	border: 0.125rem solid @sapUiFieldWarningColor;
	&.sapMCbMarkChecked:before {
		color: @sapUiFieldTextColor;
	}
}

.sapMCb.sapMCbSucc .sapMCbBg {
	background-color: @sapUiFieldSuccessBackground;
	border: 0.0625rem solid @sapUiFieldSuccessColor;
	&.sapMCbMarkChecked:before {
		color: @sapUiFieldSuccessColor;
	}
}

.sapMCb.sapMCbErr .sapMCbBg {
	background-color: @sapUiFieldInvalidBackground;
	border: 0.125rem solid @sapUiFieldInvalidColor;
	&.sapMCbMarkChecked:before {
		color: @sapUiFieldInvalidColor;
	}
}

.sapMCb.sapMCbInfo .sapMCbBg {
	background-color: @sapUiFieldInformationBackground;
	border: 0.125rem solid @sapUiFieldInformationColor;
	&.sapMCbMarkChecked:before {
		color: @sapUiFieldInformationColor;
	}
}

.sapUiForm .sapMCbBg { /* In forms, align left with '0.0625rem(1px)' ( the focus width) */
	left: 1px; // Must be in pixels to behave correctly in IE
}

.sapMCbBg.sapMCbMarkChecked:before {
	color: @sapUiSelected;
}

.sapMCbBg.sapMCbMarkChecked.sapMCbMarkPartiallyChecked:before {
	border: 0.25rem solid transparent;
}

/* CheckBox focus */
.sapMCb:focus {
	outline: none;
}

html.sap-desktop {
	.sapMCbBg:focus,
	.sapMCbBg:active,
	.sap-desktop .sapMCbBg.sapMCbBgDis:focus {
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
		outline: none;
	}

	.sapMCb:not(.sapMCbBgDis):not(.sapMCbHasLabel):focus > .sapMCbBg {
		outline-width: 1px;
		outline-style: dotted;
		outline-color: @sapUiContentFocusColor;
	}

	.sapMCb:not(.sapMCbBgDis):not(.sapMCbDisplayOnly).sapMCbHasLabel {
		&:focus:before {
			content: "";
			display: block;
			position: absolute;
			top: 0.5625rem;
			bottom: 0.5625rem;
			left: 0.5625rem;
			right: 0;
			border: 1px dotted @sapUiContentFocusColor;
		}
		&:not(.sapMCbErr):not(.sapMCbInfo):not(.sapMCbWarn):focus:before {
			bottom: 0.5625rem;
		}
	}

	.sapUiForm .sapMCb:not(.sapMCbBgDis).sapMCbHasLabel:focus:before {
		left: 0px; /* Cb in SimpleForm: left border adjustment */
	}
}

/* CheckBox in Footer Context */
.sapMFooter-CTX .sapMCb:not(.sapMCbBgDis):focus > .sapMCbBg,
.sapMFooter-CTX .sapMCb:not(.sapMCbBgDis)		> .sapMCbBg:focus {
	outline-color: @sapUiContentContrastFocusColor;
}

.sapMLIBActive .sapMCbBg,
.sapMLIBActive .sapMCbBg.sapMCbMarkChecked,
.sapMLIBActive .sapMCbBg.sapMCbBgDis,
.sapMLIBActive .sapMCbBg.sapMCbBgDis.sapMCbMarkChecked{
	border-color: @sapUiListActiveTextColor;
}

.sapMLIBActive .sapMCbBg{
	background-color: @sapUiListActiveBackground;
}

.sapMCbHoverable:hover{
	border-color: @sapUiFieldHoverBorderColor;
	background: @sapUiFieldHoverBackground;
}

.sapMCbBgDis {
	opacity: @sapUiContentDisabledOpacity;
}

.sapMLIBActive .sapMActive .sapMCbBg.sapMCbActiveStateOff.sapMCbMarkChecked:before,
.sapMLIBActive .sapMCbBg:active.sapMCbActiveStateOff.sapMCbMarkChecked:before,
.sapMLIBActive .sapMCbBg.sapMCbMarkChecked:before,
.sapMLIBActive .sapMActive .sapMCbBg.sapMCbMarkChecked:before,
.sapMLIBActive .sapMCbBg:active.sapMCbMarkChecked:before,
.sapMLIBActive .sapMCbBg.sapMCbBgDis.sapMCbMarkChecked:before{
	color: @sapUiListActiveTextColor;
}

.sapMCbBg.sapMCbBgDis.sapMCbMarkChecked:before {
	color: fade(@sapUiSelected, 25);
}

/* Compact size */
.sapUiSizeCompact{
	.sapUiForm .sapMCbBg { /* In forms, align left with '0.0625rem(1px)' ( the focus width) */
		left: 1px; // Must be in pixels to behave correctly in IE
	}
	.sapMCbBg {
		border-radius: 0.125rem;
	}
}

html.sap-desktop {
	.sapUiSizeCompact {
		.sapMCb:not(.sapMCbBgDis).sapMCbHasLabel {
			&:focus:before {
				top: 0.365rem;
				bottom: 0.365rem;
				left: 0.365rem;
			}

			&:not(.sapMCbErr):not(.sapMCbInfo):not(.sapMCbWarn):focus:before {
				bottom: 0.375rem;
			}
		}

		.sapMCbBg.sapMCbMarkChecked.sapMCbMarkPartiallyChecked:before {
			border-width: 0.1875rem;
		}

		.sapUiForm .sapMCb:not(.sapMCbBgDis):focus:before {
			left: 0px;
		}

		.sapMCbBg {
			height: 1rem;
			width: 1rem;
			box-sizing: border-box;
		}

		.sapMCb:not(.sapMCbErr):not(.sapMCbInfo):not(.sapMCbWarn) > .sapMCbBg {
			line-height: 0.875rem;
		}
	}
}