Difference between revisions of "Template:Elanvitalkorea"

 
(23 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
{{ElanVitalKoreaMWlook}}
 +
 
<html>
 
<html>
 +
<head>
 +
<style>
 +
html, body, .wrapper{       
 +
        width: 100%;
 +
        height: 100%;
 +
        background-color: transparent;
 +
    }
  
−
<!-- Start of CSS-->
+
#cssmenu {padding: 0; margin: 0; border: 0; text-align:center;}
−
<style type="text/css">
+
#cssmenu ul, #cssmenu li {list-style: none; margin: 0; padding: 0;}
 +
#cssmenu ul {position: relative; z-index: 597; display:inline-block; list-style:none;}
 +
#cssmenu ul li { float: left; min-height: 1px; vertical-align: middle;}
 +
#cssmenu ul li.hover,
 +
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;}
 +
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%;}
 +
#cssmenu ul ul li {float: none;}
 +
#cssmenu ul ul ul {top: 0; left: auto; right: -99.5%; }
 +
#cssmenu ul li:hover > ul { visibility: visible;}
 +
#cssmenu ul ul {bottom: 0; left: 0;}
 +
#cssmenu ul ul {margin-top: 0; }
 +
#cssmenu ul ul li {font-weight: normal;}
 +
#cssmenu a { display: block; line-height: 1em; text-decoration: none; }
  
−
/* Creates a container that will wrap all of the content inside your wiki pages. */
 
−
#mainContainer { 
 
−
width: 100%
 
−
overflow: hidden;
 
−
float:left;
 
−
margin-left: 20px;
 
−
}
 
−
 
−
 
−
 
−
 
−
/*Change the styling of tables */
 
−
        #contentContainer table {
 
−
    border: 1px solid #0e232f;
 
−
    border-collapse: collapse;
 
−
    width: 90%
 
−
    margin: auto;
 
−
    margin-bottom: 15px;
 
−
    margin-top: 15px;
 
−
    margin-right: 10px;
 
−
    margin-left: 10px;
 
−
    }
 
−
 
−
/*Change the styling of table cells*/
 
−
    #contentContainer  td {
 
−
    padding: 10px;
 
−
    border: 1px solid #0e232f;
 
−
    border-collapse: collapse;
 
−
    vertical-align: text-top;
 
−
    background-color: #EEEDEA;
 
−
    }
 
−
 
−
/*Change the styling of table headers */
 
−
    #contentContainer th {
 
−
    padding: 10px;
 
−
    border: 1px solid #0e232f;
 
−
    border-collapse: collapse;
 
−
    vertical-align: text-top;
 
−
    background-color: #e8d5b7;
 
−
    }
 
−
 
−
 
−
 
−
#cssmenu {
 
−
  padding: 0;
 
−
  margin: 0;
 
−
  border: 0;
 
−
  width: auto;
 
−
}
 
−
#cssmenu ul,
 
 
#cssmenu li {
 
#cssmenu li {
−
  list-style: none;
+
text-align:left;
−
  margin: 0;
+
−
  padding: 0;
+
−
}
+
−
#cssmenu ul {
+
−
  position: relative;
+
−
  z-index: 597;
+
−
  margin-left: auto;
+
−
  margin-bottom: 0;
+
−
  margin-right: auto;
+
−
  margin-top: 0px;
+
−
  clear:left;
+
−
  float:left;
+
−
float:right;
+
−
margin:0;
+
−
  padding:0;
+
−
  right:37%;
+
−
}
+
−
#cssmenu ul li {
+
−
  float: left;
+
−
  min-height: 1px;
+
−
  verticalalign: middle;
+
 
}
 
}
  
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
#cssmenu > ul > li {
 
−
    display:inline-block;
 
−
    margin-left: 15px;      /* This is when the drop down box appears */
 
−
    position: relative;
 
−
}
 
−
 
−
 
−
 
−
 
−
 
−
#cssmenu ul li.hover,
 
−
#cssmenu ul li:hover {
 
−
  position: relative;
 
−
  z-index: 599;
 
−
  cursor: default;
 
−
}
 
−
#cssmenu ul ul {
 
−
  visibility: hidden;
 
−
  position: absolute;
 
−
  top: 100%;
 
−
  left: 0;
 
−
  z-index: 598;
 
−
  width: 100%;
 
−
}
 
−
#cssmenu ul ul li {
 
−
  float: none;
 
−
}
 
−
#cssmenu ul ul ul {
 
−
  top: 0;
 
−
  left: 190px;
 
−
  width: 190px;
 
−
}
 
−
#cssmenu ul li:hover > ul {
 
−
  visibility: visible;
 
−
}
 
−
#cssmenu ul ul {
 
−
  bottom: 0;
 
−
  left: 0;
 
−
}
 
−
#cssmenu ul ul {
 
−
  margin-top: 0;
 
−
}
 
−
#cssmenu ul ul li {
 
−
  font-weight: normal;
 
−
}
 
−
#cssmenu a {
 
−
  display: block;
 
−
  line-height: 1em;
 
−
  text-decoration: none;
 
−
}
 
−
/* Custom CSS Styles */
 
 
#cssmenu {
 
#cssmenu {
−
   background: #333333;
+
   background: #333;
 
   border-bottom: 4px solid #1b9bff;
 
   border-bottom: 4px solid #1b9bff;
 
   font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
 
   font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
 
   font-size: 12px;
 
   font-size: 12px;
 
}
 
}
−
#cssmenu > ul {
+
 
−
  *display: inline-block;
+
  #cssmenu > ul { *display: inline-block; }
−
}
+
 
−
#cssmenu:after,
+
  #cssmenu:after, #cssmenu ul:after {
−
#cssmenu ul:after {
+
    content: '';
−
  content: '';
+
    display: block;
−
  display: block;
+
    clear: both;
−
  clear: both;
+
−
}
+
−
#cssmenu ul {
+
−
  text-transform: uppercase;
+
−
}
+
−
#cssmenu ul ul {
+
−
  border-top: 4px solid #1b9bff;
+
−
  text-transform: none;
+
−
  min-width: 190px;
+
−
}
+
−
#cssmenu ul ul a {
+
−
  background: #1b9bff;
+
−
  color: #ffffff;
+
−
  border: 1px solid #0082e7;
+
−
  border-top: 0 none;
+
−
  line-height: 150%;
+
−
  padding: 16px 20px;
+
−
  font-size: 12px;
+
−
}
+
−
#cssmenu ul ul ul {
+
−
  border-top: 0 none;
+
−
}
+
−
#cssmenu ul ul li {
+
−
  position: relative;
+
−
}
+
−
#cssmenu ul ul li:first-child > a {
+
−
  border-top: 1px solid #0082e7;
+
−
}
+
−
#cssmenu ul ul li:hover > a {
+
−
  background: #4eb1ff;
+
−
  color: #ffffff;
+
−
}
+
−
#cssmenu ul ul li:last-child > a {
+
−
  -moz-border-radius: 0 0 3px 3px;
+
−
  -webkit-border-radius: 0 0 3px 3px;
+
−
  border-radius: 0 0 3px 3px;
+
−
  -moz-background-clip: padding;
+
−
  -webkit-background-clip: padding-box;
+
−
  background-clip: padding-box;
+
−
  -moz-box-shadow: 0 1px 0 #1b9bff;
+
−
  -webkit-box-shadow: 0 1px 0 #1b9bff;
+
−
  box-shadow: 0 1px 0 #1b9bff;
+
−
}
+
−
#cssmenu ul ul li:last-child:hover > a {
+
−
  -moz-border-radius: 0 0 0 3px;
+
−
  -webkit-border-radius: 0 0 0 3px;
+
−
  border-radius: 0 0 0 3px;
+
−
  -moz-background-clip: padding;
+
−
  -webkit-background-clip: padding-box;
+
−
  background-clip: padding-box;
+
−
}
+
−
#cssmenu ul ul li.has-sub > a:after {
+
−
  content: '+';
+
−
  position: absolute;
+
−
  top: 50%;
+
−
  right: 15px;
+
−
  margin-top: -8px;
+
−
}
+
−
#cssmenu ul li:hover > a,
+
−
#cssmenu ul li.active > a {
+
−
  background: #1b9bff;
+
−
  color: #ffffff;
+
−
}
+
−
#cssmenu ul li.has-sub > a:after {
+
−
  content: '+';
+
−
  margin-left: 5px;
+
−
}
+
−
#cssmenu ul li.last ul {
+
−
  left: auto;
+
−
  right: 0;
+
−
}
+
−
#cssmenu ul li.last ul ul {
+
−
  left: auto;
+
−
  right: 99.5%;
+
 
}
 
}
 +
 
#cssmenu a {
 
#cssmenu a {
−
  background: #333333;
+
    background: #333;
−
  color: #CBCBCB;
+
    color: #CBCBCB;
−
  padding: 0 20px;
+
    padding: 0 20px;
−
}
+
−
#cssmenu > ul > li > a {
+
−
  line-height: 48px;
+
−
  font-size: 12px;
+
−
}
+
−
body {
+
−
    background-position: 9% 0%;
+
−
background-repeat: no-repeat;
+
 
}
 
}
 +
#cssmenu ul { text-transform: uppercase; }
  
−
div.column {
+
    #cssmenu ul ul {
−
  max-width: 800px;
+
      border-top: 4px solid #1b9bff;
 +
      text-transform: none;
 +
      min-width: 190px;
 
}
 
}
−
 
+
      #cssmenu ul ul a {
−
figure.fixedratio {
+
        background: #1b9bff;
−
  padding-top: 56.25%; /* 450px/800px = 0.5625 */
+
        color: #FFF;
 +
        border: 1px solid #0082e7;
 +
        border-top: 0 none;
 +
        line-height: 150%;
 +
        padding: 16px 20px;
 
}
 
}
 +
      #cssmenu ul ul ul { border-top: 0 none; }
  
−
figure.fixedratio {
+
      #cssmenu ul ul li { position: relative }
−
  padding-top: 10%;  /* slope */
+
−
  height: 120px;  /* start height */
+
−
  background-image: url('https://static.igem.org/mediawiki/2015/2/24/ElanVital_Bg.png');
+
−
  background-size: cover;
+
−
  -moz-background-size: cover;  /* Firefox 3.6 */
+
−
  background-position: center;  /* Internet Explorer 7/8 */
+
−
}
+
  
 +
#cssmenu > ul > li > a { line-height: 48px;  }
  
−
IMG.displayed {
+
#cssmenu ul ul li:first-child > a { border-top: 1px solid #0082e7; }
−
    display: block;
+
        #cssmenu ul ul li:hover > a { background: #35a6ff; }
−
    margin-left: auto;
+
−
    margin-right: auto;
+
−
    margin-top: 10%;
+
−
}
+
  
−
IMG.scrollarrow {
+
        #cssmenu ul ul li:last-child > a {
−
    display: block;
+
          border-radius: 0 0 3px 3px;
−
    margin-left: auto;
+
          box-shadow: 0 1px 0 #1b9bff;
−
    margin-right: auto;
+
−
    margin-bottom: 10%;
+
 
}
 
}
 +
        #cssmenu ul ul li:last-child:hover > a { border-radius: 0 0 0 3px; }
  
−
h3.scrolltext {
+
        #cssmenu ul ul li.has-sub > a:after {
−
margin-top:7%;
+
          content: '+';
 +
          position: absolute;
 +
          top: 50%;
 +
          right: 15px;
 +
          margin-top: -8px;
 
}
 
}
  
−
 
+
    #cssmenu ul li:hover > a, #cssmenu ul li.active > a {
−
h3 {
+
      background: #1b9bff;
−
color:white;
+
      color: #FFF;
 +
}
 +
    #cssmenu ul li.has-sub > a:after {
 +
      content: '+';
 +
      margin-left: 5px;
 +
}
 +
    #cssmenu ul li.last ul {
 +
      left: auto;
 +
      right: 0;
 +
}
 +
      #cssmenu ul li.last ul ul {
 +
        left: auto;
 +
        right: 99.5%;
 
}
 
}
  
Line 283: Line 107:
 
</style>
 
</style>
  
−
<head>
 
−
  <meta charset='utf-8'>
 
−
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
−
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
−
  <link rel="stylesheet" href="styles.css">
 
−
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
 
−
  <script src="script.js"></script>
 
 
</head>
 
</head>
 +
 
<body>
 
<body>
−
 
−
 
−
<div class="column">
 
−
  <figure class="fixedratio"></figure>
 
−
</div>
 
−
 
−
 
−
 
  
 
<div id='cssmenu'>
 
<div id='cssmenu'>
−
<ul>
+
  <ul>
−
  <li><a href='#'><span>Team</span></a>
+
     <li class='has-sub'><a href='#'>Team</a>
−
     <ul>
+
        <ul>
−
        <li><a href='https://2015.igem.org/Team:elan_vital_korea/Members'><span>Members</span></a>
+
          <li><a href='#'>Members</a>
−
        <li><a href='https://2015.igem.org/Team:elan_vital_korea/Attribution'><span>Attribution</span></a>
+
          <li><a href='#'>Attribution</a>
−
    </ul>
+
        </ul>
−
  <li><a href='#'><span>Projects</span></a>
+
     <li class='has-sub'><a href='#'>Project</a>
−
    <ul>
+
        <ul>
−
        <li><a href='https://2015.igem.org/Team:elan_vital_korea/Project_Overview><span>Project Overview</span></a>
+
          <li><a href='#'>Project Overview</a>
−
        <li><a href='https://2015.igem.org/Team:elan_vital_korea/Background_Information'><span>Background Information</span></a>
+
          <li><a href='#'>Background Information</a>
−
        <li class='active has-sub'><a href='#'><span>Method & Materials</span></a>
+
          <li class='has-sub '><a>Method & Materials</a>
−
            <ul>
+
              <ul>
−
              <li><a href='https://2015.igem.org/Team:elan_vital_korea/Plasma_Design'><span>Plasma Design</span></a></li>
+
                <li><a href='#'>Plasmid Design</a></li>
−
              <li class='last'><a href='https://2015.igem.org/Team:elan_vital_korea/Protocal1'><span>Protocal</span></a></li>
+
                <li><a href='#'>Protocols</a></li>
−
            </ul>
+
              </ul>
−
        <li><a href='#'><span>Result</span></a>
+
          <li><a href='#'>Result</a>
−
        <li><a href='#'><span>Future Plans</span></a>
+
          <li><a href='#'>Conclusions</a>
−
    </ul>
+
          <li><a href='#'>Future Plans</a>
−
        <li><a href='#'><span>Web Lab</span></a>
+
−
     <ul>
+
−
        <li><a href='#'><span>Notebook</span></a>
+
−
        <li><a href='#'><span>Protocal</span></a>
+
−
        <li><a href='#'><span>Safety</span></a>
+
−
    </ul>
+
−
  <li><a href='#'><span>Human Practice</span></a>
+
−
    <ul>
+
−
        <li><a href='#'><span>Focus</span></a>
+
−
        <li><a href='#'><span>Korea Youth Expo</span></a>
+
−
        <li><a href='#'><span>Education Public Awareness</span></a>
+
−
        <li><a href='#'><span>Policy Recommnedations</span></a>
+
−
        <li><a href='#'><span>Blog</span></a>
+
−
        <li><a href='#'><span>Interview</span></a>
+
−
        <li><a href='#'><span>Regional Meet-ups</span></a>
+
−
        <li><a href='#'><span>Articles</span></a>
+
−
        <li><a href='#'><span>Vdieo</span></a>
+
−
        <li><a href='#'><span>Presentations</span></a>
+
−
    </ul>
+
−
  <li><a href='#'><span>iGEM Resource</span></a>
+
−
    <ul>
+
−
        <li><a href='#'><span>Medal Requirement</span></a>
+
−
        <li><a href='#'><span>Module Description</span></a>
+
−
    </ul>
+
 
</ul>
 
</ul>
−
</div>
+
</li>
  
 +
    <li class='has-sub'><a href='#'>Wetlab</a>
 +
        <ul>
 +
          <li><a href='#'>Notebook</a>
 +
          <li><a href='#'>Protocal</a>
 +
          <li><a href='#'>Safety</a>
 +
</ul>
 +
</li>
  
 +
    <li class='has-sub'><a href='#'>Human Practice</a>
 +
        <ul>
 +
          <li><a href='#'>Focus</a>
 +
          <li><a href='#'>Korea Youth Expo</a>
 +
          <li><a href='#'>Education & Public Awareness</a>
 +
          <li><a href='#'>Policy Recommendations</a>
 +
          <li><a href='#'>Blog</a>
 +
          <li><a href='#'>Interview</a>
 +
          <li><a href='#'>Regional Meet-ups</a>
 +
          <li><a href='#'>Articles</a>
 +
          <li><a href='#'>Video</a>
 +
          <li><a href='#'>Presentations</a>
 +
</ul>
 +
</li>
  
−
<a href="https://2015.igem.org/Team:elan_vital_korea"><img class="displayed" src="https://static.igem.org/mediawiki/2015/d/d5/ElanVital_Logo.png" style="max-width:100%;height:auto;" align="middle"></a>
+
    <li class='has-sub'><a href='#'>iGEM Resource</a>
−
 
+
        <ul>
−
<br>
+
          <li><a href='#'>Medal Requirement</a>
−
<br>
+
          <li><a href='#'>Module Description</a>
−
 
+
  </ul>
−
<h3 class="scrolltext" align="middle"> Scroll down to find out more </h3>
+
</li>
−
<a href="#pagedown"><img class="scrollarrow" src="https://static.igem.org/mediawiki/2015/d/d2/Scroll_arrow.png" style="max-width:100%, height:auto;" align="middle"></a>
+
−
 
+
−
<br>
+
−
<br>
+
−
<br>
+
−
<br>
+
−
<div id="pagedown">
+
 
</div>
 
</div>
  
−
<script>
 
−
$(document).ready(function(){
 
−
$('a[href^="#"]').on('click',function (e) {
 
−
    e.preventDefault();
 
  
−
    var target = this.hash;
+
</body>
−
    var $target = $(target);
+
  
−
    $('html, body').stop().animate({
+
</html>
−
        'scrollTop': $target.offset().top
+
−
    }, 900, 'swing', function () {
+
−
        window.location.hash = target;
+
−
    });
+
−
});
+
−
});
+
−
</script>
+
−
 
+
−
<html>
+

Latest revision as of 11:19, 31 August 2015