Team:Wageningen UR/Templates/style.css

From 2013.igem.org

Revision as of 11:26, 2 September 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;
       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;
       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;
   } 
   .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;
       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.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;

}

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