Template:Team:HokkaidoU Japan/About Us/CSS

From 2014.igem.org

(Difference between revisions)
 
(59 intermediate revisions not shown)
Line 4: Line 4:
     text-decoration: none;
     text-decoration: none;
}
}
 +
#team-picture { margin-top: 40px; }
#team-picture { margin-top: 40px; }
#hokkaidou-contents .member { width: 100%; }
#hokkaidou-contents .member { width: 100%; }
#hokkaidou-contents .member-header { width: 100%; height 40px;  margin: 30px 0 20px; }
#hokkaidou-contents .member-header { width: 100%; height 40px;  margin: 30px 0 20px; }
#hokkaidou-contents .member-header h2 { font-size: 24px; line-height: 30px; }
#hokkaidou-contents .member-header h2 { font-size: 24px; line-height: 30px; }
 +
#hokkaidou-contents .member-header2 h2 { font-size: 24px; line-height: 30px; }
 +
#hokkaidou-contents .member-header3 h2 { font-size: 24px; line-height: 30px; }
#hokkaidou-contents .member-list ul { list-style: none; margin: 0; }
#hokkaidou-contents .member-list ul { list-style: none; margin: 0; }
-
#hokkaidou-contents .member-list ul li { float: left; width: 400px; height: 200px; margin: 20px 20px 20px 20px; position: relative; }
+
#hokkaidou-contents .member-list ul li { float: left; width: 130px; height: 130px; margin: 10px 7px 60px 7px; position: relative;  top:0px;}
-
#hokkaidou-contents .member-list ul li img { width: 250px; height: 250px; position: relative; left: 130px;}
+
#hokkaidou-contents .member-list ul li img { width: 130px; height: 130px; position: relative;}
-
#hokkaidou-contents .member-list ul li h3 { font-size: 24px; line-height: 30px; position: absolute; top: 20px; margin: 0;}
+
#hokkaidou-contents .member-list ul li h3 { font-size: 24px; line-height: 30px; position: relative; top: 20px; margin: 0; top: 12px; color: white; text-align: center;}
-
#hokkaidou-contents .member-list ul li p { font-size: 16px; line-height: 25px; position: relative; margin: 0 auto; width: 80%; overflow: auto;}
+
#hokkaidou-contents .member-list ul li p { font-size: 16px; line-height: 25px; position: relative; margin: 0 auto; width: 80%; overflow: auto; text-align: left;
 +
                                                                    top: 15px;}
#hokkaidou-contents .member-list ul li p:first-letter { margin: 0;}
#hokkaidou-contents .member-list ul li p:first-letter { margin: 0;}
-
#hokkaidou-contents .member-list ul li:nth-child(even) h3 { left: 0; text-align: center;}
+
 
-
#hokkaidou-contents .member-list ul li:nth-child(odd) h3 { right: 0; text-align: center;}
+
-
#hokkaidou-contents .member-list ul li:nth-child(even) p { left: 0; text-align: center;}
+
-
#hokkaidou-contents .member-list ul li:nth-child(odd) p { right: 0; text-align: center;}
+
#sponsor-list { list-style: none; position: relative; height: 200px; margin: 0;}
#sponsor-list { list-style: none; position: relative; height: 200px; margin: 0;}
#sponsor-list li { position: absolute; }
#sponsor-list li { position: absolute; }
#sponsor-list li:nth-child(1) { top: 20px; left: 40px; }
#sponsor-list li:nth-child(1) { top: 20px; left: 40px; }
-
#sponsor-list li:nth-child(2) { top: 20px; left: 400px; }
+
#sponsor-list li:nth-child(2) { top: 20px; left: 300px; }
-
#sponsor-list li:nth-child(3) { top: 20px; left: 700px; }
+
#sponsor-list li:nth-child(3) { top: 20px; left: 520px; }
-
#sponsor-list li:nth-child(4) { top: 120px; right: 10px; }
+
#sponsor-list li:nth-child(4) { top: 120px; right: 200px; }
-
#sponsor-list li:nth-child(5) { top: 120px; left: 80px; }
+
#sponsor-list li:nth-child(5) { top: 120px; left: 70px; }
-
#sponsor-list li:nth-child(6) { top: 120px; left: 400px; }
+
#sponsor-list li:nth-child(6) { top: 120px; left: 305px; }
#sponsor-list li:nth-child(7) { top: 120px; left: 560px; }
#sponsor-list li:nth-child(7) { top: 120px; left: 560px; }
#sponsor-list li:nth-child(8) { top: 120px; right: 40px; }
#sponsor-list li:nth-child(8) { top: 120px; right: 40px; }
Line 32: Line 33:
.member-category {
.member-category {
     margin: 40px;
     margin: 40px;
 +
}
 +
 +
.member-header2 {
 +
    margin-top: 50px;
 +
}
 +
 +
.member-header3 {
 +
    margin-top: 50px;
 +
    position: relative;
 +
    top:0px;
}
}
Line 44: Line 55:
-
.show-ymzk{
+
.show{
     cursor: pointer;
     cursor: pointer;
     position: absolute;
     position: absolute;
}
}
   
   
-
.overlay-ymzk{
+
.overlay{
-
     opacity:0.7;
+
     opacity:1;
     background: black;
     background: black;
     color: white;
     color: white;
-
     height: 200px;
+
     height: 240px;
     position: relative;
     position: relative;
-
     width:500px;
+
     width:400px;
     display:none;
     display:none;
-
     margin-top: 6px;
+
     top: 6px;
 +
    right:130px;
 +
    z-index:5;
}
}
-
.overlay-ymzk::before {
+
.overlay::before {
content: "";
content: "";
display: inline-block;
display: inline-block;
border: 8px solid transparent;
border: 8px solid transparent;
border-bottom-color: #000;
border-bottom-color: #000;
-
position: absolute;
+
position: relative;
-
right: 50%;
+
left: 45%;
top: -6px;
top: -6px;
margin-top: -8px;
margin-top: -8px;
 +
z-index:5;
}
}
-
.overlay-content-ymzk{
+
.overlay-content {
     color: white;
     color: white;
-
    left: 30%;
 
     position: relative;
     position: relative;
     margin: 40px auto;
     margin: 40px auto;
-
     width: 100%;
+
     width:100%;
 +
    text-align:center;
 +
    top:-40px;
}​
}​
-
 
-
.show-sone{
 
-
    cursor: pointer;
 
-
    position: absolute;
 
-
}
 
-
 
-
.overlay-sone{
 
-
    opacity:0.7;
 
-
    background: black;
 
-
    color: white;
 
-
    height: 200px;
 
-
    position: relative;
 
-
    width:500px;
 
-
    display:none;
 
-
    top:6px;
 
-
}
 
-
 
-
.overlay-sone::before {
 
-
content: "";
 
-
display: inline-block;
 
-
border: 8px solid transparent;
 
-
border-bottom-color: #000;
 
-
position: absolute;
 
-
right: 50%;
 
-
top: -6px;
 
-
margin-top: -8px;
 
-
}
 
-
 
-
.overlay-content-sone{
 
-
    color: white;
 
-
    left: 30%;
 
-
    position: absolute;
 
-
    margin: 40px auto;
 
-
    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; left:-30%;
 
-
}
 
-
 
-
.overlay-hana::before {
 
-
content: "";
 
-
display: inline-block;
 
-
border: 8px solid transparent;
 
-
border-bottom-color: #000;
 
-
position: absolute;
 
-
right: 50%;
 
-
top: -6px;
 
-
margin-top: -8px;
 
-
}
 
-
 
-
.overlay-content-hana{
 
-
    color: white;
 
-
    left: 30%;
 
-
    position: absolute;
 
-
    margin: 40px auto;
 
-
    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; left:-30%;
 
-
}
 
-
 
-
.overlay-ryotaro::before {
 
-
content: "";
 
-
display: inline-block;
 
-
border: 8px solid transparent;
 
-
border-bottom-color: #000;
 
-
position: absolute;
 
-
right: 50%;
 
-
top: -6px;
 
-
margin-top: -8px;
 
-
}
 
-
 
-
.overlay-content-ryotaro{
 
-
    color: white;
 
-
    left: 30%;
 
-
    position: absolute;
 
-
    margin: 40px auto;
 
-
    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; left:-30%;
 
-
}
 
-
 
-
.overlay-ayano::before {
 
-
content: "";
 
-
display: inline-block;
 
-
border: 8px solid transparent;
 
-
border-bottom-color: #000;
 
-
position: absolute;
 
-
right: 50%;
 
-
top: -6px;
 
-
margin-top: -8px;
 
-
}
 
-
 
-
.overlay-content-ayano{
 
-
    color: white;
 
-
    left: 30%;
 
-
    position: absolute;
 
-
    margin: 40px auto;
 
-
    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; left:-30%;
 
-
}
 
-
 
-
.overlay-naoya::before {
 
-
content: "";
 
-
display: inline-block;
 
-
border: 8px solid transparent;
 
-
border-bottom-color: #000;
 
-
position: absolute;
 
-
right: 50%;
 
-
top: -6px;
 
-
margin-top: -8px;
 
-
}
 
-
 
-
.overlay-content-naoya{
 
-
    color: white;
 
-
    left: 30%;
 
-
    position: absolute;
 
-
    margin: 40px auto;
 
-
    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; left:-30%;
 
-
}
 
-
 
-
.overlay-osamu::before {
 
-
content: "";
 
-
display: inline-block;
 
-
border: 8px solid transparent;
 
-
border-bottom-color: #000;
 
-
position: absolute;
 
-
right: 50%;
 
-
top: -6px;
 
-
margin-top: -8px;
 
-
}
 
-
 
-
.overlay-content-osamu{
 
-
    color: white;
 
-
    left: 30%;
 
-
    position: absolute;
 
-
    margin: 40px auto;
 
-
    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; left:-30%;
 
-
}
 
-
 
-
.overlay-eri::before {
 
-
content: "";
 
-
display: inline-block;
 
-
border: 8px solid transparent;
 
-
border-bottom-color: #000;
 
-
position: absolute;
 
-
right: 50%;
 
-
top: -6px;
 
-
margin-top: -8px;
 
-
}
 
-
 
-
.overlay-content-eri{
 
-
    color: white;
 
-
    left: 30%;
 
-
    position: absolute;
 
-
    margin: 40px auto;
 
-
    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; left:-30%;
 
-
}
 
-
 
-
.overlay-tori::before {
 
-
content: "";
 
-
display: inline-block;
 
-
border: 8px solid transparent;
 
-
border-bottom-color: #000;
 
-
position: absolute;
 
-
right: 50%;
 
-
top: -6px;
 
-
margin-top: -8px;
 
-
}
 
-
 
-
.overlay-content-tori{
 
-
    color: white;
 
-
    left: 30%;
 
-
    position: absolute;
 
-
    margin: 40px auto;
 
-
    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; left:-30%;
 
-
}
 
-
 
-
.overlay-mami::before {
 
-
content: "";
 
-
display: inline-block;
 
-
border: 8px solid transparent;
 
-
border-bottom-color: #000;
 
-
position: absolute;
 
-
right: 50%;
 
-
top: -6px;
 
-
margin-top: -8px;
 
-
}
 
-
 
-
.overlay-content-mami{
 
-
    color: white;
 
-
    left: 30%;
 
-
    position: absolute;
 
-
    margin: 40px auto;
 
-
    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; left:-30%;
 
-
}
 
-
 
-
.overlay-tamaro::before {
 
-
content: "";
 
-
display: inline-block;
 
-
border: 8px solid transparent;
 
-
border-bottom-color: #000;
 
-
position: absolute;
 
-
right: 50%;
 
-
top: -6px;
 
-
margin-top: -8px;
 
-
}
 
-
 
-
.overlay-content-tamaro{
 
-
    color: white;
 
-
    left: 30%;
 
-
    position: absolute;
 
-
    margin: 40px auto;
 
-
    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; left:-30%;
 
-
}
 
-
 
-
.overlay-sanbon::before {
 
-
content: "";
 
-
display: inline-block;
 
-
border: 8px solid transparent;
 
-
border-bottom-color: #000;
 
-
position: absolute;
 
-
right: 50%;
 
-
top: -6px;
 
-
margin-top: -8px;
 
-
}
 
-
 
-
.overlay-content-sanbon{
 
-
    color: white;
 
-
    left: 30%;
 
-
    position: absolute;
 
-
    margin: 40px auto;
 
-
    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; left:-30%;
 
-
}
 
-
 
-
.overlay-liu::before {
 
-
content: "";
 
-
display: inline-block;
 
-
border: 8px solid transparent;
 
-
border-bottom-color: #000;
 
-
position: absolute;
 
-
right: 50%;
 
-
top: -6px;
 
-
margin-top: -8px;
 
-
}
 
-
 
-
.overlay-content-liu{
 
-
    color: white;
 
-
    left: 30%;
 
-
    position: absolute;
 
-
    margin: 40px auto;
 
-
    width: 50%;
 
-
}​
 
-
 
-
.show-shehata{
 
-
    cursor: pointer;
 
-
    position: absolute;
 
-
}
 
-
 
-
.overlayshehata{
 
-
    opacity:0.7;
 
-
    background: black;
 
-
    color: white;
 
-
    height: 200px;
 
-
    position: absolute;
 
-
    width:500px;
 
-
    display:none; left:-30%;
 
-
}
 
-
 
-
.overlayshehata::before {
 
-
content: "";
 
-
display: inline-block;
 
-
border: 8px solid transparent;
 
-
border-bottom-color: #000;
 
-
position: absolute;
 
-
right: 50%;
 
-
top: -6px;
 
-
margin-top: -8px;
 
-
}
 
-
 
-
.overlay-contentshehata{
 
-
    color: white;
 
-
    left: 30%;
 
-
    position: absolute;
 
-
    margin: 40px auto;
 
-
    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; left:-30%;
 
-
}
 
-
 
-
.overlay-kensuke::before {
 
-
content: "";
 
-
display: inline-block;
 
-
border: 8px solid transparent;
 
-
border-bottom-color: #000;
 
-
position: absolute;
 
-
right: 50%;
 
-
top: -6px;
 
-
margin-top: -8px;
 
-
}
 
-
 
-
.overlay-content-kensuke{
 
-
    color: white;
 
-
    left: 30%;
 
-
    position: absolute;
 
-
    margin: 40px auto;
 
-
    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; left:-30%;
 
-
}
 
-
 
-
.overlay-itoh::before {
 
-
content: "";
 
-
display: inline-block;
 
-
border: 8px solid transparent;
 
-
border-bottom-color: #000;
 
-
position: absolute;
 
-
right: 50%;
 
-
top: -6px;
 
-
margin-top: -8px;
 
-
}
 
-
 
-
.overlay-content-itoh{
 
-
    color: white;
 
-
    left: 30%;
 
-
    position: absolute;
 
-
    margin: 40px auto;
 
-
    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; left:-30%;
 
-
}
 
-
 
-
.overlay-kawahata::before {
 
-
content: "";
 
-
display: inline-block;
 
-
border: 8px solid transparent;
 
-
border-bottom-color: #000;
 
-
position: absolute;
 
-
right: 50%;
 
-
top: -6px;
 
-
margin-top: -8px;
 
-
}
 
-
 
-
.overlay-content-kawahata{
 
-
    color: white;
 
-
    left: 30%;
 
-
    position: absolute;
 
-
    margin: 40px auto;
 
-
    width: 50%;
 
-
}​
 
-
 
-
 

Latest revision as of 17:38, 11 October 2014

Retrieved from "http://2014.igem.org/Template:Team:HokkaidoU_Japan/About_Us/CSS"