Difference between revisions of "Template:Wageningen UR"

 
(24 intermediate revisions by 3 users not shown)
Line 6: Line 6:
  
 
#sideMenu, #top_title {display:none;}
 
#sideMenu, #top_title {display:none;}
#content { padding:0px; width:1000px; margin-top:-7px; margin-left:0px;}
+
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;background-color: transparent;}
body {background-color: white; }
+
body {background-color: transparent; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
  
Line 20: Line 20:
 
background-color:#f2f2f2;  
 
background-color:#f2f2f2;  
 
text-align:left;
 
text-align:left;
 +
display:none;
 
}
 
}
  
Line 84: Line 85:
 
.menu_item a {
 
.menu_item a {
 
width: 100%;
 
width: 100%;
margin-left: -20px;
+
/*margin-left: -20px;*/
 
padding: 11px 90px 12px 20px;
 
padding: 11px 90px 12px 20px;
 
text-decoration: none;
 
text-decoration: none;
color:black;
+
color:black;
 +
                text-align:left;
 
}
 
}
  
Line 170: Line 172:
 
padding:10px 0px;  
 
padding:10px 0px;  
 
float:left;  
 
float:left;  
background-color:white;  
+
background-color:transparent;  
 
}
 
}
  
 
/*LAYOUT */
 
/*LAYOUT */
 
.column  {  
 
.column  {  
padding: 10px 0px;
+
padding: 100px 0px;
 
float:left;  
 
float:left;  
 
background-color:white;  
 
background-color:white;  
Line 341: Line 343:
 
.menu_item {display:none;}
 
.menu_item {display:none;}
 
.menu_wrapper { width:100%; height: 15%; position:relative;}
 
.menu_wrapper { width:100%; height: 15%; position:relative;}
.content_wrapper {width:100%; margin-left:0px;}
+
.content_wrapper {width:100%; margin-left:0px;background-color: transparent;}
 
.column.half_size {width:100%; }
 
.column.half_size {width:100%; }
 
.column img { width: 100%; padding: 5px 0px;}
 
.column img { width: 100%; padding: 5px 0px;}
Line 347: Line 349:
 
.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; }
 
}
 
 
 
</style>
 
</style>
  
Line 782: Line 443:
  
 
<div class="content_wrapper">
 
<div class="content_wrapper">
 
 
 
<h1 id="team_name">  </h1>
 
<h4 id="page_name">  </h4>
 
 
 
 
 
 
 
 
 
  
 
<script>
 
<script>

Latest revision as of 09:11, 17 October 2016