Question title are now fully visible even on small devices

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/howcani-project/howcani.git/'


CCN-69 removing errant character that was causing compiling error, beautifying code

//
// Navbars
// --------------------------------------------------
// Wrapper and base class
//
// Provide a static navbar from which we expand to create full-width, fixed, and
// other navbar variations.
.oc-navbar {
	position: relative;
	border: 1px solid @navbar-default-border;
	//brought in from .navbar-default
	background-color: @navbar-default-bg;
	// Prevent floats from breaking the navbar
	&:extend(.clearfix all);
	@media (min-width: @grid-float-breakpoint) {
		border-radius: @navbar-border-radius;
	}
	&.oc-navbar-top {
		min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
		margin-bottom: @navbar-margin-bottom;
		.dropdown-menu {
			margin-top: 0;
			.border-top-radius(0);
		}
	}
	/*  &.oc-navbar-left {
	float:left;
	top:-(@navbar-height + @navbar-margin-bottom);
	width:300px;
	+ main {
	  margin-left:315px;
	}
  }*/
}

.container {
	&>.oc-nav {
		margin-left: -15px;
		margin-right: -15px;
	}
}

.oc-nav-item {
	display: inline-block;
	padding: @navbar-padding-vertical @navbar-padding-horizontal;
	line-height: @line-height-computed;
	a {
		text-decoration: none;
		color: @navbar-default-link-color;
	}

	&-brand {
		order: 0;
		font-family: @headings-font-family;
		font-size: 1.2em;
		font-weight: bold;
		height: @navbar-height;
		a {
			color: @navbar-default-brand-color;
		}
		&:hover,
		&:focus {
			text-decoration: none;
		}
		>img {
			display: block;
		}
		@media(max-width:@screen-xs-max) {}
	}

	&-form {
		flex-grow: 1;
		flex-shrink: 1;
		padding-top: @navbar-padding-vertical - 7px;
		padding-bottom: @navbar-padding-vertical - 7px;
		@shadow: inset 0 1px 0 rgba(255, 255, 255, .1),
		0 1px 0 rgba(255, 255, 255, .1);
		.box-shadow(@shadow);
		@media(max-width: @screen-xs-max) {
			//width:100%;
		}
	}

	&-cart {
		position: relative;
		.badge {
			position: absolute;
			left: 5px;
			bottom: 5px;
			background-color: @brand-danger;
			color: white;
		}
	}
}
.oc-navbar-fixed-top {
	position: fixed;
	right: 0;
	left: 0;
	top: 0;
	border-width: 0 0 1px;
	z-index: @zindex-navbar-fixed;
	// Undo the rounded corners
	@media (min-width: @grid-float-breakpoint) {
		border-radius: 0;
	}
}
// Navbar heading
//
// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
// styling of responsive aspects.
.navbar-header {
	&:extend(.clearfix all);
	@media (min-width: @grid-float-breakpoint) {
		float: left;
	}
}
// Navbar collapse (body)
//
// Group your navbar content into this for easy collapsing and expanding across
// various device sizes. By default, this content is collapsed when <768px, but
// will expand past that for a horizontal display.
//
// To start (on mobile devices) the navbar links, forms, and buttons are stacked
// vertically and include a `max-height` to overflow in case you have too much
// content for the user's viewport.
.navbar-collapse {
	overflow-x: visible;
	padding-right: @navbar-padding-horizontal;
	padding-left: @navbar-padding-horizontal;
	border-top: 1px solid transparent;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
	&:extend(.clearfix all);
	-webkit-overflow-scrolling: touch;
	&.in {
		overflow-y: auto;
	}

	@media (min-width: @grid-float-breakpoint) {
		width: auto;
		border-top: 0;
		box-shadow: none;
		&.collapse {
			display: block !important;
			height: auto !important;
			padding-bottom: 0; // Override default setting
			overflow: visible !important;
		}
		&.in {
			overflow-y: visible;
		}
		// Undo the collapse side padding for navbars with containers to ensure
		// alignment of right-aligned contents.
		.navbar-fixed-top &,
		.navbar-static-top &,
		.navbar-fixed-bottom & {
			padding-left: 0;
			padding-right: 0;
		}
	}
}
.navbar-fixed-top,
.navbar-fixed-bottom {
	.navbar-collapse {
		max-height: @navbar-collapse-max-height;
		@media (max-device-width: @screen-xs-min) and (orientation: landscape) {
			max-height: 200px;
		}
	}
}
// Both navbar header and collapse
//
// When a container is present, change the behavior of the header and collapse.
.container,
.container-fluid {
	>.navbar-header,
	>.navbar-collapse {
		margin-right: -@navbar-padding-horizontal;
		margin-left: -@navbar-padding-horizontal;
		@media (min-width: @grid-float-breakpoint) {
			margin-right: 0;
			margin-left: 0;
		}
	}
}
//
// Navbar alignment options
//
// Display the navbar across the entirety of the page or fixed it to the top or
// bottom of the page.
// Static top (unfixed, but 100% wide) navbar
.navbar-static-top {
	z-index: @zindex-navbar;
	border-width: 0 0 1px;
	@media (min-width: @grid-float-breakpoint) {
		border-radius: 0;
	}
}
// Fix the top/bottom navbars when screen real estate supports it
.navbar-fixed-top {
	position: fixed;
	right: 0;
	left: 0;
	top: 0;
	border-width: 0 0 1px;
	z-index: @zindex-navbar-fixed;
	// Undo the rounded corners
	@media (min-width: @grid-float-breakpoint) {
		border-radius: 0;
	}
}
.navbar-fixed-top {
	top: 0;
	border-width: 0 0 1px;
}
.navbar-fixed-bottom {
	bottom: 0;
	margin-bottom: 0; // override .navbar defaults
	border-width: 1px 0 0;
}
// Brand/project name
.navbar-brand {
	float: left;
	padding: @navbar-padding-vertical @navbar-padding-horizontal;
	font-size: @font-size-large;
	line-height: @line-height-computed;
	height: @navbar-height;
	&:hover,
	&:focus {
		text-decoration: none;
	}

	>img {
		display: block;
	}

	@media (min-width: @grid-float-breakpoint) {
		.navbar>.container &,
		.navbar>.container-fluid & {
			margin-left: -@navbar-padding-horizontal;
		}
	}
}
// Navbar toggle
//
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
// JavaScript plugin.
.navbar-toggle {
	position: relative;
	float: right;
	margin-right: @navbar-padding-horizontal;
	padding: 9px 10px;
	.navbar-vertical-align(34px);
	background-color: transparent;
	background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
	border: 1px solid transparent;
	border-radius: @border-radius-base;
	// We remove the `outline` here, but later compensate by attaching `:hover`
	// styles to `:focus`.
	&:focus {
		outline: 0;
	}

	// Bars
	.icon-bar {
		display: block;
		width: 22px;
		height: 2px;
		border-radius: 1px;
	}

	.icon-bar+.icon-bar {
		margin-top: 4px;
	}

	@media (min-width: @grid-float-breakpoint) {
		display: none;
	}
}
// Navbar nav links
//
// Builds on top of the `.nav` components with its own modifier class to make
// the nav the full height of the horizontal nav (above 768px).
.navbar-nav {
	margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
	>li>a {
		padding-top: 10px;
		padding-bottom: 10px;
		line-height: @line-height-computed;
	}

	@media (max-width: @grid-float-breakpoint-max) {
		// Dropdowns get custom display when collapsed
		.open .dropdown-menu {
			position: static;
			float: none;
			width: auto;
			margin-top: 0;
			background-color: transparent;
			border: 0;
			box-shadow: none;
			>li>a,
			.dropdown-header {
				padding: 5px 15px 5px 25px;
			}
			>li>a {
				line-height: @line-height-computed;
				&:hover,
				&:focus {
					background-image: none;
				}
			}
		}
	}

	// Uncollapse the nav
	@media (min-width: @grid-float-breakpoint) {
		float: left;
		margin: 0;
		>li {
			float: left;
			>a {
				padding-top: @navbar-padding-vertical;
				padding-bottom: @navbar-padding-vertical;
			}
		}
	}
}
// Navbar form
//
// Extension of the `.form-inline` with some extra flavor for optimum display in
// our navbars.
.navbar-form {
	margin-left: -@navbar-padding-horizontal;
	margin-right: -@navbar-padding-horizontal;
	padding: 10px @navbar-padding-horizontal;
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
	@shadow: inset 0 1px 0 rgba(255, 255, 255, .1),
	0 1px 0 rgba(255, 255, 255, .1);
	.box-shadow(@shadow);
	// Mixin behavior for optimum display
	.form-inline();
	.form-group {
		@media (max-width: @grid-float-breakpoint-max) {
			margin-bottom: 5px;
			&:last-child {
				margin-bottom: 0;
			}
		}
	}

	// Vertically center in expanded, horizontal navbar
	.navbar-vertical-align(@input-height-base);
	// Undo 100% width for pull classes
	@media (min-width: @grid-float-breakpoint) {
		width: auto;
		border: 0;
		margin-left: 0;
		margin-right: 0;
		padding-top: 0;
		padding-bottom: 0;
		.box-shadow(none);
	}
}
// Dropdown menus
// Menu position and menu carets
.navbar-nav>li>.dropdown-menu {
	margin-top: 0;
	.border-top-radius(0);
}
// Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .navbar-nav>li>.dropdown-menu {
	margin-bottom: 0;
	.border-top-radius(@navbar-border-radius);
	.border-bottom-radius(0);
}
// Buttons in navbars
//
// Vertically center a button within a navbar (when *not* in a form).
.navbar-btn {
	.navbar-vertical-align(@input-height-base);
	&.btn-sm {
		.navbar-vertical-align(@input-height-small);
	}

	&.btn-xs {
		.navbar-vertical-align(22);
	}
}
// Text in navbars
//
// Add a class to make any element properly align itself vertically within the navbars.
.navbar-text {
	.navbar-vertical-align(@line-height-computed);
	@media (min-width: @grid-float-breakpoint) {
		float: left;
		margin-left: @navbar-padding-horizontal;
		margin-right: @navbar-padding-horizontal;
	}
}
// Component alignment
//
// Repurpose the pull utilities as their own navbar utilities to avoid specificity
// issues with parents and chaining. Only do this when the navbar is uncollapsed
// though so that navbar contents properly stack and align in mobile.
//
// Declared after the navbar components to ensure more specificity on the margins.
@media (min-width: @grid-float-breakpoint) {
	.navbar-left {
		.pull-left();
	}

	.navbar-right {
		.pull-right();
		margin-right: -@navbar-padding-horizontal;
		~.navbar-right {
			margin-right: 0;
		}
	}
}
// Alternate navbars
// --------------------------------------------------
// Default navbar
.navbar-default {
	background-color: @navbar-default-bg;
	border-color: @navbar-default-border;
	.navbar-brand {
		color: @navbar-default-brand-color;
		&:hover,
		&:focus {
			color: @navbar-default-brand-hover-color;
			background-color: @navbar-default-brand-hover-bg;
		}
	}

	.navbar-text {
		color: @navbar-default-color;
	}

	.navbar-nav {
		>li>a {
			color: @navbar-default-link-color;
			&:hover,
			&:focus {
				color: @navbar-default-link-hover-color;
				background-color: @navbar-default-link-hover-bg;
			}
		}
		>.active>a {
			&,
			&:hover,
			&:focus {
				color: @navbar-default-link-active-color;
				background-color: @navbar-default-link-active-bg;
			}
		}
		>.disabled>a {
			&,
			&:hover,
			&:focus {
				color: @navbar-default-link-disabled-color;
				background-color: @navbar-default-link-disabled-bg;
			}
		}
	}

	.navbar-toggle {
		border-color: @navbar-default-toggle-border-color;
		&:hover,
		&:focus {
			background-color: @navbar-default-toggle-hover-bg;
		}
		.icon-bar {
			background-color: @navbar-default-toggle-icon-bar-bg;
		}
	}

	.navbar-collapse,
	.navbar-form {
		border-color: @navbar-default-border;
	}

	// Dropdown menu items
	.navbar-nav {
		// Remove background color from open dropdown
		>.open>a {
			&,
			&:hover,
			&:focus {
				background-color: @navbar-default-link-active-bg;
				color: @navbar-default-link-active-color;
			}
		}
		@media (max-width: @grid-float-breakpoint-max) {
			// Dropdowns get custom display when collapsed
			.open .dropdown-menu {
				>li>a {
					color: @navbar-default-link-color;
					&:hover,
					&:focus {
						color: @navbar-default-link-hover-color;
						background-color: @navbar-default-link-hover-bg;
					}
				}
				>.active>a {
					&,
					&:hover,
					&:focus {
						color: @navbar-default-link-active-color;
						background-color: @navbar-default-link-active-bg;
					}
				}
				>.disabled>a {
					&,
					&:hover,
					&:focus {
						color: @navbar-default-link-disabled-color;
						background-color: @navbar-default-link-disabled-bg;
					}
				}
			}
		}
	}

	// Links in navbars
	//
	// Add a class to ensure links outside the navbar nav are colored correctly.
	.navbar-link {
		color: @navbar-default-link-color;
		&:hover {
			color: @navbar-default-link-hover-color;
		}
	}

	.btn-link {
		color: @navbar-default-link-color;
		&:hover,
		&:focus {
			color: @navbar-default-link-hover-color;
		}
		&[disabled],
		fieldset[disabled] & {
			&:hover,
			&:focus {
				color: @navbar-default-link-disabled-color;
			}
		}
	}
}
// Inverse navbar
.navbar-inverse {
	background-color: @navbar-inverse-bg;
	border-color: @navbar-inverse-border;
	.navbar-brand {
		color: @navbar-inverse-brand-color;
		&:hover,
		&:focus {
			color: @navbar-inverse-brand-hover-color;
			background-color: @navbar-inverse-brand-hover-bg;
		}
	}

	.navbar-text {
		color: @navbar-inverse-color;
	}

	.navbar-nav {
		>li>a {
			color: @navbar-inverse-link-color;
			&:hover,
			&:focus {
				color: @navbar-inverse-link-hover-color;
				background-color: @navbar-inverse-link-hover-bg;
			}
		}
		>.active>a {
			&,
			&:hover,
			&:focus {
				color: @navbar-inverse-link-active-color;
				background-color: @navbar-inverse-link-active-bg;
			}
		}
		>.disabled>a {
			&,
			&:hover,
			&:focus {
				color: @navbar-inverse-link-disabled-color;
				background-color: @navbar-inverse-link-disabled-bg;
			}
		}
	}

	// Darken the responsive nav toggle
	.navbar-toggle {
		border-color: @navbar-inverse-toggle-border-color;
		&:hover,
		&:focus {
			background-color: @navbar-inverse-toggle-hover-bg;
		}
		.icon-bar {
			background-color: @navbar-inverse-toggle-icon-bar-bg;
		}
	}

	.navbar-collapse,
	.navbar-form {
		border-color: darken(@navbar-inverse-bg, 7%);
	}

	// Dropdowns
	.navbar-nav {
		>.open>a {
			&,
			&:hover,
			&:focus {
				background-color: @navbar-inverse-link-active-bg;
				color: @navbar-inverse-link-active-color;
			}
		}
		@media (max-width: @grid-float-breakpoint-max) {
			// Dropdowns get custom display
			.open .dropdown-menu {
				>.dropdown-header {
					border-color: @navbar-inverse-border;
				}
				.divider {
					background-color: @navbar-inverse-border;
				}
				>li>a {
					color: @navbar-inverse-link-color;
					&:hover,
					&:focus {
						color: @navbar-inverse-link-hover-color;
						background-color: @navbar-inverse-link-hover-bg;
					}
				}
				>.active>a {
					&,
					&:hover,
					&:focus {
						color: @navbar-inverse-link-active-color;
						background-color: @navbar-inverse-link-active-bg;
					}
				}
				>.disabled>a {
					&,
					&:hover,
					&:focus {
						color: @navbar-inverse-link-disabled-color;
						background-color: @navbar-inverse-link-disabled-bg;
					}
				}
			}
		}
	}

	.navbar-link {
		color: @navbar-inverse-link-color;
		&:hover {
			color: @navbar-inverse-link-hover-color;
		}
	}

	.btn-link {
		color: @navbar-inverse-link-color;
		&:hover,
		&:focus {
			color: @navbar-inverse-link-hover-color;
		}
		&[disabled],
		fieldset[disabled] & {
			&:hover,
			&:focus {
				color: @navbar-inverse-link-disabled-color;
			}
		}
	}
}

//
// Navbars
// --------------------------------------------------

// Wrapper and base class
//
// Provide a static navbar from which we expand to create full-width, fixed, and
// other navbar variations.

.oc-navbar {
  position: relative;
  border: 1px solid @navbar-default-border;

  //brought in from .navbar-default
  background-color: @navbar-default-bg;

  // Prevent floats from breaking the navbar
  &:extend(.clearfix all);

  @media (min-width: @grid-float-breakpoint) {
	border-radius: @navbar-border-radius;
  }
  &.oc-navbar-top {
	min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
	margin-bottom: @navbar-margin-bottom;
	.dropdown-menu {
	  margin-top: 0;
	  .border-top-radius(0);
	}
  }
/*  &.oc-navbar-left {
	float:left;
	top:-(@navbar-height + @navbar-margin-bottom);
	width:300px;
	+ main {
	  margin-left:315px;
	}
  }*/
}

.container {
  & > .oc-nav {
	margin-left:-15px;
	margin-right:-15px;
  }
}

}

.oc-nav-item {
  display:inline-block;
  padding:@navbar-padding-vertical @navbar-padding-horizontal;
  line-height:@line-height-computed;
  a {
	text-decoration:none;
	color:@navbar-default-link-color;
  }
  &-brand {
	order:0;
	font-family:@headings-font-family;
	font-size:1.2em;
	font-weight:bold;
	height: @navbar-height;

	a {
	  color:@navbar-default-brand-color;
	}

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

	> img {
	  display: block;
	}
	@media(max-width:@screen-xs-max) {
	}
  }
  &-form {
	flex-grow:1;
	flex-shrink:1;
	padding-top:@navbar-padding-vertical - 7px;
	padding-bottom:@navbar-padding-vertical - 7px;
	@shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
	.box-shadow(@shadow);
	@media(max-width:@screen-xs-max) {
	  //width:100%;
	}
  }
  &-cart {
	position:relative;
	.badge {
	  position:absolute;
	  left:5px;
	  bottom:5px;
	  background-color:@brand-danger;
	  color:white;
	}
  }
}

.oc-navbar-fixed-top {
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  border-width: 0 0 1px;
  z-index: @zindex-navbar-fixed;

  // Undo the rounded corners
  @media (min-width: @grid-float-breakpoint) {
	border-radius: 0;
  }
}

// Navbar heading
//
// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
// styling of responsive aspects.

.navbar-header {
  &:extend(.clearfix all);

  @media (min-width: @grid-float-breakpoint) {
	float: left;
  }
}

// Navbar collapse (body)
//
// Group your navbar content into this for easy collapsing and expanding across
// various device sizes. By default, this content is collapsed when <768px, but
// will expand past that for a horizontal display.
//
// To start (on mobile devices) the navbar links, forms, and buttons are stacked
// vertically and include a `max-height` to overflow in case you have too much
// content for the user's viewport.

.navbar-collapse {
  overflow-x: visible;
  padding-right: @navbar-padding-horizontal;
  padding-left:  @navbar-padding-horizontal;
  border-top: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  &:extend(.clearfix all);
  -webkit-overflow-scrolling: touch;

  &.in {
	overflow-y: auto;
  }

  @media (min-width: @grid-float-breakpoint) {
	width: auto;
	border-top: 0;
	box-shadow: none;

	&.collapse {
	  display: block !important;
	  height: auto !important;
	  padding-bottom: 0; // Override default setting
	  overflow: visible !important;
	}

	&.in {
	  overflow-y: visible;
	}

	// Undo the collapse side padding for navbars with containers to ensure
	// alignment of right-aligned contents.
	.navbar-fixed-top &,
	.navbar-static-top &,
	.navbar-fixed-bottom & {
	  padding-left: 0;
	  padding-right: 0;
	}
  }
}

.navbar-fixed-top,
.navbar-fixed-bottom {
  .navbar-collapse {
	max-height: @navbar-collapse-max-height;

	@media (max-device-width: @screen-xs-min) and (orientation: landscape) {
	  max-height: 200px;
	}
  }
}

// Both navbar header and collapse
//
// When a container is present, change the behavior of the header and collapse.

.container,
.container-fluid {
  > .navbar-header,
  > .navbar-collapse {
	margin-right: -@navbar-padding-horizontal;
	margin-left:  -@navbar-padding-horizontal;

	@media (min-width: @grid-float-breakpoint) {
	  margin-right: 0;
	  margin-left:  0;
	}
  }
}

//
// Navbar alignment options
//
// Display the navbar across the entirety of the page or fixed it to the top or
// bottom of the page.

// Static top (unfixed, but 100% wide) navbar
.navbar-static-top {
  z-index: @zindex-navbar;
  border-width: 0 0 1px;

  @media (min-width: @grid-float-breakpoint) {
	border-radius: 0;
  }
}

// Fix the top/bottom navbars when screen real estate supports it
.navbar-fixed-top {
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  border-width: 0 0 1px;
  z-index: @zindex-navbar-fixed;

  // Undo the rounded corners
  @media (min-width: @grid-float-breakpoint) {
	border-radius: 0;
  }
}
.navbar-fixed-top {
  top: 0;
  border-width: 0 0 1px;
}
.navbar-fixed-bottom {
  bottom: 0;
  margin-bottom: 0; // override .navbar defaults
  border-width: 1px 0 0;
}

// Brand/project name

.navbar-brand {
  float: left;
  padding: @navbar-padding-vertical @navbar-padding-horizontal;
  font-size: @font-size-large;
  line-height: @line-height-computed;
  height: @navbar-height;

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

  > img {
	display: block;
  }

  @media (min-width: @grid-float-breakpoint) {
	.navbar > .container &,
	.navbar > .container-fluid & {
	  margin-left: -@navbar-padding-horizontal;
	}
  }
}

// Navbar toggle
//
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
// JavaScript plugin.

.navbar-toggle {
  position: relative;
  float: right;
  margin-right: @navbar-padding-horizontal;
  padding: 9px 10px;
  .navbar-vertical-align(34px);
  background-color: transparent;
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  border: 1px solid transparent;
  border-radius: @border-radius-base;

  // We remove the `outline` here, but later compensate by attaching `:hover`
  // styles to `:focus`.
  &:focus {
	outline: 0;
  }

  // Bars
  .icon-bar {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 1px;
  }
  .icon-bar + .icon-bar {
	margin-top: 4px;
  }

  @media (min-width: @grid-float-breakpoint) {
	display: none;
  }
}

// Navbar nav links
//
// Builds on top of the `.nav` components with its own modifier class to make
// the nav the full height of the horizontal nav (above 768px).

.navbar-nav {
  margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;

  > li > a {
	padding-top:    10px;
	padding-bottom: 10px;
	line-height: @line-height-computed;
  }

  @media (max-width: @grid-float-breakpoint-max) {
	// Dropdowns get custom display when collapsed
	.open .dropdown-menu {
	  position: static;
	  float: none;
	  width: auto;
	  margin-top: 0;
	  background-color: transparent;
	  border: 0;
	  box-shadow: none;
	  > li > a,
	  .dropdown-header {
		padding: 5px 15px 5px 25px;
	  }
	  > li > a {
		line-height: @line-height-computed;
		&:hover,
		&:focus {
		  background-image: none;
		}
	  }
	}
  }

  // Uncollapse the nav
  @media (min-width: @grid-float-breakpoint) {
	float: left;
	margin: 0;

	> li {
	  float: left;
	  > a {
		padding-top:    @navbar-padding-vertical;
		padding-bottom: @navbar-padding-vertical;
	  }
	}
  }
}

// Navbar form
//
// Extension of the `.form-inline` with some extra flavor for optimum display in
// our navbars.

.navbar-form {
  margin-left: -@navbar-padding-horizontal;
  margin-right: -@navbar-padding-horizontal;
  padding: 10px @navbar-padding-horizontal;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
  .box-shadow(@shadow);

  // Mixin behavior for optimum display
  .form-inline();

  .form-group {
	@media (max-width: @grid-float-breakpoint-max) {
	  margin-bottom: 5px;

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

  // Vertically center in expanded, horizontal navbar
  .navbar-vertical-align(@input-height-base);

  // Undo 100% width for pull classes
  @media (min-width: @grid-float-breakpoint) {
	width: auto;
	border: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	.box-shadow(none);
  }
}

// Dropdown menus

// Menu position and menu carets
.navbar-nav > li > .dropdown-menu {
  margin-top: 0;
  .border-top-radius(0);
}
// Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
  margin-bottom: 0;
  .border-top-radius(@navbar-border-radius);
  .border-bottom-radius(0);
}

// Buttons in navbars
//
// Vertically center a button within a navbar (when *not* in a form).

.navbar-btn {
  .navbar-vertical-align(@input-height-base);

  &.btn-sm {
	.navbar-vertical-align(@input-height-small);
  }
  &.btn-xs {
	.navbar-vertical-align(22);
  }
}

// Text in navbars
//
// Add a class to make any element properly align itself vertically within the navbars.

.navbar-text {
  .navbar-vertical-align(@line-height-computed);

  @media (min-width: @grid-float-breakpoint) {
	float: left;
	margin-left: @navbar-padding-horizontal;
	margin-right: @navbar-padding-horizontal;
  }
}

// Component alignment
//
// Repurpose the pull utilities as their own navbar utilities to avoid specificity
// issues with parents and chaining. Only do this when the navbar is uncollapsed
// though so that navbar contents properly stack and align in mobile.
//
// Declared after the navbar components to ensure more specificity on the margins.

@media (min-width: @grid-float-breakpoint) {
  .navbar-left  { .pull-left(); }
  .navbar-right {
	.pull-right();
	margin-right: -@navbar-padding-horizontal;

	~ .navbar-right {
	  margin-right: 0;
	}
  }
}

// Alternate navbars
// --------------------------------------------------

// Default navbar
.navbar-default {
  background-color: @navbar-default-bg;
  border-color: @navbar-default-border;

  .navbar-brand {
	color: @navbar-default-brand-color;
	&:hover,
	&:focus {
	  color: @navbar-default-brand-hover-color;
	  background-color: @navbar-default-brand-hover-bg;
	}
  }

  .navbar-text {
	color: @navbar-default-color;
  }

  .navbar-nav {
	> li > a {
	  color: @navbar-default-link-color;

	  &:hover,
	  &:focus {
		color: @navbar-default-link-hover-color;
		background-color: @navbar-default-link-hover-bg;
	  }
	}
	> .active > a {
	  &,
	  &:hover,
	  &:focus {
		color: @navbar-default-link-active-color;
		background-color: @navbar-default-link-active-bg;
	  }
	}
	> .disabled > a {
	  &,
	  &:hover,
	  &:focus {
		color: @navbar-default-link-disabled-color;
		background-color: @navbar-default-link-disabled-bg;
	  }
	}
  }

  .navbar-toggle {
	border-color: @navbar-default-toggle-border-color;
	&:hover,
	&:focus {
	  background-color: @navbar-default-toggle-hover-bg;
	}
	.icon-bar {
	  background-color: @navbar-default-toggle-icon-bar-bg;
	}
  }

  .navbar-collapse,
  .navbar-form {
	border-color: @navbar-default-border;
  }

  // Dropdown menu items
  .navbar-nav {
	// Remove background color from open dropdown
	> .open > a {
	  &,
	  &:hover,
	  &:focus {
		background-color: @navbar-default-link-active-bg;
		color: @navbar-default-link-active-color;
	  }
	}

	@media (max-width: @grid-float-breakpoint-max) {
	  // Dropdowns get custom display when collapsed
	  .open .dropdown-menu {
		> li > a {
		  color: @navbar-default-link-color;
		  &:hover,
		  &:focus {
			color: @navbar-default-link-hover-color;
			background-color: @navbar-default-link-hover-bg;
		  }
		}
		> .active > a {
		  &,
		  &:hover,
		  &:focus {
			color: @navbar-default-link-active-color;
			background-color: @navbar-default-link-active-bg;
		  }
		}
		> .disabled > a {
		  &,
		  &:hover,
		  &:focus {
			color: @navbar-default-link-disabled-color;
			background-color: @navbar-default-link-disabled-bg;
		  }
		}
	  }
	}
  }

  // Links in navbars
  //
  // Add a class to ensure links outside the navbar nav are colored correctly.

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

  .btn-link {
	color: @navbar-default-link-color;
	&:hover,
	&:focus {
	  color: @navbar-default-link-hover-color;
	}
	&[disabled],
	fieldset[disabled] & {
	  &:hover,
	  &:focus {
		color: @navbar-default-link-disabled-color;
	  }
	}
  }
}

// Inverse navbar

.navbar-inverse {
  background-color: @navbar-inverse-bg;
  border-color: @navbar-inverse-border;

  .navbar-brand {
	color: @navbar-inverse-brand-color;
	&:hover,
	&:focus {
	  color: @navbar-inverse-brand-hover-color;
	  background-color: @navbar-inverse-brand-hover-bg;
	}
  }

  .navbar-text {
	color: @navbar-inverse-color;
  }

  .navbar-nav {
	> li > a {
	  color: @navbar-inverse-link-color;

	  &:hover,
	  &:focus {
		color: @navbar-inverse-link-hover-color;
		background-color: @navbar-inverse-link-hover-bg;
	  }
	}
	> .active > a {
	  &,
	  &:hover,
	  &:focus {
		color: @navbar-inverse-link-active-color;
		background-color: @navbar-inverse-link-active-bg;
	  }
	}
	> .disabled > a {
	  &,
	  &:hover,
	  &:focus {
		color: @navbar-inverse-link-disabled-color;
		background-color: @navbar-inverse-link-disabled-bg;
	  }
	}
  }

  // Darken the responsive nav toggle
  .navbar-toggle {
	border-color: @navbar-inverse-toggle-border-color;
	&:hover,
	&:focus {
	  background-color: @navbar-inverse-toggle-hover-bg;
	}
	.icon-bar {
	  background-color: @navbar-inverse-toggle-icon-bar-bg;
	}
  }

  .navbar-collapse,
  .navbar-form {
	border-color: darken(@navbar-inverse-bg, 7%);
  }

  // Dropdowns
  .navbar-nav {
	> .open > a {
	  &,
	  &:hover,
	  &:focus {
		background-color: @navbar-inverse-link-active-bg;
		color: @navbar-inverse-link-active-color;
	  }
	}

	@media (max-width: @grid-float-breakpoint-max) {
	  // Dropdowns get custom display
	  .open .dropdown-menu {
		> .dropdown-header {
		  border-color: @navbar-inverse-border;
		}
		.divider {
		  background-color: @navbar-inverse-border;
		}
		> li > a {
		  color: @navbar-inverse-link-color;
		  &:hover,
		  &:focus {
			color: @navbar-inverse-link-hover-color;
			background-color: @navbar-inverse-link-hover-bg;
		  }
		}
		> .active > a {
		  &,
		  &:hover,
		  &:focus {
			color: @navbar-inverse-link-active-color;
			background-color: @navbar-inverse-link-active-bg;
		  }
		}
		> .disabled > a {
		  &,
		  &:hover,
		  &:focus {
			color: @navbar-inverse-link-disabled-color;
			background-color: @navbar-inverse-link-disabled-bg;
		  }
		}
	  }
	}
  }

  .navbar-link {
	color: @navbar-inverse-link-color;
	&:hover {
	  color: @navbar-inverse-link-hover-color;
	}
  }

  .btn-link {
	color: @navbar-inverse-link-color;
	&:hover,
	&:focus {
	  color: @navbar-inverse-link-hover-color;
	}
	&[disabled],
	fieldset[disabled] & {
	  &:hover,
	  &:focus {
		color: @navbar-inverse-link-disabled-color;
	  }
	}
  }
}


Components: added 'table'

Components: added 'table'

.table {
	width: 100%;
	border-spacing: 0;
	margin-bottom: 1em;
	// border-top: 1px solid #e6e6e6;
	// color: #313131;
}

.table__row {
	border-bottom: 1px solid #e0e0e0;
}

.table__cell {
	text-align: left;
	padding: 0.75em 1.25em;
	// padding: 0.875em 1.5em;
	// font-size: 87.5%;
}

.table__cell--header {
	font-weight: bold;
}

.table__head,
.table__foot {
	color: #757575;

	.table__cell {
		padding-top: 1.125em;
		padding-bottom: 1.125em;
	}
}

.table__body {
	vertical-align: top;
}

.table--hover .table__body .table__row {
	background-color: #f2f2f2;
}

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


给list增加默认样式

给list增加默认样式

error: pathspec 'coms/zimoli/list.less' did not match any file(s) known to git


When a card is unselectable, gray out just the image, not the outline

.card-wrapper {
  margin: 0px 0px 0px 0px;
  vertical-align: middle;
  display: inline-block;

  &.imperial-favor {
    margin: 0px 5px;
  }
}

.generate-wrappers(@n, @i: 1) when (@i =< @n) {
  .wrapper-@{i} {
    margin-left: @attachment-offset*@i;

  &.small {
      margin-left: -(@attachment-offset-sm)*@i;
    }

    &.large {
      margin-left: -(@attachment-offset-lg)*@i;
    }

    &.x-large {
      margin-left: -(@attachment-offset-xl)*@i;
    }
  }
  .generate-wrappers(@n, (@i + 1));
}

.generate-wrappers(10, 1);

.card-frame {
  position: relative;
}

.card {
  position: relative;
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.1);
  overflow: hidden;
  z-index: @layer-cards;

  &.small {
    &.vertical {
      height: @card-sm-height;
      width: @card-sm-width;

    }

    &.horizontal {
      height: @card-sm-width;
      width: @card-sm-height;

    }
  }

  &.large {
    &.vertical {
      height: @card-lg-height;
      width: @card-lg-width;

    }

    &.horizontal {
      height: @card-lg-width;
      width: @card-lg-height;

    }
  }

  &.x-large {
    &.vertical {
      height: @card-xl-height;
      width: @card-xl-width;

    }

    &.horizontal {
      height: @card-xl-width;
      width: @card-xl-height;

    }
  }

  &.vertical {
    height: @card-height;
    width: @card-width;

  }

  &.horizontal {
    height: @card-width;
    width: @card-height;

  }

  &.selectable {
    box-shadow: 0 0 10px 1px fadeout(lighten(@brand-primary, 60%), 10%);
  }

    &.unselectable {
        filter: brightness(60%);

        .card-image {
            filter: grayscale(100%);
        }
    }

  &.in-danger {
    box-shadow: 0 0 1px 2px red;
  }

  &.selected {
    box-shadow: 0 0 1px 4px @brand-tertiary;
  }

  &.new {
    box-shadow: 0 0 1px 2px @brand-info;
  }

  &.controlled {
    box-shadow: 0 0 1px 2px @brand-warning;
  }

  &.conflict {
    box-shadow: 0 0 1px 3px @brand-danger;
  }

  &.covert {
    box-shadow: 0 0 1px 2px #9900cc;
  }
}

.card-image {
  left: 0;
  position: absolute;
  top: 0;

  &.small {
    &.vertical {
      height: @card-sm-height;
      width: @card-sm-width;
    }

    &.horizontal {
      height: @card-sm-width;
      width: @card-sm-height;
    }
  }

  &.vertical {
    height: @card-height;
    width: @card-width;
  }

  &.horizontal {
    height: @card-width;
    width: @card-height;
  }

  &.large {
    &.vertical {
      height: @card-lg-height;
      width: @card-lg-width;
    }

    &.horizontal {
      height: @card-lg-width;
      width: @card-lg-height;
    }

    &.bowed {
      left: 19px;
      top: -20px;
    }
  }

  &.x-large {
    &.vertical {
      height: @card-xl-height;
      width: @card-xl-width;
    }

    &.horizontal {
      height: @card-xl-width;
      width: @card-xl-height;
    }

    &.bowed {
      left: 24px;
      top: -26px;
    }
  }

  &.bowed {
    left: 9px;
    top: -10px;
    transform: rotate(90deg);

  }

  &.broken {
      transform: rotate(180deg);
  }
}

.card-order {
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.9);
  border-radius: 4px;
  color: white;
  font-size: 16px;
  font-weight: bold;
  height: 26px;
  left: 50%;
  line-height: 24px;
  margin: 0 0 0 -12px;
  position: absolute;
  text-align: center;
  top: -28px;
  width: 24px;
  z-index: @layer-card-menu;
}

.card-name {
  font-size: 10px;
  line-height: 14px;
}

.custom-card:hover .card-name {
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  z-index: @layer-card-menu;
}

.card-large {
  width: 220px;
  height: 307px;
  position: absolute;
  top: 0;
  right: 0;
  margin-right: 5px;
  margin-top: 5px;
}

.card-large-horizontal {
  width: 307px;
  height: 220px;
  position: relative;
  margin-right: 5px;
  margin-top: 5px;
}

.card-zoomed {
  width: 100%;
  height: 100%;
}

.card-zoomed > img {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  border-radius: 12px;
}

.attachment {
  margin-top: -(@card-height);

  &.small {
    margin-top: -(@card-sm-height);

  }

  &.large {
    margin-top: -(@card-lg-height);

  }

  &.x-large {
    margin-top: -(@card-xl-height);

  }

}

.generate-attachments(@n, @i: 1) when (@i =< @n) {
  .attachment-@{i} {
    margin-left: -(@attachment-offset)*@i;
    z-index: @layer-cards - @i;

    &.small {
      margin-left: -(@attachment-offset-sm)*@i;
    }

    &.large {
      margin-left: -(@attachment-offset-lg)*@i;
    }

    &.x-large {
      margin-left: -(@attachment-offset-xl)*@i;
    }
  }

  .attachment-@{i}.horizontal {
    margin-left: -(@attachment-offset)*@i;
    margin-top: -(@card-height)-(@attachment-offset);
    z-index: @layer-cards - @i;

    &.small {
      margin-left: -(@attachment-offset-sm)*@i;
      margin-top: -(@card-sm-height)-(@attachment-offset-sm);
    }

    &.large {
      margin-left: -(@attachment-offset-lg)*@i;
      margin-top: -(@card-lg-height)-(@attachment-offset-lg);
    }

    &.x-large {
      margin-left: -(@attachment-offset-xl)*@i;
      margin-top: -(@card-xl-height)-(@attachment-offset-xl);
    }

  }
  .generate-attachments(@n, (@i + 1));
}

.generate-attachments(10, 1);

.card-type-faction.horizontal {
    margin: 10px 0 0 -10px;
}

.counters {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  justify-content: center;
  display: flex;
  align-content: center;
  align-items: center;
  flex-wrap: wrap;
  z-index: @layer-cards + 1;
}

.card.vertical .counters {
  flex-direction: column;

  &.many-counters {
    flex-direction: row;
  }
}

.card.horizontal .counters {
  flex-direction: row;

  &.many-counters {
    flex-direction: column;
  }
}

.fatecountertext {
  position: relative;
  left: 0px;
  top: -95%;
  text-align: center;
  font-size: 14px;
  color: white;
  text-shadow: 1px 1px 2px #000;
}

.fatecounter {
  box-sizing: border-box;
  width: 25px;
  height: 25px;
}

.honorcounter {
  box-sizing: border-box;
  width: 25px;
  height: 25px;
  position: absolute;
  top: 0px;
  left: 20px;

}

.honorstatuscounter {
  box-sizing: border-box;
  width: 25px;
  height: 25px;
}

/* Don't think we actually need this
.counter {
  padding: 0;
  font-size: 12px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  margin: 2px;
  text-shadow: 1px 1px 2px #000;
  border-radius: 4px;
  color: white;

  &.political {
    span {
      display: none;
    }

    font-family: 'fiveringsdb';

    &:before {
      content: "\e901";
      color: @political-icon-color;
    }

    background-color: rgba(0, 0, 0, 0.85);
  }

  &.military {
    span {
      display: none;
    }

    font-family: 'fiveringsdb';

    &:before {
      content: "\e900";
      color: @military-icon-color;
    }

    background-color: rgba(0, 0, 0, 0.85);
  }

  &.fade-out {
    opacity: 0.4;
  }

  &.cancel {
    position: relative;

    &:after {
      border-bottom: 0.17em solid @brand-danger;
      content: "";
      left: 0;
      margin-top: calc(0.17em / 2 * -1);
      position: absolute;
      right: 0;
      top: 50%;
    }
  }
}

*/

.strength {
  background-color: @strength-color;
}

.stand {
  background-color: rgba(128,128,128,0.85);
}

.province-attachment {
  margin-top: @province-attachment-offset - @card-height;
}

.generate-province-attachment(@n, @i: 1) when (@i =< @n) {
  .province-attachment-@{i} {
    z-index: @layer-cards - @i;
  }
  .generate-province-attachment(@n, (@i + 1));
}

.generate-province-attachment(5, 1);

.card-wrapper {
  margin: 0px 0px 0px 0px;
  vertical-align: middle;
  display: inline-block;

  &.imperial-favor {
    margin: 0px 5px;
  }
}

.generate-wrappers(@n, @i: 1) when (@i =< @n) {
  .wrapper-@{i} {
    margin-left: @attachment-offset*@i;

  &.small {
      margin-left: -(@attachment-offset-sm)*@i;
    }

    &.large {
      margin-left: -(@attachment-offset-lg)*@i;
    }

    &.x-large {
      margin-left: -(@attachment-offset-xl)*@i;
    }
  }
  .generate-wrappers(@n, (@i + 1));
}

.generate-wrappers(10, 1);

.card-frame {
  position: relative;
}

.card {
  position: relative;
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.1);
  overflow: hidden;
  z-index: @layer-cards;

  &.small {
    &.vertical {
      height: @card-sm-height;
      width: @card-sm-width;

    }

    &.horizontal {
      height: @card-sm-width;
      width: @card-sm-height;

    }
  }

  &.large {
    &.vertical {
      height: @card-lg-height;
      width: @card-lg-width;

    }

    &.horizontal {
      height: @card-lg-width;
      width: @card-lg-height;

    }
  }

  &.x-large {
    &.vertical {
      height: @card-xl-height;
      width: @card-xl-width;

    }

    &.horizontal {
      height: @card-xl-width;
      width: @card-xl-height;

    }
  }

  &.vertical {
    height: @card-height;
    width: @card-width;

  }

  &.horizontal {
    height: @card-width;
    width: @card-height;

  }

  &.selectable {
    box-shadow: 0 0 10px 1px fadeout(lighten(@brand-primary, 60%), 10%);
  }

  &.unselectable {
    filter: grayscale(100%) brightness(60%);
  }

  &.in-danger {
    box-shadow: 0 0 1px 2px red;
  }

  &.selected {
    box-shadow: 0 0 1px 4px @brand-tertiary;
  }

  &.new {
    box-shadow: 0 0 1px 2px @brand-info;
  }

  &.controlled {
    box-shadow: 0 0 1px 2px @brand-warning;
  }

  &.conflict {
    box-shadow: 0 0 1px 3px @brand-danger;
  }

  &.covert {
    box-shadow: 0 0 1px 2px #9900cc;
  }
}

.card-image {
  left: 0;
  position: absolute;
  top: 0;

  &.small {
    &.vertical {
      height: @card-sm-height;
      width: @card-sm-width;
    }

    &.horizontal {
      height: @card-sm-width;
      width: @card-sm-height;
    }
  }

  &.vertical {
    height: @card-height;
    width: @card-width;
  }

  &.horizontal {
    height: @card-width;
    width: @card-height;
  }

  &.large {
    &.vertical {
      height: @card-lg-height;
      width: @card-lg-width;
    }

    &.horizontal {
      height: @card-lg-width;
      width: @card-lg-height;
    }

    &.bowed {
      left: 19px;
      top: -20px;
    }
  }

  &.x-large {
    &.vertical {
      height: @card-xl-height;
      width: @card-xl-width;
    }

    &.horizontal {
      height: @card-xl-width;
      width: @card-xl-height;
    }

    &.bowed {
      left: 24px;
      top: -26px;
    }
  }

  &.bowed {
    left: 9px;
    top: -10px;
    transform: rotate(90deg);

  }

  &.broken {
      transform: rotate(180deg);
  }
}

.card-order {
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.9);
  border-radius: 4px;
  color: white;
  font-size: 16px;
  font-weight: bold;
  height: 26px;
  left: 50%;
  line-height: 24px;
  margin: 0 0 0 -12px;
  position: absolute;
  text-align: center;
  top: -28px;
  width: 24px;
  z-index: @layer-card-menu;
}

.card-name {
  font-size: 10px;
  line-height: 14px;
}

.custom-card:hover .card-name {
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  z-index: @layer-card-menu;
}

.card-large {
  width: 220px;
  height: 307px;
  position: absolute;
  top: 0;
  right: 0;
  margin-right: 5px;
  margin-top: 5px;
}

.card-large-horizontal {
  width: 307px;
  height: 220px;
  position: relative;
  margin-right: 5px;
  margin-top: 5px;
}

.card-zoomed {
  width: 100%;
  height: 100%;
}

.card-zoomed > img {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  border-radius: 12px;
}

.attachment {
  margin-top: -(@card-height);

  &.small {
    margin-top: -(@card-sm-height);

  }

  &.large {
    margin-top: -(@card-lg-height);

  }

  &.x-large {
    margin-top: -(@card-xl-height);

  }

}

.generate-attachments(@n, @i: 1) when (@i =< @n) {
  .attachment-@{i} {
    margin-left: -(@attachment-offset)*@i;
    z-index: @layer-cards - @i;

    &.small {
      margin-left: -(@attachment-offset-sm)*@i;
    }

    &.large {
      margin-left: -(@attachment-offset-lg)*@i;
    }

    &.x-large {
      margin-left: -(@attachment-offset-xl)*@i;
    }
  }

  .attachment-@{i}.horizontal {
    margin-left: -(@attachment-offset)*@i;
    margin-top: -(@card-height)-(@attachment-offset);
    z-index: @layer-cards - @i;

    &.small {
      margin-left: -(@attachment-offset-sm)*@i;
      margin-top: -(@card-sm-height)-(@attachment-offset-sm);
    }

    &.large {
      margin-left: -(@attachment-offset-lg)*@i;
      margin-top: -(@card-lg-height)-(@attachment-offset-lg);
    }

    &.x-large {
      margin-left: -(@attachment-offset-xl)*@i;
      margin-top: -(@card-xl-height)-(@attachment-offset-xl);
    }

  }
  .generate-attachments(@n, (@i + 1));
}

.generate-attachments(10, 1);

.card-type-faction.horizontal {
    margin: 10px 0 0 -10px;
}

.counters {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  justify-content: center;
  display: flex;
  align-content: center;
  align-items: center;
  flex-wrap: wrap;
  z-index: @layer-cards + 1;
}

.card.vertical .counters {
  flex-direction: column;

  &.many-counters {
    flex-direction: row;
  }
}

.card.horizontal .counters {
  flex-direction: row;

  &.many-counters {
    flex-direction: column;
  }
}

.fatecountertext {
  position: relative;
  left: 0px;
  top: -95%;
  text-align: center;
  font-size: 14px;
  color: white;
  text-shadow: 1px 1px 2px #000;
}

.fatecounter {
  box-sizing: border-box;
  width: 25px;
  height: 25px;
}

.honorcounter {
  box-sizing: border-box;
  width: 25px;
  height: 25px;
  position: absolute;
  top: 0px;
  left: 20px;

}

.honorstatuscounter {
  box-sizing: border-box;
  width: 25px;
  height: 25px;
}

/* Don't think we actually need this
.counter {
  padding: 0;
  font-size: 12px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  margin: 2px;
  text-shadow: 1px 1px 2px #000;
  border-radius: 4px;
  color: white;

  &.political {
    span {
      display: none;
    }

    font-family: 'fiveringsdb';

    &:before {
      content: "\e901";
      color: @political-icon-color;
    }

    background-color: rgba(0, 0, 0, 0.85);
  }

  &.military {
    span {
      display: none;
    }

    font-family: 'fiveringsdb';

    &:before {
      content: "\e900";
      color: @military-icon-color;
    }

    background-color: rgba(0, 0, 0, 0.85);
  }

  &.fade-out {
    opacity: 0.4;
  }

  &.cancel {
    position: relative;

    &:after {
      border-bottom: 0.17em solid @brand-danger;
      content: "";
      left: 0;
      margin-top: calc(0.17em / 2 * -1);
      position: absolute;
      right: 0;
      top: 50%;
    }
  }
}

*/

.strength {
  background-color: @strength-color;
}

.stand {
  background-color: rgba(128,128,128,0.85);
}

.province-attachment {
  margin-top: @province-attachment-offset - @card-height;
}

.generate-province-attachment(@n, @i: 1) when (@i =< @n) {
  .province-attachment-@{i} {
    z-index: @layer-cards - @i;
  }
  .generate-province-attachment(@n, (@i + 1));
}

.generate-province-attachment(5, 1);


Docs - header - added image from HP

Docs - header - added image from HP

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/LUI-3/website.git/'


Removed two lines to fix an error.

Removed two lines to fix an error.

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Digipalvelutehdas/APIKA.git/'


[Bug 839613] Fix text in form field

[Bug 839613] Fix text in form field

@import 'variables.less';
@import 'vendors.less';
@import 'includes/editor-tools.less';
@import 'includes/for-contributors-hot-topics.less';
@import 'includes/search-result.less';

h1 {
  font-size: 46px;
  margin-top: 0;
}

h2 {
  font-size: 28px;
}

.answers {
  .answer-tools {
    margin: 0 0 20px 130px;
    padding: 0 20px;

    > a {
      float: right;
      margin: 1px 0;
    }

    > form {
      float: left;
      text-transform: uppercase;

      .btn {
        text-transform: none;
      }
    }
  }

  .avatar {
    margin-bottom: 10px;

    img {
      border: 6px solid #fff;
    }
  }

  .helpful-count {
    &:before {
      content: '\2665';
      font-size: 20px;
      margin-right: 2px;
    }
  }

  .is-helpful {
    color: @textOrange;
  }

  .is-owner {
    color: @textBlue;
  }

  .is-solution {
    color: @textGreen;
  }

  .main-content {
    background: #fff;
    margin: 0 0 20px 130px;
    padding: 20px 30px;
    position: relative;

    &:before {
      border-color: transparent #fff;
      border-style: solid;
      border-width: 11px 11px 11px 0;
      height: 0;
      content: '';
      left: -11px;
      position: absolute;
      top: 20px;
      width: 0;
    }

    h3 {
      margin-top: 0;
    }

    .read-more {
      margin-right: 30px;
    }

    .other-helpful,
    .solution {
      border-top: 1px dotted @borderLightGrey;
      margin-top: 30px;
      padding-top: 30px;
    }

    .other-helpful {
      h3 {
        color: @textOrange;
      }
    }

    .solution {
      h3 {
        color: @textGreen;
        display: inline;
      }
    }
  }

  .notice {
    background: url('../img/warning-stripes.png') top left repeat-x #ffe;
    border: 1px solid #fffbe7;
    margin: 0 0 20px 0;
    padding: 20px 30px;
  }

  .question-meta {
    font-size: 12px;
    margin-bottom: 20px;
    text-transform: uppercase;

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

      li {
        float: left;
        margin-right: 20px;
      }
    }
  }

  .summary {
    margin: 0 0 10px 0;
  }

  .user-meta {
    float: left;
    font-size: 12px;
    margin: 0 20px 20px 0;
    width: 110px;

    .asked-by {
      margin-bottom: 25px;

      .answers,
      .points,
      .solutions {
        display: block;
      }

      .solutions {
        font-weight: bold;
      }

      .karma-titles {
        list-style: none;
        margin: 0;
        padding: 0;

        li {
          background: #fff;
          text-transform: uppercase;
          margin: 10px 0;
          padding: 5px;
        }
      }
    }
  }

  .question-tools {
    margin: 0 0 20px 130px;
    text-align: right;

    .btn {
      margin: 10px 0;
    }

    .me-too {
      float: left;

      .btn {
        margin: 0;
      }
    }
  }

  .report {
    margin-bottom: 20px;

    input,
    select {
      display: none;
    }

    .link-btn,
    .link-btn:visited,
    .link-btn:hover {
      color: @textLightGrey;
      display: block;
      float: right;
      font-size: 12px;
      text-transform: uppercase;
    }
  }

  .sidebar-nav {
    margin-bottom: 20px;

    &.condensed {
      margin-bottom: 0;
    }
  }

  .sidebox {
    margin-bottom: 20px;

    &.condensed {
      margin-bottom: 0;
    }
  }

  #question-reply {
    &:before {
      display: none;
    }

    textarea {
      margin-top: 10px;
      width: 510px;
    }

    .editor-tools {
      background: transparent;
    }
  }

  .system-details {
    text-transform: uppercase;

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

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

  #tags {
    text-transform: uppercase;

    button {
      background: transparent;
      border: 0;
      color: @textDarkOrange;
      cursor: pointer;
      margin: 0 0 0 5px;
      outline: none;
      padding: 0;
    }

    ul {
      list-style: none;
      margin: 0 0 12px 0;
      padding: 0;

      li {
        float: left;
        margin-right: 12px;

        a,
        a:visited,
        a:hover {
          color: @textGrey;
        }
      }

      &.immutable {
        button {
          display: none;
        }
      }
    }

    .btn {
      float: right;
    }

    .searchbox {
      display: block;
      margin-bottom: 12px;
      width: 140px;
    }
  }

  #vote-thanks-kbox {
    text-align: left;

    input#id_email {
      width: 230px;
    }
  }

  #more-system-details-kbox {
    margin-left: -115px;
    width: 720px;

    h1 {
      display: none;
    }

    h2 {
      font-size: 20px;
      font-weight: normal;
      margin: 15px 0 5px;
    }

    p,
    li {
      color: #898378;
      list-style: none;
      margin: 0;
    }

    div.about-support {
      ul {
        padding-left: 60px;
        li {
          list-style: disc;

          &.inactive {
            opacity: 0.5;
          }

          .key {
            font-weight: bold;
          }
        }
      }
    }

    div.plugins {
      li {
        background: transparent url(../img/questions/icon.plugin.gif) no-repeat 0 4px;
        padding: 2px 0 2px 25px;
      }
    }

    .bottom-close {
      margin: 10px 0 0;
      text-align: right;
    }
  }

  #email-subscribe-kbox {
    left: -150px;
    text-transform: none;
    top: 20px;
    width: 330px;

    ul.errorlist {
      margin: 0;
      padding: 0;

      li {
        margin: 0;
        padding: 0;
      }
    }

    a {
      padding: 0;
    }

    input#id_email {
      width: 270px;
    }

    form {
      ul {
        list-style: none;
        margin: 0;
        padding: 10px 0;
      }
    }
  }
}

.highlight-box {
  h2 {
    margin: 0;
  }

  .select-one {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      font-family: @OpenSansLight;
      font-size: 20px;
      margin: 10px 0;
    }
  }
}

.logo-sprite {
  background-image: url('../img/logos.large.sprite.png');
  background-repeat: no-repeat;
  height: 110px;
  width: 110px;

  &.logo-desktop {
    background-position: -20px -20px;
  }

  &.logo-mobile {
    background-position: -20px -470px;
  }

  &.logo-home {
    background-position: -20px -620px;
  }

  &.logo-sync {
    background-position: -20px -320px;
  }

  &.logo-other {
    background-position: -20px -170px;
  }
}

.questions {
  list-style: none;
  margin: 0;
  padding: 0;

  > section {
    background: #fff;
    padding: 20px 30px;
    position: relative;

    h2 {
      font-size: 22px;
      margin: 4px 0;
    }

    .content {
      border-right: 1px dotted @borderLightGrey;
      margin: 0 190px 0 0;
      min-height: 130px;
      padding: 0 20px 0 0;
    }

    .thread-meta {
      background: #fff;
      left: 0;
      overflow: hidden;
      padding: 0 6px;
      position: absolute;
      top: 0;
      width: 18px;

      &:hover {
        border-bottom: 1px solid @borderLightGrey;
        border-right: 1px solid @borderLightGrey;
        width: auto;
      }

      > div {
        background: url('../img/icons-sprite.png') 0 0 no-repeat;
        color: #ccc;
        font-size: 11px;
        height: 18px;
        line-height: 18px;
        margin: 6px 0;
        padding: 0 0 0 24px;
        text-transform: uppercase;

        &.highlighted {
          color: @textGrey;
        }

        &.thread-contributed {
          background-position: -48px -977px;

          &.highlighted {
            background-position: -48px -1093px;
          }
        }

        &.thread-solved {
          background-position: -49px -746px;

          &.highlighted {
            background-position: -49px -862px;
          }
        }
      }
    }

    .question-meta {
      float: right;
      font-size: 11px;
      padding: 0 0 0 20px;
      text-align: center;
      text-transform: uppercase;
      width: 170px;

      > div {
        width: 70px;

        &.have-problem-this-week {
          float: right;
          font-size: 13px;
          margin-top: 16px;
          width: 80px;

          h4 {
            font-size: 40px;
          }
        }
      }

      h4 {
        font-size: 30px;
        margin: 0;
      }

      &.urgent {
        h4 {
          color: #fe9300;
        }
      }
    }
  }

  > aside {
    font-size: 13px;
    margin: 10px 30px 30px 30px;

    .tag-list {
      display: inline;
      list-style: none;
      margin: 0;
      padding: 0;

      > li {
        display: inline;
        font-style: italic;
        margin: 0 0 0 10px;
      }
    }

    .user-meta {
      float: right;
    }
  }

  #filters {
    h3 {
      margin: 5px 0;
    }

    > section {
      border-top: 1px dotted @borderLightGrey;
      margin: 10px 0;
      padding: 10px 0;
    }

    p {
      font-size: 12px;
      margin-top: 0;
    }

    .grid_2 {
      margin-left: 0;
    }

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

      li {
        a {
          color: @textLightGrey;
        }

        &.active {
          a {
            color: @textGrey;
            font-weight: bold;
          }
        }
      }
    }

    input[type=text] {
      margin: 0 0 10px;
      width: 130px;
    }
  }

  #top-contributors {
    ol {
      display: inline-block;
      width: 35%;

      li {
        margin: 5px 0;
      }
    }

    .inner-wrap {
      display: none;
    }

    &:hover {
      position: relative;

      .inner-wrap {
        display:block;
      }

      .feature-box {
        background: #fff;
        position: absolute;
        width: 318px;
      }
    }
  }
}

#aaq_progress {
  margin: 60px 78px;

  .legend {
    color: @textGrey;
    font-size: 14px;
    font-weight: normal;
    list-style: none;
    margin: 10px -78px;
    padding: 0;
    position: relative;
    z-index: 0;

    li {
      float: left;
      margin: 0 10px;
      position: relative;
      text-align: center;
      width: 136px;

      &.current {
        font-weight: bold;
      }

      &:before {
        border-left: 1px solid rgba(0, 0, 0, 0.1);
        border-right: 1px solid rgba(255, 255, 255, 0.5);
        content: '';
        height: 24px;
        left: 50%;
        margin-left: -1px;
        position: absolute;
        top: -34px;
        width: 0;
      }

      &:first-of-type,
      &:last-of-type {
        &:before {
          display: none;
        }
      }
    }
  }

  .progress-bar {
    > div {
      min-width: 12px;
      padding-right: 12px;
    }
  }
}

#ask-search-form {
  .btn {
    float: right;
  }

  .searchbox {
    float: left;
    margin: 10px 0 0 12px;
    width: 724px;
  }
}

#recent-stats {
  font-size: 13px;
  margin: 0 0 40px 0;

  .no_reply {
    margin: 0 6px;
  }

  .progress-bar {
    margin-top: 10px;
  }

  .complete {
    > div {
      background: #489615;
      background: -moz-linear-gradient(#84C63C, #489615) repeat scroll 0 0 transparent;
      background: -webkit-gradient(linear, left top, left bottom, from(#84C63C), to(#489615));
    }
  }

  .total {
    float: right;
    margin: 0 6px;
  }
}

#register-form,
#login-form {
  fieldset {
    border: 0;
    margin: 0;
    padding: 0;
  }

  h2 {
    text-align: center;
  }

  ul {
    list-style: none;
    margin: 10px 0;
    padding: 0;
    text-align: center;

    input {
      float: left;
      width: 214px;
    }

    label {
      float: left;
      padding-right: 12px;
      text-align: right;
    }

    li {
      display: block;
      margin: 10px 0;
    }
  }

  .submit {
    text-align: center;

    .btn {
      margin-right: 121px;
    }
  }
}

#login-form {
  ul {
    label {
      width: 80px;
    }
  }

  .submit {
    .btn {
      margin-left: 80px;
    }
  }
}

#username-rules, #password-rules {
  font-size: 85%;
  margin: 5px 0 0 140px;
  text-align: left;
  width: 240px;
  clear: both;
}

#product-picker {
  > li {
    > a,
    > a:visited,
    > a:hover {
      color: @textGrey;

      > img {
        float: left;
      }

      > span {
        display: block;
        margin-left: 130px;

        &.title {
          font-family: @OpenSansLight;
          font-size: 18px;
        }
      }
    }
  }
}

#question-form {
  ol {
    list-style: none;
    margin: 0;
    padding: 0;

    input {
      width: 700px;
    }

    label {
      float: left;
      width: 120px;
      padding-right: 20px;
      text-align: right;

      + input,
      + textarea,
      + div {
        float: left;
      }
    }

    li {
      padding: 10px 0;

      p {
        clear: both;
        margin: 0 0 0 140px;
      }

      &.details {
        display: none;

        input {
          width: auto;
        }
      }

      &.hide {
        .show {
          display: none;
        }
      }

      &.show {
        .hide {
          display: none;
        }
      }
    }

    &.show-details {
      li {
        &.details {
          display: block;
        }
      }
    }

    textarea {
      width: 710px;
    }

    .editor-tools {
      display: none;
    }

    .submit {
      .btn {
        margin-left: 140px;
      }
    }
  }

  ol#troubleshooting-help {
    display: none;
    list-style: decimal;
    margin-left: 170px;

    li {
      padding: 5px 0;

      ul {
        margin: 0 0 0 10px;
        padding: 0px;
      }
    }
  }

  #troubleshooting-explanation {
    display: none;
  }
}

#register-form {
  ul {
    label {
      width: 130px;
    }
  }

  .submit {
    .btn {
      margin-left: 130px;
    }
  }
}

#selected-category,
#selected-product {
  font-size: 20px;
  margin-bottom: 10px;

  a {
    font-size: 14px;
  }

  label {
    font-family: @OpenSansLight;
  }

  span {
    font-weight: bold;
  }
}

.attachments-upload {
  margin: 1.5em 0 1.5em 128px;

  label {
    display: block;
    margin: .5em 0;
  }

  .adding-attachment {
    display: none;
    line-height: 4em;
  }

  .empty,
  .upload-progress {
    display: none;
  }

  .attachments {
    a:hover {
      img {
        border: 1px solid #eee;
      }
    }
  }

  .attachment {
    display: inline-block;
    position: relative;

    .overlay {
      background: #ccc url('../img/wait-trans.gif') no-repeat center;
      bottom: 5px;
      left: 5px;
      opacity: .5;
      position: absolute;
      right: 5px;
      top: 5px;
    }

    img {
      background: url('../img/wait-trans.gif') no-repeat center;
      border: 1px solid #ccc;
      margin: 5px;
      text-align: center;
      vertical-align: top;
    }

    input.delete {
      background: #000;
      border: 2px solid #fff;
      .border-radius(1em);
      color: #fff;
      cursor: pointer;
      display: none;
      font-family: Verdana;
      font-weight: bold;
      opacity: .5;
      padding: 0 .2em;
      position: absolute;
      right: 10px;
      top: 10px;

      &:hover {
        opacity: 1;
      }
    }

    &:hover input.delete {
      display: block;
    }
  }

  .upload-progress {
    background: url('../img/wait-trans.gif') no-repeat center;
    border: 1px solid #ccc;
    margin: 5px;
    text-align: center;
    vertical-align: top;

    &.show {
      display: inline-block;
    }
  }

  .add-attachment {
    noscript {
      input {
        margin-left: 1em;
      }
    }
  }

  input.image-delete {
    margin-top: 1em;
  }

  img {
    max-height: 120px;
    max-width: 120px;
  }
}

div.ans-attachments {
  padding: 10px 15px 0 10px;

  a:hover {
    img {
      border: 1px solid #eee;
    }
  }

  .attachment {
    display: inline-block;
    position: relative;

    .overlay {
      background: #ccc url('../img/wait-trans.gif') no-repeat center;
      bottom: 5px;
      left: 5px;
      opacity: .5;
      position: absolute;
      right: 5px;
      top: 5px;
    }

    img {
      background: url('../img/wait-trans.gif') no-repeat center;
      border: 1px solid #ccc;
      margin: 5px;
      text-align: center;
      vertical-align: top;
    }

    input.delete {
      background: #000;
      border: 2px solid #fff;
      .border-radius(1em);
      color: #fff;
      cursor: pointer;
      display: none;
      font-family: Verdana;
      font-weight: bold;
      opacity: .5;
      padding: 0 .2em;
      position: absolute;
      right: 10px;
      top: 10px;

      &:hover {
        opacity: 1;
      }
    }

    &:hover input.delete {
      display: block;
    }
  }

  img {
    max-height: 120px;
    max-width: 120px;
  }
}

#image-attachment-kbox {
  img {
    max-width: 100%;

    &.loading {
      background: transparent url(../img/wait-trans.gif) no-repeat center center;
      display: block;
      height: 32px;
      margin: auto;
      width: 32px;
    }
  }
}

.feature-box {
  padding: 13px 30px 15px;

  h2 {
    font-size: 21px;
  }
}

.edit-answer {
  .form-widget {
    width: 600px;
  }

  .form-widget,
  .info,
  .submit {
    margin: 20px 0 20px 128px;
  }

  textarea {
    width: 592px;
  }
}

#product-selector {
  float: right;
  font-size: 18px;
}

#topic-selector {
  float: right;
  font-size: 18px;
  margin-left: 10px;

  > select {
    width:  200px;
  }
}

@import 'variables.less';
@import 'vendors.less';
@import 'includes/editor-tools.less';
@import 'includes/for-contributors-hot-topics.less';
@import 'includes/search-result.less';

h1 {
  font-size: 46px;
  margin-top: 0;
}

h2 {
  font-size: 28px;
}

.answers {
  .answer-tools {
    margin: 0 0 20px 130px;
    padding: 0 20px;

    > a {
      float: right;
      margin: 1px 0;
    }

    > form {
      float: left;
      text-transform: uppercase;

      .btn {
        text-transform: none;
      }
    }
  }

  .avatar {
    margin-bottom: 10px;

    img {
      border: 6px solid #fff;
    }
  }

  .helpful-count {
    &:before {
      content: '\2665';
      font-size: 20px;
      margin-right: 2px;
    }
  }

  .is-helpful {
    color: @textOrange;
  }

  .is-owner {
    color: @textBlue;
  }

  .is-solution {
    color: @textGreen;
  }

  .main-content {
    background: #fff;
    margin: 0 0 20px 130px;
    padding: 20px 30px;
    position: relative;

    &:before {
      border-color: transparent #fff;
      border-style: solid;
      border-width: 11px 11px 11px 0;
      height: 0;
      content: '';
      left: -11px;
      position: absolute;
      top: 20px;
      width: 0;
    }

    h3 {
      margin-top: 0;
    }

    .read-more {
      margin-right: 30px;
    }

    .other-helpful,
    .solution {
      border-top: 1px dotted @borderLightGrey;
      margin-top: 30px;
      padding-top: 30px;
    }

    .other-helpful {
      h3 {
        color: @textOrange;
      }
    }

    .solution {
      h3 {
        color: @textGreen;
        display: inline;
      }
    }
  }

  .notice {
    background: url('../img/warning-stripes.png') top left repeat-x #ffe;
    border: 1px solid #fffbe7;
    margin: 0 0 20px 0;
    padding: 20px 30px;
  }

  .question-meta {
    font-size: 12px;
    margin-bottom: 20px;
    text-transform: uppercase;

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

      li {
        float: left;
        margin-right: 20px;
      }
    }
  }

  .summary {
    margin: 0 0 10px 0;
  }

  .user-meta {
    float: left;
    font-size: 12px;
    margin: 0 20px 20px 0;
    width: 110px;

    .asked-by {
      margin-bottom: 25px;

      .answers,
      .points,
      .solutions {
        display: block;
      }

      .solutions {
        font-weight: bold;
      }

      .karma-titles {
        list-style: none;
        margin: 0;
        padding: 0;

        li {
          background: #fff;
          text-transform: uppercase;
          margin: 10px 0;
          padding: 5px;
        }
      }
    }
  }

  .question-tools {
    margin: 0 0 20px 130px;
    text-align: right;

    .btn {
      margin: 10px 0;
    }

    .me-too {
      float: left;

      .btn {
        margin: 0;
      }
    }
  }

  .report {
    margin-bottom: 20px;

    input,
    select {
      display: none;
    }

    .link-btn,
    .link-btn:visited,
    .link-btn:hover {
      color: @textLightGrey;
      display: block;
      float: right;
      font-size: 12px;
      text-transform: uppercase;
    }
  }

  .sidebar-nav {
    margin-bottom: 20px;

    &.condensed {
      margin-bottom: 0;
    }
  }

  .sidebox {
    margin-bottom: 20px;

    &.condensed {
      margin-bottom: 0;
    }
  }

  #question-reply {
    &:before {
      display: none;
    }

    textarea {
      margin-top: 10px;
      width: 510px;
    }

    .editor-tools {
      background: transparent;
    }
  }

  .system-details {
    text-transform: uppercase;

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

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

  #tags {
    text-transform: uppercase;

    button {
      background: transparent;
      border: 0;
      color: @textDarkOrange;
      cursor: pointer;
      margin: 0 0 0 5px;
      outline: none;
      padding: 0;
    }

    ul {
      list-style: none;
      margin: 0 0 12px 0;
      padding: 0;

      li {
        float: left;
        margin-right: 12px;

        a,
        a:visited,
        a:hover {
          color: @textGrey;
        }
      }

      &.immutable {
        button {
          display: none;
        }
      }
    }

    .btn {
      float: right;
    }

    .searchbox {
      display: block;
      margin-bottom: 12px;
      width: 140px;
    }
  }

  #vote-thanks-kbox {
    text-align: left;

    input#id_email {
      width: 230px;
    }
  }

  #more-system-details-kbox {
    margin-left: -115px;
    width: 720px;

    h1 {
      display: none;
    }

    h2 {
      font-size: 20px;
      font-weight: normal;
      margin: 15px 0 5px;
    }

    p,
    li {
      color: #898378;
      list-style: none;
      margin: 0;
    }

    div.about-support {
      ul {
        padding-left: 60px;
        li {
          list-style: disc;

          &.inactive {
            opacity: 0.5;
          }

          .key {
            font-weight: bold;
          }
        }
      }
    }

    div.plugins {
      li {
        background: transparent url(../img/questions/icon.plugin.gif) no-repeat 0 4px;
        padding: 2px 0 2px 25px;
      }
    }

    .bottom-close {
      margin: 10px 0 0;
      text-align: right;
    }
  }

  #email-subscribe-kbox {
    left: -150px;
    text-transform: none;
    top: 20px;
    width: 330px;

    ul.errorlist {
      margin: 0;
      padding: 0;

      li {
        margin: 0;
        padding: 0;
      }
    }

    a {
      padding: 0;
    }

    input#id_email {
      width: 270px;
    }

    form {
      ul {
        list-style: none;
        margin: 0;
        padding: 10px 0;
      }
    }
  }
}

.highlight-box {
  h2 {
    margin: 0;
  }

  .select-one {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      font-family: @OpenSansLight;
      font-size: 20px;
      margin: 10px 0;
    }
  }
}

.logo-sprite {
  background-image: url('../img/logos.large.sprite.png');
  background-repeat: no-repeat;
  height: 110px;
  width: 110px;

  &.logo-desktop {
    background-position: -20px -20px;
  }

  &.logo-mobile {
    background-position: -20px -470px;
  }

  &.logo-home {
    background-position: -20px -620px;
  }

  &.logo-sync {
    background-position: -20px -320px;
  }

  &.logo-other {
    background-position: -20px -170px;
  }
}

.questions {
  list-style: none;
  margin: 0;
  padding: 0;

  > section {
    background: #fff;
    padding: 20px 30px;
    position: relative;

    h2 {
      font-size: 22px;
      margin: 4px 0;
    }

    .content {
      border-right: 1px dotted @borderLightGrey;
      margin: 0 190px 0 0;
      min-height: 130px;
      padding: 0 20px 0 0;
    }

    .thread-meta {
      background: #fff;
      left: 0;
      overflow: hidden;
      padding: 0 6px;
      position: absolute;
      top: 0;
      width: 18px;

      &:hover {
        border-bottom: 1px solid @borderLightGrey;
        border-right: 1px solid @borderLightGrey;
        width: auto;
      }

      > div {
        background: url('../img/icons-sprite.png') 0 0 no-repeat;
        color: #ccc;
        font-size: 11px;
        height: 18px;
        line-height: 18px;
        margin: 6px 0;
        padding: 0 0 0 24px;
        text-transform: uppercase;

        &.highlighted {
          color: @textGrey;
        }

        &.thread-contributed {
          background-position: -48px -977px;

          &.highlighted {
            background-position: -48px -1093px;
          }
        }

        &.thread-solved {
          background-position: -49px -746px;

          &.highlighted {
            background-position: -49px -862px;
          }
        }
      }
    }

    .question-meta {
      float: right;
      font-size: 11px;
      padding: 0 0 0 20px;
      text-align: center;
      text-transform: uppercase;
      width: 170px;

      > div {
        width: 70px;

        &.have-problem-this-week {
          float: right;
          font-size: 13px;
          margin-top: 16px;
          width: 80px;

          h4 {
            font-size: 40px;
          }
        }
      }

      h4 {
        font-size: 30px;
        margin: 0;
      }

      &.urgent {
        h4 {
          color: #fe9300;
        }
      }
    }
  }

  > aside {
    font-size: 13px;
    margin: 10px 30px 30px 30px;

    .tag-list {
      display: inline;
      list-style: none;
      margin: 0;
      padding: 0;

      > li {
        display: inline;
        font-style: italic;
        margin: 0 0 0 10px;
      }
    }

    .user-meta {
      float: right;
    }
  }

  #filters {
    h3 {
      margin: 5px 0;
    }

    > section {
      border-top: 1px dotted @borderLightGrey;
      margin: 10px 0;
      padding: 10px 0;
    }

    p {
      font-size: 12px;
      margin-top: 0;
    }

    .grid_2 {
      margin-left: 0;
    }

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

      li {
        a {
          color: @textLightGrey;
        }

        &.active {
          a {
            color: @textGrey;
            font-weight: bold;
          }
        }
      }
    }

    input[type=text] {
      margin: 0 0 10px;
      width: 130px;
    }
  }

  #top-contributors {
    ol {
      display: inline-block;
      width: 35%;

      li {
        margin: 5px 0;
      }
    }

    .inner-wrap {
      display: none;
    }

    &:hover {
      position: relative;

      .inner-wrap {
        display:block;
      }

      .feature-box {
        background: #fff;
        position: absolute;
        width: 318px;
      }
    }
  }
}

#aaq_progress {
  margin: 60px 78px;

  .legend {
    color: @textGrey;
    font-size: 14px;
    font-weight: normal;
    list-style: none;
    margin: 10px -78px;
    padding: 0;
    position: relative;
    z-index: 0;

    li {
      float: left;
      margin: 0 10px;
      position: relative;
      text-align: center;
      width: 136px;

      &.current {
        font-weight: bold;
      }

      &:before {
        border-left: 1px solid rgba(0, 0, 0, 0.1);
        border-right: 1px solid rgba(255, 255, 255, 0.5);
        content: '';
        height: 24px;
        left: 50%;
        margin-left: -1px;
        position: absolute;
        top: -34px;
        width: 0;
      }

      &:first-of-type,
      &:last-of-type {
        &:before {
          display: none;
        }
      }
    }
  }

  .progress-bar {
    > div {
      min-width: 12px;
      padding-right: 12px;
    }
  }
}

#ask-search-form {
  .btn {
    float: right;
  }

  .searchbox {
    float: left;
    margin: 10px 0 0 12px;
    width: 724px;
  }
}

#recent-stats {
  font-size: 13px;
  margin: 0 0 40px 0;

  .no_reply {
    margin: 0 6px;
  }

  .progress-bar {
    margin-top: 10px;
  }

  .complete {
    > div {
      background: #489615;
      background: -moz-linear-gradient(#84C63C, #489615) repeat scroll 0 0 transparent;
      background: -webkit-gradient(linear, left top, left bottom, from(#84C63C), to(#489615));
    }
  }

  .total {
    float: right;
    margin: 0 6px;
  }
}

#register-form,
#login-form {
  fieldset {
    border: 0;
    margin: 0;
    padding: 0;
  }

  h2 {
    text-align: center;
  }

  ul {
    list-style: none;
    margin: 10px 0;
    padding: 0;
    text-align: center;

    input {
      float: left;
      width: 214px;
    }

    label {
      float: left;
      padding-right: 12px;
      text-align: right;
    }

    li {
      display: block;
      margin: 10px 0;
    }
  }

  .submit {
    text-align: center;

    .btn {
      margin-right: 121px;
    }
  }
}

#login-form {
  ul {
    label {
      width: 80px;
    }
  }

  .submit {
    .btn {
      margin-left: 80px;
    }
  }
}

#username-rules, #password-rules {
  font-size: 85%;
  margin: 5px 0 0 140px;
  text-align: left;
  width: 240px;
}

#product-picker {
  > li {
    > a,
    > a:visited,
    > a:hover {
      color: @textGrey;

      > img {
        float: left;
      }

      > span {
        display: block;
        margin-left: 130px;

        &.title {
          font-family: @OpenSansLight;
          font-size: 18px;
        }
      }
    }
  }
}

#question-form {
  ol {
    list-style: none;
    margin: 0;
    padding: 0;

    input {
      width: 700px;
    }

    label {
      float: left;
      width: 120px;
      padding-right: 20px;
      text-align: right;

      + input,
      + textarea,
      + div {
        float: left;
      }
    }

    li {
      padding: 10px 0;

      p {
        clear: both;
        margin: 0 0 0 140px;
      }

      &.details {
        display: none;

        input {
          width: auto;
        }
      }

      &.hide {
        .show {
          display: none;
        }
      }

      &.show {
        .hide {
          display: none;
        }
      }
    }

    &.show-details {
      li {
        &.details {
          display: block;
        }
      }
    }

    textarea {
      width: 710px;
    }

    .editor-tools {
      display: none;
    }

    .submit {
      .btn {
        margin-left: 140px;
      }
    }
  }

  ol#troubleshooting-help {
    display: none;
    list-style: decimal;
    margin-left: 170px;

    li {
      padding: 5px 0;

      ul {
        margin: 0 0 0 10px;
        padding: 0px;
      }
    }
  }

  #troubleshooting-explanation {
    display: none;
  }
}

#register-form {
  ul {
    label {
      width: 130px;
    }
  }

  .submit {
    .btn {
      margin-left: 130px;
    }
  }
}

#selected-category,
#selected-product {
  font-size: 20px;
  margin-bottom: 10px;

  a {
    font-size: 14px;
  }

  label {
    font-family: @OpenSansLight;
  }

  span {
    font-weight: bold;
  }
}

.attachments-upload {
  margin: 1.5em 0 1.5em 128px;

  label {
    display: block;
    margin: .5em 0;
  }

  .adding-attachment {
    display: none;
    line-height: 4em;
  }

  .empty,
  .upload-progress {
    display: none;
  }

  .attachments {
    a:hover {
      img {
        border: 1px solid #eee;
      }
    }
  }

  .attachment {
    display: inline-block;
    position: relative;

    .overlay {
      background: #ccc url('../img/wait-trans.gif') no-repeat center;
      bottom: 5px;
      left: 5px;
      opacity: .5;
      position: absolute;
      right: 5px;
      top: 5px;
    }

    img {
      background: url('../img/wait-trans.gif') no-repeat center;
      border: 1px solid #ccc;
      margin: 5px;
      text-align: center;
      vertical-align: top;
    }

    input.delete {
      background: #000;
      border: 2px solid #fff;
      .border-radius(1em);
      color: #fff;
      cursor: pointer;
      display: none;
      font-family: Verdana;
      font-weight: bold;
      opacity: .5;
      padding: 0 .2em;
      position: absolute;
      right: 10px;
      top: 10px;

      &:hover {
        opacity: 1;
      }
    }

    &:hover input.delete {
      display: block;
    }
  }

  .upload-progress {
    background: url('../img/wait-trans.gif') no-repeat center;
    border: 1px solid #ccc;
    margin: 5px;
    text-align: center;
    vertical-align: top;

    &.show {
      display: inline-block;
    }
  }

  .add-attachment {
    noscript {
      input {
        margin-left: 1em;
      }
    }
  }

  input.image-delete {
    margin-top: 1em;
  }

  img {
    max-height: 120px;
    max-width: 120px;
  }
}

div.ans-attachments {
  padding: 10px 15px 0 10px;

  a:hover {
    img {
      border: 1px solid #eee;
    }
  }

  .attachment {
    display: inline-block;
    position: relative;

    .overlay {
      background: #ccc url('../img/wait-trans.gif') no-repeat center;
      bottom: 5px;
      left: 5px;
      opacity: .5;
      position: absolute;
      right: 5px;
      top: 5px;
    }

    img {
      background: url('../img/wait-trans.gif') no-repeat center;
      border: 1px solid #ccc;
      margin: 5px;
      text-align: center;
      vertical-align: top;
    }

    input.delete {
      background: #000;
      border: 2px solid #fff;
      .border-radius(1em);
      color: #fff;
      cursor: pointer;
      display: none;
      font-family: Verdana;
      font-weight: bold;
      opacity: .5;
      padding: 0 .2em;
      position: absolute;
      right: 10px;
      top: 10px;

      &:hover {
        opacity: 1;
      }
    }

    &:hover input.delete {
      display: block;
    }
  }

  img {
    max-height: 120px;
    max-width: 120px;
  }
}

#image-attachment-kbox {
  img {
    max-width: 100%;

    &.loading {
      background: transparent url(../img/wait-trans.gif) no-repeat center center;
      display: block;
      height: 32px;
      margin: auto;
      width: 32px;
    }
  }
}

.feature-box {
  padding: 13px 30px 15px;

  h2 {
    font-size: 21px;
  }
}

.edit-answer {
  .form-widget {
    width: 600px;
  }

  .form-widget,
  .info,
  .submit {
    margin: 20px 0 20px 128px;
  }

  textarea {
    width: 592px;
  }
}

#product-selector {
  float: right;
  font-size: 18px;
}

#topic-selector {
  float: right;
  font-size: 18px;
  margin-left: 10px;

  > select {
    width:  200px;
  }
}