Difference between revisions of "Team:Utrecht/css/styling"

 
(869 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
/*wikifix*/
 +
 +
#top_title { display: none !important; }
 +
/*Override default CSS*/
 +
#sideMenu, #top_title {display:none;}
 +
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px; background-color: transparent; line-height: inherit}
 +
 +
 +
#bodyContent a[href^="mailto:"], .link-mailto {
 +
    background: none;
 +
    padding: 0px;
 +
}
 +
 +
#bodyContent a[href^="https://"], .link-https {
 +
    background: none;
 +
    padding: 0px;
 +
}
 +
 +
/* set all basic objects to neutral formatting*/
 +
html, body, div, span, applet, object, iframe, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
 +
    margin: 0;
 +
    padding: 0;
 +
    border: 0;
 +
    outline: 0;
 +
    font-size: 100%;
 +
    vertical-align: baseline;
 +
    background: transparent;
 +
}
 +
 +
#globalWrapper {
 +
    margin: 0;
 +
    padding: 0;
 +
    border: 0;
 +
    outline: 0;
 +
    font-size: 100%;
 +
    vertical-align: baseline;
 +
    background: transparent;
 +
}
 +
 +
 
ul {
 
ul {
 
list-style-image: none;
 
list-style-image: none;
 +
        font-size: 1em;
 
}
 
}
  
−
#content {
+
#top_title, #top_menu_under {
−
        width : 100%;
+
display: none;
−
        margin: 0;
+
−
background: none;
+
−
        padding: 0;
+
 
}
 
}
  
−
#top_title {
+
 
−
display: none;
+
#content{
 +
  width: 100%;
 +
  height: 100%;
 +
  padding: 0px;
 +
  margin: 0px;
 +
  background-image: url("https://static.igem.org/mediawiki/2018/d/dd/T--Utrecht--2018--main-Background.svg");
 +
  background-repeat: no-repeat;
 +
  background-size: cover;
 
}
 
}
  
−
#intro {
+
#HQ_page table{
−
color:Black;
+
  margin:0;
−
background-color:#C2B2B2;
+
  float: right;
−
        margin: 10px;
+
 
}
 
}
  
−
img{
+
#globalWrapper{
−
         margin: 10px;
+
  padding: 0;
 +
}
 +
 
 +
/*Standard html styling*/
 +
html{
 +
        background-color: #eaf4edff;
 +
        font-family: "PT Sans";
 +
        font-weight: normal;
 +
         font-style: normal;
 
}
 
}
  
 
body{
 
body{
−
background-color: #333;
+
font-family: "PT Sans";
−
        padding: 0;
+
        font-weight: normal;
−
         margin: 0;
+
        font-style: normal;
 +
font-size: 1em;
 +
margin: 14.1vh 0px 0px 0px;
 +
        background-color: transparent;
 +
@charset 'UTF-8'
 +
    }
 +
 
 +
h1,h2,h3,h4,h5,h6{
 +
text-align: left;
 +
padding-bottom: 20px;
 +
         font-family: "Carme";
 
}
 
}
  
 +
figure{
 +
      background-color: #A4C2F4;
 +
      box-shadow: 10px 10px 5px grey;
 +
      padding: 1%;
 +
      font-size: 0.7vw;
 +
      border-radius: 25px;
 +
}
  
−
article{
+
/*Identified*/
−
        background-color:#C2B2B2;
+
.story{
−
         padding-left: 10;
+
width: 40%;
 +
padding: 20px;
 +
color: #000;
 +
background-color:#FFFFFF;
 +
         font-size: 0.8vw;
 +
        box-sizing: border-box;
 +
        float: right;
 
}
 
}
  
−
#thumbnail {
+
.GroupPhoto{
−
display: block;
+
width: 60%;
−
width: 150px;
+
height: auto;
−
height: 150px;
+
margin: 0px;
−
}
+
padding: 0px;
−
+
float: left;
−
#thumbnail:hover + #title {
+
}
−
display: block;
+
 
−
}
+
 
−
+
 
−
#title {
+
a.logo{
−
  display: none;
+
    position:fixed;
−
color: #ffffff;
+
top: 2%;
−
background-color: #000000;
+
left: 2%;
−
text-align: center;
+
width: 15vh;
−
width: 130px;
+
    background-color:#fff;
−
padding: 10px;
+
    border-radius: 0%;
−
}
+
    z-index:999;
−
+
    border-radius: 20%;
 +
    box-shadow: 0px 0px 10px grey;
 +
}
 +
 
 +
a.logo:before{
 +
content: "";
 +
display: block;
 +
padding-top: 100%; /* initial ratio of 1:1*/
 +
}
 +
 
 +
#logo{
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
bottom: 0;
 +
right: 0;
 +
width: 100%;
 +
padding: 10px;
 +
box-sizing: border-box;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
#navSymbol{
 +
    padding: 5% 0% ;
 +
    height: 100%;
 +
    width: auto;
 +
    margin: auto;
 +
    z-index:999;
 +
box-sizing: border-box;
 +
}
 +
 
 +
/*classes*/
  
 +
/*Top Bar*/
 
   
 
   
 
.topnav {
 
.topnav {
−
   overflow: hidden;
+
   height:14%;
−
   background-color: #333;
+
  width:100%;
 +
   background-image: linear-gradient(to right,#A4C2F4, white, #A4C2F4);
 +
  position:fixed;
 +
  top: 0px; /* Position the navbar at the top of the page */
 +
  left:0px; 
 +
  z-index:1000;
 
}
 
}
  
−
.topnav a {
+
.menuM{
−
   float: left;
+
   height:70%;
−
   color: #f2f2f2;
+
   width:100%;
−
   text-align: center;
+
  background-color: #fff;
−
   padding: 14px 16px;
+
   position:absolute;
 +
  padding-left: 25vh;
 +
  top: 30%; /* Position the navbar at the top of the page */
 +
  left:0px;
 +
  box-shadow: 5px 5px 20px grey;
 +
  z-index:100;
 +
  overflow: auto;
 +
  white-space: nowrap;
 +
  }
 +
 
 +
.menuM a {
 +
  float:left;
 +
   padding: 0 0%;
 +
  height: 100%;
 +
  width: 20vh;
 +
  color: black;
 
   text-decoration: none;
 
   text-decoration: none;
−
   font-size: 17px;
+
   box-sizing: border-box;
 +
      text-align: center;
 
}
 
}
  
−
.topnav a:hover {
+
.menuM a:hover {
−
   background-color: #ddd;
+
  height: 100%;
 +
   background-color: #90EE90;
 +
  color: white;
 +
  border-radius: 30px 30px 0px 0px;
 +
}
 +
 
 +
.menuM a.active {
 +
  background-color: #A4C2F4;
 +
  height:100%;
 +
  border-radius: 30px 30px 0px 0px;
 +
}
 +
 
 +
/* Bottom Bar*/
 +
 
 +
.submenuM {
 +
  position: fixed;
 +
  width: 20vh;
 +
  top: 14%;
 +
  left: 25vh;
 +
  z-index: 4000;
 +
  background-color: #fff;
 +
  box-shadow: 5px 20px 20px -10px grey;
 +
  border: 0px 0px 1px 1px solid black;
 +
  border-radius: 0px 0px 30px 30px;
 +
  overflow: auto;
 +
  display: none;
 +
}
 +
 
 +
.submenuM:empty{
 +
  display: none;
 +
}
 +
 
 +
.submenuM a {
 +
  width: 100%;
 
   color: black;
 
   color: black;
 +
  padding: 5%;
 +
  box-sizing: border-box;
 +
  text-align: center;
 +
  text-decoration: none;
 +
  font-size: 2vh;
 
}
 
}
  
−
.topnav a.active {
+
.submenuM a:hover {
−
   background-color: #ff0000;
+
   background-color: #90EE90;
 
   color: white;
 
   color: white;
 +
  border-radius: 0px;
 +
}
 +
 +
.submenuM a.active {
 +
  background-color: #A4C2F4ff;
 +
  border-radius: 0px;
 +
}
 +
 +
.menuM:hover .submenuM{
 +
  display: block;
 +
}
 +
 +
 +
/*Text Classes*/
 +
 +
.references{
 +
padding: 20px 10%;
 +
font-size: 10px;
 +
box-sizing: border-box;
 +
        box-shadow: 0px 10px 10px grey;
 +
}
 +
 +
.customelementM{
 +
 +
  margin: 0 10%;
 +
}
 +
 +
 +
.customelementM2 {
 +
box-sizing: border-box;
 +
padding:0;
 +
        margin: 0 10%;
 +
}
 +
 +
.customelementM2 img{
 +
}
 +
 +
.customelementM3 {
 +
padding: 50px 160px;
 +
        margin-left: 10%;
 +
box-sizing: border-box;
 +
        color: #000;
 +
        background-color: white;
 +
        height: 100%;
 +
        display: -webkit-flex; /* Safari */
 +
        display: flex;
 +
}
 +
 +
.customelementM4A {
 +
padding: 50px;
 +
        margin: 0 5% 0 25vh;
 +
box-sizing: border-box;
 +
        color: #000;
 +
        background-color: white;
 +
        height: 100%;
 +
        text-align: justify;
 +
        border-left: 15px solid #A4C2F4;
 +
        border-bottom: 15px solid #A4C2F4;           
 +
}
 +
 +
.customelementM4B {
 +
padding: 50px;
 +
        margin: 0 5% 0 25vh;
 +
box-sizing: border-box;
 +
        color: #000;
 +
        background-color: white;
 +
        height: 100%;
 +
        text-align: justify;
 +
        border-right: 15px solid #A4C2F4;
 +
        border-bottom: 15px solid #A4C2F4;             
 +
}
 +
 +
 +
.customelementM5A {
 +
padding: 50px;
 +
        margin: 0 5% 0 25vh;
 +
box-sizing: border-box;
 +
        color: #000;
 +
        background-color: white;
 +
        text-align: justify;
 +
        border-left: 15px solid #A4C2F4;
 +
        border-bottom: 15px solid #A4C2F4; 
 +
        overflow: auto;
 +
         
 +
}
 +
 +
.customelementM5B {
 +
padding: 50px;
 +
        margin: 0 5% 0 25vh;
 +
box-sizing: border-box;
 +
        color: #000;
 +
        background-color: white;
 +
        height: 100%;
 +
        text-align: justify;
 +
        border-right: 15px solid #A4C2F4;
 +
        border-bottom: 15px solid #A4C2F4;
 +
        overflow: auto; 
 +
}
 +
 +
.grid-container{
 +
    width: 100%;
 +
    box-sizing: border-box;
 +
    display: inline-grid;
 +
    grid-template-columns: 45% 45%;
 +
    grid-column-gap: 5%;
 +
    grid-row-gap: 5%;
 +
    grid-gap: 5px;
 +
    display: inline-grid;
 +
    -ms-grid-template-columns: 45% 45%;
 +
    -ms-grid-column-gap: 5%;
 +
    -ms-grid-row-gap: 5%;
 +
    padding: 5% 0!important;
 +
    -ms-grid-gap: 5px;
 +
}
 +
 +
.grid-container figure{
 +
    box-shadow: none;
 +
    padding: 0;
 +
}
 +
 +
.grid-item{
 +
      padding: 20px;
 +
      text-align: justify;
 +
      background-color: #A4C2F4;
 +
      box-shadow: 10px 10px 5px grey;
 +
      box-sizing: border-box;
 +
}
 +
 +
.contact{
 +
      border: 1px solid black;
 +
      margin: 2% 30%;
 +
      padding: 10px;
 +
      width: auto;
 +
}
 +
 +
a.icon {
 +
    float: left;
 +
    display: none;
 +
text-decoration:none;
 +
font-size: 1em;
 +
text-align: center;
 +
}
 +
 +
.containerMM{
 +
display: none;
 +
}
 +
 +
.bar1, .bar2, .bar3 {
 +
    width: 35px;
 +
    height: 5px;
 +
    background-color: #333;
 +
    margin: 5px 10px;
 +
    transition: 0.4s;
 +
}
 +
 +
/* Rotate first bar */
 +
.change .bar1 {
 +
    -webkit-transform:  ;
 +
    transform:  translate(0px, 10px) rotate(-45deg) ;
 +
}
 +
 +
/* Fade out the second bar */
 +
.change .bar2 {
 +
    opacity: 0;
 +
}
 +
 +
/* Rotate last bar */
 +
.change .bar3 {
 +
    -webkit-transform: rotate(45deg)  ;
 +
    transform: translate(0px, -10px) rotate(45deg)  ;
 +
}
 +
 +
p{
 +
    font-size: 1em !important;
 +
    clear: none !important;
 +
}
 +
 +
 +
.event{
 +
margin: opx 5%;
 +
}
 +
.tooltipcontainer{
 +
background-color: #ddd;
 +
border-radius: 5px;
 +
padding: 5px;
 +
border: 1px solid black;
 +
}
 +
 +
.customHeader{
 +
        font-size: 2em;
 +
        border-right: 15px solid #A4C2F4;
 +
        border-bottom: 15px solid #A4C2F4;
 +
        border-top: 15px solid #A4C2F4;
 +
        background-color: #AAAAAA;
 +
        padding: 10%;
 +
        margin: 0 5% 0 25vh;
 +
        text-align: center;
 +
        margin-top: 0px;
 +
}
 +
 +
.customHeader2{
 +
        border-top: 15px solid #A4C2F4;
 +
        border-right: 15px solid #A4C2F4;
 +
        border-bottom: 15px solid #A4C2F4;
 +
        margin: 0 5% 0 25vh;
 +
        padding: 0;
 +
}
 +
 +
.customHeader2 img{
 +
      width: 100%;
 +
}
 +
 +
 +
.url_icon {
 +
 +
    background: url(https://static.igem.org/mediawiki/2017/0/0f/Uu_url_external.png) center right no-repeat !important;
 +
    height: 13px !important;
 +
    padding-right: 15px !important;
 +
 +
}
 +
 +
.GroupPhoto[usemap]{
 +
  width: 60%;
 +
  height: auto;
 +
}
 +
 +
img[usemap]{
 +
  width: 100%;
 +
  height: auto;
 +
}
 +
 +
 +
.customelementC h3{
 +
width: 100%;
 +
background-color:#A4C2F4;
 +
text-align: center;
 +
font-size: 1em;
 +
        cursor: default;
 +
}
 +
 +
.customelementC h2{
 +
width: 100%;
 +
background-color:#6094ec;
 +
text-align: center;
 +
font-size: 2em;
 +
        cursor: default;
 +
}
 +
.CollapseThis{
 +
        background-color:#fff;
 +
        text-align: justify;
 +
        display: none;
 +
}
 +
 +
#BackToTop{
 +
    display: none; /* Hidden by default */
 +
    position: fixed; /* Fixed/sticky position */
 +
    bottom: 2%; /* Place the button at the bottom of the page */
 +
    right: .5vw; /* Place the button 30px from the right */
 +
    z-index: 99; /* Make sure it does not overlap */
 +
    border: none; /* Remove borders */
 +
    outline: none; /* Remove outline */
 +
    background-color: #6094ec; /* Set a background color */
 +
    color: white; /* Text color */
 +
    cursor: pointer; /* Add a mouse pointer on hover */
 +
    padding: 15px; /* Some padding */
 +
    border-radius: 10px; /* Rounded corners */
 +
    font-size: 1vw; /* Increase font size */
 +
 +
}
 +
.sidenav{
 +
  white-space: nowrap;
 +
  width: 15vh;
 +
  background-color: transparent;
 +
  position:fixed;
 +
  top: 5%;
 +
  padding: 0% 2%;
 +
  text-align: center;
 +
  font-weight: bold;
 +
  font-size: 2vh;
 +
}
 +
.sidenav ul {
 +
  list-style: none;
 +
  height: 100%;
 +
  margin: 0;
 +
  padding: 100% 0 20% 0;
 +
  padding-top: 100%;
 +
  border: 5px solid #77a4ef;
 +
  border-radius: 20px;
 +
  background-color: #A4C2F4;
 +
}
 +
 +
.sidenav ul li a {
 +
  display: block;
 +
  padding: 0.5rem 0rem;
 +
  color: darkblue;
 +
  text-decoration: none;
 +
}
 +
.sidenav ul li a.current {
 +
  background: #1c66e4;
 +
}
 +
 +
.sidenav ul li a:hover {
 +
  background: #90EE90;
 +
}
 +
 +
 +
 +
footer {
 +
    width: 100%;
 +
height: 10%;
 +
margin-top: 2%;
 +
    background-color: #77a4ef;
 +
    color: white;
 +
    text-align: center;
 +
border-radius: 40px 40px 0 0;
 +
}
 +
 +
.containerSymbol{
 +
  margin: 0 auto;
 +
  height: 100%;
 +
  padding: 1%
 +
}
 +
 +
.contactSymbol{
 +
  padding: 1%;
 +
  margin: 0 5%;
 +
  font-size: 3vw;
 +
  border-radius: 50%;
 +
  background-color: white;
 +
  display: inline-block;
 +
  width: 3.5%;
 +
}
 +
 +
.contactSymbol a{
 +
  text-decoration: none;
 +
  color: black;
 +
}
 +
 +
/* Style the tab */
 +
.anotherWrapper{
 +
position:relative;
 +
width:100%;
 +
}
 +
.tab {
 +
    margin: 0 5% 0 25vh;
 +
width:100%;
 +
position:absolute;
 +
top:-2.5vw;
 +
        z-index: 0;
 +
        height: 2.5vw
 +
}
 +
 +
/* Style the buttons that are used to open the tab content */
 +
.tab button {
 +
    background-color: #A4C2F4;
 +
width: 15%;
 +
height: 100%;
 +
margin: 0 2%;
 +
    float: left;
 +
    border: none;
 +
    outline: none;
 +
    cursor: pointer;
 +
    padding: 0.5%;
 +
    transition: 0.3s;
 +
font-size: 1vw;
 +
z-index: -1;
 +
border-radius: 20px 20px 0 0;
 +
 +
}
 +
 +
/* Change background color of buttons on hover */
 +
.tab button:hover {
 +
    background-color: #90EE90;
 +
}
 +
 +
/* Create an active/current tablink class */
 +
.tab button.active {
 +
    background-color: #77a4ef;
 +
}
 +
 +
.calenderContainer {
 +
    padding: 5%;
 +
    margin: 0 5% 0 25vh;
 +
    box-sizing: border-box;
 +
    color: #000;
 +
    background-color: white;
 +
    text-align: justify;
 +
    border-left: 15px solid #A4C2F4;
 +
    border-bottom: 15px solid #A4C2F4;
 +
    border-top: 15px solid #A4C2F4; 
 +
    overflow: auto;
 +
    z-index: 5;
 +
}
 +
 +
.monthHeader {
 +
display: none
 +
}
 +
 +
/* Month header */
 +
.month {
 +
    padding: 70px 25px;
 +
    width: 100%;
 +
    background: #A4C2F4;
 +
    text-align: center;
 +
box-sizing: border-box;
 +
display: none;
 +
color: black;
 +
font-size: 2em;
 +
}
 +
 +
 +
/* Previous button inside month header */
 +
.month .prev {
 +
    float: left;
 +
    padding-top: 10px;
 +
}
 +
 +
/* Next button */
 +
.month .next {
 +
    float: right;
 +
    padding-top: 10px;
 +
}
 +
 +
/* Weekdays (Mon-Sun) */
 +
.weekdays {
 +
    margin: 0;
 +
    padding: 10px 8%;
 +
    background-color:#ddd;
 +
text-align: center;  /* new */
 +
display: grid;
 +
grid-template-columns: auto auto auto auto auto auto auto;
 +
 +
}
 +
 +
.weekdays .weekday {
 +
    width: 12%;
 +
    color: black;
 +
    text-align: center;
 +
margin: auto;
 +
}
 +
 +
/* Days (1-31) */
 +
.monthContainer {
 +
    padding: 10px 8%;
 +
    background: #eee;
 +
    margin: 0;
 +
width: 100%;
 +
box-sizing: border-box;
 +
display: grid;
 +
grid-template-columns: auto auto auto auto auto auto auto;
 +
 +
}
 +
 +
.monthContainer .day {
 +
    width: 100%;
 +
    text-align: center;
 +
    margin-bottom: 5px;
 +
    font-size:2em;
 +
    color: #000;
 +
border: 1px solid black;
 +
}
 +
 +
.monthContainer .day:hover{
 +
background-color: #90EE90;
 +
}
 +
 +
.monthContainer .day.active{
 +
background-color:#77a4ef;
 +
}
 +
 +
.monthContainer .inactiveDay{
 +
background-color: lightgrey;
 +
width: 100%;
 +
    text-align: center;
 +
    margin-bottom: 5px;
 +
    font-size:2em;
 +
    color: #777;
 +
border: 1px solid black;
 +
}
 +
 +
.InterlabTable{
 +
  font-size: 0.7vw;
 +
  margin: 2%;
 +
  float: right;
 +
  box-shadow: 10px 10px 5px grey;
 +
}
 +
 +
.InterlabTable th, td {
 +
    text-align: center;
 +
    padding: 2px 5px!important;
 +
}
 +
 +
th{
 +
    background-color: #77a4ef !important;
 +
}
 +
.InterlabTable tr:nth-child(even) {background-color: #f2f2f2;}
 +
.InterlabTable{
 +
  font-size: 0.8vw;
 +
  margin: 1%;
 +
}
 +
 +
.timeline{
 +
padding: 0;
 +
position: relative;
 +
}
 +
.timeline img{
 +
  width: 100%;
 +
  z-index: 1;
 +
}
 +
 +
.transparent{
 +
    background-color: transparent;
 +
}
 +
 +
.rotated{
 +
    transform: rotate(180deg);
 +
}
 +
 +
.zoom {
 +
    transition: transform .2s; /* Animation */
 +
}
 +
 +
.zoom:hover {
 +
    transform: scale(1.4); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
 +
}
 +
 +
 +
.navigateArrows{
 +
        margin: 0 5% 0 25vh;
 +
box-sizing: border-box;
 +
        color: black;
 +
        background-color: #A4C2F4; 
 +
        position: relative;
 +
        font-size: 1.5vw;
 +
        line-height: 8vh;
 +
        height: 8vh;
 +
}
 +
 +
.navigateArrows .arrowLeft{
 +
        float: left;
 +
        padding-left: 2%;
 +
}
 +
 +
.navigateArrows .arrowRight{
 +
        float: right;
 +
        padding-right: 2%;
 +
}
 +
 +
.navigateArrows a{
 +
        text-decoration: none;
 +
        color: black;
 +
}
 +
 +
.navigateArrows b{
 +
        font-weight: 900!important;
 +
}
 +
 +
.secretNav{
 +
        display: none;
 +
}
 +
 +
 +
@media screen and (max-width: 768px) {
 +
  .menuM{display:none;}
 +
  .sidenav{display:none;}
 +
  .contact{font-size:1em;}
 +
  a.logo {display: none;}
 +
  body{margin:0;padding:0px;}
 +
 +
figure{width: 100% !important;margin: 0 !important};
 +
table{100%}
 +
 
 +
.customelementM4B, .customelementM4A, .customelementM5B, .customelementM5A, .customelementM3, .calenderContainer, .navigateArrows{margin:0; padding:30px;text-align:left;}
 +
 +
.customHeader2{
 +
margin: 0;margin-top: 10vh;
 +
}
 +
 +
.customelementM, .customelementM2{
 +
margin: 10vh 0;
 +
min
 +
}
 +
 +
footer{
 +
  height: 10vh;
 +
  border-radius: 0;
 +
  margin: 0;
 +
}
 +
 +
.navigateArrows{display: none;}
 +
 +
.contactSymbol{
 +
  font-size: 6vh;
 +
  margin: 0 2%;
 +
  width: auto;
 +
}
 +
 +
 +
  .topnav{
 +
  height: 10vh;
 +
  }
 +
 
 +
  .topnav a.icon {
 +
        display: block;
 +
background-color: white;
 +
  }
 +
 
 +
  .containerMM {
 +
    display: block;
 +
position: fixed;
 +
top: 3vh;
 +
left: 3vh;
 +
        width: 55px;
 +
height: 40px;
 +
background-color: white;
 +
  z-index: 10000;
 +
  }
 +
 +
  .menuM.open {
 +
display: block;
 +
padding: 0px;
 +
top: 10vh;
 +
margin: 0px;
 +
text-align: center;
 +
        height: 20vh;
 +
  }
 +
  .menuM.open a {
 +
        width: 100%;
 +
padding: 0px;
 +
margin: 0px;
 +
  }
 +
 
 +
  .menuM.open a.active{
 +
border-radius: 0px;
 +
  }
 +
 
 +
  .menuM.open a:hover{
 +
border-radius: 0px;
 +
  }
 +
 +
  .menuM.open .submenuM{
 +
width: 100%;
 +
        left: 0 !important;
 +
        top: 30vh;
 +
        display: block;
 +
  }
 +
 +
  .menuM.open .submenuM a{
 +
        height: 10vh;
 +
        font-size: 5vh;
 +
        line-height: 10vh;
 +
  }
 +
  .grid-container{
 +
        grid-template-columns: auto;
 +
  }
 +
 +
  #BackToTop{
 +
  font-size: 16px;
 +
}
 
}
 
}

Latest revision as of 12:06, 17 October 2018

/*wikifix*/

  1. top_title { display: none !important; }

/*Override default CSS*/

  1. sideMenu, #top_title {display:none;}
  2. content { padding:0px; width:100%; margin-top:-7px; margin-left:0px; background-color: transparent; line-height: inherit}


  1. bodyContent a[href^="mailto:"], .link-mailto {
   background: none;
   padding: 0px;

}

  1. bodyContent a[href^="https://"], .link-https {
   background: none;
   padding: 0px;

}

/* set all basic objects to neutral formatting*/ html, body, div, span, applet, object, iframe, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption { 

   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;

}

  1. globalWrapper {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;

}


ul { list-style-image: none; 

       font-size: 1em;

}

  1. top_title, #top_menu_under {

display: none; }


  1. content{
 width: 100%;
 height: 100%;
 padding: 0px;
 margin: 0px;
 background-image: url("https://static.igem.org/mediawiki/2018/d/dd/T--Utrecht--2018--main-Background.svg");
 background-repeat: no-repeat;
 background-size: cover;

}

  1. HQ_page table{
 margin:0;
 float: right;

}

  1. globalWrapper{
  padding: 0;

}

/*Standard html styling*/ html{ 

       background-color: #eaf4edff;
       font-family: "PT Sans";
       font-weight: normal;
       font-style: normal;

}

body{ font-family: "PT Sans"; 

       font-weight: normal;
       font-style: normal;

font-size: 1em; margin: 14.1vh 0px 0px 0px; 

       background-color: transparent;

@charset 'UTF-8' 

   }

h1,h2,h3,h4,h5,h6{ text-align: left; padding-bottom: 20px; 

       font-family: "Carme";

}

figure{ 

     background-color: #A4C2F4;
     box-shadow: 10px 10px 5px grey;
     padding: 1%;
     font-size: 0.7vw;
     border-radius: 25px;

}

/*Identified*/ .story{ width: 40%; padding: 20px; color: #000; background-color:#FFFFFF; 

       font-size: 0.8vw;
       box-sizing: border-box;
       float: right;

}

.GroupPhoto{ width: 60%; height: auto; margin: 0px; padding: 0px; float: left; }


a.logo{ 

   position:fixed;

top: 2%; left: 2%; width: 15vh; 

   background-color:#fff;
   border-radius: 0%;
   z-index:999;
   border-radius: 20%;
   box-shadow: 0px 0px 10px grey;

}

a.logo:before{ content: ""; display: block; padding-top: 100%; /* initial ratio of 1:1*/ }

  1. logo{

position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; padding: 10px; box-sizing: border-box; }



  1. navSymbol{
   padding: 5% 0% ;
   height: 100%;
   width: auto;
   margin: auto;
   z-index:999;

box-sizing: border-box; }

/*classes*/

/*Top Bar*/

.topnav { 

 height:14%;
 width:100%;
 background-image: linear-gradient(to right,#A4C2F4, white, #A4C2F4);	
 position:fixed;
 top: 0px; /* Position the navbar at the top of the page */
 left:0px;  
 z-index:1000;

}

.menuM{ 

 height:70%;
 width:100%;
 background-color: #fff;
 position:absolute;
 padding-left: 25vh;
 top: 30%; /* Position the navbar at the top of the page */
 left:0px;
 box-shadow: 5px 5px 20px grey;
 z-index:100;
 overflow: auto;
 white-space: nowrap;
 }

.menuM a { 

 float:left;
 padding: 0 0%;
 height: 100%;
 width: 20vh;
 color: black;
 text-decoration: none;
 box-sizing: border-box;
     text-align: center;

}

.menuM a:hover { 

 height: 100%;
 background-color: #90EE90;
 color: white;
 border-radius: 30px 30px 0px 0px;

}

.menuM a.active { 

 background-color: #A4C2F4;
 height:100%;
 border-radius: 30px 30px 0px 0px;

}

/* Bottom Bar*/

.submenuM { 

 position: fixed;
 width: 20vh;
 top: 14%;
 left: 25vh;
 z-index: 4000;
 background-color: #fff;
 box-shadow: 5px 20px 20px -10px grey;
 border: 0px 0px 1px 1px solid black;	
 border-radius: 0px 0px 30px 30px;
 overflow: auto;
 display: none;

}

.submenuM:empty{ 

 display: none;

}

.submenuM a { 

 width: 100%;
 color: black;
 padding: 5%;
 box-sizing: border-box;
 text-align: center;
 text-decoration: none;
 font-size: 2vh;

}

.submenuM a:hover { 

 background-color: #90EE90;
 color: white;
 border-radius: 0px;

}

.submenuM a.active { 

 background-color: #A4C2F4ff;
 border-radius: 0px;

}

.menuM:hover .submenuM{ 

 display: block;

}


/*Text Classes*/

.references{ padding: 20px 10%; font-size: 10px; box-sizing: border-box; 

       box-shadow: 0px 10px 10px grey;

}

.customelementM{ 

 margin: 0 10%;

}


.customelementM2 { box-sizing: border-box; padding:0; 

       margin: 0 10%;
}

.customelementM2 img{ }

.customelementM3 { padding: 50px 160px; 

       margin-left: 10%;

box-sizing: border-box; 

       color: #000;
       background-color: white;
       height: 100%;
       display: -webkit-flex; /* Safari */
       display: flex;

}

.customelementM4A { padding: 50px; 

       margin: 0 5% 0 25vh;

box-sizing: border-box; 

       color: #000;
       background-color: white;
       height: 100%;
       text-align: justify;
       border-left: 15px solid #A4C2F4;
       border-bottom: 15px solid #A4C2F4;

}

.customelementM4B { padding: 50px; 

       margin: 0 5% 0 25vh;

box-sizing: border-box; 

       color: #000;
       background-color: white;
       height: 100%;
       text-align: justify;
       border-right: 15px solid #A4C2F4;
       border-bottom: 15px solid #A4C2F4;

}


.customelementM5A { padding: 50px; 

       margin: 0 5% 0 25vh;

box-sizing: border-box; 

       color: #000;
       background-color: white;
       text-align: justify;
       border-left: 15px solid #A4C2F4;
       border-bottom: 15px solid #A4C2F4;  
       overflow: auto;

}

.customelementM5B { padding: 50px; 

       margin: 0 5% 0 25vh;

box-sizing: border-box; 

       color: #000;
       background-color: white;
       height: 100%;
       text-align: justify;
       border-right: 15px solid #A4C2F4;
       border-bottom: 15px solid #A4C2F4;
       overflow: auto;

}

.grid-container{ 

   width: 100%;
   box-sizing: border-box;
   display: inline-grid;
   grid-template-columns: 45% 45%;
   grid-column-gap: 5%;
   grid-row-gap: 5%;
   grid-gap: 5px;
   display: inline-grid;
   -ms-grid-template-columns: 45% 45%;
   -ms-grid-column-gap: 5%;
   -ms-grid-row-gap: 5%;
   padding: 5% 0!important;
   -ms-grid-gap: 5px;

}

.grid-container figure{ 

    box-shadow: none;
    padding: 0;

}

.grid-item{ 

      padding: 20px;
      text-align: justify;
      background-color: #A4C2F4;
      box-shadow: 10px 10px 5px grey;
      box-sizing: border-box;

}

.contact{ 

      border: 1px solid black;
      margin: 2% 30%;
      padding: 10px;
      width: auto;

}

a.icon { 

   float: left;
   display: none;

text-decoration:none; font-size: 1em; text-align: center; }

.containerMM{ display: none; }

.bar1, .bar2, .bar3 { 

   width: 35px;
   height: 5px;
   background-color: #333;
   margin: 5px 10px;
   transition: 0.4s;

}

/* Rotate first bar */ .change .bar1 { 

   -webkit-transform:  ;
   transform:  translate(0px, 10px) rotate(-45deg) ;

}

/* Fade out the second bar */ .change .bar2 { 

   opacity: 0;

}

/* Rotate last bar */ .change .bar3 { 

   -webkit-transform: rotate(45deg)  ;
   transform: translate(0px, -10px) rotate(45deg)  ;

}

p{ 

   font-size: 1em !important;
   clear: none !important;

}


.event{ margin: opx 5%; } .tooltipcontainer{ background-color: #ddd; border-radius: 5px; padding: 5px; border: 1px solid black; }

.customHeader{ 

       font-size: 2em;
       border-right: 15px solid #A4C2F4;
       border-bottom: 15px solid #A4C2F4;
       border-top: 15px solid #A4C2F4;
       background-color: #AAAAAA;
       padding: 10%;
       margin: 0 5% 0 25vh;	
       text-align: center;
       margin-top: 0px;

}

.customHeader2{ 

       border-top: 15px solid #A4C2F4;
       border-right: 15px solid #A4C2F4;
       border-bottom: 15px solid #A4C2F4;
       margin: 0 5% 0 25vh;	
       padding: 0;

}

.customHeader2 img{ 

     width: 100%;

}


.url_icon { 

   background: url(Uu_url_external.png) center right no-repeat !important;
   height: 13px !important;
   padding-right: 15px !important;

}

.GroupPhoto[usemap]{ 

 width: 60%;
 height: auto;

}

img[usemap]{ 

 width: 100%;
 height: auto;

}


.customelementC h3{ width: 100%; background-color:#A4C2F4; text-align: center; font-size: 1em; 

       cursor: default;

}

.customelementC h2{ width: 100%; background-color:#6094ec; text-align: center; font-size: 2em; 

       cursor: default;

} .CollapseThis{ 

       background-color:#fff;
       text-align: justify;
       display: none;

}

  1. BackToTop{
   display: none; /* Hidden by default */
   position: fixed; /* Fixed/sticky position */
   bottom: 2%; /* Place the button at the bottom of the page */
   right: .5vw; /* Place the button 30px from the right */
   z-index: 99; /* Make sure it does not overlap */
   border: none; /* Remove borders */
   outline: none; /* Remove outline */
   background-color: #6094ec; /* Set a background color */
   color: white; /* Text color */
   cursor: pointer; /* Add a mouse pointer on hover */
   padding: 15px; /* Some padding */
   border-radius: 10px; /* Rounded corners */
   font-size: 1vw; /* Increase font size */

} .sidenav{ 

 white-space: nowrap;
 width: 15vh;
 background-color: transparent;
 position:fixed;
 top: 5%;
 padding: 0% 2%;
 text-align: center;
 font-weight: bold;
 font-size: 2vh;

} .sidenav ul { 

 list-style: none;
 height: 100%;
 margin: 0;
 padding: 100% 0 20% 0;
 padding-top: 100%;
 border: 5px solid #77a4ef;
 border-radius: 20px;
 background-color: #A4C2F4;

}

.sidenav ul li a { 

 display: block;
 padding: 0.5rem 0rem;
 color: darkblue;
 text-decoration: none;

} .sidenav ul li a.current { 

 background: #1c66e4;

}

.sidenav ul li a:hover { 

 background: #90EE90;

}


footer { 

   width: 100%;

height: 10%; margin-top: 2%; 

   background-color: #77a4ef;
   color: white;
   text-align: center;

border-radius: 40px 40px 0 0; }

.containerSymbol{ 

  margin: 0 auto;
  height: 100%;
  padding: 1%

}

.contactSymbol{ 

  padding: 1%;
  margin: 0 5%;
  font-size: 3vw;
  border-radius: 50%;
  background-color: white;
  display: inline-block;
  width: 3.5%;

}

.contactSymbol a{ 

  text-decoration: none;
  color: black;

} 

/* Style the tab */
.anotherWrapper{

position:relative; width:100%; 

}

.tab { 

   	margin: 0 5% 0 25vh;

width:100%; position:absolute; top:-2.5vw; 

       z-index: 0;
       height: 2.5vw

}

/* Style the buttons that are used to open the tab content */ .tab button { 

   background-color: #A4C2F4;

width: 15%; height: 100%; margin: 0 2%; 

   float: left;
   border: none;
   outline: none;
   cursor: pointer;
   padding: 0.5%;
   transition: 0.3s;

font-size: 1vw; z-index: -1; border-radius: 20px 20px 0 0;

}

/* Change background color of buttons on hover */ .tab button:hover { 

   background-color: #90EE90;

}

/* Create an active/current tablink class */ .tab button.active { 

   background-color: #77a4ef;

}

.calenderContainer { 

   padding: 5%;
   margin: 0 5% 0 25vh;	
   box-sizing: border-box;
   color: #000;
   background-color: white;
   text-align: justify;
   border-left: 15px solid #A4C2F4;
   border-bottom: 15px solid #A4C2F4;
   border-top: 15px solid #A4C2F4;  
   overflow: auto; 
   z-index: 5;

}

.monthHeader { display: none }

/* Month header */ .month { 

   padding: 70px 25px;
   width: 100%;
   background: #A4C2F4;
   text-align: center;

box-sizing: border-box; display: none; color: black; font-size: 2em; }


/* Previous button inside month header */ .month .prev { 

   float: left;
   padding-top: 10px;

}

/* Next button */ .month .next { 

   float: right;
   padding-top: 10px;

}

/* Weekdays (Mon-Sun) */ .weekdays { 

   margin: 0;
   padding: 10px 8%;
   background-color:#ddd;

text-align: center; /* new */ display: grid; grid-template-columns: auto auto auto auto auto auto auto;

}

.weekdays .weekday { 

   width: 12%;
   color: black;
   text-align: center;

margin: auto; }

/* Days (1-31) */ .monthContainer { 

   padding: 10px 8%;
   background: #eee;
   margin: 0;

width: 100%; box-sizing: border-box; display: grid; grid-template-columns: auto auto auto auto auto auto auto;

}

.monthContainer .day { 

   width: 100%;
   text-align: center;
   margin-bottom: 5px;
   font-size:2em;
   color: #000;

border: 1px solid black; }

.monthContainer .day:hover{ background-color: #90EE90; }

.monthContainer .day.active{ background-color:#77a4ef; }

.monthContainer .inactiveDay{ background-color: lightgrey; width: 100%; 

   text-align: center;
   margin-bottom: 5px;
   font-size:2em;
   color: #777;

border: 1px solid black; }

.InterlabTable{ 

 font-size: 0.7vw;
 margin: 2%;
 float: right;
 box-shadow: 10px 10px 5px grey;

}

.InterlabTable th, td { 

   text-align: center;
   padding: 2px 5px!important;

}

th{ 

   background-color: #77a4ef !important;

} .InterlabTable tr:nth-child(even) {background-color: #f2f2f2;} .InterlabTable{ 

 font-size: 0.8vw;
 margin: 1%;

}

.timeline{ padding: 0; position: relative; } .timeline img{ 

  width: 100%;
  z-index: 1;

}

.transparent{ 

   background-color: transparent;

}

.rotated{ 

    transform: rotate(180deg);

}

.zoom { 

   transition: transform .2s; /* Animation */

}

.zoom:hover { 

   transform: scale(1.4); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */

}


.navigateArrows{ 

       margin: 0 5% 0 25vh;

box-sizing: border-box; 

       color: black;
       background-color: #A4C2F4;  
       position: relative;
       font-size: 1.5vw;
       line-height: 8vh;
       height: 8vh;

}

.navigateArrows .arrowLeft{ 

       float: left;
       padding-left: 2%;

}

.navigateArrows .arrowRight{ 

       float: right;
       padding-right: 2%;

}

.navigateArrows a{ 

       text-decoration: none;
       color: black;

}

.navigateArrows b{ 

       font-weight: 900!important;

}

.secretNav{ 

       display: none;

}


@media screen and (max-width: 768px) { 

 .menuM{display:none;}
 .sidenav{display:none;}
 .contact{font-size:1em;}
 a.logo {display: none;}
 body{margin:0;padding:0px;}

figure{width: 100% !important;margin: 0 !important}; table{100%}

.customelementM4B, .customelementM4A, .customelementM5B, .customelementM5A, .customelementM3, .calenderContainer, .navigateArrows{margin:0; padding:30px;text-align:left;}

.customHeader2{ margin: 0;margin-top: 10vh; }

.customelementM, .customelementM2{ 

margin: 10vh 0;
min

}

footer{ 

 height: 10vh;
 border-radius: 0;
 margin: 0;

}

.navigateArrows{display: none;}

.contactSymbol{ 

 font-size: 6vh;
 margin: 0 2%;
 width: auto;

} 


 .topnav{

height: 10vh; 

 }
 
 .topnav a.icon {
       display: block;

background-color: white; 

 }
 
 .containerMM {
   display: block;

position: fixed; top: 3vh; left: 3vh; 

       width: 55px;

height: 40px; background-color: white; 

  z-index: 10000;
 }

 .menuM.open {

display: block; padding: 0px; top: 10vh; margin: 0px; text-align: center; 

       height: 20vh;
 }
 .menuM.open a {
       width: 100%;

padding: 0px; margin: 0px; 

 }
 
 .menuM.open a.active{

border-radius: 0px; 

 }
 
 .menuM.open a:hover{

border-radius: 0px; 

 }

 .menuM.open .submenuM{

width: 100%; 

       left: 0 !important;
       top: 30vh;
       display: block;
 }

 .menuM.open .submenuM a{
       height: 10vh;
       font-size: 5vh;
       line-height: 10vh;
 }
 .grid-container{
       grid-template-columns: auto;
 }

 #BackToTop{
 font-size: 16px;

} }