Difference between revisions of "Template:Wageningen UR/OverviewCSS"

 
(37 intermediate revisions by 2 users not shown)
Line 2: Line 2:
 
<style>
 
<style>
  
−
p {
+
p {  
−
  font-size:1rem !important;
+
   text-align:left!important;
−
   text-align:center !important;
+
 
}
 
}
  
 +
.Overview {
 +
    display:table;
 +
}
  
 
.Overview-Top {
 
.Overview-Top {
 
     text-align:center !important;
 
     text-align:center !important;
 
     width:100%;
 
     width:100%;
−
     margin-top:2rem;
+
     margin-top:0rem;
−
     margin-bottom:2rem;
+
     margin-bottom:2rem;
 +
    padding-left:2rem;
 +
    padding-right:2rem;
 
}
 
}
  
  
 
.Overview-Left-Arrow {
 
.Overview-Left-Arrow {
−
     width:10%;
+
    padding-top:1.75rem;
 +
     width:15%;
 
     float:left;
 
     float:left;
 
     margin:0;
 
     margin:0;
 +
    padding-top:2.5rem;
 +
    padding-left:1rem;
 
}
 
}
  
−
.Overview-Left-Arrow img {  
+
.Overview-Left-Arrow a {
−
     padding-left:1rem;
+
     position:relative;
 
     width:100%;
 
     width:100%;
 +
    height:100%;
 +
    display:block;
 +
}
 +
 +
.Overview-Left-Arrow img {
 +
    width:100%;
 +
    margin:0;   
 
}
 
}
  
Line 33: Line 47:
  
 
.Overview-Center {
 
.Overview-Center {
−
width:80%;
+
width:70%;
 
float:left;
 
float:left;
 
margin:0;
 
margin:0;
 
}
 
}
 +
 +
Overview-Center h1 {
 +
    margin-top:0rem;
 +
    }
 +
 +
  
 
.Overview-Right-Arrow {
 
.Overview-Right-Arrow {
−
     width:10%;
+
    padding-top:1.75rem;
−
float:right;
+
     width:15%;
−
margin:0;     
+
    float:right;
 +
    margin:0;
 +
     padding-top:2.5rem;
 +
    padding-left:1rem;
 +
}
 +
 
 +
.Overview-Right-Arrow a {
 +
    position:relative;
 +
    width:100%;
 +
    height:100%;
 +
    display:block;
 
}
 
}
  
  
 
.Overview-Right-Arrow img {
 
.Overview-Right-Arrow img {
−
    padding-right:1rem;
 
 
     width:100%;
 
     width:100%;
 +
    margin:0rem;
 
}
 
}
  
 
.Overview-Right-Arrow a img:hover {
 
.Overview-Right-Arrow a img:hover {
 
     background-color:#66bc47;
 
     background-color:#66bc47;
 +
}
 +
 +
.Overviewbox-Left {
 +
    width:50%;
 +
margin-top: 4px;
 +
margin-bottom: 4px;
 +
font-size: 1.0rem;
 +
    float: left;   
 +
}
 +
 +
.Overviewbox-Right {
 +
    width:50%;
 +
margin-top: 4px;
 +
margin-bottom: 4px;
 +
font-size: 1.0rem;
 +
    float: right; 
 +
 +
}
 +
 +
.Overviewbox {
 +
    width:100%;
 +
margin: 0 auto;
 +
    text-align: center;
 +
    padding:2%;
 +
}
 +
 +
.overview-figure {
 +
    width:100%;
 +
    margin:auto;
 +
}
 +
 +
.Overviewbox:hover {
 +
    -moz-transform: scale(1.05);
 +
    -webkit-transform: scale(1.05);
 +
    -o-transform: scale(1.05);
 +
    transform: scale(1.05); 
 +
}
 +
 +
 +
 +
 +
/*Mobile devices*/   
 +
    @media screen and (max-width: 860px) {
 +
    .Overview-Top {
 +
      margin-top:0;
 +
      margin-bottom:0;
 +
      padding-left:0;
 +
      padding-right:0;
 +
  }
 +
 +
  .Overview-Desc h1 {
 +
      font-size:20px;
 +
  }
 +
 
 +
  .Overview-Left-Arrow img {
 +
      padding-left:4px;
 +
  }   
 +
 +
 +
  .Overview-Right-Arrow img {
 +
      padding-right:4px;
 +
  }
 +
 
}
 
}
  
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 16:34, 1 November 2017