apply grid prefix to reordered selectors as well

// GRID CALCULATIONS
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// Note: We use !important statements for grid layout critical styles.
//       Like this you can define for example margin shorthands on a columns without affecting the grid indentation.

.spartan-grid() {
	// multiple mixins switch according to passed types

	// mixin for standard fluid grid with fluid gutter
	.spartan-create('fluid', 'fluid', @fixed-width, @fixed-gutter, @cols) {
		@spartan-width: 100%;

		// fluid gutter is calculated relatively to the static gutter in fixed grid width
		@spartan-row-gutter: round(percentage(@fixed-gutter / @fixed-width), @spartan-grid-precision);
		// percentage column gutter has to be slightly bigger than row indent because row indent changes the container width
		@spartan-col-gutter: round(percentage(@fixed-gutter / (@fixed-width + @fixed-gutter)), @spartan-grid-precision);

		// calculate the width of one grid column
		@spartan-one-col: (@spartan-width / @cols);

		// implement grid mixins with type dependent variables
		.spartan-grid > .spartan-grid-mixins(@spartan-width, @spartan-row-gutter, @spartan-col-gutter, @spartan-one-col);
	}

	// mixin for fluid grid and fixed gutter
	.spartan-create('fluid', 'fixed', @fixed-width, @fixed-gutter, @cols) {
		@spartan-width: 100%;

		// calculate the width of one grid column
		@spartan-one-col: (@spartan-width / @cols);

		// implement grid mixins with type dependent variables
		.spartan-grid > .spartan-grid-mixins(@spartan-width, @fixed-gutter, @fixed-gutter, @spartan-one-col);
	}

	// only one mixin for fixed grid needed because we cannot make fluid gutters in static grid
	.spartan-create('fixed', @gutter-type, @fixed-width, @fixed-gutter, @cols) {
		// calculate the width of one grid column
		@spartan-one-col: ((@fixed-width + @fixed-gutter) / @cols);

		// implement grid mixins with type dependent variables
		.spartan-grid > .spartan-grid-mixins(@fixed-width, @fixed-gutter, @fixed-gutter, @spartan-one-col);
	}

	// call switch mixin to calculate variables depending on grid configuration
	.spartan-grid > .spartan-create(@spartan-grid-type, @spartan-grid-gutter-type, @spartan-grid-fixed-width, @spartan-grid-fixed-gutter, @spartan-grid-max-cols);

	// unlock grid mixins with modified variables
	.spartan-grid-mixins(@width, @row-gutter, @col-gutter, @one-col) {
		.spartan-span-width(@num) {
			width: round((@one-col * @num), @spartan-grid-precision);
		}

		// indent grid columns either way with these mixins
		.spartan-indent(@num: 0) when (@num >= 0) {
			margin-left: round((@one-col * @num), @spartan-grid-precision);
		}

		.spartan-indent(@num: 0) when (@num < 0) {
			margin-left: -round((@one-col * @num), @spartan-grid-precision);
		}

		// used only on .col for uniquely applied gutter
		.spartan-col-indent(@num: 0) {
			padding-left: @col-gutter !important;
		}

		// used only on .row for proper negative indents
		.spartan-row-indent(@num: 0) {
			margin-left: -@col-gutter;
		}

		// visually manipulate grid column order with these mixins
		.spartan-push(@num) {
			left: round((@one-col * @num), @spartan-grid-precision);
		}

		.spartan-pull(@num) {
			right: round((@one-col * @num), @spartan-grid-precision);
		}
	}

	// less loop to generate grid classes
	.spartan-loop (@index, @class: item, @mixin: '') when (@index > 0) {
		// create the actual css selector
		.@{class}-@{index} {
			.spartan-grid > .spartan-apply(@mixin, @index);
		}

		// next iteration
		.spartan-grid > .spartan-loop(@index - 1, @class, @mixin);
	}

	// GRID CLASS GENERATOR
	////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	// mixins to call inside less loop
	// use standardized global mixins - because we have them...

	.spartan-apply('grid-span', @index) {
		.grid-span(@index);
	}

	.spartan-apply('grid-offset', @index) {
		.grid-offset(@index);
	}

	.spartan-apply('grid-push', @index) {
		.grid-push(@index);
	}

	.spartan-apply('grid-pull', @index) {
		.grid-pull(@index);
	}
}

// GLOBAL MIXINS
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// provide standardized, prefixed mixins
// values will depend on grid type
// (either percentage or pixel)

.grid-span(@num: 0) when (@num >= 0) {
	.spartan-span-width(@num);
}

.grid-offset(@num: 0) {
	// use important statement to overwrite default row margin applied with shorthands
	.spartan-indent(@num) !important;
}

.grid-push(@num: 0) when (@num >= 0) {
	.spartan-push(@num);
}

.grid-pull(@num: 0) when (@num >= 0) {
	.spartan-pull(@num);
}

// LAYOUT SETUP HELPERS
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// You can use the following mixins to easily set up responsive layouts.
// For grid layouts with non-equal span sizes use incrementing col-[integer] classes and apply sizes to each of these classes.
//
// .col-set([colum name], [column span width], [offset]):
// Standard mixin to set up a column in a responsive layout.
//
// To set up layouts with equal width columns you only specify the width in `.col-set-equal`.
//
// .col-set-equal([column span width]):
// Extended mixin to set up equal width columns and properly clear them at the same time
//
// Note: Every use of .col-set-equal() must be wrapped in a media query (even for smallest "mobile first" viewport).
//       Because else the `nth-child` selectors used in ` .col-set-equal()` for proper clearing would be passed on to all
//       other viewports/media queries in the layout.
//
// .col-clear([colums per line]):
// Use this to manually clear every nth column if columns differ in height.
// This ensures that a grid layout can have only [colums per line] columns on one horizontal grid line.

.grid-col-clear(@columns) when (isnumber(@columns)) {
	> .@{spartan-namespace}row > .@{spartan-namespace}col:nth-child(@{columns}n+1),
	> .@{spartan-namespace}col:nth-child(@{columns}n+1) {
		clear: left;
	}
}

.grid-col-set(@col-name; @col-span) {
	// apply styles to child columns directly or to columns within child rows
	> .@{spartan-namespace}row > .@{spartan-namespace}@{col-name},
	> .@{spartan-namespace}@{col-name} {
		.grid-span(@col-span);
	}
}

.grid-col-set(@col-name; @col-span; @offset) {
	// apply styles to child columns directly or to columns within child rows
	> .@{spartan-namespace}row > .@{spartan-namespace}@{col-name},
	> .@{spartan-namespace}@{col-name} {
		.grid-span(@col-span);
		.grid-offset(@offset);
	}
}

.grid-col-set-equal(@col-span) when (isnumber(@col-span)) {
	@spartan-clear: @spartan-grid-max-cols / @col-span;

	// use default col-set mixin to generate selector
	.grid-col-set(col; @col-span);

	// with equal columns, clear every nth element for proper alignment
	.grid-col-clear(@spartan-clear);
}

// GRID CREATION API
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// generate base grid classes valid for every setup
.grid-core(@prefix: g-) {
	@spartan-namespace: @prefix;

	// prefixed clearfix mixin from h5bp for grid only
	.grid-cf() {
		&:before,
		&:after {
			content: " ";
			display: table;
		}

		&:after {
			clear: both;
		}
	}

	// prefixed twitter bootstrap box sizing mixin
	.grid-box-sizing(@boxmodel: border-box) {
		-webkit-box-sizing: @boxmodel;
		-moz-box-sizing: @boxmodel;
		box-sizing: @boxmodel;
	}

	.grid-row-reorder() {
		> .@{spartan-namespace}col {
			position: relative;
		}
	}

	// base grid layout styles, valid for every grid setup
	.@{spartan-namespace}row,
	.@{spartan-namespace}col {
		display: block;
		margin-right: 0 !important;
		padding-right: 0 !important;
	}

	.@{spartan-namespace}row {
		.grid-cf();
		padding-left: 0 !important;

		// used to .push and .pull columns
		&.@{spartan-namespace}reorder {
			.grid-row-reorder();
		}
	}

	.@{spartan-namespace}col {
		// make sure we have the correct box sizing for fixed gutter grid
		.grid-box-sizing();
		float: left;
		margin-left: 0 !important;

		// spacer class for the rare occasion we have an "empty" column in a responsive grid layout
		// where the use of .offset is not possible because of realignment of columns
		&.@{spartan-namespace}spacer {
			min-height: 1px;
			visibility: hidden;
		}
	}
}

.grid-unlock(@config...) {
	.grid-gutter() {
		// base row and gutter styles must be set anew
		.@{spartan-namespace}row {
			.spartan-row-indent(0) !important;
		}

		.@{spartan-namespace}col {
			// one gutter indent for each column
			.spartan-col-indent(0) !important;
			// columns should per default span the whole width if none is set
			.grid-span(@spartan-grid-max-cols);
		}
	}

	@spartan-grid-fixed-width: extract(@config, 2);
	@spartan-grid-fixed-gutter: extract(@config, 3);
	@spartan-grid-max-cols: extract(@config, 5);

	@spartan-grid-type: extract(@config, 1);
	@spartan-grid-gutter-type: extract(@config, 4);

	@spartan-grid-precision: 4;

	// set up grid styles depending on an included config
	.spartan-grid();
	.grid-gutter();
}

.grid-generate() {
	// generate grid classes

	// Parameters:
	// 1) amount of iterations
	// 2) class selector prefix to generate
	// 3) mixin to apply to each selector
	//
	// Example:
	// .grid > .loop(12, class-prefix, 'mixin');
	//
	// NOTE: you can not use the generated classes themselves as mixins!

	.spartan-grid > .spartan-loop(@spartan-grid-max-cols, ~'@{spartan-namespace}span', 'grid-span');
	.spartan-grid > .spartan-loop(@spartan-grid-max-cols - 1, ~'@{spartan-namespace}offset', 'grid-offset');
	.spartan-grid > .spartan-loop(@spartan-grid-max-cols - 1, ~'@{spartan-namespace}push', 'grid-push');
	.spartan-grid > .spartan-loop(@spartan-grid-max-cols - 1, ~'@{spartan-namespace}pull', 'grid-pull');
}

.grid-bundle(@prefix: g-, @config...) {
	.grid-core(@prefix);
	.grid-unlock(@config);
	.grid-generate();
}

// GRID CALCULATIONS
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// Note: We use !important statements for grid layout critical styles.
//       Like this you can define for example margin shorthands on a columns without affecting the grid indentation.

.spartan-grid() {
	// multiple mixins switch according to passed types

	// mixin for standard fluid grid with fluid gutter
	.spartan-create('fluid', 'fluid', @fixed-width, @fixed-gutter, @cols) {
		@spartan-width: 100%;

		// fluid gutter is calculated relatively to the static gutter in fixed grid width
		@spartan-row-gutter: round(percentage(@fixed-gutter / @fixed-width), @spartan-grid-precision);
		// percentage column gutter has to be slightly bigger than row indent because row indent changes the container width
		@spartan-col-gutter: round(percentage(@fixed-gutter / (@fixed-width + @fixed-gutter)), @spartan-grid-precision);

		// calculate the width of one grid column
		@spartan-one-col: (@spartan-width / @cols);

		// implement grid mixins with type dependent variables
		.spartan-grid > .spartan-grid-mixins(@spartan-width, @spartan-row-gutter, @spartan-col-gutter, @spartan-one-col);
	}

	// mixin for fluid grid and fixed gutter
	.spartan-create('fluid', 'fixed', @fixed-width, @fixed-gutter, @cols) {
		@spartan-width: 100%;

		// calculate the width of one grid column
		@spartan-one-col: (@spartan-width / @cols);

		// implement grid mixins with type dependent variables
		.spartan-grid > .spartan-grid-mixins(@spartan-width, @fixed-gutter, @fixed-gutter, @spartan-one-col);
	}

	// only one mixin for fixed grid needed because we cannot make fluid gutters in static grid
	.spartan-create('fixed', @gutter-type, @fixed-width, @fixed-gutter, @cols) {
		// calculate the width of one grid column
		@spartan-one-col: ((@fixed-width + @fixed-gutter) / @cols);

		// implement grid mixins with type dependent variables
		.spartan-grid > .spartan-grid-mixins(@fixed-width, @fixed-gutter, @fixed-gutter, @spartan-one-col);
	}

	// call switch mixin to calculate variables depending on grid configuration
	.spartan-grid > .spartan-create(@spartan-grid-type, @spartan-grid-gutter-type, @spartan-grid-fixed-width, @spartan-grid-fixed-gutter, @spartan-grid-max-cols);

	// unlock grid mixins with modified variables
	.spartan-grid-mixins(@width, @row-gutter, @col-gutter, @one-col) {
		.spartan-span-width(@num) {
			width: round((@one-col * @num), @spartan-grid-precision);
		}

		// indent grid columns either way with these mixins
		.spartan-indent(@num: 0) when (@num >= 0) {
			margin-left: round((@one-col * @num), @spartan-grid-precision);
		}

		.spartan-indent(@num: 0) when (@num < 0) {
			margin-left: -round((@one-col * @num), @spartan-grid-precision);
		}

		// used only on .col for uniquely applied gutter
		.spartan-col-indent(@num: 0) {
			padding-left: @col-gutter !important;
		}

		// used only on .row for proper negative indents
		.spartan-row-indent(@num: 0) {
			margin-left: -@col-gutter;
		}

		// visually manipulate grid column order with these mixins
		.spartan-push(@num) {
			left: round((@one-col * @num), @spartan-grid-precision);
		}

		.spartan-pull(@num) {
			right: round((@one-col * @num), @spartan-grid-precision);
		}
	}

	// less loop to generate grid classes
	.spartan-loop (@index, @class: item, @mixin: '') when (@index > 0) {
		// create the actual css selector
		.@{class}-@{index} {
			.spartan-grid > .spartan-apply(@mixin, @index);
		}

		// next iteration
		.spartan-grid > .spartan-loop(@index - 1, @class, @mixin);
	}

	// GRID CLASS GENERATOR
	////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	// mixins to call inside less loop
	// use standardized global mixins - because we have them...

	.spartan-apply('grid-span', @index) {
		.grid-span(@index);
	}

	.spartan-apply('grid-offset', @index) {
		.grid-offset(@index);
	}

	.spartan-apply('grid-push', @index) {
		.grid-push(@index);
	}

	.spartan-apply('grid-pull', @index) {
		.grid-pull(@index);
	}
}

// GLOBAL MIXINS
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// provide standardized, prefixed mixins
// values will depend on grid type
// (either percentage or pixel)

.grid-span(@num: 0) when (@num >= 0) {
	.spartan-span-width(@num);
}

.grid-offset(@num: 0) {
	// use important statement to overwrite default row margin applied with shorthands
	.spartan-indent(@num) !important;
}

.grid-push(@num: 0) when (@num >= 0) {
	.spartan-push(@num);
}

.grid-pull(@num: 0) when (@num >= 0) {
	.spartan-pull(@num);
}

// LAYOUT SETUP HELPERS
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// You can use the following mixins to easily set up responsive layouts.
// For grid layouts with non-equal span sizes use incrementing col-[integer] classes and apply sizes to each of these classes.
//
// .col-set([colum name], [column span width], [offset]):
// Standard mixin to set up a column in a responsive layout.
//
// To set up layouts with equal width columns you only specify the width in `.col-set-equal`.
//
// .col-set-equal([column span width]):
// Extended mixin to set up equal width columns and properly clear them at the same time
//
// Note: Every use of .col-set-equal() must be wrapped in a media query (even for smallest "mobile first" viewport).
//       Because else the `nth-child` selectors used in ` .col-set-equal()` for proper clearing would be passed on to all
//       other viewports/media queries in the layout.
//
// .col-clear([colums per line]):
// Use this to manually clear every nth column if columns differ in height.
// This ensures that a grid layout can have only [colums per line] columns on one horizontal grid line.

.grid-col-clear(@columns) when (isnumber(@columns)) {
	> .@{spartan-namespace}row > .@{spartan-namespace}col:nth-child(@{columns}n+1),
	> .@{spartan-namespace}col:nth-child(@{columns}n+1) {
		clear: left;
	}
}

.grid-col-set(@col-name; @col-span) {
	// apply styles to child columns directly or to columns within child rows
	> .@{spartan-namespace}row > .@{spartan-namespace}@{col-name},
	> .@{spartan-namespace}@{col-name} {
		.grid-span(@col-span);
	}
}

.grid-col-set(@col-name; @col-span; @offset) {
	// apply styles to child columns directly or to columns within child rows
	> .@{spartan-namespace}row > .@{spartan-namespace}@{col-name},
	> .@{spartan-namespace}@{col-name} {
		.grid-span(@col-span);
		.grid-offset(@offset);
	}
}

.grid-col-set-equal(@col-span) when (isnumber(@col-span)) {
	@spartan-clear: @spartan-grid-max-cols / @col-span;

	// use default col-set mixin to generate selector
	.grid-col-set(col; @col-span);

	// with equal columns, clear every nth element for proper alignment
	.grid-col-clear(@spartan-clear);
}

// GRID CREATION API
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// generate base grid classes valid for every setup
.grid-core(@prefix: g-) {
	@spartan-namespace: @prefix;

	// prefixed clearfix mixin from h5bp for grid only
	.grid-cf() {
		&:before,
		&:after {
			content: " ";
			display: table;
		}

		&:after {
			clear: both;
		}
	}

	// prefixed twitter bootstrap box sizing mixin
	.grid-box-sizing(@boxmodel: border-box) {
		-webkit-box-sizing: @boxmodel;
		-moz-box-sizing: @boxmodel;
		box-sizing: @boxmodel;
	}

	.grid-row-reorder() {
		> .col {
			position: relative;
		}
	}

	// base grid layout styles, valid for every grid setup
	.@{spartan-namespace}row,
	.@{spartan-namespace}col {
		display: block;
		margin-right: 0 !important;
		padding-right: 0 !important;
	}

	.@{spartan-namespace}row {
		.grid-cf();
		padding-left: 0 !important;

		// used to .push and .pull columns
		&.ordered {
			.grid-row-reorder();
		}
	}

	.@{spartan-namespace}col {
		// make sure we have the correct box sizing for fixed gutter grid
		.grid-box-sizing();
		float: left;
		margin-left: 0 !important;

		// spacer class for the rare occasion we have an "empty" column in a responsive grid layout
		// where the use of .offset is not possible because of realignment of columns
		&.spacer {
			min-height: 1px;
			visibility: hidden;
		}
	}
}

.grid-unlock(@config...) {
	.grid-gutter() {
		// base row and gutter styles must be set anew
		.@{spartan-namespace}row {
			.spartan-row-indent(0) !important;
		}

		.@{spartan-namespace}col {
			// one gutter indent for each column
			.spartan-col-indent(0) !important;
			// columns should per default span the whole width if none is set
			.grid-span(@spartan-grid-max-cols);
		}
	}

	@spartan-grid-fixed-width: extract(@config, 2);
	@spartan-grid-fixed-gutter: extract(@config, 3);
	@spartan-grid-max-cols: extract(@config, 5);

	@spartan-grid-type: extract(@config, 1);
	@spartan-grid-gutter-type: extract(@config, 4);

	@spartan-grid-precision: 4;

	// set up grid styles depending on an included config
	.spartan-grid();
	.grid-gutter();
}

.grid-generate() {
	// generate grid classes

	// Parameters:
	// 1) amount of iterations
	// 2) class selector prefix to generate
	// 3) mixin to apply to each selector
	//
	// Example:
	// .grid > .loop(12, class-prefix, 'mixin');
	//
	// NOTE: you can not use the generated classes themselves as mixins!

	.spartan-grid > .spartan-loop(@spartan-grid-max-cols, ~'@{spartan-namespace}span', 'grid-span');
	.spartan-grid > .spartan-loop(@spartan-grid-max-cols - 1, ~'@{spartan-namespace}offset', 'grid-offset');
	.spartan-grid > .spartan-loop(@spartan-grid-max-cols - 1, ~'@{spartan-namespace}push', 'grid-push');
	.spartan-grid > .spartan-loop(@spartan-grid-max-cols - 1, ~'@{spartan-namespace}pull', 'grid-pull');
}

.grid-bundle(@prefix: g-, @config...) {
	.grid-core(@prefix);
	.grid-unlock(@config);
	.grid-gutter();
	.grid-generate();
}


Remove flex-X utilities.

Remove flex-X utilities.

.flex { display: flex; }
.flex-top { align-items: flex-start; }

.flex-col {
  display: flex;
  flex-direction: column;

  .flex-reverse {
    flex-direction: column-reverse;
  }
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-y-center {
  display: flex;
  align-items: center;
}

.flex-y-end {
  display: flex;
  align-items: flex-end;
}

.flex-y-baseline {
  display: flex;
  align-items: baseline;
}

.flex-right {
  justify-content: flex-end;
}

.flex-spaced {
  display: flex;
  justify-content: space-between;
}

.flex-around {
  display: flex;
  justify-content: space-around;
}

.flex-fill { max-width: 100%; flex: 1; }
.flex-no-shrink { flex-shrink: 0; }
.flex-inline { display: inline-flex; }

.flex-reverse { flex-direction: row-reverse; }
.flex-wrap { flex-wrap: wrap; }

.responsive({
  &flex { .flex; }
  &flex-top { .flex-top; }
  &flex-col { .flex-col; }
  &flex-center { .flex-center; }
  &flex-y-center { .flex-y-center; }
  &flex-y-end { .flex-y-end; }
  &flex-y-baseline { .flex-y-baseline; }
  &flex-right { .flex-right; }
  &flex-spaced { .flex-spaced; }
  &flex-around { .flex-around; }
  &flex-fill { .flex-fill; }
  &flex-no-shrink { .flex-no-shrink; }
  &flex-inline { .flex-inline; }
  &flex-reverse { .flex-reverse; }
  &flex-wrap { .flex-wrap; }
});

.flex { display: flex; }
.flex-top { align-items: flex-start; }

.flex-col {
  display: flex;
  flex-direction: column;

  .flex-reverse {
    flex-direction: column-reverse;
  }
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-y-center {
  display: flex;
  align-items: center;
}

.flex-y-end {
  display: flex;
  align-items: flex-end;
}

.flex-y-baseline {
  display: flex;
  align-items: baseline;
}

.flex-right {
  justify-content: flex-end;
}

.flex-spaced {
  display: flex;
  justify-content: space-between;
}

.flex-around {
  display: flex;
  justify-content: space-around;
}

.flex-fill { max-width: 100%; flex: 1; }
.flex-no-shrink { flex-shrink: 0; }
.flex-inline { display: inline-flex; }

.flex-reverse { flex-direction: row-reverse; }
.flex-wrap { flex-wrap: wrap; }

.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.flex-3 { flex: 3; }
.flex-4 { flex: 4; }
.flex-5 { flex: 5; }
.flex-6 { flex: 6; }
.flex-7 { flex: 7; }
.flex-8 { flex: 8; }
.flex-9 { flex: 9; }
.flex-10 { flex: 10; }
.flex-11 { flex: 11; }
.flex-12 { flex: 12; }

.responsive({
  &flex { .flex; }
  &flex-top { .flex-top; }
  &flex-col { .flex-col; }
  &flex-center { .flex-center; }
  &flex-x-center  { .flex-x-center ; }
  &flex-y-center { .flex-y-center; }
  &flex-y-end { .flex-y-end; }
  &flex-y-baseline { .flex-y-baseline; }
  &flex-right { .flex-right; }
  &flex-spaced { .flex-spaced; }
  &flex-around { .flex-around; }
  &flex-fill { .flex-fill; }
  &flex-no-shrink { .flex-no-shrink; }
  &flex-inline { .flex-inline; }
  &flex-reverse { .flex-reverse; }
  &flex-wrap { .flex-wrap; }
  &flex-1 { .flex-1; }
  &flex-2 { .flex-2; }
  &flex-3 { .flex-3; }
  &flex-4 { .flex-4; }
  &flex-5 { .flex-5; }
  &flex-6 { .flex-6; }
  &flex-7 { .flex-7; }
  &flex-8 { .flex-8; }
  &flex-9 { .flex-9; }
  &flex-10 { .flex-10; }
  &flex-11 { .flex-11; }
  &flex-12 { .flex-12; }
});


set cursor to pointer

set cursor to pointer

// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/stylesheets/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";
@atom-ternjs-padding: 20px;
@atom-ternjs-margin: 20px;
@atom-ternjs-height: 180px;

atom-ternjs-reference > div > div,
atom-ternjs-rename > div > div {

  max-height: @atom-ternjs-height;
  overflow-y: auto;
}

atom-ternjs-rename {

  > div {

    padding: 0 0 @atom-ternjs-padding @atom-ternjs-padding;
  }

  atom-text-editor {

    max-width: 30%;
  }

  .mt {

    margin-top: 10px;
  }
}

atom-ternjs-reference,
atom-ternjs-rename,
atom-ternjs-config {

  > div {

    position: relative;
  }
}

atom-ternjs-reference {

  > div {

    > div {

      padding: 0 @atom-ternjs-padding @atom-ternjs-padding;
    }
  }

  ul {

    list-style: none;
    padding-left: 0;
  }

  li {

    cursor: pointer;
    padding: 6px 0;

    &:hover {

      background: rgba(100, 100, 100, 0.3);
    }
  }

  h3 {

    margin: 0;

    > span {

      display: block;
      float: left;

      &:first-child {

        width: 70%;
      }

      &:nth-child(2) {

        width: 30%;
        text-align: right;
      }
    }
  }

  .clear {

    clear: left;
  }

  strong {

    color: @text-color-info;
  }

  .darken {

    color: darken(@text-color, 20%);
  }
}

atom-ternjs-type {

  background: fade(@overlay-background-color, 90%);
  border: 1px solid fade(@base-border-color, 20%);
  color: @text-color;
  border-radius: @component-border-radius;
  padding: 5px;
  position: relative;
  span {

    display: inline-block;
    padding: 10px 0 0;
  }
  .current-param {

    font-weight: 500;
    color: @text-color-highlight;
  }
}

atom-text-editor::shadow .atom-ternjs-definition-marker {

  div {

    transition: opacity 0.75s ease;
    opacity: 0;
    background: @background-color-selected;
    border-bottom: 4px solid @background-color-warning;
  }

  &.active {

    div {

      opacity: 1;
    }
  }
}

.atom-ternjs-reference-close,
.atom-ternjs-rename-close {

  margin: @atom-ternjs-padding;
  position: absolute;
  right: 0;
  top: 0;
}

.atom-ternjs-config-close {

  margin: 20px 0 0;
}

.atom-ternjs-config-panel {

  overflow-y: auto;
  padding: @atom-ternjs-padding;
}

.atom-ternjs-config {

  atom-text-editor {

    width: calc(~"100% - 60px");
  }

  button {

    + button {

      margin-left: 10px;
    }
  }

  .add,
  .sub {

    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .add {

    right: 0;
  }

  .sub {

    right: 30px;
  }

  .input-wrapper {

    position: relative;
  }

  .input-wrapper {

    &:first-of-type {

      .sub {

        display: none;
      }
    }

    + .input-wrapper {

      margin-top: 10px;
    }
  }

  .libs {

    span {

      margin-right: 10px;
    }

    .input-wrapper {

      display: inline-block;

      + .input-wrapper {

        margin-left: 20px;
      }
    }
  }

  .input-wrapper:not(:last-of-type) {

    .add {

      display: none;
    }
  }
}

// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/stylesheets/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";
@atom-ternjs-padding: 20px;
@atom-ternjs-margin: 20px;
@atom-ternjs-height: 180px;

atom-ternjs-reference > div > div,
atom-ternjs-rename > div > div {

  max-height: @atom-ternjs-height;
  overflow-y: auto;
}

atom-ternjs-rename {

  > div {

    padding: 0 0 @atom-ternjs-padding @atom-ternjs-padding;
  }

  atom-text-editor {

    max-width: 30%;
  }

  .mt {

    margin-top: 10px;
  }
}

atom-ternjs-reference,
atom-ternjs-rename,
atom-ternjs-config {

  > div {

    position: relative;
  }
}

atom-ternjs-reference {

  > div {

    > div {

      padding: 0 @atom-ternjs-padding @atom-ternjs-padding;
    }
  }

  ul {

    list-style: none;
    padding-left: 0;
  }

  li {

    cursor: pointer;
    padding: 6px 0;

    &:hover {

      background: rgba(100, 100, 100, 0.3);
    }
  }

  h3 {

    margin: 0;

    > span {

      display: block;
      float: left;

      &:first-child {

        width: 70%;
      }

      &:nth-child(2) {

        width: 30%;
        text-align: right;
      }
    }
  }

  .clear {

    clear: left;
  }

  strong {

    color: @text-color-info;
  }

  .darken {

    color: darken(@text-color, 20%);
  }
}

atom-ternjs-type {

  background: fade(@overlay-background-color, 90%);
  border: 1px solid fade(@base-border-color, 20%);
  color: @text-color;
  border-radius: @component-border-radius;
  padding: 5px;
  position: relative;
  span {

    display: inline-block;
    padding: 10px 0 0;
  }
  .current-param {

    font-weight: 500;
    color: @text-color-highlight;
  }
}

atom-text-editor::shadow .atom-ternjs-definition-marker {

  div {

    transition: opacity 0.75s ease;
    opacity: 0;
    background: @background-color-selected;
    border-bottom: 4px solid @background-color-warning;
  }

  &.active {

    div {

      opacity: 1;
    }
  }
}

.atom-ternjs-reference-close,
.atom-ternjs-rename-close {

  margin: @atom-ternjs-padding;
  position: absolute;
  right: 0;
  top: 0;
}

.atom-ternjs-config-close {

  margin: 20px 0 0;
}

.atom-ternjs-config-panel {

  overflow-y: auto;
  padding: @atom-ternjs-padding;
}

.atom-ternjs-config {

  atom-text-editor {

    width: calc(~"100% - 60px");
  }

  button {

    + button {

      margin-left: 10px;
    }
  }

  .add,
  .sub {

    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .add {

    right: 0;
  }

  .sub {

    right: 30px;
  }

  .input-wrapper {

    position: relative;
  }

  .input-wrapper {

    &:first-of-type {

      .sub {

        display: none;
      }
    }

    + .input-wrapper {

      margin-top: 10px;
    }
  }

  .libs {

    span {

      margin-right: 10px;
    }

    .input-wrapper {

      display: inline-block;

      + .input-wrapper {

        margin-left: 20px;
      }
    }
  }

  .input-wrapper:not(:last-of-type) {

    .add {

      display: none;
    }
  }
}


restore ingored status with image background

//config variables (defined in isotope-ui.coffee) are passed on in attributes
//this stylesheet does the css interpretation

//font family
[isotope-ui-font='Cantarell'] {
  &,
  atom-workspace {
    font-family: 'Cantarell', @font-family;
  }
}
[isotope-ui-font='Clear Sans'] {
  &,
  atom-workspace {
    font-family: 'Clear Sans', @font-family;
  }
}
[isotope-ui-font='Fira Sans'] {
  &,
  atom-workspace {
    font-family: 'Fira Sans', @font-family;
  }
}
[isotope-ui-font='Open Sans'] {
  &,
  atom-workspace {
    font-family: 'Open Sans', @font-family;
  }
}
[isotope-ui-font='Oxygen'] {
  &,
  atom-workspace {
    font-family: 'Oxygen', @font-family;
  }
}
[isotope-ui-font='Roboto'] {
  &,
  atom-workspace {
    font-family: 'Roboto', @font-family;
  }
}
[isotope-ui-font='Source Sans Pro'] {
  &,
  atom-workspace {
    font-family: 'Source Sans Pro', @font-family;
  }
}
[isotope-ui-font='Ubuntu']  {
  &,
  atom-workspace {
    font-family: 'Ubuntu', @font-family;
  }
}
[isotope-ui-font='System Default']  {
  &,
  atom-workspace {
    font-family: @font-family;
  }
}

//font weight
[isotope-ui-fontweight='Extra light / Thin'] {
  font-weight: 200;
}
[isotope-ui-fontweight='Light'] {
  font-weight: 300;
}
[isotope-ui-fontweight='Regular'] {
  font-weight: 400;
}

atom-workspace:not(.zen) { // maintain zen
  &.isotope-ui-bg-color,
  &.isotope-ui-bg-gradient,
  &.isotope-ui-bg-image {
    border: none;
    padding-left: @modular-scale-xxs * 1rem;
    padding-right: @modular-scale-xxs * 1rem;

    /*
    These selectors aren't reliable, but I haven't found out
    how to target these UI elements reliably
    and it seems to work just fine
    */

    // make tree-view transparent
    .tool-panel.tool-panel:first-child:not(.panel-bottom),
    // make tab-bar transparent
    .panes atom-pane,
    .tab-bar,
    // make status-bar transparent
    .status-bar,
    .tool-panel.tool-panel.panel-bottom:last-child {
      background-color: transparent !important; //also overrule an inline style
    }
  }

  &.isotope-ui-bg-gradient {
    // the grain overlay makes the gradient brighter, so we compensate
    &.isotope-ui-bg-gradient {
      background-image: linear-gradient(
        lighten( spin(@app-background-color, 66%), 5%) 0%,
        darken(@app-background-color, 8%) 100%);
    }

    &:before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-image: url(data:image/png;base64,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);
      opacity: .20;
    }
  }

  &.isotope-ui-bg-image {
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(atom://isotope-ui/resources/images/hubble.jpg);

    // make text stand out against any background
    .status-bar,
    .tree-view.list-tree, // sadly loses status-indication
    .tab-bar .tab:not(.active) {
      & * {
        color: #fafafa;
        text-shadow: 0 0 3px rgba(0,0,0,.6);
      }
    }
    .background-tips {
        color: @base-fg;
        text-shadow: 0 0 3px rgba(0,0,0,.6);
    }
    // hide custom status indicator
    .status-bar .buffer-modified:after {
      display: none;
    }

    // restore tree-view selected item color
    .tree-view.list-tree li {
      &.selected > span,
      &:not(.list-nested-item).selected > span,
      &.list-nested-item.selected > .list-item > span {
        // only use @color if it has enough contrast with the background
        color: @base-fg;
        text-shadow: none;
      }

      // replace status indication because we don't have different colors anymore
      &.status-modified,
      &:not(.list-nested-item).status-modified,
      &.list-nested-item.status-modified > .list-item {
        > .name:after {
          content: ' *';
        }
      }
      &.status-added,
      &:not(.list-nested-item).status-added,
      &.list-nested-item.status-added > .list-item {
        > .name:after {
          content: ' +';
        }
      }
      &:not(.list-nested-item).status-ignored,
      &.list-nested-item.status-ignored > .list-item {
        opacity: 0.66;
      }
    }
  }
}

//config variables (defined in isotope-ui.coffee) are passed on in attributes
//this stylesheet does the css interpretation

//font family
[isotope-ui-font='Cantarell'] {
  &,
  atom-workspace {
    font-family: 'Cantarell', @font-family;
  }
}
[isotope-ui-font='Clear Sans'] {
  &,
  atom-workspace {
    font-family: 'Clear Sans', @font-family;
  }
}
[isotope-ui-font='Fira Sans'] {
  &,
  atom-workspace {
    font-family: 'Fira Sans', @font-family;
  }
}
[isotope-ui-font='Open Sans'] {
  &,
  atom-workspace {
    font-family: 'Open Sans', @font-family;
  }
}
[isotope-ui-font='Oxygen'] {
  &,
  atom-workspace {
    font-family: 'Oxygen', @font-family;
  }
}
[isotope-ui-font='Roboto'] {
  &,
  atom-workspace {
    font-family: 'Roboto', @font-family;
  }
}
[isotope-ui-font='Source Sans Pro'] {
  &,
  atom-workspace {
    font-family: 'Source Sans Pro', @font-family;
  }
}
[isotope-ui-font='Ubuntu']  {
  &,
  atom-workspace {
    font-family: 'Ubuntu', @font-family;
  }
}
[isotope-ui-font='System Default']  {
  &,
  atom-workspace {
    font-family: @font-family;
  }
}

//font weight
[isotope-ui-fontweight='Extra light / Thin'] {
  font-weight: 200;
}
[isotope-ui-fontweight='Light'] {
  font-weight: 300;
}
[isotope-ui-fontweight='Regular'] {
  font-weight: 400;
}

atom-workspace:not(.zen) { // maintain zen
  &.isotope-ui-bg-color,
  &.isotope-ui-bg-gradient,
  &.isotope-ui-bg-image {
    border: none;
    padding-left: @modular-scale-xxs * 1rem;
    padding-right: @modular-scale-xxs * 1rem;

    /*
    These selectors aren't reliable, but I haven't found out
    how to target these UI elements reliably
    and it seems to work just fine
    */

    // make tree-view transparent
    .tool-panel.tool-panel:first-child:not(.panel-bottom),
    // make tab-bar transparent
    .panes atom-pane,
    .tab-bar,
    // make status-bar transparent
    .status-bar,
    .tool-panel.tool-panel.panel-bottom:last-child {
      background-color: transparent !important; //also overrule an inline style
    }
  }

  &.isotope-ui-bg-gradient {
    // the grain overlay makes the gradient brighter, so we compensate
    &.isotope-ui-bg-gradient {
      background-image: linear-gradient(
        lighten( spin(@app-background-color, 66%), 5%) 0%,
        darken(@app-background-color, 8%) 100%);
    }

    &:before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-image: url(data:image/png;base64,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);
      opacity: .20;
    }
  }

  &.isotope-ui-bg-image {
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(atom://isotope-ui/resources/images/hubble.jpg);

    // make text stand out against any background
    .status-bar,
    .tree-view.list-tree, // sadly loses status-indication
    .tab-bar .tab:not(.active) {
      & * {
        color: #fafafa;
        text-shadow: 0 0 3px rgba(0,0,0,.6);
      }
    }
    .background-tips {
        color: @base-fg;
        text-shadow: 0 0 3px rgba(0,0,0,.6);
    }
    // hide custom status indicator
    .status-bar .buffer-modified:after {
      display: none;
    }

    // restore tree-view selected item color
    .tree-view.list-tree li {
      &.selected > span,
      &:not(.list-nested-item).selected > span,
      &.list-nested-item.selected > .list-item > span {
        // only use @color if it has enough contrast with the background
        color: @base-fg;
        text-shadow: none;
      }

      // replace status indication because we don't have different colors anymore
      &.status-modified,
      &:not(.list-nested-item).status-modified,
      &.list-nested-item.status-modified > .list-item {
        > .name:after {
          content: ' *';
        }
      }
      &.status-added,
      &:not(.list-nested-item).status-added,
      &.list-nested-item.status-added > .list-item {
        > .name:after {
          content: ' +';
        }
      }
    }
  }
}


remove legacy bootstrap hack. @JB, we should discuss this change, but essentially, when .container was reset to padding:0, columns and rows were not reset accordingly. We need to either revise all column and row margins and paddings, or remove the padding: 0 override. Because this is a somewhat cascading change which we should discuss it a bit further.

@import "_less.less";
/////////////////////////////////
// Google Fonts
@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,400italic|Source+Serif+Pro:400,600,700);

/////////////////////////////////
// Bootstrap overrides
// .container {
//   padding: 0; // remove 15px padding on left and right so elements actually lay on the grid
// }

/////////////////////////////////
// Elements

// normalize x-heights. Set correct x-height / cap height ratio for source sans and source serif, which allows for more graceful fallbacks on browsers that support it.
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-size-adjust: 0.475;
}

// Adjust margins to be more comfortable across headlines and sections
h2, .h2, h3, .h3 {
  margin-top: 1.25em;
  margin-bottom: .5em;
  section &, .well & {
    margin-top: .75em;
    &:first-child {
      margin-top: 0; // remove margins from first element in section
    }
  }
}

h4, .h4, h5, .h5, h6, .h6 {
  margin-top: 1.25em;
  margin-bottom:.25em;
  section &, .well & {
    margin-top: .75em;
    &:first-child {
      margin-top: 0; // remove margins from first element in section
    }
  }
}

h1, .h1 {
  .responsive-type(h1);
}

h2, .h2 {
  .responsive-type(h2);
}

h3, .h3 {
  .responsive-type(h3);
}

h4, .h4 {
  .responsive-type(h4);
}

h5, h6, .h5, .h6 {
  .responsive-type(base);
}

p, ul, ol {
  font-family: @font-family-serif;
  .responsive-type(base);
  margin-bottom: 1em;

  section &, .well & {
    &:last-child {
      margin-bottom: .5em; // adjust bottom margin when one of these elements is the last child of a well or section
    }
  }
}

li {
  margin-bottom: .5em;
  .navbar & {
    margin-bottom: 0; // remove margin bottom in navbar
  }
  .footer & {
    margin-bottom: .125em; // add a slight margin bottom on footer
  }
}

p {
  &.lead{
    margin-bottom: 1em;
    font-size: 1.4em;
    a {
      font-weight: 400;
    }
  }
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {

  .fa {
    margin-right: 7px;
  }

  a {
    text-decoration: none;
    color: @su-red-text;
  }
}

a {
  font-weight: 600;
}

a, a:hover, a:active {
  outline: 0;
}

a:focus,
button:focus {
  .tab-focus();
}

.external-link {
  &:after {
    content: "\f08e" !important;
    font-family: FontAwesome !important;
    font-size: 0.6em !important;
    font-weight: 200 !important;
    margin-left: .6em !important;
    vertical-align: middle !important;
  }
}
.see-all-link {
  &:after {
    content: "\f138";
    font-family: FontAwesome;
    font-size: 0.7125em;
    margin-left: .4em;
    vertical-align: middle;
  }
}

div:focus { // for accessbility, some div's get focus - don't outline them
  outline: none;
}

dl {
  margin-top: 5px;
}

hr {
  border-color: @su-beige-40;
}

label {
  font-weight: 600;
}

input::-webkit-input-placeholder {
  color: rgba(0, 0, 0, .6) !important;
}

input::-moz-placeholder { /* Firefox 19+ */
  color: rgba(0, 0, 0, 1) !important;
}

input:-moz-placeholder { /* Firefox 18- */
  color: rgba(0, 0, 0, 1) !important;
}

input:-ms-input-placeholder {
  color: rgba(0, 0, 0, .6) !important;
}

/////////////////////////////////
// General classes, id's
.topics-buttons {
  a {
    color: @su-cool-gray;
    .btn-category {
      margin-bottom: 5px;
    }
  }
}

.abs-right,
.abs-left {
  .center-vertical(absolute);
}
.abs-left {
  left: 10px;
}
.abs-right {
  right: 10px;
}

.btn {
  line-height: 1;
  padding: 0; // put the padding on the  tag so the whole button is clickable
  font-size: @font-size-small;

  a { // format when a is nested within, e.g.

    display: block;
    width: 100%;
    height: 100%;
    padding: 0.75em;
    font-weight: normal;
    text-transform: capitalize;
    text-decoration: none;

    &:hover, &:focus, &:active {
      text-decoration: none;
    }
  }
  a& { // format when .btn is directly on the  or the <input>, i.e.
    padding: 0.5em 0.75em;
    font-weight: normal;
    text-decoration: none;
  }
  .modal &,
  input& {
    padding: 0.5em 0.75em;
  }
}
.btn-primary {
  .su-btn(@su-red);
}
.btn-one {
  .su-btn(@su-mint);
}

.btn-two {
  .su-btn(@su-lagunita);
}

.btn-three {
  .su-btn(@su-sage-gray);
  margin-bottom: 10px;
}

.btn-four {
  .su-btn(@su-red);
}

.btn-su-alert {
  .su-btn(@su-warm-gray);
}
.btn-light {
  .su-btn(transparent, @su-black, @su-cool-gray, @su-cool-gray, white);
}

.btn-category {
  .su-btn(#C0C0C0, @su-black, #C0C0C0, @su-cool-gray, white);
  margin-bottom: 5px;
  margin-right: 2px;
}

.btn-u {
  display: inline-block;
  position: relative;
  padding: 8px 13px;
  border: 0;
  cursor: pointer;
  background: @su-beige-40;
  color: @btn-txt;
  .font-size-em(15); // 15px expressed as em's
  text-decoration: none;
  text-shadow: none;

  &:hover {
    color: @su-beige-05;
    background: @su-warm-gray;
    text-decoration: none;
    .transition(all 0.4s ease-in-out);
  }

  i {
    .font-size-em(17; 15);
  }
}

.small-square {
  color: #5f574f;
  position: absolute;
  top: 0;
  margin: 0 0 0 -15px;
  content: '\25AA';
}

.color-red {
  color: @su-red-text;
}

.uppercase {
  text-transform: uppercase;
}

#hero-image img {
  .img-responsive;
}

.info-box {
  margin: 0 15px 30px;
  display: table;

  .icon-container,
  .text-container {
    display: table-cell;
    vertical-align: top;
    min-width: 65px;
  }

  .icon-container {
    text-align: center;
  }
  .text-container {
    padding-left: 15px;
  }

  .offset {
    padding-left: 65px;
  }

  h2 {
    .font-size-em(18);
    font-weight: normal;
    line-height: 1.2em;
    padding: 5px 0;
    text-transform: uppercase;
    color: @su-red-text;
  }

  ul {
    padding-left: 0;
    list-style: none;

    li {
      line-height: 1.1em;
      margin-bottom: 10px;
    }
  }

  dt {
    font-size: 1.1em;
  }

  dt, li {
    a {
      text-decoration: none;
      &:hover, &:active {
        text-decoration: underline;
      }
    }
  }
}

.margin-bottom-5 {
  .margin-bottom(5);
}

.margin-bottom-10 {
  .margin-bottom(10);
}

.margin-bottom-20 {
  .margin-bottom(20);
}

.margin-bottom-25 {
  .margin-bottom(25);
}

.margin-bottom-30 {
  .margin-bottom(30);
}

.margin-bottom-40 {
  .margin-bottom(40);
}

.margin-bottom-50 {
  .margin-bottom(50);
}

.margin-bottom-60 {
  .margin-bottom(60);
}

.navbar {
  border: none;
}

/*
.screen-reader { // text that should be read by a screen reader but not rendered on screen
                 display: inline-block;
                 position: absolute;
                 font-size: 0;
                 line-height: 0;
                 height: 1px;
                 overflow: hidden;
}
*/

ul.vbar {
  list-style: none;
  padding: 0;

  li {
    display: inline-block;
    padding: 0 0.5em;
    border-right: 1px solid @text-color;
  }
  li:first-of-type {
    padding-left: 0;
  }
  li:last-of-type {
    border-right: none;
  }
}

.well {
  box-shadow: 0 0 8px #d5d0c0;
  border: medium none;
  border-radius: 0;
  padding: 20px;
  margin-bottom: 3em;
  background: white;
  h2 {
    padding: 10px 0 4px;
    font-size: 1.2em;
    //text-transform: uppercase;
    border-bottom: none;
    color: @su-red-text;
  }
  h3 {
    font-size: 1em;
    //text-transform: uppercase;
    font-weight: 700;
  }

  ul {
    list-style-type: square;
    list-style-image: url('../images/bullet.gif');

    li {
      position: relative;
      margin-bottom: 7px;
      line-height: 1.1em;
    }
  }

  img {
    .img-responsive;
    background-color: rgba(0, 0, 0, 0);
    margin-bottom: 6px;
    padding: 2px;
  }
  &.well-calendar-list {
    h3 {
      display: inline-block;
      padding-right: 4px;
    }
    ul {
      display: inline-block;
      padding: 0;
      list-style-type: none;
      li {
        display: inline-block;
        padding-right: 3px;
      }
    }

  }
}

.info-box,
.well {
  .fa {
    color: #DAD7CB;
    margin: 0;
  }
}

.embed-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  // padding-top: 25px;
  height: 0;
  iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

// Media Captions
.media-attrib,
.media-caption {
  font-family: @font-family-sans-serif;
  font-size: @font-size-small;
}
.media-attrib {
  font-style:italic;
  text-align:right;
  p& {
    margin-bottom: .25em;
  }
}

.media-caption {
  margin-top: .5em;
  line-height: 1.3em;

  p& {
    margin-bottom: 0;

    #story-banner & {
      margin-bottom: 1em; // Except when part of the story banner
    }
    .pull-right.pull-right-wide & {
      @media (max-width: @screen-xs-max) {
        margin-bottom: 1em; // Except when being pulled on mobile
      }
    }

  }

  .mugshot & {
      .responsive-type(base); // responsive paragraph from _less.less mixin
      text-align: center;
      margin-top: .6em;
  }

  .media-attrib {
    font-size: inherit;
    .mugshot & {
      display: block;
      text-align: center;
      font-size: 14px; // fallback for ie8 and older iOS safari
      font-size: 1.4rem; // 10px HTML base * 1.4 = 14px;
    }
  }
}

// sidebar styles - these apply to the newspage sidebar as well as in-set side bars for bio/related/sidebar story elements on story-level pages

.sidebar-margin {
  margin-left: 2em;
  margin-right: 2em;
}

.sidebar-section {
  h2 {
    color: @su-red;
    font-family: @font-family-serif;
    .font-size-em(24; 18);
    //background: @su-beige-20;
    padding: 5px;
    margin-left: -5px;
    margin-bottom: .5em;
    border-bottom: 1px solid @su-beige-40;
  }

  p {
    color: @su-black;
    .font-size-em(16);
    line-height: 1.2em;
    margin-top: .1em;
    margin-bottom: 1.4em;
  }
  p.side-byline {
    color: @su-red;
    font-size: .8em;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0;
  }
  li {

  }
  .sidebar-icon {
    font-size: 12px;
  }
}

.page-section {
  margin-left: none;
}

.descriptor {
  font-size: 0.9em;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin-bottom: 4px;
  color: @su-clay;
}

/////////////////////////////////
// Page Regions

#top {
  min-height: 10px;
  padding: 4px 0 0;
  background-color: @su-red;
  color: @su-red;
}

#content {
  margin-top: 3em;
  margin-bottom: 3em; //20px
}

aside {
  a {
    color: @text-color;
    text-decoration: none;
  }
  hr {
    margin: 0;
  }
}

/*** Sidebar infobox styles ***/
.infobox {
  background-color: white;
  background-position: right bottom;
  background-repeat: no-repeat;
  min-height:180px;
}

/////////////////////////////////
// Cards
@import "_component-cards.less";

/////////////////////////////////
// Header, Footer
@import "_header.less";
@import "_footer.less";

/////////////////////////////////
// classes whose visibility we can test in JS to determine screen size
// classes will be made visible in the appropriate breakpoints in base-responsive.less
.size-detect-xs,
.size-detect-sm,
.size-detect-md,
.size-detect-lg {
  display: none;
}

/////////////////////////////////
// media queries
@import "_base-responsive.less";

@import "_less.less";
/////////////////////////////////
// Google Fonts
@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,400italic|Source+Serif+Pro:400,600,700);

/////////////////////////////////
// Bootstrap overrides
.container {
  padding: 0; // remove 15px padding on left and right so elements actually lay on the grid
}

/////////////////////////////////
// Elements

// normalize x-heights. Set correct x-height / cap height ratio for source sans and source serif, which allows for more graceful fallbacks on browsers that support it.
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-size-adjust: 0.475;
}

// Adjust margins to be more comfortable across headlines and sections
h2, .h2, h3, .h3 {
  margin-top: 1.25em;
  margin-bottom: .5em;
  section &, .well & {
    margin-top: .75em;
    &:first-child {
      margin-top: 0; // remove margins from first element in section
    }
  }
}

h4, .h4, h5, .h5, h6, .h6 {
  margin-top: 1.25em;
  margin-bottom:.25em;
  section &, .well & {
    margin-top: .75em;
    &:first-child {
      margin-top: 0; // remove margins from first element in section
    }
  }
}

h1, .h1 {
  .responsive-type(h1);
}

h2, .h2 {
  .responsive-type(h2);
}

h3, .h3 {
  .responsive-type(h3);
}

h4, .h4 {
  .responsive-type(h4);
}

h5, h6, .h5, .h6 {
  .responsive-type(base);
}

p, ul, ol {
  font-family: @font-family-serif;
  .responsive-type(base);
  margin-bottom: 1em;

  section &, .well & {
    &:last-child {
      margin-bottom: .5em; // adjust bottom margin when one of these elements is the last child of a well or section
    }
  }
}

li {
  margin-bottom: .5em;
  .navbar & {
    margin-bottom: 0; // remove margin bottom in navbar
  }
  .footer & {
    margin-bottom: .125em; // add a slight margin bottom on footer
  }
}

p {
  &.lead{
    margin-bottom: 1em;
    font-size: 1.4em;
    a {
      font-weight: 400;
    }
  }
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {

  .fa {
    margin-right: 7px;
  }

  a {
    text-decoration: none;
    color: @su-red-text;
  }
}

a {
  font-weight: 600;
}

a, a:hover, a:active {
  outline: 0;
}

a:focus,
button:focus {
  .tab-focus();
}

.external-link {
  &:after {
    content: "\f08e" !important;
    font-family: FontAwesome !important;
    font-size: 0.6em !important;
    font-weight: 200 !important;
    margin-left: .6em !important;
    vertical-align: middle !important;
  }
}
.see-all-link {
  &:after {
    content: "\f138";
    font-family: FontAwesome;
    font-size: 0.7125em;
    margin-left: .4em;
    vertical-align: middle;
  }
}

div:focus { // for accessbility, some div's get focus - don't outline them
  outline: none;
}

dl {
  margin-top: 5px;
}

hr {
  border-color: @su-beige-40;
}

label {
  font-weight: 600;
}

input::-webkit-input-placeholder {
  color: rgba(0, 0, 0, .6) !important;
}

input::-moz-placeholder { /* Firefox 19+ */
  color: rgba(0, 0, 0, 1) !important;
}

input:-moz-placeholder { /* Firefox 18- */
  color: rgba(0, 0, 0, 1) !important;
}

input:-ms-input-placeholder {
  color: rgba(0, 0, 0, .6) !important;
}

/////////////////////////////////
// General classes, id's
.topics-buttons {
  a {
    color: @su-cool-gray;
    .btn-category {
      margin-bottom: 5px;
    }
  }
}

.abs-right,
.abs-left {
  .center-vertical(absolute);
}
.abs-left {
  left: 10px;
}
.abs-right {
  right: 10px;
}

.btn {
  line-height: 1;
  padding: 0; // put the padding on the  tag so the whole button is clickable
  font-size: @font-size-small;

  a { // format when a is nested within, e.g.

    display: block;
    width: 100%;
    height: 100%;
    padding: 0.75em;
    font-weight: normal;
    text-transform: capitalize;
    text-decoration: none;

    &:hover, &:focus, &:active {
      text-decoration: none;
    }
  }
  a& { // format when .btn is directly on the  or the <input>, i.e.
    padding: 0.5em 0.75em;
    font-weight: normal;
    text-decoration: none;
  }
  .modal &,
  input& {
    padding: 0.5em 0.75em;
  }
}
.btn-primary {
  .su-btn(@su-red);
}
.btn-one {
  .su-btn(@su-mint);
}

.btn-two {
  .su-btn(@su-lagunita);
}

.btn-three {
  .su-btn(@su-sage-gray);
  margin-bottom: 10px;
}

.btn-four {
  .su-btn(@su-red);
}

.btn-su-alert {
  .su-btn(@su-warm-gray);
}
.btn-light {
  .su-btn(transparent, @su-black, @su-cool-gray, @su-cool-gray, white);
}

.btn-category {
  .su-btn(#C0C0C0, @su-black, #C0C0C0, @su-cool-gray, white);
  margin-bottom: 5px;
  margin-right: 2px;
}

.btn-u {
  display: inline-block;
  position: relative;
  padding: 8px 13px;
  border: 0;
  cursor: pointer;
  background: @su-beige-40;
  color: @btn-txt;
  .font-size-em(15); // 15px expressed as em's
  text-decoration: none;
  text-shadow: none;

  &:hover {
    color: @su-beige-05;
    background: @su-warm-gray;
    text-decoration: none;
    .transition(all 0.4s ease-in-out);
  }

  i {
    .font-size-em(17; 15);
  }
}

.small-square {
  color: #5f574f;
  position: absolute;
  top: 0;
  margin: 0 0 0 -15px;
  content: '\25AA';
}

.color-red {
  color: @su-red-text;
}

.uppercase {
  text-transform: uppercase;
}

#hero-image img {
  .img-responsive;
}

.info-box {
  margin: 0 15px 30px;
  display: table;

  .icon-container,
  .text-container {
    display: table-cell;
    vertical-align: top;
    min-width: 65px;
  }

  .icon-container {
    text-align: center;
  }
  .text-container {
    padding-left: 15px;
  }

  .offset {
    padding-left: 65px;
  }

  h2 {
    .font-size-em(18);
    font-weight: normal;
    line-height: 1.2em;
    padding: 5px 0;
    text-transform: uppercase;
    color: @su-red-text;
  }

  ul {
    padding-left: 0;
    list-style: none;

    li {
      line-height: 1.1em;
      margin-bottom: 10px;
    }
  }

  dt {
    font-size: 1.1em;
  }

  dt, li {
    a {
      text-decoration: none;
      &:hover, &:active {
        text-decoration: underline;
      }
    }
  }
}

.margin-bottom-5 {
  .margin-bottom(5);
}

.margin-bottom-10 {
  .margin-bottom(10);
}

.margin-bottom-20 {
  .margin-bottom(20);
}

.margin-bottom-25 {
  .margin-bottom(25);
}

.margin-bottom-30 {
  .margin-bottom(30);
}

.margin-bottom-40 {
  .margin-bottom(40);
}

.margin-bottom-50 {
  .margin-bottom(50);
}

.margin-bottom-60 {
  .margin-bottom(60);
}

.navbar {
  border: none;
}

/*
.screen-reader { // text that should be read by a screen reader but not rendered on screen
                 display: inline-block;
                 position: absolute;
                 font-size: 0;
                 line-height: 0;
                 height: 1px;
                 overflow: hidden;
}
*/

ul.vbar {
  list-style: none;
  padding: 0;

  li {
    display: inline-block;
    padding: 0 0.5em;
    border-right: 1px solid @text-color;
  }
  li:first-of-type {
    padding-left: 0;
  }
  li:last-of-type {
    border-right: none;
  }
}

.well {
  box-shadow: 0 0 8px #d5d0c0;
  border: medium none;
  border-radius: 0;
  padding: 20px;
  margin-bottom: 3em;
  background: white;
  h2 {
    padding: 10px 0 4px;
    font-size: 1.2em;
    //text-transform: uppercase;
    border-bottom: none;
    color: @su-red-text;
  }
  h3 {
    font-size: 1em;
    //text-transform: uppercase;
    font-weight: 700;
  }

  ul {
    list-style-type: square;
    list-style-image: url('../images/bullet.gif');

    li {
      position: relative;
      margin-bottom: 7px;
      line-height: 1.1em;
    }
  }

  img {
    .img-responsive;
    background-color: rgba(0, 0, 0, 0);
    margin-bottom: 6px;
    padding: 2px;
  }
  &.well-calendar-list {
    h3 {
      display: inline-block;
      padding-right: 4px;
    }
    ul {
      display: inline-block;
      padding: 0;
      list-style-type: none;
      li {
        display: inline-block;
        padding-right: 3px;
      }
    }

  }
}

.info-box,
.well {
  .fa {
    color: #DAD7CB;
    margin: 0;
  }
}

.embed-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  // padding-top: 25px;
  height: 0;
  iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

// Media Captions
.media-attrib,
.media-caption {
  font-family: @font-family-sans-serif;
  font-size: @font-size-small;
}
.media-attrib {
  font-style:italic;
  text-align:right;
  p& {
    margin-bottom: .25em;
  }
}

.media-caption {
  margin-top: .5em;
  line-height: 1.3em;

  p& {
    margin-bottom: 0;

    #story-banner & {
      margin-bottom: 1em; // Except when part of the story banner
    }
    .pull-right.pull-right-wide & {
      @media (max-width: @screen-xs-max) {
        margin-bottom: 1em; // Except when being pulled on mobile
      }
    }

  }

  .mugshot & {
      .responsive-type(base); // responsive paragraph from _less.less mixin
      text-align: center;
      margin-top: .6em;
  }

  .media-attrib {
    font-size: inherit;
    .mugshot & {
      display: block;
      text-align: center;
      font-size: 14px; // fallback for ie8 and older iOS safari
      font-size: 1.4rem; // 10px HTML base * 1.4 = 14px;
    }
  }
}

// sidebar styles - these apply to the newspage sidebar as well as in-set side bars for bio/related/sidebar story elements on story-level pages

.sidebar-margin {
  margin-left: 2em;
  margin-right: 2em;
}

.sidebar-section {
  h2 {
    color: @su-red;
    font-family: @font-family-serif;
    .font-size-em(24; 18);
    //background: @su-beige-20;
    padding: 5px;
    margin-left: -5px;
    margin-bottom: .5em;
    border-bottom: 1px solid @su-beige-40;
  }

  p {
    color: @su-black;
    .font-size-em(16);
    line-height: 1.2em;
    margin-top: .1em;
    margin-bottom: 1.4em;
  }
  p.side-byline {
    color: @su-red;
    font-size: .8em;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0;
  }
  li {

  }
  .sidebar-icon {
    font-size: 12px;
  }
}

.page-section {
  margin-left: none;
}

.descriptor {
  font-size: 0.9em;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin-bottom: 4px;
  color: @su-clay;
}

/////////////////////////////////
// Page Regions

#top {
  min-height: 10px;
  padding: 4px 0 0;
  background-color: @su-red;
  color: @su-red;
}

#content {
  margin-top: 3em;
  margin-bottom: 3em; //20px
}

aside {
  a {
    color: @text-color;
    text-decoration: none;
  }
  hr {
    margin: 0;
  }
}

/*** Sidebar infobox styles ***/
.infobox {
  background-color: white;
  background-position: right bottom;
  background-repeat: no-repeat;
  min-height:180px;
}

/////////////////////////////////
// Cards
@import "_component-cards.less";

/////////////////////////////////
// Header, Footer
@import "_header.less";
@import "_footer.less";

/////////////////////////////////
// classes whose visibility we can test in JS to determine screen size
// classes will be made visible in the appropriate breakpoints in base-responsive.less
.size-detect-xs,
.size-detect-sm,
.size-detect-md,
.size-detect-lg {
  display: none;
}

/////////////////////////////////
// media queries
@import "_base-responsive.less";


additional styles for newpoll

additional styles for newpoll

@import "./variables.less";

.fontface(@family, @src, @style: normal, @weight: 400, @fmt: 'truetype'){
    @font-face{
        font-family: @family;
        src: url(@src) format(@fmt);
        font-weight: @weight;
        font-style: @style;
    }
}

a.github-corner > svg {
    fill: @cp-green;
    color: @base;
}

.transform(...) {
    -webkit-transform: @arguments;
    -moz-transform: @arguments;
    -o-transform: @arguments;
    -ms-transform: @arguments;
    transform: @arguments;
}

.translate(@x:0, @y:0) {
    .transform(translate(@x, @y));
}

.table-refresh > svg {
    width: .9em;
    height: .9em;
    fill: @cp-green;
    .translate(0, 15%);
}

.lato {
    font-family: lato, Helvetica, sans-serif;
    font-size: 1.02em;
}

html {
    font-size: .875em;
    background-color: @base;
    color: @fore;
}

html,body {
    font-family: Georgia,Cambria,serif;
    height: 100%;
}

body {
    font-size: 1rem;
    font-weight: 400;
    line-height: 2rem;
}

h1,h2,h3,h4,h5,h6 {
    color: @fore;

    font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
    -webkit-font-feature-settings: 'dlig' 1,'liga' 1,'lnum' 1,'kern' 1;
    -moz-font-feature-settings: 'dlig' 1,'liga' 1,'lnum' 1,'kern' 1;
    font-feature-settings: 'dlig' 1,'liga' 1,'lnum' 1,'kern' 1;
    font-style: normal;
    font-weight: 600;
    margin-top: 0;
}

h1 {
    line-height: 3rem;
    font-size: 2.05714rem;
    margin-bottom: .21999rem;
    padding-top: .78001rem;
}

h2 {
    font-size: 1.95312rem;
    margin-bottom: .18358rem;
    padding-top: .81642rem;
}

h2,h3 {
    line-height: 3rem;
}

h3 {
    font-size: 1.64571rem;
    margin-bottom: .07599rem;
    padding-top: .92401rem;
}

h4 {
    font-size: 1.5625rem;
    margin-bottom: .54686rem;
    padding-top: .45314rem;
}

h5 {
   font-size: 1.25rem;
    margin-bottom: -.56251rem;
    padding-top: .56251rem;
}

h6 {
    font-size: 1rem;
    margin-bottom: -.65001rem;
    padding-top: .65001rem;
}

a {
    cursor: pointer;
    color: @cp-green;
    text-decoration: none;

    &:hover {
        color: @cp-accent;
    }
}

img {
    height: auto;
    max-width: 100%;

    &.cryptofist {
        filter: invert(100%);
        -webkit-filter: invert(100%);
    }
}

p {
    padding-top: .66001rem;
    margin-top: 0;
}

p,pre {
    margin-bottom: 1.33999rem;
}

p, pre, td, a, table, tr {
    .lato;
}

#main {
    width: 70vw;
    margin: auto;

    font-size: medium;
    padding-bottom: 1em;
}

/* buttons */
.create, .action {
    @thick: 2px;
    border: @thick solid @cp-green;
    border-radius: 10px;
    background-color: @base;
    color: @cp-green;

    font-weight: bold;
    font-size: large;
    margin-right: 5px;
    margin-left: 5px;
    &:hover {
        border: @thick solid @cp-accent;
        color: @cp-green;
    }
}
.create {
    display: none;
}
.action {
    display: inline-block;
}
.buttons {
    margin-bottom: 50px;
    margin-top: 20px;
    line-height: 2.5em;
}

.button {
    @hpad: 2 * 6px;
    @vpad: 2 * 2px;
    padding: @vpad @hpad @vpad @hpad;

    border-radius: 5px;
    margin-top: 2 * 6px;
    margin-bottom: 2 * 6px;
    white-space: nowrap;
}
.alertify button {
    margin: 3px 0px;
}
/* Tables */

table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 20px;
}
tbody {
    border: 2px solid black;
    tr {
        text-align: center;
        &:first-of-type th{
            font-size: 20px;
            border-top: 0px;
            font-weight: bold;
            padding: 10px;
            text-decoration: underline;
            &.table-refresh {
                color: @cp-green;
                text-decoration: none;
                cursor: pointer;
            }

        }
        &:nth-child(odd) {
            background-color: @light-base;
        }
        th:first-of-type {
            border-left: 0px;
        }
        th {
            box-sizing: border-box;
            border: 1px solid black;
        }
        th, td {
            color: @fore;

            &.remove {
                cursor: pointer;
            }
        }
        th:last-child {
            border-right: 0px;
        }
    }

    td {
        border-right: 1px solid black;
        padding: 12px;
        padding-top: 0px;
        padding-bottom: 0px;
        &:last-child {
            border-right: none;
        }
    }
}

/* Bottom Bar */

.top-bar, .bottom-bar {
    position:fixed;
    height:4%;
    height: 2.5em;

    display: inline-block;
    width: 100%;
    background: @base;
    border-top: 1px solid @cp-outline;

    a {
        color: @cp-green;
        text-decoration: none;
    }
    p {
        margin: -1px;
        font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;

        font-size: 20px;
        display:block;
        margin-left: 10px;
        padding-top:3px;
        color: @fore;
    }
    img {
        margin-right: 4px;
        position: relative;
    }

    .big {
        @media screen and (max-width: 800px) {
            display: none;
        }
        @media screen and (min-width: 801px) {
            display: inline-block;
        }
    }
    .small {
        @media screen and (max-width: 800px) {
            display: inline-block;
        }
        @media screen and (min-width: 801px) {
            display: none;
        }
        img {
            height: 1.25em;
        }
    }

}
.bottom-bar {
    bottom: 0px;
    right: 0px;
}
.top-bar {
    top: 0px;
    right: 0px;
}

.bottom-bar-left {
    display:block;
    float:left;
    padding-left:10px;
}
.bottom-bar-left p {
    float: right;
}
.bottom-bar-right {
    display:block;
    float:right;
    padding-right:20px
}
.bottom-bar-center {
    width: 20%;
    position: absolute;
    left: 40%;
    text-align: center;
}
.bottom-bar-heart {
    top: 2px;
}
.bottom-bar-xwiki {
    top: 3px;
}
.bottom-bar-openpaas {
    top: 3px;
    max-width: 100px;
}

// form things

// MIXINS
.bottom-left(@s: 5px) { border-bottom-left-radius: @s; }
.bottom-left {
    .bottom-left;
}

.top-left(@s: 5px) { border-top-left-radius: @s; }
.top-left {
    .top-left;
}

.remove {
    color: @cp-red;
    cursor: pointer !important;
}

form.realtime {
    > input {
        &[type="text"] {

        }
    }
    > textarea {
        width: 50%;
        height: 15vh;
    }

    padding: 0px;
    margin: 0px;

    table {
        border-collapse: collapse;
        tr {
            td {
                padding: 0px;
                margin: 0px;

                div.text-cell {
                    padding: 0px;
                    margin: 0px;
                        height: 100%;

                    width: 500px;

                    input {
                        width: 80%;
                        width: 90%;
                        height: 100%;
                        border: 0px;
                        &[disabled] {
                            background-color: transparent;
                            color: @fore;
                            font-weight: bold;
                        }
                    }
                }

                &.checkbox-cell {
                    margin: 0px;
                    padding: 0px;
                    height: 100%;

                    div.checkbox-contain {
                        display: inline-block;
                        height: 100%;
                        width: 100%;
                        position: relative;

                        label {
                            background-color: transparent;
                            display: block;
                            position: absolute;
                            top: 0px;
                            left: 0px;
                            height: 100%;
                            width: 100%;
                        }

                        input {
                            &[type="checkbox"] {
                                &:not(.editable) {
                                    display: none;

                                    ~ .cover {
                                        display: block;
                                        font-weight: bold;

                                        background-color: @cp-red;
                                        color: @base;

                                        &:after {
                                            height: 100%;
                                        }

                                        &:after { content: "✖"; }

                                        display: block;
                                        &.yes {
                                            background-color: @cp-green;
                                            &:after { content: "✔"; }
                                        }
                                        &.mine {
                                            display: none;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        input {
            &[type="text"] {
                height: 100%;
                width: 80%;
                border: 3px solid @base;
            }
        }
        .edit {
            color: @cp-green;
            cursor: pointer;
            width: 10%;
            font-size: 20px;
            &:after { content: '✐'; }
            &.editable { display: none; }
        }

        thead {
            tr {
                th {
                    input[type="text"][disabled] {
                        background-color: transparent;
                        color: @fore;
                        font-weight: bold;
                    }
                    .remove {
                        cursor: pointer;
                        font-size: 20px;
                    }
                }
            }
        }
        tbody {
            tr {
                td {

                }
            }
        }
        tfoot {
            tr {
                td {
                    text-align: center;
                    .save {
                        padding: 15px;
                        border-top-left-radius: 5px;
                        border-top-right-radius: 5px;
                    }
                }
            }
        }
    }

    #adduser,
    #addoption {
        color: @cp-green;
        border: 1px solid @cp-green;
        padding: 15px;
        cursor: pointer;
    }

    #adduser { .top-left; }
    #addoption { .bottom-left; }
}

.viewportRatio (@x, @y, @p: 100) {
    width: @p * 100vw;
    height: @y * (@p * 100vw) / @x;
    max-width: @x / @y * (@p * 100vh);
    max-height: (@p * 100vh);
}

div.modal, div#modal {

    #content {
        box-sizing: border-box;
        .size (@n) {
            font-size: @n * 1vw;
            line-height: @n * 1.1vw;
        }

        border: 1px solid white;

        vertical-align: middle;
        padding: 2.5vw;

        width: 100vw;
        height: 56.25vw; // height:width ratio = 9/16 = .5625
        //background: pink;
        max-height: 100vh;
        max-width: 177.78vh; // 16/9 = 1.778
        margin: auto;
        position: absolute;
        top:0;bottom:0; // vertical center
        left:0;right:0; // horizontal center

        p, li, pre, code {
            .size(2.75);
        }

        h1 { .size(5); }
        h2 { .size(4.2); }
        h3 { .size(3.6); }
        h4 { .size (3); }
        h5 { .size(2.2); }
        h6 { .size(1.6); }

        pre > code {

            display: block;
            position: relative;
            border: 1px solid #333;
            width: 90%;
            margin: auto;
            padding-left: .25vw;

        }

    }

    box-sizing: border-box;
    z-index: 9001;
    position: fixed;

    top: 0px;
    left: 0px;

    width: 100%;
    height: 100vh;
    display: none;

    background-color: @base;

    .center {
        position: relative;

        width: 80%;
        height: 80%;
        margin: auto;
        border: 1px solid @light-base;

        text-align: center;
    }

    &.shown {
        display: block;
    }

    table {
        margin: 30px;

        border-collapse: collapse;
        tr {
            td {
            }
        }

        input {
            height: 100%;
            width: 90%;
            border: 3px solid @base;
        }

        thead {
            tr {
                th {
                    span.remove {
                    }
                }
            }
        }
        tbody {
            tr {
                td {

                }
            }
        }
        tfoot {
            tr {
                td {
                    z-index: 4000;
                    cursor: pointer;
                }
            }
        }
    }

    #addtime,
    #adddate {
        color: @cp-green;
        border: 1px solid @cp-green;
        padding: 15px;
    }

    #adddate { .top-left; }
    #addtime { .bottom-left; }
}

@import "./variables.less";

.fontface(@family, @src, @style: normal, @weight: 400, @fmt: 'truetype'){
    @font-face{
        font-family: @family;
        src: url(@src) format(@fmt);
        font-weight: @weight;
        font-style: @style;
    }
}

a.github-corner > svg {
    fill: @cp-green;
    color: @base;
}

.transform(...) {
    -webkit-transform: @arguments;
    -moz-transform: @arguments;
    -o-transform: @arguments;
    -ms-transform: @arguments;
    transform: @arguments;
}

.translate(@x:0, @y:0) {
    .transform(translate(@x, @y));
}

.table-refresh > svg {
    width: .9em;
    height: .9em;
    fill: @cp-green;
    .translate(0, 15%);
}

.lato {
    font-family: lato, Helvetica, sans-serif;
    font-size: 1.02em;
}

html {
    font-size: .875em;
    background-color: @base;
    color: @fore;
}

html,body {
    font-family: Georgia,Cambria,serif;
    height: 100%;
}

body {
    font-size: 1rem;
    font-weight: 400;
    line-height: 2rem;
}

h1,h2,h3,h4,h5,h6 {
    color: @fore;

    font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
    -webkit-font-feature-settings: 'dlig' 1,'liga' 1,'lnum' 1,'kern' 1;
    -moz-font-feature-settings: 'dlig' 1,'liga' 1,'lnum' 1,'kern' 1;
    font-feature-settings: 'dlig' 1,'liga' 1,'lnum' 1,'kern' 1;
    font-style: normal;
    font-weight: 600;
    margin-top: 0;
}

h1 {
    line-height: 3rem;
    font-size: 2.05714rem;
    margin-bottom: .21999rem;
    padding-top: .78001rem;
}

h2 {
    font-size: 1.95312rem;
    margin-bottom: .18358rem;
    padding-top: .81642rem;
}

h2,h3 {
    line-height: 3rem;
}

h3 {
    font-size: 1.64571rem;
    margin-bottom: .07599rem;
    padding-top: .92401rem;
}

h4 {
    font-size: 1.5625rem;
    margin-bottom: .54686rem;
    padding-top: .45314rem;
}

h5 {
   font-size: 1.25rem;
    margin-bottom: -.56251rem;
    padding-top: .56251rem;
}

h6 {
    font-size: 1rem;
    margin-bottom: -.65001rem;
    padding-top: .65001rem;
}

a {
    cursor: pointer;
    color: @cp-green;
    text-decoration: none;

    &:hover {
        color: @cp-accent;
    }
}

img {
    height: auto;
    max-width: 100%;

    &.cryptofist {
        filter: invert(100%);
        -webkit-filter: invert(100%);
    }
}

p {
    padding-top: .66001rem;
    margin-top: 0;
}

p,pre {
    margin-bottom: 1.33999rem;
}

p, pre, td, a, table, tr {
    .lato;
}

#main {
    width: 70vw;
    margin: auto;

    font-size: medium;
    padding-bottom: 1em;
}

/* buttons */
.create, .action {
    @thick: 2px;
    border: @thick solid @cp-green;
    border-radius: 10px;
    background-color: @base;
    color: @cp-green;

    font-weight: bold;
    font-size: large;
    margin-right: 5px;
    margin-left: 5px;
    &:hover {
        border: @thick solid @cp-accent;
        color: @cp-green;
    }
}
.create {
    display: none;
}
.action {
    display: inline-block;
}
.buttons {
    margin-bottom: 50px;
    margin-top: 20px;
    line-height: 2.5em;
}

.button {
    @hpad: 2 * 6px;
    @vpad: 2 * 2px;
    padding: @vpad @hpad @vpad @hpad;

    border-radius: 5px;
    margin-top: 2 * 6px;
    margin-bottom: 2 * 6px;
    white-space: nowrap;
}
.alertify button {
    margin: 3px 0px;
}
/* Tables */

table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 20px;
}
tbody {
    border: 2px solid black;
    tr {
        text-align: center;
        &:first-of-type th{
            font-size: 20px;
            border-top: 0px;
            font-weight: bold;
            padding: 10px;
            text-decoration: underline;
            &.table-refresh {
                color: @cp-green;
                text-decoration: none;
                cursor: pointer;
            }

        }
        &:nth-child(odd) {
            background-color: @light-base;
        }
        th:first-of-type {
            border-left: 0px;
        }
        th {
            box-sizing: border-box;
            border: 1px solid black;
        }
        th, td {
            color: @fore;

            &.remove {
                cursor: pointer;
            }
        }
        th:last-child {
            border-right: 0px;
        }
    }

    td {
        border-right: 1px solid black;
        padding: 12px;
        padding-top: 0px;
        padding-bottom: 0px;
        &:last-child {
            border-right: none;
        }
    }
}

/* Bottom Bar */

.top-bar, .bottom-bar {
    position:fixed;
    height:4%;
    height: 2.5em;

    display: inline-block;
    width: 100%;
    background: @base;
    border-top: 1px solid @cp-outline;

    a {
        color: @cp-green;
        text-decoration: none;
    }
    p {
        margin: -1px;
        font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;

        font-size: 20px;
        display:block;
        margin-left: 10px;
        padding-top:3px;
        color: @fore;
    }
    img {
        margin-right: 4px;
        position: relative;
    }

    .big {
        @media screen and (max-width: 800px) {
            display: none;
        }
        @media screen and (min-width: 801px) {
            display: inline-block;
        }
    }
    .small {
        @media screen and (max-width: 800px) {
            display: inline-block;
        }
        @media screen and (min-width: 801px) {
            display: none;
        }
        img {
            height: 1.25em;
        }
    }

}
.bottom-bar {
    bottom: 0px;
    right: 0px;
}
.top-bar {
    top: 0px;
    right: 0px;
}

.bottom-bar-left {
    display:block;
    float:left;
    padding-left:10px;
}
.bottom-bar-left p {
    float: right;
}
.bottom-bar-right {
    display:block;
    float:right;
    padding-right:20px
}
.bottom-bar-center {
    width: 20%;
    position: absolute;
    left: 40%;
    text-align: center;
}
.bottom-bar-heart {
    top: 2px;
}
.bottom-bar-xwiki {
    top: 3px;
}
.bottom-bar-openpaas {
    top: 3px;
    max-width: 100px;
}

// form things

// MIXINS
.bottom-left(@s: 5px) { border-bottom-left-radius: @s; }
.bottom-left {
    .bottom-left;
}

.top-left(@s: 5px) { border-top-left-radius: @s; }
.top-left {
    .top-left;
}

.remove {
    color: @cp-red;
    cursor: pointer !important;
}

form.realtime {
    > input {
        &[type="text"] {

        }
    }
    > textarea {
        width: 50%;
        height: 15vh;
    }

    padding: 0px;
    margin: 0px;

    table {
        border-collapse: collapse;
        tr {
            td {
                padding: 0px;
                margin: 0px;

                div.text-cell {
                    padding: 0px;
                    margin: 0px;
                        height: 100%;
                    input {
                        width: 80%;
                        height: 100%;
                        border: 0px;
                        &[disabled] {
                            background-color: transparent;
                            color: @fore;
                            font-weight: bold;
                        }
                    }
                }

                &.checkbox-cell {
                    margin: 0px;
                    padding: 0px;

                    div.checkbox-contain {
                        display: block;
                        height: 100%;
                        width: 100%;
                        position: relative;

                        label {
                            background-color: transparent;
                            display: block;
                            position: absolute;
                            top: 0px;
                            left: 0px;
                            height: 100%;
                            width: 100%;
                        }

                        input {
                            &[type="checkbox"] {
                                &:not(.editable) {
                                    display: none;

                                    ~ .cover {
                                        display: block;
                                        font-weight: bold;

                                        background-color: @cp-red;
                                        color: @base;
                                        &:after { content: "✖"; }

                                        display: block;
                                        &.yes {
                                            background-color: @cp-green;
                                            &:after { content: "✔"; }
                                        }
                                        &.mine {
                                            display: none;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        input {
            &[type="text"] {
                height: 100%;
                width: 80%;
                border: 3px solid @base;
            }
        }
        .edit {
            color: @cp-green;
            cursor: pointer;
            width: 10%;
            font-size: 20px;
            &:after { content: '✐'; }
            &.editable { display: none; }
        }

        thead {
            tr {
                th {
                    input[type="text"][disabled] {
                        background-color: transparent;
                        color: @fore;
                        font-weight: bold;
                    }
                    .remove {
                        cursor: pointer;
                        font-size: 20px;
                    }
                }
            }
        }
        tbody {
            tr {
                td {

                }
            }
        }
        tfoot {
            tr {
                td {
                    text-align: center;
                    .save {
                        padding: 15px;
                        border-top-left-radius: 5px;
                        border-top-right-radius: 5px;
                    }
                }
            }
        }
    }

    #adduser,
    #addoption {
        color: @cp-green;
        border: 1px solid @cp-green;
        padding: 15px;
        cursor: pointer;
    }

    #adduser { .top-left; }
    #addoption { .bottom-left; }
}

.viewportRatio (@x, @y, @p: 100) {
    width: @p * 100vw;
    height: @y * (@p * 100vw) / @x;
    max-width: @x / @y * (@p * 100vh);
    max-height: (@p * 100vh);
}

div.modal, div#modal {

    #content {
        box-sizing: border-box;
        .size (@n) {
            font-size: @n * 1vw;
            line-height: @n * 1.1vw;
        }

        border: 1px solid white;

        vertical-align: middle;
        padding: 2.5vw;

        width: 100vw;
        height: 56.25vw; // height:width ratio = 9/16 = .5625
        //background: pink;
        max-height: 100vh;
        max-width: 177.78vh; // 16/9 = 1.778
        margin: auto;
        position: absolute;
        top:0;bottom:0; // vertical center
        left:0;right:0; // horizontal center

        p, li, pre, code {
            .size(2.75);
        }

        h1 { .size(5); }
        h2 { .size(4.2); }
        h3 { .size(3.6); }
        h4 { .size (3); }
        h5 { .size(2.2); }
        h6 { .size(1.6); }

        pre > code {

            display: block;
            position: relative;
            border: 1px solid #333;
            width: 90%;
            margin: auto;
            padding-left: .25vw;

        }

    }

    box-sizing: border-box;
    z-index: 9001;
    position: fixed;

    top: 0px;
    left: 0px;

    width: 100%;
    height: 100vh;
    display: none;

    background-color: @base;

    .center {
        position: relative;

        width: 80%;
        height: 80%;
        margin: auto;
        border: 1px solid @light-base;

        text-align: center;
    }

    &.shown {
        display: block;
    }

    table {
        margin: 30px;

        border-collapse: collapse;
        tr {
            td {
            }
        }

        input {
            height: 100%;
            width: 90%;
            border: 3px solid @base;
        }

        thead {
            tr {
                th {
                    span.remove {
                    }
                }
            }
        }
        tbody {
            tr {
                td {

                }
            }
        }
        tfoot {
            tr {
                td {
                    z-index: 4000;
                    cursor: pointer;
                }
            }
        }
    }

    #addtime,
    #adddate {
        color: @cp-green;
        border: 1px solid @cp-green;
        padding: 15px;
    }

    #adddate { .top-left; }
    #addtime { .bottom-left; }
}


Fix postcss 8 error

Fix postcss 8 error

For some reason, postcss 8 does not allow multiplication by -1

.navigation-color-loop(@ruleset) when (length( @colors ) >= 1) {
  @length: length(@colors);
  .looper( 1 );
  .looper( @index ) when ( @index <= @length ) and (length(extract( @colors, @index )) = 2) {
    @navPair: extract(@colors, @index);
    @navColorName: extract(@navPair, 1);
    @navColorValue: extract(@navPair, 2);
    @ruleset();
    .looper( @index + 1 );
  }
}

:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(0 - (var(--swiper-navigation-size) / 2));
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  &.swiper-button-disabled {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
  }
  &:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    text-transform: none;
    font-variant: initial;
    line-height: 1;
  }
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  &:after {
    content: 'prev';
  }
  left: 10px;
  right: auto;
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  &:after {
    content: 'next';
  }
  right: 10px;
  left: auto;
}
.navigation-color-loop({
  .swiper-button-prev,
  .swiper-button-next {
    &.swiper-button-@{navColorName} {
      --swiper-navigation-color: @navColorValue;
    }
  }
});
.swiper-button-lock {
  display: none;
}

.navigation-color-loop(@ruleset) when (length( @colors ) >= 1) {
  @length: length(@colors);
  .looper( 1 );
  .looper( @index ) when ( @index <= @length ) and (length(extract( @colors, @index )) = 2) {
    @navPair: extract(@colors, @index);
    @navColorName: extract(@navPair, 1);
    @navColorValue: extract(@navPair, 2);
    @ruleset();
    .looper( @index + 1 );
  }
}

:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  &.swiper-button-disabled {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
  }
  &:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    text-transform: none;
    font-variant: initial;
    line-height: 1;
  }
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  &:after {
    content: 'prev';
  }
  left: 10px;
  right: auto;
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  &:after {
    content: 'next';
  }
  right: 10px;
  left: auto;
}
.navigation-color-loop({
  .swiper-button-prev,
  .swiper-button-next {
    &.swiper-button-@{navColorName} {
      --swiper-navigation-color: @navColorValue;
    }
  }
});
.swiper-button-lock {
  display: none;
}


Changed color

Changed color

@import '~antd/dist/antd.less'; // Import Ant Design styles by less entry
@import 'theme.less';
// variables to override above
@import "./tailwind.css";

@import url("https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css");

.slick-prev {
    left: 0% !important;
    z-index: 1;
}

.slick-next {
    right: 0% !important;
    z-index: 1;
}

.slick-prev::before, .slick-next::before{
    color: orange!important;
}

/**
 * @NOTE
 * Override for ant-layout to provide a smooth transition
 * on theme change.
 */
.ant-layout, .ant-layout * {
    transition: background .5s;
}

/**
 * @NOTE
 * Overrided for dark themed card actions.
 */
.card-component__dark > .ant-card-actions {
    background: #3a3b44;
    border-top: #3a3b44;
}
.card-component__dark > .ant-card-actions > li > span > .ant-btn{
    color: rgba(#fff);
    background: #3a3b44;
    border-color: #d9d9d9;
}

@import '~antd/dist/antd.less'; // Import Ant Design styles by less entry
@import 'theme.less';
// variables to override above
@import "./tailwind.css";

@import url("https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css");

.slick-prev {
    left: 0% !important;
    z-index: 1;
}

.slick-next {
    right: 0% !important;
    z-index: 1;
}

.slick-prev::before, .slick-next::before{
    color: orange!important;
}

/**
 * @NOTE
 * Override for ant-layout to provide a smooth transition
 * on theme change.
 */
.ant-layout, .ant-layout * {
    transition: background .5s;
}

/**
 * @NOTE
 * Overrided for dark themed card actions.
 */
.card-component__dark > .ant-card-actions {
    background: #222222;
    border-top: #222222;
}
.card-component__dark > .ant-card-actions > li > span > .ant-btn{
    color: rgba(#fff);
    background: #222222;
    border-color: #d9d9d9;
}