Line 1: | Line 1: | ||
− | |||
− | |||
<html> | <html> | ||
+ | <script> | ||
+ | ( function( $ ) { | ||
+ | $( document ).ready(function() { | ||
+ | $('#dropdown').prepend(''); | ||
+ | var activeElement = $('#dropdown>ul>li:first'); | ||
− | + | $('#dropdown>ul>li').each(function() { | |
− | + | if ($(this).hasClass('active')) { | |
− | + | activeElement = $(this); | |
− | + | } | |
− | + | }); | |
− | + | ||
− | + | ||
− | + | ||
+ | var posLeft = activeElement.position().left; | ||
+ | var elementWidth = activeElement.width(); | ||
+ | posLeft = posLeft + elementWidth/2 -6; | ||
+ | if (activeElement.hasClass('has-sub')) { | ||
+ | posLeft -= 6; | ||
+ | } | ||
+ | |||
+ | $("#dropdown>ul>li").hover(function() { | ||
+ | element = $(this); | ||
+ | var w = element.width(); | ||
+ | if ($(this).hasClass('has-sub')) | ||
+ | { | ||
+ | leftPos = element.position().left + w/2 - 12; | ||
+ | } | ||
+ | else { | ||
+ | leftPos = element.position().left + w/2 - 6; | ||
+ | }; | ||
+ | }); | ||
+ | |||
+ | $('#dropdown>ul').prepend('<li id="menu-button"><a>Menu</a></li>'); | ||
+ | $( "#menu-button" ).click(function(){ | ||
+ | if ($(this).parent().hasClass('open')) { | ||
+ | $(this).parent().removeClass('open'); | ||
+ | } | ||
+ | else { | ||
+ | $(this).parent().addClass('open'); | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | // ROTATING PORIFI | ||
+ | |||
+ | var target = $("img[alt^='Porifi']").attr('src'); | ||
+ | var labTarg = target.replace('4/4f/T--Aalto-Helsinki--Porifi.png', 'd/dc/T--Aalto-Helsinki--Porifi-lab.png'); | ||
+ | var modTarg = target.replace('4/4f/T--Aalto-Helsinki--Porifi.png', '9/90/T--Aalto-Helsinki--Porifi-mod.png'); | ||
+ | var hpTarg = target.replace('4/4f/T--Aalto-Helsinki--Porifi.png', '8/85/T--Aalto-Helsinki--Porifi-hp.png'); | ||
+ | var comTarg = target.replace('4/4f/T--Aalto-Helsinki--Porifi.png', '8/87/T--Aalto-Helsinki--Porifi-community.png'); | ||
+ | var peoTarg = target.replace('4/4f/T--Aalto-Helsinki--Porifi.png', '7/7b/T--Aalto-Helsinki--Porifi-people.png'); | ||
+ | |||
+ | $('#dropdown>ul>li>a.lab').hover(function() { | ||
+ | $("img[alt^='Porifi']").attr("src", labTarg); | ||
+ | }, function() { | ||
+ | $("img[alt^='Porifi']").attr("src", labTarg); | ||
+ | }); | ||
+ | |||
+ | $('#dropdown ul ul li a.lab').hover(function() { | ||
+ | $("img[alt^='Porifi']").attr("src", labTarg); | ||
+ | }, function() { | ||
+ | $("img[alt^='Porifi']").attr("src", labTarg); | ||
+ | }); | ||
+ | |||
+ | $('#dropdown>ul>li>a.mod').hover(function() { | ||
+ | $("img[alt^='Porifi']").attr("src", modTarg); | ||
+ | }, function() { | ||
+ | $("img[alt^='Porifi']").attr("src", modTarg); | ||
+ | }); | ||
+ | |||
+ | $('#dropdown ul ul li a.mod').hover(function() { | ||
+ | $("img[alt^='Porifi']").attr("src", modTarg); | ||
+ | }, function() { | ||
+ | $("img[alt^='Porifi']").attr("src", modTarg); | ||
+ | }); | ||
+ | |||
+ | $('#dropdown>ul>li>a.hp').hover(function() { | ||
+ | $("img[alt^='Porifi']").attr("src", hpTarg); | ||
+ | }, function() { | ||
+ | $("img[alt^='Porifi']").attr("src", hpTarg); | ||
+ | }); | ||
+ | |||
+ | $('#dropdown ul ul li a.hp').hover(function() { | ||
+ | $("img[alt^='Porifi']").attr("src", hpTarg); | ||
+ | }, function() { | ||
+ | $("img[alt^='Porifi']").attr("src", hpTarg); | ||
+ | }); | ||
+ | |||
+ | $('#dropdown>ul>li>a.com').hover(function() { | ||
+ | $("img[alt^='Porifi']").attr("src", comTarg); | ||
+ | }, function() { | ||
+ | $("img[alt^='Porifi']").attr("src", comTarg); | ||
+ | }); | ||
+ | |||
+ | $('#dropdown ul ul li a.com').hover(function() { | ||
+ | $("img[alt^='Porifi']").attr("src", comTarg); | ||
+ | }, function() { | ||
+ | $("img[alt^='Porifi']").attr("src", comTarg); | ||
+ | }); | ||
+ | |||
+ | $('#dropdown>ul>li>a.peo').hover(function() { | ||
+ | $("img[alt^='Porifi']").attr("src", peoTarg); | ||
+ | }, function() { | ||
+ | $("img[alt^='Porifi']").attr("src", peoTarg); | ||
+ | }); | ||
+ | |||
+ | $('#dropdown ul ul li a.peo').hover(function() { | ||
+ | $("img[alt^='Porifi']").attr("src", peoTarg); | ||
+ | }, function() { | ||
+ | $("img[alt^='Porifi']").attr("src", peoTarg); | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | } )( jQuery ); | ||
+ | |||
+ | </script> | ||
− | |||
<style> | <style> | ||
+ | |||
+ | /***************************************************** DEFAULT WIKI SETTINGS ****************************************************/ | ||
+ | |||
+ | /* Clear the default wiki settings */ | ||
+ | |||
+ | #home_logo, #sideMenu { display:none; } | ||
+ | #sideMenu, #top_title, .patrollink {display:none;} | ||
+ | #content { width:100%; padding:0px; margin-top:-7px; margin-left:0px;} | ||
+ | body {background-color:white; } | ||
+ | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } | ||
+ | |||
+ | /* OUR OWN CSS BEGINS */ | ||
+ | |||
html { | html { | ||
− | /* | + | position: relative; |
− | + | height: 100%; | |
+ | min-width: 950px; | ||
+ | text-align: center; | ||
+ | background-color: white; | ||
+ | background-size: cover; | ||
+ | -webkit-font-smoothing: antialiased; /* font smoothing */ | ||
+ | -moz-osx-font-smoothing: grayscale; | ||
+ | font-family: 'Quicksand', Work Sans !important; | ||
+ | font-size:16px !important; | ||
} | } | ||
+ | |||
+ | header, body { | ||
+ | height: 100%; | ||
+ | min-height: 765px; /* So that the bottom bar does not go over the picture on a small screen */ | ||
+ | margin: 0 0 0px; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | p { | ||
+ | text-align: justify; | ||
+ | font-family: Work Sans !important; | ||
+ | font-size: 16px !important; | ||
+ | /*margin: 20px 15px 35px 10px !important;*/ | ||
+ | } | ||
+ | #paragraph { | ||
+ | margin: 20px 15px 35px 10px !important; | ||
+ | } | ||
+ | #figuretext-c { | ||
+ | text-align: center !important; | ||
+ | } | ||
+ | |||
+ | a { | ||
+ | text-decoration: none; | ||
+ | color: #000000; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | a:hover { | ||
+ | color: #363638; | ||
+ | font-weight: bolder; | ||
+ | } | ||
+ | |||
+ | img { | ||
+ | padding: 0; | ||
+ | display: block; | ||
+ | margin: auto; | ||
+ | max-height: 100%; | ||
+ | max-width: 100%; | ||
+ | } | ||
+ | |||
+ | /* Force height 100% on iGEM settings */ | ||
+ | #content { | ||
+ | height: 100% !important; | ||
+ | } | ||
+ | #HQ_page { | ||
+ | height: 100% !important; | ||
+ | } | ||
+ | .mw-body { | ||
+ | height: 100% !important; | ||
+ | } | ||
+ | #globalWrapper { | ||
+ | height: 100% !important; | ||
+ | } | ||
+ | /* Force link padding for https keep small */ | ||
+ | #bodyContent a[href^="https://"], .link-https{ | ||
+ | padding-right: 1px !important; | ||
+ | } | ||
+ | #space { | ||
+ | height: 30px; | ||
+ | } | ||
+ | #mainlogo { | ||
+ | /*background-image: url("https://static.igem.org/mediawiki/2017/6/68/T--Aalto-Helsinki--mainlogo.png");*/ | ||
+ | background-image: url("https://static.igem.org/mediawiki/2017/a/ad/T--Aalto-Helsinki--mainlogo-2.png"); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: center center; | ||
+ | max-height: 160px; | ||
+ | } | ||
+ | .link-spanner { | ||
+ | position: absolute; | ||
+ | width: 100%; | ||
+ | height: 21%; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | z-index: 1; | ||
+ | } | ||
+ | |||
+ | /* Front page */ | ||
+ | .front-page { | ||
+ | width: 100%; | ||
+ | min-height: 65%; | ||
+ | padding: 0px 0px; | ||
+ | /*display: -webkit-box;*/ /* OLD - iOS 6-, Safari 3.1-6 */ | ||
+ | /*display: -moz-box;*/ /* OLD - Firefox 19- (buggy but mostly works) */ | ||
+ | /*display: -ms-flexbox;*/ /* TWEENER - IE 10 */ | ||
+ | /*display: -webkit-flex;*/ /* NEW - Chrome */ | ||
+ | /*display: flex;*/ | ||
+ | /*flex-direction: column;*/ | ||
+ | } | ||
+ | .front-page > div { | ||
+ | flex: 1 1 auto; | ||
+ | display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ | ||
+ | display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ | ||
+ | display: -ms-flexbox; /* TWEENER - IE 10 */ | ||
+ | display: -webkit-flex; /* NEW - Chrome */ | ||
+ | display: flex; | ||
+ | flex-direction: column; | ||
+ | padding: 10% 10% 13% 10%; | ||
+ | } | ||
+ | /* Not needed anymore | ||
+ | .front-page > div > div { | ||
+ | flex: 1 1 auto; | ||
+ | }*/ | ||
+ | .front-page > div:nth-child(1) { | ||
+ | background-image: url("https://static.igem.org/mediawiki/2017/8/8f/T--Aalto-Helsinki--coverpicture2.jpg"); | ||
+ | background-size: cover; | ||
+ | /*overflow: hidden;*/ | ||
+ | background-color: #c63; | ||
+ | border: 2px solid white; | ||
+ | } | ||
+ | .porify { | ||
+ | /*flex: 1 1 auto; breaks Firefox */ | ||
+ | text-align: center; | ||
+ | width: 35%; | ||
+ | margin: auto; | ||
+ | } | ||
+ | |||
+ | /* Sponsors */ | ||
+ | article.sponsor { | ||
+ | float: left; | ||
+ | display: table-cell; | ||
+ | vertical-align: middle; | ||
+ | text-align: center; | ||
+ | width: 203px; | ||
+ | height: 150px; | ||
+ | margin-right: 15px; | ||
+ | margin-bottom: 15px; | ||
+ | /*border: 1px solid #4d4d4d;*/ | ||
+ | -webkit-border-radius: 3px; | ||
+ | -moz-border-radius: 3px; | ||
+ | border-radius: 3px; | ||
+ | -webkit-filter: grayscale(80%); /*brightness(60%) contrast(10000000%);*/ | ||
+ | filter: grayscale(80%); | ||
+ | opacity: .8; | ||
+ | } | ||
+ | article.sponsor * { | ||
+ | vertical-align: middle; | ||
+ | } | ||
+ | |||
+ | article.sponsor span { | ||
+ | display: inline-block; | ||
+ | height: 100%; | ||
+ | width: 1px; | ||
+ | } | ||
+ | article.sponsor.last { | ||
+ | margin-right: 0px; | ||
+ | } | ||
+ | article.sponsor:hover { | ||
+ | -webkit-filter: grayscale(0%); | ||
+ | filter: grayscale(0%); | ||
+ | opacity: 1.0; | ||
+ | } | ||
+ | |||
+ | /* Site Map styles */ | ||
+ | .sitemap { | ||
+ | background-color: #339999; | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | |||
+ | #map-column-styles { | ||
+ | clear:left; | ||
+ | float:left; | ||
+ | text-align: left; | ||
+ | width:100%; | ||
+ | overflow:hidden; | ||
+ | background:#339999; | ||
+ | font-size: 14px !important; | ||
+ | } | ||
+ | #map-column-1 { | ||
+ | float:left; | ||
+ | min-width:16%; | ||
+ | position:relative; | ||
+ | left:14%; | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | #map-column-1 a { | ||
+ | list-style: none; | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | #map-column-1 a:hover { | ||
+ | color: #066; | ||
+ | } | ||
+ | #map-column-2 { | ||
+ | float:left; | ||
+ | min-width:16%; | ||
+ | position:relative; | ||
+ | left:14%; | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | #map-column-2 a { | ||
+ | list-style: none; | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | #map-column-2 a:hover { | ||
+ | color: #066; | ||
+ | } | ||
+ | #map-column-3 { | ||
+ | float:left; | ||
+ | min-width:16%; | ||
+ | position:relative; | ||
+ | left:14%; | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | #map-column-3 a { | ||
+ | list-style: none; | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | #map-column-3 a:hover { | ||
+ | color: #066; | ||
+ | } | ||
+ | #map-column-4 { | ||
+ | float:left; | ||
+ | min-width:16%; | ||
+ | position:relative; | ||
+ | left:14%; | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | #map-column-4 a { | ||
+ | list-style: none; | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | #map-column-4 a:hover { | ||
+ | color: #066; | ||
+ | } | ||
+ | #map-column-5 { | ||
+ | float:left; | ||
+ | min-width:16%; | ||
+ | position:relative; | ||
+ | left:14%; | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | #map-column-5 a { | ||
+ | list-style: none; | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | #map-column-5 a:hover { | ||
+ | color: #066; | ||
+ | } | ||
+ | |||
+ | /* Normal page styles */ | ||
+ | .container { | ||
+ | padding-top: 1%; | ||
+ | padding-left: 13%; | ||
+ | padding-right: 13%; | ||
+ | font-family: Work Sans; | ||
+ | } | ||
+ | |||
+ | .basictext { | ||
+ | font-weight: 300 !important; | ||
+ | line-height: 32px; | ||
+ | font-family: Work Sans; | ||
+ | } | ||
+ | |||
+ | .introtext { | ||
+ | font-weight: 300 !important; | ||
+ | line-height: 32px; | ||
+ | } | ||
+ | |||
+ | /* Team page styles */ | ||
+ | |||
+ | .person-wrap { | ||
+ | width: 100%; | ||
+ | padding-top: 1%; | ||
+ | padding-bottom: 5%; | ||
+ | padding-left: 2%; | ||
+ | padding-right: 0.5%; | ||
+ | font-family: Work Sans; | ||
+ | } | ||
+ | .person-photo { | ||
+ | padding: 2% 0 2% 0; | ||
+ | float: left; | ||
+ | width: 25%; | ||
+ | } | ||
+ | .person-texts { | ||
+ | float: right; | ||
+ | width: 68%; | ||
+ | font-weight: lighter; | ||
+ | line-height: 28px; | ||
+ | font-family: Work Sans; | ||
+ | text-align: justify; | ||
+ | margin-right: 2%; | ||
+ | font-size: 14px !important; | ||
+ | } | ||
+ | |||
+ | /* Some icon styles */ | ||
+ | .some { | ||
+ | display: inline-block; | ||
+ | width: 30px; | ||
+ | vertical-align: middle; | ||
+ | } | ||
+ | |||
+ | .some:hover { | ||
+ | content: url('https://static.igem.org/mediawiki/2017/d/d1/T--Aalto-Helsinki--home_icon_hover.png'); | ||
+ | } | ||
+ | |||
+ | /* Quote styles */ | ||
+ | #quote-block { | ||
+ | width: 100%; | ||
+ | top: 2%; | ||
+ | padding: 30px 0px; | ||
+ | text-align: left; | ||
+ | background-color: #339999; | ||
+ | overflow: hidden; | ||
+ | font-family: Work Sans; | ||
+ | } | ||
+ | #quote-block-mod { | ||
+ | width: 100%; | ||
+ | top: 2%; | ||
+ | padding: 30px 0px; | ||
+ | text-align: left; | ||
+ | background-color: #CC9933; | ||
+ | overflow: hidden; | ||
+ | font-family: Work Sans; | ||
+ | } | ||
+ | #quote-block-hp { | ||
+ | width: 100%; | ||
+ | top: 2%; | ||
+ | padding: 30px 0px; | ||
+ | text-align: left; | ||
+ | background-color: #c63; | ||
+ | overflow: hidden; | ||
+ | font-family: Work Sans; | ||
+ | } | ||
+ | #quote-block-com { | ||
+ | width: 100%; | ||
+ | top: 2%; | ||
+ | padding: 30px 0px; | ||
+ | text-align: left; | ||
+ | background-color: #006699; | ||
+ | overflow: hidden; | ||
+ | font-family: Work Sans; | ||
+ | } | ||
+ | #quote-block-peo { | ||
+ | width: 100%; | ||
+ | top: 2%; | ||
+ | padding: 30px 0px; | ||
+ | text-align: left; | ||
+ | background-color: #336633; | ||
+ | overflow: hidden; | ||
+ | font-family: Work Sans; | ||
+ | } | ||
+ | |||
+ | q { | ||
+ | quotes: "“" "”" "‘" "’"; | ||
+ | font-family: Work Sans; | ||
+ | font-style: normal; | ||
+ | } | ||
+ | |||
+ | q:before { | ||
+ | content: open-quote; | ||
+ | font-size: 150px !important; | ||
+ | } | ||
+ | |||
+ | q:after { | ||
+ | content: no-close-quote; | ||
+ | } | ||
+ | |||
+ | .quote-mark { | ||
+ | width: 0%; | ||
+ | float: left; | ||
+ | text-align: left; | ||
+ | font-weight: bolder; | ||
+ | font-size: 0px !important; | ||
+ | font-family: Work Sans !important; | ||
+ | padding: 0 8%; | ||
+ | color: #000000; | ||
+ | margin-bottom:-100px; | ||
+ | margin-top: 25px; | ||
+ | } | ||
+ | .quote-mark-white { | ||
+ | width: 0%; | ||
+ | float: left; | ||
+ | text-align: left; | ||
+ | font-weight: bolder; | ||
+ | font-size: 0px !important; | ||
+ | font-family: Work Sans !important; | ||
+ | padding: 0 8%; | ||
+ | color: #ffffff; | ||
+ | margin-bottom:-100px; | ||
+ | margin-top: 25px; | ||
+ | } | ||
+ | |||
+ | .quote-text { | ||
+ | /*width: 70%; iGEM website broke this, so let's not have this*/ | ||
+ | text-align: left; | ||
+ | font-weight: bolder; | ||
+ | font-size: 30px !important; | ||
+ | padding: 0 18%; | ||
+ | color: #000000; | ||
+ | line-height: 130%; | ||
+ | } | ||
+ | .quote-text-white { | ||
+ | /*width: 70%; iGEM website broke this, so let's not have this*/ | ||
+ | text-align: left; | ||
+ | font-weight: bolder; | ||
+ | font-size: 30px !important; | ||
+ | padding: 0 18%; | ||
+ | color: #ffffff; | ||
+ | line-height: 130%; | ||
+ | } | ||
+ | |||
+ | .quote-person { | ||
+ | /*width: 69%; iGEM website broke this, so let's not have this*/ | ||
+ | text-align: right; | ||
+ | font-weight: lighter; | ||
+ | font-size: 25px !important; | ||
+ | padding: 0 18%; | ||
+ | color: #000000; | ||
+ | } | ||
+ | .quote-person-white { | ||
+ | /*width: 69%; iGEM website broke this, so let's not have this*/ | ||
+ | text-align: right; | ||
+ | font-weight: lighter; | ||
+ | font-size: 25px !important; | ||
+ | padding: 0 18%; | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | |||
+ | /* Color block styles */ | ||
+ | |||
+ | #color-block { | ||
+ | width: 100%; | ||
+ | top: 2%; | ||
+ | padding: 30px 0px; | ||
+ | text-align: left; | ||
+ | background-image: url("https://static.igem.org/mediawiki/2017/d/d1/T--Aalto-Helsinki--Laboratory-block.jpg"); | ||
+ | background-size: cover; | ||
+ | /*background-position: center center; maybe???*/ | ||
+ | background-color: #339999; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | #color-block-mod { | ||
+ | width: 100%; | ||
+ | top: 2%; | ||
+ | padding: 30px 0px; | ||
+ | text-align: left; | ||
+ | background-image: url("https://static.igem.org/mediawiki/2017/e/e5/T--Aalto-Helsinki--Model-block.jpg"); | ||
+ | background-size: cover; | ||
+ | background-color: #CC9933; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | #color-block-com { | ||
+ | width: 100%; | ||
+ | top: 2%; | ||
+ | padding: 30px 0px; | ||
+ | text-align: left; | ||
+ | background-image: url("https://static.igem.org/mediawiki/2017/b/b4/T--Aalto-Helsinki--Community-block.jpg"); | ||
+ | background-size: cover; | ||
+ | background-color: #006699; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | #color-block-hp1 { | ||
+ | width: 100%; | ||
+ | top: 2%; | ||
+ | padding: 30px 0px; | ||
+ | text-align: left; | ||
+ | background-image: url("https://static.igem.org/mediawiki/2017/2/2e/T--Aalto-Helsinki--Project-block.jpg"); | ||
+ | background-size: cover; | ||
+ | /*background-position: center center; maybe???*/ | ||
+ | background-color: #339999; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | #color-block-hp2 { | ||
+ | width: 100%; | ||
+ | top: 2%; | ||
+ | padding: 30px 0px; | ||
+ | text-align: left; | ||
+ | background-image: url("https://static.igem.org/mediawiki/2017/4/46/T--Aalto-Helsinki--Outreach-block.jpg"); | ||
+ | background-size: cover; | ||
+ | /*background-position: center center; maybe???*/ | ||
+ | background-color: #339999; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | #color-block-hp3 { | ||
+ | width: 100%; | ||
+ | top: 2%; | ||
+ | padding: 30px 0px; | ||
+ | text-align: left; | ||
+ | background-image: url("https://static.igem.org/mediawiki/2017/0/0b/T--Aalto-Helsinki--Judging-block.jpg"); | ||
+ | background-size: cover; | ||
+ | /*background-position: center center; maybe???*/ | ||
+ | background-color: #339999; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | #parts-text { | ||
+ | padding: 1% 0% 1% 13%; | ||
+ | color: #ffffff; | ||
+ | width: 46%; | ||
+ | float: left; | ||
+ | text-align: justify; | ||
+ | font-weight: bold; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | #parts-photo { | ||
+ | padding: 1% 13% 1% 5%; | ||
+ | float: right; | ||
+ | width: 23%; | ||
+ | } | ||
+ | |||
+ | .color-block-container { | ||
+ | min-height: 68%; /*fills the remaining space of the page*/ | ||
+ | display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ | ||
+ | display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ | ||
+ | display: -ms-flexbox; /* TWEENER - IE 10 */ | ||
+ | display: -webkit-flex; /* NEW - Chrome */ | ||
+ | display: flex; | ||
+ | flex-direction: column; | ||
+ | /*position: relative; | ||
+ | width: 100%;*/ | ||
+ | background-color: #ffffff; | ||
+ | } | ||
+ | .color-block-container > div { | ||
+ | flex: 1 1 auto; | ||
+ | display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ | ||
+ | display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ | ||
+ | display: -ms-flexbox; /* TWEENER - IE 10 */ | ||
+ | display: -webkit-flex; /* NEW - Chrome */ | ||
+ | display: flex; | ||
+ | } | ||
+ | .color-block-container > div > div { | ||
+ | flex: 1 1 auto; | ||
+ | } | ||
+ | .color-block-hp > div { | ||
+ | padding: 1rem; | ||
+ | } | ||
+ | .color-block-hp > div:nth-child(1) { | ||
+ | background-image: url("https://static.igem.org/mediawiki/2017/2/2e/T--Aalto-Helsinki--Project-block.jpg"); | ||
+ | background-size: cover; | ||
+ | background-color: #c63; | ||
+ | border: 2px solid white; | ||
+ | } | ||
+ | .color-block-hp > div:nth-child(2) { | ||
+ | background-image: url("https://static.igem.org/mediawiki/2017/4/46/T--Aalto-Helsinki--Outreach-block.jpg"); | ||
+ | background-size: cover; | ||
+ | background-color: #c63; | ||
+ | border: 2px solid white; | ||
+ | } | ||
+ | .color-block-hp > div:nth-child(3) { | ||
+ | background-image: url("https://static.igem.org/mediawiki/2017/0/0b/T--Aalto-Helsinki--Judging-block.jpg"); | ||
+ | background-size: cover; | ||
+ | background-color: #c63; | ||
+ | border: 2px solid white; | ||
+ | } | ||
+ | .color-block-hp > div:hover { | ||
+ | padding: 1rem; | ||
+ | } | ||
+ | .color-block-hp > div:hover:nth-child(1) { | ||
+ | background-color: #b85c2e; | ||
+ | /*on hover darker shade of same color*/ | ||
+ | } | ||
+ | .color-block-hp > div:hover:nth-child(2) { | ||
+ | background-color: #b85c2e; | ||
+ | /*on hover darker shade of same color*/ | ||
+ | } | ||
+ | .color-block-hp > div:hover:nth-child(3) { | ||
+ | background-color: #b85c2e; | ||
+ | /*on hover darker shade of same color*/ | ||
+ | } | ||
+ | #color-block-hp { | ||
+ | /*height: 200px;*/ | ||
+ | /*min-height: 100px;*/ | ||
+ | /*width: 100%; | ||
+ | top: 0%; | ||
+ | height: 80%; | ||
+ | padding: 3% 0px;*/ | ||
+ | text-align: left; | ||
+ | background-color: #c63; | ||
+ | /*overflow: hidden;*/ | ||
+ | } | ||
+ | #color-block-team { | ||
+ | /*scroll effect: background: url("./img/1group crop+.jpg") no-repeat center center fixed;*/ | ||
+ | background: url("https://static.igem.org/mediawiki/2017/c/c2/T--Aalto-Helsinki--group_grass.jpg") no-repeat center center; /* attention, no dash */ | ||
+ | /*background-size: 100%;*/ | ||
+ | background-size: cover; | ||
+ | height: 55%; | ||
+ | /*width: 100%; | ||
+ | top: 2%; | ||
+ | padding: 30px 0px; | ||
+ | text-align: left; | ||
+ | background-color: #c63; | ||
+ | overflow: hidden;*/ | ||
+ | } | ||
+ | |||
+ | /* text opacity change filter */ | ||
+ | |||
+ | div#color-block span, | ||
+ | div#color-block-mod span, | ||
+ | div#color-block-com span, | ||
+ | div#color-block-hp span { | ||
+ | display: block; | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | opacity: 0.65; | ||
+ | background: #000000; | ||
+ | -moz-transition: all 1s; | ||
+ | -webkit-transition: all 1s; | ||
+ | transition: all 1s; | ||
+ | z-index: ; | ||
+ | } | ||
+ | |||
+ | div#color-block:hover span, | ||
+ | div#color-block-mod:hover span, | ||
+ | div#color-block-com:hover span | ||
+ | div#color-block-hp:hover span { | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | #color-block:hover { | ||
+ | /*background-color: #066;*/ | ||
+ | -webkit-filter: grayscale(10%) brightness(85%); | ||
+ | filter: grayscale(10%) brightness(85%); | ||
+ | } | ||
+ | #color-block-mod:hover { | ||
+ | /*background-color: #b88a2e;*/ | ||
+ | -webkit-filter: grayscale(10%) brightness(85%); | ||
+ | filter: grayscale(10%) brightness(85%); | ||
+ | } | ||
+ | .color-block-hp > div:hover { | ||
+ | /*background-color: #b85c2e;*/ | ||
+ | -webkit-filter: grayscale(10%) brightness(85%); | ||
+ | filter: grayscale(10%) brightness(85%); | ||
+ | } | ||
+ | #color-block-hp1:hover { | ||
+ | /*background-color: #b85c2e;*/ | ||
+ | -webkit-filter: grayscale(10%) brightness(85%); | ||
+ | filter: grayscale(10%) brightness(85%); | ||
+ | } | ||
+ | #color-block-hp2:hover { | ||
+ | /*background-color: #b85c2e;*/ | ||
+ | -webkit-filter: grayscale(10%) brightness(85%); | ||
+ | filter: grayscale(10%) brightness(85%); | ||
+ | } | ||
+ | #color-block-hp3:hover { | ||
+ | /*background-color: #b85c2e;*/ | ||
+ | -webkit-filter: grayscale(10%) brightness(85%); | ||
+ | filter: grayscale(10%) brightness(85%); | ||
+ | } | ||
+ | #color-block-com:hover { | ||
+ | /*background-color: #036;*/ | ||
+ | -webkit-filter: grayscale(10%) brightness(85%); | ||
+ | filter: grayscale(10%) brightness(85%); | ||
+ | } | ||
+ | .text1 { | ||
+ | width: 60%; | ||
+ | /*text closer to center*/ | ||
+ | float: left; | ||
+ | padding: 2% 0; | ||
+ | text-align: center; | ||
+ | font-weight: bolder; | ||
+ | font-family: 'Quicksand'; | ||
+ | font-size: 30px !important; | ||
+ | color: #fff; | ||
+ | } | ||
+ | .text2 { | ||
+ | left: 50%; | ||
+ | width: 40%; | ||
+ | /*so the text doesn't start immediately from 50% of page*/ | ||
+ | float: right; | ||
+ | font-family: 'Quicksand'; | ||
+ | font-size: 16px !important; | ||
+ | line-height: normal; | ||
+ | color: #fff; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | .text2-hp { | ||
+ | min-height: 150px; /* added because iGEM + Firefox breaks the function*/ | ||
+ | /*left: 50%;*/ | ||
+ | font-family: 'Quicksand'; | ||
+ | line-height: normal; | ||
+ | padding: 2% 0; | ||
+ | width: 40%; | ||
+ | text-align: left; | ||
+ | /*so the text doesn't start immediately from 50% of page*/ | ||
+ | /*float: right; | ||
+ | font-size: 16px; | ||
+ | color: #ffffff;*/ | ||
+ | text-decoration: none; | ||
+ | display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ | ||
+ | display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ | ||
+ | display: -ms-flexbox; /* TWEENER - IE 10 */ | ||
+ | display: -webkit-flex; /* NEW - Chrome */ | ||
+ | display: flex; | ||
+ | /*The links will flex in the vertical direction*/ | ||
+ | flex-direction: column; | ||
+ | justify-content: center; | ||
+ | } | ||
+ | |||
+ | .text2 a { | ||
+ | font-weight: bold; | ||
+ | color: #ffffff; | ||
+ | text-decoration: none; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .text2-hp a { | ||
+ | flex: 1 1 auto; | ||
+ | font-weight: bold; | ||
+ | color: #ffffff; | ||
+ | line-height: 6px; | ||
+ | text-decoration: none; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .text2 a:hover { | ||
+ | /*color: #eeeeee;*/ | ||
+ | -webkit-filter: brightness(10%); | ||
+ | filter: brightness(10%); | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .text2-hp a:hover { | ||
+ | -webkit-filter: brightness(10%); | ||
+ | filter: brightness(10%); | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | /* Headings etc. */ | ||
+ | @font-face { | ||
+ | font-family: Quicksand; | ||
+ | src: url(Adam.otf); | ||
+ | |||
+ | } | ||
+ | |||
+ | #o-h1 { | ||
+ | color: #000000; | ||
+ | padding: 10px; | ||
+ | font-size: 200% !important; | ||
+ | text-align: center; | ||
+ | font-weight: normal; | ||
+ | font-family: Quicksand; | ||
+ | } | ||
+ | |||
+ | h1 { | ||
+ | color: #000000; | ||
+ | padding: 10px; | ||
+ | font-size: 250% !important; | ||
+ | text-align: center; | ||
+ | font-weight: normal; | ||
+ | } | ||
+ | |||
+ | h2 { | ||
+ | color: #000000; | ||
+ | padding: 10px; | ||
+ | font-size: 80px !important; | ||
+ | } | ||
+ | |||
+ | h3 { | ||
+ | color: #000000; | ||
+ | font-size: 200% !important; | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | h4 { | ||
+ | color: #000000; | ||
+ | font-size: 150% !important; | ||
+ | line-height: 33px !important; | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | h5 { | ||
+ | color: #ffffff; | ||
+ | font-size: 115% !important; | ||
+ | line-height: 30px !important; | ||
+ | font-style: italic !important; | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | /* Dropdown menu styles */ | ||
+ | #dropdown { | ||
+ | position: relative; | ||
+ | height: 24px; | ||
+ | background: #ffffff; | ||
+ | width: auto; | ||
+ | } | ||
+ | #dropdown ul { | ||
+ | list-style: none; | ||
+ | padding: 0; | ||
+ | margin: auto; /*this was 0*/ | ||
+ | /*text-align: center; this was added*/ | ||
+ | line-height: 1; | ||
+ | } | ||
+ | #dropdown > ul { | ||
+ | position: relative; | ||
+ | display: block; | ||
+ | text-align: center; /*test, this was added*/ | ||
+ | background: #ffffff; /*This is the heading1 background*/ | ||
+ | width: 100%; | ||
+ | z-index: 500; | ||
+ | } | ||
+ | #dropdown:after, | ||
+ | #dropdown > ul:after { | ||
+ | content: "."; | ||
+ | display: block; | ||
+ | clear: both; | ||
+ | visibility: hidden; | ||
+ | line-height: 0; | ||
+ | height: 0; | ||
+ | } | ||
+ | #dropdown.align-right > ul > li { | ||
+ | float: right; | ||
+ | } | ||
+ | #dropdown.align-center ul { | ||
+ | text-align: center; | ||
+ | } | ||
+ | #dropdown.align-center ul ul { | ||
+ | text-align: center; /*this was left*/ | ||
+ | } | ||
+ | #dropdown > ul > li { | ||
+ | display: inline-block; | ||
+ | position: relative; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | #dropdown > ul > #menu-button { | ||
+ | display: none; | ||
+ | } | ||
+ | #dropdown ul li a { | ||
+ | display: block; | ||
+ | font-family: 'Quicksand', Work Sans; | ||
+ | src: url(Adam.otf); | ||
+ | font-weight: bold; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | #dropdown > ul > li > a { | ||
+ | font-size: 18px; | ||
+ | font-weight: bold; | ||
+ | text-align: center; /* this was added */ | ||
+ | padding: 5px 45px; /* heading sizes */ | ||
+ | color: #363638; /*previous color #7a8189;*/ | ||
+ | -moz-transition: color 0.25s ease-out; | ||
+ | -webkit-transition: color 0.25s ease-out; | ||
+ | -ms-transition: color 0.25s ease-out; | ||
+ | -o-transition: color 0.25s ease-out; | ||
+ | transition: color 0.25s ease-out; | ||
+ | } | ||
+ | #dropdown > ul > li.has-sub > a { | ||
+ | padding-right: 40px; | ||
+ | } | ||
+ | /*Dropdown parent links give different colours when hovered*/ | ||
+ | #dropdown > ul > li:hover > a.lab { | ||
+ | color: #339999; | ||
+ | border-bottom: 3px solid currentColor; | ||
+ | } | ||
+ | #dropdown > ul > li:hover > a.mod { | ||
+ | color: #CC9933; | ||
+ | border-bottom: 3px solid currentColor; | ||
+ | } | ||
+ | #dropdown > ul > li:hover > a.hp { | ||
+ | color: #CC6633; | ||
+ | border-bottom: 3px solid currentColor; | ||
+ | } | ||
+ | #dropdown > ul > li:hover > a.com { | ||
+ | color: #336699; | ||
+ | border-bottom: 3px solid currentColor; | ||
+ | } | ||
+ | #dropdown > ul > li:hover > a.peo { | ||
+ | color: #336633; | ||
+ | border-bottom: 3px solid currentColor; | ||
+ | } | ||
+ | #dropdown li.has-sub::after { | ||
+ | display: block; | ||
+ | content: ""; | ||
+ | position: absolute; | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | } | ||
+ | |||
+ | #dropdown ul ul { | ||
+ | position: absolute; | ||
+ | left: -9999px; | ||
+ | top: 70px; | ||
+ | opacity: 0; | ||
+ | -moz-transition: opacity .3s ease, top .25s ease; | ||
+ | -webkit-transition: opacity .3s ease, top .25s ease; | ||
+ | -ms-transition: opacity .3s ease, top .25s ease; | ||
+ | -o-transition: opacity .3s ease, top .25s ease; | ||
+ | transition: opacity .3s ease, top .25s ease; | ||
+ | z-index: 1000; | ||
+ | } | ||
+ | #dropdown ul ul ul { | ||
+ | top: 37px; | ||
+ | padding-left: 5px; | ||
+ | } | ||
+ | #dropdown ul ul li { | ||
+ | position: relative; | ||
+ | margin-bottom: .001em; /*Added because iGEM website breaks the dropdown otherwise*/ | ||
+ | } | ||
+ | /* This defines how much space between heading and drop down menu */ | ||
+ | #dropdown > ul > li:hover > ul { | ||
+ | width: 100%; /* this makes the dropdown menus widths 100% */ | ||
+ | left: auto; | ||
+ | right: auto; | ||
+ | top: 31px; /*this was 44px -> too far away, 31px is right under */ | ||
+ | opacity: 1; | ||
+ | } | ||
+ | #dropdown.align-right > ul > li:hover > ul { | ||
+ | left: auto; | ||
+ | right: 0; | ||
+ | opacity: 1; | ||
+ | } | ||
+ | /*Specifies how the link opened by hovering dropdown looks*/ | ||
+ | #dropdown ul ul li:hover > ul { | ||
+ | left: 175px; /* how far from the dropdown menu the submenu opens */ | ||
+ | top: 0; | ||
+ | opacity: 1; | ||
+ | } | ||
+ | #dropdown.align-right ul ul li:hover > ul { | ||
+ | left: auto; | ||
+ | /*right: 170px;*/ | ||
+ | width: 100%; /*added*/ | ||
+ | top: 0; | ||
+ | opacity: 1; | ||
+ | padding-right: 5px; | ||
+ | } | ||
+ | #dropdown ul ul li a { | ||
+ | /*width: 170px;*/ | ||
+ | width: 100%; /*the width of the subelement of subheadings */ | ||
+ | border-bottom: 1px solid #eeeeee; /* horiz. line colour */ | ||
+ | padding: 4px 2.6%; | ||
+ | font-size: 13px; | ||
+ | font-weight: bold; | ||
+ | color: #363638; /* colour of the drop down menu subheadings */ | ||
+ | background: #ffffff; | ||
+ | -webkit-transition: all .5s ease; | ||
+ | -moz-transition: all .5s ease; | ||
+ | -ms-transition: all .5s ease; | ||
+ | -o-transition: all .5s ease; | ||
+ | transition: all .5s ease; | ||
+ | } | ||
+ | #dropdown.align-right ul ul li a { | ||
+ | text-align: center; /* this was right prev. */ | ||
+ | } | ||
+ | |||
+ | #dropdown ul ul li:hover > a { | ||
+ | background: #f2f2f2; /* colour of dropdown menu links when hovered - light grey */ | ||
+ | color: #363638; | ||
+ | } | ||
+ | |||
+ | #dropdown ul ul li:last-child > a, | ||
+ | #dropdown ul ul li.last > a { | ||
+ | border-bottom: 0; | ||
+ | } | ||
+ | |||
+ | /* Social media icons */ | ||
+ | @font-face { | ||
+ | font-family: 'pe-icon-social'; | ||
+ | src:url('https://static.igem.org/mediawiki/2017/d/de/T--Aalto-Helsinki--pe-icon-social.eot'); | ||
+ | src:url('https://static.igem.org/mediawiki/2017/2/2a/T--Aalto-Helsinki--pe-icon-social.svg') format('embedded-opentype'), | ||
+ | url('https://static.igem.org/mediawiki/2017/2/28/T--Aalto-Helsinki--pe-icon-social%2B%2B.woff') format('woff'), | ||
+ | url('https://static.igem.org/mediawiki/2017/c/ce/T--Aalto-Helsinki--pe-icon-social%2B.ttf') format('truetype'), | ||
+ | url('https://static.igem.org/mediawiki/2017/2/2a/T--Aalto-Helsinki--pe-icon-social.svg') format('svg'); | ||
+ | font-weight: normal; | ||
+ | font-style: normal; | ||
+ | } | ||
+ | |||
+ | [class^="pe-so-"], [class*=" pe-so-"] { | ||
+ | display: inline-block; | ||
+ | font-family: 'pe-icon-social'; | ||
+ | speak: none; | ||
+ | font-style: normal; | ||
+ | font-weight: normal; | ||
+ | font-variant: normal; | ||
+ | text-transform: none; | ||
+ | line-height: 1; | ||
+ | |||
+ | /* Better Font Rendering =========== */ | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | -moz-osx-font-smoothing: grayscale; | ||
+ | } | ||
+ | .pe-2x { | ||
+ | font-size: 2em; | ||
+ | } | ||
+ | .pe-so-instagram:before { | ||
+ | content: "\e626"; | ||
+ | } | ||
+ | .pe-so-linkedin:before { | ||
+ | content: "\e62c"; | ||
+ | } | ||
+ | .pe-so-twitter:before { | ||
+ | content: "\e651"; | ||
+ | } | ||
+ | .pe-so-facebook:before { | ||
+ | content: "\e617"; | ||
+ | } | ||
+ | |||
+ | /* Footer styles */ | ||
+ | footer .footer-social { | ||
+ | position: static; | ||
+ | width: 100%; | ||
+ | text-align: center; | ||
+ | padding: 15px 0px 5px 0px; | ||
+ | bottom: 0; | ||
+ | background-color: #339999; | ||
+ | overflow: hidden; | ||
+ | font-family: "Quicksand"; | ||
+ | } | ||
+ | footer .footer-social ul { | ||
+ | list-style: none; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | footer .footer-social ul li { | ||
+ | display: inline-block; | ||
+ | } | ||
+ | footer .footer-social ul li a { | ||
+ | display: block; | ||
+ | font-size: 16px; | ||
+ | color: #ffffff; | ||
+ | -webkit-transition: background-color 0.3s; | ||
+ | transition: background-color 0.3s; | ||
+ | } | ||
+ | footer .footer-social ul li a:hover { | ||
+ | color: #363638 !important; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | footer .footer-social a:hover { | ||
+ | color: #363638 !important; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | /*Footer for main page*/ | ||
+ | |||
+ | footer .footer-mainpage { | ||
+ | position: absolute; | ||
+ | width: 100%; | ||
+ | text-align: center; | ||
+ | padding: 15px 0px 5px 0px; | ||
+ | bottom: 0; | ||
+ | background-color: #339999; | ||
+ | overflow: hidden; | ||
+ | font-family: "Quicksand"; | ||
+ | } | ||
+ | |||
+ | footer .footer-mainpage ul { | ||
+ | list-style: none; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | footer .footer-mainpage ul li { | ||
+ | display: inline-block; | ||
+ | } | ||
+ | footer .footer-mainpage ul li a { | ||
+ | display: block; | ||
+ | font-size: 16px !important; | ||
+ | color: #ffffff; | ||
+ | -webkit-transition: background-color 0.3s; | ||
+ | transition: background-color 0.3s; | ||
+ | } | ||
+ | footer .footer-mainpage ul li a:hover { | ||
+ | color: #363638 !important; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | footer .footer-mainpage a:hover { | ||
+ | color: #363638 !important; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | footer .texts ul a { | ||
+ | font-weight: bold; | ||
+ | text-decoration: none; | ||
+ | color: #ffffff; | ||
+ | padding: 15px 30px; | ||
+ | font-size: 14px !important; | ||
+ | } | ||
+ | |||
+ | |||
+ | @media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) { | ||
+ | |||
+ | html { | ||
+ | position: relative; | ||
+ | height: 100%; | ||
+ | min-width: 360px; | ||
+ | text-align: center; | ||
+ | background-color: white; | ||
+ | background-size: cover; | ||
+ | font-size:16px !important; | ||
+ | } | ||
+ | |||
+ | header, body { | ||
+ | height: 100%; | ||
+ | min-height: 600px; /* So that the bottom bar does not go over the picture on a small screen */ | ||
+ | margin: 0 0 0px; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | #dropdown { | ||
+ | width: auto; | ||
+ | } | ||
+ | #dropdown.align-center ul { | ||
+ | text-align: left; | ||
+ | } | ||
+ | #dropdown.align-right > ul > li { | ||
+ | float: none; | ||
+ | } | ||
+ | #dropdown ul { | ||
+ | width: auto; | ||
+ | } | ||
+ | #dropdown .submenuArrow, | ||
+ | #dropdown #indicatorContainer { | ||
+ | display: none; | ||
+ | } | ||
+ | #dropdown > ul { | ||
+ | height: auto; | ||
+ | display: block; | ||
+ | } | ||
+ | #dropdown > ul > li { | ||
+ | float: none; | ||
+ | } | ||
+ | #dropdown li, | ||
+ | #dropdown > ul > li { | ||
+ | display: none; | ||
+ | } | ||
+ | #dropdown ul ul, | ||
+ | #dropdown ul ul ul, | ||
+ | #dropdown ul > li:hover > ul, | ||
+ | #dropdown ul ul > li:hover > ul, | ||
+ | #dropdown.align-right ul ul, | ||
+ | #dropdown.align-right ul ul ul, | ||
+ | #dropdown.align-right ul > li:hover > ul, | ||
+ | #dropdown.align-right ul ul > li:hover > ul { | ||
+ | position: relative; | ||
+ | left: auto; | ||
+ | top: auto; | ||
+ | opacity: 1; | ||
+ | padding-left: 0; | ||
+ | padding-right: 0; | ||
+ | right: auto; | ||
+ | } | ||
+ | #dropdown ul .has-sub::after { | ||
+ | display: none; | ||
+ | } | ||
+ | #dropdown ul li a { | ||
+ | padding: 12px 20px; | ||
+ | } | ||
+ | #dropdown ul ul li a { | ||
+ | border: 0; | ||
+ | background: none; | ||
+ | width: auto; | ||
+ | padding: 28px 35px; | ||
+ | } | ||
+ | #dropdown.align-right ul ul li a { | ||
+ | text-align: left; | ||
+ | } | ||
+ | #dropdown ul ul li:hover > a.lab > a.mod { | ||
+ | background: none; | ||
+ | color: #363638; | ||
+ | } | ||
+ | #dropdown ul ul ul a { | ||
+ | padding: 8px 50px; | ||
+ | } | ||
+ | #dropdown ul ul ul ul a { | ||
+ | padding: 8px 65px; | ||
+ | } | ||
+ | #dropdown ul ul ul ul ul a { | ||
+ | padding: 8px 80px; | ||
+ | } | ||
+ | #dropdown ul ul ul ul ul ul a { | ||
+ | padding: 8px 95px; | ||
+ | } | ||
+ | #dropdown > ul > #menu-button { | ||
+ | display: block; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | #dropdown #menu-button > a { | ||
+ | padding: 14px 20px; | ||
+ | } | ||
+ | #dropdown ul.open li, | ||
+ | #dropdown > ul.open > li { | ||
+ | display: block; | ||
+ | } | ||
+ | #dropdown > ul.open > li#menu-button > a { | ||
+ | color: #fff; | ||
+ | border-bottom: 1px solid rgba(150, 150, 150, 0.1); | ||
+ | } | ||
+ | #dropdown ul ul::after { | ||
+ | display: none; | ||
+ | } | ||
+ | #dropdown #menu-button::after { | ||
+ | display: block; | ||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | height: 3px; | ||
+ | width: 22px; | ||
+ | border-top: 2px solid #7a8189; | ||
+ | border-bottom: 2px solid #7a8189; | ||
+ | right: 20px; | ||
+ | top: 15px; | ||
+ | } | ||
+ | |||
+ | #dropdown #menu-button::before { | ||
+ | display: block; | ||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | height: 3px; | ||
+ | width: 22px; | ||
+ | border-top: 2px solid #7a8189; | ||
+ | right: 20px; | ||
+ | top: 25px; | ||
+ | } | ||
+ | #dropdown ul.open #menu-button::after, | ||
+ | #dropdown ul.open #menu-button::before { | ||
+ | border-color: #fff; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* Other than dropdown menu */ | ||
+ | |||
+ | footer .footer-social ul li a { | ||
+ | font-size: 12px !important; | ||
+ | } | ||
+ | footer .texts ul a { | ||
+ | font-size: 12px !important; | ||
+ | } | ||
+ | .pe-2x { | ||
+ | font-size: 1.5em; | ||
+ | } | ||
+ | .container { | ||
+ | width: auto !important; | ||
+ | } | ||
+ | #mainlogo { | ||
+ | background-image: url("https://static.igem.org/mediawiki/2017/9/92/T--Aalto-Helsinki--mainlogo-mobile.png"); | ||
+ | background-size: auto 100%; | ||
+ | background-repeat: no-repeat; | ||
+ | max-height: 152px; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
</style> | </style> | ||
− | <!-- | + | <!-- THIS IS WHERE THE HTML BEGINS --> |
− | < | + | |
− | + | <head> | |
− | + | ||
− | + | <meta charset='utf-8'> | |
− | + | <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
− | + | <meta name="viewport" content="width=device-width, initial-scale=1"> | |
− | + | ||
− | < | + | <!-- This tells the browser that your page is responsive --> |
− | + | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> | |
− | + | ||
− | + | <link rel="stylesheet" href="https://2017.igem.org/Template:Aalto-Helsinki"> | |
− | + | <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> | |
− | + | <script src="script.js"></script> | |
− | + | <!--MathJax hosted by iGEM--> | |
− | + | <script src="https://2017.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> | |
− | + | <!--Vector social media icons provided by Pixeden--> | |
− | + | <link rel="stylesheet" href="./pe-icon-social/css/pe-icon-social.css"> | |
− | + | <link rel="stylesheet" href="./pe-icon-social/css/helper.css"> | |
− | + | ||
− | + | <!-- Quicksand font --> | |
− | + | <link href='//fonts.googleapis.com/css?family=Quicksand' rel='stylesheet'> | |
− | + | <!-- Work Sans font --> | |
− | + | <link href='https://fonts.googleapis.com/css?family=Work+Sans' rel='stylesheet'> | |
− | + | ||
− | + | <title>Aalto-Helsinki</title> | |
− | + | ||
− | + | </head> | |
− | + | ||
− | + | <body> | |
− | + | <!--HTML5 syntax doesn't work so hack--> | |
− | + | <div id="space"><br></div> | |
− | + | <div id="mainlogo"> | |
− | + | <a href="https://2017.igem.org/Team:Aalto-Helsinki"><span class="link-spanner"></span> | |
− | + | </a><br><br><br><br><br><br><br><br> | |
− | </ | + | </div> |
− | </ | + | <br> |
+ | <!-- DROPDOWN MENU --> | ||
+ | <div id='dropdown'> | ||
+ | <ul> | ||
+ | <li class='active has-sub'><a class='lab' href='https://2017.igem.org/Team:Aalto-Helsinki/Description'>Laboratory</a> | ||
+ | <ul> | ||
+ | <li class='has-sub'> | ||
+ | <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Description">Overview</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Laboratory_Theory">Theoretical Background</a></li> | ||
+ | <li class='has-sub'><a href="https://2017.igem.org/Team:Aalto-Helsinki/Experiments">Materials and Methods</a> | ||
+ | <ul> | ||
+ | <li class='last'><a href="https://2017.igem.org/Team:Aalto-Helsinki/Protocols">Protocols</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Results">Results and Discussion</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Laboratory_Future">Future Perspectives</a></li> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class='active has-sub'><a class='mod' href='https://2017.igem.org/Team:Aalto-Helsinki/Model'>Modeling</a> | ||
+ | <ul> | ||
+ | <li class='has-sub'> | ||
+ | <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Model">Overview</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Model_Theory">Theoretical Background</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Model_Setup">Simulation Setup</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Model_Results">Results and Discussion</a></li> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | <li class='active has-sub'><a class='hp' href='https://2017.igem.org/Team:Aalto-Helsinki/Human_Practices'>Human Practices</a> | ||
+ | <ul> | ||
+ | <li class='has-sub'> | ||
+ | <li><a href='https://2017.igem.org/Team:Aalto-Helsinki/Human_Practices'>Overview</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Story">Project</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Education">Public Outreach</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/HP/Silver">Judging</a></li> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | <li class='active has-sub'><a class='com' href='https://2017.igem.org/Team:Aalto-Helsinki/Community'>Community</a> | ||
+ | <ul> | ||
+ | <li class='has-sub'> | ||
+ | <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Community">Overview</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Parts">Parts</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Composite_Part">Composite Part</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Improve">Improved Part</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/InterLab">InterLab</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Collaborations">Collaborations</a></li> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | <li class='active has-sub'><a class='peo' href='https://2017.igem.org/Team:Aalto-Helsinki/Team'>People</a> | ||
+ | <ul> | ||
+ | <li class='has-sub'> | ||
+ | <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Team">Team Members</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Advisors">Advisors</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Attributions">Attributions</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Sponsors">Sponsors</a></li> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
</html> | </html> |
Revision as of 07:52, 28 October 2017