/*--- Icons ------------------------------------------------------------------------*/

@font-face {
  font-family: 'wgo-icons';
  src: url('data:application/font-woff;base64, ') format('woff'),
       url('data:image/svg+xml;base64, ') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* Available icons: */
.wgo-icon-fast-forward:before { content: '\e817'; }
.wgo-icon-to-end:before { content: '\e81a'; }
.wgo-icon-play:before { content: '\e80c'; }
.wgo-icon-check:before { content: '\e813'; }
.wgo-icon-menu:before { content: '\e81b'; }
.wgo-icon-comment:before { content: '\e800'; }
.wgo-icon-help-circled:before { content: '\e80f'; }
.wgo-icon-check-empty:before { content: '\e814'; }
.wgo-icon-circle-empty:before { content: '\e816'; }
.wgo-icon-circle:before { content: '\e815'; }
.wgo-icon-info:before { content: '\e801'; }

/*--- /Icons -----------------------------------------------------------------------*/

/*--- Basic ------------------------------------------------------------------------*/

.wgo-player-main {
	font-family: Calibri, Tahoma, Arial;
	color: black;
	margin: 0 auto;
	width: 100%;
	height: 100%;
	line-height: normal;
	font-size: 16px;
	position: relative;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent; /* For some Androids */
}

.wgo-player-main:after {
	content: "";
	clear: both;
	display: block;
}

/*--- /Basic -----------------------------------------------------------------------*/

/*--- Regions ----------------------------------------------------------------------*/

.wgo-player-left, .wgo-player-center, .wgo-player-right  {
	float: left;
}

.wgo-player-center {
	width: 100%;
}

.wgo-player-left-wrapper, .wgo-player-right-wrapper  {
	height: 100%;
	position: relative;
}

/*--- /Regions ----------------------------------------------------------------------*/

/*--- Two columns modificatons ------------------------------------------------------*/

.wgo-twocols .wgo-player-left, .wgo-twocols  .wgo-player-right  {
	width: 30%;
}

.wgo-twocols .wgo-player-center {
	width: 70%;
}

/*--- /Two columns modificatons ------------------------------------------------------*/

/*--- Board --------------------------------------------------------------------------*/

.wgo-player-board {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.wgo-board {
	margin: 0 auto;
    background-color: #CEB053;
    border-top: #F0E7A7 solid 1px;
    border-right: #D1A974 solid 1px;
    border-left: #CCB467 solid 1px;
    border-bottom: #665926 solid 3px;
    /*border-right: #665926 solid 3px;*/
    border-radius: 3px;
}

/*--- /Board --------------------------------------------------------------------------*/

/*--- Box styles ----------------------------------------------------------------------*/

.wgo-box-wrapper {
	background: rgba(226,226,226,0.5);
	border: 1px solid rgba(200,200,200,0.5);
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.wgo-box-title {
	margin: 0 10px;
	line-height: 40px;
	font-weight: bold;
	font-size: 20px;
	height: 40px;
	overflow: hidden;
}

/*--- /Box styles ----------------------------------------------------------------------*/

/*--- Player box -----------------------------------------------------------------------*/

.wgo-player-wrapper .wgo-box-title::after {
	content: ' ';
	float: right;
	margin-top: 10px;
	margin-right: 2px;
	width: 18px;
	height: 18px;
	border-radius: 9px;
	box-shadow: 1px 1px 1px 1px rgba(127, 127, 127, 0.3);
}

.wgo-player-wrapper.wgo-black .wgo-box-title::after {
	background: rgb(35,36,39);
	background: -moz-linear-gradient(-45deg,  rgba(35,36,39,1) 0%, rgba(0,0,0,1) 100%);
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(35,36,39,1)), color-stop(100%,rgba(0,0,0,1)));
	background: -webkit-linear-gradient(-45deg,  rgba(35,36,39,1) 0%,rgba(0,0,0,1) 100%);
	background: -o-linear-gradient(-45deg,  rgba(35,36,39,1) 0%,rgba(0,0,0,1) 100%);
	background: -ms-linear-gradient(-45deg,  rgba(35,36,39,1) 0%,rgba(0,0,0,1) 100%);
	background: linear-gradient(135deg,  rgba(35,36,39,1) 0%,rgba(0,0,0,1) 100%);
}

.wgo-player-wrapper.wgo-white .wgo-box-title::after {
	background: rgb(255,255,255);
	background: -moz-linear-gradient(-45deg,  rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(47%,rgba(246,246,246,1)), color-stop(100%,rgba(237,237,237,1)));
	background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
	background: -o-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
	background: -ms-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);/
	background: linear-gradient(135deg,  rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
}

.wgo-player-info {
	padding: 0 2%;
}

.wgo-player-info-box-wrapper {
	width: 33.3%;
	display: inline-block;
}

.wgo-player-info-box {
	padding: 0px 1px;
	margin: 0 3%;
	border: 1px solid rgba(200,200,200,0.3);
	background-color: rgba(255,255,255,0.3);
	border-radius: 2px;
	font-size: 12px;
	text-align: center;
}

.wgo-player-info-title {
	font-size: 11px;
	overflow: hidden;
}

/* right and left modifications*/

.wgo-player-left .wgo-infobox, .wgo-player-right .wgo-infobox {
	overflow: hidden;
	position: absolute;
	top: 0;
	right: 0;
	left: 10px;
}

.wgo-player-right .wgo-player-wrapper, .wgo-player-left .wgo-player-wrapper {
	height: 85px;
	border-bottom: 0;
}

/* top and bottom modifications */

.wgo-player-top .wgo-player-info, .wgo-player-bottom .wgo-player-info {
	position: absolute;
	width: 40%;
	right: 0;
	top: 4px;
	bottom: 4px;
	overflow: hidden;
	text-align: right;
}

.wgo-player-top .wgo-player-wrapper, .wgo-player-bottom .wgo-player-wrapper {
	height: 40px;
	display: inline-block;
	width: 50%;
	margin: 0;
	position: relative;
}

.wgo-player-top .wgo-player-wrapper.wgo-black {
	border-left-width: 0;
}

.wgo-player-top .wgo-infobox .wgo-box-title, .wgo-player-bottom .wgo-infobox .wgo-box-title {
	position: absolute;
	right: 40%;
	left: 0;
	margin: 0 5px;
	z-index: 500;
}

.wgo-player-top .wgo-player-wrapper .wgo-box-title::after {
	float: left;
	margin-right: 7px;
}

/* S modification */

.wgo-small .wgo-player-top .wgo-player-info, .wgo-small .wgo-player-bottom .wgo-player-info,
.wgo-xsmall .wgo-player-top .wgo-player-info, .wgo-xsmall .wgo-player-bottom .wgo-player-info  {
	width: 30%;	
}

.wgo-small .wgo-player-top .wgo-infobox .wgo-box-title, .wgo-small  .wgo-player-bottom .wgo-infobox .wgo-box-title,
.wgo-xsmall .wgo-player-top .wgo-infobox .wgo-box-title, .wgo-xsmall  .wgo-player-bottom .wgo-infobox .wgo-box-title {
	right: 30%;
}

.wgo-small .wgo-player-info-box-wrapper,
.wgo-xsmall .wgo-player-info-box-wrapper {
	width: 50%;
}

.wgo-small .wgo-player-info-box-wrapper:last-child,
.wgo-xsmall .wgo-player-info-box-wrapper:last-child {
	display: none;
}

/* XS modification */

.wgo-xsmall .wgo-player-info-title {
	display: none;
}

.wgo-xsmall .wgo-player-wrapper { 
	display: block;
	height: 30px;
	width: 100%;
}

.wgo-xsmall .wgo-infobox{ 
	margin-bottom: 4px;
}

.wgo-xsmall .wgo-box-title { 
	font-size: 15px;
	height: 30px;
	line-height: 30px;
}

.wgo-xsmall .wgo-player-wrapper.wgo-black {
	border-top: 0;
	border-left-width: 1px;
}

.wgo-xsmall .wgo-player-wrapper .wgo-box-title::after {
	content: ' ';
	margin-top: 7px;
	width: 14px;
	height: 14px;
	border-radius: 7px;
}

/*--- /Player box -----------------------------------------------------------------------*/

/*--- Comments box ----------------------------------------------------------------------*/

.wgo-comments-wrapper {
	overflow: auto;
	margin: 0 0 0 0;
	height: 100%;
	position: relative;
	box-sizing: border-box;
}

.wgo-comments-content {
	padding: 3px 5px;
	border: 1px solid rgba(200,200,200,0.3);
	background-color: rgba(255,255,255,0.3);
	border-radius: 2px;
	overflow-y: auto;
}

.wgo-comments-content p {
	font-size: 0.9em;
	margin: 0.5em 0;
}

.wgo-help { 
	background-color: rgba(236, 226, 216, 0.90);
	padding: 1px 7px;
	margin-bottom: 5px;
}

.wgo-notification { 
	background-color: rgba(16, 16, 16, 0.95);
	color: white;
	padding: 1px 7px;
	margin-bottom: 5px;
}

.wgo-commentbox .wgo-box-title {	
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 24px;
}

.wgo-commentbox .wgo-box-title::after {
	content: '\e800';
	font-family: "wgo-icons";
	float: right;
	font-weight: normal;
	font-size: 0.9em;
	padding-top: 4px;
	width: 22px;
	text-align: center;
}

.wgo-commentbox.wgo-gameinfo .wgo-box-title::after {
	content: '\e801';
	padding-top: 2px;
}

.wgo-comments-nick {
	color: rgba(0,0,0,0.75);
}

a.wgo-move-link { 
	text-decoration: none; 
	border-bottom:1px dotted; 
}

/* right and left modifications */

.wgo-player-right .wgo-comments-content, .wgo-player-left .wgo-comments-content {
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 10px;
	top: 40px;
}

.wgo-player-right .wgo-commentbox, .wgo-player-left .wgo-commentbox {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 10px;
	top: 170px;
}

/* top and bottom modifications */

.wgo-player-top .wgo-comments-content, .wgo-player-bottom .wgo-comments-content {
	position: absolute;
	left: 40px;
	right: 0;
	top: 0;
	bottom: 0;
	
}

/* TODO: handle too long title */
.wgo-player-top .wgo-commentbox .wgo-box-title, .wgo-player-bottom .wgo-commentbox .wgo-box-title { 
	transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	position: absolute;
	left: -50px;
	top: 55px;
}

.wgo-player-top .wgo-comments-wrapper, .wgo-player-bottom .wgo-comments-wrapper {
	margin-top: 10px;
	height: 150px;
}

/* game info table */

.wgo-commentbox .wgo-info-list {
	display: table;
	width: 100%;
}

.wgo-commentbox .wgo-info-title {
	display: table-caption;
	font-weight: 600;
	border-bottom: 2px solid rgba(200, 200, 200, 0.3);
	padding: 2px 0;
}

.wgo-commentbox .wgo-info-item {
	display: table-row;
}

.wgo-commentbox .wgo-info-label, .wgo-commentbox .wgo-info-value {
	display: table-cell;
	border-bottom: 1px solid rgba(200, 200, 200, 0.3);
	padding: 2px 15px 2px 0;
}

.wgo-commentbox .wgo-info-label {
	color: #000;
}

.wgo-commentbox .wgo-info-value {
	color: #4c4c4c;
}

/* in gameinfo, last row is without border*/
.wgo-commentbox.wgo-gameinfo .wgo-info-item:last-child .wgo-info-label, .wgo-commentbox.wgo-gameinfo .wgo-info-item:last-child .wgo-info-value {
	border-bottom: 0;
}

/*--- /Comments box ----------------------------------------------------------------------*/

/*--- Control box ------------------------------------------------------------------------*/

.wgo-player-control {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.wgo-control-wrapper {
	width: 100%;
	text-align: center;
}

.wgo-ctrlgroup-left {
	float: left;
}

.wgo-ctrlgroup-right {
	float: right;
}

.wgo-ctrlgroup-control {
	margin: 0 auto;
}

/* button widget */

button.wgo-button {
	border: 1px solid rgba(200,200,200,0.3);
	border-radius: 2px;
	background-color: rgba(255,255,255,0.3);
	width: 44px;
	height: 44px;
	margin: 0 3px;
	vertical-align: middle;
}

button.wgo-button:not([disabled]):hover, 
input[type="text"].wgo-player-mn-value:focus {
	background-color: rgba(255,255,255,0.45);
	border: 1px solid rgba(100,100,100,0.3);
	box-shadow: 0 0 20px 0 rgba(150,150,150,0.5);
}

button.wgo-button.wgo-selected {
	background-color: rgba(255,255,255,0.6);
	border: 1px solid rgba(0,0,0,0.5);
}

button.wgo-button.wgo-selected:hover {
	background-color: rgba(255,255,255,0.7);
	border: 1px solid rgba(0,0,0,0.7);
}

.wgo-button::before {
	font-family: "wgo-icons";
	font-size: 36px;
	display: inline-block;
}

.wgo-button[disabled]::before, input[type="text"].wgo-player-mn-value[disabled] {
	color: rgba(64,64,64,0.5);
}

.wgo-button:not([disabled]):active::before {
	position: relative;
	top: 1px;
	left: 1px;
}

.wgo-button-first::before, .wgo-button-multiprev::before, .wgo-button-previous::before  {
	transform: scaleX(-1);
	-moz-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	-ms-transform: scaleX(-1);
}

.wgo-button-first::before {
	content: '\e81a';
}

.wgo-button-multiprev::before {
	content: '\e817';
	margin-left: -5px;
}

.wgo-button-previous::before {
	content: '\e80c';
}

.wgo-button-next::before {
	content: '\e80c';
}

.wgo-button-multinext::before {
	content: '\e817';
}

.wgo-button-last::before {
	content: '\e81a';
}

.wgo-button-menu::before  {
	content: '\e81b';
	font-size: 25px;
	font-weight: normal;
	padding-top: 5px;
}
.wgo-button-about::before  {
	content: '\e80f';
	font-size: 30px;
	font-weight: normal;
}

/* move number widget */

input[type="text"].wgo-player-mn-value  {
	border: 1px solid rgba(200,200,200,0.3);
	border-radius: 2px;
	background-color: rgba(255,255,255,0.3);
	width: 28px;
	font-weight: bold;
	font-size: 15px;
	text-align: center;
	display: inline-block;
	vertical-align: middle;
	outline: 0;
}

.wgo-player-mn-wrapper {
	display: inline-block;
	width: 38px;
	text-align: center;
}

/* top and bottom modifications */

.wgo-player-top .wgo-player-control {
	padding-bottom: 5px;
}

.wgo-player-bottom .wgo-player-control {
	padding-top: 5px;
}

/* display less buttons */

.wgo-440 .wgo-button-multiprev, 
.wgo-440 .wgo-button-multinext {
	display: none;
}

.wgo-340 .wgo-button-multiprev, 
.wgo-340 .wgo-button-multinext, 
.wgo-340 .wgo-button-first, 
.wgo-340 .wgo-button-last {
	display: none;
}

/*--- /Control box ------------------------------------------------------------------------*/

/*--- Control menu -------------------------------------------------------------------------*/

.wgo-player-menu {
	border: 1px solid rgba(0,0,0,0.5);
	z-index: 900;
	margin-top: -1px;
	box-shadow: 0 0 20px 0 rgba(127,127,127,0.5);
	font-weight: bold;
	color: #292929;
	text-align: left;
}

.wgo-menu-item {
	padding: 5px 10px 5px 5px;
	background-color: rgba(255,255,255,0.85);
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 25px;
}

.wgo-menu-item:not(.wgo-disabled):hover {
	background-color: rgba(225,225,225,0.85);
}

.wgo-menu-item::before {
	content: ' ';
	font-family: "wgo-icons";
	color: #000;
	width: 20px;
	display: inline-block;
	font-weight: normal;
}

.wgo-menu-item.wgo-selected::before {
	content: '\e813';
}

.wgo-menu-item.wgo-disabled {
	color: #888;
	cursor: Default;
}

.wgo-menu-item.wgo-disabled::before {
	color: #888;
}

/*--- /Control menu -------------------------------------------------------------------------*/

/*--- Overlay window ----------------------------------------------------------------------*/

.wgo-info-overlay {
	position: absolute;
	z-index: 1000;
}

.wgo-info-message {
	margin: 15% auto;
	min-height: 50%;
	max-height: 70%;
	min-width: 50%;
	max-width: 70%;
	background-color: rgba(240,255,250,0.95);
	overflow: auto;
	padding: 20px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	color: #002000;
	box-shadow: 0px 0px 50px 5px #F0FFF0;
	border: 1px solid #333;
	position: relative;
}

.wgo-info-message a {
	color: #F0FFFF0 !important;
}

.wgo-info-message h1 {
	font-size: 2em !important;
	color: #002000 !important;
	font-weight: bold !important;
	margin: 0 0 20px 0 !important;
	padding: 0 !important;
}

.wgo-info-close {
	position: absolute;
	top: 5px;
	right: 10px;
	font-size: 10px;
}

/*--- /Overlay window ----------------------------------------------------------------------*/

/*--- Permalinks ---------------------------------------------------------------------------*/

input[type="text"].wgo-permalink {
	padding: 7px 10px !important;
	border: 1px solid white !important;
	color: #F0FFF0 !important;
	width: 100% !important;
	background-color: #002000 !important;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

/*--- /Permalinks ---------------------------------------------------------------------------*/
