// General remarks:
// - We use camelCase for variables and dashes-for-classes, to differentiate
//   pure CSS from LESS

// ------------- Begin variables + generic classes -----------------------------

@errorColor: red;
@warningColor: #ff6600;
@linkColor: #1f5cad;
@visitedColor: #5E4398;
@infoColor: #ccc;
@headerColor: #414042;
@sidePadding: 2em;
@editorZIndex: 1000;
@editorPromptZIndex: 1001;
@acZIndex: 1002;
@modalBlockerZIndex: 1003;
@modalZIndex: 1004;

body {
  background: #fafafa;
}

// PureCSS has .hidden defined with !important
.hidden-regular {
  display:none;
}

// Helper class for excluding from print
@media print
{
  .no-print
  {
    display: none !important;
  }

  .print-visible
  {
    display: block !important;
  }
}


// When things go wrong ...
.stack-trace {
  font-family: monospace;
  white-space: pre-wrap;
}

// Useful for many purposes
.max-width {
  width:100%;
}

// ------------- End variables + generic classes -------------------------------
// ------------- Begin navigation/logo -----------------------------------------

#nav {
  background: #fafafa;
  padding-top: 1em;
  padding-bottom: 1em;
  padding-left: @sidePadding;
  padding-right: @sidePadding;
  border-width: 1px;
  border-color: #f2f2f2 ;
  border-bottom-style:solid;
}

#user-menu {
    margin-top:0px;
    text-align:right;
    list-style-type: none;
}

#user-menu li {
    display: inline-block;
    margin: 0.25em;
}

// "Medium" breakpoint is at 48em.
// We put the menu below the logo, with a little bit of margin at the top,
// at that screen size, to avoid a ragged menu on the right.
@media (max-width: 47.999em) {

    #user-menu {
      text-align:left;
      padding:0;
      margin-top:10px;
    }

}

// "Large" breakpoint is at 64em.
// We insert a line break into the menu for smaller sizes, to avoid breaks
// in between the buttons.
@media (max-width: 63.999em) {

  #menu-break {
    display: inline;
  }

}

// Make menu icons stand out a bit with shadow
.menu-icon {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

// Red heart!
.invite-icon {
  color:#f66;
}

// ------------- End navigation/logo -------------------------------------------
// ------------- Begin search --------------------------------------------------

.search-form {
  position:relative;
}

.search-form label
{
  position:absolute;
  left:20px;
  display:inline;
}

#search-input {
  width:100%;
  padding-left:45px;
  display:inline;
}

.search {
  white-space:nowrap;
}

// Autocompletion styles
.ac-wrap {
  position: absolute;
  z-index:@acZIndex;
}

.ac-rwrap {
  background-color: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border: 1px solid #e6e6e9;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  margin-top: 0px;
  margin-left: 5%;
  margin-right: 5%;
}

.ac-row {
  padding: 7px 10px 5px 10px;;
  border-bottom: 1px solid #e6e6e9;
  z-index:@acZIndex;
  position:relative;
  background:white;
}

.ac-row:hover {
  background-color: #f2f2f4;
  cursor: pointer;
}

.ac-row.selected {
  background-color: #eee;
}

.ac-row:last-child {
  border-bottom: none;
}

.ac-pr, .ac-sc {
  vertical-align: baseline;
  display: block;
}

.ac-pr {
  color: #3a3a48;
}

.ac-sc {
  font-size: small;
  padding-top: 5px;
  color: #666;
}


// Autocomplete for adapters
.ac-adapter-get-more {
  padding: 7px 10px 5px 10px;
  display:flex;
  display:-webkit-flex;
  -webkit-align-items:center;
  background:white;
  position:relative;
  z-index:@acZIndex;
}

.ac-adapter-no-results {
  padding: 7px 10px 5px 10px;
  background:white;
  position:relative;
  z-index:@acZIndex;
  font-style:italic;
  cursor:default;
  color:grey;
}

.ac-adapter-no-relevant-results {
  color:grey;
  padding: 7px 10px 5px 10px;
  font-style:italic;
}

.ac-adapter-more-results {
  font-weight:bold;
  font-size:small;
  text-transform:uppercase;
  text-align:center;
  color:#999;
  width:33.33%;
}

.ac-adapter-get-active {
  cursor:pointer;
  color:#4848ca;
}

.ac-adapter-get-prev, .ac-adapter-get-next {
  display:inline-block;
  width:33.33%;
  font-size:xx-large;
  font-weight:bold;
}

.ac-adapter-get-next {
  text-align:right;
}

.ac-adapter-get-prev {
  text-align:left;
}

.ac-adapter-wrap {
  position:absolute;
  z-index:@acZIndex;
}

.ac-adapter-rwrap {
  background-color: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border: 1px solid #e6e6e9;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  margin-top: 0px;
}

.ac-adapter-row {
  padding: 7px 10px 5px 10px;
  border-bottom: 1px solid #e6e6e9;
  z-index:@acZIndex;
  position:relative;
  background:white;
}

.ac-adapter-row:hover {
  background-color: #f2f2f4;
  cursor: pointer;
}

.ac-adapter-row.selected {
  background-color: #eee;
}

.ac-adapter-row:last-child {
  border-bottom: none;
}

.ac-adapter-pr, .ac-adapter-sc {
  vertical-align: baseline;
  display: block;
}

.ac-adapter-pr {
  color: #3a3a48;
}

.ac-adapter-sc {
  font-size: small;
  padding-top: 5px;
  color:#333;
}

.search-highlight {
  color: red;
}

.search-excerpt {
  margin:0;
  padding: 0.5em;
  margin-bottom:1em;
  background: #fcfcfc;
  border-style: dashed;
  border-width: 1px;
  border-color: #ccc;
  border-radius: 10px;
  display:inline-block;
}

.search-match-heading {
  margin-bottom:0;
}

.hl {
  background: #eee;
}
// ------------- End search ----------------------------------------------------
// ------------- Begin content styles ------------------------------------------
#main-body {
  padding-top: 1em;
  padding-bottom: 1.5em;
  padding-left: @sidePadding;
  padding-right: @sidePadding;
  background: white;
}

#footer a,
#main-body a {
    text-decoration:none;
    color: @linkColor;
}

#footer a:hover,
#main-body a:hover {
    text-decoration:underline;
}

#footer a:visited,
#main-body a:visited {
    color: @visitedColor;
}

#main-body a.fragment-link {
  color: #aaa;
  text-decoration:none;
  font-size:medium;
  margin-right:0.5em;
}

#main-body a.fragment-link:visited {
  color: #aaa;
}

#main-body a.fragment-link:hover {
  color: #ccc;
}

body {
    font-family: "Noto Sans", sans-serif;
}

#language-select {
  height: auto;
}

#page-header {
  margin-top: 0px;
  color: @headerColor;
  font-weight: normal;
  font-style: italic;
}

#sub-header {
  margin-top: -0.67em // offset header's margin-bottom
}

#item-description {
  color:@headerColor;
}

.sub-header-regular, #sub-header, .inline-feed-headline {
  color: @headerColor;
  font-weight:normal;
  font-style: italic;
}

.headline-with-link {
  display:flex;
  align-items:center;
  display:-webkit-flex;
  -webkit-align-items:center;
}

.frontpage-headline {
  padding-top: 2em;
}

.inline-feed-headline {
  margin-top: 0;
  margin-bottom: 0;
}

.view-all-link {
  margin-left:auto;
}

.pagination-footer {
  padding-top: 1.5em;
}

#logo {
   width:400px;
   height:76.61px;
   min-width:150px;
}

.button-rounded {
    border-radius: 4px;
}

#home-link {
    text-decoration: none;
    color: #000;
}

.error {
    color: @errorColor;
}

.warning {
  color: @warningColor;
}

.lead {
    font-size: 130%;
}

.divider {
  width: 100%;
  margin-bottom: 1.5em;
  margin-top: 0;
  border-bottom: 1px solid #e5e5e5;
}

.message-box {
  padding: 20px;
  margin: 20px 0;
  border: 1px solid #eee;
  border-left-width: 5px;
  border-radius: 3px;
  border-left-color: green;
}

.error-box {
  padding: 20px;
  margin: 20px 0;
  border: 1px solid #eee;
  border-left-width: 5px;
  border-radius: 3px;
  border-left-color: red;
}

.warning-box {
  padding: 20px;
  margin: 20px 0;
  border: 1px solid #eee;
  border-left-width: 5px;
  border-radius: 3px;
  border-left-color: @warningColor;
}

.button-destructive {
  background: #aa3333;
  color: white;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}


label {
  font-weight: bold;
}

a#user-link, a#user-link:visited {
  color: #666;
  text-decoration:none;
}

a#user-link:hover {
  text-decoration:underline;
}


a#invite-action, a#invite-action:visited {
  color: #666;
  text-decoration:none;
}

a#invite-action:hover {
  text-decoration:underline;
}


.spaced-icon {
  margin-right:0.2em;
}

.review-icon {
  width: 1.3em;
  color:black;
}

.sync-icon {
  color:#77bb77;
  display: inline !important; // Prevent wrapping icon by itself, overriding default
  margin-left:0.5em;
  font-size:16px !important; // Fixed size regardless of container
  vertical-align:middle;
}

.review {
  max-width: 42em;
}

.star-holder, .star-full {
  padding: 5px;
}

.preview-star  {
  padding: 2px;
}

textarea#review-text {
  height: 14em;
}

.input-spinner {
  float: right;
  margin-right: 0.5em;
  margin-top: -2em;
  z-index: 2;
  color: #666;
}

#help {
  margin-left:1em;
}

#help, .help-text {
  display: none; /* shown via JS, or overridden in document style when no JS */
  overflow: auto;
  max-height: 25em;
  margin-left: 1em;
  margin-right: 1em;
  margin-top: 0;
  margin-bottom: 1em;
}

.help-heading {
  color: #666;
  font-weight:bold;
}

#review-terms-notice {
  margin-top:1em;
  font-size:small;
}

#register-terms-notice {
  margin-top:1em;
  margin-bottom:1em;
  font-size:medium;
}

.buttons-group {
  text-align: center;
}

#show-extra-fields {
  color: @visitedColor;
  cursor: pointer;
}

#extra-fields, #extra-fields-expanded {
  display: none;
}

label.inline-label {
  display:inline;
  font-weight: normal;
}

label.inline-star-label {
  margin-left:0.5em;
  margin-right:1em;
}

.info-icon {
  color: @infoColor;
}


.validation-error {
  display: none;
  color: red;
}

.helper-links {
  display: none;
}

.required {
  color:@errorColor;
  font-weight:bold;
  display:none;
}

.long-text {
  max-width: 42em;
  margin:auto;
}

.long-text #page-header{
  text-align:center;
}

.long-text h2 {
  font-weight:normal;
}

#preview-contents {
  margin-bottom: 1em;
  border-style: solid;
  border-width: 1px;
  padding: 1em;
  border-color: #ccc;
  background: #fafafa;
  max-width: 42em;
}

#preview-review-title, #preview-headline, #preview-review-url {
  margin-top: 0;
  font-weight:normal;
}

#preview-review-url, #preview-header {
  text-align: center;
  color: @headerColor;
  font-style: italic;
}

#preview-review-title {
  margin-bottom: 0;
}

#preview-review-byline, #preview-blog-post-byline {
  font-size: small;
}

#review-subject {
  display:none;
  margin-top:1em;
}

#resolved-info-container {
  display:flex;
  display:-webkit-flex;
  align-items:center;
  -webkit-align-items:center;
}

#resolved-info-controls {
  margin-left:0.5em;
}

#remove-resolved-info {
  color:#444;
  cursor:pointer;
}

#resolved-description, #resolved-thing {
  font-size:small;
}

a#abandon-draft, a#abandon-draft:visited {
  color: white;
  font-style: normal;
  font-size:small;
}

a#manage-urls, a#manage-urls:visited, a#manage-urls:hover,
a#add-review, a#add-review:visited, a#add-review:hover,
a#add-team, a#add-team:visited, a#add-team:hover,
a#add-label, a#add-label:visited, a#add-label:hover,
a#add-description, a#add-description:visited, a#add-description:hover,
a#edit-bio, a#edit-bio:visited, a#edit-bio:hover,
a#edit-team, a#edit-team:visited, a#edit-team:hover,
a#write-blog, a#write-blog:visited, a#write-blog:hover,
a#write-review, a#write-review:visited, a#write-review:hover,
a#upload, a#upload:visited, a#upload:hover,
{
  color: black;
  font-size: small;
  font-weight: bold;
  text-decoration:none;
  font-style:normal;
}

a#add-description {
  display:inline;
}

a#add-description span.fa {
  display:inline !important;
}

.inline-edit-button {
  margin-left:0.5em;
}

.content-meta {
  font-size:small;
  display:flex;
  display:-webkit-flex;
  align-items:flex-end;
  -webkit-align-items:flex-end;
  flex-wrap:wrap;
  -webkit-flex-wrap:wrap;
}

.review-teams-and-byline {
  margin-right:2em;
}

// Right-align with byline/teams info on larger screens
@media (min-width: 35.501em) {

  .content-actions {
    margin-left:auto;
  }
}

// Space between action spans
.content-actions span.content-action + span {
  margin-left:0.5em;
}

.file-actions {
  font-size: small;

}


#preview-review-text h1, .review-text h1, .rte-container h1 {
  font-size: 1.3em;
  font-weight: normal;
}

#preview-review-text h2, .review-text h2, .rte-container h2 {
  font-size: 1.2em;
  font-weight: normal;
}

.review-feed, .blog-feed {
  max-width: 42em;
}

hr.feed-separator, hr.team-separator {
  border: 0;
  height: 1px;
  background: #eaeaea;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

.review-rating .review-star:not(:last-child) {
  padding-right:0.35em;
}

.review-star {
  padding: 3px;
}

.review-title {
 font-size: 1.5em;
 font-weight:normal;
}

.feed-item-header {
  font-weight: bold;
}

.content-action {
  white-space: nowrap;
}

.delete-preamble {
  margin-bottom:1em;
}

.cancel-link {
  margin-left:1em;
  font-style:italic;
}

.message-button {
  font-size:small;
  font-weight:bold;
}

.message-button-destructive {
  background: #cc3333;
  color: white;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

#draft-notice {
  display:none;
}

.language-button {
  font-size:small;
  margin-bottom:0.5em;
}

.inline-form {
  display: inline;
}

.upload-form {
  margin-top:2em;
}

.language-identifier, .user-team-badge {
  background: #eee;
  font-size: x-small;
  text-transform: uppercase;
  padding:3px;
  border-radius: 3px;
  vertical-align:middle;
  font-weight: normal;
  font-style: normal;
  white-space: nowrap;
  color:black;
}

.language-identifier-icon {
  color:#777;
}

// For inline display in search results, we add a border to lift it up from
// background when row is highlighted.
.language-identifier-search-row {
  margin-left:0.5em;
  border-style:solid;
  border-width:1px;
  border-color:#ccc;
  font-size:xx-small;
}

.user-team-badge {
  font-weight: bold;
  margin-left: 0.5em;
  border-style: solid;
  border-width:1px;
  border-color:#eee;
  background: #fcfcfc;
}

.user-team-list li, .team-member-list li {
  margin-bottom: 0.5em;
}

.user-label {
  font-weight: bold;
}


.centered-column {
  max-width: 42em;
  margin: auto;
}

.team-info, .user-info {
  padding-right: 3em;
}

#bio-textarea {
  width: 100%;
  height: 12em;
  margin-bottom:0.25em;
}

#character-caption {
  font-size: small;
}

#over-maximum-warning {
  color: red;
}

.team-textarea {
  height: 10em;
}

.login-form-input {
  max-width: 30em;
}


.thing-data-file-list {
  line-height:1.5em;
}

.thing-data-file-name, .thing-data-file-credit {
  font-size:85%;
}


.thing-data-urls-table {
  font-size:small;
}

.thing-data-urls-table-tag {
  padding-right:1em;
}

.thing-data-urls-table-link {
  padding-right:0.5em;
}

.thing-data {
  margin-bottom:1em;
}

.thing-data-list li > * {
  vertical-align:baseline;
}

.thing-data-list-item {
  // Leave room for buttons
  line-height:2em;
  margin-bottom:0.5em;
}

// Tweak alignment from FontAwesome defaults
.thing-data-icon {
  top:0.5em !important;
}

.source-licenses {
  margin-top:1em;
  font-size:small;
  color:#666;
}

.review-url {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display:block;
}

.review-text {
  clear:right;
}

.pure-g [class *="pure-u"] {
  font-family: "Noto Sans", sans-serif;
}

.team-header {
  margin-bottom:0;
}
.team-motto {
  font-style: italic;
}

.join-textarea-container {
  margin-right:0.5em;
}

.join-textarea {
  width:100%;
  height:6em;
}

.team-rules {
  padding: 0.5em;
  padding-left: 1em;
  margin: 20px 0;
  border-left-style:solid;
  border-left-width: 5px;
  border-left-color: #66a;
}

.team-list {
  max-width: 42em;
}

.blog-post-textarea {
  height: 15em;
}

.reject-request-textarea {
  width: 30em;
  height: 6em;
}

summary.content-warning-notice {
  font-weight: bold;
  cursor: pointer;
}

div.dangerous-content {
  margin-left: 1em;
  display: none;
}

// Override standard caret, since it's not supported by all
// browsers so we have to add our own anyway
summary.content-warning-notice::-webkit-details-marker, #review-form-details-summary::-webkit-details-marker {
    display: none;
}

summary.content-warning-notice, #review-form-details-summary {
  display: inline; // Shrinks focus border on click
}

details.content-warning summary.content-warning-notice:before, #review-form-details #review-form-details-summary:before {
  content: '\f0da';
  font-family: 'FontAwesome';
  padding-right: 5px;
}

details.content-warning[open] summary.content-warning-notice:before, #review-form-details[open] #review-form-details-summary:before {
  content: '\f0d7';
  font-family: 'FontAwesome';
  padding-right: 5px;
}

#review-form-details-summary {
  cursor: pointer;
}

.indented-control-group {
  margin-left: 2em;
}

.placeholder-width {
  min-width: 100%;
}

#upload-label, #upload-input, #start-upload, #start-upload-nojs {
  font-size: small;
}

#upload-input {
  margin-bottom:0.5em;
}

#file-name-container {
  margin-top:0.5em;
  font-size:small;
}

.upload-list {
  margin:0;
  padding-left:1.5em;
}

.uploads {
  margin-top:1em;
  font-size:90%;
}

.team-info img {
  max-width: 100%;
}

.review-text img, #preview-review-text img, .rte-container img, .blog-post-text img {
  max-width: 95%;
  display:block;
  margin-left:auto;
  margin-right:auto;
}

.file-preview img, .file-preview video, .file-preview audio {
  max-width:400px; // Bakckwards compatibility
  max-width:40vw;
  max-height:40vh;
  display:block;
}

// Fill column in file feeds
.file-table .file-preview img, .file-preview video, .file-preview audio {
  max-width:100%;
  max-height:100%;
}

.html5-video-player, .html5-audio-player,
.html5-video-player-in-editor, .html5-audio-player-in-editor {
  max-width: 95%;
  display:block;
  margin-left:auto;
  margin-right:auto;
}

.html5-audio-player-in-editor {
  min-width: 400px; // Firefox otherwise collapses the element for no good reason
}

 .user-info img {
   max-width: 100%;
 }


// For markdown captions, we swallow single linebreaks after images, and style
// any text in bold or italic that follows as a caption.
.review-text img + br, #preview-review-text img + br, .rte-container img + br {
  display:none;
}

.review-text img + br + em, #preview-review-text img + br + em, .rte-container img + br + em,
.review-text img + br + strong, #preview-review-text img + br + strong, .rte-container img + br + strong
 {
  font-size:95%;
  color:#333;
  display:block;
  margin:0.5em 2.5% 0 2.5%;
  padding-bottom:0.5em;
  border-width:0 0 2px 0;
  border-style:solid;
  border-color:#ccc;
}

.invite-link {
  font-family: monospace;
  text-overflow: ellipsis;
}

.expand-container {
  text-align:center;
}

.expand-label {
  margin-right: 0.5em;
}

.expand-link {
  cursor:pointer;
}

.expand-link-main-page {
  padding: 3px;
  color:#414042;
}

.blog-table {
 border:0;
}

.blog-table td {
  padding-right:0.5em;
  padding-bottom:0.3em;
}

.blog-table tr {
  vertical-align:top;
}

.review-metrics {
  margin-top:2em;
}

.usage-list {
  list-style:none;
  padding:0;
  margin:0;
}

.file-table-row {
  display:flex;
  flex-direction:row;
  flex-grow:0;
  width:100%;
  flex-wrap:wrap;
  padding-bottom:0.3em;
}

.file-table-label {
  font-weight:bold;
  min-width:10em;
}

.file-table-value {
  padding-left:1em;
  flex-grow:1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-table-name {
  font-weight:bold;
  padding-bottom:0.3em;
}

.file-table-delete {
  font-size:small;
  padding-bottom:0.3em;
}

.file-table-file {
  padding-bottom:1.5em;
}

#review-form-details-teams, #review-form-details-social-image {
  padding-left:1em;
  padding-top:1em;
}

#social-media-image-select {
  height: 2.5em;
}



// ------------- End content styles --------------------------------------------
// ------------- Begin tooltip styles ------------------------------------------
/**
 * PowerTip
 * https://stevenbenner.github.io/jquery-powertip/
 *
 * Stylesheet for the monochrome (default) theme.
 */

#powerTip a {
  color:#ccc;
}

#powerTip {
	cursor: default;
	background-color: #333;
	background-color: rgba(0, 0, 0, 0.8);
	border-radius: 6px;
	color: #fff;
	display: none;
	padding: 10px;
	position: absolute;
	white-space: nowrap;
	z-index: 2147483647;
}
#powerTip:before {
	content: "";
	position: absolute;
}
#powerTip.n:before, #powerTip.s:before {
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
	left: 50%;
	margin-left: -5px;
}
#powerTip.e:before, #powerTip.w:before {
	border-bottom: 5px solid transparent;
	border-top: 5px solid transparent;
	margin-top: -5px;
	top: 50%;
}
#powerTip.n:before {
	border-top: 10px solid #333;
	border-top: 10px solid rgba(0, 0, 0, 0.8);
	bottom: -10px;
}
#powerTip.e:before {
	border-right: 10px solid #333;
	border-right: 10px solid rgba(0, 0, 0, 0.8);
	left: -10px;
}
#powerTip.s:before {
	border-bottom: 10px solid #333;
	border-bottom: 10px solid rgba(0, 0, 0, 0.8);
	top: -10px;
}
#powerTip.w:before {
	border-left: 10px solid #333;
	border-left: 10px solid rgba(0, 0, 0, 0.8);
	right: -10px;
}
#powerTip.ne:before, #powerTip.se:before {
	border-right: 10px solid transparent;
	border-left: 0;
	left: 10px;
}
#powerTip.nw:before, #powerTip.sw:before {
	border-left: 10px solid transparent;
	border-right: 0;
	right: 10px;
}
#powerTip.ne:before, #powerTip.nw:before {
	border-top: 10px solid #333;
	border-top: 10px solid rgba(0, 0, 0, 0.8);
	bottom: -10px;
}
#powerTip.se:before, #powerTip.sw:before {
	border-bottom: 10px solid #333;
	border-bottom: 10px solid rgba(0, 0, 0, 0.8);
	top: -10px;
}
#powerTip.nw-alt:before, #powerTip.ne-alt:before,
#powerTip.sw-alt:before, #powerTip.se-alt:before {
	border-top: 10px solid #333;
	border-top: 10px solid rgba(0, 0, 0, 0.8);
	bottom: -10px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	left: 10px;
}
#powerTip.ne-alt:before {
	left: auto;
	right: 10px;
}
#powerTip.sw-alt:before, #powerTip.se-alt:before {
	border-top: none;
	border-bottom: 10px solid #333;
	border-bottom: 10px solid rgba(0, 0, 0, 0.8);
	bottom: auto;
	top: -10px;
}
#powerTip.se-alt:before {
	left: auto;
	right: 10px;
}

// ------------- End tooltip styles --------------------------------------------
// ------------- Begin editor styles -------------------------------------------

// Container height is obtained from textarea via JS
.rte-container {
  width:inherit;
  margin-bottom:0.25em;
  // Standard pure form styles
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 3px #ddd;
  border-radius: 4px;
  box-sizing: border-box;
  display:block;
  position:relative;
}

.ProseMirror-menubar-wrapper {
  display:block;
  border-radius:inherit;
}

.rte-focused {
    // Standard pure form styles, applied via JS to cover whole editor
    border-color: #129FEA;
}

.ProseMirror {
  background:#fff;
  overflow:auto;
  padding-left:1em;
  padding-right:1em;
  border-radius:inherit;
}

.ProseMirror-menubar {
  margin-right:0.5em;
  margin-left:0.5em;
  padding-left:0;
  padding-top:8px;
  padding-bottom:8px;
  border-color:#f0f0f0;
  color:#333;
}

.ProseMirror:focus {
  outline:none;
}

.ProseMirror-prompt {
  background: white;
  padding: 5px 10px 5px 15px;
  border: 1px solid silver;
  position: absolute;
  border-radius: 3px;
  z-index:@editorPromptZIndex;
  box-shadow: -.5px 2px 5px rgba(0, 0, 0, .2);
}

.ProseMirror-prompt h5 {
  margin: 0;
  font-weight: normal;
  font-size: 100%;
  color: #444;
}

.ProseMirror-prompt input[type="text"],
.ProseMirror-prompt textarea {
  background: #eee;
  border: none;
  outline: none;
}

.ProseMirror-prompt input[type="text"] {
  padding: 0 4px;
}

.ProseMirror-prompt-close {
  position: absolute;
  left: 2px; top: 1px;
  color: #666;
  border: none; background: transparent; padding: 0;
}

.ProseMirror-prompt-close:after {
  content: "✕";
  font-size: 12px;
}

.ProseMirror-invalid {
  background: #ffc;
  border: 1px solid #cc7;
  border-radius: 4px;
  padding: 5px 10px;
  position: absolute;
  min-width: 10em;
}

.ProseMirror-prompt-buttons {
  margin-top: 5px;
}

.switcher-control {
  text-transform:uppercase;
  font-size:small;
  font-family:sans-serif;
  display:inline-block;
  margin-bottom:0.5em;
}

.switcher-option {
  margin-right:-1px;
  padding:10px;
  display:inline-block;
  user-select:none;
  -moz-user-select:none;
}

.switcher-control .switcher-option-selected {
  border-style:solid;
  border-width:1px;
  background:#fff;
  border-color:#ddd;
  font-weight:bold;
  cursor:default;
}

.switcher-control .switcher-option-selectable {
  border-style:solid;
  border-width:1px;
  background:#f0f0f0;
  color:#333;
  border-color:#ddd;
  cursor:pointer;
}

#source-selector {
  margin-top:1em;
  display:inline;
}

#source-selector select {
  display:inline;
  height:inherit;
  font-size:small;
}

.switcher-pin {
  cursor:pointer;
  font-size:120% !important;
}

.switcher-pinned {
  color:#3a3;
}

.switcher-unpinned {
  color:#aaa;
}

.switcher-working {
  pointer-events:none;
  color:#aaa !important;
  cursor:default;
}

.switcher-unpinned:hover {
  color:#333;
}

.ProseMirror-menu-dropdown, .ProseMirror-menu-dropdown-item, .ProseMirror-prompt {
  font-family:sans-serif;
}

// For styling the editor as disabled when dialogs are opened

.ProseMirror-disabled {
  background:#eee;
  cursor: not-allowed;
  pointer-events:none;
  user-select:none;
  -moz-user-select:none;
}

.ProseMirror-menubar-disabled {
  color:#ccc;
  cursor: not-allowed;
  pointer-events:none;
  user-select:none;
  -moz-user-select:none;
}

// For full screen mode we don't remove any of the old styles, hence the use
// of !important.
.rte-container-full-screen {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100% !important;
  background:white;
  z-index:@editorZIndex;
}

.ProseMirror-full-screen {
  margin-left:auto !important;
  margin-right:auto !important;
  padding-right:1em;
  max-width:46em;
}

div.dangerous-content-in-editor {
  padding-left:1em;
  border-left-width:2px;
  border-left-color:#aa0000;
  border-left-style:solid;
}

// To baseline "upload" icon in editor with text
.baselined-icon {
  vertical-align:baseline !important;
}

// ------------- End editor styles ---------------------------------------------
// ------------- Begin modal dialog styles -------------------------------------

.blocker {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%;
  overflow: auto;
  z-index: @modalBlockerZIndex;
  padding: 20px;
  box-sizing: border-box;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.75);
  text-align: center;
}
.blocker:before{
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.05em;
}
.blocker.behind {
  background-color: transparent;
}
.modal {
  display: none;
  vertical-align: middle;
  position: relative;
  z-index: @modalZIndex;
  max-width: 500px;
  box-sizing: border-box;
  width: 90%;
  background: #fff;
  padding: 15px 30px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -o-border-radius: 8px;
  -ms-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: 0 0 10px #000;
  -moz-box-shadow: 0 0 10px #000;
  -o-box-shadow: 0 0 10px #000;
  -ms-box-shadow: 0 0 10px #000;
  box-shadow: 0 0 10px #000;
  text-align: left;
}

.modal a.close-modal {
  position: absolute;
  top: -12.5px;
  right: -12.5px;
  display: block;
  width: 30px;
  height: 30px;
  text-indent: -9999px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==');

}

.modal-spinner {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  padding: 12px 16px;
  border-radius: 5px;
  background-color: #111;
  height: 20px;
}

.modal-spinner > div {
  border-radius: 100px;
  background-color: #fff;
  height: 20px;
  width: 2px;
  margin: 0 1px;
  display: inline-block;

  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.modal-spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.modal-spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.modal-spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.5) }
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

#upload-modal {
  max-width: 600px;
}

#upload-modal h3 {
  color: @headerColor
}

.upload-modal-buttondiv {
  text-align:center;
}
.upload-modal-error {
  margin-bottom:0.5em;
}

#upload-modal select {
  height:auto;
}

#upload-modal-cancel-metadata {
  cursor: pointer;
}

#upload-modal-metadata-info td {
  font-size:small;
  padding:5px 5px 5px 2px;
}

#upload-modal-spinner {
  margin-left:0.5em;
}


.input-row {
  vertical-align: top;
}
.input-row td {
  padding:5px;
}

// ------------- End modal dialog styles ---------------------------------------
// ------------- Begin footer --------------------------------------------------

#footer {
  font-size:small;
  text-align:center;
  padding-top:1em;
  background: #fafafa;
  border-width: 1px;
  border-color: #f2f2f2 ;
  border-top-style:solid;
}

#footer-links, #languages {
  margin-bottom:1em;
  margin-top: 0.5em;
}

#change-language-container {
  line-height:3em;
}

#current-language-container {
  line-height: 2em;
}

// ------------- End footer ----------------------------------------------------
