bug 942160 turning off max-width on table images

@import "../styleguide/styleguide.less";

.blue-circle-list() {
    ol {
        clear: left;
        list-style-type: none;
        padding: 0;
        li {
            position: relative;
            margin: 5px 0;
            padding: 5px 0 5px 40px;
            img {
                margin-top: @baseLine;
                margin-bottom: @baseLine;
            }
        }
        li:before {
            position: absolute;
            content: " ";
            display: block;
            height: 40px;
            width: 40px;
            top: 0;
            left: 0;
            background: transparent url(/media/img/styleguide/products/firefoxos/ol-list.png) no-repeat 0 0;
        }
        li:nth-child(2):before {
            background-position: 0 -47px;
        }
        li:nth-child(3):before {
            background-position: 0 -96px;
        }
        li:nth-child(4):before {
            background-position: 0 -145px;
        }
    }
}

.figure() {
    .span_guide(4);
    margin-top: @baseLine;
    margin-bottom: (2 * @baseLine);
    figcaption {
        color: @darkThemeText;
        margin: (@baseLine / 2) auto;
    }
}

.top-figcaption {
    font-family: 'Open Sans Light';
    font-size: 16px;
    color: #eee;
}

/* {{{ Firefox OS Guidelines */

.firefox-os-guidelines {
    #basics,
    #list,
    #examples {
        .clearfix;
        h2, p, ol {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
    }
    #basics {
        ol {
            list-style-type: none;
            li {
                margin: 0;
                padding: 0;
                a {
                    color: #fff;
                }
            }
        }
    }
    #list {
        .blue-circle-list();
    }
    figure {
        .figure();
    }
}

/* }}} */
/* {{{ Firefox OS Action Icons */

.firefox-os-action-icons {
    #content_area {
        h3 {
            font-size: 24px;
        }
    }
    .swatch-card {
        .span_guide(6);
        margin-bottom: @baseLine * 1.5;
        h4 {
            small {
                font-size: @smallFontSize;
                .open-sans;
                letter-spacing: normal;
                display: block;
            }
        }
        .swatch {
            display: table-cell;
            vertical-align: bottom;
            padding: 6px;
            border: 1px solid #797d80;
            span {
                background-color: #000;
                display: table-cell;
                width: 110px;
                height: 110px;
                vertical-align: bottom;
                padding: 5px;
            }
        }
    }
    #swatch-standard {
        .swatch span {
            background-color: #fff;
            color: @textColorPrimary;
        }
    }
    #swatch-dark {
        .swatch span { background-color: #2c393b; }
    }
    #swatch-favorite {
        .swatch span { #gradient > .vertical(#fccb00, #ff9500); }
    }
    #swatch-mark {
        .swatch span { background-color: #ec1313; }
    }
    figure {
        figcaption {
            color: @darkThemeText;
            margin: 0 auto @baseLine auto;
        }
    }
    h4 {
        font-size: 20px;
    }
    #basics {
        .divider-dark;
        .clearfix;
        .intro {
            .span_guide(12);
            h2 {
                margin-bottom: @baseLine;
            }
            p {
                margin-bottom: @baseLine;
            }
        }
        #color,
        #shadow {
            h3 {
                .span_guide(12);
                margin-bottom: @baseLine;
            }
        }
        #shadow {
            .headers,
            .buttons,
            .light {
                .span_guide(6);
                figure {
                    width: auto;
                    margin: 0 auto @baseLine auto;
                    img {
                        float: left;
                        .span_guide(2);
                        margin-left: 0;
                    }
                    div {
                        .span_guide(2);
                        margin-right: 0;
                        padding-top: 15px;
                        li {
                            list-style-type: none;
                            margin-left: 0;
                            font-size: @smallFontSize;
                            color: @darkThemeText;
                        }
                    }
                }
            }
            .light {
                clear: left;
            }
        }
    }
    #design {
        .divider-dark;
        .clearfix;
        h2 {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
        .intro {
            .span_guide(12);
        }
    }
    #conventions {
        .divider-dark;
        .clearfix;
        h2 {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
        .intro {
            .span_guide(12);
            margin-bottom: @baseLine * 2;
            p { margin-bottom: 0; }
        }
        .sub-section {
            .clearfix();
            margin-bottom: @baseLine * 2;
            p,
            h3 {
                .span_guide(12);
                margin-bottom: @baseLine / 2;
            }
        }
        #line-weights {
            img { margin-top: @baseLine / 2; }
        }
        #arrows {
            .clearfix;
            figure {
                .span_guide(2);
                text-align: center;
                img {
                    margin: 0 auto;
                }
                small {
                    display: block;
                }
                &#arrows-transfer {
                    .span_guide(4);
                }
            }
        }
    }
    #blocks {
        .divider-dark;
        .clearfix;
        h2 {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
        .intro {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
        figure {
            .span_guide(2);
            text-align: center;
            img {
                margin: 0 auto;
            }
            &.first {
                margin-left: 0;
            }
        }
        .common-icons {
            .clearfix;
            .span_guide(9);
            margin-bottom: @baseLine * 2;
        }
    }
    #examples {
        .clearfix;
        .divider-dark;
        margin-bottom: @baseLine * 2;
        h2 {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
        figure {
            .figure();
        }
    }
}

/* }}} */
/* {{{ Firefox OS App Icons */

.firefox-os-icons {
    #basics {
        .divider-dark;
        .clearfix;
        h2 {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
        #shape,
        #shadow {
            p {
                .span_guide(12);
                margin-bottom: @baseLine;
            }
        }
    }
    #silhouette {
        .clearfix;
        .divider-dark;
        h2 {
            margin-bottom: @baseLine;
        }
        h3,
        .intro {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
        #do,
        #do-not {
            clear: both;
            overflow: auto;
            margin-bottom: @baseLine;
        }
    }
    #circle {
        .clearfix;
        .divider-dark;
        clear: both;
        .intro,
        h2 {
            margin-bottom: @baseLine;
        }
        h3 {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
        #circle-c {
            p {
                .span_guide(12);
            }
        }
    }
    #examples {
        .clearfix;
        .divider-dark;
        h2 {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
        div {
            clear: both;
        }
    }
    #downloads {
        .clearfix;
        .divider-dark;
    }
    #guidelines {
        p {
            .span_guide(12);
        }
    }
    figure {
        .figure();
        .span_guide(3);
    }
}

/* }}} */
/* {{{ Firefox OS Backgrounds */

.firefox-os-backgrounds {
    #basics,
    #usage_examples {
        .divider-dark;
        .clearfix;
        h2, p, ol {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
        .short-list {
            margin-bottom: 0;
            font-weight: bold;
        }
    }
    #usage_buttons,
    #utilitarian_screens,
    #usage_examples {
        h2, h3 {
            .span_guide(12);
            margin: 20px 10px;
        }
    }
    figure {
        .figure();
    }
}

/* }}} */
/* {{{ Firefox OS Buttons */

.firefox-os-buttons {
    #basics,
    #action_buttons,
    #list_buttons,
    #special_buttons,
    #usage_examples,
    #do_dont {
        .divider-dark;
        .clearfix;
        h2, h3, p {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
    }
    #action_buttons,
    #list_buttons,
    #special_buttons {
        img {
            margin: 20px 0 50px 10px;
        }
    }
    #list_buttons {
        .blue-circle-list();
    }
    #do_dont {
        h3.dont {
            margin-top: (2 * @baseLine);
        }
    }
    figure {
        .figure();
    }
}

/* }}} */
/* {{{ Firefox OS Color Palette */

.firefox-os-color-palette {
    #basics,
    #main_colors,
    #all_colors,
    #recommended_gradients,
    #examples {
        .divider-dark;
        .clearfix;
        h2, h3 {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
    }
    #basics p,
    #recommended_gradients p {
        .span_guide(12);
    }
    #recommended_gradients h3,
    #examples h3 {
        font-size: @baseLine;
        margin-top: 40px;
    }
    #main_colors,
    #all_colors {
        .swatch-card {
            .span_guide(2);
            .swatch {
                float: none;
                display: table-cell;
                vertical-align: bottom;
                padding: 6px;
                border: 1px solid #797d80;
                span {
                    background-color: #000;
                    display: table-cell;
                    width: 110px;
                    height: 110px;
                    vertical-align: bottom;
                    padding: 5px;
                }
            }
            p {
                color: #9a9ea1;
                margin-top: 10px;
            }
        }
        #swatch_00aacc .swatch span { background-color: #00aacc; }
        #swatch_ff4e00 .swatch span { background-color: #ff4e00; }
        #swatch_cd6723 .swatch span { background-color: #cd6723; }
        #swatch_b90000 .swatch span { background-color: #b90000; }
        #swatch_5f9b0a .swatch span { background-color: #5f9b0a; }
        #swatch_000000 .swatch span { background-color: #000000; }
        #swatch_333333 .swatch span { background-color: #333333; }
        #swatch_2c393b .swatch span { background-color: #2c393b; }
        #swatch_f4f4f4 .swatch span { background-color: #f4f4f4; color: #000; }
        #swatch_eaeae7 .swatch span { background-color: #eaeae7; color: #000; }
        #swatch_000000 .swatch span { background-color: #000000; }
        #swatch_333333 .swatch span { background-color: #333333; }
        #swatch_4d4d4d .swatch span { background-color: #4d4d4d; }
        #swatch_5f5f5f .swatch span { background-color: #5f5f5f; }
        #swatch_858585 .swatch span { background-color: #858585; }
        #swatch_a6a6a6 .swatch span { background-color: #a6a6a6; }
        #swatch_c7c7c7 .swatch span { background-color: #c7c7c7; color: #000; }
        #swatch_e7e7e7 .swatch span { background-color: #e7e7e7; color: #000; }
        #swatch_eeeeee .swatch span { background-color: #eeeeee; color: #000; }
        #swatch_f4f4f4 .swatch span { background-color: #f4f4f4; color: #000; }
        #swatch_ffffff .swatch span { background-color: #ffffff; color: #000; }
        #swatch_eaeae7 .swatch span { background-color: #eaeae7; color: #000; }
        #swatch_008eab .swatch span { background-color: #008eab; }
        #swatch_00aacc .swatch span { background-color: #00aacc; }
        #swatch_00caf2 .swatch span { background-color: #00caf2; }
        #swatch_b2f2ff .swatch span { background-color: #b2f2ff; color: #000; }
        #swatch_820000 .swatch span { background-color: #820000; }
        #swatch_b90000 .swatch span { background-color: #b90000; }
        #swatch_ff4e00 .swatch span { background-color: #ff4e00; }
        #swatch_cd6723 .swatch span { background-color: #cd6723; }
        #swatch_4b780a .swatch span { background-color: #4b780a; }
        #swatch_1c2224 .swatch span { background-color: #1c2224; }
        #swatch_222b2d .swatch span { background-color: #222b2d; }
        #swatch_2c393b .swatch span { background-color: #2c393b; }
        .newrow {
            clear: left;
        }
    }
    figure {
        .figure();
        position: relative;
        .color-top,
        .color-bottom {
            position: absolute;
            top: 40px;
            left: 15px;
            color: #fff;
        }
        .color-bottom {
            top: 110px;
        }
        &.light {
            .color-top,
            .color-bottom {
                color: #000;
            }
        }
    }
    #recommended_gradients figure {
        .span_guide(2);
    }
}

/* }}} */
/* {{{ Firefox OS Headers */

.firefox-os-headers {
    #basics,
    #elements,
    #do_dont,
    #examples {
        .divider-dark;
        .clearfix;
        h2, h3, p, ol {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
    }
    #elements {
        img.elements {
            margin: 0 10px 20px 10px;
        }
        .blue-circle-list();
    }
    figure {
        .figure();
    }
}

/* }}} */
/* {{{ Firefox OS Switcher */

.firefox-os-switcher {
    #basics,
    #check_boxes,
    #radio_buttons,
    #toggle_buttons,
    #ticks,
    #sliders_handlers,
    #examples {
        .divider-dark;
        .clearfix;
        h2, p {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
        h5 {
            margin-bottom: @baseLine;
        }
        .switcher-example {
            .span_guide(4);
            p {
                margin-left: 0;
            }
            figure {
                img {
                    display: inline-block;
                    vertical-align: middle;
                    margin-bottom: @baseLine;
                }
                figcaption {
                    display: inline-block;
                    vertical-align: middle;
                    margin-left: (@baseLine / 2);
                    margin-bottom: @baseLine;
                }
            }
        }
    }
    #sliders_handlers {
        .switcher-example {
            .span_guide(6);
        }
    }
    #examples {
        figure {
            .figure();
        }
    }
}

/* }}} */
/* {{{ Firefox OS Input */

.firefox-os-inputareas {
    #basics,
    #input_areas,
    #search_areas,
    #form_fields,
    #examples {
        .divider-dark;
        .clearfix;
        h2, p {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
    }
    figure {
        .figure();
    }
    figure.newrow {
        clear: left;
    }
    #input_areas,
    #search_areas,
    #form_fields {
        figcaption {
            .top-figcaption;
        }
    }
    #search_areas figure,
    #form_fields figure {
        margin-top: 0;
        margin-bottom: (@baseLine /2);
    }
    #form_fields .column-group {
        float: left;
        width: 320px;
    }
}

/* }}} */
/* {{{ Firefox OS TabBar */

.firefox-os-tabbar {
    #basics,
    #tabbar,
    #toolbar,
    #filters,
    #examples {
        .divider-dark;
        .clearfix;
        h2, p {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
    }
    figure {
        .span_guide(4);
        margin-top: @baseLine;
        margin-bottom: (2 * @baseLine);
        figcaption {
            color: @darkThemeText;
            margin: (@baseLine / 2) auto;
        }
        &.newrow {
            clear: left;
        }
    }
    #tabbar img {
        margin: 20px 0 50px 10px;
    }
    #toolbar figure {
        margin-top: 0;
        margin-bottom: (@baseLine /2);
        h5 {
            margin-top: @baseLine;
        }
    }
    #filters {
        figcaption {
            .top-figcaption;
        }
    }
}

/* }}} */
/* {{{ Firefox OS Typeface */

.firefox-os-typeface {
    #basics {
        .divider-dark;
        .clearfix;
        h2, p {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
        #fira_sans {
            .span_guide(12);
            margin-top: @baseLine;
            h3 {
                font-size: @baseLine;
                margin-top: @baseLine * 2;
                padding-bottom: 10px;
                border-bottom: 1px #04c1e7 solid;
            }
            p {
                font-size: 36px;
            }
        }
    }
    #text_styles {
        .clearfix;
        .divider-dark;
        h2, p, table {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
        table {
            margin-top: @baseLine * 2;
            margin-bottom: @baseLine * 3;
            border-collapse: separate;
            border-spacing: 2px;
            border: 1px #0fabca solid;
            th, td {
                padding: 20px;
                border-top: 0;
            }
            td {
                border-top: 1px #0fabca solid;
                img {
                    max-width: none;
                }
            }
        }
    }
    #examples {
        .clearfix;
        .divider-dark;
        h2, p, img {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
        img {
            margin-bottom: @baseLine * 3;
        }
    }
    #converting {
        .clearfix;
        .divider-dark;
        h2, h3, p {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
        h3 {
            font-size: @baseLine;
        }
        table {
            .span_guide(6);
            margin-bottom: @baseLine * 2;
            border: 1px #0fabca solid;
            th {
                font-weight: bold;
                text-align: center;
                padding: 20px;
                border-top: 0;
            }
            td {
                text-align: center;
                padding: 20px;
                border-top: 1px #0fabca solid;
            }
            .equal {
                color: #0fabca;
            }
        }
    }
    #downloads .download-group {
        .span-all();
    }
}

/* }}} */
/* {{{ Firefox OS Lists */

.firefox-os-lists {
    #basics,
    #common_lists,
    #notifications,
    #overlays,
    #settings,
    #drawer,
    #buttons,
    #examples {
        .divider-dark;
        .clearfix;
        h2, p {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
    }
    figure {
       .figure();
    }
    #common_lists,
    #notifications,
    #overlays,
    #settings,
    #drawer,
    #buttons {
        figure {
            .span_guide(7);
            margin-top: @baseLine;
            margin-bottom: (2 * @baseLine);
            &.right {
                .span_guide(5);
                margin-top: @baseLine;
                margin-bottom: (2 * @baseLine);
                img {
                    max-width: none;
                }
            }
        }
        figcaption {
            .top-figcaption;
        }
    }
    #common_lists {
        figure.right img {
            margin-left: -77px;
        }
        img.common-default,
        img.common-events {
            padding-top: 14px;
        }
        img.common-narrow {
            padding-top: 17px;
        }
    }
    #notifications {
        figure.right img {
            margin-left: -77px;
        }
        img.notifications-notifications {
            padding-top: 12px;
        }
    }
    #settings {
        figure.right img {
            margin-left: -91px;
        }
        img.settings-settings {
            padding-top: 12px;
        }
    }
    #drawer {
        figure.right img {
            margin-left: -127px;
        }
        img.drawer-drawer {
            padding-top: 6px;
        }
    }
    #buttons {
        figure {
            .span_guide(12);
            text-align: center;
        }
        img {
            margin: auto auto @baseLine auto;
        }
        .blue-circle-list();
    }
}

/* }}} */

#downloads {
    .clearfix;
    .intro {
        .span_guide(12);
    }
    .download-group {
        .span_guide(3);
        p {
            margin-bottom: 0;
        }
    }
    #icon-circle {
        .span_guide(4);
    }
    .css-link {
        .span_guide(12);
    }

}

@import "../styleguide/styleguide.less";

.blue-circle-list() {
    ol {
        clear: left;
        list-style-type: none;
        padding: 0;
        li {
            position: relative;
            margin: 5px 0;
            padding: 5px 0 5px 40px;
            img {
                margin-top: @baseLine;
                margin-bottom: @baseLine;
            }
        }
        li:before {
            position: absolute;
            content: " ";
            display: block;
            height: 40px;
            width: 40px;
            top: 0;
            left: 0;
            background: transparent url(/media/img/styleguide/products/firefoxos/ol-list.png) no-repeat 0 0;
        }
        li:nth-child(2):before {
            background-position: 0 -47px;
        }
        li:nth-child(3):before {
            background-position: 0 -96px;
        }
        li:nth-child(4):before {
            background-position: 0 -145px;
        }
    }
}

.figure() {
    .span_guide(4);
    margin-top: @baseLine;
    margin-bottom: (2 * @baseLine);
    figcaption {
        color: @darkThemeText;
        margin: (@baseLine / 2) auto;
    }
}

.top-figcaption {
    font-family: 'Open Sans Light';
    font-size: 16px;
    color: #eee;
}

/* {{{ Firefox OS Guidelines */

.firefox-os-guidelines {
    #basics,
    #list,
    #examples {
        .clearfix;
        h2, p, ol {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
    }
    #basics {
        ol {
            list-style-type: none;
            li {
                margin: 0;
                padding: 0;
                a {
                    color: #fff;
                }
            }
        }
    }
    #list {
        .blue-circle-list();
    }
    figure {
        .figure();
    }
}

/* }}} */
/* {{{ Firefox OS Action Icons */

.firefox-os-action-icons {
    #content_area {
        h3 {
            font-size: 24px;
        }
    }
    .swatch-card {
        .span_guide(6);
        margin-bottom: @baseLine * 1.5;
        h4 {
            small {
                font-size: @smallFontSize;
                .open-sans;
                letter-spacing: normal;
                display: block;
            }
        }
        .swatch {
            display: table-cell;
            vertical-align: bottom;
            padding: 6px;
            border: 1px solid #797d80;
            span {
                background-color: #000;
                display: table-cell;
                width: 110px;
                height: 110px;
                vertical-align: bottom;
                padding: 5px;
            }
        }
    }
    #swatch-standard {
        .swatch span {
            background-color: #fff;
            color: @textColorPrimary;
        }
    }
    #swatch-dark {
        .swatch span { background-color: #2c393b; }
    }
    #swatch-favorite {
        .swatch span { #gradient > .vertical(#fccb00, #ff9500); }
    }
    #swatch-mark {
        .swatch span { background-color: #ec1313; }
    }
    figure {
        figcaption {
            color: @darkThemeText;
            margin: 0 auto @baseLine auto;
        }
    }
    h4 {
        font-size: 20px;
    }
    #basics {
        .divider-dark;
        .clearfix;
        .intro {
            .span_guide(12);
            h2 {
                margin-bottom: @baseLine;
            }
            p {
                margin-bottom: @baseLine;
            }
        }
        #color,
        #shadow {
            h3 {
                .span_guide(12);
                margin-bottom: @baseLine;
            }
        }
        #shadow {
            .headers,
            .buttons,
            .light {
                .span_guide(6);
                figure {
                    width: auto;
                    margin: 0 auto @baseLine auto;
                    img {
                        float: left;
                        .span_guide(2);
                        margin-left: 0;
                    }
                    div {
                        .span_guide(2);
                        margin-right: 0;
                        padding-top: 15px;
                        li {
                            list-style-type: none;
                            margin-left: 0;
                            font-size: @smallFontSize;
                            color: @darkThemeText;
                        }
                    }
                }
            }
            .light {
                clear: left;
            }
        }
    }
    #design {
        .divider-dark;
        .clearfix;
        h2 {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
        .intro {
            .span_guide(12);
        }
    }
    #conventions {
        .divider-dark;
        .clearfix;
        h2 {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
        .intro {
            .span_guide(12);
            margin-bottom: @baseLine * 2;
            p { margin-bottom: 0; }
        }
        .sub-section {
            .clearfix();
            margin-bottom: @baseLine * 2;
            p,
            h3 {
                .span_guide(12);
                margin-bottom: @baseLine / 2;
            }
        }
        #line-weights {
            img { margin-top: @baseLine / 2; }
        }
        #arrows {
            .clearfix;
            figure {
                .span_guide(2);
                text-align: center;
                img {
                    margin: 0 auto;
                }
                small {
                    display: block;
                }
                &#arrows-transfer {
                    .span_guide(4);
                }
            }
        }
    }
    #blocks {
        .divider-dark;
        .clearfix;
        h2 {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
        .intro {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
        figure {
            .span_guide(2);
            text-align: center;
            img {
                margin: 0 auto;
            }
            &.first {
                margin-left: 0;
            }
        }
        .common-icons {
            .clearfix;
            .span_guide(9);
            margin-bottom: @baseLine * 2;
        }
    }
    #examples {
        .clearfix;
        .divider-dark;
        margin-bottom: @baseLine * 2;
        h2 {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
        figure {
            .figure();
        }
    }
}

/* }}} */
/* {{{ Firefox OS App Icons */

.firefox-os-icons {
    #basics {
        .divider-dark;
        .clearfix;
        h2 {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
        #shape,
        #shadow {
            p {
                .span_guide(12);
                margin-bottom: @baseLine;
            }
        }
    }
    #silhouette {
        .clearfix;
        .divider-dark;
        h2 {
            margin-bottom: @baseLine;
        }
        h3,
        .intro {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
        #do,
        #do-not {
            clear: both;
            overflow: auto;
            margin-bottom: @baseLine;
        }
    }
    #circle {
        .clearfix;
        .divider-dark;
        clear: both;
        .intro,
        h2 {
            margin-bottom: @baseLine;
        }
        h3 {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
        #circle-c {
            p {
                .span_guide(12);
            }
        }
    }
    #examples {
        .clearfix;
        .divider-dark;
        h2 {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
        div {
            clear: both;
        }
    }
    #downloads {
        .clearfix;
        .divider-dark;
    }
    #guidelines {
        p {
            .span_guide(12);
        }
    }
    figure {
        .figure();
        .span_guide(3);
    }
}

/* }}} */
/* {{{ Firefox OS Backgrounds */

.firefox-os-backgrounds {
    #basics,
    #usage_examples {
        .divider-dark;
        .clearfix;
        h2, p, ol {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
        .short-list {
            margin-bottom: 0;
            font-weight: bold;
        }
    }
    #usage_buttons,
    #utilitarian_screens,
    #usage_examples {
        h2, h3 {
            .span_guide(12);
            margin: 20px 10px;
        }
    }
    figure {
        .figure();
    }
}

/* }}} */
/* {{{ Firefox OS Buttons */

.firefox-os-buttons {
    #basics,
    #action_buttons,
    #list_buttons,
    #special_buttons,
    #usage_examples,
    #do_dont {
        .divider-dark;
        .clearfix;
        h2, h3, p {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
    }
    #action_buttons,
    #list_buttons,
    #special_buttons {
        img {
            margin: 20px 0 50px 10px;
        }
    }
    #list_buttons {
        .blue-circle-list();
    }
    #do_dont {
        h3.dont {
            margin-top: (2 * @baseLine);
        }
    }
    figure {
        .figure();
    }
}

/* }}} */
/* {{{ Firefox OS Color Palette */

.firefox-os-color-palette {
    #basics,
    #main_colors,
    #all_colors,
    #recommended_gradients,
    #examples {
        .divider-dark;
        .clearfix;
        h2, h3 {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
    }
    #basics p,
    #recommended_gradients p {
        .span_guide(12);
    }
    #recommended_gradients h3,
    #examples h3 {
        font-size: @baseLine;
        margin-top: 40px;
    }
    #main_colors,
    #all_colors {
        .swatch-card {
            .span_guide(2);
            .swatch {
                float: none;
                display: table-cell;
                vertical-align: bottom;
                padding: 6px;
                border: 1px solid #797d80;
                span {
                    background-color: #000;
                    display: table-cell;
                    width: 110px;
                    height: 110px;
                    vertical-align: bottom;
                    padding: 5px;
                }
            }
            p {
                color: #9a9ea1;
                margin-top: 10px;
            }
        }
        #swatch_00aacc .swatch span { background-color: #00aacc; }
        #swatch_ff4e00 .swatch span { background-color: #ff4e00; }
        #swatch_cd6723 .swatch span { background-color: #cd6723; }
        #swatch_b90000 .swatch span { background-color: #b90000; }
        #swatch_5f9b0a .swatch span { background-color: #5f9b0a; }
        #swatch_000000 .swatch span { background-color: #000000; }
        #swatch_333333 .swatch span { background-color: #333333; }
        #swatch_2c393b .swatch span { background-color: #2c393b; }
        #swatch_f4f4f4 .swatch span { background-color: #f4f4f4; color: #000; }
        #swatch_eaeae7 .swatch span { background-color: #eaeae7; color: #000; }
        #swatch_000000 .swatch span { background-color: #000000; }
        #swatch_333333 .swatch span { background-color: #333333; }
        #swatch_4d4d4d .swatch span { background-color: #4d4d4d; }
        #swatch_5f5f5f .swatch span { background-color: #5f5f5f; }
        #swatch_858585 .swatch span { background-color: #858585; }
        #swatch_a6a6a6 .swatch span { background-color: #a6a6a6; }
        #swatch_c7c7c7 .swatch span { background-color: #c7c7c7; color: #000; }
        #swatch_e7e7e7 .swatch span { background-color: #e7e7e7; color: #000; }
        #swatch_eeeeee .swatch span { background-color: #eeeeee; color: #000; }
        #swatch_f4f4f4 .swatch span { background-color: #f4f4f4; color: #000; }
        #swatch_ffffff .swatch span { background-color: #ffffff; color: #000; }
        #swatch_eaeae7 .swatch span { background-color: #eaeae7; color: #000; }
        #swatch_008eab .swatch span { background-color: #008eab; }
        #swatch_00aacc .swatch span { background-color: #00aacc; }
        #swatch_00caf2 .swatch span { background-color: #00caf2; }
        #swatch_b2f2ff .swatch span { background-color: #b2f2ff; color: #000; }
        #swatch_820000 .swatch span { background-color: #820000; }
        #swatch_b90000 .swatch span { background-color: #b90000; }
        #swatch_ff4e00 .swatch span { background-color: #ff4e00; }
        #swatch_cd6723 .swatch span { background-color: #cd6723; }
        #swatch_4b780a .swatch span { background-color: #4b780a; }
        #swatch_1c2224 .swatch span { background-color: #1c2224; }
        #swatch_222b2d .swatch span { background-color: #222b2d; }
        #swatch_2c393b .swatch span { background-color: #2c393b; }
        .newrow {
            clear: left;
        }
    }
    figure {
        .figure();
        position: relative;
        .color-top,
        .color-bottom {
            position: absolute;
            top: 40px;
            left: 15px;
            color: #fff;
        }
        .color-bottom {
            top: 110px;
        }
        &.light {
            .color-top,
            .color-bottom {
                color: #000;
            }
        }
    }
    #recommended_gradients figure {
        .span_guide(2);
    }
}

/* }}} */
/* {{{ Firefox OS Headers */

.firefox-os-headers {
    #basics,
    #elements,
    #do_dont,
    #examples {
        .divider-dark;
        .clearfix;
        h2, h3, p, ol {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
    }
    #elements {
        img.elements {
            margin: 0 10px 20px 10px;
        }
        .blue-circle-list();
    }
    figure {
        .figure();
    }
}

/* }}} */
/* {{{ Firefox OS Switcher */

.firefox-os-switcher {
    #basics,
    #check_boxes,
    #radio_buttons,
    #toggle_buttons,
    #ticks,
    #sliders_handlers,
    #examples {
        .divider-dark;
        .clearfix;
        h2, p {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
        h5 {
            margin-bottom: @baseLine;
        }
        .switcher-example {
            .span_guide(4);
            p {
                margin-left: 0;
            }
            figure {
                img {
                    display: inline-block;
                    vertical-align: middle;
                    margin-bottom: @baseLine;
                }
                figcaption {
                    display: inline-block;
                    vertical-align: middle;
                    margin-left: (@baseLine / 2);
                    margin-bottom: @baseLine;
                }
            }
        }
    }
    #sliders_handlers {
        .switcher-example {
            .span_guide(6);
        }
    }
    #examples {
        figure {
            .figure();
        }
    }
}

/* }}} */
/* {{{ Firefox OS Input */

.firefox-os-inputareas {
    #basics,
    #input_areas,
    #search_areas,
    #form_fields,
    #examples {
        .divider-dark;
        .clearfix;
        h2, p {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
    }
    figure {
        .figure();
    }
    figure.newrow {
        clear: left;
    }
    #input_areas,
    #search_areas,
    #form_fields {
        figcaption {
            .top-figcaption;
        }
    }
    #search_areas figure,
    #form_fields figure {
        margin-top: 0;
        margin-bottom: (@baseLine /2);
    }
    #form_fields .column-group {
        float: left;
        width: 320px;
    }
}

/* }}} */
/* {{{ Firefox OS TabBar */

.firefox-os-tabbar {
    #basics,
    #tabbar,
    #toolbar,
    #filters,
    #examples {
        .divider-dark;
        .clearfix;
        h2, p {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
    }
    figure {
        .span_guide(4);
        margin-top: @baseLine;
        margin-bottom: (2 * @baseLine);
        figcaption {
            color: @darkThemeText;
            margin: (@baseLine / 2) auto;
        }
        &.newrow {
            clear: left;
        }
    }
    #tabbar img {
        margin: 20px 0 50px 10px;
    }
    #toolbar figure {
        margin-top: 0;
        margin-bottom: (@baseLine /2);
        h5 {
            margin-top: @baseLine;
        }
    }
    #filters {
        figcaption {
            .top-figcaption;
        }
    }
}

/* }}} */
/* {{{ Firefox OS Typeface */

.firefox-os-typeface {
    #basics {
        .divider-dark;
        .clearfix;
        h2, p {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
        #fira_sans {
            .span_guide(12);
            margin-top: @baseLine;
            h3 {
                font-size: @baseLine;
                margin-top: @baseLine * 2;
                padding-bottom: 10px;
                border-bottom: 1px #04c1e7 solid;
            }
            p {
                font-size: 36px;
            }
        }
    }
    #text_styles {
        .clearfix;
        .divider-dark;
        h2, p, table {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
        table {
            margin-top: @baseLine * 2;
            margin-bottom: @baseLine * 3;
            border-collapse: separate;
            border-spacing: 2px;
            border: 1px #0fabca solid;
            th, td {
                padding: 20px;
                border-top: 0;
            }
            td {
                border-top: 1px #0fabca solid;
            }
        }
    }
    #examples {
        .clearfix;
        .divider-dark;
        h2, p, img {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
        img {
            margin-bottom: @baseLine * 3;
        }
    }
    #converting {
        .clearfix;
        .divider-dark;
        h2, h3, p {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
        h3 {
            font-size: @baseLine;
        }
        table {
            .span_guide(6);
            margin-bottom: @baseLine * 2;
            border: 1px #0fabca solid;
            th {
                font-weight: bold;
                text-align: center;
                padding: 20px;
                border-top: 0;
            }
            td {
                text-align: center;
                padding: 20px;
                border-top: 1px #0fabca solid;
            }
            .equal {
                color: #0fabca;
            }
        }
    }
    #downloads .download-group {
        .span-all();
    }
}

/* }}} */
/* {{{ Firefox OS Lists */

.firefox-os-lists {
    #basics,
    #common_lists,
    #notifications,
    #overlays,
    #settings,
    #drawer,
    #buttons,
    #examples {
        .divider-dark;
        .clearfix;
        h2, p {
            .span_guide(12);
            margin-bottom: @baseLine;
        }
    }
    figure {
       .figure();
    }
    #common_lists,
    #notifications,
    #overlays,
    #settings,
    #drawer,
    #buttons {
        figure {
            .span_guide(7);
            margin-top: @baseLine;
            margin-bottom: (2 * @baseLine);
            &.right {
                .span_guide(5);
                margin-top: @baseLine;
                margin-bottom: (2 * @baseLine);
                img {
                    max-width: none;
                }
            }
        }
        figcaption {
            .top-figcaption;
        }
    }
    #common_lists {
        figure.right img {
            margin-left: -77px;
        }
        img.common-default,
        img.common-events {
            padding-top: 14px;
        }
        img.common-narrow {
            padding-top: 17px;
        }
    }
    #notifications {
        figure.right img {
            margin-left: -77px;
        }
        img.notifications-notifications {
            padding-top: 12px;
        }
    }
    #settings {
        figure.right img {
            margin-left: -91px;
        }
        img.settings-settings {
            padding-top: 12px;
        }
    }
    #drawer {
        figure.right img {
            margin-left: -127px;
        }
        img.drawer-drawer {
            padding-top: 6px;
        }
    }
    #buttons {
        figure {
            .span_guide(12);
            text-align: center;
        }
        img {
            margin: auto auto @baseLine auto;
        }
        .blue-circle-list();
    }
}

/* }}} */

#downloads {
    .clearfix;
    .intro {
        .span_guide(12);
    }
    .download-group {
        .span_guide(3);
        p {
            margin-bottom: 0;
        }
    }
    #icon-circle {
        .span_guide(4);
    }
    .css-link {
        .span_guide(12);
    }

}


Update app_drawer.less

Update app_drawer.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/cc-it/odoo_mod.git/'


Added: buttons for v5

Added: buttons for v5

.button {
    background: #555555;
    display: block;
    width: 150px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 14px;
    text-decoration: none;
    color: #DDDDDD;
}

.button:hover {
    color: #FFFFFF;
    background: #444444;
    text-decoration: none;
}

.button.button-small {
    width: 100px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
}

.button.disabled,
.button.disabled:hover {
    background: #777777;
    color: #AAAAAA;
}

.button.button-primary {
    background: #5CB85C;
    color: #FFFFFF;

    &:hover {
        background: #38C049;
    }
}

error: pathspec 'src/CrystalQuartz.Application.Client/app/global/buttons.less' did not match any file(s) known to git


flex vertical and center align sponsors

flex vertical and center align sponsors

fatal: unable to access 'https://github.com/xxronis/athens.meteor.com.git/': The requested URL returned error: 403


improved animations for mobileMenu again (opacity). need to check if this seriously slows down older devices.

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/'


Delete variables.less

Delete variables.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/Elenkan/Elenkan.github.io.git/'


removing padding override from alert close button, as it does not support this properly.

.Alert {
  .Alert-text {
    word-wrap: break-word;

    & pre,
    & code {
      margin: 0;
      padding: 0;
      text-align: left;
    }

    pre {
      color: inherit;
      background-color: inherit;
      border: 0;
    }

    code > pre {
      padding: 10px;
    }
  }
}

.Alert {
  .close {
    padding: 1px 5px;
  }

  .Alert-text {
    word-wrap: break-word;

    & pre,
    & code {
      margin: 0;
      padding: 0;
      text-align: left;
    }

    pre {
      color: inherit;
      background-color: inherit;
      border: 0;
    }

    code > pre {
      padding: 10px;
    }
  }
}


Fix notifications icon alignment

Fix notifications icon alignment

.NotificationsDropdown {
  .Dropdown-menu {
    padding: 0;
    overflow: hidden;

    .NotificationList-content {
      max-height: 70vh;
      overflow: auto;
      padding-bottom: 10px;
    }
  }
  & .Dropdown-toggle .Button-label {
    margin-left: 10px;
  }
}
@media @tablet-up {
  .NotificationsDropdown {
    .Dropdown-menu {
      width: 400px;
    }
    .Dropdown-toggle {
      .Button--icon();
    }
  }
}

.NotificationsDropdown-button.unread .Button-icon {
  display: inline-block;
  border-radius: 12px;
  height: 24px;
  width: 24px;
  text-align: center;
  padding: 2px 0;
  font-weight: bold;
  margin: -2px 0;
  background: @primary-color;
  color: @body-bg;
  font-size: 13px;
  vertical-align: 0;

  & when (@config-colored-header = true) {
    background: #fff;
  }
}

.NotificationsDropdown {
  .Dropdown-menu {
    padding: 0;
    overflow: hidden;

    .NotificationList-content {
      max-height: 70vh;
      overflow: auto;
      padding-bottom: 10px;
    }
  }
  & .Dropdown-toggle .Button-label {
    margin-left: 10px;
  }
}
@media @tablet-up {
  .NotificationsDropdown {
    .Dropdown-menu {
      width: 400px;
    }
    .Dropdown-toggle {
      .Button--icon();
    }
  }
}

.NotificationsDropdown-button.unread .Button-icon {
  display: inline-block;
  border-radius: 12px;
  height: 24px;
  width: 24px;
  text-align: center;
  padding: 2px 0;
  font-weight: bold;
  margin: -2px 0;
  background: @primary-color;
  color: @body-bg;
  font-size: 13px;

  & when (@config-colored-header = true) {
    background: #fff;
  }
}


Mailtos

Mailtos

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/potogan/smartotels.git/'


photo update

photo update

/* Photo without label */
img.photo {
	max-width:	100%;
	.border-radius(3px);
	border:				1px solid rgba(0,0,0,0.6);
}

/* Photo with label */
div.photo {
	@radius:		3px;
	max-width:		100%;
	.border-radius(@radius);

	border:				1px solid rgba(0,0,0,0.6);

	/* No actions */
	&>img {
		width:		100%;
		.border-radius-custom (@radius, @radius, 0, 0);
	}
	&>a.fancybox{
		width:		100%;
		img {
			width:		100%;
			.border-radius-custom (@radius, @radius, 0, 0);
		}
	}

	/* With actions */
	&>div.actions {
		cursor:		default;
		width:		100%;
		position:	relative;
		&>img {
			width:		100%;
			.border-radius-custom (@radius, @radius, 0, 0);
		}
		&>div {
			position:	absolute;
			top:		6px;
			left:		0;
			display:	none;
		}
		&:hover {
			&>img {
				.opacity(0.4);
			}
			&>div {
				display:	block;
			}
		}
	}

	&>div.text {
		width:		100%;
		padding:	4px;
		text-align:	justify;
		background-color:	rgba(0,0,0,0.6);
		.ellipsis();
		font-size:		11px;
		font-weight:	normal;
		.text-inset(#ffffff, #000000);

		&.transparent {
			background-color:	transparent;
			text-shadow: 	0 0 0 transparent;
			color: 			@default-color;
		}
	}
}

/*
	Grids
	1% margin per axis on each photo (0.5% each side)
*/
.photo-grid {
	width:	100%;
	.grid-2 {
		float:	left;
		width:	49%;
		margin:	0.5% 0.5%;
	}
	.grid-3 {
		float:	left;
		width:	32.33%;
		margin:	0.5% 0.5%;
	}
	.grid-4 {
		float:	left;
		width:	24%;
		margin:	0.5% 0.5%;
	}
	.grid-5 {
		float:	left;
		width:	19%;
		margin:	0.5% 0.5%;
	}
}

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