Team:Wageningen UR/css

From 2014.igem.org

(Difference between revisions)
 
(120 intermediate revisions not shown)
Line 1: Line 1:
 +
/*Font imports first*/
 +
@import url(http://fonts.googleapis.com/css?family=Gloria+Hallelujah);
 +
 +
/*
 +
* 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;
 +
}
 +
table {
 +
border-collapse: collapse;
 +
border-spacing: 0;
 +
}
 +
/*Hiding default wiki elements - thanks to DTU-Denmark 2011*/
/*Hiding default wiki elements - thanks to DTU-Denmark 2011*/
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
Line 4: Line 43:
/* 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) */
/* 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) */
-
#menubar > ul > li:last-child {
+
#menubar.left-menu > ul > li:last-child {
     display: none;
     display: none;
}
}
 +
#menubar {
#menubar {
     width: auto;
     width: auto;
Line 13: Line 53:
     background-color: transparent;
     background-color: transparent;
}
}
-
#menubar a:link, #menubar a:active, #menubar a:visited,  #menubar:hover{
+
#top-section:hover{
-
     color: transparent;
+
     background-color: rgba(100,100,100,0.5);
}
}
-
#menubar:hover li a {
+
#top-section:hover li a {
 +
    background-color: rgba(100,100,100,0.5);
     color: black;
     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*/
/*Three column layout with fixed middle width - http://css-lab.com/demos/3col-fluid/3col-fix-cntr.html*/
Line 35: Line 80:
}
}
html{
html{
-
height:100%
+
height:100%;
}
}
body{
body{
     height:100%;
     height:100%;
-
     background-image: url(https://2014.igem.org/File:Wageningen_UR_background.jpg);
+
    min-width: 1000px;/*To remove horizontal scrollbar*/
 +
    overflow-x: hidden; /*To remove horizontal scrollbar*/
 +
     background-image: url('https://static.igem.org/mediawiki/2014/0/02/Wageningen_UR_background.jpg');
background-size: 1000px;
background-size: 1000px;
font-family: verdana, geneva, sans-serif;
font-family: verdana, geneva, sans-serif;
Line 50: Line 97:
     margin-top:-50px; /*footer soak up*/
     margin-top:-50px; /*footer soak up*/
     position:relative;/*set as containing block for AP faux column*/
     position:relative;/*set as containing block for AP faux column*/
 +
   
}
}
#innerwrap{/*IE6 needs this for the AP faux column*/
#innerwrap{/*IE6 needs this for the AP faux column*/
-
     width:100%;
+
     width:1024px;
-
     overflow:hidden;
+
     overflow:visible;
 +
margin-left: auto;
 +
margin-right: auto;
}
}
Line 59: Line 109:
#header{
#header{
     /*border-top:50px solid #333;/*footer soak up*/
     /*border-top:50px solid #333;/*footer soak up*/
-
     margin-top: 50px;
+
     margin-top: 60px; /*Change to 10 for IE*/
-
padding-top: 20px;
+
margin-bottom: -15px;
margin-left: -30px;
margin-left: -30px;
-
+
height: 170px;
-
height: 190px;
+
     position:relative;
     position:relative;
     z-index: -1;/*layer it above the AP faux*/
     z-index: -1;/*layer it above the AP faux*/
Line 69: Line 118:
     color:#000;
     color:#000;
     text-align:center;
     text-align:center;
-
background-image: url(https://2014.igem.org/File:Wageningen_UR_banner.png);
+
background-image: url('https://static.igem.org/mediawiki/2014/9/95/Wageningen_UR_banner.png');
 +
background-size: auto 170px;
background-repeat: no-repeat;
background-repeat: no-repeat;
background-position: center;
background-position: center;
/*background-size: 200px;*/
/*background-size: 200px;*/
display: block;
display: block;
-
 
-
 
-
 
}
}
Line 111: Line 158:
box-shadow: 0px 0px 8px 3px rgba(0,0,0,0.5);/*rgba(229, 299, 196, 0.8); */
box-shadow: 0px 0px 8px 3px rgba(0,0,0,0.5);/*rgba(229, 299, 196, 0.8); */
border-radius: 3px;
border-radius: 3px;
 +
overflow: hidden;
}
}
Line 150: Line 198:
     height:50px;
     height:50px;
/*background-color: #97a355;*/
/*background-color: #97a355;*/
-
background-image: url(https://2014.igem.org/File:Wageningen_UR_footer.png);
+
background-image: url(https://static.igem.org/mediawiki/2014/c/c5/Wageningen_UR_footer.png);
     color:#f0efcd;
     color:#f0efcd;
Line 162: Line 210:
right: 10px;
right: 10px;
}
}
 +
 +
/*sidebar*/
.sidebar-container{
.sidebar-container{
-
float: right;
+
float:right;
}
}
-
.sidebar {
+
 
 +
 
 +
sidenav {
 +
    width:150px;
 +
    background-color:none;
 +
    border:none;
 +
    padding:0;
 +
margin-top:235px;
 +
margin-left:-135px;
position: fixed;
position: fixed;
-
margin-top: 345px;
+
    top: 0;
-
margin-left: -145px;
+
    z-index: 3;
}
}
-
.sidebar ul {
+
 
-
background: #97A355;
+
.menu-head {
 +
background: #473D21;
 +
width:150px;
 +
padding:0;
 +
margin:0;
 +
list-style: none;
box-shadow: 0px 5px 9px rgba(0,0,0,0.50);
box-shadow: 0px 5px 9px rgba(0,0,0,0.50);
-
padding: 0 0px;
 
-
margin: 0px 20px;
 
border-radius: 3px;  
border-radius: 3px;  
 +
overflow:hidden;
 +
  border-top: 2px solid #473D21;
 +
border-right:1px solid #473D21;
 +
border-left:1px solid #473D21;
 +
border-bottom:2px solid #8B964E;
 +
}
 +
 +
.menu-head a{
 +
color:#FFF372;
 +
text-decoration: none;
 +
    font-size:14px;
 +
background: none;
 +
width:150px;
 +
margin:0;
 +
padding:0px 20px;
list-style: none;
list-style: none;
position: relative;
position: relative;
-
display: inline-table;
+
line-height:40px;
 +
display: block;
 +
}
-
}
+
.menu-item {
-
.sidebar ul li {
+
font-weight: bold;
-
/*border: 1px solid #97a355;*/
+
background: #97A355;
-
/*margin: 5px 5px 0px -5px;*/ /*to make small boxes*/
+
width:150px;
-
/*border-radius: 4px;*/
+
padding:0;
-
border-top: 2px solid #9EAB59;
+
margin:0;
 +
list-style: none;
 +
box-shadow: 0px 5px 9px rgba(0,0,0,0.50);
 +
border-radius: 3px;  
 +
overflow:hidden; 
 +
  border-top: 2px solid #9EAB59;
border-right:1px solid #9EAB59;
border-right:1px solid #9EAB59;
border-left:1px solid #9EAB59;
border-left:1px solid #9EAB59;
-
border-bottom:2px solid #8B964E;
+
border-bottom:2px solid #8B964E;
-
border-radius: 3px;
+
-
display: block;
+
-
width: 120px;
+
-
padding: 12px 12px; /*sidebar padding between items*/
+
}
}
-
.sidebar ul li a {
+
 
-
display: block;
+
.menu-item a{
-
+
-
color: #222;
+
text-decoration: none;
text-decoration: none;
-
font-weight: bold;
+
    font-size:12px;
 +
background: none;
 +
width:150px;
 +
margin:0;
 +
padding:0px 20px;
 +
list-style: none;
 +
position: relative;
 +
line-height:40px;
 +
}
-
}
+
.menu-item a, .menu-item a:visited  {
 +
color: #222;
 +
display: block;
 +
text-decoration: none;
 +
width: 150px;
 +
line-height:40px;
 +
}
-
.sidebar ul li:hover {
+
.menu-item:hover >{
background: #473D21;
background: #473D21;
box-shadow: 0px 0px 10px rgba(0,0,0,0.15);
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;  
border-radius: 3px;  
}
}
-
.sidebar ul li:hover a {
+
.menu-item:hover > a{
color: #FFF372;
color: #FFF372;
-
font-weight: ;
 
-
 
}
}
 +
 +
.menu-item ul {
 +
background: none;
 +
box-shadow:none;
 +
font-size: 14px;
 +
height:0px;/*collapses the menu*/
 +
list-style-type: none;
 +
padding: 0px;
 +
margin:0;
 +
overflow:hidden;
 +
-webkit-transition: height 1s ease;
 +
-moz-transition: height 1s ease;
 +
  -o-transition: height 1s ease;
 +
  -ms-transition: height 1s ease;
 +
  transition: height 1s ease;
 +
}
 +
 +
.menu-item ul a, .menu-item ul a:visited {
 +
margin:0;
 +
text-decoration: none;
 +
color:  #222;
 +
display: block;
 +
width: 150px;
 +
overflow:hidden;
 +
}
 +
 +
.menu-item ul li a, .menu-item ul li a:visited {
 +
    background-color: rgb(215,214,126);
 +
}
 +
/*
 +
.menu-item a {
 +
display: block;
 +
width:150px;
 +
height:40px;
 +
line-height:40px;
 +
margin:0;
 +
padding:0px 20px;
 +
overflow:hidden;
 +
-webkit-transition: height 1s ease;
 +
    -moz-transition: height 1s ease;
 +
      -o-transition: height 1s ease;
 +
      -ms-transition: height 1s ease;
 +
          transition: height 1s ease;
 +
}
 +
*/
 +
.menu-item:hover li{
 +
height:40px;
 +
line-height:40px;
 +
}
 +
 +
/* Can't get it to expand based on the number of children - just used seperarete css for each ammount of submenus.*/
 +
.menu-item:hover ul.one-item{
 +
height:42px;
 +
}
 +
.menu-item:hover ul.two-item{
 +
height:82px;
 +
}
 +
.menu-item:hover ul.three-item{
 +
height:122px;
 +
}
 +
.menu-item:hover ul.four-item{
 +
height:162px;
 +
}
 +
.menu-item:hover ul.five-item{
 +
height:202px;
 +
}
 +
.menu-item:hover ul.six-item{
 +
height:242px;
 +
}
 +
 +
.menu-item li:hover a{
 +
  background: #FFF372;
 +
  font-weight:bold;
 +
}
 +
 +
 +
 +
a.sidenav-active {
 +
  background-color: rgba(119, 122, 64, 0.9);
 +
  font-weight:bold;
 +
  padding:0 20px;
 +
 +
}
 +
 +
/*sidebar end*/
 +
 +
 +
 +
hr {
 +
    border:none;
 +
    background-color:rgb(220,220,220);
 +
    height:12px;
 +
    margin-bottom:18px;
 +
}
 +
 +
/*top margin is 25px
/*top margin is 25px
right margin is 50px
right margin is 50px
bottom margin is 75px
bottom margin is 75px
left margin is 100px*/
left margin is 100px*/
 +
 +
#center h1,h2,h3,h4{
 +
font-family:Verdana, Geneva, sans-serif;
 +
font-weight:bold;
 +
}
#center h1{
#center h1{
 +
line-height: 30px;
color:#3a3424;
color:#3a3424;
margin: 20px 10px 10px 10px;
margin: 20px 10px 10px 10px;
font-size:200%;
font-size:200%;
-
border-bottom: 2px solid #3a3424; /*f0efcd;*/
+
/*text-align:center;*/
 +
/*border-bottom: 1px solid #3a3424;*/ /*f0efcd;*/
}
}
#center h2{
#center h2{
margin: 10px 10px 5px 10px;
margin: 10px 10px 5px 10px;
-
font-size:150%;
+
font-size:170%;
color: #575e31;
color: #575e31;
border-bottom: 1px solid #575e31;
border-bottom: 1px solid #575e31;
Line 240: Line 428:
margin: 10px 10px 0px 15px;
margin: 10px 10px 0px 15px;
color:#3a3424;
color:#3a3424;
-
font-size:140%;
+
font-size:130%;
}
}
#center h4{
#center h4{
margin: 0px 10px 10px 40px;
margin: 0px 10px 10px 40px;
color:#3a3424;
color:#3a3424;
-
font-size:120%;
+
font-size:110%;
font-weight: 800;
font-weight: 800;
}
}
-
#center p{
+
#center p, #center ul, #center ol{
margin: 10px 15px 10px 15px;
margin: 10px 15px 10px 15px;
color:#3a3424;
color:#3a3424;
-
font-size:110%;
+
font-size:14px;
text-align: justify;
text-align: justify;
line-height:1.5em;
line-height:1.5em;
font-weight: 400;
font-weight: 400;
 +
}
 +
 +
#center  ul{
 +
margin: 10px 15px 10px 45px;
 +
list-style-type:disc;
 +
list-style-image:none;
 +
}
 +
 +
#center ol{
 +
margin: 10px 15px 10px 45px;
 +
list-style-type:decimal;
}
}
Line 262: Line 461:
#center  h1+p, h2+p, h3+p, h4+p{
#center  h1+p, h2+p, h3+p, h4+p{
padding-top:0px;
padding-top:0px;
-
}
 
-
 
-
#references{
 
-
font-family: "Courier New",Courier,monospace;
 
-
}
 
-
#references h2{
 
-
font-size:100%;
 
-
}
 
-
#references ol{
 
-
font-size:75%;
 
-
padding-left:30px;
 
}
}
#footer p{
#footer p{
padding-top: 8px;
padding-top: 8px;
 +
margin: 0px;
 +
line-height: initial;
}
}
Line 283: Line 473:
.box-left-team, .box-right-team{
.box-left-team, .box-right-team{
-
margin: 10px 10px 15px 10px;
+
margin: 10px 10px 10px 10px;
float: left;
float: left;
-
height: 560px;
+
height: 475px;
-
width:475px;
+
width:410px;
clear: both;
clear: both;
-
background-color: #F6FAED;
+
background-color: #f0efcd; /*#F6FAED;*/
-
border: 1px solid black;
+
border: 10px solid white;
-
border-radius: 10px;
+
/*border-radius: 10px;*/
 +
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
}
 +
 +
#center .box-left-team > p, #center  .box-right-team > p{
 +
font-size: 12px;
 +
margin-bottom: 10px;
 +
}
 +
 +
#center .box-left-team > h3, #center  .box-right-team > h3{
 +
font-size: 14px;
 +
margin-top: 0px;
 +
}
 +
.box-left-team-photo{
.box-left-team-photo{
-
margin: 20px 20px 15px 20px;
+
margin: 10px 15px 5px 15px;
float: right;
float: right;
-
height:150;
+
height: 235px;
-
width:300;
+
border-radius: 10px;
border-radius: 10px;
}
}
 +
 +
.box-left-team > img.bottom, .box-right-team > img.bottom{
 +
margin: 10px 15px 5px 15px;
 +
float: right;
 +
height: 234px;
 +
border-radius: 10px;
 +
}
 +
 +
.box-left-team > img.top, .box-right-team > img.top{
 +
position:absolute;
 +
margin-left:238px;
 +
margin-top:10px;
 +
border-radius:10px;
 +
height:235px;
 +
width:157px;
 +
display:inline-block;
 +
-webkit-transition: opacity .3s ease-in-out;
 +
-moz-transition: opacity .3s ease-in-out;
 +
-o-transition: opacity .3s ease-in-out;
 +
transition: opacity .3s ease-in-out;
 +
}
 +
 +
.box-left-team:hover > img.top, .box-right-team:hover > img.top{
 +
opacity:0;
 +
}
 +
 +
.box-right-team{
.box-right-team{
float: right;
float: right;
clear: none;
clear: none;
 +
}
 +
.box-right-team-invisble{
 +
width: 430px;
 +
background: inherit;
 +
border: none
}
}
@font-face {
@font-face {
font-family: 'icomoon';
font-family: 'icomoon';
-
src:url('../icomoon/fonts/icomoon.eot?wmbmgo');
+
src:url('../icomoon/fonts/icomoon.eot');
-
src:url('../icomoon/fonts/icomoon.eot?#iefixwmbmgo') format('embedded-opentype'),
+
src:url('../icomoon/fonts/icomoon.eot') format('embedded-opentype'),
-
url('../icomoon/fonts/icomoon.woff?wmbmgo') format('woff'),
+
url('../icomoon/fonts/icomoon.woff') format('woff'),
-
url('../icomoon/fonts/icomoon.ttf?wmbmgo') format('truetype'),
+
url('../icomoon/fonts/icomoon.ttf') format('truetype'),
-
url('../icomoon/fonts/icomoon.svg?wmbmgo#icomoon') format('svg');
+
url('../icomoon/fonts/icomoon.svg') format('svg');
font-weight: normal;
font-weight: normal;
font-style: normal;
font-style: normal;
Line 364: Line 597:
#rightbarlogo {
#rightbarlogo {
padding-top: 1 px;
padding-top: 1 px;
-
 
+
position: absolute;
 +
right:-10px;
 +
bottom: 1px;
}
}
Line 378: Line 613:
-o-transform:rotate(0deg) scale(0.9);
-o-transform:rotate(0deg) scale(0.9);
transform:rotate(0deg) scale(0.9);
transform:rotate(0deg) scale(0.9);
-
-webkit-transition: 1s ease-in-out;
+
-webkit-transition: .5s ease-in-out;
-
-moz-transition: 1s ease-in-out;
+
-moz-transition: .5s ease-in-out;
-
-o-transition: 1s ease-in-out;
+
-o-transition: .5s ease-in-out;
-
transition: 1s ease-in-out;
+
transition: .5s ease-in-out;
  }
  }
Line 387: Line 622:
#pblogo:hover img{
#pblogo:hover img{
background-color:transparent;
background-color:transparent;
-
-webkit-transform:rotate(360deg) scale(1.3);
+
-webkit-transform:rotate(0deg) scale(1.3);
-
-moz-transform:rotate(360deg) scale(1.3);
+
-moz-transform:rotate(0deg) scale(1.3);
-
-ms-transform:rotate(360deg) scale(1.3);
+
-ms-transform:rotate(0deg) scale(1.3);
-
-o-transform:rotate(360deg) scale(1.3);
+
-o-transform:rotate(0deg) scale(1.3);
-
transform:rotate(360deg) scale(1.3);
+
transform:rotate(0deg) scale(1.3);
}
}
Line 400: Line 635:
#rightlogo img{
#rightlogo img{
 +
pointer-events:none; /*Does this work in IE9? Apparantly not... Who would've thought...*/
position:relative;
position:relative;
-
z-index: -1;\\
+
z-index: -1;
background-color:transparent;
background-color:transparent;
height:400px;
height:400px;
margin-top:-200px;
margin-top:-200px;
margin-left:-120px;
margin-left:-120px;
-
overflow: visible;
+
overflow: hidden;
}
}
Line 416: Line 652:
     width: 880px;
     width: 880px;
display:block;
display:block;
-
position:relative;
+
/*position:relative;*/
float:left;
float:left;
}
}
Line 422: Line 658:
#ca-menu ul{
#ca-menu ul{
list-style-type: none;
list-style-type: none;
 +
list-style-image: none;
     padding: 0;
     padding: 0;
     margin: 0;
     margin: 0;
     position:relative;
     position:relative;
width:900px;
width:900px;
-
   
 
}
}
#ca-menu li{
#ca-menu li{
Line 456: Line 692:
}
}
-
.ca-icon{
+
#ca-icon1, #ca-icon2, #ca-icon3, #ca-icon4, #ca-icon5, #ca-icon6{
-
    font-family:'icomoon',cursive;
+
-
    font-size: 30px;
+
-
    color: #222;
+
-
    text-shadow: 0px 0px 1px #222;
+
-
    line-height:50px;
+
     position: absolute;
     position: absolute;
-
    width: 150px;
+
  width:150px;
     height: 50px;
     height: 50px;
     left: 10px;
     left: 10px;
-
     top: 0px;
+
     top: 0;
     text-align: left;
     text-align: left;
overflow:hidden;
overflow:hidden;
 +
background:url(https://static.igem.org/mediawiki/2014/a/ad/Wageningen_UR_cog1.png);
 +
background-size:35px;
 +
background-repeat:no-repeat;
 +
background-position:left center;
-webkit-transition: all 400ms linear;
-webkit-transition: all 400ms linear;
     -moz-transition: all 400ms linear;
     -moz-transition: all 400ms linear;
Line 474: Line 709:
     -ms-transition: all 400ms linear;
     -ms-transition: all 400ms linear;
     transition: all 400ms linear;
     transition: all 400ms linear;
-
+
}
 +
 
 +
#ca-icon2{   
 +
background:url(https://static.igem.org/mediawiki/2014/1/13/Wageningen_UR_overview_icon1.png);
 +
background-size:35px;
 +
background-repeat:no-repeat;
 +
background-position:left center;
 +
}
 +
 
 +
#ca-icon3{   
 +
background:url(https://static.igem.org/mediawiki/2014/e/e9/Wageningen_UR_outreach_icon1.png);
 +
background-size:35px;
 +
background-repeat:no-repeat;
 +
background-position:left center;
 +
}
 +
 
 +
#ca-icon4{   
 +
background:url(https://static.igem.org/mediawiki/2014/9/97/Wageningen_UR_team_icon1.png);
 +
background-size:35px;
 +
background-repeat:no-repeat;
 +
background-position:left center;
 +
}
 +
 
 +
#ca-icon5{   
 +
background:url(https://static.igem.org/mediawiki/2014/8/85/Wageningen_UR_safety_icon1.png);
 +
background-size:35px;
 +
background-repeat:no-repeat;
 +
background-position:left center;
 +
}
 +
 
 +
#ca-icon6{
 +
background:url(https://static.igem.org/mediawiki/2014/d/d0/Wageningen_UR_notebook_icon1.png);
 +
background-size:35px;
 +
background-repeat:no-repeat;
 +
background-position:left center;
}
}
Line 490: Line 759:
opacity: 0.9;
opacity: 0.9;
     text-align: center;
     text-align: center;
-
 
-
 
}
}
Line 513: Line 780:
}
}
-
#ca-menu ul li:hover .ca-icon{
+
#ca-menu ul li:hover #ca-icon1{
-
    overflow:hidden;
+
  /* overflow:hidden;
color: #FFF372;
color: #FFF372;
-
     font-size:90px;
+
     font-size:90px;*/
-
    opacity:0.3;
+
background:url(https://static.igem.org/mediawiki/2014/6/66/Wageningen_UR_cog2.png);
 +
background-size:100px;
 +
opacity:0.3;
 +
background-repeat:no-repeat;
 +
background-position:left center;
 +
}
 +
 +
#ca-menu ul li:hover #ca-icon2{
 +
  background:url(https://static.igem.org/mediawiki/2014/4/46/Wageningen_UR_overview_icon2.png);
 +
background-size:100px;
 +
opacity:0.3;
 +
background-repeat:no-repeat;
 +
background-position:left center;
 +
}
 +
 +
#ca-menu ul li:hover #ca-icon3{
 +
  background:url(https://static.igem.org/mediawiki/2014/7/78/Wageningen_UR_outreach_icon2.png);
 +
background-size:100px;
 +
opacity:0.3;
 +
background-repeat:no-repeat;
 +
background-position:left center;
 +
}
 +
#ca-menu ul li:hover #ca-icon4{
 +
  background:url(https://static.igem.org/mediawiki/2014/5/50/Wageningen_UR_team_icon2.png);
 +
background-size:100px;
 +
opacity:0.3;
 +
background-repeat:no-repeat;
 +
background-position:left center;
 +
}
 +
#ca-menu ul li:hover #ca-icon5{
 +
  background:url(https://static.igem.org/mediawiki/2014/a/a0/Wageningen_UR_safety_icon2.png);
 +
background-size:100px;
 +
opacity:0.3;
 +
background-repeat:no-repeat;
 +
background-position:left center;
 +
}
 +
#ca-menu ul li:hover #ca-icon6{
 +
  background:url(https://static.igem.org/mediawiki/2014/5/51/Wageningen_UR_notebook_icon2.png);
 +
background-size:100px;
 +
opacity:0.3;
 +
background-repeat:no-repeat;
 +
background-position:left center;
}
}
Line 531: Line 839:
/*submenu*/
/*submenu*/
-
#ca-menu ul li ul, #ca-menu ul li ul a {
+
#ca-menu li ul, #ca-menu li ul a {
visibility:hidden;
visibility:hidden;
height:0;
height:0;
-
position:fixed;
+
/*position:fixed;*/
-
background-color:tranparent;
+
background-color:transparent;
 +
font-size:12px;
padding:0;
padding:0;
-
width:142px;
+
width:138px;
z-index:999;
z-index:999;
text-decoration:none;
text-decoration:none;
text-align: center;
text-align: center;
-
 
-webkit-transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
Line 547: Line 855:
-o-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
transition: all .3s ease-out;
-
 
}
}
 +
#ca-menu li li{
 +
visibility:hidden;
 +
height:0;
 +
position:relative;
 +
float:none;
 +
width:138px;
 +
line-height:40px;
 +
font-family:Verdana, Geneva, sans-serif;
 +
font-size:12px;
 +
font-weight: bold;
 +
background-color:#b6be88;
 +
text-decoration:none;
 +
box-shadow:none;
-
#ca-menu li:hover > ul{
+
-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;
 +
 +
}
 +
 
 +
#ca-menu li li a{
 +
        visibility:hidden;
 +
 +
-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;
 +
 
 +
}
 +
 
 +
#ca-menu li:hover ul{
visibility:visible;
visibility:visible;
-
height:200px;
+
height:0;
-
display:block;
+
-webkit-transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
Line 565: Line 903:
#ca-menu li:hover ul a{
#ca-menu li:hover ul a{
visibility:visible;
visibility:visible;
 +
height:200px;
 +
display:block;
-webkit-transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
Line 570: Line 910:
-o-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
transition: all .3s ease-out;
-
}
+
}
-
#ca-menu ul li ul li {
+
#ca-menu li:hover li {
position:relative;
position:relative;
float:none;
float:none;
Line 583: Line 923:
font-family:Verdana, Geneva, sans-serif;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
font-size:12px;
-
font-weight: 600;
+
font-weight: bold;
-
+
background-color:#b6be88;
-
background-color:rgba(151,163,85, 0.9);
+
text-decoration:none;
text-decoration:none;
 +
box-shadow:none;
 +
border:1px solid #b6be88;
 +
visibility:visible;
 +
height:36px;
 +
-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;
 +
}
 +
/*
 +
#ca-menu li:hover li  a:after {
 +
    content:"\25B6";
 +
float: right;
 +
font-size:8px;
 +
margin-right:1px;
 +
margin-left:-15px;
 +
}
 +
 +
#ca-menu li:hover li  > a:only-child:after {
 +
    content: '';
 +
}
 +
 +
#ca-menu ul ul > :first-child {
-
box-shadow:none;
+
    box-shadow:0px 3px 1px rgba(0,0,0,0.25) inset;
 +
-webkit-border-radius: 2px 2px 0 0;
 +
-moz-border-radius:2px 2px 0 0;
 +
border-radius:2px 2px 0 0;
 +
}
 +
 
 +
#ca-menu ul ul > :last-child {
 +
-webkit-border-radius: 0 0 2px 2px;
 +
-moz-border-radius:0 0 2px 2px;
 +
border-radius:0 0 2px 2px;
 +
}
 +
*/
 +
#ca-menu li:hover li a{
 +
color:#473D21;
 +
visibility:visible;
 +
width:138px;
 +
height:36px;
 +
-webkit-transition: all .1s ease-out;
 +
-moz-transition: all .1s ease-out;
 +
-ms-transition: all .1s ease-out;
 +
-o-transition: all .1s ease-out;
 +
}
 +
 +
#ca-menu ul ul li:hover {
 +
width:138px;
 +
height:36px;
 +
background-color:#FFF372;
 +
z-index:999;
 +
-webkit-transform:none; 
 +
    -moz-transform:none; 
 +
    -ms-transform:none; 
 +
    -o-transform:none;
 +
}
 +
 
 +
#ca-menu ul ul li:hover a{
 +
width:138px;
 +
height:36px;
 +
-webkit-transition: all .1s ease-out;
 +
-moz-transition: all .1s ease-out;
 +
-ms-transition: all .1s ease-out;
 +
-o-transition: all .1s ease-out;
 +
}
 +
 
 +
/*third-level menu*/
 +
 
 +
#ca-menu li li ul{
 +
margin-top:-36px;
 +
visibility:hidden;
 +
height:150px;
 +
/*position:fixed;*/
 +
margin-left:136px;
 +
background-color:tranparent;
 +
padding:0;
 +
width:0px;
 +
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;
 +
}
 +
 +
 +
 +
#ca-menu li li ul a{
 +
visibility:hidden;
 +
height:150px;
 +
/*position:fixed;*/
 +
background-color:transparent;
 +
padding:0;
 +
width:138px;
 +
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;
 +
}
 +
 +
#ca-menu li:hover ul ul li {
visibility:hidden;
visibility:hidden;
 +
position:relative;
 +
float:none;
 +
margin:0;
 +
margin-left:3px;
 +
padding:0;
 +
width:0px;
 +
line-height:40px;
 +
font-family:Verdana, Geneva, sans-serif;
 +
font-size:12px;
 +
font-weight: bold;
 +
background-color:#E0E4CC;
 +
text-decoration:none;
 +
box-shadow:none;
 +
border:1px solid #E0E4CC;;
height:0;
height:0;
-webkit-transition: all .4s ease-out;
-webkit-transition: all .4s ease-out;
Line 596: Line 1,057:
-ms-transition: all .4s ease-out;
-ms-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
 +
}
-
+
#ca-menu li:hover ul ul li a{
 +
margin:0;
 +
color:#473D21;
 +
visibility:hidden;
 +
-webkit-transition: all .2s ease-out;
 +
-moz-transition: all .2s ease-out;
 +
-ms-transition: all .2s ease-out;
 +
-o-transition: all .2s ease-out;
}
}
-
#ca-menu ul li:hover ul li{
+
#ca-menu li li:hover ul{
-
height:36px;
+
visibility:visible;
visibility:visible;
-
-webkit-transition: all .4s ease-out;
+
width:138px;
-
-moz-transition: all .4s ease-out;
+
display:block;
-
-ms-transition: all .4s ease-out;
+
-webkit-transition: all .3s ease-out;
-
-o-transition: all .4s 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;
}
}
-
+
 
-
#ca-menu ul ul > :first-child {
+
#ca-menu li li:hover ul a{
-
    box-shadow:0px 3px 1px rgba(0,0,0,0.4) inset;
+
-
}
+
-
+
-
#ca-menu ul ul li a {
+
color:#473D21;
color:#473D21;
-
+
visibility:hidden;
-
visibility::hidden;
+
width:138px;
-webkit-transition: all .1s ease-out;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
Line 622: Line 1,089:
-o-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
}
}
 +
 +
#ca-menu li:hover ul li:hover  > ul li{
 +
height:36px;
 +
width:138px;
 +
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;
 +
}
 +
 +
#ca-menu li:hover ul li:hover  > ul li a{
 +
width:138px;
 +
height:36px;
 +
visibility:visible;
 +
}
   
   
-
#ca-menu ul ul li:hover{
+
#ca-menu li:hover li:hover li:hover {
background-color:#FFF372;
background-color:#FFF372;
 +
height:36px;
z-index:999;
z-index:999;
-webkit-transform:none;   
-webkit-transform:none;   
     -moz-transform:none;   
     -moz-transform:none;   
     -ms-transform:none;   
     -ms-transform:none;   
-
     -o-transform:none;
+
     -o-transform:none;
-
 
+
}
}
-
#ca-menu ul ul li:hover a{
+
#ca-menu li:hover li:hover li:hover a{
-
/*font-weight:bold;*/
+
height:36px;
-
color:#473D21;
+
-
width:138px;
+
-webkit-transition: all .1s ease-out;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
Line 642: Line 1,124:
-o-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
}
}
 +
 +
.up_menu_fix{
 +
margin-top:-36px;
 +
}
 +
@-webkit-keyframes smallToBig{
@-webkit-keyframes smallToBig{
Line 693: Line 1,180:
}
}
 +
/*======================== Slideshow =========================*/
.sp-slideshow {
.sp-slideshow {
     position: relative;
     position: relative;
-
margin: 10px auto;
+
margin-left: -10px;
width: 100%;
width: 100%;
max-width: 1000px;
max-width: 1000px;
Line 704: Line 1,192:
     box-shadow: 0 2px 6px rgba(0,0,0,0.2);
     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 {
.sp-content {
Line 714: Line 1,217:
.sp-parallax-bg {
.sp-parallax-bg {
-
     background: url(https://2014.igem.org/File:Wageningen_UR_slide_background.png) repeat-x scroll 0 0;
+
     background: url('https://static.igem.org/mediawiki/2014/c/c0/Wageningen_UR_slide_background.png') repeat-x scroll 0 0;
     -webkit-background-size: cover;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -moz-background-size: cover;
Line 726: Line 1,229:
}
}
-
.sp-slideshow input {
+
.sp-slideshow input, .sp-slideshow_S input {
     position: absolute;
     position: absolute;
bottom: 15px;
bottom: 15px;
Line 739: Line 1,242:
}
}
-
.sp-slideshow input + label {
+
.sp-slideshow input + label, .sp-slideshow_S input + label {
     position: absolute;
     position: absolute;
     bottom: 15px;
     bottom: 15px;
Line 758: Line 1,261:
     transition: background-color linear 0.1s;
     transition: background-color linear 0.1s;
}
}
-
.sp-slideshow input:checked + label {
+
.sp-slideshow input:checked + label, .sp-slideshow_S input:checked + label {
background-color: #fff;
background-color: #fff;
     background-color: rgba(255,255,255,0.9);
     background-color: rgba(255,255,255,0.9);
Line 764: Line 1,267:
.sp-selector-1, .button-label-1 {
.sp-selector-1, .button-label-1 {
-
     margin-left: -36px;
+
     margin-left: -54px;
}
}
-
 
.sp-selector-2, .button-label-2 {
.sp-selector-2, .button-label-2 {
 +
    margin-left: -36px;
 +
}
 +
.sp-selector-3, .button-label-3 {
     margin-left: -18px;
     margin-left: -18px;
}
}
-
 
.sp-selector-4, .button-label-4 {
.sp-selector-4, .button-label-4 {
 +
    margin-left: 0px;
 +
}
 +
.sp-selector-5, .button-label-5 {
     margin-left: 18px;
     margin-left: 18px;
}
}
-
 
+
.sp-selector-6, .button-label-6 {
-
.sp-selector-5, .button-label-5 {
+
     margin-left: 36px;
     margin-left: 36px;
 +
}
 +
.sp-selector-7, .button-label-7 {
 +
    margin-left: 54px;
 +
}
 +
.sp-selector-8, .button-label-8 {
 +
    margin-left: 72px;
}
}
Line 789: Line 1,301:
cursor: pointer;
cursor: pointer;
z-index: 1000;
z-index: 1000;
-
background: transparent url(https://2014.igem.org/File:Wageningen_UR_arrows.png) no-repeat;
+
background: transparent url('https://static.igem.org/mediawiki/2014/4/4b/Wageningen_UR_arrows.png') no-repeat;
-webkit-transition: opacity linear 0.3s;
-webkit-transition: opacity linear 0.3s;
     -moz-transition: opacity linear 0.3s;
     -moz-transition: opacity linear 0.3s;
Line 805: Line 1,317:
.sp-selector-2:checked ~ .sp-arrow.sp-a3,
.sp-selector-2:checked ~ .sp-arrow.sp-a3,
.sp-selector-3:checked ~ .sp-arrow.sp-a4,
.sp-selector-3:checked ~ .sp-arrow.sp-a4,
-
.sp-selector-4:checked ~ .sp-arrow.sp-a5 {
+
.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;
     right: 15px;
display: block;
display: block;
Line 813: Line 1,328:
.sp-selector-3:checked ~ .sp-arrow.sp-a2,
.sp-selector-3:checked ~ .sp-arrow.sp-a2,
.sp-selector-4:checked ~ .sp-arrow.sp-a3,
.sp-selector-4:checked ~ .sp-arrow.sp-a3,
-
.sp-selector-5:checked ~ .sp-arrow.sp-a4 {
+
.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;
     left: 15px;
display: block;
display: block;
Line 819: Line 1,337:
}
}
-
.sp-slideshow input:checked ~ .sp-content {
+
.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;
     -webkit-transition: background-position linear 0.6s, background-color linear 0.8s;
     -moz-transition: background-position linear 0.6s, background-color linear 0.8s;
     -moz-transition: background-position linear 0.6s, background-color linear 0.8s;
Line 827: Line 1,345:
}
}
-
.sp-slideshow input:checked ~ .sp-content .sp-parallax-bg {
+
.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;
     -webkit-transition: background-position linear 0.7s;
     -moz-transition: background-position linear 0.7s;
     -moz-transition: background-position linear 0.7s;
Line 839: Line 1,357:
background-color: #727b7f;
background-color: #727b7f;
}
}
-
 
input.sp-selector-2:checked ~ .sp-content {
input.sp-selector-2:checked ~ .sp-content {
     background-position: -100px 0;
     background-position: -100px 0;
background-color: #7f7276;
background-color: #7f7276;
}
}
-
 
input.sp-selector-3:checked ~ .sp-content {
input.sp-selector-3:checked ~ .sp-content {
     background-position: -200px 0;
     background-position: -200px 0;
background-color: #737f72;
background-color: #737f72;
}
}
-
 
input.sp-selector-4:checked ~ .sp-content {
input.sp-selector-4:checked ~ .sp-content {
     background-position: -300px 0;
     background-position: -300px 0;
background-color: #79727f;
background-color: #79727f;
}
}
-
 
input.sp-selector-5:checked ~ .sp-content {
input.sp-selector-5:checked ~ .sp-content {
     background-position: -400px 0;
     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;
background-color: #7d7f72;
}
}
Line 863: Line 1,389:
     background-position: 0 0;
     background-position: 0 0;
}
}
-
 
input.sp-selector-2:checked ~ .sp-content .sp-parallax-bg {
input.sp-selector-2:checked ~ .sp-content .sp-parallax-bg {
     background-position: -200px 0;
     background-position: -200px 0;
}
}
-
 
input.sp-selector-3:checked ~ .sp-content .sp-parallax-bg {
input.sp-selector-3:checked ~ .sp-content .sp-parallax-bg {
     background-position: -400px 0;
     background-position: -400px 0;
}
}
-
 
input.sp-selector-4:checked ~ .sp-content .sp-parallax-bg {
input.sp-selector-4:checked ~ .sp-content .sp-parallax-bg {
     background-position: -600px 0;
     background-position: -600px 0;
}
}
-
 
input.sp-selector-5:checked ~ .sp-content .sp-parallax-bg {
input.sp-selector-5:checked ~ .sp-content .sp-parallax-bg {
     background-position: -800px 0;
     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;
}
}
Line 883: Line 1,414:
     position: relative;
     position: relative;
left: 0;
left: 0;
-
     width: 500%;
+
     width: 800%;
height: 100%;
height: 100%;
list-style: none;
list-style: none;
Line 897: Line 1,428:
.sp-slider > li {
.sp-slider > li {
color: #fff;
color: #fff;
-
width: 20%;
+
width: 12.5%;
 +
list-style:none;
-webkit-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-moz-box-sizing: border-box;
Line 903: Line 1,435:
-ms-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
 +
 +
padding: 0 1% 0 0;
 +
height: 100%;
height: 100%;
-
padding: 0 60px;
+
 
     float: left;
     float: left;
text-align: center;
text-align: center;
Line 914: Line 1,449:
     transition: opacity ease-in 0.4s 0.8s;  
     transition: opacity ease-in 0.4s 0.8s;  
}
}
 +
.sp-slider > li img{
.sp-slider > li img{
-webkit-box-sizing: border-box;
-webkit-box-sizing: border-box;
Line 921: Line 1,457:
box-sizing: border-box;
box-sizing: border-box;
display: block;
display: block;
-
margin: 0 auto;
+
 
-
padding: 40px 0 50px 0;
+
}
 +
 
 +
.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-height: 100%;
max-width: 100%;
max-width: 100%;
Line 929: Line 1,476:
     left: 0;
     left: 0;
}
}
-
 
input.sp-selector-2:checked ~ .sp-content .sp-slider {
input.sp-selector-2:checked ~ .sp-content .sp-slider {
     left: -100%;
     left: -100%;
}
}
-
 
input.sp-selector-3:checked ~ .sp-content .sp-slider {
input.sp-selector-3:checked ~ .sp-content .sp-slider {
     left: -200%;
     left: -200%;
}
}
-
 
input.sp-selector-4:checked ~ .sp-content .sp-slider {
input.sp-selector-4:checked ~ .sp-content .sp-slider {
     left: -300%;
     left: -300%;
}
}
-
 
input.sp-selector-5:checked ~ .sp-content .sp-slider {
input.sp-selector-5:checked ~ .sp-content .sp-slider {
     left: -400%;
     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%;
}
}
Line 950: Line 1,502:
input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3),
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-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-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;
opacity: 1;
}
}
Line 964: Line 1,519:
@media screen and (max-width: 320px){
@media screen and (max-width: 320px){
.sp-slideshow { height: 158px; }
.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;
 +
}
 +
 +
#journal h1{
 +
color:#97A355;
 +
font-size:36px;
 +
font-weight:400;
 +
margin:0;
 +
}
 +
 +
#journal h2 {
 +
font-size:22px;
 +
font-weight:400;
 +
margin:5px 0;
 +
letter-spacing:.1em;
 +
}
 +
 +
#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;<!-- THE COLOR OF MAJOR LINE-->
 +
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; <!--background color of major list-->
 +
    -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:both;
 +
line-height:1.5em;
 +
margin:6px 0 10px;
 +
width:700px;
 +
}
 +
 +
.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;
 +
}
 +
 +
/* ================= Sponsor box ====================== */
 +
 +
.sponsor_box{
 +
width: 900px;
 +
margin:0 auto;
 +
}
 +
 +
.sponsor_rectangle, .sponsor_square{
 +
    position: relative;
 +
    width: 250px;
 +
margin: 10px 10px 10px 10px;
 +
float: left;
 +
height: 120px;
 +
display:inline;
 +
/*width:30%;*/
 +
/*clear: both;*/
 +
background-color: #fff; /*#F6FAED;*/
 +
border: 10px solid white;
 +
/*border-radius: 10px;*/
 +
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
 +
}
 +
 +
.sponsor_wur {
 +
position:absolute;
 +
width:250px;
 +
height:410px;
 +
margin: 10px 10px 10px 10px;
 +
display:block;
 +
margin-left:590px;
 +
margin-top:330px;
 +
background-color: #fff; /*#F6FAED;*/
 +
border: 10px solid white;
 +
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
 +
}
 +
   
 +
.sponsor_rectangle img, .sponsor_square img, .sponsor_wur img{
 +
width: 250px;
 +
    position: absolute;
 +
    top:0;
 +
    bottom:0;
 +
    margin:auto;
 +
}
 +
   
 +
.sponsor_square{
 +
height: 250px;
 +
}
 +
 +
 +
/* ==================== Link style ==================== */
 +
.soft_link, .soft_link:visited {
 +
text-decoration:none;
 +
color: #676f23;
 +
font-weight: bold;
 +
}
 +
 +
.soft_link:hover{
 +
text-decoration: underline;
 +
}
 +
 +
/* ==================== Tour style ==================== */
 +
.tour-arrow-left{
 +
    width:100px;
 +
    float:left;
 +
    margin-top:20px;
 +
}
 +
 +
.tour-arrow-right{
 +
    width:100px;
 +
    float:right;
 +
    margin-top:20px;
 +
}
 +
 +
.tour-header{
 +
    float:left;
 +
    font-family: 'Gloria Hallelujah', cursive;
 +
    font-size:150%;
 +
    width:600px;
 +
    margin-left:50px;
 +
    margin-right:50px
 +
}
 +
.tour-header h1{
 +
    text-align:center;
 +
}
 +
.tour-header p{
 +
font-size: 16px;
 +
}
 +
 +
#center ul.square-menu {
 +
    font-size: small;
 +
    list-style-type: none;
 +
    list-style: none;
 +
    padding: 0;
 +
    font-family: snap,arial, sans-serif;
 +
    width: 900px;
 +
    margin-left:20px;
 +
}
 +
 +
#center ul.square-menu li{
 +
    float: left;
 +
    margin: 5px;
 +
}
 +
 +
#center ul.square-menu li div.square-menu-header{
 +
    clear: both;
 +
    height: 80px;
 +
    line-height: 80px;
 +
}
 +
 +
#center ul.square-menu li a {
 +
text-decoration: none;
 +
    margin: 10px 10px 10px 10px;
 +
    background-color: #fff;
 +
    border: 5px solid #111;
 +
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
 +
    display: block;
 +
    border-radius: 25px;
 +
    font-family: 'Gloria Hallelujah', cursive;
 +
    width: 400px;
 +
    height: 200px;
 +
    text-align: left;
 +
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.05);
 +
    -webkit-transition: all 0.2s ease-in;
 +
    -ms-transition: all 0.2s ease-in;
 +
    -moz-transition: all 0.2s ease-in;
 +
    -o-transition: all 0.2s ease-in;
 +
    transition: all 0.2s ease-in;
 +
}
 +
 +
#center ul.square-menu li a h3{
 +
    font-family: 'Gloria Hallelujah', cursive;
 +
    color: #731115;
 +
    font-size: 29px;
 +
    display: inline-block;
 +
    vertical-align: middle;
 +
    margin-right: 5px;`
 +
text-decoration: none;
 +
}
 +
 +
#center ul.square-menu li a p{
 +
text-decoration: none;
 +
    float: left;
 +
    font-size: 16px;
 +
}
 +
 +
#center ul.square-menu li a img{
 +
    float: left;
 +
height: 80px;
 +
/*float:right;*/
 +
margin: 10px;
 +
margin-right: 15px;
 +
}
 +
 +
ul.square-menu li a:hover {
 +
    background: #97A355;
 +
    -moz-transform: scale(1.05);
 +
    -webkit-transform: scale(1.05);
 +
    -o-transform: scale(1.05);
 +
    transform: scale(1.05);
 +
    -moz-box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.12);
 +
    -webkit-box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.12);
 +
    box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.12);
 +
}
 +
#center ul li.centered-menu-box {
 +
 +
}
 +
 +
#center ul.square-menu li.centered-menu-box{
 +
    float: left;
 +
    margin: 5px;
 +
    margin-left: 225px;
 +
}
 +
#tourbutton{
 +
margin:0;
 +
padding-right:40px;
 +
padding-top:10px;
 +
float:right;
 +
width:130px;
 +
display:block;
 +
}
 +
 +
#tourbutton img{
 +
width:100%;
 +
}
 +
#tourbutton:hover{
 +
-webkit-transform: scale(1.1);
 +
-moz-transform: scale(1.1);
 +
-o-transform: scale(1.1);
 +
transform: scale(1.1);
 +
 +
 +
}
 +
 +
#tourbox{
 +
margin:10px 0px;
 +
float:left;
 +
width:500px;
 +
 +
}
 +
 +
 +
#tourbox h1{
 +
font-family: 'Gloria Hallelujah', cursive !important;
 +
font-weight:600 !important;
 +
font-size:25px !important;
 +
padding-left:70px;
 +
padding-top:10px;
 +
}
 +
 +
#tourbox img{
 +
position:absolute;
 +
margin:50px 0px;
 +
display:block;
 +
width:60px;
 +
 +
}
 +
/* ==================== CounterBox ==================== */
 +
#CounterBox{
 +
float:right;
 +
padding:30px 20px 0px 0px;
 +
 +
}
 +
 +
#CounterBox p{
 +
text-align:center;
 +
color:#97A355;
 +
font-size:20px;
 +
}
 +
 +
 +
/* ==================== Table style ==================== */
 +
ul.table{
 +
margin-left:35px;
 +
 +
}
 +
 +
 +
ul.table th td {
 +
font-family: verdana, geneva, sans-serif;
 +
margin-left:0px;
 +
padding: 52px;
 +
 +
}
 +
 +
ul.table th{
 +
padding: 5px;
 +
font-weight: bold;
 +
font-size: 170%;
 +
background-color: #97A355;
 +
display: table-cell;
 +
vertical-align: inherit;
 +
font-weight: bold;
 +
text-align: center;
 +
}
 +
 +
ul.table tr th:first-child{
 +
border-radius: 10px 0px 0px 0px;
 +
}
 +
 +
ul.table tr th:last-child{
 +
border-radius: 0px 10px 0px 0px;
 +
}
 +
 +
ul.table  tr td:nth-child(odd){
 +
background-color: rgba(234, 246, 168, 1);
 +
}
 +
 +
ul.table td {
 +
padding: 5px;
 +
font-weight: normal;
 +
font-size:14px;
 +
background-color: white;
 +
border: 1px solid #97A355;
 +
display: table-cell;
 +
text-align: center;
 +
}
 +
 +
/*---------------------- Overview picture ----------------------*/
 +
 +
.overview{
 +
height:310px;
 +
width:900px;
 +
margin-left:15px; 
 +
}
 +
 +
.overview > div {
 +
height: 310px;
 +
position:relative;
 +
float:left;
 +
margin:0px;
 +
}
 +
 +
.overview:hover > div{
 +
opacity:0.4;
 +
-webkit-transition: all .3s ease-in-out;
 +
-moz-transition: all .3s ease-in-out;
 +
-o-transition: all .3s ease-in-out;
 +
transition: all .3s ease-in-out;
 +
}
 +
 +
.overview:hover > div img.top {
 +
opacity:0.2;
 +
}
 +
 +
.overview:hover > div:hover{
 +
opacity:1;
 +
box-shadow:0px -6px 4px #888888;
 +
}
 +
 +
 +
.overview > div img{
 +
position:absolute;
 +
left:0;
 +
height:100%;
 +
-webkit-transition: all .3s ease-in-out;
 +
-moz-transition: all .3s ease-in-out;
 +
-o-transition: all .3s ease-in-out;
 +
transition: all .3s ease-in-out;
 +
}
 +
 +
 +
.overview > div img.top:hover {
 +
opacity:0;
 +
 +
}
 +
 +
.overview > div img.transparent {
 +
opacity:0;
 +
}
 +
 +
 +
.switchtext{
 +
height:30px;
 +
line-height:30px;
 +
margin-left:200px;
 +
margin-right:10px;
 +
float:left;
 +
font-size:18px;
 +
}
 +
 +
.switchtext > span{
 +
font-size:35px;
 +
vertical-align:-6px;
 +
}
 +
 +
.onoffswitch {
 +
position: relative;
 +
width: 100px;
 +
-webkit-user-select:none;
 +
-moz-user-select:none;
 +
-ms-user-select: none;
 +
padding-bottom:10px;
 +
float:left;
 +
}
 +
.onoffswitch-checkbox {
 +
display: none;
 +
}
 +
.onoffswitch-label {
 +
display: block;
 +
overflow: hidden;
 +
cursor: pointer;
 +
border: 2px solid #999999;
 +
border-radius: 20px;
 +
}
 +
 +
.onoffswitch-inner {
 +
display: block;
 +
width: 200%;
 +
margin-left: -100%;
 +
-moz-transition: margin 0.3s ease-in 0s;
 +
-webkit-transition: margin 0.3s ease-in 0s;
 +
-o-transition: margin 0.3s ease-in 0s;
 +
transition: margin 0.3s ease-in 0s;
 +
}
 +
.onoffswitch-inner:before, .onoffswitch-inner:after {
 +
display: block;
 +
float: left;
 +
width: 50%;
 +
height: 30px;
 +
padding: 0;
 +
line-height: 30px;
 +
font-size: 16px;
 +
color: white;
 +
font-family: Trebuchet, Arial, sans-serif;
 +
font-weight: bold;
 +
-moz-box-sizing: border-box;
 +
-webkit-box-sizing: border-box;
 +
box-sizing: border-box;
 +
}
 +
.onoffswitch-inner:before {
 +
content: "Show";
 +
padding-left: 11px;
 +
background-color: #EEEEEE;
 +
color: #000000;
 +
}
 +
 +
.onoffswitch-inner:after {
 +
content: "Hide";
 +
padding-right: 11px;
 +
background-color: #EEEEEE;
 +
color: #999999;
 +
text-align: right;
 +
}
 +
.onoffswitch-switch {
 +
display: block;
 +
width: 18px;
 +
height:18px;
 +
margin: 6px;
 +
background: #A1A1A1;
 +
border: 2px solid #999999;
 +
border-radius: 20px;
 +
position: absolute;
 +
top: 0;
 +
bottom: 0;
 +
right: 66px;
 +
-moz-transition: all 0.3s ease-in 0s;
 +
-webkit-transition: all 0.3s ease-in 0s;
 +
-o-transition: all 0.3s ease-in 0s;
 +
transition: all 0.3s ease-in 0s;
 +
}
 +
 +
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
 +
margin-left: 0;
 +
}
 +
 +
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
 +
right: 0px;
 +
background-color: #27A1CA;
 +
}
 +
 +
.overview_model{
 +
width:862px;
 +
height:331px;
 +
 +
background-repeat:no-repeat;
 +
background-size:862px;
 +
display:block;
 +
margin-left:15px;
 +
}
 +
 +
.model_brick{
 +
width:150px;
 +
height:150px;
 +
float:left;
 +
margin-top:120px;
 +
-webkit-transition: all .2s ease-in-out;
 +
-moz-transition: all .2s ease-in-out;
 +
-o-transition: all .2s ease-in-out;
 +
-ms-transition: all .2s ease-in-out;
 +
}
 +
 +
.model_brick > img{
 +
width:150px;
 +
}
 +
 +
.model_brick:hover{
 +
-webkit-transform: scale(1.2);
 +
-moz-transform: scale(1.2);
 +
-o-transform: scale(1.2);
 +
transform: scale(1.2);
 +
}
 +
 +
figure {
 +
display: block;
 +
margin-left:auto;
 +
margin-right:auto;
 +
}
 +
 +
figure img {
 +
display: block;
 +
margin-left:auto;
 +
margin-right:auto;
 +
}
 +
 +
figure figcaption {
 +
    font-size: 12px;
 +
font-weight: bold;
 +
display: block;
 +
margin-left:auto;
 +
margin-right:auto;
 +
text-align: center;
 +
}
 +
 +
ul.references{
 +
list-style-type: circle;
 +
}
 +
 +
ol.references{
 +
list-style-type: decimal;
 +
}
 +
 +
ul.references li, ol.references li {
 +
font-family: courier new, monospace;
 +
font-size:14px;
 +
margin-bot:5px;
 +
margin-top:5px;
 +
margin-left: 30px;
}
}

Latest revision as of 22:12, 17 October 2014

/*Font imports first*/ @import url(http://fonts.googleapis.com/css?family=Gloria+Hallelujah);

/*

  • 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; } 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.left-menu > ul > li:last-child { 
   display: none;

}

  1. menubar { 
   width: auto;

}

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

}

  1. top-section:hover{ 
   background-color: rgba(100,100,100,0.5);

}

  1. top-section:hover li a { 
   background-color: rgba(100,100,100,0.5);
   color: black;

}

  1. 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/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; /*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/2014/9/95/Wageningen_UR_banner.png'); background-size: auto 170px; 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*/

.sidebar-container{ float:right; }


sidenav { 

   width:150px;
   background-color:none;
   border:none;
   padding:0;

margin-top:235px; margin-left:-135px; position: fixed; 

   top: 0;
   z-index: 3;

}

.menu-head { background: #473D21; width:150px; padding:0; margin:0; list-style: none; box-shadow: 0px 5px 9px rgba(0,0,0,0.50); border-radius: 3px; overflow:hidden; 

 	border-top: 2px solid #473D21;

border-right:1px solid #473D21; border-left:1px solid #473D21; border-bottom:2px solid #8B964E; }

.menu-head a{ color:#FFF372; text-decoration: none; 

   font-size:14px;

background: none; width:150px; margin:0; padding:0px 20px; list-style: none; position: relative; line-height:40px; display: block; }

.menu-item { font-weight: bold; background: #97A355; width:150px; padding:0; margin:0; list-style: none; box-shadow: 0px 5px 9px rgba(0,0,0,0.50); border-radius: 3px; overflow:hidden; 

 	border-top: 2px solid #9EAB59;

border-right:1px solid #9EAB59; border-left:1px solid #9EAB59; border-bottom:2px solid #8B964E; }

.menu-item a{ text-decoration: none; 

   font-size:12px;

background: none; width:150px; margin:0; padding:0px 20px; list-style: none; position: relative; line-height:40px; }

.menu-item a, .menu-item a:visited { color: #222; display: block; text-decoration: none; width: 150px; line-height:40px; }

.menu-item:hover >{ background: #473D21; box-shadow: 0px 0px 10px rgba(0,0,0,0.15); border-radius: 3px; }

.menu-item:hover > a{ color: #FFF372; }

.menu-item ul { background: none; box-shadow:none; font-size: 14px; height:0px;/*collapses the menu*/ list-style-type: none; padding: 0px; margin:0; overflow:hidden; -webkit-transition: height 1s ease; -moz-transition: height 1s ease; -o-transition: height 1s ease; -ms-transition: height 1s ease; transition: height 1s ease; }

.menu-item ul a, .menu-item ul a:visited { margin:0; text-decoration: none; color: #222; display: block; width: 150px; overflow:hidden; }

.menu-item ul li a, .menu-item ul li a:visited { 

   background-color: rgb(215,214,126);
}
/*

.menu-item a { display: block; width:150px; height:40px; line-height:40px; margin:0; padding:0px 20px; overflow:hidden; -webkit-transition: height 1s ease; 

    -moz-transition: height 1s ease;
      -o-transition: height 1s ease;
     -ms-transition: height 1s ease;
         transition: height 1s ease;

}

  • /

.menu-item:hover li{ height:40px; line-height:40px; }

/* Can't get it to expand based on the number of children - just used seperarete css for each ammount of submenus.*/ .menu-item:hover ul.one-item{ height:42px; } .menu-item:hover ul.two-item{ height:82px; } .menu-item:hover ul.three-item{ height:122px; } .menu-item:hover ul.four-item{ height:162px; } .menu-item:hover ul.five-item{ height:202px; } .menu-item:hover ul.six-item{ height:242px; }

.menu-item li:hover a{ 

 background: #FFF372;
 font-weight:bold;

}


a.sidenav-active { 

  background-color: rgba(119, 122, 64, 0.9);
  font-weight:bold;
  padding:0 20px;

}

/*sidebar end*/


hr { 

   border:none;
   background-color:rgb(220,220,220);
   height:12px;
   margin-bottom:18px;

}


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

  1. center h1,h2,h3,h4{

font-family:Verdana, Geneva, sans-serif; font-weight:bold; }

  1. center h1{

line-height: 30px; color:#3a3424; margin: 20px 10px 10px 10px; font-size:200%; /*text-align:center;*/ /*border-bottom: 1px solid #3a3424;*/ /*f0efcd;*/ }

  1. center h2{

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

  1. center h3{

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

  1. center h4{

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

  1. center p, #center ul, #center ol{

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

  1. center ul{

margin: 10px 15px 10px 45px; list-style-type:disc; list-style-image:none; }

  1. center ol{

margin: 10px 15px 10px 45px; list-style-type:decimal; }

  1. center p.notjustified{

text-align: left; }

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

padding-top:0px; }

  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: 475px; 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-left-team > img.bottom, .box-right-team > img.bottom{ margin: 10px 15px 5px 15px; float: right; height: 234px; border-radius: 10px; }

.box-left-team > img.top, .box-right-team > img.top{ position:absolute; margin-left:238px; margin-top:10px; border-radius:10px; height:235px; width:157px; display:inline-block; -webkit-transition: opacity .3s ease-in-out; -moz-transition: opacity .3s ease-in-out; -o-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; }

.box-left-team:hover > img.top, .box-right-team:hover > img.top{ opacity:0; }


.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: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; 

}


  1. pblogo:hover img{

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


  1. igemlogo:hover img {

opacity:1; }

  1. rightlogo img{

pointer-events:none; /*Does this work in IE9? Apparantly not... Who would've thought...*/ position:relative; z-index: -1; background-color:transparent; height:400px; margin-top:-200px; margin-left:-120px; overflow: hidden; }

/*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; list-style-image: 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, #ca-icon2, #ca-icon3, #ca-icon4, #ca-icon5, #ca-icon6{ 
   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{

background:url(Wageningen_UR_overview_icon1.png); background-size:35px; background-repeat:no-repeat; background-position:left center; }

  1. ca-icon3{

background:url(Wageningen_UR_outreach_icon1.png); background-size:35px; background-repeat:no-repeat; background-position:left center; }

  1. ca-icon4{

background:url(Wageningen_UR_team_icon1.png); background-size:35px; background-repeat:no-repeat; background-position:left center; }

  1. ca-icon5{

background:url(Wageningen_UR_safety_icon1.png); background-size:35px; background-repeat:no-repeat; background-position:left center; }

  1. ca-icon6{

background:url(Wageningen_UR_notebook_icon1.png); background-size:35px; background-repeat:no-repeat; background-position:left center; }

.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 li ul, #ca-menu li ul a {

visibility:hidden; height:0; /*position:fixed;*/ background-color:transparent; font-size:12px; padding:0; width:138px; 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 li{

visibility:hidden; height:0; position:relative; float:none; width:138px; line-height:40px; font-family:Verdana, Geneva, sans-serif; font-size:12px; font-weight: bold; background-color:#b6be88; text-decoration:none; box-shadow:none;

-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 li a{ 
       visibility:hidden;

-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:0; -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; 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 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: bold; background-color:#b6be88; text-decoration:none; box-shadow:none; border:1px solid #b6be88; visibility:visible; height:36px; -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 li a:after { 
   content:"\25B6";

float: right; font-size:8px; margin-right:1px; margin-left:-15px; }

  1. ca-menu li:hover li > a:only-child:after { 
   content: ;

}

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

-webkit-border-radius: 2px 2px 0 0; -moz-border-radius:2px 2px 0 0; border-radius:2px 2px 0 0; }

  1. ca-menu ul ul > :last-child {

-webkit-border-radius: 0 0 2px 2px; -moz-border-radius:0 0 2px 2px; border-radius:0 0 2px 2px; } 

*/
  1. ca-menu li:hover li a{

color:#473D21; visibility:visible; width:138px; height:36px; -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 {

width:138px; height:36px; 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{

width:138px; height:36px; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -ms-transition: all .1s ease-out; -o-transition: all .1s ease-out; }

/*third-level menu*/

  1. ca-menu li li ul{

margin-top:-36px; visibility:hidden; height:150px; /*position:fixed;*/ margin-left:136px; background-color:tranparent; padding:0; width:0px; 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 li ul a{

visibility:hidden; height:150px; /*position:fixed;*/ background-color:transparent; padding:0; width:138px; 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 ul li {

visibility:hidden; position:relative; float:none; margin:0; margin-left:3px; 

	padding:0;

width:0px; line-height:40px; font-family:Verdana, Geneva, sans-serif; font-size:12px; font-weight: bold; background-color:#E0E4CC; text-decoration:none; box-shadow:none; border:1px solid #E0E4CC;; 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 li:hover ul ul li a{

margin:0; color:#473D21; visibility:hidden; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -ms-transition: all .2s ease-out; -o-transition: all .2s ease-out; }

  1. ca-menu li li:hover ul{

visibility:visible; width:138px; 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 li:hover ul a{

color:#473D21; visibility:hidden; 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; }

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

height:36px; width:138px; 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 li:hover ul li:hover > ul li a{

width:138px; height:36px; visibility:visible; }

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

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

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

}

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

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

.up_menu_fix{ margin-top:-36px; }


@-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%);
   }

}

/*======================== 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; } }


/* ======= 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:both; line-height:1.5em; margin:6px 0 10px; width:700px; }

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

/* ================= Sponsor box ====================== */

.sponsor_box{ width: 900px; margin:0 auto; }

.sponsor_rectangle, .sponsor_square{ 

   position: relative;
   width: 250px;

margin: 10px 10px 10px 10px; float: left; height: 120px; display:inline; /*width:30%;*/ /*clear: both;*/ background-color: #fff; /*#F6FAED;*/ border: 10px solid white; /*border-radius: 10px;*/ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }

.sponsor_wur { position:absolute; width:250px; height:410px; margin: 10px 10px 10px 10px; display:block; margin-left:590px; margin-top:330px; background-color: #fff; /*#F6FAED;*/ border: 10px solid white; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }

.sponsor_rectangle img, .sponsor_square img, .sponsor_wur img{ width: 250px; 

   position: absolute;
   top:0;
   bottom:0;
   margin:auto;

}

.sponsor_square{ height: 250px; }


/* ==================== Link style ==================== */ .soft_link, .soft_link:visited { text-decoration:none; color: #676f23; font-weight: bold; }

.soft_link:hover{ text-decoration: underline; }

/* ==================== Tour style ==================== */ .tour-arrow-left{ 

   width:100px;
   float:left;
   margin-top:20px;

}

.tour-arrow-right{ 

   width:100px;
   float:right;
   margin-top:20px;

}

.tour-header{ 

   float:left;
   font-family: 'Gloria Hallelujah', cursive;
   font-size:150%;
   width:600px;
   margin-left:50px;
   margin-right:50px

} .tour-header h1{ 

   text-align:center;

} .tour-header p{ font-size: 16px; }

  1. center ul.square-menu { 
   font-size: small;
   list-style-type: none;
   list-style: none;
   padding: 0;
   font-family: snap,arial, sans-serif;
   width: 900px;
   margin-left:20px;

}

  1. center ul.square-menu li{ 
   float: left;
   margin: 5px;

}

  1. center ul.square-menu li div.square-menu-header{ 
   clear: both;
   height: 80px;
   line-height: 80px;

}

  1. center ul.square-menu li a {

text-decoration: none; 

   margin: 10px 10px 10px 10px;
   background-color: #fff; 
   border: 5px solid #111;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
   display: block;
   border-radius: 25px;
   font-family: 'Gloria Hallelujah', cursive;
   width: 400px;
   height: 200px;
   text-align: left;
   text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.05);
   -webkit-transition: all 0.2s ease-in;
   -ms-transition: all 0.2s ease-in;
   -moz-transition: all 0.2s ease-in;
   -o-transition: all 0.2s ease-in;
   transition: all 0.2s ease-in;

}

  1. center ul.square-menu li a h3{ 
   font-family: 'Gloria Hallelujah', cursive;
   color: #731115;
   font-size: 29px;
   display: inline-block;
   vertical-align: middle;
   margin-right: 5px;`

text-decoration: none; }

  1. center ul.square-menu li a p{

text-decoration: none; 

   float: left;
   font-size: 16px;

}

  1. center ul.square-menu li a img{ 
   float: left;

height: 80px; /*float:right;*/ margin: 10px; margin-right: 15px; }

ul.square-menu li a:hover { 

   background: #97A355;
   -moz-transform: scale(1.05);
   -webkit-transform: scale(1.05);
   -o-transform: scale(1.05);
   transform: scale(1.05);
   -moz-box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.12);
   -webkit-box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.12);
   box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.12);

}

  1. center ul li.centered-menu-box {

}

  1. center ul.square-menu li.centered-menu-box{ 
   float: left;
   margin: 5px;	
   margin-left: 225px;

}

  1. tourbutton{

margin:0; padding-right:40px; padding-top:10px; float:right; width:130px; display:block; }

  1. tourbutton img{

width:100%; }

  1. tourbutton:hover{

-webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1);


}

  1. tourbox{

margin:10px 0px; float:left; width:500px;

}


  1. tourbox h1{

font-family: 'Gloria Hallelujah', cursive !important; font-weight:600 !important; font-size:25px !important; padding-left:70px; padding-top:10px; }

  1. tourbox img{

position:absolute; margin:50px 0px; display:block; width:60px;

} /* ==================== CounterBox ==================== */

  1. CounterBox{

float:right; padding:30px 20px 0px 0px;

}

  1. CounterBox p{

text-align:center; color:#97A355; font-size:20px; }


/* ==================== Table style ==================== */ ul.table{ margin-left:35px;

}


ul.table th td { font-family: verdana, geneva, sans-serif; margin-left:0px; padding: 52px;

}

ul.table th{ padding: 5px; font-weight: bold; font-size: 170%; background-color: #97A355; display: table-cell; vertical-align: inherit; font-weight: bold; text-align: center; }

ul.table tr th:first-child{ border-radius: 10px 0px 0px 0px; }

ul.table tr th:last-child{ border-radius: 0px 10px 0px 0px; }

ul.table tr td:nth-child(odd){ background-color: rgba(234, 246, 168, 1); }

ul.table td { padding: 5px; font-weight: normal; font-size:14px; background-color: white; border: 1px solid #97A355; display: table-cell; text-align: center; }

/*---------------------- Overview picture ----------------------*/

.overview{ height:310px; width:900px; margin-left:15px; }

.overview > div { height: 310px; position:relative; float:left; margin:0px; }

.overview:hover > div{ opacity:0.4; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }

.overview:hover > div img.top { opacity:0.2; }

.overview:hover > div:hover{ opacity:1; box-shadow:0px -6px 4px #888888; }


.overview > div img{ position:absolute; left:0; height:100%; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }


.overview > div img.top:hover { opacity:0;

}

.overview > div img.transparent { opacity:0; }


.switchtext{ height:30px; line-height:30px; margin-left:200px; margin-right:10px; float:left; font-size:18px; }

.switchtext > span{ font-size:35px; vertical-align:-6px; }

.onoffswitch { position: relative; width: 100px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; padding-bottom:10px; float:left; } .onoffswitch-checkbox { display: none; } .onoffswitch-label { display: block; overflow: hidden; cursor: pointer; border: 2px solid #999999; border-radius: 20px; }

.onoffswitch-inner { display: block; width: 200%; margin-left: -100%; -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s; -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s; } .onoffswitch-inner:before, .onoffswitch-inner:after { display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; font-size: 16px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .onoffswitch-inner:before { content: "Show"; padding-left: 11px; background-color: #EEEEEE; color: #000000; }

.onoffswitch-inner:after { content: "Hide"; padding-right: 11px; background-color: #EEEEEE; color: #999999; text-align: right; } .onoffswitch-switch { display: block; width: 18px; height:18px; margin: 6px; background: #A1A1A1; border: 2px solid #999999; border-radius: 20px; position: absolute; top: 0; bottom: 0; right: 66px; -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s; -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; }

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { margin-left: 0; }

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { right: 0px; background-color: #27A1CA; }

.overview_model{ width:862px; height:331px;

background-repeat:no-repeat; background-size:862px; display:block; margin-left:15px; }

.model_brick{ width:150px; height:150px; float:left; margin-top:120px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; }

.model_brick > img{ width:150px; }

.model_brick:hover{ -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); }

figure { display: block; margin-left:auto; margin-right:auto; }

figure img { display: block; margin-left:auto; margin-right:auto; }

figure figcaption { 

   font-size: 12px;

font-weight: bold; display: block; margin-left:auto; margin-right:auto; text-align: center; }

ul.references{ list-style-type: circle; }

ol.references{ list-style-type: decimal; }

ul.references li, ol.references li { font-family: courier new, monospace; font-size:14px; margin-bot:5px; margin-top:5px; margin-left: 30px; }

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