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

(Still trying to find a fix for the online stylesheet problem)
Line 27: Line 27:
 
}
 
}
 
.col-2 {
 
.col-2 {
   width: 16.66%;}
+
   width: 16.66%;
 +
}
 
.col-3 {
 
.col-3 {
   width: 25.00%;}
+
   width: 25.00%;
 +
}
 
.col-4 {
 
.col-4 {
   width: 33.33%;}
+
   width: 33.33%;
 +
}
 
.col-5 {
 
.col-5 {
   width: 41.66%;}
+
   width: 41.66%;
 +
}
 
.col-6 {
 
.col-6 {
   width: 50.00%;}
+
   width: 50.00%;
 +
}
 
.col-7 {
 
.col-7 {
   width: 58.33%;}
+
   width: 58.33%;
 +
}
 
.col-8 {
 
.col-8 {
   width: 66.66%;}
+
   width: 66.66%;
 +
}
 
.col-9 {
 
.col-9 {
   width: 75.00%;}
+
   width: 75.00%;
 +
}
 
.col-10 {
 
.col-10 {
   width: 83.33%;}
+
   width: 83.33%;
 +
}
 
.col-11 {
 
.col-11 {
   width: 91.66%;}
+
   width: 91.66%;
 +
}
 
.col-12 {
 
.col-12 {
   width: 100.0%;}
+
   width: 100.0%;
 +
}
  
 
/*defines columns in pixels used for main content area, so user zoom will not affect the layout*/
 
/*defines columns in pixels used for main content area, so user zoom will not affect the layout*/
  
 
.colp-1 {
 
.colp-1 {
   width: calc(1000px/12);}
+
   width: calc(1000px/12);
 +
}
 
.colp-2 {
 
.colp-2 {
   width: calc(1000px/12*2);}
+
   width: calc(1000px/12*2);
 +
}
 
.colp-3 {
 
.colp-3 {
   width: calc(1000px/12*3);}
+
   width: calc(1000px/12*3);
 +
}
 
.colp-4 {
 
.colp-4 {
   width: calc(1000px/12*4);}
+
   width: calc(1000px/12*4);
 +
}
 
.colp-5 {
 
.colp-5 {
   width: calc(1000px/12*5);}
+
   width: calc(1000px/12*5);
 +
}
 
.colp-6 {
 
.colp-6 {
   width: calc(1000px/12*6);}
+
   width: calc(1000px/12*6);
 +
}
 
.colp-7 {
 
.colp-7 {
   width: calc(1000px/12*7);}
+
   width: calc(1000px/12*7);
 +
}
 
.colp-8 {
 
.colp-8 {
   width: calc(1000px/12*8);}
+
   width: calc(1000px/12*8);
 +
}
 
.colp-9 {
 
.colp-9 {
   width: calc(1000px/12*9);}
+
   width: calc(1000px/12*9);
 +
}
 
.colp-10 {
 
.colp-10 {
   width: calc(1000px/12*10);}
+
   width: calc(1000px/12*10);
 +
}
 
.colp-11 {
 
.colp-11 {
   width: calc(1000px/12*11);}
+
   width: calc(1000px/12*11);
 +
}
 
.colp-12 {
 
.colp-12 {
   width: 1000px;}
+
   width: 1000px;
 +
}
  
 
/*makes all the columns go to the left of the page and "stack" to the right if room*/
 
/*makes all the columns go to the left of the page and "stack" to the right if room*/
Line 88: Line 111:
 
}
 
}
  
/***********EACH ROW MUST BE 12 COLUMNS TOTAL*********/
+
/*********** EACH ROW MUST BE 12 COLUMNS TOTAL ************/
  
 
/*(example col-4, col-6, col-2 is a row) clears the row of other content*/
 
/*(example col-4, col-6, col-2 is a row) clears the row of other content*/
Line 101: Line 124:
  
 
/****************************************************************************************************************/
 
/****************************************************************************************************************/
 +
 
/******************************************* NAVBAR AND PROGRESS BAR  *******************************************/
 
/******************************************* NAVBAR AND PROGRESS BAR  *******************************************/
 +
 
/****************************************************************************************************************/
 
/****************************************************************************************************************/
  
Line 107: Line 132:
  
 
/*defines key properties of the nav bar*/
 
/*defines key properties of the nav bar*/
 +
 
nav {
 
nav {
 
   margin: 0px;
 
   margin: 0px;
Line 117: Line 143:
  
 
/*hides list*/
 
/*hides list*/
 +
 
nav ul {
 
nav ul {
 
   height: 0px;
 
   height: 0px;
Line 123: Line 150:
  
 
/*sets color of nav bar when the page is scrolled to the top*/
 
/*sets color of nav bar when the page is scrolled to the top*/
 +
 
.navbar {
 
.navbar {
 
   -webkit-transition: background 1s; /* Safari */
 
   -webkit-transition: background 1s; /* Safari */
Line 133: Line 161:
 
}
 
}
  
/*sets the color of the nav bar when scrolled down to  
+
/*sets the color of the nav bar when scrolled down to the main text TRANSITIONS CANNOT BE USED HERE*/
  the main text TRANSITIONS CANNOT BE USED HERE*/
+
 
 
.navbar.scrolledpastnav {
 
.navbar.scrolledpastnav {
 
   -webkit-transition: background 1.5s; /* Safari */
 
   -webkit-transition: background 1.5s; /* Safari */
transition: background 1.5s;
+
  transition: background 1.5s;
background-color: rgba(20,20,20,1);
+
  background-color: rgba(20,20,20,1);
 
   box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.7);
 
   box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.7);
 
}
 
}
  
/*helps center navar. The sum of the nav bar choice  
+
/*helps center navar. The sum of the nav bar choice widths is 1000px (5*200px)*/
  widths is 1000px (5*200px)*/
+
 
 
.navbarcenter {
 
.navbarcenter {
 
     width: 1000px;
 
     width: 1000px;
Line 150: Line 178:
  
 
/*makes nav bar choices float next to each other*/
 
/*makes nav bar choices float next to each other*/
 +
 
.dropdown {
 
.dropdown {
 
     float: right;
 
     float: right;
Line 156: Line 185:
  
 
/*layout of nav bar choice buttons*/
 
/*layout of nav bar choice buttons*/
 +
 
.dropdown .dropbtn {
 
.dropdown .dropbtn {
 
   height: 38px;
 
   height: 38px;
Line 169: Line 199:
  
 
/*sets background of navbar choice buttons when hovered*/
 
/*sets background of navbar choice buttons when hovered*/
 +
 
.dropdown:hover .dropbtn {
 
.dropdown:hover .dropbtn {
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: -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: -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: -moz-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); /* For Firefox 3.6 to 15 */
Line 176: Line 207:
 
}
 
}
  
/*hides dropdown choices, sets background and shadows. makes sure that
+
/*hides dropdown choices, sets background and shadows. makes sure that the width is not less than the width of the nav bar choice buttons*/
  the width is not less than the width of the nav bar choice buttons*/
+
 
 
.dropdown-content {
 
.dropdown-content {
 
   -webkit-transition: background 1.5s; /* Safari */
 
   -webkit-transition: background 1.5s; /* Safari */
 
   transition: background 1.5s;
 
   transition: background 1.5s;
 
  /*border has same height as progress bar*/
 
  border-top: 2px solid rgba(150,150,150,0.3);
 
 
  /*fixes layout issue with border rendering 3 px*/
 
  margin-top: -0.1px;
 
 
   display: none;
 
   display: none;
 
   position: absolute;
 
   position: absolute;
Line 196: Line 221:
  
 
/*sets layout of dropdown menu when nav bar changes layout*/
 
/*sets layout of dropdown menu when nav bar changes layout*/
 +
 
.dropdown-content.scrolledpastnav {
 
.dropdown-content.scrolledpastnav {
 
   -webkit-transition: background 1.5s; /* Safari */
 
   -webkit-transition: background 1.5s; /* Safari */
 
   transition: background 1.5s;
 
   transition: background 1.5s;
 
  /*border has same height as progress bar*/
 
  border-top: 2px solid transparent;
 
 
}
 
}
  
  
 
/*displays dropdown content when nav bar choice is hovered*/
 
/*displays dropdown content when nav bar choice is hovered*/
 +
 
.dropdown:hover .dropdown-content, .dropdown:focus .dropdown-content {
 
.dropdown:hover .dropdown-content, .dropdown:focus .dropdown-content {
 
   display: block;
 
   display: block;
Line 211: Line 235:
  
 
/*defines nav bar dropdown link layout*/
 
/*defines nav bar dropdown link layout*/
 +
 
.dropdown-content a {
 
.dropdown-content a {
 
   color: black;
 
   color: black;
Line 221: Line 246:
  
 
/*changes navbar dropdown menu color when choice is hovered*/
 
/*changes navbar dropdown menu color when choice is hovered*/
 +
 
.dropdown-content a:hover, .dropdown-content a:focus {
 
.dropdown-content a:hover, .dropdown-content a:focus {
 
     background-color: rgb(235,235,235);
 
     background-color: rgb(235,235,235);
 
}
 
}
  
/*********** PROGRESS BAR ************/
 
  
/*defines progress bar layout*/
 
progress {
 
  /* Positioning */
 
  position: fixed;
 
  left: 0;
 
  top: 38px;
 
  
  /* Dimensions */
+
/****************************************************************************************************************/
  width: 100%;
+
  height: 2px;
+
  
  /* Reset the apperance */
+
/************************************* PARALLAX IMAGE (WHOLE SPLASH SCREEN) *************************************/
  -webkit-appearance: none;
+
    -moz-appearance: none;
+
          appearance: none;
+
  
  /* Get rid of the default border in Firefox/Opera. */
 
  border: none;
 
 
  /* For Firefox/IE10+ */
 
  background-color: rgba(150,150,150,0.3);
 
 
  /* For IE10+, color of the progress bar */
 
  color: white;
 
}
 
 
/*changes progressbar when nav bar changes layout*/
 
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*/
 
progress::-webkit-progress-bar {
 
  background-color: rgba(150,150,150,0.3);
 
}
 
 
/*sets color of progress bar value bar*/
 
.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*/
 
.flat::-moz-progress-bar {
 
  -webkit-transition: background-color 1.5s; /* Safari */
 
  transition: background-color 1.5s;
 
  background-color: white;
 
}
 
 
/*sets the progress bar container (not so important for layout it seems)*/
 
.progress-container {
 
  width: 100%;
 
  background-color: transparent;
 
  position: fixed;
 
  top: 38px;
 
  left: 0;
 
  height: 2px;
 
  display: block;
 
}
 
 
/******** END OF PROGRESS BAR ********/
 
 
 
 
/****************************************************************************************************************/
 
/************************************* PARALLAX IMAGE (WHOLE SPLASH SCREEN) *************************************/
 
 
/****************************************************************************************************************/
 
/****************************************************************************************************************/
  
Line 301: Line 262:
  
 
/*creates the parallax effect on main page when scrooling*/
 
/*creates the parallax effect on main page when scrooling*/
 +
 
.parallax {  
 
.parallax {  
position: relative;
+
  position: relative;
z-index: -1;
+
  z-index: -1;
 
   background-image: url("https://static.igem.org/mediawiki/2017/6/67/T--DTU-Denmark--Indian_Cobra.jpg");
 
   background-image: url("https://static.igem.org/mediawiki/2017/6/67/T--DTU-Denmark--Indian_Cobra.jpg");
 
   width: inherit;
 
   width: inherit;
 
  /*height is viewport height +1.5% of viewport
 
    height (matches with the height of .parralaxfade)*/
 
 
   height: 101.5vh;
 
   height: 101.5vh;
 
   background-attachment: fixed;
 
   background-attachment: fixed;
Line 317: Line 276:
  
 
/*sets position and style for the headline text on main page*/
 
/*sets position and style for the headline text on main page*/
 +
 
.homepageheadline {
 
.homepageheadline {
position: absolute;
+
  position: absolute;
width: 850px;
+
  width: 850px;
height: 150px;
+
  height: 150px;
line-height: 60px;
+
  line-height: 60px;
 
   text-align: center;
 
   text-align: center;
top: 12%;
+
  top: 12%;
left: 50%;
+
  left: 50%;
margin: 0px 0px 0px -425px;
+
  margin: 0px 0px 0px -425px;
 
}
 
}
  
 
/*styles line one in the headline text on main page*/
 
/*styles line one in the headline text on main page*/
 +
 
#homepageheadline1 {
 
#homepageheadline1 {
font-size: 5em;
+
  font-size: 5em;
color: white;
+
  color: white;
margin: 0px;
+
  margin: 0px;
padding: 0px;
+
  padding: 0px;
line-height: normal;
+
  line-height: normal;
font-family: sans-serif;
+
  font-family: sans-serif;
text-shadow: 2px 2px 6px #727272;
+
  text-shadow: 2px 2px 6px #727272;
 
}
 
}
  
 
/*styles line two in the headline text on main page*/
 
/*styles line two in the headline text on main page*/
 +
 
#homepageheadline2 {
 
#homepageheadline2 {
font-size: 3em;
+
  font-size: 3em;
color: white;
+
  color: white;
margin: 0px;
+
  margin: 0px;
padding: 0px;
+
  padding: 0px;
line-height: normal;
+
  line-height: normal;
font-family: sans-serif;
+
  font-family: sans-serif;
text-shadow: 0px 0px 5px #727272;
+
  text-shadow: 0px 0px 5px #727272;
 
}
 
}
  
/*creates a fade from parallax image to main content
+
/*creates a fade from parallax image to main content height fits extra height in .parallax*/
  Height fits extra height in .parallax*/
+
 
 
.parallaxfade {
 
.parallaxfade {
width: inherit;
+
  width: inherit;
height: 1.5vh;
+
  height: 1.5vh;
position: absolute;
+
  position: absolute;
bottom: 0px;
+
  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: -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)); /* For Opera 11.1 to 12.0 */
+
   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)); /* For Firefox 3.6 to 15 */
+
   background: -moz-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
   background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,1)); /* Standard syntax (must be last) */
+
   background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,1));
 
}
 
}
  
Line 366: Line 328:
  
 
/****************************************************************************************************************/
 
/****************************************************************************************************************/
 +
 
/************************************************* MAIN CONTENT *************************************************/
 
/************************************************* MAIN CONTENT *************************************************/
 +
 
/****************************************************************************************************************/
 
/****************************************************************************************************************/
  

Revision as of 07:25, 14 July 2017

/*sets boxes so that the width and height properties (and min/max properties) includes content, padding and border, but not the margin*/

  • {
 box-sizing: border-box;
 font-family: sans-serif, "Times New Roman", Times, serif;

}

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

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

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

/****************************************************************************************************************/


/*defines key properties of the nav bar*/

nav {

 margin: 0px;
 padding: 0px;
 overflow: hidden;
 top: 0;
 width: 100%;
 height: 40px;

}

/*hides list*/

nav ul {

 height: 0px;
 list-style-type: none;

}

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

.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 the main text TRANSITIONS CANNOT BE USED HERE*/

.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 widths is 1000px (5*200px)*/

.navbarcenter {

   width: 1000px;
   margin: auto;

}

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

.dropdown {

   float: right;
   height: 38px;

}

/*layout of nav bar choice buttons*/

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

.dropdown:hover .dropbtn {

 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(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 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;
 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*/

.dropdown-content.scrolledpastnav {

 -webkit-transition: background 1.5s; /* Safari */
 transition: background 1.5s;

}


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

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

}


/****************************************************************************************************************/

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

/****************************************************************************************************************/


/*creates the parallax effect on main page when scrooling*/

.parallax {

 position: relative;
 z-index: -1;
 background-image: url("T--DTU-Denmark--Indian_Cobra.jpg");
 width: inherit;
 height: 101.5vh;
 background-attachment: fixed;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;

}

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

  1. homepageheadline1 {
 font-size: 5em;
 color: white;
 margin: 0px;
 padding: 0px;
 line-height: normal;
 font-family: sans-serif;
 text-shadow: 2px 2px 6px #727272;

}

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

  1. 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 height fits extra height in .parallax*/

.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));
 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(255,255,255,0.5), rgba(255,255,255,1));

}


/****************************************************************************************************************/

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

/****************************************************************************************************************/


/*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*/ .imgmenu {

 max-width: 100%;
 margin: 70px auto 100px auto;
 overflow: hidden;

}

/*sets container for the individual pictures*/ .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*/ .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;
 font

}

/*the different images are styled*/ .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;

} .img2 {

 background-image: url("T--DTU-Denmark--snake_map.jpg");
 background-position: -200px -20px;

}

/*zooms picture when hovered*/ .imgmenuitem:hover .imgmenucontent, .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*/ .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*/ .imgmenuitem:hover .imgmenuoverlay, .imgmenuitem:focus .imgmenuoverlay {

 background-color: rgba(50,50,50,0.9);

}

/*sets style of the text in the overlay*/ .imgmenuoverlay a {

 color: white;
 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 {

 font-size: 14px;

}


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


/*styles main footer area*/ footer {

 background: #848282;
 color: white;
 margin: 0px;
 padding: 0px;
 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

 that contains footer content*/

.footercontainer {

 width: 1000px;
 margin: auto;

}

/*centers footer content in the individual columns*/ .footercolstyle {

 align-content: center;

}

/*styles left footer column*/ .leftfootercol {

 float: left;

}

/*styles right footer column*/ .rightfootercol {

 float: right;

}

/*gives space between the "find us at" icons*/ footer img {

 margin: 10px;

}


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


/*removes margin and padding*/ .rmvpadmarg {

   margin: 0px;
   padding: 0px;

}

/*removes vertical lines on links*/ .rmvlinkstyle a { text-decoration: none; }

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

 in front of everything else*/

.tofront {

 position: relative;
 z-index: 9999;

}

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

 position: relative;

}

/*styles borders for h1 elements*/ h1.bottomborder:after {

 content:""; 
 background: black; 
 position: absolute; 
 bottom: -5px; 
 left: 150px; 
 height: 1px; 
 width: 700px;

}

/*styles borders for h2 elements*/ h2.bottomborder:after {

 content:""; 
 background: black; 
 position: absolute; 
 bottom: -5px; 
 left: 300px; 
 height: 1px; 
 width: 400px;

}


/****************************************************************************************************************/ /********************************************* TEMPORARY ADDITIONS **********************************************/ /****************************************************************************************************************/


/*TEMPORARY checks if media keyword works

 if screensize is less than 1000px changes background color
 can be used for styling page on mobile devices later*/

/*@media only screen and (max-width: 1000px) {

   body {
       background-color: lightblue;
   }

}

  • /