body {
    font-family:"Microsoft Sans Serif";
    padding:0;
    margin:0;
	height:100%;
	width:100%;
	}

html {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
	background-color:#333;
	background-image:url(../images/wp.jpg);
}

#container {
    width:100%;
	margin:0px;
}
#header {
    width:100%;
    height:80px;
	margin-top:0;
    text-align:center;
    background-image:url(../images/bar_1.png);
    background-repeat:repeat-x;
}
#headertext {
    color:85cedb;
    font-size:225%;
    text-shadow:0 0 10px 00DDFF;
	margin-top:0;
	line-height:2em;
}
#content {
    width:100%;
}
#logocontainer {
    margin-left:auto;
    margin-right:auto;
	margin-top:7%;
    padding-bottom:0;
    margin-bottom:0;
    width:35%;
}
#logo {
    opacity:1;
    margin: 0 auto;
    display:block;
    width:51%;
}
#hint {
    position:relative;
    text-align:center;
	color:rgb(229, 229, 229);
	text-shadow:0 0 20px rgb(229, 229, 229);
	font-size:150%;
    top:-20px;
    margin-bottom:0;
}
#mainfooter {
    width:100%;
    height:37%;
    position:absolute;
    bottom:0;
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    background-image:url(../images/bar_2.png);
    background-repeat:repeat-x;
}
#footertext {
    text-align:center;
    color:85cedb;
    font-size:150%;
    text-shadow:0 0 2px rgb(229, 229, 229);
}
#footer2 {
    width:100%;
    height:220px;
    position:absolute;
    top:0;
    margin-bottom:0;
}
#pavatarbox {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
	border-style:solid;
	border-color:#333;
    width:120px;
    height:120px;
    position:absolute;
    top:0;
    margin-top:10px;
    margin-left:20px;
    background-color:black;
	-webkit-box-shadow:  0px 0px 10px 2px rgba(0, 0, 0, 1);
    box-shadow:  0px 0px 10px 2px rgba(0, 0, 0, 1);
}

#video {
	overflow:hidden;
	width:100%;
	height:100%;
}

#vid {
	width:26.25%;
	height:26.2%;
	float:right;
	margin-top:15%;
	margin-left:0;
	margin-right:1%;
	-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
	border-style:solid;
	border-color:#333;
	-webkit-box-shadow:  0px 0px 10px 2px rgba(0, 0, 0, 1);
    box-shadow:  0px 0px 10px 2px rgba(0, 0, 0, 1);
}

#pavatar {
	-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
	width:100%;
	height:100%;
	overflow:hidden;
}

#welcome {
	color:rgb(229, 229, 229);
	text-shadow:0 0 20px rgb(229, 229, 229);
	font-size:150%;
	float:left;
	position:absolute;
	bottom:30px;
	margin-left:10px;
}

#welcome2 {
	color:rgb(229, 229, 229);
	text-shadow:0 0 20px rgb(229, 229, 229);
	font-size:150%;
	float:left;
	position:absolute;
	bottom:5px;
	margin-left:10px;
}

#background {
    z-index: -999;
    min-height: 100%;
    min-width: 1024px;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
}

#files {
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
	margin-left:auto;
	margin-right:auto;
	margin-top:100px;
	width:220px;
	height:auto;
}

#loadingbar {
	width:100%%;
	height:100%;
}

.usertext{
	color:00DDFF;
	font-size:100%;
	text-shadow:0 0 20px 00DDFF;
}

#filescontainer {
	width:300px;
	height:auto;
	margin-left:auto;
	margin-right:auto;
}

#loadingtext {
	color:rgb(229, 229, 229);
	text-shadow:0 0 20px rgb(229, 229, 229);
	font-size:100%;

}

#downloaded {
	color:rgb(229, 229, 229);
	text-shadow:0 0 20px rgb(229, 229, 229);
	font-size:90%;
	padding-top:5px;
	font-family: Century Gothic, sans-serif;
	float:left;
}

#todownload {
	color:rgb(229, 229, 229);
	text-shadow:0 0 20px rgb(229, 229, 229);
	font-size:90%;
	padding-top:5px;
	font-family: Century Gothic, sans-serif;
	float:right;
}

#loadingtextcontainer {
	text-align:center;
}

.meter { 
			height: 20px;
			position: relative;
			margin: 60px 0 20px 0;
			background: #555;
			-moz-border-radius: 25px;
			-webkit-border-radius: 25px;
			border-radius: 25px;
			padding: 5px;
			-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
			-moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
			box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
		}
		.meter > span {
			display: block;
			height: 100%;
			   -webkit-border-top-right-radius: 8px;
			-webkit-border-bottom-right-radius: 8px;
			       -moz-border-radius-topright: 8px;
			    -moz-border-radius-bottomright: 8px;
			           border-top-right-radius: 8px;
			        border-bottom-right-radius: 8px;
			    -webkit-border-top-left-radius: 20px;
			 -webkit-border-bottom-left-radius: 20px;
			        -moz-border-radius-topleft: 20px;
			     -moz-border-radius-bottomleft: 20px;
			            border-top-left-radius: 20px;
			         border-bottom-left-radius: 20px;
			background-color: rgb(43,194,83);
			background-image: -webkit-gradient(
			  linear,
			  left bottom,
			  left top,
			  color-stop(0, rgb(43,194,83)),
			  color-stop(1, rgb(84,240,84))
			 );
			background-image: -moz-linear-gradient(
			  center bottom,
			  rgb(43,194,83) 37%,
			  rgb(84,240,84) 69%
			 );
			-webkit-box-shadow: 
			  inset 0 2px 9px  rgba(255,255,255,0.3),
			  inset 0 -2px 6px rgba(0,0,0,0.4);
			-moz-box-shadow: 
			  inset 0 2px 9px  rgba(255,255,255,0.3),
			  inset 0 -2px 6px rgba(0,0,0,0.4);
			box-shadow: 
			  inset 0 2px 9px  rgba(255,255,255,0.3),
			  inset 0 -2px 6px rgba(0,0,0,0.4);
			position: relative;
			overflow: hidden;
		}
		.meter > span:after, .animate > span > span {
			content: "";
			position: absolute;
			top: 0; left: 0; bottom: 0; right: 0;
			background-image: 
			   -webkit-gradient(linear, 0 0, 100% 100%, 
			      color-stop(.25, rgba(255, 255, 255, .2)), 
			      color-stop(.25, transparent), color-stop(.5, transparent), 
			      color-stop(.5, rgba(255, 255, 255, .2)), 
			      color-stop(.75, rgba(255, 255, 255, .2)), 
			      color-stop(.75, transparent), to(transparent)
			   );
			background-image: 
				-moz-linear-gradient(
				  -45deg, 
			      rgba(255, 255, 255, .2) 25%, 
			      transparent 25%, 
			      transparent 50%, 
			      rgba(255, 255, 255, .2) 50%, 
			      rgba(255, 255, 255, .2) 75%, 
			      transparent 75%, 
			      transparent
			   );
			z-index: 1;
			-webkit-background-size: 50px 50px;
			-moz-background-size: 50px 50px;
			-webkit-animation: move 2s linear infinite;
			   -webkit-border-top-right-radius: 8px;
			-webkit-border-bottom-right-radius: 8px;
			       -moz-border-radius-topright: 8px;
			    -moz-border-radius-bottomright: 8px;
			           border-top-right-radius: 8px;
			        border-bottom-right-radius: 8px;
			    -webkit-border-top-left-radius: 20px;
			 -webkit-border-bottom-left-radius: 20px;
			        -moz-border-radius-topleft: 20px;
			     -moz-border-radius-bottomleft: 20px;
			            border-top-left-radius: 20px;
			         border-bottom-left-radius: 20px;
			overflow: hidden;
		}
		
		.animate > span:after {
			display: none;
		}
		
		@-webkit-keyframes move {
		    0% {
		       background-position: 0 0;
		    }
		    100% {
		       background-position: 50px 50px;
		    }
		}
		
		.orange > span {
			background-color: #f1a165;
			background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
			background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a));
			background-image: -webkit-linear-gradient(#f1a165, #f36d0a); 
		}
		
		.red > span {
			background-color: #f0a3a3;
			background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
			background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
			background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
		}