@charset "utf-8";
/*Common classes*/
.select {
	background-color:#CCC;
}

.moving {
    z-index: 500;
}

.red {
	color: red;
}

.board {
	background-position:right;
	background-repeat:no-repeat;
    float: left;
    border: 1px solid #660000;
}

.start, 
.prev, 
.play, 
.next, 
.end {
	display: block;
	float: left;
	margin-left: 10px;
	cursor: pointer;
	background-image:url(images/control_small.png);	
}

.control {
    margin: 0 auto;
	padding-top: 10px;
}

.control a:hover {
	opacity: 0.6;
    filter: alpha(opacity = 60);
}

div.right {
	float: left;
	border: 1px solid #660000;
	width: 150px;
	overflow: scroll;
    padding-left: 5px;	
}

/* Normal mode */
.container {
	width: 850px;
}

.container .board {
    background-image:url(images/board.jpg);
	width: 650px;
    height: 550px;
}

.container .piece {
	width:55px;
	height:55px;
	position:absolute;
	background:url(images/pieces.png);
}

.container .hightlight {
	/*background-image:url(images/pieces_active.png);*/

}

.container .start, 
.container .prev, 
.container .play, 
.container .next, 
.container .end {
	width: 50px;
	height: 50px;
	background-image:url(images/control.png);	
}


.container .start {
	background-position: 0 -100px;
}

.container .end {
	background-position: 0 -150px;
}

.container .prev {
	background-position: 0 -50px;
}

.container .next {
	background-position: top right;
}

.container .control {
	width: 250px;
}


.container div.right {
	height: 550px;
}

/* Small mode */
.container_small .board {
    background-image:url(images/board_small.jpg);
	width: 460px;
    height: 385px;
}

.container_small {
	width: 620px;
}

.container_small .piece {
	width:40px;
	height:40px;
	position:absolute;
	background:url(images/pieces_small.png);
}

.container_small .hightlight {
	background-image:url(images/pieces_small_active.png);
}

.container_small .start, 
.container_small .prev, 
.container_small .play, 
.container_small .next, 
.container_small .end {
	width: 40px;
	height: 40px;
	background-image:url(images/control_small.png);	
}


.container_small .start {
	background-position: 0 -80px;
}

.container_small .end {
	background-position: 0 -120px;
}

.container_small .prev {
	background-position: 0 -40px;
}

.container_small .next {
	background-position: top right;
}

.container_small .control {
	width: 200px;
}

.container_small .control a:hover {
	opacity: 0.6;
}

.container_small div.right {
	height: 385px;
}