Difference between revisions of "Team:DTU-Denmark/stylesheetmain"

(Created page with "→‎imports custom font (is not used, but works as an example if you find an awesome font): @font-face { font-family: League; src: url('../fonts/League/LeagueGothic-Regular.otf...")
 
m
 
(144 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
/*imports custom font (is not used, but works as an example if you find an awesome font)*/
+
   
−
@font-face { font-family: League; src: url('../fonts/League/LeagueGothic-Regular.otf'); }
+
    @import url('https://fonts.googleapis.com/css?family=Quicksand');
  
−
/*sets boxes so that the width and height properties (and min/max properties)
+
/****************************************************************************************************************/
−
  includes content, padding and border, but not the margin*/
+
/************************************** OVERWRITES DEFAULT WIKI SETTINGS ****************************************/
−
* {
+
/************************************************* (iGEM CODE) **************************************************/
−
  box-sizing: border-box;
+
/****************************************************************************************************************/
−
   font-family: sans-serif, "Times New Roman", Times, serif;
+
    
−
}
+
  
−
/*makes the website span from edge to edge of the viewport*/
+
    /* Clear the default wiki settings */
−
body {
+
−
position: relative;
+
−
  width: 100%;
+
−
  margin: 0px;
+
−
  padding:0px;
+
−
}
+
  
−
/*centers all headlines as standard*/
+
    #content, body {
−
h1, h2, h3, h4, h5, h6 {
+
      background-color: #f5e1bc;
−
  text-align: center;
+
      font-family: 'Quicksand', sans-serif;
−
}
+
    }
 +
 
 +
    #HQ_page p, #HQ_page h1, #HQ_page h2, #HQ_page h3, #HQ_page h4, #HQ_page h5, #HQ_page h6 {
 +
      font-family: 'Quicksand', sans-serif;
 +
    }
  
−
/*defines percentage columns used for layout so everything
+
    #home_logo, #sideMenu {
−
  but the main content spans from edge to edge of the viewport*/
+
      display:none;
−
.col-1 {width: 08.33%;}
+
    }
−
.col-2 {width: 16.66%;}
+
   
−
.col-3 {width: 25.00%;}
+
    #sideMenu, #top_title, .patrollink  {
−
.col-4 {width: 33.33%;}
+
      display:none;
−
.col-5 {width: 41.66%;}
+
    }
−
.col-6 {width: 50.00%;}
+
   
−
.col-7 {width: 58.33%;}
+
    #content {
−
.col-8 {width: 66.66%;}
+
      width: 100%;
−
.col-9 {width: 75.00%;}
+
      padding: 0px;
−
.col-10 {width: 83.33%;}
+
      margin-top: -7px;
−
.col-11 {width: 91.66%;}
+
      margin-left: 0px;
−
.col-12 {width: 100.0%;}
+
    }
  
−
/*defines columns in pixels used for main content area, so
+
    #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {
−
  user zoom will not affect the layout*/
+
      margin-bottom: 0px;
−
.colp-1 {width: calc(1000px/12);}
+
    }
−
.colp-2 {width: calc(1000px/12*2);}
+
−
.colp-3 {width: calc(1000px/12*3);}
+
−
.colp-4 {width: calc(1000px/12*4);}
+
−
.colp-5 {width: calc(1000px/12*5);}
+
−
.colp-6 {width: calc(1000px/12*6);}
+
−
.colp-7 {width: calc(1000px/12*7);}
+
−
.colp-8 {width: calc(1000px/12*8);}
+
−
.colp-9 {width: calc(1000px/12*9);}
+
−
.colp-10 {width: calc(1000px/12*10);}
+
−
.colp-11 {width: calc(1000px/12*11);}
+
−
.colp-12 {width: 1000px;}
+
  
−
/*makes all the columns go to the left of
 
−
  the page and "stack" to the right if room*/
 
−
[class*="col-"] {
 
−
  float: left;
 
−
  padding: 15px;
 
−
}
 
−
[class*="colp-"] {
 
−
  float: left;
 
−
  padding: 15px;
 
−
}
 
  
−
/***********EACH ROW MUST BE 12 COLUMNS TOTAL*********/
+
/****************************************************************************************************************/
 +
/*********************************************** SETS MAIN STYLES ***********************************************/
 +
/****************************************************************************************************************/
  
−
/*(example col-4, col-6, col-2 is a row)
+
/***** TO OVERWRITE iGEM STYLING WHITHOUT MESSING WITH iGEM HEADER USE #windowcontent PREFIX IN CSS SYLING *****/
−
  clears the row of other content*/
+
 
−
.row::after {
+
    #windowcontent * {
−
  content: "";
+
      box-sizing: border-box;
−
  clear: both;
+
      font-family: 'Quicksand', sans-serif, "Times New Roman", Times, serif;
−
  display: table;
+
      margin: 0px;
−
}
+
      padding: 0px;
 +
    }
 +
 
 +
    #windowcontent ul, ol {
 +
      list-style: none;
 +
    }
 +
 
 +
    /*makes the website span from edge to edge of the viewport*/
 +
 
 +
    #windowcontent body {
 +
      position: relative;
 +
      width: 100%;
 +
      margin: 0px;
 +
      padding: 0px;
 +
    }
 +
 
 +
    /***** centers all headlines as standard *****/
 +
 
 +
    h1, h2, h3, h4, h5, h6 {
 +
      text-align: center;
 +
    }
 +
 
 +
    /***** defines percentage columns used for layout so everything but the main content spans from edge to edge of the viewport *****/
 +
 
 +
    .col-1 {
 +
      width: 08.33%;
 +
    }
 +
    .col-2 {
 +
      width: 16.66%;
 +
    }
 +
    .col-3 {
 +
      width: 25.00%;
 +
    }
 +
    .col-4 {
 +
      width: 33.33%;
 +
    }
 +
    .col-5 {
 +
      width: 41.66%;
 +
    }
 +
    .col-6 {
 +
      width: 50.00%;
 +
    }
 +
    .col-7 {
 +
      width: 58.33%;
 +
    }
 +
    .col-8 {
 +
      width: 66.66%;
 +
    }
 +
    .col-9 {
 +
      width: 75.00%;
 +
    }
 +
    .col-10 {
 +
      width: 83.33%;
 +
    }
 +
    .col-11 {
 +
      width: 91.66%;
 +
    }
 +
    .col-12 {
 +
      width: 100.0%;
 +
    }
 +
 
 +
    /***** defines columns in pixels used for main content area, so user zoom will not affect the layout *****/
 +
 
 +
    .colp-1 {
 +
      width: calc(1000px/12);
 +
    }
 +
    .colp-2 {
 +
      width: calc(1000px/12*2);
 +
    }
 +
    .colp-3 {
 +
      width: calc(1000px/12*3);
 +
    }
 +
    .colp-4 {
 +
      width: calc(1000px/12*4);
 +
    }
 +
    .colp-5 {
 +
      width: calc(1000px/12*5);
 +
    }
 +
    .colp-6 {
 +
      width: calc(1000px/12*6);
 +
    }
 +
    .colp-7 {
 +
      width: calc(1000px/12*7);
 +
    }
 +
    .colp-8 {
 +
      width: calc(1000px/12*8);
 +
    }
 +
    .colp-9 {
 +
      width: calc(1000px/12*9);
 +
    }
 +
    .colp-10 {
 +
      width: calc(1000px/12*10);
 +
    }
 +
    .colp-11 {
 +
      width: calc(1000px/12*11);
 +
    }
 +
    .colp-12 {
 +
      width: 1000px;
 +
    }
 +
 
 +
    /***** makes all the columns go to the left of the page and "stack" to the right if room *****/
 +
 
 +
    [class*="col-"] {
 +
      float: left;
 +
      padding: 15px;
 +
    }
 +
 
 +
    [class*="colp-"] {
 +
      float: left;
 +
      padding: 15px;
 +
    }
 +
 
 +
    /***** EACH ROW MUST BE 12 COLUMNS (OF THE SAME TYPE) IN TOTAL *****/
 +
    /************ (for example col-4, col-6, col-2 is a row) ***********/
 +
 
 +
 
 +
    /***** clears the row of other content *****/
 +
 
 +
    .row::after {
 +
      content: "";
 +
      clear: both;
 +
      display: table;
 +
    }
  
  
  
 
/****************************************************************************************************************/
 
/****************************************************************************************************************/
−
/******************************************* NAVBAR AND PROGRESS BAR  *******************************************/
+
/*************************** HELPING CLASSES - OVERWRITES OTHER PREDEFINED PROPERTIES ***************************/
 
/****************************************************************************************************************/
 
/****************************************************************************************************************/
  
  
  
−
/*defines key properties of the nav bar*/
+
    /***** removes margin and padding *****/
−
nav {
+
−
  margin: 0px;
+
−
  padding: 0px;
+
−
  overflow: hidden;
+
−
  top: 0;
+
−
  width: 100%;
+
−
  height: 40px;
+
−
}
+
  
−
/*hides list*/
+
    #windowcontent .rmvpadmarg {
−
nav ul {
+
      margin: 0px;
−
  height: 0px;
+
      padding: 0px;
−
  list-style-type: none;
+
    }
−
}
+
  
−
/*sets color of nav bar when the page is scrolled to the top*/
+
    /***** removes vertical lines on links *****/
−
.navbar {
+
−
  -webkit-transition: background 1s; /* Safari */
+
−
  transition: background 1s;
+
−
  background-image: -webkit-linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3)); /* For Safari 5.1 to 6.0 */
+
−
  background-image: -o-linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3)); /* For Opera 11.1 to 12.0 */
+
−
  background-image: -moz-linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3)); /* For Firefox 3.6 to 15 */
+
−
  background-image: linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3)); /* Standard syntax (must be last) */
+
−
  box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.3);
+
−
}
+
  
−
/*sets the color of the nav bar when scrolled down to
+
    #windowcontent .rmvlinkstyle a {
−
  the main text TRANSITIONS CANNOT BE USED HERE*/
+
      text-decoration: none;
−
.navbar.scrolledpastnav {
+
    }
−
  -webkit-transition: background 1.5s; /* Safari */
+
−
transition: background 1.5s;
+
−
background-color: rgba(20,20,20,1);
+
−
  box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.7);
+
−
}
+
  
−
/*helps center navar. The sum of the nav bar choice
+
    /***** brings element to front of page, used to bring nav bar in front of everything else *****/
−
  widths is 1000px (5*200px)*/
+
−
.navbarcenter {
+
−
    width: 1000px;
+
−
    margin: auto;
+
−
}
+
  
−
/*makes nav bar choices float next to each other*/
+
    #windowcontent .tofront {
−
.dropdown {
+
      position: relative;
−
    float: right;
+
      z-index: 9999;
−
    height: 38px;
+
    }
−
}
+
  
−
/*layout of nav bar choice buttons*/
+
    /***** sets the position of the element to be given a bottom border *****/
−
.dropdown .dropbtn {
+
−
  height: 38px;
+
−
  display: inline-block;
+
−
  color: white;
+
−
  text-align: center;
+
−
  padding: 10px 16px;
+
−
  width: 200px;
+
−
  text-decoration: none;
+
−
  font-size: 1em;
+
−
  font-family: sans-serif, "Times New Roman", Times, serif;
+
−
}
+
  
−
/*sets background of navbar choice buttons when hovered*/
+
    #windowcontent .bottomborder {
−
.dropdown:hover .dropbtn {
+
      position: relative;
−
background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Safari 5.1 to 6.0 */
+
      padding: 25px 0px;
−
  background: -o-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Opera 11.1 to 12.0 */
+
    }
−
  background: -moz-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Firefox 3.6 to 15 */
+
−
  background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* Standard syntax (must be last) */
+
−
}
+
  
−
/*hides dropdown choices, sets background and shadows. makes sure that
+
    /***** styles borders for h1 elements *****/
−
  the width is not less than the width of the nav bar choice buttons*/
+
−
.dropdown-content {
+
−
  -webkit-transition: background 1.5s; /* Safari */
+
−
  transition: background 1.5s;
+
  
−
  /*border has same height as progress bar*/
+
    #windowcontent h1.bottomborder:after {
−
  border-top: 2px solid rgba(150,150,150,0.3);
+
      content:"";
 +
      background: black;
 +
      position: absolute;
 +
      left: 150px;
 +
      bottom: 16px;
 +
      height: 1px;
 +
      width: 700px;
 +
    }
  
−
  /*fixes layout issue with border rendering 3 px*/
 
−
  margin-top: -0.1px;
 
−
  display: none;
 
−
  position: absolute;
 
−
  background-color: transparent;
 
−
  min-width: 200px;
 
−
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 
−
  z-index: 1;
 
−
}
 
  
−
/*sets layout of dropdown menu when nav bar changes layout*/
+
    /***** styles borders for h2 elements *****/
−
.dropdown-content.scrolledpastnav {
+
−
  -webkit-transition: background 1.5s; /* Safari */
+
−
  transition: background 1.5s;
+
  
−
  /*border has same height as progress bar*/
+
    #windowcontent h2.bottomborder:after {
−
  border-top: 2px solid transparent;
+
      content:"";
−
}
+
      background: black;
 +
      position: absolute;
 +
      left: 300px;
 +
      bottom: 18px;
 +
      height: 1px;
 +
      width: 400px;
 +
    }
  
 +
    #windowcontent .fixed {
 +
      position: fixed;
 +
    }
  
−
/*displays dropdown content when nav bar choice is hovered*/
 
−
.dropdown:hover .dropdown-content, .dropdown:focus .dropdown-content {
 
−
  display: block;
 
−
}
 
  
−
/*defines nav bar dropdown link layout*/
+
/****************************************************************************************************************/
−
.dropdown-content a {
+
/**************************************************** NAVBAR ****************************************************/
−
  color: black;
+
/****************************************************************************************************************/
−
  background-color: white;
+
−
  padding: 12px 16px;
+
−
  text-decoration: none;
+
−
  display: block;
+
−
  text-align: left;
+
−
}
+
  
−
/*changes navbar dropdown menu color when choice is hovered*/
 
−
.dropdown-content a:hover, .dropdown-content a:focus {
 
−
    background-color: rgb(235,235,235);
 
−
}
 
  
−
/*********** PROGRESS BAR ************/
 
  
−
/*defines progress bar layout*/
+
/***** defines key properties of the nav bar *****/
−
progress {
+
−
  /* Positioning */
+
−
  position: fixed;
+
−
  left: 0;
+
−
  top: 38px;
+
  
−
  /* Dimensions */
+
    #windowcontent nav {
−
  width: 100%;
+
      margin: 0px;
−
  height: 2px;
+
      padding: 0px;
 +
      overflow: hidden;
 +
      top: 0px;
 +
      width: 100%;
 +
      height: 40px;
 +
    }
  
−
  /* Reset the apperance */
+
    /***** helps center navar. The sum of the nav bar choice widths is 1000px (5*200px) *****/
−
  -webkit-appearance: none;
+
−
    -moz-appearance: none;
+
−
          appearance: none;
+
  
−
  /* Get rid of the default border in Firefox/Opera. */
+
    #windowcontent .navbarcenter {
−
  border: none;
+
      width: 1000px;
 +
      margin: auto;
 +
    }
  
−
  /* For Firefox/IE10+ */
+
    /***** sets color of nav bar when the page is scrolled to the top *****/
−
  background-color: rgba(150,150,150,0.3);
+
  
−
  /* For IE10+, color of the progress bar */
+
    #windowcontent .navbar {
−
  color: white;
+
      background-image: linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3));
−
}
+
      background-color: rgba(20,20,20,1);
 +
      box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.7);
 +
    }
  
−
/*changes progressbar when nav bar changes layout*/
+
    /***** sets background of navbar choice buttons when hovered *****/
−
progress.scrolledpastnav {
+
−
  -webkit-transition: background-color 1.5s; /* Safari */
+
−
  transition: background-color 1.5s;
+
−
  background-color: rgba(20,20,20,1);
+
−
}
+
  
−
/*sets progress bar background for older browsers*/
+
    #windowcontent .dropdown:hover .dropbtn {
−
progress::-webkit-progress-bar {
+
      background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
−
  background-color: rgba(150,150,150,0.3);
+
      background: -o-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
−
}
+
      background: -moz-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
 +
      background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
 +
    }
  
−
/*sets color of progress bar value bar*/
+
    /***** makes nav bar choices float next to each other *****/
−
.flat::-webkit-progress-value {
+
−
  -webkit-transition: background-color 1.5s; /* Safari */
+
−
  transition: background-color 1.5s;
+
−
  background-color: white;
+
−
}
+
  
−
/*sets color of progress bar value bar*/
+
    #windowcontent .dropdown {
−
.flat::-moz-progress-bar {
+
      float: right;
−
  -webkit-transition: background-color 1.5s; /* Safari */
+
      height: 40px;
−
  transition: background-color 1.5s;
+
    }
−
  background-color: white;
+
−
}
+
  
−
/*sets the progress bar container (not so important for layout it seems)*/
+
    /***** layout of nav bar choice buttons *****/
−
.progress-container {
+
 
−
  width: 100%;
+
    #windowcontent .dropdown .dropbtn {
−
  background-color: transparent;
+
      height: 40px;
−
  position: fixed;
+
      display: inline-block;
−
  top: 38px;
+
      color: white;
−
  left: 0;
+
      text-align: center;
−
  height: 2px;
+
      padding: 10px 16px;
−
  display: block;
+
      width: 200px;
−
}
+
      text-decoration: none;
 +
      font-size: 1.2em;
 +
      font-family: 'Quicksand', sans-serif, "Times New Roman", Times, serif;
 +
    }
 +
 
 +
    /***** hides dropdown choices, sets background and shadows. makes sure that the width is not less than the width of the nav bar choice buttons *****/
 +
 
 +
    #windowcontent .dropdown-content {
 +
      -webkit-transition: background 1.5s; /* Safari */
 +
      transition: background 1.5s;
 +
      display: none;
 +
      position: absolute;
 +
      background-color: transparent;
 +
      min-width: 200px;
 +
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
      z-index: 1;
 +
    }
 +
 
 +
    /***** displays dropdown content when nav bar choice is hovered *****/
 +
 
 +
    #windowcontent .dropdown:hover .dropdown-content, #windowcontent .dropdown:focus .dropdown-content {
 +
      display: block;
 +
    }
 +
 
 +
    /***** defines nav bar dropdown link layout *****/
 +
 
 +
    #windowcontent .dropdown-content a {
 +
      color: black;
 +
      background-color: white;
 +
      padding: 10px 16px;
 +
      text-decoration: none;
 +
      display: block;
 +
      text-align: left;
 +
    }
 +
 
 +
    /***** changes navbar dropdown menu color when choice is hovered *****/
 +
 
 +
    #windowcontent .dropdown-content a:hover, #windowcontent .dropdown-content a:focus {
 +
      background-color: rgb(235,235,235);
 +
    }
  
−
/******** END OF PROGRESS BAR ********/
 
  
  
Line 275: Line 345:
  
  
−
/*creates the parallax effect on main page when scrooling*/
+
    /***** creates the parallax effect on main page when scrooling *****/
−
.parallax {  
+
   
−
position: relative;
+
    #windowcontent .parallax {  
−
z-index: -1;
+
      position: relative;
−
  background-image: url("../logos/indian_cobra_good_version.png");
+
      z-index: -1;
−
  width: inherit;
+
      background-image: url("https://static.igem.org/mediawiki/2017/4/4a/T--DTU-Denmark--front_snake_splashscreen.png");
 +
      background-size: 80%;
  
−
  /*height is viewport height +1.5% of viewport
+
      /***** height is viewport height +1.5% of viewport height (matches with the height of .parralaxfade) *****/
−
    height (matches with the height of .parralaxfade)*/
+
      height: 101.5vh;
−
  height: 101.5vh;
+
      background-attachment: fixed;
−
  background-attachment: fixed;
+
      background-position: center 60px;
−
  background-position: center;
+
      background-repeat: no-repeat;
−
  background-repeat: no-repeat;
+
      min-width: 1000px;
−
  background-size: cover;
+
    }
−
}
+
  
−
/*sets position and style for the headline text on main page*/
+
    /***** sets position and style for the headline text on main page *****/
−
.homepageheadline {
+
−
position: absolute;
+
−
width: 850px;
+
−
height: 150px;
+
−
line-height: 60px;
+
−
  text-align: center;
+
−
top: 12%;
+
−
left: 50%;
+
−
margin: 0px 0px 0px -425px;
+
−
}
+
  
−
/*styles line one in the headline text on main page*/
+
    #windowcontent .parallaxtext{
−
#homepageheadline1 {
+
      position: relative;
−
font-size: 5em;
+
      display: block;
−
color: white;
+
      margin: auto;
−
margin: 0px;
+
      width: 700px;
−
padding: 0px;
+
      padding-top: 10vh;
−
line-height: normal;
+
    }
−
font-family: sans-serif;
+
−
text-shadow: 2px 2px 6px #727272;
+
−
}
+
  
−
/*styles line two in the headline text on main page*/
 
−
#homepageheadline2 {
 
−
font-size: 3em;
 
−
color: white;
 
−
margin: 0px;
 
−
padding: 0px;
 
−
line-height: normal;
 
−
font-family: sans-serif;
 
−
text-shadow: 0px 0px 5px #727272;
 
−
}
 
  
−
/*creates a fade from parallax image to main content
+
    /***** styles line one in the headline text on main page *****/
−
  Height fits extra height in .parallax*/
+
 
−
.parallaxfade {
+
    #windowcontent #homepageheadline1 {
−
width: inherit;
+
      font-size: 5em;
−
height: 1.5vh;
+
      font-weight: bold;
−
position: absolute;
+
      color: black;
−
bottom: 0px;
+
      font-family: 'Quicksand', sans-serif;
−
background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Safari 5.1 to 6.0 */
+
#      text-shadow: 2px 2px 6px #727272;
−
  background: -o-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Opera 11.1 to 12.0 */
+
      text-align: center;
−
  background: -moz-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Firefox 3.6 to 15 */
+
    }
−
  background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,1)); /* Standard syntax (must be last) */
+
 
−
}
+
    /***** styles line two in the headline text on main page *****/
 +
 
 +
    #windowcontent #homepageheadline2 {
 +
      font-size: 3em;
 +
      font-weight: bold;
 +
      color: black;
 +
      font-family: 'Quicksand', sans-serif;
 +
#      text-shadow: 0px 0px 5px #727272;
 +
      text-align: center;
 +
    }
 +
 
 +
    /***** creates a fade from parallax image to main content. Height fits extra height in .parallax *****/
 +
 
 +
    #windowcontent .parallaxfade {
 +
      width: inherit;
 +
      height: 1.5vh;
 +
      position: absolute;
 +
      bottom: 0px;
 +
      background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Safari 5.1 to 6.0 */
 +
      background: -o-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Opera 11.1 to 12.0 */
 +
      background: -moz-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Firefox 3.6 to 15 */
 +
      background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,1)); /* Standard syntax (must be last) */
 +
    }
  
  
  
 
/****************************************************************************************************************/
 
/****************************************************************************************************************/
−
/************************************************* MAIN CONTENT *************************************************/
+
/************************************************* TOUR BUTTON **************************************************/
 
/****************************************************************************************************************/
 
/****************************************************************************************************************/
  
  
−
/*styles main text area on main page*/
 
−
.maincontainer {
 
−
margin: 100px auto;
 
−
  width: 1000px;
 
−
  text-align: justify;
 
−
  clear: both;
 
−
  display: table;
 
−
}
 
  
−
/*container for the two pictures in top of main content*/
+
    #windowcontent #tourbtn {
−
.imgmenu {
+
      position: fixed;
−
  max-width: 100%;
+
      bottom: 10px;
−
  margin: 70px auto 100px auto;
+
      right: 10px;
−
  overflow: hidden;
+
      animation-name: tourbtninit;
−
}
+
      animation-duration: 7s;
 +
      animation-iteration-count: 1;
 +
      animation-timing-function: ease;
 +
    }
  
−
/*sets container for the individual pictures*/
+
    #windowcontent #tourbtn img {
−
.imgmenuitem {
+
      width: 200px;
−
  position: relative;
+
      animation-name: tourbtninit;
−
  width: 100%;
+
      animation-duration: 7s;
−
  max-width: 700px;
+
      animation-iteration-count: 1;
−
  margin: 0px auto;
+
      animation-timing-function: ease;
−
  height: 400px;
+
    }
−
  border-radius: 20px;
+
−
  overflow: hidden;
+
−
  cursor: pointer;
+
−
}
+
  
−
/*sets layout for the pictures themselves*/
+
    @-moz-keyframes tourbtninit{
−
.imgmenucontent {
+
      0%  {width: 200px;}
−
  height: 100%;
+
      20%  {width: 200px;}
−
   width: 100%;
+
      35%  {width: 400px;}
−
  background-size: cover;
+
      45%  {width: 320px;}
−
  background-repeat: no-repeat;
+
      75%  {width: 320px;}
−
  -webkit-transition: all .5s;
+
      85%  {width: 400px;}
−
  -moz-transition: all .5s;
+
      100% {width: 200px;}
−
  -o-transition: all .5s;
+
    }
−
  transition: all .5s;
+
−
  font
+
−
}
+
  
−
/*the different images are styled*/
+
    @-webkit-keyframes tourbtninit{
−
.img1 {
+
      0%   {width: 200px;}
−
   background-image: url("../logos/the_problem.jpg");
+
      20%  {width: 200px;}
−
  opacity: 0.9;
+
      35%  {width: 400px;}
−
  -webkit-filter: brightness(1.2);
+
      45%  {width: 320px;}
−
  filter: brightness(1.2);
+
      75%  {width: 320px;}
−
  background-position: -200px center;
+
      85%  {width: 400px;}
−
}
+
      100% {width: 200px;}
−
.img2 {
+
    }
−
  background-image: url("../logos/snake_map.png");
+
−
  background-position: -200px -20px;
+
−
}
+
  
−
/*zooms picture when hovered*/
+
    @keyframes tourbtninit{
−
.imgmenuitem:hover .imgmenucontent, .imgmenuitem:focus .imgmenucontent {
+
      0%   {width: 200px;}
−
   -ms-transform: scale(1.1);
+
      20%  {width: 200px;}
−
  -moz-transform: scale(1.1);
+
      35%  {width: 400px;}
−
  -webkit-transform: scale(1.1);
+
      45%  {width: 320px;}
−
  -o-transform: scale(1.1);
+
      75%  {width: 320px;}
−
  transform: scale(1.1);
+
      85%  {width: 400px;}
−
  opacity: 0.5;
+
      100% {width: 200px;}
−
}
+
    }
  
−
/*sets layout of picture overlay*/
+
@media screen and (max-width : 1200px){
−
.imgmenuoverlay {
+
    @-moz-keyframes tourbtninit{
−
  position: absolute;
+
      0%   {width: 200px;}
−
  transition: 0.5s ease;
+
      100% {width: 200px;}
−
  background-color: rgba(50,50,50,0.6);
+
    }
−
  padding: 16px 12px;
+
−
   width: 100%;
+
−
  height: 40%;
+
−
  bottom: 0px;
+
−
}
+
  
−
/*changes layout of overlay on pictures when hovered*/
+
    @-webkit-keyframes tourbtninit{
−
.imgmenuitem:hover .imgmenuoverlay, .imgmenuitem:focus .imgmenuoverlay {
+
      0%   {width: 200px;}
−
   background-color: rgba(50,50,50,0.9);
+
      100% {width: 200px;}
−
}
+
    }
  
−
/*sets style of the text in the overlay*/
+
    @keyframes tourbtninit{
−
.imgmenuoverlay a {
+
      0%   {width: 200px;}
−
   color: white;
+
      100% {width: 200px;}
−
  cursor: pointer;
+
    }
−
  text-decoration: none;
+
 
}
 
}
  
−
/*sets style of the header in the overlay*/
 
−
.imgmenuoverlay a *:first-child {
 
−
  width: 100%;
 
−
  border-bottom: 1px solid white;
 
−
  text-align: center;
 
−
}
 
  
−
/*styles the paragraph in the overlay*/
+
/****************************************************************************************************************/
−
.imgmenuoverlay a p {
+
/******************************************** FRONT PAGE DOWN ARROW *********************************************/
−
   font-size: 14px;
+
/****************************************************************************************************************/
−
}
+
 
 +
 
 +
 
 +
    #windowcontent .Rounddownbtncontainer {
 +
      float: left;
 +
      width: 100%;
 +
      min-width: 1000px;
 +
      margin-top: -25vh;
 +
    }
 +
 
 +
    #windowcontent .Rounddownbtn {
 +
      width: 71px;
 +
      height: 69px;
 +
      margin: auto;
 +
      -moz-border-radius: 36px;
 +
      -webkit-border-radius: 36px;
 +
      border-radius: 36px;
 +
      -moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.5);
 +
      -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.5);
 +
      box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.5);
 +
      animation-name: downbutton;
 +
      animation-duration: 3.5s;
 +
      animation-iteration-count: infinite;
 +
      animation-timing-function: ease-in-out;
 +
    }
 +
 
 +
    @-moz-keyframes downbutton {
 +
      0%   {background-color: rgba(255,255,255,1)}
 +
      50%  {background-color: rgba(255,255,255,0.4)}
 +
      100% {background-color: rgba(255,255,255,1)}
 +
    }
 +
 
 +
    @-webkit-keyframes downbutton {
 +
      0%  {background-color: rgba(255,255,255,1)}
 +
      50%  {background-color: rgba(255,255,255,0.4)}
 +
      100% {background-color: rgba(255,255,255,1)}
 +
    }
 +
 
 +
    @keyframes downbutton {
 +
      0%  {background-color: rgba(255,255,255,1)}
 +
      50%  {background-color: rgba(255,255,255,0.4)}
 +
      100% {background-color: rgba(255,255,255,1)}
 +
    }
 +
 
 +
    #windowcontent .Rounddownbtn img {
 +
      margin-top: 6px;
 +
      margin-left: 2px;
 +
      -ms-transform: rotate(-1deg); /* IE 9 */
 +
      -webkit-transform: rotate(-1deg); /* Chrome, Safari, Opera */
 +
      transform: rotate(-1deg);
 +
    }
  
  
  
 
/****************************************************************************************************************/
 
/****************************************************************************************************************/
−
/**************************************************** FOOTER ****************************************************/
+
/************************************************* MAIN CONTENT *************************************************/
 
/****************************************************************************************************************/
 
/****************************************************************************************************************/
  
  
 +
    /***** styles main text area on main page *****/
  
−
/*styles main footer area*/
+
    #windowcontent .maincontainer {
−
footer {
+
      margin: 100px auto;
−
  background: #848282;
+
      width: 1000px;
−
  color: white;
+
      text-align: justify;
−
  margin: 0px;
+
      clear: both;
−
  padding: 0px;
+
      display: table;
−
  width: 100%;
+
    }
−
  min-width: 1000px;
+
−
  position: absolute;
+
−
  text-align: center;
+
−
  color: white;  
+
−
  font-size:x-small;
+
−
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+
−
}
+
  
−
/*defines a container of same width as main content
+
    #windowcontent #snakewtext {
−
  that contains footer content*/
+
      margin: 30px auto 0 auto;
−
.footercontainer {
+
    }
−
  width: 1000px;
+
−
  margin: auto;
+
−
}
+
  
−
/*centers footer content in the individual columns*/
+
    #windowcontent .maincontainer p {
−
.footercolstyle {
+
      font-size: 16px;!important
−
  align-content: center;
+
    }
−
}
+
  
−
/*styles left footer column*/
+
    /***** container for the two pictures in top of main content *****/
−
.leftfootercol {
+
   
−
  float: left;
+
    #windowcontent .imgmenu {
−
}
+
      max-width: 100%;
 +
      margin: 70px auto 100px auto;
 +
      overflow: hidden;
 +
    }
  
−
/*styles right footer column*/
+
    /***** sets container for the individual pictures *****/
−
.rightfootercol {
+
−
  float: right;
+
−
}
+
  
−
/*gives space between the "find us at" icons*/
+
    #windowcontent .imgmenuitem {
−
footer img {
+
      position: relative;
−
  margin: 10px;
+
      width: 100%;
−
}
+
      max-width: 700px;
 +
      margin: 0px auto;
 +
      height: 400px;
 +
      border-radius: 20px;
 +
      overflow: hidden;
 +
      cursor: pointer;
 +
    }
  
 +
    /***** sets layout for the pictures themselves *****/
 +
   
 +
    #windowcontent .imgmenucontent {
 +
      height: 100%;
 +
      width: 100%;
 +
      background-size: cover;
 +
      background-repeat: no-repeat;
 +
      -webkit-transition: all .5s;
 +
      -moz-transition: all .5s;
 +
      -o-transition: all .5s;
 +
      transition: all .5s;
 +
    }
  
 +
    /***** the different images are styled *****/
  
−
/****************************************************************************************************************/
+
    #windowcontent .img1 {
−
/*************************** HELPING CLASSES - OVERWRITES OTHER PREDEFINED PROPERTIES ***************************/
+
      background-image: url("https://static.igem.org/mediawiki/2017/e/e1/T--DTU-Denmark--snake_problem.jpg");
−
/****************************************************************************************************************/
+
      opacity: 0.9;
 +
      -webkit-filter: brightness(1.2);
 +
      filter: brightness(1.2);
 +
      background-position: -200px center;
 +
    }
 +
   
 +
    #windowcontent .img2 {
 +
      background-image: url("https://static.igem.org/mediawiki/2017/b/bc/T--DTU-Denmark--snake_map.jpg");
 +
      background-position: -200px -20px;
 +
    }
  
 +
    /***** zooms picture when hovered *****/
 +
   
 +
    #windowcontent .imgmenuitem:hover .imgmenucontent, #windowcontent .imgmenuitem:focus .imgmenucontent {
 +
      -ms-transform: scale(1.1);
 +
      -moz-transform: scale(1.1);
 +
      -webkit-transform: scale(1.1);
 +
      -o-transform: scale(1.1);
 +
      transform: scale(1.1);
 +
      opacity: 0.5;
 +
    }
  
 +
    /***** sets layout of picture overlay *****/
  
−
/*removes margin and padding*/
+
    #windowcontent .imgmenuoverlay {
−
.rmvpadmarg {
+
      position: absolute;
−
    margin: 0px;
+
      transition: 0.5s ease;
−
    padding: 0px;
+
      background-color: rgba(50,50,50,0.6);
−
}
+
      padding: 16px 12px;
 +
      width: 100%;
 +
      height: 40%;
 +
      bottom: 0px;
 +
    }
  
−
/*removes vertical lines on links*/
+
    /***** changes layout of overlay on pictures when hovered *****/
−
.rmvlinkstyle a {
+
−
text-decoration: none;
+
−
}
+
  
−
/*brings element to front of page, used to bring nav bar
+
    #windowcontent .imgmenuitem:hover .imgmenuoverlay, #windowcontent .imgmenuitem:focus .imgmenuoverlay {
−
  in front of everything else*/
+
      background-color: rgba(50,50,50,0.9);
−
.tofront {
+
    }
−
  position: relative;
+
−
  z-index: 9999;
+
−
}
+
  
−
/*sets the position of the element to be given a bottom border*/
+
    /***** sets style of the text in the overlay *****/
−
.bottomborder {
+
   
−
  position: relative;
+
    #windowcontent .imgmenuitem a * {
−
}
+
      color: white;
 +
      cursor: pointer;
 +
      text-decoration: none;
 +
    }
  
−
/*styles borders for h1 elements*/
+
    /***** sets style of the header in the overlay *****/
−
h1.bottomborder:after {
+
−
  content:"";
+
−
  background: black;
+
−
  position: absolute;
+
−
  bottom: -5px;
+
−
  left: 150px;
+
−
  height: 1px;
+
−
  width: 700px;
+
−
}
+
  
−
/*styles borders for h2 elements*/
+
    #windowcontent .imgmenuitem a *:first-child {
−
h2.bottomborder:after {
+
      width: 100%;
−
  content:"";  
+
      border-bottom: 1px solid white;
−
  background: black;
+
      text-align: center;
−
  position: absolute;
+
    }
−
  bottom: -5px;
+
−
  left: 300px;
+
−
  height: 1px;  
+
−
  width: 400px;
+
−
}
+
  
 +
    /***** styles the paragraph in the overlay *****/
 +
   
 +
    #windowcontent .imgmenuitem a p {
 +
      font-size: 14px;
 +
    }
  
 
/****************************************************************************************************************/
 
/****************************************************************************************************************/
−
/********************************************* TEMPORARY ADDITIONS **********************************************/
+
/**************************************************** FOOTER ****************************************************/
 
/****************************************************************************************************************/
 
/****************************************************************************************************************/
  
  
 +
    /***** styles main footer area *****/
 +
   
 +
    #windowcontent footer {
 +
      background-color: background-color: #f5e1bc;
 +
      color: white;
 +
      width: 100%;
 +
      min-width: 1000px;
 +
      position: absolute;
 +
      text-align: center;
 +
      font-size: x-small;
 +
      font-family: 'Quicksand', "Lucida Sans Unicode", "Lucida Grande", sans-serif;
 +
      border-top: 2px solid black;
 +
    }
  
−
/*TEMPORARY checks if media keyword works
+
    /***** defines a container of same width as main content that contains footer content *****/
−
  if screensize is less than 1000px changes background color
+
 
−
  can be used for styling page on mobile devices later*/
+
    #windowcontent .footercontainer {
−
/*@media only screen and (max-width: 1000px) {
+
      width: 1000px;
−
     body {
+
      margin: 20px auto 25px auto;
−
        background-color: lightblue;
+
    }
 +
 
 +
    /***** centers footer content in the individual columns *****/
 +
   
 +
    #windowcontent .footercolstyle * {
 +
      align-content: center;
 +
      text-align: center;
 +
      color: black;
 +
    }
 +
 
 +
    #windowcontent .footercolstyle a {
 +
      padding: 0px;
 +
    }
 +
 
 +
    /***** styles left footer column *****/
 +
   
 +
     #windowcontent .leftfootercol {
 +
      float: left;
 +
    }
 +
 
 +
    /***** styles right footer column *****/
 +
 
 +
    #windowcontent .rightfootercol {
 +
      float: right;
 +
    }
 +
 
 +
    /***** gives space between the "find us at" icons *****/
 +
   
 +
    #windowcontent footer img {
 +
      margin: 10px;
 
     }
 
     }
−
}
 
−
*/
 

Latest revision as of 02:36, 2 November 2017

   @import url('https://fonts.googleapis.com/css?family=Quicksand');

/****************************************************************************************************************/ /************************************** OVERWRITES DEFAULT WIKI SETTINGS ****************************************/ /************************************************* (iGEM CODE) **************************************************/ /****************************************************************************************************************/ 


   /* Clear the default wiki settings */

   #content, body {
     background-color: #f5e1bc;
     font-family: 'Quicksand', sans-serif;
   }
 
   #HQ_page p, #HQ_page h1, #HQ_page h2, #HQ_page h3, #HQ_page h4, #HQ_page h5, #HQ_page h6 {
     font-family: 'Quicksand', sans-serif;
   }

   #home_logo, #sideMenu {
     display:none;
   }
   
   #sideMenu, #top_title, .patrollink  {
     display:none;
   }
   
   #content {
     width: 100%;
     padding: 0px;
     margin-top: -7px;
     margin-left: 0px;
   }

   #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {
     margin-bottom: 0px;
   }


/****************************************************************************************************************/ /*********************************************** SETS MAIN STYLES ***********************************************/ /****************************************************************************************************************/

/***** TO OVERWRITE iGEM STYLING WHITHOUT MESSING WITH iGEM HEADER USE #windowcontent PREFIX IN CSS SYLING *****/ 

   #windowcontent * {
     box-sizing: border-box;
     font-family: 'Quicksand', sans-serif, "Times New Roman", Times, serif;
     margin: 0px;
     padding: 0px;
   }

   #windowcontent ul, ol {
     list-style: none;
   }

   /*makes the website span from edge to edge of the viewport*/

   #windowcontent body {
     position: relative;
     width: 100%;
     margin: 0px;
     padding: 0px;
   }

   /***** centers all headlines as standard *****/

   h1, h2, h3, h4, h5, h6 {
     text-align: center;
   }

   /***** defines percentage columns used for layout so everything but the main content spans from edge to edge of the viewport *****/

   .col-1 {
     width: 08.33%;
   }
   .col-2 {
     width: 16.66%;
   }
   .col-3 {
     width: 25.00%;
   }
   .col-4 {
     width: 33.33%;
   }
   .col-5 {
     width: 41.66%;
   }
   .col-6 {
     width: 50.00%;
   }
   .col-7 {
     width: 58.33%;
   }
   .col-8 {
     width: 66.66%;
   }
   .col-9 {
     width: 75.00%;
   }
   .col-10 {
     width: 83.33%;
   }
   .col-11 {
     width: 91.66%;
   }
   .col-12 {
     width: 100.0%;
   }

   /***** defines columns in pixels used for main content area, so user zoom will not affect the layout *****/

   .colp-1 {
     width: calc(1000px/12);
   }
   .colp-2 {
     width: calc(1000px/12*2);
   }
   .colp-3 {
     width: calc(1000px/12*3);
   }
   .colp-4 {
     width: calc(1000px/12*4);
   }
   .colp-5 {
     width: calc(1000px/12*5);
   }
   .colp-6 {
     width: calc(1000px/12*6);
   }
   .colp-7 {
     width: calc(1000px/12*7);
   }
   .colp-8 {
     width: calc(1000px/12*8);
   }
   .colp-9 {
     width: calc(1000px/12*9);
   }
   .colp-10 {
     width: calc(1000px/12*10);
   }
   .colp-11 {
     width: calc(1000px/12*11);
   }
   .colp-12 {
     width: 1000px;
   }

   /***** makes all the columns go to the left of the page and "stack" to the right if room *****/

   [class*="col-"] {
     float: left;
     padding: 15px;
   }

   [class*="colp-"] {
     float: left;
     padding: 15px;
   }

   /***** EACH ROW MUST BE 12 COLUMNS (OF THE SAME TYPE) IN TOTAL *****/
   /************ (for example col-4, col-6, col-2 is a row) ***********/



   /***** clears the row of other content *****/

   .row::after {
     content: "";
     clear: both;
     display: table;
   }


/****************************************************************************************************************/ /*************************** HELPING CLASSES - OVERWRITES OTHER PREDEFINED PROPERTIES ***************************/ /****************************************************************************************************************/ 


   /***** removes margin and padding *****/

   #windowcontent .rmvpadmarg {
     margin: 0px;
     padding: 0px;
   }

   /***** removes vertical lines on links *****/

   #windowcontent .rmvlinkstyle a {
     text-decoration: none;
   }

   /***** brings element to front of page, used to bring nav bar in front of everything else *****/

   #windowcontent .tofront {
     position: relative;
     z-index: 9999;
   }

   /***** sets the position of the element to be given a bottom border *****/

   #windowcontent .bottomborder {
     position: relative;
     padding: 25px 0px;
   }

   /***** styles borders for h1 elements *****/

   #windowcontent h1.bottomborder:after {
     content:""; 
     background: black; 
     position: absolute; 
     left: 150px;
     bottom: 16px;
     height: 1px; 
     width: 700px;
   }



   /***** styles borders for h2 elements *****/

   #windowcontent h2.bottomborder:after {
     content:""; 
     background: black; 
     position: absolute; 
     left: 300px; 
     bottom: 18px;
     height: 1px; 
     width: 400px;
   }

   #windowcontent .fixed {
     position: fixed;
   }


/****************************************************************************************************************/ /**************************************************** NAVBAR ****************************************************/ /****************************************************************************************************************/


/***** defines key properties of the nav bar *****/ 

   #windowcontent nav {
     margin: 0px;
     padding: 0px;
     overflow: hidden;
     top: 0px;
     width: 100%;
     height: 40px;
   }

   /***** helps center navar. The sum of the nav bar choice widths is 1000px (5*200px) *****/

   #windowcontent .navbarcenter {
     width: 1000px;
     margin: auto;
   }

   /***** sets color of nav bar when the page is scrolled to the top *****/

   #windowcontent .navbar {
     background-image: linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3));
     background-color: rgba(20,20,20,1);
     box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.7);
   }

   /***** sets background of navbar choice buttons when hovered *****/

   #windowcontent .dropdown:hover .dropbtn {
     background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
     background: -o-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
     background: -moz-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
     background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
   }

   /***** makes nav bar choices float next to each other *****/

   #windowcontent .dropdown {
     float: right;
     height: 40px;
   }

   /***** layout of nav bar choice buttons *****/

   #windowcontent .dropdown .dropbtn {
     height: 40px;
     display: inline-block;
     color: white;
     text-align: center;
     padding: 10px 16px;
     width: 200px;
     text-decoration: none;
     font-size: 1.2em;
     font-family: 'Quicksand', sans-serif, "Times New Roman", Times, serif;
   }

   /***** hides dropdown choices, sets background and shadows. makes sure that the width is not less than the width of the nav bar choice buttons *****/

   #windowcontent .dropdown-content {
     -webkit-transition: background 1.5s; /* Safari */
     transition: background 1.5s;
     display: none;
     position: absolute;
     background-color: transparent;
     min-width: 200px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     z-index: 1;
   }

   /***** displays dropdown content when nav bar choice is hovered *****/

   #windowcontent .dropdown:hover .dropdown-content, #windowcontent .dropdown:focus .dropdown-content {
     display: block;
   }

   /***** defines nav bar dropdown link layout *****/

   #windowcontent .dropdown-content a {
     color: black;
     background-color: white;
     padding: 10px 16px;
     text-decoration: none;
     display: block;
     text-align: left;
   }

   /***** changes navbar dropdown menu color when choice is hovered *****/

   #windowcontent .dropdown-content a:hover, #windowcontent .dropdown-content a:focus {
     background-color: rgb(235,235,235);
   }



/****************************************************************************************************************/ /************************************* PARALLAX IMAGE (WHOLE SPLASH SCREEN) *************************************/ /****************************************************************************************************************/ 


   /***** creates the parallax effect on main page when scrooling *****/
   
   #windowcontent .parallax { 
     position: relative;
     z-index: -1;
     background-image: url("T--DTU-Denmark--front_snake_splashscreen.png");
     background-size: 80%;

     /***** height is viewport height +1.5% of viewport height (matches with the height of .parralaxfade) *****/
     height: 101.5vh;
     background-attachment: fixed;
     background-position: center 60px;
     background-repeat: no-repeat;
     min-width: 1000px;
   }

   /***** sets position and style for the headline text on main page *****/

   #windowcontent .parallaxtext{
     position: relative;
     display: block;
     margin: auto;
     width: 700px;
     padding-top: 10vh;
   }



   /***** styles line one in the headline text on main page *****/

   #windowcontent #homepageheadline1 {
     font-size: 5em;
     font-weight: bold;
     color: black;
     font-family: 'Quicksand', sans-serif;
  1. text-shadow: 2px 2px 6px #727272;
     text-align: center;
   }

   /***** styles line two in the headline text on main page *****/

   #windowcontent #homepageheadline2 {
     font-size: 3em;
     font-weight: bold;
     color: black;
     font-family: 'Quicksand', sans-serif;
  1. text-shadow: 0px 0px 5px #727272;
     text-align: center;
   }

   /***** creates a fade from parallax image to main content. Height fits extra height in .parallax *****/

   #windowcontent .parallaxfade {
     width: inherit;
     height: 1.5vh;
     position: absolute;
     bottom: 0px;
     background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Safari 5.1 to 6.0 */
     background: -o-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Opera 11.1 to 12.0 */
     background: -moz-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Firefox 3.6 to 15 */
     background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,1)); /* Standard syntax (must be last) */
   }


/****************************************************************************************************************/ /************************************************* TOUR BUTTON **************************************************/ /****************************************************************************************************************/ 


   #windowcontent #tourbtn {
     position: fixed;
     bottom: 10px;
     right: 10px;
     animation-name: tourbtninit;
     animation-duration: 7s;
     animation-iteration-count: 1;
     animation-timing-function: ease;
   }

   #windowcontent #tourbtn img {
     width: 200px;
     animation-name: tourbtninit;
     animation-duration: 7s;
     animation-iteration-count: 1;
     animation-timing-function: ease;
   }

   @-moz-keyframes tourbtninit{
     0%   {width: 200px;}
     20%  {width: 200px;}
     35%  {width: 400px;}
     45%  {width: 320px;}
     75%  {width: 320px;}
     85%  {width: 400px;}
     100% {width: 200px;}
   }

   @-webkit-keyframes tourbtninit{
     0%   {width: 200px;}
     20%  {width: 200px;}
     35%  {width: 400px;}
     45%  {width: 320px;}
     75%  {width: 320px;}
     85%  {width: 400px;}
     100% {width: 200px;}
   }

   @keyframes tourbtninit{
     0%   {width: 200px;}
     20%  {width: 200px;}
     35%  {width: 400px;}
     45%  {width: 320px;}
     75%  {width: 320px;}
     85%  {width: 400px;}
     100% {width: 200px;}
   }

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

   @-moz-keyframes tourbtninit{
     0%   {width: 200px;}
     100% {width: 200px;}
   }

   @-webkit-keyframes tourbtninit{
     0%   {width: 200px;}
     100% {width: 200px;}
   }

   @keyframes tourbtninit{
     0%   {width: 200px;}
     100% {width: 200px;}
   }

}


/****************************************************************************************************************/ /******************************************** FRONT PAGE DOWN ARROW *********************************************/ /****************************************************************************************************************/ 


   #windowcontent .Rounddownbtncontainer {
     float: left;
     width: 100%;
     min-width: 1000px;
     margin-top: -25vh;
   }

   #windowcontent .Rounddownbtn {
     width: 71px;
     height: 69px;
     margin: auto;
     -moz-border-radius: 36px;
     -webkit-border-radius: 36px;
     border-radius: 36px;
     -moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.5);
     -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.5);
     box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.5);
     animation-name: downbutton;
     animation-duration: 3.5s;
     animation-iteration-count: infinite;
     animation-timing-function: ease-in-out;
   }

   @-moz-keyframes downbutton {
     0%   {background-color: rgba(255,255,255,1)}
     50%  {background-color: rgba(255,255,255,0.4)}
     100% {background-color: rgba(255,255,255,1)}
   }

   @-webkit-keyframes downbutton {
     0%   {background-color: rgba(255,255,255,1)}
     50%  {background-color: rgba(255,255,255,0.4)}
     100% {background-color: rgba(255,255,255,1)}
   }

   @keyframes downbutton {
     0%   {background-color: rgba(255,255,255,1)}
     50%  {background-color: rgba(255,255,255,0.4)}
     100% {background-color: rgba(255,255,255,1)}
   }

   #windowcontent .Rounddownbtn img {
     margin-top: 6px;
     margin-left: 2px;
     -ms-transform: rotate(-1deg); /* IE 9 */
     -webkit-transform: rotate(-1deg); /* Chrome, Safari, Opera */
     transform: rotate(-1deg);
   }


/****************************************************************************************************************/ /************************************************* MAIN CONTENT *************************************************/ /****************************************************************************************************************/ 


   /***** styles main text area on main page *****/

   #windowcontent .maincontainer {
     margin: 100px auto;
     width: 1000px;
     text-align: justify;
     clear: both;
     display: table;
   }

   #windowcontent #snakewtext {
     margin: 30px auto 0 auto;
   }

   #windowcontent .maincontainer p {
     font-size: 16px;!important
   }

   /***** container for the two pictures in top of main content *****/
   
   #windowcontent .imgmenu {
     max-width: 100%;
     margin: 70px auto 100px auto;
     overflow: hidden;
   }

   /***** sets container for the individual pictures *****/

   #windowcontent .imgmenuitem {
     position: relative;
     width: 100%;
     max-width: 700px;
     margin: 0px auto;
     height: 400px;
     border-radius: 20px;
     overflow: hidden;
     cursor: pointer;
   }

   /***** sets layout for the pictures themselves *****/
   
   #windowcontent .imgmenucontent {
     height: 100%;
     width: 100%;
     background-size: cover;
     background-repeat: no-repeat;
     -webkit-transition: all .5s;
     -moz-transition: all .5s;
     -o-transition: all .5s;
     transition: all .5s;
   }

   /***** the different images are styled *****/

   #windowcontent .img1 {
     background-image: url("T--DTU-Denmark--snake_problem.jpg");
     opacity: 0.9;
     -webkit-filter: brightness(1.2);
     filter: brightness(1.2);
     background-position: -200px center;
   }
   
   #windowcontent .img2 {
     background-image: url("T--DTU-Denmark--snake_map.jpg");
     background-position: -200px -20px;
   }

   /***** zooms picture when hovered *****/
   
   #windowcontent .imgmenuitem:hover .imgmenucontent, #windowcontent .imgmenuitem:focus .imgmenucontent {
     -ms-transform: scale(1.1);
     -moz-transform: scale(1.1);
     -webkit-transform: scale(1.1);
     -o-transform: scale(1.1);
     transform: scale(1.1);
     opacity: 0.5;
   }

   /***** sets layout of picture overlay *****/

   #windowcontent .imgmenuoverlay {
     position: absolute;
     transition: 0.5s ease;
     background-color: rgba(50,50,50,0.6);
     padding: 16px 12px;
     width: 100%;
     height: 40%;
     bottom: 0px;
   }

   /***** changes layout of overlay on pictures when hovered *****/

   #windowcontent .imgmenuitem:hover .imgmenuoverlay, #windowcontent .imgmenuitem:focus .imgmenuoverlay {
     background-color: rgba(50,50,50,0.9);
   }

   /***** sets style of the text in the overlay *****/
   
   #windowcontent .imgmenuitem a * {
     color: white;
     cursor: pointer;
     text-decoration: none;
   }

   /***** sets style of the header in the overlay *****/

   #windowcontent .imgmenuitem a *:first-child {
     width: 100%;
     border-bottom: 1px solid white;
     text-align: center;
   }

   /***** styles the paragraph in the overlay *****/
   
   #windowcontent .imgmenuitem a p {
     font-size: 14px;
   }

/****************************************************************************************************************/ /**************************************************** FOOTER ****************************************************/ /****************************************************************************************************************/ 


   /***** styles main footer area *****/
   
   #windowcontent footer {
     background-color: background-color: #f5e1bc;
     color: white;
     width: 100%;
     min-width: 1000px;
     position: absolute;
     text-align: center;
     font-size: x-small;
     font-family: 'Quicksand', "Lucida Sans Unicode", "Lucida Grande", sans-serif;
     border-top: 2px solid black;
   }

   /***** defines a container of same width as main content that contains footer content *****/

   #windowcontent .footercontainer {
     width: 1000px;
     margin: 20px auto 25px auto;
   }

   /***** centers footer content in the individual columns *****/
   
   #windowcontent .footercolstyle * {
     align-content: center;
     text-align: center;
     color: black;
   }

   #windowcontent .footercolstyle a {
     padding: 0px;
   }

   /***** styles left footer column *****/
   
   #windowcontent .leftfootercol {
     float: left;
   }

   /***** styles right footer column *****/

   #windowcontent .rightfootercol {
     float: right;
   }

   /***** gives space between the "find us at" icons *****/
   
   #windowcontent footer img {
     margin: 10px;
   }