/*
 * Copyright (c) 2012-2013 Thibaut Courouble
 * http://www.cssflow.com
 *
 * Licensed under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 */


#lade-container {
	margin: 40% auto 0px;		/* 3 Werte: oben, links+rechts, unten */
	text-align: center;
}

/* Gesamter (leerer) Balken: */
#lade-container .progress {
	margin: 0 auto;
	width: 27%;				/* Länge in % richtet sich nach FAKTOR */
	padding: 4px;
	background: rgba(0, 0, 0, 0.25);
	border-radius: 6px;
	box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.25), 0 1px rgba(255, 255, 255, 0.2);
}


/* Farbiger Balken: */
#ladebalken {
	position: relative;
	height: 16px;
	border-radius: 4px;
	transition: 0.4s linear;
	transition-property: width, background-color;
	box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
	width: 2%;
	background-color: #f63a0f;
}


#ladebalken:before,
#ladebalken:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}


#ladebalken:before {
	bottom: 0;
	background: url("stripes.png") 0 0 repeat;
	border-radius: 4px 4px 0 0;
}

#ladebalken:after {
	z-index: 2;
	bottom: 45%;
	border-radius: 4px;
	/* Leichter weisser Schein auf dem farbigen Balken: */
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
}