/**
 * Style declarations for media with narrow width defined in app-settings.css.less
 */

.unit(@units:1) {
  width: (@unitNarrowWidth + ((@units - 1) * (@unitNarrowWidth + @gridUnitGutter)));
}

#topbar,
#header,
#main-menu,
#navigation,
#billboard,
#placard,
#main-container,
#supplement,
#appendix,
#rider,
#footer,
#secondary-menu,
#theme-attribution {
  width: @gridContainerNarrowWidth;
  min-width: @gridContainerNarrowWidth;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
}

#branding,
#header-annex,
#main,
#sidebar-first,
#sidebar-second {
  .column();
}

.region-navigation {
  text-align: left;
  ul {
    text-align: left;
  }
}

#theme-attribution p,
#main-menu-list,
#secondary-menu-list,
body.no-sidebars #main {
  .unit(@gridTotalUnits);
}

#branding {
  .unit(@gridBranding);
}

#header-annex {
  .unit(@gridHeaderAnnex);
}

#sidebar-first {
  .unit(@gridSidebarFirst);
}

#sidebar-second {
  .unit(@gridSidebarSecond);
}

#node-aside {
  float: right;
  margin-left: @size2; /* LTR */
  .unit(@gridNodeAside);
}

body.two-sidebars #main {
  .unit(@gridTwoSidebarsMain);
}

body.sidebar-first #main {
  .unit(@gridSidebarFirstMain);
}

body.sidebar-second #main {
  .unit(@gridSidebarSecondMain);
}
