/*
	'ClearCobalt' theme for Question2Answer
	License: http://www.gnu.org/licenses/gpl.html

	Theme Version: 1.2
	Theme Date: 2020-08-01
	Theme Author: Ansgar Wiechers
	Theme Author URI: http://www.planetcobalt.net/
	Theme License: GPL-3.0
	Font License: Apache-2.0

	This theme is based on the 'Clean Base' theme by Scott Vivian and also
	includes the styles from his markdown-editor plugin.
	See <https://github.com/svivian/q2a-themes>.
	See <https://github.com/svivian/q2a-markdown-editor>.
*/

// ==================================================================
// global settings
// ==================================================================

// dimensions
@acceptboxwidth:   48px;
@avatarsize:       40px;
@bodywidth:       980px;
@formwidth:       480px;
@labelwidth:      100px;
@mainpadding:      10px;
@mainwidth:       750px;
@numberwidth:      48px;
@panelspacing:     16px;
@postpadding:       5px; // for accepted posts and hidden posts
@poststatswidth:   43px;
@revisionbuttons: 100px;
@sidemargin:       19px;
@userboxpad:        4px;
@userboxwidth:    200px;
@userboxborder:     1px;
@voteboxwidth:     56px;
@itemwidth:         @mainwidth - @voteboxwidth - @panelspacing;
@listitemwidth:     @mainwidth - @liststatswidth - @panelspacing;
@liststatswidth:    (3*@voteboxwidth) + 12px;
@sidepanelwidth:    @bodywidth - (2*@sidemargin) - @mainwidth - @panelspacing;
@widgetfullwidth:   @bodywidth - (2*@sidemargin);
@userboxouterwidth: @userboxwidth + 2*(@userboxpad + @userboxborder);

@pre_mobile_maxwidth_correction: @poststatswidth + 2*@mainpadding + 10px;

// colors
@basecolor:        #c0c0c0;
@disabled:         #e0e0e0;
@helpbgcolor:      #0000ff;
@helpfgcolor:      #ffffff;
@highlightcolor:   #ffff00;
@linkcolor:        #0000ff;
@metatextcolor:    #606060;
@successdark:      #009900;
@successlight:     #eeffee;
@tagtextcolor:     #808080;
@textcolor:        #000000;
@textcolorinverse: #ffffff;
@userboxcolor:     #f6f6f6;
@warndark:         #cc0000;
@warnlight:        #ffeeee;
@textshaded:       @basecolor - @color_offset;

@color_offset: #303030;

// backgrounds
@bglight:     #e0e0e0;
@bgmain:      #ffffff;
@bgblack:     #000000;
@bgpagelink:  #808080;
@bgprompt:    #f0f0f0;
@bgshade:     #f9f9f9;
@bgselected:  @successlight - #221122;
@bgbackdrop:  @basecolor;
@bgcode:      @basecolor + @color_offset;
@bgdark:      @basecolor - @color_offset;
@bgextradark: @basecolor - (2*@color_offset);
@bgquote:     @basecolor + @color_offset;

// text
@font-face {
  font-family: open-sans;
  font-weight: normal;
  font-style: normal;
  src: url('fonts/opensans-regular.woff');
}
@font-face {
  font-family: open-sans;
  font-weight: normal;
  font-style: italic;
  src: url('fonts/opensans-italic.woff');
}
@font-face {
  font-family: open-sans;
  font-weight: bold;
  font-style: normal;
  src: url('fonts/opensans-bold.woff');
}
@font-face {
  font-family: open-sans;
  font-weight: bold;
  font-style: italic;
  src: url('fonts/opensans-bolditalic.woff');
}
@font-face {
  font-family: roboto-mono;
  font-weight: normal;
  font-style: normal;
  src: url('fonts/robotomono-regular.woff');
}
@font-face {
  font-family: roboto-mono;
  font-weight: normal;
  font-style: italic;
  src: url('fonts/robotomono-italic.woff');
}
@font-face {
  font-family: roboto-mono;
  font-weight: bold;
  font-style: normal;
  src: url('fonts/robotomono-bold.woff');
}
@font-face {
  font-family: roboto-mono;
  font-weight: bold;
  font-style: italic;
  src: url('fonts/robotomono-bolditalic.woff');
}
@sans-serif: open-sans, arial, helvetica, sans-serif;
@monospace:  roboto-mono, "dejavu sans mono", "courier new", courier, monospace;

@basesize:     13px;
@counterlarge: 1.7em;
@counterhuge:  1.9em;
@countersmall: 0.9em;

// borders
@linecolor:    #909090;
@borderblack:  1px solid #000000;
@borderdark:   1px solid (@linecolor - @color_offset);
@borderlight:  1px solid (@linecolor + @color_offset);
@bordernormal: 1px solid @linecolor;
@borderwhite:  1px solid #ffffff;
@borderdotted: 1px dotted (@linecolor - @color_offset);

@kbd_shadow:   2px 2px (@basecolor + @color_offset) inset, -2px -2px @basecolor inset;
@kbd_radius:   3px;

.appearance-none() {
  -moz-appearance: none;
  -webkit-appearance: none;
}

.avatar() {
  display: inline-block;
  vertical-align: middle;
  margin-right: 2px;
  & img {
    height: @avatarsize;
    width: @avatarsize;
  }
}

.list-padding() {
  ol  { padding-left: 2em; }
  ul  { padding-left: 1em; }
}

.metainfo() {
  display: inline-block;
  font-size: 0.85em;
  line-height: 1.4em;
  color: @metatextcolor;
}

.scrollbar() {
  scrollbar-width: auto;
  scrollbar-color: (@basecolor - #404040) @basecolor;
}

.text-highlighting() {
  span.highlight {
    background-color: @highlightcolor;
  }
}

.warn-box() {
  background-color: @warnlight;
  border: 1px solid @warndark;
  color: @warndark;
}

.success-box() {
  background-color: @successlight;
  border: 1px solid @successdark;
  color: @successdark;
}

// ==================================================================
// plugin styles
// ==================================================================

/* Markdown editor styles */

@input_width:   @mainwidth - 152px;
@preview_width: @input_width - 14px;

.wmd-button-bar {
  width: 100%;
  padding: 5px 0;
}

.wmd-input {
  width: @input_width;
  height: @input_width * 0.42;
  margin: 0 0 10px;
  padding: 2px;
  border: @borderlight;
  .scrollbar();
}

.wmd-preview {
  width: @preview_width;
  padding: 8px;
  border: 0;
  background-color: @bgshade;
  .text-highlighting();
}

.wmd-preview, .entry-content {
  img { max-width: 100%; }
  .list-padding();
}

.qa-q-view-content, .qa-a-item-content, .wmd-preview {
  pre {
    overflow: auto;
    max-height: 35em;
    margin: 0 0 0.5em;
    padding: 2px 4px;
    background-color: @bgcode;
    font-family: @monospace;
    .scrollbar();
  }
  kbd {
    border: @bordernormal;
    margin: 0 0.1em;
    padding: 0.1em 0.6em;
    font-size: 90%;
    -moz-box-shadow: @kbd_shadow;
    -moz-border-radius: @kbd_radius;
    -webkit-box-shadow: @kbd_shadow;
    -webkit-border-radius: @kbd_radius;
    box-shadow: @kbd_shadow;
    border-radius: @kbd_radius;
    background-color: #ffffff;
  }
}

pre {
  font-size: 0.9em;
  line-height: 1.4;

  code {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
  }
}

code {
  font-family: @monospace;
  background-color: @bgcode;
  padding: 0 0.2em;
  font-size: inherit;
}

.wmd-button-row {
  position: relative;
  height: 20px;
}

.wmd-spacer {
  width: 1px;
  height: 20px;
  margin-left: 14px;
  position: absolute;
  background-color: @basecolor;
  display: inline-block;
  list-style: none;
}

.wmd-spacer1 {left: 50px;}
.wmd-spacer2 {left: 175px;}
.wmd-spacer3 {left: 300px;}

.wmd-button {
  width: 20px;
  height: 20px;
  padding-left: 2px;
  padding-right: 3px;
  position: absolute;
  display: inline-block;
  list-style: none;
  cursor: pointer;

  & > span {
    // note: background-image is set in plugin script
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 20px;
    height: 20px;
    display: inline-block;
  }
}

.wmd-prompt-background {
  background-color: @bgblack;
}

.wmd-prompt-dialog {
  border: @bordernormal;
  background-color: @bgprompt;
  & > div {
    font-size: 0.8em;
  }
  & > form {
    >input[type="text"] {
      border: @bordernormal;
      color: @textcolor;
    }
    >input[type="button"] {
      background-color: @basecolor;
      padding: 3px 8px;
      border: @borderdark;
      font-size: 0.9em;
      font-weight: bold;
    }
  }
}

/* Edit History styles */

// note: Remove revisions.css from the edit-history plugin directory, otherwise
//       the plugin default styles will take precedence over these styles.

.qa-q-list .qa-q-item-revised {
  display: none;
}

.edh-disabled {
  color: @basecolor;
}

.qa-q-view-revised, .qa-a-item-revised {
  display: inline-block;
  width: @revisionbuttons;
  font-size: 0.85em;
}

ins {
  background-color: @successlight;
  color: @successdark;
  text-decoration: none;
}

del {
  background-color: @warnlight;
  color: @warndark;
  text-decoration: line-through;
}

.diff-block {
  margin: 0 0 20px;
}

.diff-date {
  overflow: hidden;
  margin: 0;
  padding: 5px 10px;
  line-height: 33px;
  background-color: @bglight;

  & > .qa-form-tall-button {
    margin-top: 5px;
  }
}

.diff-content {
  padding: 10px;
}

.h2 {
  font-weight: bold;
  font-size: 1.4em;
}

.no-diff {
  color: @textcolor;
}

.diff-button {
  float: right;
  margin-left: 5px;
}

/* Flag Reasons styles */

.qa-flag-wrap {display: none;}

/* Tag Descriptions styles */

.qa-tag-description {
  .list-padding();
}

// ==================================================================
// main styles
// ==================================================================

/* General page layout */

* {
  margin: 0;
  padding: 0;
  border: 0;

  html {
    .qa-sidepanel {margin-right: 10px;} // IE6
    .qa-footer {padding-top: 6px;}      // IE6
  }
}

html {
  overflow-y: scroll;
}

body, td, input, textarea {
  font-family: @sans-serif;
  font-size: @basesize;
  line-height: 1.5;
}

body {
  background-color: @basecolor;
}

a {
  color: @linkcolor;

  &:link, &:active, &:visited {
    text-decoration: none;
  }
  &:hover {
    text-decoration: underline;
  }
}

p {
  margin: 0 0 0.5em;
}

blockquote {
  padding: 3px 6px;
  margin-bottom: 1.3em;
  background-color: @bgquote;
  border-left: 3px solid @basecolor;
  font-family: @sans-serif;
  font-style: italic;

  code {
    background-color: @bgquote - @color_offset;
  }
}

table {
  border-collapse: collapse;
  margin: 0 auto 1em;
}

hr {
  margin: 0.7em 0 0.7em 0;
  height: 1px;
  color: @basecolor;
  background-color: @basecolor;
}

// uncomment the next line to disable autofill background coloring
//input {filter: none;}

.qa-post-content {
  blockquote, li, p, pre {
    margin-bottom: 0.7em;
  }
  .list-padding();
  blockquote {
    p { margin: 0; }
  }
  .text-highlighting();
}

.qa-notice {
  background-color: @warnlight;
  border-bottom: 2px solid @warndark;
  color: @warndark;
  font-size: 1.4em;
  padding: 0.5em 32px;
  font-weight: bold;
  position: relative;
}

.qa-notice-close-button, .qa-notice-close-hover {
  font-family: @sans-serif;
  color: @warndark;
  font-size: 1.5em;
  background: none;
  cursor: pointer;
  position: absolute;
  height: 24px;
  border: none;
  top: 4px;
  right: 6px;
}

.qa-body-wrapper {
  background-color: @bgmain;
  border: @borderdark;
  width: @bodywidth;
  margin: 0 auto;
  margin-top: -1px;
  text-align: left;
}

/* Clearing classes */

.qa-nav-main-clear,
.qa-nav-sub-clear,
.qa-q-item-clear,
.qa-q-view-clear,
.qa-a-item-clear,
.qa-c-item-clear,
.qa-footer-clear,
.qa-vote-count-clear,
.qa-page-links-clear { clear: both; }

/* Headings */

h1 {
  font-size: 2em;
  line-height: 1.2em;
  margin: 24px 0 22px; // vertically align with sidebar

  & > a:link, & > a:visited, & > a:hover {
    color: inherit;
  }
}
// reduce top margin for pages with a sub-navigation
.qa-template-admin,
.qa-template-questions,
.qa-template-unanswered,
.qa-template-users {
  h1 { margin-top: 10px; }
}
h2 {
  font-size: 1.3em;
  clear: both;
}

// hide favoriting elements
.qa-favoriting,
.qa-favorite-image,
.qa-favorite-button,
.qa-favorite-hover,
.qa-unfavorite-button,
.qa-unfavorite-hover { display: none; }

.qa-error {
  .warn-box();
  font-size: 1.3em;
  padding: 0.5em;
  margin-bottom: 1em;

  a {
    color: @warndark;
    text-decoration: underline;
  }
  a:hover {
    color: @linkcolor;
  }
}

/* Page sections */

.qa-header {
  padding: 10px 20px 0 20px;
}

.qa-sidepanel {
  float: right;
  width: @sidepanelwidth;
  margin-right: 20px;
}

.qa-sidebar {
  margin: 24px 0;
  padding: 10px;
  background-color: @bglight;
  border: @borderlight;
  & > p {
    margin: 8px 0 0 0;
    font-size: 0.9em;
  }
}

.qa-feed {
  background: url("feed-icon-14x14.png") no-repeat left top;
  padding-left: 20px;
  height: 16px;
  margin: 24px 0;
}

.qa-feed-link {
  font-size: 10px;
  vertical-align: top;
}

.qa-main {
  display: flex;
  flex-direction: column;
  padding-left: 2*@mainpadding;
  float: left;
  margin-bottom: 2em;
  width: @mainwidth;
  clear: left;

  & > div {order: 2;}
  & > .qa-main-heading {order: 1;}
  & > .qa-part-a-form  {order: 3;}
  & > .qa-suggest-next {order: 4;}
  & > .qa-error {margin-top: 24px;}
}

.qa-main-hidden {
  .qa-a-item-main {
    background-color: @warnlight;
    width: ~"calc(100% - 79px)";
    padding: @postpadding;
    margin-right: 3px;
  }
  .qa-a-list-item {
    .qa-vote-count {
      color: @basecolor;
    }
    .qa-vote-up-button {
      background-position: 0 -64px;
      pointer-events: none;
    }
    .qa-vote-down-button {
      background-position: -24px -64px;
      pointer-events: none;
    }
  }
}

.qa-main-heading a {
  text-decoration: none;
}

.qa-footer {
  clear: both;
  background-color: @bgdark;
  color: @textcolorinverse;
  font-size: 0.7em;
  padding: 12px 20px;

  a {
    color: @textcolorinverse;
  }
}

/* Widget wrappers */

.qa-widgets-full-top {
  margin-bottom: -4px;
}

.qa-widget-full {
  clear: both;
  margin: @sidemargin;
  width: @widgetfullwidth;
}

.qa-widget-full-high {
  margin-bottom: 0;
}

.qa-widgets-main-top {
  margin-top: 24px;
}

.qa-widgets-main-high {
  margin-bottom: 24px;
}

.qa-widget-main-bottom {
  margin-bottom: 0;
}

.qa-widgets-side-top {
  margin-top: 24px;
}

.qa-widget-side {
  margin: @panelspacing 0;
  width: @sidepanelwidth;

  // popular tags in sidebar widget
  & > div > a {
    padding: 0.1em 0.2em;
    line-height: ~"calc(1.4em + 5px)";
    background-color: @bglight;
    color: @tagtextcolor;
    text-decoration: none;
  }
}

/* Header sections */

.qa-logo {
  float: left;
  margin-bottom: 16px;
  font-size: 3em;
  font-weight: bold;

  & > .qa-logo-link {color: @bgmain;} // IE8
}

.qa-nav-user {
  float: right;
  white-space: nowrap;
}

.qa-nav-user-list {
  list-style: none;
  display: inline;
}

.qa-nav-user-item {
  display: inline;
  margin-left: 12px;
}

.qa-logged-in {
  display: inline;
}

.qa-search {
  float: right;
  clear: right;
  margin-top: 12px;
  white-space: nowrap;
}

.qa-search-field {
  width: 20em;
  margin-right: 2px;
  border: @borderblack;
}

.qa-search-button {
  background-color: @basecolor;
  border: @bordernormal;
  padding: 0 5px;
}

/* Main, sub and category navigation */

.qa-nav-main {
  clear: both;
  background-color: @basecolor;
}

.qa-nav-main-list {
  font-size: 1.2em;
  list-style: none;
}

.qa-nav-main-item {
  float: left;
  margin-right: 2px;
}

.qa-nav-main-item-opp {
  float: right;
  margin-left: 2px;
}

.qa-nav-main-link {
  display: block;
  padding: 2px 7px;
}

.qa-nav-main-link:hover, .qa-nav-main-selected {
  background-color: @bgdark;
  text-decoration: none;
}

.qa-nav-main-link:link, .qa-nav-main-link:visited {
  color: @textcolorinverse;
}

.qa-nav-main-ask {
  margin-left: 20px;
}

.qa-nav-main-hot .qa-nav-main-link {
  background-color: @warndark;
}

.qa-nav-sub {
  clear: both;
  float: left;
  padding-top: 6px;
}

.qa-nav-sub-list {
  overflow: hidden;
  list-style: none;
  margin: 0 0 8px;
  font-size: 0.9em;
}

.qa-nav-sub-item {
  float: left;
  margin: 0 2px 2px 0;
}

.qa-nav-sub-link {
  background-color: @bglight;
  font-weight: bold;
  padding: 3px 7px;
  display: block;
}

.qa-nav-sub-link:link, .qa-nav-sub-link:visited {
  color: @bgdark;
}

.qa-nav-sub-link:hover {
  color: @textcolorinverse;
  background-color: @basecolor;
  text-decoration: none;
}

.qa-nav-sub-selected {
  color: @textcolorinverse;
  background-color: @basecolor;
}

.qa-nav-sub-selected:link, .qa-nav-sub-selected:visited {
  color: @textcolorinverse;
}

.qa-nav-sub-favorites {
  display: none;
}

.qa-nav-cat {
  margin: 24px 0;
}

.qa-nav-cat-list {
  list-style: none;
}

.qa-nav-cat-list-1 {
  font-size: 1.05em;
}

.qa-nav-cat-list-2 {
  font-size: 0.95em;
  margin-left: 1em;
}

.qa-nav-cat-list-3 {
  font-size: 0.8em;
  margin-left: 1em;
}

.qa-nav-cat-list-4 {
  font-size: 0.7em;
  margin-left: 1em;
}

.qa-nav-cat-item {
  margin: 0.5em 0;
}

.qa-nav-cat-link {
  font-weight: bold;
}

.qa-nav-cat-selected, .qa-nav-cat-selected:hover {
  text-decoration: none;
}

/* Pagination */

.qa-page-links {
  padding: 12px 0;
  clear: both;
  zoom: 1; // for IE6
}

.qa-page-links-list {
  list-style: none;
  display: inline;
}

.qa-page-links-item {
  display: inline;
}

.qa-page-link, .qa-page-selected, .qa-page-prev, .qa-page-next {
  margin: 3px 1px;
  padding: 3px 8px;
  border: @borderdark;
}

.qa-page-link:link, .qa-page-prev:link, .qa-page-next:link {
  text-decoration: none;
  color: @textcolor;
}

.qa-page-link:hover, .qa-page-prev:hover, .qa-page-next:hover {
  background-color: @bgpagelink;
  color: @textcolorinverse;
}

.qa-page-link:visited, .qa-page-prev:visited, .qa-page-next:visited {
  text-decoration: none;
  color: @textcolor;
}

.qa-page-prev, .qa-page-next {
  background-color: @basecolor;
}

.qa-page-selected {
  color: @textcolorinverse;
  background-color: @bgextradark;
}

/* Custom pages */

.qa-part-custom {
  ul, ol {
    margin-bottom: 0.5em;
  }
  .list-padding();
}

/* Standard form */

#option_logo_height, #option_logo_width {
  border: @borderlight;
}

.qa-form-table-boxed {
  margin-left: 20px;
}

/* Standard form (tall version) */

.qa-form-tall-table {
  width: 100%;
}
.qa-form-tall-spacer {
  line-height: 1px;
  padding: 0;
  font-size: 1px;
}

.qa-form-tall-ok {
  .success-box();
  font-size: 1.4em;
  padding: 6px;
  text-align: center;
}

.qa-form-tall-label {
  padding: 8px 8px 2px 8px;

  .qa-form-tall-checkbox {
    margin-top: 2px;
  }
}

.qa-form-tall-data {
  padding: 0 8px 8px 8px;
  width: @formwidth;

  >ul, .qa-q-title-list {
    padding-left: 1em;
  }
}

.qa-form-tall-text, .qa-form-tall-number {
  padding: 3px;
}

.qa-form-tall-text, .qa-form-tall-textarea {
  border: @borderlight;
  width: 100%;
}

.qa-form-tall-textarea {
  height: 50em;
}

.qa-form-tall-number {
  width: 48px;
}

.qa-form-tall-checkbox {
  float: left;
  margin-right: 6px;
}

.qa-form-tall-radio {
  vertical-align: middle;
}

.qa-form-tall-image {
  text-align: center;
  margin-top: 12px;

  img {
    border: @borderblack;
  }
}

.qa-form-tall-suffix {
  font-weight: normal;
  font-size: 0.8em;
}

.qa-form-tall-error {
  .warn-box();
  margin-top: 6px;
  padding: 0.5em;
}

.qa-form-tall-note {
  margin-top: 6px;
  color: @textshaded;
  font-style: italic;
  font-weight: normal;
}

.qa-form-tall-buttons, .qa-q-list-form {
  padding: 8px;
  text-align: center;
}

.qa-form-tall-button, .qa-form-tall-hover, .qa-form-wide-button, .qa-form-wide-hover {
  background-color: @basecolor;
  padding: 3px 8px;
  border: @borderdark;
  .appearance-none();
}

.qa-form-tall-select, .qa-form-wide-select {
  padding: 1px 17px 1px 0;
  background-image: linear-gradient(45deg, transparent 50%, @bgpagelink 50%),
                    linear-gradient(135deg, @bgpagelink 50%, transparent 50%);
  background-position: ~"calc(100% - 10px)" 6px, ~"calc(100% - 5px)" 6px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  border: @borderdark;
  .appearance-none();
}

// AntiBot Captcha styles
#qa_captcha_div_1 {
  input {
    width: 10em;
    vertical-align: top;
    margin: 15px 0;
    padding: 0;
    border: @borderlight;
  }
  img {
    margin-left: 5px;
  }
}

/* Standard form (wide version) */

.qa-form-wide-table {
  width: 100%;
}

.qa-form-wide-spacer {
  height: 5px;
  line-height: 5px;
}

.qa-form-wide-ok {
  .success-box();
  font-size: 1.3em;
  margin-bottom: 20px;
  text-align: center;
}

.qa-form-wide-label, .qa-form-wide-data {
  padding: 5px 8px;
  border: @borderlight;
}

.qa-form-wide-data * {
  vertical-align: middle;
}

.qa-form-wide-static,
.qa-form-wide-static * {
  vertical-align: top;
}

.qa-form-wide-label {
  white-space: nowrap;
  width: 100px;
  background-color: @bglight;
  border-right-style: dashed;
  text-align: right;
}

.qa-form-wide-text, .qa-form-wide-number {
  padding: 3px;
  border: @bordernormal;
}

.qa-form-wide-text {
  width: 90%;
}

.qa-form-wide-number {
  width: @numberwidth;

  & + .qa-form-wide-note {
    vertical-align: middle;
  }
}

.qa-form-wide-error {
  .warn-box();
  font-size: 0.9em;
  margin-left: 6px;
  padding: 0.5em;
}

.qa-form-wide-note {
  margin-left: 4px;
  vertical-align: top;

  .qa-form-wide-help {
    padding: 0 floor(@basesize / 2) 0 floor(@basesize / 2);
    border-radius: @basesize;
    color: @helpfgcolor;
    background-color: @helpbgcolor;
    font-weight: bold;
  }
}

.qa-form-wide-buttons {
  padding: 8px;
  text-align: center;
}

.qa-form-wide-button-delete_expired {
  margin-bottom: 5px;
}

/* Standard form (light version - buttons only) */

.qa-form-light-button, .qa-form-light-hover {
  background: none;
  cursor: pointer;
  margin-left: 5px;
  font-size: 0.85em;
  border: @borderwhite; // needed for tooltips to work more reliably in IE
  overflow: visible;    // for IE
}

/* Standard form (basic version - buttons only) */

.qa-form-basic-button, .qa-form-basic-hover {
  padding: 3px 8px;
  margin: 4px 4px 4px 0;
  border: @borderdark;
  vertical-align: middle;
  .appearance-none();
}

.qa-form-basic-note {
  font-size: 0.9em;
}

/* Question list */

.qa-q-list-item {
  margin-bottom: 24px;
  zoom: 1; // for IE

  .qa-q-item-who {
    display: inline;
  }

  >.qa-q-item-stats {
    >* {
      box-sizing: border-box;
      border: 1px solid transparent;
      width: @voteboxwidth + 2px;
    }
  }

  .qa-a-count-selected {
    background-color: @bgselected;
    border-color: @successdark;
  }
}

.qa-q-item-main {
  float: left;
  width: @listitemwidth;
}

.qa-q-item-title {
  font-weight: bold;
  font-size: 1.3em;
}

.qa-q-item-content {
  font-size: 0.9em;
  margin-top: 6px;
  max-height: 64px;
  overflow-y: auto;
  padding: 4px;
  border: @borderlight;
}

.qa-q-item-avatar {
  .avatar();
  margin-top: 6px;
}

.qa-q-item-meta {
  .metainfo();
  vertical-align: middle;

  .qa-cc-who-suffix {
    display: none;
  }
}

.qa-q-item-flags, .qa-q-view-flags, .qa-a-item-flags, .qa-c-item-flags {
  display: inline-block;
  background-color: @warndark;
  color: @textcolorinverse;
  font-weight: bold;
  padding: 2px 5px;
}

.qa-q-item-tags {
  margin-top: 8px;
}

.qa-q-item-tag-list {
  list-style: none;
}

.qa-q-item-tag-item {
  display: inline;
}

.qa-q-item-buttons {
  text-align: right;
  clear: both;
}

.qa-suggest-next {
  font-size: 1.3em;
  padding: 0.5em 0;
  text-align: left;
  clear: both;
}

.qa-view-count {
  color: @textshaded;
}

/* Votes */

// qa-*-hover classes are substituted by JS (for IE), qa-*-button:hover is a backup for other browsers if JS is off

.qa-voting, .qa-a-count {
  float: left;
  text-align: center;
}

.qa-voting {
  margin-bottom: 2px;
}

.qa-voting .qa-vote-msg {
  position: absolute;
  z-index: 100;
  top: 80px;
  width: @formwidth;
  background-color: @successlight;
  padding: 8px;
  text-align: center;
}

.qa-vote-buttons {
  height: 20px;

  & + .qa-vote-count + .qa-vote-buttons {
    margin-top: 10px;
  }
}

.qa-vote-first-button, .qa-vote-second-button, .qa-vote-one-button {
  display: block;
  width: 24px;
  height: 16px;
  background: transparent url("q2a-buttons.png") no-repeat;
  cursor: pointer;
}

.qa-vote-first-button, .qa-voted-up-button, .qa-voted-up-hover {
  margin: 0 auto 4px;
}

.qa-vote-second-button, .qa-voted-down-button, .qa-voted-down-hover {
  margin: 4px auto 0;
}

.qa-vote-up-button {
  background-position: 0 0;
}

.qa-vote-up-disabled {
  background-position: 0 -64px;
}

.qa-vote-up-hover, .qa-vote-up-button:hover {
  background-position: 0 -16px;
}

.qa-vote-down-button {
  background-position: -24px 0;
}

.qa-vote-down-disabled {
  background-position: -24px -64px;
}

.qa-vote-down-hover, .qa-vote-down-button:hover {
  background-position: -24px -16px;
}

.qa-voted-up-button {
  background-position: 0 -32px;
}

.qa-voted-up-hover, .qa-voted-up-button:hover {
  background-position: 0 -48px;
}

.qa-voted-down-button {
  background-position: -24px -32px;
}

.qa-voted-down-hover, .qa-voted-down-button:hover {
  background-position: -24px -48px;
}

.qa-netvote-count {
  display: block;
}

.qa-netvote-count-data {
  display: block;
  font-size: @counterlarge;
  font-weight: bold;
  line-height: 1;
}

.qa-netvote-count-pad {
  display: block;
}

.qa-template-question {
  .qa-netvote-count-data {
    font-size: @counterhuge;
    padding: 4px 0 7px 0;
  }
  .qa-netvote-count-pad {
    display: none;
  }
}

.qa-upvote-count, .qa-downvote-count {
  width: 48px;
  height: 27px;
  position: relative;
  top: -4px;
  display: block;
}

.qa-upvote-count-data, .qa-downvote-count-data {
  font-size: 1.4em;
  font-weight: bold;
  display: inline;
}

.qa-upvote-count-pad, .qa-downvote-count-pad {
  font-size: 0.7em;
  display: none;
}

.qa-q-view {
  .qa-voting {
    width: @voteboxwidth;
    background-color: transparent;
    border: 0;
    padding-top: 4px;
  }
}

.qa-q-view-stats {
  box-sizing: border-box;
  width: @poststatswidth !important;

  .qa-view-count {
    width: 100%;
    margin-top: 7px;
    line-height: 1;
  }

  .qa-view-count-data, .qa-view-count-pad {
    font-size: @countersmall;
    font-weight: normal;
    display: inline;
  }

  .qa-vote-second-button, .qa-voted-down-button, .qa-voted-down-hover {
    margin: -6px auto 0;
  }
}

.qa-q-list-item {
  .qa-vote-buttons, .qa-vote-buttons-net {
    display: none;
  }
}

.qa-c-list-item {
  border-bottom: @borderdotted;
  padding: 0 0 0 6px;

  >form {
    display: inline-block;
    z-index: 1;

    div {
      display: inline-block;
    }
  }

  .qa-vote-buttons {
    margin: 0 !important;
  }

  .qa-netvote-count-data {
    padding: 3px 0 0 0;
  }

  >form:first-child {
    float: left;
    width: 46px;
    height: 25px;

    div {
      position: relative;
    }

    .qa-vote-count {
      float: right;
      width: 40px;
      text-align: center;
    }
  }

  >form:nth-child(2) {
    float: right;
    width:  ~"calc(100% - 50px)";
    min-height: 25px;
    padding-top: 2px;

    .qa-c-item-content, .qa-c-item-footer {
      width: 100%;

      .qa-c-item-buttons {
        float: right;
        width: unset;
        padding-right: 1px;
      }
    }
  }

  .qa-voting {
    width: 50px;
    padding-top: 9px;
  }

  .qa-vote-buttons {
    float: left;
    position: absolute;
    width: 10px;
    height: 7px;
    z-index: 1; // lest access to the downvote button be obstructed by other elements
  }

  .qa-vote-up-button, .qa-vote-down-button, .qa-voted-up-button, .qa-voted-down-button, .qa-vote-up-disabled, .qa-vote-down-disabled {
    width: 7px;
    height: 7px;
    border-style: solid;
    background-image: none;
    cursor: default;
    transform: rotate(-45deg);
    -webkit-tranform: rotate(-45deg);
  }

  .qa-vote-up-button, .qa-voted-up-button, .qa-vote-up-disabled {
    border-width: 3px 3px 0 0;
  }
  .qa-vote-down-button, .qa-voted-down-button, .qa-vote-down-disabled {
    border-width: 0 0 3px 3px;
  }

  .qa-vote-up-button     { border-color: @linecolor; cursor: pointer; }
  .qa-voted-up-button    { border-color: @successdark; }
  .qa-vote-up-disabled   { border-color: @disabled; }
  .qa-vote-down-button   { border-color: @linecolor; cursor: pointer; }
  .qa-voted-down-button  { border-color: @warndark; }
  .qa-vote-down-disabled { border-color: @disabled; }

  .qa-netvote-count-data {
    font-size: @countersmall;
    font-weight: normal;
  }
}

/* Answer count */

.qa-a-count {
  &.qa-a-count-selected { color: @successdark; }
}

.qa-a-count-data, .qa-view-count-data {
  display: block;
  font-size: @counterlarge;
  font-weight: bold;
  line-height: 1;
}

.qa-a-count-pad, .qa-view-count-pad {
  display: block;
}

.qa-q-item-stats {
  float: left;
  width: @liststatswidth;
  padding-top: 2px;
}

.qa-view-count {
  display: block;
  float: left;
  text-align: center;
}

/* Tags, users and categories */

.qa-part-ranking {
  column-count: 4;
}

.qa-ranking-item {
  display: block;
  margin-bottom: 15px;
}

.qa-top-users-item {
  height: 20px; // set "Admin > Users > Avatar size on top users page" to this value too
}

.qa-top-tags-item, .qa-top-users-item {
  >* {
    vertical-align: middle;
  }
}

.qa-top-users-score {
  &::before { content: '('; }
  &::after  { content: ')'; }
}

.qa-browse-cat-list {
  list-style: none;
  margin-left: 2.5em;
}

.qa-browse-cat-list-1 { font-size: 1.3em; }
.qa-browse-cat-list-2 { font-size: 1.2em; }
.qa-browse-cat-list-3 { font-size: 1.1em; }
.qa-browse-cat-list-4 { font-size: 1em; }

.qa-browse-cat-item {
  margin: 0.5em 0;
  font-weight: bold;
}

.qa-browse-cat-closed { list-style: disc; }
.qa-browse-cat-open   { list-style: circle; }

.qa-browse-cat-link {
  font-weight: bold;
}

.qa-browse-cat-note {
  font-weight: normal;
}

/* Question view */

.qa-q-view-main {
  float: left;
  width: @itemwidth;
  margin-left: 10px;
  margin-bottom: 15px;

  .qa-q-view-who {
    >.qa-q-view-who-data { padding-left: 2px; }
  }

  .qa-view-count { display: none; }
}

.qa-q-view-content {
  margin-bottom: 16px;
}

.qa-cc-avatar-meta {
  display: inline-block;
  width: @userboxwidth;
  padding: @userboxpad;
  background-color: @userboxcolor;
  border-width: @userboxborder;
  border-style: solid;
  border-color: @bglight;

  .qa-a-item-who > .qa-a-item-who-pad:first-child,
  .qa-q-view-who > .qa-q-view-who-pad:first-child {
    display: none;
  }
}

.qa-q-view-avatar {
  .avatar();
}

.qa-q-view-who {
  display: inline-block;
  vertical-align: middle;
  line-height: 1.1;
}

.qa-q-view-meta {
  .metainfo();
  width: ~"calc(100% - @{userboxouterwidth} - 4px)";
  vertical-align: top;

  >* {
    vertical-align: middle;
  }
  >.qa-q-view-who {
    >.qa-q-view-who-points, >.qa-cc-who-suffix {
      display: none;
    }
  }
}

.qa-q-view-follows {
  margin-bottom: 12px;
  font-style: italic;
}

.qa-q-view-closed {
  margin-bottom: 6px;
  padding: 1px 3px;
  background-color: @bglight;
  font-size: 0.9em;
  font-style: italic;
}

.qa-q-view-closed-content, .qa-q-view-extra-content, .qa-q-view-points-data {
  font-weight: bold;
}

.qa-q-view-extra {
  margin-bottom: 18px;
  font-style: italic;
}

.qa-q-view-tags {
  margin-bottom: 12px;
}

.qa-q-view-tag-list {
  list-style: none;
}

.qa-q-view-tag-item {
  display: inline;
}

.qa-q-view-buttons {
  display: inline-block;
  width: ~"calc(100% - @{revisionbuttons} - 4px)";
  text-align: right;
}

.qa-q-view-c-list {
  clear: both;
  margin-top: 10px;
  border-top: @borderdotted;
}

.qa-q-view-hidden {
  & > .qa-q-view-main {
    background-color: @warnlight;
    width: ~"calc(100% - 80px)";
    padding: @postpadding;
  }
  .qa-voting {
    background: transparent none;
    color: @basecolor;
  }
}

/* Answer view */

.qa-a-list {
  width: @mainwidth - 5px;
}

.qa-a-list-item {
  margin-bottom: 25px;
  zoom: 1; // for IE

  .qa-a-item-who {
    >.qa-a-item-who-data {
      padding-left: 2px;
    }
  }

  & > form > div > .qa-voting {
    width: @voteboxwidth;
    background: transparent;
    border: 0;
    height: auto;
    padding-top: 9px;

    >div {
      >.qa-vote-second-button, >.qa-voted-down-button, >.qa-voted-down-hover {
        margin: -6px auto 0;
      }
    }
  }
}

.qa-a-list-item-hidden {
  .qa-a-item-main {
    background-color: @warnlight;
    width: ~"calc(100% - 79px)";
    padding: @postpadding;
    margin-right: 3px;
  }
  .qa-voting  {
    color: @basecolor !important;
  }
}

.qa-a-item-main {
  float: right;
  width: @itemwidth + 1px;
  //TODO: remove?
  display: inline-block; // for IE
}

.qa-a-item-content {
  margin-bottom: 10px;
}

.qa-a-item-avatar {
  .avatar();
}

.qa-a-item-who {
  display: inline-block;
  vertical-align: middle;
  line-height: 1.1;
}

.qa-a-item-meta {
  .metainfo();
  width: ~"calc(100% - @{userboxouterwidth} - 4px)";
  vertical-align: top;

  >* {
    vertical-align: middle;
  }
  >.qa-a-item-who {
    >.qa-a-item-who-points, >.qa-cc-who-suffix {
      display: none;
    }
  }
}

.qa-a-item-buttons {
  display: inline-block;
  width: ~"calc(100% - @{revisionbuttons} - 4px)";
  text-align: right;
}

.qa-a-item-c-list {
  clear: both;
  margin-top: 10px;
  border-top: @borderdotted;
}

/* Answer selection */

.qa-a-item-selected {
  background-color: @successlight;
  padding: @postpadding;

  >.qa-a-selection {
    margin: 100px 0 0 -63px;
  }
}

.qa-a-selection {
  box-sizing: border-box;
  float: left;
  clear: both;
  text-align: center;
  padding: 0;
  margin: 105px 0 0 -58px;
  background-color: transparent;
}

.qa-a-select-button, .qa-a-select-hover, .qa-a-unselect-button, .qa-a-unselect-hover, .qa-a-selected {
  width: 36px;
  height: 25px;
  background: url("q2a-buttons.png") -78px 0 no-repeat;
  cursor: pointer;
}

.qa-a-select-button, .qa-a-unselect-hover, .qa-a-unselect-button:hover {
  background-position: -78px -25px;
}

.qa-a-selected-text {
  font-size: 0.8em;
  font-weight: bold;
  display: block;
  margin-top: 6px;
}

/* Comments */

.qa-c-item-hidden {
  width: ~"calc(100% - 15px)";

  .qa-post-content {
    background-color: @warnlight;
    padding: @postpadding @postpadding 0 @postpadding;
  }
  .qa-c-item-footer {
    background-color: @warnlight;
    padding: 0 @postpadding @postpadding @postpadding;
  }
  .qa-vote-count {
    color: @basecolor;
  }
}

.qa-c-item-link {
  display: block;
  margin-bottom: 6px;
}

.qa-c-item-expand {
  display: block;
  color: @metatextcolor;
  font-style: italic;
  margin: 4px 0;
}

.qa-c-item-content {
  display: block;
  margin-bottom: 2px;

  >div[itemprop="text"] {
    display: inline;
  }

  >a {
    &, &:link, &:active, &:visited, &:hover {
      color: @metatextcolor;
      text-decoration: none;
    }
  }
}

.qa-c-item-avatar-meta,
.qa-cc-c-item-edited {
  color: @metatextcolor;
}

.qa-c-item-footer {
  position: relative;
}

// hide avatar and rep in comments
.qa-c-item-avatar,
.qa-c-item-who-points {
  display: none;
}

.qa-c-item-meta {
  .metainfo();
  vertical-align: middle;
}

.qa-c-item-buttons {
  display: block;
  float: right;

  >input {
    border: none;
  }
}

.qa-c-item-who-pad {
  .badge-medals-widget { display: none; }
}

/* Related questions and activity count widgets */

.qa-related-q-list {
  list-style-type: none;
  line-height: 1.2;
}

.qa-related-q-item {
  margin: 10px 0;
  word-wrap: break-word;
}

.qa-activity-count {
  font-size: 1.5em;
}

.qa-activity-count-item {
  margin: 0.25em 0;
}

.qa-activity-count-data {
  font-weight: bold;
}

/* Private Messages */

#privatemessages {
  .qa-message-item {
    margin-top: 10px;
    padding-top: 10px;
    border-top: @bordernormal;
  }
  .qa-message-content { margin-bottom: 5px; }
  .qa-message-avatar  { display: none; }
  .qa-message-buttons { margin-top: 5px; }
}

/* Footer parts */

.qa-nav-footer-list {
  float: left;
  list-style-type: none;
}

.qa-nav-footer-item {
  float: left;
  margin-right: 12px;
}

.qa-attribution {
  float: right;
}

.qa-attribution, .qa-nav-footer-item {
  a {
    text-decoration: underline;
  }
  a:hover {
    color: @linkcolor;
  }
}

/* Classes in HTML passed to theme class */

.qa-tag-link {
  font-size: 0.9em;
  padding: 3px 5px;
  background-color: @bglight;
  vertical-align: middle;
  display: inline-block;

  &:link, &:visited, &:hover {
    color: @tagtextcolor;
    text-decoration: none;
  }
}

.qa-avatar-image {
  margin-right: 2px;
  vertical-align: middle;
}

.qa-avatar-link, .qa-avatar-link:hover {
  text-decoration: none;
}

/* mobile view */

@media screen and (max-width: @bodywidth) {
  .qa-a-item-main,
  .qa-body-wrapper,
  .qa-form-tall-data,
  .qa-main,
  .qa-part-form,
  .qa-post-content,
  .qa-q-item-main,
  .qa-search,
  .qa-search-field,
  .qa-sidepanel,
  .qa-voting,
  .wmd-input {
    width: 100%;
  }

  // the sidebar isn't displayed in mobile view, so we don't need to align
  // question titles with it
  h1 {
    margin-top: 10px;
  }

  .wmd-spacer {
    display: none;
  }

  .wmd-button {
    position: relative;
    left: auto !important;
  }

  .qa-cc-avatar-meta {
    display: block;
    width: @userboxwidth !important;
    margin-top: 5px;

    >* {
      width: auto !important;
    }
  }

  .qa-header {
    padding-left: 0;
    padding-right: 0;
  }

  div {
    width: inherit !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  pre {
    width: inherit;
    max-width: ~"calc(100vw - @{pre_mobile_maxwidth_correction})"
  }

  // head section

  .qa-logo {
    margin-bottom: 10px;
    padding-left: 10px;
  }

  .qa-search {
    float: left;
    margin-top: 0;
    margin-bottom: 10px;
    padding-left: 10px;
    clear: left;
  }

  // navigation

  .qa-nav-main-list {
    padding-left: 4px;

    >li {
      float: left;
      margin: 0;
    }
  }

  .qa-nav-main-categories, .qa-nav-main-item-opp, .qa-nav-main-tag, .qa-nav-main-user {
    display: none;
  }

  .qa-nav-main-terms-and-conditions {
    display: inline;
  }

  .qa-nav-user {
    padding-right: 10px;
  }

  .qa-nav-user-list, .qa-nav-user-item {
    display: block;
    text-align: right;
    line-height: 2;
    font-size: 1.1em;
  }

  // main section

  .qa-main {
    padding-left: @mainpadding;
    padding-right: @mainpadding;
  }

  .qa-q-item-stats {
    width: 100% !important;

    >* {
      display: inline-block;
      width: unset !important;
      font-weight: normal;
      line-height: 1;
      vertical-align: top;
      margin: 0;
      padding: 0;
    }

    .qa-netvote-count-data, .qa-a-count-data, .qa-view-count-data {
      float: left;
      margin-right: 0.2em;
      padding: 0;
      font-size: 1.1em;
      font-weight: normal;
    }
    .qa-netvote-count-pad, .qa-a-count-pad, .qa-view-count-pad {
      float: right;
      margin-right: 10px;
      padding: 0;
      font-size: 1.1em;
    }
    .qa-a-count-selected {
      background-color: unset;
      border-color: transparent;

      >* {
        font-weight: bold;
      }
    }
  }

  .qa-q-view-main, .qa-a-item-main {
    width: ~"calc(100% - @{poststatswidth})" !important;
  }

  .qa-a-list-item {
    >form:first-child {
      .qa-voting {
        width: @poststatswidth !important;
      }
    }
  }

  .qa-q-view-hidden {
    .qa-q-view-main {
      width: ~"calc(100% - 55px)" !important;
    }
  }
  .qa-main-hidden, .qa-a-list-item-hidden {
    .qa-a-item-main {
      width: ~"calc(100% - 55px)" !important;
    }
  }

  .qa-q-view-avatar-meta, .qa-a-item-avatar-meta {
    >span {
      vertical-align: middle !important;
    }
  }

  div.qa-a-selection {
    margin-left: -41px !important;
  }

  div.qa-a-item-selected {
    >.qa-a-selection {
      margin-left: -46px !important;
    }
  }

  .qa-a-item-buttons {
    text-align: right;
    margin-top: 5px;
  }

  .qa-q-view-stats {
    .qa-view-count { display: none; }
  }

  .qa-q-item-stats, .qa-q-item-main {
    float: left;
    display: block;
    width: 100%;
    clear: left;
  }

  .qa-form-light-button {
    margin: 0;
  }

  .qa-part-a-list {
    margin-top: 10px;
  }

  .qa-a-item-c-list, .qa-c-list-item, .qa-q-view-c-list {
    width: 100% !important;
    margin: 0;
    padding: 0;
  }

  .qa-a-item-c-list, .qa-q-view-c-list {
    margin-top: 5px;
  }

  .qa-c-list-item {
    .qa-netvote-count-data {
      padding-top: 4px;
    }

    >form:first-child {
      .qa-voting {
        padding: 7px 0 0 1px !important;
      }
      .qa-vote-buttons {
        width: 10px !important;
      }
      .qa-vote-up-button, .qa-vote-down-button, .qa-voted-up-button, .qa-voted-down-button, .qa-vote-up-disabled, .qa-vote-down-disabled {
        width: 10px;
        height: 10px;
      }
      .qa-vote-up-button, .qa-voted-up-button, .qa-vote-up-disabled {
        border-width: 4px 4px 0 0;
      }
      .qa-vote-down-button, .qa-voted-down-button, .qa-vote-down-disabled {
        border-width: 0 0 4px 4px;
      }
      .qa-vote-count {
        width: 30px !important;
      }
    }

    >form:nth-child(2) {
      .qa-c-item-content, .qa-c-item-footer {
        width: 100% !important;

        .qa-c-item-buttons {
          width: unset !important;
        }
      }
    }
  }

  .qa-c-item-buttons {
    float: left !important;
    >input {
      padding-right: 5px;
    }
  }

  .qa-c-item-hidden {
    width: ~"calc(100% - 10px)" !important;
  }

  .qa-part-ranking {
    column-count: 2;
  }

  .qa-part-custom {
    width: 90%;
  }

  // footer section

  .qa-footer {
    font-size: 1em;
  }

  .qa-attribution, .qa-sidepanel {
    display: none;
  }
}
