Difference between revisions of "Template:Groningen/index css"

(Undo revision 381875 by Kninnug (talk))
Line 1: Line 1:
−
<html>
+
@font-face{
 +
font-family: "noto sans";
 +
src: local("noto sans"), local("notosans"),
 +
url("https://static.igem.org/mediawiki/2016/3/3e/T--Groningen--noto-sans-regular.ttf");
 +
font-weight: normal;
 +
font-style: normal;
 +
}
 +
@font-face{
 +
font-family: "noto sans";
 +
src: local("noto sans"), local("noto sans bold"), local("notosans"),
 +
url("https://static.igem.org/mediawiki/2016/f/ff/T--Groningen--noto-sans-bold.ttf");
 +
font-weight: bold;
 +
font-style: normal;
 +
}
 +
@font-face{
 +
font-family: "noto sans";
 +
src: local("noto sans"), local("noto sans italic"), local("notosans"),
 +
url("https://static.igem.org/mediawiki/2016/5/5f/T--Groningen--noto-sans-italic.ttf");
 +
font-weight: normal;
 +
font-style: italic;
 +
}
 +
@font-face{
 +
font-family: "noto sans";
 +
src: local("noto sans"), local("noto sans bold italic"), local("notosans"),
 +
url("https://static.igem.org/mediawiki/2016/4/4a/T--Groningen--noto-sans-bold-italic.ttf");
 +
font-weight: bold;
 +
font-style: italic;
 +
}
 +
@font-face{
 +
font-family: "noto mono";
 +
src: local("noto mono"), local("noto mono regular"), local("notomono"),
 +
url("https://static.igem.org/mediawiki/2016/8/89/T--Groningen--noto-mono-regular.ttf");
 +
font-weight: normal;
 +
font-style: normal;
 +
}
 +
@font-face{
 +
font-family: "roboto";
 +
src: local("roboto"), local("roboto regular"), local("robotoregular"),
 +
url("https://static.igem.org/mediawiki/2016/c/cf/T--Groningen--font-roboto-regular.ttf");
 +
font-weight: normal;
 +
font-style: normal;
 +
}
 +
@font-face{
 +
font-family: "roboto light";
 +
src: local("roboto light"), local("robotolight"), local("roboto-light"),
 +
url("https://static.igem.org/mediawiki/2016/7/75/T--Groningen--font-roboto-light.ttf");
 +
font-weight: light;
 +
font-style: normal;
 +
}
 +
@font-face{
 +
font-family: "roboto";
 +
src: local("roboto bold"), local("robotobold"), local("roboto-bold"),
 +
url("https://static.igem.org/mediawiki/2016/2/29/T--Groningen--font-roboto-bold.ttf");
 +
font-weight: bold;
 +
font-style: normal;
 +
}
  
−
<!--- THIS IS WHERE THE HTML BEGINS --->
+
/************************** DEFAULT WIKI SETTINGS  ************************/
  
−
<!-- This tells the browser that your page is responsive -->
+
#sideMenu, #top_title {display:none;}
 +
/* #content { padding:0px; width:1000px; margin-top:-7px; margin-left:0px;}*/
 +
body {background-color: #222; color: #eee; }
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
  
−
<head>
+
/*************************** CONTENT OF THE PAGE **************************/
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
−
<link rel="stylesheet" href="/Template:Groningen/index_css?action=raw&ctype=text/css" />
+
−
<script src="https://2016.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
+
−
</head>
+
  
−
<div id="content_wrapper">
+
/* Wrapper for the wrapper wrapper */
 +
#content{
 +
width: 100vw;
 +
max-width: 100%;
 +
margin: 0;
 +
padding: 0;
 +
background-color: #222;
 +
color: #eee;
 +
}
  
−
<header id="content-header">
+
/* Wrapper for the wrapper */
−
<span id="logo-container" class="menu-item">
+
#mw-content-text {
−
<div><a class="img" href="/Team:Groningen"><img src="https://static.igem.org/mediawiki/2016/5/5d/T--Groningen--logo-200.png" alt="CryptoGE®M" /></a></div>
+
display: flex;
−
<!-- https://static.igem.org/mediawiki/2016/e/e1/T--Groningen--logo-500.png -->
+
flex-direction: row nowrap;
−
<div class="menu-title">CryptoGE®M</div>
+
}
−
<!--<div class="sub-menu-wrap">
+
 
−
<div class="sub-menu">
+
/* Wrapper for the content */
−
<a href="/Team:Groningen">Home</a>
+
div#content_wrapper {
−
<a href="/Team:Groningen/Tour">Tour</a>
+
position: relative;
−
<a href="/Team:Groningen/Achievements">Achievements</a>
+
max-width: 960px;
−
</div>
+
margin: auto;
−
</div>-->
+
padding:0 0;
−
</span>
+
}
 +
 
 +
#HQ_page,#bodyContent,#mw-content-text{
 +
padding: 0 !important;
 +
margin: 0 !important;
 +
}
 +
 
 +
#HQ_page p,div#content-wrapper p,h1,h2,h3,h4,h5,h6,table,td,figcaption,div{
 +
font-family: "roboto light", sans-serif;
 +
/* font-weight: light;*/
 +
font-weight: normal;
 +
font-size: 12pt;
 +
line-height: 1.3em;
 
 
−
<span class="menu-item">
+
background-color: #222;
−
<div><img src="https://static.igem.org/mediawiki/2016/f/fc/T--Groningen--menu-toolbox.png" alt="Team" /></div>
+
color: #eee;
−
<div class="menu-title">Team</div>
+
}
−
<div class="sub-menu-wrap">
+
figcaption{
−
<div class="sub-menu">
+
display: block;
−
<a href="/Team:Groningen/Team">Members</a>
+
font-size: 0.9rem;
−
<a href="/Team:Groningen/Supervisors">Supervisors</a>
+
}
−
<a href="/Team:Groningen/Collaborations">Collaborations</a>
+
th td{
−
<a href="/Team:Groningen/Contact">Contact</a>
+
backgound-color: #eee;
−
</div>
+
color: #222;
−
</div>
+
font-size: 12pt;
−
</span>
+
 
 
−
<span class="menu-item">
+
font-weight: bold;
−
<div><img src="https://static.igem.org/mediawiki/2016/2/2b/T--Groningen--menu-idea.png" alt="Project" /></div>
+
}
−
<div class="menu-title">Project</div>
+
 
−
<div class="sub-menu-wrap">
+
h1{
−
<div class="sub-menu">
+
color: #07b2c5;
−
<a href="/Team:Groningen/Tour"><strong>Tour</strong></a>
+
font-size: 1.8rem;
−
<a href="/Team:Groningen/Description">Description</a>
+
line-height: 3.6rem;
−
<a href="/Team:Groningen/Design">Design</a>
+
}
−
<a href="/Team:Groningen/Results">Results</a>
+
h2{
−
<a href="/Team:Groningen/Demonstrate">Demonstrate</a>
+
color: #07b2c5;
−
<a href="/Team:Groningen/Applications">Applications</a>
+
font-size: 1.8rem;
−
<a href="/Team:Groningen/FuturePerspectives">Future<!-- Perspectives--></a>
+
line-height: 3.6rem;
−
<a href="/Team:Groningen/Notebook">Notebook</a>
+
font-weight: bold;
−
</div>
+
border-top: 1px solid #aaa;
−
</div>
+
margin-top: 2px;
−
</span>
+
}
 +
h3{
 +
color: #07b2c5;
 +
font-size: 1.6rem;
 +
line-height: 3.2rem;
 +
font-weight: bold;
 +
border-top: 1px solid #444;
 +
margin-top: 2px;
 +
}
 +
h4{
 +
font-size: 1.4rem;
 +
line-height: 2.6rem;
 +
font-weight: bold;
 +
margin-top: 2px;
 +
}
 +
h5{
 +
font-size: 1.2rem;
 +
font-weight: normal;
 +
margin-top: 2px;
 +
}
 +
h6{
 +
font-size: 1.1rem;
 +
font-weight: bold;
 +
margin-top: 2px;
 +
}
 +
 
 +
hr{
 +
margin: 5px 0;
 +
}
 +
 
 +
textarea{
 +
font-size: 1rem;
 +
font-family: "noto mono", monspace;
 
 
−
<span class="menu-item">
+
background-color: #222;
−
<div><img src="https://static.igem.org/mediawiki/2016/8/8b/T--Groningen--menu-streak.png" alt="Biology" /></div>
+
color: #eee;
−
<div class="menu-title">Biology</div>
+
}
−
<div class="sub-menu-wrap">
+
 
−
<div class="sub-menu">
+
code,pre{
−
<a href="/Team:Groningen/Experiments">Experiments</a>
+
font-size: 1rem;
−
<a href="/Team:Groningen/Parts">Parts</a>
+
font-family: "noto mono", monospace;
−
<a href="/Team:Groningen/Safety">Safety</a>
+
−
<a href="/Team:Groningen/Labjournal">Lab journal</a>
+
−
</div>
+
−
</div>
+
−
</span>
+
 
 
−
<span class="menu-item">
+
background-color: #333;
−
<div><img src="https://static.igem.org/mediawiki/2016/1/18/T--Groningen--menu-software.png" alt="Computing" /></div>
+
color: #fff;
−
<!-- https://static.igem.org/mediawiki/2016/2/26/T--Groningen--menu-modelling.png -->
+
border: 0;
−
<div class="menu-title">Computing</div>
+
}
−
<div class="sub-menu-wrap">
+
 
−
<div class="sub-menu">
+
figure{
−
<a href="/Team:Groningen/Model">Modelling</a>
+
text-align: center;
−
<a href="/Team:Groningen/Software">Software</a>
+
margin: 0;
−
<a href="/Team:Groningen/Encoding">Encoding</a>
+
padding: 0;
−
<a href="/Team:Groningen/Decoding">Decoding</a>
+
}
−
</div>
+
 
−
</div>
+
figure video,figure img{
−
</span>
+
margin: auto;
 +
border: 5px solid transparent;
 +
}
 +
 
 +
#HQ_page img{
 +
border: 3px solid transparent;
 +
}
 +
 
 +
blockquote{
 +
font-size: 1.4rem;
 +
line-height: 2rem;
 +
margin: 0;
 +
padding: 0.5em;
 
 
−
<span class="menu-item">
+
background-color: #333;
−
<div><img src="https://static.igem.org/mediawiki/2016/5/54/T--Groningen--menu-teamwork.png" alt="Human Practice" /></div>
+
font-style: italic;
−
<div class="menu-title">Human Practices</div>
+
}
−
<div class="sub-menu-wrap">
+
 
−
<div class="sub-menu">
+
.break-word{
−
<a href="/Team:Groningen/Human_Practices">Human Practices</a>
+
word-break: break-all;
−
<a href="/Team:Groningen/HP/Gold">Gold</a>
+
word-wrap: break-word;
−
<a href="/Team:Groningen/HP/Silver">Silver</a>
+
}
−
<a href="/Team:Groningen/Integrated_Practices">Integrated Practices</a>
+
 
−
<a href="/Team:Groningen/Engagement">Engagement</a>
+
#bodyContent a,#bodyContent a[href^="https://"]{
−
<!-- <a href="/Team:Groningen/HP/Outreach">Outreach</a>
+
text-decoration: underline;
−
<a href="/Team:Groningen/HP/Social">Social</a>
+
padding: 2px;
−
<a href="/Team:Groningen/HP/Legal">Legal</a>
+
border-radius: 1px;
−
<a href="/Team:Groningen/HP/Education">Education</a>
+
color: #07b2c5;
−
<a href="/Team:Groningen/HP/FutureScenarios">Future</a> -->
+
background-color: #222;
−
</div>
+
−
</div>
+
−
</span>
+
 
 
−
<span class="menu-item">
+
cursor: pointer;
−
<div><img src="https://static.igem.org/mediawiki/2016/2/26/T--Groningen--menu-modelling.png" alt="Acknowledgements" /></div>
+
}
−
<div class="menu-title">Support</div>
+
#bodyContent a:visited,#bodyContent a[href^="https://"]:visited{
−
<div class="sub-menu-wrap">
+
color: #aaa;
−
<div class="sub-menu">
+
background-color: #222;
−
<a href="/Team:Groningen/Sponsors">Sponsors</a>
+
}
−
<a href="/Team:Groningen/Attributions">Attributions</a>
+
#bodyContent a:hover,#bodyContent a[href^="https://"]:hover{
−
</div>
+
color: #222;
−
</div>
+
background-color: #eee;
−
</span>
+
}
−
</header>
+
#bodyContent a.img:hover,#bodyContent a[href^="https://"].img:hover{
 +
background-color: transparent !important;
 +
}
  
−
<hr />
+
article img,.aside img{
−
<script src="/Template:Groningen/index_js?action=raw&ctype=text/javascript"></script>
+
max-width: 98%;
 +
}
  
−
<div id="groningen-wrapper">
+
/*article.columnize p{
 +
column-count: 2;
 +
margin-bottom: 1.2rem;
 +
}
 +
article.columnize p.img{
 +
column-count: 1;
 +
margin: auto;
 +
text-align: center;
 +
}*/
  
−
</html>
+
.mw-content-ltr article ul, .mw-content-ltr article ol{
 +
margin-left: 1.5rem;
 +
}
 +
article ul > li, article ol > li{
 +
/*width: 75%;*/
 +
/*margin: auto;*/
 +
margin-top: 0.8rem;
 +
margin-left: 1rem;
 +
font-size: 12pt;
 +
}
 +
article ul > li{
 +
list-style-type: disc;
 +
list-style-image: none;
 +
}
 +
 
 +
article li:last-child{
 +
margin-bottom: 0.8rem;
 +
}
 +
 
 +
.clearfx {
 +
clear:both;
 +
}
 +
 
 +
.hide{
 +
display: none !important;
 +
}
 +
#ayoop-wrap{
 +
position: absolute;
 +
top: 0;
 +
right: 0;
 +
text-decoration: none !important;
 +
}
 +
#ayoop{
 +
position: fixed;
 +
bottom: 10px;
 +
 +
z-index: 100;
 +
display: inline-block;
 +
}
 +
#ayoop-wrap img{
 +
max-width: 30px;
 +
max-height: 30px;
 +
}
 +
a#ayoop:visited{
 +
color: #07b2c5;
 +
}
 +
#ayoop.fix{
 +
position: fixed;
 +
}
 +
#ayoop.static{
 +
position: static;
 +
}
 +
#collapse-all{
 +
position: fixed;
 +
bottom: 50px;
 +
 +
z-index: 100;
 +
display: inline-block;
 +
}
 +
 
 +
.collapser{
 +
cursor: pointer;
 +
}
 +
.collapser{
 +
background-image: url("https://static.igem.org/mediawiki/2016/7/77/T--Groningen--minux.png");
 +
background-size: 30px 30px;
 +
background-repeat: no-repeat;
 +
background-position: right center;
 +
}
 +
.collapser.collapsed{
 +
background-image: url("https://static.igem.org/mediawiki/2016/f/fa/T--Groningen--plus.png");
 +
}
 +
/*.collapser:after{
 +
float: right;
 +
content: "⊖";
 +
font-weight: normal;
 +
}
 +
.collapser.collapsed:after{
 +
float: right;
 +
content: "⊕";
 +
font-weight: normal;
 +
}*/
 +
 
 +
.judges-will-not-evaluate {
 +
border: 4px solid #72c9b6;
 +
display: block;
 +
margin: 5px 15px;
 +
width: 95%;
 +
font-weight:bold;
 +
}
 +
 
 +
/* Customizationen */
 +
#team_name,#page_name,#top_title {
 +
display: none;
 +
}
 +
 
 +
#content-header{
 +
position: relative;
 +
font-size: 1.2rem;
 +
line-height: 1.6rem;
 +
display: flex;
 +
flex-flow: row nowrap;
 +
justify-content: space-between;
 +
align-content: stretch;
 +
align-items: flex-end;
 +
}
 +
 
 +
#content-header .menu-item{
 +
flex: 1 1 auto;
 +
/* max-width: 120px; */
 +
}
 +
#content-header .menu-item img{
 +
cursor: pointer;
 +
max-width: 60px;
 +
}
 +
#content-header .menu-item#logo-container img{
 +
max-width: 150px;
 +
}
 +
 
 +
#page-footer.page-footer {
 +
display: flex !important;
 +
position: relative;
 +
 +
flex-flow: row wrap;
 +
align-items: stretch;
 +
 +
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wgMCQoaXUbaXAAAAG5JREFUOMulkksSwEAERNucvG8ui0wy+SCIHep1aQBGEFACikQMC0YhxIP56H0KdOBToAsDgFjwUcuIjaiZWahrIWsrXGJGZHSXZ/5B/BOcOSez55KDF1B65d9ndMzJsmFPYFyGWprgPvoV5svSBqA6KpTJOjxSAAAAAElFTkSuQmCC");
 +
background-repeat: no-repeat;
 +
background-position: right bottom;
 +
}
 +
 
 +
#page-footer.page-footer li,#page-footer.page-footer ul{
 +
margin-left: 0.5em !important;
 +
}
 +
 
 +
#page-footer.page-footer section{
 +
flex: 1 1 auto;
 +
display: inline-block;
 +
width: 19%;
 +
}
 +
#page-footer.page-footer section.double{
 +
width: 39%;
 +
flex: 2 1 auto;
 +
}
 +
.menu-item li,.menu-item ul{
 +
list-style: none outside;
 +
margin-left: 0;
 +
padding-left: 0;
 +
width: 100%;
 +
}
 +
.sub-menu-wrap{
 +
position: relative;
 +
padding: 0;
 +
margin: 0;
 +
height: 4px;
 +
max-width: 100%;
 +
/*display: inline-block;*/
 +
/*border: 1px solid green;*/
 +
}
 +
.menu-item .sub-menu{
 +
display: flex;
 +
flex-flow: column nowrap;
 +
align-items: stretch;
 +
position: absolute;
 +
top: 0;
 +
/*left: -10%;*/
 +
padding: 0;
 +
margin: 0;
 +
display: none;
 +
min-width: 100%;
 +
z-index: 10;
 +
 +
background-color: #222;
 +
/*border: 1px solid red;*/
 +
border: 1px solid #222;
 +
padding: 2px;
 +
}
 +
.sub-menu li{
 +
margin: 4px;
 +
width: 100%;
 +
}
 +
.sub-menu li a{
 +
padding: 4px;
 +
width: 100%;
 +
}
 +
.menu-item{
 +
text-align: center;
 +
border: 1px solid #222;
 +
/*border: 1px solid yellow;*/
 +
}
 +
.menu-item:hover .sub-menu,.menu-item.hover .sub-menu{
 +
display: flex;
 +
border: 1px solid #eee;
 +
border-left: 1px solid #eee;
 +
border-right: 1px solid #eee;
 +
}
 +
.menu-item:hover .sub-menu{
 +
z-index: 11;
 +
}
 +
 
 +
.split{
 +
position: relative;
 +
display: flex;
 +
flex-flow: row nowrap;
 +
justify-content: space-between;
 +
}
 +
.split > .left{
 +
order: 1;
 +
margin-right: 3px;
 +
}
 +
.split > .right{
 +
order: 2;
 +
margin-left: 3px;
 +
}
 +
.split > .flone{
 +
flex: 1 1;
 +
position: relative;
 +
}
 +
.split > .fltwo{
 +
flex: 2 1;
 +
position: relative;
 +
}
 +
.split > .flthree{
 +
flex: 3 1;
 +
position: relative;
 +
}
 +
.split > .flfour{
 +
flex: 4 1;
 +
position: relative;
 +
}
 +
.split > .flfive{
 +
flex: 5 1;
 +
position: relative;
 +
}
 +
.split > .flsix{
 +
flex: 6 1;
 +
position: relative;
 +
}
 +
.split > .flseven{
 +
flex: 7 1;
 +
position: relative;
 +
}
 +
.split img,.split video{
 +
max-width: 98%;
 +
}
 +
.split > .half{
 +
flex: 0 1 auto;
 +
width: 48%;
 +
}
 +
.split > .threeQuart{
 +
flex: 0 1 auto;
 +
width: 73%;
 +
}
 +
.split > .oneQuart{
 +
flex: 0 1 auto;
 +
width: 23%;
 +
}
 +
.split > .half-left{
 +
display: inline-block;
 +
width: 48%;
 +
flex: 0 1 auto;
 +
order: 1;
 +
}
 +
.split > .half-right{
 +
display: inline-block;
 +
width: 48%;
 +
flex: 0 1 auto;
 +
order: 2;
 +
}
 +
.fix.static{
 +
position: static;
 +
}
 +
.fix.fixed{
 +
position: fixed;
 +
}
 +
ul.disc li{
 +
list-style-type: disc;
 +
list-style-image: none;
 +
}
 +
#bodyContent a.biglink{
 +
font-size: 1.8rem;
 +
font-weight: bold;
 +
padding: 5px;
 +
margin: 7px;
 +
}
 +
.centrate{
 +
text-align: center !important;
 +
}
 +
.incenter{
 +
display: inline-block;
 +
margin: auto;
 +
}
 +
 
 +
div#groningen-wrapper{
 +
/*display: flex;
 +
flex-flow: row nowrap;*/
 +
}
 +
.fourth-width{
 +
flex: 3 1;
 +
position: relative;
 +
}
 +
.aside{
 +
flex: 2 1;
 +
position: relative;
 +
}
 +
 
 +
.bleu{
 +
color: #07b2c5;
 +
}
 +
.down-one{
 +
margin-top: 1.5em;
 +
}
 +
 
 +
/* Source: http://www.simonbattersby.com/blog/simple-jquery-image-crossfade/ */
 +
.cycler{
 +
position: relative;
 +
}
 +
.cycler > img{
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
z-index: 2;
 +
cursor: pointer;
 +
}
 +
.cycler > img.active{
 +
z-index: 4;
 +
}
 +
.cycler > img.base{
 +
z-index: 1;
 +
position: static;
 +
display: block;
 +
}
 +
 
 +
/* Remove trailing line. yuo are the wrost! */
 +
.MathJax nobr>span.math>span{
 +
border-left-width:0 !important
 +
}
 +
 
 +
/*************************** RESPONSIVE STYLING **************************/
 +
 
 +
/* IF THE SCREEN IS LESS THAN 970PX */
 +
 
 +
@media only screen and (max-width: 960px) {
 +
div#content_wrapper{
 +
/* width: 100vw; */
 +
max-width: 100%;
 +
}
 +
 +
#ayoop-wrap{
 +
right: 30px;
 +
}
 +
}
 +
 
 +
@media only screen and (max-width: 600px) {
 +
 
 +
#content-header{
 +
flex-flow: column nowrap;
 +
align-items: center;
 +
}
 +
.menu-item{
 +
min-width: 50%;
 +
}
 +
.menu-title{
 +
text-decoration: underline;
 +
font-weight: bold;
 +
}
 +
.menu-item:not(#logo-container) img{
 +
display: none;
 +
}
 +
 +
.split{
 +
flex-flow: column nowrap;
 +
max-width: 100%;
 +
}
 +
.split > .left,.split > .right{
 +
max-width: 100%;
 +
}
 +
 +
#page-footer.page-footer section,#page-footer.page-footer section.double{
 +
width: auto;
 +
flex: 1 1 auto;
 +
}
 +
}

Revision as of 11:46, 19 October 2016

@font-face{ font-family: "noto sans"; src: local("noto sans"), local("notosans"), url("https://static.igem.org/mediawiki/2016/3/3e/T--Groningen--noto-sans-regular.ttf"); font-weight: normal; font-style: normal; } @font-face{ font-family: "noto sans"; src: local("noto sans"), local("noto sans bold"), local("notosans"), url("https://static.igem.org/mediawiki/2016/f/ff/T--Groningen--noto-sans-bold.ttf"); font-weight: bold; font-style: normal; } @font-face{ font-family: "noto sans"; src: local("noto sans"), local("noto sans italic"), local("notosans"), url("https://static.igem.org/mediawiki/2016/5/5f/T--Groningen--noto-sans-italic.ttf"); font-weight: normal; font-style: italic; } @font-face{ font-family: "noto sans"; src: local("noto sans"), local("noto sans bold italic"), local("notosans"), url("https://static.igem.org/mediawiki/2016/4/4a/T--Groningen--noto-sans-bold-italic.ttf"); font-weight: bold; font-style: italic; } @font-face{ font-family: "noto mono"; src: local("noto mono"), local("noto mono regular"), local("notomono"), url("https://static.igem.org/mediawiki/2016/8/89/T--Groningen--noto-mono-regular.ttf"); font-weight: normal; font-style: normal; } @font-face{ font-family: "roboto"; src: local("roboto"), local("roboto regular"), local("robotoregular"), url("https://static.igem.org/mediawiki/2016/c/cf/T--Groningen--font-roboto-regular.ttf"); font-weight: normal; font-style: normal; } @font-face{ font-family: "roboto light"; src: local("roboto light"), local("robotolight"), local("roboto-light"), url("https://static.igem.org/mediawiki/2016/7/75/T--Groningen--font-roboto-light.ttf"); font-weight: light; font-style: normal; } @font-face{ font-family: "roboto"; src: local("roboto bold"), local("robotobold"), local("roboto-bold"), url("https://static.igem.org/mediawiki/2016/2/29/T--Groningen--font-roboto-bold.ttf"); font-weight: bold; font-style: normal; }

/************************** DEFAULT WIKI SETTINGS ************************/

  1. sideMenu, #top_title {display:none;}

/* #content { padding:0px; width:1000px; margin-top:-7px; margin-left:0px;}*/ body {background-color: #222; color: #eee; }

  1. bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }

/*************************** CONTENT OF THE PAGE **************************/

/* Wrapper for the wrapper wrapper */

  1. content{

width: 100vw; max-width: 100%; margin: 0; padding: 0; background-color: #222; color: #eee; }

/* Wrapper for the wrapper */

  1. mw-content-text {

display: flex; flex-direction: row nowrap; }

/* Wrapper for the content */ div#content_wrapper { position: relative; max-width: 960px; margin: auto; padding:0 0; }

  1. HQ_page,#bodyContent,#mw-content-text{

padding: 0 !important; margin: 0 !important; }

  1. HQ_page p,div#content-wrapper p,h1,h2,h3,h4,h5,h6,table,td,figcaption,div{

font-family: "roboto light", sans-serif; /* font-weight: light;*/ font-weight: normal; font-size: 12pt; line-height: 1.3em;

background-color: #222; color: #eee; } figcaption{ display: block; font-size: 0.9rem; } th td{ backgound-color: #eee; color: #222; font-size: 12pt;

font-weight: bold; }

h1{ color: #07b2c5; font-size: 1.8rem; line-height: 3.6rem; } h2{ color: #07b2c5; font-size: 1.8rem; line-height: 3.6rem; font-weight: bold; border-top: 1px solid #aaa; margin-top: 2px; } h3{ color: #07b2c5; font-size: 1.6rem; line-height: 3.2rem; font-weight: bold; border-top: 1px solid #444; margin-top: 2px; } h4{ font-size: 1.4rem; line-height: 2.6rem; font-weight: bold; margin-top: 2px; } h5{ font-size: 1.2rem; font-weight: normal; margin-top: 2px; } h6{ font-size: 1.1rem; font-weight: bold; margin-top: 2px; }

hr{ margin: 5px 0; }

textarea{ font-size: 1rem; font-family: "noto mono", monspace;

background-color: #222; color: #eee; }

code,pre{ font-size: 1rem; font-family: "noto mono", monospace;

background-color: #333; color: #fff; border: 0; }

figure{ text-align: center; margin: 0; padding: 0; }

figure video,figure img{ margin: auto; border: 5px solid transparent; }

  1. HQ_page img{

border: 3px solid transparent; }

blockquote{ font-size: 1.4rem; line-height: 2rem; margin: 0; padding: 0.5em;

background-color: #333; font-style: italic; }

.break-word{ word-break: break-all; word-wrap: break-word; }

  1. bodyContent a,#bodyContent a[href^="https://"]{

text-decoration: underline; padding: 2px; border-radius: 1px; color: #07b2c5; background-color: #222;

cursor: pointer; }

  1. bodyContent a:visited,#bodyContent a[href^="https://"]:visited{

color: #aaa; background-color: #222; }

  1. bodyContent a:hover,#bodyContent a[href^="https://"]:hover{

color: #222; background-color: #eee; }

  1. bodyContent a.img:hover,#bodyContent a[href^="https://"].img:hover{

background-color: transparent !important; }

article img,.aside img{ max-width: 98%; }

/*article.columnize p{ column-count: 2; margin-bottom: 1.2rem; } article.columnize p.img{ column-count: 1; margin: auto; text-align: center; }*/

.mw-content-ltr article ul, .mw-content-ltr article ol{ margin-left: 1.5rem; } article ul > li, article ol > li{ /*width: 75%;*/ /*margin: auto;*/ margin-top: 0.8rem; margin-left: 1rem; font-size: 12pt; } article ul > li{ list-style-type: disc; list-style-image: none; }

article li:last-child{ margin-bottom: 0.8rem; }

.clearfx { clear:both; }

.hide{ display: none !important; }

  1. ayoop-wrap{

position: absolute; top: 0; right: 0; text-decoration: none !important; }

  1. ayoop{

position: fixed; bottom: 10px;

z-index: 100; display: inline-block; }

  1. ayoop-wrap img{

max-width: 30px; max-height: 30px; } a#ayoop:visited{ color: #07b2c5; }

  1. ayoop.fix{

position: fixed; }

  1. ayoop.static{

position: static; }

  1. collapse-all{

position: fixed; bottom: 50px;

z-index: 100; display: inline-block; }

.collapser{ cursor: pointer; } .collapser{ background-image: url("T--Groningen--minux.png"); background-size: 30px 30px; background-repeat: no-repeat; background-position: right center; } .collapser.collapsed{ background-image: url("T--Groningen--plus.png"); } /*.collapser:after{ float: right; content: "⊖"; font-weight: normal; } .collapser.collapsed:after{ float: right; content: "⊕"; font-weight: normal; }*/

.judges-will-not-evaluate { border: 4px solid #72c9b6; display: block; margin: 5px 15px; width: 95%; font-weight:bold; }

/* Customizationen */

  1. team_name,#page_name,#top_title {

display: none; }

  1. content-header{

position: relative; font-size: 1.2rem; line-height: 1.6rem; display: flex; flex-flow: row nowrap; justify-content: space-between; align-content: stretch; align-items: flex-end; }

  1. content-header .menu-item{

flex: 1 1 auto; /* max-width: 120px; */ }

  1. content-header .menu-item img{

cursor: pointer; max-width: 60px; }

  1. content-header .menu-item#logo-container img{

max-width: 150px; }

  1. page-footer.page-footer {

display: flex !important; position: relative;

flex-flow: row wrap; align-items: stretch;

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wgMCQoaXUbaXAAAAG5JREFUOMulkksSwEAERNucvG8ui0wy+SCIHep1aQBGEFACikQMC0YhxIP56H0KdOBToAsDgFjwUcuIjaiZWahrIWsrXGJGZHSXZ/5B/BOcOSez55KDF1B65d9ndMzJsmFPYFyGWprgPvoV5svSBqA6KpTJOjxSAAAAAElFTkSuQmCC"); background-repeat: no-repeat; background-position: right bottom; }

  1. page-footer.page-footer li,#page-footer.page-footer ul{

margin-left: 0.5em !important; }

  1. page-footer.page-footer section{

flex: 1 1 auto; display: inline-block; width: 19%; }

  1. page-footer.page-footer section.double{

width: 39%; flex: 2 1 auto; } .menu-item li,.menu-item ul{ list-style: none outside; margin-left: 0; padding-left: 0; width: 100%; } .sub-menu-wrap{ position: relative; padding: 0; margin: 0; height: 4px; max-width: 100%; /*display: inline-block;*/ /*border: 1px solid green;*/ } .menu-item .sub-menu{ display: flex; flex-flow: column nowrap; align-items: stretch; position: absolute; top: 0; /*left: -10%;*/ padding: 0; margin: 0; display: none; min-width: 100%; z-index: 10;

background-color: #222; /*border: 1px solid red;*/ border: 1px solid #222; padding: 2px; } .sub-menu li{ margin: 4px; width: 100%; } .sub-menu li a{ padding: 4px; width: 100%; } .menu-item{ text-align: center; border: 1px solid #222; /*border: 1px solid yellow;*/ } .menu-item:hover .sub-menu,.menu-item.hover .sub-menu{ display: flex; border: 1px solid #eee; border-left: 1px solid #eee; border-right: 1px solid #eee; } .menu-item:hover .sub-menu{ z-index: 11; }

.split{ position: relative; display: flex; flex-flow: row nowrap; justify-content: space-between; } .split > .left{ order: 1; margin-right: 3px; } .split > .right{ order: 2; margin-left: 3px; } .split > .flone{ flex: 1 1; position: relative; } .split > .fltwo{ flex: 2 1; position: relative; } .split > .flthree{ flex: 3 1; position: relative; } .split > .flfour{ flex: 4 1; position: relative; } .split > .flfive{ flex: 5 1; position: relative; } .split > .flsix{ flex: 6 1; position: relative; } .split > .flseven{ flex: 7 1; position: relative; } .split img,.split video{ max-width: 98%; } .split > .half{ flex: 0 1 auto; width: 48%; } .split > .threeQuart{ flex: 0 1 auto; width: 73%; } .split > .oneQuart{ flex: 0 1 auto; width: 23%; } .split > .half-left{ display: inline-block; width: 48%; flex: 0 1 auto; order: 1; } .split > .half-right{ display: inline-block; width: 48%; flex: 0 1 auto; order: 2; } .fix.static{ position: static; } .fix.fixed{ position: fixed; } ul.disc li{ list-style-type: disc; list-style-image: none; }

  1. bodyContent a.biglink{

font-size: 1.8rem; font-weight: bold; padding: 5px; margin: 7px; } .centrate{ text-align: center !important; } .incenter{ display: inline-block; margin: auto; }

div#groningen-wrapper{ /*display: flex; flex-flow: row nowrap;*/ } .fourth-width{ flex: 3 1; position: relative; } .aside{ flex: 2 1; position: relative; }

.bleu{ color: #07b2c5; } .down-one{ margin-top: 1.5em; }

/* Source: http://www.simonbattersby.com/blog/simple-jquery-image-crossfade/ */ .cycler{ position: relative; } .cycler > img{ position: absolute; top: 0; left: 0; z-index: 2; cursor: pointer; } .cycler > img.active{ z-index: 4; } .cycler > img.base{ z-index: 1; position: static; display: block; }

/* Remove trailing line. yuo are the wrost! */ .MathJax nobr>span.math>span{ border-left-width:0 !important }

/*************************** RESPONSIVE STYLING **************************/

/* IF THE SCREEN IS LESS THAN 970PX */

@media only screen and (max-width: 960px) { div#content_wrapper{ /* width: 100vw; */ max-width: 100%; }

#ayoop-wrap{ right: 30px; } }

@media only screen and (max-width: 600px) {

#content-header{ flex-flow: column nowrap; align-items: center; } .menu-item{ min-width: 50%; } .menu-title{ text-decoration: underline; font-weight: bold; } .menu-item:not(#logo-container) img{ display: none; }

.split{ flex-flow: column nowrap; max-width: 100%; } .split > .left,.split > .right{ max-width: 100%; }

#page-footer.page-footer section,#page-footer.page-footer section.double{ width: auto; flex: 1 1 auto; } }