/*
*  MCControls Stylesheet
*  
*  Created 24-May-2013
*  By Dicentia Studios
*  
*/

.progressbar.default-styles {
	height: 10px;
}

@-webkit-keyframes progressbgmove {
	from { background-position: 0px 0px; }
	to   { background-position: -300px 0px; }
}

@-moz-keyframes progressbgmove {
	from { background-position: 0px 0px; }
	to   { background-position: -300px 0px; }
}

@-ms-keyframes progressbgmove {
	from { background-position: 0px 0px; }
	to   { background-position: -300px 0px; }
}

@-o-keyframes progressbgmove {
	from { background-position: 0px 0px; }
	to   { background-position: -300px 0px; }
}

@keyframes progressbgmove {
	from { background-position: 0px 0px; }
	to   { background-position: -300px 0px; }
}

.progressbar.default-styles .bar {
	height: 100%;
	width: 0;
	background-color: #F15B24;
	background-image: url(/graphics/progress-bar-light.png),
		-webkit-gradient(
			linear,
			left top,
			left bottom,
			from(rgba(255, 255, 255, 0.6)),
			color-stop(0.49, rgba(255, 255, 255, 0.2)),
			color-stop(0.50, rgba(0, 0, 0, 0)),
			to(rgba(0, 0, 0, 0.2))
		);
	background-image: url(/graphics/progress-bar-light.png),
		linear-gradient(
			0deg,
			rgba(0, 0, 0, 0.2),
			rgba(0, 0, 0, 0) 50%,
			rgba(255, 255, 255, 0.2) 49%,
			rgba(255, 255, 255, 0.6)
		);
	border-radius: 5px;
	box-shadow: 0 1px 5px rgba(70, 70, 70, 0.5);
	-webkit-transition: width 500ms ease-out, background-color 250ms ease;
	-moz-transition: width 500ms ease-out, background-color 250ms ease;
	-ms-transition: width 500ms ease-out, background-color 250ms ease;
	-o-transition: width 500ms ease-out, background-color 250ms ease;
	transition: width 500ms ease-out, background-color 250ms ease;
	/*-webkit-transform: translate3d(0,0,0);*/
	background-position: 0px 0px;
	-webkit-animation-name: progressbgmove;
	-webkit-animation-delay: 1s;
	-webkit-animation-duration: 4s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;

	-moz-animation-name: progressbgmove;
	-moz-animation-delay: 1s;
	-moz-animation-duration: 4s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;

	-ms-animation-name: progressbgmove;
	-ms-animation-delay: 1s;
	-ms-animation-duration: 4s;
	-ms-animation-timing-function: linear;
	-ms-animation-iteration-count: infinite;

	-o-animation-name: progressbgmove;
	-o-animation-delay: 1s;
	-o-animation-duration: 4s;
	-o-animation-timing-function: linear;
	-o-animation-iteration-count: infinite;

	animation-name: progressbgmove;
	animation-delay: 1s;
	animation-duration: 4s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.progressbar.default-styles .track {
	overflow: hidden;
	height: 100%;
	background-color: #DDD;
	box-shadow: inset 0 2px 5px rgba(70, 70, 70, 0.5), 0 1px 2px rgba(255, 255, 255, 0.5), 0 -1px 0px rgba(0, 0, 0, 0.3);
	border-radius: 5px;
	background-image: url(/graphics/progress-track-dash.png);
	background-position: 0px 0px;
	-webkit-animation-name: progressbgmove;
	-webkit-animation-duration: 16s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;

	-moz-animation-name: progressbgmove;
	-moz-animation-duration: 16s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;

	-ms-animation-name: progressbgmove;
	-ms-animation-duration: 16s;
	-ms-animation-timing-function: linear;
	-ms-animation-iteration-count: infinite;

	-o-animation-name: progressbgmove;
	-o-animation-duration: 16s;
	-o-animation-timing-function: linear;
	-o-animation-iteration-count: infinite;

	animation-name: progressbgmove;
	animation-duration: 16s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.progressbar.default-styles .bar.complete {
	background-color: #8FD039;
	background-image:
		-webkit-gradient(
			linear,
			left top,
			left bottom,
			from(rgba(255, 255, 255, 0.6)),
			color-stop(0.49, rgba(255, 255, 255, 0.2)),
			color-stop(0.50, rgba(0, 0, 0, 0)),
			to(rgba(0, 0, 0, 0.2))
		);
	background-image:
		linear-gradient(
			0deg,
			rgba(0, 0, 0, 0.2),
			rgba(0, 0, 0, 0) 50%,
			rgba(255, 255, 255, 0.2) 49%,
			rgba(255, 255, 255, 0.6)
		);
}



.modalview {
	display: table-cell;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	vertical-align: middle;
	text-align: center;
}

.modalview .overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
}

.modalview .content {
	display: inline-block;
	width: 420px;
	height: 300px;
	text-align: left;
}