Create columns

Create columns

/*** columns.less ***/

[class^="col-"], [class*=" col-"] {
  position: relative;
  min-height: 1px;
  padding-left: @grid-gutter-width / 2;
  padding-right: @grid-gutter-width / 2;

  flex: 0 0 auto;
  flex-basis: 100%;

  box-sizing: border-box;
}

.col-1 {
  .column-size(1);
}

.col-2 {
  .column-size(2);
}

.col-3 {
  .column-size(3);
}

.col-4 {
  .column-size(4);
}

.col-5 {
  .column-size(5);
}

.col-6 {
  .column-size(6);
}

.col-7 {
  .column-size(7);
}

.col-8 {
  .column-size(8);
}

.col-9 {
  .column-size(9);
}

.col-10 {
  .column-size(10);
}

.col-11 {
  .column-size(11);
}

.col-12 {
  .column-size(12);
}

@media (min-width: @sm-min-width) {
  .col-sm-1 {
    .column-size(1);
  }

  .col-sm-2 {
    .column-size(2);
  }

  .col-sm-3 {
    .column-size(3);
  }

  .col-sm-4 {
    .column-size(4);
  }

  .col-sm-5 {
    .column-size(5);
  }

  .col-sm-6 {
    .column-size(6);
  }

  .col-sm-7 {
    .column-size(7);
  }

  .col-sm-8 {
    .column-size(8);
  }

  .col-sm-9 {
    .column-size(9);
  }

  .col-sm-10 {
    .column-size(10);
  }

  .col-sm-11 {
    .column-size(11);
  }

  .col-sm-12 {
    .column-size(12);
  }
}

@media (min-width: @md-min-width) {
  .col-md-1 {
    .column-size(1);
  }

  .col-md-2 {
    .column-size(2);
  }

  .col-md-3 {
    .column-size(3);
  }

  .col-md-4 {
    .column-size(4);
  }

  .col-md-5 {
    .column-size(5);
  }

  .col-md-6 {
    .column-size(6);
  }

  .col-md-7 {
    .column-size(7);
  }

  .col-md-8 {
    .column-size(8);
  }

  .col-md-9 {
    .column-size(9);
  }

  .col-md-10 {
    .column-size(10);
  }

  .col-md-11 {
    .column-size(11);
  }

  .col-md-12 {
    .column-size(12);
  }
}

@media (min-width: @lg-min-width) {
  .col-lg-1 {
    .column-size(1);
  }

  .col-lg-2 {
    .column-size(2);
  }

  .col-lg-3 {
    .column-size(3);
  }

  .col-lg-4 {
    .column-size(4);
  }

  .col-lg-5 {
    .column-size(5);
  }

  .col-lg-6 {
    .column-size(6);
  }

  .col-lg-7 {
    .column-size(7);
  }

  .col-lg-8 {
    .column-size(8);
  }

  .col-lg-9 {
    .column-size(9);
  }

  .col-lg-10 {
    .column-size(10);
  }

  .col-lg-11 {
    .column-size(11);
  }

  .col-lg-12 {
    .column-size(12);
  }
}

error: pathspec 'src/components/columns.less' did not match any file(s) known to git


forgot to add the sizes

forgot to add the sizes

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Livefyre/livefyre-bootstrap.git/'


Fix width for recent projects widgets

Fix width for recent projects widgets

/*
 * The MIT License (MIT)
 *
 * Copyright (c) 2014, Groupon, Inc.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */

@import '~lesshat/build/lesshat.less';
@import "./css/reset.css";
@import "./css/site.css";
@import "./css/button.css";
@import "./css/menu.css";
@import "./css/label.css";
@import "./css/segment.css";
@import "./css/divider.css";
@import "./css/image.css";
@import "./css/dropdown.css";
@import "./css/input.css";
@import "./css/breadcrumb.css";
@import "./css/header.css";
@import "./css/loader.css";
@import "./css/dimmer.css";
body{
background: white !important;
}
.app{
  .display(flex);
  .flex-direction(row);
  .align-content(space-between);
  .align-items(stretch);
  margin-left: 1%;
  margin-right: 1%;
  position: relative;
}
.recent-projects{
  flex-basis: 20%;
}
.job{
  flex-basis: 50%;
  margin-left: 1%;
  .flex(auto);
  margin-bottom: 10px;
}
#divider{
  margin-left: 10px;
  border-width: 1px;
   border-style: solid;
   border-color: rgba(0, 0, 0, 0.1);
}

/*
 * The MIT License (MIT)
 *
 * Copyright (c) 2014, Groupon, Inc.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */

@import '~lesshat/build/lesshat.less';
@import "./css/reset.css";
@import "./css/site.css";
@import "./css/button.css";
@import "./css/menu.css";
@import "./css/label.css";
@import "./css/segment.css";
@import "./css/divider.css";
@import "./css/image.css";
@import "./css/dropdown.css";
@import "./css/input.css";
@import "./css/breadcrumb.css";
@import "./css/header.css";
@import "./css/loader.css";
@import "./css/dimmer.css";
body{
background: white !important;
}
.app{
  .display(flex);
  .flex-direction(row);
  .align-content(space-between);
  .align-items(stretch);
  margin-left: 1%;
  margin-right: 1%;
  position: relative;
}
.job{
  margin-left: 1%;
  .flex(auto);
  margin-bottom: 10px;
}
#divider{
  margin-left: 10px;
  border-width: 1px;
   border-style: solid;
   border-color: rgba(0, 0, 0, 0.1);
}


Minor fixes

Minor fixes

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/manti-by/Boogi.git/'


Removed 1px border for navbar-fixed style.

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/cablelabs/dev-portal.git/'


Migrate vendor-tool styling over to Asset Bazaar

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/hevnly/asset-bazaar.git/'


fix initial values startpage

fix initial values startpage

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/intaktus/liveshop-customization.git/'


OR-2007 Add shadow on contact avatar

OR-2007 Add shadow on contact avatar

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/heroandtn3/openpaas-esn.git/'


Update style.less

Update style.less

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/gilt/tech-blog.git/'


fix typo

fix typo

.language .sec-content {
    margin: @padding-large-vertical 0 0 @timeline-icon-radius;
}

.language-certificates {
    margin: 0;
    padding: 0;
}

.language-cert {
    font-size: @font-size-large;
    margin-bottom: @padding-small-vertical;
    list-style-type: none;
    .float-container();
}

.language-cert-type {
    float: left;
    font-weight: bold;
}

.language-cert .progress {
    float: right;
}

.language-cert .progress {
    width: 80%;
}

.language-description {
    padding-left: 0;
    margin: @padding-large-vertical 0;
}

.language-description li {
    list-style-type: none;
    line-height: 1.4;
}

.set-section-icon(language, @fa-var-comments);
.set-li-icon(language-desc-item, @fa-var-star);

.language .sec-content {
    margin: @padding-large-vertical 0 0 @timeline-icon-radius;
}

.language-certificate {
    margin: 0;
    padding: 0;
}

.language-cert {
    font-size: @font-size-large;
    margin-bottom: @padding-small-vertical;
    list-style-type: none;
    .float-container();
}

.language-cert-type {
    float: left;
    font-weight: bold;
}

.language-cert .progress {
    float: right;
}

.language-cert .progress {
    width: 80%;
}

.language-description {
    padding-left: 0;
    margin: @padding-large-vertical 0;
}

.language-description li {
    list-style-type: none;
    line-height: 1.4;
}

.set-section-icon(language, @fa-var-comments);
.set-li-icon(language-desc-item, @fa-var-star);


Looks can kill

Looks can kill

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/devlabmtl/haven-web.git/'


don't outdent internal ols

don't outdent internal ols

fatal: unable to access 'https://github.com/ascott1/regulations-site.git/': The requested URL returned error: 403


give captions some room to breathe

give captions some room to breathe

@import 'lib';

#lightbox {
    background: rgba(0,0,0,.2);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
    z-index: 9000;
    text-align: center;
    opacity: 0;
    overflow: hidden;
    -moz-transition: .5s opacity ease;
    -webkit-transition: .5s opacity ease;
    pointer-events: none;
    color: white;
    .close {
        color: transparent;
        display: block;
        height: 80px;
        margin: 0;
        overflow: hidden;
        position: absolute;
        right: 0;
        top: 0;
        width: 80px;
        z-index: 20;
        &:after {
            background: url(../../img/mkt/header-icons.png) 0 -24px no-repeat;
            display: block;
            content: '';
            position: absolute;
            top: 15px;
            right: 15px;
            height: 24px;
            width: 24px;
        }
    }
    &.show {
        opacity: 1;
        pointer-events: auto;
    }
    section {
        .border-box();
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        width: 100%;
        max-width: 700px;
        height: 100%;
        max-height: 700px;
        overflow: hidden;
        background: #000;
    }
    .content {
        list-style-type: none;
        white-space: nowrap;
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        li {
            height: 100%;
            width: 100%;
            display: inline-block;
            position: relative;
            &.loading {
                background: url(../../img/zamboni/mobile/loading-white.png) 50% 50% no-repeat;
            }
        }
    }
    .caption {
        font-size: 18px;
        padding: 0 15px;
        position: absolute;
        bottom: 30px;
        left: 0;
        width: 100%;
        color: #fff;
        white-space: normal;
    }
    img, video, .err {
        padding-bottom: 82px;
        margin: auto;
        max-height: 95%;
        max-width: 95%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: block;
        position: absolute;
        -moz-user-select: none;
    }
    .err {
        font-size: 100px;
        max-height: 80px;
        line-height: 60px;
    }

}

@import 'lib';

#lightbox {
    background: rgba(0,0,0,.2);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
    z-index: 9000;
    text-align: center;
    opacity: 0;
    overflow: hidden;
    -moz-transition: .5s opacity ease;
    -webkit-transition: .5s opacity ease;
    pointer-events: none;
    color: white;
    .close {
        color: transparent;
        display: block;
        height: 80px;
        margin: 0;
        overflow: hidden;
        position: absolute;
        right: 0;
        top: 0;
        width: 80px;
        z-index: 20;
        &:after {
            background: url(../../img/mkt/header-icons.png) 0 -24px no-repeat;
            display: block;
            content: '';
            position: absolute;
            top: 15px;
            right: 15px;
            height: 24px;
            width: 24px;
        }
    }
    &.show {
        opacity: 1;
        pointer-events: auto;
    }
    section {
        .border-box();
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        width: 100%;
        max-width: 700px;
        height: 100%;
        max-height: 700px;
        overflow: hidden;
        background: #000;
    }
    .content {
        list-style-type: none;
        white-space: nowrap;
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        li {
            height: 100%;
            width: 100%;
            display: inline-block;
            position: relative;
            &.loading {
                background: url(../../img/zamboni/mobile/loading-white.png) 50% 50% no-repeat;
            }
        }
    }
    .caption {
        font-size: 18px;
        padding: 0 15px;
        position: absolute;
        bottom: 30px;
        left: 0;
        width: 100%;
        color: #fff;
        white-space: normal;
    }
    img, video, .err {
        margin: auto;
        max-height: 95%;
        max-width: 95%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: block;
        position: absolute;
        -moz-user-select: none;
    }
    .err {
        font-size: 100px;
        max-height: 80px;
        line-height: 60px;
    }

}


Added the missing config file

Added the missing config file

error: pathspec 'styles/definitions/config.less' did not match any file(s) known to git


added min-width, padding-left and padding-right

fatal: unable to access 'https://github.com/dedalozzo/pit-bootstrap.git/': The requested URL returned error: 403


fix pacakge log style

fix pacakge log style

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/deplug/deplug.git/'


add margin between "Download" and "Delete" buttons on "Manage Status & Versions" page

@import 'lib';

#rejection {
    blockquote {
        margin: 10px 0 0;
    }
    + p {
        margin-top: 20px;
    }
}

#version-status {
    h3 {
        color: @medium-gray;
        font: normal 13px @open-stack;
        time {
            color: @note-gray;
            font-weight: normal;
            &:after {
                content: ":";
            }
        }
    }
    label {
        margin-top: 5px;
    }
}

.version-status-actions {
    border-top: 1px dotted @taupe;
    margin-top: 10px;
    padding-top: 5px;
    form {
        display: inline;
    }
}

.status {
    display: block;
    margin-bottom: 5px;
}

#version-status-item a,
.status-none b {
    color: @medium-gray;
}

.status-lite-nominated i,
.status-nominated b,
.status-unreviewed b,
.status-pending b {
    font-style: normal;
    color: #3e7987;
}

.status-incomplete b,
.status-disabled b,
.status-admin-disabled b,
.status-purgatory b {
    color: #851006;
}

.status-fully-approved b,
.status-public b,
.status-lite b,
.status-lite-nom b,
.status-waiting b {
    color: #329902;
}

.status-rejected {
    display: inline;
    b {
        color: #800;
    }
}

#version-list {
    li {
        .border-box;
        float: left;
        padding: 10px 0;
        width: 100%;
        + li {
            border-top: 1px dotted #eef;
        }
        &:first-child h4 {
            background: #ded;
            color: @green;
        }
        h4 {
            background: #f3f3f3;
            float: left;
            padding: 5px 10px;
        }
        small {
            border-left: 1px solid @faint-gray;
            color: @note-gray;
            display: block;
            float: left;
            font-size: 90%;
            line-height: 10px;
            margin: 4px 0 0 10px;
            padding: 7px 0 7px 10px;
        }
        .buttons {
            float: right;
            a {
                margin-left: 10px;
            }
        }
    }
}

@import 'lib';

#rejection {
    blockquote {
        margin: 10px 0 0;
    }
    + p {
        margin-top: 20px;
    }
}

#version-status {
    h3 {
        color: @medium-gray;
        font: normal 13px @open-stack;
        time {
            color: @note-gray;
            font-weight: normal;
            &:after {
                content: ":";
            }
        }
    }
    label {
        margin-top: 5px;
    }
}

.version-status-actions {
    border-top: 1px dotted @taupe;
    margin-top: 10px;
    padding-top: 5px;
    form {
        display: inline;
    }
}

.status {
    display: block;
    margin-bottom: 5px;
}

#version-status-item a,
.status-none b {
    color: @medium-gray;
}

.status-lite-nominated i,
.status-nominated b,
.status-unreviewed b,
.status-pending b {
    font-style: normal;
    color: #3e7987;
}

.status-incomplete b,
.status-disabled b,
.status-admin-disabled b,
.status-purgatory b {
    color: #851006;
}

.status-fully-approved b,
.status-public b,
.status-lite b,
.status-lite-nom b,
.status-waiting b {
    color: #329902;
}

.status-rejected {
    display: inline;
    b {
        color: #800;
    }
}

#version-list {
    li {
        .border-box;
        float: left;
        padding: 10px 0;
        width: 100%;
        + li {
            border-top: 1px dotted #eef;
        }
        &:first-child h4 {
            background: #ded;
            color: @green;
        }
        h4 {
            background: #f3f3f3;
            float: left;
            padding: 5px 10px;
        }
        small {
            border-left: 1px solid @faint-gray;
            color: @note-gray;
            display: block;
            float: left;
            font-size: 90%;
            line-height: 10px;
            margin: 4px 0 0 10px;
            padding: 7px 0 7px 10px;
        }
        .buttons {
            float: right;
        }
    }
}


cleaned up

cleaned up

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Digipalvelutehdas/APIKA.git/'


Components: added 'breadcrumbs'

Components: added 'breadcrumbs'

.breadcrumbs {
	margin-bottom: 1em;
}

.breadcrumbs__item,
.breadcrumbs__separator {
	margin-right: 0.25em;
}

.breadcrumbs__separator {
	color: gray;
}

.breadcrumbs__item--active {
	font-weight: bold;
}

error: pathspec 'components/breadcrumbs.less' did not match any file(s) known to git


Using variables to refer to vender less scripts

fatal: unable to access 'https://github.com/spacelis/ckan-ckanext-cdrc.git/': The requested URL returned error: 403


Add styles for fullscreen code snippets

Add styles for fullscreen code snippets

fatal: unable to access 'https://github.com/jacobmovingfwd/docs.git/': The requested URL returned error: 403


Create main.less

Create main.less

html {
    font-family: 'Comfortaa', sans-serif;
}

error: pathspec 'src/css/imports/main.less' did not match any file(s) known to git


Here is a bug that once only one image as sprite generated, the loader go wrong.

    * Error - only one image occur a error with loader.

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/vanpipy/webpack-angular-1.git/'


Create reset.import.less

Create reset.import.less

/* Reset.less
 * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here	that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
 * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

// ERIC MEYER RESET
// --------------------------------------------------

html, body { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; }
table { border-collapse: collapse; border-spacing: 0; }
ol, ul { list-style: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; }

// Normalize.css
// Pulling in select resets form the normalize.css project
// --------------------------------------------------

// Display in IE6-9 and FF3
// -------------------------
// Source: http://github.com/necolas/normalize.css
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}
// Focus states
a:focus {
  outline: thin dotted;
}
// Hover & Active
a:hover,
a:active {
  outline: 0;
}

// Display in IE6-9 and FF3
// -------------------------
// Source: http://github.com/necolas/normalize.css
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

// Display block in IE6-9 and FF3
// -------------------------
// Source: http://github.com/necolas/normalize.css
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

// Prevents modern browsers from displaying 'audio' without controls
// -------------------------
// Source: http://github.com/necolas/normalize.css
audio:not([controls]) {
    display: none;
}

// Prevents sub and sup affecting line-height in all browsers
// -------------------------
// Source: http://github.com/necolas/normalize.css
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}

// Img border in a's and image quality
// -------------------------
// Source: http://github.com/necolas/normalize.css
img {
    border: 0;
    -ms-interpolation-mode: bicubic;
}

// Forms
// -------------------------
// Source: http://github.com/necolas/normalize.css

// Font size in all browsers, margin changes, misc consistency
button,
input,
select,
textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  *vertical-align: middle;
}
button,
input {
  line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
  *overflow: visible; // Inner spacing ie IE6/7
}
button::-moz-focus-inner,
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
  border: 0;
  padding: 0;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer; // Cursors on all buttons applied consistently
  -webkit-appearance: button; // Style clicable inputs in iOS
}
input[type="search"] { // Appearance in Safari/Chrome
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5
}
textarea {
  overflow: auto; // Remove vertical scrollbar in IE6-9
  vertical-align: top; // Readability and alignment cross-browser
}

error: pathspec 'client/stylesheets/util/reset.import.less' did not match any file(s) known to git


Darkness CSS

Darkness CSS

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/BrightMahi/aacBuyerNew.git/'


ref(ui): Use flexbox for modal footer (#8928)

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/beeftornado/sentry.git/'


Added some CSS rules specefic for RTL to fix "reaction" styling.

.message {
	.reactions {
		padding: 0;
		margin-top: 4px;
		> li {
			cursor: pointer;
			position: relative;
			height: 24px;
			line-height: 22px;
			display: inline-block;
			border-radius: 5px;
			border: 1px solid #06F;
			background-color: #0AF;
			border: 1px solid #E7E7E7;
			background-color: #FCFCFC;
			padding-right: 2px;

			html.rtl & {
				padding-left: 2px;
				padding-right: 0;
			}

			.reaction-emoji {
				.emojione {
					min-width: 15px;
					min-height: 15px;
					width: 15px;
					height: 15px;
				}
			}

			.people {
				display: none;
			}

			.reaction-count {
				font-size: 0.65rem;
				margin-left: -5px;
				color: #888;

				html.rtl & {
					margin-right: -5px;
					margin-left: auto;
				}
			}

			&.add-reaction {
				visibility: hidden;
				padding-left: 2px;
				margin-left: 4px;
				color: #888;
				opacity: 0;

				.transition(opacity 0.2s ease);

				html.rtl & {
					padding-right: 2px;
					padding-left: 0px;
					margin-right: 4px;
					margin-left: 0px;
				}
			}
		}

		&:hover {
			> li.add-reaction {
				visibility: visible;
				opacity: 1;
			}
		}
	}
}

.message {
	.reactions {
		padding: 0;
		margin-top: 4px;
		> li {
			cursor: pointer;
			position: relative;
			height: 24px;
			line-height: 22px;
			display: inline-block;
			border-radius: 5px;
			border: 1px solid #06F;
			background-color: #0AF;
			border: 1px solid #E7E7E7;
			background-color: #FCFCFC;
			padding-right: 2px;

			.reaction-emoji {
				.emojione {
					min-width: 15px;
					min-height: 15px;
					width: 15px;
					height: 15px;
				}
			}

			.people {
				display: none;
			}

			.reaction-count {
				font-size: 0.65rem;
				margin-left: -5px;
				color: #888;
			}

			&.add-reaction {
				visibility: hidden;
				padding-left: 2px;
				margin-left: 4px;
				color: #888;
				opacity: 0;

				.transition(opacity 0.2s ease);
			}
		}

		&:hover {
			> li.add-reaction {
				visibility: visible;
				opacity: 1;
			}
		}
	}
}


Fix whiteapcing

Fix whiteapcing

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Livefyre/livefyre-bootstrap.git/'


Move the boarder to the cell

Move the boarder to the cell

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/aha-app/bigquery-log-viewer.git/'


INBOX-408 Autocomplete results are taller on mobile.

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/heroandtn3/openpaas-esn.git/'


Update _colors.import.less

Update _colors.import.less

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/jonathanhartman/Rocket.Chat.git/'


Create variables.less

Create variables.less

// Stacked Icons
// -------------------------

.@{fa-css-prefix}-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}
.@{fa-css-prefix}-stack-1x, .@{fa-css-prefix}-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}
.@{fa-css-prefix}-stack-1x { line-height: inherit; }
.@{fa-css-prefix}-stack-2x { font-size: 2em; }
.@{fa-css-prefix}-inverse { color: @fa-inverse; }

error: pathspec 'font-awesome/less/variables.less' did not match any file(s) known to git


Update cache bust for retina mobile AAQ focus product logos.

@import '../fonts.less';
@import '../variables.less';
@import '../includes/mixins.less';
@import 'mixins.less';

.fonts('../../fonts');

html, body {
  font-size: 15px;
  height: 100%;
}

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

a:hover {
  text-decoration: hover;
}

sup sup,
sub sub,
small small {
  bottom: 0;
  font-size: 100%;
  position: relative;
  top: 0;
  vertical-align: baseline;
}

body {
  font-family: @Moz;
  overflow-x: hidden;
  width: 100%;

  > * {
    transform: translateZ(0px);
  }

  > nav {
    background: @mobileNavBackground url('../../img/grain.png') 0 0 repeat;
    color: #fff;
    display: none;
    height: 100%;
    left: 0;
    overflow: auto;
    position: fixed;
    top: 0;
    width: 270px;
    z-index: 0;

    > a,
    > header {
      border-bottom: 1px solid #929e9e;
    }

    > a,
    > a:visited,
    > a:hover {
      color: #fff;
      display: block;
      font-size: 17px;
      padding: 16px 16px 10px 16px;
      text-decoration: none;
    }

    > header {
      background: #1a2122;
      background: url('../../img/grain.png'), linear-gradient(to bottom, #1a2122, #1b2324);
      font-size: 14px;
      font-weight: bold;
      height: 29px;
      line-height: 29px;
      padding: 0 16px;
    }

    #search-bar {
      background: #253132;
      background: url('../../img/grain.png'), linear-gradient(to bottom, #2c393b, #253132);
      box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.75);
      padding: 10px 16px;

      form {
        display: block;
        position: relative;

        button[type='submit'] {
          background-color: transparent;
          background-position: -54px -177px;
          border: 0;
          height: 18px;
          margin: 0;
          outline: 0;
          padding: 0;
          position: absolute;
          right: 6px;
          text-indent: -9999px;
          top: 6px;
          width: 18px;
        }

        input[type='search'] {
          background: #283235;
          border: 1px solid rgba(0, 0, 0, 0.25);
          border-radius: 3px;
          box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.25) inset;
          box-sizing: border-box;
          color: #849b9f;
          font-family: @Moz;
          font-size: 14px;
          outline: none;
          padding: 5px 30px 4px 4px;
          width: 100%;
        }
      }
    }
  }

  &.exposed {
    > nav {
      display: block;
    }

    .slide-on-exposed {
      left: 270px;
    }
  }

  .slide-on-exposed {
    left: 0;
    transition-property: left, right;
    transition-duration: 0.5s;
  }

  > header {
    background: #cd6723;
    background: linear-gradient(to bottom, #cd6723, #bb482d);
    border-bottom: 1px solid @mobileHeaderBorder;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.75);
    color: #fff;
    height: 50px;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;

    h1 {
      font-size: 24px;
      font-weight: normal;
      height: 50px;
      line-height: 50px;
      margin: 0 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #instant-search-form {
      display: none;

      input[type=search] {
        border: 0;
        box-sizing: border-box;
        box-shadow: none;
        color: #000;
        height: 24px;
        font-size: 14px;
        outline: none;
        margin: 13px;
        padding: 4px 10px;
        width: calc(~'100% - 140px');
      }
    }

    &.searching {
      #instant-search-form {
        display: block;
      }

      #header-components {
        display: none;
      }
    }
  }

  > .wrapper {
    background: #fff;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.8);
    min-height: calc(~"100% - 51px");
    position: absolute;
    top: 51px;
    width: 100%;
    z-index: 1;
  }

  &.minimal {
    > .wrapper {
      box-shadow: none;
      top: 0;
    }
  }

  &[data-orientation='right'] {
    > nav,
    .slide-on-exposed {
      left: auto;
      right: 0;
    }

    #menu-button {
      border-right: 0;
      box-shadow: 0 0 0 1px @mobileHeaderBorder;
      float: right;
    }

    #search-button {
      float: right;
      margin-left: 10px;
      margin-right: 0;
    }

    &.exposed {
      .slide-on-exposed {
        right: 270px;
      }
    }
  }
}

fieldset {
  border: 0;
  margin: 0;
  outline: none;
  padding: 0;
}

h3 {
  font-size: 20px;
  font-weight: normal;
}

h4 {
  font-size: 17px;
  font-weight: normal;
}

input[type='text'],
input[type='password'],
input[type='email'],
input[type='url'],
select,
textarea {
  background: #fff;
  border: 1px solid @mobileInputBorder;
  border-radius: 3px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1) inset;
  box-sizing: border-box;
  display: inline-block;
  font-family: @Moz;
  font-size: 14px;
  margin: 0 0 12px 0;
  outline: none;
  padding: 10px 12px;
  width: 100%;
}

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  height: 41px;
}

.add-button {
  background-position: -36px -1153px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 1px @mobileHeaderBorder;
  cursor: pointer;
  float: right;
  height: 24px;
  margin: 0 -9px 0 10px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

.btn,
.btn:visited,
input[type="submit"],
input[type="submit"]:visited {
  background: #e3e3e3;
  background: linear-gradient(to bottom, #fafafa, #cdcdcd);
  border: 1px solid #ababab;
  border-radius: 2px;
  box-sizing: border-box;
  color: @textDarkGrey;
  cursor: pointer;
  display: block;
  font-family: @Moz;
  font-size: 16px;
  font-weight: bold;
  outline: none;
  margin: 0 0 6px 0;
  padding: 4px 0;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
  width: 100%;

  &.btn-submit {
    background: #00caf2;
    background: linear-gradient(to bottom, #00caf2, #00aacd);
    border: 0;
    font-size: 17px;
    padding: 8px 0;
  }
}

.btn:hover {
  text-decoration: none;
}

.centered {
  color: #2BBAE7;
  font-family: "Komikax";
  font-size: 24px;
  text-align: center;
  text-transform: uppercase;
}

.collapsable {
  article {
    display: none;
  }

  .toggle {
    color: @mobileHyperlink;
    cursor: pointer;

    > span {
      &.alt {
        display: none;
      }
    }
  }

  &.expanded {
    article {
      display: block;
    }

    .toggle {
      > span {
        display: none;

        &.alt {
          display: inline;
        }
      }
    }
  }
}

.edit-button {
  background-position: -36px -657px;
  cursor: pointer;
  float: right;
  height: 24px;
  margin: 0 -10px 0 10px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

.errorlist {
  list-style: none;
  margin: 0 0 12px 0;
  padding: 0;

  li {
    color: @textDarkOrange;
    margin-bottom: 6px;

    a,
    a:visited,
    a:hover {
      color: @textDarkOrange;
      text-decoration: none;
    }
  }
}

.icon-sprite {
  .icons-sprite();
}

.logo-sprite {
  background: url('../../img/mobile/logos-sprite.png?v=3') -50px -50px no-repeat;
  height: 48px;
  width: 48px;

  /* Vertical position = 50px + i * 148 */

  &.logo-firefox {
    background-position: -50px -50px;
  }

  &.logo-thunderbird {
    background-position: -50px -198px;
  }

  &.logo-mobile {
    background-position: -50px -346px;
  }

  &.logo-firefox-os {
    background-position: -50px -494px;
  }

  &.logo-webmaker {
    background-position: -50px -642px;
  }

  &.logo-other {
    background-position: -50px -790px;
  }

  &.logo-ios {
    background-position: -50px -938px;
  }

  &.logo-focus {
    background-position: -50px -1086px;
  }
}

.header-overlay {
  background: rgba(40, 40, 40, 0.98) url('../../img/grain.png') 0 0 repeat;
  border-bottom: 1px solid #000;
  height: 50px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;

  h2 {
    color: #fff;
    font-size: 24px;
    font-weight: normal;
    line-height: 50px;
    margin: 0 16px;
  }

  .done-button {
    color: #fff;
    cursor: pointer;
    float: right;
    height: 50px;
    line-height: 50px;
    padding: 0 12px;
  }
}

.footer-overlay {
  background: rgba(40, 40, 40, 0.98) url('../../img/grain.png') 0 0 repeat;
  bottom: 0;
  height: 50px;
  position: fixed;
  width: 100%;
  z-index: 100;
}

.overlay {
  background: rgba(40, 40, 40, 0.98) url('../../img/grain.png') 0 0 repeat;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100;

  > header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    color: #fff;
    cursor: pointer;
    height: 50px;
    left: 0;
    line-height: 50px;
    padding: 0 30px;
    position: absolute;
    right: 0;
    top: 0;
  }

  .select-list {
    font-size: 24px;
    list-style: none;
    margin: 0 24px;
    padding: 0;

    > li {
      > a,
      > a:visited,
      > a:hover {
        border-bottom: 1px solid #000;
        border-top: 1px solid rgba(255, 255, 255, 0.25);
        color: #fff;
        display: block;
        padding: 16px 28px 16px 6px;
        position: relative;
        text-decoration: none;
      }

      &.selected {
        > a,
        > a:visited,
        > a:hover {
          color: #00a5c5;

          &:before {
            content: '\2713';
            position: absolute;
            right: 0;
          }
        }
      }

      &:first-of-type {
        > a {
          border-top: 0;
        }
      }

      &:last-of-type {
        > a {
          border-bottom: 0;
        }
      }
    }
  }

  .wrapper {
    bottom: 0;
    color: #fff;
    font-size: 24px;
    left: 0;
    overflow: auto;
    position: absolute;
    right: 0;
    top: 51px;

    &.padded {
      padding: 0 24px;
    }

    input {
      color: #000;
    }
  }
}

.paginator {
  list-style: none;
  margin: 0;
  padding: 10px 16px;

  li {
    box-sizing: border-box;
    float: left;
    width: 27.5%;

    &.disabled {
      opacity: 0.5;
    }

    &.page {
      padding: 0 16px;
      width: 45%;

      .select-box {
        float: none;
        margin: 0;
      }
    }

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

.progress-bar {
  background: rgba(0, 0, 0, 0.1) url('../../img/grain.png');
  border: 1px solid rgba(0, 0, 0, 0.03);
  border-radius: 12px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  height: 24px;
  line-height: 24px;
  position: relative;
  text-align: right;
  z-index: 1;

  &:after {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 13px;
    bottom: -2px;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
  }

  &:before {
    border: 2px solid rgba(0, 0, 0, 0.01);
    border-radius: 12px;
    bottom: 0;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
  }

  > div {
    background: #ff9500;
    background: linear-gradient(to bottom, #ff9500, #ed7000);
    border-radius: 12px;
    height: 24px;
    position: relative;
    z-index: 5;

    > span {
      margin-right: 10px;
    }
  }
}

.pulldown-menu {
  background: @mobileNavBackground url('../../img/grain.png');
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
  left: 0;
  margin-top: 51px;
  position: absolute;
  width: 100%;
  z-index: 8;

  .pulldown-panel {
    max-height: 0;
    overflow: hidden;
    transition-property: max-height;
    transition-duration: 0.5s;

    > section {
      border-bottom: 1px solid #2f393b;
      border-top: 1px solid #484d54;
      padding: 6px 16px;

      &:first-of-type {
        border-top: 0;
      }

      &:last-of-type {
        border-bottom: 0;
      }
    }
  }

  &.open {
    .pulldown-panel {
      max-height: 800px;
      transition-duration: 1.55s;
    }
  }

  .pulldown-handle {
    background: url('../../img/mobile/handle.png') 0 0 no-repeat;
    bottom: -19px;
    cursor: pointer;
    height: 19px;
    left: 50%;
    margin-left: -42px;
    position: absolute;
    width: 85px;
  }
}

.return-button {
  background-position: -48px -286px;
  border-right: 1px solid @mobileHeaderBorder;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
  float: left;
  height: 24px;
  margin: 0 8px 0 0;
  padding: 13px 4px 13px 2px;
  text-indent: -9999px;
  width: 24px;
}

.scrollable {
  -webkit-overflow-scrolling: touch;
}

.select-box {
  background: #e7e7e7;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  color: #333;
  cursor: pointer;
  float: left;
  height: 38px;
  line-height: 38px;
  overflow: hidden;
  padding: 0 14px;
  position: relative;
  text-decoration: none;

  &:after {
    border-color: transparent #333 transparent transparent;
    border-style: solid;
    border-width: 10px 10px 0 0;
    bottom: 3px;
    content: '';
    position: absolute;
    right: 3px;
  }
}

.smart-width {
  max-width: 100%;
}

.swipeable {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.topic-sprite {
  background: url('../../img/mobile/topics-sprite.png?v=1') -50px -494px no-repeat;
  height: 48px;
  width: 48px;

  &.topic-get-started,
  &.topic-learn-basics-firefox-os {
    background-position: -50px -50px;
  }

  &.topic-download-and-install {
    background-position: -50px -198px;
  }

  &.topic-privacy-and-security {
    background-position: -50px -346px;
  }

  &.topic-customize,
  &.topic-customize-settings {
    background-position: -50px -494px;
  }

  &.topic-fix-problems {
    background-position:  -50px -642px;
  }

  &.topic-get-community-support {
    background-position: -50px -790px;
  }

  &.topic-phone-calls-contacts {
    background-position: -50px -938px;
  }

  &.topic-connect-internet {
    background-position: -50px -1086px;
  }

  &.topic-email-messages {
    background-position: -50px -1234px;
  }

  &.topic-marketplace {
    background-position: -50px -1382px;
  }

  &.topic-multimedia-apps {
    background-position: -50px -1530px;
  }
}

.trash-button {
  background-position: -36px -1400px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 1px @mobileHeaderBorder;
  cursor: pointer;
  float: right;
  height: 24px;
  margin: 0 -9px 0 10px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

#cancel-button {
  background-position: -53px -781px;
  border-right: 1px solid @mobileHeaderBorder;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
  cursor: pointer;
  float: left;
  height: 24px;
  margin: 0 8px 0 0;
  padding: 13px 4px 13px 2px;
  text-indent: -9999px;
  width: 12px;
}

#menu-button {
  background-position: -37px -37px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  border-right: 1px solid @mobileHeaderBorder;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
  cursor: pointer;
  float: left;
  height: 24px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

#search-button {
  cursor: pointer;
  float: left;
  height: 50px;
  line-height: 50px;
  margin-right: 10px;
  text-align: center;
  width: 50px;

  &:before {
    content: '\f002'; // Search icon
    font-family: FontAwesome;
    font-size: 24px;
  }
}

#notifications {
  bottom: 0;
  color: #fff;
  font-family: @Moz;
  font-size: 18px;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  position: fixed;
  right: 0;

  > li {
    background: #323C3E url("../../img/grain.png");
    padding: 16px;

    &.announcement {
      background: #ffc;
      color: #f90;
      font-size: 14px;
      padding: 12px 16px;
    }
  }
}

#reply-button {
  background-position: -36px -905px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 1px @mobileHeaderBorder;
  cursor: pointer;
  float: right;
  height: 24px;
  margin: 0 -9px 0 10px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

#send-button {
  background-position: -35px -1029px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 1px @mobileHeaderBorder;
  cursor: pointer;
  float: right;
  height: 24px;
  margin: 0 -9px 0 10px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

.page-not-found {
  background: url(../../img/background-404.jpg) no-repeat;
  background-position: 50% 0;
  border-radius: 5px;
  font-size: 18px;
  line-height: 25px;
  margin: 10px auto;
  max-width: 530px;
  min-height: 500px;
  padding: 10px 0;
  text-align: center;

  h1 {
    color: #fff;
    font-size: 40px;
    font-weight: 100;
    line-height: 55px;
    margin-bottom: 80px;
    text-shadow: #222 1px 1px 2px;
  }

  p, div.search-empty {
    background-color: rgba(256, 256, 256, 0.75);
    padding: 5px;
  }

  form {
    margin: 20px 0px;

    .search-query {
      padding: 5px;
    }
  }
}

.footnote {
  display: block;
  font-size: 12px;
  margin: 10px auto;
  max-width: 530px;
}

@media only screen and (max-width: 319px) {
  body {
    > nav {
      width: calc(~"100% - 50px");
    }

    &.exposed {
      .slide-on-exposed {
        left: calc(~"100% - 50px");
      }
    }

    &[data-orientation='right'] {
      &.exposed {
        .slide-on-exposed {
          left: auto;
          right: calc(~"100% - 50px");
        }
      }
    }
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  .icon-sprite {
    .icons-sprite-2x();
  }

  .logo-sprite {
    background-image: url('../../img/mobile/logos-sprite-2x.png?v=3');
    background-size: 148px 888px;
  }

  .topic-sprite {
    background-image: url('../../img/mobile/topics-sprite-2x.png?v=1');
    background-size: 148px 1628px;
  }

  .pulldown-menu {
    .pulldown-handle {
      background-image: url('../../img/mobile/handle-2x.png');
      background-size: 85px 19px;
    }
  }
}

@import '../fonts.less';
@import '../variables.less';
@import '../includes/mixins.less';
@import 'mixins.less';

.fonts('../../fonts');

html, body {
  font-size: 15px;
  height: 100%;
}

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

a:hover {
  text-decoration: hover;
}

sup sup,
sub sub,
small small {
  bottom: 0;
  font-size: 100%;
  position: relative;
  top: 0;
  vertical-align: baseline;
}

body {
  font-family: @Moz;
  overflow-x: hidden;
  width: 100%;

  > * {
    transform: translateZ(0px);
  }

  > nav {
    background: @mobileNavBackground url('../../img/grain.png') 0 0 repeat;
    color: #fff;
    display: none;
    height: 100%;
    left: 0;
    overflow: auto;
    position: fixed;
    top: 0;
    width: 270px;
    z-index: 0;

    > a,
    > header {
      border-bottom: 1px solid #929e9e;
    }

    > a,
    > a:visited,
    > a:hover {
      color: #fff;
      display: block;
      font-size: 17px;
      padding: 16px 16px 10px 16px;
      text-decoration: none;
    }

    > header {
      background: #1a2122;
      background: url('../../img/grain.png'), linear-gradient(to bottom, #1a2122, #1b2324);
      font-size: 14px;
      font-weight: bold;
      height: 29px;
      line-height: 29px;
      padding: 0 16px;
    }

    #search-bar {
      background: #253132;
      background: url('../../img/grain.png'), linear-gradient(to bottom, #2c393b, #253132);
      box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.75);
      padding: 10px 16px;

      form {
        display: block;
        position: relative;

        button[type='submit'] {
          background-color: transparent;
          background-position: -54px -177px;
          border: 0;
          height: 18px;
          margin: 0;
          outline: 0;
          padding: 0;
          position: absolute;
          right: 6px;
          text-indent: -9999px;
          top: 6px;
          width: 18px;
        }

        input[type='search'] {
          background: #283235;
          border: 1px solid rgba(0, 0, 0, 0.25);
          border-radius: 3px;
          box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.25) inset;
          box-sizing: border-box;
          color: #849b9f;
          font-family: @Moz;
          font-size: 14px;
          outline: none;
          padding: 5px 30px 4px 4px;
          width: 100%;
        }
      }
    }
  }

  &.exposed {
    > nav {
      display: block;
    }

    .slide-on-exposed {
      left: 270px;
    }
  }

  .slide-on-exposed {
    left: 0;
    transition-property: left, right;
    transition-duration: 0.5s;
  }

  > header {
    background: #cd6723;
    background: linear-gradient(to bottom, #cd6723, #bb482d);
    border-bottom: 1px solid @mobileHeaderBorder;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.75);
    color: #fff;
    height: 50px;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;

    h1 {
      font-size: 24px;
      font-weight: normal;
      height: 50px;
      line-height: 50px;
      margin: 0 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #instant-search-form {
      display: none;

      input[type=search] {
        border: 0;
        box-sizing: border-box;
        box-shadow: none;
        color: #000;
        height: 24px;
        font-size: 14px;
        outline: none;
        margin: 13px;
        padding: 4px 10px;
        width: calc(~'100% - 140px');
      }
    }

    &.searching {
      #instant-search-form {
        display: block;
      }

      #header-components {
        display: none;
      }
    }
  }

  > .wrapper {
    background: #fff;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.8);
    min-height: calc(~"100% - 51px");
    position: absolute;
    top: 51px;
    width: 100%;
    z-index: 1;
  }

  &.minimal {
    > .wrapper {
      box-shadow: none;
      top: 0;
    }
  }

  &[data-orientation='right'] {
    > nav,
    .slide-on-exposed {
      left: auto;
      right: 0;
    }

    #menu-button {
      border-right: 0;
      box-shadow: 0 0 0 1px @mobileHeaderBorder;
      float: right;
    }

    #search-button {
      float: right;
      margin-left: 10px;
      margin-right: 0;
    }

    &.exposed {
      .slide-on-exposed {
        right: 270px;
      }
    }
  }
}

fieldset {
  border: 0;
  margin: 0;
  outline: none;
  padding: 0;
}

h3 {
  font-size: 20px;
  font-weight: normal;
}

h4 {
  font-size: 17px;
  font-weight: normal;
}

input[type='text'],
input[type='password'],
input[type='email'],
input[type='url'],
select,
textarea {
  background: #fff;
  border: 1px solid @mobileInputBorder;
  border-radius: 3px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1) inset;
  box-sizing: border-box;
  display: inline-block;
  font-family: @Moz;
  font-size: 14px;
  margin: 0 0 12px 0;
  outline: none;
  padding: 10px 12px;
  width: 100%;
}

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  height: 41px;
}

.add-button {
  background-position: -36px -1153px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 1px @mobileHeaderBorder;
  cursor: pointer;
  float: right;
  height: 24px;
  margin: 0 -9px 0 10px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

.btn,
.btn:visited,
input[type="submit"],
input[type="submit"]:visited {
  background: #e3e3e3;
  background: linear-gradient(to bottom, #fafafa, #cdcdcd);
  border: 1px solid #ababab;
  border-radius: 2px;
  box-sizing: border-box;
  color: @textDarkGrey;
  cursor: pointer;
  display: block;
  font-family: @Moz;
  font-size: 16px;
  font-weight: bold;
  outline: none;
  margin: 0 0 6px 0;
  padding: 4px 0;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
  width: 100%;

  &.btn-submit {
    background: #00caf2;
    background: linear-gradient(to bottom, #00caf2, #00aacd);
    border: 0;
    font-size: 17px;
    padding: 8px 0;
  }
}

.btn:hover {
  text-decoration: none;
}

.centered {
  color: #2BBAE7;
  font-family: "Komikax";
  font-size: 24px;
  text-align: center;
  text-transform: uppercase;
}

.collapsable {
  article {
    display: none;
  }

  .toggle {
    color: @mobileHyperlink;
    cursor: pointer;

    > span {
      &.alt {
        display: none;
      }
    }
  }

  &.expanded {
    article {
      display: block;
    }

    .toggle {
      > span {
        display: none;

        &.alt {
          display: inline;
        }
      }
    }
  }
}

.edit-button {
  background-position: -36px -657px;
  cursor: pointer;
  float: right;
  height: 24px;
  margin: 0 -10px 0 10px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

.errorlist {
  list-style: none;
  margin: 0 0 12px 0;
  padding: 0;

  li {
    color: @textDarkOrange;
    margin-bottom: 6px;

    a,
    a:visited,
    a:hover {
      color: @textDarkOrange;
      text-decoration: none;
    }
  }
}

.icon-sprite {
  .icons-sprite();
}

.logo-sprite {
  background: url('../../img/mobile/logos-sprite.png?v=3') -50px -50px no-repeat;
  height: 48px;
  width: 48px;

  /* Vertical position = 50px + i * 148 */

  &.logo-firefox {
    background-position: -50px -50px;
  }

  &.logo-thunderbird {
    background-position: -50px -198px;
  }

  &.logo-mobile {
    background-position: -50px -346px;
  }

  &.logo-firefox-os {
    background-position: -50px -494px;
  }

  &.logo-webmaker {
    background-position: -50px -642px;
  }

  &.logo-other {
    background-position: -50px -790px;
  }

  &.logo-ios {
    background-position: -50px -938px;
  }

  &.logo-focus {
    background-position: -50px -1086px;
  }
}

.header-overlay {
  background: rgba(40, 40, 40, 0.98) url('../../img/grain.png') 0 0 repeat;
  border-bottom: 1px solid #000;
  height: 50px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;

  h2 {
    color: #fff;
    font-size: 24px;
    font-weight: normal;
    line-height: 50px;
    margin: 0 16px;
  }

  .done-button {
    color: #fff;
    cursor: pointer;
    float: right;
    height: 50px;
    line-height: 50px;
    padding: 0 12px;
  }
}

.footer-overlay {
  background: rgba(40, 40, 40, 0.98) url('../../img/grain.png') 0 0 repeat;
  bottom: 0;
  height: 50px;
  position: fixed;
  width: 100%;
  z-index: 100;
}

.overlay {
  background: rgba(40, 40, 40, 0.98) url('../../img/grain.png') 0 0 repeat;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100;

  > header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    color: #fff;
    cursor: pointer;
    height: 50px;
    left: 0;
    line-height: 50px;
    padding: 0 30px;
    position: absolute;
    right: 0;
    top: 0;
  }

  .select-list {
    font-size: 24px;
    list-style: none;
    margin: 0 24px;
    padding: 0;

    > li {
      > a,
      > a:visited,
      > a:hover {
        border-bottom: 1px solid #000;
        border-top: 1px solid rgba(255, 255, 255, 0.25);
        color: #fff;
        display: block;
        padding: 16px 28px 16px 6px;
        position: relative;
        text-decoration: none;
      }

      &.selected {
        > a,
        > a:visited,
        > a:hover {
          color: #00a5c5;

          &:before {
            content: '\2713';
            position: absolute;
            right: 0;
          }
        }
      }

      &:first-of-type {
        > a {
          border-top: 0;
        }
      }

      &:last-of-type {
        > a {
          border-bottom: 0;
        }
      }
    }
  }

  .wrapper {
    bottom: 0;
    color: #fff;
    font-size: 24px;
    left: 0;
    overflow: auto;
    position: absolute;
    right: 0;
    top: 51px;

    &.padded {
      padding: 0 24px;
    }

    input {
      color: #000;
    }
  }
}

.paginator {
  list-style: none;
  margin: 0;
  padding: 10px 16px;

  li {
    box-sizing: border-box;
    float: left;
    width: 27.5%;

    &.disabled {
      opacity: 0.5;
    }

    &.page {
      padding: 0 16px;
      width: 45%;

      .select-box {
        float: none;
        margin: 0;
      }
    }

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

.progress-bar {
  background: rgba(0, 0, 0, 0.1) url('../../img/grain.png');
  border: 1px solid rgba(0, 0, 0, 0.03);
  border-radius: 12px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  height: 24px;
  line-height: 24px;
  position: relative;
  text-align: right;
  z-index: 1;

  &:after {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 13px;
    bottom: -2px;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
  }

  &:before {
    border: 2px solid rgba(0, 0, 0, 0.01);
    border-radius: 12px;
    bottom: 0;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
  }

  > div {
    background: #ff9500;
    background: linear-gradient(to bottom, #ff9500, #ed7000);
    border-radius: 12px;
    height: 24px;
    position: relative;
    z-index: 5;

    > span {
      margin-right: 10px;
    }
  }
}

.pulldown-menu {
  background: @mobileNavBackground url('../../img/grain.png');
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
  left: 0;
  margin-top: 51px;
  position: absolute;
  width: 100%;
  z-index: 8;

  .pulldown-panel {
    max-height: 0;
    overflow: hidden;
    transition-property: max-height;
    transition-duration: 0.5s;

    > section {
      border-bottom: 1px solid #2f393b;
      border-top: 1px solid #484d54;
      padding: 6px 16px;

      &:first-of-type {
        border-top: 0;
      }

      &:last-of-type {
        border-bottom: 0;
      }
    }
  }

  &.open {
    .pulldown-panel {
      max-height: 800px;
      transition-duration: 1.55s;
    }
  }

  .pulldown-handle {
    background: url('../../img/mobile/handle.png') 0 0 no-repeat;
    bottom: -19px;
    cursor: pointer;
    height: 19px;
    left: 50%;
    margin-left: -42px;
    position: absolute;
    width: 85px;
  }
}

.return-button {
  background-position: -48px -286px;
  border-right: 1px solid @mobileHeaderBorder;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
  float: left;
  height: 24px;
  margin: 0 8px 0 0;
  padding: 13px 4px 13px 2px;
  text-indent: -9999px;
  width: 24px;
}

.scrollable {
  -webkit-overflow-scrolling: touch;
}

.select-box {
  background: #e7e7e7;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  color: #333;
  cursor: pointer;
  float: left;
  height: 38px;
  line-height: 38px;
  overflow: hidden;
  padding: 0 14px;
  position: relative;
  text-decoration: none;

  &:after {
    border-color: transparent #333 transparent transparent;
    border-style: solid;
    border-width: 10px 10px 0 0;
    bottom: 3px;
    content: '';
    position: absolute;
    right: 3px;
  }
}

.smart-width {
  max-width: 100%;
}

.swipeable {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.topic-sprite {
  background: url('../../img/mobile/topics-sprite.png?v=1') -50px -494px no-repeat;
  height: 48px;
  width: 48px;

  &.topic-get-started,
  &.topic-learn-basics-firefox-os {
    background-position: -50px -50px;
  }

  &.topic-download-and-install {
    background-position: -50px -198px;
  }

  &.topic-privacy-and-security {
    background-position: -50px -346px;
  }

  &.topic-customize,
  &.topic-customize-settings {
    background-position: -50px -494px;
  }

  &.topic-fix-problems {
    background-position:  -50px -642px;
  }

  &.topic-get-community-support {
    background-position: -50px -790px;
  }

  &.topic-phone-calls-contacts {
    background-position: -50px -938px;
  }

  &.topic-connect-internet {
    background-position: -50px -1086px;
  }

  &.topic-email-messages {
    background-position: -50px -1234px;
  }

  &.topic-marketplace {
    background-position: -50px -1382px;
  }

  &.topic-multimedia-apps {
    background-position: -50px -1530px;
  }
}

.trash-button {
  background-position: -36px -1400px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 1px @mobileHeaderBorder;
  cursor: pointer;
  float: right;
  height: 24px;
  margin: 0 -9px 0 10px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

#cancel-button {
  background-position: -53px -781px;
  border-right: 1px solid @mobileHeaderBorder;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
  cursor: pointer;
  float: left;
  height: 24px;
  margin: 0 8px 0 0;
  padding: 13px 4px 13px 2px;
  text-indent: -9999px;
  width: 12px;
}

#menu-button {
  background-position: -37px -37px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  border-right: 1px solid @mobileHeaderBorder;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
  cursor: pointer;
  float: left;
  height: 24px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

#search-button {
  cursor: pointer;
  float: left;
  height: 50px;
  line-height: 50px;
  margin-right: 10px;
  text-align: center;
  width: 50px;

  &:before {
    content: '\f002'; // Search icon
    font-family: FontAwesome;
    font-size: 24px;
  }
}

#notifications {
  bottom: 0;
  color: #fff;
  font-family: @Moz;
  font-size: 18px;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  position: fixed;
  right: 0;

  > li {
    background: #323C3E url("../../img/grain.png");
    padding: 16px;

    &.announcement {
      background: #ffc;
      color: #f90;
      font-size: 14px;
      padding: 12px 16px;
    }
  }
}

#reply-button {
  background-position: -36px -905px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 1px @mobileHeaderBorder;
  cursor: pointer;
  float: right;
  height: 24px;
  margin: 0 -9px 0 10px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

#send-button {
  background-position: -35px -1029px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 1px @mobileHeaderBorder;
  cursor: pointer;
  float: right;
  height: 24px;
  margin: 0 -9px 0 10px;
  padding: 13px;
  text-indent: -9999px;
  width: 24px;
}

.page-not-found {
  background: url(../../img/background-404.jpg) no-repeat;
  background-position: 50% 0;
  border-radius: 5px;
  font-size: 18px;
  line-height: 25px;
  margin: 10px auto;
  max-width: 530px;
  min-height: 500px;
  padding: 10px 0;
  text-align: center;

  h1 {
    color: #fff;
    font-size: 40px;
    font-weight: 100;
    line-height: 55px;
    margin-bottom: 80px;
    text-shadow: #222 1px 1px 2px;
  }

  p, div.search-empty {
    background-color: rgba(256, 256, 256, 0.75);
    padding: 5px;
  }

  form {
    margin: 20px 0px;

    .search-query {
      padding: 5px;
    }
  }
}

.footnote {
  display: block;
  font-size: 12px;
  margin: 10px auto;
  max-width: 530px;
}

@media only screen and (max-width: 319px) {
  body {
    > nav {
      width: calc(~"100% - 50px");
    }

    &.exposed {
      .slide-on-exposed {
        left: calc(~"100% - 50px");
      }
    }

    &[data-orientation='right'] {
      &.exposed {
        .slide-on-exposed {
          left: auto;
          right: calc(~"100% - 50px");
        }
      }
    }
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  .icon-sprite {
    .icons-sprite-2x();
  }

  .logo-sprite {
    background-image: url('../../img/mobile/logos-sprite-2x.png?v=2');
    background-size: 148px 888px;
  }

  .topic-sprite {
    background-image: url('../../img/mobile/topics-sprite-2x.png?v=1');
    background-size: 148px 1628px;
  }

  .pulldown-menu {
    .pulldown-handle {
      background-image: url('../../img/mobile/handle-2x.png');
      background-size: 85px 19px;
    }
  }
}


Smaller font-size info

Smaller font-size info

/*--- mixins and useful things ---*/

.border-radius (@radius: 5px)
{
  border-radius: @radius;
  -moz-border-radius: @radius;
  -o-border-radius: @radius;
  -webkit-border-radius: @radius;
}

.opacity (@opacity: 0.5)
{
  opacity: @opacity;
  -moz-opacity: @opacity;
  -o-opacity: @opacity;
  -webkit-opacity: @opacity;
}

.box-shadow (@color: #000, @x: 1px, @y: 1px, @radius: 2px)
{
  box-shadow: @color @x @y @radius;
  -moz-box-shadow: @color @x @y @radius;
  -o-box-shadow: @color @x @y @radius;
  -webkit-box-shadow: @color @x @y @radius;
}

.box-shadow-inset (@color: #000, @x: 1px, @y: 1px, @radius: 2px)
{
  box-shadow: inset @color @x @y @radius;
  -moz-box-shadow: inset @color @x @y @radius;
  -o-box-shadow: inset @color @x @y @radius;
  -webkit-box-shadow: inset @color @x @y @radius;
}

/*--- settings icon ---*/

#settings_icon
{
  background: url(/static/images/alpha/000_70.png);
  height: 40px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 40px;
  z-index: 1;

  border-bottom-right-radius: 40px;
  -moz-border-radius-bottomright: 40px;
  -o-border-bottom-right-radius: 40px;
  -webkit-border-bottom-right-radius: 40px;

  transition: opacity 0.3s;
  -transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
}

#settings_icon:hover,
.f_settings_mode #settings_icon
{
  cursor: pointer;
  opacity: 1;
}

#settings_icon .inner
{
  background: url(/static/images/settings_icon.png) no-repeat 5px 5px;
  height: 40px;
  width: 40px;
}

/*--- tutorial ---*/

#tutorial
{
  background: url(/static/images/alpha/fff_20.png);
  border: 1px solid #bbb;
  left: 50px;
  line-height: 1.5em;
  padding: 20px;
  position: absolute;
  top: 50px;

  .border-radius(5px);
  .box-shadow(#555, 1px, 1px, 8px);
}

#tutorial .inner
{
  background: url(/static/images/maraschino_logo.png) no-repeat;
  min-height: 80px;
  padding-left: 90px;
  width: 300px;

  text-shadow: #555 1px 1px 1px;
  -moz-text-shadow: #555 1px 1px 1px;
  -o-text-shadow: #555 1px 1px 1px;
  -webkit-text-shadow: #555 1px 1px 1px;
}

#tutorial h1
{
  font-size: 1.2em;
}

#tutorial p
{
  margin-top: 10px;
}

#tutorial a
{
  border-bottom: 1px dotted #fff;
  color: #fff;
}

#tutorial a:hover
{
  background: url(/static/images/alpha/fff_20.png);
}

/*--- columns ---*/

#fanart
{
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;

  background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
}

#wrapper
{
  min-width: 900px;
  padding: 2% 2% 60px;
  position: relative;
}

.f_settings_mode #wrapper
{
  padding-bottom: 120px;
}

.col
{
  margin-left: 2%;
  width: 32%;
}

#col1
{
  float: left;
  margin-left: 0;
}

#col2
{
  float: left;
}

#col3
{
  float: right;
}

/*--- add module ---*/

.add_module
{
  opacity: 0;
}

.f_settings_mode .add_module
{
  background: url(/static/images/alpha/fff_20.png);
  border: 2px dashed #ddd;
  cursor: pointer;
  display: block;
  opacity: 1;
  padding: 7px;
  text-align: center;

  .border-radius(2px);
}

/*--- module ---*/

ul.modules
{
  min-height: 20px;
}

.placeholder
{
  display: none;
}

.module,
.f_settings_mode .inactive_module,
.f_settings_mode .placeholder
{
  background: url(/static/images/alpha/000_80.png);
  border: 1px solid #333;
  display: block !important;
  margin-bottom: 40px;
  padding: 5px;
  position: relative;

  .border-radius(2px);
  .box-shadow(#222, 0, 0, 10px);
}

.inactive_module
{
  display: none;
}

.module h2,
.f_settings_mode .inactive_module h2,
.f_settings_mode .placeholder h2
{
  display: block;
  font-size: 1.5em;
  font-weight: normal;
  line-height: 1.3em;
  padding: 10px 15px 12px;
}

.module h2 + .subtitle
{
  color: #ccc;
  font-size: 0.9em;
  margin: -12px 15px 15px;
}

.f_settings_mode .module,
.f_settings_mode .inactive_module,
.f_settings_mode .placeholder
{
  cursor: move;
}

/* settings mode - settings/remove buttons */

.module_settings,
.module_remove
{
  background: url(/static/images/alpha/fff_10.png);
  cursor: pointer;
  display: none;
  height: 30px;
  position: absolute;
  right: 10px;
  top: 10px;
  text-indent: -9999px;
  width: 30px;

  .border-radius(4px);
}

.module_settings
{
  right: 47px;
}

#applications .module_settings,
#library .module_settings,
#synopsis .module_settings,
#synopsis_inactive .module_settings
{
  display: none;
}

.module_settings span,
.module_remove span
{
  background: url(/static/images/remove_icon.png) no-repeat center center;
  display: block;
  height: 30px;
  width: 30px;
}

.module_settings span
{
  background: url(/static/images/settings_icon_small.png) no-repeat center center;
}

.module_settings:hover,
.module_remove:hover
{
  background: url(/static/images/alpha/fff_20.png);
}

.f_settings_mode .module_settings,
.f_settings_mode .module_remove
{
  display: block;
}

/*--- dialog ---*/

.dialog
{
  background: url(/static/images/alpha/000_80.png);
  border: 2px solid #ccc;
  padding: 15px;
  width: 500px;

  .border-radius(4px);
  .box-shadow(#222, 0, 0, 5px);
}

.dialog .close
{
  background-color: #000;
  border: 2px solid #ccc;
  cursor: pointer;
  height: 18px;
  line-height: 16px;
  position: absolute;
  right: -10px;
  text-align: center;
  top: -10px;
  width: 18px;
  .border-radius(15px);
}

.dialog .formrow select
{
  width: 63%;
}

/* confirmation dialog */

#confirmation_dialog h3
{
  font-size: 1.2em;
  font-weight: normal;
  margin: 10px 0 20px;
  text-align: center;
}

/*--- add module dialog ---*/

#add_module_dialog h2
{
  display: inline;
}

#add_module_dialog #select_module
{
  display: inline;
  margin-left: 5px;
}

#add_module_dialog .description
{
  height: 30px;
  margin: 20px 0;
}

#add_module_dialog .submit
{
  background: url(/static/images/alpha/fff_40.png);
  border: 1px solid #999;
  cursor: pointer;
  display: inline-block;
  float: right;
  height: 11px;
  padding: 8px 12px;

  .border-radius(4px);
}

/*--- module settings ---*/

.edit_settings > .inner
{
  padding: 0 15px 15px;
}

/*--- add application dialog ---*/

#add_edit_application_dialog h2
{
  font-size: 1.2em;
  margin-bottom: 20px;
}

#add_edit_application_dialog .add_application
{
  width: 110px;
}

/*--- generic formrow/choices ---*/

.choices
{
  margin-top: 20px;
  text-align: center;
}

.choices .save,
.choices .confirm,
.choices .cancel,
.choices .delete
{
  background: url(/static/images/alpha/fff_20.png);
  display: inline-block;
  padding: 8px;
  width: 60px;

  .border-radius(4px);
}

.choices .save:hover,
.choices .confirm:hover,
.choices .cancel:hover,
.choices .delete:hover
{
  background: url(/static/images/alpha/fff_40.png);
  cursor: pointer;
}

.choices .save,
.choices .confirm,
.choices .delete
{
  margin-right: 10px;
}

.choices .saved,
.choices .confirmed
{
  width: 110px;
}

.formrow
{
  margin-top: 5px;
}

.formrow.invalid,
.formrow .invalid
{
  color: #d92525;
}

.formrow label
{
  float: left;
  margin-top: 6px;
  width: 33%;
}

.formrow input[type=text],
.formrow input[type=password],
.formrow select
{
  background-color: #fff;
  border: 1px solid #555;
  float: right;
  padding: 4px 6px;
  width: 60%;

  .border-radius(3px);
}

.formrow select
{
  padding: 3px 6px;
  width: auto;
}

/*--- applications ---*/

#applications li
{
  background: url(/static/images/alpha/fff_10.png);
  border: 1px solid #222;
  line-height: 1.3em;
  margin-top: 5px;
  min-height: 40px;
  padding: 0;

  .border-radius(4px);
}

#applications li:hover
{
  background: url(/static/images/alpha/fff_20.png);
}

#applications li:first-child
{
  margin-top: 0;
}

#applications li a
{
  display: block;
  padding: 10px 15px;
}

#applications li .name
{
  float: left;
  font-size: 1.3em;
  font-weight: bold;
}

#applications li img
{
  margin-right: 5px;
  vertical-align: middle;
}

#applications li .name span
{
  vertical-align: middle;
}

#applications li .description
{
  color: #ddd;
  float: right;
  font-size: 0.9em;
  margin-top: 2px;
}

#applications #add_application
{
  display: none;
}

.f_settings_mode #applications #add_application
{
  background: url(/static/images/alpha/fff_20.png);
  border: 2px dashed #ddd;
  cursor: pointer;
  display: block;
  margin: 10px 5px 5px;
  opacity: 1;
  padding: 7px;
  text-align: center;

  .border-radius(2px);
}

/*--- episodes list ---*/

ul.episodes li
{
  background: url(/static/images/alpha/fff_10.png);
  border: 1px solid #222;
  font-size: 0.9em;
  line-height: 1.3em;
  margin-top: 5px;
  position: relative;

  .border-radius(4px);
}

ul.episodes li:first-child
{
  margin-top: 0;
}

ul.episodes li:hover
{
  background: url(/static/images/alpha/fff_20.png);
  cursor: pointer;
}

ul.episodes .inner
{
  padding: 5px 107px 5px 15px;
  .border-radius(4px);
}

ul.episodes li.watched .inner
{
  border-left: 3px solid #ccc;
  padding-left: 12px;
}

ul.episodes h3
{
  font-size: 1.2em;
  margin-top: 6px;
}

ul.episodes p
{
  color: #ccc;
}

ul.episodes .title
{
  margin-bottom: 6px;
}

ul.episodes img
{
  position: absolute;
  right: 5px;
  top: 5px;
  .box-shadow(#222, 0, 0, 2px);
}

/*--- currently playing ---*/

#currently_playing
{
  background: url(/static/images/alpha/000_80.png);
  bottom: 0;
  left: 0;
  min-width: 900px;
  padding: 20px;
  position: fixed;
  right: 0;

  .box-shadow(#222, 0, 0, 10px);
}

#currently_playing .item_info
{
  float: left;
  line-height: 1.5em;
  width: 400px;
}

#currently_playing .item_info .show:hover,
#currently_playing .item_info .season:hover
{
  border-bottom: 1px solid #555;
  cursor: pointer;
}

#currently_playing .item_info .separator
{
  margin: 0 3px;
}

#currently_playing .controls
{
  margin: 0 auto;
  width: 80px;
}

#currently_playing .controls .play_pause,
#currently_playing .controls .stop
{
  background: #111 url(/static/images/player_sprite.png) no-repeat 11px 11px;
  border: 1px solid #555;
  cursor: pointer;
  float: left;
  height: 33px;
  text-indent: -9999px;
  width: 33px;

  .border-radius(20px);
}

#currently_playing .controls .stop
{
  background-position: 8px -28px;
  margin-right: 10px;
}

#currently_playing .controls .play_pause:hover,
#currently_playing .controls .stop:hover
{
  background-color: #333;
}

#currently_playing .progress
{
  float: right;
  font-size: 0.9em;
  height: 40px;
  position: relative;
  width: 400px;
}

#currently_playing .progress .current
{
  bottom: 8px;
  left: 0;
  position: absolute;
}

#currently_playing .progress .total
{
  bottom: 8px;
  right: 0;
  position: absolute;
}

#currently_playing .progress .bar
{
  border: 1px solid #777;
  height: 5px;
  margin-top: 8px;
  width: 398px;
  .border-radius(3px);
}

#currently_playing .progress .bar .inner
{
  background-color: #eee;
  height: 5px;
}

#currently_playing .synopsis
{
  display: none;
}

/*--- trakt ---*/

#trakt > .inner
{
  margin-top: -5px;
}

#trakt .overview
{
  color: #ccc;
}

#trakt .overview strong
{
  color: #fff;
}

#trakt h3
{
  color: #eee;
  font-weight: normal;
}

#trakt .shouts li
{
  font-size: 0.9em;
  line-height: 1.2em;
  margin-top: 10px;
  position: relative;
}

#trakt .shouts .avatar
{
  left: 0;
  position: absolute;
  top: 20px;
}

#trakt .shouts .shout
{
  background: url(/static/images/alpha/fff_10.png);
  border: 1px solid #222;
  line-height: 1.3em;
  margin-left: 25px;
  padding: 5px;

  .border-radius(4px);
}

#trakt .shouts li.me .shout
{
  background: url(/static/images/alpha/lightblue_30.png);
}

#trakt .shouts + #add_shout
{
  margin-top: 20px;
}

#trakt #add_shout h3
{
  margin-bottom: 10px;
}

#trakt #add_shout textarea
{
  background: url(/static/images/alpha/fff_20.png);
  border: none;
  color: #ccc;
  display: block;
  font-size: 0.9em;
  height: 55px;
  width: 100%;

  .border-radius(2px);
}

#trakt #add_shout .submit_wrapper.xhrloading
{
  background: url(/static/images/xhrloading.gif) no-repeat 210px 11px;
}

#trakt #add_shout .submit
{
  background: url(/static/images/alpha/fff_20.png);
  border: 1px solid #222;
  float: right;
  font-size: 0.9em;
  margin-top: 5px;
  padding: 4px 12px;

  .border-radius(2px);
}

#trakt #add_shout .submit:hover
{
  background: url(/static/images/alpha/fff_40.png);
  cursor: pointer;
}

#trakt #add_shout .submit_wrapper p
{
  float: left;
  font-size: 0.9em;
  margin-top: 10px;
}

/*--- generic module ---*/

.module.generic > .inner
{
  color: #ccc;
  line-height: 1.3em;
  padding: 0 15px 15px;
}

.module.generic > .inner p
{
  margin-top: 5px;
}

.module.generic > .inner p strong
{
  color: #fff;
}

.module.generic > .inner p:first-child
{
  margin-top: 0;
}

/* generic bar */

.module .bar
{
  border: 1px solid #777;
  height: 5px;
  margin-bottom: 17px 0 6px;

  .border-radius(3px);
}

.module .bar .inner
{
  background-color: #eee;
  height: 5px;
}

/*--- SABnzbd+ ---*/

#sabnzbd
{
  position: relative;
}

#sabnzbd > .inner
{
  line-height: 1.3em;
  padding: 0 15px 15px;
}

#sabnzbd .speed
{
  background: url(/static/images/alpha/fff_10.png);
  border: 1px solid #222;
  padding: 4px 8px 2px;
  position: absolute;
  right: 20px;
  top: 14px;

  .border-radius(4px);
}

#sabnzbd .sab_speed
{
	background-color:transparent;
	color:white;
	border:none;
	text-align:right;
}
#sabnzbd .inner #status
{
  padding: 4px 8px 2px;
  position: absolute;
  top: 14px;
  left: 40%;
}
#sabnzbd .status
{
	cursor: pointer;
}

#sabnzbd .sab_speed:hover, #sabnzbd .sab_speed:focus
{
	background-color:white;
	color: black;
	border:none;
}

#sabnzbd td.extra_name
{
	overflow: hidden;
	white-space:nowrap;
	font-size: smaller;
}
.f_settings_mode #sabnzbd .speed
{
  display: none;
}

#sabnzbd .bar
{
  margin-top: 5px;
  margin-bottom: 5px;
}

#sabnzbd .remaining
{
  float: left;
  font-size: 0.9em;
  font-size: smaller;
}

#sabnzbd .percentage_complete
{
  float: right;
  font-size: 0.9em;
  margin: 0;
  font-size: smaller;
}

/*--- disk space ---*/

#diskspace li
{
  margin-top: 15px;
}

#diskspace li:first-child
{
  margin-top: 0;
}

#diskspace .path
{
  float: left;
}

#diskspace .stats
{
  float: right;
}

#diskspace .bar
{
  margin-top: 3px;
}

#diskspace #add_disk
{
  display: none;
}

.f_settings_mode #diskspace #add_disk
{
  background: url(/static/images/alpha/fff_20.png);
  border: 2px dashed #ddd;
  cursor: pointer;
  display: block;
  margin: 10px 5px 5px;
  opacity: 1;
  padding: 7px;
  text-align: center;

  .border-radius(2px);
}

.f_settings_mode #diskspace li:hover
{
  background: url(/static/images/alpha/fff_20.png);
  cursor: pointer;
}

/* add/edit disk dialog */

#add_edit_disk_dialog h2
{
  font-size: 1.2em;
  margin-bottom: 20px;
}

/*--- media library ---*/

#library
{
  position: relative;
}

#library h2
{
  padding-right: 55px;
}

#library .message
{
  margin: -7px 15px 10px;
}

#library ul
{
  max-height: 196px;
  overflow: auto;
}

#library li,
#library .back
{
  background: url(/static/images/alpha/fff_10.png);
  border: 1px solid #222;
  cursor: pointer;
  line-height: 1.3em;
  margin-top: 5px;
  padding: 5px 15px;

  .border-radius(4px);
}

.f_settings_mode #library .back
{
  display: none;
}

#library li
{
  padding-right: 28px;
  position: relative;
}

#library li:hover,
#library .back:hover
{
  background: url(/static/images/alpha/fff_20.png);
}

#library li:first-child
{
  margin-top: 0;
}

#library li .xhrloading
{
  position: absolute;
  right: 5px;
  top: 6px;
}

#library .back
{
  color: #ccc;
  font-size: 1.2em;
  position: absolute;
  margin-top: 0;
  padding: 3px 15px;
  right: 5px;
  top: 12px;
}

#library .back.xhrloading
{
  background: url(/static/images/xhrloading.gif) no-repeat center center;
  text-indent: -9999px;
}

/*--- recently added ---*/

#recently_added .problem
{
  margin: -7px 15px 15px;
}

/*--- expand ---*/

.expand
{
  text-decoration: none;
}

/*--- view more ---*/

.view_older,
.view_newer
{
  background: url(/static/images/alpha/fff_10.png);
  border: 1px solid #222;
  color: #ccc;
  display: block;
  float: left;
  font-size: 1.2em;
  margin-top: 5px;
  padding: 2px 14px;
  position: relative;
  text-align: center;

  .border-radius(4px);
}

.view_older
{
  float: right;
}

.view_older:hover,
.view_newer:hover
{
  background: url(/static/images/alpha/fff_20.png);
}

/*--- mixins and useful things ---*/

.border-radius (@radius: 5px)
{
  border-radius: @radius;
  -moz-border-radius: @radius;
  -o-border-radius: @radius;
  -webkit-border-radius: @radius;
}

.opacity (@opacity: 0.5)
{
  opacity: @opacity;
  -moz-opacity: @opacity;
  -o-opacity: @opacity;
  -webkit-opacity: @opacity;
}

.box-shadow (@color: #000, @x: 1px, @y: 1px, @radius: 2px)
{
  box-shadow: @color @x @y @radius;
  -moz-box-shadow: @color @x @y @radius;
  -o-box-shadow: @color @x @y @radius;
  -webkit-box-shadow: @color @x @y @radius;
}

.box-shadow-inset (@color: #000, @x: 1px, @y: 1px, @radius: 2px)
{
  box-shadow: inset @color @x @y @radius;
  -moz-box-shadow: inset @color @x @y @radius;
  -o-box-shadow: inset @color @x @y @radius;
  -webkit-box-shadow: inset @color @x @y @radius;
}

/*--- settings icon ---*/

#settings_icon
{
  background: url(/static/images/alpha/000_70.png);
  height: 40px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 40px;
  z-index: 1;

  border-bottom-right-radius: 40px;
  -moz-border-radius-bottomright: 40px;
  -o-border-bottom-right-radius: 40px;
  -webkit-border-bottom-right-radius: 40px;

  transition: opacity 0.3s;
  -transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
}

#settings_icon:hover,
.f_settings_mode #settings_icon
{
  cursor: pointer;
  opacity: 1;
}

#settings_icon .inner
{
  background: url(/static/images/settings_icon.png) no-repeat 5px 5px;
  height: 40px;
  width: 40px;
}

/*--- tutorial ---*/

#tutorial
{
  background: url(/static/images/alpha/fff_20.png);
  border: 1px solid #bbb;
  left: 50px;
  line-height: 1.5em;
  padding: 20px;
  position: absolute;
  top: 50px;

  .border-radius(5px);
  .box-shadow(#555, 1px, 1px, 8px);
}

#tutorial .inner
{
  background: url(/static/images/maraschino_logo.png) no-repeat;
  min-height: 80px;
  padding-left: 90px;
  width: 300px;

  text-shadow: #555 1px 1px 1px;
  -moz-text-shadow: #555 1px 1px 1px;
  -o-text-shadow: #555 1px 1px 1px;
  -webkit-text-shadow: #555 1px 1px 1px;
}

#tutorial h1
{
  font-size: 1.2em;
}

#tutorial p
{
  margin-top: 10px;
}

#tutorial a
{
  border-bottom: 1px dotted #fff;
  color: #fff;
}

#tutorial a:hover
{
  background: url(/static/images/alpha/fff_20.png);
}

/*--- columns ---*/

#fanart
{
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;

  background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
}

#wrapper
{
  min-width: 900px;
  padding: 2% 2% 60px;
  position: relative;
}

.f_settings_mode #wrapper
{
  padding-bottom: 120px;
}

.col
{
  margin-left: 2%;
  width: 32%;
}

#col1
{
  float: left;
  margin-left: 0;
}

#col2
{
  float: left;
}

#col3
{
  float: right;
}

/*--- add module ---*/

.add_module
{
  opacity: 0;
}

.f_settings_mode .add_module
{
  background: url(/static/images/alpha/fff_20.png);
  border: 2px dashed #ddd;
  cursor: pointer;
  display: block;
  opacity: 1;
  padding: 7px;
  text-align: center;

  .border-radius(2px);
}

/*--- module ---*/

ul.modules
{
  min-height: 20px;
}

.placeholder
{
  display: none;
}

.module,
.f_settings_mode .inactive_module,
.f_settings_mode .placeholder
{
  background: url(/static/images/alpha/000_80.png);
  border: 1px solid #333;
  display: block !important;
  margin-bottom: 40px;
  padding: 5px;
  position: relative;

  .border-radius(2px);
  .box-shadow(#222, 0, 0, 10px);
}

.inactive_module
{
  display: none;
}

.module h2,
.f_settings_mode .inactive_module h2,
.f_settings_mode .placeholder h2
{
  display: block;
  font-size: 1.5em;
  font-weight: normal;
  line-height: 1.3em;
  padding: 10px 15px 12px;
}

.module h2 + .subtitle
{
  color: #ccc;
  font-size: 0.9em;
  margin: -12px 15px 15px;
}

.f_settings_mode .module,
.f_settings_mode .inactive_module,
.f_settings_mode .placeholder
{
  cursor: move;
}

/* settings mode - settings/remove buttons */

.module_settings,
.module_remove
{
  background: url(/static/images/alpha/fff_10.png);
  cursor: pointer;
  display: none;
  height: 30px;
  position: absolute;
  right: 10px;
  top: 10px;
  text-indent: -9999px;
  width: 30px;

  .border-radius(4px);
}

.module_settings
{
  right: 47px;
}

#applications .module_settings,
#library .module_settings,
#synopsis .module_settings,
#synopsis_inactive .module_settings
{
  display: none;
}

.module_settings span,
.module_remove span
{
  background: url(/static/images/remove_icon.png) no-repeat center center;
  display: block;
  height: 30px;
  width: 30px;
}

.module_settings span
{
  background: url(/static/images/settings_icon_small.png) no-repeat center center;
}

.module_settings:hover,
.module_remove:hover
{
  background: url(/static/images/alpha/fff_20.png);
}

.f_settings_mode .module_settings,
.f_settings_mode .module_remove
{
  display: block;
}

/*--- dialog ---*/

.dialog
{
  background: url(/static/images/alpha/000_80.png);
  border: 2px solid #ccc;
  padding: 15px;
  width: 500px;

  .border-radius(4px);
  .box-shadow(#222, 0, 0, 5px);
}

.dialog .close
{
  background-color: #000;
  border: 2px solid #ccc;
  cursor: pointer;
  height: 18px;
  line-height: 16px;
  position: absolute;
  right: -10px;
  text-align: center;
  top: -10px;
  width: 18px;
  .border-radius(15px);
}

.dialog .formrow select
{
  width: 63%;
}

/* confirmation dialog */

#confirmation_dialog h3
{
  font-size: 1.2em;
  font-weight: normal;
  margin: 10px 0 20px;
  text-align: center;
}

/*--- add module dialog ---*/

#add_module_dialog h2
{
  display: inline;
}

#add_module_dialog #select_module
{
  display: inline;
  margin-left: 5px;
}

#add_module_dialog .description
{
  height: 30px;
  margin: 20px 0;
}

#add_module_dialog .submit
{
  background: url(/static/images/alpha/fff_40.png);
  border: 1px solid #999;
  cursor: pointer;
  display: inline-block;
  float: right;
  height: 11px;
  padding: 8px 12px;

  .border-radius(4px);
}

/*--- module settings ---*/

.edit_settings > .inner
{
  padding: 0 15px 15px;
}

/*--- add application dialog ---*/

#add_edit_application_dialog h2
{
  font-size: 1.2em;
  margin-bottom: 20px;
}

#add_edit_application_dialog .add_application
{
  width: 110px;
}

/*--- generic formrow/choices ---*/

.choices
{
  margin-top: 20px;
  text-align: center;
}

.choices .save,
.choices .confirm,
.choices .cancel,
.choices .delete
{
  background: url(/static/images/alpha/fff_20.png);
  display: inline-block;
  padding: 8px;
  width: 60px;

  .border-radius(4px);
}

.choices .save:hover,
.choices .confirm:hover,
.choices .cancel:hover,
.choices .delete:hover
{
  background: url(/static/images/alpha/fff_40.png);
  cursor: pointer;
}

.choices .save,
.choices .confirm,
.choices .delete
{
  margin-right: 10px;
}

.choices .saved,
.choices .confirmed
{
  width: 110px;
}

.formrow
{
  margin-top: 5px;
}

.formrow.invalid,
.formrow .invalid
{
  color: #d92525;
}

.formrow label
{
  float: left;
  margin-top: 6px;
  width: 33%;
}

.formrow input[type=text],
.formrow input[type=password],
.formrow select
{
  background-color: #fff;
  border: 1px solid #555;
  float: right;
  padding: 4px 6px;
  width: 60%;

  .border-radius(3px);
}

.formrow select
{
  padding: 3px 6px;
  width: auto;
}

/*--- applications ---*/

#applications li
{
  background: url(/static/images/alpha/fff_10.png);
  border: 1px solid #222;
  line-height: 1.3em;
  margin-top: 5px;
  min-height: 40px;
  padding: 0;

  .border-radius(4px);
}

#applications li:hover
{
  background: url(/static/images/alpha/fff_20.png);
}

#applications li:first-child
{
  margin-top: 0;
}

#applications li a
{
  display: block;
  padding: 10px 15px;
}

#applications li .name
{
  float: left;
  font-size: 1.3em;
  font-weight: bold;
}

#applications li img
{
  margin-right: 5px;
  vertical-align: middle;
}

#applications li .name span
{
  vertical-align: middle;
}

#applications li .description
{
  color: #ddd;
  float: right;
  font-size: 0.9em;
  margin-top: 2px;
}

#applications #add_application
{
  display: none;
}

.f_settings_mode #applications #add_application
{
  background: url(/static/images/alpha/fff_20.png);
  border: 2px dashed #ddd;
  cursor: pointer;
  display: block;
  margin: 10px 5px 5px;
  opacity: 1;
  padding: 7px;
  text-align: center;

  .border-radius(2px);
}

/*--- episodes list ---*/

ul.episodes li
{
  background: url(/static/images/alpha/fff_10.png);
  border: 1px solid #222;
  font-size: 0.9em;
  line-height: 1.3em;
  margin-top: 5px;
  position: relative;

  .border-radius(4px);
}

ul.episodes li:first-child
{
  margin-top: 0;
}

ul.episodes li:hover
{
  background: url(/static/images/alpha/fff_20.png);
  cursor: pointer;
}

ul.episodes .inner
{
  padding: 5px 107px 5px 15px;
  .border-radius(4px);
}

ul.episodes li.watched .inner
{
  border-left: 3px solid #ccc;
  padding-left: 12px;
}

ul.episodes h3
{
  font-size: 1.2em;
  margin-top: 6px;
}

ul.episodes p
{
  color: #ccc;
}

ul.episodes .title
{
  margin-bottom: 6px;
}

ul.episodes img
{
  position: absolute;
  right: 5px;
  top: 5px;
  .box-shadow(#222, 0, 0, 2px);
}

/*--- currently playing ---*/

#currently_playing
{
  background: url(/static/images/alpha/000_80.png);
  bottom: 0;
  left: 0;
  min-width: 900px;
  padding: 20px;
  position: fixed;
  right: 0;

  .box-shadow(#222, 0, 0, 10px);
}

#currently_playing .item_info
{
  float: left;
  line-height: 1.5em;
  width: 400px;
}

#currently_playing .item_info .show:hover,
#currently_playing .item_info .season:hover
{
  border-bottom: 1px solid #555;
  cursor: pointer;
}

#currently_playing .item_info .separator
{
  margin: 0 3px;
}

#currently_playing .controls
{
  margin: 0 auto;
  width: 80px;
}

#currently_playing .controls .play_pause,
#currently_playing .controls .stop
{
  background: #111 url(/static/images/player_sprite.png) no-repeat 11px 11px;
  border: 1px solid #555;
  cursor: pointer;
  float: left;
  height: 33px;
  text-indent: -9999px;
  width: 33px;

  .border-radius(20px);
}

#currently_playing .controls .stop
{
  background-position: 8px -28px;
  margin-right: 10px;
}

#currently_playing .controls .play_pause:hover,
#currently_playing .controls .stop:hover
{
  background-color: #333;
}

#currently_playing .progress
{
  float: right;
  font-size: 0.9em;
  height: 40px;
  position: relative;
  width: 400px;
}

#currently_playing .progress .current
{
  bottom: 8px;
  left: 0;
  position: absolute;
}

#currently_playing .progress .total
{
  bottom: 8px;
  right: 0;
  position: absolute;
}

#currently_playing .progress .bar
{
  border: 1px solid #777;
  height: 5px;
  margin-top: 8px;
  width: 398px;
  .border-radius(3px);
}

#currently_playing .progress .bar .inner
{
  background-color: #eee;
  height: 5px;
}

#currently_playing .synopsis
{
  display: none;
}

/*--- trakt ---*/

#trakt > .inner
{
  margin-top: -5px;
}

#trakt .overview
{
  color: #ccc;
}

#trakt .overview strong
{
  color: #fff;
}

#trakt h3
{
  color: #eee;
  font-weight: normal;
}

#trakt .shouts li
{
  font-size: 0.9em;
  line-height: 1.2em;
  margin-top: 10px;
  position: relative;
}

#trakt .shouts .avatar
{
  left: 0;
  position: absolute;
  top: 20px;
}

#trakt .shouts .shout
{
  background: url(/static/images/alpha/fff_10.png);
  border: 1px solid #222;
  line-height: 1.3em;
  margin-left: 25px;
  padding: 5px;

  .border-radius(4px);
}

#trakt .shouts li.me .shout
{
  background: url(/static/images/alpha/lightblue_30.png);
}

#trakt .shouts + #add_shout
{
  margin-top: 20px;
}

#trakt #add_shout h3
{
  margin-bottom: 10px;
}

#trakt #add_shout textarea
{
  background: url(/static/images/alpha/fff_20.png);
  border: none;
  color: #ccc;
  display: block;
  font-size: 0.9em;
  height: 55px;
  width: 100%;

  .border-radius(2px);
}

#trakt #add_shout .submit_wrapper.xhrloading
{
  background: url(/static/images/xhrloading.gif) no-repeat 210px 11px;
}

#trakt #add_shout .submit
{
  background: url(/static/images/alpha/fff_20.png);
  border: 1px solid #222;
  float: right;
  font-size: 0.9em;
  margin-top: 5px;
  padding: 4px 12px;

  .border-radius(2px);
}

#trakt #add_shout .submit:hover
{
  background: url(/static/images/alpha/fff_40.png);
  cursor: pointer;
}

#trakt #add_shout .submit_wrapper p
{
  float: left;
  font-size: 0.9em;
  margin-top: 10px;
}

/*--- generic module ---*/

.module.generic > .inner
{
  color: #ccc;
  line-height: 1.3em;
  padding: 0 15px 15px;
}

.module.generic > .inner p
{
  margin-top: 5px;
}

.module.generic > .inner p strong
{
  color: #fff;
}

.module.generic > .inner p:first-child
{
  margin-top: 0;
}

/* generic bar */

.module .bar
{
  border: 1px solid #777;
  height: 5px;
  margin-bottom: 17px 0 6px;

  .border-radius(3px);
}

.module .bar .inner
{
  background-color: #eee;
  height: 5px;
}

/*--- SABnzbd+ ---*/

#sabnzbd
{
  position: relative;
}

#sabnzbd > .inner
{
  line-height: 1.3em;
  padding: 0 15px 15px;
}

#sabnzbd .speed
{
  background: url(/static/images/alpha/fff_10.png);
  border: 1px solid #222;
  padding: 4px 8px 2px;
  position: absolute;
  right: 20px;
  top: 14px;

  .border-radius(4px);
}

#sabnzbd .sab_speed
{
	background-color:transparent;
	color:white;
	border:none;
	text-align:right;
}
#sabnzbd .inner #status
{
  padding: 4px 8px 2px;
  position: absolute;
  top: 14px;
  left: 40%;
}
#sabnzbd .status
{
	cursor: pointer;
}

#sabnzbd .sab_speed:hover, #sabnzbd .sab_speed:focus
{
	background-color:white;
	color: black;
	border:none;
}

#sabnzbd td.extra_name
{
	overflow: hidden;
	white-space:nowrap;
	font-size: smaller;
}
.f_settings_mode #sabnzbd .speed
{
  display: none;
}

#sabnzbd .bar
{
  margin-top: 17px;
  margin-bottom: 5px;
}

#sabnzbd .remaining
{
  float: left;
  font-size: 0.9em;
}

#sabnzbd .percentage_complete
{
  float: right;
  font-size: 0.9em;
  margin: 0;
}

/*--- disk space ---*/

#diskspace li
{
  margin-top: 15px;
}

#diskspace li:first-child
{
  margin-top: 0;
}

#diskspace .path
{
  float: left;
}

#diskspace .stats
{
  float: right;
}

#diskspace .bar
{
  margin-top: 3px;
}

#diskspace #add_disk
{
  display: none;
}

.f_settings_mode #diskspace #add_disk
{
  background: url(/static/images/alpha/fff_20.png);
  border: 2px dashed #ddd;
  cursor: pointer;
  display: block;
  margin: 10px 5px 5px;
  opacity: 1;
  padding: 7px;
  text-align: center;

  .border-radius(2px);
}

.f_settings_mode #diskspace li:hover
{
  background: url(/static/images/alpha/fff_20.png);
  cursor: pointer;
}

/* add/edit disk dialog */

#add_edit_disk_dialog h2
{
  font-size: 1.2em;
  margin-bottom: 20px;
}

/*--- media library ---*/

#library
{
  position: relative;
}

#library h2
{
  padding-right: 55px;
}

#library .message
{
  margin: -7px 15px 10px;
}

#library ul
{
  max-height: 196px;
  overflow: auto;
}

#library li,
#library .back
{
  background: url(/static/images/alpha/fff_10.png);
  border: 1px solid #222;
  cursor: pointer;
  line-height: 1.3em;
  margin-top: 5px;
  padding: 5px 15px;

  .border-radius(4px);
}

.f_settings_mode #library .back
{
  display: none;
}

#library li
{
  padding-right: 28px;
  position: relative;
}

#library li:hover,
#library .back:hover
{
  background: url(/static/images/alpha/fff_20.png);
}

#library li:first-child
{
  margin-top: 0;
}

#library li .xhrloading
{
  position: absolute;
  right: 5px;
  top: 6px;
}

#library .back
{
  color: #ccc;
  font-size: 1.2em;
  position: absolute;
  margin-top: 0;
  padding: 3px 15px;
  right: 5px;
  top: 12px;
}

#library .back.xhrloading
{
  background: url(/static/images/xhrloading.gif) no-repeat center center;
  text-indent: -9999px;
}

/*--- recently added ---*/

#recently_added .problem
{
  margin: -7px 15px 15px;
}

/*--- expand ---*/

.expand
{
  text-decoration: none;
}

/*--- view more ---*/

.view_older,
.view_newer
{
  background: url(/static/images/alpha/fff_10.png);
  border: 1px solid #222;
  color: #ccc;
  display: block;
  float: left;
  font-size: 1.2em;
  margin-top: 5px;
  padding: 2px 14px;
  position: relative;
  text-align: center;

  .border-radius(4px);
}

.view_older
{
  float: right;
}

.view_older:hover,
.view_newer:hover
{
  background: url(/static/images/alpha/fff_20.png);
}


some styling tweaks to the recently added module

fatal: unable to access 'https://github.com/mboeru/maraschino.git/': The requested URL returned error: 403


Fix hidden of sidebar toggle button

Fix hidden of sidebar toggle button

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/sonatra/sonatra-theme-gluon.git/'


Update border radius of panel heading and footer for panel main