diff --git a/modules/default/clock/clock_styles.css b/modules/default/clock/clock_styles.css
new file mode 100644
index 00000000..cc0ad345
--- /dev/null
+++ b/modules/default/clock/clock_styles.css
@@ -0,0 +1,74 @@
+#analog {
+}
+
+#digital {
+}
+
+.clockCircle {
+	margin: 0 auto;
+	position: relative;
+	border-radius: 50%;
+	background-size: 100%;
+}
+
+.clockFace {
+	width: 100%;
+	height: 100%;
+}
+
+.clockFace:after {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	width: 6px;
+	height: 6px;
+	margin: -3px 0 0 -3px;
+	background: white;
+	border-radius: 3px;
+	content: "";
+	display: block;
+}
+
+.clockHour {
+	width: 0;
+	height: 0;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	margin: -2px 0 -2px -25%;	/* numbers much match negative length & thickness */
+	padding: 2px 0 2px 25%;		/* indicator length & thickness */
+	background: white;
+	-webkit-transform-origin: 100% 50%;
+	-ms-transform-origin: 100% 50%;
+	transform-origin: 100% 50%;
+	border-radius: 3px 0 0 3px;
+}
+
+.clockMinute {
+	width: 0;
+	height: 0;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	margin: -35% -2px 0;	/* numbers must match negative length & thickness */
+	padding: 35% 2px 0;	/* indicator length & thickness */
+	background: white;
+	-webkit-transform-origin: 50% 100%;
+	-ms-transform-origin: 50% 100%;
+	transform-origin: 50% 100%;
+	border-radius: 3px 0 0 3px;
+}
+
+.clockSecond {
+	width: 0;
+	height: 0;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	margin: -38% -1px 0 0; /* numbers must match negative length & thickness */
+	padding: 38% 1px 0; /* indicator length & thickness */
+	background: red;
+	-webkit-transform-origin: 50% 100%;
+	-ms-transform-origin: 50% 100%;
+	transform-origin: 50% 100%;
+}
\ No newline at end of file