*{
	margin: 0px; padding: 0px;
}

body{
	background-color: #ccc;
}

#window{
	width: 320px;
	height: 416px;
}
#window.landscape{
	height: 268px;
	width: 480px;
}

.dot, .dot-l, .dot-c{
	height: 6px;
	width: 6px;
	background: none;
	position: absolute;
}

.dot-c{
	background-color: #00f;
}

.dot-l{
	background-color: #ff0;
}


.score-red, .score-blue, .score-green,
.landscape .score-red, .landscape .score-blue, .landscape .score-green{
	font: 12px Arial;
	color: white;
	cursor: pointer;
	float: left;
	border: 1px solid #666;
	text-align: center;
}

.score-red, .score-blue, .score-green{
	padding: 10px 6px;
	margin: 6px 15px 2px;
	width: 60px;
}

.landscape .score-red, .landscape .score-blue, .landscape .score-green{
	width: 35px;
	height: 40px;
	margin: 6px 4px 2px;
	padding: 4px;
}

.score-red{
	background-color: #c30;
}
.score-blue{
	background-color: #036;
}	
.score-green{
	background-color: #360;
}
.active{
	border: 4px solid white;
}

img#board{
	float: left;
	padding: 6px;
}

#counter{
	float: left;
	width: 107px;
	margin: 3px 3px;
}
.landscape #counter{
	float: left;
	width: 470px;
	margin: 3px 5px;
}

.point, .point-c, .landscape .point, .landscape .point-c{
	width: 23px;
	height: 17px;
	float: left;
	border: 2px solid #999;
	font: 12px Arial;
	padding: 3px;
	color: #fff;
	text-align: center;
	cursor: pointer;
}

.landscape .point, .landscape .point-c{
	width: 20px;
}

.point-c{
	background-color: #ccc;
}

#two{
	width: 56px;
}

.landscape #two{
	width: 50px;
}

.active-red{
	background-color: #c30;
}
.active-blue{
	background-color: #036;
}	
.active-green{
	background-color: #360;
}