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

 
(380 intermediate revisions by 5 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>
−
/*********************/
 
−
/* 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:white;
 
−
    text-align: center;
 
−
 
−
}
 
−
 
−
#globalWrapper {   
 
−
    width: 100%;
 
−
    height: 100%;
 
−
    border: 0px;
 
−
    background-color: transparent;
 
−
    margin: 0px;
 
−
    padding: 0px;
 
−
   
 
−
  }
 
−
 
 
−
#content, #bodyContent {   
 
−
    width: 100%;
 
−
    height: 100%;
 
−
    border: 0px;
 
−
    background-color: transparent;
 
−
    margin: 0px;
 
−
    padding: 0px;
 
−
   
 
−
  }
 
−
 
−
#bodyContent p, .printfooter, .visualClear {
 
−
    display:hidden;
 
−
}
 
−
 
 
−
 
−
html, body, .wrapper {   
 
−
    width: 100%;
 
−
    height: 100%;
 
−
    margin:0 auto;
 
−
    background-color: #f3efe7;
 
−
    border-color: #f3efe7;
 
−
  }
 
−
 
−
 
−
/*********************/
 
−
/* Text STYLING */
 
−
/*********************/
 
−
 
−
p, h1, h2, h3, a, img {
 
−
    color: #808080;
 
−
    font-family: 'Annie Use Your Telescope';
 
−
    margin:0;
 
−
    padding:0;
 
−
    border:0;
 
−
 
−
}
 
−
 
−
p, a, span {
 
−
    font-size: 1.3em;
 
−
    text-align: justify;
 
−
}
 
−
 
−
span {
 
−
    text-transform: capitalize;
 
−
}
 
−
 
−
h2 {
 
−
    font-size: 2.2em;
 
−
    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 */
  
−
.main-nav {
+
 
−
    position:fixed;
+
−
    width:100%;
+
−
    height: 30px;
+
−
    top: 17px;
+
−
    left:0;
+
−
    display: block;
+
−
    background-color: #ddd1b8;
+
−
    z-index: 5;
+
−
}
+
  
 
#headimg {
 
#headimg {
−
     position: relative;
+
     position:relative;
−
    margin:0 auto;
+
 
     border:0;
 
     border:0;
−
    top:0;
 
 
     padding:0;
 
     padding:0;
−
     width:100%;
+
     margin:0;
−
     height:78.5%;  
+
     width:100%;  
 
}
 
}
  
 
#summarywrapper {
 
#summarywrapper {
 +
    top:0;
 
     position: relative;
 
     position: relative;
 
     border:0;
 
     border:0;
Line 121: Line 25:
 
     padding:0;
 
     padding:0;
 
     width:100%;
 
     width:100%;
−
     height:150%;
+
     height:auto;
 
     background-color: #f3efe7;
 
     background-color: #f3efe7;
 
     overflow:hidden;
 
     overflow:hidden;
Line 129: Line 33:
 
     position: relative;
 
     position: relative;
 
     display: block;
 
     display: block;
−
     margin:0 auto;
+
     top:0;
−
     border:0;
+
     width:90%;
−
     padding:0;
+
     height:auto;
−
     width:100%;
+
     padding:0% 5% 0% 5%;
−
    height:100%;
+
 
     opacity:0.95;
 
     opacity:0.95;
−
     background-color: #f3efe7;
+
     background-color: #f3efe7; 
 +
    z-index:2;
 
}
 
}
  
 +
/*********************/
 +
/*      Head        */
 +
/*********************/
  
−
#footer {
+
#topimg {
−
     opacity:0.95;
+
     position:fixed;
 +
    z-index: 0;
 +
    width: 100%;
 +
    height:100%;
 +
   
 +
}
 +
 
 +
#hiddenimg {
 
     position:relative;
 
     position:relative;
−
     display: block;
+
     visibility:hidden;
−
    height:250px;
+
 
     width:100%;
 
     width:100%;
−
     background-color: #f3efe7;
+
     top:0;
 +
    left:0;
 +
    display:block;
 
}
 
}
  
−
/*********************/
+
#logowrapper {
−
/* Nav STYLING */
+
    display:block;
−
/*********************/
+
    position:relative;
 +
    left:10px;
 +
    width:100%;
 +
    background-color: #f3efe7;   
 +
}   
  
−
/* All the elements in the navigation bar are defined in this section */
+
#scrolldown {
 +
    position:relative;
 +
    height:40px;
 +
    width:40px;
 +
    display:block;
 +
    color: #FFFFFF;
 +
    z-index:1; 
 +
}
  
−
#top_menu_under, #top_menu_14 {
+
#scrolldown img {
−
     opacity:0.8;
+
     position:relative;
 +
    height:100%;
 
}
 
}
  
−
#top_menu_inside {
+
#center {
−
left:15%;
+
    position:relative;
 +
    width:60%;
 +
    bottom:-20%;
 +
    display:inline-block;
 +
    z-index:1;
 
}
 
}
  
−
#logoiGEM {
+
#pagetitle {  
−
    position:absolute;
+
     display:block;
−
     display:inline-block;  
+
 
−
    height:30px;
+
−
    width:36px;
+
−
    left:2.5%;
+
−
    top:0px;
+
 
}
 
}
  
−
#logoiGEM a{
+
#logoiGEMKUL {   /*this is our logo*/ 
−
    position:absolute;
+
−
    height:100%;
+
−
    width:100%;
+
 
     z-index:1;
 
     z-index:1;
 +
    position:relative;
 +
    top:-20px;
 +
    left: -4.5%;
 +
    display: inline-block;
 +
    width:15%;
 +
    opacity: 0.95;
 +
    background-color: #f3efe7;
 
}
 
}
  
−
#logoKUL {
+
#logoiGEMKUL img{  
−
     position:absolute;
+
     width:80%;
−
     display:inline-block;
+
     left:5%;
−
    height:30px;
+
−
    right:2.5%;
+
−
    top:0px;
+
 
}
 
}
  
−
.nav-item {  
+
#summarylogos {  
 +
    z-index:1;
 
     position:relative;
 
     position:relative;
−
     display: inline-block;
+
     display:inline-block;
−
     height:100%;
+
     opacity: 0.95;
−
     background-color: transparent;
+
     right:-10px;
−
     top:3px;
+
     top:-20px;
−
     border-style: solid;
+
     bottom:0;
−
     border: 0px solid transparent;
+
     width:17%;
−
     border-bottom: 5px solid transparent;  
+
     background-color: #f3efe7;
 
}
 
}
  
−
.nav-item a:link, a:visited { /* this is active when the link is visited or when it is active (i think ;) */
+
#summarylogofacebook {  
−
     display: block;
+
     display:inline-block;
−
     width: 120px;
+
     position:relative;  
−
     font-weight: bold;
+
     width:15%;
−
    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 */
+
#summarylogotwitter {  
−
     border-style: solid;
+
     display:inline-block;
−
     border-bottom: 5px solid #8b7a57;
+
    position:relative;
 +
     width:15%;
 
}
 
}
  
−
 
+
#summarylogomail {  
−
/*********************/
+
     display:inline-block;  
−
/*      Head        */
+
     position:relative;
−
/*********************/
+
     width:15%;
−
 
+
−
#topimg {
+
−
     position:fixed;
+
−
     top:0;
+
−
    left:0;
+
−
    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;
+
 
}
 
}
−
 
  
 
/*********************/
 
/*********************/
 
/*    Summary      */
 
/*    Summary      */
 
/********************/
 
/********************/
−
 
+
     
−
 
+
.summary {
−
#scrolldown {
+
     position: relative;
−
     position:absolute;
+
     margin: 5% 20% 0% auto;
−
     margin: 0 auto;
+
    border:0;
 
     top:0;
 
     top:0;
−
     left:0;
+
     padding:0;
−
     width:100%;
+
     width:60%;
 
     display: block;
 
     display: block;
−
     height:8%;
+
     background-color: #f3efe7;
−
     color: #FFFFFF;      
+
     color: #808080;
 +
    font-family: 'Handlee';
 +
    font-size:1.2em;
 
}
 
}
  
−
 
+
#more1 {  
−
#scrolldown img {
+
     display:inline-block;  
−
     position:absolute;
+
−
    height:80%;
+
−
    top:15%;
+
−
    left:50%;
+
−
-moz-transform:translateX(-50%);
+
−
-ms-transform:translateX(-50%);
+
−
-webkit-transform:translateX(-50%);
+
−
transform:translateX(-50%);
+
 
}
 
}
  
−
 
+
#more2 {  
−
.summaryimg {
+
     display:inline-block;  
−
     position:absolute;
+
−
    width:100%;
+
−
    opacity:0.5;
+
−
    left:50%;
+
−
   
+
 
}
 
}
  
−
#logoiGEMKUL {  /*this is our logo*/
+
#more3 {   
−
     top:0.4%;   
+
     display:inline-block;  
−
    z-index:1;
+
−
    position:absolute;
+
−
    margin: auto;
+
−
    left:1%;
+
−
    display: block;
+
−
    height:9.35%;
+
−
    opacity: 0.95;
+
 
}
 
}
  
−
#summarylogos {   
+
#more4 {   
−
    top:2.5%;   
+
−
    z-index:1;
+
−
    position:absolute;
+
−
    margin: auto;
+
−
    left:83%;
+
 
     display:inline-block;  
 
     display:inline-block;  
−
    height:9.35%;
 
−
    opacity: 0.95;
 
 
}
 
}
  
−
#summarylogofacebook {   
+
#more5 {   
 
     display:inline-block;  
 
     display:inline-block;  
 
}
 
}
  
−
#summarylogotwitter {  
+
#comingsoon {
−
     display:inline-block;  
+
    position:relative;
 +
     display:inline-block; 
 +
    font-size: 3.0em;
 +
    font-weight: bold;
 +
    color: #4A4A4A;
 +
    background-color:#f3efe7;
 +
    font-family: 'Handlee';
 +
    text-align:center;
 +
    padding:5% 0;
 +
    bottom:5%;
 +
    opacity:0.95;
 
}
 
}
  
−
#summarylogomail {  
+
/*********************/
−
     display:inline-block;  
+
/* subsections references */
−
     left:2%;
+
/*********************/
 +
 
 +
.subtext {
 +
     position:relative;
 +
     margin: 5% 5px 5% 0;
 
}
 
}
  
−
.summary text {
+
.subsectionwrapper {
−
     position:absolute;
+
     display:table; 
 +
    table-layout: fixed;
 
     width:70%;
 
     width:70%;
−
     top: 11%;
+
     margin:auto;
 
}
 
}
−
.summary h2 {
 
  
 +
.subtextrow {
 +
    display: table-row;
 +
    width:15%;
 +
    vertical-align:top;
 +
    wrap-text: normal;
 +
    color: #808080;
 +
    background: #ddd1b8;
 +
    border-radius: 30px 30px 0px 0px;
 
}
 
}
  
−
.summary p {
+
.subimgrowm {
 +
    display: table-row;
 +
    width:15%;
 +
    vertical-align:top;
 +
    wrap-text: normal;
 +
    color: #808080;
 +
}
  
 +
.subimgreadmore {
 +
    display: table-row;
 +
    width:15%;
 +
    vertical-align:top;
 +
    wrap-text: normal;
 +
    color: #808080;
 +
    background-color: #ddd1b8;
 
}
 
}
  
−
/*********************/
+
.subimgrow {
−
/* subsections references */
+
    display: table-row;
−
/*********************/
+
    width:15%;
 +
    background: linear-gradient(#f3efe7,#ddd1b8);
 +
    wrap-text: normal;
 +
}
 +
 
 +
.subimgrowm {
 +
    display:none;
 +
}
  
  
−
.subsectionswrapper {
+
.whitespace {
−
    position: relative;
+
     display: table-cell;
−
     display: block;
+
     background-color: #f3efe7;
−
     margin:0 auto;
+
     width:5%;
−
    border:0;
+
−
    padding:0;
+
−
    opacity:0.9;
+
−
     width:100%;
+
−
    height:80%;
+
−
    top:50%;
+
−
    -moz-transform:translateY(-50%);
+
−
    -ms-transform:translateY(-50%);
+
−
    -webkit-transform:translateY(-50%);
+
−
    transform:translateY(-50%);
+
−
     
+
 
}
 
}
  
−
.subsection {
+
.subtext {
−
     position: relative;
+
     background-color: #ddd1b8;
−
     display: inline-block;
+
     border-radius: 20px 20px 0px 0px;
−
    width:12%;
+
−
    height:80%;
+
−
    opacity:1;
+
 
}
 
}
  
−
.whitespace {
+
.subtext h2 {
−
     position: relative;
+
     font-size: 2.0em;
−
    display: inline-block;
+
−
    width:2%;
+
−
    height:80%;
+
 
}
 
}
  
−
.subimg {
+
.subtext p {
−
     position: absolute;
+
     margin:5% 5% 5% 5%;
−
     width:100%;
+
     text-align: justify;
−
     height:30%;  
+
     font-size: 1.0em;
 
}
 
}
  
−
.subtext {
+
.subtext a:hover {
−
     position: absolute;
+
     text-decoration:none;
−
    top:30%;
+
−
    height:70%;
+
−
    width:80%;
+
−
    padding: 10%;
+
−
    background-color: #FFFFFF;
+
−
    color: #000000;
+
−
    font-family: 'Annie Use Your Telescope', cursive;
+
 
}
 
}
  
 
.readmorebutton {
 
.readmorebutton {
−
     position: absolute;
+
     display: table-cell;
−
     bottom: 5%;
+
     text-align:left;
−
     height:5%;
+
     margin:5% 0%;
 
}
 
}
  
 +
@media screen and (max-width: 1000px) {
 +
 +
.summary {
 +
    margin: 5% 5% 0% auto;
 +
    border:0;
 +
    top:0;
 +
    padding:0;
 +
    width:90%;
 +
}
  
  
 
/*********************/
 
/*********************/
−
/* Footer */
+
/* subsections references */
 
/*********************/
 
/*********************/
  
−
.sponsorsleft {
+
.subsectionwrapper {
−
     position:absolute;
+
     display:table;
−
     height:60%;
+
     table-layout: fixed;
−
     width:35%;
+
     width:100%;
−
     display: inline;
+
     margin:auto;
−
    left:0;
+
−
    bottom:0;
+
 
}
 
}
  
−
#kuleuven {
+
.subtextrow, .subimgrow, .subimgreadmore {
−
    position:absolute;
+
     display:none;
−
    width:30%;
+
−
     display: inline;
+
−
    left:20%;
+
−
    bottom:14%;
+
 
}
 
}
  
−
#youreca {
+
 
−
     position:absolute;
+
.subimgrowm  {
−
     width:30%;
+
     display: table-row;
−
     display: inline;
+
     width:15%;
−
     right:5%;
+
     wrap-text: normal;
−
    bottom:15%;
+
     color: #808080;
 
}
 
}
  
−
#footercenter {
+
.subtextm a {
−
     position:absolute;
+
     margin: 5%;
−
    height:60%;
+
−
    display: inline;
+
−
    left:35%;
+
−
    right:35%;
+
−
    bottom:0;
+
 
}
 
}
  
−
 
+
.subimg {
−
#bioscenter {
+
     display: table-cell;
−
     position:absolute;
+
     width:50px;
−
     width:50%;
+
     min-height:50px;
−
    display: inline;
+
−
    left:15%;
+
−
    bottom:50%;
+
−
     z-index:2;
+
 
}
 
}
  
−
#footerimg {
+
.subtext {
−
     position:absolute;
+
     position:relative;
−
    height:75%;
+
     display: table-cell;
−
     display: inline;
+
     width:80%;
−
     left:0;
+
     vertical-align:middle;
−
     right:0;
+
     background-color:transparent;
−
     bottom:0;
+
 
}
 
}
  
−
#footerimg img{
 
−
    position:absolute;
 
−
    bottom:-30px;
 
−
    left:0;
 
−
    opacity: 0.5;
 
−
    z-index:1;
 
  
−
}
 
  
−
.sponsorsright {
+
.whitespace {
−
     position:absolute;
+
     display: table-cell;
−
    height:60%;
+
     width:5%;
−
     width:35%;ar
+
−
    display: inline;
+
−
    right:0;
+
−
    bottom:0;
+
 
}
 
}
  
−
#medicine {
 
−
    position:absolute;
 
−
    width:25%;
 
−
    display: inline;
 
−
    right:20%;
 
−
    bottom:0;
 
−
}
 
  
−
#solvay {
+
.subtext a {
−
     position:absolute;
+
     position:relative;
−
     width:40%;
+
     margin: 5% 5px 5% 0;
−
    display: inline;
+
−
    left:5%;
+
−
    bottom:0;
+
 
}
 
}
  
−
#fixer {
+
 
−
    position:absolute;
+
.subtextm a:hover {
−
     height:30px;
+
     text-decoration:none;
−
    width:100%;
+
−
    bottom:-30px;
+
−
    background-color: #f3efe7;
+
−
    opacity:0.95;
+
 
}
 
}
  
−
/************/
 
−
/* LINKS */
 
−
/***********/
 
  
−
a:link {
 
−
 
 
 
}
 
}
  
−
 
+
#eppendorf, #bioke, #kuleuven, #lrd, #youreca, #sigma, #egilab, #kolo, #thermofisher, #solvay, #medicine, #bioscenter, #imec, #genzyme, #gips, #regensys, #gimv, #machery, #vwr, .logosmall{
−
a:visited {
+
     opacity: 0.4;
−
      
+
 
}
 
}
  
−
a:hover {
+
#eppendorf:hover, #bioke:hover, #kuleuven:hover, #lrd:hover, #youreca:hover, #sigma:hover, #egilab:hover, #kolo:hover, #thermofisher:hover, #solvay:hover, #medicine:hover, #bioscenter:hover, #imec:hover, #genzyme:hover, #gips:hover, #regensys:hover, #gimv:hover, #machery:hover, #vwr:hover, .logosmall:hover {
−
      
+
     opacity: 1;
 
}
 
}
  
−
a:active {
 
−
 
 
−
 
−
}
 
  
 
</style>
 
</style>
  
 
</html>
 
</html>

Latest revision as of 16:32, 10 September 2015