Team:DTU-Denmark/stylesheetmain
@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("
");
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;
- 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;
- 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("
");
opacity: 0.9;
-webkit-filter: brightness(1.2);
filter: brightness(1.2);
background-position: -200px center;
}
#windowcontent .img2 {
background-image: url("
");
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;
}
