Difference between revisions of "Template:NYMU-sheet"

(Created page with "<html> <style> OVERRIDE IGEM SETTINGS ----------------------------------------------: #contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .fir...")
 
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>

Revision as of 17:54, 1 August 2016