setting places

main/variations/style.css

@@ -1,3 +1,5 @@
+/* ----------------------------- GLOBAL ----------------------------- */
+
 body{	font-family: "Lucida Console", Monaco, monospace; 
 overflow: hidden;
 background-color: black;
@@ -7,88 +9,9 @@ p {	font-size: 20px; }
 
 a{  text-decoration: none; }
 
-#space-time{
+/* ----------------------------- SPACE ----------------------------- */
-  z-index: 101; 
-  position: relative;
-  width: 600px;
-  height: 500px;
-  top: 1158px;
-  left: 853px;
-}
-
-#ilinx{
-position: absolute;
-width: 106px;
-left: 250px;
-top: 420px;
-}
-
-.ilinx { 
-	font-size: 35px; 
-	margin-top: -2px;
-	float:left;
-	cursor: grab;
-}
-
-#spiral { 
-  width: 300px;
-  position: absolute;
-  margin-top: -150px;
-  margin-left: -150px;
-  top: 250px;
-  left: 300px;
-  }
-
-.rotating {
-  -webkit-animation: rotating 3s linear infinite;
-  -moz-animation: rotating 3s linear infinite;
-  -ms-animation: rotating 3s linear infinite;
-  -o-animation: rotating 3s linear infinite;
-  animation: rotating 3s linear infinite;
-}
-
-#islands{
-
-}
-
-a.island:link{color:white;}
-a.island:hover{color: red;
-    -webkit-animation: breathe 3s linear infinite;
-  -moz-animation: breathe 3s linear infinite;
-  -ms-animation: breathe 3s linear infinite;
-  -o-animation: breathe 3s linear infinite;
-  animation: breathe 3s linear infinite;
-}
-a.island:visited{color: white;}
-
-#lemuria {
-  position: absolute;
-  left: 68px;
-  top:269px;
-
-}
-
-#mu {
-  position: absolute;
-  left: 189px;
-  top:76px;
-
-}
-
-#hyperborea {
-  position: absolute;
-  left: 444px;
-  top: 151px;
-
-}
-
-#thule{
-  position: absolute;
-  left: 421px;
-  top:322px;
-}
 
-#sea {
+#space {
   position: relative;
   width: 2500px;
   height: 2500px;
@@ -100,22 +23,105 @@ a.island:visited{color: white;}
   background-repeat: repeat;*/
 }
 
+              /* --------------------- TIME ------------------------ */
+
+
+              #time{
+                z-index: 101; 
+                position: relative;
+                width: 600px;
+                height: 500px;
+                top: 1158px;
+                left: 853px;
+              }
+
+              #ilinx{
+              position: absolute;
+              width: 106px;
+              left: 250px;
+              top: 420px;
+              }
+
+              .ilinx { 
+              	font-size: 35px; 
+              	margin-top: -2px;
+              	float:left;
+              	cursor: grab;
+              }
+
+              #spiral { 
+                width: 300px;
+                position: absolute;
+                margin-top: -150px;
+                margin-left: -150px;
+                top: 250px;
+                left: 300px;
+                }
+
+              .rotating {
+                -webkit-animation: rotating 3s linear infinite;
+                -moz-animation: rotating 3s linear infinite;
+                -ms-animation: rotating 3s linear infinite;
+                -o-animation: rotating 3s linear infinite;
+                animation: rotating 3s linear infinite;
+              }
+
+              a.island:link{color:white;}
+              a.island:hover{color: red;
+                  -webkit-animation: breathe 3s linear infinite;
+                -moz-animation: breathe 3s linear infinite;
+                -ms-animation: breathe 3s linear infinite;
+                -o-animation: breathe 3s linear infinite;
+                animation: breathe 3s linear infinite;
+              }
+              a.island:visited{color: white;}
+
+              #lemuria {
+                position: absolute;
+                left: 68px;
+                top:269px;
+
+              }
+
+              #mu {
+                position: absolute;
+                left: 189px;
+                top:76px;
+
+              }
+
+              #hyperborea {
+                position: absolute;
+                left: 444px;
+                top: 151px;
+
+              }
+
+              #thule{
+                position: absolute;
+                left: 421px;
+                top:322px;
+              }
+
+
+/* ----------------------------- ISLANDS ----------------------------- */
+
 #iper{
-  position: relative; 
+  position: absolute; 
-  left: -27px; 
+  left: 1340px; 
-  top: -47px;
+  top: 493px;
 }
 
 #m {
-  position: relative; 
+  position: absolute; 
-  left: -632px; 
+  left: 0px; 
-  top: -48px;
+  top: 542px;
 }
 
 #thl{
-  position: relative; 
+  position: absolute; 
-  left: -30px; 
+  left: 1280px; 
-  top: -38px;
+  top: 1500px;
 }
 
 #lmr{
@@ -124,15 +130,29 @@ a.island:visited{color: white;}
   top: 1454px;
 }
 
-#MVU{
+/* --------------------- PLACES ------------------------ */
-  position: absolute; 
-  text-align: center;
-  left: 278px;
-  top: 321px;
-  cursor: pointer;
 
-}
+.places{
+    position: absolute; 
+    text-align: center;
+  }
+              /* -------------- LEMURIA ---------------- */
+
+              #MVU { left: 278px; top: 321px; }
+
+              /* ---------------- MU ------------------ */
+
+              #Katak_temple { left: 379px; top: 504px; }
+
+              /* ------------ HYPERBOREA -------------- */
+
+              #Lab_1 { left: 423px; top: 876px; }
+
+              /* -------------- THULE ----------------- */
+              
+              #Castalia { left: 500px; top: 704px; }
 
+/* ------------------ PLACES STYLE -------------------- */
 .inner{
   font-size: 15px;
   background-color: yellow;
@@ -149,30 +169,8 @@ color: green;
 
 
 
+/* ----------------------------- SVG ----------------------------- */
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-/* SVG */
 text {
     font-family: "Lucida Console", Monaco, monospace;
     color: black;
@@ -222,13 +220,7 @@ path, line {
 
 
 
-
+/* ----------------------------- ANIMATIONS ----------------------------- */
-
-
-
-
-
-
 
 /* Rotate loop */
 
@@ -261,7 +253,6 @@ path, line {
   }
 }
 
-
 /* Breathing text */
 
 @-webkit-keyframes breathe /* Safari and Chrome */ {