Difference between revisions of "Template:KU Leuven/main/css"

Line 1: Line 1:
 
<html>
 
<html>
−
 
−
<link href='http://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope' rel='stylesheet' type='text/css'>
 
  
 
<style>
 
<style>
−
 
−
 
 
/*********************/
 
/*********************/
 
/*      PAGES      */
 
/*      PAGES      */
Line 23: Line 19:
  
 
#headimg {
 
#headimg {
−
     position: relative;
+
     position:relative;
−
    margin:0 auto;
+
 
     border:0;
 
     border:0;
−
    top:0;
 
 
     padding:0;
 
     padding:0;
 
     width:100%;
 
     width:100%;
−
     height:78.5%;  
+
     height:530px;  
 
}
 
}
−
 
  
 
#summarywrapper {
 
#summarywrapper {
Line 41: Line 34:
 
     padding:0;
 
     padding:0;
 
     width:100%;
 
     width:100%;
−
     height:60%;
+
     height:auto;
 
     background-color: #f3efe7;
 
     background-color: #f3efe7;
 
     overflow:hidden;
 
     overflow:hidden;
Line 48: Line 41:
 
.subsections {
 
.subsections {
 
     position: relative;
 
     position: relative;
−
     display: block
+
     display: block;
−
    margin:0 auto;
+
     padding:5%;
−
     border:0;
+
     top:0;
−
     padding:0;
+
     width:90%;
−
     width:100%;
+
     height:auto;
−
     height:100%;
+
 
     opacity:0.95;
 
     opacity:0.95;
−
     background-color: #f3efe7;
+
     background-color: #f3efe7;
 
}
 
}
−
 
  
 
#footer {
 
#footer {
Line 69: Line 60:
 
}
 
}
  
 +
/*********************/
 +
/* Nav STYLING */
 +
/*********************/
 +
 +
/* 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;
 +
    display:inline-block;
 +
    height:30px;
 +
    width:36px;
 +
    left:2.5%;
 +
    top:0px;
 +
}
 +
 +
#logoiGEM a{
 +
    position:absolute;
 +
    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;
 +
}
  
 
/*********************/
 
/*********************/
Line 76: Line 132:
 
#topimg {
 
#topimg {
 
     position:fixed;
 
     position:fixed;
−
    top:0;
 
−
    left:0;
 
 
     z-index: 0;
 
     z-index: 0;
 
     width: 100%;
 
     width: 100%;
Line 89: Line 143:
  
 
#scrolldown {
 
#scrolldown {
−
     position:absolute;
+
     position:relative;
−
    left:0;
+
     width:10%;
−
    bottom:-21%;
+
     display:block;
−
     width:100%;
+
     height:20%;
−
     display: block;
+
−
     height:14%;
+
 
     color: #FFFFFF;  
 
     color: #FFFFFF;  
 
     z-index:1;  
 
     z-index:1;  
Line 101: Line 153:
  
 
#scrolldown img {
 
#scrolldown img {
−
     position:absolute;
+
     position:relative;
−
     height:80%;
+
     height:100%;
−
    top:15%;
+
 
−
    left:50%;
+
−
-moz-transform:translateX(-50%);
+
−
-ms-transform:translateX(-50%);
+
−
-webkit-transform:translateX(-50%);
+
−
transform:translateX(-50%);
+
 
}
 
}
  
−
#logoiGEMKUL {   /*this is our logo*/
+
#center {
−
     top:1.2%;  
+
     position:relative;
 +
    width:60%;
 +
    top:530px;
 +
    display:inline-block;
 
     z-index:1;
 
     z-index:1;
−
     position:absolute;
+
}
−
     margin: auto;
+
 
−
     left:1%;
+
#pagetitle {
−
     display: block;
+
     display:block;
−
     height:19%;  
+
 
 +
}
 +
 
 +
#logoiGEMKUL {  /*this is our logo*/ 
 +
     z-index:1;
 +
     position:relative;
 +
    top:485px;
 +
     display: inline-block;
 +
     width:15%;  
 
     opacity: 0.95;
 
     opacity: 0.95;
−
     bottom:-119%;
+
}
 +
 
 +
#logoiGEMKUL img{
 +
     width:80%;
 +
    left:10%;
 
}
 
}
  
 
#summarylogos {   
 
#summarylogos {   
−
    top:3.5%;   
 
 
     z-index:1;
 
     z-index:1;
−
     position:absolute;
+
     position:relative;
−
    margin: auto;
+
     display:inline-block;
−
    left:83.5%;
+
−
     display:inline-block;  
+
−
    height:7%;
+
 
     opacity: 0.95;
 
     opacity: 0.95;
−
     bottom:-115%;
+
     right:0;
 +
    top:540px;
 +
    width:15%;
 
}
 
}
  
Line 149: Line 209:
 
/*    Summary      */
 
/*    Summary      */
 
/********************/
 
/********************/
−
 
+
     
−
#pagetitle {
+
.summary {
−
     position: absolute;
+
     position: relative;
−
     top:0;
+
    margin: 200px 20% 5% auto;
−
     width: 100%;
+
    border:0;
−
     hight:10%;
+
     top:0;
−
     text-align:center;  
+
     padding:0;
−
     font-size:1.20em;
+
     width:60%;
−
}
+
     display: block;
−
 
+
     background-color: #f3efe7;
−
.summary text {
+
     color: #808080;
−
     position:absolute;
+
     font-family: 'Handlee';
−
     width:65%;
+
     font-size:1.2em;
−
     top: 30%;
+
 
}
 
}
  
 
#comingsoon {
 
#comingsoon {
−
     position:absolute;
+
     position:relative;
 
     font-size: 3.0em;
 
     font-size: 3.0em;
 
     font-weight: bold;
 
     font-weight: bold;
−
     color: #808080;
+
     color: #4A4A4A;
 
     font-family: 'Handlee';
 
     font-family: 'Handlee';
 
     text-align:center;
 
     text-align:center;
−
     margin:0;
+
     margin:5% 0;
 
     bottom:5%;
 
     bottom:5%;
 
}
 
}
  
−
.summary h2 {
+
p>a {
 +
    color: #FFFFFF;
 +
}
  
 +
 +
/*********************/
 +
/* subsections references */
 +
/*********************/
 +
 +
.subsectionwrapper {
 +
    display:table;
 +
    width:70%;
 +
    margin:auto;
 
}
 
}
  
−
.summary p {
+
.subimgrow, .subtextrow {
 +
    display: table-row;
 +
    width:15%;
 +
    vertical-align:top;
 +
    wrap-text: normal;
 +
    color: #808080;
 +
    font-family: 'Handlee';
 +
}
  
 +
.whitespace {
 +
    display: table-cell;
 +
    width:20px;
 
}
 
}
 +
 +
.subimg, .subtext {
 +
    display: table-cell;
 +
}
 +
 +
.subtext p {
 +
    margin:5% 0%;
 +
}
 +
 +
.readmorebutton {
 +
    display: table-cell;
 +
    text-align:left;
 +
    margin:5% 0%;
 +
}
 +
  
 
/*********************/
 
/*********************/
−
/* subsections references */
+
/* Footer */
 
/*********************/
 
/*********************/
  
 +
.sponsorsleft {
 +
    position:absolute;
 +
    height:60%;
 +
    width:35%;
 +
    display: inline;
 +
    left:0;
 +
    bottom:0;
 +
}
  
−
.subsectionswrapper {
+
#kuleuven {
−
     position: relative;
+
     position:absolute;
 +
    width:30%;
 +
    display: inline;
 +
    left:20%;
 +
    bottom:14%;
 +
}
 +
 
 +
#youreca {
 +
    position:absolute;
 +
    width:30%;
 +
    display: inline;
 +
    right:5%;
 +
    bottom:15%;
 +
}
 +
 
 +
#footercenter {
 +
    position:absolute;
 +
    height:100%;
 +
    display: inline;
 +
    left:35%;
 +
    right:35%;
 +
    bottom:0;
 +
}
 +
 
 +
 
 +
#bioscenter {
 +
    position:absolute;
 +
    width:50%;
 
     display: block;
 
     display: block;
−
     margin:0 auto;
+
     left:15%;
−
     border:0;
+
     bottom:50%;
−
     padding:0;
+
     z-index:2;
−
     opacity:0.9;
+
}
 +
 
 +
#bioscenter img{
 +
    position:absolute;
 +
    left:0;
 +
     bottom:0;
 +
    z-index:2;
 +
}
 +
 
 +
#footerimg {
 +
    position:absolute;
 
     width:100%;
 
     width:100%;
−
     height:80%;  
+
     height:20%;
−
     top:50%;
+
     display: block;
−
    -moz-transform:translateY(-50%);
+
    left:0;
−
    -ms-transform:translateY(-50%);
+
    right:0;
−
    -webkit-transform:translateY(-50%);
+
    bottom:-30px;
−
    transform:translateY(-50%);
+
−
     
+
 
}
 
}
  
−
.subsection {
+
#footerimg img{
−
     position: relative;
+
     position:absolute;
−
     display: inline-block;
+
     bottom:0;
−
     width:12%;
+
     left:0;
−
     height:80%;
+
     opacity: 0.5;
−
     opacity:1;
+
     z-index:1;
 +
 
 
}
 
}
  
−
.whitespace {
+
.sponsorsright {
−
     position: relative;
+
     position:absolute;
−
     display: inline-block;
+
     height:60%;
−
     width:2%;
+
     width:35%;
−
     height:80%;
+
     display: inline;
 +
    right:0;
 +
    bottom:0;
 
}
 
}
  
−
.subimg {
+
#medicine {
−
     position: absolute;
+
     position:absolute;
−
     width:100%;
+
     width:25%;
−
     height:30%;  
+
     display: inline;
 +
    right:20%;
 +
    bottom:0;
 
}
 
}
  
−
.subtext {
+
#solvay {
−
     position: absolute;
+
     position:absolute;
−
     top:30%;
+
     width:40%;
−
     height:70%;
+
     display: inline;
−
     width:80%;
+
     left:5%;
−
     padding: 10%;
+
     bottom:0;
−
    background-color: #FFFFFF;
+
−
    color: #000000;
+
−
    font-family: 'Annie Use Your Telescope', cursive;
+
 
}
 
}
  
−
.readmorebutton {
+
#fixer {
−
     position: absolute;
+
     position:absolute;
−
     bottom: 5%;
+
     height:30px;
−
     height:15%;
+
     width:100%;
−
     z-index:5;
+
     bottom:-30px;
 +
    background-color: #f3efe7;
 +
    opacity:0.95;
 
}
 
}
  

Revision as of 14:34, 20 July 2015