/* General */

html, body{
    height: 100%;
}

html, body{
    padding: 0px;
}

@media (min-width: 980px) {
  footer {
    margin-top: 20px;
  }
}

.page-holder{
  	/* See https://stackoverflow.com/questions/8824831/make-div-stay-at-bottom-of-pages-content-all-the-time-even-when-there-are-scrol/8825714#8825714 */
    min-height: 100%;
    position:relative;
}

.page-content{
    padding-bottom: 100px;    /* should cover the height of the footer */
}

.clr {
	clear: both;
}
.left {
	float: left;
}
.right {
	float: right;
}

a {
    color: #006699;
}

@media (max-width: 479px) {
    .show-on-desktop, .show-on-tablets, .hide-on-mobile { display: none; }
}
@media (min-width: 480px) and (max-width: 979px) {
    .show-on-desktop, .hide-on-tablets, .show-on-mobile { display: none; }
}
@media (min-width: 980px) {
    .hide-on-desktop, .show-on-tablets, .show-on-mobile { display: none; }
}

legend {
	margin-bottom: 4px;
}

.badge a {
  color: white;
}
.badge a.visited {
  color: white;
}

.badge-larger {
	font-size: 16px;
	padding-top: 3px;
	padding-bottom: 3px;
	margin-top: 5px;
}

.badge-lang {
	background-color: #0044cc;
}

li[aria-selected=false] .badge-lang {
	/* Non-active tabs shall be shown different: dim. */
	background-color: #275ecc;
}

.badge-fav-lang {
	background-color: #468847;
	text-shadow: 1px 1px 1px #333;
}

.badge-non-fav-lang {
	background-color: #666666;
	text-shadow: 1px 1px 1px #333;
}

.selected-impl.badge-lang.badge-non-fav-lang {
	/* Resolve conflict against badge-non-fav-lang */
	background-color: #0044cc;
}

.favorite-language {
	background-color: #008d02;  /* Something brighter than badge-success */
}

.sortable-lang li:hover {
    cursor: grab;
}

.sortable-lang li.ui-sortable-helper{
    cursor: grabbing;
}

.label-larger {
	font-size: 14px;
	margin-top: 4px;
}
.voting button {
  font-weight: bolder;
}

img.highlightable:hover {
    filter: contrast(1.5) brightness(1.3);
}

/* Header */
header.compact{
	margin-bottom: 10px;
}

.header_picto {
  float: left;
}

.header h1 {
/*
	float: left;
	margin-top: 0px;
*/
}

.header .slogan {
    float: left;
	margin-top: -4px;
	color: #aaa;
}

header .form-search {
  float: right;
  margin: 0;
}
.form-search button[type=submit] {
	/* Text search */
	padding-top: 4px;
	padding-bottom: 4px;
}
.actions-dropdown {
  /* float: right; */
  padding-right: 8px;
}
.greetings{
	color: #bbbbbb;
	margin-bottom: 0;
}

.compact .navbar .nav>li {
	padding-top: 6px;
	padding-left: 18px;
}

.compact .navbar .nav>li>a {
	padding: 0px;
}

h3 a {
	/* See #95 */
	color: inherit;
}

/* Blue background, white text */
.header .navbar,.header-small .navbar{
	margin-bottom: 2px;
}
.header .navbar-inner,.header-small .navbar-inner{
	background-color: inherit;
	background-image: none;
	
	border-width: 0px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}
.header,.header-small {
	color: white;
}
.header a,.header-small a {
	color: white;
}

.header-small .navbar .nav>li>a {
	padding: 0px;
}

.actions-dropdown a {
	color: black;
}

.blue-to-white{
	height: 3px;
	background-color: #00D;
	background-image: linear-gradient(to bottom, #3333dd, #ffffff);
}

button.remove-nickname {
	background: none;
	border: none;
	padding-top: 0.2em;
	padding-left: 0;
	color: #bbbbbb;
}

a.go-to-admin {
	border: 1px solid white;
	margin: 0.5em;
}

/* Header small */
.header-small {
	margin: 0px 0px 12px 0px;
	padding: 0px;
}

.header-small img {
	margin: 3px 3px 3px 3px;
}

.header-small h1 {
	font-size: 24px;
	overflow-x : hidden;
	margin: 0px;
}

.header-small .slogan {
	margin-top: -4px;
	color: #aaa;
}

.header-small .navbar-inner {
	padding-left: 8px;
}

.header-small .nav>li {
	padding-top: 6px;
	padding-left: 18px;
	padding-right: 0px;
}

/* Header for print-friendly pages */

.header-print {
	margin: 0px 0px 10px 0px;
	padding: 0px;
	padding-bottom: 4px;
	min-height: 2rem;
}

header.header-print h1 {
	line-height: 25px;
	font-size: 20px;
	margin-left: 0.2rem;
}

header.header-print h1 > a {
	font-size: 20px;
	overflow-x : hidden;
	margin: 0px;
	line-height: normal;
}

.header-print .slogan {
	margin-top: 2px;
	color: #557;
	font-style: italic;
}

.header-print .navbar {
    margin-bottom: 0px;
}

.header-print .navbar-inner {
	padding-left: 8px;
	padding-right: 8px;
}

.header-print .navbar .nav {
	margin-right: 0;
}

.header-print .nav>li {
	padding-top: 6px;
	padding-left: 8px;
	padding-right: 2px;
}


.header-print .navbar .nav>li>a {
	padding: 0px;
}

/* Messages zone */

.message-zone {
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 10px;
}

.message-zone .pimessage {
	margin-top: 0.6em;
	padding-left: 20px;
	border-radius: 4px;
}

/* Idiom horizontal summary bar */

.language-list {
	display: block;
	padding : 6px;
}

.language-list .actions button{
	width: 36px;
}


.language-list ul {
  /*margin-top: -10px;*/

}
.language-list li {
  float: left;
  list-style: none;
  margin-right: 2px;
}

.language-bar-hint {
	color: #555;
	font-weight: bolder;
}

.language-list ul.favorite-languages{
	margin-left: 0px;
}


button.favorite-language-remove {
	background: none;
	border: none;
	margin-left: 0.5em;
	padding: 0;
	color: #ffffff;
	font-size: inherit;
}

.medium .badge {
  font-size: medium;
  padding-top: 4px;
  padding-bottom: 4px;
  margin-top: 2px;
}
.language-list li.active {
  /* background-image: url("../img/language_picto_green_48x48.png") */

}
.language-list li.inactive {
  /* background-image: url("../img/language_picto_grey_48x48.png") */

}

.span12.addible-languages-pool {
	display: none;
}

.addible-languages-pool {
	margin-top: 0.5em;
}

.addible-languages-pool li {
	margin-top: 0.5em;
}

.addible-languages-pool li:last-child {
	margin-left: 0.5em;
}

/* Right column */
.right_column, .right_column a:link, .right_column a:visited {
	color: #666;
}
.right_column h3{
	margin-bottom: 0px;
}

.right_column label {
	margin-bottom: 0;
	font-weight: bold;
	font-size: 16px;
}

.right_column > div {
	margin-bottom: 1em;
}

.right_column ul {
	margin-left: 0.6em;
	list-style-type: none;
}

.related-idioms li {
	margin-bottom: 0.4em;
}

.prev-next-nav {
	font-weight: bold;
}
.prev-next-nav a {
	margin-right: 0.8em;
}
.prev-next-nav a:hover {
	text-decoration: none;
}
.prev-next-nav .show-keyboard-shortcuts {
	font-weight: normal;
}

.right_column #relation-form h4 {
	margin-top: 3em;
}

.right_column #relation-form label {
	font-weight: normal;
}

.right_column #relation-form .control-group {
	margin-bottom: 0;
}

/* Idiom navigation lists */

.idioms_nav_list h2,.idioms_nav_list h3 {
	margin-top: -10px;
}

/* Homepage column lists */
.idiom-summary-small {
  background-color: #F7FFFF;
}
.idiom-summary-small .idiom_id {
  float: left;
  background-color: #799cad;
  margin-right: 3px;
  font-weight: bolder;
  padding-right: 6px;
}
.idiom-summary-small .small-rating {
  float: left;
}
.idiom-summary-small .idiom_title {
  float: left;
  padding-left: 5px;
  font-weight: bold;
}
.idiom-summary-small .idiom_cover .count {
  float: right;
}
.idiom-summary-small .idiom_cover .full {
  float: right;
  display: none;
}
/* Result list */

.idiom-summary-medium h1 {
	font-size: 16px;
	line-height: 20px;
	margin: 0 0 8px 0;
}

.idiom-summary-medium h1 a{
	color: #006699;
}
.idiom-summary-medium {
  background-color: #F7FFFF;
}
.idiom-summary-medium .idiom_id {
  float: left;
  font-weight: bolder;
  padding-right: 6px;
}
.idiom-summary-medium .idiom_title {
  float: left;
  font-weight: bold;
}
.idiom-summary-medium .language-list {
  float: left;
  padding-left: 10px;
}

.matching {
	background-color: #EE5;
	/*
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #DD5;
	*/
	border-radius: 9px;
}

.searched-lang {
	background-color: #EA3;
	/*
	border-width: 1px 5px 1px 5px;
	border-style: solid;
	border-color: #F77;
	*/
	border-radius: 9px;
}

/* Idiom detail */
.idiom-summary-large h1 {
	font-size: 16px;
	line-height: 20px;
	margin: 0 0 8px 0;
}

.idiom-summary-large h1 a{
	color: #006699;
}
.idiom-summary-large {
  background-color: #F7FFFF;
}
.idiom-summary-large .idiom_id {
  float: left;
  font-weight: bolder;
  padding-right: 6px;
}
.idiom-summary-large .idiom_title {
  float: left;
  font-weight: bold;
}
.idiom-summary-large .idiom-picture img{
  max-height: 160px;
  object-fit: scale-down;
}
.idiom-summary-large ul.idiom-related-urls {
	margin-top: 2em;
	list-style-type: none;
	margin-left: 0.4em;
}
.idiom-summary-large a.related-url-link {
	margin-left: 0.2em;
}
.idiom-summary-large .language-list {
  float: left;
  padding-left: 10px;
}
.variable {
	font-weight: bold;
	font-style: italic;
}

.new-impl-invitation label {
	font-weight: bold;
}

/* Modal nickname popin */
.form-nickname {
	margin: 0;
}

/* Cookies & Profile box */
.profile-box dl {
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 2px;
	width: 60%;
	border: solid 1px #DDD;
	border-radius: 4px;
}

.profile-box dt button {
	float: right;
}

.profile-url {
	width: 80%;
	margin-right: 0.6rem;
}

.profile-take-away a.copy-url-clipboard {
	vertical-align: text-bottom;
	font-size: large;
}

/* Tabbed implementations in Idiom Detail */

ul.nav.nav-tabs.language-names {
	margin-bottom: 8px;
}

li > a.lang-tab {
	padding : 4px 6px 4px 6px;
}

.implementations-tabs .fouc {
	/* To avoid FOUC, hide this mess until jQuery tabs() has done its job! */
	display: none;
}

/* Import statements (boring) are greyed out */

.piimports pre {
	margin: 0;
	padding: 0;
	border: 1px solid #777;
	border-bottom: 0px;
}

.piimports pre > code,
.piimports pre > code.hljs {
	color: #444;
	/* border-bottom: 0px; */
    /* border-color: #D7D7D7; */
	margin-bottom: 0px;
    padding-top: 0.3em;
    padding-bottom: 0.4em;
    font-size: 16px;
}

/* Code zone (read-only, pretty-printed) */

.picode {
	margin: 0;
	padding: 0;
	margin-top: -3px;
}

.picode pre {
	margin: 0;
	padding: 0;
	border: 1px solid #777;
	min-width: 28em;
}

.picode pre > code {
    padding: 4px 4px 10px 15px;
    border-color: #AAA;
    /*
    width: auto;
    overflow-x: scroll;
    */
    /* margin-bottom: 1px; */

    font-size: 16px;
    font-weight: bold;
}


.implementation .copy-imports-to-clipboard {
    margin-top: -24px;
	margin-right: 7px;
	visibility: hidden;
}

.implementation .copy-imports-to-clipboard a {
	color: #888;
	text-decoration: none;
}

.implementation .piimports:hover .copy-imports-to-clipboard {
	visibility: visible;
}

.implementation .piimports.just-copied-to-clipboard pre {
	/* The user has clicked the "Copy imports to the clipboard" button. */
	background-color: #DED;
	border: 2px solid #7A7;
}

.implementation .piimports.just-copied-to-clipboard a {
	/* The user has clicked the "Copy imports to the clipboard" button. */
	color: #282;
	visibility: visible;
}


.nav > li > a.copy-code-to-clipboard {
	margin-right: 6px;
}

.implementation.just-copied-to-clipboard .picode pre {
	/* The user has clicked the "Copy snippet to the clipboard" button. */
	background-color: #DED;
	border: 2px solid #7A7;
}

.implementation.just-copied-to-clipboard .impl-external-links .nav-tabs>.active>a.copy-code-to-clipboard {
	/* The user has clicked the "Copy snippet to the clipboard" button. */
	margin-top: -2px;
	color: #282;
	background-color: #DED;
	border: 2px solid #7A7;
	border-top: 2px solid #DED;
	outline:none !important;
}

/* Code zone (in forms) */
textarea.impl-code{
	font-family: monospace;
}

/* Code zone (in forms) (2016-10: admins only) */
.impl-picture img{
  max-height: 500px;
}

/* Demo link, Origin link */
.impl-external-links{
	margin-bottom: 14px;
}

.impl-external-links.tabs-below > .nav-tabs {
	border-top: 0px;
}

.impl-external-links.tabs-below > .nav-tabs > .active > a {
	border-color: transparent #777 #777 #777;
}

.impl-external-links a{
	margin-right: 8px;
}

.impl-external-links .nav-tabs > .active > a:hover{
    font-weight:bolder;
    cursor: pointer;
}

.btn.btn-edit,
.btn.btn-flag-impl,
.btn.show-impl-grid,
.btn.btn-delete {
	width: 1.5em;
	margin-bottom: 4px;
}

/* Impl grid */

.modal-impl-grid {
	width: 1400px;
	margin-left: -700px;
	max-height: 80%;
	overflow-y:auto;
}

.impl-grid {
	margin: 0px;
	padding-top: 15px;
	padding-left: 0px;
	padding-right: 0px;
}

.row-fluid .impl-cell {
	min-height: 130px;
	margin-left: 1.418%;
}
.row-fluid .impl-cell .nav-tabs {
	margin-bottom: -1px;
	border-bottom: none;
}
.row-fluid .impl-cell .nav-tabs a {
	background-color: #F5F5F5;
}
.row-fluid .impl-cell pre {
	margin-top: -0.7em;
	border-radius: 0px 4px 4px 4px;
}

/* Create/Edit forms */

.form-horizontal .idiom_title {
	padding-left: 3px;
	font-weight: bold;
}
.form-horizontal .idiom_title a:link{
	color: #555;
}

.modal-idiom-preview, .modal-impl-preview {
	width: 850px;
	margin-left: -425px
}

.idiom-preview, .impl-preview {
	padding-left: 10px;
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	margin-right: 10px;
}

.help-inline.under-the-value {
	display: block;
}

/* Contribution rules bla bla bla */
.contribution-rules-small {
  color: #555555;
}

.impl-edit-rules a {
	color: #8c6f3c;
}

/* Footer */
footer {
  color: #555555;
  /*margin-top : 10px;*/

  /* See https://stackoverflow.com/questions/8824831/make-div-stay-at-bottom-of-pages-content-all-the-time-even-when-there-are-scrol/8825714#8825714 */  
  /*height: 100px;*/ 
  width:100%;
  position: absolute;
  left: 0;
  bottom: 0; 
}
footer .well{
	margin-bottom: 0px;
}
footer a {
  color: #555555;
  text-decoration: underline;
}
footer a.visited {
  color: #555555;
}
.powered-by {
  float: right;
  font-size: smaller;
  color: #888888;
}
.powered-by a {
  color: #888888;
}
.powered-by a.visited {
  color: #888888;
}
.about-link {
	padding-left: 20px;
	text-decoration: none;
	float: right;
}


/* All idioms list */
.key {     
	font-weight: bold;
	padding: 0.1em 0.6em;
    border: 1px solid #CCC;
    font-size: 11px;
    font-family: Arial,Helvetica,sans-serif;
    background-color: #F7F7F7;
    color: #333;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 2px #FFF inset;
    border-radius: 3px;
    display: inline-block;
    margin: 0px 0.1em;
    text-shadow: 0px 1px 0px #FFF;
    line-height: 1.4;
    white-space: nowrap;
}

.all-idioms {
	margin-bottom: 10px;
}

.all-idioms td {
	padding-left: 6px;
	padding-right: 6px;
}
.all-idioms .badge {
	margin-left: 5px;
}

/* Deprecated
.all-idioms .idiom-cell {
	margin-left: 0px;
	margin-bottom: 5px;
	padding-left: 8px;
}

.all-idioms .idiom-cell .impl-count {
	color: #777;
	font-size: -1;
}

.all-idioms .idiom-cell a.btn {
	text-align: left;
	padding-left: 8px;
	padding-right: 5px;
	margin: 3px;
}
*/

.all-idioms ul {
	margin-top: 1rem;
}

.all-idioms li {
	list-style-type: none;
	margin-bottom: 0.3rem;
}

.all-idioms .idiom_id {
	min-width: 1.8rem;
	text-align: right;
	margin-right: 0.3rem;
}

/* About : language coverage */

.language-coverage th {
	padding-left: 3px;
	padding-right: 3px;	
	width: 2.0em;
	overflow-x: visible;
	vertical-align: bottom;
}

.language-coverage th[data-lang] span {
	font-size: 20px;
	color: white;
	padding: 0.1em;
	border-radius: 6px;
	background-color: #0088cc;
	padding-bottom: 0.3em;
	padding-top: 0.3em;

	/* From https://stackoverflow.com/questions/15806925/how-to-rotate-text-left-90-degree-and-cell-size-is-adjusted-according-to-text-in */
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
}

.language-coverage th[data-lang].coverage-fav-lang span {
	background-color: #468847;
}

.language-coverage th.idiom-title{
	min-width: 300px;
	text-align: left;
	/*
    background-image: url("/v1/img/blue_dot_t.png");
    background-repeat: repeat-x;
    */
}

.language-coverage th.idiom-title>a{
	/*
    background-color: white;
    */
}

.language-coverage td {
	padding-left: 3px;
	padding-right: 3px;	
	text-align: center;
}

.language-coverage tr.highlight {
	background-color: #FFD;
}

.language-coverage .highlight {
	/* For the current column */
	background-color: #FFD;
}

.language-coverage .hover {
	background-color: #2F2;
}

.language-coverage .hover {
	background-color: #770;
}

.language-coverage col.highlight {
	background-color: #FFD;
}

.coverage-fav-lang {
	color: #468847;
}

.language-coverage th.fold-unfold {
	/*
	background-color: #DDF;
	*/
}

.language-coverage td.fold-unfold {
	/*
	background-color: #EEF;
	*/
}

.language-coverage .fold-unfold:hover {
    cursor: pointer;
}

/* About : cheatsheets */

.pi-cheatsheets li {
	padding-bottom: 6px;
}

.two-languages-select .language-single-select {
	/* width: 6em; */
}

.list-external-sites li{
	margin-bottom: 20px;
}

/* */

.toggles-list {
	height: 500px;
	overflow-y : scroll;
}

/* Messenger */

.message-zone .user-messages {
}

.message-zone .user-messages .user-message {
}

/* History */

.idiom-history form {
	margin-bottom: 5px;
	display: inline-block;
}

.idiom-history td {
	padding-left: 8px;
	padding-right: 8px;
}

/* Version diff */

.version-diff .summary {
	text-align: center;
}

.version-diff .summary .bigicon {
	font-size: 48px;
	margin-top: 6px;
}

.version-diff .right {
	text-align: right;
}

.version-diff h4.version-number {
	margin-bottom: 0;
}

.version-diff .version-date {
	color: #777;
}

.version-diff .idiom-summary-large .voting,
.version-diff .idiom-summary-large .show-impl-grid,
.version-diff .idiom-summary-large .btn-edit,
.version-diff .idiom-summary-large .btn-danger {
	display: none;
}

.version-diff .lang {
	margin-top: 12px;
}

.version-diff .idiom-left .touched {
	/* background-color: #FD9; */
	padding-left: 3px;
	padding-right: 3px;
}

.version-diff .idiom-right .touched {
	/* background-color: #FC6; */
	padding-left: 3px;
	padding-right: 3px;
}

.version-diff .idiom-left .created {
	background-color: #DFD;
}

.version-diff .idiom-right .created {
	background-color: #AFA;
}

.version-diff .idiom-left .deleted {
	background-color: #FFD7D7;
}

.version-diff .idiom-right .deleted {
	background-color: #FAA;
}

.version-diff .well {
	margin-bottom: 2px;
}

.version-diff .impl-creation-true {
	background-color: #DFD;
}

.version-diff .impl-left.touched {
	/* background-color: #FD9; */
	padding-left: 3px;
	padding-right: 3px;
}

.version-diff .impl-right.touched {
	/* background-color: #FC6; */
	padding-left: 3px;
	padding-right: 3px;
}

.version-diff .impl-left.created {
	background-color: #DFD;
	padding-left: 3px;
	padding-right: 3px;
}

.version-diff .impl-right.created {
	background-color: #AFA;
	padding-left: 3px;
	padding-right: 3px;
    padding-bottom: 0.3em;
}

.version-diff .impl-left.deleted {
	background-color: #FFD7D7;
	padding-left: 3px;
	padding-right: 3px;
    padding-bottom: 0.3em;
}

.version-diff .impl-right.deleted {
	background-color: #FAA;
	padding-left: 3px;
	padding-right: 3px;
}

.version-diff pre {
	margin-top: 6px;
	max-width: 90%;
}

.version-diff .diff-code-comments {
	max-width: 80%;
	margin-left: 10%;
	padding: 6px;
	border: 1px solid #777;
	border-radius: 5px;
	background-color: white;
	margin-bottom: 3px;
}

.version-diff .field-value {
	margin-left: 10%;
	padding: 3px;
	border: 1px solid #BBB;
	border-radius: 2px;
	background-color: white;
}

.version-diff a.goto-impl span {
	cursor: pointer;
}

.version-diff h5 > a {
	margin-left: 0.4em;
	color: #355;
}

.diff-nav {
	margin-top: 1.5rem;
}

.diff-nav .next {
	text-align: right;
}

a.history-copy-imports-to-clipboard,
a.history-copy-code-to-clipboard,
a.history-copy-comments-to-clipboard {
	text-decoration: none;
}

/* Missing fields list */

.idioms-missing-fields td.mark {
	text-align: center;
	font-size: 22px;
	padding-left: 4px;
	padding-right: 4px;
}

.idioms-missing-fields td.mark>a {
	font-size: 22px;
}


.code-fade {
	color: #777;
	padding-left: 12px;
}

/* Individual cheatsheet (and base for multi) */

.page-cheatsheet h2 {
	margin-top: 5px;
}

.page-cheatsheet .actions-dropdown {
	display:none;
}

.page-cheatsheet .dice {
	display:none;
}

.page-cheatsheet .form-search {
	display:none;
}
.page-cheatsheet .guidance {
	float: right;
	margin-right: 4em;
	color: #777;
	font-weight: bold;
}

.page-cheatsheet .guidance li {
	list-style: none;
}

.page-cheatsheet .license-on-print{
    display: none;
	float: right;
	color: #666;
}
.page-cheatsheet .license-on-print p {
	margin: 0;
}

.page-cheatsheet .filters {
	float: right;
	margin-bottom: 15px;
}

.page-cheatsheet .filters button,
.page-cheatsheet .filters label,
.page-cheatsheet .filters #filter {
	margin-left: 12px;
}

.cheatsheet-lines {
	clear: both;
}

.cheatsheet-lines th, .cheatsheet-lines td {
  vertical-align: top;
}

.page-cheatsheet .idiom-title {
	font-weight: bold;
}

.page-cheatsheet .impl-code {
	width: 60%;
}

.page-cheatsheet .dotted {
	border-top: dotted 1px #CCC;
}

.page-cheatsheet .piimports {
	padding: 0px;
}

.page-cheatsheet .piimports pre {
	font-size: 13px;
	padding: 4px;
    border-radius: 0px;
}

.page-cheatsheet .picode pre {
	margin-top: 2px;
	margin-bottom: 0px;
	padding: 4px;
}

.page-cheatsheet .close {
  margin-top: 8px;
  font-size: 35px;
}

/* Multiple cheatsheet */

.page-cheatsheet .alt-impl-breaker {
	margin-top: 1em;
	font-style: italic;
	font-weight: bold;
	color: #888;
}

/* 
 * CSS for printing
 */

@media print {
  .actions-dropdown, .dice, .form-search {
    display:none !important;
  }

  a[href]:after {
    content: none !important;
  }

  .language-list,
  button,
  .new-impl-invitation,
  .about-link {
    display:none !important;
  }

  .page-cheatsheet .alt-impl {
    color: #777 !important;
  }

  .page-cheatsheet .guidance{
    display: none !important;
  }

  .page-cheatsheet .license-on-print{
    display: block !important;
  }

  .page-cheatsheet .filters{
    display: none !important;
  }


  .page-cheatsheet .idiom-title-and-lead {
  	width: 33%;
  }
  .page-cheatsheet .impl-code {
  	width: 63%;
  }
  .page-cheatsheet button.close {
    display:none !important;
  }

  .page-cheatsheet .piimports pre {
    border-width: 1px !important;
	border-radius: 4px !important;
	border-bottom-left-radius: 0px !important;
	border-bottom-right-radius: 0px !important;
	color: #777 !important;
  }

  .page-cheatsheet .alt-impl-breaker {
	color: #888 !important;
  }
}

/*
  2018-09, 2020-02 Transitioning to minimalistic JS & CSS
*/

header { 
	min-height: 3.8rem;
	background-color: #448;
	color: white;
}
header > * {
	display: inline-block;
    vertical-align: middle;
    margin: 0.2rem;
}
.header_picto {
    margin-left: 0.6rem;
}
header > h1 {
    margin: 0.2rem 0.5rem 0.2rem 0.5rem;
	max-width: 75vw;
	text-shadow: 2px 2px 2px black;
}
header > h1 > a {
	color: white;
	font-size: 2rem;
}
header > h1 > a:visited {
    text-decoration: none;
	color: white;
}
header > h1 > a:hover {
    text-decoration: none;
	color: white;
}
h1 > a {
    text-decoration: none;
}
header .random {
	margin-left: 1rem;
}
header .form-search {
    float: none;
	max-width: 75vw;
	margin-top: 0.5rem;
	margin-left: 1rem;
	margin-bottom: 0.5rem;
}

header .form-search input[name=q] {
	max-width: 40vw;
}

header .greetings {
	margin-left: 1rem;
	margin-top: 0.4rem;
	margin-bottom: 0.4rem;
}
header .greetings a {
	color: #bbbbbb;
}

footer {
    position: absolute;
    left: 0;
	bottom: 0;
	width: 100%;
	min-height: 2rem;
	background-color: #448;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}
footer > * {
    vertical-align: middle;
}
footer a,
footer a:hover,
footer a:visited {
    color: white;
}
footer div {
    margin: 0.5rem 2rem 0.5rem 2rem;
}
footer img.coverage {
    width: 2rem;
    height: 2rem;
    max-width: none;
    box-shadow: 2px 2px 2px black;
}
footer .about-link {
    font-weight: bold;
    font-size: xx-large;
	text-shadow: 2px 2px 2px black;
}
footer a.about-link {
    text-decoration: none;
}

.about-central-zone {
	margin-left: 1rem;
	margin-right: 1rem;
}


@keyframes spin-jolty {
    0% {
        transform:rotate(0deg);
    }
    50% {
        transform:rotate(360deg);
    }
    100% {
        transform:rotate(360deg);
    }
}

.spinning-jolty {
	animation-duration: 0.7s; /* Fast */
	animation-name: spin-jolty;
	animation-iteration-count: infinite;
	filter: contrast(1.5) brightness(1.3);
}

.spinning-jolty2 {
	animation-duration: 2.0s; /* Slow */
	animation-name: spin-jolty;
	animation-iteration-count: infinite;
}

.about-central-zone img.throbber {
	width: 3em;
	height: 3em;
}

.need-write-enabled {
	/* 
		Some widgets to write to the database exist but are hidden by default.
		At page load, we may consider displaying them.
	*/
	visibility: hidden;
}

.keyboard-shortcuts .modal-header .keyboard-icon {
	font-weight: normal;
}

/* issues/214 <em> for emphasized words */
em {
	font-weight: bold;
	font-style: italic;
}


@media (prefers-color-scheme: dark) {
    /* Dark theme: see issues/114 */
    body {
        background-color: #003;
        color: white;
    }
    header, footer {
        background-color: #336;
    }
    a {
        color: #bbd;
    }
    input[type=text], textarea, button {
        background-color: black;
        color: white;
        border-color: #444;
    }
	a.btn, 
	button,
	button.btn-primary {
		text-shadow: 1px 1px 1px black;
	}
	.user-info-link {
		text-shadow: 1px 1px 1px #000B;
	}
	.idiom-summary-large {
	  background-color: #222244;
	}
	.well {
		border-color: #446;
	}
	.well.language-list {
		background-color: black;
	}
	.idiom-summary-large h1 {
		color: #CCC;
		text-shadow: 1px 1px 1px #000B;
	}
	.idiom-summary-large h1 a {
		color: #8BF;
		text-shadow: 2px 2px 2px black;
	}
	.nav-tabs {
		border-bottom: 1px solid #446;
	}
	.nav-tabs .active > a {
		background-color: black;
		color: #ddd;
		border-color: #446 #446 transparent #446;
	}
	.nav-tabs > .active > a,
	.nav-tabs > .active > a:focus,
	.nav-tabs .ui-state-hover .active > a,
	.nav-tabs > li > a:hover,
	.nav-tabs > li > a:focus,
	.row-fluid .impl-cell .nav-tabs a {
		background-color: black;
	}
	.popover {
		border: 1px solid #FCC9;
		background-color: #511;
		/* box-shadow: 0 5px 3px rgba(255, 180, 180, 0.2); */
		text-shadow: 1px 1px 0px black;
	}
	.popover.right .arrow:after {
		border-right-color: #FCC9;
	}
	.impl-external-links .nav-tabs .active > a {
		background-color: #272727;
		color: #ddd;
		border-color: transparent #777 #777 #777;
		/* border-width: 0px; */
		text-shadow: 1px 1px 0px #FFF3;
	}
	hr {
		border-color: #446;
	}
	.badge-non-fav-lang {
		background-color: #444;
	}
	.right_column, .right_column a:link, .right_column a:visited {
		color: #aaa;
	}
	.modal {
		background-color: black;
		border: solid 1px white;
	}
	.alert-info {
		background-color: #113;
		border-color: #333;
		color: #6BD;
		text-shadow: none;
	}
	.language-bar-hint {
		color: #AAA;
	}
	.well.idiom-summary-medium {
		background-color: black;
	}
	.idiom-summary-medium h1 {
		color: #99B;
	}
	.idiom-summary-medium h1 a {
		color: #39D;
	}
	button.btn-inverse {
		/* ? */
	}
	.btn.show-impl-grid {  
        filter: invert(1);
		text-shadow: none;
	}
	.btn-info {  
		background-color: #159;
		background-image: linear-gradient(to bottom, #37A, #159);
		border-color: #222222 #222222 #000000;
	}
	.btn-primary {  
		background-color: #029;
		background-image: linear-gradient(to bottom, #06a, #029);
	}
	.btn-success {  
		background-color: #383;
		background-image: linear-gradient(to bottom, #595, #383);
	}
	pre {
		/* Avoid FOUC: apply after CSS has loaded, before hljs has kicked in.*/
		background: #303030;
		color: white;
	}
	.piimports pre > code,
	.piimports pre > code.hljs {
		color: #AAA;
	}
	.language-choices {
		background-color: #202020;
	}
	.dropdown-menu {
		background-color: #202020;
	}
	.dropdown-menu > li > a {
		color: #BBB;
	}
	button.close {
		color: white;
		opacity: 0.7;
	}
	.implementation.just-copied-to-clipboard .impl-external-links .nav-tabs>.active>a.copy-code-to-clipboard {
		border-top: none;
		background-color: #101010;
		color: #7A7;
	}
	.implementation .piimports.just-copied-to-clipboard pre > code,
	.implementation.just-copied-to-clipboard .picode pre > code {
		background-color: #101010;
	}
	.implementation .piimports.just-copied-to-clipboard a {
		color: #7A7;
	}
}