|
|
Line 3: |
Line 3: |
| <style type="text/css"> | | <style type="text/css"> |
| | | |
- | * {
| + | #globalWrapper, #content { /*-- changes default wiki settings --*/ |
- | margin: 0;
| + | width: 100%; |
- | padding: 0;
| + | height: 100%; |
- | | + | border: 0px; |
- | -webkit-font-smoothing: antialiased;
| + | background-color: transparent; |
- | -webkit-box-sizing: border-box;
| + | margin: 0px; |
- | -moz-box-sizing: border-box;
| + | padding: 0px; |
- | 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;
| + | |
- | }
| + | |
- | | + | |
- | #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;
| + | |
- | }
| + | |
- | | + | |
- | | + | |
- | #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%;
| + | |
- | }
| + | |
- | | + | |
- | #tracking_nav a { color:#ffffff; text-transform: lowercase;font-size: 16pt;}
| + | |
- | #tracking_nav a:hover {background:#bababa;}
| + | |
- | | + | |
- | ul#nav {
| + | |
- | width:90%;
| + | |
- | top:100px;
| + | |
- | left:60px;
| + | |
- | position:fixed;
| + | |
- | z-index:30;
| + | |
- | }
| + | |
- | | + | |
- | #nav li {
| + | |
- | color: #FFF;
| + | |
- | background-color:none;
| + | |
- | margin: 0 50px 0 0;
| + | |
- | float: left;
| + | |
- | position: relative;
| + | |
- | list-style: none;
| + | |
- | | + | |
- | }
| + | |
- | #nav li:last-child { margin:0; }
| + | |
- | | + | |
- | /* main level link */ | + | |
- | #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;
| + | |
- | }
| + | |
- | | + | |
- | #nav a:hover {
| + | |
- | /*background-color: #870203;
| + | |
- | color: #ffffff;*/
| + | |
- | }
| + | |
- | | + | |
- | /* main level link hover */
| + | |
- | #nav .current a, #nav li:hover > a {
| + | |
- | color: #F79042;
| + | |
- | border-color:#F79042;
| + | |
- | }
| + | |
- | | + | |
- | /* sub levels link hover */
| + | |
- | #nav ul li:hover a, #nav li:hover li a {
| + | |
- | border: none;
| + | |
- | background-image:url(https://static.igem.org/mediawiki/2014/3/3a/Orangemenubkgd_bu14.png);
| + | |
- | background-repeat:repeat;
| + | |
- | color:#FFF;
| + | |
- | }
| + | |
- | | + | |
- | #nav ul a:hover {
| + | |
- | color: #353535 !important;
| + | |
- | /*background: #fff url(https://static.igem.org/mediawiki/2014/d/d7/Gradient_bu14.png) repeat-x 0 -100px !important;
| + | |
- | text-shadow: 0 1px 1px rgba(0,0,0, .1);*/
| + | |
- | }
| + | |
- | | + | |
- | | + | |
- | /* dropdown */
| + | |
- | #nav li:hover > ul {
| + | |
- | /*display: block;*/
| + | |
- | opacity:1;
| + | |
- | margin:0;
| + | |
- | background-color: none;
| + | |
- | z-index:0;
| + | |
- | }
| + | |
- | | + | |
- | /* level 2 list */
| + | |
- | #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;
| + | |
- | | + | |
- | }
| + | |
- | #nav ul li {
| + | |
- | float: none;
| + | |
- | margin: 0;
| + | |
- | padding: 0;
| + | |
- | }
| + | |
- | | + | |
- | #nav ul a {
| + | |
- | font-weight: normal;
| + | |
- | /*text-shadow: 0 1px 0 #fff;*/
| + | |
- | }
| + | |
- | | + | |
- | /* clearfix */
| + | |
- | #nav:after {
| + | |
- | content: ".";
| + | |
- | display: block;
| + | |
- | clear: both;
| + | |
- | visibility: hidden;
| + | |
- | line-height: 0;
| + | |
- | height: 0;
| + | |
- | }
| + | |
- | #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(https://static.igem.org/mediawiki/2014/1/15/Headerdivider_bu14.png);
| + | |
- | z-index:10;
| + | |
- | }
| + | |
- | | + | |
- | .plasmid{
| + | |
- | position: relative;
| + | |
- | background-repeat:no-repeat;
| + | |
- | margin-left:auto;
| + | |
- | margin-right:auto;
| + | |
- | width:400px;
| + | |
- | height:500px; | + | |
- | top:0px;
| + | |
- | 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(https://static.igem.org/mediawiki/2014/d/d7/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) {
| + | html, body, .wrapper { /*-- changes default wiki settings --*/ |
- | .features li:before { | + | width: 100%; |
- | background: url('img/icons@2x.png');
| + | height: 100%; |
- | background-size: 100%;
| + | background-color: transparent; |
- | } | + | |
| } | | } |
| | | |
| </style> | | </style> |
| </html> | | </html> |