@charset "UTF-8";
/* CSS Document */
html {
	overflow: scroll;
}
body {
	color: #888;
	background-color: #222;
}
a {
	color: inherit;
	text-decoration: none;
}
#db {
/*	position: fixed; */
	margin: 84px;
	padding: 8px;
	width: auto;
	height: 210px;
	border: thin dotted #333;
	border-radius: 8px;
	box-shadow: 2px 2px 2px #333;
}
#nam {
	margin: 20px 10px 40px;
	float: left;
	text-shadow: 1px 1px 1px #208;
	transform: rotateZ(-10deg);
	-o-transform: rotate(-10deg);
	-ms-transform: rotateZ(-10deg);
	-moz-transform: rotateZ(-10deg);
	-webkit-transform: rotateZ(-10deg);
}
.crlf {
	clear: both;
}
#block {
	z-index: 10;
	position: relative;
	top: 0;
	left: 30px;
	margin: 0;
	padding: 0;
	width: 100px;
	height: 100px;
	background-color: #06C;
	border: thin solid #06C;
	animation: rot8 12s 4;
	-o-animation: rot8 12s 4;
	-ms-animation: rot8 12s 4;
	-moz-animation: rot8 12s 4;
	-webkit-animation: rot8 12s 4;
}
#axle {
	z-index: 20;
	position: relative;
	top: 45px;
	margin: auto;
	width: 10px;
	height: 10px;
	background-color: #FC0;
	border: thin dotted #FC0;
	border-radius: 6px;
}
#corner {
	z-index: 2;
	position: absolute;
	top: -18px;
	left: -6px;
	width: 10px;
	height: 10px;
	background-color: #C03;
	border: thin dotted #C03;
	border-radius: 6px;
	animation: rainbo 12s 4;
	-o-animation: rainbo 12s 4;
	-ms-animation: rainbo 12s 4;
	-moz-animation: rainbo 12s 4;
	-webkit-animation: rainbo 12s 4;
}
.chiklet {
	position: absolute;
	width: 20px;
	height: 20px;
	box-shadow: 2px 2px 2px #666;
}
#code {
	margin: -40px 20px 0;
	width: 400px;
	float: left;
}
#css {
	margin: 64px 100px 0 0;
	width: 400px;
	float: right;
}
@keyframes rot8 {
0% {
left: 40px;
}
60% {
left: 800px;
border-color: #399;
background-color: #399;
transform: rotateZ(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
}
100% {
left: 30px;
border-color: #06C;
background-color: #06C;
transform: rotateZ(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
}
}
@-webkit-keyframes rot8 {
0% {
left: 30px;
}
60% {
left: 800px;
border-color: #399;
background-color: #399;
transform: rotateZ(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
}
100% {
left: 30px;
border-color: #06C;
background-color: #06C;
transform: rotateZ(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
}
}
@keyframes rainbo {
0% {
border-color: #C03;
background-color: #C03;
}
60% {
border-color: #0C3;
background-color: #0C3;
}
100% {
border-color: #C03;
background-color: #C03;
}
}
@-webkit-keyframes rainbo {
0% {
border-color: #C03;
background-color: #C03;
}
60% {
border-color: #0C3;
background-color: #0C3;
}
100% {
border-color: #C03;
background-color: #C03;
}
}