moved css to its own folder

css/reset.css

@@ -0,0 +1,52 @@
+/* v1.0 | 20080212 */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	outline: 0;
+	font-size: 100%;
+	vertical-align: baseline;
+	background: transparent;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+
+/* remember to define focus styles! */
+:focus {
+	outline: 0;
+}
+
+/* remember to highlight inserts somehow! */
+ins {
+	text-decoration: none;
+}
+del {
+	text-decoration: line-through;
+}
+
+/* tables still need 'cellspacing="0"' in the markup */
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

css/styles.css

@@ -0,0 +1,60 @@
+body {
+	font-size: 12px;
+}
+
+.control {
+	color: #fff;
+	background-color: #111;
+	margin: 5px;
+	padding: 8px;
+	opacity: .9;
+	position: fixed !important;
+}
+
+.control.floating {
+	border: 2px solid #444;
+	border-radius: 4px;
+	-webkit-border-radius: 4px;
+	-moz-border-radius: 4px;
+	box-shadow: 0 0 4px #000;
+	-webkit-box-shadow: 0 0 4px #000;
+	-moz-box-shadow: 0 0 4px #000;
+}
+
+.control.navigate {
+	top: 0;
+	margin: 0;
+	cursor: pointer;
+	width: 128px;
+	background: center no-repeat;
+	opacity: 0;
+}
+
+.control.navigate:hover {
+	display: block;
+	opacity: 1;
+}
+
+.control.navigate.left {
+	left: 0;
+	background-image: url(../img/left.png);
+}
+
+.control.navigate.right {
+	right: 0;
+	background-image: url(../img/right.png);
+}
+
+.ui-draggable {
+	cursor: move;
+}
+
+#color {
+	width: 200px;
+	height: 150px;
+}
+
+#status {
+	top: 0;
+	right: 0;
+}