body{
  background-image: url("../imgs/main_bg.jpeg");
  background-size: cover;
}

#hpMain{
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

#hpHeadMenu{
  position: absolute;
  width: 100%;
  height: 3%;
  border-bottom: 1px solid black;
  top: 0;
  left: 0;
  background-color: lightgrey;
}

#hpHeadMenuMain{
  position: absolute;
  border-right: 1px solid darkgray;
  height: 100%;
  width: 10%;

}

#hpHeadMenuMain span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

#hpHeadMenuMain:hover{
  position: absolute;
  border-right: 1px solid darkgray;
  height: 100%;
  width: 10%;
  background: linear-gradient(to bottom, rgb(135,224,253) 0%,rgb(83,203,241) 71%,rgb(5,171,224) 100%);
}

#hpHeadMenuMainDropDown{
  position: absolute;
  top: 3%;
  border: 1px solid black;
  width: 15%;
  height: 50%;
  background-color: white;
  z-index: 1000;
}

.hpHeadMenuMainDropDownContent{
  position: absolute;
  width: 100%;
  border-bottom: 1px solid darkgray;
}

.hpHeadMenuMainDropDownContent:hover{
  width: 99.8%;
  border: 1px solid blue;
  background-color: lightblue;
}

#hpHeadMenuMainDropDownContentFileManager{
  position: absolute;
  height: 10%;
}

#hpHeadMenuMainDropDownContentAbout{
  height: 10%;
  top: 10%;
}

.hpHeadMenuMainDropDownContentSpan{
  position: absolute;
  top: 50%;
  left: 2%;
  transform: translateY(-50%);
}

.hpHeadMenuMainDropDownContentImg{
  width: 7%;
}

#hpHeadMenueSide{
  position: absolute;
  right: 0;
  width: 25%;
  height: 100%;
}

#desktopWrapper{
  position: absolute;
  height: 100%;
  border-left: 1px solid darkgray;
  width: 99%;
}

.desk{
  border-right: 1px solid darkgray;
  background-color: gray;
}

#desk1{
  position: absolute;
  width: 10%;
  height: 100%;
  left: 0.2%;
}

#desk2{
  position: absolute;
  width: 10%;
  height: 100%;
  left: 10.6%;
}

#desk3{
  position: absolute;
  width: 10%;
  height: 100%;
  left: 21%;
}

#desk4{
  position: absolute;
  width: 10%;
  height: 100%;
  left: 31.4%;
}

#clockDiv{
  position: absolute;
  left: 42%;
  width: 15%;
  border-right: 1px solid darkgray;
  height: 100%;
}

#clockDiv span{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

#symbols{
  position: absolute;
  height: 100%;
  left: 58%;
  background-color: yellow;
  width: 18%;
}

#userName{
  position: absolute;
  left: 76.6%;
  height: 100%;
  text-align: center;
  width: 23.4%;
}

#userName span{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

#userName:hover{
  position: absolute;
  left: 76.6%;
  height: 100%;
  text-align: center;
  width: 23.4%;
  background: linear-gradient(to bottom, rgb(135,224,253) 0%,rgb(83,203,241) 71%,rgb(5,171,224) 100%);
}

#fileBrowserWrapper{
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  border: 2px solid black;
}

#fileBrowserBody{
  overflow-y: auto;
}

.windowTopLine{
  position: absolute;
  width: 100%;
  background-color: #00003a;
  color: white;
  height: 3%;
}

.windowImg{
  position: absolute;
  top: 50%;
  width: 10%;
  height: 100%;
  left: 0;
  transform: translateY(-50%);
}

.windowImg img{
  position: absolute;
  width: 13%;
  top: 45%;
  left: 0;
  transform: translateY(-50%);
}

.windowText{
  position: absolute;
  right: 50%;
  top: 50%;
  transform: translateY(-50%) translateX(50%);
  font-weight: bold;
}

.windowClose{
  position: absolute;
  right: 0.5%;
  top: 50%;
  transform: translateY(-50%);
  font-weight: bold;
}

.windowBody{
  position: absolute;
  top: 10%;
  height: 90%;
  width: 100%;
  background-color: white; 
}

#navigationLine{
  position: absolute;
  top: 3%;
  height: 7%;
  width: 100%;
  background-color: lightgray;
}

#navigationLineSymbols{
  position: absolute;
  left: 0;
  width: 20%;
  height: 100%;
}

#navigationAddressLine{
  position: absolute;
  top: 10%;
  left: 20.5%;
  height: 80%;
  width: 79%;
  background-color: white;
}

#navigationAddressLine img{
  position: absolute;
  height: 100%;
  top: 50%;
  transform: translateY(-50%);
  align: right;
}

#navigationAddressLine span{
  position: absolute;
  top: 50%;
  height: 100%;
  left: 3.5%;
  transform: translateY(-20%);
}

.folderWindowBody{
  position: absolute;
  width: 64px;
  left: 50%;
  transform: translateX(-50%);
}

.folderTextWindowBody{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
}

.fileWindowBody{
  position: absolute;
  width: 64px;
  left: 50%;
  transform: translateX(-50%);
}

.fileTextWindowBody{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
}

.fileListing{
  overflow-y: auto;
}

.fileListing img{
  width: 10%;
  vertical-align: middle;
}

#loginWindow{
  position: absolute;
  width: 35%;
  height: 25%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  background-color: lightgray;
  border-radius: 2%;
}

#loginAvatar{
  position: absolute;
  width: 30%;
  top: 2%;
  left: 2%;
}

#clogin{
  position: absolute;
  top: 80%;
  left: 5%;
  width: 23%;
}

#login{
  position: absolute;
  right: 5%;
  top: 80%;
  width: 23%;
}

#username{
  position: absolute;
  right: 5%;
  width: 55%;
  height: 15%;
  top: 20%;
  text-align: center;
}

#passwd{
  position: absolute;
  right: 5%;
  width: 55%;
  height: 15%;
  top: 50%;
  text-align: center;
}

#userMenue{
  position: absolute;
  top: 3%;
  right: 0%;
}

#fileDivWrapper{
  position: absolute;
  top: 8%;
  left: 50%;
  width: 40%;
  height: 80%;
  transform: translateX(-50%);
  background-color: lightgray;
  border: 2px solid black;
}

#fileDivBody{
  position: absolute;
  top: 3%;
  height: 96.8%;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  overflow-y: auto;
}

#fileDivBody img{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

boob{
  display: none;
}

.video{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

#fileDivWrapper.audioPlayer{
  width: 300px;
  height: 43px;
}

#fileDivWrapper.audioPlayer .windowTopLine{
  height: 16px;
}

#fileDivWrapper.audioPlayer audio{
  position: absolute;
  top: 14px;
  z-index: 12;
}

.audioPlayer .windowClose{
  z-index: 99278934;
}