Team:UCSF UCB/CSS

From 2014.igem.org

(Difference between revisions)
m
Line 1: Line 1:
<html>
<html>
<head>
<head>
-
<style> /*! normalize.css v1.1.3 | MIT License | git.io/normalize */
+
<style> /*
 +
### Colors
 +
Gray: #3D4C53
 +
Green: #98C000
 +
Red: #EA2E49
 +
Yellow: #FFE11A
 +
Blue: #0CDBE8
 +
*/
 +
/*! normalize.css v1.1.3 | MIT License | git.io/normalize */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
   display: block; }
   display: block; }
Line 250: Line 258:
   ========================================================================== */
   ========================================================================== */
body {
body {
-
   font: 16px/26px Helvetica, Helvetica Neue, Arial; }
+
   font: 16px/26px Helvetica Neue, Helvetica, Arial;
 +
  font-weight: 200; }
.wrapper {
.wrapper {
Line 259: Line 268:
     ALL: Orange Theme
     ALL: Orange Theme
   =================== */
   =================== */
-
.landing {
 
-
  height: 580px; }
 
-
 
.header-container,
.header-container,
main-container,
main-container,
Line 276: Line 282:
   margin: 0;
   margin: 0;
   padding: 0; }
   padding: 0; }
-
 
-
nav a {
 
-
  display: block;
 
-
  margin-bottom: 10px;
 
-
  padding: 5px 0;
 
-
  text-align: center;
 
-
  text-decoration: none;
 
-
  color: white;
 
-
  background: #888; }
 
-
 
-
nav a:hover,
 
-
nav a:visited {
 
-
  color: white; }
 
-
 
-
nav a:hover {
 
-
  text-decoration: underline; }
 
/* ==============
/* ==============
Line 308: Line 298:
.footer-container footer {
.footer-container footer {
-
  color: black;
 
   padding-top: 20px;
   padding-top: 20px;
-
   padding-bottom: 20px;
+
   padding-bottom: 20px; }
-
  background: white; }
+
.footer-container {
.footer-container {
   background: white; }
   background: white; }
-
 
-
.header-container {
 
-
  position: relative;
 
-
  top: 14px;
 
-
  width: 1026px; }
 
/* ===============
/* ===============
Line 434: Line 417:
   ========================================================================== */
   ========================================================================== */
.landing-container {
.landing-container {
-
   background: #753473;
+
   background: #3D4C53;
-
  margin-top: 40px;
+
   width: 1026px;
-
   width: 100%;
+
   -webkit-animation: zoom-dark, 12s, 0, linear, infinite;
-
   -webkit-animation-delay: 0;
+
   -moz-animation: zoom-dark, 12s, 0, linear, infinite;
-
  -webkit-animation-duration: 12s;
+
   animation: zoom-dark, 12s, 0, linear, infinite;
-
  -webkit-animation-name: zoom-dark;
+
   position: relative; }
-
  -webkit-animation-timing-function: linear;
+
 
-
  -webkit-animation-iteration-count: infinite;
+
.landing {
-
   -moz-animation-delay: 0;
+
   height: 550px; }
-
  -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 {
@-webkit-keyframes zoom-dark {
   0% {
   0% {
-
     background: #753473; }
+
     background: #3D4C53; }
-
 
+
   10% {
   10% {
-
     background: #854483; }
+
     background: #3D4C53; }
-
 
+
   20% {
-
   80% {
+
     background: #4e5d64; }
-
     background: #854483; }
+
  90% {
-
 
+
    background: #4e5d64; }
   100% {
   100% {
-
     background: #753473; } }
+
     background: #3D4C53; } }
@-moz-keyframes zoom-dark {
@-moz-keyframes zoom-dark {
   0% {
   0% {
-
     background: #753473; }
+
     background: #3D4C53; }
-
 
+
   10% {
   10% {
-
     background: #854483; }
+
     background: #3D4C53; }
-
 
+
   20% {
-
   80% {
+
     background: #4e5d64; }
-
     background: #854483; }
+
  90% {
-
 
+
    background: #4e5d64; }
   100% {
   100% {
-
     background: #753473; } }
+
     background: #3D4C53; } }
-
@-o-keyframes zoom-dark {
+
-
  0% {
+
-
    background: #753473; }
+
-
 
+
-
  10% {
+
-
    background: #854483; }
+
-
 
+
-
  80% {
+
-
    background: #854483; }
+
-
 
+
-
  100% {
+
-
    background: #753473; } }
+
@keyframes zoom-dark {
@keyframes zoom-dark {
   0% {
   0% {
-
     background: #753473; }
+
     background: #3D4C53; }
-
 
+
   10% {
   10% {
-
     background: #854483; }
+
     background: #3D4C53; }
-
 
+
   20% {
-
   80% {
+
     background: #4e5d64; }
-
     background: #854483; }
+
  90% {
-
 
+
    background: #4e5d64; }
   100% {
   100% {
-
     background: #753473; } }
+
     background: #3D4C53; } }
@-webkit-keyframes zoom {
@-webkit-keyframes zoom {
   0% {
   0% {
-
     opacity: 0.2; }
+
     opacity: 0.4; }
-
 
+
  50% {
-
   20% {
+
    opacity: 0.4; }
 +
   60% {
     opacity: 0.05; }
     opacity: 0.05; }
-
 
+
   90% {
-
   50% {
+
     opacity: 0.05; }
     opacity: 0.05; }
-
 
+
   100% {
-
  60% {
+
     opacity: 0.4; } }
-
    opacity: 0.10; }
+
-
 
+
-
   70% {
+
-
     opacity: 0.2; } }
+
@-moz-keyframes zoom {
@-moz-keyframes zoom {
   0% {
   0% {
-
     opacity: 0.2; }
+
     opacity: 0.4; }
-
 
+
-
  20% {
+
-
    opacity: 0.05; }
+
-
 
+
   50% {
   50% {
-
     opacity: 0.05; }
+
     opacity: 0.4; }
-
 
+
   60% {
   60% {
-
    opacity: 0.10; }
 
-
 
-
  70% {
 
-
    opacity: 0.2; } }
 
-
@-o-keyframes zoom {
 
-
  0% {
 
-
    opacity: 0.2; }
 
-
 
-
  20% {
 
     opacity: 0.05; }
     opacity: 0.05; }
-
 
+
   90% {
-
   50% {
+
     opacity: 0.05; }
     opacity: 0.05; }
-
 
+
   100% {
-
  60% {
+
     opacity: 0.4; } }
-
    opacity: 0.10; }
+
-
 
+
-
   70% {
+
-
     opacity: 0.2; } }
+
@keyframes zoom {
@keyframes zoom {
   0% {
   0% {
-
     opacity: 0.2; }
+
     opacity: 0.4; }
-
 
+
-
  20% {
+
-
    opacity: 0.05; }
+
-
 
+
   50% {
   50% {
-
     opacity: 0.05; }
+
     opacity: 0.4; }
-
 
+
   60% {
   60% {
-
     opacity: 0.10; }
+
     opacity: 0.05; }
 +
  90% {
 +
    opacity: 0.05; }
 +
  100% {
 +
    opacity: 0.4; } }
 +
@-webkit-keyframes petri-zoom {
 +
  0% {
 +
    opacity: 0.4; }
 +
  10% {
 +
    opacity: 0.4; }
 +
  20% {
 +
    opacity: 0.1; }
 +
  90% {
 +
    opacity: 0.1; }
 +
  100% {
 +
    opacity: 0.4; } }
 +
@-moz-keyframes petri-zoom {
 +
  0% {
 +
    opacity: 0.4; }
 +
  10% {
 +
    opacity: 0.4; }
 +
  20% {
 +
    opacity: 0.1; }
 +
  90% {
 +
    opacity: 0.1; }
 +
  100% {
 +
    opacity: 0.4; } }
 +
@keyframes petri-zoom {
 +
  0% {
 +
    opacity: 0.4; }
 +
  10% {
 +
    opacity: 0.4; }
 +
  20% {
 +
    opacity: 0.1; }
 +
  90% {
 +
    opacity: 0.1; }
 +
  100% {
 +
    opacity: 0.4; } }
 +
#petri-dots {
 +
  position: relative;
 +
  top: 50px;
 +
  left: 20px; }
-
  70% {
+
#landing-dots path {
-
    opacity: 0.2; } }
+
-
#dots path {
+
   /*fill: #753473;  */
   /*fill: #753473;  */
-
   fill: #ccc;
+
   fill: #bbb;
   opacity: 0.2; }
   opacity: 0.2; }
-
#dots .dot-one {
+
#landing-dots .dot-one {
   /*fill: #702968;*/
   /*fill: #702968;*/
   -webkit-animation-delay: 0;
   -webkit-animation-delay: 0;
Line 594: Line 559:
   animation-iteration-count: infinite; }
   animation-iteration-count: infinite; }
-
#dots .dot-two {
+
#landing-dots .dot-two {
   -webkit-animation-delay: 0;
   -webkit-animation-delay: 0;
   -webkit-animation-duration: 3s;
   -webkit-animation-duration: 3s;
Line 616: Line 581:
   animation-iteration-count: infinite; }
   animation-iteration-count: infinite; }
-
#dots .dot-three {
+
#landing-dots .dot-three {
   -webkit-animation-delay: 0;
   -webkit-animation-delay: 0;
   -webkit-animation-duration: 4s;
   -webkit-animation-duration: 4s;
Line 638: Line 603:
   animation-iteration-count: infinite; }
   animation-iteration-count: infinite; }
-
#dots .dot-four {
+
#landing-dots .dot-four {
   -webkit-animation-delay: 0;
   -webkit-animation-delay: 0;
   -webkit-animation-duration: 12s;
   -webkit-animation-duration: 12s;
Line 660: Line 625:
   animation-iteration-count: infinite; }
   animation-iteration-count: infinite; }
 +
#landing-petri ellipse {
 +
  -webkit-animation-delay: 0;
 +
  -webkit-animation-duration: 12s;
 +
  -webkit-animation-name: petri-zoom;
 +
  -webkit-animation-timing-function: linear;
 +
  -webkit-animation-iteration-count: infinite;
 +
  -moz-animation-delay: 0;
 +
  -moz-animation-duration: 12s;
 +
  -moz-animation-name: petri-zoom;
 +
  -moz-animation-timing-function: linear;
 +
  -moz-animation-iteration-count: infinite;
 +
  -o-animation-delay: 0;
 +
  -o-animation-duration: 12s;
 +
  -o-animation-name: petri-zoom;
 +
  -o-animation-timing-function: linear;
 +
  -o-animation-iteration-count: infinite;
 +
  animation-delay: 0;
 +
  animation-duration: 12s;
 +
  animation-name: petri-zoom;
 +
  animation-timing-function: linear;
 +
  animation-iteration-count: infinite; }
 +
 +
.landing #Title {
 +
  width: 500px;
 +
  height: 450px;
 +
  padding: 50px 0;
 +
  float: left;
 +
  color: white; }
 +
 +
.landing #Title h1 {
 +
  font-size: 2.5em;
 +
  line-height: 1em; }
 +
 +
.notebooks-container {
 +
  background: #FFE11A;
 +
  width: 1026px;
 +
  position: relative; }
 +
 +
.notebooks-container .menu a {
 +
  color: black; }
 +
 +
.notebooks-container .menu a h2 {
 +
  border: 1px black solid; }
 +
 +
.notebooks-container .menu a:hover h2 {
 +
  border: 1px #FFE11A solid; }
 +
 +
.notebooks-container h1, .notebooks-container h2 {
 +
  color: black !important; }
 +
 +
.notebooks-container h1 {
 +
  text-shadow: -1px 1px 0 white !important; }
 +
 +
.notebooks-container .menu a:visited {
 +
  color: black; }
 +
 +
.notebooks-container .menu a .down, .notebooks-container .menu a .up {
 +
  stroke: black; }
 +
 +
.multi-container aside {
 +
  float: left;
 +
  padding: 100px 0px;
 +
  margin: 20px 0;
 +
  width: 220px;
 +
  height: 400px;
 +
  text-align: right; }
 +
 +
.multi-container aside h3 {
 +
  padding: 0 10px; }
 +
 +
.multi-container article {
 +
  width: 758px;
 +
  height: 598px;
 +
  overflow: auto;
 +
  float: right;
 +
  padding: 0 10px;
 +
  margin: 20px 0;
 +
  border: 1px black solid; }
 +
 +
.multi-container .main .hidden {
 +
  display: none; }
 +
 +
.multi-container article.show {
 +
  display: block; }
 +
 +
.multi-container ul li .active {
 +
  background: #FFE11A;
 +
  font-weight: 500; }
 +
 +
.multi-container aside ul {
 +
  list-style: none;
 +
  width: 220px;
 +
  height: 300px;
 +
  padding: 0;
 +
  margin: 0; }
 +
 +
.multi-container aside li a {
 +
  color: black;
 +
  text-decoration: none;
 +
  display: block;
 +
  padding: 5px 10px;
 +
  border-top: 1px solid black;
 +
  border-left: 1px solid black; }
 +
 +
.multi-container aside li:last-child a {
 +
  border-bottom: 1px solid black; }
 +
 +
.multi-container aside li a:hover {
 +
  background: #FFE11A; }
 +
 +
.multi-container #member-select header {
 +
  font-family: Ostrich, sans-serif;
 +
  font-size: 32px;
 +
  padding: 110px 0; }
 +
 +
.multi-container #member-select header svg {
 +
  width: 32px;
 +
  height: 32px;
 +
  fill: none;
 +
  stroke: black;
 +
  stroke-width: 1px;
 +
  position: relative;
 +
  top: 4px; }
 +
 +
#protocols aside {
 +
  float: right;
 +
  text-align: left; }
 +
 +
#protocols aside li a {
 +
  border-left: none;
 +
  border-right: 1px solid black; }
 +
 +
#protocols #member-select header {
 +
  float: right; }
 +
 +
#protocols table,
 +
#notebooks table {
 +
  padding: 0;
 +
  border-collapse: collapse; }
 +
#protocols table tr,
 +
#notebooks table tr {
 +
  border-top: 1px solid #cccccc;
 +
  background-color: white;
 +
  margin: 0;
 +
  padding: 0; }
 +
#protocols table tr:nth-child(2n),
 +
#notebooks table tr:nth-child(2n) {
 +
  background-color: #f8f8f8; }
 +
#protocols table tr th,
 +
#notebooks table tr th {
 +
  font-weight: bold;
 +
  border: 1px solid #cccccc;
 +
  margin: 0;
 +
  padding: 6px 13px; }
 +
#protocols table tr td,
 +
#notebooks table tr td {
 +
  border: 1px solid #cccccc;
 +
  margin: 0;
 +
  padding: 6px 13px; }
 +
#protocols table tr th :first-child, #protocols table tr td :first-child,
 +
#notebooks table tr th :first-child,
 +
#notebooks table tr td :first-child {
 +
  margin-top: 0; }
 +
#protocols table tr th :last-child, #protocols table tr td :last-child,
 +
#notebooks table tr th :last-child,
 +
#notebooks table tr td :last-child {
 +
  margin-bottom: 0; }
 +
#protocols code, #protocols tt,
 +
#notebooks code,
 +
#notebooks tt {
 +
  margin: 0 2px;
 +
  padding: 0 5px;
 +
  white-space: nowrap;
 +
  border: 1px solid #eaeaea;
 +
  background-color: #f8f8f8;
 +
  border-radius: 3px; }
 +
#protocols pre code,
 +
#notebooks pre code {
 +
  margin: 0;
 +
  padding: 0;
 +
  white-space: pre;
 +
  border: none;
 +
  background: transparent; }
 +
#protocols .highlight pre,
 +
#notebooks .highlight pre {
 +
  background-color: #f8f8f8;
 +
  border: 1px solid #cccccc;
 +
  font-size: 13px;
 +
  line-height: 19px;
 +
  overflow: auto;
 +
  padding: 6px 10px;
 +
  border-radius: 3px; }
 +
#protocols pre,
 +
#notebooks pre {
 +
  background-color: #f8f8f8;
 +
  border: 1px solid #cccccc;
 +
  font-size: 13px;
 +
  line-height: 19px;
 +
  overflow: auto;
 +
  padding: 6px 10px;
 +
  border-radius: 3px; }
 +
#protocols pre code, #protocols pre tt,
 +
#notebooks pre code,
 +
#notebooks pre tt {
 +
  background-color: transparent;
 +
  border: none; }
 +
 +
.team-container {
 +
  background: #0CDBE8;
 +
  width: 1026px;
 +
  margin-bottom: 10px; }
 +
 +
.team-container .menu a:hover h2 {
 +
  border: 1px #0CDBE8 solid; }
 +
 +
#attributions article, #team-members .member, #advisors .member {
 +
  width: 95%;
 +
  margin: 0 auto;
 +
  /*  border: 1px $Gray solid; */
 +
  margin-top: 10px; }
 +
  #attributions article .name, #team-members .member .name, #advisors .member .name {
 +
    font-weight: 500; }
 +
  #attributions article p:first-letter, #team-members .member p:first-letter, #advisors .member p:first-letter {
 +
    float: left;
 +
    font-size: 60px;
 +
    line-height: 45px;
 +
    padding-top: 4px;
 +
    padding-left: 3px;
 +
    padding-left: 3px;
 +
    font-family: Ostrich; }
 +
  #attributions article p, #team-members .member p, #advisors .member p {
 +
    padding-bottom: 5px; }
 +
 +
#attributions .right, #team-members .right, #advisors .right {
 +
  float: right;
 +
  width: 50%; }
 +
#attributions .left, #team-members .left, #advisors .left {
 +
  float: left;
 +
  width: 50%; }
 +
#attributions p, #team-members p, #advisors p {
 +
  margin: 5px; }
 +
#attributions img, #team-members img, #advisors img {
 +
  float: right;
 +
  padding: 5px;
 +
  margin: 0 0 0 5px;
 +
  border: 1px solid #3D4C53; }
 +
 +
.project-container {
 +
  background: #3D4C53;
 +
  width: 1024px; }
 +
 +
.project-container .menu a:hover h2 {
 +
  border: 1px #3D4C53 solid; }
 +
 +
.hp-container {
 +
  background: #EA2E49;
 +
  width: 1024px; }
 +
 +
.hp-container .menu a:hover h2 {
 +
  border: 1px #EA2E49 solid; }
 +
 +
.models-container {
 +
  background: #98C000;
 +
  width: 1024px; }
 +
 +
.models-container .menu a:hover h2 {
 +
  border: 1px #98C000 solid; }
 +
 +
@font-face {
 +
  font-family: Ostrich;
 +
  src: url(OstrichSans-Black.otf); }
h1, h2, h3, h4, h5, h6 {
h1, h2, h3, h4, h5, h6 {
-
   font-family: 'Flamenco', san-serif; }
+
   font-family: 'Ostrich', san-serif; }
.main-container {
.main-container {
   background: white; }
   background: white; }
 +
 +
.header-container {
 +
  width: 1026px;
 +
  position: relative;
 +
  margin-top: 14px;
 +
  background: #efefef; }
 +
 +
.header-container h1 {
 +
  float: left;
 +
  margin: 0;
 +
  padding: 14px 0; }
 +
 +
.header-container h1 a {
 +
  text-decoration: none;
 +
  color: Black;
 +
  display: block;
 +
  background: white;
 +
  padding-right: 40px;
 +
  position: relative;
 +
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ijk1LjUgMTEwLjUgMzMgMjkiPiA8cGF0aCBmaWxsID0gIiM2NjYiIGQ9Ik0xMjcuMjM1IDEyNi44MzRsLTE1LjA1Mi0xNS4wNTVjLTAuMTc5LTAuMTc5LTAuNDIyLTAuMjc5LTAuNjc0LTAuMjc5Yy0wLjI1MyAwLTAuNDk2IDAuMS0wLjY3NCAwLjI3OUw5NS43OCAxMjYuOCBjLTAuMzczIDAuMzcyLTAuMzczIDEgMCAxLjM0OGMwLjM3MiAwLjQgMC45IDAuNCAxLjIgMGwyLjg4MS0zLjAwMXYxMS45MjRjMCAwLjUgMC43IDEuMiAxLjIgMS4xOTFoNi42NjMgaDcuNjI2aDYuNjgzYzAuNTI3IDAgMC43MTUtMC42NjUgMC43MTUtMS4xOTFWMTI1LjNsMyAyLjg4MWMwLjE4OCAwLjIgMC41IDAuMyAwLjcgMC4yNzlzMC41MTgtMC4wOTMgMC43MDMtMC4yNzkgQzEyNy41NzkgMTI3LjggMTI3LjYgMTI3LjIgMTI3LjIgMTI2LjgzNHogTTExNC4xODkgMTM2LjM5aC01Ljcydi02LjQzNWMwLTAuNzg5IDAuODctMS4xOTIgMS42NTgtMS4xOTJoMi44NTkgYzAuNzg5IDAgMS4yIDAuNCAxLjIgMS4xOTJMMTE0LjE4OSAxMzYuMzlMMTE0LjE4OSAxMzYuMzl6IE0xMjAuODYyIDEzNi4zOWgtNC43NjZ2LTYuNDM1YzAtMS44NC0xLjI3LTMuMDk5LTMuMTA5LTMuMDk5IGgtMi44NTljLTEuODQgMC0zLjU2NCAxLjI1OS0zLjU2NCAzLjA5OXY2LjQzNWgtNC43Njd2LTEzLjEwOGMwLTAuMDAyIDAuMTE4LTAuMDA0IDAuMTE4LTAuMDA3bDkuNDE0LTkuNDc0bDkuNTMzIDkuNTkyVjEzNi4zOXoiLz4gPC9zdmc+);
 +
  background-position: 999px 0px;
 +
  background-repeat: no-repeat;
 +
  background-size: 30px 30px; }
 +
 +
.header-container h1 a:hover {
 +
  background-position: 165px 65px; }
 +
 +
.header-container h1 a:active {
 +
  background-position: 165px 65px;
 +
  top: 1px; }
.title {
.title {
Line 671: Line 937:
nav {
nav {
   float: right;
   float: right;
-
   width: 100%; }
+
   width: 600px; }
nav a {
nav a {
-
   float: left;
+
   padding: 50px 10px;
-
   width: 11.429%;
+
  text-align: center;
-
   margin: 0 1% 0 0;
+
  text-decoration: none;
-
   padding: 5px 1%;
+
  color: black;
-
   margin-bottom: 0; }
+
   width: 80px;
 +
  height: 20px;
 +
  display: block; }
 +
 
 +
nav a:hover, nav .on-page {
 +
  color: #fff;
 +
   text-shadow: 0 0 2px #222; }
 +
 
 +
nav a:active {
 +
   top: 1px;
 +
   position: relative; }
 +
 
 +
nav .project a:hover, nav .project .on-page {
 +
  background: #3D4C53; }
 +
 
 +
nav .models a:hover, nav .models .on-page {
 +
  background: #98C000; }
 +
 
 +
nav .hp a:hover, nav .hp .on-page {
 +
  background: #EA2E49; }
 +
 
 +
nav .notebooks a:hover, nav .notebooks .on-page {
 +
  background: #FFE11A; }
 +
 
 +
nav .team a:hover, nav .team .on-page {
 +
  background: #0CDBE8; }
 +
 
 +
nav .judging a:hover, nav .judging .on-page {
 +
  background: #707f86; }
 +
 
 +
nav .igem a {
 +
  padding: 35px 10px; }
 +
 
 +
nav .igem a:hover .cogs {
 +
  fill: #98C000;
 +
  stroke: none; }
 +
 
 +
nav li {
 +
  width: 100px;
 +
  float: left; }
nav li:first-child a {
nav li:first-child a {
Line 708: Line 1,013:
     =============== */
     =============== */
   .header-container {
   .header-container {
-
     position: fixed;
+
     width: 100%; }
-
    top: 14px;
+
 
 +
  .landing-container, .notebooks-container, .team-container, .hp-container, .models-container, .project-container {
     width: 100%; } }
     width: 100%; } }
/* ==========================================================================
/* ==========================================================================
Line 749: Line 1,055:
body {
body {
-
   background-color: #fff;
+
   background-color: #fff; }
-
  font-family: 'Exo 2', 'Helvetica Neue' sans-serif;
+
-
  font-weight: 200; }
+
#globalWrapper, #content {
#globalWrapper, #content {
Line 789: Line 1,093:
   background: transparent;
   background: transparent;
   line-height: 1em; }
   line-height: 1em; }
 +
 +
.menu h1, .menu h2 {
 +
  float: left;
 +
  height: 26px;
 +
  margin: 16px 35px 16px 0;
 +
  padding: 0 5px;
 +
  position: relative;
 +
  color: white; }
 +
 +
.menu h1 {
 +
  text-shadow: -1px 1px 0 black; }
 +
 +
.menu a h2 {
 +
  border: 1px white solid; }
 +
 +
.menu a {
 +
  text-decoration: none;
 +
  display: block;
 +
  color: white; }
 +
 +
.menu a:hover h2 {
 +
  border: 1px white solid; }
 +
 +
.menu a .down, .menu a .up {
 +
  display: inline-block;
 +
  width: 32px;
 +
  height: 32px;
 +
  position: absolute;
 +
  top: -9999px;
 +
  right: 0;
 +
  stroke: white;
 +
  stroke-width: 1.1px;
 +
  fill: none; }
 +
 +
.menu a:hover .down {
 +
  top: 16px; }
 +
 +
.menu a:hover .up {
 +
  top: -22px; }
 +
 +
.menu a:active {
 +
  top: 1px;
 +
  position: relative; }
 +
 +
.footer-container {
 +
  margin-top: 20px;
 +
  background: #3D4C53; }
 +
 +
footer {
 +
  color: white;
 +
  background: #3D4C53; }
 +
 +
footer h3 {
 +
  float: left; }
 +
 +
footer #sitemap .page a, footer #sitemap li .sections a {
 +
  color: #707f86;
 +
  text-decoration: none; }
 +
 +
footer #sitemap {
 +
  list-style: none;
 +
  padding: 0; }
 +
 +
footer #sitemap .page .sections {
 +
  list-style: none;
 +
  padding: 0; }
 +
 +
footer #sitemap .page {
 +
  float: left;
 +
  width: 120px;
 +
  margin-right: 10px; }
 +
 +
footer #sitemap .page h4 {
 +
  margin: 0;
 +
  padding: 0; }
 +
 +
footer #sitemap .page h4 a {
 +
  display: block;
 +
  padding: 5px;
 +
  margin: 0;
 +
  border: 1px #707f86 solid; }
 +
 +
footer #sitemap .page h4 a:hover {
 +
  background: white;
 +
  color: black;
 +
  border: 1px white solid; }
 +
 +
footer #sitemap .page a:hover {
 +
  color: white; }
 +
 +
footer #sitemap .page .sections li {
 +
  margin-top: 5px;
 +
  font-size: .9em; }
 +
 +
footer .copyright {
 +
  float: right;
 +
  color: #707f86;
 +
  width: 200px;
 +
  height: 32px; }
 +
 +
footer .social {
 +
  position: relative;
 +
  width: 200px;
 +
  height: 18px;
 +
  padding: 6px 0 15px 0;
 +
  margin-bottom: 5px;
 +
  float: right; }
 +
 +
footer .social a {
 +
  font-size: 18px;
 +
  color: #707f86;
 +
  text-decoration: none;
 +
  padding-left: 45px;
 +
  font-family: Ostrich, sans-serif; }
 +
 +
footer .social a:hover {
 +
  color: white; }
 +
 +
footer .social svg {
 +
  fill: none;
 +
  stroke: #707f86;
 +
  stroke-width: 1.3px;
 +
  height: 32px;
 +
  width: 32px;
 +
  position: absolute;
 +
  top: 0px;
 +
  left: 0px;
 +
  padding: 2px;
 +
  border: 1px #707f86 solid; }
 +
 +
footer .social a:hover svg {
 +
  stroke: none;
 +
  fill: black;
 +
  background: white;
 +
  border: 1px white solid; }
</style>
</style>
</head>
</head>
</html>
</html>

Revision as of 19:42, 24 September 2014

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