Team:UCSF UCB/CSS

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
<head>
<head>
-
<style>  
+
<style> /*! normalize.css v1.1.3 | MIT License | git.io/normalize */
-
/*! normalize.css v1.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}
+
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
 +
  display: block; }
-
/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
+
audio, canvas, video {
 +
  display: inline-block;
 +
  *display: inline;
 +
  *zoom: 1; }
 +
audio:not([controls]) {
 +
  display: none;
 +
  height: 0; }
 +
 +
[hidden] {
 +
  display: none; }
 +
 +
html {
 +
  font-size: 100%;
 +
  -ms-text-size-adjust: 100%;
 +
  -webkit-text-size-adjust: 100%; }
 +
 +
html, button, input, select, textarea {
 +
  font-family: sans-serif; }
 +
 +
body {
 +
  margin: 0; }
 +
 +
a:focus {
 +
  outline: thin dotted; }
 +
 +
a:active, a:hover {
 +
  outline: 0; }
 +
 +
h1 {
 +
  font-size: 2em;
 +
  margin: .67em 0; }
 +
 +
h2 {
 +
  font-size: 1.5em;
 +
  margin: .83em 0; }
 +
 +
h3 {
 +
  font-size: 1.17em;
 +
  margin: 1em 0; }
 +
 +
h4 {
 +
  font-size: 1em;
 +
  margin: 1.33em 0; }
 +
 +
h5 {
 +
  font-size: .83em;
 +
  margin: 1.67em 0; }
 +
 +
h6 {
 +
  font-size: .67em;
 +
  margin: 2.33em 0; }
 +
 +
abbr[title] {
 +
  border-bottom: 1px dotted; }
 +
 +
b, strong {
 +
  font-weight: bold; }
 +
 +
blockquote {
 +
  margin: 1em 40px; }
 +
 +
dfn {
 +
  font-style: italic; }
 +
 +
hr {
 +
  -moz-box-sizing: content-box;
 +
  box-sizing: content-box;
 +
  height: 0; }
 +
 +
mark {
 +
  background: #ff0;
 +
  color: #000; }
 +
 +
p, pre {
 +
  margin: 1em 0; }
 +
 +
code, kbd, pre, samp {
 +
  font-family: monospace,serif;
 +
  _font-family: 'courier new',monospace;
 +
  font-size: 1em; }
 +
 +
pre {
 +
  white-space: pre;
 +
  white-space: pre-wrap;
 +
  word-wrap: break-word; }
 +
 +
q {
 +
  quotes: none; }
 +
 +
q:before, q:after {
 +
  content: '';
 +
  content: none; }
 +
 +
small {
 +
  font-size: 80%; }
 +
 +
sub, sup {
 +
  font-size: 75%;
 +
  line-height: 0;
 +
  position: relative;
 +
  vertical-align: baseline; }
 +
 +
sup {
 +
  top: -0.5em; }
 +
 +
sub {
 +
  bottom: -0.25em; }
 +
 +
dl, menu, ol, ul {
 +
  margin: 0; }
 +
 +
dd {
 +
  margin: 0 0 0 40px; }
 +
 +
menu, ol, ul {
 +
  padding: 0 0 0 40px; }
 +
 +
nav ul, nav ol {
 +
  list-style: none;
 +
  list-style-image: none; }
 +
 +
img {
 +
  border: 0;
 +
  -ms-interpolation-mode: bicubic; }
 +
 +
svg:not(:root) {
 +
  overflow: hidden; }
 +
 +
figure {
 +
  margin: 0; }
 +
 +
form {
 +
  margin: 0; }
 +
 +
fieldset {
 +
  border: 1px solid silver;
 +
  margin: 0 2px;
 +
  padding: .35em .625em .75em; }
 +
 +
legend {
 +
  border: 0;
 +
  padding: 0;
 +
  white-space: normal;
 +
  *margin-left: -7px; }
 +
 +
button, input, select, textarea {
 +
  font-size: 100%;
 +
  margin: 0;
 +
  vertical-align: baseline;
 +
  *vertical-align: middle; }
 +
 +
button, input {
 +
  line-height: normal; }
 +
 +
button, select {
 +
  text-transform: none; }
 +
 +
button, html input[type="button"], input[type="reset"], input[type="submit"] {
 +
  -webkit-appearance: button;
 +
  cursor: pointer;
 +
  *overflow: visible; }
 +
 +
button[disabled], html input[disabled] {
 +
  cursor: default; }
 +
 +
input[type="checkbox"], input[type="radio"] {
 +
  box-sizing: border-box;
 +
  padding: 0;
 +
  *height: 13px;
 +
  *width: 13px; }
 +
 +
input[type="search"] {
 +
  -webkit-appearance: textfield;
 +
  -moz-box-sizing: content-box;
 +
  -webkit-box-sizing: content-box;
 +
  box-sizing: content-box; }
 +
 +
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
 +
  -webkit-appearance: none; }
 +
 +
button::-moz-focus-inner, input::-moz-focus-inner {
 +
  border: 0;
 +
  padding: 0; }
 +
 +
textarea {
 +
  overflow: auto;
 +
  vertical-align: top; }
 +
 +
table {
 +
  border-collapse: collapse;
 +
  border-spacing: 0; }
 +
 +
/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
html,
html,
button,
button,
Line 11: Line 204:
select,
select,
textarea {
textarea {
-
    color: #222;
+
  color: #222; }
-
}
+
html {
html {
-
    font-size: 1em;
+
  font-size: 1em;
-
    line-height: 1.4;
+
  line-height: 1.4; }
-
}
+
::-moz-selection {
::-moz-selection {
-
    background: #b3d4fc;
+
  background: #b3d4fc;
-
    text-shadow: none;
+
  text-shadow: none; }
-
}
+
::selection {
::selection {
-
    background: #b3d4fc;
+
  background: #b3d4fc;
-
    text-shadow: none;
+
  text-shadow: none; }
-
}
+
hr {
hr {
-
    display: block;
+
  display: block;
-
    height: 1px;
+
  height: 1px;
-
    border: 0;
+
  border: 0;
-
    border-top: 1px solid #ccc;
+
  border-top: 1px solid #ccc;
-
    margin: 1em 0;
+
  margin: 1em 0;
-
    padding: 0;
+
  padding: 0; }
-
}
+
audio,
audio,
Line 42: Line 230:
img,
img,
video {
video {
-
    vertical-align: middle;
+
  vertical-align: middle; }
-
}
+
fieldset {
fieldset {
-
    border: 0;
+
  border: 0;
-
    margin: 0;
+
  margin: 0;
-
    padding: 0;
+
  padding: 0; }
-
}
+
textarea {
textarea {
-
    resize: vertical;
+
  resize: vertical; }
-
}
+
.browsehappy {
.browsehappy {
-
    margin: 0.2em 0;
+
  margin: 0.2em 0;
-
    background: #ccc;
+
  background: #ccc;
-
    color: #000;
+
  color: #000;
-
    padding: 0.2em 0;
+
  padding: 0.2em 0; }
-
}
+
-
 
+
/* ===== Initializr Styles ==================================================
/* ===== Initializr Styles ==================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */
   ========================================================================== */
-
 
body {
body {
-
    font: 16px/26px Helvetica, Helvetica Neue, Arial;
+
  font: 16px/26px Helvetica, Helvetica Neue, Arial; }
-
}
+
.wrapper {
.wrapper {
-
    width: 90%;
+
  width: 90%;
-
    margin: 0 5%;
+
  margin: 0 5%; }
-
}
+
/* ===================
/* ===================
     ALL: Orange Theme
     ALL: Orange Theme
   =================== */
   =================== */
-
 
.landing {
.landing {
-
    height: 500px;
+
  height: 580px; }
-
}
+
.header-container,
.header-container,
-
tainer,
+
main-container,
.main aside {
.main aside {
-
    background: white;
+
  background: white; }
-
}
+
.title {
.title {
-
    color: #888;
+
  color: #888; }
-
}
+
/* ==============
/* ==============
     MOBILE: Menu
     MOBILE: Menu
   ============== */
   ============== */
-
 
nav ul {
nav ul {
-
    margin: 0;
+
  margin: 0;
-
    padding: 0;
+
  padding: 0; }
-
}
+
nav a {
nav a {
-
    display: block;
+
  display: block;
-
    margin-bottom: 10px;
+
  margin-bottom: 10px;
-
    padding: 5px 0;
+
  padding: 5px 0;
-
 
+
  text-align: center;
-
    text-align: center;
+
  text-decoration: none;
-
    text-decoration: none;
+
  color: white;
-
 
+
  background: #888; }
-
    color: white;
+
-
    background: #888;
+
-
 
+
-
}
+
nav a:hover,
nav a:hover,
nav a:visited {
nav a:visited {
-
    color: white;
+
  color: white; }
-
}
+
nav a:hover {
nav a:hover {
-
    text-decoration: underline;
+
  text-decoration: underline; }
-
}
+
/* ==============
/* ==============
     MOBILE: Main
     MOBILE: Main
   ============== */
   ============== */
-
 
.main {
.main {
-
    padding: 30px 0;
+
  padding: 30px 0;
-
    background: white;
+
  background: white; }
-
}
+
.main article h1 {
.main article h1 {
-
    font-size: 2em;
+
  font-size: 2em; }
-
}
+
.main aside {
.main aside {
-
    color: black;
+
  color: black;
-
    padding: 0px 5% 10px;
+
  padding: 0px 5% 10px; }
-
}
+
.footer-container footer {
.footer-container footer {
-
    color: black;
+
  color: black;
-
    padding-top: 20px;
+
  padding-top: 20px;
-
    padding-bottom: 20px;
+
  padding-bottom: 20px;
-
    background: white;
+
  background: white; }
-
}
+
.footer-container {
.footer-container {
-
    background: white;
+
  background: white; }
-
}
+
.header-container {
 +
  position: relative;
 +
  top: 14px;
 +
  width: 1026px; }
-
.header-container{
 
-
    position: relative;
 
-
    top: 14px;
 
-
    width: 1026px;
 
-
}
 
/* ===============
/* ===============
     ALL: IE Fixes
     ALL: IE Fixes
   =============== */
   =============== */
-
 
.ie7 .title {
.ie7 .title {
-
    padding-top: 20px;
+
  padding-top: 20px; }
-
}
+
/* ==========================================================================
/* ==========================================================================
-
   Author's custom styles
+
   Helper classes
   ========================================================================== */
   ========================================================================== */
 +
.ir {
 +
  background-color: transparent;
 +
  border: 0;
 +
  overflow: hidden;
 +
  *text-indent: -9999px; }
-
.landing-container {
+
.ir:before {
-
    background-image: url("../img/bg.jpg");
+
  content: "";
-
    background-repeat: repeat;
+
  display: block;
-
    background-attachment: fixed;
+
  width: 0;
-
    margin-top: 14px;
+
  height: 150%; }
-
    width: 1026px;
+
-
}
+
-
h1, h2, h3, h4, h5, h6 {
+
.hidden {
-
    font-family: 'Flamenco', san-serif;
+
  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; }
-
.main-container{
+
.visuallyhidden.focusable:active,
-
    background: white;
+
.visuallyhidden.focusable:focus {
-
}
+
  clip: auto;
-
/* ==========================================================================
+
  height: auto;
-
    Remove default iGEM styling
+
  margin: 0;
-
  ========================================================================== */
+
  overflow: visible;
-
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear {display: none;}
+
  position: static;
 +
  width: auto; }
-
#top-section { /*-- styling for default menu bar (edit, page, history, etc.) --*/
+
.invisible {
-
    background-color: white;
+
  visibility: hidden; }
-
    border: 0 none;
+
-
    height: 14px;
+
-
    z-index: 100;
+
-
    top: 0;
+
-
    position: fixed;
+
-
    width: 1026px;
+
-
    left: 50%;
+
-
    margin-left: -513px;
+
-
    color: #333;
+
-
}
+
-
#top-section-bar { /*-- styling full width bar which hides behind default menu bar (edit, page, history, etc.) --*/
+
.clearfix:before,
-
    height: 14px;
+
.clearfix:after {
-
    display: none;
+
  content: " ";
-
    z-index: 10;
+
  display: table; }
-
    position: fixed;
+
-
    width: 100%;
+
-
    top: 0;
+
-
}
+
-
#top-section ul{
+
.clearfix:after {
-
    padding: 0;
+
  clear: both; }
-
}
+
-
#menubar a:link, #menubar a:active, #menubar a:visited, #menubar a:hover, #menubar:hover { /*-- styling for default menu bar links (edit, page, history, etc.) --*/
+
.clearfix {
-
    background-color: white;
+
  *zoom: 1; }
-
    text-decoration: none;
+
-
    color: #333;
+
-
}
+
-
body {
+
/* ==========================================================================
-
     background-color: #fff;
+
  Print styles
-
     font-family: 'Exo 2', 'Helvetica Neue' sans-serif;
+
  ========================================================================== */
-
     font-weight: 200;
+
@media print {
-
}
+
  * {
 +
     background: transparent !important;
 +
    color: #000 !important;
 +
     box-shadow: none !important;
 +
     text-shadow: none !important; }
-
#globalWrapper, #content { /*-- changes default wiki settings --*/
+
  a,
-
    width: 100%;
+
  a:visited {
-
     height: 100%;
+
     text-decoration: underline; }
-
    border: 0px;
+
-
    background-color: transparent;
+
-
    margin: 0px;
+
-
    padding: 0px;
+
-
    font-size: 100%;
+
-
}
+
-
#menubar {
+
  a[href]:after {
-
     top: -2px;
+
     content: " (" attr(href) ")"; }
-
}
+
-
ul{
+
  abbr[title]:after {
-
     line-height: 1em;
+
     content: " (" attr(title) ")"; }
-
}
+
-
html, body { /*-- changes default wiki settings --*/
+
  .ir a:after,
-
     height: 100%;
+
  a[href^="javascript:"]:after,
-
}
+
  a[href^="#"]:after {
 +
     content: ""; }
-
#contentcontainer { /*-- creates container for all content on page --*/
+
  pre,
-
    font-family: Arial, Helvetica, sans-serif;
+
  blockquote {
-
    font-weight: normal;
+
     border: 1px solid #999;
-
     font-size: 14px;
+
     page-break-inside: avoid; }
-
    color: #414141;
+
-
     width: 960px;
+
-
    margin-left: auto;
+
-
    margin-right: auto;
+
-
    background-color: #transparent;
+
-
    margin-top: 0px;
+
-
}
+
 +
  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; } }
/* ==========================================================================
/* ==========================================================================
-
   Media Queries
+
   Author's custom styles
   ========================================================================== */
   ========================================================================== */
-
/*
+
.landing-container {
-
@media only screen and (min-width: 480px) {
+
  background: #753473;
 +
  margin-top: 40px;
 +
  width: 100%;
 +
  -webkit-animation-delay: 0;
 +
  -webkit-animation-duration: 12s;
 +
  -webkit-animation-name: zoom-dark;
 +
  -webkit-animation-timing-function: linear;
 +
  -webkit-animation-iteration-count: infinite;
 +
  -moz-animation-delay: 0;
 +
  -moz-animation-duration: 12s;
 +
  -moz-animation-name: zoom-dark;
 +
  -moz-animation-timing-function: linear;
 +
  -moz-animation-iteration-count: infinite;
 +
  -o-animation-delay: 0;
 +
  -o-animation-duration: 12s;
 +
  -o-animation-name: zoom-dark;
 +
  -o-animation-timing-function: linear;
 +
  -o-animation-iteration-count: infinite;
 +
  animation-delay: 0;
 +
  animation-duration: 12s;
 +
  animation-name: zoom-dark;
 +
  animation-timing-function: linear;
 +
  animation-iteration-count: infinite; }
-
/* ====================
+
@-webkit-keyframes zoom-dark {
-
     INTERMEDIATE: Menu
+
  0% {
-
  ====================
+
     background: #753473; }
-
    nav a {
+
  10% {
-
        float: left;
+
    background: #854483; }
-
        width: 27%;
+
-
        margin: 0 1.7%;
+
-
        padding: 25px 2%;
+
-
        margin-bottom: 0;
+
-
    }
+
-
    nav li:first-child a {
+
  80% {
-
        margin-left: 0;
+
    background: #854483; }
-
    }
+
-
     nav li:last-child a {
+
  100% {
-
        margin-right: 0;
+
     background: #753473; } }
-
     }
+
@-moz-keyframes zoom-dark {
 +
  0% {
 +
     background: #753473; }
-
========================
+
  10% {
-
     INTERMEDIATE: IE Fixes
+
     background: #854483; }
-
  ========================
+
-
    nav ul li {
+
  80% {
-
        display: inline;
+
    background: #854483; }
-
    }
+
-
    .oldie nav a {
+
  100% {
-
        margin: 0 0.7%;
+
    background: #753473; } }
-
    }
+
@-o-keyframes zoom-dark {
-
}
+
  0% {
-
*/
+
    background: #753473; }
-
/*@media only screen and (min-width: 768px) {
+
-
/* ====================
+
  10% {
-
     WIDE: CSS3 Effects
+
     background: #854483; }
-
  ==================== */
+
 +
  80% {
 +
    background: #854483; }
-
/* ============
+
  100% {
-
     WIDE: Menu
+
     background: #753473; } }
-
  ============ */
+
@keyframes zoom-dark {
 +
  0% {
 +
    background: #753473; }
-
    .title {
+
  10% {
-
        float: left;
+
    background: #854483; }
-
    }
+
-
    nav {
+
  80% {
-
        float: right;
+
    background: #854483; }
-
        width: 100%;
+
-
    }
+
-
    nav a{
+
  100% {
-
        float: left;
+
    background: #753473; } }
-
        width: 11.429%;
+
@-webkit-keyframes zoom {
-
        margin: 0 1% 0 0;
+
  0% {
-
        padding: 5px 1%;
+
    opacity: 0.2; }
-
        margin-bottom: 0;
+
-
    }
+
-
    nav li:first-child a {
+
  20% {
-
        margin-left: 0;
+
    opacity: 0.05; }
-
    }
+
-
    nav li:last-child a {
+
  50% {
-
        margin-right: 0;
+
    opacity: 0.05; }
-
    }
+
-
/* ============
+
  60% {
-
     WIDE: Main
+
     opacity: 0.10; }
-
  ============ */
+
-
    .main article {
+
  70% {
-
        float: left;
+
    opacity: 0.2; } }
-
        width: 57%;
+
@-moz-keyframes zoom {
-
     }
+
  0% {
 +
     opacity: 0.2; }
-
    .main aside {
+
  20% {
-
        float: right;
+
    opacity: 0.05; }
-
        width: 28%;
+
-
    }
+
-
.wrapper {
+
  50% {
-
     width: 1000px; /* 1140px - 10% for margins - 13px for padding */
+
     opacity: 0.05; }
-
    margin: 0 auto;
+
-
    padding: 0 13px;
+
-
}
+
-
@media only screen and (min-width: 1140px) {
+
  60% {
 +
    opacity: 0.10; }
-
/* ===============
+
  70% {
-
     Maximal Width
+
     opacity: 0.2; } }
-
  =============== */
+
@-o-keyframes zoom {
 +
  0% {
 +
    opacity: 0.2; }
-
  .header-container {
+
  20% {
-
      position: fixed;
+
    opacity: 0.05; }
-
      top:14px;
+
-
      width: 100%;
+
-
  }
+
-
  .landing-container{
+
-
      margin-top: 40px;
+
-
      width: 100%
+
-
  }
+
-
}
+
 +
  50% {
 +
    opacity: 0.05; }
-
/* ==========================================================================
+
  60% {
-
  Helper classes
+
    opacity: 0.10; }
-
  ========================================================================== */
+
-
.ir {
+
  70% {
-
     background-color: transparent;
+
     opacity: 0.2; } }
-
    border: 0;
+
@keyframes zoom {
-
     overflow: hidden;
+
  0% {
-
    *text-indent: -9999px;
+
     opacity: 0.2; }
-
}
+
-
.ir:before {
+
  20% {
-
     content: "";
+
     opacity: 0.05; }
-
    display: block;
+
-
    width: 0;
+
-
    height: 150%;
+
-
}
+
-
.hidden {
+
  50% {
-
     display: none !important;
+
     opacity: 0.05; }
-
    visibility: hidden;
+
-
}
+
-
.visuallyhidden {
+
  60% {
-
     border: 0;
+
     opacity: 0.10; }
-
    clip: rect(0 0 0 0);
+
-
    height: 1px;
+
-
    margin: -1px;
+
-
    overflow: hidden;
+
-
    padding: 0;
+
-
    position: absolute;
+
-
    width: 1px;
+
-
}
+
-
.visuallyhidden.focusable:active,
+
  70% {
-
.visuallyhidden.focusable:focus {
+
     opacity: 0.2; } }
-
     clip: auto;
+
#dots path {
-
    height: auto;
+
  /*fill: #753473; */
-
    margin: 0;
+
  fill: #ccc;
-
    overflow: visible;
+
  opacity: 0.2; }
-
    position: static;
+
-
    width: auto;
+
-
}
+
-
.invisible {
+
#dots .dot-one {
-
    visibility: hidden;
+
  /*fill: #702968;*/
-
}
+
  -webkit-animation-delay: 0;
 +
  -webkit-animation-duration: 6s;
 +
  -webkit-animation-name: zoom;
 +
  -webkit-animation-timing-function: linear;
 +
  -webkit-animation-iteration-count: infinite;
 +
  -moz-animation-delay: 0;
 +
  -moz-animation-duration: 6s;
 +
  -moz-animation-name: zoom;
 +
  -moz-animation-timing-function: linear;
 +
  -moz-animation-iteration-count: infinite;
 +
  -o-animation-delay: 0;
 +
  -o-animation-duration: 6s;
 +
  -o-animation-name: zoom;
 +
  -o-animation-timing-function: linear;
 +
  -o-animation-iteration-count: infinite;
 +
  animation-delay: 0;
 +
  animation-duration: 6s;
 +
  animation-name: zoom;
 +
  animation-timing-function: linear;
 +
  animation-iteration-count: infinite; }
-
.clearfix:before,
+
#dots .dot-two {
-
.clearfix:after {
+
  -webkit-animation-delay: 0;
-
    content: " ";
+
  -webkit-animation-duration: 3s;
-
    display: table;
+
  -webkit-animation-name: zoom;
-
}
+
  -webkit-animation-timing-function: linear;
 +
  -webkit-animation-iteration-count: infinite;
 +
  -moz-animation-delay: 0;
 +
  -moz-animation-duration: 3s;
 +
  -moz-animation-name: zoom;
 +
  -moz-animation-timing-function: linear;
 +
  -moz-animation-iteration-count: infinite;
 +
  -o-animation-delay: 0;
 +
  -o-animation-duration: 3s;
 +
  -o-animation-name: zoom;
 +
  -o-animation-timing-function: linear;
 +
  -o-animation-iteration-count: infinite;
 +
  animation-delay: 0;
 +
  animation-duration: 3s;
 +
  animation-name: zoom;
 +
  animation-timing-function: linear;
 +
  animation-iteration-count: infinite; }
-
.clearfix:after {
+
#dots .dot-three {
-
    clear: both;
+
  -webkit-animation-delay: 0;
-
}
+
  -webkit-animation-duration: 4s;
 +
  -webkit-animation-name: zoom;
 +
  -webkit-animation-timing-function: linear;
 +
  -webkit-animation-iteration-count: infinite;
 +
  -moz-animation-delay: 0;
 +
  -moz-animation-duration: 4s;
 +
  -moz-animation-name: zoom;
 +
  -moz-animation-timing-function: linear;
 +
  -moz-animation-iteration-count: infinite;
 +
  -o-animation-delay: 0;
 +
  -o-animation-duration: 4s;
 +
  -o-animation-name: zoom;
 +
  -o-animation-timing-function: linear;
 +
  -o-animation-iteration-count: infinite;
 +
  animation-delay: 0;
 +
  animation-duration: 4s;
 +
  animation-name: zoom;
 +
  animation-timing-function: linear;
 +
  animation-iteration-count: infinite; }
-
.clearfix {
+
#dots .dot-four {
-
    *zoom: 1;
+
  -webkit-animation-delay: 0;
-
}
+
  -webkit-animation-duration: 12s;
 +
  -webkit-animation-name: zoom;
 +
  -webkit-animation-timing-function: linear;
 +
  -webkit-animation-iteration-count: infinite;
 +
  -moz-animation-delay: 0;
 +
  -moz-animation-duration: 12s;
 +
  -moz-animation-name: zoom;
 +
  -moz-animation-timing-function: linear;
 +
  -moz-animation-iteration-count: infinite;
 +
  -o-animation-delay: 0;
 +
  -o-animation-duration: 12s;
 +
  -o-animation-name: zoom;
 +
  -o-animation-timing-function: linear;
 +
  -o-animation-iteration-count: infinite;
 +
  animation-delay: 0;
 +
  animation-duration: 12s;
 +
  animation-name: zoom;
 +
  animation-timing-function: linear;
 +
  animation-iteration-count: infinite; }
 +
 
 +
h1, h2, h3, h4, h5, h6 {
 +
  font-family: 'Flamenco', san-serif; }
 +
 
 +
.main-container {
 +
  background: white; }
/* ==========================================================================
/* ==========================================================================
-
  Print styles
+
    Remove default iGEM styling
   ========================================================================== */
   ========================================================================== */
 +
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading, .visualClear {
 +
  display: none; }
-
@media print {
+
#top-section {
-
    * {
+
  /*-- styling for default menu bar (edit, page, history, etc.) --*/
-
        background: transparent !important;
+
  background-color: white;
-
        color: #000 !important;
+
  border: 0 none;
-
        box-shadow: none !important;
+
  height: 14px;
-
        text-shadow: none !important;
+
  z-index: 100;
-
    }
+
  top: 0;
 +
  position: fixed;
 +
  width: 1026px;
 +
  left: 50%;
 +
  margin-left: -513px;
 +
  color: #333; }
-
    a,
+
#top-section-bar {
-
    a:visited {
+
  /*-- styling full width bar which hides behind default menu bar (edit, page, history, etc.) --*/
-
        text-decoration: underline;
+
  height: 14px;
-
    }
+
  display: none;
 +
  z-index: 10;
 +
  position: fixed;
 +
  width: 100%;
 +
  top: 0; }
-
    a[href]:after {
+
#top-section ul {
-
        content: " (" attr(href) ")";
+
  padding: 0; }
-
    }
+
-
    abbr[title]:after {
+
#menubar a:link, #menubar a:active, #menubar a:visited, #menubar a:hover, #menubar:hover {
-
        content: " (" attr(title) ")";
+
  /*-- styling for default menu bar links (edit, page, history, etc.) --*/
-
    }
+
  background-color: white;
 +
  text-decoration: none;
 +
  color: #333; }
-
    .ir a:after,
+
body {
-
    a[href^="javascript:"]:after,
+
  background-color: #fff;
-
    a[href^="#"]:after {
+
  font-family: 'Exo 2', 'Helvetica Neue' sans-serif;
-
        content: "";
+
  font-weight: 200; }
-
    }
+
-
    pre,
+
#globalWrapper, #content {
-
    blockquote {
+
  width: 100%;
-
        border: 1px solid #999;
+
  height: 100%;
-
        page-break-inside: avoid;
+
  border: 0px;
-
    }
+
  background-color: transparent;
 +
  margin: 0px;
 +
  padding: 0px;
 +
  font-size: 100%; }
-
    thead {
+
#menubar {
-
        display: table-header-group;
+
  top: -2px; }
-
    }
+
-
    tr,
+
ul {
-
    img {
+
  line-height: 1em; }
-
        page-break-inside: avoid;
+
-
    }
+
-
    img {
+
html, body {
-
        max-width: 100% !important;
+
  /*-- changes default wiki settings --*/
-
    }
+
  height: 100%; }
-
    @page {
+
#contentcontainer {
-
        margin: 0.5cm;
+
  /*-- 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; }
-
    p,
+
.title {
-
    h2,
+
  float: left; }
-
    h3 {
+
-
        orphans: 3;
+
-
        widows: 3;
+
-
    }
+
-
    h2,
+
nav {
-
    h3 {
+
  float: right;
-
        page-break-after: avoid;
+
  width: 100%; }
-
     }
+
 
-
}
+
nav a {
 +
  float: left;
 +
  width: 11.429%;
 +
  margin: 0 1% 0 0;
 +
  padding: 5px 1%;
 +
  margin-bottom: 0; }
 +
 
 +
nav li:first-child a {
 +
  margin-left: 0; }
 +
 
 +
nav li:last-child a {
 +
  margin-right: 0; }
 +
 
 +
/* ============
 +
     WIDE: Main
 +
  ============ */
 +
.main article {
 +
  float: left;
 +
  width: 57%; }
 +
 
 +
.main aside {
 +
  float: right;
 +
  width: 28%; }
 +
 
 +
.wrapper {
 +
  width: 1000px;
 +
  /* 1140px - 10% for margins - 13px for padding */
 +
  margin: 0 auto;
 +
  padding: 0 13px; }
 +
 
 +
@media only screen and (min-width: 1000px) {
 +
  /* ===============
 +
      Maximal Width
 +
    =============== */
 +
  .header-container {
 +
    position: fixed;
 +
    top: 14px;
 +
    width: 100%; } }
</style>
</style>
</head>
</head>
</html>
</html>

Revision as of 19:07, 30 July 2014

Retrieved from "http://2014.igem.org/Team:UCSF_UCB/CSS"