
/*
 * CSS for the Frontend of Chessgame Shizzle.
 */


/* Form */

#cs_new_chessgame .input {
	margin-bottom: 20px;
}
#cs_new_chessgame textarea {
	height: 200px;
}
#cs_new_chessgame input[type="text"],
#cs_new_chessgame textarea {
	width: 90%;
}
#cs_new_chessgame input#cs_result,
#cs_new_chessgame select.cs_result_ajax {
	width: 90px;
}

/* Help */
div.cs_chessgame_form_help {
	width: 200px;
}
div.cs_chessgame_form_help_inside {
	display: none;
}
div.cs_chessgame_form_help_inside span {
	display: inline-block;
	width: 200px;
}


/* Messages / Notices */

#cs_messages_top_container #cs_messages,
.cs-simple-list-search-message {
	border-left: 4px solid #7ad03a;
	box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.1);
	padding: 1px 12px;
	margin: 5px 0 15px;
}
.cs-simple-list-search-message {
	margin-top: 20px;
}
#cs_messages_top_container #cs_messages.error,
.cs-simple-list-search-message.error {
	border-left: 4px solid #dd3d36;
}

#cs_new_chessgame .error p {
	margin: 0.5em 0;
	padding: 2px;
}


/* Single Post */
.cs_chessgame_meta {
	padding-bottom: 10px
}
span.cs_chessgame_meta_header {
	cursor: pointer;
}
.cs-chessgame-players .cs-icon-color {
	display: inline-block;
	height: 16px;
	width: 16px;
	background-color: #fff;
	border: 1px solid #000;
	margin-right: 8px;
}
.cs-chessgame-players .cs-icon-color.cs-black {
	background-color: #000;
	border: 1px solid #fff;
	margin-right: 8px;
}

.cs_chessgame_meta_inside {
	display: none;
}
.cs_chessgame_meta_inside div.cs-chessgame-button-row input {
	margin-top: 10px;
}
img.cs-chessgame-fen-image-png {
	padding: 10px 0 10px 0;
}
input#cs-chessgame-show-fen {
	width: 100%;
}

.cs_chessgame_pgn.chessboard-wrapper {
	width: 500px;
}
.cs_chessgame_pgn.chessboard-wrapper #GameText {
	overflow: hidden auto;
	height: 250px;
	width: 100%;
}

/* Puzzle */

.chessboard-wrapper #GamePuzzleTask {
	display: none;
}
.chessboard-wrapper.cs-puzzle #GameButtons,
.chessboard-wrapper.cs-puzzle #GameText {
	display: none;
}
.chessboard-wrapper.cs-puzzle #GamePuzzleTask {
	display: block;
}
.chessboard-wrapper.cs-puzzle .cs-icon-color {
	display: inline-block;
	height: 16px;
	width: 16px;
	background-color: #fff;
	border: 1px solid #000;
	margin-right: 8px;
}
s

/* Extra Buttons for Lessons */
.cs-buttons {
	padding-top: 20px;
}


/* Simple List */

.cs-simple-list .cs-date {
	color: gray;
}

/* Search in simple list */
.cs-simple-list-form-container {
	padding-bottom: 20px;
}
form.cs-simple-list-search {
	padding-top: 20px;
}

/* Page Navigation for Simple List */

.cs-simple-list .page-navigation {
	width: 100%;
	text-align: left;
	padding: 20px 0;
}

.cs-simple-list .page-navigation a,
.cs-simple-list .page-navigation span {
	display: inline-block;
	padding: 0px 6px;
	margin-left: 0;
	color: #555;
	border: 1px solid #efefef;
	text-decoration: none;
	box-shadow: none;
}

/* Current page */
.cs-simple-list .page-navigation a:hover,
.cs-simple-list .page-navigation span.current {
	background: #eee;
	color: #000;
	opacity: 0.8;
	border: 1px solid #ddd;
}
.cs-simple-list .page-navigation span.dots {
	padding: 0px 3px;
	color: #555;
}

/* Border-radius for whole pagination. */
.cs-simple-list .page-navigation a:nth-child(2),
.cs-simple-list .page-navigation span:nth-child(2) {
	border-radius: 3px 0 0 3px;
}
.cs-simple-list .page-navigation a:last-child,
.cs-simple-list .page-navigation span:last-child {
	border-radius: 0 3px 3px 0;
}


/* Iframe extended */

html iframe.cs-iframe-extended,
html body.cs-iframe-extended,
html body.cs-iframe-extended .cs_chessgame_pgn.chessboard-wrapper {
	height: 800px;
	max-height: 800px;
}
body.cs-iframe-extended .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
/* Due to CSP this might not download in an iframe in the future.
body.cs-iframe-extended .cs-chessgame-download {
	display: none;
} */


/* Iframe */

iframe.cs-iframe {
	border-width: 0;
	margin: 0;
	padding: 0;
	height: 344px;
	max-height: 344px;
	width: 300px;
	max-width: 300px;
	overflow: hidden;
}
body.cs-iframe {
	border-width: 0;
	margin: 0;
	padding: 0;
	width: 258px;
	max-width: 258px;
	height: 344px;
	max-height: 344px;
	overflow: hidden;
}
body.cs-iframe .cs_chessgame_pgn.chessboard-wrapper {
	width: 258px;
	max-width: 258px;
	height: 300px;
	max-height: 300px;
}
body.cs-iframe .cs_chessgame_pgn.chessboard-wrapper .boardTable {
	border-width: 0;
	margin: 0;
	padding: 0;
	width: 258px;
	max-width: 258px;
	height: 258px;
	max-height: 258px;
}

body.cs-iframe #GameBoard .boardTable tr td {
	padding: 1px;
}

body.cs-iframe #GameBoard .boardTable img.pieceImage {
	width: 30px;
	max-width: 30px;
	height: 30px;
	max-height: 30px;
}

body.cs-iframe .whiteSquare,
body.cs-iframe .blackSquare,
body.cs-iframe .highlightWhiteSquare,
body.cs-iframe .highlightBlackSquare {
	width: 20px;
	max-width: 20px;
	height: 20px;
	max-height: 20px;
}
body.cs-iframe #GameButtons {
	margin-top: 20px;
}
body.cs-iframe #GameButtons table {
	width: 258px;
	max-width: 258px;
	border: none;
}
body.cs-iframe #GameButtons table tr td {
	padding: 0;
}
body.cs-iframe #GameButtons table tr td input {
	width: 45px;
	margin-right: 8px;
	border: none;
	cursor: pointer;
}
/* Only simple iframe shows no GameText (except simple iframe puzzle) */
body.cs-iframe .cs-chessgame-iframe #GameText {
	display: none;
}
body.cs-iframe img.cs-chessgame-fen-image-png {
	max-width: 258px;
	max-height: 258px;
}

body.cs-iframe #GameText {
	overflow: hidden auto;
	height: 250px;
	width: 100%;
}


/* Board Themes */

/* 365chess.com lila */
.cs-boardtheme-365chess #GameButtons table tr td input {
	background-color: #7186B8;
}

/* Bamboo */
.cs-boardtheme-bamboo #GameButtons table tr td input {
	background-color: #dfc8b6;
}

/* Beyer */
.cs-boardtheme-beyer #GameButtons table tr td input {
	background-color: #aaaaaa;
	background-image: url("../boardthemes/beyer.png");
	background-size: contain;
}

/* Blogger */
.cs-boardtheme-blogger #GameButtons table tr td input {
	background-color: #cfcbb3;
}

/* Blue */
.cs-boardtheme-blue #GameButtons table tr td input {
	background-color: #8ca2ad;
}

/* Burl */
.cs-boardtheme-burl #GameButtons table tr td input {
	background-color: #bf8f5f;
}

/* Chess.com blue */
.cs-boardtheme-chesscom_blue #GameButtons table tr td input {
	background-color: #4c6d92;
}

/* Chess.com green */
.cs-boardtheme-chesscom_green #GameButtons table tr td input {
	background-color: #769656;
}

/* Chessonline */
.cs-boardtheme-chessonline #GameButtons table tr td input {
	background-color: #deb887;
}

/* chesstempo.com grey */
.cs-boardtheme-chesstempo_grey #GameButtons table tr td input {
	background-color: #aaa;
}

/* Coffee_bean */
.cs-boardtheme-coffee_bean #GameButtons table tr td input {
	background-color: #d4aa70;
}

/* Ebony_pine */
.cs-boardtheme-ebony_pine #GameButtons table tr td input {
	background-color: #bca07b;
}

/* Executive */
.cs-boardtheme-executive #GameButtons table tr td input {
	background-color: #dac6a5;
}

/* Falken */
.cs-boardtheme-falken #GameButtons table tr td input {
	background-color: #636b6a;
}

/* Informator */
.cs-boardtheme-informator #GameButtons table tr td input {
	background-color: #aaaaaa;
}

/* Joomla extension white-grey */
.cs-boardtheme-joomla #GameButtons table tr td input {
	background-color: #e0e0e0;
}

/* Lichess.org brown */
.cs-boardtheme-lichess #GameButtons table tr td input {
	background-color: #b58863;
}

/* Magazine */
.cs-boardtheme-magazine #GameButtons table tr td input {
	background-image: url("../../thirdparty/boardthemes/magazine.png");
	background-size: contain;
}

/* Marble */
.cs-boardtheme-marble #GameButtons table tr td input {
	background-color: #eeeeee;
}

/* Marble_blue */
.cs-boardtheme-marble_blue #GameButtons table tr td input {
	background-image: url("../../thirdparty/boardthemes/marble_blue_black.png");
	background-size: contain;
}

/* Marble_green */
.cs-boardtheme-marble_green #GameButtons table tr td input {
	background-color: #e2e7e1;
}

/* New in Chess */
.cs-boardtheme-newinchess #GameButtons table tr td input {
	background-color: #ddd2bc;
}

/* pgn4web */
.cs-boardtheme-pgn4web #GameButtons table tr td input {
	background-color: #C6CEC3;
}

/* PGNviewer_YUI */
.cs-boardtheme-pgnviewer_yui #GameButtons table tr td input {
	background-color: #EDD6C2;
}

/* Shredderchess */
.cs-boardtheme-shredderchess #GameButtons table tr td input {
	background-color: #B5BDCE;
}

/* Tornelo */
.cs-boardtheme-tornelo #GameButtons table tr td input {
	background-color: #85c9e2;
}

/* Wenge */
.cs-boardtheme-wenge #GameButtons table tr td input {
	background-color: #e8cdbc;
}

/* Wikipedia */
.cs-boardtheme-wikipedia #GameButtons table tr td input {
	background-color: #d18b47;
}

/* Wood */
.cs-boardtheme-wood #GameButtons table tr td input {
	background-color: #cfa88b;
}

/* Zeit */
.cs-boardtheme-zeit #GameButtons table tr td input {
	background-color: #6494b1;
}



.cs-simple-list h2.cs-title {
	text-align: center;
	max-width: 258px;
	line-height: 21px;
	font-size: 13px;
	margin: 5px 0;
	padding-top: 2px;
	font-family: sans-serif;
}


/*
 * Lesson
 */

.cs-lesson-form-container {
	padding: 20px 0;
}

form.cs-lesson-buttons input {
	display: inline-block;
	margin-right: 20px;
}

form.cs-lesson-filters,
form.cs-lesson-postid,
form.cs-lesson-search {
	margin: 20px 0;
	padding: 20px;
	border: solid 1px #c3c4c7;
}

input.cs-lesson-filters-apply,
input.cs-lesson-show-postid,
input.cs-lesson-search-submit {
	margin: 20px 0 0;
}

td.cs-chessgame-search-results table {
	margin: 20px 0 10px 0;
}
td.cs-chessgame-search-results tr {
	border-color: #ccc;
	border-width: 1px 1px 1px 4px;
	border-style: solid;
}
td.cs-chessgame-search-results th,
td.cs-chessgame-search-results td {
	padding: 6px;
}



/* Different size of the board from other iframes (default pgn4web size really) */
html iframe.cs-iframe-extended.cs-lesson,
html body.cs-iframe-extended.cs-lesson,
html body.cs-iframe-extended.cs-lesson .cs_chessgame_pgn.chessboard-wrapper,
html body.cs-iframe-extended.cs-lesson .cs_chessgame_pgn.chessboard-wrapper .boardTable {
	height: 900px;
	max-height: 900px;
}
iframe.cs-iframe.cs-lesson {
	height: 900px;
	max-height: 900px;
	width: 500px;
	max-width: 500px;
}
body.cs-iframe.cs-lesson {
	width: 500px;
	max-width: 500px;
	height: 900px;
	max-height: 900px;
	overflow-y: scroll;
}
body.cs-iframe.cs-lesson .cs_chessgame_pgn.chessboard-wrapper {
	width: 500px;
	max-width: 500px;
	overflow-y: scroll;
}
body.cs-iframe.cs-lesson .cs_chessgame_pgn.chessboard-wrapper .boardTable {
	width: 500px;
	max-width: 500px;
}
body.cs-iframe.cs-lesson #GameBoard .boardTable img.pieceImage {
	width: 50px;
	max-width: 50px;
	height: 50px;
	max-height: 50px;
}
body.cs-iframe.cs-lesson .whiteSquare,
body.cs-iframe.cs-lesson .blackSquare,
body.cs-iframe.cs-lesson .highlightWhiteSquare,
body.cs-iframe.cs-lesson .highlightBlackSquare {
	width: 28px;
	max-width: 28px;
	height: 28px;
	max-height: 28px;
}
body.cs-iframe.cs-lesson #GameButtons table {
	width: 500px;
}
body.cs-iframe.cs-lesson #GameButtons table tr td input {
	width: 80px;
}


/* Print Style */

@media print {

	/* Do not show buttons */
	html body div.cs_chessgame_meta .cs_chessgame_meta_header,
	html body div.cs-chessgame-players .cs-icon-color,
	html body .chessboard-wrapper div#GameButtons {
		display: none;
	}

	/* Keep exact background-color for board table when printing. */
	html body table#boardTable .whiteSquare {
		print-color-adjust: exact !important;
	}
	html body table#boardTable .blackSquare {
		print-color-adjust: exact !important;
	}

}


/* Styles for mobile phones */
@media only screen and (max-width: 650px) {

	/* wrapper for the board and moves */
	.cs_chessgame_pgn.chessboard-wrapper {
		width: 250px;
	}
	/* board squares size */
	#GameBoard .boardTable img.pieceImage {
		width: 32px !important; height: 32px !important;
	}
	/* padding makes the piece on the square smaller */
	#GameBoard .boardTable tr td {
		padding: 1px !important;
	}
	/* table width for buttons */
	#GameButtons table {
		width: 200px;
	}
	/* inside buttons */
	#GameButtons table tr td {
		line-height: 15px;
		padding: 2px;
	}
	#GameButtons table tr td input {
		width: 47px;
		border: 1px solid #aaa;
		padding: 1px !important;
	}

	/* text */
	#GameText {
		height: 320px !important;
		width: 290px !important;
		line-height: 21px;
		text-align: justify;
		padding-right: 12px;
		overflow: auto;
		margin-bottom: 10px;
	}
	/* no margin between board and buttons*/
	#boardTable.boardTable {
		margin-bottom: 0px;
	}
	/* board */
	.boardTable {
		width: 256px !important;
		height: auto !important;
		border: 1px solid #404040 !important;
	}
	/* hide table borders */
	table, td {
		border: 0px !important;
	}

}

@media only screen and (max-width: 550px) {

	body.cs-iframe #GameButtons table tr td input {
		width: 38px;
		max-width: 38px;
	}

}
