|
|
Line 2: |
Line 2: |
| <style> | | <style> |
| | | |
− | /* OVERRIDE IGEM SETTINGS ---------------------------------------------- */
| |
− |
| |
− | #contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading, .visualClear
| |
− | {
| |
− | display: none;
| |
− | }
| |
− |
| |
− | #content
| |
− | {
| |
− | width: 100%;
| |
− | padding: 0;
| |
− | border: 0;
| |
− | }
| |
− |
| |
− | #globalWrapper
| |
− | {
| |
− | padding: 0;
| |
− | font-size: 100%;
| |
− | }
| |
− |
| |
− | #main-div ul, #main-div ol
| |
− | {
| |
− | margin: 0px 0px 10px 0;
| |
− | }
| |
− |
| |
− | #main-div ol li
| |
− | {
| |
− | margin-left: 30px;
| |
− | }
| |
− |
| |
− | #main-div ul li
| |
− | {
| |
− | margin-left: 20px;
| |
− | list-style: none;
| |
− | }
| |
− |
| |
− | #main-div ul li:before
| |
− | {
| |
− | content: "• ";
| |
− | color: #CC1D24;
| |
− | margin-left: -12px;
| |
− | padding-right: 3px;
| |
− | position: relative;
| |
− | z-index: 5;
| |
− | }
| |
− |
| |
− | #main-div ul.gallery li
| |
− | {
| |
− | list-style: none;
| |
− | }
| |
− |
| |
− | #main-div ul.gallery li:before
| |
− | {
| |
− | content: ""
| |
− | }
| |
− |
| |
− | .image
| |
− | {
| |
− | position: relative;
| |
− | z-index: 20;
| |
− | }
| |
− |
| |
− | .break
| |
− | {
| |
− | clear: both;
| |
− | }
| |
− |
| |
− | #main-div .thumb.tright
| |
− | {
| |
− | border: 0;
| |
− | margin: 1em;
| |
− | }
| |
− |
| |
− | #main-div .thumbinner
| |
− | {
| |
− | padding: 0 !important;
| |
− | border: 0;
| |
− | background-color: transparent;
| |
− | }
| |
− |
| |
− | #main-div .thumbinner a img
| |
− | {
| |
− | border: 0;
| |
− | }
| |
− |
| |
− | #main-div .thumb div
| |
− | {
| |
− | background-color: transparent;
| |
− | }
| |
− |
| |
− | #main-div .thumbcaption
| |
− | {
| |
− | text-align: justify;
| |
− | font-weight: 400;
| |
− | font-size: 11px;
| |
− | color: #505050;
| |
− | }
| |
− |
| |
− | #main-div .thumbcaption .magnify
| |
− | {
| |
− | display: none;
| |
− | }
| |
− |
| |
− | #main-div dd
| |
− | {
| |
− | margin-left: 0.2em;
| |
− | }
| |
− |
| |
− | /* GLOBAL FONT SETTINGS ---------------------------------------------- */
| |
− |
| |
− | @font-face
| |
− | {
| |
− | font-family: Roboto;
| |
− | src: url(https://static.igem.org/mediawiki/2015/2/2e/Czech_Republic_Roboto-Light.ttf);
| |
− | font-weight: 300;
| |
− | }
| |
− | @font-face
| |
− | {
| |
− | font-family: Roboto;
| |
− | src: url(https://static.igem.org/mediawiki/2015/1/10/Czech_Republic_Roboto-Bold.ttf);
| |
− | font-weight: 700;
| |
− | }
| |
− | @font-face
| |
− | {
| |
− | font-family: Roboto;
| |
− | src: url(https://static.igem.org/mediawiki/2015/1/11/Czech_Republic_Roboto-Regular.ttf);
| |
− | font-weight: 400;
| |
− | }
| |
− |
| |
− | #bodyContent, body, html
| |
− | {
| |
− | font-family: "Roboto", sans-serif;
| |
− | font-weight: 300;
| |
− | font-size: 14px;
| |
− | background-color: white;
| |
− | }
| |
− |
| |
− | strong, b
| |
− | {
| |
− | color: #000000;
| |
− | font-weight: 700;
| |
− | }
| |
− |
| |
− | header
| |
− | {
| |
− | margin: 0 0 20px 0;
| |
− | padding: 0;
| |
− | }
| |
− |
| |
− | .info-box
| |
− | {
| |
− | }
| |
− |
| |
− | .info-box .right h2
| |
− | {
| |
− | margin-left: 0.25em;
| |
− | }
| |
− |
| |
− | .info-box h2
| |
− | {
| |
− | margin-top: 0;
| |
− | }
| |
− |
| |
− | .toclevel-3, .toclevel-4, .toclevel-5
| |
− | {
| |
− | display: none;
| |
− | }
| |
− |
| |
− | #main-div header h1
| |
− | {
| |
− | margin: 0;
| |
− | font-size: 48px;
| |
− | font-weight: 400;
| |
− | text-transform: uppercase;
| |
− | color: #303030;
| |
− | }
| |
− |
| |
− | #main-div h1, #main-div h2
| |
− | {
| |
− | clear: both;
| |
− | }
| |
− |
| |
− | #main-div h6
| |
− | {
| |
− | font-weight: 400;
| |
− | font-size: 1.2em;
| |
− | color: #303030;
| |
− | }
| |
− |
| |
− | #main-div h5
| |
− | {
| |
− | font-weight: 400;
| |
− | font-size: 1.3em;
| |
− | color: #303030;
| |
− | }
| |
− |
| |
− | #main-div h4
| |
− | {
| |
− | font-weight: 700;
| |
− | font-size: 1.3em;
| |
− | color: #303030;
| |
− | }
| |
− |
| |
− | #main-div h3
| |
− | {
| |
− | font-weight: 700;
| |
− | font-size: 1.4em;
| |
− | color: #303030;
| |
− | }
| |
− |
| |
− | #main-div h2
| |
− | {
| |
− | font-weight: 700;
| |
− | font-size: 1.5em;
| |
− | }
| |
− |
| |
− | #main-div h1
| |
− | {
| |
− | font-weight: 700;
| |
− | font-size: 1.8em;
| |
− | }
| |
− |
| |
− | address
| |
− | {
| |
− | font-style: normal;
| |
− | }
| |
− |
| |
− | /* WKIMEDIA HEADERS ---------------------------------------------- */
| |
− |
| |
− | .mw-headline
| |
− | {
| |
− | border-top: 70px solid transparent;
| |
− | margin-top: -70px;
| |
− | display: inline-block;
| |
− | position: relative;
| |
− | }
| |
− |
| |
− | h1 .mw-headline:after
| |
− | {
| |
− | content: "";
| |
− | position: absolute;
| |
− | height: 0.5em;
| |
− |
| |
− | border-bottom: 1px solid #CC1D24;
| |
− |
| |
− | margin-left: 10px;
| |
− | top: 0;
| |
− | left: 100%;
| |
− |
| |
− | width: 100px;
| |
− | width: -webkit-calc(950px - 100%);
| |
− | width: calc(950px - 100%);
| |
− | }
| |
− |
| |
− | .ref-back
| |
− | {
| |
− | border-top: 70px solid transparent;
| |
− | margin-top: -70px;
| |
− | display: inline-block;
| |
− | }
| |
− |
| |
− | .floatnone img
| |
− | {
| |
− | margin: 5px 0 15px 0;
| |
− | }
| |
− |
| |
− | pre
| |
− | {
| |
− | word-wrap: break-word;
| |
− | white-space: pre-wrap;
| |
− | height: 8em;
| |
− | overflow-y: scroll;
| |
− | resize: vertical;
| |
− | }
| |
− |
| |
− | /* GLOBAL --------------------------------------------------------------- */
| |
− |
| |
− | p, a
| |
− | {
| |
− | margin-top: 2px;
| |
− | margin-bottom: 10px;
| |
− | text-align: justify;
| |
− | position: relative;
| |
− | z-index: 2;
| |
− | }
| |
− |
| |
− | #main-div a, #main-div a:visited,
| |
− | #main-div a.external, #main-div a.external:visited
| |
− | {
| |
− | color: #CC1D24;
| |
− | }
| |
− |
| |
− | #main-div a.external
| |
− | {
| |
− | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAABmJLR0QAzAAdACT9W2pXAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH3wkQEC4amPZikgAAAP5JREFUKM+VkjtrAlEQhb97s5jVwgexsRCbBERThDwgRYr8Ba2sbLRLk9YmgbSC3XZbS3q7QCB2QrLpTG0hWIh2rhrWR6GEZffekAwMwwxzmJkzR3xkj/mvSU39AfA0jqEBPe3jNVAGFvs8BPICQAH0VdsEC4aZSkaBDDAAKoALxADzp8mPuLirM59M2+54cj547baAL6AAPAND5STHsjFTyepR/uQtd3vzCDSADlAEespJAELKOVBLF/PN75l7P3r/PAVGPnLCRzqWDcBmvW5kLs/6B5HIVZBV5Z8cy0ZI6a2Wy9JhIv4S2sanCE+ngM2Of0N1k+7RiD/K6FfbAqsCPj1oC/QAAAAAAElFTkSuQmCC)
| |
− | }
| |
− |
| |
− | h1, h2, h3, h4, h5, h6
| |
− | {
| |
− | margin: 15px 0px 0px 0px;
| |
− | border: none;
| |
− | padding: none;
| |
− | color: #CC1D24;
| |
− | }
| |
− |
| |
− | hr
| |
− | {
| |
− | margin: 1em 0 1.5em 0;
| |
− | }
| |
− |
| |
− | /* TABLE --------------------------------------------------------------- */
| |
− |
| |
− | .wikitable td
| |
− | {
| |
− | text-align: center;
| |
− | padding: 5px 20px;
| |
− | }
| |
− |
| |
− | .wikitable th
| |
− | {
| |
− | text-align: left;
| |
− | padding: 10px;
| |
− | }
| |
− |
| |
− | .wikitable
| |
− | {
| |
− | width: 100%
| |
− | }
| |
− |
| |
− | /* TABLE OF CONTENTS --------------------------------------------------------------*/
| |
− |
| |
− | @media screen and (min-width: 1800px)
| |
− | {
| |
− | #main-div #toc, #main-div .toc
| |
− | {
| |
− | z-index: 98;
| |
− | position: fixed;
| |
− |
| |
− | left: 50%;
| |
− | margin: 0px 0px 0px 540px;
| |
− | top: 97px;
| |
− |
| |
− | padding: 0px;
| |
− | }
| |
− | }
| |
− |
| |
− | #main-div #toc, #main-div .toc
| |
− | {
| |
− | border: none;
| |
− | background: transparent;
| |
− | }
| |
− |
| |
− | #main-div #toc #toctitle, #main-div .toc #toctitle
| |
− | {
| |
− | text-align: left;
| |
− | margin-bottom: 10px;
| |
− | }
| |
− |
| |
− | #main-div #toc #toctitle h2, #main-div .toc #toctitle h2
| |
− | {
| |
− | font-size: 120%;
| |
− | margin-right: 10px;
| |
− | }
| |
− |
| |
− | #main-div #toc li
| |
− | {
| |
− | margin-left: 0;
| |
− | list-style: none;
| |
− | }
| |
− |
| |
− | #main-div #toc ul li:before
| |
− | {
| |
− | content: "";
| |
− | }
| |
− |
| |
− | /* PANEL -------------------------------------------------------------------*/
| |
| #panel | | #panel |
| { | | { |
| z-index: 100; | | z-index: 100; |
| position: fixed; | | position: fixed; |
− |
| |
| height: 40px; | | height: 40px; |
| width: 100%; | | width: 100%; |
− |
| |
| left: 0px; | | left: 0px; |
| top: 17px; | | top: 17px; |
− |
| |
| background-color: #303030; | | background-color: #303030; |
| } | | } |
Line 408: |
Line 29: |
| | | |
| #panel-ul li | | #panel-ul li |
− | { | + | { |
− | display: inline-block;
| + | display: inline-block; |
− | | + | |
| margin: 0px; | | margin: 0px; |
| padding: 0px 20px; | | padding: 0px 20px; |
− |
| |
− | height: 100%;
| |
| } | | } |
| | | |
Line 421: |
Line 39: |
| color: white; | | color: white; |
| text-decoration: none; | | text-decoration: none; |
− |
| |
| margin: 0px; | | margin: 0px; |
| padding: 0px; | | padding: 0px; |
| } | | } |
| | | |
− | #panel-ul-logo { | + | #panel-ul-logo |
| + | { |
| display: inline-block; | | display: inline-block; |
| margin: 0; | | margin: 0; |
| } | | } |
| | | |
− | #panel-ul-logo img { | + | #panel-ul-logo img |
| + | { |
| vertical-align: middle; | | vertical-align: middle; |
| width: 112px; | | width: 112px; |
Line 447: |
Line 66: |
| } | | } |
| | | |
− | /* MOBILE VERSION ------------------------------------ */
| |
| | | |
− | #panel-ul-switch { | + | #panel-ul li |
− | display: inline-block;
| + | |
− | }
| + | |
− | | + | |
− | @media screen and (max-width: 1000px)
| + | |
| { | | { |
− | .centered-list {
| + | margin: 0; |
− | position: relative;
| + | padding: 0; |
− | }
| + | float: left; |
− | | + | border-right: 1px solid #999; |
− | #panel-ul-logo {
| + | |
− | float: left;
| + | |
− | }
| + | |
− |
| + | |
− | #panel-ul {
| + | |
− | display: none;
| + | |
− | }
| + | |
− | | + | |
− | #panel-ul-switch:hover #panel-ul {
| + | |
− | display: block;
| + | |
− | }
| + | |
− | | + | |
− | #panel-ul-button:hover > div > div
| + | |
− | {
| + | |
− | transition: opacity 0.3s ease;
| + | |
− | -webkit-transition: opacity 0.3s ease;
| + | |
− | -moz-transition: opacity 0.3s ease;
| + | |
− | -o-transition: opacity 0.3s ease;
| + | |
− | opacity: 0.65;
| + | |
− | }
| + | |
− | | + | |
− | #panel-ul-switch #panel-ul {
| + | |
− | position: absolute;
| + | |
− | background-color: #303030;
| + | |
− | width: 200px;
| + | |
− | top: 40px;
| + | |
− | right: 0;
| + | |
− | }
| + | |
− | | + | |
− | #panel-ul-switch {
| + | |
− | float: right;
| + | |
− | }
| + | |
− | | + | |
− | #panel-ul li, #panel-ul li a {
| + | |
− | display: block;
| + | |
− | }
| + | |
− | | + | |
− | #panel-ul li
| + | |
− | {
| + | |
− | padding: 10px 20px;
| + | |
− | }
| + | |
− | | + | |
− | #panel-ul-button {
| + | |
− | display: inline-block;
| + | |
− | width: 30px;
| + | |
− | height: 30px;
| + | |
− | margin: 5px;
| + | |
− | cursor: pointer;
| + | |
− | }
| + | |
− | | + | |
− | #panel-ul-button > div > div
| + | |
− | {
| + | |
− | background-color: white;
| + | |
− | height: 4px;
| + | |
− | width: 25px;
| + | |
− | margin: 4px 0px;
| + | |
− | }
| + | |
| } | | } |
− | | + | #panel-ul li a |
− | /* CONTENT ------------------------------------------------------------------*/
| + | |
− | | + | |
− | #home-div | + | |
| { | | { |
− | left: 0;
| + | padding: 10px 15px; |
− | margin: 0;
| + | display: block; |
− | padding: 0;
| + | color: #fff; |
| + | text-decoration: none; |
| } | | } |
− | | + | #panel-ul li:hover ul |
− | #main-div | + | |
| { | | { |
− | left: 0;
| + | display: block; |
− | margin: 0;
| + | margin: 0; |
− | padding: 45px 20px 40px 20px;
| + | list-style: none; |
− | | + | position: absolute; |
− | width: 960px;
| + | width: 100px; |
− | margin: 0px auto;
| + | color: #303030; |
| } | | } |
| | | |
− | #header | + | #panel-ul li:hover |
| { | | { |
− | width: 100%;
| + | color: #FFFFFF; |
− | | + | background-color: #000000; |
− | left: 0;
| + | |
− | margin: 0;
| + | |
− | padding:0;
| + | |
| } | | } |
| | | |
− | .left
| + | /*Submenus are not displayed as default*/ |
| + | #panel-ul li ul |
| { | | { |
− | display: inline-block;
| + | display: none; |
− | float: left;
| + | padding-top:15px; |
− | width: 475px;
| + | margin-left: 10px; |
| } | | } |
| | | |
− | .right
| + | /*Submenus are displayed when hovering the menu button */ |
| + | #panel-ul li:hover ul |
| { | | { |
− | display: inline-block;
| + | /*display: inline-block; */ |
− | float: right;
| + | display: block; |
− | width: 475px;
| + | position: absolute; |
− | } | + | float:right; |
| + | margin-left: -40px; |
| + | margin-top:-11px; |
| + | } |
| | | |
− | .left .mw-headline:after, .right .mw-headline:after
| + | /*Style the submenu buttons*/ |
| + | #panel-ul li ul li |
| { | | { |
− | width: 100px;
| + | background-color: #303030; |
− | width: -webkit-calc(465px - 100%);
| + | padding-left:2px; |
− | width: calc(465px - 100%);
| + | padding-right:2px; |
| + | padding-top:1px; |
| + | padding-bottom: 4px; |
| + | margin-top:-2px; |
| + | color: #FFFFFF; |
| + | width: 200px; |
| + | height:40px; |
| } | | } |
| | | |
− | .visibility-toggle
| |
− | {
| |
− | color: #CC1D24;
| |
− | cursor: pointer;
| |
− | }
| |
| | | |
− | .visibility-toggle:hover
| |
− | {
| |
− | text-decoration: underline;
| |
− | }
| |
− |
| |
− | .thumb
| |
− | {
| |
− | z-index: 5;
| |
− | position: relative;
| |
− | }
| |
− |
| |
− | video
| |
− | {
| |
− | margin: 1em;
| |
− | }
| |
− |
| |
− | /* FOOTER ------------------------------------------------------------------*/
| |
− |
| |
− | #footer
| |
− | {
| |
− | width: 100%;
| |
− | position: relative;
| |
− | left: 0;
| |
− | bottom: 0;
| |
− |
| |
− | clear: both;
| |
− |
| |
− | background-color: #F2F2F2;
| |
− | color: black;
| |
− | }
| |
− |
| |
− | #footer-container
| |
− | {
| |
− | width: 100%;
| |
− |
| |
− | padding: 4em 0 4em 0;
| |
− | margin: 0 0;
| |
− | }
| |
− |
| |
− | #footer-right, #footer-left
| |
− | {
| |
− | display: inline-block;
| |
− | vertical-align: top;
| |
− | margin: 0 8%
| |
− | }
| |
− |
| |
− | #footer h1
| |
− | {
| |
− | color: #CC1D24;
| |
− | font-size: 15px;
| |
− | font-weight: 700;
| |
− |
| |
− | border: 0;
| |
− | padding: 0;
| |
− | margin: 0 0 2em;
| |
− |
| |
− | float: left;
| |
− | }
| |
− |
| |
− | #footer p, #footer a
| |
− | {
| |
− | text-decoration: none;
| |
− | color: inherit;
| |
− |
| |
− | font-size: 14px;
| |
− | font-weight: 300;
| |
− | line-height: 1em;
| |
− |
| |
− | margin: 0 0 3px;
| |
− | padding: 0;
| |
− |
| |
− | clear: both;
| |
− | float: left;
| |
− | }
| |
− |
| |
− | #footer a:hover
| |
− | {
| |
− | text-decoration: underline;
| |
− | color: #CC1D24;
| |
− | }
| |
| | | |
| </style> | | </style> |
| </html> | | </html> |