Template:Team:BostonU/CSS
From 2014.igem.org
(Created page with "* { margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ::selection { back...")
Newer edit →
Revision as of 22:09, 17 June 2014
- {
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; }
- 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(../img_bu14/orangemenubkgd_bu14.png); background-repeat:repeat; color:#FFF; }
- 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 */
- 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(../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%; } }