Template:Montgomery Cougars NJUSA/Common CSS
From 2014hs.igem.org
Casey.chow (Talk | contribs) |
Casey.chow (Talk | contribs) |
||
Line 234: | Line 234: | ||
content: '▼'; | content: '▼'; | ||
margin-left: 0.5em; | margin-left: 0.5em; | ||
+ | font-size: 0.75em; | ||
} | } | ||
Revision as of 08:19, 20 June 2014
/* 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.5em;
}
- 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;
} .firstHeading {
display: none;
}
/* CUSTOM STYLES */
- content {
width: 100%; padding: 0;
}
.container {
width: 70%; max-width: 1100px; margin: 0 auto;
}
p {
line-height: 1.7;
}
/***************************************/ /* RANDOM */ /***************************************/
body {
min-width: 1200px; background-color: white; border-bottom: solid #333 1px;
}
/* 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;
}
th {
background-color: #e0e0e0;
}
table caption {
font-size: 1.5em;
}
/***************************************/ /* FONT TWEAKS */ /***************************************/
body {
font-size: 12px;
}
p {
font-size: 16px;
}
- , body, p, span, blockquote, article, section, aside, nav, th, td, .wikitable th, .wikitable td {
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; padding-bottom: 0.25em;
}
h1, h1 a {
border-bottom: none; font-size: 3.25em;
}
p {
line-height: 1.5;
}
b, strong, th {
font-weight: 700;
}
- selection {
color: white; background: rgb(0, 102, 0);
}
- -moz-selection {
color: white; background: rgb(0, 102, 0);
}
/***************************************/ /* 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; max-width: 1400px; margin: 0 auto; position: relative;
}
- nav ul {
position: absolute; left: 320px; top: 4.25em;
}
- 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 > ul > li:hover > a {
background: rgb(50, 50, 50);
}
- nav li ul {
background: rgb(50, 50, 50); opacity: 0; position: absolute; top: 2.5em; left: 0; width: auto; z-index: 99;
-webkit-transition: opacity 0.15s ease-in; -moz-transition: opacity 0.15s ease-in; -o-transition: opacity 0.15s ease-in; -ms-transition: opacity 0.15s ease-in; transition: opacity 0.15s ease-in;
}
- nav li:hover ul {
opacity: 1; visibility: visible;
}
- nav li ul li:hover a {
background: rgb(75, 75, 75);
}
- nav .is-parent:after {
content: '▼'; margin-left: 0.5em; font-size: 0.75em;
}
- igem-logo {
position: absolute; right: 0;
}
- igem-logo span {
display: none;
}
- igem-logo img {
width: 200px; margin-top: 1em;
}
/***************************************/ /* GALLERY */ /***************************************/
.generic-image {
position: relative;
}
.gallery {
position: relative;
}
- 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;
}
- slider ul li a {
display: block;
}
.slider img {
display: table; margin: 0 auto; width: 100%;
}
- slider .caption {
background-color: rgba(0,10,5,.8); padding: 1.5em 1em; text-align: center; color: white; position: absolute; bottom: 0; width: 100%;
}
.slider .caption {
display: table; margin: 0; width: auto;
}
- slider .caption h2 {
color: white; border-bottom: none; font-size: 3em; font-weight: 300; margin: 0.25em 0 0.75em; padding: 0;
}
- slider .caption h2:after {
content: '▲'; margin-left: 0.2em; color: rgb(0, 172, 0);
}
- slider .caption span{
color: white; font-size: 1.25em; font-weight: 300; margin: 0;
}
/***************************************/ /* LEFT LINKS */ /***************************************/
- left-links-wrapper {
font-size: 12px; padding-right: 15px; box-sizing: border-box; -moz-box-sizing: border-box;
}
- left-links {
}
- left-links h1,
- left-links ul li a,
- left-links ul li .selflink {
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,
- left-links ul li .selflink {
display: block; clear: left; float: left; min-width: 30%; 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 #left-links-title {
background-color: rgba(0, 102, 0, 1); color: rgb(240, 240, 240);
}
- left-links .selflink {
background-color: rgb(46, 46, 46); font-weight: 300;
}
- 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);
}
/***************************************/
/* CONTENT */
/***************************************/
- main {
position: relative;
}
- main-wrapper {
max-width: 1400px; margin: 0 auto; position: relative;
}
- inner-content {
box-sizing: border-box; -moz-box-sizing: border-box; padding-right: 3em;
}
- inner-content h1 {
margin: 0.25em 0 0.75em;
}
- inner-content p {
margin: 1.5em 0 .5em;
}
.editsection, .editsection a {
font-size: 16px;
}
.toc {
float: right; margin: 3em 0 2em 2em;
}
/***************************************/ /* PIKACHOOSE */ /***************************************/
.slider {
margin-left: 10%; width: 75%;
}
.pika-thumbs {
height:75px; padding:0 16px;
}
.pika-thumbs li {
width:144px; height:74px; overflow:hidden; float:left; list-style-type:none; background:#fafafa; border:1px solid #e5e5e5; cursor:pointer; margin:0 5px; padding:3px;
}
.pika-thumbs li .clip {
position:relative; height:100%; text-align:center; vertical-align:middle; overflow:hidden;
}
.pika-stage {
position:relative; background:#fafafa; border:1px solid #e5e5e5; text-align:center; margin:0 auto; padding:10px 10px 40px;
}
.pika-stage img {
height:100%;
}
.pika-stage .caption {
position:absolute; background:rgba(0,0,0,0.75); border:1px solid #141414; color:#fafafa; text-align:right; bottom:50px; right:10px; padding:10px;
} .pika-stage .caption p {
line-height:14px; margin:0; padding:0;
}
.pika-imgnav a {
position:absolute; text-indent:-5000px; display:block; z-index:3;
}
.pika-imgnav a.previous {
background:url() no-repeat left 45%; height:100%; width:50px; top:50px; left:0; cursor:pointer;
}
.pika-imgnav a.next {
background:url() no-repeat right 45%; height:100%; width:50px; top:50px; right:0; cursor:pointer;
}
.pika-imgnav a.play {
background:url() no-repeat 0 50%; height:100px; width:44px; top:0; left:50%; display:none; cursor:pointer;
}
.pika-imgnav a.pause {
background:url() no-repeat 0 50%; height:100px; width:44px; top:0; left:50%; display:none; cursor:pointer;
}
.pika-textnav {
overflow:hidden; bottom:2px; position:absolute; width:100%; margin:10px 0 0;
}
.pika-textnav a {
font-size:12px; text-decoration:none; color:#333; padding:4px;
}
.pika-textnav a.previous {
float:left; width:auto; display:block;
}
.pika-textnav a.next {
float:right; width:auto; display:block; margin-right:20px;
}
.pika-tooltip {
font-size:12px; position:absolute; color:#FFF; background-color:rgba(0,0,0,0.7); border:3px solid #000; padding:3px;
}
.pika-counter {
position:absolute; bottom:45px; left:15px; color:#FFF; background:rgba(0,0,0,0.7); font-size:11px; -moz-border-radius:5px; border-radius:5px; padding:3px;
}
.pika-loader {
background:url(loading.gif) 3px 3px no-repeat #000;
background-color:rgba(0,0,0,0.9);
color:#FFF;
width:60px;
font-size:11px;
text-align:right;
position:absolute;
top:15px;
right:15px;
padding:5px 3px;
}
.slider img {
width:auto;
}
.slider .clip img {
position:relative;
bottom:40%;
}
.slider .jcarousel-container-horizontal { padding: 15px 20px; overflow:hidden;} .slider.jcarousel-clip-horizontal {height: 90px; width: 485px;} .slider .jcarousel-item-horizontal { margin-right: 10px;}
/***************************************/
/* FOOTER */
/***************************************/
- footer {
border-top: 1px solid rgb(175, 175, 175); margin-top: 2em; padding: 1em;
}
- footer li {
display: inline-block; margin: 0;
}
- 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;
}
/***************************************/ /* TOC */ /***************************************/
- jqtoc {
background: #3A3A3A; color: #fff; font-size: 12px; font-family: 'Open Sans', sans-serif; position: absolute; top: 0; bottom: 0; right: 0; width: 150px;
}
- jqtoc ul {
box-sizing: border-box; list-style: none; margin: 0; padding: 1em 0 0; width: 150px;
}
- jqtoc li {
box-sizing: border-box; letter-spacing: initial; padding: 5px 10px; width: 100%;
}
- jqtoc a {
color: #fff; text-decoration: none; display: block;
}
- jqtoc .toc-h1 {
background-color: rgb(70, 70, 70);
}
- jqtoc .toc-h2 {
padding-left: 10px;
}
- jqtoc .toc-h3 {
padding-left: 20px;
}
- jqtoc .toc-active {
background: rgb(0, 75, 15);
}
.with-toc #inner-content {
padding-right: 175px;
}
.sticky {
float: none; position: fixed; z-index: 6; left: auto;
}
- scrolltop {
background-color: rgba(0, 92, 0,0.85); position: fixed; right: 5%; color: white; bottom: 0px; font-size: 3em; width: 1em; text-align: center; border-radius: 5px 5px 0 0; height: 1em; line-height: 1.2;
}