Template:Aalto-Helsinki/CSS

/***************************************************** 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 {

   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;

}

  1. map-column-styles {
 clear:left;
 float:left;
 text-align: left;
 width:100%;
 overflow:hidden;
 background:#339999;
 font-size: 14px;

}

  1. map-column-1 {
 float:left;
 min-width:16%;
 position:relative;
 left:14%;
 overflow:hidden;

}

  1. map-column-1 a {
 list-style: none;
 color: #ffffff;

}

  1. map-column-1 a:hover {
 color: #066;

}

  1. map-column-2 {
 float:left;
 min-width:16%;
 position:relative;
 left:14%;
 overflow:hidden;

}

  1. map-column-2 a {
 list-style: none;
 color: #ffffff;

}

  1. map-column-2 a:hover {
 color: #066;

}

  1. map-column-3 {
 float:left;
 min-width:16%;
 position:relative;
 left:14%;
 overflow:hidden;

}

  1. map-column-3 a {
 list-style: none;
 color: #ffffff;

}

  1. map-column-3 a:hover {
 color: #066;

}

  1. map-column-4 {
 float:left;
 min-width:16%;
 position:relative;
 left:14%;
 overflow:hidden;

}

  1. map-column-4 a {
 list-style: none;
 color: #ffffff;

}

  1. map-column-4 a:hover {
 color: #066;

}

  1. map-column-5 {
 float:left;
 min-width:16%;
 position:relative;
 left:14%;
 overflow:hidden;

}

  1. map-column-5 a {
 list-style: none;
 color: #ffffff;

}

  1. 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;

}

  1. 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;

}

  1. quote-block {
 width: 100%;
 top: 2%;
 padding: 30px 0px;
 text-align: left;
 background-color: #339999;
 overflow: hidden;
 font-family: Work Sans;

}

  1. quote-block-mod {
 width: 100%;
 top: 2%;
 padding: 30px 0px;
 text-align: left;
 background-color: #CC9933;
 overflow: hidden;
 font-family: Work Sans;

}

  1. quote-block-hp {
 width: 100%;
 top: 2%;
 padding: 30px 0px;
 text-align: left;
 background-color: #c63;
 overflow: hidden;
 font-family: Work Sans;

}

  1. quote-block-com {
 width: 100%;
 top: 2%;
 padding: 30px 0px;
 text-align: left;
 background-color: #006699;
 overflow: hidden;
 font-family: Work Sans;

}

  1. 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;

}

  1. color-block {
 width: 100%;
 top: 2%;
 padding: 30px 0px;
 text-align: left;
 background-color: #339999;
 overflow: hidden;

}

  1. color-block-mod {
 width: 100%;
 top: 2%;
 padding: 30px 0px;
 text-align: left;
 background-color: #CC9933;
 overflow: hidden;

}

  1. color-block-com {
 width: 100%;
 top: 2%;
 padding: 30px 0px;
 text-align: left;
 background-color: #006699;
 overflow: hidden;

}

  1. parts-text {
 padding: 1% 0% 1% 13%;
 color: #ffffff;
 width: 46%;
 float: left;
 text-align: justify;
 font-weight: bold;
 overflow: hidden;

}

  1. 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*/

}

  1. 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;*/

}

  1. 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;*/

}

  1. color-block:hover {
 background-color: #066;
 /*on hover darker shade of same color*/

}

  1. color-block-mod:hover {
 background-color: #b88a2e;
 /*on hover darker shade of same color*/

}

  1. color-block-hp:hover {
 background-color: #b85c2e;
 /*on hover darker shade of same color*/

}

  1. 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;

}

  1. dropdown {
 position: relative;
 height: 24px;
 background: #ffffff;
 width: auto;

}

  1. dropdown ul {
 list-style: none;
 padding: 0;
 margin: auto; /*this was 0*/
 /*text-align: center; this was added*/
 line-height: 1;

}

  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;

}

  1. dropdown:after,
  2. dropdown > ul:after {
 content: ".";
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0;

}

  1. dropdown.align-right > ul > li {
 float: right;

}

  1. dropdown.align-center ul {
 text-align: center;

}

  1. dropdown.align-center ul ul {
 text-align: center; /*this was left*/

}

  1. dropdown > ul > li {
 display: inline-block;
 position: relative;
 margin: 0;
 padding: 0;

}

  1. dropdown > ul > #menu-button {
 display: none;

}

  1. dropdown ul li a {
 display: block;
 font-family: 'Quicksand', Work Sans;
 src: url(Adam.otf);
 font-weight: bold;
 text-decoration: none;

}

  1. 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;

}

  1. dropdown > ul > li.has-sub > a {
 padding-right: 40px;

} /*Dropdown parent links give different colours when hovered*/

  1. dropdown > ul > li:hover > a.lab {
 color: #339999;
 border-bottom: 3px solid currentColor;

}

  1. dropdown > ul > li:hover > a.mod {
 color: #CC9933;
 border-bottom: 3px solid currentColor;

}

  1. dropdown > ul > li:hover > a.hp {
 color: #CC6633;
 border-bottom: 3px solid currentColor;

}

  1. dropdown > ul > li:hover > a.com {
 color: #336699;
 border-bottom: 3px solid currentColor;

}

  1. dropdown > ul > li:hover > a.peo {
 color: #336633;
 border-bottom: 3px solid currentColor;

}

  1. dropdown li.has-sub::after {
 display: block;
 content: "";
 position: absolute;
 width: 0;
 height: 0;

}

  1. 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;

}

  1. dropdown ul ul ul {
 top: 37px;
 padding-left: 5px;

}

  1. dropdown ul ul li {
 position: relative;

} /* This defines how much space between heading and drop down menu */

  1. 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;

}

  1. dropdown.align-right > ul > li:hover > ul {
 left: auto;
 right: 0;
 opacity: 1;

} /*Specifies how the link opened by hovering dropdown looks*/

  1. dropdown ul ul li:hover > ul {
 left: 175px; /* how far from the dropdown menu the submenu opens */
 top: 0;
 opacity: 1;

}

  1. dropdown.align-right ul ul li:hover > ul {
 left: auto;
 /*right: 170px;*/
 width: 100%; /*added*/
 top: 0;
 opacity: 1;
 padding-right: 5px;

}

  1. 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;

}

  1. dropdown.align-right ul ul li a {
 text-align: center; /* this was right prev. */

}

  1. dropdown ul ul li:hover > a {
 background: #f2f2f2; /* colour of dropdown menu links when hovered - light grey */
 color: #363638;

}

  1. dropdown ul ul li:last-child > a,
  2. 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;
 }

}