artworld/styles/style.css

/* work-sans-regular - latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/work-sans-v5-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Work Sans'), local('WorkSans-Regular'),
  url('fonts/work-sans-v5-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('fonts/work-sans-v5-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
  url('fonts/work-sans-v5-latin-regular.woff') format('woff'), /* Modern Browsers */
  url('fonts/work-sans-v5-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
  url('fonts/work-sans-v5-latin-regular.svg#WorkSans') format('svg'); /* Legacy iOS */
}


body{
  margin: 0px;
  overflow: hidden;
}

label {
  display: inline-block;
}
input{
  position: absolute;
  display: block;
  padding: 0px;
  margin: 0px;
}
select{
  position: absolute;
  display: block;
  padding: 0px;
  width: 170px;
  margin: 0px;
}

.eyeIcon{
  float:left;
  max-height:20px;
  max-width:20px;
  padding-right: 5px;
}
.markerIcon{
  float:left;
  max-height:20px;
  max-width:20px;
  padding-right: 5px;
}

.leaflet-container{
  font-size:14px  !important;
}
.leaflet-popup-content-wrapper{
  background: rgba(0,0,0,1) !important;
  padding: 0px  !important;
  text-align:center  !important;
  border-radius: 0px !important;
  box-shadow: 0 0 0 rgba(0,0,0,0) !important;
}
.leaflet-popup-content{
  color: white;
  margin: 6px !important;
  font-family: 'Work Sans';
}
.leaflet-popup-tip{
  display: none;
}

#overlay{
  position:absolute;
  min-width:50%;
  min-height:100%;
  width:60%;
  height:100%;
  left:50%;
  transform:translate(-50%, 0%);
  z-index: 404;
  padding: 0;
  margin: 0;
}
#overlayHeader{
  width:100%;
  max-width:100%;
  background-color:rgba(255,255,255,.75);
  height:60px;
}
#overlayTitle h2{
padding-left:20px;
padding-top:12px;
  font-family: 'Work Sans';
}

#overlayMenu{
  position: absolute;
  top:24px;
  right: 4px;
}
.overlayMenuIcon{
  width:40px;
  height:40px;
  padding:5px;
}
#overlayBody{
  width:100%;
  height:77%;
  background-color:white;
  border: 0;
}
#overlayFooter{
  height:3%;
  width:100%;
  font-family: 'Work Sans';
}
.networkButton{
  min-height:4vh;
  min-width:20%;
  max-width:20%;
  background-color:rgba(255,255,255,.6);
  transition: background-color .5s;
  color:black;
  float:left;
  text-align: center;
}
.networkButton:hover{
  background-color:rgba(127,127,127,.6);
  transition: background-color .5s;
}
#map {
  height:100vh;
  width:100vw;
}
#new {
  position:absolute;
  display: block;
  z-index: -1;
  font-family: 'Work Sans';
  color:rgba(0,0,0,.75);
  background-color:rgba(255,255,255,.75);
  padding:14px;
  margin:5px;
  border-radius: 3px;
  cursor: default;
  left:40px;
  top:61px;
  width:370px;
  height:202px;
}
#new p{
  padding:5px;
}
#newleft {
  height:100%;
  max-width:50%;
  float: left;
}
#newright {
  padding-left: 100px;
  height:100%;
  max-width:50%;
  float: left;
}

#newSubmit {
  left: 55px;
  top: 184px;
}

#globalmenu{
  left:-30px;
  bottom:10px ;
}
#mapmenu{
  left:10px;
  top: -10px;
}
#listmenu{
  left:-30px;
}


#liste{
  position:absolute;
  height: 100%;
  min-width: 200px;
  max-width: 200px;
  display: block;
  left: 0px;
  background-color: rgba(255,255,255,.75);
  z-index:401
}

.menu{
  position:absolute;
  display: block;
  z-index:401;
  font-family: 'Work Sans';
}
.menu ul{
  list-style-type:none;
}
.menu li{
  float:left;
  color:rgba(0,0,0,.75);
  background-color:rgba(255,255,255,.75);
  transition: color .2s;
  transition: background-color .2s;
  padding:5px;
  padding-left: 8px;
  padding-right: 8px;
  margin:5px;
  border-radius: 3px;
  cursor: default;
}
.menu li:hover{
  color:rgba(0,0,0,1);
  background-color:rgba(255,255,255,1);
  transition: color .2s;
  transition: background-color .2s;
}
.museum-marker { background-image: url('../img/gui/museum-icon.png'); }
.akademie-marker { background-image: url('../img/gui/akademie-icon.png'); }
.galerie-marker { background-image: url('../img/gui/galerie-icon.png'); }
.stiftung-marker { background-image: url('../img/gui/stiftung-icon.png'); }
.venue-marker { background-image: url('../img/gui/venue-icon.png'); }
.festival-marker { background-image: url('../img/gui/festival-icon.png'); }
.kunstler-marker { background-image: url('../img/gui/kunstler-icon.png'); }