Template:Montgomery Cougars NJUSA/Common CSS
From 2014hs.igem.org
/* Edit this file: https://2014hs.igem.org/wiki/index.php?title=Template:Montgomery_Cougars_NJUSA/Common_CSS&action=edit */ /* https://2011.igem.org/Team:DTU-Denmark/How_to_customize_an_iGEM_wiki#Centralizing_the_layout_using_templates */
/***************************************/ /* WIKI RESET */ /***************************************/
body.mediawiki {
margin-top: -1.25em;
}
- contentSub,
- search-controls,
.firstHeading,
- footer-box,
- catlinks,
- p-logo {
display:none;
}
- top-section {
border: none; height: 0px;
}
- content {
border: none;
}
- menubar > ul > li:last-child {
display: none;
}
- menubar {
width: auto;
}
- menubar ul {
margin-bottom: 0.5em;
}
/* CUSTOM STYLES */
- content {
width: 100%; padding: 0;
}
.container {
width: 70%; max-width: 1100px; margin: 0 auto;
}
p {
line-height: 1.5;
}
h1 {
font-size: 3em;
}
/***************************************/ /* RANDOM */ /***************************************/
/* fontawesome */
[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}
/* http://css-tricks.com/snippets/css/clear-fix/ */ .clearfix:after {
visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;
} .clearfix { display: inline-block; } /* start commented backslash hack \*/
- html .clearfix { height: 1%; }
.clearfix { display: block; } /* close commented backslash hack */
.centered {
display: table; margin-left: auto; margin-right: auto;
}
/***************************************/
/* FONT TWEAKS */
/***************************************/
body {
font-size: 12px;
}
p {
font-size: 14px;
}
body, p, span, blockquote, article, section, aside, nav {
font-family: 'Open Sans', sans-serif;
}
h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
font-family: 'Open Sans', sans-serif; font-weight: 400;
}
h1, h1 a {
font-size: 3.25em;
}
p {
line-height: 1.5;
} /***************************************/ /* HEADER */ /***************************************/
- header-wrapper {
position: relative; /* create new stacking context to keep logo on top */ z-index: 100;
}
- header {
background-color: rgb(38, 38, 38); border-bottom: solid 0.75em rgb(0, 102, 0); height: 7.5em;
}
- logo {
margin-left: 20px;
}
- logo span {
display: none;
}
- logo img {
/*max-width: 275px;*/ position: absolute; width: 250px;
}
- nav {
background: none;
}
- nav ul {
position: absolute; left: 320px; top: 4.25em; width: 70%;
}
- nav li a {
color: #E6E6E6; font-family: 'Open Sans', sans-serif; font-size: 1.2em; font-weight: 300;
-webkit-transition: background-color 0.15s ease-in; -moz-transition: background-color 0.15s ease-in; -o-transition: background-color 0.15s ease-in; -ms-transition: background-color 0.15s ease-in; transition: background-color 0.15s ease-in;
}
- nav li a:hover {
background: rgb(70, 70, 70);
}
/***************************************/ /* GALLERY */ /***************************************/
- slider {
margin-right: 0; margin-bottom: 0; position: relative; overflow: auto; width: 100%;
}
- slider ul {
margin-top: 0; padding-left: 0;
}
- slider li {
list-style: none; position: relative;
}
- slider ul li {
float: left; /*margin-top: -1em;*/
}
- slider ul li a {
display: block;
}
- slider img {
width: 100%;
}
- slider .caption {
background-color: rgba(0,10,5,.8); padding: 1.5em 1em; position: absolute; bottom: 0; text-align: center; width: 100%; color: white;
}
- slider .caption h2 {
color: white; border-bottom: none; font-size: 3em; font-weight: 300; margin: 0.25em 0 0.75em; padding: 0;
}
- slider .caption span {
color: white; font-size: 1.25em; font-weight: 300; margin: 0;
}
/***************************************/ /* LEFT LINKS */ /***************************************/
- left-links-wrapper {
padding-right: 15px; box-sizing: border-box;
}
- left-links {
}
- left-links h1,
- left-links ul li a {
color: rgb(245, 245, 245); font-family: 'Open Sans', sans-serif; text-decoration: none;
}
- left-links h1 {
background-color: rgba(0, 102, 0, 1); font-size: 2.5em; font-weight: 300; float: left; line-height: 1.15; margin: 0 0 -1px; min-width: 75%; max-width: 95%; padding: 10px;
}
- left-links ul {
float: left; margin: 0; padding: 0; width: 100%;
}
- left-links ul li {
display: block; font-size: 1.5em; font-weight: 300; margin-bottom: 0; width: 100%;
}
- left-links ul li a {
display: block; float: left; min-width: 50%; padding: 10px 15px;
-webkit-transition: background 200ms ease; -moz-transition: background 200ms ease; -ms-transition: background 200ms ease; -o-transition: background 200ms ease; transition: background 200ms ease;
}
- left-links ul li a:hover {
background-color: rgb(50,50,50);
}
- left-links ul > :nth-child(1) > a {
background-color: rgba(0, 102, 0, 0.95);
}
- left-links ul > :nth-child(2) > a {
background-color: rgba(0, 102, 0, 0.91);
}
- left-links ul > :nth-child(3) > a {
background-color: rgba(0, 102, 0, .87);
}
- left-links ul > :nth-child(4) > a {
background-color: rgba(0, 102, 0, 0.83);
}
- left-links ul > :nth-child(5) > a {
background-color: rgba(0, 102, 0, 0.79);
}
- left-links ul > :nth-child(6) > a {
background-color: rgba(0, 102, 0, 0.75);
}
- left-links ul > :nth-child(7) > a {
background-color: rgba(0, 102, 0, 0.71);
}
- left-links ul > :nth-child(8) > a {
background-color: rgba(0, 102, 0, 0.67);
}
- left #left-links-title {
background-color: rgba(0, 102, 0, 1); color: rgb(240, 240, 240);
}
/***************************************/ /* CONTENT */ /***************************************/
- inner-content {
box-sizing: border-box; padding-right: 3em;
}
- innercontent h1:first-child {
margin: 0.3em 0 0.25em;
}
h1 .editsection, h1 .editsection a {
font-size: 16px;
}
/***************************************/ /* FOOTER */ /***************************************/
- footer {
margin-top: 2em;
}
- footer li {
display: inline-block;
}
- footer-links {
text-align: center;
}
- footer-text {
color: #777; font-size: 0.8em; margin: 0.75em 0; text-align: center;
}
- footer-links-2 ul {
margin: 0.75em 0 0.25em; padding: 0;
}
- footer-links-2 ul li {
display: inline; list-style: none; padding-right: 1em;
}
- footer-links-2 ul li:last-child {
padding-right: 0;
}
- footer-links-2 ul li a {
font-size: 0.9em; color: #777; text-decoration: none;
}