body{
  background-color: #e5e5e5;
  bottom:0;
  margin:0;
  max-height:100%;
  min-height:100%;
  text-align: center;
  top:0;
}
a:link{color:#333;text-decoration:underline;}
a:visited{color:#666;}
a:hover{color:#888;text-decoration:none;}
h4 {
  margin-top: 50px !important;
}
.copy {
  bottom:0;
  position:fixed;
  z-index:1;
  width:100%;
}
.copy > div {
  background-color:#888;
  display: table;
  margin:0 auto;
  opacity:0.6;
  width:100%;
}
.copy > div > div {
  font-family:ms sans serif;
  font-size:15px;
  line-height:20px;
  text-align:right;
}
.demo {
  left: 0;
  margin: 0 auto 0 auto;
  position: absolute; 
  right: 0;  
  text-align: center;
}
.demo > div:first-child {
  border-radius: 1%;
  border:5px solid #000;
  display: inline-flex;
}
.dims {
  display: table;
  margin-bottom: 20px !important;
  margin-top: 0 !important;
  padding:0px 15px 15px 15px;
}
.dims > div {
  display: table-row;
}
.dims > div > div {
  padding-bottom: 5px;
  padding-top: 5px;
  border-bottom: 2px solid #EEE;
  display: table-cell;
}
.dims > div > div:first-child {
  padding-right: 32px;
}
.header {
  display: table;
  height: 120px;
  width: 100%;
}
.navbar {
  background-color: #3F3E3C;
  display: flex;
  font-size: 0.9em;
  font-family: arial;
  padding: 8px 5px 3px 25px;
  text-align: left;
}
.navbar > div {
  padding-right: 20px;
  padding-left: 20px; ;
}
.plinth {
  display:table-cell;
  height:100%;
  padding-right:0px;
  white-space:nowrap;
  width:auto;
}
.plinth > div {
  height:100%;
  display:flex;
  flex-direction:column;
  width:100%;
}
.screen {
  background-color:#000;
  display: inline-block;
}
.screen > div {
  display:table;
}
.screen > div > div {
  display:table-cell;
  height:1px;
  width:1px;  
}
.socle {
  background-color:#858585;
  cursor:pointer;
  display:table-cell;
  height:100%;
  margin-bottom: 10px;
  text-align:center;
  vertical-align:middle;
  width:120px;
}
.socle > div {
  display:inline-block;
  font-family:monospace;
  height:97px;
  max-height:97px;
  min-height:97px;
  max-width:97px;
  min-width:97px;
  position:relative;
  width:97px;
  z-index:0;
}
.socle > div > div:first-child {
  background:#858585;
  height:97px;
  max-height:97px;
  min-height:97px;
  max-width:97px;
  min-width:97px;
  position:absolute;
  width:97px;
  z-index:2;
}
.socle > div > div:nth-child(2) {
  color:#222;
  font-size:35px;
  margin-left:5px;
  margin-top:29px;
  position:absolute;
  z-index:5
}
.socle > div > div:nth-child(3) {
  background:#bbb;
  height:49px;
  left:11px;
  max-height:49px;
  max-width:53px;
  min-height:49px;
  min-width:53px;
  position:absolute;
  top:29px;
  width:49px;
  z-index:3;
}
.socle > div > div:nth-child(4) {
  color: #333;
  font-size:26px;
  font-weight:bold;
  margin-left:17px;
  margin-top:38px;
  position:absolute;
  z-index:5;
}
.socle > div > div:last-child {
  background:#fff;
  height:23px;
  left:52px;
  max-height:23px;
  max-width:23px;
  min-height:23px;
  min-width:23px;
  opacity: 0.6;
  position:absolute;
  top:20px;
  width:23px;
  z-index:4;
}
.scrshot {
  display: inline-block;
  margin-top: 0px !important;
  text-align: center;
}
.scrshot > div > div {
  overflow: auto;
}
.tabselector {
  margin-top:25px !important;
}
.tabselector > div {
  cursor:pointer;
  display:inline;
  font-size: 0.8em;
  margin:2px;
  padding: 5px 10px 5px 10px;
  text-align:center;
  z-index:99;
}
.tabselector > div:hover {
  background-color:#9a9a9a;
  border-radius:3%;
}
.tabselector > div.active {
  border-bottom: 3px solid #444;
}
.tabselector > div.active:hover {
  background-color:transparent;
}
.tagline {
  font-family: monospace,verdana,cursive;
  font-size:2.0em;
  letter-spacing:2px;
  font-weight:bolder;
  background-color:#AEAEAE;
  display:flex;
  height:100%;
  text-align:center;
  width:100%;
}
.tagline > div {
  color:#444444;
  flex-grow:1;
  margin:auto;
  vertical-align:middle;
}
.texter{
  font-family: Arial;
  font-size: 1.2em;  
}
.texter > div, p, h5, .texter > h3, .texter > h4, .texter > hr {
  margin: 30px 7% 30px 7%;
}
.texter > img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.texter > div {
  margin-bottom: 0;
  margin-top: 0;
}
.texter > pre {
  background-color:#eee;
  font-size:14px;
  padding:5px;
  width:560px;
}
.view {
  background-color: #DADADA;
  box-shadow: 5px 10px 8px 10px #888888;
  color: #050A08;
  display: inline-block;
  margin: 0;
  padding-bottom: 100px;
  text-align: left;
  width: 800px;
}

@media screen and ( min-width: 128px ) and ( max-width: 479px ) {
  .socle {
    display: table-row;
  }
  .plinth {
    display: table-row;
  }
  .plinth > div {
    height: 100px;
  }
  .tagline {
    letter-spacing:0px;
    font-size:1.0em;
  }
  .navbar {
      padding: 5px;
      text-align: center;
  }
  .screen {
    padding: 0px 5px 0px 5px;
  }
  .zoom > div:first-child {
    display: block;
    padding-right: 28px;
    text-align: right;
  }

}

@media screen and ( min-width: 480px ) and ( max-width: 800px ) {
  .tagline {
    letter-spacing:1px;
    font-size:1.4em;
  }
}
@media screen and ( max-width: 800px ) {
  .view {
    box-shadow: none;
    display:unset;
    width:unset;
  }
  .demo {
    position: relative;
  }
  .texter > div, .texter > p, .texter > h5, .texter > h3, .texter > h4, .texter > pre {
    font-size: 0.9em;
    margin: 15px 3% 15px 3%;
  }
}


@media screen and ( min-width: 128px ) and ( max-width: 320px ) {
  .tagline {
    flex-direction: column;
  }
  .texter > div, .texter > p, .texter > h5, .texter > h3, .texter > h4, .texter > pre {
    font-size: 0.9em;
    margin: 15px 1% 15px 1%;
  }
}
@media screen and ( min-width: 128px ) and ( max-width: 380px ) {
  .zoom > div:first-child {
    display: none;
  }
  #zoomlvl {
    font-size: 10px;
    padding: 1px;
    width:30px;
  }
}