Team:TP CC-SanDiego/TheTeam.html

From 2014hs.igem.org

(Difference between revisions)
Line 100: Line 100:
#menubar:hover li a {
#menubar:hover li a {
     color: white;}
     color: white;}
 +
 +
 +
 +
 +
/* General Demo Style */
 +
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
 +
 +
@font-face {
 +
    font-family: 'AnimalsNormal';
 +
    src: url('fonts/animals-webfont.eot');
 +
    src: url('fonts/animals-webfont.eot?#iefix') format('embedded-opentype'),
 +
        url('fonts/animals-webfont.woff') format('woff'),
 +
        url('fonts/animals-webfont.ttf') format('truetype'),
 +
        url('fonts/animals-webfont.svg#AnimalsNormal') format('svg');
 +
    font-weight: normal;
 +
    font-style: normal;
 +
}
 +
 +
html { height: 100%; }
 +
 +
*,
 +
*:after,
 +
*:before {
 +
-webkit-box-sizing: border-box;
 +
-moz-box-sizing: border-box;
 +
box-sizing: border-box;
 +
padding: 0;
 +
margin: 0;
 +
}
 +
 +
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
 +
.clearfix:after {
 +
content: "";
 +
display: table;
 +
clear: both;
 +
}
 +
 +
body {
 +
    font-family: 'Lato', Calibri, Arial, sans-serif;
 +
    background: #fff;
 +
    font-weight: 300;
 +
    font-size: 15px;
 +
    color: #333;
 +
    -webkit-font-smoothing: antialiased;
 +
}
 +
 +
a {
 +
color: #555;
 +
text-decoration: none;
 +
}
 +
 +
.container {
 +
width: 100%;
 +
position: relative;
 +
}
 +
 +
.container.demo-1 {
 +
height: 100%;
 +
position: absolute;
 +
}
 +
 +
.clr {
 +
clear: both;
 +
padding: 0;
 +
height: 0;
 +
margin: 0;
 +
}
 +
 +
.main {
 +
width: 90%;
 +
margin: 0 auto;
 +
position: relative;
 +
}
 +
 +
.container > header,
 +
.content-wrapper {
 +
padding: 30px;
 +
width: 80%;
 +
max-width: 960px;
 +
margin: 0 auto;
 +
}
 +
 +
.content-wrapper p{
 +
padding-top: 30px;
 +
line-height: 26px;
 +
}
 +
 +
.container > header h1 {
 +
font-size: 34px;
 +
line-height: 38px;
 +
margin: 0;
 +
font-weight: 700;
 +
color: #333;
 +
float: left;
 +
}
 +
 +
.container > header h1 span {
 +
display: block;
 +
font-size: 20px;
 +
font-weight: 300;
 +
}
 +
 +
 +
/* Header Style */
 +
.codrops-top {
 +
line-height: 24px;
 +
font-size: 11px;
 +
background: #fff;
 +
background: rgba(255, 255, 255, 0.8);
 +
text-transform: uppercase;
 +
z-index: 9999;
 +
position: relative;
 +
font-family: Cambria, Georgia, serif;
 +
box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
 +
}
 +
 +
.codrops-top a {
 +
padding: 0px 10px;
 +
letter-spacing: 1px;
 +
color: #333;
 +
display: inline-block;
 +
}
 +
 +
.codrops-top a:hover {
 +
background: rgba(255,255,255,0.6);
 +
}
 +
 +
.codrops-top span.right {
 +
float: right;
 +
}
 +
 +
.codrops-top span.right a {
 +
float: left;
 +
display: block;
 +
}
 +
 +
/* Demo Buttons Style */
 +
.codrops-demos {
 +
float: right;
 +
padding-top: 10px;
 +
}
 +
 +
.demo-1 .codrops-demos {
 +
position: absolute;
 +
z-index: 2000;
 +
top: 30px;
 +
left: 30px;
 +
}
 +
 +
.codrops-demos a {
 +
    display: inline-block;
 +
    margin: 10px;
 +
    color: #333;
 +
    font-weight: 700;
 +
    line-height: 30px;
 +
    border-bottom: 4px solid transparent;
 +
}
 +
 +
.codrops-demos a:hover {
 +
color: #883d59;
 +
border-color: #883d59;
 +
}
 +
 +
.codrops-demos a.current-demo,
 +
.codrops-demos a.current-demo:hover {
 +
color: #aaa;
 +
border-color: #aaa;
 +
}
 +
 +
 +
.sl-slider-wrapper {
 +
width: 800px;
 +
height: 400px;
 +
margin: 0 auto;
 +
position: relative;
 +
overflow: hidden;
 +
}
 +
 +
.sl-slider {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
}
 +
 +
/* Slide wrapper and slides */
 +
 +
.sl-slide,
 +
.sl-slides-wrapper,
 +
.sl-slide-inner {
 +
position: absolute;
 +
width: 100%;
 +
height: 100%;
 +
top: 0;
 +
left: 0;
 +
}
 +
 +
.sl-slide {
 +
z-index: 1;
 +
}
 +
 +
/* The duplicate parts/slices */
 +
 +
.sl-content-slice {
 +
overflow: hidden;
 +
position: absolute;
 +
-webkit-box-sizing: content-box;
 +
-moz-box-sizing: content-box;
 +
box-sizing: content-box;
 +
background: #fff;
 +
-webkit-backface-visibility: hidden;
 +
-moz-backface-visibility: hidden;
 +
-o-backface-visibility: hidden;
 +
-ms-backface-visibility: hidden;
 +
backface-visibility: hidden;
 +
opacity : 1;
 +
}
 +
 +
/* Horizontal slice */
 +
 +
.sl-slide-horizontal .sl-content-slice {
 +
width: 100%;
 +
height: 50%;
 +
left: -200px;
 +
-webkit-transform: translateY(0%) scale(1);
 +
-moz-transform: translateY(0%) scale(1);
 +
-o-transform: translateY(0%) scale(1);
 +
-ms-transform: translateY(0%) scale(1);
 +
transform: translateY(0%) scale(1);
 +
}
 +
 +
.sl-slide-horizontal .sl-content-slice:first-child {
 +
top: -200px;
 +
padding: 200px 200px 0px 200px;
 +
}
 +
 +
.sl-slide-horizontal .sl-content-slice:nth-child(2) {
 +
top: 50%;
 +
padding: 0px 200px 200px 200px;
 +
}
 +
 +
/* Vertical slice */
 +
 +
.sl-slide-vertical .sl-content-slice {
 +
width: 50%;
 +
height: 100%;
 +
top: -200px;
 +
-webkit-transform: translateX(0%) scale(1);
 +
-moz-transform: translateX(0%) scale(1);
 +
-o-transform: translateX(0%) scale(1);
 +
-ms-transform: translateX(0%) scale(1);
 +
transform: translateX(0%) scale(1);
 +
}
 +
 +
.sl-slide-vertical .sl-content-slice:first-child {
 +
left: -200px;
 +
padding: 200px 0px 200px 200px;
 +
}
 +
 +
.sl-slide-vertical .sl-content-slice:nth-child(2) {
 +
left: 50%;
 +
padding: 200px 200px 200px 0px;
 +
}
 +
 +
/* Content wrapper */
 +
/* Width and height is set dynamically */
 +
.sl-content-wrapper {
 +
position: absolute;
 +
}
 +
 +
.sl-content {
 +
width: 100%;
 +
height: 100%;
 +
background: #fff;
 +
}
 +
 +
/* Default styles for background colors */
 +
.sl-slide-horizontal .sl-slide-inner {
 +
background: #ddd;
 +
}
 +
 +
.sl-slide-vertical .sl-slide-inner {
 +
background: #ccc;
 +
}
 +
 +
.demo-1 .sl-slider-wrapper {
 +
position: absolute;
 +
width: 100%;
 +
height: 100%;
 +
top: 0;
 +
left: 0;
 +
}
 +
 +
.demo-2 .sl-slider-wrapper {
 +
width: 100%;
 +
height: 600px;
 +
overflow: hidden;
 +
position: relative;
 +
}
 +
 +
.demo-2 .sl-slider h2,
 +
.demo-2 .sl-slider blockquote {
 +
padding: 100px 30px 10px 30px;
 +
width: 80%;
 +
max-width: 960px;
 +
color: #fff;
 +
margin: 0 auto;
 +
position: relative;
 +
z-index: 100;
 +
}
 +
 +
.demo-2 .sl-slider h2 {
 +
font-size: 100px;
 +
text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
 +
}
 +
 +
.demo-2 .sl-slider blockquote {
 +
font-size: 28px;
 +
padding-top: 10px;
 +
font-weight: 300;
 +
text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
 +
}
 +
 +
.demo-2 .sl-slider blockquote cite {
 +
font-size: 16px;
 +
font-weight: 700;
 +
font-style: normal;
 +
text-transform: uppercase;
 +
letter-spacing: 5px;
 +
padding-top: 30px;
 +
display: inline-block;
 +
}
 +
 +
.demo-2 .bg-img {
 +
padding: 200px;
 +
-webkit-box-sizing: content-box;
 +
-moz-box-sizing: content-box;
 +
box-sizing: content-box;
 +
position: absolute;
 +
top: -200px;
 +
left: -200px;
 +
width: 100%;
 +
height: 100%;
 +
-webkit-background-size: cover;
 +
-moz-background-size: cover;
 +
background-size: cover;
 +
background-position: center center;
 +
}
 +
 +
/* Custom navigation arrows */
 +
 +
.nav-arrows span {
 +
position: absolute;
 +
z-index: 2000;
 +
top: 50%;
 +
width: 40px;
 +
height: 40px;
 +
border: 8px solid #ddd;
 +
border: 8px solid rgba(150,150,150,0.4);
 +
text-indent: -90000px;
 +
margin-top: -40px;
 +
cursor: pointer;
 +
 +
-webkit-transform: rotate(45deg);
 +
-moz-transform: rotate(45deg);
 +
-o-transform: rotate(45deg);
 +
-ms-transform: rotate(45deg);
 +
transform: rotate(45deg);
 +
}
 +
 +
.nav-arrows span:hover {
 +
border-color: rgba(150,150,150,0.9);
 +
}
 +
 +
.nav-arrows span.nav-arrow-prev {
 +
left: 5%;
 +
border-right: none;
 +
border-top: none;
 +
}
 +
 +
.nav-arrows span.nav-arrow-next {
 +
right: 5%;
 +
border-left: none;
 +
border-bottom: none;
 +
}
 +
 +
/* Custom navigation dots */
 +
 +
.nav-dots {
 +
text-align: center;
 +
position: absolute;
 +
bottom: 2%;
 +
height: 30px;
 +
width: 100%;
 +
left: 0;
 +
z-index: 1000;
 +
}
 +
 +
.nav-dots span {
 +
display: inline-block;
 +
position: relative;
 +
width: 16px;
 +
height: 16px;
 +
border-radius: 50%;
 +
margin: 3px;
 +
background: #ddd;
 +
background: rgba(150,150,150,0.4);
 +
cursor: pointer;
 +
box-shadow:
 +
0 1px 1px rgba(255,255,255,0.4),
 +
inset 0 1px 1px rgba(0,0,0,0.1);
 +
}
 +
 +
.demo-2 .nav-dots span {
 +
background: rgba(150,150,150,0.1);
 +
margin: 6px;
 +
-webkit-transition: all 0.2s;
 +
-moz-transition: all 0.2s;
 +
-ms-transition: all 0.2s;
 +
-o-transition: all 0.2s;
 +
transition: all 0.2s;
 +
box-shadow:
 +
0 1px 1px rgba(255,255,255,0.4),
 +
inset 0 1px 1px rgba(0,0,0,0.1),
 +
0 0 0 2px rgba(255,255,255,0.5);
 +
}
 +
 +
.demo-2 .nav-dots span.nav-dot-current,
 +
.demo-2 .nav-dots span:hover {
 +
box-shadow:
 +
0 1px 1px rgba(255,255,255,0.4),
 +
inset 0 1px 1px rgba(0,0,0,0.1),
 +
0 0 0 5px rgba(255,255,255,0.5);
 +
}
 +
 +
.nav-dots span.nav-dot-current:after {
 +
content: "";
 +
position: absolute;
 +
width: 10px;
 +
height: 10px;
 +
top: 3px;
 +
left: 3px;
 +
border-radius: 50%;
 +
background: rgba(255,255,255,0.8);
 +
}
 +
 +
/* Content elements */
 +
 +
.demo-1 .deco {
 +
width: 260px;
 +
height: 260px;
 +
border: 2px dashed #ddd;
 +
border: 2px dashed rgba(150,150,150,0.4);
 +
border-radius: 50%;
 +
position: absolute;
 +
bottom: 50%;
 +
left: 50%;
 +
margin: 0 0 0 -130px;
 +
}
 +
 +
.demo-1 [data-icon]:after {
 +
    content: attr(data-icon);
 +
    font-family: 'AnimalsNormal';
 +
color: #999;
 +
text-shadow: 0 0 1px #999;
 +
position: absolute;
 +
width: 220px;
 +
height: 220px;
 +
line-height: 220px;
 +
text-align: center;
 +
font-size: 100px;
 +
top: 50%;
 +
left: 50%;
 +
margin: -110px 0 0 -110px;
 +
box-shadow: inset 0 0 0 10px #f7f7f7;
 +
border-radius: 50%;
 +
}
 +
 +
.demo-1 .sl-slide h2 {
 +
color: #000;
 +
text-shadow: 0 0 1px #000;
 +
padding: 20px;
 +
position: absolute;
 +
font-size: 34px;
 +
font-weight: 700;
 +
letter-spacing: 13px;
 +
text-transform: uppercase;
 +
width: 80%;
 +
left: 10%;
 +
text-align: center;
 +
line-height: 50px;
 +
bottom: 50%;
 +
margin: 0 0 -120px 0;
 +
}
 +
 +
.demo-1 .sl-slide blockquote {
 +
position: absolute;
 +
width: 100%;
 +
text-align: center;
 +
left: 0;
 +
font-weight: 400;
 +
font-size: 14px;
 +
line-height: 20px;
 +
height: 70px;
 +
color: #8b8b8b;
 +
z-index: 2;
 +
bottom: 50%;
 +
margin: 0 0 -200px 0;
 +
padding: 0;
 +
}
 +
 +
.demo-1 .sl-slide blockquote p{
 +
margin: 0 auto;
 +
width: 60%;
 +
max-width: 400px;
 +
position: relative;
 +
}
 +
 +
.demo-1 .sl-slide blockquote p:before {
 +
color: #f0f0f0;
 +
color: rgba(244,244,244,0.65);
 +
font-family: "Bookman Old Style", Bookman, Garamond, serif;
 +
position: absolute;
 +
line-height: 60px;
 +
width: 75px;
 +
height: 75px;
 +
font-size: 200px;
 +
z-index: -1;
 +
left: -80px;
 +
top: 35px;
 +
content: '\201C';
 +
}
 +
 +
.demo-1 .sl-slide blockquote cite {
 +
font-size: 10px;
 +
padding-top: 10px;
 +
display: inline-block;
 +
font-style: normal;
 +
text-transform: uppercase;
 +
letter-spacing: 4px;
 +
}
 +
 +
/* Custom background colors for slides in first demo */
 +
 +
/* First Slide */
 +
.demo-1 .bg-1 .sl-slide-inner,
 +
.demo-1 .bg-1 .sl-content-slice {
 +
background: #fff;
 +
}
 +
 +
/* Second Slide */
 +
.demo-1 .bg-2 .sl-slide-inner,
 +
.demo-1 .bg-2 .sl-content-slice {
 +
background: #000;
 +
}
 +
 +
.demo-1 .bg-2 [data-icon]:after,
 +
.demo-1 .bg-2 h2 {
 +
color: #fff;
 +
}
 +
 +
.demo-1 .bg-2 blockquote:before {
 +
color: #222;
 +
}
 +
 +
/* Third Slide */
 +
.demo-1 .bg-3 .sl-slide-inner,
 +
.demo-1 .bg-3 .sl-content-slice {
 +
background: #db84ad;
 +
}
 +
 +
.demo-1 .bg-3 .deco {
 +
border-color: #fff;
 +
border-color: rgba(255,255,255,0.5);
 +
}
 +
 +
.demo-1 .bg-3 [data-icon]:after {
 +
color: #fff;
 +
text-shadow: 0 0 1px #fff;
 +
box-shadow: inset 0 0 0 10px #b55381;
 +
}
 +
 +
.demo-1 .bg-3 h2,
 +
.demo-1 .bg-3 blockquote{
 +
color: #fff;
 +
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
 +
}
 +
 +
.demo-1 .bg-3 blockquote:before {
 +
color: #c46c96;
 +
}
 +
 +
/* Forth Slide */
 +
.demo-1 .bg-4 .sl-slide-inner,
 +
.demo-1 .bg-4 .sl-content-slice {
 +
background: #5bc2ce;
 +
}
 +
 +
.demo-1 .bg-4 .deco {
 +
border-color: #379eaa;
 +
}
 +
 +
.demo-1 .bg-4 [data-icon]:after {
 +
text-shadow: 0 0 1px #277d87;
 +
color: #277d87;
 +
}
 +
 +
.demo-1 .bg-4 h2,
 +
.demo-1 .bg-4 blockquote{
 +
color: #fff;
 +
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
 +
}
 +
 +
.demo-1 .bg-4 blockquote:before {
 +
color: #379eaa;
 +
}
 +
 +
/* Fifth Slide */
 +
.demo-1 .bg-5 .sl-slide-inner,
 +
.demo-1 .bg-5 .sl-content-slice {
 +
background: #ffeb41;
 +
}
 +
 +
.demo-1 .bg-5 .deco {
 +
border-color: #ECD82C;
 +
}
 +
 +
.demo-1 .bg-5 .deco:after {
 +
color: #000;
 +
text-shadow: 0 0 1px #000;
 +
}
 +
 +
.demo-1 .bg-5 h2,
 +
.demo-1 .bg-5 blockquote{
 +
color: #000;
 +
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
 +
}
 +
 +
.demo-1 .bg-5 blockquote:before {
 +
color: #ecd82c;
 +
}
 +
 +
.demo-2 .bg-img-1 {
 +
background-image: url(../images/1.jpg);
 +
}
 +
.demo-2 .bg-img-2 {
 +
background-image: url(../images/2.jpg);
 +
}
 +
.demo-2 .bg-img-3 {
 +
background-image: url(../images/3.jpg);
 +
}
 +
.demo-2 .bg-img-4 {
 +
background-image: url(../images/4.jpg);
 +
}
 +
.demo-2 .bg-img-5 {
 +
background-image: url(../images/5.jpg);
 +
}
 +
 +
/* Animations for content elements */
 +
 +
.sl-trans-elems .deco{
 +
-webkit-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
 +
-moz-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
 +
-o-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
 +
-ms-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
 +
animation: roll 1s ease-out both, fadeIn 1s ease-out both;
 +
}
 +
.sl-trans-elems h2{
 +
-webkit-animation: moveUp 1s ease-in-out both;
 +
-moz-animation: moveUp 1s ease-in-out both;
 +
-o-animation: moveUp 1s ease-in-out both;
 +
-ms-animation: moveUp 1s ease-in-out both;
 +
animation: moveUp 1s ease-in-out both;
 +
}
 +
.sl-trans-elems blockquote{
 +
-webkit-animation: fadeIn 0.5s linear 0.5s both;
 +
-moz-animation: fadeIn 0.5s linear 0.5s both;
 +
-o-animation: fadeIn 0.5s linear 0.5s both;
 +
-ms-animation: fadeIn 0.5s linear 0.5s both;
 +
animation: fadeIn 0.5s linear 0.5s both;
 +
}
 +
.sl-trans-back-elems .deco{
 +
-webkit-animation: scaleDown 1s ease-in-out both;
 +
-moz-animation: scaleDown 1s ease-in-out both;
 +
-o-animation: scaleDown 1s ease-in-out both;
 +
-ms-animation: scaleDown 1s ease-in-out both;
 +
animation: scaleDown 1s ease-in-out both;
 +
}
 +
.sl-trans-back-elems h2{
 +
-webkit-animation: fadeOut 1s ease-in-out both;
 +
-moz-animation: fadeOut 1s ease-in-out both;
 +
-o-animation: fadeOut 1s ease-in-out both;
 +
-ms-animation: fadeOut 1s ease-in-out both;
 +
animation: fadeOut 1s ease-in-out both;
 +
}
 +
.sl-trans-back-elems blockquote{
 +
-webkit-animation: fadeOut 1s linear both;
 +
-moz-animation: fadeOut 1s linear both;
 +
-o-animation: fadeOut 1s linear both;
 +
-ms-animation: fadeOut 1s linear both;
 +
animation: fadeOut 1s linear both;
 +
}
 +
@-webkit-keyframes roll{
 +
0% {-webkit-transform: translateX(500px) rotate(360deg);}
 +
100% {-webkit-transform: translateX(0px) rotate(0deg);}
 +
}
 +
@-moz-keyframes roll{
 +
0% {-moz-transform: translateX(500px) rotate(360deg); opacity: 0;}
 +
100% {-moz-transform: translateX(0px) rotate(0deg); opacity: 1;}
 +
}
 +
@-o-keyframes roll{
 +
0% {-o-transform: translateX(500px) rotate(360deg); opacity: 0;}
 +
100% {-o-transform: translateX(0px) rotate(0deg); opacity: 1;}
 +
}
 +
@-ms-keyframes roll{
 +
0% {-ms-transform: translateX(500px) rotate(360deg); opacity: 0;}
 +
100% {-ms-transform: translateX(0px) rotate(0deg); opacity: 1;}
 +
}
 +
@keyframes roll{
 +
0% {transform: translateX(500px) rotate(360deg); opacity: 0;}
 +
100% {transform: translateX(0px) rotate(0deg); opacity: 1;}
 +
}
 +
@-webkit-keyframes moveUp{
 +
0% {-webkit-transform: translateY(40px);}
 +
100% {-webkit-transform: translateY(0px);}
 +
}
 +
@-moz-keyframes moveUp{
 +
0% {-moz-transform: translateY(40px);}
 +
100% {-moz-transform: translateY(0px);}
 +
}
 +
@-o-keyframes moveUp{
 +
0% {-o-transform: translateY(40px);}
 +
100% {-o-transform: translateY(0px);}
 +
}
 +
@-ms-keyframes moveUp{
 +
0% {-ms-transform: translateY(40px);}
 +
100% {-ms-transform: translateY(0px);}
 +
}
 +
@keyframes moveUp{
 +
0% {transform: translateY(40px);}
 +
100% {transform: translateY(0px);}
 +
}
 +
@-webkit-keyframes fadeIn{
 +
0% {opacity: 0;}
 +
100% {opacity: 1;}
 +
}
 +
@-moz-keyframes fadeIn{
 +
0% {opacity: 0;}
 +
100% {opacity: 1;}
 +
}
 +
@-o-keyframes fadeIn{
 +
0% {opacity: 0;}
 +
100% {opacity: 1;}
 +
}
 +
@-ms-keyframes fadeIn{
 +
0% {opacity: 0;}
 +
100% {opacity: 1;}
 +
}
 +
@keyframes fadeIn{
 +
0% {opacity: 0;}
 +
100% {opacity: 1;}
 +
}
 +
@-webkit-keyframes scaleDown{
 +
0% {-webkit-transform: scale(1);}
 +
100% {-webkit-transform: scale(0.5);}
 +
}
 +
@-moz-keyframes scaleDown{
 +
0% {-moz-transform: scale(1);}
 +
100% {-moz-transform: scale(0.5);}
 +
}
 +
@-o-keyframes scaleDown{
 +
0% {-o-transform: scale(1);}
 +
100% {-o-transform: scale(0.5);}
 +
}
 +
@-ms-keyframes scaleDown{
 +
0% {-ms-transform: scale(1);}
 +
100% {-ms-transform: scale(0.5);}
 +
}
 +
@keyframes scaleDown{
 +
0% {transform: scale(1);}
 +
100% {transform: scale(0.5);}
 +
}
 +
@-webkit-keyframes fadeOut{
 +
0% {opacity: 1;}
 +
100% {opacity: 0;}
 +
}
 +
@-moz-keyframes fadeOut{
 +
0% {opacity: 1;}
 +
100% {opacity: 0;}
 +
}
 +
@-o-keyframes fadeOut{
 +
0% {opacity: 1;}
 +
100% {opacity: 0;}
 +
}
 +
@-ms-keyframes fadeOut{
 +
0% {opacity: 1;}
 +
100% {opacity: 0;}
 +
}
 +
@keyframes fadeOut{
 +
0% {opacity: 1;}
 +
100% {opacity: 0;}
 +
}
 +
 +
 +
/* Media Queries for custom slider */
 +
 +
@media screen and (max-width: 660px) {
 +
.demo-1 .deco {
 +
width: 130px;
 +
height: 130px;
 +
margin-left: -65px;
 +
margin-bottom: 50px;
 +
}
 +
 +
.demo-1 [data-icon]:after {
 +
width: 110px;
 +
height: 110px;
 +
line-height: 110px;
 +
font-size: 40px;
 +
margin: -55px 0 0 -55px;
 +
}
 +
 +
.demo-1 .sl-slide blockquote {
 +
margin-bottom: -120px;
 +
}
 +
 +
.demo-1 .sl-slide h2 {
 +
line-height: 22px;
 +
font-size: 18px;
 +
margin-bottom: -40px;
 +
letter-spacing: 8px;
 +
}
 +
 +
.demo-1 .sl-slide blockquote p:before {
 +
line-height: 10px;
 +
width: 40px;
 +
height: 40px;
 +
font-size: 120px;
 +
left: -45px;
 +
}
 +
 +
.demo-2 .sl-slider-wrapper {
 +
height: 500px;
 +
}
 +
 +
.demo-2 .sl-slider h2 {
 +
font-size: 36px;
 +
}
 +
 +
.demo-2 .sl-slider blockquote {
 +
font-size: 16px;
 +
}
 +
 +
}
 +
 +
.sl-slider-wrapper {
 +
overflow: visible !important;
 +
margin: 0 auto;
 +
}
 +
 +
/* Slide wrapper and slides */
 +
 +
.sl-slider,
 +
.sl-slide,
 +
.sl-slides-wrapper,
 +
.sl-slide-inner {
 +
position: relative;
 +
width: 100%;
 +
height: 100%;
 +
background: #fff;
 +
}
 +
 +
.demo-1 .sl-slide blockquote {
 +
width: 50%;
 +
left: 25%;
 +
}
 +
 +
.demo-2 .bg-img {
 +
padding: 0;
 +
top: 0;
 +
left: 0;
 +
}
 +
 +
.nav-arrows,
 +
.nav-dots {
 +
display: none;
 +
}
 +
 +
</style>
</style>
 +
 +
<script>
 +
/* Modernizr 2.6.2 (Custom Build) | MIT & BSD
 +
* Build: http://modernizr.com/download/#-csstransforms3d-csstransitions-touch-shiv-cssclasses-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes-load
 +
*/
 +
;window.Modernizr=function(a,b,c){function z(a){j.cssText=a}function A(a,b){return z(m.join(a+";")+(b||""))}function B(a,b){return typeof a===b}function C(a,b){return!!~(""+a).indexOf(b)}function D(a,b){for(var d in a){var e=a[d];if(!C(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function E(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}return!1}function F(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+o.join(d+" ")+d).split(" ");return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(e,b,c))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={},r={},s={},t=[],u=t.slice,v,w=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["&#173;",'<style id="s',h,'">',a,"</style>"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},x={}.hasOwnProperty,y;!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){return x.call(a,b)}:y=function(a,b){return b in a&&B(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=u.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(u.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(u.call(arguments)))};return e}),q.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:w(["@media (",m.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c},q.csstransforms3d=function(){var a=!!F("perspective");return a&&"webkitPerspective"in g.style&&w("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a},q.csstransitions=function(){return F("transition")};for(var G in q)y(q,G)&&(v=G.toLowerCase(),e[v]=q[G](),t.push((e[v]?"":"no-")+v));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)y(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},z(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e<g;e++)d.createElement(f[e]);return d}function p(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return r.shivMethods?n(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+l().join().replace(/\w+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(r,b.frag)}function q(a){a||(a=b);var c=m(a);return r.shivCSS&&!f&&!c.hasCSS&&(c.hasCSS=!!k(a,"article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}")),j||p(a,c),a}var c=a.html5||{},d=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,f,g="_html5shiv",h=0,i={},j;(function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){return D([a])},e.testAllProps=F,e.testStyles=w,e.prefixed=function(a,b,c){return b?F(a,b,c):F(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+t.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i<a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);else Object(a)===a&&h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};
 +
</script>
 +
<!--<link href="style.css" rel="stylesheet" type="text/css">-->
<!--<link href="style.css" rel="stylesheet" type="text/css">-->
<link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>

Revision as of 05:29, 20 June 2014

iGEM San Diego

Fullscreen Slit Slider with CSS3 and jQuery

A bene placito

You have just dined, and however scrupulously the slaughterhouse is concealed in the graceful distance of miles, there is complicity.

Ralph Waldo Emerson

Regula aurea

Until he extends the circle of his compassion to all living things, man will not himself find peace.

Albert Schweitzer

Dum spiro, spero

Thousands of people who say they 'love' animals sit down once or twice a day to enjoy the flesh of creatures who have been utterly deprived of everything that could make their lives worth living and who endured the awful suffering and the terror of the abattoirs.

Dame Jane Morris Goodall

Donna nobis pacem

The human body has no more need for cows' milk than it does for dogs' milk, horses' milk, or giraffes' milk.

Michael Klaper M.D.

Acta Non Verba

I think if you want to eat more meat you should kill it yourself and eat it raw so that you are not blinded by the hypocrisy of having it processed for you.

Margi Clarke

Retrieved from "http://2014hs.igem.org/Team:TP_CC-SanDiego/TheTeam.html"