Team:Wageningen UR/Templates/style.css

From 2013.igem.org

Revision as of 12:26, 1 October 2013 by Karrenbelt (Talk | contribs)

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

*/
  1. p-logo,
  2. catlinks {display: none;}
  1. top-section {

position: fixed; 

       top: 0;
       width: 100%;
       height: 0;
       border: none;
       z-index: 100;}
  1. search-controls {display: none;}
  1. menubar {

display: table-cell; background: transparent; 

       font-size: 11px;}
  1. top-section #menubar ul { 
       -webkit-margin-before: 2px;
       -webkit-margin-after: 2px;
       -webkit-padding-start: 40px;
       margin: .3em 0 0 1.5em;}
  1. menubar.left-menu {width: 100%; padding-top: 6px;}
  1. menubar.right-menu {text-align: right; padding-top: 6px;}
  1. menubar * {

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

  1. top-section:hover #menubar * {color: #333 !important;}
  1. top-section #menubar ul li a:hover {color: #0d9c64 !important; text-decoration: none;}
  1. top-section:hover #menubar.left-menu {background: rgba(255, 255, 255, 0.75) !important; border-bottom: 1px solid #0d9c64;}

/* Navigation - Topmenu

*/
  1. 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;}
  1. topmenu .selflink {font-weight: normal !important; color: #0d9c64; cursor: default; padding: 0 12px 0 8px;}
  2. topmenu .menucenter li:hover .selflink {padding: 0 11px 0 9px}
  1. topmenu .menucenter{position: relative; display: block; line-height: 80px;}
  1. topmenu .menuleft {position: absolute; line-height: 76px; z-index: 3;}
  2. topmenu .menuleft a img {position: relative; height: 60px; top: 10px;}
  1. 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}
  1. topmenu .menuright {position: absolute; display: block; line-height: 80px; right: 5.46878%; top: 0; z-index: 3;}
  2. topmenu .menuright a {display:block; height: 80px;}
  1. topmenu ul, topmenu li { 
   -webkit-margin-before: 0;
   -webkit-margin-after: 0;
   -webkit-padding-start: 0;}
  1. 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%;
   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: 369px 350px;
       width: 100%;
       height: 300px;

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


  1. example3{

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

  1. example3 .slide{

background:#ccc; padding:20px; 

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

/* The timeline background */

  1. example3 .timeline{

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

       background-size: 4px 2px;}

/* The timeline fill bar */

  1. example3 .innertimeline{

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

  1. example3 .timedisplay{

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

  1. example3 .node{ 
       top: -20px;

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

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

/* The active node */

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

/* Each node tooltip */

  1. example3 .tooltip{ 
       font-size: 12px;
       color: #fff;}

/* The time display inside a tooltip */

  1. example3 .tooltiptime{

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

  1. example3 .pause, #example3 .play{

width:80px; height:80px; -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; } /* The pause button */

  1. example3 .pause{

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

  1. example3 .play{

background:#fff url(http://friquemag.net/demos/timeliner/images/play.gif) center no-repeat; } /* The previous/next buttons */

  1. example3 .previous, #example3 .next{

} /* The previous button */

  1. example3 .previous,
  2. example3 .next{ 
       width:31px;

height:37px; display:block; position:absolute; top: 50%; margin-top: -18px; left:0; background:url(http://beauvillemedia.nl/igem/leftright.svg) no-repeat; opacity:.5; -webkit-transition:opacity .1s linear; 

 	   -moz-transition:opacity .1s linear;

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

  1. example3 .next{ 
   left:auto !important;
   right:0 !important;
   background-position:-31px 0

}

  1. example3 li:nth-child(5){ 
     background: url('http://beauvillemedia.nl/igem/slider-lovastatin.png') center center no-repeat;
     background-size: cover;

}

.timeline .node1 .tooltip:before{ 

               content:"";

background:url('http://beauvillemedia.nl/igem/slidersprite.png'); position:absolute; 

               background-position: 0 0;

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

.timeline .node2 .tooltip:before{ 

               content:"";

background:url('http://beauvillemedia.nl/igem/slidersprite.png'); position:absolute; 

               background-position: -30px 0;

top: -30px; left: 12px; width:30px; height:30px; display:inline-block;}

.timeline .node3 .tooltip:before{ 

               content:"";

background:url('http://beauvillemedia.nl/igem/slidersprite.png'); position:absolute; 

               background-position: -60px 0;

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

.timeline .node4 .tooltip:before{ 

               content:"";

background:url('http://beauvillemedia.nl/igem/slidersprite.png'); position:absolute; 

               background-position: -90px 0;

top: -30px; left: 18px; width:30px; height:30px; display:inline-block;}

.timeline .node5 .tooltip:before{ 

               content:"";

background:url('http://beauvillemedia.nl/igem/slidersprite.png'); position:absolute; 

               background-position: -120px 0;

top: -30px; left: 21px; width:30px; height:30px; display:inline-block;}

.timeline .node6 .tooltip:before{ 

               content:"";

background:url('http://beauvillemedia.nl/igem/slidersprite.png'); position:absolute; 

               background-position: -150px 0;

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

  1. example3 li:nth-child(6){ 
     background: url('http://beauvillemedia.nl/igem/slide2.png') center center no-repeat;

}

  1. example3 li:nth-child(7){ 
     background: url('http://beoplay.com/layouts/SBV-Custom/HMProductPage/assets/beoplayH6/features/H6_features_background_3.jpg') center center no-repeat;

}

  1. example3 li:nth-child(10){ 
     background: url('http://beauvillemedia.nl/igem/slide-chromoproteins.png') center center no-repeat;
     background-size: cover;

}

/* Main content area

*/
  1. wrapper { 
       width: 89.06244%;
       padding: 0 5.46878%;
       font-family: 'Source Sans Pro';

}

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

}

  1. wrapper .intro { 
       padding: 30px 0;
       font-size: 14px;
       text-align: justify;
       font-family: 'Source Sans Pro';
       column-count:2;
       column-gap:40px;

       /* Firefox */
       -moz-column-count:2;
       -moz-column-gap:40px;

       /* Safari and Chrome */
       -webkit-column-count:2;
       -webkit-column-gap:40px;

}

  1. wrapper .video-social .video{ 
       position: relative;
       float:left;
       display: block;
       width: 50%;
       text-align: center;
       padding-right: 20px;
       -moz-box-sizing: border-box;
 	          box-sizing: border-box;

}

  1. wrapper .video-social .video iframe { 
       position: absolute;
       left: 50%;
       margin-left: -216px;
       top: 20px;

}

  1. wrapper .video-social .social { 
       position: relative;
       float:left;
       display: block;
       width: 50%;
       text-align: center;
       padding-left: 20px;
       -moz-box-sizing: border-box;
 	          box-sizing: border-box;

}

  1. wrapper .video-social .social a.tourstart { 
       display: block;
       position: relative;
       width: 300px;
       margin: 0 auto;
       line-height: 40px;
       border-radius: 4px;
       border: 10px solid rgba(255,255,255,0.5);
       color: #fff;
       text-transform: uppercase;
       background-clip: padding-box !important;
       background: rgb(98,229,145); /* Old browsers */

/* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYyZTU5MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxM2EyNjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgb(98,229,145) 0%, rgb(19,162,102) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(98,229,145)), color-stop(100%,rgb(19,162,102))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgb(98,229,145) 0%,rgb(19,162,102) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgb(98,229,145) 0%,rgb(19,162,102) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgb(98,229,145) 0%,rgb(19,162,102) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgb(98,229,145) 0%,rgb(19,162,102) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#62e591', endColorstr='#13a266',GradientType=0 ); /* IE6-8 */

}

  1. wrapper .video-social .social a.tourstart:hover {

text-shadow: 0 1px #000; background: rgb(19,162,102); /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzEzYTI2NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2MmU1OTEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgb(19,162,102) 0%, rgb(98,229,145) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(19,162,102)), color-stop(100%,rgb(98,229,145))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgb(19,162,102) 0%,rgb(98,229,145) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgb(19,162,102) 0%,rgb(98,229,145) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgb(19,162,102) 0%,rgb(98,229,145) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgb(19,162,102) 0%,rgb(98,229,145) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#13a266', endColorstr='#62e591',GradientType=0 ); /* IE6-8 */ }

  1. wrapper .video-social .social .social-buttons {display: block; position:relative; width: 320px; margin: 0 auto;}
  1. wrapper .video-social .social .social-buttons .btn { 
       display:block;
       position: relative;
       padding: 0 !important;
       float: left;
       width: 100px;
       height: 100px;
       margin-right: 10px;
       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);
   -webkit-transition: all .3s ease-in-out;
      -moz-transition: all .3s ease-in-out;
                transition: all .3s ease-in-out;}
  1. wrapper .video-social .social .social-buttons .btn:hover {box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .2);}
  2. wrapper .video-social .social .social-buttons .btn:nth-child(3) {margin-right: 0px;}
  1. wrapper .video-social .social .social-buttons .facebookbtn {background: #fff url('http://beauvillemedia.nl/igem/facebookbtn.png') center center no-repeat;}
  2. wrapper .video-social .social .social-buttons .twitterbtn {background: #fff url('http://beauvillemedia.nl/igem/twitterbtn.png') center center no-repeat;}
  3. wrapper .video-social .social .social-buttons .emailbtn {background: #fff url('http://beauvillemedia.nl/igem/emailbtn.png') center center no-repeat;}
  1. wrapper .video-social .social .follow { 
   display: block;
   position: relative;
   width: 320px;
   margin: 16px auto 0;
   text-align: left;

}


  1. 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;}
  1. wrapper a.blok:hover { 
   box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .2);

}

  1. wrapper a.blok p { 
   padding: 0 16px 16px;
   -moz-box-sizing: border-box;

box-sizing: border-box; }

  1. wrapper .blok:nth-child(3n+3){margin-right: 0;}
  1. wrapper .blok .medalcontent {padding: 0 15px 15px 75px;}
  2. 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;}
  1. wrapper .blok .medalcontent p { 
   position: relative;
   font-family: 'Source Sans Pro';
   font-size: 14px;}
  1. wrapper .blok .medalcontent p.yes {}
  2. wrapper .blok .medalcontent p.yes:before{ 
               content:"";

background:url('http://beauvillemedia.nl/igem/yes.png'); position:absolute; 

               background-position: 0 0;

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

  1. wrapper .blok .medalcontent p.no {}
  2. wrapper .blok .medalcontent p.no:before{ 
               content:"";

background:url('http://beauvillemedia.nl/igem/no.png'); position:absolute; 

               background-position: 0 0;

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

.half { 

   display: block;
   width: 50%;
   padding-right: 20px;
   -moz-box-sizing: border-box;
             box-sizing: border-box;

}

  1. videolink { 
       display: block;
       position: relative;
       width: 300px;
       margin: 0 auto;
       line-height: 40px;
       border-radius: 4px;
       border: 10px solid rgba(255,255,255,0.5);
       color: #fff;
       text-align: center;
       text-transform: uppercase;
       background-clip: padding-box !important;
       background: rgb(98,229,145); /* Old browsers */

/* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYyZTU5MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxM2EyNjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgb(98,229,145) 0%, rgb(19,162,102) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(98,229,145)), color-stop(100%,rgb(19,162,102))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgb(98,229,145) 0%,rgb(19,162,102) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgb(98,229,145) 0%,rgb(19,162,102) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgb(98,229,145) 0%,rgb(19,162,102) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgb(98,229,145) 0%,rgb(19,162,102) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#62e591', endColorstr='#13a266',GradientType=0 ); /* IE6-8 */ }

  1. videolink:hover {

text-shadow: 0 1px #000; background: rgb(19,162,102); /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzEzYTI2NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2MmU1OTEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgb(19,162,102) 0%, rgb(98,229,145) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(19,162,102)), color-stop(100%,rgb(98,229,145))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgb(19,162,102) 0%,rgb(98,229,145) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgb(19,162,102) 0%,rgb(98,229,145) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgb(19,162,102) 0%,rgb(98,229,145) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgb(19,162,102) 0%,rgb(98,229,145) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#13a266', endColorstr='#62e591',GradientType=0 ); /* IE6-8 */ }


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

  1. overlay > .video1 {

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

/* Project cell nav

*/

.outline { 

   display: block;
   position: relative;
   width: 100%;
   margin-top: 50px;
   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;

}

/* Sponsors

*/
  1. 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;

}

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

*/
  1. 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;
       }
  1. f-poweredbyico {position:relative;top: 9px;}
  2. f-copyrightico {position:relative;top: 9px;}

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

}

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

}

  1. wrapper.team h2 { 
   font-family: 'Cabin';
   color: rgb(19,162,102);
   padding: 0;
   text-align: center;

}

  1. 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('http://beauvillemedia.nl/igem/pages/biocontact.png') left top no-repeat;

}

.photoline p.biotext:before { 

   content: "";
   display:block;
   width: 50px;
   height: 50px;
   position: absolute;
   left: 0px;
   background: url('http://beauvillemedia.nl/igem/pages/biobio.png') left top no-repeat;

}


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

  1. wrapper .work.tweederden .desc { 
   left: 2.6785714%;
   top: 6.6666665%;
   height: 86.666667%;
   width: 94.642857%;

}

  1. wrapper .work.eenderden .desc { 
   left: 5.6603775%;
   top: 6.6666665%;
   height: 86.666667%;
   width: 88.679245%;

}

  1. wrapper .work:hover .desc { 
   opacity: .95;

}

  1. 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;
   }
  1. 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%;
       padding-top: 42px;
       font-size: 10px;
       text-align: center;
       line-height: 14px;
       background: url('https://static.igem.org/mediawiki/2013/a/a1/Progress2.png') center top no-repeat;
   }
   .tournav ul li:nth-child(9){
       background: url('https://static.igem.org/mediawiki/2013/1/1c/Progress3.png') center top no-repeat;
   }
   .tournav ul .currentfirst{
       background: url('https://static.igem.org/mediawiki/2013/6/64/Progress1.png') center top no-repeat;
       color: rgb(19,162,102);
   }

   .tournav ul .fillfirst {
       background: url('https://static.igem.org/mediawiki/2013/2/25/Progress1fill.png') center top no-repeat !important;
   }
   .tournav ul .fill {
       background: url('https://static.igem.org/mediawiki/2013/b/b0/Progress2fill.png') center top no-repeat !important;
   }
   .tournav ul .current {
       background: url('https://static.igem.org/mediawiki/2013/1/1e/Progress2current.png') center top no-repeat !important;
       color: rgb(19,162,102);
   }
   .tournav ul .currentlast{
       background: url('https://static.igem.org/mediawiki/2013/2/2a/Progress3current.png') center top no-repeat !important;
       color: rgb(19,162,102);
   }

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

}


  1. wrapper .eenderde { 
   display: block;
   position: relative;
   float: left;
   width: 30.701756%;
   margin-right: 3.947368%;

}

  1. wrapper .tweederde { 
   display: block;
   position: relative;
   float: left;
   width: 65.350876%;

}

  1. wrapper .work.tweederden { 
   display: block;
   position: relative;
   float: left;
   width: 65.497076%;
   margin-bottom: 30px;

}

  1. wrapper .work.tweederden.top {margin-top: 30px;}
  2. wrapper .work.tweederden.margin {margin-right: 3.5087719%;}
  1. wrapper .work.eenderden { 
   display: block;
   position: relative;
   float: left;
   width: 30.994152%;
   margin-bottom: 30px;

}

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


  1. wrapper .eenderde ul { 
   position: fixed;
   left: 5.46878%;
   top: 120px;}
  1. wrapper .eenderde ul li { 
   display: block;
   width: auto;
   border-right: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   text-align: right;
   padding: 10px;}
  1. wrapper .eenderde ul li:last-child {border-bottom: none;}
  1. wrapper .eenderde ul li a {opacity: .7;}


  1. 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;
   }
  1. pagewrapper.hostengineering h2 #Introduction,
  2. pagewrapper.hostengineering h2:nth-of-type(3) .mw-headline,
  3. pagewrapper.hostengineering h2:nth-of-type(7) .mw-headline,
  4. pagewrapper.hostengineering h2:nth-of-type(11) .mw-headline,
  5. pagewrapper.hostengineering h2:nth-of-type(12) .mw-headline,
  6. 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;}

/* Edit pages

*/
  1. 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;}
  1. wrapper.backend ul li { 
       font-size: 14px;
       line-height: 1.5em;
       list-style: circle;
       margin-left: 30px;}

/* Notebook

*/
  1. filters { 
   display: block;
   width: 89.06244%;
   padding: 0 5.46878%;
   height: 80px;
   background: url(Sub-bg.png) left top repeat-x;
   background-size: contain;

}

  1. filters .bysubject { 
   text-align: center;
   font-family: 'Source Sans Pro';
   font-size: 11px;
   text-transform: uppercase;
   margin: 0;

}

  1. 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(http://beauvillemedia.nl/igem/wetlab.png) right top no-repeat;}
  #filters .bysubject .icons a.drylab span{ background: #fff url(http://beauvillemedia.nl/igem/drylab.png) right top no-repeat;}
  #filters .bysubject .icons a.modeling span{ background: #fff url(http://beauvillemedia.nl/igem/modeling.png) right top no-repeat;}
  #filters .bysubject .icons a.human span{ background: #fff url(http://beauvillemedia.nl/igem/human.png) right top no-repeat;}
  #filters .bysubject .icons a.other span{ background: #fff url(http://beauvillemedia.nl/igem/other.png) 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;
  }
  1. filters .bydate { 
   display: block;
   position: fixed;
   top: 180px;
   left: 5.46878%;
   margin: 0;
   width:36px;
   height: 500px;
   z-index: 4;

}

  1. filters .bydate .iconsweek { 
   display: block;
   position: relative;
   z-index: 4;
   width:12px;
   margin:12px 12px 0;

}

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

}

  1. filters .bydate .iconsweek a.month { 
   margin-top: 15px;

}

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

}

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

}

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

}

  1. filters .bydate .iconsweek a:hover span {display:block;z-index: 50; color: #fff;}
  1. filters .bydate .iconsweek .sep { 
   display: block;
   position: relative;
   width: 34px;
   height: 1px;
   border-bottom: 1px solid #d4d4d4;
   margin: 0 0 6px -11px;
   background: #fff;

}

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

}

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


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

}

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

}

  1. filters .bydate .bottombg { 
   display: block;
   position: absolute;
   top: 342px;
   left: 0;
   width: 36px;
   height: 105px;
   background: url(http://beauvillemedia.nl/igem/Left_Nav_bot.png) top left no-repeat;
   z-index: 2;

}

  1. container { 
 display: block;
 margin: 0 auto 30px;

  width: auto; 

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

}

  1. container > h2 { 
 padding: 0;

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

 margin: 0;
 border: none;

}

  1. container h2:nth-of-type(2) {display:none;}
  1. container > h2 .editsection {position: fixed; top: 178px; right: 5.46878%; font-size: 12px;}
  2. container > h2 .mw-headline {display:none;}
  1. 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; }

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

clear: left; }

  1. container .item:hover{box-shadow: 0 0 10px #666666;}
  1. container .item .icon { 
   display: block;
   position: relative;
   margin: -31px auto 0;
   width: 64px;
   height: 64px;
   z-index: 2;

}

  1. container .item.date { 
   display: block;
   width: 300px;
   height: 300px;
   background: url(http://beauvillemedia.nl/igem/datebg.png) center center no-repeat;
   font-family: 'Cabin';
   letter-spacing: 1px;
   text-align: center;

}

  1. container .item.date .midden { 
   position: absolute;
   width: 100%;
   top: 50%;
   margin-top: -34px;
   text-align: center;

}

  1. container .item.date .midden * {color: #fff;}
  1. container .item .icon.wetlab {background: url(http://beauvillemedia.nl/igem/diamond-wetlab.png) center center no-repeat;}
  2. container .item .icon.drylab {background: url(http://beauvillemedia.nl/igem/diamond-drylab.png) center center no-repeat;}
  3. container .item .icon.modeling {background: url(http://beauvillemedia.nl/igem/diamond-modeling.png) center center no-repeat;}
  4. container .item .icon.human {background: url(http://beauvillemedia.nl/igem/diamond-human.png) center center no-repeat;}
  5. container .item .icon.other {background: url(http://beauvillemedia.nl/igem/diamond-other.png) center center no-repeat;}
  1. container .item .content { 
 padding: 0px 15px 15px;

}

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

}

  1. container .item .content p.date { 
 text-align: center;
 padding-bottom: 10px;

}

  1. container .item .content p { 
 font-family: 'Source Sans Pro';
 font-size: 14px;

}

Retrieved from "http://2013.igem.org/Team:Wageningen_UR/Templates/style.css"