Team:Wageningen UR/Templates/style.css

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
/* This will be our main css file added to the head with jquery's append() */
/* 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%;}
 +
 +
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
 +
-------------------------------------------------*/
 +
 +
#p-logo,
 +
#catlinks {display: none;}
 +
 +
#top-section {
 +
position: fixed;
 +
        top: 0;
 +
        width: 100%;
 +
        height: 0;
 +
        border: none;
 +
        z-index: 100;}
 +
 +
#search-controls {display: none;}
 +
 +
#menubar {
 +
display: table-cell;
 +
background: transparent;
 +
        font-size: 11px;}
 +
#top-section #menubar ul {
 +
        -webkit-margin-before: 2px;
 +
        -webkit-margin-after: 2px;
 +
        -webkit-padding-start: 40px;
 +
        margin: .3em 0 0 1.5em;}
 +
#menubar.left-menu {width: 100%; padding-top: 6px;}
 +
 +
#menubar.right-menu {text-align: right; padding-top: 6px;}
 +
 +
#menubar * {
 +
color: transparent !important;
 +
background: transparent !important;}
 +
 +
#top-section:hover #menubar * {color: #333 !important;}
 +
 +
#top-section #menubar ul li a:hover {color: #0d9c64 !important; text-decoration: none;}
 +
 +
#top-section:hover #menubar.left-menu {background: rgba(255, 255, 255, 0.75) !important; border-bottom: 1px solid #0d9c64;}
 +
 +
/* Navigation - Topmenu
 +
-------------------------------------------------*/
 +
 +
#topmenu {
 +
        display: block;
 +
        position: fixed;
 +
        top: 0;
 +
        width: 89.06244%;
 +
        padding: 0 5.46878%;
 +
        height: 80px;
 +
        background: url('https://static.igem.org/mediawiki/2013/1/1d/Top-gradient.png') #f1f1f1 repeat-x left top;
 +
        border-top: 1px solid #0d9c64;
 +
        z-index: 10;}
 +
 +
#topmenu .selflink {font-weight: normal !important; color: #0d9c64; cursor: default; padding: 0 12px 0 8px;}
 +
#topmenu .menucenter li:hover .selflink {padding: 0 11px 0 9px}
 +
 +
#topmenu .menuleft,
 +
#topmenu .menucenter,
 +
#topmenu .menuright {position: relative; display: block; line-height: 76px;}
 +
 +
#topmenu .menuleft {float:left; z-index: 3;}
 +
#topmenu .menuleft a img {position: relative; height: 60px; top: 10px;}
 +
 +
#topmenu .menucenter {
 +
    display:block;
 +
    margin: 0 auto;
 +
    width:100%;
 +
    text-align: center;
 +
    font-size: 0;}
 +
    #topmenu .menucenter li {
 +
        display:inline-block;
 +
       
 +
        margin: 0;
 +
        background: url('https://static.igem.org/mediawiki/2013/c/ca/Top-menu-divider.png') no-repeat right top;
 +
        font-size: 16px;}
 +
    #topmenu .menucenter li:first-child {
 +
        background: url('https://static.igem.org/mediawiki/2013/c/ca/Top-menu-divider.png') no-repeat left top, url('https://static.igem.org/mediawiki/2013/c/ca/Top-menu-divider.png') no-repeat right top;}
 +
    #topmenu .menucenter li:hover {
 +
        background: url('https://static.igem.org/mediawiki/2013/0/03/Top-menu-hover.png') repeat-x top left;
 +
        border-left:1px solid #ccc;
 +
        border-right:1px solid #ccc;
 +
        margin: 0 0 0 -2px;}
 +
        #topmenu .menucenter li:hover a {padding: 0 11px 0 9px}
 +
        #topmenu .menucenter li a {display:block; height: 80px; padding: 0 12px 0 8px;}
 +
 +
#topmenu .menuright {float:right; top:-80px; z-index: 3;}
 +
 +
#topmenu ul, topmenu li {
 +
    -webkit-margin-before: 0;
 +
    -webkit-margin-after: 0;
 +
    -webkit-padding-start: 0;}
 +
 +
#bodyContent{padding: 81px 0 0px;}
 +
 +
/* Navigation - Submenu
 +
-------------------------------------------------*/
 +
 +
ul.subs {
 +
    display: block;
 +
    position: fixed;
 +
    top: -165px;
 +
    left: 0;
 +
    width: 100%;
 +
    height: 160px;
 +
    box-shadow: 0 0 5px #ccc;
 +
    background: url('https://static.igem.org/mediawiki/2013/2/28/Sub-bg.png') repeat-x top left;
 +
    text-align: center;
 +
    z-index: 5;
 +
      -webkit-transition: all .3s ease-in-out;
 +
          -moz-transition: all .3s ease-in-out;
 +
                    transition: all .3s ease-in-out;}
 +
 +
ul.subs.active {
 +
    top: 80px;
 +
    left: 0;}
 +
 +
ul.subs li:first-child {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 a {
 +
    display: block;
 +
    padding: 40px 0 0;
 +
    height: 120px;
 +
    line-height: 16px;
 +
}
 +
 +
ul.subs li a img {padding-bottom: 10px;}
 +
 +
/* 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
 +
}
 +
 +
 +
 +
#example3{
 +
-webkit-box-shadow:0 0 15px #aaa;
 +
  -moz-box-shadow:0 0 15px #aaa;
 +
            box-shadow:0 0 15px #aaa;
 +
}
 +
/* Each slide */
 +
#example3 .slide{
 +
background:#ccc;
 +
padding:20px;
 +
        -webkit-transition: opacity .7s linear;
 +
          -moz-transition: opacity .7s linear;
 +
                    transition: opacity .7s linear;}
 +
 +
/* The timeline background */
 +
#example3 .timeline{
 +
background:url('http://beauvillemedia.nl/igem/timeline_dot_pattern.png') repeat-x top left;
 +
        background-size: 4px 2px;}
 +
 +
/* The timeline fill bar */
 +
#example3 .innertimeline{
 +
background:#fff;
 +
}
 +
/* The time display */
 +
#example3 .timedisplay{
 +
font:11px verdana,sans-serif;
 +
padding:3px 5px;
 +
}
 +
/* Each node */
 +
#example3 .node{
 +
        top: -20px;
 +
background: rgba(255,255,255, .7);
 +
width:2px;
 +
height:10px;}
 +
#example3 .node .tooltip {opacity: .6;}
 +
 +
/* The active node */
 +
#example3 .node_active{ background:#fff;}
 +
#example3 .node_active .tooltip {opacity: 1;}
 +
 +
/* Each node tooltip */
 +
#example3 .tooltip{
 +
        font-size: 12px;
 +
        color: #fff;}
 +
/* The time display inside a tooltip */
 +
#example3 .tooltiptime{
 +
font-size:8pt;
 +
font-weight:bold;
 +
}
 +
/* The pause/play button */
 +
#example3 .pause, #example3 .play{
 +
width: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 */
 +
#example3 .pause{
 +
background:#fff url(http://friquemag.net/demos/timeliner/images/pause.gif) center no-repeat;
 +
}
 +
/* The play button */
 +
#example3 .play{
 +
background:#fff url(http://friquemag.net/demos/timeliner/images/play.gif) center no-repeat;
 +
}
 +
/* The previous/next buttons */
 +
#example3 .previous, #example3 .next{
 +
width:43px;
 +
height:50px;
 +
}
 +
/* The previous button */
 +
#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 */
 +
#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;
 +
}
 +
 +
#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;}
 +
 +
#example3 li:nth-child(6){
 +
      background: url('http://beauvillemedia.nl/igem/slide2.png') center center no-repeat;
 +
}
 +
 +
#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
 +
-------------------------------------------------*/
#wrapper {
#wrapper {
-
    background: #f1f1f1;
+
        width: 89.06244%;
 +
        padding: 0 5.46878%;
 +
        font-family: 'Source Sans Pro';
 +
}
 +
 
 +
#wrapper p {
 +
        font-family: 'Source Sans Pro';
 +
        font-size: 14px;
 +
        padding-bottom:1em;
 +
}
 +
 
 +
#wrapper .intro {
 +
        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;
 +
}
 +
/* Sponsors
 +
-------------------------------------------------*/
 +
 
 +
#sponsors {
 +
        width: 89.06244%;
 +
        padding: 20px 5.46878%;
 +
        box-shadow: 0px -1px 1px 0px rgb(233, 233, 233), 1px 0px 1px 0px rgb(221, 221, 221), 2px 0px 1px 0px rgb(247, 247, 247), 0px 1px 1px 0px rgb(201, 201, 201), 0px 2px 1px 0px rgb(229, 229, 229), 0px -1px 1px 0px rgb(242, 242, 242) inset, -1px 0px 1px 0px rgb(221, 221, 221), -2px 0px 1px 0px rgb(247, 247, 247);
 +
        background: #f1f1f1;
 +
        text-align: center;
}
}
 +
 +
#sponsors h2 {
 +
        font-size: 20px;
 +
        font-weight: light;
 +
        letter-spacing: 1px;
 +
        border-bottom: none;
 +
        margin: 0;
 +
        padding: 0 0 20px;
 +
        font-family: 'Cabin', sans-serif;}
 +
 +
        #sponsors .sponsor {
 +
                position:relative;
 +
                border: 1px solid #d5d5d5;
 +
                border-radius: 3px;
 +
                box-shadow: inset 0 1px 0 0 #fff;
 +
                margin: 0 10px;
 +
                padding: 0 !important;
 +
                display: inline-block;
 +
                width: 160px;
 +
                height: 160px;
 +
                background: #f2f2f2 !important;
 +
                background-image: none !important;
 +
                -webkit-transition: all .3s ease-in-out;
 +
                    -moz-transition: all .3s ease-in-out;
 +
                              transition: all .3s ease-in-out;}
 +
 +
        #sponsors .sponsor:hover {
 +
                background: #fafafa;
 +
                box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .2);
 +
                border-color: #fafafa;
 +
        }
 +
 +
/* Footer
 +
-------------------------------------------------*/
 +
 +
#footer-box {
 +
        position: relative;
 +
        margin:0;
 +
        width: 89.06244%;
 +
        height: 48px;
 +
        padding: 0 5.46878%;
 +
        background: #f1f1f1 url('https://static.igem.org/mediawiki/2013/9/92/Footerline.png') repeat-x center top;
 +
        border: none;
 +
        z-index: 2;}
 +
 +
    #footer-box #footer {
 +
            color: #333;
 +
            font-size: 10px;
 +
            width: 100%;
 +
    }
 +
 +
        #footer #f-list li {
 +
                margin: 0 10px;
 +
        }
 +
 +
        #footer #f-list li a {
 +
                line-height: 48px;
 +
        }
 +
#f-poweredbyico {position:relative;top: 9px;}
 +
#f-copyrightico {position:relative;top: 9px;}
 +
 +
 +
 +
/* Edit pages
 +
-------------------------------------------------*/
 +
 +
#wrapper h2 {
 +
        font-size: 20px;
 +
        font-weight: light;
 +
        letter-spacing: 1px;
 +
        border-bottom: none;
 +
        margin: 0;
 +
        padding: 0 0 20px;
 +
        font-family: 'Cabin', sans-serif;
 +
        -webkit-margin-before: 0;
 +
        -webkit-margin-after: 0;}
 +
 +
#wrapper.backend ul li {
 +
        font-size: 14px;
 +
        line-height: 1.5em;
 +
        list-style: circle;
 +
        margin-left: 30px;}

Revision as of 19:39, 28 July 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%;}

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 .menuleft,
  2. topmenu .menucenter,
  3. topmenu .menuright {position: relative; display: block; line-height: 76px;}
  1. topmenu .menuleft {float:left; 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:hover a {padding: 0 11px 0 9px}
       #topmenu .menucenter li a {display:block; height: 80px; padding: 0 12px 0 8px;}
  1. topmenu .menuright {float:right; top:-80px; 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: 80px;
   left: 0;}

ul.subs li:first-child {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 a { 

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

}

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

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

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


/* 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;}
Retrieved from "http://2013.igem.org/Team:Wageningen_UR/Templates/style.css"