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

 
(278 intermediate revisions by 3 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>
 +
 +
.hidden {
 +
    display:none;
 +
}
  
 
/*********************/
 
/*********************/
−
/* General STYLING */
+
/*     PAGES      */
−
/*********************/
+
/********************/
 +
/* in this section the parts of the page are defined in space and background */
  
−
/* In this section general styling elements are specified*/
 
  
−
.center, #centernav{
+
#teamtable {
−
position:relative;
+
    position: relative;
−
        left:50%;
+
    display: block;
−
-moz-transform:translateX(-50%);
+
    width:100%;
−
-ms-transform:translateX(-50%);
+
    text-align:center;  
−
-webkit-transform:translateX(-50%);
+
    margin:0;
−
transform:translateX(-50%);
+
    padding:5% 0;
 +
    border:0;
 +
    background-color: #f3efe7;
 
}
 
}
  
 +
#teamtablem {
 +
    position: relative;
 +
    display: none;
 +
    width:100%; 
 +
    text-align:center;
 +
    margin:0;
 +
    padding:5% 0;
 +
    border:0;
 +
    background-color: #f3efe7;
 +
}
  
−
html,body{
+
.advisortableleft {
−
     border-color:transparent;
+
     position: relative;
−
     text-align: center;
+
    display: table;
−
 
+
    width:65%; 
 +
     text-align:center;  
 +
    margin: 2.5% 0 0 0;
 +
    left: 15.5%;
 +
    border:0;
 +
    background-color: #f3efe7;
 +
    box-shadow: 0px 0px 10px 10px #f3efe7;
 
}
 
}
  
−
#globalWrapper {  
+
.advisortableright {
−
     width: 100%;
+
     position: relative;
−
     border: 0px;
+
     display: table;
−
    background-color: transparent;
+
     width:65%;
−
    margin: 0px;
+
     text-align:center;  
−
    padding: 0px;
+
     margin: 2.5% 0 0 0;
−
        height: auto;
+
     left: 21.5%;
−
  }
+
     border:0;
−
 
+
−
#content, #bodyContent {   
+
−
     width: 100%;
+
−
     height: auto;
+
−
    border: 0px;
+
−
    background-color: transparent;
+
−
     margin: 0px;
+
−
     padding: 0px;
+
−
    overflow:hidden;
+
−
  }
+
−
 
+
−
 
+
−
html, body, .wrapper {   
+
−
    width: 100%;
+
−
     height: auto;
+
−
    margin:0 auto;
+
 
     background-color: #f3efe7;
 
     background-color: #f3efe7;
−
     border-color: #f3efe7;
+
     box-shadow: 0px 0px 10px 10px #f3efe7;
−
  }
+
−
 
+
−
#bodyContent p, .printfooter, .visualClear {
+
−
    display:hidden;
+
 
}
 
}
  
−
/*********************/
 
−
/* Text STYLING */
 
−
/*********************/
 
  
−
p, h1, h2, h3, h4, a, img {
+
/*********************/
−
     color: #6F6F6F;
+
/*    Members      */
−
     font-family: 'Handlee';
+
/********************/
 +
     
 +
.row {
 +
     position: relative;
 +
     display: table;
 +
    table-layout: fixed;
 +
    width:90%;
 
     text-align:center;
 
     text-align:center;
−
     margin:0;
+
     vertical-align: top;  
−
    border:0;
+
−
   
+
 
}
 
}
  
−
p {
+
.fourthrow, .fifthrow, .sixthrow {
−
     padding-bottom:1em;
+
     position: relative;
 +
    display: table;
 +
    table-layout: fixed;
 +
    width:90%;
 +
    left:5%;
 +
    text-align:center;
 +
    vertical-align: top;
 
}
 
}
  
−
h1 {
+
.general {
−
 
+
     display:table-cell;
−
     text-decoration-line:none;
+
     width:51%;
−
     font-size:3.0em;
+
 
}
 
}
  
−
h4 {
+
.general img {
−
 
+
     width:100%;
−
     text-decoration-line:none;
+
     border-radius: 50px 50px 50px 50px;
−
     font-size:1.2em;
+
 
}
 
}
  
−
p, a {
+
.bigpicture {
−
     font-size: 1.5em;
+
     position:relative;
−
     text-align: justify;
+
     display: table-cell;
 +
    width:51%;
 
}
 
}
  
−
span {
+
#teamtable .whiterow {
−
     text-align;justify;
+
     position: relative;
−
     font-size: 1em;
+
    display: table;
−
     text-transform: capitalize;
+
     width:80%;
 +
    height:10px;
 +
     text-align:center;
 +
    vertical-align: top;  
 
}
 
}
  
−
h2 {
+
.picture {
−
     font-size: 2.4em;
+
     position: relative;
−
     font-weight: bold;
+
     display: table-cell;
 +
    width:2.8%;
 
}
 
}
  
−
/*********************/
+
.picture:hover {
−
/*      PAGES      */
+
     cursor: pointer;
−
/********************/
+
−
/* 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 {
+
text p {
−
     position:relative;
+
     text-align:center;
−
     border:0;
+
     margin:0;
 
     padding:0;
 
     padding:0;
−
     width:100%;
+
     font-variant: small-caps;
−
    height:750px;  
+
 
}
 
}
  
 +
name {
 +
    font-weight:bold;
 +
    font-size:1.8em;
 +
    font-variant: small-caps;
 +
}
  
 +
function {
  
−
#summarywrapper {
 
−
    top:0;
 
−
    position: relative;
 
−
    border:0;
 
−
    display: block;
 
−
    opacity:0.95;
 
−
    padding:0;
 
−
    width:100%;
 
−
    height:auto;
 
−
    background-color: #f3efe7;
 
−
    overflow:hidden;
 
 
}
 
}
  
−
.subsections {
+
#leftrow {
 
     position: relative;
 
     position: relative;
−
     display: block;
+
     display: table-cell;
−
     padding:5%;
+
     vertical-align:top;
−
    top:0;
+
−
    width:90%;
+
−
    height:auto;
+
−
    opacity:0.95;
+
−
    background-color: #f3efe7;
+
 
}
 
}
  
−
#footer {
+
#rightrow {
−
    top:0;
+
     position: relative;
−
    opacity:0.95;
+
     display: table-cell;
−
     position:relative;
+
     vertical-align:top;
−
     display: block;
+
−
     height:240px;
+
−
    width:100%;
+
−
    background-color: #f3efe7;
+
 
}
 
}
  
−
/*********************/
 
−
/* Nav STYLING */
 
−
/*********************/
 
  
−
/* All the elements in the navigation bar are defined in this section */
+
.space {
−
 
+
    position: relative;
−
#top_menu_under, #top_menu_14 {
+
    display:table-cell;
−
     opacity:0.8;
+
     width:1.5%;  
 
}
 
}
  
−
h1.firstHeading {
+
.spacerow {
−
display:none;
+
    position: relative;
 +
    display:block;
 +
    height:10px;  
 
}
 
}
  
−
#logoiGEM {
+
.startspace {
−
     position:absolute;
+
     position: relative;
−
     display:inline-block;
+
     display:table-cell;
−
    height:30px;
+
     width:5%;  
−
     width:36px;
+
−
    left:2.5%;
+
−
    top:0px;
+
 
}
 
}
  
−
#logoiGEM a{
+
.endspace {
−
     position:absolute;
+
     position: relative;
−
     height:100%;
+
     display:table-cell;
−
     width:100%;
+
     width:3%;  
−
    z-index:1;
+
 
}
 
}
  
−
#logoKUL {
+
.middlespace {
−
     position:absolute;
+
     position: relative;
−
     display:inline-block;  
+
     display:table-cell;
−
     height:30px;
+
     width:2%;  
−
    right:2.5%;
+
−
    top:0px;
+
 
}
 
}
  
−
.nav-item {  
+
#jasper, #laetitia, #laura, #laurens {
−
     position:relative;
+
     position: relative;
−
     display: inline-block;
+
     display:block;
−
     height:100%;
+
     width:50%;
−
    background-color: transparent;
+
     top:5%;
−
     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 ;) */
+
#teamtablem #jasper, #teamtablem #laetitia, #teamtablem #laura, #teamtablem #laurens {
−
     display: block;
+
     position: relative;
−
     width: 120px;
+
     display: table-cell;
−
    font-weight: bold;
+
     width:2.8%;
−
     color: #8b7a57;
+
     top:0%;
−
     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 */
+
.picture img {
−
     border-style: solid;
+
     border-radius: 50%;
−
    border-bottom: 5px solid #8b7a57;
+
−
}
+
−
 
+
−
/*********************/
+
−
/*      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;
 
 
}
 
}
  
−
#scrolldown {
+
.bigpicture {
 
     position:relative;
 
     position:relative;
−
    width:5%;
+
     display: table-cell;
−
     display:block;
+
     width:17%;
−
     height:14%;
+
−
    color: #FFFFFF;
+
−
    z-index:1;
+
−
 
+
 
}
 
}
  
−
#scrolldown img {
+
.bigpicturem {
 
     position:relative;
 
     position:relative;
−
     height:100%;
+
     display: table-cell;
−
 
+
    width:10%;
 
}
 
}
  
−
#center {
+
.bigpicture img {
−
     position:relative;
+
     border-radius: 50px 0% 0% 50px;
−
    width:60%;
+
−
    top:750px;
+
−
    display:inline-block;
+
−
    color:#808080;
+
 
}
 
}
  
−
#pagetitle {  
+
.bigpicturem img {
−
     display:block;
+
     border-radius: 50px 0% 0% 50px;
−
    z-index:2;
+
 
}
 
}
  
−
#logoiGEMKUL {   /*this is our logo*/ 
+
.info {
−
    z-index:1;
+
 
     position:relative;
 
     position:relative;
−
     top:725px;
+
     display:table-cell;
−
     text-align:right;
+
     width:17%;
−
     display: inline-block;
+
     vertical-align:top;
−
     width:15%;
+
     padding:1%;
−
    opacity: 0.95;
+
 
}
 
}
  
−
#summarylogos {  
+
.infom{
−
    z-index:1;
+
 
     position:relative;
 
     position:relative;
−
     display:inline-block;
+
     display:table-cell;
−
     opacity: 0.95;
+
     width:33%;
−
     right:0;
+
     vertical-align:top;
−
    top:725px;
+
     padding:1%;
−
     width:15%;
+
 
}
 
}
  
−
#summarylogofacebook {  
+
.info p{
−
     display:inline-block;  
+
     text-align:left;
 
}
 
}
  
−
#summarylogotwitter {  
+
.info img{
−
     display:inline-block;  
+
     position:absolute;
 +
    width:100%;
 +
    visibility:hidden;
 
}
 
}
  
−
#summarylogomail {  
+
.infom p{
−
     display:inline-block;  
+
     text-align:left;
 
}
 
}
−
/*********************/
+
 
−
/*    Summary      */
+
.infom img{
−
/********************/
+
     position:absolute;
−
     
+
     width:100%;
−
.summary {
+
     visibility:hidden;
−
     position: relative;
+
−
    margin: 10% 20% 5% auto;
+
−
    border:0;
+
−
    top:30%;
+
−
    padding:0;
+
−
     width:60%;
+
−
     display: block;
+
−
    background-color: #f3efe7;
+
 
}
 
}
  
−
#comingsoon {
+
.cartoon {
−
     position:telative;
+
     position:relative;
−
     font-size: 3.0em;
+
     display:table-cell;
−
    font-weight: bold;
+
     width:17%;
−
     color: #808080;
+
     vertical-align:top;
−
     text-align:center;
+
     padding:1%;
−
     margin:0 0 5% 0;
+
 
}
 
}
  
 +
.cartoon p {
 +
    text-align:justify;
 +
}
 +
 +
.cartoon img {
 +
    border-radius: 0% 20px 20px 0%;
 +
}
  
 
/*********************/
 
/*********************/
−
/* subsections references */
+
/* Mentors and Advisors */
 
/*********************/
 
/*********************/
  
−
.subsectionwrapper {
+
.advisorleft {
−
     display:table;
+
     position:relative;
−
     width:70%;
+
     display: table-cell;
−
     margin:auto;
+
     width:25%;
 
}
 
}
  
−
.subsection {
+
.advisorleft img {
−
     display: table-cell;
+
     border-radius: 50px 0% 0% 50px;
−
    width:18%;
+
−
    vertical-align:top;
+
−
    wrap-text: normal;
+
 
}
 
}
  
−
.subimg, .subtext {
+
.advisortableright .row {
−
    display: table-row;
+
left:20%;
 
}
 
}
  
−
.subtext p {
+
.infoadvisor {
−
     margin:5% 0%;
+
     position:relative;
 +
    display:table-cell;
 +
    width:50%;
 +
    vertical-align:top;
 +
    padding:1%;
 
}
 
}
  
−
.readmorebutton {
+
.infoadvisor p{
−
    display: table-row;
+
 
     text-align:left;
 
     text-align:left;
−
    margin:5% 0%;
 
 
}
 
}
  
 +
.spaceadv {
 +
    position: relative;
 +
    display:table-cell;
 +
    width:2.5%; 
 +
}
  
−
/*********************/
+
.advisorright {
−
/* Footer */
+
    position:relative;
−
/*********************/
+
    display:table-cell;
 +
    width:25%;
  
−
.sponsorsleft {
 
−
    position:absolute;
 
−
    height:60%;
 
−
    width:35%;
 
−
    display: inline;
 
−
    left:0;
 
−
    bottom:0;
 
 
}
 
}
  
−
#kuleuven {
+
.advisorright img {
−
     position:absolute;
+
     border-radius: 0% 20px 20px 0%;
−
    width:30%;
+
−
    display: inline;
+
−
    left:20%;
+
−
    bottom:14%;
+
 
}
 
}
  
−
#youreca {
+
.summarytext1, .summarytext2, .summarytext3 {
−
     position:absolute;
+
     position: relative;
−
     width:30%;
+
    border:0;
−
     display: inline;
+
    top:0;
−
     right:5%;
+
    left:0;
−
     bottom:15%;
+
    padding:10% 2% auto;
 +
    margin:0;
 +
     width:100%;
 +
    z-index:2;
 +
     display: block;
 +
     background-color: #f3efe7;
 +
     box-shadow: 0px 0px 10px 10px #f3efe7;
 +
    height:auto;
 
}
 
}
  
−
#footercenter {
+
.part {
−
     position:absolute;
+
     position:relative;  
−
     height:100%;
+
     height:90%;
−
     display: inline;
+
     width:65%;
−
     left:35%;
+
     padding:5% 0%;
−
     right:35%;
+
     left:17.5%;
−
     bottom:0;
+
     top:20px;
 +
    align:center;
 
}
 
}
  
  
−
#bioscenter {
+
@media screen and (max-width: 1000px) {
−
    position:absolute;
+
.part {
−
    width:50%;
+
  width:95%;
−
    display: block;
+
  left:2.5%;
−
    left:15%;
+
−
    bottom:50%;
+
−
    z-index:2;
+
 
}
 
}
  
−
#bioscenter img{
+
.advisortableright, .advisortableleft{
−
    position:absolute;
+
  width:95%;
−
    left:0;
+
  left:2.5%;
−
     bottom:0;
+
     margin: 5% 0 0 0;
−
    z-index:2;
+
 
}
 
}
  
−
#footerimg {
+
.row {
−
    position:absolute;
+
width:95%;
−
    width:100%;
+
left:2.5%;
−
    height:20%;
+
−
    display: block;
+
−
    left:0;
+
−
    right:0;
+
−
    bottom:-30px;
+
 
}
 
}
  
−
#footerimg img{
+
.advisortableright .row {
−
    position:absolute;
+
left:5%;
−
    bottom:0;
+
−
    left:0;
+
−
    opacity: 0.5;
+
−
    z-index:1;
+
−
 
+
 
}
 
}
  
−
.sponsorsright {
+
.info {
−
    position:absolute;
+
width:55%;
−
    height:60%;
+
−
    width:35%;
+
−
    display: inline;
+
−
    right:0;
+
−
    bottom:0;
+
 
}
 
}
  
−
#medicine {
+
#teamtable {
−
    position:absolute;
+
display:none;
−
    width:25%;
+
−
    display: inline;
+
−
    right:20%;
+
−
    bottom:0;
+
 
}
 
}
  
−
#solvay {
+
#teamtablem {
−
    position:absolute;
+
display:table;
−
    width:40%;
+
−
    display: inline;
+
−
    left:5%;
+
−
    bottom:0;
+
 
}
 
}
  
−
#fixer {
 
−
    position:absolute;
 
−
    height:30px;
 
−
    width:100%;
 
−
    bottom:-30px;
 
−
    background-color: #f3efe7;
 
−
    opacity:0.95;
 
 
}
 
}
−
 
 
</style>
 
</style>
  
 
</html>
 
</html>

Latest revision as of 02:44, 18 September 2015