#cb_outer2 {
	 max-width: 80vmin;
}

#cb_outer {
	 max-width: 6in;
}

#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-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-lt-bg {
	 background-color: #FFFFF0;
}

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

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

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

.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_phantom > .cb-dk-piece {
	 left: 22.5%;
}

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

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