Team:Wageningen UR/Templates/style.css

From 2013.igem.org

(Difference between revisions)
Line 466: Line 466:
#wrapper .blok:nth-child(3n+4){margin-right: 0;}
#wrapper .blok:nth-child(3n+4){margin-right: 0;}
 +
 +
#wrapper .blok .content {padding: 0 15px 15px;}
 +
#wrapper .blok .content h2 {}
 +
#wrapper .blok .content p.yes {}
 +
#wrapper .blok .content p.no {}
/* Sponsors
/* Sponsors

Revision as of 17:24, 14 August 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 {text-decoration: none; color: #333;} a:visited {text-decoration: none; color: #333;} 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{

width:43px; height:50px; } /* The previous button */

  1. example3 .previous{

background:#fff url(http://friquemag.net/demos/timeliner/images/previous.gif) center no-repeat; -webkit-border-radius:6px 0 0 6px; -moz-border-radius:6px 0 0 6px; border-radius:6px 0 0 6px; } /* The next button */

  1. example3 .next{

background:#fff url(http://friquemag.net/demos/timeliner/images/next.gif) center no-repeat; -webkit-border-radius:0 6px 6px 0; -moz-border-radius:0 6px 6px 0; border-radius:0 6px 6px 0; }

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

} .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;
       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 .blok { 
   position: relative;
   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 .blok:nth-child(3n+4){margin-right: 0;}
  1. wrapper .blok .content {padding: 0 15px 15px;}
  2. wrapper .blok .content h2 {}
  3. wrapper .blok .content p.yes {}
  4. wrapper .blok .content p.no {}

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

   #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 .content {
       background: url(http://beauvillemedia.nl/igem/pages/contentbg.png) top center;
       text-align: center;
   }

   .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;
   }
   .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 10px 20px; 

               padding: 0 20px;

clear: both; background: url(http://beauvillemedia.nl/igem/pages/bio-bg.png); box-shadow: 0px 1px 0px #fff, 0 3px 5px #7d8ca4 inset; 

               border-bottom: none;

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

               border-bottom: 1px solid #ccc;

}

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

}

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