Difference between revisions of "Team:Aachen/Template:Team:Aachen/CSS/Theme1"
| Line 789: | Line 789: | ||
height: 80px; | height: 80px; | ||
} | } | ||
| + | .hexagon-bg a { | ||
| + | font-size: 22pt; | ||
| + | color: #f9f9f9; | ||
| + | |||
| + | } | ||
| + | .hexagon-bg a:hover { | ||
| + | font-size: 22pt; | ||
| + | color: #f9f9f9; | ||
| + | } | ||
@media only screen and (max-width: 850px) { | @media only screen and (max-width: 850px) { | ||
Revision as of 09:50, 18 September 2015
body {
background-color: #3B3B3B; background-image: url(); background-attachment: scroll;
}
.navbar {
background-color: #f9f9f9; border-radius: 0px; margin-top: 20px; border-top: none; min-height: 75px;
}
- menubar {
top: 0px;
}
- menubar a {
color: #AAAAAA !important;
}
- 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; }
- bronze li:before {color:rgb(205, 127, 50);}
- silver li:before {color:rgb(192, 192, 192);}
- 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(
);
}
.iSD:hover {
background-image: url(
);
}
.iPikachu {
background-image: url(
);
}
.iPikachu:hover {
background-image: url(
);
}
.iSS {
background-image: url(
);
}
.iSS:hover {
background-image: url(
);
}
.iMO {
background-image: url(
);
}
.iMO:hover {
background-image: url(
);
}
.iPO {
background-image: url(
);
}
.iPO:hover {
background-image: url(
);
}
.iSK {
background-image: url(
);
}
.iSK:hover {
background-image: url(
);
}
.iMD {
background-image: url(
);
}
.iMD:hover {
background-image: url(
);
}
.iLG {
background-image: url(
);
}
.iLG:hover {
background-image: url(
);
}
.iRH{
background-image: url(
);
}
.iRH:hover{
background-image: url(
);
}
.iPD{
background-image: url(
);
}
.iPD:hover {
background-image: url(
);
}
.iMB {
background-image: url(
);
}
.iMB:hover {
background-image: url(
);
}
.iCG {
background-image: url(
);
}
.iCG:hover {
background-image: url(
);
}
.iJR {
background-image: url(
);
}
.iJR:hover {
background-image: url(
);
}
.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(
);
}
.iSB:hover {
background-image: url(
);
}
.iTP {
background-image: url(
);
}
.iTP:hover {
background-image: url(
);
}
.iTS {
background-image: url(
);
}
.iTS:hover {
background-image: url(
);
}
.iLH{
background-image: url(
);
}
.iLH:hover {
background-image: url(
);
}
.iLM {
background-image: url(
);
}
.iLM:hover {
background-image: url(
);
}
.iSL {
background-image: url(
);
}
.iSL:hover {
background-image: url(
);
}
.Ljubica{
background-image: url(
);
background-position: 0 73px;
}
.popupsquare.Ljubica{
background-position: 0 -25px;
}
.Suresh{
background-image: url(
);
background-position: 0 85px;
}
.popupsquare.Suresh{
background-position: 0 0;
}
.Lars{
background-image: url(
);
}
.Wolfgang{
background-image: url(
);
background-position: 0px 20px;
}
.popupsquare.Wolfgang{
background-position: 0 -58px;
}
.Uli{
background-image: url(
);
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(
);
background: transparent url() repeat scroll 0% 0%;
}
- fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url(
);
}
- fancybox-loading div {
background: url(
) 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(
);
background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
}
#fancybox-loading div {
background-image: url(
);
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 */ }
#main {padding-bottom: 150px;}
.clearfix:after { content:"."; display: block; height: 0; clear: both; visibility:hidden; }
.clearfix{}
#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;
}
#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;
}
@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;}
#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(
);
background-size: 125px;
width: 125px;
height:75px;
background-repeat:no-repeat;
margin-left: 150px;
margin-right: 0px;
}
.igem-logo{
background-image: url(
);
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; }