@charset "utf-8";
* {
   margin: 0px;
   padding: 0px;
}
#player{
  background-image: url('images/player.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 3px outset #787378;
	background-color:#aaaaaa;
	position:fixed;
}
#playercap{
	background-color:#aaaaaa;
	color:#001040;
	padding:5px;
}
#mediaimage,#mediaplayer, player.rotate0 #mediaplayer{
  position: fixed;
  transform-origin: top left;  /* IE 10+, Firefox, etc. */
  -webkit-transform-origin: top left;  /* Chrome */
  -ms-transform-origin: top left;  /* IE 9 */
}
#player.rotate90 #mediaplayer {
  transform-origin: top left;  /* IE 10+, Firefox, etc. */
  -webkit-transform-origin: top left;  /* Chrome */
  -ms-transform-origin: top left;  /* IE 9 */
  transform: rotate(90deg) translateY(-100%) scale(0.75, 0.75);
  -webkit-transform: rotate(90deg) translateY(-100%) scale(0.75, 0.75);
  -ms-transform: rotate(90deg) translateY(-100%) scale(0.75, 0.75);
}
#player.rotate180 #mediaplayer {
  transform-origin: top left;  /* IE 10+, Firefox, etc. */
  -webkit-transform-origin: top left;  /* Chrome */
  -ms-transform-origin: top left;  /* IE 9 */
  transform: rotate(180deg) translate(-100%, -100%);
  -webkit-transform: rotate(180deg) translate(-100%, -100%);
  -ms-transform: rotate(180deg) translateX(-100%, -100%);
}
#player.rotate270 #mediaplayer {
  transform-origin: top left;  /* IE 10+, Firefox, etc. */
  -webkit-transform-origin: top left;  /* Chrome */
  -ms-transform-origin: top left;  /* IE 9 */
  transform: rotate(270deg) translateX(-100%) scale(0.75, 0.75);
  -webkit-transform: rotate(270deg) translateX(-100%) scale(0.75, 0.75);
  -ms-transform: rotate(270deg) translateX(-100%) scale(0.75, 0.75);
}
#headTable{
	position:fixed;
	background-color:#aaaaaa;
	padding:8px;
	top:10px;
}
#caption{
	position:fixed;
	top:28px;
}
#msg{
	position:fixed;
	top:100px;
	left:820px;
}
html { 
  background: url(images/background.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin-top:20px;
}
body {
/*  background: #eee; */
  background-color: transparent;
  font-family: 'times new roman', serif;
  line-height: 30px;
}
h2, * > h2 {
  font-family: 'times new roman', serif;
  color: #aaa;
  font-size: 30px;
  line-height: 40px;
  font-style: italic;
  font-weight: 200;
  margin: 40px;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7);
}
h3{
  margin-top:20px;
  font-family: 'times new roman', serif;
  color: #aaa;
  font-style: italic;
}
li.active, * > li.active, h4.active, td.active{
  font-family: 'times new roman', serif;
  color: #88888;
  font-style: italic;
}
li.inactive, * > li.inactive, h4.inactive, td.inactive{
  font-family: 'times new roman', serif;
  color: #bbbbbb;
  font-style: italic;
}
.box {
  background: #686859;
  background-color: transparent;
  color: #f0f0e1;
  font-weight:160;
  border-radius: 2px;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
  margin: 30px 5%;
  padding: 5%;
}
#playerbg {
  background: #686859;
  background-color: transparent;
  color: #000040;
  font-weight:160;
  border-radius: 2px;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
  margin: 30px 5%;
  padding: 5%;
}
@media (min-width: 544px) {
  .box {
/*    margin: 40px auto; */
    max-width: 1000px;
    padding: 40px;
  }
}
.directory-list ul {
  margin-left: 10px;
  padding-left: 20px;
  border-left: 1px dashed #ddd;
}
.directory-list li {
  list-style: none;
  color: #242415;
  font-size: 17px;
  font-style: italic;
  font-weight: normal;
}
.directory-list a {
  border-bottom: 1px solid transparent;
  color: #242415;
  text-decoration: none;
  transition: all 0.2s ease;
}
.directory-list a:hover {
  border-color: #eee;
  color: #000;
}
.directory-list .folder,
.directory-list .folder > a {
  color: #777;
  font-weight: bold;
}
.directory-list li:before {
  margin-right: 10px;
  content: '';
  height: 20px;
  vertical-align: middle;
  width: 20px;
  background-repeat: no-repeat;
  display: inline-block;
  /* file icon by default */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='lightgrey' d='M85.714,42.857V87.5c0,1.487-0.521,2.752-1.562,3.794c-1.042,1.041-2.308,1.562-3.795,1.562H19.643 c-1.488,0-2.753-0.521-3.794-1.562c-1.042-1.042-1.562-2.307-1.562-3.794v-75c0-1.487,0.521-2.752,1.562-3.794 c1.041-1.041,2.306-1.562,3.794-1.562H50V37.5c0,1.488,0.521,2.753,1.562,3.795s2.307,1.562,3.795,1.562H85.714z M85.546,35.714 H57.143V7.311c3.05,0.558,5.505,1.767,7.366,3.627l17.41,17.411C83.78,30.209,84.989,32.665,85.546,35.714z' /></svg>");
  background-position: center 2px;
  background-size: 60% auto;
}
.directory-list li.folder:before {
  /* folder icon if folder class is specified 
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='lightblue' d='M96.429,37.5v39.286c0,3.423-1.228,6.361-3.684,8.817c-2.455,2.455-5.395,3.683-8.816,3.683H16.071 c-3.423,0-6.362-1.228-8.817-3.683c-2.456-2.456-3.683-5.395-3.683-8.817V23.214c0-3.422,1.228-6.362,3.683-8.817 c2.455-2.456,5.394-3.683,8.817-3.683h17.857c3.422,0,6.362,1.228,8.817,3.683c2.455,2.455,3.683,5.395,3.683,8.817V25h37.5 c3.422,0,6.361,1.228,8.816,3.683C95.201,31.138,96.429,34.078,96.429,37.5z' /></svg>"); */
  background-image: url("images/folder.png");
  background-position: center top;
  background-size: 75% auto;
}



/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
/*  background-color: rgb(170,170,170); */
/*  background: url(images/background.jpg) no-repeat center center fixed;  */
/*  background-color: rgba(0,0,0,0); /* Black w/ opacity */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin: 20px; /* 15% from the top and centered */
  padding: 20px;
  border: none;
/*  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.modalClose {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.modalClose:hover,
.modalClose:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}