body
{
	font-size: 17px;
	color: orange;
	background-position: center;
	background-repeat: repeat;
	/* note: background-image is in html code */
}
.small
{
	font-size: 12px;
}
.disabled-overlay
{
	display: none;
}
.loader-bar
{
	width: 100%;
	height: 10px;
	border: 1px solid orange;
	border-radius: 3px;
	background-image: 
	repeating-linear-gradient(
		-45deg,
		orange,
		orange 11px,
		transparent 10px,
		transparent 20px
	);
	background-size: 28px 28px;
	animation: move .5s linear infinite;
	display: none;
}
@keyframes move {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: 28px 0;
	}
}
#flags
{
	margin-top: 8px;
}
#flags img
{
	width: 50px;
	height: 34px;
}
#flags a
{
	text-decoration: none;
}
.help-dropdown
{
	margin-right: 10px;
}
.window
{
	background-color: #613805;
	border: 3px solid #945b15;
	border-radius: 8px;
	padding: 10px;
	-webkit-box-shadow: 0 0 5px 5px #613805;
	-moz-box-shadow: 0 0 5px 5px #613805;
	box-shadow: 0 0 3px 3px #613805;
}
.vh-center
{
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.popup
{
	z-index: 990;
	display: none;
	position: fixed;
}
.window-popup
{
	z-index: 970;
	display: none;
	position: absolute;
}
.initial-popup
{
	width: 630px;
}
.btn.btn-skrebl#site-create-game-btn
{
	font-size: 23px;
	padding: 10px 15px;
	margin-bottom: 20px;
}
.btn.btn-skrebl#site-create-game-btn .fa
{
	font-size: 35px;
	display: block;
}
.site-window
{
	position: relative; /* required for eventual disabled overlay and popup on it */
	display: flex;
	flex-direction: column;
	padding: 0;
}
#site-created-public-games-div,
#site-recent-games-div
{
	height: 500px;
	max-height: 500px;
	margin-bottom: 30px;
}
#site-recent-games-div > header,
#site-created-public-games-div > header
{
	position: relative;
}
#site-recent-games-div > header > .fa-filter,
#site-created-public-games-div > header > .fa-filter,
#site-welcome-div > header > .fa-times
{
	position: absolute;
	right: 10px;
	top: 9px;
	cursor: pointer;
}
#site-welcome-div, .ads-top
{
	margin-bottom: 20px;
}
.site-welcome-window-content, .site-donate-window-content
{
	padding: 10px;
}
.tips-popup-flex,
.rules-popup-flex,
.donate-popup-flex
{
	display: flex;
	flex-direction: column;
}
.tips-popup-content,
.rules-popup-content,
.donate-popup-content
{
	position: relative;
}
.tips-popup,
.rules-popup,
.donate-popup
{
	height: 90%;
}
.tips-button-pane,
.rules-button-pane,
.donate-button-pane
{
	padding-top: 15px;
}
.rules-popup-content figure
{
	margin-top: 5px;
	margin-bottom: 10px;
	text-align: center;
}
.recent-games-filter-section, .created-public-games-filter-section
{
	border-bottom: 2px dashed #945b15;
	padding: 10px;
}
.recent-games-score-filter > .col-xs-8
{
	display: flex;
}
.recent-games-score-filter > .col-xs-8 > div.inputbox
{
	flex: 1;
}
.recent-games-score-filter > .col-xs-8 > div:not(.inputbox)
{
	margin: 5px 10px;
}
.recent-games-score-filter input
{
	width: 100%;
}
.site-connection-dropped-disabled-overlay
{
	display: none;
	border-radius: 6px;
	position: absolute;
	z-index: 960;
	width: 100%;
	height: 100%;
	background-color: gray;
	opacity: 0.6;
}
.site-connection-dropped-popup
{
	width: 320px;
}
.site-window-content
{
	position: relative;
	flex: 1;
}
.site-window > header
{
	text-transform: uppercase;
	font-size: 20px;
	letter-spacing: 2px;
	color: orange;
	background-color: #945b15;
	padding: 5px;
}
.site-created-public-games-none,
.site-created-public-games-list-div
{
	display: none;
}
.site-created-public-games-none,
.site-created-public-games-loading,
.site-recent-games-loading,
.site-recent-games-none,
.site-recent-games-error
{
	padding: 10px;
}
.site-created-public-game-div
{
	position: relative;
	padding: 10px;
	display: flex;
}
.site-recent-game-div
{
	position: relative;
	padding: 10px;
	max-width: 100%;
}
.site-recent-game-div,
.site-created-public-game-div
{
	border-bottom: 2px dashed #945b15;
}
.site-recent-games-load-more > a
{
	line-height: 2;
}
.site-created-public-game-div:hover,
.site-recent-game-div:hover,
.grid-row:hover
{
	background-color: #442b0c;
}
img.site-created-public-game-user-img,
img.site-recent-game-user1-img,
img.site-recent-game-user2-img
{
	width: 80px;
	height: 80px;
	-webkit-box-shadow: 0 0 2px 2px rgba(255, 165, 0, 0.6);
	-moz-box-shadow: 0 0 2px 2px rgba(255, 165, 0, 0.6);
	box-shadow: 0 0 2px 2px rgba(255, 165, 0, 0.6);
}
.site-created-public-game-info
{
	flex: 1;
	display: flex;
	flex-direction: column;
	margin-left: 15px;
	overflow: hidden;
}
.site-created-public-game-level.badge,
.site-recent-game-level.badge
{
	position: absolute;
	left: 5px;
	bottom: 5px;
}
.site-created-public-game-paid.badge,
.site-recent-game-paid.badge
{
	position: absolute;
	left: 5px;
	bottom: 25px;
}
.site-created-public-game-user-img-wrapper,
.site-recent-game-user-img-wrapper
{
	position: relative;
	width: 80px;
	height: 80px;
}
.site-created-public-game-user-img-wrapper .miniflag,
.site-recent-game-user-img-wrapper .miniflag
{
	position: absolute;
	left: 5px;
	top: 5px;
}
.site-created-public-game-user-img-wrapper .miniflag > img,
.site-recent-game-user-img-wrapper .miniflag > img
{
	vertical-align: top;
}
.fa.user1-won
{
	position: absolute;
	right: -33px;
	top: 30px;
	font-size: 25px;
}
.fa.user2-won
{
	position: absolute;
	left: -33px;
	top: 30px;
	font-size: 25px;
}
.site-recent-game-img-row
{
	display: flex;
	width: 100%;
}
.site-recent-game-middle
{
	flex: 1;
	margin-left: 10px;
	margin-right: 10px;
}
.site-recent-game-scores,
.site-recent-game-nicks
{
	font-size: 22px;
}
.site-recent-game-params
{
	display: flex;
	width: 100%;
	justify-content: space-around;
	margin-top: 5px;
}
.site-recent-game-nicks
{
	display: flex;
	justify-content: space-between;
	width: 100%;
	max-width: 100%;
}
.site-recent-game-nick1,
.site-recent-game-nick2
{
	/* flex: 1; */
	max-width: 120px; /* it won't work with percents */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.site-recent-game-nick2
{
	align-self: right;
}
.site-created-public-game-nick-createdtime
{
	display: flex;
}
.site-created-public-game-nick
{
	font-size: 24px;
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
}
.site-created-public-game-params .small
{
	text-transform: uppercase;
	margin-top: 5px;
}
.site-created-public-game-params
{
	display: flex;
}
.site-created-public-game-params-language,
.site-created-public-game-params-approval
{
	width: 125px;
}
/* Large */
@media only screen and (max-width : 1200px)
{
	/* when lists of games are stacked on each other */
	.site-created-public-game-params-language,
	.site-created-public-game-params-approval
	{ /* outer div is larger in non-lg so spacing can be larger too */
		width: 160px;
	}
	#site-finished-public-games-div
	{
		margin-top: 20px;
	}
}
.site-created-public-game-params-language,
.site-created-public-game-params-approval,
.site-created-public-game-params-board
{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.letter-box
{
	cursor: default;
	width: 40px;
	height: 40px;
	position: relative;
}
.letter
{
	font-family: 'Tinos', monospace;
	color: #103006;
	position: relative;
	height: 100%;
	border-radius: 5px;
	background-image: url('./../img/bg-letter.jpg');
	-webkit-box-shadow: inset 0 0 10px 0 #a17c32;
	-moz-box-shadow: inset 0 0 10px 0 #a17c32;
	box-shadow: inset 0 0 10px 0 #a17c32;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.letter-letter
{
	line-height: 0.9;
	font-size: 28px;
	text-align: center;
	padding-top: 5px;
}
.letter-points
{
	line-height: 0.4;
	font-size: 12px;
	position: absolute;
	right: 4px;
}
.branding
{
	position: relative;
}
.branding .letter-box
{
	position: absolute;
}
.branding .letter-box:nth-child(1)
{
	left: 0;
	top: 10px;
	transform: rotate(-30deg);
}
.branding .letter-box:nth-child(2)
{
	left: 30px;
	top: 45px;
	transform: rotate(25deg);
}
.branding .letter-box:nth-child(3)
{
	left: 53px;
	top: 10px;
	transform: rotate(15deg);
}
.branding .letter-box:nth-child(4)
{
	left: 84px;
	top: 45px;
	transform: rotate(-20deg);
}
.branding .letter-box:nth-child(5)
{
	left: 115px;
	top: 10px;
	transform: rotate(45deg);
}
.branding .letter-box:nth-child(6)
{
	left: 140px;
	top: 45px;
	transform: rotate(-60deg);
}
/* Medium */
@media only screen and (min-width : 992px)
{
	#site-create-game-btn
	{
		margin-top: 110px;
	}
}
/* Medium */
@media only screen and (max-width : 992px)
{
	#site-create-game-btn
	{
		margin-left: 240px;
	}
}
.register-popup,
.register-success-popup,
.signin-popup,
.forgottenpassword-popup,
.forgottenpassword-success-popup,
.about-popup
{
	width: 400px;
}
.loader
{
	display: none;
}
#register-captcha, #signin-captcha, #forgottenpassword-captcha
{ /* the only way to center the recaptcha */
	display: table;
	margin: auto;
}
/* Large */
@media only screen and (min-width : 1200px)
{
	.settings-popup, .admin-popup
	{
		width: 1150px;
	}
}
/* Medium to Large */
@media only screen and (min-width : 992px) and (max-width : 1200px)
{
	.settings-popup, .admin-popup
	{
		width: 850px;
	}
}
/* Small to Medium */
@media only screen and (min-width : 768px) and (max-width : 992px)
{
	.settings-popup, .admin-popup
	{
		width: 650px;
	}
}
/* Extra Small */
@media only screen and (max-width : 768px)
{
	.settings-popup, .admin-popup
	{
		width: 90%;
	}
}
.settings-popup, .admin-popup
{
	height: 90%;
}
.settings-main-flex, .admin-main-flex
{
	display: flex;
	flex-direction: column;
}
.settings-top-flex, .admin-top-flex
{
	flex: 1;
	display: flex;
	width: 100%;
	align-items: flex-start;
}
.settings-buttons-pane, .admin-buttons-pane
{
	display: flex;
	width: 100%;
	align-items: center;
	height: 50px;
	padding-top: 10px;
}
.settings-menu-pane, .admin-menu-pane
{
	width: 250px;
	height: 100%;
	position: relative;
}
.settings-main-pane, .admin-main-pane
{
	flex: 1;
	padding: 10px 10px 10px 20px;
	position: relative;
}
.settings-buttons-cancel, .settings-buttons-ok, .admin-buttons-close
{
	flex: 1;
}
.settings-menu-pane ul,
.admin-menu-pane ul
{
	list-style: none;
	padding-left: 0;
}
.settings-menu-pane li,
.admin-menu-pane li
{
	height: 50px;
	text-transform: uppercase;
	letter-spacing: 2px;
	border-radius: 3px;
	padding: 13px 20px;
	margin: 2px 0;
}
.settings-menu-pane li.active,
.settings-menu-pane li:hover,
.admin-menu-pane li.active,
.admin-menu-pane li:hover
{
	background-color: orange;
	color: #613805;
}
.settings-menu-pane li,
.admin-menu-pane li
{
	cursor: pointer;
}
.settings-main-pane > div:not([data-menuitem="setavatar"]),
.admin-main-pane > div:not([data-menuitem="additionalwords"])
{
	display: none;
}
.settings-avatar
{
	width: 192px;
	height: 192px;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url('./../img/user.png');
	position: relative;
}
.avatar-pending-approval
{
	position: absolute;
	left: 0;
	right: 0;
	top: 80px;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: black;
	opacity: 0.8;
	text-align: center;
	text-shadow: 1px 0px 5px rgba(55, 55, 55, 1);
}
.settings-avatar-loader-bar
{
	width: 192px;
}
.settings-avatar-loader-bar > .loader-bar
{
	display: block;
	visibility: hidden;
	margin-bottom: 5px;
}
.settings-avatar > img
{
	width: 192px;
	height: 192px;
}
#settings-avatarupload-label, #settings-avatarrremove-btn
{
	width: 192px;
}
#settings-avatarrremove-btn
{
	margin-top: 5px;
}
.miniflag, .miniflag > img
{
	width: 20px;
	height: 15px;
}
.miniflag > img
{
	vertical-align: baseline;
}
.xpbar
{
	width: 200px;
}
.xpbar-wrapper
{
	width: 100%;
	height: 15px;
}
.xpbar-empty
{
	background-color: #613805;
	width: 100%;
	height: 15px;
	position: absolute;
}
.xpbar-full
{
	height: 15px;
	background-color: orange;
	position: absolute;
}
.xpbar-xp
{
	color: #945b15;
	position: absolute;
	right: 5px;
	top: -1px;
}
.xpbar-text
{
	font-size: 13px;
}
.grid-row
{
	margin-top: 3px;
	margin-bottom: 3px;
}
.additional-word-div > .grid-text
{
	margin-top: 8px; /* mimic vertical alignment - row is higher because of the buttons */
}
.admin-user-nick-column .miniflag
{
	position: relative;
	top: -4px;
}
.admin-user-nick, .admin-user-email
{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.admin-user-nick-column
{
	display: flex;
}
.admin-user-nick-column > div:not(:last-child)
{
	margin-right: 5px;
}
.admin-search-section
{
	margin-bottom: 5px;
}
button .fa
{
	font-size: 15px;
}
.about-popup .branding
{
	margin-left: 90px;
}
.xpplus
{
	width: 100%;
	position: absolute;
	top: 0;
	opacity: 0;
	display: none;
	z-index: -1;
	font-size: 50px;
	color: #FFD373;
	text-shadow: 0px 2px 5px #613805;
}
div.ads-skyscraper-left
{
	padding: 8px;
	width: 180px;
	text-align: center;
}
div.ads-top
{
	padding: 8px;
}
div.ads-top iframe
{
	margin: 0 auto !important;
}
div.ads-top-lg iframe
{
	height: 220px !important;
}
.site-donate-window-content table td,
.donate-popup-content table td
{
	padding: 5px 10px;
}
.site-donate-window-content table td:not(:first-child),
.donate-popup-content table td:not(:first-child)
{
	text-align: center;
}
.admin-user-nick-column .miniflag
{
	background-position-y: 3px;
}