"

From 2014.igem.org

• {

margin: 0; padding: 0;

-webkit-font-smoothing: antialiased; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

selection {

background: #F79042; color: #fff; }

.slide-out-div {

         padding: 20px;
         background-image:url(../img_bu14/popopenbkgd_bu14.png);

background-repeat:repeat; z-index:30; text-align:left;

     }

a:link { color: #F79042; text-decoration: none; } a:visited { text-decoration: none; color: #F79042; } a:hover { text-decoration: underline; } a:active { text-decoration: none; }

.title{ position:absolute; top:38px; left:56px; z-index:2; }

body { color: #353535; font: 14px/23px proxima-nova-alt, "Proxima Nova Alt", sans-serif; text-align:center; }

h0{ color:#FFF; font-size:40px; font-weight:700; }

h1{ font-size:28px; font-weight:700; text-transform:uppercase; }

h2{ font-size:18px; color:#FFF; font-weight:700; text-transform:uppercase; text-align:left; }

h3{ font-size:20px; color:#000; font-weight:700; text-align:left; }

main{ font-size:14px; font-weight:200; text-align:justify; }

sidenav{ color:#FFF; font-weight:700; }

1. logo {

position: absolute; left: 80px; top: 40px; z-index: 2; margin-left: -17px; }

.header{ background-color:#353535; position:fixed; height:125px; top:0px; width:100%; z-index:30; } .igemlogo { position:fixed; right:5px; z-index:30; }

1. tracking_nav

{ margin: 0px 0px 0px 950px; position: fixed; color:#bababa; border: 1px solid #3d3f3c; background:#3d3f3c; font-size: 16pt; padding: 5px; line-height: 120%; }

1. tracking_nav a { color:#ffffff; text-transform: lowercase;font-size: 16pt;}
2. tracking_nav a:hover {background:#bababa;}

ul#nav { width:90%; top:100px; left:60px; position:fixed; z-index:30; }

1. nav li {

color: #FFF; background-color:none; margin: 0 50px 0 0; float: left; position: relative; list-style: none;

}

1. nav li:last-child { margin:0; }

/* main level link */

1. nav a {

font-family:bree-web, Bree, sans-serif; font-size:12pt; font-weight:700; line-height:210%; color: inherit; text-decoration: none; display: block; padding: 0 0 0 5px; margin: 0; }

ul#nav > li > a { line-height:12px; border-left:solid 3px #bbb; padding:0 0 0 15px; }

1. nav a:hover {

/*background-color: #870203; color: #ffffff;*/ }

/* main level link hover */

1. nav .current a, #nav li:hover > a {

color: #F79042; border-color:#F79042; }

/* sub levels link hover */

1. nav ul li:hover a, #nav li:hover li a {

border: none; background-image:url(../img_bu14/orangemenubkgd_bu14.png); background-repeat:repeat; color:#FFF; }

1. nav ul a:hover {

color: #353535 !important; /*background: #fff url(img/gradient.png) repeat-x 0 -100px !important; text-shadow: 0 1px 1px rgba(0,0,0, .1);*/ }

/* dropdown */

1. nav li:hover > ul {

/*display: block;*/ opacity:1; margin:0; background-color: none; z-index:0; }

/* level 2 list */

1. nav ul {

/*display: none;*/ opacity:0; margin: 20px 0 0 0; padding: 7px 0 0 0; width: 205px; position: absolute; left: 0; z-index:-1;

}

1. nav ul li {

float: none; margin: 0; padding: 0; }

1. nav ul a {

font-weight: normal; /*text-shadow: 0 1px 0 #fff;*/ }

/* clearfix */

1. nav:after {

content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }

1. nav {

display: inline-block; } html[xmlns] #nav { display: block; }

• html #nav {

height: 1%; }

.headerdivider{ position:absolute; top:120px; height:15px; width:100%; background-image:url(../img_bu14/headerdivider_bu14.png); z-index:10; }

.plasmid{ position: relative; background-repeat:no-repeat; margin-left:auto; margin-right:auto; width:400px; height:500px; top:220px; z-index:10; }

.banner { position: absolute; top:100px; width: 100%; height:100%; overflow: auto;

font-size: 18px; text-align: center; color: rgba(255,255,255,.6); text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3); background: #5b4d3d; box-shadow: 0 1px 2px rgba(0,0,0,.25);

} .banner ul { list-style: none; width: 100%; } .banner ul li { display: block; float: left; background-size:cover; min-height:700px; box-shadow: inset 0 -3px 6px rgba(0,0,0,.1); }

.banner .inner { padding: 160px 0 110px; }

.banner h1, .banner h2 { font-size: 40px; line-height: 52px; color: #fff; }

.banner .btn { display: inline-block; margin: 25px 0 0; padding: 9px 22px 7px; clear: both;

color: #fff; font-size: 12px; font-weight: bold; text-transform: uppercase; text-decoration: none;

border: 2px solid rgba(255,255,255,.4); border-radius: 5px; } .banner .btn:hover { background: rgba(255,255,255,.05); } .banner .btn:active { -webkit-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); -moz-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); -ms-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); -o-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); }

.banner .btn, .banner .dot { -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }

.banner .dots { position: absolute; left: 0; right: 0; bottom: 20px; } .banner .dots li { display: inline-block; width: 10px; height: 10px; margin: 0 4px;

text-indent: -999em;

border: 2px solid #fff; border-radius: 6px;

cursor: pointer; opacity: .4;

-webkit-transition: background .5s, opacity .5s; -moz-transition: background .5s, opacity .5s; transition: background .5s, opacity .5s; } .banner .dots li.active { background: #fff; opacity: 1; }

.banner .arrows { position: absolute; bottom: 20px; right: 20px; color: #fff; } .banner .arrow { display: inline; padding-left: 10px; cursor: pointer; }

.wrap { margin: 0 auto; width: 960px; }

.anchor{ position:absolute; top:calc(100% - 125px); }

.topanchor{ position:absolute; top:calc(0% - 125px); }

.lower{ background-image:url(../img_bu14/gradient_bu14.png); background-color:#FFF; text-align:center; background-repeat:repeat-x; width:100%; position:absolute; top:100%; z-index:10; } .content{ text-align:left; width:100%; position:relative; z-index:10;

} .text{ width:75%; margin-left:auto; margin-right:auto; } .content1{ background-image:url(../img_bu14/whitebkgd_bu14.png); background-repeat:repeat; } .content2{ background-image:url(../img_bu14/orangemenubkgd_bu14.png); background-repeat:repeat; } .content3{ background-image:url(../img_bu14/bluebkgd_bu14.png); background-repeat:repeat; }

.pagecontent{ position:relative; left:50px; top:130px; width:80%; text-align:left; }

pageheader{ font-size:28px; font-weight:700; text-transform:uppercase; }

.sponsors{ background-color:#FFF; position:relative; text-align:center; bottom:0px; z-index:10; }

@media only screen and (min-device-width: 320px) and (max-device-width: 480px), (max-width: 900px) { .wrap { width: 90%; } #logo { left: 50px; top: 30px; }

.banner h1, .banner h2 { font-size: 24px; line-height: 30px; } .banner ul li { height: 240px; } .banner .inner { padding-top: 100px; padding-bottom: 50px; } .banner p { font-size: 15px; width: 80%; margin: 0 auto; } pre { overflow: auto; } .features li { width: 100%; margin-left: 10px; margin-bottom: 30px; } .how li { width: 90%; } .how pre { position: static; width: 100%; } }

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .features li:before { background: url('img/icons@2x.png'); background-size: 100%; } }