Difference between revisions of "Template:Wageningen UR"

(Undo revision 146290 by MarioBeck (talk))
Line 348: Line 348:
 
.highlight {padding:15px 5px;}
 
.highlight {padding:15px 5px;}
 
}
 
}
/*======================== Slideshow =========================*/
 
.sp-slideshow {
 
    position: relative;
 
margin-left: -10px;
 
width: 100%;
 
max-width: 1000px;
 
min-width: 260px;
 
height: 385px;
 
border: 10px solid #fff;
 
border: 10px solid rgba(255,255,255,0.9);
 
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
 
}
 
 
 
.sp-slideshow_S{
 
position: relative;
 
margin-left: 100px;
 
width: 100%;
 
max-width: 650px;
 
min-width: 260px;
 
height: 385px;
 
border: 10px solid #fff;
 
border: 10px solid rgba(255,255,255,0.9);
 
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
 
 
}
 
 
 
.sp-content {
 
    background:none;
 
position: relative;
 
width: 100%;
 
height: 100%;
 
overflow: hidden;
 
}
 
 
.sp-parallax-bg {
 
    background: url('https://static.igem.org/mediawiki/2014/c/c0/Wageningen_UR_slide_background.png') repeat-x scroll 0 0;
 
    -webkit-background-size: cover;
 
    -moz-background-size: cover;
 
    background-size: cover;
 
position: absolute;
 
top: 0;
 
left: 0;
 
width: 100%;
 
height: 100%;
 
overflow: hidden;
 
}
 
 
.sp-slideshow input, .sp-slideshow_S input {
 
    position: absolute;
 
bottom: 15px;
 
left: 50%;
 
width: 9px;
 
height: 9px;
 
z-index: 1001;
 
cursor: pointer;
 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 
    filter: alpha(opacity=0);
 
    opacity: 0;
 
}
 
 
.sp-slideshow input + label, .sp-slideshow_S input + label {
 
    position: absolute;
 
    bottom: 15px;
 
left: 50%;
 
    width: 6px;
 
height: 6px;
 
display: block;
 
z-index: 1000;
 
border: 3px solid #fff;
 
border: 3px solid rgba(255,255,255,0.9);
 
    -webkit-border-radius: 50%;
 
    -moz-border-radius: 50%;
 
    border-radius: 50%;
 
    -webkit-transition: background-color linear 0.1s;
 
    -moz-transition: background-color linear 0.1s;
 
    -o-transition: background-color linear 0.1s;
 
    -ms-transition: background-color linear 0.1s;
 
    transition: background-color linear 0.1s;
 
}
 
.sp-slideshow input:checked + label, .sp-slideshow_S input:checked + label {
 
background-color: #fff;
 
    background-color: rgba(255,255,255,0.9);
 
}
 
 
.sp-selector-1, .button-label-1 {
 
    margin-left: -54px;
 
}
 
.sp-selector-2, .button-label-2 {
 
    margin-left: -36px;
 
}
 
.sp-selector-3, .button-label-3 {
 
    margin-left: -18px;
 
}
 
.sp-selector-4, .button-label-4 {
 
    margin-left: 0px;
 
}
 
.sp-selector-5, .button-label-5 {
 
    margin-left: 18px;
 
}
 
.sp-selector-6, .button-label-6 {
 
    margin-left: 36px;
 
}
 
.sp-selector-7, .button-label-7 {
 
    margin-left: 54px;
 
}
 
.sp-selector-8, .button-label-8 {
 
    margin-left: 72px;
 
}
 
 
.sp-arrow {
 
    position: absolute;
 
top: 50%;
 
width: 28px;
 
height: 38px;
 
margin-top: -19px;
 
display: none;
 
opacity: 0.8;
 
cursor: pointer;
 
z-index: 1000;
 
background: transparent url('https://static.igem.org/mediawiki/2014/4/4b/Wageningen_UR_arrows.png') no-repeat;
 
-webkit-transition: opacity linear 0.3s;
 
    -moz-transition: opacity linear 0.3s;
 
    -o-transition: opacity linear 0.3s;
 
    -ms-transition: opacity linear 0.3s;
 
    transition: opacity linear 0.3s;
 
}
 
.sp-arrow:hover{
 
opacity: 1;
 
}
 
.sp-arrow:active{
 
margin-top: -18px;
 
}
 
.sp-selector-1:checked ~ .sp-arrow.sp-a2,
 
.sp-selector-2:checked ~ .sp-arrow.sp-a3,
 
.sp-selector-3:checked ~ .sp-arrow.sp-a4,
 
.sp-selector-4:checked ~ .sp-arrow.sp-a5,
 
.sp-selector-5:checked ~ .sp-arrow.sp-a6,
 
.sp-selector-6:checked ~ .sp-arrow.sp-a7,
 
.sp-selector-7:checked ~ .sp-arrow.sp-a8 {
 
    right: 15px;
 
display: block;
 
background-position: top right;
 
}
 
.sp-selector-2:checked ~ .sp-arrow.sp-a1,
 
.sp-selector-3:checked ~ .sp-arrow.sp-a2,
 
.sp-selector-4:checked ~ .sp-arrow.sp-a3,
 
.sp-selector-5:checked ~ .sp-arrow.sp-a4,
 
.sp-selector-6:checked ~ .sp-arrow.sp-a5,
 
.sp-selector-7:checked ~ .sp-arrow.sp-a6,
 
.sp-selector-8:checked ~ .sp-arrow.sp-a7 {
 
    left: 15px;
 
display: block;
 
background-position: top left;
 
}
 
 
.sp-slideshow input:checked ~ .sp-content, .sp-slideshow_S input:checked ~ .sp-content {
 
    -webkit-transition: background-position linear 0.6s, background-color linear 0.8s;
 
    -moz-transition: background-position linear 0.6s, background-color linear 0.8s;
 
    -o-transition: background-position linear 0.6s, background-color linear 0.8s;
 
    -ms-transition: background-position linear 0.6s, background-color linear 0.8s;
 
    transition: background-position linear 0.6s, background-color linear 0.8s;
 
}
 
 
.sp-slideshow input:checked ~ .sp-content .sp-parallax-bg, .sp-slideshow_S input:checked ~ .sp-content .sp-parallax-bg {
 
    -webkit-transition: background-position linear 0.7s;
 
    -moz-transition: background-position linear 0.7s;
 
    -o-transition: background-position linear 0.7s;
 
    -ms-transition: background-position linear 0.7s;
 
    transition: background-position linear 0.7s;
 
}
 
 
input.sp-selector-1:checked ~ .sp-content {
 
    background-position: 0 0;
 
background-color: #727b7f;
 
}
 
input.sp-selector-2:checked ~ .sp-content {
 
    background-position: -100px 0;
 
background-color: #7f7276;
 
}
 
input.sp-selector-3:checked ~ .sp-content {
 
    background-position: -200px 0;
 
background-color: #737f72;
 
}
 
input.sp-selector-4:checked ~ .sp-content {
 
    background-position: -300px 0;
 
background-color: #79727f;
 
}
 
input.sp-selector-5:checked ~ .sp-content {
 
    background-position: -400px 0;
 
background-color: #7d7f72;
 
}
 
input.sp-selector-6:checked ~ .sp-content {
 
    background-position: -500px 0;
 
background-color: #7d7f72;
 
}
 
input.sp-selector-7:checked ~ .sp-content {
 
    background-position: -600px 0;
 
background-color: #7d7f72;
 
}
 
input.sp-selector-8:checked ~ .sp-content {
 
    background-position: -700px 0;
 
background-color: #7d7f72;
 
}
 
 
input.sp-selector-1:checked ~ .sp-content .sp-parallax-bg {
 
    background-position: 0 0;
 
}
 
input.sp-selector-2:checked ~ .sp-content .sp-parallax-bg {
 
    background-position: -200px 0;
 
}
 
input.sp-selector-3:checked ~ .sp-content .sp-parallax-bg {
 
    background-position: -400px 0;
 
}
 
input.sp-selector-4:checked ~ .sp-content .sp-parallax-bg {
 
    background-position: -600px 0;
 
}
 
input.sp-selector-5:checked ~ .sp-content .sp-parallax-bg {
 
    background-position: -800px 0;
 
}
 
input.sp-selector-6:checked ~ .sp-content .sp-parallax-bg {
 
    background-position: -1000px 0;
 
}
 
input.sp-selector-7:checked ~ .sp-content .sp-parallax-bg {
 
    background-position: -1200px 0;
 
}
 
input.sp-selector-8:checked ~ .sp-content .sp-parallax-bg {
 
    background-position: -1400px 0;
 
}
 
 
.sp-slider {
 
    position: relative;
 
left: 0;
 
    width: 800%;
 
height: 100%;
 
list-style: none;
 
    margin: 0;
 
padding: 0;
 
    -webkit-transition: left ease-in 0.8s;
 
    -moz-transition: left ease-in 0.8s;
 
    -o-transition: left ease-in 0.8s;
 
    -ms-transition: left ease-in 0.8s;
 
    transition: left ease-in 0.8s;
 
}
 
 
.sp-slider > li {
 
color: #fff;
 
width: 12.5%;
 
list-style:none;
 
-webkit-box-sizing: border-box;
 
-moz-box-sizing: border-box;
 
-o-box-sizing: border-box;
 
-ms-box-sizing: border-box;
 
box-sizing: border-box;
 
 
padding: 0 1% 0 0;
 
 
height: 100%;
 
 
    float: left;
 
text-align: center;
 
opacity: 0.4;
 
    -webkit-transition: opacity ease-in 0.4s 0.8s;
 
    -moz-transition: opacity ease-in 0.4s 0.8s;
 
    -o-transition: opacity ease-in 0.4s 0.8s;
 
    -ms-transition: opacity ease-in 0.4s 0.8s;
 
    transition: opacity ease-in 0.4s 0.8s;
 
}
 
 
.sp-slider > li img{
 
-webkit-box-sizing: border-box;
 
-moz-box-sizing: border-box;
 
-o-box-sizing: border-box;
 
-ms-box-sizing: border-box;
 
box-sizing: border-box;
 
display: block;
 
 
}
 
 
.big li img{
 
margin: 0 55px;
 
    padding: 40px 0 50px 0;
 
width:790px;
 
max-height:100%;
 
}
 
 
.small li img {
 
margin: 0 70px;
 
padding: 20px 0 60px 0;
 
max-height: 100%;
 
max-width: 100%;
 
}
 
input.sp-selector-1:checked ~ .sp-content .sp-slider {
 
    left: 0;
 
}
 
input.sp-selector-2:checked ~ .sp-content .sp-slider {
 
    left: -100%;
 
}
 
input.sp-selector-3:checked ~ .sp-content .sp-slider {
 
    left: -200%;
 
}
 
input.sp-selector-4:checked ~ .sp-content .sp-slider {
 
    left: -300%;
 
}
 
input.sp-selector-5:checked ~ .sp-content .sp-slider {
 
    left: -400%;
 
}
 
input.sp-selector-6:checked ~ .sp-content .sp-slider {
 
    left: -500%;
 
}
 
input.sp-selector-7:checked ~ .sp-content .sp-slider {
 
    left: -600%;
 
}
 
input.sp-selector-8:checked ~ .sp-content .sp-slider {
 
    left: -700%;
 
}
 
 
input.sp-selector-1:checked ~ .sp-content .sp-slider > li:first-child,
 
input.sp-selector-2:checked ~ .sp-content .sp-slider > li:nth-child(2),
 
input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3),
 
input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4),
 
input.sp-selector-5:checked ~ .sp-content .sp-slider > li:nth-child(5),
 
input.sp-selector-6:checked ~ .sp-content .sp-slider > li:nth-child(6),
 
input.sp-selector-7:checked ~ .sp-content .sp-slider > li:nth-child(7),
 
input.sp-selector-8:checked ~ .sp-content .sp-slider > li:nth-child(8){
 
opacity: 1;
 
}
 
@media screen and (max-width: 840px){
 
.sp-slideshow { height: 345px; }
 
}
 
@media screen and (max-width: 680px){
 
.sp-slideshow { height: 285px; }
 
}
 
@media screen and (max-width: 560px){
 
.sp-slideshow { height: 235px; }
 
}
 
@media screen and (max-width: 320px){
 
.sp-slideshow { height: 158px; }
 
}
 
 
/*Menu bar stuff ????? */
 
#menubar {
 
    width: auto;
 
}
 
#top-section{
 
    background-color: transparent;
 
}
 
#top-section:hover{
 
    background-color: rgba(100,100,100,0.5);
 
}
 
#top-section:hover li a {
 
    background-color: rgba(100,100,100,0.5);
 
    color: black;
 
}
 
#menubar a:link, #menubar a:active, #menubar a:visited,  #menubar:hover{
 
    color: transparent;
 
}
 
 
 
/*Three column layout with fixed middle width - http://css-lab.com/demos/3col-fluid/3col-fix-cntr.html*/
 
 
*{
 
margin:0;
 
padding:0;
 
}
 
 
body:before {/*Opera Fix*/
 
    content:"";
 
    height:100%;
 
    float:left;
 
    width:0;
 
    margin-bottom:-100px;/*header height*/
 
}
 
html{
 
height:100%;
 
}
 
body{
 
    height:100%;
 
    min-width: 1000px;/*To remove horizontal scrollbar*/
 
    overflow-x: hidden; /*To remove horizontal scrollbar*/
 
    background-image: url('https://static.igem.org/mediawiki/2016/7/74/T--Wageningen_UR--beigeBG.jpg');
 
background-size: 1000px;
 
font-family: verdana, geneva, sans-serif;
 
color: #000000;
 
font-size:80%;
 
}
 
 
#wrapper{
 
    min-height:100%;
 
    margin-top:-50px; /*footer soak up*/
 
    position:relative;/*set as containing block for AP faux column*/
 
   
 
}
 
#innerwrap{/*IE6 needs this for the AP faux column*/
 
    width:1024px;
 
    overflow:visible;
 
margin-left: auto;
 
margin-right: auto;
 
}
 
 
 
#header{
 
    /*border-top:50px solid #333;/*footer soak up*/
 
    margin-top: 60px; /*Change to 10 for IE*/
 
margin-bottom: -15px;
 
margin-left: -30px;
 
height: 170px;
 
    position:relative;
 
    z-index: -1;/*layer it above the AP faux*/
 
    /*background:inherit;*/
 
    color:#000;
 
    text-align:center;
 
background-image: url('https://static.igem.org/mediawiki/2016/7/7c/T--Wageningen_UR--beebanner.jpg');
 
background-size: auto 170px;
 
background-repeat: no-repeat;
 
background-position: center;
 
/*background-size: 200px;*/
 
display: block;
 
}
 
 
#left {
 
    width:50%;
 
    float:left;
 
    margin-right:-500px; /*-half center width*/
 
background:inherit;
 
/*border-bottom: 50px solid #97a355;*/
 
}
 
#inner-left{
 
    margin-right:505px; /*half center column width + 5*/
 
    background:inherit;/*background:#FFF;same as body BG*/
 
}
 
#center {
 
    width:1000px; /*center column width*/
 
    float:left;
 
    background:inherit;
 
    position:relative;
 
    z-index:3;
 
margin-top: -10px;
 
/*box-shadow: -10px 0px 10px 0px rgba(0,0,0,0.17); */
 
/*Could be the padding from menu or something*/
 
/*border-radius:10px;*/
 
/*border-width:2px;
 
    border-style:dashed;
 
border-color:#473d21;*/
 
}
 
.center_content{
 
padding: 50px;
 
margin-bottom: 20px;
 
background:#FFFFFF;
 
color: #473D2;
 
box-shadow: 0px 0px 8px 3px rgba(0,0,0,0.5);/*rgba(229, 299, 196, 0.8); */
 
border-radius: 3px;
 
overflow: hidden;
 
}
 
 
</style>
 
</style>
  
Line 897: Line 442:
  
 
<div class="content_wrapper">
 
<div class="content_wrapper">
 
<!-- We don't need this, we'll have a banner for it.
 
 
<h1 id="team_name">  </h1>
 
<h4 id="page_name">  </h4>
 
 
-->
 
 
 
 
 
 
 
  
 
<script>
 
<script>

Revision as of 13:01, 29 September 2016