body {
	font-family: calibri;
}
#content {
	margin: auto;
}
#topmenulist {
	display: grid;
}
.bidding {
	padding-left: 0.4em;
	border-radius: 5px;
}
.level00, .answer_meaning, #show_context_button {
	margin: .2em 1% .2em 1%;
}
.level01 {
	margin: .2em 1% .2em 5%;
}
.level02 {
	margin: .2em 1% .2em 9%;
}
.level03 {
	margin: .2em 1% .2em 13%;
}
.level04 {
	margin: .2em 1% .2em 17%;
}
.level05 {
	margin: .2em 1% .2em 21%;
}
.level06 {
	margin: .2em 1% .2em 25%;
}
.level07 {
	margin: .2em 1% .2em 29%;
}
.level08 {
	margin: .2em 1% .2em 33%;
}
.level09 {
	margin: .2em 1% .2em 37%;
}
.level10 {
	margin: .2em 1% .2em 41%;
}
.level11 {
	margin: .2em 1% .2em 45%;
}
.level12 {
	margin: .2em 1% .2em 49%;
}
.level13 {
	margin: .2em 1% .2em 53%;
}
.level14 {
	margin: .2em 1% .2em 57%;
}
.level15 {
	margin: .2em 1% .2em 61%;
}
.level16 {
	margin: .2em 1% .2em 65%;
}
.level17 {
	margin: .2em 1% .2em 69%;
}
#topmenu {
	margin-left: 1%;
	margin-right: 1%;
}
.bidding, .button, .answer_meaning, #topmenu li {
	cursor: pointer;
}
.bidding.our_call, .bidding.their_call {
	display: flex;
}
.call {
	font-weight: bold;
	text-wrap: nowrap;
}
.meaning {
	padding-left: 3px;
}
.diff .meaning .version {
	display: flex;
}
.version_content {
	padding-left: 3px;
}
.version_id {
	font-weight: bold;
	text-wrap: nowrap;
}
.comment {
	font-style: italic;
}
.emoji, .suit {
	font-style: normal;
}
.hand {
	font-style: normal;
}

ul.topmenu {
	list-style-type: none;
	margin: 2px 0;
	padding: 0;
}
ul.topmenu li {
	display: block;
	float: left;
	margin: 2px;
	padding: 0;
	border-radius: 5px;
	height: 1.25em;
	text-align: center;
}
a.topmenu {
	display: block;
	text-decoration: none;
}
.suit-label {
	font-style: normal;
}
.bidding, .answer_meaning {
	position: relative;
}

.my-balloon {
	min-width: 20px ;
	padding        : 5px ;
	border-radius   : 6px ;
	box-shadow      : 4px 4px 4px #555 ;
	z-index         : 32767 ;
}
div.bidding, .my-balloon, .answer_meaning {
	border: solid 2px;
}
ul.topmenu li, #control_panel .button {
	border: solid 2px;
}
textarea {
    -moz-tab-size : 2;
      -o-tab-size : 2;
         tab-size : 2;
}

/****************************************************Bright theme****************************************************/
body.bright {
	background-color: white;
	color: black;
	.my-balloon, .answer_meaning {
		border-color: #ADD6FF;
	}
	.my-balloon {
		background-color: white;
	}
	.answer_meaning:hover {
		border-color: #ffadb7;
	}
	#control_panel .button, #show_context_button {
		border-color: #ADD6FF;
		background-color: #ADD6FF;
	}
	#show_context_button:hover, #control_panel .button:hover {
		background-color: #ffadb7;
		border-color: #ffadb7;
	}
	a.topmenu {
		color: black;
	}
	.club, .hand .c, .shape .c {
		color: #005416;
	}
	.diamond, .hand .d, .shape .d {
		color: #ff6600;
	}
	.heart, .hand .h, .shape .h {
		color: red;
	}
	.spade, .hand .s, .shape .s {
		color: blue;
	}
	ul.topmenu li {
		border-color: #ADD6FF;
		background-color: #ADD6FF;
		&:hover {
			border-color: #ffadb7;
			background-color: #ffadb7;
		}
		&.subtreediff {
			border-color: #FFC500;
			background-color: #FFC500;
			&:hover {
				border-color: #f2ff00;
				background-color: #f2ff00;
			}
		}
	}
	.bidding {
		&.our_call, &.title {
			border-color: #ADD6FF;
			&.relay {
				background-color: #ADD6FF;
			}
			&.relay.rozwiniete {
				background-color: #85C2FF;
			}
		}
		&.their_call {
			border-color: #adffcb;
			&.relay {
				background-color: #adffcb;
			}
			&.relay.rozwiniete {
				background-color: #61ff9b;
			}
		}
		&.comment {
			border-color: #ecadff;
			&.relay {
				background-color: #ecadff;
			}
			&.relay.rozwiniete {
				background-color: #da61ff;
			}
		}
		&:hover {
			border-color: #ffadb7;
			&.relay {
				background-color: #ffadb7;
			}
			&.relay.rozwiniete {
				background-color: #ff7a8a;
			}
		}
		&.diff, &.subtreediff:not(.rozwiniete) {
			border-color: #FFC500;
			&:hover {
				border-color: #f2ff00;
			}
			&.relay {
				background-color: #FFC500;
				&:hover {
					background-color: #f2ff00;
				}
			}
			&.relay.rozwiniete {
				background-color: #E6B000;
				&:hover {
					background-color: #cbd600;
				}
			}
		}
	}
}
/*****************************************************Dark theme*****************************************************/
body.dark {
	background-color: #222222;
	color: #dddddd;
	.my-balloon, .answer_meaning {
		border-color: #0056B3;
	}
	.my-balloon {
		background-color: #222222;
	}
	.answer_meaning:hover {
		border-color: #ab0039;
	}
	#control_panel .button, #show_context_button {
		border-color: #0056B3;
		background-color: #0056B3;
	}
	#show_context_button:hover, #control_panel .button:hover {
		background-color: #ab0039;
		border-color: #ab0039;
	}
	a.topmenu {
		color: #dddddd;
	}
	.club, .hand .c, .shape .c {
		color: #00e63d;
	}
	.diamond, .hand .d, .shape .d {
		color: #ffc14d;
	}
	.heart, .hand .h, .shape .h {
		color: #ff3333;
	}
	.spade, .hand .s, .shape .s {
		color: #9999ff;
	}
	ul.topmenu li {
		border-color: #0056B3;
		background-color: #0056B3;
		&:hover {
			border-color: #ab0039;
			background-color: #ab0039;
		}
		&.subtreediff {
			border-color: #A87600;
			background-color: #A87600;
			&:hover {
				border-color: #aaa639;
				background-color: #aaa639;
			}
		}
	}
	.bidding {
		&.our_call, &.title {
			border-color: #0056B3;
			&.relay {
				background-color: #0056B3;
			}
			&.relay.rozwiniete {
				background-color: #003E80;
			}
		}
		&.their_call {
			border-color: #008f34;
			&.relay {
				background-color: #008f34;
			}
			&.relay.rozwiniete {
				background-color: #006023;
			}
		}
		&.comment {
			border-color: #9b00ca;
			&.relay {
				background-color: #9b00ca;
			}
			&.relay.rozwiniete {
				background-color: #740097;
			}
		}
		&:hover {
			border-color: #ab0039;
			&.relay {
				background-color: #ab0039;
			}
			&.relay.rozwiniete {
				background-color: #750027;
			}
		}
		&.diff, &.subtreediff:not(.rozwiniete) {
			border-color: #A87600;
			&:hover {
				border-color: #aaa639;
			}
			&.relay {
				background-color: #A87600;
				&:hover {
					background-color: #aaa639;
				}
			}
			&.relay.rozwiniete {
				background-color: #8A6000;
				&:hover {
					background-color: #797628;
				}
			}
		}
	}
}
/***********************************************SPECIAL THEMES*************************************/
/******************** April-fool *********************/
body.april-fool .heart-image:after {
	content: "\1f921";
}
body.april-fool .heart .suit-label {
	font-size: 0;
}
body.april-fool.dark {
	background-image: url("./special-themes/dark-april-fool.jpg");
	background-size: 100%;
	background-attachment: fixed;
	background-position: left;
}
body.april-fool.bright {
	background-image: url("./special-themes/bright-april-fool.png");
	background-size: 16.666%;
	background-attachment: fixed;
	background-position: left;
}
body.april-fool.dark div.bidding:not(.relay) {
	backdrop-filter: contrast(0.3) brightness(0.6);
}
body.april-fool.bright div.bidding:not(.relay) {
	backdrop-filter: contrast(0.3) brightness(2.5);
}
/******************** Autumn ***********************/
body.autumn .diamond-image:after {
	content: "\1f341";
}
body.autumn .diamond .suit-label {
	font-size: 0;
}
/******************** Birthday ***********************/
body.birthday.dark {
	background-image: url("./special-themes/dark-birthday.jpg");
	background-size: 100%;
	background-attachment: fixed;
	background-position: left;
}
body.birthday.bright {
	background-image: url("./special-themes/bright-birthday.jpg");
	background-size: 100%;
	background-attachment: fixed;
	background-position: left;
}
body.birthday.dark div.bidding:not(.relay) {
	backdrop-filter: contrast(0.3) brightness(0.6);
}
body.birthday.bright div.bidding:not(.relay) {
	backdrop-filter: contrast(0.3) brightness(2.5);
}
body.birthday .diamond-image:after {
	content: "\1f370";
}
body.birthday .diamond .suit-label {
	font-size: 0;
}
/******************** Colour-blind *****************/
body.colour-blind.bright {
	.club, .hand .c, .shape .c {
		color: #ff6600;
	}
	.diamond, .hand .d, .shape .d {
		color: blue;
	}
	.heart, .hand .h, .shape .h {
		color: #005416;
	}
	.spade, .hand .s, .shape .s {
		color: red;
	}
}
body.colour-blind.dark {
	.club, .hand .c, .shape .c {
		color: #ffc14d;
	}
	.diamond, .hand .d, .shape .d {
		color: #9999ff;
	}
	.heart, .hand .h, .shape .h {
		color: #00e63d;
	}
	.spade, .hand .s, .shape .s {
		color: #ff3333;
	}
}
/******************** Children *********************/
body.children .diamond-image:after {
	content: "\1f476";
}
body.children .diamond .suit-label {
	font-size: 0;
}
body.children.dark {
	background-image: url("./special-themes/dark-children.jpg");
	background-size: 100%;
	background-attachment: fixed;
	background-position: left;
}
body.children.bright {
	background-image: url("./special-themes/bright-children.jpg");
	background-size: 100%;
	background-attachment: fixed;
	background-position: left;
}
body.children.dark div.bidding:not(.relay) {
	backdrop-filter: contrast(0.3) brightness(0.6);
}
body.children.bright div.bidding:not(.relay) {
	backdrop-filter: contrast(0.3) brightness(1.6);
}
/******************** Christmas *********************/
body.christmas .club-image:after {
	content: "\1F384";
}
body.christmas .club .suit-label {
	font-size: 0;
}
body.christmas.dark {
	background-image: url("./special-themes/dark-christmas.png");
	background-attachment: fixed;
	background-position: left;
}
body.christmas.bright {
	background-image: url("./special-themes/bright-christmas.jpg");
	background-attachment: fixed;
	background-position: left;
}
body.christmas.dark div.bidding:not(.relay) {
	backdrop-filter: contrast(0.3) brightness(0.6);
}
body.christmas.bright div.bidding:not(.relay) {
	backdrop-filter: contrast(0.3) brightness(2);
}
/******************** Earth *********************/
body.earth .spade-image:after {
	content: "\1F4A7";
}
body.earth .spade .suit-label {
	font-size: 0;
}
body.earth.dark {
	background-image: url("./special-themes/dark-earth.jpg");
	background-size: 50%;
	background-attachment: fixed;
	background-position: left;
}
body.earth.bright {
	background-image: url("./special-themes/bright-earth.jpg");
	background-size: 50%;
	background-attachment: fixed;
	background-position: left;
}
body.earth.dark div.bidding:not(.relay) {
	backdrop-filter: contrast(0.3) brightness(0.6);
}
body.earth.bright div.bidding:not(.relay) {
	backdrop-filter: contrast(0.3) brightness(2);
}
/******************** Easter *********************/
body.easter .diamond-image:after {
	content: "\1f425";
}
body.easter .diamond .suit-label {
	font-size: 0;
}
body.easter.dark {
	background-image: url("./special-themes/dark-easter-2.jpg");
	background-size: 100%;
	background-attachment: fixed;
	background-position: left;
}
body.easter.bright {
	background-image: url("./special-themes/bright-easter.jpg");
	background-size: 100%;
	background-attachment: fixed;
	background-position: left;
}
body.easter.dark div.bidding:not(.relay) {
	backdrop-filter: contrast(0.3) brightness(0.6);
}
body.easter.bright div.bidding:not(.relay) {
	backdrop-filter: contrast(0.3) brightness(2);
}
/******************** Education *********************/
body.education .spade-image:after {
	content: "\1f393"
}
body.education .spade .suit-label {
	font-size: 0;
}
/******************** Friday 13th *********************/
body.friday13th .spade-image:after {
	content: "\1f408\200d\2b1b"
}
body.friday13th .spade .suit-label {
	font-size: 0;
}
/******************** Halloween *********************/
body.halloween.dark {
	background-image: url("./special-themes/dark-spider-web.svg");
	background-attachment: fixed;
	background-position: left;
}
body.halloween.dark .bidding:not(.relay) {
	background-color: black
}
body.halloween.bright {
	background-image: url("./special-themes/bright-spider-web.svg");
	background-attachment: fixed;
	background-position: left;
}
body.halloween.bright .bidding:not(.relay) {
	background-color: white
}
body.halloween .diamond-image:after {
	content: "\1F383";
}
body.halloween .diamond .suit-label {
	font-size: 0;
}
/******************** Independence *********************/
body.independence.dark {
	background-image: url("./special-themes/dark-independence.jpg");
	background-size: 100%;
	background-attachment: fixed;
	background-position: left;
}
body.independence.bright {
	background-image: url("./special-themes/bright-independence.jpg");
	background-size: 100%;
	background-attachment: fixed;
	background-position: top;
}
.bright.independence #topmenu .topmenu li:nth-child(odd) {
	border-color:white;
	background-color:white;
}
.dark.independence #topmenu .topmenu li:nth-child(odd) {
	border-color:#aaaaaa;
	background-color:#aaaaaa;
}
.bright.independence #topmenu .topmenu li:nth-child(even) {
	border-color:#ff9999;
	background-color:#ff9999;
}
.dark.independence #topmenu .topmenu li:nth-child(even) {
	border-color:#990000;
	background-color:#990000;
}
body.independence.dark div.bidding:not(.relay) {
	backdrop-filter: contrast(0.3) brightness(0.6);
}
body.independence.bright div.bidding:not(.relay) {
	backdrop-filter: contrast(0.3) brightness(2);
}
/******************** Men *********************/
body.men .spade-image:after {
	content: "\1f3a9";
}
body.men .spade .suit-label {
	font-size: 0;
}
/******************** Moon *********************/
body.moon .diamond-image:after {
	content: "\1F316";
}
body.moon .diamond .suit-label {
	font-size: 0;
}
body.moon {
	background-image: url("./special-themes/dark-moon.jpg");
	background-size: 33%;
	background-attachment: fixed;
	background-position: left;
}
body.moon.dark div.bidding:not(.relay) {
	backdrop-filter: contrast(0.3) brightness(0.6);
}
body.moon.bright div.bidding:not(.relay) {
	backdrop-filter: contrast(0.3) brightness(2);
}
/******************** New-year *********************/
body.new-year .diamond-image:after {
	content: "\1f973";
}
body.new-year .diamond .suit-label {
	font-size: 0;
}
body.new-year.dark {
	background-image: url("./special-themes/dark-new-year.jpg");
	background-size: 100%;
	background-attachment: fixed;
	background-position: left;
}
body.new-year.bright {
	background-image: url("./special-themes/bright-new-year.jpg");
	background-size: 25%;
	background-attachment: fixed;
	background-position: left;
}
body.new-year.dark div.bidding:not(.relay) {
	backdrop-filter: contrast(0.3) brightness(0.6);
}
body.new-year.bright div.bidding:not(.relay) {
	backdrop-filter: contrast(0.3) brightness(2);
}
/*********************** Pi ***********************/
body.pi .club .suit-label, body.pi .diamond .suit-label, body.pi .heart .suit-label, body.pi .spade .suit-label {
	font-size: 0;
}
body.pi .club-image:after {
	content: "\1f7e2";
}
body.pi .diamond-image:after {
	content: "\1f7e0";
}
body.pi .heart-image:after {
	content: "\1f534";
}
body.pi .spade-image:after {
	content: "\1f535";
}
body.pi.dark {
	background-image: url("./special-themes/dark-pi.jpeg");
	background-size: 100%;
	background-attachment: fixed;
	background-position: top;
}
body.pi.bright {
	background-image: url("./special-themes/bright-pi.jpeg");
	background-size: 100%;
	background-attachment: fixed;
	background-position: top;
}
body.pi.dark div.bidding:not(.relay) {
	backdrop-filter: contrast(0.3) brightness(0.4);
}
body.pi.bright div.bidding:not(.relay) {
	backdrop-filter: contrast(0.3) brightness(2.5);
}
/******************** Rainbow *********************/
.bright.rainbow #topmenu .topmenu li:nth-child(6n+1) {
	border-color:#ff9999;
	background-color:#ff9999;
}
.dark.rainbow #topmenu .topmenu li:nth-child(6n+1) {
	border-color:#990000;
	background-color:#990000;
}
.bright.rainbow #topmenu .topmenu li:nth-child(6n+2) {
	border-color:#ffdb99;;
	background-color:#ffdb99;;
}
.dark.rainbow #topmenu .topmenu li:nth-child(6n+2) {
	border-color:#996300;
	background-color:#996300;
}
.bright.rainbow #topmenu .topmenu li:nth-child(6n+3) {
	border-color:#ffff99;
	background-color:#ffff99;
}
.dark.rainbow #topmenu .topmenu li:nth-child(6n+3) {
	border-color:#c8a900;
	background-color:#c8a900;
}
.bright.rainbow #topmenu .topmenu li:nth-child(6n+4) {
	border-color:#99ff99;
	background-color:#99ff99;
}
.dark.rainbow #topmenu .topmenu li:nth-child(6n+4) {
	border-color:#009900;
	background-color:#009900;
}
.bright.rainbow #topmenu .topmenu li:nth-child(6n+5) {
	border-color:#ADD6FF;
	background-color:#ADD6FF;
}
.dark.rainbow #topmenu .topmenu li:nth-child(6n+5) {
	border-color:blue;
	background-color:blue;
}
.bright.rainbow #topmenu .topmenu li:nth-child(6n+6) {
	border-color:#ff99ff;
	background-color:#ff99ff;
}
.dark.rainbow #topmenu .topmenu li:nth-child(6n+6) {
	border-color:#990099;
	background-color:#990099;
}
/******************** Santa *********************/
body.santa .heart-image:after {
	content: "\01F385";
}
body.santa .heart .suit-label {
	font-size: 0;
}
body.santa.dark {
	background-image: url("./special-themes/dark-santa.jpg");
	background-size: 100%;
	background-attachment: fixed;
	background-position: left;
}
body.santa.bright {
	background-image: url("./special-themes/bright-santa.jpg");
	background-size: 50%;
	background-attachment: fixed;
	background-position: top;
}
body.santa.dark div.bidding:not(.relay) {
	backdrop-filter: contrast(0.3) brightness(0.6);
}
body.santa.bright div.bidding:not(.relay) {
	backdrop-filter: contrast(0.3) brightness(2);
}
/******************** Single **********************/
body.single .heart-image:after {
	content: "\1F494";
}
body.single .heart .suit-label {
	font-size: 0;
}
/******************** Spring **********************/
body.spring .club-image:after {
	content: "\1f331"
}
body.spring .club .suit-label {
	font-size: 0;
}
/******************** Summer **********************/
body.summer .diamond-image:after {
	content: "\2600\FE0F"
}
body.summer .diamond .suit-label {
	font-size: 0;
}
/******************** Ukraine *********************/
body.ukraine.dark {
	background-image: url("./special-themes/dark-ukraine.webp");
	background-size: 100%;
	background-attachment: fixed;
	background-position: left;
}
body.ukraine.bright {
	background-image: url("./special-themes/bright-ukraine.jpg");
	background-size: 100%;
	background-attachment: fixed;
	background-position: top;
}
body.ukraine.dark div.bidding:not(.relay) {
	backdrop-filter: contrast(0.3) brightness(0.6);
}
body.ukraine.bright div.bidding:not(.relay) {
	backdrop-filter: contrast(0.3) brightness(2);
}
.bright.ukraine #topmenu .topmenu li:nth-child(odd) {
	border-color:#ADD6FF;
	background-color:#ADD6FF;
}
.dark.ukraine #topmenu .topmenu li:nth-child(odd) {
	border-color:blue;
	background-color:blue;
}
.bright.ukraine #topmenu .topmenu li:nth-child(even) {
	border-color:yellow;
	background-color:yellow;
}
.dark.ukraine #topmenu .topmenu li:nth-child(even) {
	border-color:#c8a900;
	background-color:#c8a900;
}
/******************** Valentines *********************/
body.valentines .heart-image:after {
	content: "\1F498";
}
body.valentines .heart .suit-label {
	font-size: 0;
}
body.valentines.bright {
	background-image: url("./special-themes/bright-valentines.jpg");
	background-attachment: fixed;
	background-position: left;
}
body.valentines.dark {
	background-image: url("./special-themes/dark-valentines.jpg");
	background-attachment: fixed;
	background-position: left;
}
body.valentines.dark div.bidding:not(.relay) {
	backdrop-filter: contrast(0.3) brightness(0.6);
}
body.valentines.bright div.bidding:not(.relay) {
	backdrop-filter: contrast(0.3) brightness(2);
}
/******************** Veggie ********************/
body.veggie .club-image:after {
	content: "\1f966"
}
body.veggie .club .suit-label {
	font-size: 0;
}
/******************** Winter ********************/
body.winter .spade-image:after {
	content: "\2744\FE0F"
}
body.winter .spade .suit-label {
	font-size: 0;
}
/******************** Women *********************/
body.women .heart-image:after {
	content: "\1F339";
}
body.women .heart .suit-label {
	font-size: 0;
}
body.women.bright {
	background-image: url("./special-themes/bright-women.jpg");
	background-size: 50%;
	background-attachment: fixed;
	background-position: left;
}
body.women.dark {
	background-image: url("./special-themes/dark-women.jpg");
	background-size: 100%;
	background-attachment: fixed;
	background-position: left;
}
body.women.dark div.bidding:not(.relay) {
	backdrop-filter: contrast(0.3) brightness(0.6);
}
body.women.bright div.bidding:not(.relay) {
	backdrop-filter: contrast(0.3) brightness(2);
}

/******************** Quiz related stuff *********************/
.answer_meaning .call, .answer_meaning .call_meaning {
	display: inline;
}
.answer_meaning .call {
	font-weight: bold;
}
#control_panel .button {
	display: inline;
	margin: 1px;
	padding: 0;
	border-radius: 5px;
	min-width: 30px;
	height: 1.25em;
	text-align: center;
}
@media (min-width:480px) {
	#control_panel .button {
		width: 25%;
	}
}
ol, ul {
	margin: 0px;
}