Team:OLS Canmore AB CA/style.css
From 2014hs.igem.org
Carterbehm (Talk | contribs) |
Carterbehm (Talk | contribs) (Undo revision 2045 by Carterbehm (talk)) |
||
Line 1: | Line 1: | ||
/* | /* | ||
* generated by WOW Slider 5.2 | * generated by WOW Slider 5.2 | ||
- | * template | + | * template Strict |
*/ | */ | ||
- | + | @import url("http://fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic,latin-ext"); | |
#wowslider-container1 { | #wowslider-container1 { | ||
zoom: 1; | zoom: 1; | ||
position: relative; | position: relative; | ||
max-width:960px; | max-width:960px; | ||
- | margin: | + | margin:0px auto 0px; |
z-index:90; | z-index:90; | ||
- | border: | + | border:none; |
text-align:left; /* reset align=center */ | text-align:left; /* reset align=center */ | ||
font-size: 10px; | font-size: 10px; | ||
Line 87: | Line 87: | ||
margin-left: -2em; | margin-left: -2em; | ||
margin-top: -2em; | margin-top: -2em; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
#wowslider-container1 .ws_bullets { | #wowslider-container1 .ws_bullets { | ||
- | padding: | + | padding: 5px 0; |
} | } | ||
#wowslider-container1 .ws_bullets a { | #wowslider-container1 .ws_bullets a { | ||
- | + | width: 25px; | |
- | width: | + | height: 25px; |
- | height: | + | |
- | background: url(./bullet.png) | + | background-image: url(./bullet.png); |
float: left; | float: left; | ||
text-indent: -4000px; | text-indent: -4000px; | ||
position:relative; | position:relative; | ||
+ | margin-left:0px; | ||
color:transparent; | color:transparent; | ||
+ | background-size: 100%; | ||
} | } | ||
- | + | #wowslider-container1 .ws_bullets a:hover, #wowslider-container1 .ws_bullets a.ws_selbull{ | |
- | + | background-position: 0 100%; | |
- | + | ||
- | #wowslider-container1 .ws_bullets a.ws_selbull{ | + | |
- | background-position: | + | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
#wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev { | #wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev { | ||
Line 120: | Line 111: | ||
display:none; | display:none; | ||
top:50%; | top:50%; | ||
- | margin-top:- | + | margin-top:-2.9em; |
- | + | ||
z-index:60; | z-index:60; | ||
- | + | width: 5.8em; | |
- | + | height: 5.8em; | |
background-image: url(./arrows.png); | background-image: url(./arrows.png); | ||
background-size: 200%; | background-size: 200%; | ||
- | + | opacity: 0.7; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
#wowslider-container1 a.ws_next{ | #wowslider-container1 a.ws_next{ | ||
- | background-position: | + | background-position: 0 0; |
- | right: | + | right:0px; |
} | } | ||
#wowslider-container1 a.ws_prev { | #wowslider-container1 a.ws_prev { | ||
- | + | background-position: 100% 0; | |
- | + | left:0px; | |
+ | } | ||
+ | #wowslider-container1 a.ws_next:hover, | ||
+ | #wowslider-container1 a.ws_prev:hover{ | ||
+ | opacity: 0.9; | ||
} | } | ||
* html #wowslider-container1 a.ws_next,* html #wowslider-container1 a.ws_prev{display:block} | * html #wowslider-container1 a.ws_next,* html #wowslider-container1 a.ws_prev{display:block} | ||
Line 146: | Line 137: | ||
#wowslider-container1 .ws_playpause { | #wowslider-container1 .ws_playpause { | ||
display:none; | display:none; | ||
- | width: | + | width: 5.8em; |
- | height: | + | height: 5.8em; |
position: absolute; | position: absolute; | ||
top: 50%; | top: 50%; | ||
left: 50%; | left: 50%; | ||
- | margin-left: - | + | margin-left: -2.9em; |
- | margin-top: - | + | margin-top: -2.9em; |
z-index: 59; | z-index: 59; | ||
background-size: 100%; | background-size: 100%; | ||
+ | opacity: 0.7; | ||
} | } | ||
Line 167: | Line 159: | ||
#wowslider-container1 .ws_play { | #wowslider-container1 .ws_play { | ||
background-image: url(./play.png); | background-image: url(./play.png); | ||
+ | } | ||
+ | |||
+ | #wowslider-container1 .ws_pause, | ||
+ | #wowslider-container1 .ws_play, | ||
+ | #wowslider-container1 a.ws_next, | ||
+ | #wowslider-container1 a.ws_prev { | ||
+ | -webkit-transition: opacity .3s ease; | ||
+ | -moz-transition: opacity .3s ease; | ||
+ | -ms-transition: opacity .3s ease; | ||
+ | -o-transition: opacity .3s ease; | ||
+ | transition: opacity .3s ease; | ||
} | } | ||
#wowslider-container1 .ws_pause:hover, #wowslider-container1 .ws_play:hover { | #wowslider-container1 .ws_pause:hover, #wowslider-container1 .ws_play:hover { | ||
- | + | opacity: 0.9; | |
- | }/* bottom | + | }/* bottom right */ |
#wowslider-container1 .ws_bullets { | #wowslider-container1 .ws_bullets { | ||
- | + | bottom: 0px; | |
- | + | left: 50%; | |
- | left:50%; | + | |
} | } | ||
#wowslider-container1 .ws_bullets div{ | #wowslider-container1 .ws_bullets div{ | ||
left:-50%; | left:-50%; | ||
} | } | ||
- | + | ||
- | + | #wowslider-container1 .ws-title{ | |
- | + | position:absolute; | |
- | position: absolute; | + | display:block; |
- | bottom: | + | bottom: 4em; |
- | left: 0px; | + | left: 0px; |
- | margin-right: | + | margin-right:1em; |
+ | padding:1em; | ||
+ | background-color: rgba(96,125,246,0.7); | ||
+ | color: #fff; | ||
z-index: 50; | z-index: 50; | ||
- | + | font-family:'Roboto Condensed',"MS Sans Serif",Geneva,sans-serif; | |
- | + | line-height: 2.7em; | |
- | + | text-transform: none; | |
- | + | opacity:1; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | opacity: | + | |
- | + | ||
} | } | ||
#wowslider-container1 .ws-title div{ | #wowslider-container1 .ws-title div{ | ||
- | + | padding-top: 0.15em; | |
- | font-size: 1. | + | font-size: 1.8em; |
+ | line-height: 1.3em; | ||
} | } | ||
#wowslider-container1 .ws-title span{ | #wowslider-container1 .ws-title span{ | ||
- | font-size: | + | font-size: 2.6em; |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | ||
- | + | #wowslider-container1 .ws_images ul{ | |
- | + | animation: wsBasic 16s infinite; | |
- | + | -moz-animation: wsBasic 16s infinite; | |
- | + | -webkit-animation: wsBasic 16s infinite; | |
- | #wowslider-container1 | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
+ | @keyframes wsBasic{0%{left:-0%} 12.5%{left:-0%} 25%{left:-100%} 37.5%{left:-100%} 50%{left:-200%} 62.5%{left:-200%} 75%{left:-300%} 87.5%{left:-300%} } | ||
+ | @-moz-keyframes wsBasic{0%{left:-0%} 12.5%{left:-0%} 25%{left:-100%} 37.5%{left:-100%} 50%{left:-200%} 62.5%{left:-200%} 75%{left:-300%} 87.5%{left:-300%} } | ||
+ | @-webkit-keyframes wsBasic{0%{left:-0%} 12.5%{left:-0%} 25%{left:-100%} 37.5%{left:-100%} 50%{left:-200%} 62.5%{left:-200%} 75%{left:-300%} 87.5%{left:-300%} } | ||
+ | |||
#wowslider-container1 .ws_bullets a img{ | #wowslider-container1 .ws_bullets a img{ | ||
text-indent:0; | text-indent:0; | ||
Line 248: | Line 223: | ||
visibility:hidden; | visibility:hidden; | ||
position:absolute; | position:absolute; | ||
- | + | border: 4px solid #FFFFFF; | |
- | + | ||
- | border: | + | |
max-width:none; | max-width:none; | ||
} | } | ||
Line 267: | Line 240: | ||
position:relative; | position:relative; | ||
width:128px; | width:128px; | ||
- | background-color:# | + | background-color:#FFFFFF; |
} | } | ||
#wowslider-container1 .ws_bullets .ws_bulframe{ | #wowslider-container1 .ws_bullets .ws_bulframe{ | ||
display:none; | display:none; | ||
+ | bottom:31px; | ||
+ | margin-left: 3px; | ||
overflow:visible; | overflow:visible; | ||
position:absolute; | position:absolute; | ||
cursor:pointer; | cursor:pointer; | ||
- | + | border: 4px solid rgba(96,125,246,0.7); | |
- | + | ||
- | border: | + | |
} | } | ||
#wowslider-container1 .ws_bulframe span{ | #wowslider-container1 .ws_bulframe span{ | ||
display:block; | display:block; | ||
position:absolute; | position:absolute; | ||
- | bottom:- | + | bottom:-11px; |
margin-left:-1px; | margin-left:-1px; | ||
left:64px; | left:64px; | ||
background:url(./triangle.png); | background:url(./triangle.png); | ||
- | width: | + | width:13px; |
- | height: | + | height:7px; |
} | } |
Revision as of 00:52, 27 March 2014
/*
* generated by WOW Slider 5.2 * template Strict */
@import url("http://fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic,latin-ext");
- wowslider-container1 {
zoom: 1; position: relative; max-width:960px; margin:0px auto 0px; z-index:90; border:none; text-align:left; /* reset align=center */ font-size: 10px; }
- html #wowslider-container1{ width:960px }
- wowslider-container1 .ws_images ul{
position:relative; width: 10000%; height:auto; left:0; list-style:none; margin:0; padding:0; border-spacing:0; overflow: visible; /*table-layout:fixed;*/ }
- wowslider-container1 .ws_images ul li{
width:1%; line-height:0; /*opera*/ float:left; font-size:0; padding:0 0 0 0 !important; margin:0 0 0 0 !important; }
- wowslider-container1 .ws_images{
position: relative; left:0; top:0; width:100%; height:100%; overflow:hidden; }
- wowslider-container1 .ws_images a{
width:100%; display:block; color:transparent; }
- wowslider-container1 img{
max-width: none !important; }
- wowslider-container1 .ws_images img{
width:100%; border:none 0; max-width: none; padding:0; margin:0; }
- wowslider-container1 a{
text-decoration: none; outline: none; border: none; }
- wowslider-container1 .ws_bullets {
font-size: 0px; float: left; position:absolute; z-index:70; }
- wowslider-container1 .ws_bullets div{
position:relative; float:left; }
- wowslider-container1 .wsl{
display:none; }
- wowslider-container1 sound,
- wowslider-container1 object{
position:absolute; }
- wowslider-container1 .ws_photoItem {
border: 2em solid #fff; margin-left: -2em; margin-top: -2em; }
- wowslider-container1 .ws_bullets {
padding: 5px 0; }
- wowslider-container1 .ws_bullets a {
width: 25px; height: 25px;
background-image: url(./bullet.png); float: left; text-indent: -4000px; position:relative; margin-left:0px; color:transparent; background-size: 100%; }
- wowslider-container1 .ws_bullets a:hover, #wowslider-container1 .ws_bullets a.ws_selbull{
background-position: 0 100%; }
- wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev {
position:absolute; display:none; top:50%; margin-top:-2.9em; z-index:60; width: 5.8em; height: 5.8em; background-image: url(./arrows.png); background-size: 200%; opacity: 0.7; }
- wowslider-container1 a.ws_next{
background-position: 0 0; right:0px; }
- wowslider-container1 a.ws_prev {
background-position: 100% 0; left:0px; }
- wowslider-container1 a.ws_next:hover,
- wowslider-container1 a.ws_prev:hover{
opacity: 0.9; }
- html #wowslider-container1 a.ws_next,* html #wowslider-container1 a.ws_prev{display:block}
- wowslider-container1:hover a.ws_next, #wowslider-container1:hover a.ws_prev {display:block}
/*playpause*/
- wowslider-container1 .ws_playpause {
display:none;
width: 5.8em; height: 5.8em; position: absolute; top: 50%; left: 50%; margin-left: -2.9em; margin-top: -2.9em; z-index: 59;
background-size: 100%; opacity: 0.7; }
- wowslider-container1:hover .ws_playpause {
display:block; }
- wowslider-container1 .ws_pause {
background-image: url(./pause.png);
}
- wowslider-container1 .ws_play {
background-image: url(./play.png);
}
- wowslider-container1 .ws_pause,
- wowslider-container1 .ws_play,
- wowslider-container1 a.ws_next,
- wowslider-container1 a.ws_prev {
-webkit-transition: opacity .3s ease; -moz-transition: opacity .3s ease; -ms-transition: opacity .3s ease; -o-transition: opacity .3s ease; transition: opacity .3s ease; }
- wowslider-container1 .ws_pause:hover, #wowslider-container1 .ws_play:hover {
opacity: 0.9;
}/* bottom right */
- wowslider-container1 .ws_bullets {
bottom: 0px;
left: 50%; }
- wowslider-container1 .ws_bullets div{
left:-50%; }
- wowslider-container1 .ws-title{
position:absolute; display:block; bottom: 4em; left: 0px; margin-right:1em; padding:1em; background-color: rgba(96,125,246,0.7); color: #fff; z-index: 50; font-family:'Roboto Condensed',"MS Sans Serif",Geneva,sans-serif; line-height: 2.7em; text-transform: none; opacity:1; }
- wowslider-container1 .ws-title div{
padding-top: 0.15em;
font-size: 1.8em; line-height: 1.3em; }
- wowslider-container1 .ws-title span{
font-size: 2.6em; }
- wowslider-container1 .ws_images ul{
animation: wsBasic 16s infinite; -moz-animation: wsBasic 16s infinite; -webkit-animation: wsBasic 16s infinite; } @keyframes wsBasic{0%{left:-0%} 12.5%{left:-0%} 25%{left:-100%} 37.5%{left:-100%} 50%{left:-200%} 62.5%{left:-200%} 75%{left:-300%} 87.5%{left:-300%} } @-moz-keyframes wsBasic{0%{left:-0%} 12.5%{left:-0%} 25%{left:-100%} 37.5%{left:-100%} 50%{left:-200%} 62.5%{left:-200%} 75%{left:-300%} 87.5%{left:-300%} } @-webkit-keyframes wsBasic{0%{left:-0%} 12.5%{left:-0%} 25%{left:-100%} 37.5%{left:-100%} 50%{left:-200%} 62.5%{left:-200%} 75%{left:-300%} 87.5%{left:-300%} }
- wowslider-container1 .ws_bullets a img{
text-indent:0; display:block; bottom:20px; left:-64px; visibility:hidden; position:absolute;
border: 4px solid #FFFFFF;
max-width:none; }
- wowslider-container1 .ws_bullets a:hover img{
visibility:visible; }
- wowslider-container1 .ws_bulframe div div{
height:48px; overflow:visible; position:relative; }
- wowslider-container1 .ws_bulframe div {
left:0; overflow:hidden; position:relative; width:128px; background-color:#FFFFFF; }
- wowslider-container1 .ws_bullets .ws_bulframe{
display:none; bottom:31px; margin-left: 3px; overflow:visible; position:absolute; cursor:pointer;
border: 4px solid rgba(96,125,246,0.7);
}
- wowslider-container1 .ws_bulframe span{
display:block; position:absolute; bottom:-11px; margin-left:-1px; left:64px; background:url(./triangle.png); width:13px; height:7px; }