Talk:Team:Wageningen UR/css

From 2014.igem.org

/*

  • Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
  • http://cssreset.com
  • /

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; /*vertical-align: baseline;*/ } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ; content: none; } table { border-collapse: collapse; border-spacing: 0; }

/*Hiding default wiki elements - thanks to DTU-Denmark 2011*/

  1. contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo { 
   display:none;}

/* Some changes to the iGEM menu bar - thanks to DTU-Denmark 2011 (https://2011.igem.org/Team:DTU-Denmark/How_to_customize_an_iGEM_wiki) */

  1. menubar > ul > li:last-child { 
   display: none;

}

  1. menubar { 
   width: auto;

}

  1. top-section{ 
   background-color: transparent;

}

  1. menubar a:link, #menubar a:active, #menubar a:visited, #menubar:hover{ 
   color: transparent;

}

  1. menubar:hover li a { 
   color: black;

}

/*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%;
   background-image: url('https://static.igem.org/mediawiki/2014/0/02/Wageningen_UR_background.jpg');

background-size: 1000px; font-family: verdana, geneva, sans-serif; color: #000000; font-size:80%; }

  1. wrapper{ 
   min-height:100%;
   margin-top:-50px; /*footer soak up*/
   position:relative;/*set as containing block for AP faux column*/

}

  1. innerwrap{/*IE6 needs this for the AP faux column*/ 
   width:1024px;
   overflow:visible;

margin-left: auto; margin-right: auto; }


  1. header{ 
   /*border-top:50px solid #333;/*footer soak up*/
   margin-top: 60px;

margin-bottom: -15px; margin-left: -30px; height: 190px; 

   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/2014/9/95/Wageningen_UR_banner.png'); background-repeat: no-repeat; background-position: center; /*background-size: 200px;*/ display: block; }

  1. left { 
   width:50%;
   float:left;
   margin-right:-500px; /*-half center width*/

background:inherit; /*border-bottom: 50px solid #97a355;*/ }

  1. inner-left{ 
   margin-right:505px; /*half center column width + 5*/
   background:inherit;/*background:#FFF;same as body BG*/

}

  1. 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; }

  1. right { 
   width:50%;
   float:right;
   margin-left:-500px; /*-half center width*/

background:#FFFFFF; }

  1. inner-right { 
   margin-left:505px; /*half center column width + 5*/
   background:#FFFFFF;/*same as body BG*/

}

  1. center-faux{ 
   position:absolute;
   width:1000px; /*center column width*/
   left:50%;
   bottom:0;
   height:100%;
   margin-left:-500px; /*-half center column width*/
   background:inherit;
   z-index:0;

/*box-shadow: 0px 0px 8px 3px #E5E5C4; */ border-radius:10px; /* -webkit-box-shadow: 0px 0px 53px 16px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 53px 16px rgba(0,0,0,0.75); box-shadow: 0px 0px 53px 16px rgba(0,0,0,0.75); */ }

  • html #center-faux{height:999em}/*for IE6*/
  1. footer{

margin-top: 30px; padding-top:100px; 

   clear:both;
   width:100%;
   height:50px;

/*background-color: #97a355;*/ background-image: url(Wageningen_UR_footer.png); 

   color:#f0efcd;
   text-align:center;

}

  1. mascot{

position: fixed; bottom: 10px; right: 10px; }

.sidebar-container{ float: right; } .sidebar { position: fixed; margin-top: 345px; margin-left: -175px; } .sidebar ul { background: #97A355; box-shadow: 0px 5px 9px rgba(0,0,0,0.50); padding: 0 0px; margin: 0px 20px; border-radius: 3px; list-style: none; position: relative; display: inline-table;

} .sidebar ul li { /*border: 1px solid #97a355;*/ /*margin: 5px 5px 0px -5px;*/ /*to make small boxes*/ /*border-radius: 4px;*/ border-top: 2px solid #9EAB59; border-right:1px solid #9EAB59; border-left:1px solid #9EAB59; border-bottom:2px solid #8B964E; border-radius: 3px; display: block;

padding: 12px 12px; /*sidebar padding between items*/ } .sidebar ul li a { display: block; width: 150px; color: #222; text-decoration: none; font-weight: bold;

}

.sidebar ul li:hover { background: #473D21; box-shadow: 0px 0px 10px rgba(0,0,0,0.15); border-top: 2px solid #544827; border-right: 1px solid #544827; border-left: 1px solid #544827; border-bottom: 2px solid #40371E; border-radius: 3px; }

.sidebar ul li:hover a { color: #FFF372; font-weight: ;

} /*top margin is 25px right margin is 50px bottom margin is 75px left margin is 100px*/

  1. center h1{

color:#3a3424; margin: 20px 10px 10px 10px; font-size:200%; border-bottom: 2px solid #3a3424; /*f0efcd;*/ }

  1. center h2{

margin: 10px 10px 5px 10px; font-size:150%; color: #575e31; border-bottom: 1px solid #575e31; /*text-decoration:underline*/ }

  1. center h3{

margin: 10px 10px 0px 15px; color:#3a3424; font-size:140%; }

  1. center h4{

margin: 0px 10px 10px 40px; color:#3a3424; font-size:120%; font-weight: 800; }

  1. center p{

margin: 10px 15px 10px 15px; color:#3a3424; font-size:14px; text-align: justify; line-height:1.5em; font-weight: 400; }

  1. center p.notjustified{

text-align: left; }

  1. center h1+p, h2+p, h3+p, h4+p{

padding-top:0px; }

  1. references{

font-family: "Courier New",Courier,monospace; }

  1. references h2{

font-size:100%; }

  1. references ol{

font-size:75%; padding-left:30px; }

  1. footer p{

padding-top: 8px; margin: 0px; line-height: initial; }


/*TEAM PAGE #E1FEA2*/

.box-left-team, .box-right-team{ margin: 10px 10px 10px 10px; float: left; height: 460px; width:410px; clear: both; background-color: #f0efcd; /*#F6FAED;*/ border: 10px solid white; /*border-radius: 10px;*/ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }

  1. center .box-left-team > p, #center .box-right-team > p{

font-size: 12px; margin-bottom: 10px; }

  1. center .box-left-team > h3, #center .box-right-team > h3{

font-size: 14px; margin-top: 0px; }

.box-left-team-photo{ margin: 10px 15px 5px 15px; float: right; height: 235px; border-radius: 10px; }

.box-right-team{ float: right; clear: none; } .box-right-team-invisble{ width: 430px; background: inherit; border: none }

@font-face { font-family: 'icomoon'; src:url('../icomoon/fonts/icomoon.eot'); src:url('../icomoon/fonts/icomoon.eot') format('embedded-opentype'), url('../icomoon/fonts/icomoon.woff') format('woff'), url('../icomoon/fonts/icomoon.ttf') format('truetype'), url('../icomoon/fonts/icomoon.svg') format('svg'); font-weight: normal; font-style: normal; }

/* Navigation Menu */ .navmenubkg { 

  position:relative;
  display:block;
  z-index:450;
  top:10px;
  height:50px;
  left:0;
  right:0;
  background:transparent;
  }
  1. nav_wrapper{

padding:0; margin-top:0; 

   margin-left:-30px;
   margin-right:auto;

padding-left:10px; 

   width:1050px;
   height:50px;
   z-index:500;
   display:block;

background-color:#97A355; 

   color: rgb(46,43,52); /*grey*/
   text-align:center;

border-radius: 3px; -webkit-box-shadow: 1px 3px 5px rgba(0,0,0,0.5); 

   -moz-box-shadow: 1px 3px 5px rgba(0,0,0,0.5);
   box-shadow: 1px 3px 5px rgba(0,0,0,0.5);

}

.sidelogos { 

   float:left;
   display:block;
   margin-left:auto;
   height:100%;
   width:65px;;

} .sidelogos a { 

  display:block;
  top:0;
  bottom:0;

}

  1. rightbarlogo {

padding-top: 1 px; position: absolute; right:-10px; bottom: 1px; }

  1. pblogo img{

height:40px; /*margin-top: -10px;*/ background-color:transparent; margin-top:5px; margin-left:8px; -webkit-transform:rotate(0deg) scale(0.9); -moz-transform:rotate(0deg) scale(0.9); -ms-transform:rotate(0deg) scale(0.9); -o-transform:rotate(0deg) scale(0.9); transform:rotate(0deg) scale(0.9); -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out; 

}


  1. pblogo:hover img{

background-color:transparent; -webkit-transform:rotate(360deg) scale(1.3); -moz-transform:rotate(360deg) scale(1.3); -ms-transform:rotate(360deg) scale(1.3); -o-transform:rotate(360deg) scale(1.3); transform:rotate(360deg) scale(1.3); }


  1. igemlogo:hover img {

opacity:1; }

  1. rightlogo img{

position:relative; z-index: -1;\\ background-color:transparent; height:400px; margin-top:-200px; margin-left:-120px; overflow: visible; }

/*menu bar*/

  1. ca-menu{ 
   padding:0;
   margin:0;

margin-left:15px; 

   width: 880px;

display:block; position:relative; float:left; }

  1. ca-menu ul{

list-style-type: none; 

   padding: 0;
   margin: 0;
   position:relative;

width:900px;

}

  1. ca-menu li{ 
   width: 142px;
   height: 50px;
   position: relative;
   float:left;
   background:#97A355;

   -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
   -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
   box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
   margin-right: 4px;

-webkit-transition: all 400ms linear; 

   -moz-transition: all 400ms linear;
   -o-transition: all 400ms linear;
   -ms-transition: all 400ms linear;
   transition: all 400ms linear;

}

  1. ca-menu li a{ 
   text-align: left;
   width: 100%;
   height: 100%;
   display: block;
   color: #222;
   position: relative;

}

  1. ca-icon1{ 
   position: absolute;

width:150px; 

   height: 50px;
   left: 10px;
   top: 0;
   text-align: left;

overflow:hidden; background:url(Wageningen_UR_cog1.png); background-size:35px; background-repeat:no-repeat; background-position:left center; -webkit-transition: all 400ms linear; 

   -moz-transition: all 400ms linear;
   -o-transition: all 400ms linear;
   -ms-transition: all 400ms linear;
   transition: all 400ms linear;

}

  1. ca-icon2{ 
   position: absolute;
 	width:150px;
   height: 50px;
   left: 10px;
   top: 0;
   text-align: left;

overflow:hidden; background:url(Wageningen_UR_overview_icon1.png); background-size:35px; background-repeat:no-repeat; background-position:left center; -webkit-transition: all 400ms linear; 

   -moz-transition: all 400ms linear;
   -o-transition: all 400ms linear;
   -ms-transition: all 400ms linear;
   transition: all 400ms linear;

}

  1. ca-icon3{ 
   position: absolute;
 	width:150px;
   height: 50px;
   left: 10px;
   top: 0;
   text-align: left;

overflow:hidden; background:url(Wageningen_UR_outreach_icon1.png); background-size:35px; background-repeat:no-repeat; background-position:left center; -webkit-transition: all 400ms linear; 

   -moz-transition: all 400ms linear;
   -o-transition: all 400ms linear;
   -ms-transition: all 400ms linear;
   transition: all 400ms linear;

}

  1. ca-icon4{ 
   position: absolute;
 	width:150px;
   height: 50px;
   left: 10px;
   top: 0;
   text-align: left;

overflow:hidden; background:url(Wageningen_UR_team_icon1.png); background-size:35px; background-repeat:no-repeat; background-position:left center; -webkit-transition: all 400ms linear; 

   -moz-transition: all 400ms linear;
   -o-transition: all 400ms linear;
   -ms-transition: all 400ms linear;
   transition: all 400ms linear;

}

  1. ca-icon5{ 
   position: absolute;
 	width:150px;
   height: 50px;
   left: 10px;
   top: 0;
   text-align: left;

overflow:hidden; background:url(Wageningen_UR_safety_icon1.png); background-size:35px; background-repeat:no-repeat; background-position:left center; -webkit-transition: all 400ms linear; 

   -moz-transition: all 400ms linear;
   -o-transition: all 400ms linear;
   -ms-transition: all 400ms linear;
   transition: all 400ms linear;

}

  1. ca-icon6{ 
   position: absolute;
 	width:150px;
   height: 50px;
   left: 10px;
   top: 0;
   text-align: left;

overflow:hidden; background:url(Wageningen_UR_notebook_icon1.png); background-size:35px; background-repeat:no-repeat; background-position:left center; -webkit-transition: all 400ms linear; 

   -moz-transition: all 400ms linear;
   -o-transition: all 400ms linear;
   -ms-transition: all 400ms linear;
   transition: all 400ms linear;

}

.ca-content{ 

   position: absolute;
   left: 0px;
   width: 120px;
   height: 100%;
   left: 25%;

background-color:transparent; font-family:Tahoma, Geneva, sans-serif; font-size:17px; font-weight:bold; line-height:50px; opacity: 0.9; 

   text-align: center;


}


  1. ca-menu ul li:hover{ 
   background-color: #473D21;
   z-index:999;
   -webkit-transform: scale(1.1);  
   -moz-transform: scale(1.1);  
   -ms-transform: scale(1.1);   
   -o-transform: scale(1.1);   
   transform: scale(1.1);

}

  1. ca-menu ul li:hover a {

-webkit-transform: none; 

   -moz-transform: none;  
   -ms-transform: none;   
   -o-transform: none;

transform:none; }

  1. ca-menu ul li:hover #ca-icon1{ 
  /* overflow:hidden;

color: #FFF372; 

   font-size:90px;*/

background:url(Wageningen_UR_cog2.png); background-size:100px; opacity:0.3; background-repeat:no-repeat; background-position:left center;

}

  1. ca-menu ul li:hover #ca-icon2{ 
  	background:url(Wageningen_UR_overview_icon2.png);

background-size:100px; opacity:0.3; background-repeat:no-repeat; background-position:left center; }

  1. ca-menu ul li:hover #ca-icon3{ 
  	background:url(Wageningen_UR_outreach_icon2.png);

background-size:100px; opacity:0.3; background-repeat:no-repeat; background-position:left center; }

  1. ca-menu ul li:hover #ca-icon4{ 
  	background:url(Wageningen_UR_team_icon2.png);

background-size:100px; opacity:0.3; background-repeat:no-repeat; background-position:left center; }

  1. ca-menu ul li:hover #ca-icon5{ 
  	background:url(Wageningen_UR_safety_icon2.png);

background-size:100px; opacity:0.3; background-repeat:no-repeat; background-position:left center; }

  1. ca-menu ul li:hover #ca-icon6{ 
  	background:url(Wageningen_UR_notebook_icon2.png);

background-size:100px; opacity:0.3; background-repeat:no-repeat; background-position:left center; }

  1. ca-menu ul li:hover .ca-content{ 
   color: rgb(255,235,4);

-webkit-animation: smallToBig 300ms ease; 

   -moz-animation: smallToBig 300ms ease;
   -ms-animation: smallToBig 300ms ease;

animation: smallToBig 300ms ease; }


/*submenu*/

  1. ca-menu ul li ul, #ca-menu ul li ul a {

visibility:hidden; height:0; position:fixed; background-color:tranparent; padding:0; width:142px; z-index:999; text-decoration:none; text-align: center;

-webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out;

}


  1. ca-menu li:hover > ul{

visibility:visible; height:200px; display:block; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }

  1. ca-menu li:hover ul a{

visibility:visible; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }


  1. ca-menu ul li ul li {

position:relative; float:none; margin:0; margin-left:2.5px; 

	padding:0;

width:138px; line-height:40px; font-family:Verdana, Geneva, sans-serif; font-size:12px; font-weight: 600;

background-color:rgba(151,163,85, 0.9); text-decoration:none;

box-shadow:none;

visibility:hidden; height:0; -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -ms-transition: all .4s ease-out; -o-transition: all .4s ease-out;


}

  1. ca-menu ul li:hover ul li{

height:36px; visibility:visible; -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -ms-transition: all .4s ease-out; -o-transition: all .4s ease-out; }

  1. ca-menu ul ul > :first-child { 
   box-shadow:0px 3px 1px rgba(0,0,0,0.4) inset;

}

  1. ca-menu ul ul li a {

color:#473D21;

visibility::hidden; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -ms-transition: all .1s ease-out; -o-transition: all .1s ease-out; }

  1. ca-menu ul ul li:hover{

background-color:#FFF372; z-index:999; -webkit-transform:none; 

   -moz-transform:none;  
   -ms-transform:none;   
   -o-transform:none;

}

  1. ca-menu ul ul li:hover a{

/*font-weight:bold;*/ color:#473D21; width:138px; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -ms-transition: all .1s ease-out; -o-transition: all .1s ease-out; }

@-webkit-keyframes smallToBig{ 

   from {
       -webkit-transform: scale(0.1);
   }
   to {
       -webkit-transform: scale(1);
   }

} @-moz-keyframes smallToBig{ 

   from {
       -moz-transform: scale(0.1);
   }
   to {
       -moz-transform: scale(1);
   }

} @-ms-keyframes smallToBig{ 

   from {
       -ms-transform: scale(0.1);
   }
   to {
       -ms-transform: scale(1);
   }

}

@-webkit-keyframes moveFromBottom { 

   from {
       -webkit-transform: translateY(100%);
   }
   to {
       -webkit-transform: translateY(0%);
   }

} @-moz-keyframes moveFromBottom { 

   from {
       -moz-transform: translateY(100%);
   }
   to {
       -moz-transform: translateY(0%);
   }

} @-ms-keyframes moveFromBottom { 

   from {
       -ms-transform: translateY(100%);
   }
   to {
       -ms-transform: translateY(0%);
   }

}

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

   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 { 

   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 { background-color: #fff; 

   background-color: rgba(255,255,255,0.9);

}

.sp-selector-1, .button-label-1 { 

   margin-left: -36px;

}

.sp-selector-2, .button-label-2 { 

   margin-left: -18px;

}

.sp-selector-4, .button-label-4 { 

   margin-left: 18px;

}

.sp-selector-5, .button-label-5 { 

   margin-left: 36px;

}

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

   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 { 

   left: 15px;

display: block; background-position: top left; }

.sp-slideshow 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 { 

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

}

.sp-slider { 

   position: relative;

left: 0; 

   width: 500%;

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: 20%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; height: 100%; padding: 0 60px; 

   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; margin: 0 auto; padding: 40px 0 50px 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-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){ 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; } }

/* ======= Journal ======= */

.journal { z-index:555; background-color:white; color:#eeefef; font-size:80%; font-family:verdana, geneva, sans-serif; margin:0; padding:0; }

.container { width:940px; margin-left:auto; margin-right:auto; padding:10px; }

  1. journal h1{

color:#97A355; font-size:36px; font-weight:400; margin:0; }

  1. journal h2 {

font-size:22px; font-weight:400; margin:5px 0; letter-spacing:.1em; }

  1. journal h3 {

font-size:1.6em; margin:10px 0 10px 10px; }


.lead { font-size:2em; margin-bottom:40px; }

.clear { clear:both; line-height:0; font-size:0; }

/* ============ TIMELINE ============= */

.timelineContainer { border-left:2px solid #97A355; margin:20px auto; width:900px; }

div.timelineToggle { float:right; margin-right:0; white-space:nowrap; }

a.expandAll { color:#ccc; cursor:pointer; background:#000; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; font-size:12px; padding:3px 5px; }

a.expandAll:hover { color:rgb(51,51,51); background-color:#97A335; cursor:pointer; }

div.timelineMajor { clear:left; float:left; margin:0 0 12px; width:900px; }

.timelineMajor h2 { background:url(../images/timeline_century_tick.gif) left center no-repeat; font-family:verdana, geneva, sans-serif; cursor: pointer; font-size:3em; font-weight:400; margin:0 0 10px; padding:4px 4px 4px 20px; }

.timelineMajor h2 span { background:#97A355; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; color:#131313; letter-spacing:.1em; line-height:1.7em; padding:4px 5px 6px; }

dl.timelineMinor { clear:left; float:left; margin:0 12px 0 0; padding:4px 4px 4px 0; position:relative; width:880px; }

.timelineMinor dt { background:url(../images/timeline_decade_tick.gif) left center no-repeat; clear:left; font-size:1.6em; list-style-type:none; line-height:1.2em; margin:0 0 12px; padding:0 0 0 24px; white-space:nowrap; }

.timelineMinor dt a { color:#999; cursor:pointer; }

.timelineMinor dt a.closed { color:#999; font-size:1em; margin-left:0; }

.timelineMinor dt a.open { color:#97A355; }

.timelineMinor dt a:hover { color:#97A355; }

.timelineMinor dd { color:rgb(51,51,51); padding-left:24px; width:100%; }

.timelineMinor dd h3 { color:rgb(51,51,51); clear:both; float:left; font-size:1.5em; margin:0; white-space:nowrap; }

.timelineEvent p { clear:left; float:left; line-height:1.5em; margin:6px 0 10px; width:500px; }

.timelineEvent h4 { clear:left; float:left; font-size:1.4em; font-weight:400; margin:10px 0 0; padding:0 0 0 20px; }

.timelineEvent blockquote { border-left:2px solid #97A355; clear:left; float:left; font-size:1.8em; margin-left:0; padding:0 30px; width:400px; }

.timelineEvent blockquote .attribution{ font-size:0.7em; text-align: right; }


.timelineEvent div.media { float:right; padding:0 0 12px; width:300px; }

.timelineEvent .media img { border:2px solid #000; margin:0; }

.timelineEvent .media p { font-size:1.2em; margin:0; padding:0; }

.timelineEvent .media a:link,.timelineEvent .media a:visited { color:#ab221b; }

.timelineEvent .media a:hover { color:#7DBADF; }

Retrieved from "http://2014.igem.org/Talk:Team:Wageningen_UR/css"