Difference between revisions of "Team:Aachen/Template:Team:Aachen/CSS/Theme1"

Line 187: Line 187:
 
}
 
}
  
    .popupsquare {
+
.popupsquare {
        float: left;
+
    float: left;
        position: relative;
+
    position: relative;
        width: 100%;
+
    width: 100%;
        padding-bottom: 100%;
+
    padding-bottom: 100%;
        margin-right: 15px;
+
    margin-right: 15px;
        margin-bottom: 15px !important;
+
    margin-bottom: 15px !important;
        background-color: #333333;
+
    background-color: #333333;
        overflow: hidden;
+
    overflow: hidden;
        text-align: center;
+
    text-align: center;
        font-size: 20px;
+
    font-size: 20px;
        background-size: cover !important;
+
    background-size: cover !important;
    }
+
}
  
    .membg {
+
.membg {
        background-position: center center;
+
    background-position: center center;
        background-repeat: no-repeat;
+
    background-repeat: no-repeat;
        background-size: contain;
+
    background-size: contain;
  
    }
+
}
  
    .iSD {
+
.iSD {
        background-image: url(https://static.igem.org/mediawiki/2015/4/4a/Aachen_iSD.jpg);
+
    background-image: url(https://static.igem.org/mediawiki/2015/4/4a/Aachen_iSD.jpg);
    }
+
    .iSD:hover {
+
        background-image: url(https://static.igem.org/mediawiki/2015/3/38/Aachen_iSD.gif);
+
    }
+
    .iPikachu {
+
        background-image: url(https://static.igem.org/mediawiki/2015/9/9c/Aachen_iTB.jpg);
+
    }
+
    .iPikachu:hover {
+
        background-image: url(https://static.igem.org/mediawiki/2015/5/50/Aachen_iTB.gif);
+
    }
+
    .iSS {
+
        background-image: url(https://static.igem.org/mediawiki/2015/1/14/Aachen_iSS.jpg);
+
    }
+
    .iSS:hover {
+
        background-image: url(https://static.igem.org/mediawiki/2015/f/fd/Aachen_iSS.gif);
+
    }
+
    .iMO {
+
        background-image: url(https://static.igem.org/mediawiki/2015/2/28/Aachen_iMO.jpg);
+
    }
+
    .iMO:hover {
+
        background-image: url(https://static.igem.org/mediawiki/2015/d/d1/Aachen_iMO.gif);
+
    }
+
    .iPO {
+
        background-image: url(https://static.igem.org/mediawiki/2015/5/57/Aachen_iPO.jpg);
+
    }
+
    .iPO:hover {
+
        background-image: url(https://static.igem.org/mediawiki/2015/d/d0/Aachen_iPO.gif);
+
    }
+
    .iSK {
+
        background-image: url(https://static.igem.org/mediawiki/2015/f/f9/Aachen_iSK.png);
+
    }
+
    .iSK:hover {
+
        background-image: url(https://static.igem.org/mediawiki/2015/9/98/Aachen_iSK.gif);
+
    }
+
    .iMD {
+
        background-image: url(https://static.igem.org/mediawiki/2015/5/58/Aachen_iMH.jpg);
+
    }
+
    .iMD:hover {
+
        background-image: url(https://static.igem.org/mediawiki/2015/f/fb/Aachen_iMH.gif);
+
    }
+
    .iLG {
+
        background-image: url(https://static.igem.org/mediawiki/2015/0/0f/Aachen_iLG.jpg);
+
    }
+
    .iLG:hover {
+
        background-image: url(https://static.igem.org/mediawiki/2015/b/b8/Aachen_iLG.gif);
+
    }
+
    .iRH{
+
        background-image: url(https://static.igem.org/mediawiki/2015/9/9e/Aachen_iRH.jpg);
+
    }
+
    .iRH:hover{
+
        background-image: url(https://static.igem.org/mediawiki/2015/d/d6/Aachen_iRH.gif);
+
    }
+
    .iPD{
+
        background-image: url(https://static.igem.org/mediawiki/2015/9/92/Aachen_iPD.jpg);
+
    }
+
    .iPD:hover {
+
        background-image: url(https://static.igem.org/mediawiki/2015/d/d3/Aachen_iPD.gif);
+
    }
+
    .iMB {
+
        background-image: url(https://static.igem.org/mediawiki/2015/7/74/Aachen_iMB.jpg);
+
    }
+
    .iMB:hover {
+
        background-image: url(https://static.igem.org/mediawiki/2015/c/c0/Aachen_iMB.gif);
+
    }
+
    .iCG {
+
        background-image: url(https://static.igem.org/mediawiki/2015/a/af/Aachen_iCG.jpg);
+
    }
+
    .iCG:hover {
+
        background-image: url(https://static.igem.org/mediawiki/2015/5/51/Aachen_iCG.gif);
+
    }
+
    .iJR {
+
        background-image: url(https://static.igem.org/mediawiki/2015/2/2e/Aachen_iJR.jpg);
+
    }
+
    .iJR:hover {
+
        background-image: url(https://static.igem.org/mediawiki/2015/6/60/Aachen_iJR.gif);
+
    }
+
    .iJR > div {
+
        background-image: url("http://igem.rwth-aachen.de/2015/images/f/ff/Aachen_iJRglass.png");
+
        background-position: center;
+
        opacity:0;
+
        transition: opacity 0s 9999s;
+
    }
+
    .iJR > div:hover {
+
        opacity:1;
+
        transition-delay: 0.9s;
+
    }
+
    .iSB{
+
        background-image: url(https://static.igem.org/mediawiki/2015/1/12/Aachen_iSB.jpg);
+
    }
+
    .iSB:hover {
+
        background-image: url(https://static.igem.org/mediawiki/2015/2/2c/Aachen_iSB.gif);
+
    }
+
    .iTP {
+
        background-image: url(https://static.igem.org/mediawiki/2015/3/38/Aachen_iTP.jpg);
+
    }
+
    .iTP:hover {
+
        background-image: url(https://static.igem.org/mediawiki/2015/6/6a/Aachen_iTP.gif);
+
    }
+
    .iTS {
+
        background-image: url(https://static.igem.org/mediawiki/2015/5/54/Aachen_iTS.jpg);
+
    }
+
    .iTS:hover {
+
        background-image: url(https://static.igem.org/mediawiki/2015/3/3c/Aachen_iTS.gif);
+
    }
+
    .iLH{
+
        background-image: url(https://static.igem.org/mediawiki/2015/e/ec/Aachen_iLH.jpg);
+
 
}
 
}
    .iLH:hover {
+
.iSD:hover {
        background-image: url(https://static.igem.org/mediawiki/2015/5/56/Aachen_iLH.gif);
+
    background-image: url(https://static.igem.org/mediawiki/2015/3/38/Aachen_iSD.gif);
 
}
 
}
     .iLM {
+
.iPikachu {
        background-image: url(https://static.igem.org/mediawiki/2015/8/81/Aachen_iLM.jpg);
+
     background-image: url(https://static.igem.org/mediawiki/2015/9/9c/Aachen_iTB.jpg);
    }
+
}
    .iLM:hover {
+
.iPikachu:hover {
        background-image: url(https://static.igem.org/mediawiki/2015/b/bc/Aachen_iLM.gif);
+
    background-image: url(https://static.igem.org/mediawiki/2015/5/50/Aachen_iTB.gif);
    }
+
}
    .iSL {
+
.iSS {
        background-image: url(https://static.igem.org/mediawiki/2015/0/0c/Aachen_iSL.jpg);
+
    background-image: url(https://static.igem.org/mediawiki/2015/1/14/Aachen_iSS.jpg);
    }
+
}
    .iSL:hover {
+
.iSS:hover {
        background-image: url(https://static.igem.org/mediawiki/2015/1/1d/Aachen_iSL.gif);
+
    background-image: url(https://static.igem.org/mediawiki/2015/f/fd/Aachen_iSS.gif);
    }
+
}
    .Ljubica{
+
.iMO {
        background-image: url(https://static.igem.org/mediawiki/2015/9/94/Aachen_Ljubica.png);
+
    background-image: url(https://static.igem.org/mediawiki/2015/2/28/Aachen_iMO.jpg);
        background-position: 0 73px;
+
}
 +
.iMO:hover {
 +
    background-image: url(https://static.igem.org/mediawiki/2015/d/d1/Aachen_iMO.gif);
 +
}
 +
.iPO {
 +
    background-image: url(https://static.igem.org/mediawiki/2015/5/57/Aachen_iPO.jpg);
 +
}
 +
.iPO:hover {
 +
    background-image: url(https://static.igem.org/mediawiki/2015/d/d0/Aachen_iPO.gif);
 +
}
 +
.iSK {
 +
    background-image: url(https://static.igem.org/mediawiki/2015/f/f9/Aachen_iSK.png);
 +
}
 +
.iSK:hover {
 +
    background-image: url(https://static.igem.org/mediawiki/2015/9/98/Aachen_iSK.gif);
 +
}
 +
.iMD {
 +
    background-image: url(https://static.igem.org/mediawiki/2015/5/58/Aachen_iMH.jpg);
 +
}
 +
.iMD:hover {
 +
    background-image: url(https://static.igem.org/mediawiki/2015/f/fb/Aachen_iMH.gif);
 +
}
 +
.iLG {
 +
    background-image: url(https://static.igem.org/mediawiki/2015/0/0f/Aachen_iLG.jpg);
 +
}
 +
.iLG:hover {
 +
    background-image: url(https://static.igem.org/mediawiki/2015/b/b8/Aachen_iLG.gif);
 +
}
 +
.iRH{
 +
    background-image: url(https://static.igem.org/mediawiki/2015/9/9e/Aachen_iRH.jpg);
 +
}
 +
.iRH:hover{
 +
    background-image: url(https://static.igem.org/mediawiki/2015/d/d6/Aachen_iRH.gif);
 +
}
 +
.iPD{
 +
    background-image: url(https://static.igem.org/mediawiki/2015/9/92/Aachen_iPD.jpg);
 +
}
 +
.iPD:hover {
 +
    background-image: url(https://static.igem.org/mediawiki/2015/d/d3/Aachen_iPD.gif);
 +
}
 +
.iMB {
 +
    background-image: url(https://static.igem.org/mediawiki/2015/7/74/Aachen_iMB.jpg);
 +
}
 +
.iMB:hover {
 +
    background-image: url(https://static.igem.org/mediawiki/2015/c/c0/Aachen_iMB.gif);
 +
}
 +
.iCG {
 +
    background-image: url(https://static.igem.org/mediawiki/2015/a/af/Aachen_iCG.jpg);
 +
}
 +
.iCG:hover {
 +
    background-image: url(https://static.igem.org/mediawiki/2015/5/51/Aachen_iCG.gif);
 +
}
 +
.iJR {
 +
    background-image: url(https://static.igem.org/mediawiki/2015/2/2e/Aachen_iJR.jpg);
 +
}
 +
.iJR:hover {
 +
    background-image: url(https://static.igem.org/mediawiki/2015/6/60/Aachen_iJR.gif);
 +
}
 +
.iJR > div {
 +
    background-image: url("https://static.igem.org/mediawiki/2015/f/ff/Aachen_iJRglass.png");
 +
    background-position: center;
 +
    opacity:0;
 +
    transition: opacity 0s 9999s;
 +
}
 +
.iJR > div:hover {
 +
    opacity:1;
 +
    transition-delay: 0.9s;
 +
}
 +
.iSB{
 +
    background-image: url(https://static.igem.org/mediawiki/2015/1/12/Aachen_iSB.jpg);
 +
}
 +
.iSB:hover {
 +
    background-image: url(https://static.igem.org/mediawiki/2015/2/2c/Aachen_iSB.gif);
 +
}
 +
.iTP {
 +
    background-image: url(https://static.igem.org/mediawiki/2015/3/38/Aachen_iTP.jpg);
 +
}
 +
.iTP:hover {
 +
    background-image: url(https://static.igem.org/mediawiki/2015/6/6a/Aachen_iTP.gif);
 +
}
 +
.iTS {
 +
    background-image: url(https://static.igem.org/mediawiki/2015/5/54/Aachen_iTS.jpg);
 +
}
 +
.iTS:hover {
 +
    background-image: url(https://static.igem.org/mediawiki/2015/3/3c/Aachen_iTS.gif);
 +
}
 +
.iLH{
 +
    background-image: url(https://static.igem.org/mediawiki/2015/e/ec/Aachen_iLH.jpg);
 +
}
 +
.iLH:hover {
 +
    background-image: url(https://static.igem.org/mediawiki/2015/5/56/Aachen_iLH.gif);
 +
}
 +
.iLM {
 +
    background-image: url(https://static.igem.org/mediawiki/2015/8/81/Aachen_iLM.jpg);
 +
}
 +
.iLM:hover {
 +
    background-image: url(https://static.igem.org/mediawiki/2015/b/bc/Aachen_iLM.gif);
 +
}
 +
.iSL {
 +
    background-image: url(https://static.igem.org/mediawiki/2015/0/0c/Aachen_iSL.jpg);
 +
}
 +
.iSL:hover {
 +
    background-image: url(https://static.igem.org/mediawiki/2015/1/1d/Aachen_iSL.gif);
 +
}
 +
.Ljubica{
 +
    background-image: url(https://static.igem.org/mediawiki/2015/9/94/Aachen_Ljubica.png);
 +
    background-position: 0 73px;
 
}     
 
}     
    .popupsquare.Ljubica{
+
.popupsquare.Ljubica{
        background-position: 0 -25px;
+
    background-position: 0 -25px;
 
}
 
}
    .Suresh{
+
.Suresh{
        background-image: url(https://static.igem.org/mediawiki/2015/d/de/Aachen_Suresh.jpeg);
+
    background-image: url(https://static.igem.org/mediawiki/2015/d/de/Aachen_Suresh.jpeg);
        background-position: 0 85px;
+
    background-position: 0 85px;
 
}     
 
}     
    .popupsquare.Suresh{
+
.popupsquare.Suresh{
        background-position: 0 0;
+
    background-position: 0 0;
 
}
 
}
    .Lars{
+
.Lars{
        background-image: url(https://static.igem.org/mediawiki/2015/c/c9/Aachen_Blank.jpg);
+
    background-image: url(https://static.igem.org/mediawiki/2015/c/c9/Aachen_Blank.jpg);
 
}   
 
}   
    .Wolfgang{
+
.Wolfgang{
        background-image: url(https://static.igem.org/mediawiki/2015/b/b5/Aachen_Wiechert.png);
+
    background-image: url(https://static.igem.org/mediawiki/2015/b/b5/Aachen_Wiechert.png);
        background-position: 0px 20px;
+
    background-position: 0px 20px;
 
}   
 
}   
    .popupsquare.Wolfgang{
+
.popupsquare.Wolfgang{
        background-position: 0 -58px;
+
    background-position: 0 -58px;
 
}
 
}
    .Uli{
+
.Uli{
        background-image: url(https://static.igem.org/mediawiki/2015/4/48/Aachen_schwaneberg.png);
+
    background-image: url(https://static.igem.org/mediawiki/2015/4/48/Aachen_schwaneberg.png);
        background-position: 0px 86px;
+
    background-position: 0px 86px;
 
}   
 
}   
    .popupsquare.Uli{
+
.popupsquare.Uli{
        background-position: 0 0;
+
    background-position: 0 0;
 
}  
 
}  
  
  
    .memcontent {
+
.memcontent {
        position: absolute;
+
    position: absolute;
        height: 100%;
+
    height: 100%;
        width: 100%;
+
    width: 100%;
        padding: 0%; /* this is to make the dark gray band stretch horizontal */
+
    padding: 0%; /* this is to make the dark gray band stretch horizontal */
    }
+
}
  
    .name-box {
+
.name-box {
        width: 100%;
+
    width: 100%;
        height: 100%;
+
    height: 100%;
        text-decoration: none;
+
    text-decoration: none;
    }
+
}
  
    .name {
+
.name {
        position: relative;
+
    position: relative;
        top: 400px;
+
    top: 400px;
        color: white;
+
    color: white;
        background-color: rgba(51, 51, 51, 0.5);
+
    background-color: rgba(51, 51, 51, 0.5);
        text-align: center;
+
    text-align: center;
        transition: all ease 500ms;
+
    transition: all ease 500ms;
        text-decoration: none;
+
    text-decoration: none;
    }
+
}
  
    .name-box:hover > .name {
+
.name-box:hover > .name {
        top: 234px;
+
    top: 234px;
        text-decoration: none;
+
    text-decoration: none;
 +
}
 +
.memtable {
 +
    display: table;
 +
    width: 100%;
 +
    height: 100%;
 
}
 
}
    .memtable {
 
        display: table;
 
        width: 100%;
 
        height: 100%;
 
    }
 
  
    .memtable-cell {
+
.memtable-cell {
        display: table-cell;
+
    display: table-cell;
        position: absolute;
+
    position: absolute;
        width: 100%;
+
    width: 100%;
    }
+
}
    .memtable-cell small {
+
.memtable-cell small {
        font-size:50%;
+
    font-size:50%;
    }
+
}
  
    .memheadline {
+
.memheadline {
        background-color: rgba(51, 51, 51, 0.5);
+
    background-color: rgba(51, 51, 51, 0.5);
        color: #aaa;
+
    color: #aaa;
        text-align: center;
+
    text-align: center;
 +
}
 +
table{
 +
    margin-top: 20px !important;
 
}
 
}
    table{
 
        margin-top: 20px !important;
 
    }
 
  
 
/* Wikitables */
 
/* Wikitables */
Line 584: Line 584:
  
  
body{
+
body{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
+
}
  
.row {
+
.row {
margin-left: 25px;
+
margin-left: 25px;
margin-right: 25px;
+
margin-right: 25px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: normal;
+
font-style: normal;
font-size: 16px;  
+
font-size: 16px;  
text-align: justify;
+
text-align: justify;
margin-bottom: -55px !important;
+
margin-bottom: -55px !important;
padding-top: 40px;
+
padding-top: 40px;
}
+
}
 
 
.row > ul {
+
.row > ul {
margin-top: 1.5em !important;
+
margin-top: 1.5em !important;
margin-bottom: 1.5em !important;
+
margin-bottom: 1.5em !important;
}
+
}
 
 
h1, h2{
+
h1, h2{
font-size: 24px;
+
font-size: 24px;
border-bottom: none;
+
border-bottom: none;
}
+
}
 
 
h3{
+
h3{
font-size: 20px;
+
font-size: 20px;
}
+
}
 
 
h1, h2, h3, h4, h5{
+
h1, h2, h3, h4, h5{
margin-bottom: 1em !important;
+
margin-bottom: 1em !important;
}
+
}
  
 
 
 
/*footer*/
 
/*footer*/
  
* {
+
* {
margin-bottom: 0px !important;
+
margin-bottom: 0px !important;
margin-top: 0px !important;
+
margin-top: 0px !important;
}
+
}
html, body {
+
html, body {
height: 100%;
+
height: 100%;
}
+
}
.wrapper {
+
.wrapper {
padding-top: 100px;
+
padding-top: 100px;
min-height: 100%;
+
min-height: 100%;
height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
+
height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
height: 100%;
+
height: 100%;
margin-bottom: -55px !important; /* the bottom margin is the negative value of the footer's height */
+
margin-bottom: -55px !important; /* the bottom margin is the negative value of the footer's height */
}
+
}
 
 
#main {padding-bottom: 150px;}
+
#main {padding-bottom: 150px;}
 
 
.clearfix:after {
+
.clearfix:after {
content:".";
+
content:".";
display: block;
+
display: block;
height: 0;
+
height: 0;
clear: both;
+
clear: both;
visibility:hidden;
+
visibility:hidden;
}
+
}
 
 
.clearfix{}
+
.clearfix{}
 
 
#bodyContent, #content, #globalWrapper{
+
#bodyContent, #content, #globalWrapper{
height: 100%;
+
height: 100%;
}
+
}
 
 
.footer{
+
.footer{
height: 55px;
+
height: 55px;
}
+
}
  
.bar {                       
+
.bar {                       
padding: 10px 0;
+
padding: 10px 0;
height: 55px;
+
height: 55px;
background-color: #bf1521;
+
background-color: #bf1521;
box-shadow: 0px 0px 10px #000;
+
box-shadow: 0px 0px 10px #000;
}
+
}
.bar-wrap {
+
.bar-wrap {
font-size: 12px;
+
font-size: 12px;
margin: 0 auto;
+
margin: 0 auto;
max-width: 1200px;
+
max-width: 1200px;
position: relative;
+
position: relative;
width: 95%;
+
width: 95%;
padding:0;
+
padding:0;
}
+
}
.disclaimer {
+
.disclaimer {
float: left;
+
float: left;
list-style: none outside none;
+
list-style: none outside none;
position: relative;
+
position: relative;
margin:0;
+
margin:0;
padding:0;
+
padding:0;
height:1em;
+
height:1em;
line-height:1em;
+
line-height:1em;
}
+
}
.disclaimer li {
+
.disclaimer li {
float: left;
+
float: left;
margin-right: 10px;
+
margin-right: 10px;
}
+
}
.disclaimer a {
+
.disclaimer a {
color: #aaa;
+
color: #aaa;
text-decoration: none;
+
text-decoration: none;
}
+
}
  
.disclaimer a:hover {
+
.disclaimer a:hover {
color: #FFFFFF;
+
color: #FFFFFF;
text-decoration: none;
+
text-decoration: none;
}
+
}
  
.copyright {
+
.copyright {
color: #aaa;
+
color: #aaa;
margin-top: 10px;
+
margin-top: 10px;
height:1em;
+
height:1em;
line-height:1em;
+
line-height:1em;
}
+
}
.clear {clear:both;}
+
.clear {clear:both;}
  
 
 
 
/*classes to create the hexagon box for the headline*/
 
/*classes to create the hexagon box for the headline*/
  
.border {
+
.border {
position: relative;
+
position: relative;
top: -40px;
+
top: -40px;
left: -81px;
+
left: -81px;
width: 80px;
+
width: 80px;
 
 
}
+
}
  
                    #headline_bg, .headline_bg {
+
#headline_bg, .headline_bg {
                        position: absolute;
+
    position: absolute;
                        top: -39px;
+
    top: -39px;
                        left: 30px;
+
    left: 30px;
                        width: auto;
+
    width: auto;
                        height: 80px;
+
    height: 80px;
                    }
+
}
                    .headline_hex1, .headline_hex2 {
+
.headline_hex1, .headline_hex2 {
                        content:"";
+
    content:"";
                        position: relative;
+
    position: relative;
                        float:left;
+
    float:left;
                        width: 44px;
+
    width: 44px;
                        height: 44px;
+
    height: 44px;
                        transform: rotate(45deg) skew(15deg, 15deg);
+
    transform: rotate(45deg) skew(15deg, 15deg);
                        z-index: 1;
+
    z-index: 1;
                    }
+
}
                    .headline_hex1 {
+
.headline_hex1 {
                        top: 17px;
+
    top: 17px;
                        left:22px;
+
    left:22px;
                    }
+
}
                    .headline_hex2 {
+
.headline_hex2 {
                        top: 17px;
+
    top: 17px;
                        left: -22px;
+
    left: -22px;
                    }
+
}
                    .headline_fill {
+
.headline_fill {
                        position: relative;
+
    position: relative;
                        float: left;
+
    float: left;
                        width: auto;
+
    width: auto;
                        height: 79px;
+
    height: 79px;
                        z-index: 2;
+
    z-index: 2;
                        line-height: 79px;
+
    line-height: 79px;
                font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                        font-size: 30px;
+
    font-size: 30px;
                        color: #fff;  
+
    color: #fff;  
                    }
+
}
                    .hl_shadow {
+
.hl_shadow {
                        position: relative;
+
    position: relative;
                        float: left;
+
    float: left;
                        top: -79px;
+
    top: -79px;
                        width: auto;
+
    width: auto;
                        height: 79px;
+
    height: 79px;
                        box-shadow: 0 0 10px #000;
+
    box-shadow: 0 0 10px #000;
                        z-index: -1;
+
    z-index: -1;
                        line-height: 79px;
+
    line-height: 79px;
                font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                        font-size: 30px;
+
    font-size: 30px;
                        color: #fff;  
+
    color: #fff;  
                    }
+
}
                    .hl_shadow1, .hl_shadow2 {
+
.hl_shadow1, .hl_shadow2 {
                        content:"";
+
    content:"";
                        position: relative;
+
    position: relative;
                        float:left;
+
    float:left;
                        width: 44px;
+
    width: 44px;
                        height: 44px;
+
    height: 44px;
                        transform: rotate(45deg) skew(15deg, 15deg);
+
    transform: rotate(45deg) skew(15deg, 15deg);
                        box-shadow: 0 0 10px #000;
+
    box-shadow: 0 0 10px #000;
                        z-index: -1;
+
    z-index: -1;
                    }
+
}
                    .hl_shadow1 {
+
.hl_shadow1 {
                        top: -62px;
+
    top: -62px;
                        left: 22px;
+
    left: 22px;
                    }
+
}
                    .hl_shadow2 {
+
.hl_shadow2 {
                        top: -62px;
+
    top: -62px;
                        left: -22px;
+
    left: -22px;
                    }
+
}
  
 
                          
 
                          
Line 782: Line 782:
  
  
.hexagon-bg {
+
.hexagon-bg {
position: relative;
+
position: relative;
top: 57px;
+
top: 57px;
left: -112px;
+
left: -112px;
width: 61px;
+
width: 61px;
height: 80px;
+
height: 80px;
}
+
}
                .hexagon-bg a {
+
        .hexagon-bg a {
                    font-size: 22pt;
+
            font-size: 22pt;
                    color: #f9f9f9;
+
            color: #f9f9f9;
 
                      
 
                      
                }
+
        }
                .hexagon-bg a:hover {
+
        .hexagon-bg a:hover {
                    font-size: 22pt;
+
            font-size: 22pt;
                    color: #f9f9f9;   
+
            color: #f9f9f9;   
                    text-decoration: none;                   
+
            text-decoration: none;                   
                }
+
        }
  
@media only screen and (max-width: 850px) {
+
@media only screen and (max-width: 850px) {
.hexagon-bg{
+
.hexagon-bg{
position: relative;
+
position: relative;
width: 61px;
+
width: 61px;
height: 80px;
+
height: 80px;
top: 57px;
+
top: 57px;
left: 47%;
+
left: 47%;
}
+
}
.botborder {
+
.botborder {
width: 50vw;
+
width: 50vw;
height: 5px;
+
height: 5px;
position: relative;
+
position: relative;
left:-85px;
+
left:-85px;
bottom:-121px;
+
bottom:-121px;
}
+
}
}
+
}
 
 
.hexagon {
+
.hexagon {
width: 60px;
+
width: 60px;
height: 35px;
+
height: 35px;
position: relative;
+
position: relative;
}
+
}
.hexagon1, .hexagon2 {
+
.hexagon1, .hexagon2 {
content:"";
+
content:"";
position: relative;
+
position: relative;
left: 13px;
+
left: 13px;
width: 34px;
+
width: 34px;
height: 34px;
+
height: 34px;
-moz-transform: rotate(145deg) skew(22.5deg);
+
-moz-transform: rotate(145deg) skew(22.5deg);
-webkit-transform: rotate(145deg) skew(22.5deg);
+
-webkit-transform: rotate(145deg) skew(22.5deg);
transform: rotate(-45deg) skew(15deg, 15deg);
+
transform: rotate(-45deg) skew(15deg, 15deg);
z-index: 1;
+
z-index: 1;
}
+
}
.hexagon1 {
+
.hexagon1 {
top: -7px;
+
top: -7px;
}
+
}
.hexagon2 {
+
.hexagon2 {
top: -6px;
+
top: -6px;
}
+
}
.hexagon .fill {
+
.hexagon .fill {
position: relative;
+
position: relative;
top: 45px;
+
top: 45px;
width: 61px;
+
width: 61px;
height: 35px;
+
height: 35px;
z-index: 2;
+
z-index: 2;
}
+
}
.shadow {
+
.shadow {
position: relative;
+
position: relative;
top: -56px;
+
top: -56px;
width: 61px;
+
width: 61px;
height: 35px;
+
height: 35px;
box-shadow: 0 0 10px #000;
+
box-shadow: 0 0 10px #000;
z-index: -1;
+
z-index: -1;
}
+
}
.shadow1, .shadow2 {
+
.shadow1, .shadow2 {
content:"";
+
content:"";
position: relative;
+
position: relative;
left: 13px;
+
left: 13px;
width: 34px;
+
width: 34px;
height: 34px;
+
height: 34px;
-moz-transform: rotate(145deg) skew(22.5deg);
+
-moz-transform: rotate(145deg) skew(22.5deg);
-webkit-transform: rotate(145deg) skew(22.5deg);
+
-webkit-transform: rotate(145deg) skew(22.5deg);
transform: rotate(-45deg) skew(15deg, 15deg);
+
transform: rotate(-45deg) skew(15deg, 15deg);
box-shadow: 0 0 10px #000;
+
box-shadow: 0 0 10px #000;
z-index: -1;
+
z-index: -1;
}
+
}
.shadow1 {
+
.shadow1 {
top: -108px;
+
top: -108px;
}
+
}
.shadow2 {
+
.shadow2 {
top: -108px;
+
top: -108px;
}
+
}
  
 
/*navbar design*/
 
/*navbar design*/
  
.fluid-container {}
+
.fluid-container {}
  
nav{
+
nav{
position: fixed !important;
+
position: fixed !important;
width: 100%;
+
width: 100%;
z-index: 1000;
+
z-index: 1000;
top: 16px;
+
top: 16px;
 
 
}
+
}
 
 
button{
+
button{
margin-top: 10px !important;
+
margin-top: 10px !important;
height: 30px;
+
height: 30px;
}
+
}
 
 
.icon-bar{
+
.icon-bar{
margin-bottom: 2px !important;
+
margin-bottom: 2px !important;
}
+
}
 
 
.navbar {
+
.navbar {
height: 75px;
+
height: 75px;
margin-top: 20px;
+
margin-top: 20px;
background-color: #bf1521;
+
background-color: #bf1521;
border: none;
+
border: none;
box-shadow: 0px 0px 10px black;
+
box-shadow: 0px 0px 10px black;
}
+
}
  
  
.navbar-collapse.collapse {overflow:hidden !important;}
+
.navbar-collapse.collapse {overflow:hidden !important;}
  
@media (max-width: 920px) {
+
@media (max-width: 920px) {
.navbar-collapse.collapse {overflow:visible !important}
+
.navbar-collapse.collapse {overflow:visible !important}
}
+
}
  
.dropdown-menu {
+
.dropdown-menu {
width: 100%;
+
width: 100%;
position: fixed;
+
position: fixed;
top: 67px;
+
top: 67px;
left: 0;
+
left: 0;
z-index: 1000;
+
z-index: 1000;
display: none;
+
display: none;
float: left;
+
float: left;
min-width: 160px;
+
min-width: 160px;
padding: 5px 0;
+
padding: 5px 0;
margin: 0 auto;
+
margin: 0 auto;
font-size: 16px;
+
font-size: 16px;
text-align:center;
+
text-align:center;
background-color: #bf1521;
+
background-color: #bf1521;
}
+
}
  
.dropdown-menu li {
+
.dropdown-menu li {
display:inline-block;
+
display:inline-block;
padding: 0 10px 0 10px;
+
padding: 0 10px 0 10px;
font-size: 16px;
+
font-size: 16px;
 
 
}
+
}
  
.dropdown-menu li.dropdown .dropdown-menu {top:210px;}
+
.dropdown-menu li.dropdown .dropdown-menu {top:210px;}
 
 
#menu-header {width: 100%;}
+
#menu-header {width: 100%;}
 
 
@media only screen and (max-width: 920px){
+
@media only screen and (max-width: 920px){
#menu-header{
+
#menu-header{
background-color: #f9f9f9;
+
background-color: #f9f9f9;
}
+
}
}
+
}
  
.dropdown-menu{
+
.dropdown-menu{
width: 100vw;
+
width: 100vw;
border: none;
+
border: none;
background: none;
+
background: none;
box-shadow: none;
+
box-shadow: none;
}
+
}
  
.dropdown-toggle{
+
.dropdown-toggle{
padding-left:35px !important;
+
padding-left:35px !important;
padding-right:35px !important;
+
padding-right:35px !important;
font-size: 22px;  
+
font-size: 22px;  
}
+
}
  
.navbar-default .navbar-nav>li>a {
+
.navbar-default .navbar-nav>li>a {
  color: #333;
+
color: #333;
}
+
}
 
 
a.menu-link{
+
a.menu-link{
color: white;
+
color: white;
padding: 4px 10px 2px 10px;
+
padding: 4px 10px 2px 10px;
}
+
}
a.menu-link:hover {
+
a.menu-link:hover {
text-decoration: none;
+
text-decoration: none;
}
+
}
  
.dropdownbar{
+
.dropdownbar{
background-color: #f9f9f9;
+
background-color: #f9f9f9;
height: 50px;
+
height: 50px;
}
+
}
  
.navbar .nav > li.dropdown.open.active > a:hover,  
+
.navbar .nav > li.dropdown.open.active > a:hover,  
.navbar .nav > li.dropdown.open > a
+
.navbar .nav > li.dropdown.open > a
{
+
{
  color: #fff;
+
color: #fff;
  background-color: #bf1521;
+
background-color: #bf1521;
  border-color: #fff;
+
border-color: #fff;
}
+
}
 
 
.navbar-brand{
+
.navbar-brand{
background-image: url(https://static.igem.org/mediawiki/2015/0/06/Aachen_menulogo.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/0/06/Aachen_menulogo.png);
background-size: 125px;
+
background-size: 125px;
width: 125px;
+
width: 125px;
height:75px;
+
height:75px;
background-repeat:no-repeat;
+
background-repeat:no-repeat;
margin-left: 150px;  
+
margin-left: 150px;  
margin-right: 0px;
+
margin-right: 0px;
 
 
}
+
}
 
 
.igem-logo{   
+
.igem-logo{   
background-image: url(https://static.igem.org/mediawiki/2015/7/76/Aachen_igem_logo.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/7/76/Aachen_igem_logo.png);
background-size: 64px;
+
background-size: 64px;
width: 70px;
+
width: 70px;
height: 70px;
+
height: 70px;
background-repeat: no-repeat;
+
background-repeat: no-repeat;
margin-left: 70px;
+
margin-left: 70px;
}
+
}
 
 
a.igem-logo:hover {
+
a.igem-logo:hover {
background-color: transparent !important;
+
background-color: transparent !important;
}
+
}
 
 
.ac-submenu {
+
.ac-submenu {
 
 
top: 91px !important;
+
top: 91px !important;
border-top: 1px solid;
+
border-top: 1px solid;
border-color: #333;
+
border-color: #333;
border-radius: 0px;
+
border-radius: 0px;
background-color: #bf1521;
+
background-color: #bf1521;
box-shadow: 0px 10px 10px -10px black;
+
box-shadow: 0px 10px 10px -10px black;
padding: 0;
+
padding: 0;
                                margin-left: 0px !important;
+
                    margin-left: 0px !important;
}
+
}
 
 
.dropdown-menu>li>a{
+
.dropdown-menu>li>a{
color:white;
+
color:white;
padding: 0 10px 0 10px;
+
padding: 0 10px 0 10px;
}
+
}
 
 
a.menu-link:hover {
+
a.menu-link:hover {
color: #333;
+
color: #333;
}
+
}
 
 
.dropdown-menu>ul>li>a:hover{
+
.dropdown-menu>ul>li>a:hover{
background-color: #f9f9f9;
+
background-color: #f9f9f9;
}
+
}
 
 
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
+
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
color: white;
+
color: white;
background-color: #bf1521;
+
background-color: #bf1521;
}
+
}
 
 
@media only screen and (max-width: 1550px){
+
@media only screen and (max-width: 1550px){
.dropdown-toggle{
+
.dropdown-toggle{
padding-left:30px !important;  
+
padding-left:30px !important;  
padding-right:30px !important;
+
padding-right:30px !important;
}
+
}
.igem-logo{
+
.igem-logo{
margin-left:50px;
+
margin-left:50px;
}
+
}
.navbar-brand{
+
.navbar-brand{
margin-left:60px;
+
margin-left:60px;
}
+
}
}
+
}
 
 
 
 
@media only screen and (max-width: 1350px){
+
@media only screen and (max-width: 1350px){
.dropdown-toggle{
+
.dropdown-toggle{
padding-left:30px !important;  
+
padding-left:30px !important;  
padding-right:30px !important;
+
padding-right:30px !important;
}
+
}
.igem-logo{
+
.igem-logo{
margin-left:40px;
+
margin-left:40px;
}
+
}
.navbar-brand{
+
.navbar-brand{
margin-left:50px;
+
margin-left:50px;
}
+
}
}
+
}
 
 
@media only screen and (max-width: 1255px){
+
@media only screen and (max-width: 1255px){
.dropdown-toggle{
+
.dropdown-toggle{
padding-left:25px !important;
+
padding-left:25px !important;
padding-right:25px !important;
+
padding-right:25px !important;
}
+
}
.igem-logo{
+
.igem-logo{
margin-left:30px;
+
margin-left:30px;
}
+
}
.navbar-brand{
+
.navbar-brand{
margin-left:25px;
+
margin-left:25px;
}
+
}
}
+
}
  
 
 
@media only screen and (max-width: 1150px){
+
@media only screen and (max-width: 1150px){
.dropdown-toggle{
+
.dropdown-toggle{
padding-left:20px !important;
+
padding-left:20px !important;
padding-right:20px !important;
+
padding-right:20px !important;
}
+
}
.igem-logo{
+
.igem-logo{
margin-left: 20px;
+
margin-left: 20px;
}
+
}
.navbar-brand{
+
.navbar-brand{
margin-left:20px;
+
margin-left:20px;
}
+
}
}
+
}
 
 
@media only screen and (max-width: 1075px){
+
@media only screen and (max-width: 1075px){
.dropdown-toggle{
+
.dropdown-toggle{
padding-left:15px !important;
+
padding-left:15px !important;
padding-right:15px !important;
+
padding-right:15px !important;
}
+
}
.igem-logo{
+
.igem-logo{
margin-left: 0px;
+
margin-left: 0px;
}
+
}
.navbar-brand{
+
.navbar-brand{
margin-left: 10px;
+
margin-left: 10px;
}
+
}
}
+
}
 
 
/*collapsed menu*/
+
/*collapsed menu*/
 
 
@media only screen and (max-width: 985px){
+
@media only screen and (max-width: 985px){
#menu-header{
+
#menu-header{
background-color: #bf1521;
+
background-color: #bf1521;
position: relative;
+
position: relative;
top: 65px;
+
top: 65px;
right: -44px;
+
right: -44px;
float: right;
+
float: right;
width:auto;
+
width:auto;
}
+
}
.dropdown-toggle{
+
.dropdown-toggle{
float:right;
+
float:right;
clear:both;
+
clear:both;
}
+
}
.igem-logo{
+
.igem-logo{
float:right;
+
float:right;
clear:both;
+
clear:both;
}
+
}
.navbar-collapse{
+
.navbar-collapse{
overflow:visible !important;
+
overflow:visible !important;
}
+
}
.navbar-collapse.collapse{
+
.navbar-collapse.collapse{
overflow:visible !important;
+
overflow:visible !important;
}
+
}
.list-inline{
+
.list-inline{
position: relative;
+
position: relative;
top: -8px;
+
top: -8px;
border-top: 1px solid white;
+
border-top: 1px solid white;
}
+
}
.dropdown-menu li{
+
.dropdown-menu li{
display:block;
+
display:block;
text-align:right;
+
text-align:right;
}
+
}
.dropdown-menu{
+
.dropdown-menu{
float:right !important;
+
float:right !important;
clear: both;
+
clear: both;
 
 
}
+
}
a.menu-link{
+
a.menu-link{
color: white;
+
color: white;
}
+
}
a.menu-link:hover {
+
a.menu-link:hover {
color: #aaa;
+
color: #aaa;
 
 
}
+
}
 
 
.navbar-default .navbar-nav>li>a:hover {
+
.navbar-default .navbar-nav>li>a:hover {
  color: #fff;
+
color: #fff;
}
+
}
}
+
}
 
 
.open > .dropdown-menu{
+
.open > .dropdown-menu{
display:block;
+
display:block;
}
+
}
 
 
.collapsing {
+
.collapsing {
-webkit-transition: none;
+
-webkit-transition: none;
transition: none;
+
transition: none;
}
+
}

Revision as of 09:56, 18 September 2015

body {

   background-color: #3B3B3B;
   background-image: url(Aachen_BackgroundDark.png);
   background-attachment: scroll;

}

.navbar {

   background-color: #f9f9f9;
   border-radius: 0px;
   margin-top: 20px;
   border-top: none;
   min-height: 75px;

}

  1. menubar {
   top: 0px;

}


  1. menubar a {
   color: #AAAAAA !important;

}

  1. top-section {
   margin-left: auto!important;
   margin-right: auto!important;
   width: 100%!important;
   position:fixed!important;
   left: 0%!important;
   font-size: small;
   height: 20px;

}

.tasks th { padding-bottom: 10px; }

  1. bronze li:before {color:rgb(205, 127, 50);}
  2. silver li:before {color:rgb(192, 192, 192);}
  3. gold li:before {color:rgb(255, 215, 0);}

.mw-headline{padding-top: 100px;}

h1 {margin-top: 1.5em !important;}

h1:nth-of-type(1) { margin-top: 0px !important; }

/* Styling of the member tiles and assignment of profile pictures */

@media (min-width: 1200px) { .memb-item:nth-child(8n + 5) { margin-left: 105px; } .memb-item:nth-child(n + 5) { margin-top: -54px !important; } }

@media (max-width: 1200px) { .memb-item:nth-child(6n +4) { margin-left: 105px; } .memb-item:nth-child(n + 4) { margin-top: -54px !important; } }

@media (max-width: 992px) { .memb-item:nth-child(4n +3) { margin-left: 105px; } .memb-item:nth-child(n + 3) { margin-top: -54px !important; } .memb-item:nth-child(6n +4) { margin-left: 2px; } }

@media (max-width: 744px) { .memb-item:nth-child(n + 3) { margin-top: -54px !important; } .memb-item:nth-child(4n +3) {

       margin-left: 2px;

} .memb-item:nth-child(3n) { margin-left: 105px; } }


@media (max-width: 640px) { .memb-item:nth-child(n + 2) { margin-top: -54px !important; } .memb-item:nth-child(3n) { margin-left: 2px; } .memb-item:nth-child(2n) {

       margin-left: 105px;

} }

.memb-item { width: 200px; height: 230px; position: relative; display: inline-block;

       margin-right: 2px;
       margin-left: 2px;
       float:left;

}

.hexmemb2 { position: absolute; width: 200px; height: 400px; top: -85px; }

.hexmemb { overflow: hidden; visibility: hidden;

-webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -o-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg); cursor: pointer; }

.hexmemb-in1 { overflow: hidden; width: 100%; height: 100%;

-webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -o-transform: rotate(-60deg); -ms-transform: rotate(-60deg); transform: rotate(-60deg); }

.hexmemb-in2 {

overflow: hidden; width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50%;

       background-color: #333;

-webkit-background-size: 125%; -moz-background-size: 125%; background-size: 125%; visibility: visible;

-webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -o-transform: rotate(-60deg); -ms-transform: rotate(-60deg); transform: rotate(-60deg);

-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; }

.photo {

     position: absolute;
     width: 100%;
     height: 100%;
     background-size: 200px;
     background-repeat: no-repeat;
     background-position: center center;
     text-decoration: none;

}

.photo:hover{

  text-decoration: none;

}

.popupsquare {

   float: left;
   position: relative;
   width: 100%;
   padding-bottom: 100%;
   margin-right: 15px;
   margin-bottom: 15px !important;
   background-color: #333333;
   overflow: hidden;
   text-align: center;
   font-size: 20px;
   background-size: cover !important;

}

.membg {

   background-position: center center;
   background-repeat: no-repeat;
   background-size: contain;

}

.iSD {

   background-image: url(Aachen_iSD.jpg);

} .iSD:hover {

   background-image: url(Aachen_iSD.gif);

} .iPikachu {

   background-image: url(Aachen_iTB.jpg);

} .iPikachu:hover {

   background-image: url(Aachen_iTB.gif);

} .iSS {

   background-image: url(Aachen_iSS.jpg);

} .iSS:hover {

   background-image: url(Aachen_iSS.gif);

} .iMO {

   background-image: url(Aachen_iMO.jpg);

} .iMO:hover {

   background-image: url(Aachen_iMO.gif);

} .iPO {

   background-image: url(Aachen_iPO.jpg);

} .iPO:hover {

   background-image: url(Aachen_iPO.gif);

} .iSK {

   background-image: url(Aachen_iSK.png);

} .iSK:hover {

   background-image: url(Aachen_iSK.gif);

} .iMD {

   background-image: url(Aachen_iMH.jpg);

} .iMD:hover {

   background-image: url(Aachen_iMH.gif);

} .iLG {

   background-image: url(Aachen_iLG.jpg);

} .iLG:hover {

   background-image: url(Aachen_iLG.gif);

} .iRH{

   background-image: url(Aachen_iRH.jpg);

} .iRH:hover{

   background-image: url(Aachen_iRH.gif);

} .iPD{

   background-image: url(Aachen_iPD.jpg);

} .iPD:hover {

   background-image: url(Aachen_iPD.gif);

} .iMB {

   background-image: url(Aachen_iMB.jpg);

} .iMB:hover {

   background-image: url(Aachen_iMB.gif);

} .iCG {

   background-image: url(Aachen_iCG.jpg);

} .iCG:hover {

   background-image: url(Aachen_iCG.gif);

} .iJR {

   background-image: url(Aachen_iJR.jpg);

} .iJR:hover {

   background-image: url(Aachen_iJR.gif);

} .iJR > div {

   background-image: url("Aachen_iJRglass.png");
   background-position: center;
   opacity:0;
   transition: opacity 0s 9999s;

} .iJR > div:hover {

   opacity:1;
   transition-delay: 0.9s;

} .iSB{

   background-image: url(Aachen_iSB.jpg);

} .iSB:hover {

   background-image: url(Aachen_iSB.gif);

} .iTP {

   background-image: url(Aachen_iTP.jpg);

} .iTP:hover {

   background-image: url(Aachen_iTP.gif);

} .iTS {

   background-image: url(Aachen_iTS.jpg);

} .iTS:hover {

   background-image: url(Aachen_iTS.gif);

} .iLH{

   background-image: url(Aachen_iLH.jpg);

} .iLH:hover {

   background-image: url(Aachen_iLH.gif);

} .iLM {

   background-image: url(Aachen_iLM.jpg);

} .iLM:hover {

   background-image: url(Aachen_iLM.gif);

} .iSL {

   background-image: url(Aachen_iSL.jpg);

} .iSL:hover {

   background-image: url(Aachen_iSL.gif);

} .Ljubica{

   background-image: url(Aachen_Ljubica.png);
   background-position: 0 73px;

} .popupsquare.Ljubica{

   background-position: 0 -25px;

} .Suresh{

   background-image: url(Aachen_Suresh.jpeg);
   background-position: 0 85px;

} .popupsquare.Suresh{

   background-position: 0 0;

} .Lars{

   background-image: url(Aachen_Blank.jpg);

} .Wolfgang{

   background-image: url(Aachen_Wiechert.png);
   background-position: 0px 20px;

} .popupsquare.Wolfgang{

   background-position: 0 -58px;

} .Uli{

   background-image: url(Aachen_schwaneberg.png);
   background-position: 0px 86px;

} .popupsquare.Uli{

   background-position: 0 0;

}


.memcontent {

   position: absolute;
   height: 100%;
   width: 100%;
   padding: 0%; /* this is to make the dark gray band stretch horizontal */

}

.name-box {

   width: 100%;
   height: 100%;
   text-decoration: none;

}

.name {

   position: relative;
   top: 400px;
   color: white;
   background-color: rgba(51, 51, 51, 0.5);
   text-align: center;
   transition: all ease 500ms;
   text-decoration: none;

}

.name-box:hover > .name {

   top: 234px;
   text-decoration: none;

} .memtable {

   display: table;
   width: 100%;
   height: 100%;

}

.memtable-cell {

   display: table-cell;
   position: absolute;
   width: 100%;

} .memtable-cell small {

   font-size:50%;

}

.memheadline {

   background-color: rgba(51, 51, 51, 0.5);
   color: #aaa;
   text-align: center;

} table{

   margin-top: 20px !important;

}

/* Wikitables */

.wikitable th{ background: #bf1521 !important; color: white !important; }

.wikitable th { border-color: #333 !important; } .wikitable td { border-color: #333 !important; padding-left: 1em !important; padding-right: 1em !important; }


/* figures */ .figraw {

}

.figure {

   font-size: small;
   line-height: normal;
   background-color: white;

}

.figure-double {

   margin-left: 0px;
   margin-right: 0px;
   background-color: white;

}

.figure-doubleM {

   margin-left: 0px;
   margin-right: 0px;

}

.figure-large {

   /*margin-left: 0px;*/
   /*margin-right: 0px;*/
   float: none;
   margin: auto;

} .figure-medium {

   /*margin-left: 15px;*/
   /*margin-right: 0px;*/
   margin: auto;
   float: none;

} .figure-small {

   margin-left: 0px;
   margin-right: 15px;

}

.figure table {

   width: 100%;

}

.figure img {

   width: 100%;
   height: auto;  /*100% doesn't work for chrome, auto fixes this*/

}

.figraw img {

   width: 100%;
   height: auto;  /*100% doesn't work for chrome, auto fixes this*/

}

.figure td {

   padding: 10px;

}

.fig img{ width: 100%; height: auto; }


/*Fancybox adjustments*/

/*images*/ .fancybox-overlay { background: url(Aachen_fancybox_overlay.png); background: transparent url(Aachen_fancybox_overlay.png) repeat scroll 0% 0%; }

  1. fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {

background-image: url(Aachen_fancybox_sprite.png); }

  1. fancybox-loading div {

background: url(Aachen_fancybox_loading.gif) center center no-repeat; }

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5){

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url(Aachen_fancybox_sprite%402x.png); background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/ }

#fancybox-loading div { background-image: url(Aachen_fancybox_loading%402x.gif); background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/ } }


.mw-editsection {

   color: transparent;

font-size: 12px; }

.mw-editsection a {

   color: #aaaaaa;

}

.headline_fill a {

   color: #F9F9F9;

}



.container-primary { padding: 40px; margin-bottom: 110px; margin-top: 100px; box-shadow: rgb(0, 0, 0) 0px 0px 10px; position: relative; background-color: rgb(249, 249, 249); padding-left: 80px; padding-right: 80px; }

/*interactive tour*/

.tour { width: 100%;

   text-align: center;

padding-bottom: 100px; padding-top:25px; }

/*classes to implement the corporate design colors */

.colorable {} .dark-grey{background-color: #333333;} .grey{background-color: #aaaaaa;} .white{background-color: #f9f9f9;} .red{background-color: #bf1521;} .blue{background-color: #2850ad;} .purple{background-color: #b933ad;} .orange{background-color: #ff6313;} .yellow{background-color: #fccc0a;} .green{background-color: #00993d;}


/*content and text formating*/



body{ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

.row { margin-left: 25px; margin-right: 25px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-style: normal; font-size: 16px; text-align: justify; margin-bottom: -55px !important; padding-top: 40px; }

.row > ul { margin-top: 1.5em !important; margin-bottom: 1.5em !important; }

h1, h2{ font-size: 24px; border-bottom: none; }

h3{ font-size: 20px; }

h1, h2, h3, h4, h5{ margin-bottom: 1em !important; }


/*footer*/

  • {

margin-bottom: 0px !important; margin-top: 0px !important; } html, body { height: 100%; } .wrapper { padding-top: 100px; min-height: 100%; height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */ height: 100%; margin-bottom: -55px !important; /* the bottom margin is the negative value of the footer's height */ }

  1. main {padding-bottom: 150px;}

.clearfix:after { content:"."; display: block; height: 0; clear: both; visibility:hidden; }

.clearfix{}

  1. bodyContent, #content, #globalWrapper{

height: 100%; }

.footer{ height: 55px; }

.bar { padding: 10px 0; height: 55px; background-color: #bf1521; box-shadow: 0px 0px 10px #000; } .bar-wrap { font-size: 12px; margin: 0 auto; max-width: 1200px; position: relative; width: 95%; padding:0; } .disclaimer { float: left; list-style: none outside none; position: relative; margin:0; padding:0; height:1em; line-height:1em; } .disclaimer li { float: left; margin-right: 10px; } .disclaimer a { color: #aaa; text-decoration: none; }

.disclaimer a:hover { color: #FFFFFF; text-decoration: none; }

.copyright { color: #aaa; margin-top: 10px; height:1em; line-height:1em; } .clear {clear:both;}


/*classes to create the hexagon box for the headline*/

.border { position: relative; top: -40px; left: -81px; width: 80px;

}

  1. headline_bg, .headline_bg {
   position: absolute;
   top: -39px;
   left: 30px;
   width: auto;
   height: 80px;

} .headline_hex1, .headline_hex2 {

   content:"";
   position: relative;
   float:left;
   width: 44px;
   height: 44px;
   transform: rotate(45deg) skew(15deg, 15deg);
   z-index: 1;

} .headline_hex1 {

   top: 17px;
   left:22px;

} .headline_hex2 {

   top: 17px;
   left: -22px;

} .headline_fill {

   position: relative;
   float: left;
   width: auto;
   height: 79px;
   z-index: 2;
   line-height: 79px;

font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

   font-size: 30px;
   color: #fff; 

} .hl_shadow {

   position: relative;
   float: left;
   top: -79px;
   width: auto;
   height: 79px;
   box-shadow: 0 0 10px #000;
   z-index: -1;
   line-height: 79px;

font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

   font-size: 30px;
   color: #fff; 

} .hl_shadow1, .hl_shadow2 {

   content:"";
   position: relative;
   float:left;
   width: 44px;
   height: 44px;
   transform: rotate(45deg) skew(15deg, 15deg);
   box-shadow: 0 0 10px #000;
   z-index: -1;

} .hl_shadow1 {

   top: -62px;
   left: 22px;

} .hl_shadow2 {

   top: -62px;
   left: -22px;

}


/*classes to create the bottom left hexagon*/


.hexagon-bg { position: relative; top: 57px; left: -112px; width: 61px; height: 80px; }

       .hexagon-bg a {
           font-size: 22pt;
           color: #f9f9f9;
                   
       }
       .hexagon-bg a:hover {
           font-size: 22pt;
           color: #f9f9f9;  
           text-decoration: none;                  
       }

@media only screen and (max-width: 850px) { .hexagon-bg{ position: relative; width: 61px; height: 80px; top: 57px; left: 47%; } .botborder { width: 50vw; height: 5px; position: relative; left:-85px; bottom:-121px; } }

.hexagon { width: 60px; height: 35px; position: relative; } .hexagon1, .hexagon2 { content:""; position: relative; left: 13px; width: 34px; height: 34px; -moz-transform: rotate(145deg) skew(22.5deg); -webkit-transform: rotate(145deg) skew(22.5deg); transform: rotate(-45deg) skew(15deg, 15deg); z-index: 1; } .hexagon1 { top: -7px; } .hexagon2 { top: -6px; } .hexagon .fill { position: relative; top: 45px; width: 61px; height: 35px; z-index: 2; } .shadow { position: relative; top: -56px; width: 61px; height: 35px; box-shadow: 0 0 10px #000; z-index: -1; } .shadow1, .shadow2 { content:""; position: relative; left: 13px; width: 34px; height: 34px; -moz-transform: rotate(145deg) skew(22.5deg); -webkit-transform: rotate(145deg) skew(22.5deg); transform: rotate(-45deg) skew(15deg, 15deg); box-shadow: 0 0 10px #000; z-index: -1; } .shadow1 { top: -108px; } .shadow2 { top: -108px; }

/*navbar design*/

.fluid-container {}

nav{ position: fixed !important; width: 100%; z-index: 1000; top: 16px;

}

button{ margin-top: 10px !important; height: 30px; }

.icon-bar{ margin-bottom: 2px !important; }

.navbar { height: 75px; margin-top: 20px; background-color: #bf1521; border: none; box-shadow: 0px 0px 10px black; }


.navbar-collapse.collapse {overflow:hidden !important;}

@media (max-width: 920px) { .navbar-collapse.collapse {overflow:visible !important} }

.dropdown-menu { width: 100%; position: fixed; top: 67px; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 0 auto; font-size: 16px; text-align:center; background-color: #bf1521; }

.dropdown-menu li { display:inline-block; padding: 0 10px 0 10px; font-size: 16px;

}

.dropdown-menu li.dropdown .dropdown-menu {top:210px;}

  1. menu-header {width: 100%;}

@media only screen and (max-width: 920px){ #menu-header{ background-color: #f9f9f9; } }

.dropdown-menu{ width: 100vw; border: none; background: none; box-shadow: none; }

.dropdown-toggle{ padding-left:35px !important; padding-right:35px !important; font-size: 22px; }

.navbar-default .navbar-nav>li>a { color: #333; }

a.menu-link{ color: white; padding: 4px 10px 2px 10px; } a.menu-link:hover { text-decoration: none; }

.dropdownbar{ background-color: #f9f9f9; height: 50px; }

.navbar .nav > li.dropdown.open.active > a:hover, .navbar .nav > li.dropdown.open > a { color: #fff; background-color: #bf1521; border-color: #fff; }

.navbar-brand{ background-image: url(Aachen_menulogo.png); background-size: 125px; width: 125px; height:75px; background-repeat:no-repeat; margin-left: 150px; margin-right: 0px;

}

.igem-logo{ background-image: url(Aachen_igem_logo.png); background-size: 64px; width: 70px; height: 70px; background-repeat: no-repeat; margin-left: 70px; }

a.igem-logo:hover { background-color: transparent !important; }

.ac-submenu {

top: 91px !important; border-top: 1px solid; border-color: #333; border-radius: 0px; background-color: #bf1521; box-shadow: 0px 10px 10px -10px black; padding: 0;

                   margin-left: 0px !important;

}

.dropdown-menu>li>a{ color:white; padding: 0 10px 0 10px; }

a.menu-link:hover { color: #333; }

.dropdown-menu>ul>li>a:hover{ background-color: #f9f9f9; }

.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { color: white; background-color: #bf1521; }

@media only screen and (max-width: 1550px){ .dropdown-toggle{ padding-left:30px !important; padding-right:30px !important; } .igem-logo{ margin-left:50px; } .navbar-brand{ margin-left:60px; } }


@media only screen and (max-width: 1350px){ .dropdown-toggle{ padding-left:30px !important; padding-right:30px !important; } .igem-logo{ margin-left:40px; } .navbar-brand{ margin-left:50px; } }

@media only screen and (max-width: 1255px){ .dropdown-toggle{ padding-left:25px !important; padding-right:25px !important; } .igem-logo{ margin-left:30px; } .navbar-brand{ margin-left:25px; } }


@media only screen and (max-width: 1150px){ .dropdown-toggle{ padding-left:20px !important; padding-right:20px !important; } .igem-logo{ margin-left: 20px; } .navbar-brand{ margin-left:20px; } }

@media only screen and (max-width: 1075px){ .dropdown-toggle{ padding-left:15px !important; padding-right:15px !important; } .igem-logo{ margin-left: 0px; } .navbar-brand{ margin-left: 10px; } }

/*collapsed menu*/

@media only screen and (max-width: 985px){ #menu-header{ background-color: #bf1521; position: relative; top: 65px; right: -44px; float: right; width:auto; } .dropdown-toggle{ float:right; clear:both; } .igem-logo{ float:right; clear:both; } .navbar-collapse{ overflow:visible !important; } .navbar-collapse.collapse{ overflow:visible !important; } .list-inline{ position: relative; top: -8px; border-top: 1px solid white; } .dropdown-menu li{ display:block; text-align:right; } .dropdown-menu{ float:right !important; clear: both;

} a.menu-link{ color: white; } a.menu-link:hover { color: #aaa;

}

.navbar-default .navbar-nav>li>a:hover { color: #fff; } }

.open > .dropdown-menu{ display:block; }

.collapsing { -webkit-transition: none; transition: none; }