Difference between revisions of "Template:RHIT"

 
(405 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
<script>
+
<style>
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
/* Hide first heading */
  
$(document).ready(function() {
 
 
$("#HQ_page").attr('id','');
 
 
 
 +
/*-- Remove borders, float content left and remove padding/margin */
 +
#globalWrapper, #content{
 +
background-color: white;
 +
border: 0px;
 +
float: left;
 +
margin:0px;
 +
padding: 0px;
 +
}
  
//highlight current page on the menu
+
/* Change Background color*/
highlight_current_page_menu();
+
body {  
+
background-color: #e0fdfc;
//accessing submenus
+
                             
$(".menu_item").click(function(){
+
}
$(".submenu_control_icon", this).toggleClass("open");
+
$(this).next(".submenu").fadeToggle(400);
+
});
+
+
//mobile menu access
+
$(".igem_2018_team_mobile_bar").click(function(){
+
$(this).next().toggleClass("displaying_menu");
+
});
+
+
});
+
  
 
+
/*left align Black Menu Bar */
function highlight_current_page_menu() {
+
#top_menu_inside {  
+
margin-left: 20px;  
var page_url="https://2018.igem.org/";
+
page_url = page_url + wgPageName;
+
$("a[href$='"+ page_url +"']").children().addClass("current_page");
+
+
//if the page is in a submenu, open the submenu and make the appropiate changes
+
if( $( ".current_page" ).hasClass( "submenu_item" )){
+
+
$(".current_page").parent().parent().fadeToggle(400);
+
$(".current_page").parent().parent().prev().addClass("current_page");
+
$(".menu_item.current_page > .submenu_control_icon").toggleClass("open");
+
+
 
}
 
}
}
+
                 
 +
                  .bottles{
 +
                          position:absolute;
 +
                          width: 40px;
 +
                            }
  
  
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
<style type="text/css">
</script>
+
/* Hide first heading */
 +
.firstHeading {
 +
display: none;
 +
}
 +
 +
/*-- Remove borders, float content left and remove padding/margin */
 +
#globalWrapper,#content{
 +
background-color: black;
 +
                                position: absolute;
 +
                                top:9px;
 +
                                left: 48.6%;
 +
                                margin-right: -51.4%;
 +
                                transform: translate(-50%, -50%);
 +
                                -webkit-transform: translate(-50%, -50%);
 +
}
  
 +
/*left align Black Menu Bar */
 +
#top_menu_inside {
 +
margin-left: auto;
 +
                                margin-right: auto;
 +
}
  
<style>
+
/* PAGE LAYOUT */
/**************************************************************************************************************************************************************************************************/
+
  
 +
/* Change Background color*/
 +
body {
 +
background: url("https://static.igem.org/mediawiki/2018/9/97/T--RHIT--ROCKS.jpg");
 +
                                background-size: 100%;
 +
                                background-repeat: no-repeat;
 +
                                background-attachment: fixed;
 +
}
  
 +
/* Creates a container that will wrap all of the content inside your wiki pages. */
 +
#mainContainer { 
 +
width:113.75%;
 +
overflow:hidden;
 +
        padding-top:0px;
 +
                                position:absolute;
 +
                                top:350px;
 +
                                padding-bottom: 200px;
 +
                                text-align:left;
 +
              background-color:#E0FDFC;
 +
font-family: "Arial", Helvetica, sans-serif;                     
 +
                                          }
  
/**************************************************************************************************************************************************************************************************/
+
                  #contentContainer {
/* DEFAULT WIKI SETTINGS */
+
                             
/**************************************************************************************************************************************************************************************************/
+
                                padding-top:5%;
 +
                                padding-left:2%;
 +
                                padding-right:3%;
 +
                                padding-bottom: 200px;
 +
                                width: 110%;
 +
                                float:left;
 +
                                background-color:#E0FDFC;
 +
                                font-family: "Arial", Helvetica, sans-serif;
 +
                                      }
 +
/*Set up height place holder for the banner*/
 +
#bannerContainer {
 +
height:20%;
 +
                                width:97%; 
 +
                                position: absolute;
 +
                                float:left;
 +
                                display:block;
 +
                                max-width:1400px;
 +
                                z-index:1;
 +
                  }
  
 +
/*Styling for text and links*/
  
#home_logo, #sideMenu { display:none; }
+
                #mainContainer p {  
#sideMenu, #top_title, .patrollink  {display:none;}
+
font-size: 16px;
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
+
                font-family: Arial, Helvetica, sans-serif;
body {background-color:white; }
+
                padding: 5px 0px;
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
                text-align: left;
 +
                  }  
  
.judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;}
 
  
 
+
/* styling for the titles h1, h2, h3, h4, h5, h6*/
/**************************************************************************************************************************************************************************************************/
+
#contentContainer h1, #contentContainer h2, #contentContainer h3 {
/* MENU */
+
border-bottom:0px;  
/**************************************************************************************************************************************************************************************************/
+
font-family: "Arial Black", Gadget, sans-serif;
 
+
padding: 5px 0px;
/*this wraps the whole of the menu*/
+
                font-size: 150%
.igem_2018_team_menu {  
+
background-color:#c4baba;
+
border-left: 1px solid #c4baba;
+
display:block;
+
float:right;
+
height:100vh;  
+
max-width: 270px;
+
overflow-y: auto;
+
overflow-x: hidden;
+
padding:0px;
+
position:fixed;
+
right:0%;
+
text-align:left;
+
width: 15%;
+
 
}
 
}
  
 
+
#contentContainer h4
.igem_2018_team_menu.displaying_menu{
+
{  
display:block;
+
border-bottom:0px;  
 +
font-family: "Elephant", Gadget, sans-serif;
 +
padding: 10px 0px;
 +
                font-size: 200%
 +
}                                              
 +
        #contentContainer h5
 +
        {
 +
border-bottom:0px;
 +
color: #51A8A5; 
 +
font-family: "Elephant", Gadget, sans-serif;
 +
padding: 10px 0px;
 +
                font-size: 200%
 
}
 
}
 
+
#contentContainer h6
.igem_2018_team_menu  a {
+
        {  
color: #484848;
+
border-bottom:0px;  
text-decoration:none;
+
font-family: "Niagra Solid", Gadget, sans-serif;
 +
padding: 5px 0px;
 +
                font-size: 130%
 
}
 
}
  
.igem_2018_team_menu img {
 
width:100%;
 
}
 
  
  
.igem_2018_team_menu .menu_item {
 
    background-color: #c4baba;
 
    border-bottom: 1px solid #928b8b;
 
    clear: both;
 
color: #484848;
 
    cursor: pointer;
 
float: left;
 
    font-size: 120%;
 
    font-weight: bold;
 
    padding: 15px 0px 15px 5%;
 
  width: 100%;
 
}
 
  
.igem_2018_team_menu .menu_item.direct_link {
+
/*Style of the links - links are different inside the menu */
color: #484848;
+
      a {  
padding-left: 15%;
+
                color: #078c96;
}
+
font-weight: bold;  
.igem_2018_team_menu .menu_item:hover {
+
text-decoration-color:#078c96;
background-color: #ecb656;
+
transition: all 0.4s ease;
}
+
-webkit-transition: all 0.4s ease;
 +
-moz-transition: all 0.4s ease;
 +
-ms-transition: all 0.4s ease;
 +
-o-transition: all 0.4s ease;  
 +
                    }
  
 +
/* Styling links on hover- links are different inside the menu */
 +
    a:hover {
 +
color: #3bd3a8;
 +
text-decoration:none;
 +
                          }
  
.igem_2018_team_menu .menu_item .submenu_control_icon {
+
/*Change the styling of tables */
color: #484848;
+
    #contentContainer table {
float: left;
+
border: 1px solid #000000;  
width: 10%;
+
border-collapse: collapse;
}
+
font-size: 130%;
 +
width: 100%;  
 +
                        }
  
/* submenu icon "+"  "-"*/
+
/*Change the styling of table cells*/
.igem_2018_team_menu .menu_item .submenu_control_icon::before {
+
    #contentContainer  td {
content: "+";  
+
border: 1px solid #000000;
}
+
border-collapse: collapse;
 +
                background-color: #c8ff9e;
 +
font-size: 100%;
 +
padding: 10px;
 +
                line-height:30px;
 +
                text-align:center;
 +
                      }
  
/* submenu icon "+"  "-"*/
+
/*Change the styling of table headers */
.igem_2018_team_menu .menu_item .submenu_control_icon.open::before {
+
    #contentContainer th {
content: "-";  
+
background-color:#7ed7db;
 +
border: 1px solid #000000;
 +
border-collapse: collapse;
 +
font-size: 100%;
 +
padding: 10px 20px;
 +
                text-align: center;
 
}
 
}
 +
/*links*/
 +
                        a:link { color:#078c96; background-color:transparent; text-decoration:none}
 +
                        a:visited { color:#078c96; background-color:transparent; text-decoration:none}
 +
                        a:hover { color:#3bd3a8; background-color:transparent; text-decoration:none}
 +
                        a:active { color:#078c96; background-color:transparent; text-decoration:none}
  
/*submenu wrapper*/
 
.igem_2018_team_menu .submenu{
 
background-color: #e4dede;
 
clear:both;
 
display:none;
 
float: left; 
 
width:100%;
 
}
 
  
/*styling for a submenu item*/
+
/*Judges will not evaluate*/
.igem_2018_team_menu .submenu .submenu_item {
+
.judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;}
border-bottom: 1px solid #c4baba;
+
  color: #635d5d;
+
    height: 30px;
+
  float: left;
+
    font-size: 110%;
+
font-weight: bold;
+
    padding: 12px 0px 0px 15%;
+
    width: 100%;
+
}
+
  
.igem_2018_team_menu .submenu .submenu_item:hover {
+
.footer {
background-color: #f3bd5d;
+
      bottom: 0px;
}
+
      left:0px;
 +
      right:0px;
 +
      background-color: #d3d3d3;
 +
      float: left;
 +
height:170px;
 +
                                position: absolute;
 +
                                display:block;
 +
                                z-index:1;
 +
                                padding-left:3%;
 +
                                padding-right:3%;
 +
}
  
 +
/************************************ Making Hover Images********************************************************************/
  
.igem_2018_team_menu .submenu .submenu_item.current_page,
+
.container {
.igem_2018_team_menu .menu_item.current_page,
+
  position: relative;
.igem_2018_team_menu .menu_item.direct_link.current_page {
+
  width: 100%;
background-color:#7acbd8;
+
}
}
+
  
 +
.image {
 +
  display: block;
 +
  width: 100%;
 +
  height: 100%;
 +
}
  
 +
.overlay {
 +
  position: absolute;
 +
  top: 0;
 +
  bottom: 0;
 +
  left: 0;
 +
  right: 0;
 +
  height: 100%;
 +
  width: 100%;
 +
  opacity: 0;
 +
  transition: .5s ease;
 +
  background-color: #FFFFFF;
 +
}
  
/*mobile menu bar styling*/
+
.container:hover .overlay {
/**************************************************************************************************************************************************************************************************/
+
  opacity: 0.7;
 +
}
  
 +
.text {
 +
  color: black;
 +
  font-size: 20px;
 +
  position: absolute;
 +
  top: 80%;
 +
  left:50%;
 +
  text-align: center;
 +
  transform: translate(-50%, -50%);
 +
  -ms-transform: translate(-50%, -50%);
 +
}
  
.igem_2018_team_mobile_bar {
+
.cartoon {
background-color:#e4dede;  
+
position: absolute;
border-bottom: 1px solid #c4baba;
+
  top: 0;
cursor:pointer;
+
  bottom: 0;
display:none;
+
  left: 0;
float:left;
+
  right: 0;
margin-top: 0;
+
  height: 100%;
padding: 5px 0;
+
  width: 100%;
position:fixed;
+
  opacity: 1;
width:100%;  
+
  transition: .5s ease;
}
+
}
  
.igem_logo_mobile img {
+
.profile {
width:70px;
+
position: absolute;
}
+
  top: 0;
 +
  bottom: 0;
 +
  left: 0;
 +
  right: 0;
 +
  height: 100%;
 +
  width: 100%;
 +
  opacity: 1;
 +
  transition: .5s ease;
 +
}
  
.igem_logo_mobile {
+
.container:hover .cartoon{
float:left;
+
  opacity:0;
padding-left: 5%;
+
}
width: 30%;
+
}
+
 
+
.igem_menu_control_mobile img {
+
width:25px;
+
}
+
 
+
.igem_menu_control_mobile {
+
float:right;
+
padding-right:5%;
+
padding-top:5px;
+
text-align:right;
+
width: 30%;  
+
}
+
  
 +
.scrollimage {
 +
    position:absolute;
 +
    top:4px;
 +
    right:250px;
 +
}
  
 +
.center {
 +
    display: block;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
    width: 45%;
 +
}
  
/**************************************************************************************************************************************************************************************************/
 
/* CONTENT OF THE PAGE */
 
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
  
/* general wrapper for the content */
+
/*Pop-up Images*/
.igem_2018_team_content {
+
/*************************************************************************************************************************/
background-color:white;
+
display:block;
+
width: 87%;
+
}
+
  
/* subwrapper to center content */
+
/* Popup container - can be anything you want */
.igem_2018_team_content .igem_2018_team_column_wrapper {
+
.popup {
margin:auto;
+
    left:35%;
max-width: 1400px;
+
    margin-left: auto;
width:90%;
+
    margin-right: auto;
}
+
    text-align: center;
 +
    display: inline-block;
 +
    cursor: pointer;
 +
    -webkit-user-select: none;
 +
    -moz-user-select: none;
 +
    -ms-user-select: none;
 +
    user-select: none;
 +
}
  
 +
/* The actual popup */
 +
.popup .popuptext {
 +
    visibility: hidden;
 +
    width: 500px;
 +
    margin-left: 230px;
 +
    margin-right: auto;
 +
    background-color: #D3D3D3;
 +
    color: #000000;
 +
    text-align: center;
 +
    font-size: 20px;
 +
    border-radius: 10px;
 +
    padding: 8px 0;
 +
    position:absolute;
 +
    z-index: 1;
 +
    left: 0%;
 +
    top: 10%;
 +
}
  
  
/*general styling*/
+
/* Toggle this class - hide and show the popup */
/**************************************************************************************************************************************************************************************************/
+
.popup .show {
 +
    visibility: visible;
 +
    -webkit-animation: fadeIn 1s;
 +
    animation: fadeIn 1s;
 +
}
  
.igem_2018_team_content .igem_2018_team_column_wrapper h1 { font-size: 210%;}
+
/* Add animation (fade in the popup) */
.igem_2018_team_content .igem_2018_team_column_wrapper h2 { font-size: 190%;}
+
@-webkit-keyframes fadeIn {
.igem_2018_team_content .igem_2018_team_column_wrapper h3 { font-size: 170%;}
+
    from {opacity: 0;}  
.igem_2018_team_content .igem_2018_team_column_wrapper h4 { font-size: 150%;}
+
    to {opacity: 1;}
.igem_2018_team_content .igem_2018_team_column_wrapper h5 { font-size: 140%;}
+
}
.igem_2018_team_content .igem_2018_team_column_wrapper h6 { font-size: 130%;}
+
  
 +
@keyframes fadeIn {
 +
    from {opacity: 0;}
 +
    to {opacity:1 ;}
 +
}
  
/* styling for the titles h1, h2*/
 
.igem_2018_team_content .igem_2018_team_column_wrapper h1, .igem_2018_team_content .igem_2018_team_column_wrapper h2 {
 
border-bottom:0px;
 
color: #635d5d;
 
font-family: "Arial Black", Gadget, sans-serif;
 
padding: 10px 0px;
 
}
 
  
/* styling for the titles h3, h3, h5, h6 */
+
/************************************************************************************************************************/
.igem_2018_team_content .igem_2018_team_column_wrapper h3,
+
/***Division classes****/
.igem_2018_team_content .igem_2018_team_column_wrapper h4,
+
.igem_2018_team_content .igem_2018_team_column_wrapper h5,
+
.igem_2018_team_content .igem_2018_team_column_wrapper h6 {
+
border-bottom:0px;
+
color: #928b8b; 
+
font-family: "Arial Black", Gadget, sans-serif;
+
padding: 5px 0px;
+
}
+
 
+
/* text */
+
.igem_2018_team_content .igem_2018_team_column_wrapper p {
+
font-size: 130%;
+
font-family: Arial, Helvetica, sans-serif;
+
padding: 5px 0px;
+
text-align: left;
+
color: #484848;
+
}
+
 
+
/* Links */
+
.igem_2018_team_content .igem_2018_team_column_wrapper a {
+
color: #5bc7d8;
+
font-weight: bold;
+
text-decoration: underline;
+
text-decoration-color:#5bc7d8;
+
transition: all 0.4s ease;
+
-webkit-transition: all 0.4s ease;
+
-moz-transition: all 0.4s ease;
+
-ms-transition: all 0.4s ease;
+
-o-transition: all 0.4s ease;
+
}
+
 
+
/* hover for the links */
+
.igem_2018_team_content .igem_2018_team_column_wrapper a:hover {
+
color: #f8b732;
+
text-decoration:none;
+
}
+
 
+
 
+
/* Table */
+
.igem_2018_team_content .igem_2018_team_column_wrapper table {
+
border: 1px solid #928b8b;
+
border-collapse: collapse;
+
font-size: 130%;
+
width: 100%;
+
}
+
 
+
/* table cells */
+
.igem_2018_team_content .igem_2018_team_column_wrapper td {
+
border: 1px solid #c4baba;
+
border-collapse: collapse;
+
font-size: 105%;
+
padding: 10px;
+
vertical-align: text-top;
+
}
+
 
+
/* table headers */
+
.igem_2018_team_content .igem_2018_team_column_wrapper th {
+
background-color:#c4baba;
+
border: 1px solid #928b8b;
+
border-collapse: collapse;
+
font-size: 110%;
+
padding: 10px;
+
vertical-align: text-top;
+
}
+
 
+
 
+
 
+
/* non numbered lists */
+
.igem_2018_team_content .igem_2018_team_column_wrapper ul, .igem_2018_team_content .igem_2018_team_column_wrapper ol {
+
font-size: 130%;
+
font-family: Arial, Helvetica, sans-serif;
+
padding:0px 20px;
+
}
+
 
+
 
+
.igem_2018_team_content .igem_2018_team_column_wrapper ul ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ul ul li,
+
.igem_2018_team_content .igem_2018_team_column_wrapper ul ol li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ul ol li,
+
.igem_2018_team_content .igem_2018_team_column_wrapper ol ol li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ol ul li,
+
.igem_2018_team_content .igem_2018_team_column_wrapper ol ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ol ol li,
+
.igem_2018_team_content .igem_2018_team_column_wrapper ol ul ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ol ol ul li,
+
.igem_2018_team_content .igem_2018_team_column_wrapper ol ol ol li, .igem_2018_team_content .igem_2018_team_column_wrapper ol ul ol li{ font-size: 76%; }
+
 
+
 
+
 
+
/*layout classes*/
+
/**************************************************************************************************************************************************************************************************/
+
  
/*main layout class */
+
        #mainContainer .column  {  
.igem_2018_team_content .igem_2018_team_column_wrapper .column  {  
+
 
float:left;
 
float:left;
 
margin: 1% 2%;
 
margin: 1% 2%;
 
padding: 0px;
 
padding: 0px;
}
+
            }
  
 
/* 100% */
 
/* 100% */
.igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size { width:96%; }
+
#mainContainer .column.full_size { width:83%; }
  
 
/* 66% */
 
/* 66% */
.igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size { width: 62.6%; }
+
#mainContainer .column.two_thirds_size { width: 55%; }
  
 
/* 33% */
 
/* 33% */
.igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size { width: 29.3%; }
+
#mainContainer .column.third_size { width: 25%; }
 +
        /* 75% */
 +
#mainContainer .column.three_quarters_size {  width: 61%; }
 +
/* 50% */
 +
#mainContainer .column.half_size { width: 39.5%; }
 +
/* 25% */
 +
#mainContainer .column.quarter_size { width: 17.7%; }
 +
        /* Footer */
 +
        #mainContainer .column.footer_size { width: 29%;}
  
  
 
+
/*Image Styling*/  
 
+
.column.full_size img,
/*styling for all images*/
+
.column.two_thirds_size img,
.igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size img,  
+
.column.third_size img,
.igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size img,
+
.column.three_quarters_size img,
.igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size img {
+
.column.half_size img,
 +
.column.quarter_size img {
 
margin-bottom: 15px;
 
margin-bottom: 15px;
 
width: 100%;  
 
width: 100%;  
 
}
 
}
  
 +
/***********************************************************************************************************************/
  
/* page break */
 
.igem_2018_team_content .igem_2018_team_column_wrapper .clear {
 
clear:both;
 
}
 
/*add extra space to page break with clear class*/
 
.igem_2018_team_content .igem_2018_team_column_wrapper .clear.extra_space {
 
height: 30px;
 
}
 
  
/* horizontal line to divide the page*/
+
/*Clear class for all the pages, adds spacing too*/
.igem_2018_team_content .igem_2018_team_column_wrapper .line_divider {
+
.clear{
    border-top: 1px solid #c4baba;
+
clear:both;
  margin: auto;
+
height: 10px;
  width: 98%;
+
      }
}
+
  
 +
                      .clear.extra_space {
 +
                height: 30px;
 +
                                  }
  
 +
/*Button Class*/
  
+
    .button_link {
/*support classes*/
+
/**************************************************************************************************************************************************************************************************/
+
 
+
 
+
/*Button  */
+
/************************************************/
+
.igem_2018_team_content .igem_2018_team_column_wrapper .button_link {
+
 
font-size: 130%;
 
font-size: 130%;
 
margin: 30px auto;
 
margin: 30px auto;
 
text-align: center;
 
text-align: center;
}
+
          }
  
.igem_2018_team_content .igem_2018_team_column_wrapper .button_link a  {
+
    .button_link a  {
background-color: #5bc7d8;
+
background-color: #03ece4;
color: #635d5d !important;
+
color: #000000 !important;
 
font-weight: bold;
 
font-weight: bold;
 
margin: auto;
 
margin: auto;
 
text-decoration: none !important;
 
text-decoration: none !important;
 
padding: 10px 15px;
 
padding: 10px 15px;
}
+
            }
 
+
      .button_link a:hover {
.igem_2018_team_content .igem_2018_team_column_wrapper .button_link a:hover {
+
 
background-color: #f8b732 !important;   
 
background-color: #f8b732 !important;   
}
+
                    }
 +
                   
 +
/*buttons for the menu*/
  
  
 +
.pebble {
 +
    position:absolute;
 +
    left:166px;
 +
    top:30px;
 +
    z-index:0.5;
 +
    width:75%;
 +
}
  
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight {  
+
.topscroll {
padding: 15px 20px;
+
  position:absolute;
}
+
  right:20px;
 +
  bottom:200px;
 +
  width:13%;
 +
  }
  
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight p,
+
                    .home {
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h1,
+
                            position:absolute;
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h2,
+
                            left: 20px;
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h3,
+
                            top: 37px;
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h4,
+
                            }
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h5,
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h6 {
+
padding: 5px 15px;
+
}
+
  
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_background {
+
                    .team {
background-color: #e4dede;  
+
                            position: absolute;
}
+
                            left: 138px;
 +
                            top: 110px;
 +
                            cursor:pointer;
 +
                            }
  
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_A_top {
+
                                          .teamSubTM{
    border-top: 4px solid #5bc7d8;
+
                                              position:absolute;
}
+
                                              top:203px;
 +
                                              left:114px;
 +
                                              display:none;
 +
                                              z-index:1.1;
 +
                                                    }
  
 +
                                          .teamSubCol{
 +
                                              position:absolute;
 +
                                              top:260px;
 +
                                              left:103px;
 +
                                              display:none;
 +
                                              z-index:1;
 +
                                                    }
  
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_A_full {
+
                                          .teamSubPhA{
    border: 4px solid #5bc7d8;
+
                                              position:absolute;
}
+
                                              top:307px;
 +
                                              left:91px;
 +
                                              display:none;
 +
                                              z-index:1;
 +
                                                    }
  
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_B_top {
 
    border-top: 4px solid #f8b732
 
}
 
  
  
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_B_full {
+
                    .project{
    border: 4px solid #f8b732;
+
                      position:absolute;
}
+
                      top: 165px;
 +
                      left: 250px;
 +
                          }
 +
                   
 +
                    .parts{
 +
                      position:absolute;
 +
                      top: 190px;
 +
                      left: 405px;
 +
                      cursor:pointer;
 +
                          }
  
  
 +
                    .safety{
 +
                      position:absolute;
 +
                      top:195px;
 +
                      left:520px;
 +
                          }
  
 +
                    .model{
 +
                      position:absolute;
 +
                      top:127px;
 +
                      left:760px;
 +
                      cursor:pointer;
 +
                          }
 +
                                          .modelSubBac{
 +
                                                position:absolute;
 +
                                                top:177px;
 +
                                                left:815px;
 +
                                                display: none;
 +
                                                z-index:1;                   
 +
                                                      }
  
/*mobile*/
+
                                          .modelSubKin{
/**************************************************************************************************************************************************************************************************/
+
                                              position:absolute;
 +
                                              top:226px;
 +
                                              left:800px; 
 +
                                              display: none; 
 +
                                              z-index:1;                 
 +
                                                      }
  
 +
                                          .modelSubMet{
 +
                                                position:absolute;
 +
                                                top:283px;
 +
                                                left:800px;
 +
                                                display: none;
 +
                                                z-index:1;                   
 +
                                                      }
  
/* 1800px */
+
                                          .modelSubGen{
/************************************************/
+
                                                position:absolute;
@media only screen and (max-width: 1800px) {
+
                                                top:320px;
.igem_2018_team_content { width: 85%;}
+
                                                left:800px;  
.igem_2018_team_menu {display:block;}
+
                                                display: none;
}
+
                                                z-index:2;                 
 +
                                                        }
 +
                                          .modelSubOve{
 +
                                                position:absolute;
 +
                                                top:364px;
 +
                                                left:800px; 
 +
                                                display: none;  
 +
                                                z-index:1;                 
 +
                                                        }
  
/* 1400px  */
+
                      .judge{
/************************************************/
+
                        position:absolute;
@media only screen and (max-width: 1400px) {
+
                        top:57px;
.igem_2018_team_menu .menu_item { font-size:100%;}
+
                        left:860px;
.igem_2018_team_menu .submenu .submenu_item { font-size:90%;}
+
                          }
.igem_2018_team_menu {display:block;}
+
}
+
  
@media only screen and (max-width: 1001px) {
+
                      .human {
.igem_2018_team_menu {display:block;}
+
                        position:absolute;
}
+
                        top:160px;
 +
                        left:635px;
 +
                        cursor:pointer;
 +
                            }
  
/* 1000px  */
+
                                            .humanSubHP{
/************************************************/
+
                                                  position:absolute;
@media only screen and (max-width: 1000px) {
+
                                                  top:245px;
.igem_2018_team_content {width:100%; margin-left:0px;}
+
                                                  left:660px;
.igem_2018_team_menu {display:none; margin-top: 45px; min-width:50%; width:50%;}
+
                                                  display:none;
.igem_2018_team_mobile_bar {display:block;}
+
                                                  z-index:1.1;
.igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size, .igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size,.igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size {width:96%; }
+
                                                        }
  
}
+
                                            .humanSubEnE{
 +
                                                  position:absolute;
 +
                                                  top:280px;
 +
                                                  left:638px;
 +
                                                  display:none;
 +
                                                  z-index:1;
 +
                                                          }
 +
.teal {
 +
  color:#03ece4;
 +
      }
 +
.black {
 +
  color:#000000;
 +
  }
 +
.green {
 +
    color:#51A8A5;
 +
}
  
  
@media only screen and (max-width: 500px) {
 
.igem_2018_team_menu {min-width:100%; width:100%; }
 
}
 
 
 
/**************************************************************************************************************************************************************************************************/
 
  
 +
.bottles{
 +
position:absolute;
 +
width: 55px;
 +
-webkit-animation-name: rotation;
 +
-webkit-animation-duration: 6s;
 +
-webkit-animation-direction:alternate;
 +
-webkit-animation-iteration-count: infinite;
 +
-webkit-animation-timing-function:linear;
 +
animation: rotation;
 +
animation-duration: 6s;
 +
animation-direction:alternate;
 +
animation-iteration-count: infinite;
 +
animation-timing-function: linear;
 +
  transform-origin: center;
 +
  transform-style: preserve-3D;
 +
}
  
 +
@-webkit-keyframes rotation {
 +
from {-webkit-transform: rotate(0deg);
 +
}
 +
to {-webkit-transform: rotate(400deg);
 +
}
 +
}
  
 +
@keyframes rotation {
 +
from {transform: rotate(0deg);
 +
}
 +
to {transform: rotate(400deg);
 +
}
 +
 +
</style>
  
 +
</style>
  
 
</style>
 
</style>
 +
<head>
  
  
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
<!--------JAAAAAAAAVA-------------------------------------------------------->
<!--- THIS IS WHERE THE HTML BEGINS --->
+
          <script>
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
  
<head>
 
  
<!-- This tells the browser that your page is responsive -->
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
  
</head>
+
function changecursor(id) {
 +
    document.getElementById(id).style.cursor = "pointer";
 +
                          }                         
  
  
  
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
       
<!--- Menu --->
+
</script>
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
  
  
 +
<!------------------------------------------------JQuery----------------------------------------------------------------------->
 +
<script>
 +
$(document).ready(function(){
  
 +
function bottleone() {
 +
        $("#bottle1").css({left:30,top:400},500);
 +
        $("#bottle1").show().animate({left:50,top:250},500, 'linear').animate({left:80,top:220},500, 'linear').animate({left:100,top:240},500, 'linear').animate({left:140,top:200},500, 'linear').animate({left:195,top:227},500, 'linear').animate({left:230,top:205},500, 'linear').animate({left:250,top:229},500, 'linear').animate({left:260,top:250},500, 'linear').animate({left:238,top:260},500, 'linear').animate({left:250,top:250},500, 'linear').animate({left:300,top:250},500, 'linear').animate({left:350,top:235},500, 'linear').animate({left:400,top:230},500, 'linear').animate({left:450,top:240},500, 'linear').animate({left:520,top:230},500, 'linear').animate({left:580,top:250},500, 'linear').animate({left:560,top:235},500, 'linear').animate({left:600,top:225},500, 'linear').animate({left:630,top:220},500, 'linear').animate({left:650,top:230},500, 'linear').animate({left:690,top:240},500, 'linear').animate({left:730,top:240},500, 'linear').animate({left:780,top:260},500, 'linear').animate({left:850,top:250},500, 'linear').animate({left:820,top:240},500, 'linear').animate({left:800,top:230},500, 'linear').animate({left:790,top:210},500, 'linear').animate({left:820,top:200},500, 'linear').animate({left:850,top:130},500, 'linear').animate({left:940,top:60},500, 'linear').animate({left:980,top:-30},500, 'linear').animate({left:30,top:400},0,'linear').animate({left:30,top:400},1500,bottleone);
 +
                          }
  
<div class="igem_2018_team_mobile_bar">
 
 
<div class="igem_logo_mobile">
 
<img src="https://static.igem.org/mediawiki/2018/4/4f/2018_igem_mobile_menu_logo.svg">
 
</div>
 
  
  
<div class="igem_menu_control_mobile">
+
function submenuteam(){
<img id="menu_control_image" src="https://static.igem.org/mediawiki/igem.org/3/3b/Menu_icon.svg">
+
          $("#TM").toggle();
</div>
+
          $("#Col").toggle();
 +
          $("#PhA").toggle()
 +
                      }
 +
                         
  
</div>
+
function submenuhuman(){
 +
        $("#HP").toggle();
 +
        $("#EnE").toggle();
 +
                      }
  
 +
function submenumodel(){
 +
        $("#Bac").toggle();
 +
        $("#Kin").toggle();
 +
        $("#Met").toggle();
 +
        $("#Gen").toggle();
 +
        $("#Overall").toggle();
 +
                      }
  
 +
          $(document).ready(bottleone);
  
  
<div class="igem_2018_team_menu displaying_menu">
+
          $("#team1").click(submenuteam);
 +
          $("#human1").click(submenuhuman);
 +
          $("#model1").click(submenumodel);
  
 +
});
  
<a href="https://2018.igem.org/Team:RHIT">
 
<img src="http://placehold.it/350x150/e4dede/c4baba">
 
</a>
 
  
 +
function PopUp() {
 +
    var popup = document.getElementById("myPopup");
 +
    popup.classList.toggle("show");
 +
}
  
  
<a href="https://2018.igem.org/Team:RHIT">
 
<div class="menu_item direct_link">
 
HOME
 
</div>
 
</a>
 
  
<!-- Team -->
+
<div class="menu_item">
+
</script>
<div class="submenu_control_icon"> </div>
+
TEAM
+
</div>
+
<div class="submenu">
+
+
<a href="https://2018.igem.org/Team:RHIT/Team">
+
<div class="submenu_item">
+
Team Members
+
</div>
+
</a>
+
  
                      <a href="https://2018.igem.org/Team:RHIT/Team">
+
</head>
<div class="submenu_item">
+
Test New Submenu Item
+
</div>
+
</a>
+
  
<a href="https://2018.igem.org/Team:RHIT/Collaborations">
+
<body>
<div class="submenu_item">
+
<!--- Banner and Moving Bottles ------------------------------------------------------------------------------------------>
Collaborations
+
</div>
+
</a>
+
</div>
+
  
 +
<div id="globalWrapper">
 +
<div id="bannerContainer">
 +
       
 +
       
 +
        <img src = "https://static.igem.org/mediawiki/2018/a/a5/T--RHIT--Banner2.jpg">
  
<!-- Project -->
+
    <div class="spin">   <img class="bottles" id="bottle1" src="https://static.igem.org/mediawiki/2018/2/20/T--RHIT--FloatingBottle.jpg"> </div>
<div class="menu_item">
+
<a id="top">
<div class="submenu_control_icon"> </div>
+
<img class="pebble" src = "https://static.igem.org/mediawiki/2018/a/ab/T--RHIT--PebbleSand.jpg">
PROJECT
+
</a>
</div>  
+
   
<div class="submenu">
+
  <!----------- Menu and Submenus --------->
+
 
<a href="https://2018.igem.org/Team:RHIT/Description">
+
    <a href="https://2018.igem.org/Team:RHIT">
<div class="submenu_item">
+
      <img class="home" src="https://static.igem.org/mediawiki/2018/archive/6/68/20180627175452%21T--RHIT--Home.jpg">
Description
+
    </a>  
</div>
+
</a>
+
  
<a href="https://2018.igem.org/Team:RHIT/Design">
+
   
<div class="submenu_item">
+
      <img class="team" id="team1" src="https://static.igem.org/mediawiki/2018/archive/7/7c/20180627175913%21T--RHIT--Team.jpg">
Design
+
</div>
+
</a>
+
  
<a href="https://2018.igem.org/Team:RHIT/Experiments">
+
      <a class = "teamSubTM" id="TM" href="https://2018.igem.org/Team:RHIT/Team">
<div class="submenu_item">
+
        <img src="https://static.igem.org/mediawiki/2018/0/07/T--RHIT--Members.jpg" width="37%">
Experiments
+
      </a>
</div>
+
      <a class = "teamSubCol" id="Col" href="https://2018.igem.org/Team:RHIT/Collaborations">
</a>
+
        <img src="https://static.igem.org/mediawiki/2018/b/bb/T--RHIT--CollaborationsA.jpg" width="40%">
 +
      </a>
  
  
<a href="https://2018.igem.org/Team:RHIT/Notebook">
 
<div class="submenu_item">
 
Notebook
 
</div>
 
</a>
 
  
<a href="https://2018.igem.org/Team:RHIT/InterLab">
+
<a href = "https://2018.igem.org/Team:RHIT/Description">
<div class="submenu_item">
+
      <img class="project" src="https://static.igem.org/mediawiki/2018/archive/e/e6/20180627182502%21T--RHIT--Project.jpg">
InterLab
+
</a>
</div>
+
</a>
+
  
  
<a href="https://2018.igem.org/Team:RHIT/Model">
+
<a href="https://2018.igem.org/Team:RHIT/Parts">
<div class="submenu_item">
+
    <img class="parts" src="https://static.igem.org/mediawiki/2018/e/ed/T--RHIT--Parts.jpg">
Model
+
</a>
</div>
+
</a>
+
  
<a href="https://2018.igem.org/Team:RHIT/Results">
 
<div class="submenu_item">
 
Results
 
</div>
 
</a>
 
  
 +
    <img class = "human" id = "human1" src = "https://static.igem.org/mediawiki/2018/archive/2/24/20180627181849%21T--RHIT--HumanPractices.jpg">
 +
 
 +
    <a class = "humanSubHP" id = "HP" href="https://2018.igem.org/Team:RHIT/Human_Practices">
 +
      <img src = "https://static.igem.org/mediawiki/2018/b/b4/T--RHIT--HumanPracticesSub.jpg" width="50%">
 +
    </a>
  
<a href="https://2018.igem.org/Team:RHIT/Demonstrate">
+
    <a class = "humanSubEnE" id = "EnE" href="https://2018.igem.org/Team:RHIT/Public_Engagement">
<div class="submenu_item">
+
        <img src = "https://static.igem.org/mediawiki/2018/0/0e/T--RHIT--EdAndEng.jpg" width="50%">
Demonstrate
+
    </a>
</div>
+
</a>
+
  
<a href="https://2018.igem.org/Team:RHIT/Improve">
 
<div class="submenu_item">
 
Improve
 
</div>
 
</a>
 
  
<a href="https://2018.igem.org/Team:RHIT/Attributions">
 
<div class="submenu_item">
 
Attributions
 
</div>
 
</a>
 
  
</div>
 
  
 +
  <img class = "model" id="model1" src="https://static.igem.org/mediawiki/2018/6/64/T--RHIT--Model2.jpg" width="13%">
 +
<a class = "modelSubBac" id = "Bac" href="https://2018.igem.org/Team:RHIT/Model">
 +
      <img src = "https://static.igem.org/mediawiki/2018/7/70/T--RHIT--Background.jpg" width="110%">
 +
    </a>
  
<div class="menu_item">
+
<a class = "modelSubKin" id="Kin" href="https://2018.igem.org/Team:RHIT/KineticsModel">
<div class="submenu_control_icon"> </div>
+
      <img src = "https://static.igem.org/mediawiki/2018/4/48/T--RHIT--KineticsModel.jpg" width="130%">
PARTS
+
    </a>
</div>
+
<div class="submenu">
+
+
<a href="https://2018.igem.org/Team:RHIT/Parts">
+
<div class="submenu_item">
+
Parts Overview
+
</div>
+
</a>
+
  
<a href="https://2018.igem.org/Team:RHIT/Basic_Part">
+
<a class="modelSubMet" id="Met" href="https://2018.igem.org/Team:RHIT/MetabolismModel">
<div class="submenu_item">
+
      <img src = "https://static.igem.org/mediawiki/2018/6/6a/T--RHIT--MetabolismModel.jpg" width="130%">
Basic Parts
+
    </a>
</div>
+
</a>
+
  
<a href="https://2018.igem.org/Team:RHIT/Composite_Part">
+
<a class = "modelSubGen" id="Gen" href="https://2018.igem.org/Team:RHIT/GeneticsModel">
<div class="submenu_item">
+
      <img src = "https://static.igem.org/mediawiki/2018/7/78/T--RHIT--GeneticsModel.jpg" width="130%">
Composite Parts
+
    </a>
</div>
+
<a class =  "modelSubOve" id="Overall" href = "https://2018.igem.org/Team:RHIT/OverallModel">
</a>
+
      <img src = "https://static.igem.org/mediawiki/2018/1/1e/T--RHIT--OverallModel.jpg" width="130%">
 +
</a>
  
<a href="https://2018.igem.org/Team:RHIT/Part_Collection">
 
<div class="submenu_item">
 
Part Collection
 
</div>
 
</a>
 
</div>
 
  
+
    <a href="https://2018.igem.org/Team:RHIT/Safety">
+
      <img class="safety" src="https://static.igem.org/mediawiki/2018/archive/0/09/20180627182307%21T--RHIT--Safety.jpg">
+
    </a>
+
 
 +
    <a href="https://igem.org/2018_Judging_Form?team=RHIT">
 +
      <img class = "judge" src = "https://static.igem.org/mediawiki/2018/7/73/T--RHIT--JudgingForm.jpg">
 +
    </a>
 +
 
 +
<!-------------------------------End of Menu------------------------------>
  
<a href="https://2018.igem.org/Team:RHIT/Safety">
 
<div class="menu_item direct_link">
 
SAFETY
 
</div>
 
</a>
 
  
  
Line 699: Line 781:
  
  
 +
<div id ="mainContainer" >
  
<div class="menu_item">
+
<div class="submenu_control_icon"> </div>  
+
      <div id="contentContainer">
HUMAN PRACTICES
+
</br></br></br>
</div>  
+
  
<div class="submenu">
+
<!--------------------------- Content -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
  
<a href="https://2018.igem.org/Team:RHIT/Human_Practices">
 
<div class="submenu_item">
 
Human Practices
 
</div>
 
</a>
 
 
 
<a href="https://2018.igem.org/Team:RHIT/Public_Engagement">
 
<div class="submenu_item">
 
Education & Engagement
 
</div>
 
</a>
 
 
</div>
 
 
 
 
 
 
<div class="menu_item">
 
<div class="submenu_control_icon"> </div>
 
AWARDS
 
</div>
 
 
<div class="submenu">
 
 
<a href="https://2018.igem.org/Team:RHIT/Applied_Design">
 
<div class="submenu_item">
 
Applied Design
 
</div>
 
</a>
 
 
<a href="https://2018.igem.org/Team:RHIT/Entrepreneurship">
 
<div class="submenu_item">
 
Entrepreneurship
 
</div>
 
</a>
 
 
<a href="https://2018.igem.org/Team:RHIT/Hardware">
 
<div class="submenu_item">
 
Hardware
 
</div>
 
</a>
 
 
<a href="https://2018.igem.org/Team:RHIT/Measurement">
 
<div class="submenu_item">
 
Measurement
 
</div>
 
</a>
 
 
<a href="https://2018.igem.org/Team:RHIT/Model">
 
<div class="submenu_item">
 
Model
 
</div>
 
</a>
 
 
<a href="https://2018.igem.org/Team:RHIT/Plant">
 
<div class="submenu_item">
 
Plant
 
</div>
 
</a>
 
 
 
<a href="https://2018.igem.org/Team:RHIT/Software">
 
<div class="submenu_item">
 
Software
 
</div>
 
</a>
 
 
</div>
 
 
 
 
<a href="https://igem.org/2018_Judging_Form?team=RHIT">
 
<div class="menu_item direct_link">
 
JUDGING FORM ⇗
 
</div>
 
</a>
 
  
  
Line 791: Line 795:
  
  
 +
<div class = "footer">
 +
<a href = "#top">
 +
<img class = "topscroll" src="https://static.igem.org/mediawiki/2018/5/53/T--RHIT--TotheTopSuperPebble.png"> </a>
 +
<div class="column footer_size">
 +
<center>
 +
<h6> Connect with us on Facebook! </h6>
 +
<a href="https://www.facebook.com/RHITiGEM2018/" target="_blank">
 +
<img src="https://static.igem.org/mediawiki/2018/9/98/T--RHIT--Facebook.jpg" style="width:30%">
 +
</a>
 +
</center>
 +
</div>
 +
<div class = "column footer_size">
 +
<center>
 +
<div class = "clear extra_space"></div>
 +
<div class = "clear extra_space"></div>
 +
<a href="https://www.rose-hulman.edu/" target="_blank">
 +
<img src="https://static.igem.org/mediawiki/2018/a/ad/T--RHIT--RoseLogo.jpg" style="width:60%">
 +
</a>
 +
</center>
 +
</div>
 +
<div class= "column footer_size">
 +
<center>
 +
<h6> Contact Us! </h6>
 +
<p style="text-align: center"> patekm@rose-hulman.edu </br> 5500 Wabash Ave. </br> Terre Haute, IN 47803 </p>
 +
</center>
 +
</div>
 
</div>
 
</div>
 
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!--- Content of the page  --->
 
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
 
 
<div class="igem_2018_team_content">
 
<div class="igem_2018_team_column_wrapper">
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
 

Latest revision as of 00:10, 16 October 2018