paco_sako/css/chess.css

body {
	 font-family: 'Roboto', sans-serif;
}

h1 {
	 font-family: 'Vollkorn', serif;
	 font-size: 2em;
	 margin-bottom: 0;
}

button:disabled .silhouette {
	 fill: #c0c0c0;
}

.screen-reader {
	 height: 1px;
	 overflow: hidden;
	 position: absolute;
	 width: 1px;
}

#content {
	 display: flex;
	 flex-flow: row nowrap;
}

/*@media only screen and (max-width: 8in) {*/
@media only screen and (max-aspect-ratio: 4/3) {
	 #content {
			flex-flow: column nowrap;
	 }
}

#cb_outer {
	 width: 100%;
	 max-width: calc(100vh - 4em);
}

#cb_container {
	 position: relative;
	 width: 100%;
	 padding-top: 100%;
}

#cb_inner {
	 position: absolute;
	 top: 0;
	 left: 0;
	 bottom: 0;
	 right: 0;
}

#cb_board {
	 position: relative;
	 width: 100%;
	 height: 100%;
	 border: 1px solid black;
	 border-collapse: collapse;
	 padding-top: 100%;
}

#cb_board tr {
	 position: relative;
}

#cb_board td {
	 background-clip: padding-box;
	 position: relative;
}

#cb_light_name, #cb_dark_name {
	 width: 8em;
}

#cb_control_container {
	 margin-left: 1em;
}

#cb_controls, #cb_names, #cb_game, #cb_navigate {
	 margin-top: 0.5em;
}

#cb_history {
	 max-width: 7.5in;
}

#cb_reset, #cb_pass {
	 display: none;
}

.cb-square {
	 position: relative;
	 width: calc((100% - 16pt) / 8);
	 height: calc((100% - 16pt) / 8);
	 border: 1px solid black;
	 padding: 0;
}

.cb-horiz-label {
	 position: relative;
	 width: calc((100% - 16pt) / 8);
	 height: 8pt;
	 border: 1px solid black;
	 padding: 0;
}

.cb-horiz-label div {
	 position: absolute;
	 top: calc(50% - (1em / 2));
	 left: 0;
	 bottom: 0;
	 right: 0;
	 font-size: 6pt;
	 line-height: 6pt;
	 text-align: center;
}

.cb-vert-label {
	 position: relative;
	 width: 8pt;
	 height: calc((100% - 16pt) / 8);
	 border: 1px solid black;
	 padding: 0;
}

.cb-vert-label div {
	 position: absolute;
	 top: calc(50% - (1em / 2));
	 left: 0;
	 bottom: 0;
	 right: 0;
	 font-size: 6pt;
	 line-height: 6pt;
	 text-align: center;
	 vertical-align: middle;
}

.cb-archive .cb-horiz-label, .cb-archive .cb-vert-label, .cb-archive .cb-corner {
	 background-color: #ffeeee;
}

.cb-lt-bg {
	 background-color: #FFFFF0;
}

.cb-lt-bg.cb-start, .cb-lt-bg.cb-end {
	 background-color: #CCFFC0;
}

.cb-lt-bg.cb-legal {
	 background-color: #E6E6F2;
}

.cb-dk-bg {
	 background-color: #F5DEB3;
}

.cb-dk-bg.cb-start, .cb-dk-bg.cb-end {
	 background-color: #D0E398;
}

.cb-dk-bg.cb-legal {
	 background-color: #C4B2C2;
}

.cb-phantom {
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 background-color: rgba(128,128,128,0.5);
}

.cb-dk-piece {
	 position: absolute;
	 top: 17.5%;
	 left: 47.5%;
	 width: 55%;
	 height: 65%;
}

.cb-lt-piece {
	 position: absolute;
	 top: 17.5%;
	 left: -2.5%;
	 width: 55%;
	 height: 65%;
}

#cb_phantom > .cb-dk-piece {
	 top: 22.5%;
	 left: 22.5%;
}

#cb_phantom > .cb-lt-piece {
	 top: 22.5%;
	 left: 22.5%;
}

.noselect {
	 cursor: default;
	 -webkit-touch-callout: none;
	 -webkit-user-select: none;
	 -khtml-user-select: none;
	 -moz-user-select: none;
	 -ms-user-select: none;
	 user-select: none;
}

#cb_board .cb-piece.ui-draggable {
	 cursor: grab;
}

#cb_board .cb-piece.ui-draggable-disabled {
	 cursor: default;
}