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

(Created page with "body { background-color: #3B3B3B; background-image: url(http://igem.rwth-aachen.de/2015/images/a/ac/Aachen_BackgroundDark.png); } .navbar { background-color: #f9f...")
 
 
(38 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
body {
 
body {
 
     background-color: #3B3B3B;
 
     background-color: #3B3B3B;
−
     background-image: url(http://igem.rwth-aachen.de/2015/images/a/ac/Aachen_BackgroundDark.png);
+
     background-image: url(https://static.igem.org/mediawiki/2015/a/ac/Aachen_BackgroundDark.png);
 +
    background-attachment: fixed;
 
}
 
}
  
Line 19: Line 20:
 
#menubar a {
 
#menubar a {
 
     color: #AAAAAA !important;
 
     color: #AAAAAA !important;
 +
}
 +
 +
#top_menu_inside {
 +
  margin-left: 20px;
 +
  box-sizing: content-box;
 +
}
 +
 +
#top_menu_14 {
 +
  box-sizing: content-box;
 +
}
 +
 +
#user_item, #bars_item {
 +
  line-height: normal;
 +
 
}
 
}
  
Line 32: Line 47:
  
 
.tasks th {
 
.tasks th {
−
padding-bottom: 10px;
+
    padding-bottom: 10px;
 +
    color: #aaaaaa;
 +
    font-weight: bold;
 +
    font-variant: small-caps;
 +
    text-transform: capitalize;
 
}
 
}
  
Line 47: Line 66:
 
}
 
}
  
 +
/* 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;
 +
}
 +
 +
 +
.tourLink {
 +
    position: relative;
 +
    float: left;
 +
    width: auto;
 +
    height: 79px;
 +
    z-index: 2;
 +
    line-height: 79px;
 +
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
 +
    font-size: 28.5px;
 +
}
 +
.tourLink a {
 +
    color: #f9f9f9;
 +
}
 +
.tourLink a:hover {
 +
    color: #f9f9f9;
 +
}
 +
 +
 +
.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(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("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{
 +
    background-position: 0 -25px;
 +
}
 +
.Suresh{
 +
    background-image: url(https://static.igem.org/mediawiki/2015/d/de/Aachen_Suresh.jpeg);
 +
    background-position: 0 85px;
 +
}
 +
.iSuresh{
 +
    background-image: url(https://static.igem.org/mediawiki/2015/2/26/Aachen_iSuresh.jpg);
 +
}
 +
.iSuresh:hover {
 +
    background-image: url(https://static.igem.org/mediawiki/2015/b/b5/Aachen_iSuresh.gif);
 +
}   
 +
.popupsquare.Suresh{
 +
    background-position: 0 0;
 +
}
 +
.Lars{
 +
    background-image: url(https://static.igem.org/mediawiki/2015/c/c9/Aachen_Blank.jpg);
 +
} 
 +
.Wolfgang{
 +
    background-image: url(https://static.igem.org/mediawiki/2015/b/b5/Aachen_Wiechert.png);
 +
    background-position: 0px 20px;
 +
} 
 +
.popupsquare.Wolfgang{
 +
    background-position: 0 -58px;
 +
}
 +
.Uli{
 +
    background-image: url(https://static.igem.org/mediawiki/2015/4/48/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 */
 
/* Wikitables */
  
 
.wikitable th{
 
.wikitable th{
−
background: #bf1521;
+
background: #bf1521 !important;  
−
color: white;
+
color: white !important;
 
}
 
}
  
 
.wikitable th {
 
.wikitable th {
−
border-color: #333;
+
border-color: #333 !important;
 
}
 
}
 
.wikitable td {
 
.wikitable td {
−
border-color: #333;
+
border-color: #333 !important;
−
padding-left: 1em;
+
padding-left: 1em !important;
−
padding-right: 1em;
+
padding-right: 1em !important;
 
}
 
}
  
Line 132: Line 543:
 
/*images*/
 
/*images*/
 
.fancybox-overlay {
 
.fancybox-overlay {
−
background: url(http://igem.rwth-aachen.de/2015/images/e/e0/Fancybox_overlay.png);
+
background: url(https://static.igem.org/mediawiki/2015/6/6d/Aachen_fancybox_overlay.png);
−
background: transparent url("http://igem.rwth-aachen.de/2015/images/e/e0/Fancybox_overlay.png") repeat scroll 0% 0%;
+
background: transparent url(https://static.igem.org/mediawiki/2015/6/6d/Aachen_fancybox_overlay.png) repeat scroll 0% 0%;
 
}
 
}
  
 
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
 
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
−
background-image: url(http://igem.rwth-aachen.de/2015/images/5/55/Fancybox_sprite.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/a/ab/Aachen_fancybox_sprite.png);
 
}
 
}
  
 
#fancybox-loading div {
 
#fancybox-loading div {
−
background: url(http://igem.rwth-aachen.de/2015/images/d/d0/Fancybox_loading.gif) center center no-repeat;
+
background: url(https://static.igem.org/mediawiki/2015/4/46/Aachen_fancybox_loading.gif) center center no-repeat;
 
}
 
}
  
Line 149: Line 560:
  
 
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
 
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
−
background-image: url(http://igem.rwth-aachen.de/2015/images/b/b8/Fancybox_sprite%402x.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/b/b6/Aachen_fancybox_sprite%402x.png);
 
background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
 
background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
 
}
 
}
  
 
#fancybox-loading div {
 
#fancybox-loading div {
−
background-image: url(http://igem.rwth-aachen.de/2015/images/0/01/Fancybox_loading%402x.gif);
+
background-image: url(https://static.igem.org/mediawiki/2015/4/44/Aachen_fancybox_loading%402x.gif);
 
background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/
 
background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/
 
}
 
}
Line 160: Line 571:
  
  
−
.editsection {
+
.mw-editsection {
−
    font-size: 22pt;
+
 
     color: transparent;
 
     color: transparent;
 +
font-size: 12px;
 
}
 
}
  
−
.editsection a {
+
.mw-editsection a {
 
     color: #aaaaaa;
 
     color: #aaaaaa;
 
}
 
}
Line 216: Line 627:
  
  
−
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;
−
}
+
}
  
−
.editsection{
 
−
font-size: 12px;
 
−
 
−
}
 
 
 
 
/*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; /* .push must be the same height as .footer */
+
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 418: Line 825:
  
  
−
.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 {
 +
            font-size: 22pt;
 +
            color: #f9f9f9;
 +
                   
 +
        }
 +
        .hexagon-bg a:hover {
 +
            font-size: 22pt;
 +
            color: #f9f9f9; 
 +
            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: 20px;
+
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(/2015/skins/common/images/logo.png);
+
background-image: url(https://static.igem.org/mediawiki/2015/2/2c/Aachen_LogoForHeader.png);
−
background-size: 125px;
+
background-size: 120px auto;
−
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;
−
+
margin-top: 3px !important;
−
}
+
}
 
 
−
.igem-logo{   
+
.igem-logo{   
−
background-image: url(http://igem.rwth-aachen.de/2015/images/0/08/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;
−
}
+
}
 
 
−
.submenu {
+
.ac-submenu {
 
 
−
top: 95px !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;
 +
}
 
 
−
.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: white;
+
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: -59px;
−
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;
−
}
+
        float: right;
−
a.menu-link:hover {
+
        clear: both;
−
color: #aaa;
+
}
 +
a.menu-link:hover {
 +
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;
−
}
+
}

Latest revision as of 23:43, 18 September 2015

body { 

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

}

.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_menu_inside {
  margin-left: 20px;
  box-sizing: content-box;

}

  1. top_menu_14 {
  box-sizing: content-box;

}

  1. user_item, #bars_item {
  line-height: normal;

}

  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;
   color: #aaaaaa;
   font-weight: bold;
   font-variant: small-caps;
   text-transform: capitalize;

}

  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; }


.tourLink { 

   position: relative;
   float: left;
   width: auto;
   height: 79px;
   z-index: 2;
   line-height: 79px;
   font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
   font-size: 28.5px;

} .tourLink a { 

   color: #f9f9f9;

} .tourLink a:hover { 

   color: #f9f9f9;

}


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

} .iSuresh{ 

   background-image: url(Aachen_iSuresh.jpg);

} .iSuresh:hover { 

   background-image: url(Aachen_iSuresh.gif);

} .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_LogoForHeader.png); background-size: 120px auto; width: 125px; height:75px; background-repeat:no-repeat; margin-left: 150px; margin-right: 0px; margin-top: 3px !important; }

.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: -59px; 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; 

       float: right;
       clear: both;

} 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; }