@import 'includes/mixins';
@import 'includes/grid';

/* mixins applying only to the wiki */
make-wiki-blocks-flat() {
    #wiki-content, #wiki-right, #wiki-left {
        margin-right: 0;
        width: auto !important;
        float: none;
        padding-bottom: ($grid-spacing * 2);
    }
}

enable-toc-toggle() {
    #toc {
        padding: ($grid-spacing / 2) $grid-spacing;

        .toggler {
            pointer-events: auto;
            color: $link-color;

            i {
                display: inline-block;
            }
        }

        .toggle-container {
            display: none;

            .no-js & {
                display: block;
            }
        }
    }
}

/* wiki classes to be extended */
.wiki-block {
    clearfix();
    padding-top: ($grid-spacing * 2);
    margin-top: ($grid-spacing * 2);
    border-top: 1px solid $button-background;
    padding-left: 0;
    padding-right: 0;

    /* translation page is special */

    details summary + & {
        padding-top: $grid-spacing;
        margin-top: 0;
    }

    #trans-version & {
        border: 0;
        padding-top: 0;
    }

    #trans-meta & {
        border: 0;
        padding-top: 0;

        &:last-child {
            margin-bottom: ($grid-spacing * 2);
        }
    }
}

$review-base {
    background: #fbf8e9;
    border-color: #f9f3d9;
    color: $text-color;
}

.wiki-main-content {
    background: #fff;
    min-height: 300px;

    .center {
        remove-center-spacing();
    }

}

/* the subnav and quick link column of the layout */
#wiki-left {
    position: relative;
}

/* Set min height for crumbs and page buttons to avoid jump, when buttons are sticky */
.article-meta{
    min-height: 41px;
}

/* quick links */
.quick-links {
    set-smaller-font-size();
    position: relative;
    margin-bottom: $grid-spacing;

    a {
        color: $text-color;
    }

    .title {
        margin-bottom: 0;
        display: inline-block;
    }

    li {
        position: relative;
        padding-top: $list-item-spacing;
    }

    li li {
        bidi-style(padding-left, 20px, padding-right, 0);
    }

    ul ul { /* hides submenus by default */
        display: none;

        .no-js & {
            display: block;
        }
    }
}

.quick-links li.toggleable a, .quick-links .title, #quick-links-toggle {
    bidi-style(padding-left, 20px, padding-right, 0);
    color: $text-color;
    display: inline-block;
}

.quick-links a, .quick-links .title {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.see-also {
    margin-left: -6px !important;
    padding: 4px 4px 4px 6px !important;
}

.quick-links .see-also{
    background: $light-background-color !important;
    padding-left: 0;
    margin-left: -22px;
    display: inline-block !important;
    padding: 4px 42px;
    width: 100%;
    vendorize(box-sizing, border-box);
}


.quick-links {$selector-icon}, #quick-links-toggle {$selector-icon} {
    bidi-style(left, -6px, right, auto);
    set-font-size($base-font-size);
    position: absolute;
    top: 1px;

    /* don't allow empty paragraphs by CKEditor */
    p, div {
        display: none;
    }

    reverse-link-decoration();
}

/* document review form stuff */
.reviews {
    set-message-base(false);
    set-smaller-font-size();
    @extend $review-base;

    p {
        margin: 0;
    }

    li {
        padding-top: $list-item-spacing;
    }
}

/* display 404 links appropriately */
article, .quick-links {
    a.new {
        color: #900;
    }
}

/* wiki article display */
article {
    position: relative;

    .external-icon:not([href^='https://mdn.mozillademos.org']) {
        white-space: pre-line;

        html[dir='ltr'] &:before, html[dir='rtl'] &:after {
            content: '\f08e';
            font-family: FontAwesome;
            set-font-size(9px);
            display: inline-block;
            opacity: 0.5;
            margin-right: 3px;
        }

        html[dir='rtl'] &:after {
            transform: rotateY(180deg);
        }

        &:hover, &:focus {
            &:before {
                text-decoration: none;
            }
        }
    }

    a {
        text-decoration: none;

        &:hover, &:focus, &:active {
            text-decoration: underline;
        }
    }
}

/* header and draft notices */
.document-head {
    position: relative;
    clear: both;

    h1 {
        margin-bottom: 20px;
    }
}

.contributor-avatars {
    set-smaller-font-size();
    color: #777;
    padding: 10px 10px 6px;
    border-bottom: 1px solid rgb(241, 241, 241);
    border-top: 1px solid rgb(241, 241, 241);
    background: none repeat scroll 0% 0% rgba(234, 239, 243, 0.4);
    margin-top: -20px;
    margin-bottom: 20px;

    ul {
        display: inline;
        opacity: 0.7;
        margin-left: 2px;
        vendorize(transition, opacity .3s ease-in-out);

        &:hover,
        &.focused {
            opacity: 1;
        }

        li {
            margin: 0 5px 4px 0;

            &, .no-js  &.hidden {
                display: inline-block;
            }

            &.hidden {
                display: none;
            }
        }

        a {
            &:focus {
                outline: none;

                img {
                    vendorize(transform, scale(1.7));
                }
            }
        }
    }

    .avatar {
        vertical-align: text-bottom;
        border-radius: 2px;
        max-width: 20px;
        opacity: 0;
        vendorize(transition, all .2s);

        &.loaded {
            opacity: 1;
        }

        &:hover,
        &:focus{
            vendorize(transform, scale(1.7));
        }
    }

    button {
        set-smaller-font-size();
        margin-left: -2px;
        color: #777;
        text-transform: none;
        padding: 5px 0;

        &:hover,
        &:focus {
            color: #4D4E53;
        }
    }
}

/* search navigator near article heading */
.from-search {
    padding-left: ($grid-spacing * 2);

    h1, .from-search-navigate {
        display: inline-block;
    }
    .from-search-previous, .from-search-next {
        display: block;
    }
}

.from-search-previous, .from-search-next {
    position: absolute;
    top: ($grid-spacing * .75) + 2px;
    display: none;
    font-size: 24px;

    &.disabled {
        opacity: 0.3;
    }
}

.from-search-previous {
    left: 0;
}

.from-search-next {
    right: 0;
}

.from-search-navigate {
    set-larger-font-size();
    position: relative;
    color: #ced1d2;
    display: none;
    height: 38px;
    width: $grid-spacing;
    top: 4px;
}

.from-search-navigate-up, .from-search-navigate-down {
    set-smaller-font-size();
    position: absolute;
    left: 0;
}

.from-search-navigate-up {
    top: 0;
}

.from-search-navigate-down {
    bottom: 0;
}

.from-search-toc {
    component-submenu(200px, 1, $button-background, $button-shadow-color)
    set-smaller-font-size();
    border: 1px solid $button-shadow-color;
    left: 66px;
    top: 0;
    z-index: 2;
    color: #888;

    &:before, &:after { /* remove submenu arrows */
        display: none;
    }

    ol {
        list-style-type: decimal;
        padding-left: $grid-spacing;
    }

    a.current {
        color: #888;
        pointer-events: none;
        cursor: default;
    }
}

.redirected-from {
    set-smaller-font-size();
    margin-top: -($grid-spacing);
    font-style: italic;
    opacity: 0.7;
}

/* wiki article cookie crumbs */
.crumbs {
    set-smaller-font-size();
    margin-bottom: ($grid-spacing / 2);

    li {
        bidi-style(margin-right, ($grid-spacing / 2), margin-left, 0);
        display: inline-block;
    }

    a {
        display: block;

        &:after {
            bidi-style(margin-left, 4px, margin-right, 0, true);
            bidi-style(content, '\f054', content, '\f053');
            display: inline-block;
            font-family: FontAwesome;
            text-decoration: none;
            color: #c1c2c4;
            set-font-size(70%);
        }
    }

    reverse-link-decoration();
}

/* edit, language, settings, save, and cancel buttons */
.page-buttons, #page-buttons {
    bidi-value(float, right, left);
    padding: 5px 0;
    width: auto;

    &.fixed {
        overflow-y: inherit;
        z-index: 50;
    }

    > li {
        margin-left: ($grid-spacing / 2);
        display: inline-block;
        position: relative;
        bidi-value(text-align, left, right);

        a, button, input[type='submit'], input[type='button'] {
            set-smaller-font-size();

            &.disabled, &[disabled] {
                opacity: 0.8;
            }
        }

        .transparent {
        	padding-left: 0;
        	padding-right: 0;
        }

        {$selector-icon} {
            set-font-size($base-bump-font-size);
        }
    }

    .submenu {
        @extend $advanced-menu;
    }
}

/* kumascript errors block at the top of an article */
#kumascript-errors {
    ul {
        list-style-type: none;
        padding-left: 0 !important;
    }
}

.kumascript-details {
    padding: $grid-spacing 0;
}

/* wiki summary, usually displays at the top of the article */
.summary {
    background: $light-background-color;
    font-weight: bold;
    padding: $grid-spacing;
    margin-bottom: $grid-spacing;

    prevent-last-child-spacing(p, margin-bottom);
}

/* notice at the top of the article */
.notice {
    set-message-base();
    set-font-size($base-font-size);
    border-width: 2px;
}

/* warning elements */
.warning {
    set-message-base();
    background: rgba(193, 56, 50, 0.85);
    color: #c13832;
    border-color: rgba(0, 0, 0, 0.1);
    color: #fff;
    font-style: italic;
    margin: 0 0 $grid-spacing 0;
    set-font-size($base-font-size);

    pre {
        padding: ($grid-spacing / 2) !important;
        background: none repeat scroll 0 0 rgba(255, 255, 255, 0.7) !important;
    }

    &.warning-review {
        @extend $review-base;

        a,
        a:hover,
        a:visited {
            color: $link-color;
            border-color: $link-color;
        }
    }

}

/* document warnings, bugs, etc. */
div.bug, div.warning, div.overheadIndicator {
    prevent-last-child-bottom-spacing();

    pre {
        color: $text-color;
    }
}

/* page attachments block at the bottom of the article */
#page-attachments-button {
    set-smaller-font-size();
}

/* contributors block at the bottom of the article */
.contributors {
    set-smaller-font-size();
    color: #777;

    {$selector-icon} {
        bidi-style(margin-left, 0, margin-right, $icon-margin);
        bidi-style(margin-right, $icon-margin, margin-left, 0);
    }
}

.contributor-sub {
    padding: 4px 0;
}

/* set minimum heights on main columns */
#wiki-right, #wiki-left, #wiki-content {
    min-height: 1px; /* ensures that when TOC becomes fixed, the column has width */
}

/* tag and file icons under the TOC */
.tag-attach-list {
    position: relative;

    ul, > a {
        set-smaller-font-size();
        display: inline-block;
    }

    ul {
        bidi-style(padding-left, 6px, padding-right, 0);
        display: inline;
        margin-bottom: 0;

        li {
            margin-bottom: 0;
        }
    }

    > a {
        text-decoration: none;
        &:hover {
            text-decoration: underline;
        }
    }
}

.tags {
    li {
        display: inline-block;
        margin-bottom: 7px;
    }
}

.tags a, .tagit li {
    set-smaller-font-size();
    padding: 1px 4px;
    border: 1px solid #cee9f9 !important; /* overrides plugin selector */
    text-decoration: none;
    border-radius: 4px;
    background: $light-background-color !important; /* overrides plugin selector */

    .close {
        color: #cee9f9 !important; /* overrides plugin selector */
    }
}

.tag-list li {
    margin-right: 6px;
}

.tagit li {
    set-font-size($base-font-size);
}

.tagit, .tagit-new {
    border: 0 !important; /* overrides plugin selector */
}

.fixed {
    position: fixed;
    top: 0;
    z-index: 10;
    overflow-y: auto;
}

#toc {
    reverse-link-decoration();
    background: $light-background-color;
    padding: 20px 15px;

    > ol {
        set-smaller-font-size();
    }

    ol ol {
        padding-left: $grid-spacing;
    }

    li {
        padding-top: ($grid-spacing / 2);
        position: relative;

        &:before {
            bidi-value(text-align, left, right);
            bidi-style(left, -($grid-spacing * 1.5), right, auto);

            position: absolute;
            left: -($grid-spacing + ($grid-spacing/2));
            color: #484848;
        }
    }

    .toggler {
        pointer-events: none;
        color: inherit;

        i {
            display: none;
        }
    }

    .title {
        margin-bottom: 0;
    }

    a.title {
        position: relative;
        text-decoration: none;
    }
}

/* adjustments to columns based on show/hide and media query */
#wiki-column-container.wiki-right-closed #wiki-content, #wiki-column-container.wiki-left-closed #wiki-content {
    @extend $column-9;
}

#wiki-column-container.wiki-right-closed.wiki-left-closed {
    #wiki-content {
        @extend $column-all;
        float: none;
        width: auto;
    }

    .column-container-reverse {
        margin-left: 0;
    }
}

.page-tags {
    ul.tagit {
        background: none;
        min-height: 30px;
        margin-bottom: -10px;

        .tagit-label {
            color: #333333;
            font-weight: normal;
        }

        li {
            margin-bottom: -(@margin-bottom);
        }
    }
}

/* ckeditor / content area styles */
.ckeditor-container {
    padding: 6px;
    border: 1px solid #eaeff2;
}

.editor-container {
    clear: both;
}

span.cke_skin_kuma {
    padding: 0 !important;
}

.cke_skin_kuma .cke_toolbox {
    border-width: 0 !important;
    margin: 0 !important;
}

#content-fields {
    clearfix();

    .approved, .localized {
        width: 49%;
    }

    .approved {
        bidi-value(float, left, right);

        .boxed {
            padding-right: 25px;
        }
    }

    .localized {
        bidi-value(float, right, left);
    }

    header {
        clearfix();
        display: block;
        height: 16px;
        margin-bottom: ($grid-spacing / 2);
        padding: 7px 0 14px;
        position: relative;
        z-index: 10;
    }
}

#page-attachments {
    h2 {$selector-icon}, h3 {$selector-icon} {
        @extend $right-icons;
    }
}


/* adjustments for the translation page */
.translate main .center {
    max-width: none;
}

.guide-links{
    float: right;
    margin-top: $grid-spacing;
    padding: 0 4px 2px 0;
    color: #999;
}

/* compare page */
.compare, #revision-list {
    ul, input[type='submit'] {
        set-smaller-font-size();
    }
}

/* legacy overrides */
.topicpage-table .Documentation, .topicpage-table .Community, .topicpage-table .Tools, .topicpage-table .Related_Topics {
    font-family: $site-font-family;
    text-transform: none;
}

/* legacy offline notice */
.offline-notice {
    margin-top: -20px;
    margin-bottom: 20px;
    set-font-size(11px);
    margin-left: 6px;
}

#offline-notice-link {
    color: rgb(153, 153, 153);

    i {
        margin-left: 0;
        margin-right: 4px;
    }
}

/* Page deletion styles */
.delete-document {
    textarea {
        width: 500px;
        max-width: 100%;
        margin-bottom: $grid-spacing;
    }
    label {
        display: block;
    }
}

.parent-suggest-container {
    position: relative;

    &.show {
        .move-lookup-link {
            display: none;
        }

        #parent-suggest-input-container {
            display: block;
            opacity: 1;
            top: -22px;
            left: 0;

            vendorize(transition, unquote('opacity, top .4s'));

        }
    }
}

.move-lookup-link {
    display: inline-block;
    margin-left: ($grid-spacing * 2);
    color: $link-color;
    text-transform: none;

    &:hover {
        text-decoration: underline;
    }
}

.move-descendants-list {
    margin-left: $grid-spacing;
    list-style-type: circle;
}

#parent-suggestion  {
    width: 300px;
}

.warning .move-descendants-list {
    padding: 0 0 $grid-spacing $grid-spacing;
}

#parent-suggest-input-container {
    background: #eaeff2;
    create-gradient(#eaeff2, #d4dde4, top);
    padding: 10px;
    border: 1px solid #d4dde4;
    box-shadow: 0 5px 10px #ccc;
    position: absolute;
    margin-left: $grid-spacing;
    opacity: 0;
    top: -10px;
    left: -90000px;

    generate-arrow(7px);

    &:before {
        border-right: 7px solid #dfe6eb;
        border-left: 0;
        left: -7px;
        top: 20px;
    }
    &:after {
        border-right: 6px solid #dfe6eb;
        border-left: 0;
        left: -6px;
        top: 21px;
    }
}

.move-descendants {
    border: 1px solid #dfe6eb;
    padding: 10px 10px 0 10px;
    background: #eaeff2;
    resize: vertical;
    margin-bottom: $grid-spacing;

    a {
        display: inline-block;
        margin: 0 0 10px 0;
    }
}

/* Revision page */
div.revision-info li {
    list-style-position: inside;
}

#doc-source textarea {
    height: 400px;
    width: 100%;
}

/* Revision history */
.choice-list {
    margin: $grid-spacing 0;

    ul {
        display: inline;
    }

    li {
        display: inline-block;
        list-style: none;
        padding: 0 5px;
        font-weight: bold;
    }
}

#revision-list {
    ul {
        margin: 5px 0;
    }

    li {
        list-style: none;
        padding: 4px 0;

        &:nth-child(odd) {
            background: rgba(170, 160, 130, .1);
        }

        &.current {
            background: rgba(198, 198, 175, .25);
            border-bottom: solid 2px #b8b5a3;
            border-top: solid 2px #b8b5a3;

            div.status {
                color: #223d61;
                font-weight: bold;
            }
        }

        &.rejected div.creator {
            color: #999;
            text-decoration: line-through;
        }
    }

    div.radio {
        display: inline-block;
        text-align: center;
        width: 15px;
    }

    div.prev {
        display: inline-block;
        padding: 0 0 0 10px;
        width: 45px;
    }

    div.date {
        display: inline-block;
        padding: 0 0 0 10px;
        width: 190px;
    }

    div.status {
        display: inline-block;
        width: 80px;

        a {
            font-weight: bold;
        }
    }

    div.creator {
        color: #333;
        display: inline-block;
        width: 175px;
    }

    div.comment {
        display: inline-block;
        width: 460px;
    }

    div.delete {
        display: inline-block;
        text-align: center;
        width: 50px;
    }

    div.compare {
        height: 20px;
        padding: 0 0 0 50px;
    }

    div.compare.top {
        background: transparent url($media-url-dir + 'compare.arrows.png') no-repeat 4px 5px;
        padding-bottom: 5px;
    }

    div.compare.bottom {
        background: transparent url($media-url-dir + 'compare.arrows.png') no-repeat 4px -40px;
        padding-top: 10px;
    }
}

div.note {
    background: rgba(231, 228, 157, 0.25);
    border-color: rgba(231,228,157,0.15);
    border-style: solid;
    border-width: 5px;
    color: rgba(0, 0, 0, 0.65);
    font-style: italic;
    margin-bottom: $grid-spacing;
    padding: 10px 15px;

    prevent-last-child-spacing(p, margin-bottom);
}

/* moreinfo styling */
.moreinfo {
    position: relative;
    padding: $gutter-width $gutter-width $gutter-width 30px;
    margin-bottom: $gutter-width;
    background: #f4f7f8;

    dl {
        margin-bottom: 0;
    }

    dd {
        margin-bottom: 10px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    &:after {
        border-top: $gutter-width solid transparent;
        border-bottom: $gutter-width solid transparent;
        border-left: 15px solid #fff;
        content: '';
        display: block;
        left: 0;
        position: absolute;
        top: 5px;
    }
}

#page-comment {
    input {
        padding-top: 10px;
        padding-bottom: @padding-top;
        width: 98%;
    }
}

#translate-tags {
    bidi-value(float, left, right);

    ul.tagit {
        padding: 0;

        li.tagit-choice {
            padding-right: 10px;
        }
    }
}

#delete-revision {
    label {
        display: block;
        font-size: 16px;
        margin: 15px 0 0;
    }

    textarea {
        height: 80px;
        margin-bottom: 20px;
        width: 90%;
    }
}

/* Classes created by the WYSIWYG */
.twocolumns {
    vendorize(column-count, 2)
}
.threecolumns {
    vendorize(column-count, 3);
}

/* page attachments */
@-moz-keyframes newAttachment {
    0% { background-color: #90ee90; }
    100% { background-color: transparent; }
}
@-webkit-keyframes newAttachment {
    0% { background-color: #90ee90; }
    100% { background-color: transparent; }
}
@keyframes newAttachment {
    0% { background-color: #90ee90; }
    100% { background-color: transparent; }
}

#page-attachments {
    border-value = 1px solid #E0E0DC;

    table  {
        border: border-value;
        border-bottom: 0;
        border-collapse: collapse;
        border-right: 0;
        margin: 20px 0 0 0;
        width: 100%;
    }

    th, td {
        border-bottom: border-value;
        border-right: border-value;
        padding: 5px;
        vertical-align: top;
    }

    th {
        font-weight: bold;
        color: #666;
    }

    td {
        set-font-size($small-bump-font-size);
    }

    .attachment-description {
        set-font-size(11px);
        font-style: italic;
    }

    .attachment-name-cell {
        width: 40%;
    }

    .attachment-error {
        color: #900;
        set-font-size(11px);
    }
}

#page-attachments-new-table {
    input[type='text'] {
        width: 90%;

        .attachment-required {
            border: 1px solid #900;
        }

        textarea {
            height: 40px;
        }
    }
}

#page-attachments-upload-target {
    height: 1px;
    visibility: hidden;
    width: 1px;
}

#page-attachments-spinner {
    display: inline-block;
    height: 16px;
    margin-left: 10px;
    opacity: 0;
    width: 16px;
}

.title {
    clearfix();
    margin-bottom: 10px;
    position: relative;
}

details {
    clear: both;
    display: block;
}

/* The .no-details styles will get applied only if JavaScript is enabled and
   <details> is not natively supported. Add focus styles (for keyboard
   accessibility) */
.no-details {
    summary:hover, summary:focus {
        outline: 0;
    }

    summary:before {
        set-font-size(1.25em);
        bidi-value(float, left, right);
        content: '+';
        margin-top: -.15em;
        bidi-style(margin-left, -15px, margin-right, 0);
    }

    &.open summary:before {
        content: '–';
        margin-top: -.2em;
        bidi-style(margin-left, -13px, margin-right, 0);
    }
}

.page-meta {
    section {
        margin: 0 0 $grid-spacing;
        overflow: hidden;
        padding: 15px 20px;
        position: relative;

        h2, h3 {
            .editor-help-icon {
                set-font-size(20px);
            }
        }
    }

    h2 {
        color: #666;
        font-weight: 200;
        letter-spacing: .5px;
        text-transform: uppercase;
        bidi-value(margin, 0 $grid-spacing 0 0, 0 0 0 $grid-spacing);
    }

    p.add {
        position: absolute;
        bidi-style(right, 0, left, 0);
        text-align: right;
        top: 41px;
    }
}

/* Pages like /docs/all, /docs/with-errors, and more. */
#document-list {
    .documents {
        list-style-type: disc;
        list-style-position: inside;

        li {
            margin-bottom: 7px;
        }
    }
}

/*
    Small desktop.  We go to a two-column layout
*/
@media $media-query-small-desktop {

    /* when there's a left sidebar, we need to adjust the layout to look like:  |= */
    .wiki-left-present:not(.wiki-left-closed) {
        #wiki-right, #wiki-content {
            width: $grid-width-column-main;
            margin-right: 0;
        }
        #wiki-right {
            enable-toc-toggle();
            padding-bottom: ($grid-spacing * 2);
        }
        #wiki-left {
            float: none;
        }
    }

    /* hide redirected from info on small screens */
    .redirected-from {
        display: none;
    }
}


@media $media-query-tablet {
    make-wiki-blocks-flat();

    .zone-landing-header-preview {
        .column-strip, masthead-text {
            width: 48%;
        }
    }

    #wiki-right {
        enable-toc-toggle();

        .tag-attach-list {
            display: inline-block;

            {$selector-icon} {
                left: 0;
                margin-left: 0;
            }

            ul {
                margin-left: 20px;
            }
        }
    }

    #wiki-column-container, #wiki-content {
        width: auto !important;
    }

    #quick-links-toggle,  #wiki-controls, .page-print {
        display: none;
    }
}

/* Mobile updates */
@media $media-query-mobile {
    #languages-menu-submenu {
        right: auto;
        left: 0;

        &:before, &:after {
            left: 10px;
        }
    }

    .page-buttons > li.page-buttons-edit {
        display: none;
    }

    .page-meta p.add {
        position: static;
    }

    /* display the attachments table as inline */
    #page-attachments {

        table {
            border: 0;
        }

        thead {
            display: none;
        }

        tr {
            border-bottom: 1px solid #e0e0dc;

            &:last-child {
                border-bottom: 0;
            }
        }

        td {
            display: block;
            border-bottom: 0;
            border-right: 0;
        }

    }
}

/* print styling */
@media print {

    /* hide sections not important to the article */
    #wiki-left, #wiki-right, #wiki-controls, .crumbs, .page-buttons, #page-attachments, .offline-notice, .contributors, .redirected-from, #offline-dialog-content, a.edit-section, .from-search-previous-box, .from-search-navigate-wrap, .from-search-next-box {
        display: none;
    }

    .from-search {
        padding-left: 0;
    }
}
