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; font-size:16px;
}
header, body {
height: 100%; margin: 0 0 35px; padding: 0;
}
p {
text-align: justify; font-family: Work Sans;
}
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%;
}
/* 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;
}
- 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: lighter; line-height: 32px; font-family: Work Sans;
}
.introtext {
font-weight: lighter; 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%;
}
/* Icons and porifi styles */ .some {
display: inline-block; width: 30px; vertical-align: middle;
}
.some:hover {
content: url('https://igem-qsf.github.io/Aalto-Helsinki-wiki-17/logos-icons/home_icon_hover.png');
}
p.porify {
padding-top: 6%; text-align: center; width: 30%; margin: auto;
}
- roll-o {
position: absolute; /* Sit on top of the page content */ display: block; /* none: Hidden by default */ width: 6%; top: 5%; left: 9%; right: 0; bottom: 0; background-color: rgba(0,0,0,0); z-index: 2000; /* Specify a stack order in case you're using a different order for other elements */ cursor: default;
}
.o {
position: relative; top: 0 !important; left: 0 !important;
}
- 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: "“" "”" "‘" "’";
}
q:before {
content: open-quote; font-size: 150px;
}
q:after {
content: no-close-quote;
}
.quote-mark {
width: 0%; float: left; text-align: left; font-weight: bolder; font-size: 0px; padding: 0 8%; color: #000000; margin-bottom:-100px; margin-top:-40px;
}
.quote-text {
width: 70%; text-align: left; font-weight: bolder; font-size: 30px; padding: 0 18%; color: #000000;
}
.quote-person {
width: 69%; text-align: right; font-weight: lighter; font-size: 25px; padding: 0 18%; color: #000000;
}
- color-block {
width: 100%; top: 2%; padding: 30px 0px; text-align: left; background-color: #339999; overflow: hidden;
}
- color-block-mod {
width: 100%; top: 2%; padding: 30px 0px; text-align: left; background-color: #CC9933; overflow: hidden;
}
- color-block-com {
width: 100%; top: 2%; padding: 30px 0px; text-align: left; background-color: #006699; 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: flex; flex-direction: column; /*position: relative; width: 100%;*/ background-color: #f36;
} .color-block-container > div {
flex: 1 1 auto; 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-color: #c63;
} .color-block-hp > div:nth-child(2) {
background-color: #c63;
} .color-block-hp > div:nth-child(3) {
background-color: #c63;
} .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("./img/1group crop+.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;*/
}
- color-block:hover {
background-color: #066; /*on hover darker shade of same color*/
}
- color-block-mod:hover {
background-color: #b88a2e; /*on hover darker shade of same color*/
}
- color-block-hp:hover {
background-color: #b85c2e; /*on hover darker shade of same color*/
}
- color-block-com:hover {
background-color: #036; /*on hover darker shade of same color*/
} .text1 {
width: 60%; /*text closer to center*/ float: left; padding: 2% 0; text-align: center; font-weight: bolder; font-size: 30px; color: #fff;
} .text2 {
left: 50%; width: 40%; /*so the text doesn't start immediately from 50% of page*/ float: right; font-size: 16px; color: #fff; text-decoration: none;
} .text2-hp {
/*left: 50%;*/ /*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: 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 {
font-weight: bold; color: #ffffff; line-height: 6px; text-decoration: none; display: block;
}
.text2 a:hover {
color: #eeeeee; text-decoration: none;
}
.text2-hp a:hover {
color: #eeeeee; text-decoration: none;
}
@font-face {
font-family: Quicksand; src: url(Adam.otf);
}
h1 {
color: #000000; padding: 10px; font-size: 250%; text-align: center; font-weight: normal;
}
h2 {
color: #000000; padding: 10px; font-size: 80px;
}
h3 {
color: #000000; font-size: 200%; text-align: left;
}
h4 {
color: #000000; font-size: 130%; text-align: left;
}
h5 {
color: #ffffff; font-size: 130%; text-align: left;
}
- 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;*/ -webkit-transition: color 0.25s ease-out; -moz-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; -webkit-transition: opacity .3s ease, top .25s ease; -moz-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;
} /* This defines how much space between heading and drop down menu */
- dropdown > ul > li:hover > ul {
width: 95%; /* 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;
}
footer .footer-social {
position: static; width: 100%; text-align: center; padding: 5px 0; bottom: 0; background-color: #339999; overflow: hidden;
} 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: 5px 0; bottom: 0; background-color: #339999; overflow: hidden;
}
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; 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;
}
@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) {
#dropdown { width: auto; } #dropdown.align-center ul { text-align: center; /* this was 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; width: 100%; /*added*/ 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: center; /*this was 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: 0px; /* this was 15px */ } #dropdown #menu-button::before { display: block; content: ; position: absolute; height: 3px; width: 22px; border-top: 2px solid #7a8189; right: 20px; top: 0px; /*this was 25px*/ } #dropdown ul.open #menu-button::after, #dropdown ul.open #menu-button::before { border-color: #fff; }
}