Team:UNITN-Trento/CSS/Extra
From 2013.igem.org
(Map style) |
(Corrected Spot order) |
||
Line 92: | Line 92: | ||
position: absolute; | position: absolute; | ||
top: 140px; | top: 140px; | ||
- | left: | + | left: 265px; |
} | } | ||
Line 98: | Line 98: | ||
position: absolute; | position: absolute; | ||
top: 140px; | top: 140px; | ||
- | left: | + | left: 190px; |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
Revision as of 09:54, 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: 265px;
}
.container .sheet .map #spot5 {
position: absolute; top: 140px; left: 190px;
}
.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;
}