html.bg5, html.bg6, html.bg9 {
	min-height:100%;
}

body { 
	font-family:Arial; 
	font-size:80%;
	background:#000000 url(http://resources.game-sokoban.com/img/space_c1.gif) top left;
	margin:0; 
	color:cornsilk;
}

html.bg1 body {
	background-image:url(http://resources.game-sokoban.com/img/space_c1.gif);
	background-repeat:repeat;
	background-position:top left;
}

html.bg2 body {
	background-image:url(http://resources.game-sokoban.com/images5/bg/new_sky6.jpg);
	background-repeat:repeat;
}

html.bg3 body {
	background-image:none;
}

html.bg4 body {
	background-image:url(http://resources.game-sokoban.com/images5/bg/new_sky7.jpg);
	background-repeat:no-repeat;
}

html.bg5 body {
	background-image:url(http://resources.game-sokoban.com/images5/bg/new_sky8.jpg), url(http://resources.game-sokoban.com/images5/bg/new_sky8_hlp.jpg);
	background-repeat:no-repeat, repeat;
	background-position:bottom center, bottom center;
}

html.bg6 body {
	background-image:url(http://resources.game-sokoban.com/images5/bg/abstract1.jpg);
	background-repeat:no-repeat;
	background-position:bottom center; 
}

html.bg9 body {
	background-image:url(../images5/bg/new_sky9.jpg);
	background-repeat:no-repeat;
	background-position:bottom center; 
}

html.bg10 body {
	background-image:url(../images5/bg/new_sky10.jpg);
	background-position:top left; 
}

a { 
	text-decoration:none; 
	color:cornsilk;
}

img {
	border:0; 
}

h1 {
	font-size:20px; 
	margin: 17px 0 4px 0;
	font-weight:normal;
	color:cornsilk;
}

h2 {
	display:inline;
	font-size:15px; 
	padding: 0 7px;
	font-weight:normal;
}
div.hor-menu1 h2 {
	padding: 0 0 0 4px;
}

div#wrapper{
	min-width:800px;
	margin:0 8% 0 7%;
	padding-top:7px;
}

br.divide {
	clear:both;
}

@media screen and (max-width: 1230px) {
	div#best_solutions table  td:nth-child(3) {
		display:none;
	}
}

div.lblock div.header {
	margin-bottom:0; 
	padding: 6px 0 7px 0;
	text-align:center;
}

div.lblock div.content {
	margin:0 12px 7px 12px; 
	text-align:left;
	font-size:90%;
	border:1px dotted #006f00;
	border-top:0 dotted #006f00;
	background-color:#434343;
}

.logo3 {
	color:#e8c0e8;
	font-size:120%;
	position:absolute;
	top:55px;
	left:12px;
	z-index:100;
	font-style:italic;
}	

div.hor-menu1 {
	height:35px;
	background: url(http://resources.game-sokoban.com/images/trans_bg_hor1.png) top left repeat-x;
	padding:10px 0 0 6px;
	margin:2px 0 7px 0;
}

div.hor-menu1 a:hover { 
	color:#e8c0e8; 
}

div.hor-menu1 a.selected { 
	color:#e8c0e8; 
}

div.hor-menu1  form {
	display:inline;
}

div.hor-menu1 > div.b-header_user-greeting {
	font-size: 120%;
    margin: 1px 24px 0 0;
}

div.hor-menu1 > div {
	float:right;
	font-size: 80%;
	margin:3px 10px 0 0;
	color:#d99;
}

div.hor-menu1 div a {
	color:#d99;
	font-weight:bold;
}

div.hor-menu1 > div > div {
	display:table-cell;
}

div.hor-menu1 > div > div:first-child {
	padding-right:5px;
	border-right:1px solid #777;
}

div.hor-menu1 > div > div:nth-child(2) {
	padding-left:5px;
}

div.hor-menu1 > div span {
	cursor:pointer;
}

div.hor-menu1 > div.settings {
	margin:-3px 8px 0 5px;
	
}

span#user-greeting {
	cursor:default;
}

@media screen and (max-width: 1070px) {
	div.rblock div.hor-menu1  span#user-greeting {
		display:none;
	}
	div.rblock div.hor-menu1  div:last-child {
		margin-right:0;
	}
	div.rblock div.hor-menu1 > div.settings {
		margin-right: 0;
	}
}

h2.new-collections-link {
	display:none;
}

div.rblock h2.new-collections-link {
	display:inline;
}

h2.champions-link {
	display:none;
}

div.rblock h2.champions-link {
	display:inline;
}

@media screen and (max-width: 1293px) {
	div.rblock h2.champions-link {
		display:none;
	}
}

div.breadcrumb {
	color:#777; 
	margin-bottom:3px; 
	padding:0 0 4px 5px; 
	background-color:#000;
}

div.breadcrumb a {
	color:#777; 
}

div.breadcrumb a:hover {
	color:#e8c0e8; 
}

#board-holder {
	border:1px solid #444444; 
	position:relative;
}

#board-nav-bar {
	position:absolute;
	left:0px;
	top:0px; 
	width:100%;
	border-bottom:1px solid #222; 
	background-color:#171717;
	padding-bottom:5px;
	color:#efb571; 
}

#board-nav-bar #names {
	width:53%; 
	float:left;
	font-weight:normal; 
	font-size:17px; 
}

#board-nav-bar > div#names > div {
	padding-top:9px; 
}

#board-nav-bar #bread-crumb {
	float:left; 
	margin-left:12px;
}

#bread-crumb #col_name a {
	color:#d4964c;
	font-weight:bold;
}

#bread-crumb #level_name span:nth-child(1) {
	display:none;
}

@media screen and (max-width: 1600px) {
	#bread-crumb #level_name span:nth-child(1) {
		display:inline;
	}
	#bread-crumb #level_name span:nth-child(2) {
		display:none;
	}
}

@media screen and (min-width: 1600px) {
	#bread-crumb #level_name span:nth-child(1) {
		display:none;
	}
	#bread-crumb #level_name span:nth-child(2) {
		display:inline;
	}
}

#board-nav-bar #inform1 {
	margin-left:12px;
	float:right;
}

div#inform3 {
	padding-left:12px; 
	padding-top:3px;
	border:1px #333 solid;
	height:23px;
	margin-right:3px;
	min-width: 135px;
}

div#nav-table {
	display:table;
	z-index:20; 
	margin:6px 12px 0 0;
	float:right; 
	font-weight:bold; 
}

div#nav-table div {
	vertical-align:middle;
}

div#nav-table div#cell1 {
	display:table-cell;
	padding:0 12px; 
	border:1px #333 solid;
	vertical-align:middle;
	height:24px;
}

div#nav-table div#cell2  {
	display:table-cell;
	width:7px;
	min-width:7px;
}

div#nav-table div#inform2 {
	display:table-cell;
	border:1px #333 solid;
	min-width:70px; 
	font-size:13px;
	color:#c58372;
	text-align:center;
}

div#nav-table div#cell1 img {
	cursor:pointer; 
	margin-right:15px;
}

div#nav-table  div#cell1 img:last-child {
	margin-right:0;
}

div.control1 {
	z-index:30;
}

div#board-star {
	position:absolute; 
	bottom:6px; 
	left:13px;
}

span#load_sltn {
	font-size:90%;
	line-height:100%;
	padding-left:7px;
	color:#efb571;
	display:none;
	cursor:pointer;
	vertical-align:5px;
}

div#board-state {
	position:absolute; 
	top:40px; 
	left:3px;
	padding: 5px 14px 5px 14px;
	display:none;
	color:#e8c0e8;
	font-size:120%;
	border:1px solid green;
}

div#board-comment {
	position:absolute; 
	bottom:0px; 
	right:76px;
	padding: 5px 14px 5px 14px;
}

div#board-heart {
	position:absolute; 
	bottom:7px; 
	right:53px;
}

div#board-heart img {
	cursor:pointer;
	opacity:0.8;
}

div#inform-link1{
	position:absolute; 
	bottom:7px; 
	right: 13px;
	cursor:pointer;
}

div#inform-link1 img{
	position:relative; 
	top:1px; 
}

div#board-copyright {
	padding: 15px 0 0 0;
	font-size:90%;
	text-align:center;
	color:#766;
}

div#board-copyright.about {
	font-size:115%;
	font-family:'Nova Slim'
}

div#tb1 {
	position:relative;
	margin:7px auto 7px auto;
}

canvas {
	position:absolute;
	left:0px;
	z-index: 12;
}

h2.left-header2 {
	margin-top:10px;
	margin-bottom:7px;
	display:block;
}

div.comments {
	padding-top:12px;
}

div.comments a {
	color:#efb571;
}

div#results_message {
	background-image:url(../img/exclamation1.gif);
	background-repeat:no-repeat;
	background-position:3px 4px; 
	padding:13px 0 13px 0;
	text-align:center;
}

div#startLevel{
	display:none;
}

div.footer {
	position:relative;
}

div.footer div {
	font-size:11px;
	position:absolute;
	top:-13px;
	padding:0 0 0 8%;
	text-align:left;
	color:#777;
}

div.footer a {
	color:#777;
}

div.footer ~ img {
    display: none;
}

div.unsolved-levels {
	padding-top:19px;
	text-align:center;
	width:76px;
	color:#445544;
	border-bottom:0px dotted #332211;
}

div.unsolved-levels a {
	color:#444444;
	font-size:85%;
}

.b-timespan {
	position:absolute;
	
	bottom:9px;
	top: calc(100% - 40px);
	
	right:8px;
	width:52px;
	border:1px dotted #003300;
	min-height:17px;
	background-color:#212121;
	border-radius:13px;
	padding:7px 2px 4px 33px;
	font-size:14px;
	opacity: 1.0;
	color:#686868;
	background-image:url(../images5/time-icon.png);
	background-position:top left;
	background-repeat:no-repeat;
	cursor:pointer;
}

.b-timespan_disabled {
	opacity: 0.4;

}

img.flag-small {
	vertical-align:-3px;
	margin-right:5px;
	opacity:0.7;
}

#actual-player {
	font-style:italic;
	color:#ccffcc;
}

div#history_viewer {
	position:absolute; 
	bottom:5px; 
	right:90px; 
	z-index:100; 
	cursor:pointer;
}

div#history_screen {
	position:absolute; 
	top:0px; 
	display:none;  
	width:100%; 
	height:100%; 
	z-index:100; 
	background-color: rgba(5, 5, 5, 0.5);
}

div#history_screen  div#history_window {
	position:absolute;  
	padding-right:27px; 
	padding-left:24px; 
	padding-top:85px; 
	padding-bottom:110px; 
	color:#000; 
	margin-left: 20%; 
	margin-left: calc((40% - 24px - 27px)/2); 
	margin-top:90px; 
	z-index:100;
	height: 50%;
	border:1px solid #552222; 
	background-color:#cdcccc; 
	box-shadow:1px 1px 4px #575; 
	border-radius:7px; 
	width:60%; 
	letter-spacing:1px;;
}
div#history_screen  div#history_window.compact {
	height: 2%;
	padding-bottom: 2px;
	padding-top:65px;
}

div#history_screen  div#history_win_controls {
	position:absolute;
	top:0;
	left:5%;
	width:90%;
}

div#history_screen  div#history_window #history_level_name {
	padding-top:14px;
	font-family: Helvetica, sans-serif;
	font-size:135%;
}

div#history_screen  div#history_window #history_counter {
	position:absolute;
	top:14px;
	right:120px;
}

div#history_screen  div#history_window img:nth-of-type(1) {
	position:absolute;
	top:4px;
	right:18px;
	cursor: pointer;
}

div#history_screen  div#history_window img:nth-of-type(2) {
	position:absolute;
	top:4px;
	right:-16px;
	cursor: pointer;
}

div#history_screen  div#history_window div#history_bar {
	margin-top:9px;
	height:12px;
	border-radius:5px;
	background-color:#77bb77;
	cursor:pointer;
}
div#history_screen  div#history_window div#history_bar div#history_before {
	height:12px;
	border-radius:5px;
	background-color:#bb9955;
	background-image: -webkit-linear-gradient(top, #333,  orange, #333 );
	background-image: -moz-linear-gradient(top, #333,  orange, #333 );
	background-image: linear-gradient(top, #333,  orange, #333 );
}

div#bar_note {
	margin-top:3px;
	font-size:85%;
	color:#888;
}
div#bar_note.compact {
	display:none;
}

div#history_screen div#history_content {
	word-wrap: break-word;
	height: 100%;
	font-size:120%;
	overflow-y: auto;
	overflow-x: hidden;
}
div#history_screen div#history_content.compact {
	display: none;
}

div#history_screen div#history_content span.selection {
	background-color:#77bb77;
}

div#history_screen div#history_content span:not([class]) {
	padding-left:3px;;
}

div#history_screen  input#hide-history {
	position:absolute; 
	bottom:9px; 
	width: 50%; 
	width: calc( (100% - 27px - 24px)/2 ) ; 
	margin-left:  25%;
	margin-left:  calc( (100% - 27px - 24px)/4 ) ;
	color:#fff;
	background-color:  #656565;
	background: -webkit-linear-gradient(top, #898989, #454545);
	background: -moz-linear-gradient(top, #898989, #454545);
	background: -ms-linear-gradient(top, #898989, #454545);
	background: linear-gradient(top, #898989, #454545);
	border-radius:2px;
	padding-top:4px;
	padding-bottom:4px;
	cursor:pointer;
}
div#history_screen  input#hide-history.compact {
	display: none;
}

.b-history_snapshots {
	border:1px dotted #557755; 
	line-height:150%;
	padding:7px 5px;
	border-radius:7px;
	letter-spacing:0;
	font-size:115%;
	background-color: #bebebe;
}

.b-history_snapshots_save {
	float:left;
	min-width:47%;
	font-weight:bold;
	cursor:pointer;
	text-align:center;
}
.b-history_snapshots_save:hover {
	color:#dd7711;
}

.b-history_snapshots_load  {
	min-width:47%;
	float:right;
	text-align:center;
	font-weight:bold;
}

.b-history_snapshots_load_link  {
	cursor:pointer;
}

.b-history_snapshots_load_link:hover  {
	color:#009900;
}

.b-history_snapshots_link__disabled  {
	color: #999;
}

.b-history_snapshots_link__disabled:hover {
	color: #999;
	cursor: default;
}

.b-history_snapshots_load_date {
	font-size:95%;
	font-weight:normal;
	color:#005500;
}

@font-face {
  font-family: 'FontAwesome';
  src: url('http://www.game-sokoban.com/font-awesome/fontawesome-webfont.eot?v=4.4.0');
  src: url('http://www.game-sokoban.com/font-awesome/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('http://www.game-sokoban.com/font-awesome/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), url('http://www.game-sokoban.com/font-awesome/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('http://www.game-sokoban.com/font-awesome/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('http://www.game-sokoban.com/font-awesome/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font-family: FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa-map-o:before {
    content: "\f278";
}

.b-sitemap-icon_navbar {
	font-size: 17px; 
	opacity: 1.0;
	min-width:17px;
	position:relative;
	top:4px;
	color:#999;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

.b-sitemap-icon_navbar:hover {
	color: #ff9599;
}

.b-truncated {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

div.lblock {
	float:left;
	width:23%;
	background: -webkit-linear-gradient(#111 0.1%, #333 0.4%, #444 1.2%, #444 98.5%, #1a1a1a 100% );
    background: -o-linear-gradient(#111 0.1%, #333 0.4%, #444 1.2%, #444 98.5%, #1a1a1a 100%);
    background: -moz-linear-gradient(#111 0.1%, #333 0.4%, #444 1.2%, #444 98.5%, #1a1a1a 100%);
    background: linear-gradient(#111 0.2%, #333 0.6%, #4a4a4c 1.2%, #4a4a4c 98.5%, #3c3c3c 99.2%, #1c1c1c 100%);
	padding-bottom:28px;
	text-align:center;
	min-height:278px;
}

div.rblock {
	float:right;
	width:75%;
}

div#content1 {
	display:table;
	width:100%;
	position:relative;
}

div#content1 > div:nth-child(1) {
	display:table-cell;
	position:relative;
	border:1px solid #444444; 
}

div#content1 > div:nth-child(1) > div {
	position:relative;
	border-bottom:1px solid black;
	padding-top:50px;
}

div#content1 > div:nth-child(2) {
	display:table-cell;
	width:12px;
	min-width:12px;
}

div#content1 > div:nth-child(3) {
	display:table-cell;
	border:1px solid #444444;
	vertical-align:top;
	padding:7px 14px;
	width:76px;
	background: rgba( 4, 4, 4, 0.75 );
	position: relative;
}

div#content1 > div:nth-child(3) div#header {
	text-align:center;
	height:14px; 
	margin-bottom:12px;
	color:#f4bba7; 
	font-size:12px; 
}

div#content1 > div:nth-child(3) img {
	display:block;
	cursor:pointer;
	margin-bottom:10px;
}

div#header {
	height:24px;
}

span#bread-crumb {
	white-space:nowrap;
}

h2.left-header2 {
	margin-top: 0.67em;
    margin-bottom: -0.1em;
	font-size:1.17em;
}

div.lblock div.content {
	font-size:1.08em;
	padding:  0.7em 0 0.85em 0;
}
 
div.lblock div.header {
    padding-top: 0.75em;
	padding-bottom: 0.75em;
} 

div.level-info {
	border:1px dotted green;
	background-color:#434343;
	color:#ffffcc;
	text-align:left;
	font-size: 1.17em;
	padding: 0.75em 0 0.75em 24px;
	margin: 1.13em 12px;
}

div.level-info span {
	color:#efc5aa;
}

div.level-info span.highlight-name {
	color:#ffffcc;
	font-weight:bold;
}

div.level-info span.highlight-score {
	color:#efb571;
	font-weight:bold;
}

div.level-info table {
	border-collapse:collapse;
	margin:  0 auto;
	line-height:140%;
	width:80%;
	white-space: nowrap;
}

div.level-info table img {
	opacity:0.65;
	margin-right: 9px;
	transition: opacity 0.15s;
}

div.level-info table  a:hover img {
	opacity: 0.8;
}

div.level-info table td {
	padding-bottom:4px;
}

div.level-info table tr:first-child td {
	text-align:center;
	font-size: 92%; 
	padding-bottom: 5px;
	text-align: left;
	color:#9a9;
}
div.level-info  table tr:first-child  td:nth-child(1) {
	padding-left: 46px;
}
div.level-info  table tr:first-child  td:nth-child(2) {
	padding-left: 3px;
}
div.level-info  table tr:first-child  td:nth-child(3) {
	padding-left: 5px;
}

div.level-info table tr:last-child td {
	padding: 0;
}

div.level-info table tr:nth-child(n+2) td:nth-child(1) {
	color:#bbbb99;
}

div.level-info table tr:nth-child(n+2) td:nth-child(2) {
	padding-left:14px;
	padding-right:7px;
	color:#9a9;
}

div.level-info table tr:nth-child(n+2) td:nth-child(3) {
	padding-left:14px;
	padding-right:7px;
	color:#a99;
}

div.level-info table a {
	color:#efc5aa;
	transition: color 0.15s;
}
div.level-info table a:hover {
	color: #ffe5ca;
}

div.level-info#level_status  {
	padding-bottom: 0.5em;
}
div.level-info#level_status  span  span {
	line-height: 1.9em;
}

div.level-info  td.more-link1  {
	text-align:center; 
}

div.level-info  td.more-link1 a {
	font-size:92%; 
	color: #efb571;
}

div.comments {
	padding-top: 0.8em;
	padding-left: 0.65em;
	font-size:108%;
}

.b-solutions-archive {
	
}
.b-solutions-archive:hover {
	color:#d4964c;
}

.b-load-archived-solution {
	margin-left:7px;
	width:1.2em;
	height:1.2em;
	line-height:1.2em !important;
	border-radius:1em;
	text-align:center;
	padding:2px;
	border:1px solid #af857a;
	display:inline-block;
	cursor:pointer;
}

.b-load-archived-solution:hover {
	border:1px solid #efc5aa;
}



#level_info {
  position: absolute;
  display: none;
  background-color: #fff;
  left: 36.5%;
  box-shadow: 1px 1px 4px rgba(17, 12, 12, 0.8);  
  margin:0;
  border:1px solid #333;
  font-size:130%;
  /* padding:12px; */
}

.level-informer_header {
	position:relative;
	color:#fff;
	background-color:#33a;
	padding:7px;
	text-align:center;
	font-weight:bold;
	margin:0;
}

.level-informer_close-btn {
	position:absolute;
	right:5px;
	top:5px;
}

.level-informer_container {
	padding:12px;
	max-height: calc(80vh - 135px);
	overflow-y:auto;
}

.dialog-header {
	background-color: #ffefee; 
	padding: 0 12px 12px 12px;
	border-bottom: 1px dotted silver;
}

.dialog-close {
	display:block;
	margin-left:auto;
	border: 1px solid #225; 
	background-color: #dcc;    
	width: 120px;
    cursor: pointer;
}

.dialog-row {
	display:flex;
	padding: 9px; 
	border-bottom: 1px dotted silver;
	color:#000;
}

.dialog-row_even {
	background-color: #eeeeef;
}

.dialog-row_odd {
	background-color: #eaefff;
}

.dialog-row__label {
	flex:0 0 30%;
	font-weight: bold;
    color: #009; 
	padding-right:7px;
}

.dialog-row__content {
	
}

.dialog-row_solution {
	border-bottom-width: 0px;	
}

.content_solution {
	flex:0 0 70%;
	min-width:0;
	word-wrap: break-word;
	max-height: 260px;
	overflow-y: auto;
}