"
Team:UCSF UCB/CSS
From 2014.igem.org
<style>
html, button, input, select, textarea {
color: #222;
}
html {
font-size: 1em; line-height: 1.4;
}
- -moz-selection {
background: #b3d4fc; text-shadow: none;
}
- selection {
background: #b3d4fc; text-shadow: none;
}
hr {
display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;
}
audio, canvas, img, video {
vertical-align: middle;
}
fieldset {
border: 0; margin: 0; padding: 0;
}
textarea {
resize: vertical;
}
.browsehappy {
margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0;
}
/* ===== Initializr Styles ==================================================
Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template ========================================================================== */
body {
font: 16px/26px Helvetica, Helvetica Neue, Arial;
}
.wrapper {
width: 90%; margin: 0 5%;
}
/* ===================
ALL: Orange Theme =================== */
.header-container {
border-bottom: 20px solid #e44d26;
}
.footer-container, .main aside {
border-top: 20px solid #e44d26;
}
.header-container, .footer-container, .main aside {
background: #f16529;
}
.title {
color: white;
}
/* ==============
MOBILE: Menu ============== */
nav ul {
margin: 0; padding: 0;
}
nav a {
display: block; margin-bottom: 10px; padding: 15px 0;
text-align: center; text-decoration: none; font-weight: bold;
color: white; background: #e44d26;
}
nav a:hover, nav a:visited {
color: white;
}
nav a:hover {
text-decoration: underline;
}
/* ==============
MOBILE: Main ============== */
.main {
padding: 30px 0;
}
.main article h1 {
font-size: 2em;
}
.main aside {
color: white; padding: 0px 5% 10px;
}
.footer-container footer {
color: white; padding: 20px 0;
}
/* ===============
ALL: IE Fixes =============== */
.ie7 .title {
padding-top: 20px;
}
/* ==========================================================================
Author's custom styles ========================================================================== */
/* ==========================================================================
Remove default iGEM styling ========================================================================== */
- contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear {display: none;}
- top-section { /*-- styling for default menu bar (edit, page, history, etc.) --*/
background-color: #383838; border: 0 none; height: 14px; z-index: 100; top: 0; position: fixed; width: 975px; left: 50%; margin-left: -487px;
}
- top-section-bar { /*-- styling full width bar which hides behind default menu bar (edit, page, history, etc.) --*/
background-color: #383838; height: 14px; display: none; z-index: 10; position: fixed; width: 100%; top: 0;
}
- menubar a:link, #menubar a:active, #menubar a:visited, #menubar a:hover, #menubar:hover { /*-- styling for default menu bar links (edit, page, history, etc.) --*/
color: #727272; text-decoration: none; background-color: transparent;
}
body {
background-color: #fff;
}
- globalWrapper, #content { /*-- changes default wiki settings --*/
width: 100%; height: 100%; border: 0px; background-color: transparent; margin: 0px; padding: 0px;
}
html, body, .wrapper { /*-- changes default wiki settings --*/
width: 100%; height: 100%; background-color: transparent;
}
- contentcontainer { /*-- creates container for all content on page --*/
font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 14px; color: #414141; width: 960px; margin-left: auto; margin-right: auto; background-color: #transparent; margin-top: 0px;
}
/* ==========================================================================
Media Queries ========================================================================== */
@media only screen and (min-width: 480px) {
/* ====================
INTERMEDIATE: Menu ==================== */
nav a {
float: left;
width: 27%;
margin: 0 1.7%;
padding: 25px 2%;
margin-bottom: 0;
}
nav li:first-child a {
margin-left: 0;
}
nav li:last-child a {
margin-right: 0;
}
/* ========================
INTERMEDIATE: IE Fixes ======================== */
nav ul li {
display: inline;
}
.oldie nav a {
margin: 0 0.7%;
}
}
@media only screen and (min-width: 768px) {
/* ====================
WIDE: CSS3 Effects ==================== */
.header-container,
.main aside {
-webkit-box-shadow: 0 5px 10px #aaa;
-moz-box-shadow: 0 5px 10px #aaa;
box-shadow: 0 5px 10px #aaa;
}
/* ============
WIDE: Menu ============ */
.title {
float: left;
}
nav {
float: right;
width: 38%;
}
/* ============
WIDE: Main ============ */
.main article {
float: left;
width: 57%;
}
.main aside {
float: right;
width: 28%;
}
}
@media only screen and (min-width: 1140px) {
/* ===============
Maximal Width =============== */
.wrapper {
width: 1026px; /* 1140px - 10% for margins */
margin: 0 auto;
}
}
/* ==========================================================================
Helper classes ========================================================================== */
.ir {
background-color: transparent; border: 0; overflow: hidden; *text-indent: -9999px;
}
.ir:before {
content: ""; display: block; width: 0; height: 150%;
}
.hidden {
display: none !important; visibility: hidden;
}
.visuallyhidden {
border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto;
}
.invisible {
visibility: hidden;
}
.clearfix:before, .clearfix:after {
content: " "; display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* ==========================================================================
Print styles ========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
} </style>
