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

Latest revision as of 12:06, 17 October 2018

/*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 { list-style-image: none;

       font-size: 1em;

}

top_title, #top_menu_under {

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;

}

HQ_page table{

 margin:0;
 float: right;

}

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*/ }

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 {

 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() 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;

} }