|
|
Line 14: |
Line 14: |
| })(); </script> | | })(); </script> |
| <style type="text/css"> | | <style type="text/css"> |
- | /* 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 {
| |
- | 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;}
| |
| | | |
| </style> | | </style> |