Team:UNITN-Trento/CSS/About us
From 2013.igem.org
(Started styling map) |
(New map styling) |
||
Line 51: | Line 51: | ||
position: absolute; | position: absolute; | ||
top: 225px; | top: 225px; | ||
- | left: | + | left: 310px; |
height: 100px; | height: 100px; | ||
Line 57: | Line 57: | ||
background-color: transparent; | background-color: transparent; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
Line 74: | Line 69: | ||
border-radius: 10px; | border-radius: 10px; | ||
box-shadow: 1px 1px 2px #323232; | box-shadow: 1px 1px 2px #323232; | ||
+ | } | ||
+ | |||
+ | .container .sheet .map #spot1 { | ||
+ | position: absolute; | ||
+ | top: 25px; | ||
+ | left: 80px; | ||
+ | } | ||
+ | |||
+ | .container .sheet .map #spot2 { | ||
+ | position: absolute; | ||
+ | top: 25px; | ||
+ | left: 230px; | ||
+ | } | ||
+ | |||
+ | .container .sheet .map #spot3 { | ||
+ | position: absolute; | ||
+ | top: 25px; | ||
+ | left: 380px; | ||
+ | } | ||
+ | |||
+ | .container .sheet .map #spot4 { | ||
+ | position: absolute; | ||
+ | top: 50px; | ||
+ | left: 80px; | ||
+ | } | ||
+ | |||
+ | .container .sheet .map #spot5 { | ||
+ | position: absolute; | ||
+ | top: 50px; | ||
+ | left: 230px; | ||
+ | } | ||
+ | |||
+ | .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: 60px; | ||
+ | } | ||
+ | |||
+ | .container .sheet .map #label2 { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 200px; | ||
+ | } | ||
+ | |||
+ | .container .sheet .map #label3 { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 365px; | ||
+ | } | ||
+ | .container .sheet .map #label4 { | ||
+ | position: absolute; | ||
+ | top: 75px; | ||
+ | left: 55px; | ||
+ | } | ||
+ | |||
+ | .container .sheet .map #label5 { | ||
+ | position: absolute; | ||
+ | top: 75px; | ||
+ | left: 210px; | ||
+ | } | ||
+ | |||
+ | .container .sheet .map #label6 { | ||
+ | position: absolute; | ||
+ | top: 75px; | ||
+ | left: 360px; | ||
+ | } | ||
+ | |||
+ | .container .sheet .map #line1 { | ||
+ | position: absolute; | ||
+ | top: 30px; | ||
+ | left: 99px; | ||
+ | width: 130px; | ||
+ | } | ||
+ | |||
+ | .container .sheet .map #line2 { | ||
+ | position: absolute; | ||
+ | top: 30px; | ||
+ | left: 249px; | ||
+ | width: 130px; | ||
+ | } | ||
+ | |||
+ | .container .sheet .map #line3 { | ||
+ | position: absolute; | ||
+ | top: 55px; | ||
+ | left: 99px; | ||
+ | width: 130px; | ||
+ | } | ||
+ | |||
+ | .container .sheet .map #line4 { | ||
+ | position: absolute; | ||
+ | top: 55px; | ||
+ | left: 249px; | ||
+ | width: 130px; | ||
} | } | ||
Revision as of 21:10, 22 September 2013
.container .sheet {
position: relative; min-height: 410px;
}
.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: 225px; 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: 25px; left: 80px;
}
.container .sheet .map #spot2 {
position: absolute; top: 25px; left: 230px;
}
.container .sheet .map #spot3 {
position: absolute; top: 25px; left: 380px;
}
.container .sheet .map #spot4 {
position: absolute; top: 50px; left: 80px;
}
.container .sheet .map #spot5 {
position: absolute; top: 50px; left: 230px;
}
.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: 60px;
}
.container .sheet .map #label2 {
position: absolute; top: 0; left: 200px;
}
.container .sheet .map #label3 {
position: absolute; top: 0; left: 365px;
} .container .sheet .map #label4 {
position: absolute; top: 75px; left: 55px;
}
.container .sheet .map #label5 {
position: absolute; top: 75px; left: 210px;
}
.container .sheet .map #label6 {
position: absolute; top: 75px; left: 360px;
}
.container .sheet .map #line1 {
position: absolute; top: 30px; left: 99px; width: 130px;
}
.container .sheet .map #line2 {
position: absolute; top: 30px; left: 249px; width: 130px;
}
.container .sheet .map #line3 {
position: absolute; top: 55px; left: 99px; width: 130px;
}
.container .sheet .map #line4 {
position: absolute; top: 55px; left: 249px; width: 130px;
}
.container .sheet .map .spot:hover {
background-color: red; border-bottom: 2px solid #545454; box-shadow: 1px 1px 2px #323232 inset;
}
.container .sheet .map .line {
display: block; width: 100px; height: 5px; border-bottom: 2px dashed black;
}