#monitor{

  margin:auto;
  position:relative;
  width:auto;
  border:1px solid rgba(0,0,0,.1);
  display: inline-block;

}
#monitor .screen
{
  margin:auto;
  width:100%;
  background: transparent url('http://www.terminally-incoherent.com/blog/wp-content/uploads/2010/02/maketitle.jpg');
  background-size:cover;
  background-color: rgba(0,0,0,.2);
}

#monitor .scan
{
  width: 85%;
    left: 7.5%;
  height:1%;
  background-color:#002c8e;
  position:absolute;
  z-index:9999;
   -moz-animation: scan 2s infinite;
  -webkit-animation: scan 2s infinite;
  animation: scan 2s infinite;
   -webkit-animation-direction: alternate-reverse;
  box-shadow:0px 0px 30px rgba(255,204,102,.5);
  
  
}

@-webkit-keyframes scan {
  0%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(396px);
    transform: translateY(396px);
  }
}

#div1 {
display: inline-block;
    position: absolute;
    top: 4.5%;
    left: 2.5%;
  width: 95%;
    height: 90%;

  background:
    linear-gradient(to right, blue 5px, transparent 4px) 0 0,
    linear-gradient(to right, red 5px, transparent 4px) 0 100%,
    linear-gradient(to left, blue 5px, transparent 4px) 100% 0,
    linear-gradient(to left, red 5px, transparent 4px) 100% 100%,
    linear-gradient(to bottom, blue 5px, transparent 4px) 0 0,
    linear-gradient(to bottom, red 5px, transparent 4px) 100% 0,
    linear-gradient(to top, blue 5px, transparent 4px) 0 100%,
    linear-gradient(to top, red 5px, transparent 4px) 100% 100%;

  background-repeat: no-repeat;
  background-size: 25px 25px;
}