Difference between revisions of "Template:KU Leuven/team/members/css"

Line 5: Line 5:
 
<style>
 
<style>
  
 +
/*********************/
 +
/* General STYLING */
 +
/*********************/
 +
 +
/* In this section general styling elements are specified*/
 +
 +
.center, #centernav{
 +
position:relative;
 +
        left:50%;
 +
-moz-transform:translateX(-50%);
 +
-ms-transform:translateX(-50%);
 +
-webkit-transform:translateX(-50%);
 +
transform:translateX(-50%);
 +
}
 +
 +
 +
html,body{
 +
    border-color:transparent;
 +
    text-align: center;
 +
 +
}
 +
 +
#globalWrapper {   
 +
    width: 100%;
 +
    border: 0px;
 +
    background-color: transparent;
 +
    margin: 0px;
 +
    padding: 0px;
 +
        height: auto;
 +
  }
 +
 
 +
#content, #bodyContent {   
 +
    width: 100%;
 +
    height: auto;
 +
    border: 0px;
 +
    background-color: transparent;
 +
    margin: 0px;
 +
    padding: 0px;
 +
   
 +
  }
 +
 
 +
 +
html, body, .wrapper {   
 +
    width: 100%;
 +
    height: auto;
 +
    margin:0 auto;
 +
    background-color: #f3efe7;
 +
    border-color: #f3efe7;
 +
  }
 +
 +
#bodyContent p, .printfooter, .visualClear {
 +
    display:hidden;
 +
}
 +
 +
/*********************/
 +
/* Text STYLING */
 +
/*********************/
 +
 +
p, h1, h2, h3, h4, a, img {
 +
    color: #6F6F6F;
 +
    font-family: 'Handlee';
 +
    text-align:center;
 +
    margin:0;
 +
    border:0;
 +
   
 +
}
 +
 +
p {
 +
    padding-bottom:1em;
 +
}
 +
 +
h1 {
 +
 +
    text-decoration-line:none;
 +
    font-size:3.0em;
 +
}
 +
 +
h4 {
 +
 +
    text-decoration-line:none;
 +
    font-size:1.2em;
 +
}
 +
 +
p, a {
 +
    font-size: 1.5em;
 +
    text-align: justify;
 +
}
 +
 +
span {
 +
    text-align;justify;
 +
    font-size: 1em;
 +
    text-transform: capitalize;
 +
}
 +
 +
h2 {
 +
    font-size: 2.4em;
 +
    font-weight: bold;
 +
}
  
 
/*********************/
 
/*********************/
 
/*      PAGES      */
 
/*      PAGES      */
 
/********************/
 
/********************/
−
 
 
/* in this section the parts of the page are defined in space and background */
 
/* in this section the parts of the page are defined in space and background */
  
Line 21: Line 118:
 
     background-color: #ddd1b8;
 
     background-color: #ddd1b8;
 
     z-index: 5;
 
     z-index: 5;
 +
}
 +
 +
#headimg {
 +
    position: relative;
 +
    margin:0 auto;
 +
    border:0;
 +
    top:0;
 +
    padding:0;
 +
    width:100%;
 +
    height:78.5%;
 
}
 
}
  
 
#summarywrapper {
 
#summarywrapper {
 +
    top:0;
 
     position: relative;
 
     position: relative;
 
     border:0;
 
     border:0;
 
     display: block;
 
     display: block;
 +
    opacity:0.95;
 
     padding:0;
 
     padding:0;
 
     width:100%;
 
     width:100%;
−
     height:300%;
+
     height:auto;
 
     background-color: #f3efe7;
 
     background-color: #f3efe7;
 +
    overflow:hidden;
 
}
 
}
  
Line 36: Line 146:
 
     position: relative;
 
     position: relative;
 
     display: block;
 
     display: block;
−
     margin:0 auto;
+
     padding:5%;
−
     border:0;
+
     top:0;
−
    padding:0;
+
 
     width:100%;
 
     width:100%;
 
     height:100%;
 
     height:100%;
 
     opacity:0.95;
 
     opacity:0.95;
−
     background-color: #f3efe7;
+
     background-color: #f3efe7;
 
}
 
}
−
 
  
 
#footer {
 
#footer {
 +
    top:0;
 
     opacity:0.95;
 
     opacity:0.95;
 
     position:relative;
 
     position:relative;
 
     display: block;
 
     display: block;
−
     height:250px;
+
     height:240px;
 
     width:100%;
 
     width:100%;
 
     background-color: #f3efe7;
 
     background-color: #f3efe7;
Line 56: Line 165:
  
 
/*********************/
 
/*********************/
−
/*     Summary      */
+
/* Nav STYLING */
−
/********************/
+
/*********************/
  
−
.picture {
+
/* All the elements in the navigation bar are defined in this section */
 +
 
 +
#top_menu_under, #top_menu_14 {
 +
    opacity:0.8;
 +
}
 +
 
 +
h1.firstHeading {
 +
display:none;
 +
}
 +
 
 +
#logoiGEM {
 
     position:absolute;
 
     position:absolute;
−
     display:inline-block;
+
     display:inline-block;  
−
     height:20%;
+
     height:30px;
−
     width:20%;
+
     width:36px;
−
     overflow:hidden;
+
    left:2.5%;
 +
     top:0px;
 
}
 
}
  
−
.info {
+
#logoiGEM a{
−
  position:absolute;
+
    position:absolute;
−
   display:none;
+
    height:100%;
 +
    width:100%;
 +
    z-index:1;
 +
}
 +
 
 +
#logoKUL {
 +
    position:absolute;
 +
    display:inline-block;
 +
    height:30px;
 +
    right:2.5%;
 +
    top:0px;
 +
}
 +
 
 +
.nav-item {
 +
    position:relative;
 +
    display: inline-block;
 +
    height:100%;
 +
    background-color: transparent;
 +
    top:3px;
 +
    border-style: solid;
 +
    border: 0px solid transparent;
 +
    border-bottom: 5px solid transparent;    
 +
}
 +
 
 +
.nav-item a:link, a:visited { /* this is active when the link is visited or when it is active (i think ;) */
 +
    display: block;
 +
    width: 120px;
 +
    font-weight: bold;
 +
    color: #8b7a57;
 +
    background-color: #ddd1b8;
 +
    text-align: center;
 +
    padding-bottom: 1%;
 +
    text-decoration: none;
 +
    text-transform: uppercase;
 +
}
 +
 
 +
.nav-item:hover {  /* this is active when your mouse moves is over the item */
 +
    border-style: solid;
 +
    border-bottom: 5px solid #8b7a57;
 
}
 
}
  
 
/*********************/
 
/*********************/
−
/* subsections references */
+
/*       Head        */
 
/*********************/
 
/*********************/
  
 +
#topimg {
 +
    position:fixed;
 +
    z-index: 0;
 +
    width: 100%;
 +
    height:100%;
 +
    background: url(https://static.igem.org/mediawiki/2015/6/68/KULeuven2015Zebra_spots.png) no-repeat center center fixed;
 +
  -webkit-background-size: cover;
 +
  -moz-background-size: cover;
 +
  -o-background-size: cover;
 +
  background-size: cover;
 +
}
  
−
.subsectionswrapper {
+
#scrolldown {
 +
    position:relative;
 +
    width:5%;
 +
    display:block;
 +
    height:14%;
 +
    color: #FFFFFF;
 +
    z-index:1;
 +
 
 +
}
 +
 
 +
#scrolldown img {
 +
    position:relative;
 +
    height:100%;
 +
 
 +
}
 +
 
 +
#center {
 +
    width:60%;
 +
    display:inline-block;
 +
}
 +
 
 +
#pagetitle {
 +
    display:block;
 +
}
 +
 
 +
#logoiGEMKUL {  /*this is our logo*/ 
 +
    z-index:1;
 +
    position:relative;
 +
    top:10%;
 +
    text-align:left;
 +
    display: inline-block;
 +
    width:10%;
 +
    opacity: 0.95;
 +
    left:-5%;
 +
}
 +
 
 +
#summarylogos { 
 +
    z-index:1;
 +
    position:relative;
 +
    display:inline-block; 
 +
    opacity: 0.95;
 +
    right:-5%;
 +
}
 +
 
 +
#summarylogofacebook { 
 +
    display:inline-block;
 +
}
 +
 
 +
#summarylogotwitter { 
 +
    display:inline-block;
 +
}
 +
 
 +
#summarylogomail { 
 +
    display:inline-block;
 +
}
 +
/*********************/
 +
/*    Summary      */
 +
/********************/
 +
     
 +
.summary {
 
     position: relative;
 
     position: relative;
−
    display: block;
+
     margin: 5% 15%;
−
     margin:0 auto;
+
 
     border:0;
 
     border:0;
 +
    top:30%;
 
     padding:0;
 
     padding:0;
−
    opacity:0.9;
+
     width:70%;
−
     width:100%;
+
     display: block;
−
     height:80%;  
+
     background-color: #f3efe7;
−
     top:50%;
+
−
    -moz-transform:translateY(-50%);
+
−
    -ms-transform:translateY(-50%);
+
−
    -webkit-transform:translateY(-50%);
+
−
    transform:translateY(-50%);
+
−
     
+
 
}
 
}
  
−
.subsection {
+
#comingsoon {
−
     position: relative;
+
     position:telative;
−
     display: inline-block;
+
     font-size: 3.0em;
−
     width:12%;
+
    font-weight: bold;
−
     height:80%;
+
     color: #808080;
−
     opacity:1;
+
     text-align:center;
 +
     margin:0 0 5% 0;
 
}
 
}
  
−
.whitespace {
+
 
−
    position: relative;
+
/*********************/
−
     display: inline-block;
+
/* subsections references */
−
     width:2%;
+
/*********************/
−
     height:80%;
+
 
 +
.subsectionwrapper {
 +
     display:table;
 +
     width:70%;
 +
     margin:auto;
 
}
 
}
  
−
.subimg {
+
.subsection {
−
     position: absolute;
+
     display: table-cell;
−
     width:100%;
+
     width:18%;
−
     height:30%;  
+
     vertical-align:top;
 +
    wrap-text: normal;
 
}
 
}
  
−
.subtext {
+
.subimg, .subtext {
−
     position: absolute;
+
     display: table-row;
−
    top:30%;
+
−
    height:70%;
+
−
    width:80%;
+
−
    padding: 10%;
+
−
    background-color: #FFFFFF;
+
−
    color: #000000;
+
−
    font-family: 'Annie Use Your Telescope', cursive;
+
 
}
 
}
  
−
.readmorebutton {
+
.subtext p {
−
     position: absolute;
+
     margin:5% 0%;
−
    bottom: 5%;
+
−
    height:5%;
+
 
}
 
}
  
 +
.readmorebutton {
 +
    display: table-row;
 +
    text-align:left;
 +
    margin:5% 0%;
 +
}
  
  
Line 165: Line 389:
 
#footercenter {
 
#footercenter {
 
     position:absolute;
 
     position:absolute;
−
     height:60%;
+
     height:100%;
 
     display: inline;
 
     display: inline;
 
     left:35%;
 
     left:35%;
Line 176: Line 400:
 
     position:absolute;
 
     position:absolute;
 
     width:50%;
 
     width:50%;
−
     display: inline;
+
     display: block;
 
     left:15%;
 
     left:15%;
 
     bottom:50%;
 
     bottom:50%;
 +
    z-index:2;
 +
}
 +
 +
#bioscenter img{
 +
    position:absolute;
 +
    left:0;
 +
    bottom:0;
 
     z-index:2;
 
     z-index:2;
 
}
 
}
Line 184: Line 415:
 
#footerimg {
 
#footerimg {
 
     position:absolute;
 
     position:absolute;
−
     height:75%;
+
    width:100%;
−
     display: inline;
+
     height:20%;
 +
     display: block;
 
     left:0;
 
     left:0;
 
     right:0;
 
     right:0;
−
     bottom:0;
+
     bottom:-30px;
 
}
 
}
  
 
#footerimg img{
 
#footerimg img{
 
     position:absolute;
 
     position:absolute;
−
     bottom:-30px;
+
     bottom:0;
 
     left:0;
 
     left:0;
 
     opacity: 0.5;
 
     opacity: 0.5;

Revision as of 12:43, 19 July 2015