Team:UNITN-Trento/CSS/Products
From 2013.igem.org
(Difference between revisions)
(Corrected for link container) |
m (Added cross-browser support to guid rotation) |
||
Line 19: | Line 19: | ||
width: 250px; | width: 250px; | ||
transform:rotate(-15deg); | transform:rotate(-15deg); | ||
+ | -webkit-transform:rotate(-15deg); | ||
+ | -moz-transform:rotate(-15deg); | ||
} | } | ||
Revision as of 14:59, 23 September 2013
.container {
background-color: #d09220 !important; background-image: url() !important; background-position: 0 30px !important;
}
.container .sheet {
position: relative; min-height: 410px; margin: 15px !important; background-color: rgba(250,250,250,.5) !important;
}
.container .sheet .guide {
position: absolute; top: 0px; left: 0px; width: 250px; transform:rotate(-15deg); -webkit-transform:rotate(-15deg); -moz-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 .dots {
position: absolute; top: 140px; right: 20px; width: 650px;
}
.container .sheet .dots a > div {
position: relative; display: inline-block; width: 300px; margin: 10px; text-align: center; vertical-align: top;
}
.container .sheet .dots div .circle {
height: 250px; width: 250px;
}
.container .sheet .dots div .title {
position: absolute; top: 25px; left: 65px; padding: 5px 5px; width: 150px; background: rgba(149,191,191,.9); border: 5px solid white; border-radius: 0.5em; box-shadow: 1px 1px 1px #545454; color: white; font-family: "Boogaloo", sans-serif; font-size: 1.5em; text-shadow: 0 0 2px black;
}
.container .sheet .dots div:hover .title {
background: rgba(196, 34, 28,.9); box-shadow: 1px 1px 1px black;
}
.container .sheet .dots .descr {
position: absolute; top: 200px; left: 25px; padding: 10px; width: 225px; background-color: rgba(50,50,50,.9); border: 2px solid white; border-radius: 10px; color: white; font-family: "Cabin",cursive; font-size: 0.9em; text-align: justify; text-shadow: 0 0 2px black;
}