"

From 2013.igem.org

/* ----------------------------------------- Table of Contents

----------------------------------------- 
:: iGEM Reset
:: Basic Styles
:: Parallax
*/

/* ----------------------------------------- iGEM Reset

----------------------------------------- */

1. globalWrapper {

background-color: transparent; border: none; margin: 0; padding: 0; width: 100%; height: 100%; }

1. content {

background-color: transparent; border: none; padding: 0; margin: 0; width: 100%; overflow: visible; height: 100%; line-height: inherit; color: rgb(70, 70, 70); }

1. bodyContent {

border: none; padding: 0px; margin: 0px; width: 100%; height: 100%; }

1. top-section {

height: 15px; margin: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0 !important; padding: 0; border: none; font-size: 10px; }

1. p-logo {

height: 1px; overflow: hidden; display: none; }

1. search-controls {

overflow: hidden; display: block; background: none; position: absolute; top: 100px; right: 40px; }

1. menubar.left-menu {

/* margin-top: -80px; uncomment this when page goes live */ background: none; height: 20px; left: 20px; float: left; } .left-menu ul { visibility: hidden; } .left-menu:hover ul { visibility: visible; } .left-menu:hover ul li a { color: #666; } .left-menu li a:hover { color: #aaaaff !important; text-decoration: underline; }

1. menubar.right-menu {

display: block; width: 300px; float: left; margin-top: 2px; margin-right: 0px; border: none; } .right-menu ul { width: 300px; margin: 0px; visibility: hidden; } .right-menu ul li a { background: none; color: #666; } .right-menu:hover ul { visibility: visible; }

1. footer-box {

width: 100%; margin: -10px auto 0 auto; padding: 20px 0; display: none; /* uncomment when page goes live */ } .visualClear { display: none; }

1. footer {

border: none; width: 965px; margin: 0 auto; padding: 0; } .firstHeading { display: none; }

1. f-list a {

color: #333; font-size: 10px; }

1. f-list a:hover {

color: #666; } .printfooter { display: none; }

1. footer ul {

margin: 0; padding: 0; }

1. footer ul li {

margin-top: 0; margin-bottom: 0; margin-left: 10px; margin-right: 10px; padding: 0; }

1. search-controls {

display: none; } h3#siteSub { display: none; }

1. contentSub {

display: none; } p:first-child { display: none; }

1. catlinks {

display: none; }

1. footer-box {

width: 977px; margin-bottom: 20px; }

/* -----------------------------------------

Basic Styles
----------------------------------------- */

• { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

html { font-size: 62.5%; height: 100%;}

body { background: #f2f2f2; font-family: 'Droid Sans', Helvetica, sans-serif; font-size: 20px; line-height: 23px; -webkit-font-smoothing: antialiased; height: 100%; }

div.wrapper { position: relative; margin: 0 2%; }

div.home { overflow: hidden; }

div.wrapper:not(.home) { height: 100%; }

/* Navbars */ .navbar { width: 100%; height: 100px; background-color: rgb(236, 236, 236); text-align: center; }

.head { display: inline-block; padding: 0 10px; color: rgb(70, 70, 70); font-weight: 600; }

.tail { display: inline-block; height: 90px; width: 20%; margin-top: 5px; border-radius: 3px; background-color: rgb(168, 168, 168); text-align: center; vertical-align: middle; line-height: 75px; color: rgb(70, 70, 70); }

.tail img{ position: absolute; height: 110%; margin-top: -2%; width: 9%; }

.tail:hover > img{ transform: scale(1, 1.5); -ms-transform: scale(1.5, 1.5); /* IE 9 */ -webkit-transform: scale(1.2, 1.2); /* Safari and Chrome */ -o-transform: scale(1.5, 1.5); /* Opera */ -moz-transform: scale(1.5, 1.5); /* Firefox */ }

.tail span{ position: absolute; margin-left: -8%; margin-top: 0.7%; font-size: 28px; font-variant: small-caps; }

/* Spin Animation */ @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.spin:hover { -webkit-animation:spin 2s linear infinite; -moz-animation:spin 2s linear infinite; animation:spin 2s linear infinite; }

/* Headers */ h1, h2, h3, h4, h5, h6 { font-family: Helvetica, serif; font-weight: normal; border-bottom: none; margin-bottom: 0px !important; }

h1 { font-size: 44px; } h2 { font-size: 37px; } h3 { font-size: 27px; } h4 { font-size: 23px; } h5 { font-size: 17px; } h6 { font-size: 14px; }

h1.centered, h2.centered, h3.centered, h4.centered, h5.centered, h6.centered { text-align: center; }

/* Links */ a, a:visited { color: #b31b1b; text-decoration: none; }

a:hover { color: #871414; text-decoration: none; cursor: pointer; cursor: hand; }

/* Lists */ ul, ol { font-size: 14px; line-height: 1.6; margin-bottom: 17px; list-style-position: inside; } ul li ul, ul li ol { margin-left: 20px; margin-bottom: 0; } ul.square, ul.circle, ul.disc { margin-left: 17px; } ul.square { list-style-type: square; } ul.square li ul { list-style: inherit; } ul.circle { list-style-type: circle; } ul.circle li ul { list-style: inherit; } ul.disc { list-style-type: disc; } ul.disc li ul { list-style: inherit; } ul.no-bullet { list-style: none; } ol li ul, ol li ol { margin-left: 20px; margin-bottom: 0; }

/* Misc */ .left { float: left; } .right { float: right; } .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .hide { display: none; } .highlight { background: #ffff99; } .absolute { position: absolute; }

1. googlemap img, object, embed { max-width: none; }
2. map_canvas embed { max-width: none; }
3. map_canvas img { max-width: none; }
4. map_canvas object { max-width: none; }

.nohilite { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } div.clearfix { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .off-canvas { width: 100%; }

/* -----------------------------------------

Parallax
----------------------------------------- */			

.screen { position: absolute; height: 100%; width: 100%; //background-color: rgb(50, 187, 83); //border: 3px solid black; }

.screen img {position: absolute;}

.screen span {position: absolute;}

.parallax { position: absolute; white-space: nowrap; }

.layer1 { z-index: 4; } .layer2 { z-index: 3; } .layer3 { z-index: 2; } .layer4 { z-index: 1; }