ilinx/main/variations/style.css

/* ----------------------------- GLOBAL ----------------------------- */

body{	font-family: "Lucida Console", Monaco, monospace; 
overflow: hidden;
background-color: black;
color: white;}

p {	font-size: 20px; }

a{  text-decoration: none; }

/* ----------------------------- SPACE ----------------------------- */

#space {
  position: relative;
  width: 2500px;
  height: 2500px;
/*  border-style: dotted;
  border-width: 2px;*/
  top: -990px;
  left: -145px;
/*  background-image: url('./img/grid3.png');
  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: absolute; 
  left: 1340px; 
  top: 493px;
}

#m {
  position: absolute; 
  left: 0px; 
  top: 542px;
}

#thl{
  position: absolute; 
  left: 1280px; 
  top: 1500px;
}

#lmr{
  position: absolute;
  left: 0px; 
  top: 1454px;
}

/* --------------------- PLACES ------------------------ */

.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;

}

a.place:hover{letter-spacing: -4px;
color: green;
-webkit-animation: breathe 1s linear infinite;
  -moz-animation: breathe 1s linear infinite;
  -ms-animation: breathe 1s linear infinite;
  -o-animation: breathe 1s linear infinite;
  animation: breathe 1s linear infinite;}



/* ----------------------------- SVG ----------------------------- */

text {
    font-family: "Lucida Console", Monaco, monospace;
    color: black;
    stroke: white;
    stroke-width: 6;
    stroke-linejoin: round;
    paint-order: stroke;
}

text.region {
    stroke-width:6;
    font-variant: small-caps;
}

svg {
    float: right;
}

path, line {
    fill: none;
    stroke: white;
    stroke-linecap: round;
}

.field {
    stroke: none;
    fill-opacity: 1.0;
}

.slope {
    stroke-width: 1;
}

.river {
    stroke-width: 2;
}

.coast {
    stroke-width: 4;
}

.border {
    stroke-width: 5;
    stroke-dasharray: 4,4;
    stroke-linecap: butt;
}



/* ----------------------------- ANIMATIONS ----------------------------- */

/* Rotate loop */

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* Breathing text */

@-webkit-keyframes breathe /* Safari and Chrome */ {
    0% {font-size:20px; color: white; letter-spacing: 0px; margin-left: 0px;}
   50% {font-size:21px; color: red;   letter-spacing: 1px; margin-left: -6px;}
  100% {font-size:20px; color: white; letter-spacing: 0px; margin-left: 0px;}
}
@keyframes breathe {
   0% {font-size:20px; color: white; letter-spacing: 0px; margin-left: 0px;}
  50% {font-size:21px; color: red;   letter-spacing: 1px; margin-left: -6px;}
 100% {font-size:20px; color: white; letter-spacing: 0px; margin-left: 0px;}
}