/* Credits: http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/ */

/*---------------------progress bars ---------------------------*/

progress,          /* All HTML5 progress enabled browsers */
progress[role]     /* polyfill */ {
	/* Turns off styling - not usually needed, but good to know. */
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;

	/* gets rid of default border in Firefox and Opera. */
	border: none;

	/* Needs to be in here for Safari polyfill so background images work as expected. */
	background-size: auto;

	/* Dimensions */
	height: @progress-bar-height;
	width: @progress-bar-width;
}

/* Polyfill */
progress[role]:after {
	background-image: none; /* removes default background from polyfill */
}

/* Ensure fallback text doesn't appear in polyfill */
progress[role] strong {
	display: none;
}

/* ------------------progress-bar-background--------------------*/

progress,                          /* Firefox  */
progress[role][aria-valuenow] {
	/* Polyfill */
	background: @progress-bar-background !important; /* !important is needed by the polyfill */
}

/* Chrome */
progress::-webkit-progress-bar {
	background: @progress-bar-background;
}

/* ------------------progress-bar-foreground---(value)----------*/

/* IE10 */
progress {
	color: black;
}

/* Firefox */
progress::-moz-progress-bar {
	background: @progress-bar-foreground;
}

/* Chrome */
progress::-webkit-progress-value {
	background: @progress-bar-foreground;
}

/* Polyfill */
progress[aria-valuenow]:before {
	background: @progress-bar-foreground;
}
/*-----------------------progress bar indeterminate value------ */

/* Firefox */
progress:not([value])::-moz-progress-bar {
	background-image: @progress-bar-indeterminate-background-image;
}

/* Chrome */
progress:not([value])::-webkit-progress-bar {
	background-image: @progress-bar-indeterminate-background-image;
}

/* Polyfill - IE */
progress[role] {
	background-image: @progress-bar-indeterminate-background-image !important;
}

/* Polyfill - Safari */
progress:not([value]) {
	background-image: @progress-bar-indeterminate-background-image !important;
	background-size: auto; /* Needs to be in here for Safari */
}

/*----------end-------------*/

/* styling */

@progress-bar-height: 8px;
@progress-bar-width: 100%;

@progress-bar-background:  #dadada;
/*@progress-bar-background: #F1F1F1;*/
@progress-bar-background-border: none;

@progress-bar-foreground: #5facb2;
/*@progress-bar-foreground: #37A0CA;*/
@progress-bar-foreground-border: none;

@progress-bar-indeterminate-background-image: none;


progress::-webkit-progress-value {

    /*border:none !important;*/
    border: 0px solid #535353;
    border-right:2px solid #2d939b;
    border-top: none !important;
    border-left:none !important;
    border-radius: 0 10px 10px 0;
}


progress::-webkit-progress-bar {
    border-right:1px solid #000000;
    border-bottom: 0px solid #dadada;
    border: 0px solid #adadad;
    border-left: 0px;
    border-top: none;
}

progress, progress[role], progress::-webkit-progress-bar, progress::-webkit-progress-value {
    border-radius: 10px;
    margin-bottom: 2px;
}

// old code from XpView.scala when I used <progress>
/*
	def insertProgressBarStyling:String = {

			s"""<style type="text/css" rel="stylesheet">
				 |.progress-bar {
				 |  display:block;
				 |}
				 |    .progress-bar progress[value]::-moz-progress-bar {
				 |      appearance: none;
				 |      -webkit-appearance: none;
				 |      background-color: #3fb3ce;
				 |      border: 1px solid #17424d;
				 |      background-size: 35px 20px, 100% 100%, 100% 100%;
				 |      background-image: -moz-linear-gradient( top, rgba(255, 255, 255, 0.25), rgba(37, 181, 160, 0.77) ), -moz-linear-gradient( left, #3c98b7, #1df2f2 );
				 |    }
				 |
				 |    .progress-bar .value {
				 |      position: absolute;
				 |      margin-left: 5px;
				 |      font-size: 0.9em;
				 |      font-weight: 600;
				 |    }
				 |    .progress-bar .percent-to-finish {
				 |
|        margin-left: 50px;
|        position: absolute;
|        font-size: 0.9em;
|        font-weight: 600;
|    }
|</style>""".stripMargin
	}*/
/*
		s"""<div class='progress-bar'>
			 |<span class='value'>${remaining}</span>
			 |<span class='percent-to-finish'>${format2(percent * 100)}</span>
			 |<progress class='bar' max='${max}' value='${value}'></progress>
			 |</div>""".stripMargin
*/