Difference between revisions of "Team:Aachen/Template:Team:Aachen/CSS/Theme1"
| Line 630: | Line 630: | ||
} | } | ||
| − | . | + | .ac_submenu { |
top: 95px !important; | top: 95px !important; | ||
Revision as of 00:37, 16 September 2015
body {
background-color: #3B3B3B; background-image: url();
}
.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; }
/* Wikitables */
.wikitable th{ background: #bf1521; color: white; }
.wikitable th { border-color: #333; } .wikitable td { border-color: #333; padding-left: 1em; padding-right: 1em; }
/* 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*/
}
}
.editsection {
font-size: 22pt; color: transparent;
}
.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; }
.editsection{ font-size: 12px;
}
/*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; /* .push must be the same height as .footer */ }
.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;
}
@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: 20px;
}
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: 95px !important; border-top: 1px solid; border-color: #333; border-radius: 0px; background-color: #bf1521; box-shadow: 0px 10px 10px -10px black; padding: 0; }
.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: white; }
.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; }