<commit_before>@import "foundation.less";
@import "inputs.less";

/*
<h1 class="main-heading">Layout</h1>

TODO: em grid structure explained in plain English (when new grid structure decided!)
*/


/*
**************************************************************************
# Columns
*/

@one-column-grid-width: 568px; // iPhone 5 landscape is still one column
@two-column-grid-width: 720px;
@two-column-grid-main-width: 66.66%;
@two-column-grid-aside-width: 33.33%;

// iPad specifies the maximum width and height of the content area
@maximum-width: 1025px;
@maximum-height: 1025px;
@maximum-landscape-height: 769px;
@fixed-page-height: 500px;


//////// NEW START ////////////////////////

@height-container-toolbar: @grid-vertical;
@height-landscape-max: 769px;
@height-max: 1025px;
@width-max: 1025px;
@width-column-max: 568px; // iPhone 5 landscape is still one column

/*
**************************************************************************
# LEVEL 1: Root
*/

// 1. Set width and height for absolutely positioned (grand)children.
.container-root {
  height: 100%; // [1]
  width: 100%;  // [1]
}

/*
**************************************************************************
# LEVEL 2: Optional Intermediate Containers (main, drawer-aisle)
*/

// 1. Inherit width and height for absolutely positioned (grand)children.
.container-main, .container-drawer-aisle {
  width: inherit;   // [1]
  height: inherit;  // [1]
}

/*
**************************************************************************
# LEVEL 3: Primary Containers (master, editor, menu)
*/

// 1. Layout for Snap.js. See https://github.com/jakiestfu/Snap.js/#layout
// 2. Inherit height to expand vertically and for (grand)children as well.
.container-master, .container-editor, .container-menu {
  position: absolute; // [1]
  height: inherit;    // [2]
}

// 1. Center horizontally.
//    Set left and right properties as well because .container-master and .container-editor are absolutely positioned.
// 2. Maximum height is set programmatically - set default maximum height here as well for reference.
// 4. Animate maximum height change when soft keyboard opens and closes
.container-master, .container-editor {
  .center-horizontally; // [1]
  left: 0;              // [1]
  right: 0;             // [1]
  max-height: @height-landscape-max;        // [2]
  -webkit-transition: max-height .3s ease;  // [3]
  -moz-transition: max-height .3s ease;     // [3]
  -o-transition: max-height .3s ease;       // [3]
  -ms-transition: max-height .3s ease;      // [3]
  transition: max-height .3s ease;          // [3]
  // FIXME
  max-width: @width-column-max;
  // FIXME
}

/*
Master
*/
// 1. .container-master must have background not to see-through .container-menu and .container-editor.
.container-master {
  background-color: white;  // [1]
}

/*
Menu
*/
.container-menu {
  width: 260px;
  overflow-y: auto;
}

/*
Vertically center
*/
@media (min-height: @maximum-landscape-height) {
  .container-master, .container-editor {
    top: 50%;
    margin-top: -@maximum-landscape-height / 2;
  }
}

/*
**************************************************************************
# LEVEL 4: Fluid
*/
@height-footer: @vertical-grid;

/*
`.container-fluid` sets the vertical positioning of the content area.
*/
.container-fluid {
  .center-horizontally;
}

// Fluid container height.
//
// Sources:
// http://stackoverflow.com/a/15933376
// http://stackoverflow.com/a/12255692
// http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/
//
// 1. Fixes width calculation with swiper inside. See: http://stackoverflow.com/a/19835024
// 2. Inherit height for display: table.
// 3. Set width for display: table
.container-fluid {
  display: table;
  table-layout: fixed;  /* [1] */
  height: inherit;      /* [2] */
  width: 100%;          /* [3] */
}

// 1. Inherit width from parent. Elements inside swiper would otherwise be as wide as `.swiper-wrapper`.
.swiper-slide .container-content {
  width: inherit; /* [1] */
}

// 1. Use same positioning as in swiper to make content scrollable and footer visible.
// NOTE: Footer position in UI is set using javascript. See http://css-tricks.com/snippets/css/sticky-footer/
.container-master .swiper-slide .container-content,
.container-master .swiper-slide .container-content--after,
.container-editor .swiper-slide .container-content,
.container-editor .swiper-slide .container-content--after {
  // position: absolute; /* [1] */
}

// 1. Use same positioning as in swiper to make .container-content scrollable and .container-content--after visible.
// 2. .container-content--after inside swiper is absolutely positioned
//    so it needs to be positioned to the bottom of the content-container.
//    NOTE: Override programmatically if footer height is different.
//          See http://css-tricks.com/snippets/css/sticky-footer/
.container-master, .container-editor {
  .swiper-slide {
    .container-content, .container-content--after {
      position: absolute;       // [1]
    }
    .container-content--after {
      bottom: -@height-footer;  // [2]
    }
  }
}

// 1. Fluid container height.
// 2. Inherit height because parent uses display: table
// 3. Default bottom padding to make room for footer. NOTE: Override programmatically if footer height is different.
.container-content--outer {
  display: table-cell;            // [1]
  height: inherit;                // [1,2]
  padding-bottom: @height-footer; // [3]
}

// 1. Default height for footer. NOTE: Override programmatically if footer height is different
.container-content--after {
  height: @height-footer; // [1]
}


@media (min-height: @height-landscape-max) {
  .container-editor {
    margin-top: -@height-landscape-max / 2;
    top: 50%;
  }
}


/*
**************************************************************************
# LEVEL 5: Secondary Containers (content, toolbar, titlebar)
*/


// 1. Align all secondary containers horizontally
.container-content,
.container-banner,
.container-toolbar,
.container-titlebar {
  .center-horizontally;
  max-width: @width-max;  // [1]
}

// 1. Fluid container height
.container-titlebar, .container-toolbar, .container-banner {
  display: table-row; /* [1] */
  // < save
  //    title
  //  inbox task note list
}

/*
`.container-content` specifies the vertical overflow.
*/
.container-content {
  height: 100%;
  overflow-y: auto;
}

.container-toolbar {
  // menu     title    omnibar
  height: @height-container-toolbar;
}

/*
**************************************************************************
# LEVEL 6: row and groups
*/

/*
`.row` is uses horizontal alignment. It specifies the left and right
margin.
*/
.row {
  width: 100%;
  padding-left: @grid-horizontal;
  padding-right: @grid-horizontal;
}

/*
Class `.group-btn` groups automatically button elements horizontally. Works
for 1, 2, 3, 4, 7 and 9 buttons.

```markup
<div class="group-btn" style="width: 100%;">
  <button style="background: gray;">&nbsp;</button>
  <button style="background: red;">&nbsp;</button>
  <button style="background: gray;">&nbsp;</button>
  <button style="background: red;">&nbsp;</button>
  <button style="background: gray;">&nbsp;</button>
  <button style="background: red;">&nbsp;</button>
  <button style="background: gray;">&nbsp;</button>
  <button style="background: red;">&nbsp;</button>
  <button style="background: gray;">&nbsp;</button>
</div>
<div class="group-btn" style="width: 100%;">
  <button style="background: gray;">&nbsp;</button>
  <button style="background: red;">&nbsp;</button>
  <button style="background: gray;">&nbsp;</button>
  <button style="background: red;">&nbsp;</button>
  <button style="background: gray;">&nbsp;</button>
  <button style="background: red;">&nbsp;</button>
  <button style="background: gray;">&nbsp;</button>
</div>
<div class="group-btn" style="width: 100%;">
  <button style="background: gray;">&nbsp;</button>
  <button style="background: red;">&nbsp;</button>
  <button style="background: gray;">&nbsp;</button>
  <button style="background: red;">&nbsp;</button>
</div>
<div class="group-btn" style="width: 100%;">
  <button style="background: gray;">&nbsp;</button>
  <button style="background: red;">&nbsp;</button>
  <button style="background: gray;">&nbsp;</button>
</div>
<div class="group-btn" style="width: 100%;">
  <button style="background: gray;">&nbsp;</button>
  <button style="background: red;">&nbsp;</button>
</div>
<div class="group-btn" style="width: 100%;">
  <button style="background: gray;">&nbsp;</button>
</div>
```
*/
.group-btn {
  button:first-child:nth-last-child(1) {
    width: 100%;
  }
  button:first-child:nth-last-child(2),
  button:first-child:nth-last-child(2) ~ button {
    width: 50%;
    float: left;
  }
  button:first-child:nth-last-child(3),
  button:first-child:nth-last-child(3) ~ button {
    width: 33.333%;
    float: left;
  }
  button:first-child:nth-last-child(4),
  button:first-child:nth-last-child(4) ~ button {
    width: 25%;
    float: left;
  }
  button:first-child:nth-last-child(7),
  button:first-child:nth-last-child(7) ~ button {
    width: 14.2857%;
    float: left;
  }
  button:first-child:nth-last-child(9),
  button:first-child:nth-last-child(9) ~ button {
    width: 11.111%;
    float: left;
  }
}

/*
Use `.group-instruction` to create an instruction block in the middle of a section.
*/
.group-instruction {
  display: block;
  line-height: @grid-vertical;
  font-size: @size-font-large;
  font-weight: 700; // TODO: evaluate right value with correct font

  // If there are more than one paragraph, create padding between them
  p:not(:first-child) {
    padding-top: @grid-vertical;
  }
}

/*
Use `.group-mixed` to create horizontal collections of different elements.

Not compatible with `.row` so we need to apply padding-left and -right inside.

NOTE: Implementation depends on the removing of --left|--right DOM nodes if they have no content
*/

@padding-inner-group-mixed: 10px;

.group-mixed {
  display: block;
}

.group-mixed--left, .group-mixed--middle, .group-mixed--right {
  display: table-cell;
  vertical-align: middle;
}

// 1. Force all child elements not to increase .group-mixed height
.group-mixed--left, .group-mixed--right {
  * {
    display: block; /* [1] */
  }
}

// 1. Increase clicking area
.group-mixed--left {
  padding-right: @padding-inner-group-mixed;

  a, input[type="checkbox"] + label, span {
    padding-left: @grid-horizontal; /* [1] */
    height: @grid-vertical;         /* [1] */
  }
  a, input[type="checkbox"] + label:before, span {
    line-height: @grid-vertical;
  }
}

.group-mixed--middle {
  width: 100%;
  line-height: @grid-vertical-half;
}

// 1. Increase clicking area
.group-mixed--right {
  padding-left: @padding-inner-group-mixed;

  // NOTE: all buttons have height defined
  button, a {
    padding-right: @grid-horizontal;  /* [1] */
  }
  a {
    height: @grid-vertical;
  }
}

// 1. Increase clicking area
.group-mixed--middle:first-child {
  input, textarea {
    padding-left: @grid-horizontal;   /* [1] */
  }
}
.group-mixed--middle:last-child {
  textarea {
    padding-right: @grid-horizontal;  /* [1] */
  }
}

// 1. Expand width and line-height when there are no sibling elements in .group-mixed
.group-mixed--middle:only-child {
  display: block;               /* [1] */
  line-height: @grid-vertical;  /* [1] */
}

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

/*
`.group-error` groups together multiple error messages.
*/
.group-error {
  line-height: @grid-vertical-half;
}

.group-navigation {
  .link-navigation-forward {
    float: right;
  }
}


//////// NEW END ////////////////////////

/*
Use `.left-of-two` and `.right-of-two` to divide the horizontal space in two sections, separated by a white border.

```markup
<div class="left-of-two" style="background: gray;">&nbsp;</div>
<div class="right-of-two" style="background: gray;">&nbsp;</div>
```
*/
.left-of-two {
  float: left;
  width: 50%;
  border-right: 1px solid white;
}
.right-of-two {
  float: left;
  width: 50%;
}

/*
Similarly, use the following to divide to three sections:

* `left-of-three`
* `center-of-three`
* `right-of-three`

```markup
<div class="left-of-three" style="background: gray;">&nbsp;</div>
<div class="center-of-three" style="background: gray;">&nbsp;</div>
<div class="right-of-three" style="background: gray;">&nbsp;</div>
```
*/
.left-of-three {
  float: left;
  width: 33%;
  border-right: 1px solid white;
}
.center-of-three {
  float: left;
  width: 34%;
  border-right: 1px solid white;
}
.right-of-three {
  float: left;
  width: 33%;
}

/*
And to four sections:

* `left-of-four`
* `center-of-four`
* `center-of-four`
* `right-of-four`

```markup
<div class="left-of-four" style="background: gray;">&nbsp;</div>
<div class="center-of-four" style="background: gray;">&nbsp;</div>
<div class="center-of-four" style="background: gray;">&nbsp;</div>
<div class="right-of-four" style="background: gray;">&nbsp;</div>
```
*/
.left-of-four {
  float: left;
  width: 25%;
  border-right: 1px solid white;
}
.center-of-four {
  float: left;
  width: 25%;
  border-right: 1px solid white;
}
.right-of-four {
  float: left;
  width: 25%;
}

/*
`.horizontally-justified` justifies text horizontally.

```markup
<div class="horizontally-justified">Extended Mind is not just a nice brand name for a task manager or another note taking app. We are very serious about the fact that certain mental operations such as workflow management and declarative memory can be externalized. This will change the way you think.</div>
```
*/
.horizontally-justified {
  text-align: justify;
  * {
    display: inline;
  }
  .justified-element {
    display: inline-block;
  }
  #stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
  }
}

.list-last {
  margin-bottom: @grid-vertical-half;
}


/*
**************************************************************************
# Grid
*/

div#root {
  line-height: @grid-vertical;
  max-height: @maximum-height;
  .center-horizontally;
  position: relative;

  .one-column-grid, .two-column-grid, .column {
    min-height: inherit;
    min-width: inherit;
  }
  .column {
    position: relative;
    width: 100%;
  }
}

.one-column-grid {
  padding-left: @horizontal-grid;
  padding-right: @horizontal-grid;
  max-width: @one-column-grid-width;
  .center-horizontally;
}

.two-column-grid {
  max-width: @two-column-grid-width;
  .center-horizontally;
  padding-left: @horizontal-grid;
  aside.column, div.column {
    width: auto;
    padding-right: @horizontal-grid;
  }
  aside.column {
    max-width: @two-column-grid-aside-width;
  }
  div.column {
    max-width: @two-column-grid-main-width;
  }
}


/*
**************************************************************************
# Header
*/


.static-page-header {
  * {
    vertical-align: middle;
  }
  z-index: 1;
  top: 0px;
  left: 0px;
  overflow: hidden;
  width: 100%;
  height: @page-header-height;
  position: relative;
  nav {
    max-width: @one-column-grid-width;
    margin-left: auto;
    margin-right: auto;
    .active-item-container {
      width: 23%;
      height: @page-header-height;
      float: left;
    }
    .heading-container {
      // NOTE: this width percentage is used in HeadingController.js!
      width: 54%;
      height: @page-header-height;
      float: left;
      display: table;
      .heading {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
      }
    }
    .omni-button-container {
      width: 23%;
      height: @page-header-height;
      float: right;
      text-align: right;
    }
  }
}

.heading-header {
  position: relative;
  text-align: center;
  min-height: @heading-header-height;
  h3 {
    padding-top: 18px;
  }
}


/*
**************************************************************************
# Content
*/

.page-content-container {
  height: 100%;
  padding-top: @page-header-height + 12px;
  padding-bottom: @footer-height;

  .inner-page-content-container {
    height: inherit;
    position: relative;
    overflow-y: auto;
    display: block;
  }
  .inner-slide-content-container {
    height: inherit;
    section {
      height: inherit;
      overflow-y: auto;
    }
  }
  // TODO: To be removed, when Accordion gone
  .accordion-wrapper {
    // NOTE: Due to mysterous iphone laggy accordion, height,
    // nor probably anything else can not be set here.
    // Don't add anything here if you don't know how to test
    // the laggy accordion bug.
    // height: inherit;
  }
}

.simple-content-container {
  height: inherit;
  padding-bottom: @heading-header-height + @grid-vertical-half;
  overflow-y: auto;
}

.single-page-content-container {
  overflow-y: hidden;
  .scroll-container {
    height: inherit;
    overflow-y: auto;
  }
}


/*
**************************************************************************
# Swiper

TODO: Do we want an example of a swiper in the styleguide?
*/

.swiper-container, .swiper-wrapper, .swiper-slide {
  height: inherit !important;
  width: 100%;
}

.swiper-container.main-slides {
  margin-top: -@page-header-height;
  margin-bottom: -@footer-height;
}

.single-page-container {
  margin-bottom: -@footer-height;
}

.hide-footer .swiper-container.main-slides, .hide-footer .single-page-container {
  margin-bottom: 0;
}

.hide-footer .page-content-container {
  padding-bottom: @grid-vertical-half;
}

// NO SWIPER
.no-slides-container {
  .single-page-container {
    height: 100%;
    .single-page {
      margin-top: -@page-header-height;
      height: inherit;
      position: relative;
    }
  }
}


/*
**************************************************************************
# Responsive main container

When the screen size is bigger than a tablet,
the main container will be horizontally and vertically centered.

*/
@media (min-height: @maximum-landscape-height) {
  body {
    .no-slides-container {
      position: relative;
      min-height: @maximum-landscape-height;
      max-height: @maximum-landscape-height;
      margin-top: -@maximum-landscape-height / 2;
      top: 50%;
    }
    .slides-container {
      position: inherit;
      top: 50%;
      min-height: @maximum-landscape-height;
      max-height: @maximum-landscape-height;
      margin-top: -@maximum-landscape-height / 2;
    }
  }
}

// Pages with fixed content need a smaller height
@media (min-height: @fixed-page-height) {
  section.fixed-height {
    min-height: @fixed-page-height !important;
    max-height: @fixed-page-height !important;
  }
}

// For smaller screens, aside is hidden, and we revert to single column width

// FIXME: FORCING ONE COLUMN TO EVERYONE
//@media (max-width: @maximum-width) {
  .two-column-grid, .two-column-grid div.column, footer, .two-column-grid header {
    max-width: @one-column-grid-width;
  }
  aside {
    display: none;
  }


/*
**************************************************************************
# Login, Signup and Launch

TODO: Explain verbally, when new grid done
*/

@login-content-height: @grid-vertical*5.1;

section#login, section#signup, section#launch, section#waiting, section#forgot, section#verify {
  .column {
    overflow-y: auto;
    .banner {
      padding-bottom: @grid-vertical / 10;
      span {
        width: 200px;
        display: block;
        text-align: center;
        .center-horizontally;
      }
      // Make content a "sticky footer"
      min-height: 100%;
      margin-bottom: -@login-content-height;
      padding-top: @grid-vertical * 1.5;
    }
    .banner:after {
      content: "";
      display: block;
      height: @login-content-height;
    }
    .content {
      height: @login-content-height;
      .button-container {
        padding-top: @grid-vertical / 2;
        padding-bottom: @grid-vertical / 2;
      }
    }
  }
  .icon-logo-with-text {
    padding-bottom: 25px;
  }
}

section#waiting {
  .column {
    .banner {
      margin-bottom: -@grid-vertical * 5.5;
    }
    .content {
      .instruction-text {
        h1 {
          line-height: 200%;
        }
        padding-bottom: @grid-vertical / 2;
      }
      #input-coupon {
        text-align: center;
      }
    }
  }
  .waiting-coupon {
    .banner {
      margin-bottom: -@grid-vertical * 6.5;
    }
  }
}

section#launch {
  .column {
    .content {
      div#email {
        padding-bottom: @grid-vertical;
      }
    }
  }
}

section#forgot, section#verify {
  .column {
    .banner {
      margin-bottom: -@grid-vertical * 7.5;
    }
    .content {
      .instruction-text {
        p {
          height: @grid-vertical / 2;
          vertical-align: middle;
        }
      }
    }
    #instructions-success {
      .instruction-text {
        padding-bottom: @grid-vertical;
      }
    }
  }
}


/*
**************************************************************************
# About
*/

// TODO: To be refactored, maybe .multiline-text could be created and universally used?
#about-help {
  line-height: @grid-vertical-half;
}


/*
**************************************************************************
# Simple content
*/

.simple-content {
  padding-bottom: @grid-vertical;
}

.simple-content:last-child {
  padding-bottom: 0;
}

.tasks-notes-container {
  padding-top: @grid-vertical-half;
}


/*
**************************************************************************
# Errors
*/

#errorMessage {
  h3 {
    text-align: center;
    padding-bottom: @grid-vertical;
  }
}

.add-element {
  // Add @vertical grid to make room for 'add [item]...' input
  padding-bottom: @grid-vertical-half;
}
<commit_msg>Small fixes to layout commenting, removed unnecessary section<commit_after>@import "foundation.less";
@import "inputs.less";

/*
<h1 class="main-heading">Layout</h1>

TODO: em grid structure explained in plain English (when new grid structure decided!)
*/


/*
**************************************************************************
# Columns
*/

@one-column-grid-width: 568px; // iPhone 5 landscape is still one column
@two-column-grid-width: 720px;
@two-column-grid-main-width: 66.66%;
@two-column-grid-aside-width: 33.33%;

// iPad specifies the maximum width and height of the content area
@maximum-width: 1025px;
@maximum-height: 1025px;
@maximum-landscape-height: 769px;
@fixed-page-height: 500px;


//////// NEW START ////////////////////////

@height-container-toolbar: @grid-vertical;
@height-landscape-max: 769px;
@height-max: 1025px;
@width-max: 1025px;
@width-column-max: 568px; // iPhone 5 landscape is still one column
@width-menu: 260px;

/*
**************************************************************************
# LEVEL 1: Root
*/

// 1. Set width and height for absolutely positioned (grand)children.
.container-root {
  height: 100%; // [1]
  width: 100%;  // [1]
}

/*
**************************************************************************
# LEVEL 2: Optional Intermediate Containers (main, drawer-aisle)
*/

// 1. Inherit width and height for absolutely positioned (grand)children.
.container-main, .container-drawer-aisle {
  width: inherit;   // [1]
  height: inherit;  // [1]
}

/*
**************************************************************************
# LEVEL 3: Primary Containers (master, editor, menu)
*/

// 1. Layout for Snap.js. See https://github.com/jakiestfu/Snap.js/#layout
// 2. Inherit height to expand vertically and for (grand)children as well.
.container-master, .container-editor, .container-menu {
  position: absolute; // [1]
  height: inherit;    // [2]
}

// 1. Center horizontally.
//    Set left and right properties as well because .container-master and .container-editor are absolutely positioned.
// 2. Maximum height is set programmatically - set default maximum height here as well for reference.
// 3. Animate maximum height change when soft keyboard opens and closes
.container-master, .container-editor {
  .center-horizontally; // [1]
  left: 0;              // [1]
  right: 0;             // [1]
  max-height: @height-landscape-max;        // [2]
  -webkit-transition: max-height .3s ease;  // [3]
  -moz-transition: max-height .3s ease;     // [3]
  -o-transition: max-height .3s ease;       // [3]
  -ms-transition: max-height .3s ease;      // [3]
  transition: max-height .3s ease;          // [3]
  // FIXME
  max-width: @width-column-max;
  // FIXME
}

/*
Master
*/
// 1. .container-master must have background not to see-through .container-menu and .container-editor.
.container-master {
  background-color: white;  // [1]
}

/*
Menu
*/
.container-menu {
  width: @width-menu;
  overflow-y: auto;
}

/*
Vertically center container-master and container-editor
*/
@media (min-height: @maximum-landscape-height) {
  .container-master, .container-editor {
    top: 50%;
    margin-top: -@maximum-landscape-height / 2;
  }
}

/*
**************************************************************************
# LEVEL 4: Fluid
*/
@height-footer: @vertical-grid;

/*
`.container-fluid` sets the vertical positioning of the content area.
*/
.container-fluid {
  .center-horizontally;
}

// Fluid container height.
//
// Sources:
// http://stackoverflow.com/a/15933376
// http://stackoverflow.com/a/12255692
// http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/
//
// 1. Fixes width calculation with swiper inside. See: http://stackoverflow.com/a/19835024
// 2. Inherit height for display: table.
// 3. Set width for display: table
.container-fluid {
  display: table;
  table-layout: fixed;  /* [1] */
  height: inherit;      /* [2] */
  width: 100%;          /* [3] */
}

// 1. Inherit width from parent. Elements inside swiper would otherwise be as wide as `.swiper-wrapper`.
.swiper-slide .container-content {
  width: inherit; /* [1] */
}

// 1. Use same positioning as in swiper to make .container-content scrollable and .container-content--after visible.
// 2. .container-content--after inside swiper is absolutely positioned
//    so it needs to be positioned to the bottom of the content-container.
//    NOTE: Override programmatically if footer height is different.
//          See http://css-tricks.com/snippets/css/sticky-footer/
.container-master, .container-editor {
  .swiper-slide {
    .container-content, .container-content--after {
      position: absolute;       // [1]
    }
    .container-content--after {
      bottom: -@height-footer;  // [2]
    }
  }
}

// 1. Fluid container height.
// 2. Inherit height because parent uses display: table
// 3. Default bottom padding to make room for footer. NOTE: Override programmatically if footer height is different.
.container-content--outer {
  display: table-cell;            // [1]
  height: inherit;                // [1,2]
  padding-bottom: @height-footer; // [3]
}

// 1. Default height for footer. NOTE: Override programmatically if footer height is different
.container-content--after {
  height: @height-footer; // [1]
}


@media (min-height: @height-landscape-max) {
  .container-editor {
    margin-top: -@height-landscape-max / 2;
    top: 50%;
  }
}


/*
**************************************************************************
# LEVEL 5: Secondary Containers (content, toolbar, titlebar)
*/


// 1. Align all secondary containers horizontally
.container-content,
.container-banner,
.container-toolbar,
.container-titlebar {
  .center-horizontally;
  max-width: @width-max;  // [1]
}

// 1. Fluid container height
.container-titlebar, .container-toolbar, .container-banner {
  display: table-row; /* [1] */
  // < save
  //    title
  //  inbox task note list
}

/*
`.container-content` specifies the vertical overflow.
*/
.container-content {
  height: 100%;
  overflow-y: auto;
}

.container-toolbar {
  // menu     title    omnibar
  height: @height-container-toolbar;
}

/*
**************************************************************************
# LEVEL 6: row and groups
*/

/*
`.row` is uses horizontal alignment. It specifies the left and right
margin.
*/
.row {
  width: 100%;
  padding-left: @grid-horizontal;
  padding-right: @grid-horizontal;
}

/*
Class `.group-btn` groups automatically button elements horizontally. Works
for 1, 2, 3, 4, 7 and 9 buttons.

```markup
<div class="group-btn" style="width: 100%;">
  <button style="background: gray;">&nbsp;</button>
  <button style="background: red;">&nbsp;</button>
  <button style="background: gray;">&nbsp;</button>
  <button style="background: red;">&nbsp;</button>
  <button style="background: gray;">&nbsp;</button>
  <button style="background: red;">&nbsp;</button>
  <button style="background: gray;">&nbsp;</button>
  <button style="background: red;">&nbsp;</button>
  <button style="background: gray;">&nbsp;</button>
</div>
<div class="group-btn" style="width: 100%;">
  <button style="background: gray;">&nbsp;</button>
  <button style="background: red;">&nbsp;</button>
  <button style="background: gray;">&nbsp;</button>
  <button style="background: red;">&nbsp;</button>
  <button style="background: gray;">&nbsp;</button>
  <button style="background: red;">&nbsp;</button>
  <button style="background: gray;">&nbsp;</button>
</div>
<div class="group-btn" style="width: 100%;">
  <button style="background: gray;">&nbsp;</button>
  <button style="background: red;">&nbsp;</button>
  <button style="background: gray;">&nbsp;</button>
  <button style="background: red;">&nbsp;</button>
</div>
<div class="group-btn" style="width: 100%;">
  <button style="background: gray;">&nbsp;</button>
  <button style="background: red;">&nbsp;</button>
  <button style="background: gray;">&nbsp;</button>
</div>
<div class="group-btn" style="width: 100%;">
  <button style="background: gray;">&nbsp;</button>
  <button style="background: red;">&nbsp;</button>
</div>
<div class="group-btn" style="width: 100%;">
  <button style="background: gray;">&nbsp;</button>
</div>
```
*/
.group-btn {
  button:first-child:nth-last-child(1) {
    width: 100%;
  }
  button:first-child:nth-last-child(2),
  button:first-child:nth-last-child(2) ~ button {
    width: 50%;
    float: left;
  }
  button:first-child:nth-last-child(3),
  button:first-child:nth-last-child(3) ~ button {
    width: 33.333%;
    float: left;
  }
  button:first-child:nth-last-child(4),
  button:first-child:nth-last-child(4) ~ button {
    width: 25%;
    float: left;
  }
  button:first-child:nth-last-child(7),
  button:first-child:nth-last-child(7) ~ button {
    width: 14.2857%;
    float: left;
  }
  button:first-child:nth-last-child(9),
  button:first-child:nth-last-child(9) ~ button {
    width: 11.111%;
    float: left;
  }
}

/*
Use `.group-instruction` to create an instruction block in the middle of a section.
*/
.group-instruction {
  display: block;
  line-height: @grid-vertical;
  font-size: @size-font-large;
  font-weight: 700; // TODO: evaluate right value with correct font

  // If there are more than one paragraph, create padding between them
  p:not(:first-child) {
    padding-top: @grid-vertical;
  }
}

/*
Use `.group-mixed` to create horizontal collections of different elements.

Not compatible with `.row` so we need to apply padding-left and -right inside.

NOTE: Implementation depends on the removing of --left|--right DOM nodes if they have no content
*/

@padding-inner-group-mixed: 10px;

.group-mixed {
  display: block;
}

.group-mixed--left, .group-mixed--middle, .group-mixed--right {
  display: table-cell;
  vertical-align: middle;
}

// 1. Force all child elements not to increase .group-mixed height
.group-mixed--left, .group-mixed--right {
  * {
    display: block; /* [1] */
  }
}

// 1. Increase clicking area
.group-mixed--left {
  padding-right: @padding-inner-group-mixed;

  a, input[type="checkbox"] + label, span {
    padding-left: @grid-horizontal; /* [1] */
    height: @grid-vertical;         /* [1] */
  }
  a, input[type="checkbox"] + label:before, span {
    line-height: @grid-vertical;
  }
}

.group-mixed--middle {
  width: 100%;
  line-height: @grid-vertical-half;
}

// 1. Increase clicking area
.group-mixed--right {
  padding-left: @padding-inner-group-mixed;

  // NOTE: all buttons have height defined
  button, a {
    padding-right: @grid-horizontal;  /* [1] */
  }
  a {
    height: @grid-vertical;
  }
}

// 1. Increase clicking area
.group-mixed--middle:first-child {
  input, textarea {
    padding-left: @grid-horizontal;   /* [1] */
  }
}
.group-mixed--middle:last-child {
  textarea {
    padding-right: @grid-horizontal;  /* [1] */
  }
}

// 1. Expand width and line-height when there are no sibling elements in .group-mixed
.group-mixed--middle:only-child {
  display: block;               /* [1] */
  line-height: @grid-vertical;  /* [1] */
}

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

/*
`.group-error` groups together multiple error messages.
*/
.group-error {
  line-height: @grid-vertical-half;
}

.group-navigation {
  .link-navigation-forward {
    float: right;
  }
}


//////// NEW END ////////////////////////

/*
Use `.left-of-two` and `.right-of-two` to divide the horizontal space in two sections, separated by a white border.

```markup
<div class="left-of-two" style="background: gray;">&nbsp;</div>
<div class="right-of-two" style="background: gray;">&nbsp;</div>
```
*/
.left-of-two {
  float: left;
  width: 50%;
  border-right: 1px solid white;
}
.right-of-two {
  float: left;
  width: 50%;
}

/*
Similarly, use the following to divide to three sections:

* `left-of-three`
* `center-of-three`
* `right-of-three`

```markup
<div class="left-of-three" style="background: gray;">&nbsp;</div>
<div class="center-of-three" style="background: gray;">&nbsp;</div>
<div class="right-of-three" style="background: gray;">&nbsp;</div>
```
*/
.left-of-three {
  float: left;
  width: 33%;
  border-right: 1px solid white;
}
.center-of-three {
  float: left;
  width: 34%;
  border-right: 1px solid white;
}
.right-of-three {
  float: left;
  width: 33%;
}

/*
And to four sections:

* `left-of-four`
* `center-of-four`
* `center-of-four`
* `right-of-four`

```markup
<div class="left-of-four" style="background: gray;">&nbsp;</div>
<div class="center-of-four" style="background: gray;">&nbsp;</div>
<div class="center-of-four" style="background: gray;">&nbsp;</div>
<div class="right-of-four" style="background: gray;">&nbsp;</div>
```
*/
.left-of-four {
  float: left;
  width: 25%;
  border-right: 1px solid white;
}
.center-of-four {
  float: left;
  width: 25%;
  border-right: 1px solid white;
}
.right-of-four {
  float: left;
  width: 25%;
}

/*
`.horizontally-justified` justifies text horizontally.

```markup
<div class="horizontally-justified">Extended Mind is not just a nice brand name for a task manager or another note taking app. We are very serious about the fact that certain mental operations such as workflow management and declarative memory can be externalized. This will change the way you think.</div>
```
*/
.horizontally-justified {
  text-align: justify;
  * {
    display: inline;
  }
  .justified-element {
    display: inline-block;
  }
  #stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
  }
}

.list-last {
  margin-bottom: @grid-vertical-half;
}


/*
**************************************************************************
# Grid
*/

div#root {
  line-height: @grid-vertical;
  max-height: @maximum-height;
  .center-horizontally;
  position: relative;

  .one-column-grid, .two-column-grid, .column {
    min-height: inherit;
    min-width: inherit;
  }
  .column {
    position: relative;
    width: 100%;
  }
}

.one-column-grid {
  padding-left: @horizontal-grid;
  padding-right: @horizontal-grid;
  max-width: @one-column-grid-width;
  .center-horizontally;
}

.two-column-grid {
  max-width: @two-column-grid-width;
  .center-horizontally;
  padding-left: @horizontal-grid;
  aside.column, div.column {
    width: auto;
    padding-right: @horizontal-grid;
  }
  aside.column {
    max-width: @two-column-grid-aside-width;
  }
  div.column {
    max-width: @two-column-grid-main-width;
  }
}


/*
**************************************************************************
# Header
*/


.static-page-header {
  * {
    vertical-align: middle;
  }
  z-index: 1;
  top: 0px;
  left: 0px;
  overflow: hidden;
  width: 100%;
  height: @page-header-height;
  position: relative;
  nav {
    max-width: @one-column-grid-width;
    margin-left: auto;
    margin-right: auto;
    .active-item-container {
      width: 23%;
      height: @page-header-height;
      float: left;
    }
    .heading-container {
      // NOTE: this width percentage is used in HeadingController.js!
      width: 54%;
      height: @page-header-height;
      float: left;
      display: table;
      .heading {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
      }
    }
    .omni-button-container {
      width: 23%;
      height: @page-header-height;
      float: right;
      text-align: right;
    }
  }
}

.heading-header {
  position: relative;
  text-align: center;
  min-height: @heading-header-height;
  h3 {
    padding-top: 18px;
  }
}


/*
**************************************************************************
# Content
*/

.page-content-container {
  height: 100%;
  padding-top: @page-header-height + 12px;
  padding-bottom: @footer-height;

  .inner-page-content-container {
    height: inherit;
    position: relative;
    overflow-y: auto;
    display: block;
  }
  .inner-slide-content-container {
    height: inherit;
    section {
      height: inherit;
      overflow-y: auto;
    }
  }
  // TODO: To be removed, when Accordion gone
  .accordion-wrapper {
    // NOTE: Due to mysterous iphone laggy accordion, height,
    // nor probably anything else can not be set here.
    // Don't add anything here if you don't know how to test
    // the laggy accordion bug.
    // height: inherit;
  }
}

.simple-content-container {
  height: inherit;
  padding-bottom: @heading-header-height + @grid-vertical-half;
  overflow-y: auto;
}

.single-page-content-container {
  overflow-y: hidden;
  .scroll-container {
    height: inherit;
    overflow-y: auto;
  }
}


/*
**************************************************************************
# Swiper

TODO: Do we want an example of a swiper in the styleguide?
*/

.swiper-container, .swiper-wrapper, .swiper-slide {
  height: inherit !important;
  width: 100%;
}

.swiper-container.main-slides {
  margin-top: -@page-header-height;
  margin-bottom: -@footer-height;
}

.single-page-container {
  margin-bottom: -@footer-height;
}

.hide-footer .swiper-container.main-slides, .hide-footer .single-page-container {
  margin-bottom: 0;
}

.hide-footer .page-content-container {
  padding-bottom: @grid-vertical-half;
}

// NO SWIPER
.no-slides-container {
  .single-page-container {
    height: 100%;
    .single-page {
      margin-top: -@page-header-height;
      height: inherit;
      position: relative;
    }
  }
}


/*
**************************************************************************
# Responsive main container

When the screen size is bigger than a tablet,
the main container will be horizontally and vertically centered.

*/
@media (min-height: @maximum-landscape-height) {
  body {
    .no-slides-container {
      position: relative;
      min-height: @maximum-landscape-height;
      max-height: @maximum-landscape-height;
      margin-top: -@maximum-landscape-height / 2;
      top: 50%;
    }
    .slides-container {
      position: inherit;
      top: 50%;
      min-height: @maximum-landscape-height;
      max-height: @maximum-landscape-height;
      margin-top: -@maximum-landscape-height / 2;
    }
  }
}

// Pages with fixed content need a smaller height
@media (min-height: @fixed-page-height) {
  section.fixed-height {
    min-height: @fixed-page-height !important;
    max-height: @fixed-page-height !important;
  }
}

// For smaller screens, aside is hidden, and we revert to single column width

// FIXME: FORCING ONE COLUMN TO EVERYONE
//@media (max-width: @maximum-width) {
  .two-column-grid, .two-column-grid div.column, footer, .two-column-grid header {
    max-width: @one-column-grid-width;
  }
  aside {
    display: none;
  }


/*
**************************************************************************
# Login, Signup and Launch

TODO: Explain verbally, when new grid done
*/

@login-content-height: @grid-vertical*5.1;

section#login, section#signup, section#launch, section#waiting, section#forgot, section#verify {
  .column {
    overflow-y: auto;
    .banner {
      padding-bottom: @grid-vertical / 10;
      span {
        width: 200px;
        display: block;
        text-align: center;
        .center-horizontally;
      }
      // Make content a "sticky footer"
      min-height: 100%;
      margin-bottom: -@login-content-height;
      padding-top: @grid-vertical * 1.5;
    }
    .banner:after {
      content: "";
      display: block;
      height: @login-content-height;
    }
    .content {
      height: @login-content-height;
      .button-container {
        padding-top: @grid-vertical / 2;
        padding-bottom: @grid-vertical / 2;
      }
    }
  }
  .icon-logo-with-text {
    padding-bottom: 25px;
  }
}

section#waiting {
  .column {
    .banner {
      margin-bottom: -@grid-vertical * 5.5;
    }
    .content {
      .instruction-text {
        h1 {
          line-height: 200%;
        }
        padding-bottom: @grid-vertical / 2;
      }
      #input-coupon {
        text-align: center;
      }
    }
  }
  .waiting-coupon {
    .banner {
      margin-bottom: -@grid-vertical * 6.5;
    }
  }
}

section#launch {
  .column {
    .content {
      div#email {
        padding-bottom: @grid-vertical;
      }
    }
  }
}

section#forgot, section#verify {
  .column {
    .banner {
      margin-bottom: -@grid-vertical * 7.5;
    }
    .content {
      .instruction-text {
        p {
          height: @grid-vertical / 2;
          vertical-align: middle;
        }
      }
    }
    #instructions-success {
      .instruction-text {
        padding-bottom: @grid-vertical;
      }
    }
  }
}


/*
**************************************************************************
# About
*/

// TODO: To be refactored, maybe .multiline-text could be created and universally used?
#about-help {
  line-height: @grid-vertical-half;
}


/*
**************************************************************************
# Simple content
*/

.simple-content {
  padding-bottom: @grid-vertical;
}

.simple-content:last-child {
  padding-bottom: 0;
}

.tasks-notes-container {
  padding-top: @grid-vertical-half;
}


/*
**************************************************************************
# Errors
*/

#errorMessage {
  h3 {
    text-align: center;
    padding-bottom: @grid-vertical;
  }
}

.add-element {
  // Add @vertical grid to make room for 'add [item]...' input
  padding-bottom: @grid-vertical-half;
}

{'fraction_non_alphanumeric': 0.20595270954089612, 'fraction_numerical': 0.016330849204158615, 'mean_word_length': 3.090413020980337, 'pattern_counts': {'":': 0, '<': 177, '<?xml version=': 0, '>': 175, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '931339', 'n_tokens_mistral': 14816, 'n_tokens_neox': 13901, 'n_words': 3412}