diff --git a/index.html b/index.html
index 49826c5..c288927 100644
--- a/index.html
+++ b/index.html
@@ -24,14 +24,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 </head>
 <body>
-	<div id="uhr">
-		<span class="item dot dot1" id="dot1"></span>
-		<span class="item dot dot2" id="dot2"></span>
-		<span class="item dot dot3" id="dot3"></span>
-		<span class="item dot dot4" id="dot4"></span>
-		<div id="renderarea"></div>
+	<div id="uhr" class="uhr">
+		<span class="item dot dot1"></span>
+		<span class="item dot dot2"></span>
+		<span class="item dot dot3"></span>
+		<span class="item dot dot4"></span>
+		<div id="renderarea" class="renderarea"></div>
 		<!-- glossy reflection -->
-		<span id="reflection"></span>
+		<span class="reflection"></span>
 	</div>
 	<select id="themeswitcher">
 		<option value="black">Schwarz</option>
diff --git a/uhr.css b/uhr.css
index 827b804..c62fe68 100644
--- a/uhr.css
+++ b/uhr.css
@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 body {
 	font-family: 'Uhrenfont', sans-serif;
 }
-#uhr {
+.uhr {
 	padding: 3em;
 	position: relative;
 	margin: 0;
@@ -27,7 +27,7 @@ body {
 	height: 40em;
 	transition: background-color 0.5s;
 }
-#reflection {
+.uhr .reflection {
 	position: absolute;
 	top: 0;
 	bottom: 0;
@@ -39,7 +39,7 @@ body {
 }
 #themeswitcher {
 }
-#renderarea {
+.uhr .renderarea {
 	display: block;
 	position: absolute;
 	top: 5em;
@@ -63,19 +63,19 @@ body {
 	border-color: #eee;
 	box-shadow: 0 0 0.2em #eee;
 }
-#dot1 {
+.dot1 {
 	top: 1.5em;
 	left: 1.5em;
 }
-#dot2 {
+.dot2 {
 	top: 1.5em;
 	right: 1.5em;
 }
-#dot3 {
+.dot3 {
 	bottom: 1.5em;
 	right: 1.5em;
 }
-#dot4 {
+.dot4 {
 	bottom: 1.5em;
 	left: 1.5em;
 }
