"
Team:SJTU-BioX-Shanghai/css/my.css
From 2014.igem.org
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0; padding: 0;
}
@font-face{
font-family: ProximaSansBlack;
src: url('../fonts/ProximaSansBlack.ttf');
}
body {
font-family: ProximaSansBlack; font-weight: 400; line-height: 1.3; color: #111111;
}
p, ul, pre {
font-size: 18px; font-size: 1.125em;
}
.logo {
height: 405px; background-color: #e0c755; z-index: 3;
}
.content {
height: 605px; background-color: #f1df6a; z-index: 3;
}
- wrap {
padding-top: 0; position: relative; z-index: 3;
}
.site-title {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transform: scale(0.5, 0.5);
-moz-transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-o-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
position: absolute;
z-index: 10;
left: 50%;
top: 8px;
margin-left: -26px;
background-image: url("../img/logo.png");
background-position: center center;
width: 52px;
height: 52px;
background-size: 52px 52px;
opacity: 0;
}
.site-title:before {
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
content: ;
position: absolute;
display: block;
background-image: url("../img/logo-outer.png");
background-position: center center;
width: 52px;
height: 52px;
background-size: 52px 52px;
-webkit-transform: rotate(0deg) rotateX(0deg) rotateY(0deg);
-moz-transform: rotate(0deg) rotateX(0deg) rotateY(0deg);
-ms-transform: rotate(0deg) rotateX(0deg) rotateY(0deg);
-o-transform: rotate(0deg) rotateX(0deg) rotateY(0deg);
transform: rotate(0deg) rotateX(0deg) rotateY(0deg);
}
.site-title:after {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
content: ;
position: absolute;
top: 42px;
padding-top: 10px;
padding-bottom: 20px;
left: -12px;
display: block;
background-image: url("../img/wordmark.png");
background-position: center center;
background-repeat: no-repeat;
width: 75px;
height: 13px;
background-size: 75px 13px;
opacity: 0;
}
a {
-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; text-decoration: none; color: #e8cd4d;
}
a:hover, a:focus, a:active {
color: #111111;
}
[role="banner"] {
-webkit-transform: translateZ(0); position: absolute; width: 100%; top: 0; z-index: 10; background-color: #e8cd4d; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
}
[role="banner"]:after {
content: ""; display: table; clear: both;
}
.flex {
position: relative; clear: both; padding: 5px 10px; display: block; max-width: 1024px; max-width: 64rem; margin: 0 auto;
}
.flex:after {
content: ""; display: table; clear: both;
}
[role="banner"] > .flex {
padding-top: 0; padding-bottom: 0;
}
h1 {
color: #111111; font-weight: 400; margin-top: 30px; text-transform: uppercase;
}
[role="banner"] h1 {
padding: 0; margin: 0;
}
[role="navigation"] {
padding: 18px 10px 20px;
}
[role="navigation"] {
-webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; display: block; position: relative; z-index: 10; overflow: hidden; width: 100%; padding: 18px 10px;
}
[role="navigation"]:after {
content: ""; display: table; clear: both;
}
[role="navigation"] ul {
list-style-type: none; display: inline-block; text-align: center; display: block;
}
[role="navigation"] ul:after {
content: ""; display: table; clear: both;
}
[role="navigation"] ul li {
display: inline-block; text-align: center; margin: 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
}
.epsilon {
font-size: 13px; font-size: 0.8125rem;
}
[role="navigation"] ul li {
width: 20%;
}
[role="navigation"] ul li a {
font-size: 16px; font-size: 1rem; padding: 4px 25px; font-family: sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; display: block; background: none; color: #ac9733; padding: 4px 10px;
}
[role="navigation"] ul li a:hover, [role="navigation"] ul li a:focus, [role="navigation"] ul li a:active {
color: #efe771;
}
[role="navigation"] ul li a.current {
color: white;
}
[role="banner"].sticky {
position: fixed; overflow: hidden; top: 0; left: 0; width: 100%; z-index: 10;
}
[role="banner"].sticky [role="navigation"] ul li:nth-of-type(1) {
padding: 0 10px 0 0;
}
[role="banner"].sticky [role="navigation"] ul li:nth-of-type(2) {
padding: 0 80px 0 0;
}
[role="banner"].sticky [role="navigation"] ul li:nth-of-type(3) {
padding: 0 0 0 80px;
}
[role="banner"].sticky [role="navigation"] ul li:nth-of-type(4) {
padding: 0 0 0 10px;
}
[role="banner"].sticky .site-title {
display: block;
}
[role="banner"].sticky .site-title {
position: absolute; opacity: 1; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); height: 52px;
}
[role="banner"].sticky .site-title:before {
-webkit-transform: rotate(360deg) rotateX(0deg) rotateY(0deg); -moz-transform: rotate(360deg) rotateX(0deg) rotateY(0deg); -ms-transform: rotate(360deg) rotateX(0deg) rotateY(0deg); -o-transform: rotate(360deg) rotateX(0deg) rotateY(0deg); transform: rotate(360deg) rotateX(0deg) rotateY(0deg); opacity: 1;
}
[role="banner"].sticky .site-title:after {
display: block;
}
[role="banner"].sticky .site-title:hover {
-webkit-transform: translate(0, -35px); -moz-transform: translate(0, -35px); -ms-transform: translate(0, -35px); -o-transform: translate(0, -35px); transform: translate(0, -35px);
}
[role="banner"].sticky .site-title:hover:before {
-webkit-transform: rotate(-180deg) rotateX(0deg) rotateY(0deg); -moz-transform: rotate(-180deg) rotateX(0deg) rotateY(0deg); -ms-transform: rotate(-180deg) rotateX(0deg) rotateY(0deg); -o-transform: rotate(-180deg) rotateX(0deg) rotateY(0deg); transform: rotate(-180deg) rotateX(0deg) rotateY(0deg);
}
[role="banner"].sticky .site-title:hover:after {
opacity: 1;
}
.ir {
font-size: 0; color: transparent; display: block; background-repeat: no-repeat; background-position: left top;
}
/* sumbenu with transitions */
.cbp-tm-submenu {
position: absolute; display: block; visibility: hidden; opacity: 0; padding: 0; text-align: left; pointer-events: none; -webkit-transition: visibility 0s, opacity 0s; -moz-transition: visibility 0s, opacity 0s; transition: visibility 0s, opacity 0s;
}
.cbp-tm-show .cbp-tm-submenu {
width: 16em; left: 50%; margin: 0 0 0 -8em; opacity: 1; visibility: visible; pointer-events: auto; -webkit-transition: visibility 0s, opacity 0.3s; -moz-transition: visibility 0s, opacity 0.3s; transition: visibility 0s, opacity 0.3s;
}
.cbp-tm-show-above .cbp-tm-submenu {
bottom: 100%; padding-bottom: 10px;
}
.cbp-tm-show-below .cbp-tm-submenu {
top: 100%; padding-top: 10px;
}
/* extreme cases: not enough space on the sides */ .cbp-tm-nospace-right .cbp-tm-submenu {
right: 0; left: auto;
}
.cbp-tm-nospace-left .cbp-tm-submenu {
left: 0;
}
/* last menu item has to fit on the screen */ .cbp-tm-menu > li:last-child .cbp-tm-submenu {
right: 0;
}
/* arrow: depending on where the menu will be shown, we set the right position for the arrow
- /
.cbp-tm-submenu:after {
border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;
}
.cbp-tm-show-above .cbp-tm-submenu:after {
top: 100%; margin-top: -10px;
}
.cbp-tm-show-below .cbp-tm-submenu:after {
bottom: 100%; margin-bottom: -10px;
}
.cbp-tm-submenu:after {
border-color: transparent; border-width: 16px; margin-left: -16px; left: 50%;
}
.cbp-tm-show-above .cbp-tm-submenu:after {
border-top-color: #fff;
}
.cbp-tm-show-below .cbp-tm-submenu:after {
border-bottom-color: #fff;
}
.cbp-tm-submenu > li {
display: block; background: #fff;
}
.cbp-tm-submenu > li > a {
padding: 5px 2.3em 5px 0.6em; /* top/bottom paddings in 'em' cause a tiny "jump" in Chrome on Win */ display: block; font-size: 1.2em; position: relative; color: #47a3da; border: 4px solid #fff; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s;
}
.no-touch .cbp-tm-submenu > li > a:hover, .no-touch .cbp-tm-submenu > li > a:active {
color: #fff; background: #47a3da;
}
/* the icons (main level menu icon and sublevel icons) */ .cbp-tm-submenu li a:before, .cbp-tm-menu > li > a:before {
font-family: 'cbp-tmicons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; vertical-align: middle; margin-right: 0.6em; -webkit-font-smoothing: antialiased;
}
.cbp-tm-submenu li a:before {
position: absolute; top: 50%; margin-top: -0.5em; right: 0.5em;
}
.cbp-tm-menu > li > a:not(:only-child):before {
content: "\f0c9"; font-size: 60%; opacity: 0.3;
}
.cbp-tm-icon-archive:before {
content: "\e002";
}
.cbp-tm-icon-cog:before {
content: "\e003";
}
.cbp-tm-icon-users:before {
content: "\e004";
}
.cbp-tm-icon-earth:before {
content: "\e005";
}
.cbp-tm-icon-location:before {
content: "\e006";
}
.cbp-tm-icon-mobile:before {
content: "\e007";
}
.cbp-tm-icon-screen:before {
content: "\e008";
}
.cbp-tm-icon-mail:before {
content: "\e009";
}
.cbp-tm-icon-contract:before {
content: "\e00a";
}
.cbp-tm-icon-pencil:before {
content: "\e00b";
}
.cbp-tm-icon-article:before {
content: "\e00c";
}
.cbp-tm-icon-clock:before {
content: "\e00d";
}
.cbp-tm-icon-videos:before {
content: "\e00e";
}
.cbp-tm-icon-pictures:before {
content: "\e00f";
}
.cbp-tm-icon-link:before {
content: "\e010";
}
.cbp-tm-icon-refresh:before {
content: "\e011";
}
.cbp-tm-icon-help:before {
content: "\e012";
}
/* Media Queries */ @media screen and (max-width: 55.6875em) {
.cbp-tm-menu {
font-size: 80%;
}
}
@media screen and (max-height: 25.25em), screen and (max-width: 44.3125em) {
.cbp-tm-menu {
font-size: 100%;
position: relative;
text-align: center;
padding: 0;
top: auto;
}
.cbp-tm-menu > li {
display: block;
margin: 0;
border-bottom: 4px solid #3793ca;
}
.cbp-tm-menu > li:first-child {
border-top: 4px solid #3793ca;
}
li.cbp-tm-show > a,
.no-touch .cbp-tm-menu > li > a:hover,
.no-touch .cbp-tm-menu > li > a:active {
color: #fff;
background: #02639d;
}
.cbp-tm-submenu {
position: relative;
display: none;
width: 100%;
}
.cbp-tm-submenu > li {
padding: 0;
}
.cbp-tm-submenu > li > a {
padding: 0.6em 2.3em 0.6em 0.6em;
border: none;
border-bottom: 2px solid #6fbbe9;
}
.cbp-tm-submenu:after {
display: none;
}
.cbp-tm-menu .cbp-tm-show .cbp-tm-submenu {
display: block;
width: 100%;
left: 0;
margin: 0;
padding: 0;
bottom: auto;
top: auto;
}
}
