@CHARSET "ISO-8859-1";

body
{
}

.td
{
	overflow: hidden;
}

#viewport
{
	text-align: center; /* to center the board */
	margin-top: 10px;
}

#board
{
	/* colors */
	background-color: gray;
	
	/* borders */
	border-width: thick;
	border-color: orange;
	border-style: double;
	
	/* auto needed for board to stay centered */
	margin-left : auto;
	margin-right: auto;
}

.rank
{
}

.black-square 
{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border-width: 0px;
    height: 52px;
    width : 52px;
    text-align: center;
    background-color: orange;
}

.white-square 
{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border-width: 0px;
    height: 52px;
    width : 52px;
    text-align: center;
    background-color: yellow;
}

.black-square-highlited
{
    padding: 0px 0px 0px 0px;
    height: 46px;
    width : 46px;
    background-color: orange;
    border-style: inset;
    border-width: 3px;
    border-color: #E6E6E6;

    /* hack for IE versions < 7 */
    _height: 52px;
    _width:  52px;
}

.white-square-highlited
{
    padding: 0px 0px 0px 0px;
    height: 46px;
	width : 46px;
	text-align: center;
	background-color: yellow;
	border-style: inset;
	border-width: 3px;
	border-color: #E6E6E6;

    /* hack for IE versions < 7 */
    _height: 52px;
    _width:  52px;
}

.piece
{
	margin-top: 3px;
}