Team:UNITN-Trento/CSS/Extra

From 2013.igem.org

(Difference between revisions)
(Created page with ".container .sheet { position: relative; min-height: 410px; } .container .sheet .guide { position: absolute; top: 0px; left: 0px; width: 250px; t...")
(Map style)
Line 1: Line 1:
.container .sheet {
.container .sheet {
     position: relative;
     position: relative;
-
     min-height: 410px;
+
     min-height: 580px;
}
}
Line 46: Line 46:
     -ms-transform:rotate(90deg);
     -ms-transform:rotate(90deg);
     -webkit-transform:rotate(90deg);
     -webkit-transform:rotate(90deg);
 +
}
 +
 +
.container .sheet .map {
 +
    position: absolute;
 +
    top: 180px;
 +
    left: 310px;
 +
   
 +
    height: 100px;
 +
    width: 500px;
 +
   
 +
    background-color: transparent;
 +
}
 +
 +
.container .sheet .map .spot {
 +
    display: block;
 +
   
 +
    width: 20px;
 +
    height: 20px;
 +
   
 +
    background-color: #545454;
 +
    border-bottom: 2px solid black;
 +
    border-radius: 10px;
 +
    box-shadow: 1px 1px 2px #323232;
 +
}
 +
 +
.container .sheet .map #spot1 {
 +
    position: absolute;
 +
    top: 70px;
 +
    left: 150px;
 +
}
 +
 +
.container .sheet .map #spot2 {
 +
    position: absolute;
 +
    top: 20px;
 +
    left: 230px;
 +
}
 +
 +
.container .sheet .map #spot3 {
 +
    position: absolute;
 +
    top: 70px;
 +
    left: 310px;
 +
}
 +
 +
.container .sheet .map #spot4 {
 +
    position: absolute;
 +
    top: 140px;
 +
    left: 190px;
 +
}
 +
 +
.container .sheet .map #spot5 {
 +
    position: absolute;
 +
    top: 140px;
 +
    left: 265px;
 +
}
 +
 +
.container .sheet .map #spot6 {
 +
    position: absolute;
 +
    top: 50px;
 +
    left: 380px;
 +
}
 +
 +
.container .sheet .map .label {
 +
    font-family: "Cabin", sans-serif;
 +
}
 +
 +
.container .sheet .map #label1 {
 +
    position: absolute;
 +
    top: 0;
 +
    left: 200px;
 +
}
 +
 +
.container .sheet .map #label2 {
 +
    position: absolute;
 +
    top: 70px;
 +
    left: 80px;
 +
}
 +
 +
.container .sheet .map #label3 {
 +
    position: absolute;
 +
    top: 70px;
 +
    left: 340px;
 +
}
 +
.container .sheet .map #label4 {
 +
    position: absolute;
 +
    top: 155px;
 +
    left: 145px;
 +
}
 +
 +
.container .sheet .map #label5 {
 +
    position: absolute;
 +
    top: 155px;
 +
    left: 290px;
 +
}
 +
 +
.container .sheet .map .line {
 +
    display: block;
 +
   
 +
    width: 60px;
 +
    height: 5px;
 +
   
 +
    border-bottom: 2px dashed black;
 +
}
 +
 +
.container .sheet .map #line1 {
 +
    position: absolute;
 +
    top: 50px;
 +
    left: 250px;
 +
    width: 65px;
 +
   
 +
    transform: rotate(32deg);
 +
    -webkit-transform: rotate(32deg);
 +
    -moz-transform: rotate(32deg);
 +
}
 +
 +
.container .sheet .map #line2 {
 +
    position: absolute;
 +
    top: 110px;
 +
    left: 270px;
 +
   
 +
    transform: rotate(123deg);
 +
    -webkit-transform: rotate(123deg);
 +
    -moz-transform: rotate(123deg);
 +
}
 +
 +
.container .sheet .map #line3 {
 +
    position: absolute;
 +
    top: 145px;
 +
    left: 213px;
 +
    width: 50px;
 +
}
 +
 +
.container .sheet .map #line4 {
 +
    position: absolute;
 +
    top: 116px;
 +
    left: 150px;
 +
 +
    transform: rotate(-120deg);
 +
    -webkit-transform: rotate(-120deg);
 +
    -moz-transform: rotate(-120deg);
 +
}
 +
 +
.container .sheet .map #line5 {
 +
    position: absolute;
 +
    top: 50px;
 +
    left: 165px;
 +
 +
    transform: rotate(-32deg);
 +
    -webkit-transform: rotate(-32deg);
 +
    -moz-transform: rotate(-32deg);
 +
}
 +
 +
.container .sheet .map .spot:hover {
 +
    background-color: red;
 +
    border-bottom: 2px solid #545454;
 +
    box-shadow: 1px 1px 2px #323232 inset;
 +
}
 +
 +
.container .sheet .dot {
 +
    position: absolute;
 +
    top: 340px;
 +
    left: 300px;
 +
   
 +
    padding: 10px;
 +
   
 +
    height: 250px;
 +
    width: 500px;
 +
   
 +
    text-decoration: none;
 +
}
 +
 +
.container .sheet .dot .title {
 +
    position: absolute;
 +
    display: block;
 +
    top: 60px;
 +
    left: 260px;
 +
   
 +
    color: white;
 +
    font-family: "Boogaloo";
 +
    font-size: 2em;
 +
    text-shadow: 1px 1px 4px black;
 +
}
 +
 +
.container .sheet .dot .descr {
 +
    position: absolute;
 +
    display: block;
 +
    top: 100px;
 +
    left: 250px;
 +
   
 +
    padding: 1.2em;
 +
    width: 300px;
 +
   
 +
    background-color: white;
 +
    border-radius: 1em;
 +
    box-shadow: 1px 1px 2px #323232;
 +
   
 +
    color: black;
 +
    font-family: "Cabin", sans-serif;
}
}

Revision as of 09:53, 23 September 2013

.container .sheet { 

   position: relative;
   min-height: 580px;

}

.container .sheet .guide { 

   position: absolute;
   top: 0px;
   left: 0px;
   
   width: 250px;
   transform:rotate(-15deg);

}

.container .sheet .bubble { 

   position: absolute;
   top: 10px;
   left: 230px;
   
   padding: 15px;
   width: 620px;
   
   background-color: white;
   border: 2px solid black;
   border-radius: 0.5em;
   
   font-family: "Cabin", cursive;

} .container .sheet .bubble .title { 

   font-size: 1.5em;
   margin: 0;

}

.container .sheet .bubble .title b { 

   font-size: 1.2em;
   font-family: "Boogaloo", sans-serif;
   color: green;

}

.container .sheet .bubble .pointer { 

   position: absolute;
   top: 20px;
   left: -23px;
   
   transform:rotate(90deg);
   -ms-transform:rotate(90deg);
   -webkit-transform:rotate(90deg);

}

.container .sheet .map { 

   position: absolute;
   top: 180px;
   left: 310px;
   
   height: 100px;
   width: 500px;
   
   background-color: transparent;

}

.container .sheet .map .spot { 

   display: block;
   
   width: 20px;
   height: 20px;
   
   background-color: #545454;
   border-bottom: 2px solid black;
   border-radius: 10px;
   box-shadow: 1px 1px 2px #323232;

}

.container .sheet .map #spot1 { 

   position: absolute;
   top: 70px;
   left: 150px;

}

.container .sheet .map #spot2 { 

   position: absolute;
   top: 20px;
   left: 230px;

}

.container .sheet .map #spot3 { 

   position: absolute;
   top: 70px;
   left: 310px;

}

.container .sheet .map #spot4 { 

   position: absolute;
   top: 140px;
   left: 190px;

}

.container .sheet .map #spot5 { 

   position: absolute;
   top: 140px;
   left: 265px;

}

.container .sheet .map #spot6 { 

   position: absolute;
   top: 50px;
   left: 380px;

}

.container .sheet .map .label { 

   font-family: "Cabin", sans-serif;

}

.container .sheet .map #label1 { 

   position: absolute;
   top: 0;
   left: 200px;

}

.container .sheet .map #label2 { 

   position: absolute;
   top: 70px;
   left: 80px;

}

.container .sheet .map #label3 { 

   position: absolute;
   top: 70px;
   left: 340px;

} .container .sheet .map #label4 { 

   position: absolute;
   top: 155px;
   left: 145px;

}

.container .sheet .map #label5 { 

   position: absolute;
   top: 155px;
   left: 290px;

}

.container .sheet .map .line { 

   display: block;
   
   width: 60px;
   height: 5px;
   
   border-bottom: 2px dashed black;

}

.container .sheet .map #line1 { 

   position: absolute;
   top: 50px;
   left: 250px;
   width: 65px;
   
   transform: rotate(32deg);
   -webkit-transform: rotate(32deg);
   -moz-transform: rotate(32deg);

}

.container .sheet .map #line2 { 

   position: absolute;
   top: 110px;
   left: 270px;
   
   transform: rotate(123deg);
   -webkit-transform: rotate(123deg);
   -moz-transform: rotate(123deg);

}

.container .sheet .map #line3 { 

   position: absolute;
   top: 145px;
   left: 213px;
   width: 50px;

}

.container .sheet .map #line4 { 

   position: absolute;
   top: 116px;
   left: 150px;

   transform: rotate(-120deg);
   -webkit-transform: rotate(-120deg);
   -moz-transform: rotate(-120deg);

}

.container .sheet .map #line5 { 

   position: absolute;
   top: 50px;
   left: 165px;

   transform: rotate(-32deg);
   -webkit-transform: rotate(-32deg);
   -moz-transform: rotate(-32deg);

}

.container .sheet .map .spot:hover { 

   background-color: red;
   border-bottom: 2px solid #545454;
   box-shadow: 1px 1px 2px #323232 inset;

}

.container .sheet .dot { 

   position: absolute;
   top: 340px;
   left: 300px;
   
   padding: 10px;
   
   height: 250px;
   width: 500px;
   
   text-decoration: none;

}

.container .sheet .dot .title { 

   position: absolute;
   display: block;
   top: 60px;
   left: 260px;
   
   color: white;
   font-family: "Boogaloo";
   font-size: 2em;
   text-shadow: 1px 1px 4px black;

}

.container .sheet .dot .descr { 

   position: absolute;
   display: block;
   top: 100px;
   left: 250px;
   
   padding: 1.2em;
   width: 300px;
   
   background-color: white;
   border-radius: 1em;
   box-shadow: 1px 1px 2px #323232;
   
   color: black;
   font-family: "Cabin", sans-serif;

}

Retrieved from "http://2013.igem.org/Team:UNITN-Trento/CSS/Extra"