Template:OUC-China/2012css.style.css

From 2012.igem.org

(Difference between revisions)
(Created page with ".ei-slider{ position: relative; width: 100%; max-width: 1920px; height: 400px; margin: 0 auto; } .ei-slider-loading{ width: 100%; height: 100%; position: absolute; top: ...")
Line 6: Line 6:
margin: 0 auto;
margin: 0 auto;
}
}
 +
.ei-slider-loading{
.ei-slider-loading{
width: 100%;
width: 100%;
Line 18: Line 19:
line-height: 400px;
line-height: 400px;
}
}
 +
.ei-slider-large{
.ei-slider-large{
height: 100%;
height: 100%;
Line 24: Line 26:
overflow: hidden;
overflow: hidden;
}
}
 +
.ei-slider-large li{
.ei-slider-large li{
position: absolute;
position: absolute;
Line 35: Line 38:
width: 100%;
width: 100%;
}
}
 +
.ei-title{
.ei-title{
position: absolute;
position: absolute;
Line 41: Line 45:
top: 30%;
top: 30%;
}
}
 +
.ei-title h2, .ei-title h3{
.ei-title h2, .ei-title h3{
text-align: right;
text-align: right;
}
}
 +
.ei-title h2{
.ei-title h2{
font-size: 40px;
font-size: 40px;
Line 51: Line 57:
color: #b5b5b5;
color: #b5b5b5;
}
}
 +
.ei-title h3{
.ei-title h3{
font-size: 70px;
font-size: 70px;
Line 58: Line 65:
color: #000;
color: #000;
}
}
 +
.ei-slider-thumbs{
.ei-slider-thumbs{
height: 13px;
height: 13px;
Line 63: Line 71:
position: relative;
position: relative;
}
}
 +
.ei-slider-thumbs li{
.ei-slider-thumbs li{
position: relative;
position: relative;
Line 68: Line 77:
height: 100%;
height: 100%;
}
}
 +
.ei-slider-thumbs li.ei-slider-element{
.ei-slider-thumbs li.ei-slider-element{
top: 0px;
top: 0px;
Line 78: Line 88:
background: rgba(0,0,0,0.9);
background: rgba(0,0,0,0.9);
}
}
 +
.ei-slider-thumbs li a{
.ei-slider-thumbs li a{
display: block;
display: block;
Line 100: Line 111:
     transition: background 0.2s ease;
     transition: background 0.2s ease;
}
}
 +
.ei-slider-thumbs li a:hover{
.ei-slider-thumbs li a:hover{
background-color: #f0f0f0;
background-color: #f0f0f0;
}
}
 +
.ei-slider-thumbs li img{
.ei-slider-thumbs li img{
position: absolute;
position: absolute;
Line 125: Line 138:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
}
 +
.ei-slider-thumbs li:hover img{
.ei-slider-thumbs li:hover img{
opacity: 1;
opacity: 1;
Line 130: Line 144:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
}
 +
@media screen and (max-width: 830px) {
@media screen and (max-width: 830px) {
.ei-title{
.ei-title{
Line 143: Line 158:
padding: 5px 0;
padding: 5px 0;
}
}
 +
.ei-title h2, .ei-title h3{
.ei-title h2, .ei-title h3{
text-align: center;
text-align: center;

Revision as of 09:27, 14 July 2012

.ei-slider{ position: relative; width: 100%; max-width: 1920px; height: 400px; margin: 0 auto; }

.ei-slider-loading{ width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index:999; background: rgba(0,0,0,0.9); color: #fff; text-align: center; line-height: 400px; }

.ei-slider-large{ height: 100%; width: 100%; position:relative; overflow: hidden; }

.ei-slider-large li{ position: absolute; top: 0px; left: 0px; overflow: hidden; height: 100%; width: 100%; } .ei-slider-large li img{ width: 100%; }

.ei-title{ position: absolute; right: 50%; margin-right: 13%; top: 30%; }

.ei-title h2, .ei-title h3{ text-align: right; }

.ei-title h2{ font-size: 40px; line-height: 50px; font-family: 'Playfair Display', serif; font-style: italic; color: #b5b5b5; }

.ei-title h3{ font-size: 70px; line-height: 70px; font-family: 'Open Sans Condensed', sans-serif; text-transform: uppercase; color: #000; }

.ei-slider-thumbs{ height: 13px; margin: 0 auto; position: relative; }

.ei-slider-thumbs li{ position: relative; float: left; height: 100%; }

.ei-slider-thumbs li.ei-slider-element{ top: 0px; left: 0px; position: absolute; height: 100%; z-index: 10; text-indent: -9000px; background: #000; background: rgba(0,0,0,0.9); }

.ei-slider-thumbs li a{ display: block; text-indent: -9000px; background: #666 ; width: 100%; height: 100%; cursor: pointer; -webkit-box-shadow: 

       0px 1px 1px 0px rgba(0,0,0,0.3), 
       0px 1px 0px 1px rgba(255,255,255,0.5);

-moz-box-shadow: 

       0px 1px 1px 0px rgba(0,0,0,0.3), 
       0px 1px 0px 1px rgba(255,255,255,0.5);

box-shadow: 

       0px 1px 1px 0px rgba(0,0,0,0.3), 
       0px 1px 0px 1px rgba(255,255,255,0.5);

-webkit-transition: background 0.2s ease; 

   -moz-transition: background 0.2s ease;
   -o-transition: background 0.2s ease;
   -ms-transition: background 0.2s ease;
   transition: background 0.2s ease;

}

.ei-slider-thumbs li a:hover{ background-color: #f0f0f0; }

.ei-slider-thumbs li img{ position: absolute; bottom: 50px; opacity: 0; z-index: 999; max-width: 100%; -webkit-transition: all 0.4s ease; 

   -moz-transition: all 0.4s ease;
   -o-transition: all 0.4s ease;
   -ms-transition: all 0.4s ease;
   transition: all 0.4s ease;

-webkit-box-reflect: 

       below 0px -webkit-gradient(
           linear, 
           left top, 
           left bottom, 
           from(transparent), 
           color-stop(50%, transparent), 
           to(rgba(255,255,255,0.3))
           );

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }

.ei-slider-thumbs li:hover img{ opacity: 1; bottom: 13px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

@media screen and (max-width: 830px) { .ei-title{ position: absolute; right: 0px; margin-right: 0px; width: 100%; text-align: center; top: auto; bottom: 10px; background: #fff; background: rgba(255,255,255,0.9); padding: 5px 0; }

.ei-title h2, .ei-title h3{ text-align: center; } .ei-title h2{ font-size: 20px; line-height: 24px; } .ei-title h3{ font-size: 30px; line-height: 40px; } }

Retrieved from "http://2012.igem.org/Template:OUC-China/2012css.style.css"