Team:UNITN-Trento/CSS/Products

From 2013.igem.org

(Difference between revisions)
m (Added cross-browser support to guid rotation)
(Replaced content with ".container { background-color: #d09220 !important; background-image: url(https://static.igem.org/mediawiki/2013/c/c6/Tn-2013-boxbg-onda-Gold.png) !important; background...")
Line 3: Line 3:
     background-image: url(https://static.igem.org/mediawiki/2013/c/c6/Tn-2013-boxbg-onda-Gold.png) !important;
     background-image: url(https://static.igem.org/mediawiki/2013/c/c6/Tn-2013-boxbg-onda-Gold.png) !important;
     background-position: 0 30px !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;
 
}
}

Revision as of 07:21, 25 September 2013

.container {

   background-color: #d09220 !important;
   background-image: url(Tn-2013-boxbg-onda-Gold.png) !important;
   background-position: 0 30px !important;

}