/********************************* DEFAULT WIKI SETTINGS ********************************/
- sideMenu, #top_title {
display: none;
}
- content {
padding: 0; width: 100%; margin-top: -7px; margin: auto; background-color: #f9f9f9
}
body {
background-color: #f9f9f9;
}
- bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {
margin-bottom: 0;
}
/*****************************************************************************************/
.menu {
margin: 30px auto 0; width: 1100px;
background: #fff;
}
.menu img {
width: 200px; height: 141px; padding: 10px 30px 30px;
}
.menu .head {
position: relative; #overflow: hidden; background: url('https://static.igem.org/mediawiki/2016/b/bf/T--Linkoping_Sweden--LiU_bike_bg.jpg'); background-size: cover; padding-top: 10px; padding-right: 13px;
}
- bodyContent .menu .head #social-media {
display: flex; justify-content: center; float: right;
}
- bodyContent .menu .head #social-media a {
display: block; align-items: stretch; text-align: center; vertical-align: top; width: 38px; height: 44px; cursor: pointer; padding-right: 0;
transition: all .2s;
}
.menu .head #social-media a:hover {
transform: scale(1.2);
}
.menu .head a:first-child {
#margin-right: auto;
}
.menu .head #social-media img {
width: 24px; height: 24px; padding: 10px 7px;
}
.content-container {
width: 1100px; margin: 0 auto; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.content {
background: #fff; padding: 30px; padding-top: 0;
}
.closed-menu {
border: 1px solid #888; border-left: none; border-right: none; margin: 0 20px; margin-top: 30px; margin-bottom: 20px;
font-family: 'Open Sans', sans-serif; font-size: 15px;
}
.menu-category {
display: inline-block; position: relative;
text-align: center; width: 19%; box-sizing: border-box;
}
.menu-category a, .menu-category span {
display: block; padding: 13px;
color: #000;
}
.menu-category .menu-items {
display: none; position: absolute; background: #fff; width: 100%; border: 1px solid #888; border-top: none;
}
.menu-category .menu-items a {
display: block; padding: 10px 0; border-bottom: 1px solid #888; margin: 0 15px;
color: #000;
}
.menu-category .menu-items a:first-child {
border-top: 1px solid #888;
}
.menu-category .menu-items a:last-child {
border-bottom: none;
}
.menu-category a:hover {
color: #019966; text-decoration: none;
}
.menu-category:hover .menu-items {
display: block;
}
.open-menu {
width: 1000px; margin: 0 auto; background: #FFF;
font-family: 'Open Sans', sans-serif; font-size: 14px;
}
.open-menu div {
display: inline-block; width: 19%; vertical-align: top; padding: 20px; box-sizing: border-box;
}
.open-menu div a {
display: block; color: #222;
padding: 10px;
}
- HQ_page .content h1, .content h2, .content h3, .content h4, .content h5 {
font-family: 'Playfair Display', serif; font-size: 187%; margin-top: 10px; font-weight: 700;
}
.mw-headline {
display: inline-block; width: 100%; padding-top: 40px; margin-top: -30px;
}
.content .mw-editsection {
display: none;
}
- HQ_page .content p {
font-family: 'Raleway', sans-serif; font-size: 110%; line-height: 22px;
}
.content p i {
color: #222;
}
.footer {
margin-top: 60px; background-color: #000; color: #fff; font-family: 'Open Sans', sans-serif;
display: flex; justify-content: space-between;
}
.footer img {
height: 140px; vertical-align: top;
}
.footer > div {
display: flex; padding: 20px; flex-grow: 2; flex-direction: row-reverse; justify-content: space-around;
}
.footer a {
color: #fff; float: left;
}
.footer > div div {
float: right;
}
.team-container {
position: relative; margin-top: 30px; display: flex; width: 100%;
justify-content: flex-start;
}
.team-container div {
overflow: hidden; position: relative;
transition: all 0.6s;
}
.team-container.images-3 div {
max-width: 33.4%;
}
.team-container.images-11 div {
max-width: 9.1%;
}
.team-container img {
height: 600px; margin: auto; position: relative; left: 50%; transform: translateX(-50%); display: block; /* optional */
cursor: pointer;
-webkit-filter: grayscale(100%); filter: grayscale(100%); filter: gray; filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
-webkit-transition: -webkit-filter 0.4s, transform 0.4s; -moz-transition: filter 0.4s, transform 0.4s; -ms-transition: filter 0.4s, transform 0.4s; -o-transition: filter 0.4s, transform 0.4s; transition: filter 0.4s, transform 0.4s; transition: -webkit-filter 0.4s, transform 0.4s;
}
.team-container img:hover, .team-container .active img {
-webkit-filter: none; filter: none;
}
.team-container.displaying div {
max-width: 0;
}
.team-container.displaying div.active {
max-width: 400px;
}
.team-container.displaying div.info, .team-container.displaying div.member-info {
max-width: 100%;
}
.team-container div.info p {
margin-top: 30px;
}
.team-container div.info {
position: absolute; top: 0; left: 400px; bottom: 0; right: 0; margin: 20px; max-width: 100%;
}
.team-container div.member-info {
max-width: 100%;
}
.team-container div.info .info-close {
float: right; margin-top: 17px; background: #000; padding: 5px 10px; color: #fff;
cursor: pointer;
-webkit-transition: background 0.4s; -moz-transition: background 0.4s; -ms-transition: background 0.4s; -o-transition: background 0.4s; transition: background 0.4s;
}
.team-container div.info .info-close:hover {
background: #666;
}
- member-info {
display: none;
}
img.cover {
width: 100%; height: auto;
}
.menu-button {
display: none;
}
- mobile-menu {
display: none;
}
- sponsors {
font-size: 0; margin: 10px;
}
- sponsors p {
margin-left: 20px; font-family: 'Raleway', sans-serif; margin-bottom: 0;
}
- sponsors a {
display: inline-block; width: 20%; box-sizing: border-box; padding: 0 20px;
}
- sponsors img {
width: 100%;
}
.content {
position: relative;
}
- toc {
position: absolute; display: inline-block; border: none; border-right: 1px solid #888; background: none; margin-right: 10px; margin-top: -20px; padding-right: 10px; width: 200px; height: 100%; left: 30px;
}
- toc #toctitle {
text-align: left; font-size: 18px; padding-top: 12px;
}
- toc > ul {
padding-top: 12px; font-family: 'Raleway', sans-serif; font-size: 14px;
}
- toc a {
color: #333;
}
- toc a {
display: inline-block; border-left: 3px solid transparent; padding-left: 5px;
}
- toc ul {
margin: 0 !important; width: 200px;
}
.toc-fixed #toctitle {
position: fixed; top: 40px;
}
.toc-fixed > ul {
position: fixed; top: 71px;
}
- toc a.toc-selected {
border-left: 3px solid #019966;
}
.content.toc-exist {
padding-left: 260px;
}
/** Small screen **/
@media screen and (max-width: 1100px) {
.menu { margin-top: 0; width: 100%; }
#mw-content-text>p { margin: 0; }
#globalWrapper { padding-bottom: 0; }
.content-container { width: 100%; }
#toc { display: none; }
.content.toc-exist { padding-left: 30px; }
}
/** Mobile **/ @media screen and (max-width: 768px) {
.menu .head { display: block; }
.menu .head a:first-child { width: 100%; display: block; }
.menu .head > a:first-child img { width: 50%; height: auto; box-sizing: border-box; }
#bodyContent .menu .head #social-media { display: none; }
.menu-button { display: block; background: none; border-color: transparent; position: absolute; top: 10px; right: 10px;
width: 48px; height: 48px; }
.menu .menu-button { top: 11px; }
.menu-button span { display: block; height: 3px; width: auto; border-radius: 2px; background: #000; margin-bottom: 4px; margin-left: 4px; margin-right: 4px; }
.menu-button span:first-child { margin-top: 10px; }
.closed-menu { display: none;
position: fixed; top: 18px; left: 0; background: #fff; margin: 0; width: 100%; height: 100%; overflow: scroll;
z-index: 888; }
.closed-menu .menu-category { display: block; width: 100%; text-align: left; padding-left: 20px; }
.closed-menu .menu-category:last-child { padding-bottom: 30px; }
.menu-category .menu-items { display: block; position: relative;
border: none; }
.menu-category .menu-items a { border: none !important; margin-left: 30px; }
.menu-category > a { font-size: 18px; }
#mobile-menu { display: block; padding: 26px; font-size: 24px; padding-left: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); margin-bottom: 16px; }
#mobile-menu div { display: inline-block; }
#bodyContent #mobile-menu a { padding: 0 3px; text-decoration: none; }
#mobile-menu img { width: 24px; height: 24px; -webkit-filter: invert(1); margin-bottom: 6px; }
.footer { flex-wrap: wrap; flex-direction: row; }
.footer > div { display: flex; justify-content: space-around; }
.footer img { height: auto; width: 100%; }
.footer > div div { margin: 0; float: none; }
#sponsors a { display: block; width: 100%; padding: 20px; }
}