Difference between revisions of "Team:Czech Republic/Template:Stylesheet"
(348 intermediate revisions by 4 users not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
− | |||
<style> | <style> | ||
/* OVERRIDE IGEM SETTINGS ---------------------------------------------- */ | /* OVERRIDE IGEM SETTINGS ---------------------------------------------- */ | ||
− | #contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear | + | #contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading, .visualClear |
{ | { | ||
display: none; | display: none; | ||
Line 17: | Line 16: | ||
} | } | ||
− | + | #globalWrapper | |
+ | { | ||
+ | padding: 0; | ||
+ | font-size: 100%; | ||
+ | } | ||
− | + | #main-div ul, #main-div ol | |
{ | { | ||
− | color: #000000; | + | 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%); | ||
} | } | ||
− | p, | + | .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-top: 2px; | ||
− | margin-bottom: | + | 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 | ||
{ | { | ||
Line 43: | Line 383: | ||
position: fixed; | position: fixed; | ||
+ | height: 40px; | ||
width: 100%; | width: 100%; | ||
− | left: | + | left: 0px; |
− | top: | + | top: 17px; |
− | background-color: # | + | background-color: #303030; |
} | } | ||
Line 58: | Line 399: | ||
} | } | ||
− | #panel ul | + | #panel-ul |
{ | { | ||
− | margin: | + | margin: 0px; |
− | padding: | + | padding: 0px; |
− | + | ||
list-style-type: none; | list-style-type: none; | ||
+ | display: inline-block; | ||
} | } | ||
− | #panel ul li | + | #panel-ul li |
{ | { | ||
− | |||
− | |||
display: inline-block; | display: inline-block; | ||
− | margin: | + | |
+ | margin: 0px; | ||
+ | padding: 0px 20px; | ||
+ | |||
+ | height: 100%; | ||
} | } | ||
− | #panel ul li a | + | #panel-ul li a |
{ | { | ||
+ | color: white; | ||
text-decoration: none; | text-decoration: none; | ||
− | + | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | } | ||
+ | |||
+ | #panel-ul-logo { | ||
display: inline-block; | display: inline-block; | ||
− | + | margin: 0; | |
− | + | } | |
+ | |||
+ | #panel-ul-logo img { | ||
+ | vertical-align: middle; | ||
+ | width: 112px; | ||
+ | height: 40px; | ||
} | } | ||
− | #panel ul li:hover | + | #panel-ul li:hover > a, #panel-ul-logo:hover |
{ | { | ||
− | + | text-decoration: none; | |
+ | transition: opacity 0.2s ease; | ||
+ | -webkit-transition: opacity 0.3s ease; | ||
+ | -moz-transition: opacity 0.3s ease; | ||
+ | -o-transition: opacity 0.3s ease; | ||
+ | opacity: 0.65; | ||
} | } | ||
− | #panel ul | + | /* MOBILE VERSION ------------------------------------ */ |
+ | |||
+ | #panel-ul-switch { | ||
+ | display: inline-block; | ||
+ | } | ||
+ | |||
+ | @media screen and (max-width: 1000px) | ||
{ | { | ||
− | color: | + | .centered-list { |
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | #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; | ||
+ | } | ||
} | } | ||
Line 106: | Line 531: | ||
left: 0; | left: 0; | ||
margin: 0; | margin: 0; | ||
− | padding: | + | padding: 45px 20px 40px 20px; |
− | + | width: 960px; | |
− | margin | + | margin: 0px auto; |
} | } | ||
Line 119: | Line 544: | ||
margin: 0; | margin: 0; | ||
padding:0; | padding:0; | ||
+ | } | ||
+ | |||
+ | .left | ||
+ | { | ||
+ | display: inline-block; | ||
+ | float: left; | ||
+ | width: 475px; | ||
+ | } | ||
+ | |||
+ | .right | ||
+ | { | ||
+ | display: inline-block; | ||
+ | float: right; | ||
+ | width: 475px; | ||
+ | } | ||
+ | |||
+ | .left .mw-headline:after, .right .mw-headline:after | ||
+ | { | ||
+ | width: 100px; | ||
+ | width: -webkit-calc(465px - 100%); | ||
+ | width: calc(465px - 100%); | ||
+ | } | ||
+ | |||
+ | .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> |
Latest revision as of 15:18, 18 September 2015