@font-face 
{
 font-family: "CBArial";
 src: url("fonts/CBArialLink.eot"); 
}

@font-face 
{
 font-family: "CBArial";
 src: url("fonts/CBArialLink.ttf"); 
}

@font-face 
{
 font-family: "CBArial";
 src: url("fonts/CBArialLinkItalic.eot"); 
 font-style: italic;
}

@font-face 
{
 font-family: "CBArial";
 src: url("fonts/CBArialLinkItalic.ttf"); 
 font-style: italic;
}

@font-face 
{
 font-family: "CBArial";
 src: url("fonts/CBArialLinkBold.eot"); 
 font-weight: bold;
}

@font-face 
{
 font-family: "CBArial";
 src: url("fonts/CBArialLinkBold.ttf"); 
 font-weight: bold;
}

/*********************************************************************************************
cbBoard plugin.
*********************************************************************************************/
div.cbboard-layer
{
	position: relative;
	z-index: 0;
}

div.cbpiece
{
	position: absolute;
    width: 12.5%;
    height: 12.5%;

    -webkit-transition-property: -webkit-transform;
    -o-transition-property: transform;
    -moz-transition-property: transform;
    -ms-transition-property: transform;
    transition-property: transform;

    -webkit-transition-timing-function: ease;
    -o-timing-function: ease;
    -ms-timing-function: ease;
    -moz-timing-function: ease;
    transition-timing-function: ease;
	
	-webkit-filter: drop-shadow(2px 1px 1px rgba(0,0,0,0.3));
    filter: drop-shadow(2px 1px 1px rgba(0,0,0,0.3));
}

div.cbcol-sq
{
	position: absolute;
}

div.cbcol-green
{
	background-color: Green;
	background-color: rgba(0, 255, 0, 0.6);
}

div.cbcol-red
{
	background-color: Red;
	background-color: rgba(255, 0, 0, 0.6);
}

div.cbcol-yellow
{
	background-color: Yellow;
	background-color: rgba(255, 255, 0, 0.6);
}

/*Kann img oder canvas sein...*/
.cbcol-arrow
{
	position:absolute;
}

div.WK
{
	background-position: left top;
}

div.BK
{
	background-position: left bottom;
}

div.WP
{
	background-position: right top;
}

div.BP
{
	background-position: right bottom;
}

div.WR
{
	background-position: 80% top;
}

div.BR
{
	background-position: 80% bottom;
}

div.WB
{
	background-position: 60% top;
}

div.BB
{
	background-position: 60% bottom;
}

div.WN
{
	background-position: 40% top;
}

div.BN
{
	background-position: 40% bottom;
}

div.WQ
{
	background-position: 20% top;
}

div.BQ
{
	background-position: 20% bottom;
}

/*********************************************************************************************
cbNotation plugin.
*********************************************************************************************/

div.cbnota-container
{
	/*overflow: auto;*/
	font-family: Arial;
}

span.cbmove
{
	text-decoration: none;
	cursor: pointer;
	padding: 0px 2px 0px 2px;
	white-space: nowrap;
}

span.cbline
{
}

span.cbline[data-level="0"][data-commented="1"]
{
	font-weight: bold;
}

span.cbline[data-level="0"]
{
	display:block;
}

span.cbline[data-level="1"]
{
	display:block;
	font-weight:normal;
	margin-left: 2ex;
}

span.cbline[data-level="1"]:before
{
	content:"[";
}

span.cbline[data-level="1"]:after
{
	content:"]";
}

span.cbline[data-level="2"]
{
	font-style:italic;
}

span.cbline[data-level="2"]:before,
span.cbline[data-level="3"]:before,
span.cbline[data-level="4"]:before,
span.cbline[data-level="5"]:before,
span.cbline[data-level="6"]:before,
span.cbline[data-level="7"]:before,
span.cbline[data-level="8"]:before,
span.cbline[data-level="9"]:before,
span.cbline[data-level="10"]:before,
span.cbline[data-level="11"]:before,
span.cbline[data-level="12"]:before,
span.cbline[data-level="13"]:before,
span.cbline[data-level="14"]:before,
span.cbline[data-level="15"]:before
{
	content:"(";
}

span.cbline[data-level="2"]:after,
span.cbline[data-level="3"]:after,
span.cbline[data-level="4"]:after,
span.cbline[data-level="5"]:after,
span.cbline[data-level="6"]:after,
span.cbline[data-level="7"]:after,
span.cbline[data-level="8"]:after,
span.cbline[data-level="9"]:after,
span.cbline[data-level="10"]:after,
span.cbline[data-level="11"]:after,
span.cbline[data-level="12"]:after,
span.cbline[data-level="13"]:after,
span.cbline[data-level="14"]:after,
span.cbline[data-level="15"]:after
{
	content:")";
}

span.cbline[data-level="2"],
span.cbline[data-level="3"]
{
	display:block;
	margin-left: 1ex;
}

span.cbcomment
{
	font-weight:normal;
	font-style: normal;
}

span.cbspec-glyph
{
	font-family:"CBArial";
}

span.cbcol-marker
{
	/*content:url(res/col_marker.gif);*/
	background-image:url("data:image/gif;base64,R0lGODlhEAAQAKIAAAD/AP//AP8AAAAAAP///wAAAAAAAAAAACH5BAEAAAQALAAAAAAQABAAAAM2SLrcOjBK+ZwbVWgdeicYSGycF4giKZhniKks+pKx6wA4Lt85sDc9nw3Y+zGCRksFNGlClNAEADs=");
	background-repeat:no-repeat;
	vertical-align:top;
	width: 16px;
	height: 16px;
	display: inline-block;
}

span.cbgame-result
{
	display:block;
	font-weight: bold;
	padding: 1em 2px 0px 2px;
}

div.cbgame-header
{
	text-align:center;
	width: 100%;
	border-bottom: thin solid gray;
	margin-bottom: 1em;
	padding-bottom: 0.5em;
}

span.cbresult
{
	font-weight: bold;
	white-space:nowrap;
}

span.cbplayer
{
	font-weight: bold;
}

span.cbmain-header
{
	display:block;
	font-size: 120%;
}

span.cbeco
{
	font-weight:bold;
}

span.cbsite
{
	display: none;
	padding: 0px !important;
}

span.cbround:before
{
	content:"(";
}

span.cbround:after
{
	content:")";
}

span.cbannotator:before
{
	content:"[";
}

span.cbannotator:after
{
	content:"]";
}

span.cbannotator
{
	font-style:italic;
}

span.cbelo
{
	
}

div.cbgame-header span
{
	padding: 0 0.5ex 0 0.5ex;
}


/*********************************************************************************************
cbDiagram plugin.
*********************************************************************************************/

figure.cbdiag
{
	display: block;
}

.cbdiag-img
{
	margin: 1em auto 1em auto;
	display:block;
}

.cbdiag-left,
.cbdiag-right,
.cbdiag-down,
.cbdiag-up
{
	padding: 2px;
	border: thin none gray;
}

.cbdiag-left
{
	border-left-style: solid;
}

.cbdiag-right
{
	border-right-style: solid;
}

.cbdiag-down
{
	border-bottom-style: solid;
}

.cbdiag-up
{
	border-top-style: solid;
}

figure.cbdiag > figcaption
{
	font-style: normal;
	font-size: 80%;
	text-align: center;
	font-weight:normal;
	margin: 0.3em auto 0.3em auto;
	display:block;
	font-family: Arial;
}

.cbeval-root
{
	position: relative;
	width: 100%;
	height: 100px;
}

.cbeval-root .cbeval-img
{
	width: 100%;
	height: 100%;
}