|
|
| 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> |
