html, body{
    height: 100%;
}

body{
   font-family: 'Lato', sans-serif;
   font-size: 16px;
   color: #FFF;
   width: 100%;
   -webkit-font-smoothing: antialiased;
   /* background-color: #1c1a6f; */
}

#anchor{
  left: 0px;
  bottom: 0px;
  position: absolute;
}

li.ps{
  margin: 10px;
  padding: 10px;
  width: 195px;
  height: 54px;
  background-color: rgba(0,0,0,0.4);
  position:relative;
  /*float:left;*/
  border-left: 1px solid #717171;
}

li.ps:before{
    width: 10px;
    height: 64px;
    top: 10px;
    right: -10px;
    content: '';
    background-color: rgba(0,0,0,0.4);
    position: absolute;
    /* opacity: 0.1; */
}

li.ps:after{
  width: 0px;
  height: 0px;
  content: '';
  position: absolute;
  top: 0;
  right: -10px;
  border-top: 5px solid rgba(0,0,0,0);
  border-right: 5px solid rgba(0,0,0,0);
  border-left: 5px solid rgba(0,0,0,0.4);
  border-bottom: 5px solid rgba(0,0,0,0.4);
  /* -webkit-background-clip: padding-box; */
}
.fade-in{
  -webkit-animation: fadein 1s;
}
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.fade-out{
  -webkit-animation: fadeout 1s;
}
@-webkit-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}
.name{
  position: absolute;
  /* font-weight: bold; */
  font-family: 'Quicksand';
}
.pid{
  position: absolute;
  /* font-weight: bold; */
  font-family: 'Quicksand';
  bottom: 11px;
}
.cpu{
  position: absolute;
  font-size: 65px;
  bottom: 5px;
  right: 0px;
}
.p{
  font-size: 20px;
  font-family: 'Quicksand';
}