Difference between revisions of "Team:NUS Singapore-A/Templates/Style"

Line 1: Line 1:
−
{{NUS_Singapore-A}}
 
−
{{:Team:NUS_Singapore-A/Templates/Style}}
 
−
 
 
<html>
 
<html>
−
 
 
<head>
 
<head>
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<meta charset="utf-8">
 
<meta charset="utf-8">
 
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 
<meta http-equiv="X-UA-Compatible" content="IE=edge">
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 +
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i">
  
 
</head>
 
</head>
  
 +
<style>
 +
/*Remove standard formatting of iGEM HQ */
 +
/* set page to fill window*/
  
−
<script>
+
html {
−
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
    height: 100%;
 +
    padding: 0;
 +
    margin: 0;
 +
    overflow-y: scroll;
 +
}
  
 +
body {
 +
    height: 100%;
 +
    padding: 0;
 +
    margin: 0;
 +
    background-color: white;
 +
}
  
 +
#globalWrapper {
 +
    min-height: 100%;
 +
    margin: 0;
 +
    padding: 0!important;
 +
    font-size: initial;
 +
}
  
−
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
#content {
−
</script>
+
    width:100%;
 +
    min-width: 100%!important;
 +
    margin: 0;
 +
    padding: 0;
 +
    top: -10px;
 +
}
 +
#mw-content-text {
 +
    position:relative;
 +
    margin: 0;
 +
    padding: 0;
 +
    left: 0;   
 +
    font-size: 100%;
 +
    z-index:0;
 +
}
 +
/* set all basic objects to neutral formatting, removes all padding, margins, etc and sets the fontsize to 100%*/
  
−
<style>
+
h1,
−
/**************************************************************************************************************************************************************************************************/
+
h2,
 +
h3,
 +
h4,
 +
h5,
 +
h6 {
 +
    font-family: 'Arial', sans-serif;
 +
    color: black;
 +
    background: none;
 +
    font-weight: normal;
 +
    margin-bottom: 0;
 +
    padding: 0;
 +
    overflow: visible;
 +
}
 +
/*as a script gets a paragraph, by default, no formatting for p */
  
  
 +
.caption {
  
−
</style>
+
}
  
 +
.reference {
  
−
<!------------------------------------------------------ALL HTML BELONGS BELOW HERE------------------------------------------------------------------------------------------------------------------------------------------------------------------------>
+
}
−
<head>
+
  
−
</head>
 
  
−
<body>
+
/********************* Add our own style here ********************************/
−
<div class="inner-border" style="border-top: none;">
+
−
  <div>
+
−
    <h3 id='Overview'>Eco-friendly Bio-manufacturing of Flavonoid Dyes in Escherichia coli via Computer-mediated Optogenetic Regulation</h2>
+
  
−
    <p style="margin: 0 5%"> Natural dyes are increasingly considered as an eco-friendly solution to the serious water pollution generated by the textile and dye industries. Traditional production of natural dyes from plants heavily exhausts land and labour. While bio-manufacturing is an attractive alternative, it remains costly and chemically-intensive. We aim to develop a new bio-manufacturing method of producing flavonoids in E. coli for use as natural dyes. To eliminate the use of expensive chemical inducers to switch from growth to production phase and allow dynamic gene regulation, we designed an optogenetic circuit using a blue light repressible promoter for flavonoid biosynthesis. As it is critical to monitor cellular metabolic burden for efficient production, we introduced a stress-sensing fluorescence reporter. To optimize operations, a computer-aided system was developed to regulate gene expression using light according to the feedback from the stress sensor. To demonstrate this approach, we produced Luteolin, a natural yellow dye.
+
/****************************BASIC CSS STUFF ****************************************/
−
    </p>
+
h1 {
−
<br><br><br>
+
    font-family: Arial;
 +
    font-size: 36px;
 +
    font-style: normal;
 +
    font-variant: normal;
 +
    font-weight: 100;
 +
    line-height: 36px;
 +
    color: black;
 +
    border: none;
 +
}
 +
h2 {
 +
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
 +
    font-size: 27px;
 +
    font-style: normal;
 +
    font-variant: normal;
 +
    font-weight: 700;
 +
    line-height: 36px;
 +
    color: black;
 +
}
 +
h3 {
 +
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
 +
    font-size: 27px;
 +
    font-style: normal;
 +
    font-variant: normal;
 +
    font-weight: 700;
 +
    line-height: 36px;
 +
}
 +
p{
 +
    font-family: Arial;
 +
    font-size: 20px;
 +
    font-style: normal;
 +
    font-variant: normal;
 +
    font-weight: 100;
 +
    line-height: 29px;
 +
    text-align: justify;
 +
}
  
 +
ul li, ol li {
  
−
  </div>
+
}
−
</div>
+
  
−
</body>
+
blockquote {
 +
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
 +
    font-size: 27px;
 +
    font-style: normal;
 +
    font-variant: normal;
 +
    font-weight: 400;
 +
    line-height: 36px;
 +
}
 +
pre {
 +
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
 +
    font-size: 18px;
 +
    font-style: normal;
 +
    font-variant: normal;
 +
    font-weight: 400;
 +
    line-height: 36px;
 +
}
 +
 
 +
 
 +
 
 +
/********************** CSS FROM DESIGN *****************************************************/
 +
 
 +
    .figures{
 +
    margin: auto auto;
 +
    max-width: 80%;
 +
    }
 +
    .figures figcaption{
 +
    font-size: 12px;
 +
    text-align: center;
 +
    font-style: italic;
 +
    }
 +
 
 +
 
 +
 
 +
/****************************THIS IS CSS FROM INTERLAB*******************************/
 +
/* The accordion is the class given to the drop-down menu thingy */
 +
.accordion {
 +
  background-color: rgba(242,242,242,0.6);
 +
  color: black;
 +
  cursor: pointer;
 +
  padding: 15px;
 +
  width: 100%;
 +
  text-align: left;
 +
  margin-left: 5%;
 +
  margin-right: 5%;
 +
  border: none;
 +
  outline: none;
 +
  /* I wanted to give a gradual change, but it's having some trouble reading the 'transition' property. I'll look into having it javascripted instead. */
 +
  /*  transition: 0.4s linear;    */
 +
  font-family: "Montserrat", sans-serif;
 +
  font-weight: 300;
 +
  font-size: 20px;
 +
}
 +
 
 +
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
 +
.active,
 +
.accordion:hover {
 +
  font: bold 20px "Montserrat", sans-serif;
 +
  background-color: #e6e6e6;
 +
}
 +
 
 +
/* Style the accordion panel. Note: hidden by default */
 +
.panel {
 +
  background-color: white;
 +
  text-align: left;
 +
  margin-top: 10px;
 +
  max-height: 0;
 +
  overflow: hidden;
 +
  transition: max-height 0.2s ease-out;
 +
}
 +
.accordion:after {
 +
  content: "+";
 +
  font-size: 13px;
 +
  color: #777;
 +
  float: right;
 +
  margin-left: 5px;
 +
}
 +
 
 +
/* Not sure why this function does not work. Need to check */
 +
.active:after {
 +
  content: "-";
 +
}
 +
 
 +
table,
 +
th,
 +
td {
 +
  border: none;
 +
  border-collapse: collapse;
 +
}
 +
table {
 +
  font-family: "Lora";
 +
  font-size: 13px;
 +
  word-spacing: 0.5em;
 +
}
 +
 
 +
th,
 +
td {
 +
  text-align: left;
 +
  padding: 3px;
 +
}
 +
 
 +
img {
 +
  display: block;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
}
 +
 
 +
.discussion_graph,
 +
.measurement_table {
 +
  width: 70%;
 +
  height: auto;
 +
  margin: auto;
 +
}
 +
 
 +
.interlab-header {
 +
  width: 47.5%;
 +
  height: auto;
 +
  margin: auto;
 +
}
 +
.center-justified {
 +
  text-align: justify;
 +
  margin: 0 auto;
 +
  width: 70%;
 +
}
 +
 
 +
/**********************
 +
    Start of two columns */
 +
* {
 +
  box-sizing: border-box;
 +
}
 +
 
 +
/* Create two columns that floats next to each other */
 +
.column {
 +
  float: left;
 +
  text-align: left;
 +
}
 +
 
 +
.left {
 +
  width: 50%;
 +
  padding-left: 5%;
 +
  padding-right: 2.5%;
 +
}
 +
 
 +
.right {
 +
  width: 50%;
 +
  padding-left: 2.5%;
 +
  padding-right: 5%;
 +
}
 +
 
 +
/* Clear floats after the columns */
 +
.row:after {
 +
  content: "";
 +
  display: table;
 +
  clear: both;
 +
}
 +
 
 +
/********************
 +
    End of two columns */
 +
 
 +
/**************************************CSS FOR NOTEBOOK***************************************************/
 +
 
 +
 
 +
    img {
 +
        display: block;
 +
        margin-left: auto;
 +
        margin-right: auto;
 +
    }
 +
 
 +
    .discussion_graph, .measurement_table{
 +
        width: 70%;
 +
        height: auto;
 +
        margin: auto;
 +
    }
 +
 
 +
    .notebook-header{
 +
        width: 50%;
 +
        height: auto;
 +
        margin: auto;
 +
    }
 +
    .tablinks{
 +
    cursor: pointer;
 +
    }
 +
    .months-container{
 +
    text-align: justify;
 +
    margin:6px 18% 6px 18%;
 +
    }
 +
    .months-container div{
 +
    width: auto;
 +
    margin: 0 2px 2px 0;
 +
    text-align: center;
 +
    font-family: "Montserrat";
 +
    font-size: 18px;
 +
    display:inline-block;
 +
    }
 +
    .months-container:after{
 +
    content: '';
 +
    width: 100%; /* Ensures there are at least 2 lines of text, so justification works */
 +
    display: inline-block;
 +
    }
 +
 
 +
/* Style the main tab content */
 +
.tabcontent {
 +
    display: none;
 +
    border: none;
 +
    margin: none;
 +
    -webkit-animation: fadeEffect 1s;
 +
    animation: fadeEffect 1s;
 +
    min-height: 500px;
 +
}
 +
 
 +
/* Fade in tabs */
 +
@-webkit-keyframes fadeEffect {
 +
    from {opacity: 0;}
 +
    to {opacity: 1;}
 +
}
 +
 
 +
@keyframes fadeEffect {
 +
    from {opacity: 0;}
 +
    to {opacity: 1;}
 +
}
 +
 
 +
/**************************THIS IS CSS FOR SAFETY*************************************/
 +
 
 +
 
 +
.safety-header{
 +
  width: 47.5%;
 +
  height: auto;
 +
  margin: auto;
 +
}
 +
 
 +
.pictures{
 +
  width: 50px;
 +
  height: 50px;
 +
  background-colour: grey;
 +
}
 +
/*****************************CSS FROM EXPERT INT *******************************************/
 +
.carousel-3d-slide {
 +
      height: auto !important;
 +
      background-color: rgba(0, 0, 0, 0.25) !important;
 +
}
 +
.carousel-3d-container figure {
 +
  margin:0;
 +
}
 +
.carousel-3d-container figcaption {
 +
  position: absolute;
 +
  background-color: rgba(0, 0, 0, 0.5);
 +
  color: #fff;
 +
  bottom: 0;
 +
  position: absolute;
 +
  bottom: 0;
 +
  padding: 15px;
 +
  font-size: 12px;
 +
  min-width: 100%;
 +
  box-sizing: border-box;
 +
}
 +
/***********************************END OF STYLING FOR CAROUSEL*******************************/
 +
.ihp-header{
 +
  width: 47.5%;
 +
  height: auto;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  display: block;
 +
    } 
 +
   
 +
    /* Style the tab */
 +
 
 +
/* Style the tab boxes */
 +
.sponsor-boxes{
 +
  vertical-align: 50%;
 +
  outline: none;
 +
  border: none;
 +
  cursor: pointer;
 +
  padding: 0px;
 +
  background-color: inherit;
 +
 
 +
}
 +
 
 +
/* Style the img inside the buttons */
 +
.sponsors-overview-rows button img{
 +
  max-height:100%;
 +
  max-width:100%;
 +
}
 +
 
 +
/* Create an active/current tablink class */
 +
.sponsors-overview-rows button.active {
 +
    background-color: #ccc;
 +
}
 +
 
 +
.tabcontent-wrapper{
 +
  text-align: center;
 +
  max-width: 100%;
 +
  background-color: rgba(255, 255, 255, 0.6);
 +
}
 +
/* Style the tab content */
 +
.tabcontent {
 +
    display: none;
 +
    max-width: 85%;
 +
    margin: auto auto;
 +
    padding: 6px 12px;
 +
/*
 +
    border-radius: 12px;
 +
    background-color: rgba(255, 255, 255, 0.6);
 +
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 +
    -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 +
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 +
*/
 +
    flex-direction: row;
 +
    justify-content: flex-start;
 +
    align-items: center;
 +
}
 +
.sponsor-pic{
 +
  display: flex;
 +
  width: 235px;
 +
  max-width: 235px;
 +
  min-width: 235px;
 +
  height: auto;
 +
}
 +
.sponsor-description{
 +
  display: flex;
 +
  margin-left: 24px;
 +
  font-family: "Lora", sans-serif;
 +
  font-weight: 400;
 +
  font-size: 1.25em;
 +
  line-height: normal;
 +
  text-align: justify;
 +
}
 +
 
 +
/*************************************CSS FOR COLLAB *********************************/
 +
 
 +
.tabcontent p{
 +
font-size: 1.25em;
 +
}
 +
.collab-content{
 +
  text-align: justify;
 +
}
 +
.collab-img-center{
 +
  display: block;
 +
  max-width: 60%;
 +
  height: auto;
 +
  margin: 12px auto 3px auto;
 +
}
 +
 
 +
/*********************************CSS FOR PUBLIC ENGAGEMENT*****************************/
 +
 
 +
.outreach-header{
 +
  max-width: 65%;
 +
  height: auto;
 +
}
 +
 
 +
    .button-things{
 +
    vertical-align: -50%;
 +
    height: 100%;
 +
    background: none;
 +
    color: inherit;
 +
    border: none;
 +
    padding: 0;
 +
    font: inherit;
 +
    cursor: pointer;
 +
    outline: inherit;
 +
    }
 +
    .column {
 +
 
 +
        background-color: inherit;
 +
    }
 +
    .column h1{
 +
    border-bottom:none;
 +
    padding-left: 0px;
 +
    }
 +
 
 +
/************************************CSS FOR TEAM *******************************************/
 +
 
 +
.members-gallery{
 +
  max-width: 80%;
 +
  position: relative;
 +
  margin: auto;
 +
  padding: 10px;
 +
}
 +
.members-gallery img{
 +
  max-width: 100%;
 +
}
 +
.overlay{
 +
  position: absolute;
 +
}
 +
.nanda{
 +
  position: absolute;
 +
  top: 4.5%;
 +
  left: 42.5%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.ting2{
 +
  position: absolute;
 +
  top: 21%;
 +
  left: 29%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.marcus{
 +
  position: absolute;
 +
  top: 21%;
 +
  left: 56.5%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.rita{
 +
  position: absolute;
 +
  top: 28.5%;
 +
  left: 14%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.walter{
 +
  position: absolute;
 +
  top: 28.5%;
 +
  left: 72%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.liyana{
 +
  position: absolute;
 +
  top: 37%;
 +
  left: 42.5%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.aaronl{
 +
  position: absolute;
 +
  top: 49%;
 +
  left: 26.5%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.russell{
 +
  position: absolute;
 +
  top: 49%;
 +
  left: 58.5%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.hyhy{
 +
  position: absolute;
 +
  top: 54.5%;
 +
  left: 9.5%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.ryan{
 +
  position: absolute;
 +
  top: 54.5%;
 +
  left: 76%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.beatrix{
 +
  position: absolute;
 +
  top: 65%;
 +
  left: 42.5%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.jiacheng{
 +
  position: absolute;
 +
  top: 75%;
 +
  left: 27%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.me{
 +
  position: absolute;
 +
  top: 75%;
 +
  left: 59%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
 
 +
/* The Modal (background) */
 +
.modal {
 +
    display: none; /* Hidden by default */
 +
    position: fixed; /* Stay in place */
 +
    z-index: 1; /* Sit on top */
 +
    left: 0;
 +
    top: 0;
 +
    width: 100%; /* Full width */
 +
    height: 100%; /* Full height */
 +
    overflow: auto; /* Enable scroll if needed */
 +
    background-color: rgb(0,0,0); /* Fallback color */
 +
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 +
}
 +
 
 +
/* Modal Content/Box */
 +
.profile-content {
 +
    margin: 10% auto; /* 15% from the top and centered */
 +
    padding: 20px;
 +
    border: 2px solid
 +
      rgba(133,133,133,.15);
 +
    background-color: #fff;
 +
    -moz-box-shadow: 0 0 8px rgba(0,0,0,.09);
 +
    -webkit-box-shadow: 0 0 8px rgba(0,0,0,.09);
 +
    box-shadow: 0 0 8px rgba(0,0,0,.09);
 +
    width: 80%; /* Could be more or less, depending on screen size */
 +
}
 +
.the-middle {
 +
  height:1px;
 +
  position: relative;
 +
}
 +
/* The Close Button */
 +
.close {
 +
    color: #aaa;
 +
    float: right;
 +
    font-size: 28px;
 +
    font-weight: bold;
 +
}
 +
 
 +
.close:hover,
 +
.close:focus {
 +
    color: black;
 +
    text-decoration: none;
 +
    cursor: pointer;
 +
}
 +
.profile{
 +
  display: flex;
 +
  flex-direction: row;
 +
  justify-content: center;
 +
  align-items: flex-start;
 +
  justify-content: space-evenly;
 +
 
 +
}
 +
.profile-description{
 +
  display: flex;
 +
  flex-wrap: no-wrap;
 +
  flex-grow: 3;
 +
  flex-direction: column;
 +
  justify-content: space-between;
 +
  text-align: justify;
 +
  max-width: 80%;
 +
}
 +
.profile-description h2{
 +
  font-family: 'Montserrat';
 +
  font-weight: 600;
 +
}
 +
.profile-title{
 +
  margin: auto auto 10px -15px;
 +
  padding-right:35px;
 +
  border-bottom: 1px solid black;
 +
}
 +
.profile-description-item{
 +
  display:flex;
 +
  padding: 0px;
 +
  margin: 0px;
 +
}
 +
.profile-picture{
 +
  margin-right: 15px;
 +
  position: relative;
 +
  text-align: center;
 +
  color: #fff;
 +
  display: flex;
 +
  flex-grow: 1;
 +
  flex-basis: 0;
 +
}
 +
.namecard{
 +
  line-height: 80%;
 +
  padding: none;
 +
}
 +
.namecard h1{
 +
  font-family: 'Montserrat';
 +
  font-weight: 600;
 +
  border: none;
 +
}
 +
.namecard p{
 +
  font-family: 'lora';
 +
  font-weight: 700;
 +
  font-style: italic;
 +
}
 +
.portrait1{
 +
  height: 300px;
 +
  width: 200px;
 +
  border: 1px solid #aaa;
 +
  border-radius: .5%;
 +
  background-size:cover;
 +
  background-repeat: no-repeat;
 +
  background-position: center;
 +
}
 +
.portrait_jc{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/1/18/T--NUS_Singapore-A--Jiacheng_formal.jpg");
 +
}
 +
.portrait_jc:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/1/12/T--NUS_Singapore-A--Jiacheng_informal.jpg");
 +
}
 +
.portrait_nanda{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/7/74/T--NUS_Singapore-A--Nanda_formal.jpg");
 +
}
 +
.portrait_nanda:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/f/fc/T--NUS_Singapore-A--Nanda_informal.jpg");
 +
}
 +
.portrait_ting2{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/0/07/T--NUS_Singapore-A--Tingting_formal.jpg");
 +
}
 +
.portrait_ting2:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/c/c2/T--NUS_Singapore-A--Tingting_informal.jpg");
 +
}
 +
.portrait_marcus{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/7/7c/T--NUS_Singapore-A--Marcus_formal.jpg");
 +
}
 +
.portrait_marcus:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/5/56/T--NUS_Singapore-A--Marcus_informal.jpg");
 +
}
 +
.portrait_rita{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/b/be/T--NUS_Singapore-A--Rita_formal.jpg");
 +
}
 +
.portrait_rita:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/a/a5/T--NUS_Singapore-A--Rita_informal.jpg");
 +
}
 +
.portrait_walter{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/0/02/T--NUS_Singapore-A--Walter_formal.jpg");
 +
}
 +
.portrait_walter:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/6/6a/T--NUS_Singapore-A--Walter_informal.jpg");
 +
}
 +
.portrait_liyana{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/3/3d/T--NUS_Singapore-A--Liyana_formal.jpg");
 +
}
 +
.portrait_liyana:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/9/91/T--NUS_Singapore-A--Liyana_informal.jpg");
 +
}
 +
.portrait_aaronl{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/2/2f/T--NUS_Singapore-A--AaronL_formal.jpg");
 +
}
 +
.portrait_aaronl:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/7/71/T--NUS_Singapore-A--AaronL_informal.jpg");
 +
}
 +
.portrait_russell{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/0/08/T--NUS_Singapore-A--Russell_formal.jpg");
 +
}
 +
.portrait_russell:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/2/2b/T--NUS_Singapore-A--Russell_informal.jpg");
 +
}
 +
.portrait_hyhy{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/1/1b/T--NUS_Singapore-A--Haoyuan_formal.jpg");
 +
}
 +
.portrait_hyhy:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/5/52/T--NUS_Singapore-A--Haoyuan_informal.jpg");
 +
}
 +
.portrait_beatrix{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/d/d3/T--NUS_Singapore-A--Beatrix_formal.jpg");
 +
}
 +
.portrait_beatrix:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/f/f4/T--NUS_Singapore-A--Beatrix_informal.jpg");
 +
}
 +
.portrait_me{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/9/9f/T--NUS_Singapore-A--Me_formal.jpg");
 +
}
 +
.portrait_me:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/f/fd/T--NUS_Singapore-A--Me_informal.jpg");
 +
}
 +
.portrait_ryan{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/d/db/T--NUS_Singapore-A--Ryan_formal.jpg");
 +
}
 +
.portrait_ryan:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/1/1e/T--NUS_Singapore-A--Ryan_informal.jpg");
 +
}
 +
 
 +
/***************************** CSS FOR SUPERVISORS *********************************************/
 +
 
 +
.namecard_column {
 +
  max-width: 98%;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  margin-bottom: 30px;
 +
  padding: 20px;
 +
}
 +
 
 +
 
 +
#card-left {
 +
  margin-left:12.5%;
 +
}
 +
 
 +
#card-right {
 +
  margin-right:12.5%;
 +
}
 +
 
 +
 
 +
@media (max-width: 650px) {
 +
  .namecard_column {
 +
    width: 100%;
 +
    display: block;
 +
  }
 +
}
 +
 
 +
.card {
 +
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 +
}
 +
 
 +
.intro_container {
 +
  display: flex;
 +
  flex-direction: row;
 +
  justify-content: space-between;
 +
  align-items: flex-start;
 +
  margin-top: 16px;
 +
  padding: 0 5px;
 +
}
 +
.intro-item{
 +
  display: flex;
 +
  flex: 1;
 +
  flex-direction: column;
 +
  text-align: center;
 +
}
 +
 
 +
.intro_container::after, .row::after {
 +
  content: "";
 +
  clear: both;
 +
  display: table;
 +
}
 +
 
 +
.title {
 +
  color: grey;
 +
}
 +
 
 +
img.social_link {
 +
    margin:2%;
 +
    position:relative;
 +
    float:left;
 +
    width:15%;
 +
    height:15%;
 +
    padding-bottom: 10px;
 +
}
 +
 
 +
/*******************************************CSS FOR SPONSORS ******************************/
 +
 
 +
.sponsorship-header{
 +
  width: 47.5%;
 +
  height: auto;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  display: block;
 +
    }
 +
.sponsors-wrapper{
 +
  width: 80%;
 +
}
 +
.sponsors-overview{
 +
  display: flex;
 +
  flex-direction: column;
 +
  border-bottom: 1px solid black;
 +
  text-align: center;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  padding: 5px 15px;
 +
}
 +
.sponsors-overview-title{
 +
  display: block;
 +
  font-family: "Montserrat" ,serif;
 +
  font-weight: 600;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  margin-top: 15px;
 +
  margin-bottom: 15px;
 +
  text-align: center
 +
}
 +
.sponsors-overview-rows{
 +
  display: flex;
 +
  flex-direction: row;
 +
  justify-content: space-evenly;
 +
  margin: 15px 0px 15px 0px;
 +
 
 +
}
 +
 
 +
/* Style the tab */
 +
 
 +
/* Style the tab boxes */
 +
.sponsor-boxes1{
 +
  display: flex;
 +
  margin: 15px;
 +
  color: #000;
 +
  text-align: center;
 +
  vertical-align: 0%;
 +
  outline: none;
 +
  border: none;
 +
  cursor: pointer;
 +
  background-color: inherit;
 +
 
 +
}
 +
/* Change background color of buttons on hover */
 +
/* How about no
 +
.sponsors-overview-rows button:hover {
 +
    background-color: #ddd;
 +
*/
 +
}
 +
 
 +
/* Create an active/current tablink class */
 +
.sponsors-overview-rows button.active {
 +
    background-color: #ccc;
 +
}
 +
 
 +
/***********************************CSS For Medals ***************************************/
 +
 
 +
.medals-header{
 +
  width: 42.5%;
 +
  height: auto;
 +
  margin: auto;
 +
}
 +
.checklist {
 +
  margin: auto 5%;
 +
  padding: 12px;
 +
  font-family: "Lora", serif;
 +
}
 +
.checklist table{
 +
  margin: 6px auto auto auto;
 +
}
 +
.checklist table th, .checklist table td{
 +
  float:left;
 +
  margin: 3px;
 +
}
 +
.checklist table th{
 +
  font-family: "Montserrat", sans-serif;
 +
  font-weight: 800;
 +
  font size: 20px;
 +
}
 +
.tick {
 +
  font-size: 64px;
 +
  color: #228b22;
 +
}
 +
.description{
 +
  width: 70%;
 +
  text-align: justify;
 +
}
 +
 
 +
 
 +
</style>
  
 
</html>
 
</html>
−
{{:Team:NUS_Singapore-A/Templates/Footer}}
 

Revision as of 09:23, 9 October 2018