style.css

body {
  margin:0;
  font-family: "Arial";
}
.separator {
  position:relative;
  top:7vh;
  height:12vh;
  border-right: 1px solid grey;
  display:inline;
  float:left;
  padding:0;
}
#sidebar {
  position: fixed;
  background-color: #00549d;
  top: 0;
  left: 0;
  bottom: 0;
  width:15vw;
}
#sidebarlinks {
  position:relative;
  top: 10vh;
  line-height: 7vh;
  font-size: 2.5vh;
  font-family: 'Arial';
}
#sidebarlinks ul {
  list-style: none;
  padding:1vw;
}
#sidebarlinks li::before {
  content: "• ";
  color: #ffffff;
}
#sidebar a:link,
#sidebar a:visited{
  text-decoration:none;
  color:#FFFFFF;
}
.keyword {
  color:#b42d2f;
}
.variable {
  color:#1b9076;
}
.entity {
  color:#2a4687;
}
.uri {
  color:#fb6d10;
}
tr>th {
  background-color : #0077c2;
  font-size : 2vh;
  line-height : 2vh;
  text-align: center;
  color : white;
  margin:2vmax;
  padding:0.5vmax;
}
tr>td {
  font-size : 2vh;
  line-height : 2vh;
  text-align:left;
}
code {
  font-size: 2vh;
}
#header {
  top:0;
  width:100%;
  position:sticky;
  margin:0;
  color: #ffffff;
  background-color: #1B80CF;
  height:8vh;
  z-index:1;
}
#headersearch {
  position:fixed;
  right:1vw;
  display:inline;
  margin-top:1vh;
  height:7vh;
}
#headersearchtext {
  right:9vw;
  height:5vh;
}
#headersearchbutton {
  color:#005cb2;
  text-transform:none;
  width:8vw;
  height:5vh;
}
#logo {
  position:sticky;
  top:2vh;
  margin-left:2vw;
  color: #ffffff;
  font-size : 4vh;
  width:10vw;
  display:inline;
  height:8vh;
}
#logo>a:link, #logo> a:visited {
  top:5vh;
  color: #ffffff;
  text-decoration: none;
}
#content {
  top:10vh;
}
#searchresults {
  font-size : 2vh;
  line-height : 3vh;
}
#title {
  margin-left:15vw;
  margin-right:15vw;
}
h1>a:link,h1> a:visited {
  top:3vh;
  color: #ffffff;
}
#footertext {
  padding-top:2vh;
  text-align:center;
  margin-left:15vw;
  margin-right:10vw;
  border-top: 1px solid grey;
}
.section {
  margin-bottom:2vh;
  padding:1vh;
  margin-left:15vw;
  margin-right:15vw;
  border-top: 1px solid grey;
}
p,ul {
  font-size : 2.5vh;
  line-height : 4vh;
}
h1 > a {
  text-decoration: none;
}
h2 {
  color:#002f6c ;
  font-size : 3vh;
  clear:both;
}
h3 {
  color: #002f6c;
  font-size : 3vh;
  clear:both;
}
h4 {
  color: #002f6c;
  font-size : 2vh;
  clear:both;
}
a:link, a:visited {
  color: #1B80CF;
}
.property,.language,.datatype {
  background-color : #0077c2;
  color : white;
  line-height:3vh;
}
.property > a, .language > a, .datatype > a{
  color : white;
}
.property > a:visited, .language >  a:visited, .datatype >a:visited {
  color : white;
}
img {
  width : 50vw;
  height : 50vh;
}
@media screen and (min-width: 480px) {
  .property,.language,.datatype  {
    font-size : 2vh;
    line-height : 2vh;
    padding : 0.5vh;
    width:3vw;
    margin : 0.8vh;
    overflow: unset;
  }
}
@media screen and (max-width: 480px){
  .section {
    padding:1vh;
    margin-left:1vw;
    margin-right:1vw;
  }
  #sidebar {
    display:none;
  }
}
@media screen and (max-width: 480px) and (orientation : portrait){
  .property,.language,.datatype  {
    font-size : 2vh;
    line-height : 2vh;
    padding : 0.5vh;
    width:2vw;
    margin : 0.8vh;
    overflow: unset;
  }
  #logo {
    font-size:3.0vh;
  }
  #header {
    bottom:0;
  }
  #headersearch {
    position:fixed;
    right:1vw;
    margin-top:1vh;
    height:7vh;
  }
  #headersearchtext {
    right:3vw;
    height:5vh;
    width:30vw;
    font-size:1.5vh;
  }
  #headersearchbutton {
    color:#005cb2;
    text-transform:none;
    width:15vw;
    height:6vh;
    font-size:1.5vh;
 }
}
@media screen and (max-width: 640px) and (orientation : landscape){
  #sidebarlinks {
    font-size:2vw;
  }
  #sidebarlinks >ul{
    padding:1vw;
  }
  #header {
    height:10vh;
  }
  #headersearchbutton {
    width:16vw;
    height:9vh;
    font-size:2.5vh;
  }

}
@media screen and (min-width: 480px) and (orientation : portrait){
  #sidebar {
    width:20vw;
  }
  #sidebarlinks ul{
    padding:1vw;
  }
  #sidebarlinks li{
    font-size:1.5vh;
  }
  #header {
    height:8vh;
  }
  #headersearchbutton {
    width:16vw;
    height:7vh;
    font-size:2vh;
  }
  .section {
    margin-left:20vw;
  }
}