Difference between revisions of "Template:IIT-Madras/CSS"

Line 1: Line 1:
 
<html>
 
<html>
    <head>
+
<head>
        <style type="text/css">
+
            /* Override default iGEM settings*/
+
  
            .mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul{ margin:0px; }
 
  
            #HQ_page p {  
+
<style type="text/css">
                font-size: 20px;
+
/* Start Removing iGEM Style*/ .mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul{ margin:0px; } #HQ_page p{ font-size: 20px; } #HQ_page .clear{ height:0px; } .clear { clear: both; height:0px; } #sideMenu{ display:none; } #top_title{ display:none; } #content { width: 100%; margin:0px auto; padding:0px; border:none; background:none; } #globalWrapper { width: 100%; padding:0px; margin-top: -25px; } .firstHeading { display:none; } #bodyContent h1, #bodyContent h2{ margin: 0; } /* End Removing iGEM Style */
            }
+
  
            #HQ_page .clear {
 
                height:0px;
 
            }
 
  
            .clear {
+
body{
                clear: both; height:0px;  
+
background: #050505;
            }  
+
color: white;
 +
text-align: center;
 +
padding: 0px;
 +
                        margin: 0px;
 +
}
 +
ul{
 +
list-style-type: none;
 +
padding: 5px;
 +
margin: 0px;
 +
}
 +
li.nav{
 +
display: inline-block;
 +
font-size: 15px;
 +
padding: 8px 16px 8px 16px;
 +
border-left: 5px solid #ffffff;
 +
background: #181818;
 +
border-radius: 1px;
 +
color: #ffffff;
 +
margin: 10px;
 +
font-weight: 200;
 +
}
 +
li.nav:hover{
 +
background: #282828;
 +
}
 +
a,a:visited{
 +
text-decoration: none;
 +
color: inherit;
 +
}
 +
a.nav{
 +
display: inline-block;
 +
min-width: 200px;
 +
text-align: left;
 +
                        text-decoration: none;
 +
}
 +
                img.nav{
 +
                      vertical-align: 0px;
 +
                      margin-right: 5px;
 +
                      filter: brightness(5000%);
 +
                }
 +
a.nav:hover{
 +
cursor: pointer;
 +
cursor: hand;
 +
}
 +
<!-- a.btn{
 +
background: #000f0d;
 +
color: #22ffdd;
 +
border-radius: 3px;
 +
padding: 8px 16px 8px 16px;
 +
font-size: 15px;
 +
letter-spacing: 3px;
 +
font-weight: 200;
 +
                        text-decoration: none;
 +
}
 +
a.btn:hover{
 +
background: #00332b;
 +
} -->
 +
</style>
  
            #sideMenu {
+
            display:none;
+
<script type="text/javascript">
            }
+
function gid(a){
 
+
return document.getElementById(a);
            #top_title{
+
}
            display:none;
+
function setup(){
            }
+
gid('welcome').style.paddingTop = gid('menubar').offsetHeight + 'px';
 
+
}
            #content {
+
function putmenu(){
                width: 100%;
+
gid('menu').style.display = 'block';
                margin:0px auto; 
+
gid('lines').style.display = 'none';
                padding:0px;
+
gid('cross').style.display = 'inline-block';
                border:none;
+
}
                background:none;
+
function cutmenu(){
            }
+
gid('menu').style.display = 'none';
 
+
gid('lines').style.display = 'inline-block';
            #globalWrapper {
+
gid('cross').style.display = 'none';
                width: 100%;
+
}
                padding:10px;
+
</script>
                margin-top: -25px;
+
</head>
            }
+
<body onload="setup()" onresize="setup()">
 
+
<div id="menubar" style="display: block; width: 100%; text-align: left; background: #050505; position: fixed; top: 0px; padding-top: 15px; box-shadow: 0px 2px 4px rgba(5,5,5,0.5); z-index: 20;">
            .firstHeading {
+
<ul style="color: #22ffdd; font-weight: 200; letter-spacing: 2px;">
                display:none;
+
<li class="nav" id="lines" style="border: none; max-width: 120px; background: #050505;"> <a class="nav" onclick="putmenu()">  
            }
+
<img class="nav" src="https://static.igem.org/mediawiki/2016/7/7c/Iitm_menu.png" height="15" width="15"> MENU  
 
+
</a> </li>
            #bodyContent h1, #bodyContent h2{
+
<li class="nav" id="cross" style="display:none; border: none; max-width: 120px; background: #050505;"> <a class="nav" onclick="cutmenu()">  
                margin: 0;
+
<img class="nav" src="https://static.igem.org/mediawiki/2016/3/37/Iitm_close.png" height="15" width="15"> CLOSE  
            }
+
</a> </li>
 
+
</ul>
            /* End override of default iGEM*/
+
<ul id="menu" style="display: none; padding-bottom: 30px;">
 
+
<li class="nav"> <a class="nav" href="https://2016.igem.org/Team:IIT-Madras">  
 
+
<img class="nav" src="https://static.igem.org/mediawiki/2016/b/b4/Iitm_home.png" height="15" width="15"> HOME  
            <!-- @font-face{
+
</a> </li>
                src: url(https://static.igem.org/mediawiki/2016/b/b1/LatoRegular.ttf;
+
<li class="nav"> <a class="nav" href="https://2016.igem.org/Team:IIT-Madras/Team">  
                font-family: "LatoReg";
+
<img class="nav" src="https://static.igem.org/mediawiki/2016/d/db/Iitm_team.png" height="15" width="15"> TEAM
            }
+
</a> </li>
 
+
<li class="nav"> <a class="nav" href="https://2016.igem.org/Team:IIT-Madras/Description">  
            @font-face{
+
<img class="nav" src="https://static.igem.org/mediawiki/2016/6/6e/Iitm_project.png" height="15" width="15"> PROJECT
                src: url(https://2016.igem.org/File:LatoRegular.ttf);
+
</a> </li>
                font-family: C;
+
<li class="nav"> <a class="nav" href="https://2016.igem.org/Team:IIT-Madras/Parts">  
            } -->
+
<img class="nav" src="https://static.igem.org/mediawiki/2016/f/f8/Iitm_parts.png" height="15" width="15"> PARTS
 
+
</a> </li>
            body{
+
                        <li class="nav"> <a class="nav" href="https://2016.igem.org/Team:IIT-Madras/Measurement">  
                background: #050505;
+
<img class="nav" src="https://static.igem.org/mediawiki/2016/f/fd/Iitm_measurements.png" height="15" width="15"> MEASUREMENTS
                color: white;
+
</a> </li>
                font-family: "Helvetica";
+
                        <li class="nav"> <a class="nav" href="https://2016.igem.org/Team:IIT-Madras/Model">  
                text-align: center;
+
<img class="nav" src="https://static.igem.org/mediawiki/2016/4/45/Iitm_model.png" height="15" width="15"> MODEL
                padding: 0px;
+
</a> </li>
                margin: 0px;
+
<li class="nav"> <a class="nav" href="https://2016.igem.org/Team:IIT-Madras/Safety">  
            }
+
<img class="nav" src="https://static.igem.org/mediawiki/2016/d/d0/Iitm_safety.png" height="15" width="15"> SAFETY
 
+
</a> </li>
            ul{
+
<li class="nav"> <a class="nav" href="https://2016.igem.org/Team:IIT-Madras/Attributions">  
                list-style-type: none;
+
<img class="nav" src="https://static.igem.org/mediawiki/2016/3/36/Iitm_attributions.png" height="15" width="15"> ATTRIBUTIONS
                padding: 5px;
+
</a> </li>
                margin: 0px;
+
<li class="nav"> <a class="nav" href="https://2016.igem.org/Team:IIT-Madras/Human_Practices">  
            }
+
<img class="nav" src="https://static.igem.org/mediawiki/2016/9/94/Iitm_humanpractices.png" height="15" width="15"> HUMAN PRACTICES
 
+
</a> </li>
            li.nav{
+
                        <li class="nav"> <a class="nav" href="https://2016.igem.org/Team:IIT-Madras/Interlabstudy">  
                display: inline-block;
+
<img class="nav" src="https://static.igem.org/mediawiki/2016/b/b8/Iitm_interlab.png" height="15" width="15"> INTERLAB STUDY
                font-size: 15px;
+
</a> </li>
                padding: 8px 16px 8px 16px;
+
<li class="nav"> <a class="nav" href="https://2016.igem.org/Team:IIT-Madras/Entrepreneurship">  
                border-left: 5px solid #ffffff;
+
<img class="nav" src="https://static.igem.org/mediawiki/2016/6/6f/Iitm_awards.png" height="15" width="15"> AWARDS
                background: #181818;
+
</a> </li>
                border-radius: 1px;
+
                color: #ffffff;
+
</ul>
                margin: 10px;
+
</div>
                font-weight: 200;
+
            }
+
 
+
            li.nav:hover{
+
                background: #282828;
+
            }
+
 
+
            a,a:visited{
+
                text-decoration: none;
+
                color: inherit;
+
            }
+
 
+
            a.nav{
+
                display: inline-block;
+
                min-width: 150px;
+
                text-align: left;
+
                text-decoration: none;
+
            }
+
 
+
            img.nav{
+
              vertical-align: 0px;
+
              margin-right: 5px;
+
              filter: brightness(5000%);
+
            }
+
 
+
            a.nav:hover{
+
                cursor: pointer;
+
                cursor: hand;
+
            }
+
            #footer{
+
              position:absolute;
+
              bottom:0;
+
              width:100%;
+
              display: block;
+
              background: #050505;
+
              margin: 0px;
+
              padding: 30px;
+
              text-align: justify;
+
              border: none;
+
              box-shadow: 0px -2px 4px rgba(5,5,5,0.5);
+
              z-index:25;
+
            }
+
           
+
        </style>
+
 
+
        <script type="text/javascript">
+
            function gid(a){
+
                return document.getElementById(a);
+
            }
+
            function setup(){
+
                gid('welcome').style.paddingTop = gid('menubar').offsetHeight + 'px';
+
            }
+
            function putmenu(){              
+
                gid('menu').style.display = 'block';
+
                gid('lines').style.display = 'none';
+
                gid('cross').style.display = 'inline-block';
+
            }
+
            function cutmenu(){
+
                gid('menu').style.display = 'none';
+
                gid('lines').style.display = 'inline-block';
+
                gid('cross').style.display = 'none';
+
            }
+
        </script>
+
    </head>
+
 
+
    <body onload="setup()" onresize="setup()">
+
        <div id="menubar" style="display: inline-block; width: 100%; text-align: left; background: #050505; position: fixed; top: 0px; padding-top: 15px; box-shadow: 0px 2px 4px rgba(5,5,5,0.5); z-index: 20;">
+
            <ul style="color: #22ffdd; font-weight: 200; letter-spacing: 2px;">
+
                <li class="nav" id="lines" style="border: none; max-width: 120px; background: #050505;">  
+
                    <a class="nav" onclick="putmenu()">  
+
                        <img class="nav" src="https://static.igem.org/mediawiki/2016/7/7c/Iitm_menu.png" height="15" width="15"> MENU  
+
                    </a>  
+
                </li>
+
                <li class="nav" id="cross" style="display:none; border: none; max-width: 120px; background: #050505;">  
+
                    <a class="nav" onclick="cutmenu()">  
+
                        <img class="nav" src="https://static.igem.org/mediawiki/2016/3/37/Iitm_close.png" height="15" width="15"> CLOSE  
+
                    </a>
+
                </li>
+
            </ul>
+
            <ul id="menu" style="display: none; padding-bottom: 30px;">
+
                <li class="nav">  
+
                    <a class="nav" href="https://2016.igem.org/Team:IIT-Madras">  
+
                        <img class="nav" src="https://static.igem.org/mediawiki/2016/b/b4/Iitm_home.png" height="15" width="15"> HOME  
+
                    </a>  
+
                </li>
+
                <li class="nav">  
+
                    <a class="nav" href="https://2016.igem.org/Team:IIT-Madras/Team">  
+
                        <img class="nav" src="https://static.igem.org/mediawiki/2016/d/db/Iitm_team.png" height="15" width="15"> TEAM
+
                    </a>  
+
                </li>
+
                <li class="nav">  
+
                    <a class="nav" href="https://2016.igem.org/Team:IIT-Madras/Description">  
+
                        <img class="nav" src="https://static.igem.org/mediawiki/2016/6/6e/Iitm_project.png" height="15" width="15"> PROJECT
+
                    </a>  
+
                </li>
+
                <li class="nav">  
+
                    <a class="nav" href="https://2016.igem.org/Team:IIT-Madras/Parts">  
+
                    <img class="nav" src="https://static.igem.org/mediawiki/2016/f/f8/Iitm_parts.png" height="15" width="15"> PARTS
+
                    </a>
+
                </li>
+
                <li class="nav">
+
                    <a class="nav" href="https://2016.igem.org/Team:IIT-Madras/Measurement">  
+
                        <img class="nav" src="https://static.igem.org/mediawiki/2016/f/fd/Iitm_measurements.png" height="15" width="15"> MEASUREMENTS
+
                    </a>  
+
                </li>
+
                <li class="nav">  
+
                    <a class="nav" href="https://2016.igem.org/Team:IIT-Madras/Model">  
+
                        <img class="nav" src="https://static.igem.org/mediawiki/2016/4/45/Iitm_model.png" height="15" width="15"> MODEL
+
                    </a>  
+
                </li>
+
                <li class="nav">  
+
                    <a class="nav" href="https://2016.igem.org/Team:IIT-Madras/Safety">  
+
                        <img class="nav" src="https://static.igem.org/mediawiki/2016/d/d0/Iitm_safety.png" height="15" width="15"> SAFETY
+
                    </a>  
+
                </li>
+
                <li class="nav">  
+
                    <a class="nav" href="https://2016.igem.org/Team:IIT-Madras/Attributions">  
+
                        <img class="nav" src="https://static.igem.org/mediawiki/2016/3/36/Iitm_attributions.png" height="15" width="15"> ATTRIBUTIONS
+
                    </a>  
+
                </li>
+
                <li class="nav">
+
                    <a class="nav" href="https://2016.igem.org/Team:IIT-Madras/Human_Practices">  
+
                        <img class="nav" src="https://static.igem.org/mediawiki/2016/9/94/Iitm_humanpractices.png" height="15" width="15"> HUMAN PRACTICES
+
                    </a>  
+
                </li>
+
                <li class="nav">  
+
                    <a class="nav" href="https://2016.igem.org/Team:IIT-Madras/Interlabstudy">  
+
                        <img class="nav" src="https://static.igem.org/mediawiki/2016/b/b8/Iitm_interlab.png" height="15" width="15"> INTERLAB STUDY
+
                    </a>  
+
                </li>
+
                <li class="nav">
+
                    <a class="nav" href="https://2016.igem.org/Team:IIT-Madras/Entrepreneurship">  
+
                        <img class="nav" src="https://static.igem.org/mediawiki/2016/6/6f/Iitm_awards.png" height="15" width="15"> AWARDS
+
                    </a>  
+
                </li>
+
            </ul>
+
        </div>
+
 
+
        <div id="footer">
+
            <h1 style="font-weight: 200; font-size: 30px;  letter-spacing: 3px; color:white;">
+
                Contact Us
+
            </h1>
+
                <br>
+
            <ul>
+
                <li style="display: inline-block; margin: 0px 0px 0px 20px; background: none; border: none; ">
+
                    <br>
+
                    <img src="https://static.igem.org/mediawiki/2016/c/c1/Iitm_place.png" width=50 height=50>
+
                </li>
+
                <li style="display: inline-block; vertical-align: top; font-size: 20px; color: white; font-weight: 200; padding-left: 0px; max-width: 500px; text-align: justify; background: none; border: none; line-height: 150%;">
+
                    Department of Biotechnology<br>
+
                    Bhupati & Jyoti Mehta School of Biosciences<br>
+
                    Indian Institute of Technology Madras<br>
+
                    Chennai 600036
+
                </li>
+
                <li style="display: inline-block; margin: 0px 0px 0px 20px; background: none; border: none; ">
+
                    <br>
+
                    <img src="https://static.igem.org/mediawiki/2016/2/23/Iitm_mail.png" width=50 height=50>
+
                </li>
+
                <li style="display: inline-block; vertical-align: top; font-size: 20px; color: white; font-weight: 200; padding-left: 0px; max-width: 500px; text-align: justify; background: none; border: none;  line-height: 150%;">
+
                    <br>
+
                    igemiitm16@gmail.com
+
                </li>
+
            </ul>
+
        </div>
+
    </body>
+
</html>
+

Revision as of 18:04, 4 October 2016