.computer {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transform: scaleX(0.99) scaleY(0.99);
    transition: visibility 0s linear 0.05s, opacity 0.05s 0s, transform 0.05s;
    font-family: sans-serif;
}
.computer-content {
    position: relative;
    top: 20%;
    left: 35%;
    width:540px;
    background:#C0C0C0;
    border-width:1px;
    border-color:#FFFFFF #808080 #808080 #FFFFFF;
    border-style:solid;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    padding:1px;
}


.computer-window{
  background-color:#c0c0c0;
}
.computer-content{
  float: left;
}
.show-computer {
    opacity: 1;
    visibility: visible;
    transform: scaleX(1.0) scaleY(1.0);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

.recycling {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transform: scaleX(0.99) scaleY(0.99);
    transition: visibility 0s linear 0.05s, opacity 0.05s 0s, transform 0.05s;
    font-family: sans-serif;
}
.recycling-content {
    position: relative;
    top: 20%;
    left: 35%;
    width:540px;
    background:#C0C0C0;
    border-width:1px;
    border-color:#FFFFFF #808080 #808080 #FFFFFF;
    border-style:solid;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    padding:1px;
}

.recycling-window{
  background-color:#c0c0c0;
}
.recycling-content{
  float: left;
}
.show-recycling {
    opacity: 1;
    visibility: visible;
    transform: scaleX(1.0) scaleY(1.0);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

@media only screen and (max-width: 50rem) {
    h1 {
        font-size: 1.5rem;
    }
    .recycling-content .computer-content {
        width: calc(100% - 5rem);
    }
}


.close-button {
  /*position:absolute;
  right:3px;
  top:3px;*/
  margin:2px 2px 2px 0;
  float:right;
  width:14px;
  height:13.5px;
  background:#C0C0C0;
  border-width:1px;
  border-color:#FFFFFF #808080 #808080 #FFFFFF;
  padding:0;
  font-size:9px;
  font-weight:bold;
  font-family:Tahoma;
  text-align:center;
  focus:none;
}
.close-button:hover {
    background-color: darkgray;
}
.close-buttonr:hover {
    background-color: darkgray;
}
div.title{
    height:18px;
    width:100%;
    background:#000080;
    color:#FFF;
}
img.title{
  float:left;
}
p.title{
  margin:2px 0 0 1px;
  float:left;
  font-family:Tahoma;
  font-weight:bold;
  font-size:11px;
}
div.icon {
  padding:16px 8px 16px 8px;
  height:100%;
  padding: 8px;
  display:inline-block;
}

.container {
  border: 2px solid;
  border-bottom-color: #535353;
  border-right-color: #535353;
  border-left-color: #dbdbdb;
  border-top-color: #dbdbdb;
  background-color: #bfbfbf;
  max-width: 300px;
  font-size: 13px;
  padding: 2px;
}
ul.toolbar {
    list-style: none;
    padding: 2px 0;
    margin: 0;
}
    li {
      display: inline-block;
      padding: 0 5px;
}
  .container-inner {
    border: 2px solid;
    border-bottom-color: #c7c7c7;
    border-right-color: #c7c7c7;
    border-left-color: #808080;
    border-top-color: #808080;
    background-color: #fff;
  }

.statusbar {
  background-color: #c0c0c0;
  padding-left: 1px;
}
.statusbar .left, .right {
    border: 1px solid;
    border-color: #888 #dadada #dadada #888;
    display: inline-block;
    position: relative;
    padding: 0px 5px;
    font-size: 11px;
  }
.statusbar .left {
    width: 32%;
  }
.statusbar .right {
    width: 57%;
  }