@import "http://designmodo.github.io/Flat-UI/dist/css/flat-ui.min.css"; @import "https://daneden.github.io/animate.css/animate.min.css"; /*-------------------------------*/ /* VARIABLES */ /*-------------------------------*/ @font-face {
font-family: proxima-novabold; src: url("https://static.igem.org/mediawiki/2017/8/84/NJU_China_iGEM_2017_ProximaNova-Bold.otf") /* EOT file for IE */
} @font-face {
font-family: proxima-nova; src: url("https://static.igem.org/mediawiki/2017/6/64/NJU_China_iGEM_2017_ProximaNova-Light.otf") /* TTF file for CSS3 browsers */
} @font-face {
font-family: proxima-novalight; src: url("https://static.igem.org/mediawiki/2017/a/a4/NJU_China_iGEM_2017_ProximaNova-Regular.otf") /* TTF file for CSS3 browsers */
} body {
position: relative; overflow-x: hidden;
} body, html {
height: 100%; color: black; background-repeat: repeat;
} .nav .open > a {
background-color: transparent;
} .nav .open > a:hover {
background-color: transparent;
} .nav .open > a:focus {
background-color: transparent;
} /*-------------------------------*/ /* Wrappers */ /*-------------------------------*/
- wrapper {
-moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; padding-left: 0; transition: all 0.5s ease;
}
- wrapper.toggled {
padding-left: 220px;
}
- wrapper.toggled #sidebar-wrapper {
width: 220px;
}
- wrapper.toggled #page-content-wrapper {
margin-right: -220px; position: absolute;
}
- sidebar-wrapper {
-moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; background: #1a1a1a; height: 100%; left: 220px; margin-left: -220px; overflow-x: hidden; overflow-y: auto; transition: all 0.5s ease; width: 0; z-index: 1000;
}
- sidebar-wrapper::-webkit-scrollbar {
display: none;
}
- page-content-wrapper {
width: 100%;
} /*-------------------------------*/ /* Sidebar nav styles */ /*-------------------------------*/ .sidebar-nav {
list-style: none; margin: 0; padding: 0; position: absolute; top: 0; width: 220px;
} .sidebar-nav li {
display: inline-block; line-height: 20px; position: relative; width: 100%;
} .sidebar-nav li:before {
background-color: #303841; content: ; height: 100%; left: 0; position: absolute; top: 0; -webkit-transition: width 0.2s ease-in; transition: width 0.2s ease-in; width: 3px; z-index: -1;
} .sidebar-nav li:first-child a {
background-color: #1a1a1a; color: #ffffff;
} .sidebar-nav li:nth-child(2):before {
background-color: #716757;
} .sidebar-nav li:nth-child(3):before {
background-color: #716757;
} .sidebar-nav li:nth-child(4):before {
background-color: #716757;
} .sidebar-nav li:nth-child(5):before {
background-color: #716757;
} .sidebar-nav li:nth-child(6):before {
background-color: #716757;
} .sidebar-nav li:nth-child(7):before {
background-color: #716757;
} .sidebar-nav li:nth-child(8):before {
background-color: #716757;
} .sidebar-nav li:nth-child(9):before {
background-color: #716757;
} .sidebar-nav li:hover:before {
-webkit-transition: width 0.2s ease-in; transition: width 0.2s ease-in; width: 100%;
} .sidebar-nav li a {
color: #dddddd; display: block; padding: 10px 15px 10px 30px; text-decoration: none;
} .sidebar-nav li.open:hover before {
-webkit-transition: width 0.2s ease-in; transition: width 0.2s ease-in; width: 100%;
} .sidebar-nav .dropdown-menu {
background-color: #222222; border-radius: 0; border: none; box-shadow: none; margin: 0; padding: 0; position: relative; width: 100%;
} .sidebar-nav li a:hover, .sidebar-nav li a:active, .sidebar-nav li a:focus, .sidebar-nav li.open a:hover, .sidebar-nav li.open a:active, .sidebar-nav li.open a:focus {
background-color: transparent; color: #ffffff; text-decoration: none;
} .sidebar-nav > .sidebar-brand {
font-size: 20px; height: 65px; line-height: 44px;
} /*-------------------------------*/ /* Hamburger-Cross */ /*-------------------------------*/ .hamburger {
background: transparent; border: none; display: block; height: 32px; margin-left: 15px; position: fixed; top: 20px; width: 32px; z-index: 999;
} .hamburger:hover {
outline: none;
} .hamburger:focus {
outline: none;
} .hamburger:active {
outline: none;
} .hamburger.is-closed:before {
-webkit-transform: translate3d(0, 0, 0); -webkit-transition: all 0.35s ease-in-out; color: #ffffff; content: ; display: block; font-size: 14px; line-height: 32px; opacity: 0; text-align: center; width: 100px;
} .hamburger.is-closed:hover before {
-webkit-transform: translate3d(-100px, 0, 0); -webkit-transition: all 0.35s ease-in-out; display: block; opacity: 1;
} .hamburger.is-closed:hover .hamb-top {
-webkit-transition: all 0.35s ease-in-out; top: 0;
} .hamburger.is-closed:hover .hamb-bottom {
-webkit-transition: all 0.35s ease-in-out; bottom: 0;
} .hamburger.is-closed .hamb-top {
-webkit-transition: all 0.35s ease-in-out; background-color: rgba(255, 255, 255, 0.7); top: 5px;
} .hamburger.is-closed .hamb-middle {
background-color: rgba(255, 255, 255, 0.7); margin-top: -2px; top: 50%;
} .hamburger.is-closed .hamb-bottom {
-webkit-transition: all 0.35s ease-in-out; background-color: rgba(255, 255, 255, 0.7); bottom: 5px;
} .hamburger.is-closed .hamb-top, .hamburger.is-closed .hamb-middle, .hamburger.is-closed .hamb-bottom, .hamburger.is-open .hamb-top, .hamburger.is-open .hamb-middle, .hamburger.is-open .hamb-bottom {
height: 4px; left: 0; position: absolute; width: 100%;
} .hamburger.is-open .hamb-top {
-webkit-transform: rotate(45deg); -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08); background-color: #ffffff; margin-top: -2px; top: 50%;
} .hamburger.is-open .hamb-middle {
background-color: #ffffff; display: none;
} .hamburger.is-open .hamb-bottom {
-webkit-transform: rotate(-45deg); -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08); background-color: #ffffff; margin-top: -2px; top: 50%;
} .hamburger.is-open:before {
-webkit-transform: translate3d(0, 0, 0); -webkit-transition: all 0.35s ease-in-out; color: #ffffff; content: ; display: block; font-size: 14px; line-height: 32px; opacity: 0; text-align: center; width: 100px;
} .hamburger.is-open:hover before {
-webkit-transform: translate3d(-100px, 0, 0); -webkit-transition: all 0.35s ease-in-out; display: block; opacity: 1;
} /*-------------------------------*/ /* Dark Overlay */ /*-------------------------------*/ .overlay {
position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.4); z-index: 1;
} body a {
color: rgba(255, 255, 255, 0.8); text-decoration: underline;
} body a:hover {
color: #ffffff;
}
h3{ font-size: 30px; } h4{ font-size: 24px; text-align: center;
text-style: nomal;
} p{
font-size:17px;
} .parttop { display: table; width: 100%; height: 475px; background-image: url(""); background-attachment: fixed;
} .projecttop { display: table; width: 100%; height: 475px; background-image: url(""); background-attachment: fixed; }
.figure img { width: 100%; height: 100%; } .figure { text-align: center; } .page_container {
max-width: 100%; font-family: proxima-novabold,"Helvetica Neue",Helvetica,Arial,sans-serif; letter-spacing: 0.8px;
} .page_container p{
font-size: 15px;
} .page_container div{ padding:30px 10px; }
.page_container h2, .page_container h1, .other h2, .other h1 {
border-bottom: 1px solid rgba(0,0,0,0.15);
padding-bottom: 25px;
}
.page_container h2, .page_container h3,.page_container i {
text-align: center;
}
.page_container p {
font-size: 18px;
line-height: 180%;
text-align: left; font-family: proxima-novabold,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
.page_container h2 {
font-size: 35px; color: #2F1E04;
}
- page_edge1{
background-image: url(""); height: 50px; margin-top: -80px; margin-bottom: 20px; }
- page_edge2{
background-image: url(""); height: 50px; margin-top: -80px; }
- page_edge3{
background-image: url(""); height: 50px; margin-top: -80px; }
.first{ background-image: url("");
background-color:rgba(255,255,255,0); color: #2B1D08;
} .second{ background-image: url("");
background-color:rgba(255,255,255,0); color: #2E0D06;
} .third{ background-image: url("");
background-color:rgba(255,255,255,0); color: black;
}
.jumpto-subnav {
display: none;
}
.jumpto-subnav.fixed {
display: none;
}
- tags
{ background-color: black; padding: 16px 120px; font-family: proxima-nova,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 16px; color: #998774; letter-spacing: 1px; }