Team:Wageningen UR/Templates/style.css

From 2013.igem.org

(Difference between revisions)
Line 805: Line 805:
         background: #fff;
         background: #fff;
         border-radius: 4px;
         border-radius: 4px;
-
        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);
         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;
         -moz-box-sizing: border-box;

Revision as of 11:17, 2 September 2013

/* 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;
       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,
  2. topmenu .menuright {position: relative; display: block; line-height: 80px;}
  3. topmenu .menuright a {display:block; 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 {float:right; top:-87px; z-index: 3;}
  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: 400px;

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

}

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

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

*/

.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;
       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 {
       display: inline-block;
       position: relative;
       width: 150px;
       padding: 0 20px;
   }
   .photoline .personen .persoon:hover {
       cursor: pointer;
   }
   .photoline .personen .persoon .img {
       display: block;
       position: relative;
       border: 6px solid #eeeeee;
       border-radius: 500px;
       overflow: hidden;
   }
   .photoline .personen .persoon:hover .img{
       top: -4px;
   }
   .photoline .personen .persoon .img img {display:block;}
   .photoline .personen .persoon h3 {
       font-family: 'Cabin';
       font-size: 14px !important;
   }
   .photoline .personen .persoon:hover h3,
   .photoline .personen .persoon.on h3 {
       color: #0d9c64;
   }
   .photoline .personen .persoon .bio {
       display: none;
   }

.photoline .personen .persoon.on .name { 

   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: -7px; }

.personen .bioline { display: block; max-height: 0; width: auto; margin: 0; 

               padding: 0 20px;

clear: both; background: url(http://beauvillemedia.nl/igem/pages/bio-bg.png); 

               border-bottom: none;

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

               box-shadow: 0px 1px 0px #fff, 0 3px 5px #7d8ca4 inset;

max-height: 1000px; 

               border-bottom: 1px solid #ccc;
               margin: 0 10px 20px;

}

.personen .bioline p:first-child{ padding: 20px 0; }

.personen .bioline p { 

   font-family: 'Source Sans Pro';
   font-size: 14px;
   line-height: 18px;
   text-align: left;

}

/* Pages

*/
  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 .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;
       } 
   #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 span.ref {position: absolute; left: -30px;}

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

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

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