Team:Wageningen UR/Templates/style.css

From 2013.igem.org

(Difference between revisions)

Latest revision as of 18:46, 23 April 2014

/* This will be our main css file added to the head with jquery's append() */

/* Reset Globals

*/

body, html, #globalWrapper, #content, p { background: transparent; margin: 0; padding: 0; border: 0 none transparent;

       font-family: 'Open Sans', sans-serif;

font-size: 1em;

       width: 100%;}

body {

 background-color: #f1f1f1;

}

ol, ul, li {

       list-style: none;
       -webkit-margin-before: 0;
       -webkit-margin-after: 0;
       -webkit-padding-start: 0;
       margin: 0;}

blockquote:before, blockquote:after, q:before, q:after {content: "";}

blockquote, q {quotes: "" "";}

a {color: #333; text-decoration: none;} a:visited {color: #333;text-decoration: none;} a:hover {text-decoration: none; color: #0d9c64;}

img, embed, object, video {max-width: 100%;}

.clearfix {

   display: block;
   width: 100%;
   clear: both;

}

/* Fonts

*/

@import url('http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,latin-ext');

/* Overwrite the css for the top part of the page

*/

p-logo,
catlinks {display: none;}

top-section {

position: fixed;

       top: 0;
       width: 100%;
       height: 0;
       border: none;
       z-index: 100;}

search-controls {display: none;}

menubar {

display: table-cell; background: transparent;

       font-size: 11px;}

top-section #menubar ul {

       -webkit-margin-before: 2px;
       -webkit-margin-after: 2px;
       -webkit-padding-start: 40px;
       margin: .3em 0 0 1.5em;}

menubar.left-menu {width: 100%; padding-top: 6px;}

menubar.right-menu {text-align: right; padding-top: 6px;}

menubar * {

color: transparent !important; background: transparent !important;}

top-section:hover #menubar * {color: #333 !important;}

top-section #menubar ul li a:hover {color: #0d9c64 !important; text-decoration: none;}

top-section:hover #menubar.left-menu {background: rgba(255, 255, 255, 0.75) !important; border-bottom: 1px solid #0d9c64;}

/* Navigation - Topmenu

*/

topmenu {

       display: block;
       position: fixed;
       top: 0;
       width: 89.06244%;
       padding: 0 5.46878%;
       height: 80px;
       background: url('https://static.igem.org/mediawiki/2013/1/1d/Top-gradient.png') #f1f1f1 repeat-x left top;
       border-top: 1px solid #0d9c64;
       box-shadow: 0 0 5px #888;
       z-index: 10;}

topmenu .selflink {font-weight: normal !important; color: #0d9c64; cursor: default; padding: 0 12px 0 8px;}
topmenu .menucenter li:hover .selflink {padding: 0 11px 0 9px}

topmenu .menucenter{position: relative; display: block; line-height: 80px;}

topmenu .menuleft {position: absolute; line-height: 76px; z-index: 3;}
topmenu .menuleft a img {position: relative; height: 60px; top: 10px;}

topmenu .menucenter {

   display:block;
   margin: 0 auto;
   width:100%;
   text-align: center;
   font-size: 0;}
   #topmenu .menucenter li {
       display:inline-block;
       margin: 0;
       background: url('https://static.igem.org/mediawiki/2013/c/ca/Top-menu-divider.png') no-repeat right top;
       font-size: 16px;}
   #topmenu .menucenter li:first-child {
       background: url('https://static.igem.org/mediawiki/2013/c/ca/Top-menu-divider.png') no-repeat left top, url('https://static.igem.org/mediawiki/2013/c/ca/Top-menu-divider.png') no-repeat right top;}
   #topmenu .menucenter li:hover {
       background: url('https://static.igem.org/mediawiki/2013/0/03/Top-menu-hover.png') repeat-x top left; 
       border-left:1px solid #ccc;
       border-right:1px solid #ccc;
       margin: 0 0 0 -2px;}
       #topmenu .menucenter li a {display:block; height: 79px; padding: 0 12px 0 8px;}
       #topmenu .menucenter li:hover a {padding: 0 11px 0 9px}

topmenu .menuright {position: absolute; display: block; width: 109px; height: 80px; right: 5.46878%; top: 0; z-index: 3;}

topmenu .menuright a{display: inline-block; position: relative;}

   #topmenu .menuright a.twitter {
       display:block;
       float: left;
       width: 36px;
       height: 30px;
       margin-top: 25px;
       padding: 0;
       background: url('https://static.igem.org/mediawiki/2013/d/de/Twitterbtn.png') left top no-repeat;
   }
   #topmenu .menuright a.facebook {
       display:block;
       float: left;
       width: 36px;
       height: 34px;
       margin-top: 23px;
       padding: 0;
       background: url('https://static.igem.org/mediawiki/2013/7/7c/Facebookbtn.png') left top no-repeat;
   }
   #topmenu .menuright a.mail {
       display:block;
       float: left;
       width: 37px;
       height: 29px;
       margin-top: 26px;
       padding: 0;
       background: url('https://static.igem.org/mediawiki/2013/9/94/Mailbtn.png') left top no-repeat;
   }
   #topmenu .menuright a:hover {
       background-position: right top;
   }

topmenu ul, topmenu li {

   -webkit-margin-before: 0;
   -webkit-margin-after: 0;
   -webkit-padding-start: 0;}

bodyContent{padding: 81px 0 0px;}

/* Navigation - Submenu

*/

ul.subs {

   display: block;
   position: fixed;
   top: -165px;
   left: 0;
   width: 100%;
   height: 160px;
   box-shadow: 0 0 5px #ccc;
   background: url('https://static.igem.org/mediawiki/2013/2/28/Sub-bg.png') repeat-x top left;
   text-align: center;
   z-index: 5;
      -webkit-transition: all .3s ease-in-out;
          -moz-transition: all .3s ease-in-out;
                    transition: all .3s ease-in-out;}

ul.subs.active {

   top: 79px;
   left: 0;}

ul.subs li:first-child {padding-left: 5px; background:url('http://beoplay.com/resources/sbv-custom/img/megamenu/mm_divider.png') no-repeat right center, url('http://beoplay.com/resources/sbv-custom/img/megamenu/mm_divider.png') no-repeat left center; } ul.subs li {

   display:inline-block;
   width: 10%;
   max-width: 180px;
   font-family: 'Source Sans Pro', sans-serif;
   font-size:13px;
   vertical-align: top;
   padding: 0 5px 0 0;
   background: url('http://beoplay.com/resources/sbv-custom/img/megamenu/mm_divider.png') no-repeat right center;}

ul.subs li:hover {

   background: url('http://beoplay.com/resources/sbv-custom/img/megamenu/mm_hover_bg.png') no-repeat top right;
   background-size: cover;
   margin: 0 0 0 -6px;
   padding: 0 5px 0 6px;

} ul.subs li:first-child:hover {padding: 0 5px 0 4px; margin-left: 1px; } ul.subs li a {

   display: block;
   padding: 40px 0 0;
   height: 120px;
   line-height: 16px;

}

ul.subs li a img {padding-bottom: 10px;}

ul.subs li .selflink img {padding-bottom: 10px;} ul.subs .selflink {display:block; font-weight: normal !important; color: #0d9c64; cursor: default; padding: 40px 0 0; height: 120px; line-height: 16px;}

/* Slider

*/

.slider {

       display: block;
       background: url('https://static.igem.org/mediawiki/2013/f/f5/Sliderlogo.png') center center no-repeat;
       background-size: auto 80%;
       width: 100%;
       max-width: 100%;
       height: 300px;
       overflow: hidden;

} .timeliner{ margin:0; padding:0; position:relative; display:none; } .timeliner .slide{ margin:0; padding:0; list-style:none; overflow:hidden; position:absolute; display:block; } .timeliner .timeline{ display:block; position:absolute; z-index:2; list-style:none; } .timeliner .innertimeline{ position:absolute; bottom:0; z-index:3; overflow:hidden; } .timeliner .timedisplay{ position:absolute; text-align:right; cursor:default; white-space:nowrap; } .timeliner .node{ position:absolute; z-index:4; cursor:pointer; } .timeliner .tooltip{ position:absolute; white-space:nowrap; display:block !important; } .timeliner .pause, .timeliner .play, .timeliner .previous, .timeliner .next{ position:absolute; list-style:none; z-index:3; cursor:pointer; } .timeliner .previous, .timeliner .next{ z-index:2; } .timeliner img{ vertical-align:bottom }

example3{

-webkit-box-shadow:0 0 15px #aaa; -moz-box-shadow:0 0 15px #aaa; box-shadow:0 0 15px #aaa; width: 100%; max-width:100%; } /* Each slide */

example3 .slide{

background:#ccc; padding:20px;

       -webkit-transition: opacity .7s linear;
          -moz-transition: opacity .7s linear;
                    transition: opacity .7s linear;}

/* The timeline background */

example3 .timeline{

background:url('http://beauvillemedia.nl/igem/timeline_dot_pattern.png') repeat-x top left;

       background-size: 4px 2px;}

/* The timeline fill bar */

example3 .innertimeline{

background:#fff; } /* The time display */

example3 .timedisplay{

font:11px verdana,sans-serif; padding:3px 5px; } /* Each node */

example3 .node{

       top: -20px;

background: rgba(255,255,255, .7); width:2px; height:10px;}

example3 .node .tooltip {opacity: .6;}

/* The active node */

example3 .node_active{ background:#fff;}
example3 .node_active .tooltip {opacity: 1;}

/* Each node tooltip */

example3 .tooltip{

       font-size: 12px;
       color: #fff;}

/* The time display inside a tooltip */

example3 .tooltiptime{

font-size:8pt; font-weight:bold; } /* The pause/play button */

example3 .pause, #example3 .play{

width:40px; height:40px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; -webkit-box-shadow:0 0 10px #bbb; -moz-box-shadow:0 0 10px #bbb; box-shadow:0 0 10px #bbb;

       top: 60px !important;
       left: auto !important;
       right: 20px !important;

} /* The pause button */

example3 .pause{

background:#fff url(http://friquemag.net/demos/timeliner/images/pause.gif) center no-repeat;

       background-size: 60% 60%;

} /* The play button */

example3 .play{

background:#fff url(http://friquemag.net/demos/timeliner/images/play.gif) center no-repeat;

       background-size: 60% 60%;

} /* The previous/next buttons */

example3 .previous, #example3 .next{

} /* The previous button */

example3 .previous,
example3 .next{

       width:31px;

height:37px; display:block; position:absolute; top: 50%; margin-top: -18px; left:0; background:url('https://static.igem.org/mediawiki/2013/7/7f/Leftright.png') no-repeat; opacity:.5; -webkit-transition:opacity .1s linear;

 	   -moz-transition:opacity .1s linear;

transition:opacity .1s linear; z-index:2 } /* The next button */

example3 .next{

   left:auto !important;
   right:0 !important;
   background-position:-31px 0

}

example3 li:nth-child(5){

     background: url('https://static.igem.org/mediawiki/2013/8/85/Slidenigem.png') center center no-repeat;
     background-size: 100% auto;

}

.timeline .node1 .tooltip:before{

               content:"";

background:url('https://static.igem.org/mediawiki/2013/c/c4/Slidersprite.png'); position:absolute;

               background-position: 0 0;

top: -30px;

               left: 50%;

margin-left: -15px; width:30px; height:30px; display:inline-block;}

.timeline .node2 .tooltip:before{

               content:"";

background:url('https://static.igem.org/mediawiki/2013/c/c4/Slidersprite.png'); position:absolute;

               background-position: -30px 0;

top: -30px;

               left: 50%;

margin-left: -15px; width:30px; height:30px; display:inline-block;}

.timeline .node3 .tooltip:before{

               content:"";

background:url('https://static.igem.org/mediawiki/2013/c/c4/Slidersprite.png'); position:absolute;

               background-position: -60px 0;

top: -30px; left: 50%; margin-left: -15px; width:30px; height:30px; display:inline-block;}

.timeline .node4 .tooltip:before{

               content:"";

background:url('https://static.igem.org/mediawiki/2013/c/c4/Slidersprite.png'); position:absolute;

               background-position: -90px 0;

top: -30px; left: 50%; margin-left: -15px; width:30px; height:30px; display:inline-block;}

.timeline .node5 .tooltip:before{

               content:"";

background:url('https://static.igem.org/mediawiki/2013/c/c4/Slidersprite.png'); position:absolute;

               background-position: -120px 0;

top: -30px; left: 50%; margin-left: -15px; width:30px; height:30px; display:inline-block;}

.timeline .node6 .tooltip:before{

               content:"";

background:url('https://static.igem.org/mediawiki/2013/c/c4/Slidersprite.png'); position:absolute;

               background-position: -150px 0;

top: -30px; left: 50%; margin-left: -15px; width:30px; height:30px; display:inline-block;}

example3 li:nth-child(6){

     background: url('https://static.igem.org/mediawiki/2013/1/1a/Slidesecmet.jpg') center center no-repeat;
     background-size: 100% auto;

}

example3 li:nth-child(7){

     background: url('https://static.igem.org/mediawiki/2013/5/55/Slidetoolbox.jpg') center center no-repeat;
     background-size: 100% auto;

}

example3 li:nth-child(8){

     background: url('https://static.igem.org/mediawiki/2013/4/4d/Slidehosteng.png') center center no-repeat;
     background-size: 100% auto;

}

example3 li:nth-child(5) span,
example3 li:nth-child(6) span,
example3 li:nth-child(7) span,
example3 li:nth-child(8) span,
example3 li:nth-child(9) span,
example3 li:nth-child(10) span{

   display: block;
   width: 100%;
   position: relative;
   top: -20px;
   text-align: center;    
   font-size: 24px;
   line-height: 40px;
   margin-left: -20px;
   padding: 0 20px;
   color: #fff;
   background: rgba(255,255,255, .3);
   text-shadow: 1px 1px #000;

}

example3 li:nth-child(5) div,
example3 li:nth-child(6) div,
example3 li:nth-child(7) div,
example3 li:nth-child(8) div,
example3 li:nth-child(9) div,
example3 li:nth-child(10) div {

       display: block;
       width: 100%;
       position: absolute;
       bottom: 80px;
       left: 0;
       text-align: center;

}

example3 li:nth-child(5) a,
example3 li:nth-child(6) a,
example3 li:nth-child(7) a,
example3 li:nth-child(8) a,
example3 li:nth-child(9) a,
example3 li:nth-child(10) a {

   bottom: -30px;
   font-size: 24px;
   line-height: 30px;
   padding: 0 10px;
   color: #fff;
   border-radius: 4px;
   border: 1px solid #fff;
   background: rgba(255,255,255, .3);
   text-shadow: 1px 1px #000;
   opacity: .6;

}

example3 li:nth-child(5) a:hover,
example3 li:nth-child(6) a:hover,
example3 li:nth-child(7) a:hover,
example3 li:nth-child(8) a:hover,
example3 li:nth-child(9) a:hover,
example3 li:nth-child(10) a:hover {

   opacity: 1;

}

example3 li:nth-child(9){

     background: url('https://static.igem.org/mediawiki/2013/0/06/Slidehuman.png') center center no-repeat;
     background-size: 100% auto;

}

example3 li:nth-child(10){

     background: url('https://static.igem.org/mediawiki/2013/a/a8/Grouppic.jpg') center top no-repeat;
     background-size: 100% auto;

}

/* Project Tour & like/follow

*/

.projecttour {

   display: block;
   width: 100%;
   position: relative;
   background: #EEE;
   box-shadow: 0 0 5px #000;
   text-align: center;
   z-index: 2;

}

.projecttour .fb {

   width: 200px;
   text-align: right;

}

.projecttour .twt {

   width: 200px;
   text-align: left;

}

.projecttour .fb-like {

   top:4px;
   margin-right: 50px;

}

.projecttour .twt > iframe {

   position: relative;
   top:4px;
   margin-left: 50px;

}

.projecttour .tour {

   display: block;
   width: 80px;
   height: 80px;
   position: absolute;
   margin-left: -40px;
   margin-top: -28px;
   border-radius: 40px;
   border: 4px solid #fff;
   color: #fff;
   text-shadow: 1px 1px #000;
   box-shadow: 0 0 5px #000, inset 0 0 2px #333;
   -moz-box-sizing: border-box;
             box-sizing: border-box;
   overflow: hidden;

background: #fca776; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmY2E3NzYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYmYwMDIzIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-radial-gradient(center, ellipse cover, #fca776 0%, #bf0023 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#fca776), color-stop(100%,#bf0023)); background: -webkit-radial-gradient(center, ellipse cover, #fca776 0%,#bf0023 100%); background: -o-radial-gradient(center, ellipse cover, #fca776 0%,#bf0023 100%); background: -ms-radial-gradient(center, ellipse cover, #fca776 0%,#bf0023 100%); background: radial-gradient(ellipse at center, #fca776 0%,#bf0023 100%); }

.projecttour .tour:hover { color: #fff; text-shadow: 1px 1px #000; background: #6ad86a; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM2YWQ4NmEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxNyUiIHN0b3AtY29sb3I9IiM2OWM2NjkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIzMyUiIHN0b3AtY29sb3I9IiM1MmIxNTIiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2NyUiIHN0b3AtY29sb3I9IiMwMDhhMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI4MyUiIHN0b3AtY29sb3I9IiMwMDU3MDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAyNDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-radial-gradient(center, ellipse cover, #6ad86a 0%, #69c669 17%, #52b152 33%, #008a00 67%, #005700 83%, #002400 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#6ad86a), color-stop(17%,#69c669), color-stop(33%,#52b152), color-stop(67%,#008a00), color-stop(83%,#005700), color-stop(100%,#002400)); background: -webkit-radial-gradient(center, ellipse cover, #6ad86a 0%,#69c669 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%); background: -o-radial-gradient(center, ellipse cover, #6ad86a 0%,#69c669 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%); background: -ms-radial-gradient(center, ellipse cover, #6ad86a 0%,#69c669 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%); background: radial-gradient(ellipse at center, #6ad86a 0%,#69c669 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%); }

.projecttour .tour span.startt {

   display: block;
   width: 72px;
   position: relative;
   top: 18px;
   left: 0;
   text-align: center;

} .projecttour .tour span.tourr {

  display: block;
   width: 72px;
   position: relative;
   top: 8px;
   left: 0;
   text-align: center;

}

.projecttour .fb, .projecttour .tour, .projecttour .twt {display: inline-block;}

.tournavleft {

   position: fixed;
   left: 20px;
   bottom: 20px;

}

.tournavright {

   position: fixed;
   right: 20px;
   bottom: 20px;

}

.tournavleft.mar, .tournavright.mar {

   bottom: 60px;

}

.tourprev, .tournext {

   display: block;
   width: 100px;
   height: 40px;
   position: relative;
   z-index: 3;
   border-radius: 8px;
   border: 2px solid #fff;
   box-shadow: 0 0 5px #000, inset 0 0 2px #333;
   -moz-box-sizing: border-box;
             box-sizing: border-box;
   overflow: hidden;

background: #fdfdfd; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZGZkZmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiNlZWVlZWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjY2NjY2NjIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-radial-gradient(center, ellipse cover, #fdfdfd 0%, #eeeeee 40%, #cccccc 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#fdfdfd), color-stop(40%,#eeeeee), color-stop(100%,#cccccc)); background: -webkit-radial-gradient(center, ellipse cover, #fdfdfd 0%,#eeeeee 40%,#cccccc 100%); background: -o-radial-gradient(center, ellipse cover, #fdfdfd 0%,#eeeeee 40%,#cccccc 100%); background: -ms-radial-gradient(center, ellipse cover, #fdfdfd 0%,#eeeeee 40%,#cccccc 100%); background: radial-gradient(ellipse at center, #fdfdfd 0%,#eeeeee 40%,#cccccc 100%); }

.tourprev span.prev, .tournext span.prev {

   display: block;
   width: 96px;
   position: relative;
   top: 0px;
   left: 0;
   font-size: 12px;
   text-align: center;

} .tourprev span.tourr, .tournext span.tourr {

  display: block;
   width: 96px;
   position: relative;
   top: -10px;
   font-size: 12px;
   text-align: center;

}

/* Main content area

*/

wrapper {

       position: relative;
       width: 89.06244%;
       padding: 0 5.46878%;
       font-family: 'Source Sans Pro';

}

wrapper p {

       font-family: 'Source Sans Pro';
       font-size: 14px;
       padding-bottom:1em;

}

wrapper .intro {

       margin-top: -4px;
       font-size: 14px;
       text-align: justify;
       font-family: 'Source Sans Pro';

}

wrapper .blok {

   position: relative;
   display:block;
   float: left;
   width: 30.701754%;
   margin-bottom: 40px;
   margin-right: 3.947368%;
   background: #FFFFFF;
   border-radius: 4px;
   box-shadow: 0px -1px 1px 0px rgb(233, 233, 233), 1px 0px 1px 0px rgb(221, 221, 221), 2px 0px 1px 0px rgb(247, 247, 247), 0px 1px 1px 0px rgb(201, 201, 201), 0px 2px 1px 0px rgb(229, 229, 229), 0px -1px 1px 0px rgb(242, 242, 242) inset, -1px 0px 1px 0px rgb(221, 221, 221), -2px 0px 1px 0px rgb(247, 247, 247);
   -webkit-transition: all .3s ease-in-out;
      -moz-transition: all .3s ease-in-out;
                transition: all .3s ease-in-out;}

wrapper a.blok:hover {

   box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .2);

}

wrapper a.blok p {

   padding: 0 16px 16px;
   -moz-box-sizing: border-box;

box-sizing: border-box; }

wrapper .blok:nth-child(3n+3){margin-right: 0;}

wrapper .blok .medalcontent {padding: 0 15px 0 75px;}
wrapper .blok .medalcontent:last-child(){padding-bottom: 15px;}

wrapper .blok h2 {

   width: 100%;
   text-align: center;
   font-family: 'Cabin';
   font-weight: bold;
   letter-spacing: 1px;
   font-size: 20px;
   line-height: 30px;
   margin: 0 !important;}

wrapper .blok .medalcontent p {

   position: relative;
   font-family: 'Source Sans Pro';
   font-size: 14px;}

wrapper .blok .medalcontent p.yes {}
wrapper .blok .medalcontent p.yes:before{

               content:"";

background:url('https://static.igem.org/mediawiki/2013/7/77/Yes.png'); position:absolute;

               background-position: 0 0;

top: 0px; left: -60px; width:50px; height:21px; display:inline-block;}

wrapper .blok .medalcontent p.no {}
wrapper .blok .medalcontent p.no:before{

               content:"";

background:url('https://static.igem.org/mediawiki/2013/0/04/No.png'); position:absolute;

               background-position: 0 0;

top: 0px; left: -60px; width:50px; height:21px; display:inline-block;}

.half {

   display: block;
   position:relative;
   float: left;
   width: 50%;
   margin: 40px 0 30px;
   -moz-box-sizing: border-box;
             box-sizing: border-box;

}

.half.left {padding-right: 20px;} .half.right {padding-left: 20px;}

.half.left > h2 #Introduction { display:block; width: 144px; margin: -28px auto 0px; padding: 0px 10px; color: rgb(136, 136, 136); font-size: 18px; line-height: 20px; font-family: 'Cabin', Helvetica; text-transform: uppercase; background: #f1f1f1; }

.half.right > h2 #Project_navigation { display:block; width: 199px; margin: -28px auto 0px; padding: 0px 10px; color: rgb(136, 136, 136); font-size: 18px; line-height: 20px; font-family: 'Cabin', Helvetica; text-transform: uppercase; background: #f1f1f1; }

.half.left > h2 #Achievements { display:block; width: 142px; margin: -28px auto 0px; padding: 0px 10px; color: rgb(136, 136, 136); font-size: 18px; line-height: 20px; font-family: 'Cabin', Helvetica; text-transform: uppercase; background: #f1f1f1; }

.half.right > h2 #Scientific_Interactions{ display:block; width: 241px; margin: -28px auto 0px; padding: 0px 10px; color: rgb(136, 136, 136); font-size: 18px; line-height: 20px; font-family: 'Cabin', Helvetica; text-transform: uppercase; background: #f1f1f1; }

.half > h2 .editsection { margin-top: -4px; background: #f1f1f1;}

overlay {

position: fixed; display: block; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.4); z-index: 10000; opacity: 0; cursor:url('images/close-icon.png'),url('images/close-icon.cur'),pointer; }

overlay > .video1 {

position: relative; width: 50%; height: 50%; margin: auto; }

/* Project cell nav

*/

.outline {

   display: block;
   position: relative;
   width: 100%;
   margin-top: -4px;
   box-shadow: 0px -1px 1px 0px rgb(233, 233, 233), 1px 0px 1px 0px rgb(221, 221, 221), 2px 0px 1px 0px rgb(247, 247, 247), 0px 1px 1px 0px rgb(201, 201, 201), 0px 2px 1px 0px rgb(229, 229, 229), 0px -1px 1px 0px rgb(242, 242, 242) inset, -1px 0px 1px 0px rgb(221, 221, 221), -2px 0px 1px 0px rgb(247, 247, 247);}

.outline .cell {

   display: block;
   width: 320px;
   height: 320px;
   position: absolute;
   left: 10px;
   top: 10px;
   z-index: 1;
   background: url('https://static.igem.org/mediawiki/2013/a/ad/Cellnav.png') left top no-repeat;}

.outline .cell span {

   display:block;
   height: 8px;
   position: relative;
   float: right;
   background: url('https://static.igem.org/mediawiki/2013/b/b5/Celltextlinebg.png') top left repeat-x;
   -webkit-transition: opacity .4s ease-in-out;
                   -moz-transition: opacity .4s ease-in-out;
                             transition: opacity .4s ease-in-out;
   opacity: 0;

}

.outline .cell span a {

   position: absolute;

}

.outline .cell span:nth-child(1){

   width: 160px;
   top:110px;

}

.outline .cell span:nth-child(1) a {

   left: -94px;
   top: -38px;

}

.outline .cell span:nth-child(2){

   clear:right;
   width: 60px;
   top:160px;

}

.outline .cell span:nth-child(2) a{

   left: -146px;
   top: -31px;

}

.outline .cell span:nth-child(3){

   clear:right;
   width: 150px;
   top:220px;

}

.outline .cell span:nth-child(3) a{

   left: -67px;
   top: -31px;

}

.outline .cell span:nth-child(4){

   clear:right;
   width: 120px;
   top:110px;
   z-index:1;

}

.outline .cell span:nth-child(4) a{

   left: -60px;
   top: -26px;

}

.outline .cell span:nth-child(5){

   clear:right;
   width: 15px;
   top:175px;
   z-index:0;

}

.outline .cell span:nth-child(5) a{

   left: -300px;
   top: -165px;

}

.outline .cell span:nth-child(6){

   clear:right;
   width: 120px;
   top:225px;
   z-index:1;

}

.outline .cell span:nth-child(6) a{

   left: -129px;
   top: -59px;

}

.outline .cell span:nth-child(7){

   clear:right;
   width: 0px;
   top:160px;
   z-index:1;

}

.outline .cell span:nth-child(7) a{

   left: -320px;
   top: -160px;

}

.outline .text {

   display: block;
   width: 100%;
   height: 340px;
   padding-top: 10px;
   padding-left: 330px;
   padding-right: 20px;
   background: #fff;
   border-radius: 4px;
   -moz-box-sizing: border-box;
             box-sizing: border-box;}

.outline .text span.line {

   display: block;
   width: 100%;
   height: 8px;
   position: relative;
   background: url('https://static.igem.org/mediawiki/2013/b/b5/Celltextlinebg.png') top left repeat-x;
   -webkit-transition: opacity .4s ease-in-out;
      -moz-transition: opacity .4s ease-in-out;
                transition: opacity .4s ease-in-out;
   opacity: 0;

}

.outline .text span.line a {

   position: absolute;
   font-size: 14px;
   line-height: 16px;
   text-transform: uppercase;
   right: 0;
   top: -12px;

}

.outline .text span:nth-child(1) {top:110px;} .outline .text span:nth-child(2) {top:160px;} .outline .text span:nth-child(3) {top:220px;} .outline .text span:nth-child(4) {top:110px;} .outline .text span:nth-child(5) {top:175px;} .outline .text span:nth-child(6) {top:225px;} .outline .text span:nth-child(7) {top:160px;}

.outline .text span:nth-child(4), .outline .text span:nth-child(5), .outline .text span:nth-child(6), .outline .text span:nth-child(7){

   opacity: 0;
   z-index: -10;
   height: 0;

}

.outline .text span:nth-child(4) a, .outline .text span:nth-child(5) a, .outline .text span:nth-child(6) a, .outline .text span:nth-child(7) a{ display:none;}

.outline .cell.one span:nth-child(1), .outline .cell.one span:nth-child(2), .outline .cell.one span:nth-child(3), .outline .text.one span:nth-child(1), .outline .text.one span:nth-child(2), .outline .text.one span:nth-child(3){

   display:block;opacity: 1; z-index: 1;height: 8px;

}

.outline .cell.one span:nth-child(1) a, .outline .cell.one span:nth-child(2) a, .outline .cell.one span:nth-child(3) a, .outline .text.one span:nth-child(1) a, .outline .text.one span:nth-child(2) a, .outline .text.one span:nth-child(3) a {display:block;}

.outline .cell.one span:nth-child(4), .outline .cell.one span:nth-child(5), .outline .cell.one span:nth-child(6), .outline .cell.one span:nth-child(7), .outline .cell.one span:nth-child(8) .outline .text.one span:nth-child(4), .outline .text.one span:nth-child(5), .outline .text.one span:nth-child(6), .outline .text.one span:nth-child(7), .outline .text.one span:nth-child(8) {

    opacity: 0; z-index:-10;height: 0px;

}

.outline .cell.one span:nth-child(4) a, .outline .cell.one span:nth-child(5) a, .outline .cell.one span:nth-child(6) a, .outline .cell.one span:nth-child(7) a, .outline .cell.one span:nth-child(8) a {display:none;}

.outline .text.one span:nth-child(4) a, .outline .text.one span:nth-child(5) a, .outline .text.one span:nth-child(6) a, .outline .text.one span:nth-child(7) a, .outline .text.one span:nth-child(8) a {

    display:none;}

.outline .cell.two span:nth-child(4), .outline .cell.two span:nth-child(5), .outline .cell.two span:nth-child(6), .outline .text.two span:nth-child(4), .outline .text.two span:nth-child(5), .outline .text.two span:nth-child(6){

   display:block; opacity: 1; z-index: 1;height: 8px;

}

.outline .cell.two span:nth-child(5){z-index:0;height: 8px;} .outline .cell.two span:nth-child(4) a, .outline .cell.two span:nth-child(5) a, .outline .cell.two span:nth-child(6) a, .outline .text.two span:nth-child(4) a, .outline .text.two span:nth-child(5) a, .outline .text.two span:nth-child(6) a { display:block;}

.outline .cell.two span:nth-child(1), .outline .cell.two span:nth-child(2), .outline .cell.two span:nth-child(3), .outline .cell.two span:nth-child(7), .outline .cell.two span:nth-child(8), .outline .text.two span:nth-child(1), .outline .text.two span:nth-child(2), .outline .text.two span:nth-child(3), .outline .text.two span:nth-child(7), .outline .text.two span:nth-child(8) {

    opacity: 0; z-index: -10;height: 0px;

}

.outline .cell.two span:nth-child(1) a, .outline .cell.two span:nth-child(2) a, .outline .cell.two span:nth-child(3) a, .outline .cell.two span:nth-child(7) a, .outline .cell.two span:nth-child(8) a, .outline .text.two span:nth-child(1) a, .outline .text.two span:nth-child(2) a, .outline .text.two span:nth-child(3) a, .outline .text.two span:nth-child(7) a, .outline .text.two span:nth-child(8) a{display:none;}

.outline .cell.three span:nth-child(7), .outline .text.three span:nth-child(7){

   display:block; opacity: 1; z-index: 1;height: 8px;

}

.outline .cell.three span:nth-child(7) a, .outline .text.three span:nth-child(7) a{display:block;}

.outline .cell.three span:nth-child(1) a, .outline .cell.three span:nth-child(2) a, .outline .cell.three span:nth-child(3) a, .outline .cell.three span:nth-child(4) a, .outline .cell.three span:nth-child(5) a, .outline .cell.three span:nth-child(6) a{

    display:none;}

.outline .cell.three span:nth-child(1), .outline .cell.three span:nth-child(2), .outline .cell.three span:nth-child(3), .outline .cell.three span:nth-child(4), .outline .cell.three span:nth-child(5), .outline .cell.three span:nth-child(6), .outline .text.three span:nth-child(1), .outline .text.three span:nth-child(2), .outline .text.three span:nth-child(3), .outline .text.three span:nth-child(4), .outline .text.three span:nth-child(5), .outline .text.three span:nth-child(6) {

    opacity: 0; z-index: -10;height: 0px;

}

.scale {

   display: block;
   margin-bottom: 30px;

}

.scale a {

   display:block;
   width: 22%;
   margin-top: 15px;
   margin-right: 4%;
   height: 75px;
   -moz-box-sizing: border-box;
              box-sizing: border-box;
   position: relative;
   float: left;
   text-align: center;
   padding-top: 40px;
   border-radius: 4px;
   background: #fff;
   font-size: 12px;
   line-height: 14px;
   text-transform: uppercase;
   box-shadow: 0px -1px 1px 0px rgb(233, 233, 233), 1px 0px 1px 0px rgb(221, 221, 221), 2px 0px 1px 0px rgb(247, 247, 247), 0px 1px 1px 0px rgb(201, 201, 201), 0px 2px 1px 0px rgb(229, 229, 229), 0px -1px 1px 0px rgb(242, 242, 242) inset, -1px 0px 1px 0px rgb(221, 221, 221), -2px 0px 1px 0px rgb(247, 247, 247);

}

.scale a.on {

   margin-top: 0;
   padding-top: 55px;
   height: 90px;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   color: #0d9c64;

}

one:before {

   content: "";
   display:block;
   width: 40px;
   height: 40px;
   position: absolute;
   left: 50%;
   margin-left: -20px;
   top: 0;
   background: url('https://static.igem.org/mediawiki/2013/6/6f/Secmetbtn.png') left top no-repeat;}

one:hover:before {

   background: url('https://static.igem.org/mediawiki/2013/6/6f/Secmetbtn.png') right top no-repeat;}

two:before {

   content: "";
   display:block;
   width: 40px;
   height: 40px;
   position: absolute;
   left: 50%;
   margin-left: -20px;
   top: 0;
   background: url('https://static.igem.org/mediawiki/2013/a/aa/Toolboxbtn.png') left top no-repeat;}

two:hover:before {

   background: url('https://static.igem.org/mediawiki/2013/a/aa/Toolboxbtn.png') right top no-repeat;}

three:before {

   content: "";
   display:block;
   width: 40px;
   height: 40px;
   position: absolute;
   left: 50%;
   margin-left: -20px;
   top: 0;
   background: url('https://static.igem.org/mediawiki/2013/6/6c/Hostengbtn.png') left top no-repeat;}

three:hover:before {

   background: url('https://static.igem.org/mediawiki/2013/6/6c/Hostengbtn.png') right top no-repeat;}

videolink:before {

   content: "";
   display:block;
   width: 40px;
   height: 40px;
   position: absolute;
   left: 50%;
   margin-left: -20px;
   top: 0;
   background: url('https://static.igem.org/mediawiki/2013/d/d1/Videobtn.png') left top no-repeat;}

videolink:hover:before {

   background: url('https://static.igem.org/mediawiki/2013/d/d1/Videobtn.png') right top no-repeat;}

.scale a:nth-child(4){margin-right: 0;}

.scale #one.on:before, .scale #two.on:before, .scale #three.on:before {background-position: right top; top: 15px;} .scale a.on:after {

   content: "";
   display:block;
   width: 100%;
   height: 5px;
   position: absolute;
   left: 0;
   top: -3px;
   background: #fff;

}

/* Achievements homepage

*/

.half .achievements {

   position: relative;
   margin: -4px 0 30px;}

.half .achieve {

   display: block;
   float: left;
   width: 30.701754%;
   margin-right: 3.947368%;
   text-align: center;
   font-size: 12px;
   line-height: 14px;
   text-transform: uppercase;
   border-radius: 4px;

}

.half .achieve:nth-child(3) {margin-right:0;}

.half .achieve > a {

   display: block;
   padding-bottom: 10px;
   margin-bottom: 15px;
   background: #fff;
   box-shadow: 0px -1px 1px 0px rgb(233, 233, 233), 1px 0px 1px 0px rgb(221, 221, 221), 2px 0px 1px 0px rgb(247, 247, 247), 0px 1px 1px 0px rgb(201, 201, 201), 0px 2px 1px 0px rgb(229, 229, 229), 0px -1px 1px 0px rgb(242, 242, 242) inset, -1px 0px 1px 0px rgb(221, 221, 221), -2px 0px 1px 0px rgb(247, 247, 247);}

.half .achieve .moreinfo {

   display: none;
   position: absolute;
   left: 0;
   width: 100%;
   padding: 20px 20px 4px;
   text-align: left;
   background: #fff;
   box-shadow: 0px -1px 1px 0px rgb(233, 233, 233), 1px 0px 1px 0px rgb(221, 221, 221), 2px 0px 1px 0px rgb(247, 247, 247), 0px 1px 1px 0px rgb(201, 201, 201), 0px 2px 1px 0px rgb(229, 229, 229), 0px -1px 1px 0px rgb(242, 242, 242) inset, -1px 0px 1px 0px rgb(221, 221, 221), -2px 0px 1px 0px rgb(247, 247, 247);
   -moz-box-sizing: border-box;
             box-sizing: border-box;
   z-index: 2;

}

.half .achieve .moreinfo p.check {

   display: block;
   width: 100%;
   padding-left: 30px;
   position: relative;
   text-transform: none;
   -moz-box-sizing: border-box;
             box-sizing: border-box;

}

.half .achieve .moreinfo p.check:before {

   content: "";
   display: inline-block;
   width: 20px;
   height: 20px;
   position: absolute;
   left: 0;
   top: 0;
   background: url('https://static.igem.org/mediawiki/2013/4/43/Checkmed.png') left top no-repeat;

}

.half .achieve:hover {border-bottom-left-radius: 0; border-bottom-right-radius: 0px;} .half .achieve:hover > a {

   padding-bottom: 25px;
   margin-bottom: 0;

}

.half .achieve:nth-child(1):hover:after{

   content: "";
   display: block;
   width: 30.701754%;
   height: 5px;
   position: absolute;
   left: 0;
   bottom: -3px;
   background: #fff;
   z-index: 3;

}

.half .achieve:nth-child(2):hover:after{

   content: "";
   display: block;
   width: 30.701754%;
   height: 5px;
   position: absolute;
   left: 34.649122%;
   bottom: -3px;
   background: #fff;
   z-index: 3;

}

.half .achieve:nth-child(3):hover:after{

   content: "";
   display: block;
   width: 30.701754%;
   height: 5px;
   position: absolute;
   left: 69.298244%;
   bottom: -3px;
   background: #fff;
   z-index: 3;

}

.half .achieve:hover .moreinfo, .half .achieve .moreinfo:hover {

   display: block;

}

/* Human practices homepage

*/

.vitruvian {

   position: relative;
   text-align: center;
   font-size: 12px;
   line-height: 14px;
   text-transform: uppercase;}

.vitruvian a img {

   padding-bottom: 5px;}

.vitruvian a:nth-child(1){

   display: block;
   width: 80%;
   margin: 0 10%;}

.vitruvian a:nth-child(1):hover img {

   opacity: .6;

}

.vitruvian a:nth-child(2){

   display: block;
   width: 20%;
   position: absolute;
   top: -20px;
   left: 40%;

}

.vitruvian a:nth-child(3){

   display: block;
   width: 20%;
   position: absolute;
   top: 20%;
   left: 0;

}

.vitruvian a:nth-child(4){

   display: block;
   width: 20%;
   position: absolute;
   top: 20%;
   right: 0;

}

.vitruvian a:nth-child(5){

   display: block;
   width: 20%;
   position: absolute;
   bottom: 0;
   left: 10%;

}

.vitruvian a:nth-child(6){

   display: block;
   width: 20%;
   position: absolute;
   bottom: 0;
   right: 10%;

}

/* Sponsors

*/

sponsors {

       width: 89.06244%;
       padding: 20px 5.46878%;
       box-shadow: 0px -1px 1px 0px rgb(233, 233, 233), 1px 0px 1px 0px rgb(221, 221, 221), 2px 0px 1px 0px rgb(247, 247, 247), 0px 1px 1px 0px rgb(201, 201, 201), 0px 2px 1px 0px rgb(229, 229, 229), 0px -1px 1px 0px rgb(242, 242, 242) inset, -1px 0px 1px 0px rgb(221, 221, 221), -2px 0px 1px 0px rgb(247, 247, 247);
       background: #f1f1f1;
       text-align: center;

}

sponsors h2 {

       font-size: 20px;
       font-weight: light;
       letter-spacing: 1px;
       border-bottom: none;
       margin: 0;
       padding: 0 0 20px;
       font-family: 'Cabin', sans-serif;}

       #sponsors .sponsor {
               position:relative;
               border: 1px solid #d5d5d5;
               border-radius: 3px;
               box-shadow: inset 0 1px 0 0 #fff;
               margin: 0 10px 20px;
               padding: 0 !important;
               display: inline-block;
               width: 160px;
               height: 160px;
               background: #f2f2f2 !important;
               background-image: none !important;
               -webkit-transition: all .3s ease-in-out;
                   -moz-transition: all .3s ease-in-out;
                             transition: all .3s ease-in-out;}

       #sponsors .sponsor:hover {
               background: #fafafa;
               box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .2);
               border-color: #fafafa;
       }

/* Footer

*/

footer-box {

       position: relative;
       margin:0;
       width: 89.06244%;
       height: 48px;
       padding: 0 5.46878%;
       background: #f1f1f1 url('https://static.igem.org/mediawiki/2013/9/92/Footerline.png') repeat-x center top;
       border: none;
       z-index: 2;}

   #footer-box #footer {
           color: #333;
           font-size: 10px;
           width: 100%;
   }

       #footer #f-list li {
               margin: 0 10px;
       }

       #footer #f-list li a {
               line-height: 48px;
       }

f-poweredbyico {position:relative;top: 9px;}
f-copyrightico {position:relative;top: 9px;}

/* Project pages

*/

/* Navigation

*/

tabs {

   display: block;
   width: 89.06244%;
   height: 40px;
   position: absolute;
   left: 5.46878%;
   top: -40px;

}

tabs ul li {

   display: block;
   width: 19%;
   height: 40px;
   float: left;
   margin-right: 1.25%;
   background: #fff;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
   overflow: hidden;
   border: 1px solid #ccc;
   border-bottom-color: #0d9c64;
   -moz-box-sizing: border-box;
             box-sizing: border-box;

}

tabs ul li#li_tab1 a {

   background: url('https://static.igem.org/mediawiki/2013/b/ba/Aspergillusheader-icon.png') 10px 8px no-repeat;
   background-size: 20px auto;}

tabs ul li#li_tab2 a {

   background: url('https://static.igem.org/mediawiki/2013/6/6d/Secmetheader-icon.png') 7px 9px no-repeat;
   background-size: 24px auto;}

tabs ul li#li_tab3 a {

   background: url('https://static.igem.org/mediawiki/2013/2/29/Toolbox-icon.png') -10px 6px no-repeat;
   background-size: auto 28px;}

tabs ul li#li_tab4 a {

   background: url('https://static.igem.org/mediawiki/2013/6/63/Host-icon.png') -10px 6px no-repeat;
   background-size: auto 28px;}

tabs ul li#li_tab5 a {

   background: url('https://static.igem.org/mediawiki/2013/8/8e/Applications-icon.png') -10px 6px no-repeat;
   background-size: auto 28px;}

tabs ul li#li_tab5 {margin-right: 0;}

tabs ul li a {

   display: block;
   width: 100%;
   padding-left: 35px;
   line-height: 40px;
   color: #888;
   cursor:pointer;
   -moz-box-sizing: border-box;
             box-sizing: border-box;

}

tabs ul li a:hover {color: #0d9c64;}

tabs ul li.active {background: #f1f1f1; border-bottom: none;border-color: #0d9c64;}
tabs ul li.active a {color: #333;cursor: default;}

/* Project header

*/

.projectheader {

   display: block;
   position: relative;
   border-bottom: 1px solid #0d9c64;

}

.projectheader > img {display:block;}

.projectheader .content {

   display: block;
   width: 44.53122%;
   position: absolute;
   top: 40px;
   left: 5.46878%;
   padding-left: 80px;
   -moz-box-sizing: border-box;
             box-sizing: border-box;

}

.projectheader .content h1 {

   color: rgb(19,162,102);
   font-family: 'Cabin';
   margin: 0 0 20px !important;
   padding: 0;
   border-bottom: none;
   text-shadow: 0 1px 1px #000;}

.projectheader .content h2 {

   font-family: 'Source Sans Pro';
   font-size: 20px;
   border-bottom: none;}

/* Why aspergillus nigem?

*/

.projectheader .content.aspergillus {

   background: url('https://static.igem.org/mediawiki/2013/b/ba/Aspergillusheader-icon.png') top left no-repeat;

}

intro_content_area #tab2,
intro_content_area #tab3,
intro_content_area #tab4,
intro_content_area #tab5 {display:none;}

/* Secondary metabolites

*/

.projectheader .content.secmet {

   background: url('https://static.igem.org/mediawiki/2013/6/6d/Secmetheader-icon.png') top left no-repeat;

}

secmet_content_area #tab1,
secmet_content_area #tab3,
secmet_content_area #tab4,
secmet_content_area #tab5 {display:none;}

/* Toolbox

*/

.projectheader .content.toolbox {

   background: url('https://static.igem.org/mediawiki/2013/1/1f/Toolboxheader-icon.png') top left no-repeat;

}

toolbox_content_area #tab1,
toolbox_content_area #tab2,
toolbox_content_area #tab4,
toolbox_content_area #tab5 {display:none;}

/* Host engineering

*/

.projectheader .content.hostengineering {

   background: url('https://static.igem.org/mediawiki/2013/5/5c/Hostengineeringheader-icon.png') top left no-repeat;

}

hostengineering_content_area #tab1,
hostengineering_content_area #tab2,
hostengineering_content_area #tab3,
hostengineering_content_area #tab5 {display:none;}

/* Summary

*/

.projectheader .content.summary {

   background: url('https://static.igem.org/mediawiki/2013/b/b5/Summaryheader-icon.png') top left no-repeat;

}

summary_content_area #tab1,
summary_content_area #tab2,
summary_content_area #tab3,
summary_content_area #tab4 {display:none;}

/* Biobricks

*/

.bricksheader {

   display: block;
   position: relative;
   border-bottom: 1px solid #0d9c64;

}

.bricksheader > img {display:block;}

.bricksheader .content {

   display: block;
   width: 44.53122%;
   position: absolute;
   top: 40px;
   left: 5.46878%;
   padding-left: 80px;
   background: url('https://static.igem.org/mediawiki/2013/4/4f/Biobrick.png') top left no-repeat;
   -moz-box-sizing: border-box;
             box-sizing: border-box;

}

.bricksheader .content h1 {

   font-family: 'Cabin';
   margin: 0 0 20px !important;
   padding: 0;
   border-bottom: none;}

.bricksheader .content p {

   font-family: 'Source Sans Pro';
   font-size: 14px;
   padding-bottom: 14px;
   text-align: justify;}

bricktabs {

   display: block;
   width: 410px;
   height: 40px;
   position: absolute;
   right: 5.46878%;
   top: -40px;

}

bricktabs ul li {

   display: block;
   width: 200px;
   height: 40px;
   float: left;
   margin-right: 10px;
   background: #fff;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
   overflow: hidden;
   border: 1px solid #ccc;
   border-bottom-color: #0d9c64;
   -moz-box-sizing: border-box;
             box-sizing: border-box;

}

bricktabs ul li#li_tab1 a {

   background: url('https://static.igem.org/mediawiki/2013/d/df/Biobrick-icon.png') 10px 5px no-repeat;}

bricktabs ul li#li_tab2 a {

   background: url('https://static.igem.org/mediawiki/2013/1/1c/Biobrickimproved-icon.png') 10px 5px no-repeat;}

bricktabs ul li#li_tab2 {margin-right: 0;}

bricktabs ul li a {

   display: block;
   width: 100%;
   padding-left: 35px;
   line-height: 40px;
   color: #888;
   cursor:pointer;
   -moz-box-sizing: border-box;
             box-sizing: border-box;

}

bricktabs ul li a:hover {color: #0d9c64;}

bricktabs ul li.active {background: #f1f1f1; border-bottom: none;border-color: #0d9c64;}
bricktabs ul li.active a {color: #333;cursor: default;}

brick_content_area #tab2 {display:none;}

groupparts {

   position: relative;
   margin: 30px auto;
   border-radius: 6px;
   box-shadow: 0px -1px 1px 0px rgb(233, 233, 233), 1px 0px 1px 0px rgb(221, 221, 221), 2px 0px 1px 0px rgb(247, 247, 247), 0px 1px 1px 0px rgb(201, 201, 201), 0px 2px 1px 0px rgb(229, 229, 229), 0px -1px 1px 0px rgb(242, 242, 242) inset, -1px 0px 1px 0px rgb(221, 221, 221), -2px 0px 1px 0px rgb(247, 247, 247);
   overflow: hidden;
   border: 1px solid #fff;

}

table.pgrouptable {

   border: none;
   background: #fff;

}

groupparts table thead tr th {

   border: 1px solid #fff;
   border-top: none;
   border-right-color: #888;
   border-bottom-color: #888;
   background-color: #f0f0f0;
   padding: 3px 5px;

}

groupparts table thead tr th:nth-child(1) {

   border-left: none;
   padding: 3px 5px 3px 6px;

}

groupparts table thead tr th:nth-child(8) {

   border-right: none;
   padding: 3px 6px 3px 5px;

}

groupparts table tbody tr td {

   border: 1px solid #fff;
   border-top: none;
   border-right-color: #f1f1f1;
   border-bottom-color: #f1f1f1;
   background-color: #fff;

}

/* Achievements

*/

achievetabs {

   display: block;
   width: 410px;
   height: 40px;
   position: absolute;
   right: 5.46878%;
   top: -40px;

}

achievetabs ul li {

   display: block;
   width: 200px;
   height: 40px;
   float: left;
   margin-right: 10px;
   background: #fff;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
   overflow: hidden;
   border: 1px solid #ccc;
   border-bottom-color: #0d9c64;
   -moz-box-sizing: border-box;
             box-sizing: border-box;

}

achievetabs ul li:nth-child(1) span,
achievetabs ul li:nth-child(1) a {

   background: url('https://static.igem.org/mediawiki/2013/c/c7/Achievements-icon.png') -10px 6px no-repeat;
   background-size: auto 28px;}

.projectheader .content.achievements {

   background: url('https://static.igem.org/mediawiki/2013/c/c7/Achievements-icon.png') -35px top no-repeat;
   background-size: auto 70px;

} .projectheader .content.achievements h1, .projectheader .content.attributions h1 {text-shadow: 0 1px 2px #fff;}

achievetabs ul li:nth-child(2) span,
achievetabs ul li:nth-child(2) a {

   background: url('https://static.igem.org/mediawiki/2013/8/8c/Attributions-icon.png') -10px 5px no-repeat;
   background-size: auto 28px;}

.projectheader .content.attributions {

   background: url('https://static.igem.org/mediawiki/2013/8/8c/Attributions-icon.png') -35px top no-repeat;
   background-size: auto 65px;

}

achievetabs ul li:nth-child(2) {margin-right: 0;}

achievetabs ul li a {

   display: block;
   width: 100%;
   padding-left: 35px;
   line-height: 40px;
   color: #888;
   cursor:pointer;
   -moz-box-sizing: border-box;
             box-sizing: border-box;

}

achievetabs ul li a:hover {color: #0d9c64;}

achievetabs ul li.active {background: #f1f1f1; border-bottom: none;border-color: #0d9c64;}
achievetabs ul li.active span {display: block; color: #333; line-height: 40px;padding-left:35px; cursor: default;}

table.attributions{ position: relative; width: 600px; margin: 0 auto; font-size: 14px; text-align: left; border-collapse: collapse; border-spacing: 2px; border-color: gray; box-shadow: 0 0 2px #000; }

table.attributions thead tr th { border: 1px solid #fff; border-top: none; border-right-color: #888; border-bottom-color: #888; background-color: #f0f0f0; padding: 3px 5px; text-align: left; }

table.attributions tbody tr td { border: 1px solid #fff; border-top: none; border-right-color: #f1f1f1; border-bottom-color: #f1f1f1; background-color: #fff; padding: 3px; font-size: 12px; line-height: 12px; }

/* Safety

*/

safetytabs {

   display: block;
   width: 100%;
   height: 40px;
   position: relative;
   margin-top: -40px;

}

safetytabs ul li {

   display: block;
   width: 15%;
   height: 40px;
   float: left;
   margin-right: 2%;
   background: #fff;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
   overflow: hidden;
   border: 1px solid #ccc;
   border-bottom-color: #0d9c64;
   -moz-box-sizing: border-box;
             box-sizing: border-box;

}

safetytabs ul li:nth-child(1) span,
safetytabs ul li:nth-child(1) a {

   background: url('https://static.igem.org/mediawiki/2013/3/3b/Safetyintro-icon.png') -10px 6px no-repeat;
   background-size: auto 28px;}

.projectheader .content.safetyintro {

   background: url('https://static.igem.org/mediawiki/2013/3/3b/Safetyintro-icon.png') -35px top no-repeat;
   background-size: auto 70px;

}

safetytabs ul li:nth-child(2) span,
safetytabs ul li:nth-child(2) a {

   background: url('https://static.igem.org/mediawiki/2013/7/76/General-safety-icon.png') -10px 5px no-repeat;
   background-size: auto 28px;}

.projectheader .content.generalsafety {

   background: url('https://static.igem.org/mediawiki/2013/7/76/General-safety-icon.png') -35px top no-repeat;
   background-size: auto 70px;

}

safetytabs ul li:nth-child(3) span,
safetytabs ul li:nth-child(3) a {

   background: url('https://static.igem.org/mediawiki/2013/d/d9/Fungi-safety-icon.png') -10px 4px no-repeat;
   background-size: auto 28px;}

.projectheader .content.fungisafety {

   background: url('https://static.igem.org/mediawiki/2013/d/d9/Fungi-safety-icon.png') -35px -10px no-repeat;
   background-size: auto 70px;

}

safetytabs ul li:nth-child(4) span,
safetytabs ul li:nth-child(4) a {

   background: url('https://static.igem.org/mediawiki/2013/f/f3/Regulations-icon.png') -7px 7px no-repeat;
   background-size: auto 24px;}

.projectheader .content.biosafety {

   background: url('https://static.igem.org/mediawiki/2013/f/f3/Regulations-icon.png') -35px top no-repeat;
   background-size: auto 70px;

}

safetytabs ul li:nth-child(5) span,
safetytabs ul li:nth-child(5) a {

   background: url('https://static.igem.org/mediawiki/2013/1/10/Suggestion-icon.png') -10px 5px no-repeat;
   background-size: auto 28px;}

.projectheader .content.safetyimprovement {

   background: url('https://static.igem.org/mediawiki/2013/1/10/Suggestion-icon.png') -35px top no-repeat;
   background-size: auto 70px;

}

safetytabs ul li:nth-child(6) span,
safetytabs ul li:nth-child(6) a {

   background: url('https://static.igem.org/mediawiki/2013/8/8e/Applications-icon.png') -10px 6px no-repeat;
   background-size: auto 28px;}

.projectheader .content.safetyapplication {

   background: url('https://static.igem.org/mediawiki/2013/8/8e/Applications-icon.png') -35px top no-repeat;
   background-size: auto 70px;

}

safetytabs ul li:nth-child(6) {margin-right: 0;}

safetytabs ul li a {

   display: block;
   width: 100%;
   padding-left: 35px;
   line-height: 40px;
   font-size: 12px;
   color: #888;
   cursor:pointer;
   -moz-box-sizing: border-box;
             box-sizing: border-box;

}

safetytabs ul li a:hover {color: #0d9c64;}

safetytabs ul li.active {background: #f1f1f1; border-bottom: none;border-color: #0d9c64; }
safetytabs ul li.active span {display: block; color: #333; line-height: 40px; font-size: 12px;padding-left:35px; cursor: default;}

/* Human practices

*/

humantabs {

   display: block;
   width: 100%;
   height: 40px;
   position: relative;
   margin-top: -40px;

}

humantabs ul li {

   display: block;
   width: 15%;
   height: 40px;
   float: left;
   margin-right: 2%;
   background: #fff;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
   overflow: hidden;
   border: 1px solid #ccc;
   border-bottom-color: #0d9c64;
   -moz-box-sizing: border-box;
             box-sizing: border-box;

}

humantabs ul li:nth-child(1) span,
humantabs ul li:nth-child(1) a {

   background: url('https://static.igem.org/mediawiki/2013/6/69/Masterclass-icon.png') -10px 6px no-repeat;
   background-size: auto 28px;}

.projectheader .content.masterclass {

   background: url('https://static.igem.org/mediawiki/2013/6/69/Masterclass-icon.png') -35px top no-repeat;
   background-size: auto 70px;

}

humantabs ul li:nth-child(2) span,
humantabs ul li:nth-child(2) a {

   background: url('https://static.igem.org/mediawiki/2013/9/98/Cafe-icon.png') -10px 5px no-repeat;
   background-size: auto 28px;}

.projectheader .content.sciencecafe {

   background: url('https://static.igem.org/mediawiki/2013/9/98/Cafe-icon.png') -35px -10px no-repeat;
   background-size: auto 70px;

}

humantabs ul li:nth-child(3) span,
humantabs ul li:nth-child(3) a {

   background: url('https://static.igem.org/mediawiki/2013/c/c6/Igemnl-icon.png') -10px 4px no-repeat;
   background-size: auto 28px;}

.projectheader .content.igemnl {

   background: url('https://static.igem.org/mediawiki/2013/c/c6/Igemnl-icon.png') -35px -5px no-repeat;
   background-size: auto 70px;

}

humantabs ul li:nth-child(4) span,
humantabs ul li:nth-child(4) a {

   background: url('https://static.igem.org/mediawiki/2013/5/59/Collaborations-icon.png') -7px 7px no-repeat;
   background-size: auto 24px;}

.projectheader .content.collaborations {

   background: url('https://static.igem.org/mediawiki/2013/5/59/Collaborations-icon.png') -30px -7px no-repeat;
   background-size: auto 65px;

}

humantabs ul li:nth-child(5) span,
humantabs ul li:nth-child(5) a {

   background: url('https://static.igem.org/mediawiki/2013/c/c8/Conference-icon.png') -10px 5px no-repeat;
   background-size: auto 28px;}

.projectheader .content.conference {

   background: url('https://static.igem.org/mediawiki/2013/c/c8/Conference-icon.png') -35px -8px no-repeat;
   background-size: auto 70px;

}

humantabs ul li:nth-child(6) span,
humantabs ul li:nth-child(6) a {

   background: url('https://static.igem.org/mediawiki/2013/b/b6/Vitruvian-icon.png') -10px 6px no-repeat;
   background-size: auto 28px;}

.projectheader .content.vitruvianman {

   background: url('https://static.igem.org/mediawiki/2013/b/b6/Vitruvian-icon.png') -35px top no-repeat;
   background-size: auto 70px;

}

humantabs ul li:nth-child(6) {margin-right: 0;}

humantabs ul li a {

   display: block;
   width: 100%;
   padding-left: 35px;
   line-height: 40px;
   font-size: 14px;
   color: #888;
   cursor:pointer;
   -moz-box-sizing: border-box;
             box-sizing: border-box;

}

humantabs ul li a:hover {color: #0d9c64;}

humantabs ul li.active {background: #f1f1f1; border-bottom: none;border-color: #0d9c64; }
humantabs ul li.active span {display: block; color: #333; line-height: 40px; font-size: 14px;padding-left:35px; cursor: default;}

/* Team

*/

.teamtop {

   position: relative;

}

.teamtop h1 {

   position: absolute;
   bottom: 0;
   left: 0;
   display: block;
   width: 100%;
   font-family: 'Cabin';
   text-align: center;
   color: #fff;
   background: rgba(0,0,0,.3);
   margin: 0 !important;
   padding: 0;
   line-height: 60px;
   border-bottom: none;

}

wrapper.team {

   position: relative;
   box-shadow: 0px -5px 10px -6px #000;
   z-index: 1;
   width: 100% !important;
   padding: 0;

}

wrapper.team h2 {

   font-family: 'Cabin';
   color: rgb(19,162,102);
   padding: 0;
   text-align: center;

}

wrapper.team .hr {

display: block; clear: both; margin: 0 auto 10px; width: 85%; height: 1px; background: #e4e4e4; background: -webkit-linear-gradient(left, rgba(228, 228, 228, 0) 0%, #e4e4e4 20%, #e4e4e4 80%, rgba(228, 228, 228, 0) 99%); background: -moz-linear-gradient(left, rgba(228, 228, 228, 0) 0%, #e4e4e4 20%, #e4e4e4 80%, rgba(228, 228, 228, 0) 99%); background: -ms-linear-gradient(left, rgba(228, 228, 228, 0) 0%, #e4e4e4 20%, #e4e4e4 80%, rgba(228, 228, 228, 0) 99%); background: -o-linear-gradient(left, rgba(228, 228, 228, 0) 0%, #e4e4e4 20%, #e4e4e4 80%, rgba(228, 228, 228, 0) 99%); background: linear-gradient(left, rgba(228, 228, 228, 0) 0%, #e4e4e4 20%, #e4e4e4 80%, rgba(228, 228, 228, 0) 99%); }

.photoline .personen {

   padding: 0 5.46878%;

}

.photoline .personen .persoon {

       display: block;
       position: relative;
       float: left;
       width: 19%;
       margin: 50px 8% 0 0;
       text-align: center;
   }

.photoline .personen .persoon:nth-child(4){

   margin-right: 0;

}

   .photoline .personen .persoon:hover {
       cursor: pointer;
   }
   .photoline .personen .persoon:hover .img{
       border-color: rgba(63,167,87,.3);
   }
   .photoline .personen .persoon .img {
       display: block;
       position: relative;
       border-radius: 15px;
       overflow: hidden;
       border: 10px solid rgba(255,255,255,0.5);
       box-shadow: 0px -1px 1px 0px rgb(233, 233, 233), 1px 0px 1px 0px rgb(221, 221, 221), 2px 0px 1px 0px rgb(247, 247, 247), 0px 1px 1px 0px rgb(201, 201, 201), 0px 2px 1px 0px rgb(229, 229, 229), 0px -1px 1px 0px rgb(242, 242, 242) inset, -1px 0px 1px 0px rgb(221, 221, 221), -2px 0px 1px 0px rgb(247, 247, 247);
       -moz-box-sizing: border-box;
                 box-sizing: border-box;
   }
   .photoline .personen .persoon .img .inset {
       display: block;
       width: 100%;
       height: 100%;
       position: absolute;
       top: 0;
       left: 0;
       z-index: 2;
       -webkit-box-shadow: inset 0 1px 10px rgba(0, 0, 0, 0.7);
          -moz-box-shadow: inset 0 1px 10px rgba(0, 0, 0, 0.7);
            -ms-box-shadow: inset 0 1px 10px rgba(0, 0, 0, 0.7);
               -o-box-shadow: inset 0 1px 10px rgba(0, 0, 0, 0.7);
                    box-shadow: inset 0 1px 10px rgba(0, 0, 0, 0.7);
   }
   .photoline .personen .persoon .img img {display:block;}
   .photoline .personen .persoon .img img.normal {position: relative; z-index:1;}
   .photoline .personen .persoon .img img.alt {position: absolute; z-index:0; top:0;}

   .photoline .personen .persoon:hover .img img.normal {opacity: 0;}
   .photoline .personen .persoon.on .img img.normal {opacity:0;}
   .photoline .personen .persoon.on .img{border-color: #0d9c64;}

   .photoline .personen .persoon h3 {
       font-family: 'Cabin';
       font-size: 14px !important;
       letter-spacing: 0px !important;
   }
   .photoline .personen .persoon:hover h3,
   .photoline .personen .persoon.on h3 {
       color: #0d9c64;
   }
   .photoline .personen .persoon .bio {
       display: none;
   }

.photoline .personen .persoon .function {

   line-height: 16px;
   padding-bottom: 0 !important;

}

.photoline .personen .persoon.on .function{

   padding-bottom: 30px !important;

}

.photoline .personen .persoon.on .name.padding{

   padding-bottom: 30px;

}

.photoline .personen .persoon img.driehoek {display: none;} .photoline .personen .persoon.on img.driehoek { display: block; position: absolute; left: 50%; margin-left: -20px; bottom: -8px; }

.photoline .bioline { display: block; max-height: 0px; width: 89.06244%;

               padding: 0 5.46878%;

margin: 0 0 10px; clear: both;

               color: #dedede;
               background: none;
               border-bottom: none;

-webkit-transition: max-height .5s linear; -moz-transition: max-height .5s linear; transition: max-height .5s linear; } .photoline .bioline.on {

               box-shadow: inset  0  8px 8px -6px #000, inset  0 -8px 8px -6px #000;

max-height: 600px;

               height: auto;
               border-bottom: 1px solid #ccc;
               padding: 20px 5.46878%;
               background: url('https://static.igem.org/mediawiki/2013/9/91/Biobg.png');

}

.photoline .bioline p:first-child{ padding: 20px 0 16px 70px ; }

.photoline .bioline p {

   display:block;
   width: 100%;
   position: relative;
   font-family: 'Source Sans Pro';
   font-size: 14px;
   line-height: 20px;
   text-align: justify;
   padding-left: 70px;
   -moz-box-sizing: border-box;
             box-sizing: border-box;

}

.photoline .bioline p a {

   background: none !important;
   color: #dedede;

}

.photoline .bioline p a:hover {color: #fff;}

.photoline p.biocontact:before {

   content: "";
   display:block;
   width: 50px;
   height: 50px;
   position: absolute;
   left: 0px;
   background: url('https://static.igem.org/mediawiki/2013/8/89/Biocontact.png') left top no-repeat;

}

.photoline p.biotext:before {

   content: "";
   display:block;
   width: 50px;
   height: 50px;
   position: absolute;
   left: 0px;
   background: url('https://static.igem.org/mediawiki/2013/5/5c/Biobio.png') left top no-repeat;

}

wrapper .work .desc {

   position: absolute;
   display: block;
   text-align: center;
   opacity: 0;
   background: #fff;
   transition: all 0.2s linear;

-moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; }

wrapper .work.tweederden .desc {

   left: 2.6785714%;
   top: 6.6666665%;
   height: 86.666667%;
   width: 94.642857%;

}

wrapper .work.eenderden .desc {

   left: 5.6603775%;
   top: 6.6666665%;
   height: 86.666667%;
   width: 88.679245%;

}

wrapper .work:hover .desc {

   opacity: .95;

}

wrapper .work .desc .text {

   position: absolute;
   text-align: center;
   top: 36%;
   width: 100%;

}

.page-title {

   display: block;
   position: relative;
   margin: 30px auto 0;
   width: 307px;
   height: 199px;
   background: url(http://beauvillemedia.nl/igem/pages/title-bg.png) left top no-repeat;

}

   .page-title .icon {
       display: block;
       position: relative;
       width: 120px;
       height: 100px;
       margin: 0 auto;
       padding-top: 30px;
   }
   .page-title h1 {
       position: relative;
       top: 4px;
       width: 100%;
       text-align: center;
       border: none;
       color: #fff;
       font-family: 'Cabin';
       font-size: 20px;
       text-shadow: 1px 1px #000;
   }

paperwrapper {

   display:block;
   position: relative;
   width: 800px;
   margin: 30px auto 40px;
   padding-bottom: 20px;
   background: url(http://beauvillemedia.nl/igem/pages/footerbg.png) bottom center no-repeat;

}

   #paperwrapper .top {
       display: block;
       width: 100%;
       height: 130px;
       background: url(http://beauvillemedia.nl/igem/pages/topbg.png) top center no-repeat;
   }
   
   #paperwrapper h2 {
       width: 100%;
       color: #fff;
       text-align: center;
       font-family: 'Cabin';
       font-size: 20px;
       letter-spacing: 1px;
       text-shadow: 1px 1px #000;
       border-bottom: none;
       background: url(http://beauvillemedia.nl/igem/pages/heading-bg.png) left top repeat-x;
   }

   #paperwrapper h2 .left{
       display: block;
       width:9px;
       height: 36px;
       float:left;
       background: url(http://beauvillemedia.nl/igem/pages/heading-bg-left.png) left bottom no-repeat;
   }

   #paperwrapper h2 .right{
       display: block;
       width:9px;
       height: 36px;
       float:right;
       background: url(http://beauvillemedia.nl/igem/pages/heading-bg-right.png) left bottom no-repeat;
   }

   #paperwrapper .top p {
       position: relative;
       width: auto;
       font-size: 14px;
       font-family: 'Source Sans Pro';
       padding: 30px 30px 0 40px;
   }
       #paperwrapper .top p.nopadding {
           padding: 0 30px 0 40px;
       }

   #paperwrapper .content {
       background: url(http://beauvillemedia.nl/igem/pages/contentbg.png) top center;
       text-align: center;
   }

       #paperwrapper .content.notop {margin-top:-104px;}
       #paperwrapper .content > p {
           position: relative;
           width: auto;
           text-align: left;
           font-size: 14px;
           font-family: 'Source Sans Pro';
           padding: 0 30px 16px 40px;
           column-count:2;
           column-gap:40px;
           -moz-column-count:2;
           -moz-column-gap:40px;
           -webkit-column-count:2;
           -webkit-column-gap:40px;}
   #pagewrapper .photoline {
       width: 800px;
       margin-left: -75px;
       text-align: center;
       background: #fff;
       border-radius: 4px;
       padding: 20px 0 10px 0;
       margin-bottom: 10px;
       box-shadow: 0px -1px 1px 0px rgb(233, 233, 233), 1px 0px 1px 0px rgb(221, 221, 221), 2px 0px 1px 0px rgb(247, 247, 247), 0px 1px 1px 0px rgb(201, 201, 201), 0px 2px 1px 0px rgb(229, 229, 229), 0px -1px 1px 0px rgb(242, 242, 242) inset, -1px 0px 1px 0px rgb(221, 221, 221), -2px 0px 1px 0px rgb(247, 247, 247);
       -moz-box-sizing: border-box;
                 box-sizing: border-box;
   }

/* Pages

*/

.tournav {

   height: 74px;
   background: url('https://static.igem.org/mediawiki/2013/9/92/Footerline.png') left bottom repeat-x;

}

.tournav ul {

   width: 89.06244%;
   margin: 0 5.46878%;

}

   .tournav ul li {
       display: block;
       position: relative;
       float: left;
       width: 11.11111111%;
       font-size: 10px;
       text-align: center;
       line-height: 14px;
       background: url('https://static.igem.org/mediawiki/2013/a/a7/Progress2sm.png') center top no-repeat;
       color: #ccc;
   }

   .tournav ul li a {
       display:block;
       padding-top: 42px;
       color: #ccc;}
   .tournav ul li a:hover {
       color: rgb(19,162,102);}

/* Tournav begin

*/

   .tournav ul .first{
       background: url('https://static.igem.org/mediawiki/2013/6/64/Progress1.png') center top no-repeat;
       color: rgb(19,162,102);
   }
   .tournav ul .first.pad{padding-top: 42px;}

   .tournav ul .firstbgsm.fill{
       background: url('https://static.igem.org/mediawiki/2013/2/2d/Progress1fillbgsm.png') center top no-repeat !important;
   }
   .tournav ul .firstbgsm.fill a{color: #333;}
   .tournav ul .firstbgsm.fill a:hover{color: rgb(19,162,102);}
   .tournav ul .first.fill {
       background: url('https://static.igem.org/mediawiki/2013/2/25/Progress1fill.png') center top no-repeat !important;
       color: #ccc;
   }

/* Tournav verloop klein -> klein (standaard behalve fill)

*/

   .tournav ul .fill {
       background: url('https://static.igem.org/mediawiki/2013/c/ca/Progress2fillsm.png') center top no-repeat !important;
   }

/* Tournav verloop groot -> groot

*/

   .tournav ul .bgbg {
       background: url('https://static.igem.org/mediawiki/2013/a/a1/Progress2.png') center top no-repeat !important;
   }
   .tournav ul .bgbg a{color: #333;}
   .tournav ul .bgbg a:hover{color: rgb(19,162,102);}
   .tournav ul .bgbg.current {
       background: url('https://static.igem.org/mediawiki/2013/1/1e/Progress2current.png') center top no-repeat !important;
       color: rgb(19,162,102);
       padding-top: 42px;
   }
   .tournav ul .bgbg.fill {
       background: url('https://static.igem.org/mediawiki/2013/b/b0/Progress2fill.png') center top no-repeat !important;
   }

/* Tournav verloop klein -> groot

*/

   .tournav ul .smbg {
       background: url('https://static.igem.org/mediawiki/2013/b/b8/Progress2smbg.png') center top no-repeat !important;
   }
   .tournav ul .smbg a{color: #333;}
   .tournav ul .smbg a:hover{color: rgb(19,162,102);}
   .tournav ul .smbg.current {
       background: url('https://static.igem.org/mediawiki/2013/1/18/Progress2currentsmbg.png') center top no-repeat !important;
       color: rgb(19,162,102);
       padding-top: 42px;
   }
   .tournav ul .smbg.fill {
       background: url('https://static.igem.org/mediawiki/2013/5/5c/Progress2fillsmbg.png') center top no-repeat !important;
   }

/* Tournav verloop groot -> klein

*/

   .tournav ul .bgsm {
       background: url('https://static.igem.org/mediawiki/2013/2/23/Progress2bgsm.png') center top no-repeat !important;
   }    
   .tournav ul .bgsm a{color: #333;}
   .tournav ul .bgsm a:hover{color: rgb(19,162,102);}
   .tournav ul .bgsm a{color: #333;}
   .tournav ul .bgbg.fill a:hover{color: rgb(19,162,102);}
   .tournav ul .bgsm.current {
       background: url('https://static.igem.org/mediawiki/2013/a/ae/Progress2currentbgsm.png') center top no-repeat !important;
       color: rgb(19,162,102);
       padding-top: 42px;
   }
   .tournav ul .bgsm.fill {
       background: url('https://static.igem.org/mediawiki/2013/c/ce/Progress2fillbgsm.png') center top no-repeat !important;
       color: rgb(19,162,102);
   }
   .tournav ul .bgsm.fill a{color: #333;}
   .tournav ul .bgsm.fill a:hover{color: rgb(19,162,102);}

/* Tournav verloop klein -> groot -> klein

*/

   .tournav ul .smbgsm {
       background: url('https://static.igem.org/mediawiki/2013/0/04/Progress2smbgsm.png') center top no-repeat !important;
   }
   .tournav ul .smbgsm a{color: #333;}
   .tournav ul .smbgsm a:hover{color: rgb(19,162,102);}
   .tournav ul .smbgsm.current {
       background: url('https://static.igem.org/mediawiki/2013/f/f6/Progress2currentsmbgsm.png') center top no-repeat !important;
       color: rgb(19,162,102);
       padding-top: 42px;
   }
   .tournav ul .smbgsm.fill {
       background: url('https://static.igem.org/mediawiki/2013/6/61/Progress2fillsmbgsm.png') center top no-repeat !important;
   }

/* Tournav end

*/

   .tournav ul .last {
       background: url('https://static.igem.org/mediawiki/2013/1/1c/Progress3.png') center top no-repeat;
   }
   .tournav ul .last.bg {
       background: url('https://static.igem.org/mediawiki/2013/5/53/Progress3bg.png') center top no-repeat !important;
   }
   .tournav ul .last.bg a{color: #333;}
   .tournav ul .last.bg a:hover{color: rgb(19,162,102);}
   .tournav ul .last.current {
       background: url('https://static.igem.org/mediawiki/2013/2/2a/Progress3current.png') center top no-repeat !important;
       color: rgb(19,162,102);
       padding-top: 42px;
   }

.pagina-titel {position: relative;}

.pagina-titel h1 {

   width: 100%;
   margin: 30px 0 0;
   text-align: center;
   border: none;
   color: rgb(19,162,102);
   font-family: 'Cabin';
   font-size: 40px;
   text-shadow: 1px 1px #000;

}

.pagina-titel h2 {

   width: 100%;
   text-align: center;
   border: none;
   font-size: 20px;
   font-family: 'Cabin';

}

.pagina-titel img {

   position: absolute;
   top: -15px;

}

wrapper .eenderde {

   display: block;
   position: relative;
   float: left;
   width: 30.701756%;
   margin-right: 3.947368%;

}

wrapper .tweederde {

   display: block;
   position: relative;
   float: left;
   width: 65.350876%;

}

wrapper .work.tweederden {

   display: block;
   position: relative;
   float: left;
   width: 65.497076%;
   margin-bottom: 30px;

}

wrapper .work.tweederden.top {margin-top: 30px;}
wrapper .work.tweederden.margin {margin-right: 3.5087719%;}

wrapper .work.eenderden {

   display: block;
   position: relative;
   float: left;
   width: 30.994152%;
   margin-bottom: 30px;

}

wrapper .work.eenderden.top {margin-top: 30px;}
wrapper .work.eenderden.margin{margin-right: 3.5087719%;}

wrapper .eenderde ul {

   position: fixed;
   left: 5.46878%;
   top: 120px;}

wrapper .eenderde ul li {

   display: block;
   width: auto;
   border-right: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   text-align: right;
   padding: 10px;}

wrapper .eenderde ul li:last-child {border-bottom: none;}

wrapper .eenderde ul li a {opacity: .7;}

pagewrapper {

   display: block;
   position: relative;
   width: 60%;
   padding: 30px 0;
   margin: 0 auto;
   background: url('http://beauvillemedia.nl/igem/shadow-radial-reverse.png') 50% 100% no-repeat,url('http://beauvillemedia.nl/igem/images/gradient-bottom.png') 50% 100% no-repeat;
   max-width: 650px
   }

   #pagewrapper h2 {
       width: 100%;
       color: rgb(19,162,102);
       font-family: 'Cabin';
       font-size: 20px;
       letter-spacing: 1px;
       border-bottom: none;
       padding: 0;
       margin: 0;
       } 
   #pagewrapper h3 {
       width: 100%;
       font-family: 'Cabin';
       font-size: 16px;
       letter-spacing: 1px;
   }
   #pagewrapper p {
       position: relative;
       font-family: 'Source Sans Pro';
       font-size: 14px;
       padding-bottom: 14px;
       text-align: justify;
       }

        #pagewrapper p.caption {
           display:block;
           position: relative;
           width: 100%;
           text-align: center;
           top:-20px;
           padding-bottom: 14px;
       }

       #pagewrapper span.ref {position: absolute; left: -30px;}
       #pagewrapper span.ref2 {position: absolute; left: -16px;}

   #pagewrapper a {
       color:  rgb(228,108,10);
   }
        #pagewrapper a:hover {
            color: rgb(19,162,102);
            }

   #pagewrapper > img {
       display: block;
       margin: 24px auto 40px;
   }

pagewrapper.hostengineering h2 #Introduction,
pagewrapper.hostengineering h2:nth-of-type(3) .mw-headline,
pagewrapper.hostengineering h2:nth-of-type(7) .mw-headline,
pagewrapper.hostengineering h2:nth-of-type(11) .mw-headline,
pagewrapper.hostengineering h2:nth-of-type(12) .mw-headline,
pagewrapper.hostengineering h2:nth-of-type(14) .mw-headline {font-size: 26px;text-shadow: 1px 1px #000;}

.hiddencode{

   display:none;
   width:100%;
   padding: 15px;
   -moz-box-sizing:border-box;
             box-sizing:border-box;}

.hiddencode.on {display:block;}

.hiddeninfo{

   display:none;
   width:100%;
   -moz-box-sizing:border-box;
             box-sizing:border-box;}

.hiddeninfo.on {display:block;}

.info {

   color: rgb(228,108,10) !important;}

.info:hover {color: #0d9c64;}

p.dot {

   display: block;
   position: relative;
   padding: 0 10px 16px 40px;
   width:100%;
   -moz-box-sizing:border-box;
             box-sizing:border-box;

}

p.dot:before {

   content: "";
   display:block;
   width: 20px;
   height: 20px;
   position: absolute;
   left: 12px;
   top: 0;
   background: url('https://static.igem.org/mediawiki/2013/2/2a/Dot.png') left top no-repeat;

}

p.dot a {display: block;}

/* Edit pages

*/

wrapper h2 {

       font-size: 20px;
       font-weight: light;
       letter-spacing: 1px;
       border-bottom: none;
       margin: 0;
       padding: 0 0 20px;
       font-family: 'Cabin', sans-serif;
       -webkit-margin-before: 0;
       -webkit-margin-after: 0;}

wrapper.backend ul li {

       font-size: 14px;
       line-height: 1.5em;
       list-style: circle;
       margin-left: 30px;}

/* Notebook

*/

filters {

   display: block;
   width: 89.06244%;
   padding: 0 5.46878%;
   height: 80px;
   background: url() left top repeat-x;
   background-size: contain;

}

filters .bysubject {

   text-align: center;
   font-family: 'Source Sans Pro';
   font-size: 11px;
   text-transform: uppercase;
   margin: 0;

}

filters .bysubject .icons a{

  position: relative;
  display: inline-block;
  width: 90px;
  padding: 30px 5px 0;
  cursor: pointer !important;}

  #filters .bysubject .icons a span{
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -15px;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 0 3px #888, inset 0 0 2px #ccc;}
  
  #filters .bysubject .icons a.wetlab span{ background: #fff url() right top no-repeat;}
  #filters .bysubject .icons a.drylab span{ background: #fff url() right top no-repeat;}
  #filters .bysubject .icons a.modeling span{ background: #fff url() right top no-repeat;}
  #filters .bysubject .icons a.human span{ background: #fff url() right top no-repeat;}
  #filters .bysubject .icons a.other span{ background: #fff url() right top no-repeat;}

  #filters .bysubject .icons a.active span {
     background-position: top left;
     background-color: transparent;
     box-shadow: none;
  }
   #filters .bysubject .icons a.active:hover span {
     background-position: top right;
  }
  #filters .bysubject .icons a:hover span {
     background-position: top left;
  }

filters .bydate {

   display: block;
   position: fixed;
   top: 180px;
   left: 5.46878%;
   margin: 0;
   width:36px;
   height: 500px;
   z-index: 4;

}

filters .bydate .iconsweek {

   display: block;
   position: relative;
   z-index: 4;
   width:12px;
   margin:12px 12px 0;

}

filters .bydate .iconsweek a {

   display: block;
   position: relative;
   width: 12px;
   height: 12px;
   margin-bottom: 6px;
   background: url(http://beoplay.com/layouts/SBV-Custom/HMProductPage/assets/images/navigation/leftNav_btn_circle_deactive.png) top left no-repeat;

}

filters .bydate .iconsweek a.month {

   margin-top: 15px;

}

filters .bydate .iconsweek a:hover {

   background: url(http://beoplay.com/layouts/SBV-Custom/HMProductPage/assets/images/navigation/leftNav_btn_circle_active.png) top left no-repeat;

}

filters .bydate .iconsweek a.on {

   background: url(http://beoplay.com/layouts/SBV-Custom/HMProductPage/assets/images/navigation/leftNav_btn_circle_active.png) top left no-repeat !important;

}

filters .bydate .iconsweek a span {

   display: none;
   position: absolute;
   left: 30px;
   top: -9px;
   width: 100px;
   text-align:center;
   font-family: 'Source Sans Pro';
   font-size: 14px;
   line-height: 30px;
   text-transform: uppercase;
   font-weight: bold;
   background: #504A4B;
   border-radius: 30px;
   box-shadow: 0 0px 5px #ececec;
   z-index: 5

}

filters .bydate .iconsweek a:hover span {display:block;z-index: 50; color: #fff;}

filters .bydate .iconsweek .sep {

   display: block;
   position: relative;
   width: 34px;
   height: 1px;
   border-bottom: 1px solid #d4d4d4;
   margin: 0 0 6px -11px;
   background: #fff;

}

filters .bydate .months {

   display:block;
   width:405px;
   position: absolute;
   top: 220px;
   left: -220px;
   -webkit-transform: rotate(-90deg);
       -moz-transform: rotate(-90deg);
            -o-transform: rotate(-90deg);
         -ms-transform: rotate(-90deg);
   font-family: 'Source Sans Pro';
   font-size: 10px;
   text-transform: uppercase

}

filters .bydate .months .spring {margin-left: 22px;}
filters .bydate .months .june {margin-left: 59px;}
filters .bydate .months .july {margin-left: 66px;}
filters .bydate .months .aug {margin-left: 58px;}
filters .bydate .months .sept {margin-left: 32px;}

filters .bydate .topbg {

   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 36px;
   height: 18px;
   z-index: 2;
   background: url(http://beoplay.com/layouts/SBV-Custom/HMProductPage/assets/images/navigation/leftNav_bg_top.png) top left no-repeat;

}

filters .bydate .middlebg {

   display: block;
   position: absolute;
   top: 18px;
   left: 0;
   width: 36px;
   height: 324px;
   z-index: 2;
   background: url(http://beoplay.com/layouts/SBV-Custom/HMProductPage/assets/images/navigation/leftNav_bg_middle.png) top left repeat-y;

}

filters .bydate .bottombg {

   display: block;
   position: absolute;
   top: 342px;
   left: 0;
   width: 36px;
   height: 105px;
   background: url() top left no-repeat;
   z-index: 2;

}

container {

 display: block;
 margin: 0 auto 30px;

width: auto;

 min-height: 500px;
 max-width: 960px;

}

container > h2 {

 padding: 0;

-webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-start: 0; -webkit-margin-end: 0;

 margin: 0;
 border: none;

}

container h2:nth-of-type(2) {display:none;}

container > h2 .editsection {position: fixed; top: 178px; right: 5.46878%; font-size: 12px;}
container > h2 .mw-headline {display:none;}

container .item {

 display: block;
 float: left;
 overflow: hidden;
 width: 300px;
 margin: 20px 10px 0;
 background: #fff;
 border-radius: 4px;
 box-shadow: 0 3px 4px 0 #c9c9c9;
 -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
              transition: all .3s ease-in-out;

z-index: 1; }

container .item:nth-child(3n+4) {

clear: left; }

container .item:hover{box-shadow: 0 0 10px #666666;}

container .item .icon {

   display: block;
   position: relative;
   margin: -31px auto 0;
   width: 64px;
   height: 64px;
   z-index: 2;

}

container .item.date {

   display: block;
   width: 300px;
   height: 300px;
   background: url() center center no-repeat;
   font-family: 'Cabin';
   letter-spacing: 1px;
   text-align: center;

}

container .item.date .midden {

   position: absolute;
   width: 100%;
   top: 50%;
   margin-top: -34px;
   text-align: center;

}

container .item.date .midden * {color: #fff;}

container .item .icon.wetlab {background: url() center center no-repeat;}
container .item .icon.drylab {background: url() center center no-repeat;}
container .item .icon.modeling {background: url() center center no-repeat;}
container .item .icon.human {background: url() center center no-repeat;}
container .item .icon.other {background: url() center center no-repeat;}

container .item .content {

 padding: 0px 15px 15px;

}

container .item .content h3 {

 text-align: center;
 font-family: 'Cabin';
 font-weight: bold;
 letter-spacing: 1px;
 font-size: 20px;
 line-height: 30px;
 margin: 0 !important;

}

container .item .content p.date {

 text-align: center;
 padding-bottom: 10px;

}

container .item .content p {

 font-family: 'Source Sans Pro';
 font-size: 14px;

}