@charset "utf-8";
/* CSS Document */

#chal{
	width:45%;
	float:left;
}
#chal td{
	text-align:center;
}

#board{
	width:50%;
	height:auto;
	padding:0px;
	float:right;
	background-color:#CCC;
}



#fcb{
	width:480px;
	height:480px;
	float:left;
	border:1px #000 solid;
}
#fcb th{
	border:1px #000 solid;
}
#fcb td{
	width:60px;
	height:60px;
	//border:1px #000 solid;
	text-align:center;
}


@media only screen and (max-width: 1000px) {
	#board{
		width:1000px;
	}
	#fcb{
	width:480px;
	height:480px;
	}
	#fcb td{
	width:60px;
	height:60px;
	}
}

@media only screen and (max-width: 768px) {
	#board{
		width:768px;
	}
	#fcb{
	width:400px;
	height:400px;
	}
	#fcb td{
	width:50px;
	height:50px;
	}
}

@media only screen and (max-width: 480px) {
	#board{
		width:480px;
	}
	#fcb{
	width:480px;
	height:480px;
	}
	#fcb td{
	width:60px;
	height:60px;
	}
}

@media only screen and (max-width: 305px) {
	#board{
		width:296px;
	}
	#fcb{
	width:280px;
	height:280px;
	}
	#fcb td{
	width:35px;
	height:35px;
	}
}

#a8,#c8,#e8,#g8{
	background-color:#eee;
}
#b8,#d8,#f8,#h8{
	background-color:#0C0;
}

#b7,#d7,#f7,#h7{
	background-color:#eee;
}
#a7,#c7,#e7,#g7{
	background-color:#0C0;
}

#a6,#c6,#e6,#g6{
	background-color:#eee;
}
#b6,#d6,#f6,#h6{
	background-color:#0C0;
}

#b5,#d5,#f5,#h5{
	background-color:#eee;
}
#a5,#c5,#e5,#g5{
	background-color:#0C0;
}

#a4,#c4,#e4,#g4{
	background-color:#eee;
}
#b4,#d4,#f4,#h4{
	background-color:#0C0;
}

#b3,#d3,#f3,#h3{
	background-color:#eee;
}
#a3,#c3,#e3,#g3{
	background-color:#0C0;
}

#a2,#c2,#e2,#g2{
	background-color:#eee;
}
#b2,#d2,#f2,#h2{
	background-color:#0C0;
}

#b1,#d1,#f1,#h1{
	background-color:#eee;
}
#a1,#c1,#e1,#g1{
	background-color:#0C0;
}