Team:Wageningen UR/css
From 2014.igem.org
/*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*/
- 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) */
- menubar.left-menu > ul > li:last-child {
display: none;
}
- menubar {
width: auto;
}
- top-section{
background-color: transparent;
}
- top-section:hover{
background-color: rgba(100,100,100,0.5);
}
- top-section:hover li a {
background-color: rgba(100,100,100,0.5); color: black;
}
- menubar a:link, #menubar a:active, #menubar a:visited, #menubar:hover{
color: transparent;
}
/*Three column layout with fixed middle width - http://css-lab.com/demos/3col-fluid/3col-fix-cntr.html*/
- {
margin:0; padding:0; }
body:before {/*Opera Fix*/
content:""; height:100%; float:left; width:0; margin-bottom:-100px;/*header height*/
} html{ height:100%; } body{
height:100%; min-width: 1000px;/*To remove horizontal scrollbar*/ overflow-x: hidden; /*To remove horizontal scrollbar*/ background-image: url('https://static.igem.org/mediawiki/2014/0/02/Wageningen_UR_background.jpg');
background-size: 1000px; font-family: verdana, geneva, sans-serif; color: #000000; font-size:80%; }
- wrapper{
min-height:100%; margin-top:-50px; /*footer soak up*/ position:relative;/*set as containing block for AP faux column*/
}
- innerwrap{/*IE6 needs this for the AP faux column*/
width:1024px; overflow:visible;
margin-left: auto; margin-right: auto; }
- header{
/*border-top:50px solid #333;/*footer soak up*/ margin-top: 60px; /*Change to 10 for IE*/
margin-bottom: -15px; margin-left: -30px; height: 170px;
position:relative; z-index: -1;/*layer it above the AP faux*/ /*background:inherit;*/ color:#000; text-align:center;
background-image: url('https://static.igem.org/mediawiki/2014/9/95/Wageningen_UR_banner.png'); background-size: auto 170px; background-repeat: no-repeat; background-position: center; /*background-size: 200px;*/ display: block; }
- left {
width:50%; float:left; margin-right:-500px; /*-half center width*/
background:inherit; /*border-bottom: 50px solid #97a355;*/ }
- inner-left{
margin-right:505px; /*half center column width + 5*/ background:inherit;/*background:#FFF;same as body BG*/
}
- center {
width:1000px; /*center column width*/ float:left; background:inherit; position:relative; z-index:3;
margin-top: -10px; /*box-shadow: -10px 0px 10px 0px rgba(0,0,0,0.17); */ /*Could be the padding from menu or something*/ /*border-radius:10px;*/ /*border-width:2px;
border-style:dashed;
border-color:#473d21;*/ } .center_content{ padding: 50px; margin-bottom: 20px; background:#FFFFFF; color: #473D2; box-shadow: 0px 0px 8px 3px rgba(0,0,0,0.5);/*rgba(229, 299, 196, 0.8); */ border-radius: 3px; overflow: hidden; }
- right {
width:50%; float:right; margin-left:-500px; /*-half center width*/
background:#FFFFFF; }
- inner-right {
margin-left:505px; /*half center column width + 5*/ background:#FFFFFF;/*same as body BG*/
}
- 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*/
- footer{
margin-top: 30px; padding-top:100px;
clear:both; width:100%; height:50px;
/*background-color: #97a355;*/
background-image: url();
color:#f0efcd; text-align:center;
}
- 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*/
- center h1,h2,h3,h4{
font-family:Verdana, Geneva, sans-serif; font-weight:bold; }
- center h1{
line-height: 30px; color:#3a3424; margin: 20px 10px 10px 10px; font-size:200%; /*text-align:center;*/ /*border-bottom: 1px solid #3a3424;*/ /*f0efcd;*/ }
- center h2{
margin: 10px 10px 5px 10px; font-size:170%; color: #575e31; border-bottom: 1px solid #575e31; /*text-decoration:underline*/ }
- center h3{
margin: 10px 10px 0px 15px; color:#3a3424; font-size:130%; }
- center h4{
margin: 0px 10px 10px 40px; color:#3a3424; font-size:110%; font-weight: 800; }
- 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; }
- 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; }
- center p.notjustified{
text-align: left; }
- center h1+p, h2+p, h3+p, h4+p{
padding-top:0px; }
- 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); }
- 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{ 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; }
- 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;
}
- rightbarlogo {
padding-top: 1 px; position: absolute; right:-10px; bottom: 1px; }
- 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;
}
- 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); }
- igemlogo:hover img {
opacity: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*/
- ca-menu{
padding:0; margin:0;
margin-left:15px;
width: 880px;
display:block; /*position:relative;*/ float:left; }
- ca-menu ul{
list-style-type: none; list-style-image: none;
padding: 0; margin: 0; position:relative;
width:900px; }
- 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;
}
- ca-menu li a{
text-align: left; width: 100%; height: 100%; display: block; color: #222; position: relative;
}
- 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();
background-size:35px;
background-repeat:no-repeat;
background-position:left center;
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear;
}
- ca-icon2{
background:url();
background-size:35px;
background-repeat:no-repeat;
background-position:left center;
}
- ca-icon3{
background:url();
background-size:35px;
background-repeat:no-repeat;
background-position:left center;
}
- ca-icon4{
background:url();
background-size:35px;
background-repeat:no-repeat;
background-position:left center;
}
- ca-icon5{
background:url();
background-size:35px;
background-repeat:no-repeat;
background-position:left center;
}
- ca-icon6{
background:url();
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;
}
- 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);
}
- ca-menu ul li:hover a {
-webkit-transform: none;
-moz-transform: none; -ms-transform: none; -o-transform: none;
transform:none; }
- ca-menu ul li:hover #ca-icon1{
/* overflow:hidden;
color: #FFF372;
font-size:90px;*/
background:url();
background-size:100px;
opacity:0.3;
background-repeat:no-repeat;
background-position:left center;
}
- ca-menu ul li:hover #ca-icon2{
background:url();
background-size:100px; opacity:0.3; background-repeat:no-repeat; background-position:left center; }
- ca-menu ul li:hover #ca-icon3{
background:url();
background-size:100px; opacity:0.3; background-repeat:no-repeat; background-position:left center; }
- ca-menu ul li:hover #ca-icon4{
background:url();
background-size:100px; opacity:0.3; background-repeat:no-repeat; background-position:left center; }
- ca-menu ul li:hover #ca-icon5{
background:url();
background-size:100px; opacity:0.3; background-repeat:no-repeat; background-position:left center; }
- ca-menu ul li:hover #ca-icon6{
background:url();
background-size:100px; opacity:0.3; background-repeat:no-repeat; background-position:left center; }
- 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*/
- 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; }
- 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;
}
- 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; 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; }
- 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; }
- 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; } /*
- 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: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; 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; }
- 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 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; }
- 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; }
- 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 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;
}
- 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; }
- 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; 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; }
- 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; }