angp4o/dabblet.css

## dabblet.css
/**
 * BMW Logo
 */
body{
background: #fff;
}
.border{
position: absolute;
width: 600px;
height: 600px;
top: 50px;
left: 650px;
border-radius: 300px;
background: linear-gradient (45deg, #666, #fff, #666);
box-shadow: 1px 1px 2px #333;
}
.out-circle{
position: absolute;
width: 580px;
height: 580px;
top: 10px;
left: 10px;
border-radius: 290px;
background: linear-gradient (top left, #999, #000 60%);
box-shadow: inset 1px 1px 2px #333;
}
.in-circle{
position: absolute;
width: 346px;
height: 346px;
top: 117px;
left: 117px;
border-radius: 173px;
background: linear-gradient (top left, #666, #fff);
box-shadow: -1px -1px 2px #333;
}
.center1 {
position: absolute;
width: 160px;
height: 160px;
top: 9px;
left: 9px;
border-radius: 160px 0 0 0;
background: linear-gradient (top left, #fff, #4a93ca 90%);
box-shadow: inset -2px -2px 5px #333;
}
.center2 {
position: absolute;
width: 160px;
height: 160px;
top: 9px;
left: 177px;
border-radius: 0 160px 0 0;
background: #fff;
box-shadow: inset -2px -2px 5px #333;
}

.center3 {
position: absolute;
width: 160px;
height: 160px;
top: 177px;
left: 177px;
border-radius: 0 0 160px 0;
background: linear-gradient (top left, #fff 10%, #4a93ca);
box-shadow: inset -2px -2px 5px #333;
}
.center4 {
position: absolute;
width: 160px;
height: 160px;
top: 177px;
left: 9px;
border-radius: 0 0 0 160px;
background-color: #fff;
box-shadow: inset -2px -2px 5px #333;
}

## dabblet.html
<body>
<div class="border">
	<div class="out-circle">
		<div class="b">B</div>
		<div class="m">M</div>
		<div class="w">W</div>
		<div class="in-circle">
			<div class="center1"></div>
			<div class="center2"></div>
			<div class="center3"></div>
			<div class="center4"></div>
		</div>
	</div>
</div>
</body>

## dabblet.js
// alert('Hello world!');

## settings.json
{"view":"separate","fontsize":"100","seethrough":"1","prefixfree":"1","page":"css"}
	/**
	* BMW Logo
	*/
	body{
	background: #fff;
	}
	.border{
	position: absolute;
	width: 600px;
	height: 600px;
	top: 50px;
	left: 650px;
	border-radius: 300px;
	background: linear-gradient (45deg, #666, #fff, #666);
	box-shadow: 1px 1px 2px #333;
	}
	.out-circle{
	position: absolute;
	width: 580px;
	height: 580px;
	top: 10px;
	left: 10px;
	border-radius: 290px;
	background: linear-gradient (top left, #999, #000 60%);
	box-shadow: inset 1px 1px 2px #333;
	}
	.in-circle{
	position: absolute;
	width: 346px;
	height: 346px;
	top: 117px;
	left: 117px;
	border-radius: 173px;
	background: linear-gradient (top left, #666, #fff);
	box-shadow: -1px -1px 2px #333;
	}
	.center1 {
	position: absolute;
	width: 160px;
	height: 160px;
	top: 9px;
	left: 9px;
	border-radius: 160px 0 0 0;
	background: linear-gradient (top left, #fff, #4a93ca 90%);
	box-shadow: inset -2px -2px 5px #333;
	}
	.center2 {
	position: absolute;
	width: 160px;
	height: 160px;
	top: 9px;
	left: 177px;
	border-radius: 0 160px 0 0;
	background: #fff;
	box-shadow: inset -2px -2px 5px #333;
	}

	.center3 {
	position: absolute;
	width: 160px;
	height: 160px;
	top: 177px;
	left: 177px;
	border-radius: 0 0 160px 0;
	background: linear-gradient (top left, #fff 10%, #4a93ca);
	box-shadow: inset -2px -2px 5px #333;
	}
	.center4 {
	position: absolute;
	width: 160px;
	height: 160px;
	top: 177px;
	left: 9px;
	border-radius: 0 0 0 160px;
	background-color: #fff;
	box-shadow: inset -2px -2px 5px #333;
	}
	<body>
	<div class="border">
	<div class="out-circle">
	<div class="b">B</div>
	<div class="m">M</div>
	<div class="w">W</div>
	<div class="in-circle">
	<div class="center1"></div>
	<div class="center2"></div>
	<div class="center3"></div>
	<div class="center4"></div>
	</div>
	</div>
	</div>
	</body>