|
|
| Line 16: |
Line 16: |
| | </style> | | </style> |
| | | | |
| − | <style> | + | <link rel="stylesheet" type="text/css" |
| − | /* SUI Config*/
| + | href="https://2015.igem.org/Template:YourTeamName/MAINCSS?action=raw&ctype=text/css" /> |
| − | /* hint-color: rgba(50, 132, 252, 1)*/
| + | |
| − | | + | |
| − | | + | |
| − | /* Reset default stylesheet. */
| + | |
| − | * {
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | box-shadow: none;
| + | |
| − | outline: none;
| + | |
| − | border: none;
| + | |
| − | background-color: transparent;
| + | |
| − | -webkit-text-size-adjust: 100%;
| + | |
| − | -ms-text-size-adjust: 100%;
| + | |
| − | text-rendering: optimizeLegibility;
| + | |
| − | -webkit-font-smoothing: antialiased;
| + | |
| − | -moz-osx-font-smoothing: grayscale;
| + | |
| − | -webkit-appearance: none;
| + | |
| − | -webkit-box-sizing: border-box;
| + | |
| − | -moz-box-sizing: border-box;
| + | |
| − | box-sizing: border-box;
| + | |
| − | color: #333;
| + | |
| − | }
| + | |
| − | | + | |
| − | html, body {
| + | |
| − | width: 100%;
| + | |
| − | height: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | #globalWrapper, #content, #bodyContent, #fullpage {
| + | |
| − | width: 100%;
| + | |
| − | height: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | #bodyContent>p {
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | }
| + | |
| − | a {
| + | |
| − | cursor: pointer;
| + | |
| − | text-decoration: none;
| + | |
| − | color: rgba(50, 132, 252, 1);
| + | |
| − | }
| + | |
| − | | + | |
| − | a:hover {text-decoration: underline; }
| + | |
| − | | + | |
| − | h2, h3, h4, h5 {margin-bottom: 20px; }
| + | |
| − | | + | |
| − | h2 {font-size: 30px; }
| + | |
| − | | + | |
| − | h3 {font-size: 24px; }
| + | |
| − | | + | |
| − | h4 {font-size: 20px; }
| + | |
| − | | + | |
| − | h5 {font-size: 16px; }
| + | |
| − | | + | |
| − | p {
| + | |
| − | font-weight: normal;
| + | |
| − | font-size: 16px;
| + | |
| − | margin-bottom: 20px;
| + | |
| − | }
| + | |
| − | | + | |
| − | ul, ol {
| + | |
| − | padding-left: 30px;
| + | |
| − | margin-bottom: 20px;
| + | |
| − | }
| + | |
| − | | + | |
| − | li {
| + | |
| − | margin-bottom: 20px;
| + | |
| − | }
| + | |
| − | | + | |
| − | p, li {
| + | |
| − | line-height: 1.6;
| + | |
| − | }
| + | |
| − | | + | |
| − | img {display: block; }
| + | |
| − | | + | |
| − | /* SUI Components */
| + | |
| − | | + | |
| − | .sui-x-img {
| + | |
| − | background-position: center;
| + | |
| − | background-repeat: no-repeat;
| + | |
| − | -webkit-background-size: cover;
| + | |
| − | background-size: cover;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* SUI Layout */
| + | |
| − | .sui-l-fullpage {
| + | |
| − | position: relative;
| + | |
| − | height: 100%;
| + | |
| − | width: 100%;
| + | |
| − | overflow: hidden;
| + | |
| − | }
| + | |
| − | | + | |
| − | .sui-l-center-wrapper {
| + | |
| − | position: relative;
| + | |
| − | width: 100%;
| + | |
| − | height: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .sui-l-center-block {
| + | |
| − | position: absolute;
| + | |
| − | top: 50%;
| + | |
| − | left: 50%;
| + | |
| − | -webkit-transform: translate3D(-50%, -50%, 0);
| + | |
| − | -ms-transform: translate3D(-50%, -50%, 0);
| + | |
| − | -o-transform: translate3D(-50%, -50%, 0);
| + | |
| − | transform: translate3D(-50%, -50%, 0);
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Simple Grid*/
| + | |
| − | .sui-row {
| + | |
| − | width: 100%;
| + | |
| − | overflow: hidden;
| + | |
| − | clear: both;
| + | |
| − | }
| + | |
| − | | + | |
| − | .sui-col-1-2 {
| + | |
| − | width: 50%;
| + | |
| − | float: left;
| + | |
| − | }
| + | |
| − | | + | |
| − | .sui-col-2-3 {
| + | |
| − | width: 66.6%;
| + | |
| − | float: left;
| + | |
| − | }
| + | |
| − | | + | |
| − | .sui-col-1-3 {
| + | |
| − | width: 33.3%;
| + | |
| − | float: left;
| + | |
| − | }
| + | |
| − | | + | |
| − | .sui-avatar {
| + | |
| − | display: block;
| + | |
| − | border-radius: 50%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .sui-button {
| + | |
| − | cursor: pointer;
| + | |
| − | text-transform: uppercase;
| + | |
| − | font-weight: bold;
| + | |
| − | border-radius: 4px;
| + | |
| − | box-shadow: 0 1px 2px rgba(0,0,0,.4);
| + | |
| − | display: inline-block;
| + | |
| − | padding: 10px 20px;
| + | |
| − | color: #fff;
| + | |
| − | background-color: rgba(50, 132, 252, 1);
| + | |
| − | border: 1px solid rgba(30, 112, 222, 1);
| + | |
| − | }
| + | |
| − | | + | |
| − | .sui-bordered-button {
| + | |
| − | cursor: pointer;
| + | |
| − | background-color: transparent;
| + | |
| − | border: 1px solid rgba(50, 132, 252, 1);
| + | |
| − | color: rgba(50, 132, 252, 1);
| + | |
| − | display: inline-block;
| + | |
| − | padding: 10px 20px;
| + | |
| − | border-radius: 4px;
| + | |
| − | font-weight: bold;
| + | |
| − | text-transform: uppercase;
| + | |
| − | }
| + | |
| − | | + | |
| − | .sui-bordered-button:hover {
| + | |
| − | background-color: rgba(50, 132, 252, 1);
| + | |
| − | color: #fff;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .sui-paginator {
| + | |
| − | display: inline-block;
| + | |
| − | padding: 0;
| + | |
| − | margin: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | .sui-horizontal li {
| + | |
| − | display: inline-block;
| + | |
| − | margin: 0 0 0 20px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .sui-vertical li {
| + | |
| − | display: block;
| + | |
| − | margin: 0 0 10px 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | .sui-paginator li {
| + | |
| − | list-style: none;
| + | |
| − | width: 10px;
| + | |
| − | height: 10px;
| + | |
| − | border-radius: 50%;
| + | |
| − | border: 1px solid #ccc;
| + | |
| − | cursor: pointer;
| + | |
| − | }
| + | |
| − | | + | |
| − | .sui-paginator li:hover {
| + | |
| − | background-color: #ccc;
| + | |
| − | }
| + | |
| − | | + | |
| − | .sui-paginator li.current {
| + | |
| − | border: 1px solid rgba(50, 132, 252, 1);
| + | |
| − | background-color: rgba(50, 132, 252, 1);
| + | |
| − | }
| + | |
| − | | + | |
| − | .sui-dropdown {
| + | |
| − | position: absolute;
| + | |
| − | left: 0;
| + | |
| − | display: block;
| + | |
| − | /*border: 1px solid #1B1B1B;*/
| + | |
| − | width: 120px;
| + | |
| − | padding: 0;
| + | |
| − | margin: 0;
| + | |
| − | overflow: hidden;
| + | |
| − | }
| + | |
| − | | + | |
| − | .sui-dropdown li {
| + | |
| − | cursor: pointer;
| + | |
| − | position: relative;
| + | |
| − | background-color: #505050;
| + | |
| − | margin-bottom: 0;
| + | |
| − | padding: 10px 20px;
| + | |
| − | height: 40px;
| + | |
| − | line-height: 20px;
| + | |
| − | list-style: none;
| + | |
| − | color: #fff;
| + | |
| − | border-left: 1px solid #1b1b1b;
| + | |
| − | border-right: 1px solid #1b1b1b;
| + | |
| − | }
| + | |
| − | | + | |
| − | .sui-dropdown li:after {
| + | |
| − | content: " ";
| + | |
| − | height: 1px;
| + | |
| − | position: absolute;
| + | |
| − | bottom: 0;
| + | |
| − | left: 12px;
| + | |
| − | right: 12px;
| + | |
| − | background-color: #727272;
| + | |
| − | }
| + | |
| − | .sui-dropdown li:first-child {
| + | |
| − | /*border-top-left-radius: 4px;*/
| + | |
| − | /*border-top-right-radius: 4px;*/
| + | |
| − | }
| + | |
| − | .sui-dropdown li:last-child { | + | |
| − | border-bottom: 1px solid #1b1b1b;
| + | |
| − | border-bottom-left-radius: 4px;
| + | |
| − | border-bottom-right-radius: 4px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .sui-dropdown li:last-child:after { | + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | .sui-dropdown li:hover {
| + | |
| − | background-color: rgba(50, 132, 252, 1);
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .sui-loader {
| + | |
| − | display: none;
| + | |
| − | position: fixed;
| + | |
| − | top: 0;
| + | |
| − | left: 0;
| + | |
| − | right: 0;
| + | |
| − | bottom: 0;
| + | |
| − | width: 100%;
| + | |
| − | height: 100%;
| + | |
| − | background-color: #323232;
| + | |
| − | }
| + | |
| − | .sui-dropdown li:hover:after {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | .sui-menu {
| + | |
| − | display: block;
| + | |
| − | width: 100%;
| + | |
| − | padding: 0;
| + | |
| − | border-bottom: 1px solid #1b1b1b;
| + | |
| − | }
| + | |
| − | | + | |
| − | .sui-menu>li {
| + | |
| − | cursor: pointer;
| + | |
| − | position: relative;
| + | |
| − | list-style: none;
| + | |
| − | float: left;
| + | |
| − | width: calc(100% / 6);
| + | |
| − | text-align: center;
| + | |
| − | height: 60px;
| + | |
| − | line-height: 60px;
| + | |
| − | margin: 0;
| + | |
| − | background-color: #505050;
| + | |
| − | color: #fff;
| + | |
| − | }
| + | |
| − | | + | |
| − | .sui-menu>li .sui-dropdown {
| + | |
| − | display: none;
| + | |
| − | top: 60px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .sui-menu>li:hover {
| + | |
| − | background-color: rgba(50, 132, 252, 1);
| + | |
| − | }
| + | |
| − | .sui-menu>li:hover .sui-dropdown {
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* custom */ | + | |
| − | | + | |
| − | #footer {
| + | |
| − | position: fixed;
| + | |
| − | width: 100%;
| + | |
| − | bottom: 0;
| + | |
| − | }
| + | |
| − | .footer-wrapper {
| + | |
| − | overflow: hidden;
| + | |
| − | padding-bottom: 10px;
| + | |
| − | font-size: 12px;
| + | |
| − | width: 90%;
| + | |
| − | margin: 0 auto;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | | + | |
| − | .footer-left {
| + | |
| − | /*float: left;*/
| + | |
| − | line-height: 1.5;
| + | |
| − | border-top: 1px solid #555;
| + | |
| − | padding-top: 10px;
| + | |
| − | color: #aaa;
| + | |
| − | }
| + | |
| − | .cover {
| + | |
| − | background-color: #323232;
| + | |
| − | }
| + | |
| − | | + | |
| − | .logo-wrapper {
| + | |
| − | height: 100%;
| + | |
| − | width: 100%;
| + | |
| − | background-image: url(../img/logo.gif);
| + | |
| − | -webkit-background-size: 340px;
| + | |
| − | background-size: 340px;
| + | |
| − | background-position: center;
| + | |
| − | background-repeat: no-repeat;
| + | |
| − | }
| + | |
| − | .cover-logo {
| + | |
| − | height: 150px;
| + | |
| − | width: 150px;
| + | |
| − | border-radius: 50%;
| + | |
| − | background-color: #fff;
| + | |
| − | color: #000;
| + | |
| − | text-align: center;
| + | |
| − | font-size: 30px;
| + | |
| − | -webkit-transform-origin: center center;
| + | |
| − | -moz-transform-origin: center center;
| + | |
| − | -ms-transform-origin: center center;
| + | |
| − | -o-transform-origin: center center;
| + | |
| − | transform-origin: center center;
| + | |
| − | }
| + | |
| − | | + | |
| − | .cover-domino {
| + | |
| − | position: absolute;
| + | |
| − | bottom: 0;
| + | |
| − | width: 102%;
| + | |
| − | padding: 0;
| + | |
| − | margin: 0 0 0 -2%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .cover-domino li {
| + | |
| − | list-style: none;
| + | |
| − | display: inline-block;
| + | |
| − | margin-left: 2%;
| + | |
| − | margin-bottom: 0;
| + | |
| − | border-radius: 4px;
| + | |
| − | height: 280px;
| + | |
| − | width: 4.25%;
| + | |
| − | background-color: #fff;
| + | |
| − | | + | |
| − | -webkit-transform-origin: bottom right;
| + | |
| − | -moz-transform-origin: bottom right;
| + | |
| − | -ms-transform-origin: bottom right;
| + | |
| − | -o-transform-origin: bottom right;
| + | |
| − | transform-origin: bottom right;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | @media screen and (max-width: 1366px) {
| + | |
| − | .cover-domino li {
| + | |
| − | height: 140px;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .member-avatar {
| + | |
| − | width: 200px;
| + | |
| − | height: 200px;
| + | |
| − | float: left;
| + | |
| − | background-color: #00c4cc;
| + | |
| − | }
| + | |
| − | | + | |
| − | #fp-nav ul li a span, .fp-slidesNav ul li a span {
| + | |
| − | background-color: #fff;
| + | |
| − | }
| + | |
| − | | + | |
| − | .element {
| + | |
| − | top: 50%;
| + | |
| − | -webkit-transform: translate3D(0, -50%, 0);
| + | |
| − | -ms-transform: translate3D(0, -50%, 0);
| + | |
| − | -o-transform: translate3D(0, -50%, 0);
| + | |
| − | transform: translate3D(0, -50%, 0);
| + | |
| − | width: 30%;
| + | |
| − | position: absolute;
| + | |
| − | }
| + | |
| − | | + | |
| − | .cell {
| + | |
| − | width: 35%;
| + | |
| − | left: 30px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .clock {
| + | |
| − | left: 1900px;
| + | |
| − | }
| + | |
| − | </style>
| + | |
| | | | |
| | </div></div> <!--These are the closing tags for div id="mainContainer" and div id="contentContainer". The corresponding opening tags appear in the template that is {{included}} at the top of this page.--> | | </div></div> <!--These are the closing tags for div id="mainContainer" and div id="contentContainer". The corresponding opening tags appear in the template that is {{included}} at the top of this page.--> |
