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

 
(47 intermediate revisions by 2 users not shown)
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>
Line 24: Line 22:
 
     border:0;
 
     border:0;
 
     padding:0;
 
     padding:0;
−
     width:100%;
+
     margin:0;
−
     height:500px;  
+
     width:100%;  
 
}
 
}
  
Line 62: 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 143: Line 76:
 
   background-size: cover;
 
   background-size: cover;
 
}
 
}
 +
 +
#hiddenimg {
 +
    position:relative;
 +
    visibility:hidden;
 +
    width:100%;
 +
    top:0;
 +
    left:0;
 +
    display:block;
 +
}
 +
 +
#logowrapper {
 +
    display:block;
 +
    position:relative;
 +
    left:0;
 +
    width:100%;
 +
    background-color: #f3efe7;   
 +
}   
  
 
#scrolldown {
 
#scrolldown {
 
     position:relative;
 
     position:relative;
−
     width:5%;
+
     width:10%;
 
     display:block;
 
     display:block;
−
     height:14%;
+
     height:20%;
 
     color: #FFFFFF;  
 
     color: #FFFFFF;  
 
     z-index:1;  
 
     z-index:1;  
Line 157: Line 107:
 
     position:relative;
 
     position:relative;
 
     height:100%;
 
     height:100%;
−
 
 
}
 
}
  
Line 163: Line 112:
 
     position:relative;
 
     position:relative;
 
     width:60%;
 
     width:60%;
−
     top:750px;
+
     bottom:-20%;
 
     display:inline-block;
 
     display:inline-block;
 
     z-index:1;
 
     z-index:1;
Line 176: Line 125:
 
     z-index:1;
 
     z-index:1;
 
     position:relative;
 
     position:relative;
−
     top:725px;
+
     bottom:0;
 
     display: inline-block;
 
     display: inline-block;
 
     width:15%;  
 
     width:15%;  
 
     opacity: 0.95;
 
     opacity: 0.95;
 +
    background-color: #f3efe7;
 
}
 
}
  
Line 193: Line 143:
 
     opacity: 0.95;
 
     opacity: 0.95;
 
     right:0;
 
     right:0;
−
     top:775px;
+
     bottom:0;
 
     width:15%;
 
     width:15%;
 +
    background-color: #f3efe7;
 
}
 
}
  
Line 208: Line 159:
 
     display:inline-block;  
 
     display:inline-block;  
 
}
 
}
 +
 
/*********************/
 
/*********************/
 
/*    Summary      */
 
/*    Summary      */
Line 214: Line 166:
 
.summary {
 
.summary {
 
     position: relative;
 
     position: relative;
−
     margin: 10% 20% 5% auto;
+
     margin: 5% 20% 5% auto;
 
     border:0;
 
     border:0;
−
     top:30%;
+
     top:0;
 
     padding:0;
 
     padding:0;
 
     width:60%;
 
     width:60%;
Line 230: Line 182:
 
     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;
Line 244: Line 196:
 
.subsectionwrapper {
 
.subsectionwrapper {
 
     display:table;
 
     display:table;
−
     width:70%;
+
    table-layout: fixed;
 +
     width:90%;
 
     margin:auto;
 
     margin:auto;
 
}
 
}
  
−
.subsection {
+
.subimgrow, .subtextrow {
−
     display: table-cell;
+
     display: table-row;
−
     width:18%;
+
     width:15%;
 
     vertical-align:top;
 
     vertical-align:top;
 
     wrap-text: normal;
 
     wrap-text: normal;
 
     color: #808080;
 
     color: #808080;
 
     font-family: 'Handlee';
 
     font-family: 'Handlee';
 +
}
 +
 +
.whitespace {
 +
    display: table-cell;
 +
    width:20px;
 
}
 
}
  
 
.subimg, .subtext {
 
.subimg, .subtext {
−
     display: table-row;
+
     display: table-cell;
 
}
 
}
  
Line 266: Line 224:
  
 
.readmorebutton {
 
.readmorebutton {
−
     display: table-row;
+
     display: table-cell;
 
     text-align:left;
 
     text-align:left;
 
     margin:5% 0%;
 
     margin:5% 0%;
Line 291: Line 249:
 
     left:20%;
 
     left:20%;
 
     bottom:14%;
 
     bottom:14%;
 +
}
 +
 +
#krd {
 +
    position:absolute;
 +
    width:30%;
 +
    display: inline;
 +
    left:45%;
 +
    top:0%;
 
}
 
}
  

Latest revision as of 08:57, 7 August 2015