"
Team:Imperial College/Templates:custom css
From 2013.igem.org
| Line 232: | Line 232: | ||
/* Old browsers */ | /* Old browsers */ | ||
| - | background: -moz-linear-gradient(top, #36a9e1 0%, # | + | background: -moz-linear-gradient(top, #36a9e1 0%, #0099e0 100%); |
/* FF3.6+ */ | /* FF3.6+ */ | ||
| - | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #36a9e1), color-stop(100%, # | + | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #36a9e1), color-stop(100%, #0099e0)); |
/* Chrome,Safari4+ */ | /* Chrome,Safari4+ */ | ||
| - | background: -webkit-linear-gradient(top, #36a9e1 0%, # | + | background: -webkit-linear-gradient(top, #36a9e1 0%, #0099e0 100%); |
/* Chrome10+,Safari5.1+ */ | /* Chrome10+,Safari5.1+ */ | ||
| - | background: -o-linear-gradient(top, #36a9e1 0%, # | + | background: -o-linear-gradient(top, #36a9e1 0%, #0099e0 100%); |
/* Opera 11.10+ */ | /* Opera 11.10+ */ | ||
| - | background: -ms-linear-gradient(top, #36a9e1 0%, # | + | background: -ms-linear-gradient(top, #36a9e1 0%, #0099e0 100%); |
/* IE10+ */ | /* IE10+ */ | ||
| - | background: linear-gradient(to bottom, #36a9e1 0%, # | + | background: linear-gradient(to bottom, #36a9e1 0%, #0099e0 100%); |
/* W3C */ | /* W3C */ | ||
| - | filter: progid:dximagetransform.microsoft.gradient(startColorstr='#36a9e1', endColorstr='# | + | filter: progid:dximagetransform.microsoft.gradient(startColorstr='#36a9e1', endColorstr='#0099e0', GradientType=0); |
/* IE6-9 */ | /* IE6-9 */ | ||
| Line 438: | Line 438: | ||
background-color: #93b4d9; | background-color: #93b4d9; | ||
} | } | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
/* ---------------- Main Content ---------------- */ | /* ---------------- Main Content ---------------- */ | ||
Revision as of 22:00, 23 September 2013
@charset "UTF-8"; /* PLEASE READ https://2013.igem.org/wiki/index.php?title=Team:Imperial_College/Templates:StyleGuide&action=edit */
body,
- globalWrapper {
font-size: 14px; font-family: 'Noto Sans', sans-serif;
}
.clear {
clear: both;
}
/* ---------------- WikiMedia Elements / Page Structure---------------- */
/* HIDE Search Controls Page title */
- p-logo,
- search-controls,
.firstHeading {
display: none;
}
h1, h2, h3, h4, h5, h6 {
color: #36a9e1;
}
/* Remove default top header */
- top-section {
background-color: rgba(54, 169, 225, 0.1); border: none; height:20px; margin-top: 0; margin-bottom: 20px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease;
}
- top-section:hover {
background: #36A9E1;
}
/* Edit and user menu */
- menubar {
top: 0 !important; font-size: 0.7em;
}
- menubar li,
- menubar li a:link {
text-transform: uppercase;
}
/* Highlight with background colour on hover */
- top-section:hover #menubar li a {
color: #FFF;
}
- menubar li a:link,
- menubar li a:visited {
color: #DDD; background-color: transparent;
}
- menubar li a:hover,
- menubar li a:focus {
color: #A3C4E9; text-decoration: none;
}
/* Edit */
- menubar.left-menu{
}
- menubar.left-menu:hover {
background-color: transparent;
}
/* User */
- menubar.right-menu {
}
/* ? */
- catlinks {
border:none; background: #ffffff;
}
/* Wikimedia related links at base of page */
- footer-box {
border:none; margin: 30px auto; width: 100%; background-color: #aeaeae; padding: 3em 0 5em 0;
}
- footer {
text-align: center;
}
- footer-box #f-poweredbyico,
- footer-box #f-copyrightico {
float: none; display: inline-block; vertical-align: middle; margin-bottom: 10px;
}
- footer-box #f-copyrightico {
}
- footer-box #f-list {
float: none; display: block; width: 100%; margin: 0; padding: 0;
}
- footer-box #f-list li {
text-transform: uppercase; padding: 0 .75em; margin: 0;
}
- footer-box #f-list li a:link,
- footer-box #f-list li a:visited {
color: #CCC; font-size: 0.7em;
}
- footer-box #f-list li a:hover,
- footer-box #f-list li a:focus {
color: #36A9E1; text-decoration: none;
}
/* ---------------- Header ---------------- */
- imperial-banner {
position: relative; /* this is to allow positioning of elements within */ text-align: right; margin: 0 0 1em 0; line-height: 80px;
}
#imperial-igem-banner {
position: absolute;
left: 0;
top: 50%;
margin-top: -40px;
}
#igem-logo,
#imperial-logo {
display: inline-block;
margin-left: 5px;
}
#imperial-igem-banner img,
#igem-logo img {
height: 80px;
}
#igem-logo img {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#igem-logo img:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
#imperial-logo img {
height: 45px;
}
- BackToTop,
- BackToTop:link,
- BackToTop:visited {
position: fixed; bottom: 5px; right: 5px; text-decoration: none; color: #36a9e1;
}
- BackToTop:hover {
color: #a3c4e9;
}
/* ---------------- Navigation ---------------- */ @charset "UTF-8"; ul.navigation-menu {
list-style-type: none; list-style-image: none; width: 960px; height: 50px; text-align: center; display: inline-block; margin: 0 0 1em 0; padding: 0; position: relative; font-family: Helvetica, Arial, sans-serif; color: #ffffff; cursor: pointer; /* CSS3 Gradient */
background: #36a9e1; /* Old browsers */
background: -moz-linear-gradient(top, #36a9e1 0%, #0099e0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #36a9e1), color-stop(100%, #0099e0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #36a9e1 0%, #0099e0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #36a9e1 0%, #0099e0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #36a9e1 0%, #0099e0 100%); /* IE10+ */
background: linear-gradient(to bottom, #36a9e1 0%, #0099e0 100%); /* W3C */
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#36a9e1', endColorstr='#0099e0', GradientType=0); /* IE6-9 */
} ul.navigation-menu ul {
list-style-type: none; list-style-image: none; opacity: 0; position: relative; z-index: -999;
} ul.navigation-menu a:link, ul.navigation-menu a:visited {
text-decoration: none; color: #ffffff; display: inline-block; width: 100%; height: 100%;
} ul.navigation-menu > li {
display: block; float: left; line-height: 50px; height: 50px; text-align: center; width: 191px; padding: 0; margin: 0; border-right: 1px solid #2b87b4; box-shadow: 1px 0 0 rgba(255, 255, 255, 0.5) inset; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease;
} ul.navigation-menu > li > ul {
-webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; list-style-type: none; list-style-image: none; text-align: center; padding: 0; margin: 0; height: 0;
} ul.navigation-menu > li > ul > li {
display: block; opacity: 0; padding: 0; margin: 0; height: 0; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease;
} ul.navigation-menu > li:hover {
background-color: #a3c4e9;
} ul.navigation-menu > li:hover > ul {
-webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; position: relative; z-index: 9999; height: auto; opacity: 1; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5); background: #36a9e1;
} ul.navigation-menu > li:hover > ul > li {
opacity: 1; border-bottom: 1px solid #2b87b4; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; height: 50px; line-height: 50px;
} ul.navigation-menu > li:hover > ul > li:first-child {
box-shadow: none;
} ul.navigation-menu > li:hover > ul > li:last-child {
border-bottom: none;
} ul.navigation-menu > li:hover > ul > li:hover {
background-color: #a3c4e9;
} ul.navigation-menu > li:hover > ul > li:active {
background-color: #93b4d9;
} ul.navigation-menu > li:hover > ul > li.maple {
background-image: url('https://static.igem.org/mediawiki/2013/8/82/MapleLogo.png');
background-size: 65% auto;
background-repeat: no-repeat;
background-position: 40% 40%;
background-color: #ffce32;
} ul.navigation-menu > li:hover > ul > li.maple a {
text-indent: -9999999px;
} ul.navigation-menu > li:hover > ul > li.maple:hover {
background-color: #fff;
} ul.navigation-menu > li:hover > ul > li.maple:active {
background-color: #ffce32;
} ul.navigation-menu > li:hover > ul > li > ul {
-webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; list-style-type: none; list-style-image: none; text-align: center; padding: 0; margin: 0; position: relative; left: 191px; top: -50px; opacity: 1;
} ul.navigation-menu > li:hover > ul > li > ul:before {
content: "»"; display: block; position: absolute; left: -20px; text-align: right; line-height: 50px;
} ul.navigation-menu > li:hover > ul > li > ul > li {
-webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; width: 0; width: 0; opacity: 0; padding: 0; margin: 0;
} ul.navigation-menu > li:hover > ul > li > ul.left {
left: 0; right: 191px;
} ul.navigation-menu > li:hover > ul > li:hover > ul {
height: auto; width: 191px; opacity: 1; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5); background: #36a9e1; z-index: 9999999;
} ul.navigation-menu > li:hover > ul > li:hover > ul > li {
width: 191px; height: 50px; line-height: 50px; opacity: 1; border-bottom: 1px solid #2b87b4; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
} ul.navigation-menu > li:hover > ul > li:hover > ul > li:first-child {
box-shadow: none; border-top-right-radius: 5px;
} ul.navigation-menu > li:hover > ul > li:hover > ul > li:last-child {
border-bottom: none; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;
} ul.navigation-menu > li:hover > ul > li:hover > ul > li:hover {
background-color: #a3c4e9;
} ul.navigation-menu > li:active {
background-color: #93b4d9;
}
/* ---------------- Main Content ---------------- */
/* Full Page container */
- content {
position: relative; width: 960px; margin: 0 auto; padding:0; background: #ffffff; border: none; z-index: 2;
}
- contentSub {
margin: 0 0 0 0; }
/* ---------------- Footer ---------------- */
- supporters {
border-top: solid 1px #CCC; margin-top: 2em; padding-top: 2em;
}
- supporters a {
margin-right: 2em;
} /* LINKS */ a:visited {
color: #F9B233;
}
/* ---------------- Table of contents ---------------- */
- toc,
.toc {
color: #36A9E1; border: 1px solid #E5E5E5; font-size: 100%; background: #444; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; display: block; max-width: 300px;
}
- toc tr,
.toc tr,
- toc td,
.toc td,
- toc tbody,
.toc tbody {
display: block; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease;
}
- toc.scroll-top,
.toc.scroll-top {
float: right; margin: 0 0 1em 1em;
}
- toc.scroll,
.toc.scroll {
position: absolute; z-index: 99999; right: 0; display: block; padding: 5px; overflow: hidden;
}
- toc.scroll td,
.toc.scroll td {
display: none;
}
- toc.scroll:before,
.toc.scroll:before {
content: '«'; font-size: 200%; text-align: center; line-height: 20px; height: 20px; width: 20px;
}
- toc.scroll:hover td,
.toc.scroll:hover td {
display: block;
}
- toc.scroll:hover:before,
.toc.scroll:hover:before {
content: ;
}
- toc td,
.toc td {
padding: 0.7em;
}
- toc ul ul, .toc ul ul {
margin-left: 1em;
}
- toc ul ul ul, .toc ul ul ul {
display: none;
}
.tocnumber, #toctitle { display: none; }
- toc li a,
.toc li a {
display: block; margin: 0 0 -1px; padding: 8px 14px; font-size: 0.8em; text-transform: uppercase; text-decoration: none;
}
.toc li a:link, .toc li a:visited,
- toc li a:link,
- toc li a:visited {
color: #36A9E1; text-decoration: none;
}
.toc li a:hover,
- toc li a:hover {
color: #F9B233; background-color: #eee; text-decoration: none;
}
/** Reference List **/ ol.reference {list-style-type: none;} ol.reference li:before {content: "(" counter(section) ") ";} ol.reference li { counter-increment: section;}
