Team:Wageningen UR/Templates/style.css
From 2013.igem.org
Karrenbelt (Talk | contribs) |
Karrenbelt (Talk | contribs) |
||
Line 629: | Line 629: | ||
height:21px; | height:21px; | ||
display:inline-block;} | display:inline-block;} | ||
+ | |||
+ | #videolink { | ||
+ | display: block; | ||
+ | position: relative; | ||
+ | width: 300px; | ||
+ | margin: 0 auto; | ||
+ | line-height: 40px; | ||
+ | border-radius: 4px; | ||
+ | border: 10px solid rgba(255,255,255,0.5); | ||
+ | color: #fff; | ||
+ | text-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 */ | ||
+ | } | ||
+ | |||
+ | #videolink:hover { | ||
+ | text-shadow: 0 1px #000; | ||
+ | background: rgb(19,162,102); /* Old browsers */ | ||
+ | /* IE9 SVG, needs conditional override of 'filter' to 'none' */ | ||
+ | background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzEzYTI2NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2MmU1OTEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); | ||
+ | background: -moz-linear-gradient(top, rgb(19,162,102) 0%, rgb(98,229,145) 100%); /* FF3.6+ */ | ||
+ | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(19,162,102)), color-stop(100%,rgb(98,229,145))); /* Chrome,Safari4+ */ | ||
+ | background: -webkit-linear-gradient(top, rgb(19,162,102) 0%,rgb(98,229,145) 100%); /* Chrome10+,Safari5.1+ */ | ||
+ | background: -o-linear-gradient(top, rgb(19,162,102) 0%,rgb(98,229,145) 100%); /* Opera 11.10+ */ | ||
+ | background: -ms-linear-gradient(top, rgb(19,162,102) 0%,rgb(98,229,145) 100%); /* IE10+ */ | ||
+ | background: linear-gradient(to bottom, rgb(19,162,102) 0%,rgb(98,229,145) 100%); /* W3C */ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#13a266', endColorstr='#62e591',GradientType=0 ); /* IE6-8 */ | ||
+ | } | ||
+ | |||
#overlay { | #overlay { |
Revision as of 21:06, 30 September 2013
/* This will be our main css file added to the head with jquery's append() */
/* Reset Globals
*/
body, html, #globalWrapper, #content, p { background: transparent; margin: 0; padding: 0; border: 0 none transparent;
font-family: 'Open Sans', sans-serif;
font-size: 1em;
width: 100%;}
body {
background-color: #f1f1f1;
}
ol, ul, li {
list-style: none; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-padding-start: 0; margin: 0;}
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a {color: #333; text-decoration: none;} a:visited {color: #333;text-decoration: none;} a:hover {text-decoration: none; color: #0d9c64;}
img, embed, object, video {max-width: 100%;}
.clearfix {
display: block; width: 100%; clear: both;
}
/* Fonts
*/
@import url('http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,latin-ext');
/* Overwrite the css for the top part of the page
*/
- 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; box-shadow: 0 0 5px #888; 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 .menucenter{position: relative; display: block; line-height: 80px;}
- topmenu .menuleft {position: absolute; line-height: 76px; 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 a {display:block; height: 79px; padding: 0 12px 0 8px;} #topmenu .menucenter li:hover a {padding: 0 11px 0 9px}
- topmenu .menuright {position: absolute; display: block; line-height: 80px; right: 5.46878%; top: 0; z-index: 3;}
- topmenu .menuright a {display:block; height: 80px;}
- 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: 79px; left: 0;}
ul.subs li:first-child {padding-left: 5px; background:url('http://beoplay.com/resources/sbv-custom/img/megamenu/mm_divider.png') no-repeat right center, url('http://beoplay.com/resources/sbv-custom/img/megamenu/mm_divider.png') no-repeat left center; } ul.subs li {
display:inline-block; width: 10%; font-family: 'Source Sans Pro', sans-serif; font-size:13px; vertical-align: top; padding: 0 5px 0 0; background: url('http://beoplay.com/resources/sbv-custom/img/megamenu/mm_divider.png') no-repeat right center;}
ul.subs li:hover {
background: url('http://beoplay.com/resources/sbv-custom/img/megamenu/mm_hover_bg.png') no-repeat top right; background-size: cover; margin: 0 0 0 -6px; padding: 0 5px 0 6px;
} ul.subs li:first-child:hover {padding: 0 5px 0 4px; margin-left: 1px; } ul.subs li a {
display: block; padding: 40px 0 0; height: 120px; line-height: 16px;
}
ul.subs li a img {padding-bottom: 10px;}
ul.subs li .selflink img {padding-bottom: 10px;} ul.subs .selflink {display:block; font-weight: normal !important; color: #0d9c64; cursor: default; padding: 40px 0 0; height: 120px; line-height: 16px;}
/* Slider
*/
.slider {
display: block; background: url('https://static.igem.org/mediawiki/2013/f/f5/Sliderlogo.png') center center no-repeat; background-size: 369px 350px; width: 100%; height: 300px;
} .timeliner{ margin:0; padding:0; position:relative; display:none; } .timeliner .slide{ margin:0; padding:0; list-style:none; overflow:hidden; position:absolute; display:block; } .timeliner .timeline{ display:block; position:absolute; z-index:2; list-style:none; } .timeliner .innertimeline{ position:absolute; bottom:0; z-index:3; overflow:hidden; } .timeliner .timedisplay{ position:absolute; text-align:right; cursor:default; white-space:nowrap; } .timeliner .node{ position:absolute; z-index:4; cursor:pointer; } .timeliner .tooltip{ position:absolute; white-space:nowrap; display:block !important; } .timeliner .pause, .timeliner .play, .timeliner .previous, .timeliner .next{ position:absolute; list-style:none; z-index:3; cursor:pointer; } .timeliner .previous, .timeliner .next{ z-index:2; } .timeliner img{ vertical-align:bottom }
- 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 */
- 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{
} /* The previous button */
- example3 .previous,
- 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 */
- example3 .next{
left:auto !important; right:0 !important; background-position:-31px 0
}
- 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;}
- 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;
}
- example3 li:nth-child(10){
background: url('http://beauvillemedia.nl/igem/slide-chromoproteins.png') center center no-repeat; background-size: cover;
}
/* Main content area
*/
- wrapper {
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; 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;
}
- 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;
}
- wrapper .video-social .video iframe {
position: absolute; left: 50%; margin-left: -216px; top: 20px;
}
- 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;
}
- 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 */
}
- 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 */ }
- wrapper .video-social .social .social-buttons {display: block; position:relative; width: 320px; margin: 0 auto;}
- 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;}
- wrapper .video-social .social .social-buttons .btn:hover {box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .2);}
- wrapper .video-social .social .social-buttons .btn:nth-child(3) {margin-right: 0px;}
- wrapper .video-social .social .social-buttons .facebookbtn {background: #fff url('http://beauvillemedia.nl/igem/facebookbtn.png') center center no-repeat;}
- wrapper .video-social .social .social-buttons .twitterbtn {background: #fff url('http://beauvillemedia.nl/igem/twitterbtn.png') center center no-repeat;}
- wrapper .video-social .social .social-buttons .emailbtn {background: #fff url('http://beauvillemedia.nl/igem/emailbtn.png') center center no-repeat;}
- wrapper .video-social .social .follow {
display: block; position: relative; width: 320px; margin: 16px auto 0; text-align: left;
}
- 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;}
- wrapper a.blok:hover {
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .2);
}
- wrapper a.blok p {
padding: 0 16px 16px; -moz-box-sizing: border-box;
box-sizing: border-box; }
- wrapper .blok:nth-child(3n+3){margin-right: 0;}
- wrapper .blok .medalcontent {padding: 0 15px 15px 75px;}
- 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;}
- wrapper .blok .medalcontent p {
position: relative; font-family: 'Source Sans Pro'; font-size: 14px;}
- wrapper .blok .medalcontent p.yes {}
- 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;}
- wrapper .blok .medalcontent p.no {}
- 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;}
- videolink {
display: block; position: relative; width: 300px; margin: 0 auto; line-height: 40px; border-radius: 4px; border: 10px solid rgba(255,255,255,0.5); color: #fff; text-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 */ }
- videolink:hover {
text-shadow: 0 1px #000; background: rgb(19,162,102); /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzEzYTI2NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2MmU1OTEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgb(19,162,102) 0%, rgb(98,229,145) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(19,162,102)), color-stop(100%,rgb(98,229,145))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgb(19,162,102) 0%,rgb(98,229,145) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgb(19,162,102) 0%,rgb(98,229,145) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgb(19,162,102) 0%,rgb(98,229,145) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgb(19,162,102) 0%,rgb(98,229,145) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#13a266', endColorstr='#62e591',GradientType=0 ); /* IE6-8 */ }
- overlay {
position: fixed; display: block; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.4); z-index: 10000; opacity: 0; cursor:url('images/close-icon.png'),url('images/close-icon.cur'),pointer; }
- overlay > .video1 {
position: relative; width: 50%; height: 50%; margin: auto; }
/* 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 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
*/
- 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;}
/* Team
*/
.teamtop {
position: relative;
}
.teamtop h1 {
position: absolute; bottom: 0; left: 0; display: block; width: 100%; font-family: 'Cabin'; text-align: center; color: #fff; background: rgba(0,0,0,.3); margin: 0 !important; padding: 0; line-height: 60px; border-bottom: none;
}
- wrapper.team {
position: relative; box-shadow: 0px -5px 10px -6px #000; z-index: 1; width: 100% !important; padding: 0;
}
- wrapper.team h2 {
font-family: 'Cabin'; color: rgb(19,162,102); padding: 0; text-align: center;
}
- wrapper.team .hr {
display: block; clear: both; margin: 0 auto 10px; width: 85%; height: 1px; background: #e4e4e4; background: -webkit-linear-gradient(left, rgba(228, 228, 228, 0) 0%, #e4e4e4 20%, #e4e4e4 80%, rgba(228, 228, 228, 0) 99%); background: -moz-linear-gradient(left, rgba(228, 228, 228, 0) 0%, #e4e4e4 20%, #e4e4e4 80%, rgba(228, 228, 228, 0) 99%); background: -ms-linear-gradient(left, rgba(228, 228, 228, 0) 0%, #e4e4e4 20%, #e4e4e4 80%, rgba(228, 228, 228, 0) 99%); background: -o-linear-gradient(left, rgba(228, 228, 228, 0) 0%, #e4e4e4 20%, #e4e4e4 80%, rgba(228, 228, 228, 0) 99%); background: linear-gradient(left, rgba(228, 228, 228, 0) 0%, #e4e4e4 20%, #e4e4e4 80%, rgba(228, 228, 228, 0) 99%); }
.photoline .personen {
padding: 0 5.46878%;
}
.photoline .personen .persoon {
display: block; position: relative; float: left; width: 19%; margin: 50px 8% 0 0; text-align: center; }
.photoline .personen .persoon:nth-child(4){
margin-right: 0;
}
.photoline .personen .persoon:hover { cursor: pointer; } .photoline .personen .persoon:hover .img{ border-color: rgba(63,167,87,.3); } .photoline .personen .persoon .img { display: block; position: relative; border-radius: 15px; overflow: hidden; border: 10px solid rgba(255,255,255,0.5); box-shadow: 0px -1px 1px 0px rgb(233, 233, 233), 1px 0px 1px 0px rgb(221, 221, 221), 2px 0px 1px 0px rgb(247, 247, 247), 0px 1px 1px 0px rgb(201, 201, 201), 0px 2px 1px 0px rgb(229, 229, 229), 0px -1px 1px 0px rgb(242, 242, 242) inset, -1px 0px 1px 0px rgb(221, 221, 221), -2px 0px 1px 0px rgb(247, 247, 247); -moz-box-sizing: border-box; box-sizing: border-box; } .photoline .personen .persoon .img .inset { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; -webkit-box-shadow: inset 0 1px 10px rgba(0, 0, 0, 0.7); -moz-box-shadow: inset 0 1px 10px rgba(0, 0, 0, 0.7); -ms-box-shadow: inset 0 1px 10px rgba(0, 0, 0, 0.7); -o-box-shadow: inset 0 1px 10px rgba(0, 0, 0, 0.7); box-shadow: inset 0 1px 10px rgba(0, 0, 0, 0.7); } .photoline .personen .persoon .img img {display:block;} .photoline .personen .persoon .img img.normal {position: relative; z-index:1;} .photoline .personen .persoon .img img.alt {position: absolute; z-index:0; top:0;}
.photoline .personen .persoon:hover .img img.normal {opacity: 0;} .photoline .personen .persoon.on .img img.normal {opacity:0;} .photoline .personen .persoon.on .img{border-color: #0d9c64;}
.photoline .personen .persoon h3 { font-family: 'Cabin'; font-size: 14px !important; letter-spacing: 0px !important; } .photoline .personen .persoon:hover h3, .photoline .personen .persoon.on h3 { color: #0d9c64; } .photoline .personen .persoon .bio { display: none; }
.photoline .personen .persoon .function {
line-height: 16px; padding-bottom: 0 !important;
}
.photoline .personen .persoon.on .function{
padding-bottom: 30px !important;
}
.photoline .personen .persoon.on .name.padding{
padding-bottom: 30px;
}
.photoline .personen .persoon img.driehoek {display: none;} .photoline .personen .persoon.on img.driehoek { display: block; position: absolute; left: 50%; margin-left: -20px; bottom: -8px; }
.photoline .bioline { display: block; max-height: 0px; width: 89.06244%;
padding: 0 5.46878%;
margin: 0 0 10px; clear: both;
color: #dedede; background: none; border-bottom: none;
-webkit-transition: max-height .5s linear; -moz-transition: max-height .5s linear; transition: max-height .5s linear; } .photoline .bioline.on {
box-shadow: inset 0 8px 8px -6px #000, inset 0 -8px 8px -6px #000;
max-height: 600px;
height: auto; border-bottom: 1px solid #ccc; padding: 20px 5.46878%; background: url('https://static.igem.org/mediawiki/2013/9/91/Biobg.png');
}
.photoline .bioline p:first-child{ padding: 20px 0 16px 70px ; }
.photoline .bioline p {
display:block; width: 100%; position: relative; font-family: 'Source Sans Pro'; font-size: 14px; line-height: 20px; text-align: justify; padding-left: 70px; -moz-box-sizing: border-box; box-sizing: border-box;
}
.photoline .bioline p a {
background: none !important; color: #dedede;
}
.photoline .bioline p a:hover {color: #fff;}
.photoline p.biocontact:before {
content: ""; display:block; width: 50px; height: 50px; position: absolute; left: 0px; background: url('http://beauvillemedia.nl/igem/pages/biocontact.png') left top no-repeat;
}
.photoline p.biotext:before {
content: ""; display:block; width: 50px; height: 50px; position: absolute; left: 0px; background: url('http://beauvillemedia.nl/igem/pages/biobio.png') left top no-repeat;
}
- wrapper .work .desc {
position: absolute; display: block; text-align: center; opacity: 0; background: #fff; transition: all 0.2s linear;
-moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; }
- wrapper .work.tweederden .desc {
left: 2.6785714%; top: 6.6666665%; height: 86.666667%; width: 94.642857%;
}
- wrapper .work.eenderden .desc {
left: 5.6603775%; top: 6.6666665%; height: 86.666667%; width: 88.679245%;
}
- wrapper .work:hover .desc {
opacity: .95;
}
- wrapper .work .desc .text {
position: absolute; text-align: center; top: 36%; width: 100%;
}
.page-title {
display: block; position: relative; margin: 30px auto 0; width: 307px; height: 199px; background: url(http://beauvillemedia.nl/igem/pages/title-bg.png) left top no-repeat;
}
.page-title .icon { display: block; position: relative; width: 120px; height: 100px; margin: 0 auto; padding-top: 30px; } .page-title h1 { position: relative; top: 4px; width: 100%; text-align: center; border: none; color: #fff; font-family: 'Cabin'; font-size: 20px; text-shadow: 1px 1px #000; }
- paperwrapper {
display:block; position: relative; width: 800px; margin: 30px auto 40px; padding-bottom: 20px; background: url(http://beauvillemedia.nl/igem/pages/footerbg.png) bottom center no-repeat;
}
#paperwrapper .top { display: block; width: 100%; height: 130px; background: url(http://beauvillemedia.nl/igem/pages/topbg.png) top center no-repeat; } #paperwrapper h2 { width: 100%; color: #fff; text-align: center; font-family: 'Cabin'; font-size: 20px; letter-spacing: 1px; text-shadow: 1px 1px #000; border-bottom: none; background: url(http://beauvillemedia.nl/igem/pages/heading-bg.png) left top repeat-x; }
#paperwrapper h2 .left{ display: block; width:9px; height: 36px; float:left; background: url(http://beauvillemedia.nl/igem/pages/heading-bg-left.png) left bottom no-repeat; }
#paperwrapper h2 .right{ display: block; width:9px; height: 36px; float:right; background: url(http://beauvillemedia.nl/igem/pages/heading-bg-right.png) left bottom no-repeat; }
#paperwrapper .top p { position: relative; width: auto; font-size: 14px; font-family: 'Source Sans Pro'; padding: 30px 30px 0 40px; } #paperwrapper .top p.nopadding { padding: 0 30px 0 40px; }
#paperwrapper .content { background: url(http://beauvillemedia.nl/igem/pages/contentbg.png) top center; text-align: center; }
#paperwrapper .content.notop {margin-top:-104px;} #paperwrapper .content > p { position: relative; width: auto; text-align: left; font-size: 14px; font-family: 'Source Sans Pro'; padding: 0 30px 16px 40px; column-count:2; column-gap:40px; -moz-column-count:2; -moz-column-gap:40px; -webkit-column-count:2; -webkit-column-gap:40px;} #pagewrapper .photoline { width: 800px; margin-left: -75px; text-align: center; background: #fff; border-radius: 4px; padding: 20px 0 10px 0; margin-bottom: 10px; box-shadow: 0px -1px 1px 0px rgb(233, 233, 233), 1px 0px 1px 0px rgb(221, 221, 221), 2px 0px 1px 0px rgb(247, 247, 247), 0px 1px 1px 0px rgb(201, 201, 201), 0px 2px 1px 0px rgb(229, 229, 229), 0px -1px 1px 0px rgb(242, 242, 242) inset, -1px 0px 1px 0px rgb(221, 221, 221), -2px 0px 1px 0px rgb(247, 247, 247); -moz-box-sizing: border-box; box-sizing: border-box; }
/* Pages
*/
.tournav {
height: 74px; background: url('https://static.igem.org/mediawiki/2013/9/92/Footerline.png') left bottom repeat-x;
}
.tournav ul {
width: 89.06244%; margin: 0 5.46878%;
}
.tournav ul li { display: block; position: relative; float: left; width: 11.11111111%; padding-top: 42px; font-size: 10px; text-align: center; line-height: 14px; background: url('https://static.igem.org/mediawiki/2013/a/a1/Progress2.png') center top no-repeat; } .tournav ul li:nth-child(9){ background: url('https://static.igem.org/mediawiki/2013/1/1c/Progress3.png') center top no-repeat; } .tournav ul .currentfirst{ background: url('https://static.igem.org/mediawiki/2013/6/64/Progress1.png') center top no-repeat; color: rgb(19,162,102); }
.tournav ul .fillfirst { background: url('https://static.igem.org/mediawiki/2013/2/25/Progress1fill.png') center top no-repeat !important; } .tournav ul .fill { background: url('https://static.igem.org/mediawiki/2013/b/b0/Progress2fill.png') center top no-repeat !important; } .tournav ul .current { background: url('https://static.igem.org/mediawiki/2013/1/1e/Progress2current.png') center top no-repeat !important; color: rgb(19,162,102); } .tournav ul .currentlast{ background: url('https://static.igem.org/mediawiki/2013/2/2a/Progress3current.png') center top no-repeat !important; color: rgb(19,162,102); }
.pagina-titel {position: relative;}
.pagina-titel h1 {
width: 100%; margin: 30px 0 0; text-align: center; border: none; color: rgb(19,162,102); font-family: 'Cabin'; font-size: 40px; text-shadow: 1px 1px #000;
}
.pagina-titel h2 {
width: 100%; text-align: center; border: none; font-size: 20px; font-family: 'Cabin';
}
.pagina-titel img {
position: absolute; top: -15px;
}
- wrapper .eenderde {
display: block; position: relative; float: left; width: 30.701756%; margin-right: 3.947368%;
}
- wrapper .tweederde {
display: block; position: relative; float: left; width: 65.350876%;
}
- wrapper .work.tweederden {
display: block; position: relative; float: left; width: 65.497076%; margin-bottom: 30px;
}
- wrapper .work.tweederden.top {margin-top: 30px;}
- wrapper .work.tweederden.margin {margin-right: 3.5087719%;}
- wrapper .work.eenderden {
display: block; position: relative; float: left; width: 30.994152%; margin-bottom: 30px;
}
- wrapper .work.eenderden.top {margin-top: 30px;}
- wrapper .work.eenderden.margin{margin-right: 3.5087719%;}
- wrapper .eenderde ul {
position: fixed; left: 5.46878%; top: 120px;}
- wrapper .eenderde ul li {
display: block; width: auto; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; text-align: right; padding: 10px;}
- wrapper .eenderde ul li:last-child {border-bottom: none;}
- wrapper .eenderde ul li a {opacity: .7;}
- pagewrapper {
display: block; position: relative; width: 60%; padding: 30px 0; margin: 0 auto; background: url('http://beauvillemedia.nl/igem/shadow-radial-reverse.png') 50% 100% no-repeat,url('http://beauvillemedia.nl/igem/images/gradient-bottom.png') 50% 100% no-repeat; max-width: 650px }
#pagewrapper h2 { width: 100%; color: rgb(19,162,102); font-family: 'Cabin'; font-size: 20px; letter-spacing: 1px; border-bottom: none; padding: 0; margin: 0; } #pagewrapper h3 { width: 100%; font-family: 'Cabin'; font-size: 16px; letter-spacing: 1px; } #pagewrapper p { position: relative; font-family: 'Source Sans Pro'; font-size: 14px; padding-bottom: 14px; text-align: justify; }
#pagewrapper p.caption { display:block; position: relative; width: 100%; text-align: center; top:-20px; padding-bottom: 14px; }
#pagewrapper span.ref {position: absolute; left: -30px;} #pagewrapper span.ref2 {position: absolute; left: -16px;}
#pagewrapper a { color: rgb(228,108,10); } #pagewrapper a:hover { color: rgb(19,162,102); }
#pagewrapper > img { display: block; margin: 24px auto 40px; }
- pagewrapper.hostengineering h2 #Introduction,
- pagewrapper.hostengineering h2:nth-of-type(3) .mw-headline,
- pagewrapper.hostengineering h2:nth-of-type(7) .mw-headline,
- pagewrapper.hostengineering h2:nth-of-type(11) .mw-headline,
- pagewrapper.hostengineering h2:nth-of-type(12) .mw-headline,
- pagewrapper.hostengineering h2:nth-of-type(14) .mw-headline {font-size: 26px;text-shadow: 1px 1px #000;}
/* 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;}
/* Notebook
*/
- filters {
display: block; width: 89.06244%; padding: 0 5.46878%; height: 80px; background: url() left top repeat-x; background-size: contain;
}
- filters .bysubject {
text-align: center; font-family: 'Source Sans Pro'; font-size: 11px; text-transform: uppercase; margin: 0;
}
- 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; }
- filters .bydate {
display: block; position: fixed; top: 180px; left: 5.46878%; margin: 0; width:36px; height: 500px; z-index: 4;
}
- filters .bydate .iconsweek {
display: block; position: relative; z-index: 4; width:12px; margin:12px 12px 0;
}
- 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;
}
- filters .bydate .iconsweek a.month {
margin-top: 15px;
}
- 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;
}
- 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;
}
- 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
}
- filters .bydate .iconsweek a:hover span {display:block;z-index: 50; color: #fff;}
- filters .bydate .iconsweek .sep {
display: block; position: relative; width: 34px; height: 1px; border-bottom: 1px solid #d4d4d4; margin: 0 0 6px -11px; background: #fff;
}
- 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
}
- filters .bydate .months .spring {margin-left: 22px;}
- filters .bydate .months .june {margin-left: 59px;}
- filters .bydate .months .july {margin-left: 66px;}
- filters .bydate .months .aug {margin-left: 58px;}
- filters .bydate .months .sept {margin-left: 32px;}
- 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;
}
- 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;
}
- 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;
}
- container {
display: block; margin: 0 auto 30px;
width: auto;
min-height: 500px; max-width: 960px;
}
- container > h2 {
padding: 0;
-webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-start: 0; -webkit-margin-end: 0;
margin: 0; border: none;
}
- container h2:nth-of-type(2) {display:none;}
- container > h2 .editsection {position: fixed; top: 178px; right: 5.46878%; font-size: 12px;}
- container > h2 .mw-headline {display:none;}
- 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; }
- container .item:nth-child(3n+4) {
clear: left; }
- container .item:hover{box-shadow: 0 0 10px #666666;}
- container .item .icon {
display: block; position: relative; margin: -31px auto 0; width: 64px; height: 64px; z-index: 2;
}
- 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;
}
- container .item.date .midden {
position: absolute; width: 100%; top: 50%; margin-top: -34px; text-align: center;
}
- container .item.date .midden * {color: #fff;}
- container .item .icon.wetlab {background: url(http://beauvillemedia.nl/igem/diamond-wetlab.png) center center no-repeat;}
- container .item .icon.drylab {background: url(http://beauvillemedia.nl/igem/diamond-drylab.png) center center no-repeat;}
- container .item .icon.modeling {background: url(http://beauvillemedia.nl/igem/diamond-modeling.png) center center no-repeat;}
- container .item .icon.human {background: url(http://beauvillemedia.nl/igem/diamond-human.png) center center no-repeat;}
- container .item .icon.other {background: url(http://beauvillemedia.nl/igem/diamond-other.png) center center no-repeat;}
- container .item .content {
padding: 0px 15px 15px;
}
- 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;
}
- container .item .content p.date {
text-align: center; padding-bottom: 10px;
}
- container .item .content p {
font-family: 'Source Sans Pro'; font-size: 14px;
}