Template:Team:HokkaidoU Japan/About Us/CSS

From 2014.igem.org

(Difference between revisions)
Line 46: Line 46:
-
.show{
+
.show-ymzk{
     cursor: pointer;
     cursor: pointer;
     position: absolute;
     position: absolute;
}
}
   
   
-
.overlay{
+
.overlay-ymzk{
     opacity:0.7;
     opacity:0.7;
     background: black;
     background: black;
Line 61: Line 61:
}
}
-
.overlay::before {
+
.overlay-ymzk::before {
content: "";
content: "";
display: inline-block;
display: inline-block;
Line 72: Line 72:
}
}
-
.overlay-content{
+
.overlay-content-ymzk{
     color: white;
     color: white;
     left: 30%;
     left: 30%;
Line 79: Line 79:
     width: 50%;
     width: 50%;
}​
}​
 +
 +
.show-sone{
 +
    cursor: pointer;
 +
    position: absolute;
 +
}
 +
 +
.overlay-sone{
 +
    opacity:0.7;
 +
    background: black;
 +
    color: white;
 +
    height: 200px;
 +
    position: absolute;
 +
    width:500px;
 +
    display:none;
 +
}
 +
 +
.overlay-sone::before {
 +
content: "";
 +
display: inline-block;
 +
border: 8px solid transparent;
 +
border-bottom-color: #000;
 +
position: absolute;
 +
right: 50%;
 +
top: -8px;
 +
margin-top: -8px;
 +
}
 +
 +
.overlay-content-sone{
 +
    color: white;
 +
    left: 30%;
 +
    position: absolute;
 +
    top: 30%;
 +
    width: 50%;
 +
}​
 +
 +
.show-hana{
 +
    cursor: pointer;
 +
    position: absolute;
 +
}
 +
 +
.overlay-hana{
 +
    opacity:0.7;
 +
    background: black;
 +
    color: white;
 +
    height: 200px;
 +
    position: absolute;
 +
    width:500px;
 +
    display:none;
 +
}
 +
 +
.overlay-hana::before {
 +
content: "";
 +
display: inline-block;
 +
border: 8px solid transparent;
 +
border-bottom-color: #000;
 +
position: absolute;
 +
right: 50%;
 +
top: -8px;
 +
margin-top: -8px;
 +
}
 +
 +
.overlay-content-hana{
 +
    color: white;
 +
    left: 30%;
 +
    position: absolute;
 +
    top: 30%;
 +
    width: 50%;
 +
}​
 +
 +
.show-ryotaro{
 +
    cursor: pointer;
 +
    position: absolute;
 +
}
 +
 +
.overlay-ryotaro{
 +
    opacity:0.7;
 +
    background: black;
 +
    color: white;
 +
    height: 200px;
 +
    position: absolute;
 +
    width:500px;
 +
    display:none;
 +
}
 +
 +
.overlay-ryotaro::before {
 +
content: "";
 +
display: inline-block;
 +
border: 8px solid transparent;
 +
border-bottom-color: #000;
 +
position: absolute;
 +
right: 50%;
 +
top: -8px;
 +
margin-top: -8px;
 +
}
 +
 +
.overlay-content-ryotaro{
 +
    color: white;
 +
    left: 30%;
 +
    position: absolute;
 +
    top: 30%;
 +
    width: 50%;
 +
}​
 +
 +
.show-ayano{
 +
    cursor: pointer;
 +
    position: absolute;
 +
}
 +
 +
.overlay-ayano{
 +
    opacity:0.7;
 +
    background: black;
 +
    color: white;
 +
    height: 200px;
 +
    position: absolute;
 +
    width:500px;
 +
    display:none;
 +
}
 +
 +
.overlay-ayano::before {
 +
content: "";
 +
display: inline-block;
 +
border: 8px solid transparent;
 +
border-bottom-color: #000;
 +
position: absolute;
 +
right: 50%;
 +
top: -8px;
 +
margin-top: -8px;
 +
}
 +
 +
.overlay-content-ayano{
 +
    color: white;
 +
    left: 30%;
 +
    position: absolute;
 +
    top: 30%;
 +
    width: 50%;
 +
}​
 +
 +
.show-naoya{
 +
    cursor: pointer;
 +
    position: absolute;
 +
}
 +
 +
.overlay-naoya{
 +
    opacity:0.7;
 +
    background: black;
 +
    color: white;
 +
    height: 200px;
 +
    position: absolute;
 +
    width:500px;
 +
    display:none;
 +
}
 +
 +
.overlay-naoya::before {
 +
content: "";
 +
display: inline-block;
 +
border: 8px solid transparent;
 +
border-bottom-color: #000;
 +
position: absolute;
 +
right: 50%;
 +
top: -8px;
 +
margin-top: -8px;
 +
}
 +
 +
.overlay-content-naoya{
 +
    color: white;
 +
    left: 30%;
 +
    position: absolute;
 +
    top: 30%;
 +
    width: 50%;
 +
}​
 +
 +
.show-osamu{
 +
    cursor: pointer;
 +
    position: absolute;
 +
}
 +
 +
.overlay-osamu{
 +
    opacity:0.7;
 +
    background: black;
 +
    color: white;
 +
    height: 200px;
 +
    position: absolute;
 +
    width:500px;
 +
    display:none;
 +
}
 +
 +
.overlay-osamu::before {
 +
content: "";
 +
display: inline-block;
 +
border: 8px solid transparent;
 +
border-bottom-color: #000;
 +
position: absolute;
 +
right: 50%;
 +
top: -8px;
 +
margin-top: -8px;
 +
}
 +
 +
.overlay-content-osamu{
 +
    color: white;
 +
    left: 30%;
 +
    position: absolute;
 +
    top: 30%;
 +
    width: 50%;
 +
}​
 +
 +
.show-eri{
 +
    cursor: pointer;
 +
    position: absolute;
 +
}
 +
 +
.overlay-eri{
 +
    opacity:0.7;
 +
    background: black;
 +
    color: white;
 +
    height: 200px;
 +
    position: absolute;
 +
    width:500px;
 +
    display:none;
 +
}
 +
 +
.overlay-eri::before {
 +
content: "";
 +
display: inline-block;
 +
border: 8px solid transparent;
 +
border-bottom-color: #000;
 +
position: absolute;
 +
right: 50%;
 +
top: -8px;
 +
margin-top: -8px;
 +
}
 +
 +
.overlay-content-eri{
 +
    color: white;
 +
    left: 30%;
 +
    position: absolute;
 +
    top: 30%;
 +
    width: 50%;
 +
}​
 +
 +
.show-tori{
 +
    cursor: pointer;
 +
    position: absolute;
 +
}
 +
 +
.overlay-tori{
 +
    opacity:0.7;
 +
    background: black;
 +
    color: white;
 +
    height: 200px;
 +
    position: absolute;
 +
    width:500px;
 +
    display:none;
 +
}
 +
 +
.overlay-tori::before {
 +
content: "";
 +
display: inline-block;
 +
border: 8px solid transparent;
 +
border-bottom-color: #000;
 +
position: absolute;
 +
right: 50%;
 +
top: -8px;
 +
margin-top: -8px;
 +
}
 +
 +
.overlay-content-tori{
 +
    color: white;
 +
    left: 30%;
 +
    position: absolute;
 +
    top: 30%;
 +
    width: 50%;
 +
}​
 +
 +
.show-mami{
 +
    cursor: pointer;
 +
    position: absolute;
 +
}
 +
 +
.overlay-mami{
 +
    opacity:0.7;
 +
    background: black;
 +
    color: white;
 +
    height: 200px;
 +
    position: absolute;
 +
    width:500px;
 +
    display:none;
 +
}
 +
 +
.overlay-mami::before {
 +
content: "";
 +
display: inline-block;
 +
border: 8px solid transparent;
 +
border-bottom-color: #000;
 +
position: absolute;
 +
right: 50%;
 +
top: -8px;
 +
margin-top: -8px;
 +
}
 +
 +
.overlay-content-mami{
 +
    color: white;
 +
    left: 30%;
 +
    position: absolute;
 +
    top: 30%;
 +
    width: 50%;
 +
}​
 +
 +
.show-tamaro{
 +
    cursor: pointer;
 +
    position: absolute;
 +
}
 +
 +
.overlay-tamaro{
 +
    opacity:0.7;
 +
    background: black;
 +
    color: white;
 +
    height: 200px;
 +
    position: absolute;
 +
    width:500px;
 +
    display:none;
 +
}
 +
 +
.overlay-tamaro::before {
 +
content: "";
 +
display: inline-block;
 +
border: 8px solid transparent;
 +
border-bottom-color: #000;
 +
position: absolute;
 +
right: 50%;
 +
top: -8px;
 +
margin-top: -8px;
 +
}
 +
 +
.overlay-content-tamaro{
 +
    color: white;
 +
    left: 30%;
 +
    position: absolute;
 +
    top: 30%;
 +
    width: 50%;
 +
}​
 +
 +
.show-sanbon{
 +
    cursor: pointer;
 +
    position: absolute;
 +
}
 +
 +
.overlay-sanbon{
 +
    opacity:0.7;
 +
    background: black;
 +
    color: white;
 +
    height: 200px;
 +
    position: absolute;
 +
    width:500px;
 +
    display:none;
 +
}
 +
 +
.overlay-sanbon::before {
 +
content: "";
 +
display: inline-block;
 +
border: 8px solid transparent;
 +
border-bottom-color: #000;
 +
position: absolute;
 +
right: 50%;
 +
top: -8px;
 +
margin-top: -8px;
 +
}
 +
 +
.overlay-content-sanbon{
 +
    color: white;
 +
    left: 30%;
 +
    position: absolute;
 +
    top: 30%;
 +
    width: 50%;
 +
}​
 +
 +
.show-liu{
 +
    cursor: pointer;
 +
    position: absolute;
 +
}
 +
 +
.overlay-liu{
 +
    opacity:0.7;
 +
    background: black;
 +
    color: white;
 +
    height: 200px;
 +
    position: absolute;
 +
    width:500px;
 +
    display:none;
 +
}
 +
 +
.overlay-liu::before {
 +
content: "";
 +
display: inline-block;
 +
border: 8px solid transparent;
 +
border-bottom-color: #000;
 +
position: absolute;
 +
right: 50%;
 +
top: -8px;
 +
margin-top: -8px;
 +
}
 +
 +
.overlay-content-liu{
 +
    color: white;
 +
    left: 30%;
 +
    position: absolute;
 +
    top: 30%;
 +
    width: 50%;
 +
}​
 +
 +
.show-shehata{
 +
    cursor: pointer;
 +
    position: absolute;
 +
}
 +
 +
.overlayshehata{
 +
    opacity:0.7;
 +
    background: black;
 +
    color: white;
 +
    height: 200px;
 +
    position: absolute;
 +
    width:500px;
 +
    display:none;
 +
}
 +
 +
.overlayshehata::before {
 +
content: "";
 +
display: inline-block;
 +
border: 8px solid transparent;
 +
border-bottom-color: #000;
 +
position: absolute;
 +
right: 50%;
 +
top: -8px;
 +
margin-top: -8px;
 +
}
 +
 +
.overlay-contentshehata{
 +
    color: white;
 +
    left: 30%;
 +
    position: absolute;
 +
    top: 30%;
 +
    width: 50%;
 +
}​
 +
 +
.show-kensuke{
 +
    cursor: pointer;
 +
    position: absolute;
 +
}
 +
 +
.overlay-kensuke{
 +
    opacity:0.7;
 +
    background: black;
 +
    color: white;
 +
    height: 200px;
 +
    position: absolute;
 +
    width:500px;
 +
    display:none;
 +
}
 +
 +
.overlay-kensuke::before {
 +
content: "";
 +
display: inline-block;
 +
border: 8px solid transparent;
 +
border-bottom-color: #000;
 +
position: absolute;
 +
right: 50%;
 +
top: -8px;
 +
margin-top: -8px;
 +
}
 +
 +
.overlay-content-kensuke{
 +
    color: white;
 +
    left: 30%;
 +
    position: absolute;
 +
    top: 30%;
 +
    width: 50%;
 +
}​
 +
 +
.show-itoh{
 +
    cursor: pointer;
 +
    position: absolute;
 +
}
 +
 +
.overlay-itoh{
 +
    opacity:0.7;
 +
    background: black;
 +
    color: white;
 +
    height: 200px;
 +
    position: absolute;
 +
    width:500px;
 +
    display:none;
 +
}
 +
 +
.overlay-itoh::before {
 +
content: "";
 +
display: inline-block;
 +
border: 8px solid transparent;
 +
border-bottom-color: #000;
 +
position: absolute;
 +
right: 50%;
 +
top: -8px;
 +
margin-top: -8px;
 +
}
 +
 +
.overlay-content-itoh{
 +
    color: white;
 +
    left: 30%;
 +
    position: absolute;
 +
    top: 30%;
 +
    width: 50%;
 +
}​
 +
 +
.show-kawahata{
 +
    cursor: pointer;
 +
    position: absolute;
 +
}
 +
 +
.overlay-kawahata{
 +
    opacity:0.7;
 +
    background: black;
 +
    color: white;
 +
    height: 200px;
 +
    position: absolute;
 +
    width:500px;
 +
    display:none;
 +
}
 +
 +
.overlay-kawahata::before {
 +
content: "";
 +
display: inline-block;
 +
border: 8px solid transparent;
 +
border-bottom-color: #000;
 +
position: absolute;
 +
right: 50%;
 +
top: -8px;
 +
margin-top: -8px;
 +
}
 +
 +
.overlay-content-kawahata{
 +
    color: white;
 +
    left: 30%;
 +
    position: absolute;
 +
    top: 30%;
 +
    width: 50%;
 +
}​
 +
 +
</style>
</style>
</html>
</html>

Revision as of 10:06, 29 September 2014