XWIKI-16054: Additional margin for document title in Inline mode

- Removing the more restrictive rule, since it's already covered in type.less

//
// Layout
// --------------------------------------------------
#xwikimaincontainer {
  .container-fluid();
}

#menuview, #headerglobal, #contentcontainer, #xwikieditor, #footerglobal {
  .make-row();
}

@main-padding: @grid-gutter-width * 2;

#body {
  // Both left and right panels are displayed
  &.content {
    // Left panels are small
    &.panel-left-width-Small {
      .main {
        .make-md-column-push(1);
      }
      // Left panels are small and right panels are small
      &.panel-right-width-Small {
        .main {
          .make-md-column(10, @main-padding);
        }
        #leftPanels {
          .make-md-column-pull(10);
        }
      }
      // Left panels are small and right panels are medium
      &.panel-right-width-Medium {
        .main {
          .make-md-column(9, @main-padding);
        }
        #leftPanels {
          .make-md-column-pull(9);
        }
      }
      // Left panels are small and right panels are large
      &.panel-right-width-Large {
        .main {
          .make-md-column(8, @main-padding);
        }
        #leftPanels {
          .make-md-column-pull(8);
        }
      }
    }
    // Left panels are medium
    &.panel-left-width-Medium {
      .main {
        .make-md-column-push(2);
      }
      // Left panels are medium and right panels are small
      &.panel-right-width-Small {
        .main {
          .make-md-column(9, @main-padding);
        }
        #leftPanels {
          .make-md-column-pull(9);
        }
      }
      // Left panels are medium and right panels are medium
      &.panel-right-width-Medium {
        .main {
          .make-md-column(8, @main-padding);
        }
        #leftPanels {
          .make-md-column-pull(8);
        }
      }
      // Left panels are medium and right panels are large
      &.panel-right-width-Large {
        .main {
          .make-md-column(7, @main-padding);
        }
        #leftPanels {
          .make-md-column-pull(7);
        }
      }
    }
    // // Left panels are large
    &.panel-left-width-Large {
      .main {
        .make-md-column-push(3);
      }
      // Left panels are large and right panels are small
      &.panel-right-width-Small {
        .main {
          .make-md-column(8, @main-padding);
        }
        #leftPanels {
          .make-md-column-pull(8);
        }
      }
      // Left panels are large and right panels are medium
      &.panel-right-width-Medium {
        .main {
          .make-md-column(7, @main-padding);
        }
        #leftPanels {
          .make-md-column-pull(7);
        }
      }
      // Left panels are large and right panels are large
      &.panel-right-width-Large {
        .main {
          .make-md-column(6, @main-padding);
        }
        #leftPanels {
          .make-md-column-pull(6);
        }
      }
    }
  }

  // Only right panels
  &.hideleft {
    &.panel-right-width-Small {
      .main {
        .make-md-column(11, @main-padding);
      }
    }
    &.panel-right-width-Medium {
      .main {
        .make-md-column(10, @main-padding);
      }
    }
    &.panel-right-width-Large {
      .main {
        .make-md-column(9, @main-padding);
      }
    }
  }

  // Only left panels
  &.hideright {
    &.panel-left-width-Small {
      .main {
        .make-md-column(11, @main-padding);
        .make-md-column-push(1);
      }
      #leftPanels {
        .make-md-column-pull(11);
      }
    }
    &.panel-left-width-Medium {
      .main {
        .make-md-column(10, @main-padding);
        .make-md-column-push(2);
      }
      #leftPanels {
        .make-md-column-pull(10);
      }
    }
    &.panel-left-width-Large {
      .main {
        .make-md-column(9, @main-padding);
        .make-md-column-push(3);
      }
      #leftPanels {
        .make-md-column-pull(9);
      }
    }
  }

  // No Panels
  &.hidelefthideright {
    .main {
      .make-md-column(12, @main-padding);
    }
  }

  &.panel-left-width-Small {
    #leftPanels {
      .make-md-column(1);
    }
  }
  &.panel-left-width-Medium {
    #leftPanels {
      .make-md-column(2);
    }
  }
  &.panel-left-width-Large {
    #leftPanels {
      .make-md-column(3);
    }
  }
  &.panel-right-width-Small {
    #rightPanels, #editPanels {
      .make-md-column(1);
    }
  }
  &.panel-right-width-Medium {
    #rightPanels, #editPanels {
      .make-md-column(2);
    }
  }
  &.panel-right-width-Large {
    #rightPanels, #editPanels {
      .make-md-column(3);
    }
  }
}

#leftPanels, #rightPanels {
  .make-xs-column(12);
}

.rightmenu {
  display: inline;
}

// Layout Styling =============================================================

#headerglobal {
  background: @xwiki-page-header-bg-color @xwiki-page-header-bg-image @xwiki-page-header-bg-position;
}

.main {
  background-color: @body-bg;
}

#body.main { // Rule for WYSIWYG frame body.main
  background-color: @xwiki-page-content-bg;
}

#contentcolumn .main {
  padding-top: 0;
  padding-bottom: 0;
}

#xwikieditor .main {
  background-color: @xwiki-page-content-bg;
  box-shadow: 0 1px 2px @input-border;
}

#xwikieditcontent .main {
  background-color: @xwiki-page-content-bg;
}

#xwikieditcontent #content {
  vertical-align: bottom;
  border-radius: 0;
  border-color: @input-border;
  resize: vertical;
}

.main,
#leftPanels, #rightPanels, #editPanels,
#docextrapanes {
  padding-top: (@grid-gutter-width / 2);
  padding-bottom: (@grid-gutter-width / 2);
}

#mainContentArea > .xcontent {
  margin-top: @line-height-computed / 2;
}

#xwikicontent {
  overflow: auto;
}

.document-header {
  margin-top: -@line-height-computed;
  margin-bottom: @line-height-computed;
  #document-title h1 {
    word-wrap: break-word;
  }
  .document-menu, .document-info {
    margin-top: @line-height-computed;
  }
}

#xdocAuthors {
  text-align: right;
}

#footerglobal {
  background-color: @navbar-default-bg;
  color: @navbar-default-brand-color;
  padding: @padding-large-vertical @padding-large-horizontal;
  .text-smaller;
  text-align: center;
  position: relative;
  z-index: 2;

  a {
    color: @navbar-default-link-color;
    &:hover {
      color: @navbar-default-link-hover-color;
    }
  }
}

#mainContentArea,
#xdocFooter,
#docextrapanes {
  background-color: @xwiki-page-content-bg;
  box-shadow: 0 1px 2px @xwiki-border-color;
  margin: 0 -@grid-gutter-width;
  padding: @line-height-computed @grid-gutter-width;
}

#docextrapanes {
  border-top: 1px solid @xwiki-border-color;
  border-top-left-radius: @border-radius-base;
  border-top-right-radius: @border-radius-base;
  margin-top: -1px;
}

#xdocFooter {
  .clearfix;
  border-bottom-left-radius: @border-radius-base;
  border-bottom-right-radius: @border-radius-base;
  margin-bottom: floor((@grid-gutter-width / 2));
  padding-top: 0;
}

// Tabbar =====================================================================

.xwikitabbar { // Used by: AllDocs, DocExtra
  .nav;
  .nav-tabs;
  margin: 0;
}

#docExtrasTabsUl {
  margin-left: -(floor((@grid-gutter-width / 2)));
}

.xwikitabbar > li.active > a {
  border-top-color: fade((@xwiki-border-color), 80%);
  border-left-color: fade((@xwiki-border-color), 80%);
  border-right-color: fade((@xwiki-border-color), 80%);
}

//
// Layout
// --------------------------------------------------
#xwikimaincontainer {
  .container-fluid();
}

#menuview, #headerglobal, #contentcontainer, #xwikieditor, #footerglobal {
  .make-row();
}

@main-padding: @grid-gutter-width * 2;

#body {
  // Both left and right panels are displayed
  &.content {
    // Left panels are small
    &.panel-left-width-Small {
      .main {
        .make-md-column-push(1);
      }
      // Left panels are small and right panels are small
      &.panel-right-width-Small {
        .main {
          .make-md-column(10, @main-padding);
        }
        #leftPanels {
          .make-md-column-pull(10);
        }
      }
      // Left panels are small and right panels are medium
      &.panel-right-width-Medium {
        .main {
          .make-md-column(9, @main-padding);
        }
        #leftPanels {
          .make-md-column-pull(9);
        }
      }
      // Left panels are small and right panels are large
      &.panel-right-width-Large {
        .main {
          .make-md-column(8, @main-padding);
        }
        #leftPanels {
          .make-md-column-pull(8);
        }
      }
    }
    // Left panels are medium
    &.panel-left-width-Medium {
      .main {
        .make-md-column-push(2);
      }
      // Left panels are medium and right panels are small
      &.panel-right-width-Small {
        .main {
          .make-md-column(9, @main-padding);
        }
        #leftPanels {
          .make-md-column-pull(9);
        }
      }
      // Left panels are medium and right panels are medium
      &.panel-right-width-Medium {
        .main {
          .make-md-column(8, @main-padding);
        }
        #leftPanels {
          .make-md-column-pull(8);
        }
      }
      // Left panels are medium and right panels are large
      &.panel-right-width-Large {
        .main {
          .make-md-column(7, @main-padding);
        }
        #leftPanels {
          .make-md-column-pull(7);
        }
      }
    }
    // // Left panels are large
    &.panel-left-width-Large {
      .main {
        .make-md-column-push(3);
      }
      // Left panels are large and right panels are small
      &.panel-right-width-Small {
        .main {
          .make-md-column(8, @main-padding);
        }
        #leftPanels {
          .make-md-column-pull(8);
        }
      }
      // Left panels are large and right panels are medium
      &.panel-right-width-Medium {
        .main {
          .make-md-column(7, @main-padding);
        }
        #leftPanels {
          .make-md-column-pull(7);
        }
      }
      // Left panels are large and right panels are large
      &.panel-right-width-Large {
        .main {
          .make-md-column(6, @main-padding);
        }
        #leftPanels {
          .make-md-column-pull(6);
        }
      }
    }
  }

  // Only right panels
  &.hideleft {
    &.panel-right-width-Small {
      .main {
        .make-md-column(11, @main-padding);
      }
    }
    &.panel-right-width-Medium {
      .main {
        .make-md-column(10, @main-padding);
      }
    }
    &.panel-right-width-Large {
      .main {
        .make-md-column(9, @main-padding);
      }
    }
  }

  // Only left panels
  &.hideright {
    &.panel-left-width-Small {
      .main {
        .make-md-column(11, @main-padding);
        .make-md-column-push(1);
      }
      #leftPanels {
        .make-md-column-pull(11);
      }
    }
    &.panel-left-width-Medium {
      .main {
        .make-md-column(10, @main-padding);
        .make-md-column-push(2);
      }
      #leftPanels {
        .make-md-column-pull(10);
      }
    }
    &.panel-left-width-Large {
      .main {
        .make-md-column(9, @main-padding);
        .make-md-column-push(3);
      }
      #leftPanels {
        .make-md-column-pull(9);
      }
    }
  }

  // No Panels
  &.hidelefthideright {
    .main {
      .make-md-column(12, @main-padding);
    }
  }

  &.panel-left-width-Small {
    #leftPanels {
      .make-md-column(1);
    }
  }
  &.panel-left-width-Medium {
    #leftPanels {
      .make-md-column(2);
    }
  }
  &.panel-left-width-Large {
    #leftPanels {
      .make-md-column(3);
    }
  }
  &.panel-right-width-Small {
    #rightPanels, #editPanels {
      .make-md-column(1);
    }
  }
  &.panel-right-width-Medium {
    #rightPanels, #editPanels {
      .make-md-column(2);
    }
  }
  &.panel-right-width-Large {
    #rightPanels, #editPanels {
      .make-md-column(3);
    }
  }
}

#leftPanels, #rightPanels {
  .make-xs-column(12);
}

.rightmenu {
  display: inline;
}

// Layout Styling =============================================================

#headerglobal {
  background: @xwiki-page-header-bg-color @xwiki-page-header-bg-image @xwiki-page-header-bg-position;
}

.main {
  background-color: @body-bg;
}

#body.main { // Rule for WYSIWYG frame body.main
  background-color: @xwiki-page-content-bg;
}

#contentcolumn .main {
  padding-top: 0;
  padding-bottom: 0;
}

#xwikieditor .main {
  background-color: @xwiki-page-content-bg;
  box-shadow: 0 1px 2px @input-border;
}

#xwikieditcontent .main {
  background-color: @xwiki-page-content-bg;
}

#xwikieditcontent #content {
  vertical-align: bottom;
  border-radius: 0;
  border-color: @input-border;
  resize: vertical;
}

.main,
#leftPanels, #rightPanels, #editPanels,
#docextrapanes {
  padding-top: (@grid-gutter-width / 2);
  padding-bottom: (@grid-gutter-width / 2);
}

#mainContentArea > .xcontent {
  margin-top: @line-height-computed / 2;
}

#xwikicontent {
  overflow: auto;
}

.document-header {
  margin-top: -@line-height-computed;
  margin-bottom: @line-height-computed;
  #document-title h1 {
    margin-top: 0;
    word-wrap: break-word;
  }
  .document-menu, .document-info {
    margin-top: @line-height-computed;
  }
}

#xdocAuthors {
  text-align: right;
}

#footerglobal {
  background-color: @navbar-default-bg;
  color: @navbar-default-brand-color;
  padding: @padding-large-vertical @padding-large-horizontal;
  .text-smaller;
  text-align: center;
  position: relative;
  z-index: 2;

  a {
    color: @navbar-default-link-color;
    &:hover {
      color: @navbar-default-link-hover-color;
    }
  }
}

#mainContentArea,
#xdocFooter,
#docextrapanes {
  background-color: @xwiki-page-content-bg;
  box-shadow: 0 1px 2px @xwiki-border-color;
  margin: 0 -@grid-gutter-width;
  padding: @line-height-computed @grid-gutter-width;
}

#docextrapanes {
  border-top: 1px solid @xwiki-border-color;
  border-top-left-radius: @border-radius-base;
  border-top-right-radius: @border-radius-base;
  margin-top: -1px;
}

#xdocFooter {
  .clearfix;
  border-bottom-left-radius: @border-radius-base;
  border-bottom-right-radius: @border-radius-base;
  margin-bottom: floor((@grid-gutter-width / 2));
  padding-top: 0;
}

// Tabbar =====================================================================

.xwikitabbar { // Used by: AllDocs, DocExtra
  .nav;
  .nav-tabs;
  margin: 0;
}

#docExtrasTabsUl {
  margin-left: -(floor((@grid-gutter-width / 2)));
}

.xwikitabbar > li.active > a {
  border-top-color: fade((@xwiki-border-color), 80%);
  border-left-color: fade((@xwiki-border-color), 80%);
  border-right-color: fade((@xwiki-border-color), 80%);
}


Separate out mixins into mixin.less

Separate out mixins into mixin.less

// Mixin
.box-sizing {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
///

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


Update fallback style of spinner

Update fallback style of spinner

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


css change

css change

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/janoszab/szabadegyhaza.git/'


Tidy up responsive layout (Bug 745033)

Tidy up responsive layout (Bug 745033)

@import "sandstone/variables-resp.less";
@import "sandstone/mixins-resp.less";

@font-face {
    font-family: 'Lobster';
    src: url('/media/fonts/Lobster_1.3-webfont.eot');
    src: url('/media/fonts/Lobster_1.3-webfont.eot?#iefix') format('embedded-opentype'),
         url('/media/fonts/Lobster_1.3-webfont.woff') format('woff'),
         url('/media/fonts/Lobster_1.3-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

#main-feature {
    min-height: 550px;
    hgroup {
        .span(7);
        padding-top: @baseLine * 3;
        padding-bottom: @baseLine;

        h1 {
            font-size: 72px;
            margin-bottom: @baseLine * 1.5;

            span {
                display: block;
                font-size: 48px;
            }
            span.aurora {
                display: inline-block;
                font-family: Lobster;
                font-size: 19px;
                font-weight: normal;
                letter-spacing: normal;
                color: #fff;
                height: 72px;
                width: 72px;
                line-height: 72px;
                text-align: center;
                background: url(/media/img/marketplace/aurora-tag.png) 50% 50% no-repeat;
                text-shadow: 0 -1px rgba(0,0,0,0.2);
                vertical-align: middle;
                position: relative;
                bottom: 24px;
                right: 10px;
            }
        }

        h2 {
            font-size: 34px;
        }
    }
    p {
        .span(7);
        margin-bottom: @baseLine;
        clear: left;
    }
    #marketplace-launcher {
        .span(7);
        margin-bottom: @baseLine;
        clear: left;
        position: relative;
        #marketplace-button {
            font-size: 22px;
            padding: 15px 15px 15px 80px;
            min-width: 200px;
            position: relative;
            &:after {
                content: " ";
                height: 47px;
                width: 31px;
                background: url(/media/img/marketplace/rocket.png) 0 0 no-repeat;
                position: absolute;
                top: 12px;
                left: 30px;
            }
        }
        #marketplace-panel {
            display: none;
            position: absolute;
            top: 76px;
            border-radius: 8px;
            background: #fff url(/media/img/marketplace/panel-bg.png) 375px -12px no-repeat;
            box-shadow: 0 1px 3px rgba(0,0,0,0.5);
            width: @widthDesktop - (@gridGutterWidth * 2);
            padding: 0 @gridGutterWidth;
            left: -30px;
            z-index: 100;
            &:after {
                content: " ";
                background: url(/media/img/marketplace/panel-bg.png) 0 0 no-repeat;
                height: 12px;
                width: 28px;
                position: absolute;
                top: -12px;
                left: 180px;
            }
            #panel-download {
                .span(4);
                padding: 30px 0;
                p {
                    float: none;
                    margin: 0 0 @baseLine 0;
                    width: auto;
                }
            }
            #panel-info {
                .span(8);
                padding: 30px 0;
                p {
                    .span(4);
                    .offset(4);
                    margin-top: @baseLine * 3;
                }
            }
        }
    }
}

#nav-main {
    z-index: 20;
    position: relative;
}

#apps-bag {
    position: absolute;
    top: -300px;
    right: 0;
    width: 344px;
    height: 858px;
}

#apps-bag-background {
    position: absolute;
    width: 344px;
    height: 108px;
    bottom: 216px;
    left: 0;
    background: url(/media/img/marketplace/apps-bag.png) 0 100% no-repeat;
}

#apps-bag-handle {
    position: absolute;
    width: 202px;
    height: 60px;
    bottom: 216px;
    left: 71px;
    z-index: 10;
    background: url(/media/img/marketplace/apps-bag.png) -71px 0 no-repeat;
}

#apps-bag-foreground {
    position: absolute;
    width: 344px;
    height: 216px;
    bottom: 0;
    left: 0;
    z-index: 10;
    background: url(/media/img/marketplace/apps-bag.png) 0 -61px no-repeat;
}

#apps-container {
    position: absolute;
    width: 280px;
    height: 658px;
    bottom: 150px;
    left: 32px;
}

#apps-physics {
    position: relative;
    width: 280px;
    height: 658px;
}

#apps-container .apps-icon {
    margin: 0;
    padding: 0;
    width: 64px;
    height: 64px;
    display: none;
    background: url(/media/img/marketplace/apps-icons.png) no-repeat;
    background-position: 0 0;
    &#app-jauntly      { background-position:    0      0; }
    &#app-minimalist   { background-position:  -64px    0; }
    &#app-pomodoro     { background-position: -128px    0; }
    &#app-solitaire    { background-position:    0    -64px; }
    &#app-soundcloud   { background-position:  -64px  -64px; }
    &#app-towerjelly   { background-position: -128px  -64px; }
    &#app-twitter      { background-position:    0   -128px; }
    &#app-wired        { background-position:  -64px -128px; }
    &#app-wordwars     { background-position: -128px -128px; }
}

#apps-list {
    .inset;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: @baseLine * 3;
    li {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        .span(4);
        padding-left: 80px;
        height: 60px;
        list-style-type: none;
        .open-sans-light;
        font-size: 18px;
        letter-spacing: -0.02em;
        line-height: @baseLine;
        background: url(/media/img/marketplace/apps-list-icons.png) no-repeat 0 50%;
        display: table;
        span {
            display: table-cell;
            vertical-align: middle;
        }
    }
    li#list-feedback  { background-position: -320px 50%; }
    li#list-native { background-position: -640px 50%; }
}

#app-developer {
    border-bottom: 1px dotted @borderColor;
    padding-bottom: @baseLine;
}

#marketplace-link {
    padding-top: @baseLine;
    padding-bottom: @baseLine;
    margin: (@baseLine * 2) auto;
    text-align: center;
    a {
        height: auto;
        position: relative;
        text-align: left;
        padding: (@baseLine / 2) (@baseLine * 2) (@baseLine / 2) (@baseLine * 3);
        line-height: @baseLine;
        font-size: 18px;
        &:before {
            content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAvCAYAAAAb1BGUAAACQElEQVR42u3YP2hTQRzA8YtiWxQrZBH/kRYKsUGsQhfRxSbqqhQrIlIHQTcH3aTah+1WVHBQcCyKYBHBoYI4uTmqoLEOUguCSRBq/9gW+/NbuMBxvKN5L++aJcMn8LJ8j3fvHu9OqZ4LcWzDHbzHVWwWERVVnHAK9yDaAq5tVHwIYlnFGd/xU1iGhCgh6yu+A0UIXF4g5SM+AqnBQNLxLGZrjH/E9iTjjyARDCYVz6AUMf4BbUnEhxyBKdzCL8fS6683vhVfIJZZHIHCRfyDWF7WG++HhAig1oiI0ktMLAvoqif+FGL5gbQVP4pFiOVm3PhOzEAso1BmXA/gFcTyFlvixE9CQtzGDQQYRqCvxyGWP+iKEx+DJGAgTvxdQvH7UeMnMJdQ/DtytcbzqEAS9A0H1ov3oQzxoIhuV7yACsSjr+YU1HSrfU2B41Z7V0RuLf4M0gCBfn83Lv6kQfHhZrwZb8ZtvyO8fqcxl1S8jGM4iE9YcviLN+jAOazUG68gD6W1Yz9yOKwd0tdZtBgflINYihuvoABlaEMGe6yTir3YhU3VOKobiuWo8TL6oCxXMF/9JIbCPvxECXkdtgew4opPuG51iIcQjBv/teAzBJfN8DpTMKr46USvodMRNrdFE9Z+bgaCwIjaA+i2OrsdEafnxtLrgMJZrEIw4vNA6K51/nIcUxDtks/4eYjBfJDm0eMznsY0JMRrpLzFteuOk4jCRpxAtmLSij9AyntcS2MSi3iMVt9nr7YMTqM9clj7D3Z6vqRP5F2TAAAAAElFTkSuQmCC);
            vertical-align: middle;
            display: inline-block;
            position: absolute;
            top: 14px;
            left: 24px;
        }
        strong {
            display: block;
            font-weight: normal;
        }
    }
}

#open {
    position: relative;
    .clearfix;
    margin-bottom: @baseLine * 2;
    #sign {
        .span(5);
        position: relative;
        height: 310px;
        background: url(/media/img/marketplace/sign.png) 0 0 no-repeat;
        p {
            position: absolute;
            left: 40px;
            top: 125px;
            width: 240px;
            margin: 0;
            font-family: Lobster;
            font-weight: normal;
            font-style: normal;
            color: #fff;
            font-size: 64px;
            line-height: 90%;
            text-align: center;
            text-shadow: 0 1px rgba(0,0,0,0.4);
            -moz-transform: rotate(-10deg);
            -webkit-transform: rotate(-10deg);
            -ms-transform: rotate(-10deg);
            -o-transform: rotate(-10deg);
            transform: rotate(-10deg);
        }
    }
    h3 {
        .span(7);
        font-size: 48px;
        margin-top: @baseLine;
        margin-bottom: @baseLine;
        strong {
            font-size: 68px;
            display: block;
            font-weight: normal;
            line-height: @baseLine * 2;
        }
    }
    p {
        .span(7);
    }
}

#build {
    margin-bottom: @baseLine * 2;
    h3 {
        font-size: 48px;
    }
}

#apps-preview {

    .pager-tabs {
        margin: 0;
        text-align: center;
        .open-sans;
        font-size: @smallFontSize;
        text-transform: uppercase;
        li {
            .inline-block;
            position: relative;
            right: 8px;
            margin: 0;
            width: 218px;
            a {
                display: block;
                position: relative;
                z-index: 10;
                background: url(/media/img/firefox/pager-tabs.png) 0 0 no-repeat;
                height: 40px;
                line-height: 40px;
                color: @linkSkyBlue;
                &.selected {
                    background-position: 100% 0;
                    color: @textColorSecondary;
                    z-index: 20;
                }
            }
        }
        li:first-child {
            left: 8px;
        }
    }

    .pager-page {
        ul { margin: 0; }
        li {
            list-style-type: none;
            position: relative;
            overflow: hidden;
            .span(4);
            img {
                width: 100%;
                height: auto;
                display: block;
                .transition(all ease-out 0.25s);
            }
            img.qr-code {
                width: 50%;
                margin: 0 auto;
                position: absolute;
                top: -100%;
                left: 15px;
                box-shadow: 0 0 5px #000;
            }
            h4 {
                font-size: 18px;
                margin: 5px 0 10px 0;
            }
            &:hover,
            &:focus {
                img {
                    top: 15px;
                    .transition(all ease-in 0.5s);
                }
                img.qr-code {
                    opacity: 1;
                    display: block;
                }
            }
        }
    }
}

#footer-email-form {

    h3 {
        .span(4);
        margin-left: 0;
        font-size: 24px;
    }

    .form-contents {
        .span(3);
    }

}

.subtitles {
    text-align: center;
    .open-sans;
    font-size: 13px;
}

#intro-video {
    max-width: 640px;
    margin: 0 auto (@baseLine * 2) auto;
    background-image: url(/media/img/sandstone/video/shadow.png);
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-size: 100% 15px;
    padding-bottom: 15px;
    video {
        max-width: 640px;
        width: 100%;
        height: auto;
        background: #fff;
    }
}

#id_email {
    width: 60%;
}

#marketplace-partners {
    #main-feature {
        padding-top: @baseLine;
        h2 {
            font-size: 28px;
            letter-spacing: -0.5px;
            width: 75%;
            margin-left: auto;
            margin-right: auto;
        }
    }

    .menu-bar {
        .button {
            padding-left: 60px;
            position: relative;
            .icon {
                position: absolute;
                top: 0;
                left: 20px;
                height: 48px;
                width: 48px;
                display: block;

                background-image: url(/media/img/marketplace/list-icons.png);
                background-position: 0 100%;
                background-repeat: no-repeat;
            }
        }
    }

    #platform {
        .pager {
            .span(6);
        }
        .pager-tabs {
          @videoNavColCount: 6;
          @videoNavThumbCount: 5;
          @videoGutterWidth: 10px;
          @videoNavWidth: (@gridColumnWidth * @videoNavColCount) + (@gridGutterWidth * (@videoNavColCount - 1));
          @videoNavTabWidth: (@videoNavWidth - (@videoGutterWidth * 4)) / @videoNavThumbCount;
            li {
                list-style-type: none;
                float: left;
                width: @videoNavTabWidth;
                margin-left: @videoGutterWidth;
                &:first-child {
                    margin-left: 0;
                }
                img {
                    padding: 6px;
                    background: #fff;
                    border: 1px solid #ccc;
                    border-radius: 6px;
                    width: @videoNavTabWidth - 14px;
                }
            }
        }
        .pager-page {
            display: none;
        }
        .default-page {
            display: block;
        }
    }

    #mdn-link {
        margin-bottom: 0;
        a {
            .open-sans-light;
            .inline-block;
            padding: 0 0 0 48px;
            background: url(/media/img/marketplace/html5.png) 0 50% no-repeat;
        }
    }

    #marketplace {
        position: relative;
        #sign {
            .span(4);
            float: none;
            position: absolute;
            top: 0;
            left: 0;
            margin-left: 0;
            position: relative;
            height: 310px;
            background: url(/media/img/marketplace/sign.png) 0 0 no-repeat;
            p {
                position: absolute;
                left: 40px;
                top: 125px;
                width: 240px;
                margin: 0;
                font-family: Lobster;
                font-weight: normal;
                font-style: normal;
                color: #fff;
                font-size: 60px;
                line-height: 100%;
                text-align: center;
                text-shadow: 0 1px rgba(0,0,0,0.4);
                -moz-transform: rotate(-10deg);
                -webkit-transform: rotate(-10deg);
                -ms-transform: rotate(-10deg);
                -o-transform: rotate(-10deg);
                transform: rotate(-10deg);
            }
        }
        h2 em {
            font-family: Lobster;
            font-weight: normal;
            font-style: normal;
            color: #c83108;
            letter-spacing: 0;
            font-size: 24px;
        }
        ul li {
            padding: @baseLine @baseLine @baseLine (@gridColumnWidth + @gridGutterWidth);
            background: url(/media/img/marketplace/list-icons.png) 0 0 no-repeat;
            border-top: 1px dotted @borderColor;
            margin: 0;
            list-style-type: none;
            .open-sans-light;
            &:first-child {
                border-top: 0;
            }
            &#build {
                background-position: 0 -100px;
            }
            &#target {
                background-position: 0 -200px;
            }
        }
        .row { position: relative; }
    }

}

/* Tablet Layout: 760px */
@media only screen and (min-width: @breakTablet) and (max-width: @breakDesktop) {

    #main-feature {
        p {
            .span_narrow(6);
        }
        #marketplace-launcher {
            .span_narrow(6);
            margin-bottom: @baseLine;
        }
    }

    #apps-list {
        li {
            .span_narrow(4);
        }
    }

    #open {
        #sign {
            .span_narrow(6);
        }
        h3 {
            .span_narrow(6);
            margin-top: @baseLine;
            margin-bottom: @baseLine;
        }
        p {
            .span_narrow(6);
        }
    }

    #apps-preview {
        .pager-page {
            li {
                .span_narrow(4);
            }
        }
    }
}

/* Mobile layout: 320px */
@media only screen and (max-width: @breakTablet) {

    #apps-bag {
        display: none;
    }

    #main-feature {
        p,
        hgroup {
            width: auto;
            float: none;
        }
        hgroup {
            padding-top: 20px;
            h1 {
                font-size: 48px;
                margin-bottom: @baseLine;
            }
            h2 {
                font-size: 22px;
            }
        }
        #marketplace-launcher {
            width: auto;
            #marketplace-button {
                font-size: 18px;
                width: auto;
                min-width: 0;
                padding-left: 70px;
            }
        }
    }

    #open {
        #sign {
            display: none;
        }
        h3,
        p {
            width: auto;
            float: none;
        }
        h3 { font-size: 32px; }
    }

    #apps-preview {
        .pager-page {
            li {
                .span_narrow(5);
            }
        }
    }

    #build {
        h3 {
            font-size: 32px;
        }
    }

    #apps-preview {

        .pager-tabs {
            li {
                .inline-block;
                position: static;
                width: auto;
                a {
                    line-height: 1;
                    height: auto;
                    background: #f8f8f8;
                    border-style: solid;
                    border-width: 1px 1px 0 1px;
                    border-color: #dadada;
                    padding: 12px;
                    border-top-left-radius: 12px;
                    border-top-right-radius: 12px;
                    &.selected {
                        background: #fff;
                        border-color: #fff;
                    }
                }
            }
        }
    }

}

@media only screen and (max-width: @breakMobileLandscape) {

    #main-feature {
        hgroup {
            h1 {
                span.aurora {
                    position: absolute;
                    top: 0;
                    right: 0;
                }
            }
        }
    }

}

/* Wide Mobile Layout: 480px */
@media only screen and (min-width: @breakMobileLandscape) and (max-width: @breakTablet) {

    #apps-preview {
        .pager-page {
            li {
                .offset_narrow(1);
            }
        }
    }

}

@import "sandstone/variables-resp.less";
@import "sandstone/mixins-resp.less";

@font-face {
    font-family: 'Lobster';
    src: url('/media/fonts/Lobster_1.3-webfont.eot');
    src: url('/media/fonts/Lobster_1.3-webfont.eot?#iefix') format('embedded-opentype'),
         url('/media/fonts/Lobster_1.3-webfont.woff') format('woff'),
         url('/media/fonts/Lobster_1.3-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

#main-feature {
    min-height: 550px;
    hgroup {
        .span(7);
        padding-top: @baseLine * 3;
        padding-bottom: @baseLine;

        h1 {
            font-size: 72px;
            margin-bottom: @baseLine * 1.5;

            span {
                display: block;
                font-size: 48px;
            }
            span.aurora {
                display: inline-block;
                font-family: Lobster;
                font-size: 19px;
                font-weight: normal;
                letter-spacing: normal;
                color: #fff;
                height: 72px;
                width: 72px;
                line-height: 72px;
                text-align: center;
                background: url(/media/img/marketplace/aurora-tag.png) 50% 50% no-repeat;
                text-shadow: 0 -1px rgba(0,0,0,0.2);
                vertical-align: middle;
                position: relative;
                bottom: 24px;
                right: 10px;
            }
        }

        h2 {
            font-size: 34px;
        }
    }
    p {
        .span(7);
        margin-bottom: @baseLine;
        clear: left;
    }
    #marketplace-launcher {
        .span(7);
        margin-bottom: @baseLine;
        clear: left;
        position: relative;
        #marketplace-button {
            font-size: 22px;
            padding: 15px 15px 15px 80px;
            min-width: 200px;
            position: relative;
            &:after {
                content: " ";
                height: 47px;
                width: 31px;
                background: url(/media/img/marketplace/rocket.png) 0 0 no-repeat;
                position: absolute;
                top: 12px;
                left: 30px;
            }
        }
        #marketplace-panel {
            display: none;
            position: absolute;
            top: 76px;
            border-radius: 8px;
            background: #fff url(/media/img/marketplace/panel-bg.png) 375px -12px no-repeat;
            box-shadow: 0 1px 3px rgba(0,0,0,0.5);
            width: @widthDesktop - (@gridGutterWidth * 2);
            padding: 0 @gridGutterWidth;
            left: -30px;
            z-index: 100;
            &:after {
                content: " ";
                background: url(/media/img/marketplace/panel-bg.png) 0 0 no-repeat;
                height: 12px;
                width: 28px;
                position: absolute;
                top: -12px;
                left: 180px;
            }
            #panel-download {
                .span(4);
                padding: 30px 0;
                p {
                    float: none;
                    margin: 0 0 @baseLine 0;
                    width: auto;
                }
            }
            #panel-info {
                .span(8);
                padding: 30px 0;
                p {
                    .span(4);
                    .offset(4);
                    margin-top: @baseLine * 3;
                }
            }
        }
    }
}

#nav-main {
    z-index: 20;
    position: relative;
}

#apps-bag {
    position: absolute;
    top: -300px;
    right: 0;
    width: 344px;
    height: 858px;
}

#apps-bag-background {
    position: absolute;
    width: 344px;
    height: 108px;
    bottom: 216px;
    left: 0;
    background: url(/media/img/marketplace/apps-bag.png) 0 100% no-repeat;
}

#apps-bag-handle {
    position: absolute;
    width: 202px;
    height: 60px;
    bottom: 216px;
    left: 71px;
    z-index: 10;
    background: url(/media/img/marketplace/apps-bag.png) -71px 0 no-repeat;
}

#apps-bag-foreground {
    position: absolute;
    width: 344px;
    height: 216px;
    bottom: 0;
    left: 0;
    z-index: 10;
    background: url(/media/img/marketplace/apps-bag.png) 0 -61px no-repeat;
}

#apps-container {
    position: absolute;
    width: 280px;
    height: 658px;
    bottom: 150px;
    left: 32px;
}

#apps-physics {
    position: relative;
    width: 280px;
    height: 658px;
}

#apps-container .apps-icon {
    margin: 0;
    padding: 0;
    width: 64px;
    height: 64px;
    display: none;
    background: url(/media/img/marketplace/apps-icons.png) no-repeat;
    background-position: 0 0;
    &#app-jauntly      { background-position:    0      0; }
    &#app-minimalist   { background-position:  -64px    0; }
    &#app-pomodoro     { background-position: -128px    0; }
    &#app-solitaire    { background-position:    0    -64px; }
    &#app-soundcloud   { background-position:  -64px  -64px; }
    &#app-towerjelly   { background-position: -128px  -64px; }
    &#app-twitter      { background-position:    0   -128px; }
    &#app-wired        { background-position:  -64px -128px; }
    &#app-wordwars     { background-position: -128px -128px; }
}

#apps-list {
    .inset;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: @baseLine * 3;
    li {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        .span(4);
        padding-left: 80px;
        height: 60px;
        list-style-type: none;
        .open-sans-light;
        font-size: 18px;
        letter-spacing: -0.02em;
        line-height: @baseLine;
        background: url(/media/img/marketplace/apps-list-icons.png) no-repeat 0 50%;
        display: table;
        span {
            display: table-cell;
            vertical-align: middle;
        }
    }
    li#list-feedback  { background-position: -320px 50%; }
    li#list-native { background-position: -640px 50%; }
}

#app-developer {
    border-bottom: 1px dotted @borderColor;
    padding-bottom: @baseLine;
}

#marketplace-link {
    padding-top: @baseLine;
    padding-bottom: @baseLine;
    margin: (@baseLine * 2) auto;
    text-align: center;
    a {
        height: auto;
        position: relative;
        text-align: left;
        padding: (@baseLine / 2) (@baseLine * 2) (@baseLine / 2) (@baseLine * 3);
        line-height: @baseLine;
        font-size: 18px;
        &:before {
            content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAvCAYAAAAb1BGUAAACQElEQVR42u3YP2hTQRzA8YtiWxQrZBH/kRYKsUGsQhfRxSbqqhQrIlIHQTcH3aTah+1WVHBQcCyKYBHBoYI4uTmqoLEOUguCSRBq/9gW+/NbuMBxvKN5L++aJcMn8LJ8j3fvHu9OqZ4LcWzDHbzHVWwWERVVnHAK9yDaAq5tVHwIYlnFGd/xU1iGhCgh6yu+A0UIXF4g5SM+AqnBQNLxLGZrjH/E9iTjjyARDCYVz6AUMf4BbUnEhxyBKdzCL8fS6683vhVfIJZZHIHCRfyDWF7WG++HhAig1oiI0ktMLAvoqif+FGL5gbQVP4pFiOVm3PhOzEAso1BmXA/gFcTyFlvixE9CQtzGDQQYRqCvxyGWP+iKEx+DJGAgTvxdQvH7UeMnMJdQ/DtytcbzqEAS9A0H1ov3oQzxoIhuV7yACsSjr+YU1HSrfU2B41Z7V0RuLf4M0gCBfn83Lv6kQfHhZrwZb8ZtvyO8fqcxl1S8jGM4iE9YcviLN+jAOazUG68gD6W1Yz9yOKwd0tdZtBgflINYihuvoABlaEMGe6yTir3YhU3VOKobiuWo8TL6oCxXMF/9JIbCPvxECXkdtgew4opPuG51iIcQjBv/teAzBJfN8DpTMKr46USvodMRNrdFE9Z+bgaCwIjaA+i2OrsdEafnxtLrgMJZrEIw4vNA6K51/nIcUxDtks/4eYjBfJDm0eMznsY0JMRrpLzFteuOk4jCRpxAtmLSij9AyntcS2MSi3iMVt9nr7YMTqM9clj7D3Z6vqRP5F2TAAAAAElFTkSuQmCC);
            vertical-align: middle;
            display: inline-block;
            position: absolute;
            top: 14px;
            left: 24px;
        }
        strong {
            display: block;
            font-weight: normal;
        }
    }
}

#open {
    position: relative;
    .clearfix;
    margin-bottom: @baseLine * 2;
    #sign {
        .span(5);
        position: relative;
        height: 310px;
        background: url(/media/img/marketplace/sign.png) 0 0 no-repeat;
        p {
            position: absolute;
            left: 40px;
            top: 125px;
            width: 240px;
            margin: 0;
            font-family: Lobster;
            font-weight: normal;
            font-style: normal;
            color: #fff;
            font-size: 64px;
            line-height: 90%;
            text-align: center;
            text-shadow: 0 1px rgba(0,0,0,0.4);
            -moz-transform: rotate(-10deg);
            -webkit-transform: rotate(-10deg);
            -ms-transform: rotate(-10deg);
            -o-transform: rotate(-10deg);
            transform: rotate(-10deg);
        }
    }
    h3 {
        .span(7);
        font-size: 48px;
        margin-top: @baseLine;
        margin-bottom: @baseLine;
        strong {
            font-size: 68px;
            display: block;
            font-weight: normal;
            line-height: @baseLine * 2;
        }
    }
    p {
        .span(7);
    }
}

#build {
    margin-bottom: @baseLine * 2;
    h3 {
        font-size: 48px;
    }
}

#apps-preview {

    .pager-tabs {
        margin: 0;
        text-align: center;
        .open-sans;
        font-size: @smallFontSize;
        text-transform: uppercase;
        li {
            .inline-block;
            position: relative;
            right: 8px;
            margin: 0;
            width: 218px;
            a {
                display: block;
                position: relative;
                z-index: 10;
                background: url(/media/img/firefox/pager-tabs.png) 0 0 no-repeat;
                height: 40px;
                line-height: 40px;
                color: @linkSkyBlue;
                &.selected {
                    background-position: 100% 0;
                    color: @textColorSecondary;
                    z-index: 20;
                }
            }
        }
        li:first-child {
            left: 8px;
        }
    }

    .pager-page {
        ul { margin: 0; }
        li {
            list-style-type: none;
            position: relative;
            overflow: hidden;
            .span(4);
            img {
                width: 100%;
                height: auto;
                display: block;
                    .transition(all ease-out 0.25s);
            }
            img.qr-code {
                width: 50%;
                margin: 0 auto;
                position: absolute;
                top: -100%;
                left: 15px;
                box-shadow: 0 0 5px #000;
            }
            h4 {
                font-size: 18px;
                margin: 5px 0;
            }
            &:hover,
            &:focus {
                img {
                    top: 15px;
                .transition(all ease-in 0.5s);
                }
                img.qr-code {
                    opacity: 1;
                    display: block;
                }
            }
        }
    }
}

#footer-email-form {

    h3 {
        .span(4);
        margin-left: 0;
        font-size: 24px;
    }

    .form-contents {
        .span(3);
    }

}

.subtitles {
    text-align: center;
    .open-sans;
    font-size: 13px;
}

#intro-video {
    max-width: 640px;
    margin: 0 auto (@baseLine * 2) auto;
    background-image: url(/media/img/sandstone/video/shadow.png);
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-size: 100% 15px;
    padding-bottom: 15px;
    video {
        max-width: 640px;
        width: 100%;
        height: auto;
        background: #fff;
    }
}

#id_email {
    width: 60%;
}

#marketplace-partners {
    #main-feature {
        padding-top: @baseLine;
        h2 {
            font-size: 28px;
            letter-spacing: -0.5px;
            width: 75%;
            margin-left: auto;
            margin-right: auto;
        }
    }

    .menu-bar {
        .button {
            padding-left: 60px;
            position: relative;
            .icon {
                position: absolute;
                top: 0;
                left: 20px;
                height: 48px;
                width: 48px;
                display: block;

                background-image: url(/media/img/marketplace/list-icons.png);
                background-position: 0 100%;
                background-repeat: no-repeat;
            }
        }
    }

    #platform {
        .pager {
            .span(6);
        }
        .pager-tabs {
          @videoNavColCount: 6;
          @videoNavThumbCount: 5;
          @videoGutterWidth: 10px;
          @videoNavWidth: (@gridColumnWidth * @videoNavColCount) + (@gridGutterWidth * (@videoNavColCount - 1));
          @videoNavTabWidth: (@videoNavWidth - (@videoGutterWidth * 4)) / @videoNavThumbCount;
            li {
                list-style-type: none;
                float: left;
                width: @videoNavTabWidth;
                margin-left: @videoGutterWidth;
                &:first-child {
                    margin-left: 0;
                }
                img {
                    padding: 6px;
                    background: #fff;
                    border: 1px solid #ccc;
                    border-radius: 6px;
                    width: @videoNavTabWidth - 14px;
                }
            }
        }
        .pager-page {
            display: none;
        }
        .default-page {
            display: block;
        }
    }

    #mdn-link {
        margin-bottom: 0;
        a {
            .open-sans-light;
            .inline-block;
            padding: 0 0 0 48px;
            background: url(/media/img/marketplace/html5.png) 0 50% no-repeat;
        }
    }

    #marketplace {
        position: relative;
        #sign {
            .span(4);
            float: none;
            position: absolute;
            top: 0;
            left: 0;
            margin-left: 0;
            position: relative;
            height: 310px;
            background: url(/media/img/marketplace/sign.png) 0 0 no-repeat;
            p {
                position: absolute;
                left: 40px;
                top: 125px;
                width: 240px;
                margin: 0;
                font-family: Lobster;
                font-weight: normal;
                font-style: normal;
                color: #fff;
                font-size: 60px;
                line-height: 100%;
                text-align: center;
                text-shadow: 0 1px rgba(0,0,0,0.4);
                -moz-transform: rotate(-10deg);
                -webkit-transform: rotate(-10deg);
                -ms-transform: rotate(-10deg);
                -o-transform: rotate(-10deg);
                transform: rotate(-10deg);
            }
        }
        h2 em {
            font-family: Lobster;
            font-weight: normal;
            font-style: normal;
            color: #c83108;
            letter-spacing: 0;
            font-size: 24px;
        }
        ul li {
            padding: @baseLine @baseLine @baseLine (@gridColumnWidth + @gridGutterWidth);
            background: url(/media/img/marketplace/list-icons.png) 0 0 no-repeat;
            border-top: 1px dotted @borderColor;
            margin: 0;
            list-style-type: none;
            .open-sans-light;
            &:first-child {
                border-top: 0;
            }
            &#build {
                background-position: 0 -100px;
            }
            &#target {
                background-position: 0 -200px;
            }
        }
        .row { position: relative; }
    }

}

/* Tablet Layout: 760px */
@media only screen and (min-width: @breakTablet) and (max-width: @breakDesktop) {

    #main-feature {
        p {
            .span_narrow(6);
        }
        #marketplace-launcher {
            .span_narrow(6);
            margin-bottom: @baseLine;
        }
    }

    #apps-list {
        li {
            .span_narrow(4);
        }
    }

    #open {
        #sign {
            .span_narrow(6);
        }
        h3 {
            .span_narrow(6);
            margin-top: @baseLine;
            margin-bottom: @baseLine;
        }
        p {
            .span_narrow(6);
        }
    }

    #apps-preview {
        .pager-page {
            li {
                .span_narrow(4);
            }
        }
    }
}