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

 
(136 intermediate revisions by 3 users not shown)
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;
 +
}
  
 +
#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
 +
{
 +
    font-family: 'Arial', sans-serif;
 +
    color: black;
 +
    background: none;
 +
    font-weight: normal;
 +
    margin-bottom: 0;
 +
    text-align: left;
 +
    overflow: visible;
 +
    border: none;
 +
}
 +
/*as a script gets a paragraph, by default, no formatting for p */
  
  
−
</style>
+
.caption-justify {
 +
  text-align: justify;
 +
  margin: 0 auto;
 +
  width: 70%;
 +
  font-style: italic;
 +
  font-size: 16px;
 +
}
  
 +
.reference {
 +
    font-family: Arial;
 +
    font-size: 16px;
 +
    font-weight: 100;
 +
    line-height: 22px;
 +
    text-align: left;
 +
}
  
−
<!------------------------------------------------------ALL HTML BELONGS BELOW HERE------------------------------------------------------------------------------------------------------------------------------------------------------------------------>
+
.all-wrapper{
−
<head>
+
  max-width: 1200px;
 +
  position: relative;
 +
  margin: auto;
 +
  background-color: rgba(255, 255, 255, 1.0);
 +
}
  
−
</head>
+
.content-wrapper{
 +
  width: 90%;
 +
  position: relative;
 +
  margin: auto;
 +
}
  
−
<body>
+
.header{
−
<div class="inner-border" style="border-top: none;">
+
  width: 55%;
−
   <div>
+
   height: auto;
−
    <h3 id='Overview'>Eco-friendly Bio-manufacturing of Flavonoid Dyes in Escherichia coli via Computer-mediated Optogenetic Regulation</h2>
+
  margin: auto;
 +
  display: block;
 +
} 
  
−
    <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.
+
.header:hover {
−
    </p>
+
  animation: shake 0.5s;
−
<br><br><br>
+
  animation-iteration-count: infinite;
 +
}
  
 +
@keyframes shake {
 +
  0% { transform: translate(1px, 1px) rotate(0deg); }
 +
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
 +
  20% { transform: translate(-3px, 0px) rotate(1deg); }
 +
  30% { transform: translate(3px, 2px) rotate(0deg); }
 +
  40% { transform: translate(1px, -1px) rotate(1deg); }
 +
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
 +
  60% { transform: translate(-3px, 1px) rotate(0deg); }
 +
  70% { transform: translate(3px, 1px) rotate(-1deg); }
 +
  80% { transform: translate(-1px, -1px) rotate(1deg); }
 +
  90% { transform: translate(1px, 2px) rotate(0deg); }
 +
  100% { transform: translate(1px, -2px) rotate(-1deg); }
 +
}
  
−
  </div>
 
−
</div>
 
  
−
</body>
+
/********************* Add our own style here ********************************/
 +
 
 +
/****************************BASIC CSS STUFF ****************************************/
 +
h1 {
 +
    font-family: Arial;
 +
    font-size: 36px;
 +
    font-style: normal;
 +
    font-variant: normal;
 +
    font-weight: 700;
 +
    line-height: 38px;
 +
}
 +
h2 {
 +
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
 +
    font-size: 28px;
 +
    font-style: normal;
 +
    font-variant: normal;
 +
    font-weight: 700;
 +
    line-height: 34px;
 +
}
 +
 
 +
h3 {
 +
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
 +
    font-size: 24px;
 +
    font-style: normal;
 +
    font-variant: normal;
 +
    font-weight: 700;
 +
    line-height: 29px;
 +
}
 +
 
 +
h4 {
 +
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
 +
    font-size: 20px;
 +
    font-style: normal;
 +
    font-variant: normal;
 +
    font-weight: 700;
 +
    line-height: 29px;
 +
}
 +
 
 +
p, p~ul li, p~ol li, .row ul li{
 +
    font-family: Arial;
 +
    font-size: 20px;
 +
    font-style: normal;
 +
    font-variant: normal;
 +
    font-weight: 100;
 +
    line-height: 29px;
 +
    text-align: justify;
 +
}
 +
 
 +
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;
 +
}
 +
.quote {
 +
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
 +
    font-size: 24px;
 +
    font-style: italic;
 +
    font-variant: small-caps;
 +
    font-weight: 400;
 +
    line-height: 36px;
 +
    width: 75%;
 +
    padding: 12px;
 +
    margin: auto auto;
 +
    text-align: center;
 +
    border-radius: 5%;
 +
    border: 1px solid #e2e2e2;
 +
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 +
    -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 +
    -moz-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 +
}
 +
.quote:before{
 +
    font-family:FontAwesome;
 +
    content: "\f10d";
 +
    float: left;
 +
    font-size: 32px;
 +
}
 +
.quote:after{
 +
    font-family:FontAwesome;
 +
    content: "\f10e";
 +
    float: right;
 +
    font-size: 32px;
 +
}
 +
@media only screen and (max-width: 700px) {
 +
 
 +
h1 { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 19px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 19px; }
 +
 
 +
h2 { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 17px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 19px; }
 +
 +
h3 { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 15px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 19px; }
 +
 
 +
h4{ font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 13.5px; font-style: normal; font-variant: normal; font-weight: 100; line-height: 19px; }
 +
 
 +
p, p~ul li, p~ol li, .row ul li { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 100; line-height: 19px; }
 +
 
 +
blockquote { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 15px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 19px; }
 +
 
 +
pre { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 19px; }
 +
 
 +
.accordion{
 +
font-size: 12px !important;
 +
padding: 10px;
 +
}
 +
.accordion:after {
 +
  font-size: 20px !important;
 +
}
 +
.active,
 +
.accordion:hover {
 +
  font: bold 12px "Montserrat", sans-serif;
 +
  background-color: #2980b9;
 +
}
 +
.accordion-closer{
 +
  padding: 5px;
 +
  width: 12.0%;
 +
  font-size: 12px !important;
 +
  margin: 6px 0px;
 +
}
 +
.accordion-closer:hover {
 +
  font: bold 12px "Montserrat", sans-serif;
 +
  background-color: #a80d31;
 +
}
 +
.accordion-closer:after{
 +
  font-size: 20px !important;
 +
}
 +
table{
 +
  font-size: 10px !important;
 +
}
 +
.figures2 figcaption, .figures figcaption{
 +
  font-size: 11px;
 +
}
 +
 
 +
}
 +
 
 +
/********************** CSS FROM DESIGN *****************************************************/
 +
 
 +
    .figures{
 +
    margin: auto auto;
 +
    max-width: 80%;
 +
    }
 +
    .figures img{
 +
    display: inline-block;
 +
    }
 +
    .figures2{
 +
    margin: auto auto;
 +
    padding-left: 10px;
 +
    padding-right: 10px;
 +
    padding-top: 10px;
 +
    padding-bottom: 5px;
 +
    max-width: 85%;
 +
    }
 +
    .figures2 figcaption{
 +
    margin: 12px;
 +
    font-size: 16px;
 +
    text-align: center;
 +
    font-style: italic;
 +
    }   
 +
    .figures2{
 +
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 +
    -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 +
    -moz-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 +
    }
 +
    .figures figcaption{
 +
    margin: 12px;
 +
    font-size: 16px;
 +
    text-align: center;
 +
    font-style: italic;
 +
    }
 +
    .no-italics {
 +
    font-style: normal; 
 +
    }
 +
 
 +
 
 +
 
 +
/****************************THIS IS CSS FROM INTERLAB*******************************/
 +
/* The accordion is the class given to the drop-down menu thingy */
 +
.accordion {
 +
  background-color: #3498db;
 +
  color: #fff;
 +
  cursor: pointer;
 +
  padding: 15px;
 +
  width: 100%;
 +
  text-align: left;
 +
  border: none;
 +
  -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
 +
  -moz-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
 +
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
 +
  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: 400;
 +
  font-size: 20px;
 +
  margin-bottom: 6px;
 +
}
 +
 
 +
/* 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: #2980b9;
 +
}
 +
 
 +
/* Style the accordion panel. Note: hidden by default */
 +
.panel {
 +
  background-color: transparent;
 +
  text-align: justify;
 +
  margin-top: 0;
 +
  max-height: 0;
 +
  overflow: hidden;
 +
  transition: max-height 0.2s ease-out;
 +
  max-width: 100%;
 +
}
 +
 
 +
.accordion:after {
 +
  font-family: FontAwesome;
 +
  font-size: 27px;
 +
  font-weight: 800;
 +
  color: #fff;
 +
  content: "\f067";
 +
  float: right;
 +
  margin-left: 5px;
 +
}
 +
.active:after {
 +
  font-family: FontAwesome;
 +
  content: "\f068";
 +
}
 +
.accordion-closer{
 +
  background-color: #ed1144;
 +
  color: #fff;
 +
  cursor: pointer;
 +
  outline: none;
 +
  padding: 8px;
 +
  width: 12.0%;
 +
  border-radius: 25px;
 +
  text-align: left;
 +
  border-color: transparent;
 +
  -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.23), 0px 3px 6px rgba(0, 0, 0, 0.32);
 +
  -moz-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.23), 0px 3px 6px rgba(0, 0, 0, 0.32);
 +
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.23), 0px 3px 6px rgba(0, 0, 0, 0.32);
 +
  font-family: "Montserrat", sans-serif;
 +
  font-weight: 400;
 +
  font-size: 20px;
 +
  margin: 6px 0px;
 +
}
 +
.accordion-closer:hover {
 +
  font: bold 20px "Montserrat", sans-serif;
 +
  background-color: #a80d31;
 +
}
 +
.accordion-closer:after{
 +
  font-family: FontAwesome;
 +
  font-size: 27px;
 +
  content:"\f00d";
 +
  float: right;
 +
  margin-left: 5px;
 +
}
 +
table,
 +
th,
 +
td {
 +
  border: none;
 +
  border-collapse: collapse;
 +
}
 +
table {
 +
  font-family: "Arial";
 +
  font-size: 18px;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  max-width: 95%;
 +
}
 +
 
 +
th,
 +
td {
 +
  text-align: left;
 +
  padding: 3px;
 +
}
 +
 
 +
img {
 +
  display: block;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  max-width:100%;
 +
}
 +
 
 +
.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: 48%;
 +
  margin-right: 2%;
 +
}
 +
 
 +
.right {
 +
  width: 48%;
 +
  margin-left: 2%;
 +
}
 +
 
 +
/* Clear floats after the columns */
 +
.row:after {
 +
  content: "";
 +
  display: table;
 +
  clear: both;
 +
}
 +
.video-landscape{
 +
width: 80%;
 +
height: auto;
 +
margin: auto auto;
 +
}
 +
.video-portrait{
 +
width: 30%;
 +
height: auto;
 +
margin: auto auto;
 +
}
 +
video{
 +
width: 100%;
 +
height: auto;
 +
}
 +
 
 +
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
 +
@media screen and (max-width: 800px) {
 +
    .column {
 +
        width: 100%;
 +
        margin: 15px;
 +
    }
 +
}
 +
 
 +
/********************
 +
    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;
 +
    }
 +
 
 +
    .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;
 +
    }
 +
 
 +
 
 +
/* 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*************************************/
 +
 
 +
.pictures{
 +
  width: 50px;
 +
  height: 50px;
 +
  background-color: 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*******************************/
 +
   
 +
    /* Style the tab */
 +
 
 +
/* Style the tab boxes */
 +
.sponsor-boxes{
 +
  vertical-align: 50%;
 +
  margin: auto auto;
 +
  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: transparent;
 +
}
 +
 
 +
.tabcontent-wrapper{
 +
  text-align: justify;
 +
  max-width: 100%;
 +
  background-color: rgba(255, 255, 255, 0.6);
 +
}
 +
 
 +
/* Style the tab content */
 +
.tabcontent {
 +
    display: none;
 +
    max-width: 85%;
 +
    height: auto;
 +
    margin: auto auto;
 +
}
 +
 
 +
.sponsor-pic{
 +
  display: flex;
 +
  width: 235px;
 +
  max-width: 235px;
 +
  height: auto;
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
}
 +
.sponsor-description{
 +
  display: flex;
 +
  margin-left: 16px;
 +
  line-height: normal;
 +
  text-align: justify;
 +
}
 +
 
 +
/*************************************CSS FOR COLLAB *********************************/
 +
 
 +
.collab-content{
 +
  text-align: justify;
 +
}
 +
.collab-img-center{
 +
  display: block;
 +
  max-width: 60%;
 +
  height: auto;
 +
  margin: 12px auto 3px auto;
 +
}
 +
 
 +
/*********************************CSS FOR PUBLIC ENGAGEMENT*****************************/
 +
 
 +
 
 +
    .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: 5% auto; /* 10% from the top and centered */
 +
    padding: 2.5%;
 +
    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: 100%; /* 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: 360px;
 +
  width: 250px;
 +
  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/8/87/T--NUS_Singapore-A--Beatrix2.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;
 +
}
 +
.intro-item h2, .intro-item p{
 +
  text-align: center;
 +
  margin-right: 0px;
 +
  margin-left: 0px;
 +
}
 +
 
 +
.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 ******************************/
 +
 
 +
.sponsors-wrapper{
 +
  width: 80%;
 +
}
 +
.sponsors-overview{
 +
  display: block;
 +
  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-size: 30px;
 +
  font-weight: 600;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  margin-top: 15px;
 +
  margin-bottom: 15px;
 +
  text-align: center
 +
}
 +
.sponsors-overview-rows{
 +
  display: inline-block;
 +
  margin: 15px 0px 15px 0px;
 +
  text-align: center;
 +
}
 +
.sponsors-overview-rows button{
 +
display: inline-block;
 +
vertical-align:middle;
 +
}
 +
/* Style the tab */
 +
 
 +
/* Style the tab boxes */
 +
.sponsor-boxes1,.sponsor-boxes2,.sponsor-boxes3{
 +
  display: inline-block;
 +
  margin: 15px;
 +
  color: #fff;
 +
  text-align: center;
 +
  vertical-align: 0%;
 +
  outline: none;
 +
  border: none;
 +
  cursor: pointer;
 +
  background-color: inherit;
 +
}
 +
.sponsor-boxes1{
 +
  max-width:50%;
 +
  height:auto;
 +
}
 +
.sponsor-boxes2{
 +
  max-width:40%;
 +
  height:auto;
 +
}
 +
.sponsor-boxes3{
 +
  max-width:30%;
 +
  height:auto;
 +
}
 +
/* 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 ***************************************/
 +
 
 +
.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}}
 

Latest revision as of 01:48, 18 October 2018