html, body {
	padding: 0px;
	margin: 0px;
	width:100%;
	min-height:100%;
	background-color: #000;
	min-width:1100px;
	background-image: url('../images/pattern.png');
}

body.none {	
    font-family: Arial;
}

img {
	margin: 0px;
	padding: 0px;
	border: none;
	vertical-align: top;
}

canvas {
	position:absolute;
}

#statusbar {
	position:absolute;
	width: 100%;
	height:60px;
	background: rgb(47,173,250); /* Old browsers */
	z-index:1;
min-width:1100px;

background: -moz-linear-gradient(top,  rgba(47,173,250,1) 90%, rgba(0,0,0,1) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(90%,rgba(47,173,250,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  rgba(47,173,250,1) 90%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  rgba(47,173,250,1) 90%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  rgba(47,173,250,1) 90%,rgba(0,0,0,1) 100%); /* IE10+ */

background: linear-gradient(to bottom,  rgba(47,173,250,1) 90%,rgba(0,0,0,1) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2fadfa', endColorstr='#000000',GradientType=0 ); /* IE6-9 */


}

#main {
	z-index:1;
	position:absolute;
	top: 60px;
	width: 100%;
	min-width:1100px;
}

#login {
	
	width: 340px;
	margin:auto;
	margin-top:100px;
	text-align:center;
	padding:20px;
	border-radius:10px;
	background: rgba(0, 0, 0, 0.75);
    animation: pulsate 3s;
    animation-iteration-count: infinite;
    -webkit-animation: pulsate 3s;
    -webkit-animation-iteration-count: infinite;
}

#login img {

}

#login>div {
	color: #6B6B6B;
	font-family: Arial;
	font-size:12px;
	margin-top:5px;
}

#loginform {
	margin-top:10px;
	border-radius:10px;
	border: 1px solid #20545d;
	padding:10px;
}

#loginform input {
	margin:0px;
	padding:0px;
	height:15px;
	border: 1px solid #9fc4cc;
	padding:2px;
	background-color: #9fc4cc;
}

#loginform button {
	background-color: #9fc4cc;
	border:none;
	margin-top:4px;
	height:20px;
	padding:2px;
}

ul {
  list-style-type: none;
  width: 100%;
  margin:0;
  padding:0;
}

li {
	padding: 10px;
	overflow: auto;
	background-repeat: no-repeat;
	height:120px;
}
li:hover {
	background: rgba(64,64,64,0.8);
	cursor: pointer;
	background-repeat: no-repeat;
}
li.filewithout:hover {
	cursor: default;
}

li p, .front p {
	margin:0;
	font-size: 200%;
	margin-left: 130px;
	margin-top:20px;
	color: #00a2ff;
	text-decoration:none;
}

li p {
	margin-top:0px;
}

.front p, .front span {
	margin-top:10px;
	margin-left:0px;
}

li p.small {
      margin-top:15px;  
}

li span {
      font-size: 100%;
	margin-left: 130px;
	margin-top:20px;
	color: #00a2ff;
	text-decoration:none;  
}
 
li.directory {
  background-image: url('../images/folder-close.png');
}
 
li.directory:hover {
  background-image: url('../images/folder-open.png');
}

li.filewithout {
	background-image: url('../images/file.png');
}

li.file {
  background-image:none;
  padding:0;
  height:200px;
  overflow:hidden;
}

img.title {
  margin:0;
  padding:0;
  height:100%;
  border: none;
  max-width: 127px;
  max-height: 183px;

    min-width: 126px;
    min-height: 180px;
}

#statusbar {
        font-size:120%;
        color: #2c4c52;
}
 #statusbar a {
        text-decoration: underline;
        color: #2c4c52;
}

/* entire container, keeps perspective */

			
			.flip-container.hover .flipper, #flip-toggle.flip .flipper {
				-webkit-transform: rotateY(180deg);
				-moz-transform: rotateY(180deg);
				transform: rotateY(180deg);
				filter: FlipH;
    			-ms-filter: "FlipH";
			}

		.flip-container, .front, .back {
			width: 100%;
			height:200px;
		}

		.flipper {
			-webkit-transition: 0.6s;
			-webkit-transform-style: preserve-3d;

			-moz-transition: 0.6s;
			-moz-transform-style: preserve-3d;

			transition: 0.6s;
			transform-style: preserve-3d;

			position: relative;
		}

		.front, .back {
			-webkit-backface-visibility: hidden;
			-moz-backface-visibility: hidden;
			backface-visibility: hidden;

			position: absolute;
			top: 0;
			left: 0;
		}

		.front {
			z-index: 2;
			overflow:hidden;
		}

		.back {
			-webkit-transform: rotateY(180deg);
			-moz-transform: rotateY(180deg);
			transform: rotateY(180deg);
		}
                
                .flip-container.hover .front {
                        display:none;
                }
                
                .back img {
                        width:100px;
                        height:100px;
                }
                
.rating_good {
	color: green;
        float:right;
}
.rating_ok {
	color: yellow;
    float:right;
}

.rating_bad {
	color: red;
        float:right;
}


@keyframes pulsate {
    0% {box-shadow: 0px 0px 5px #9fc4cc}
    50% {box-shadow: 0px 0px 15px #9fc4cc}
    100% {box-shadow: 0px 0px 5px #9fc4cc}
}

@-webkit-keyframes pulsate {
    0% {box-shadow: 0px 0px 5px #9fc4cc}
    50% {box-shadow: 0px 0px 15px #9fc4cc}
    100% {box-shadow: 0px 0px 5px #9fc4cc}
}


a.ssl {
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	display:inline-block;
	width:20px;
	height:20px;
	background-color: #00cd00;
	border: 2px solid green;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: white;
	text-decoration: none;
	line-height: 20px;
    font-size: 10px;
    margin-top:10px;
}