@import url(http://fonts.googleapis.com/css?family=Marmelad);

/* 
 * Determinate progress bar
 * ------------------------
 */

progress[value]
{
    /* Override the default appearence */
	  -webkit-appearance: none;
	     -moz-appearance: none;
	          appearance: none;

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

    /* Dimensions */  
    width: 100%;
    height: 11px;  
  
    /* For IE10 only */
    color: #690;
  
    /* Firefox only (for container) */
    background-color: #eee;
    border-radius: 9px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
}
  
/* 
 * Webkit browsers only - Progress bar container
 * ---------------------------------------------
 */

progress[value]::-webkit-progress-bar 
{
    background-color: #eee;
    border-radius: 9px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
  
    position: relative;
}

/* 
 * Webkit browsers only - Progress bar value
 * -----------------------------------------
 */

progress[value]::-webkit-progress-value 
{
    border-radius: 9px;
    background-size: 35px 20px, 100% 100%, 100% 100%;
  
    position: relative;  

    -webkit-animation: animate-stripes 5s linear infinite;
            animation: animate-stripes 5s linear infinite;
}

/* 
 * Webkit browsers only - CSS3 keyframe animations
 * -----------------------------------------------
 */

@-webkit-keyframes animate-stripes { 100% { background-position: -100px 0px; } }
        @keyframes animate-stripes { 100% { background-position: -100px 0px; } }

/* 
 * Webkit browsers only - Pseudo elements
 * --------------------------------------
 */

progress[value]::-webkit-progress-value:after
{
    content: '';
    position: absolute;
  
    width: 6px;
    height: 6px;
    right: 7px;
    top: 7px;
  
    border-radius: 100%;
    background-color: rgba(255, 255, 255, 1);
}

progress[value]::-webkit-progress-value:before
{
    position: absolute;
    right: 0;
    top: -125%;
}

/* 
 * Firefox only - Progress bar value
 * ---------------------------------
 */

progress[value]::-moz-progress-bar 
{
    border-radius: 9px;
  	background-size: 35px 20px, 100% 100%, 100% 100%;
  
    position: relative;
}

/* 
 * For demo only
 * -------------
 */

.green::-moz-progress-bar, .python::-moz-progress-bar
{
    background-image:
         -moz-linear-gradient( 135deg, transparent, transparent 100%, transparent 100%),
         -moz-linear-gradient( top, #115E0A, #54AF31)
}

.orange::-moz-progress-bar, .python::-moz-progress-bar
{
    background-image:
         -moz-linear-gradient( 135deg, transparent, transparent 100%, transparent 100%),
         -moz-linear-gradient( top, #CE641B, #F19D22)
}

.red::-moz-progress-bar, .python::-moz-progress-bar
{
    background-image:
         -moz-linear-gradient( 135deg, transparent, transparent 100%, transparent 100%),
         -moz-linear-gradient( top, #8E0d1E, #DC283D)
}


/* 
 * HTML Fallback Technique
 * -----------------------
 */

.progress-bar 
{
    background-color: whiteSmoke;
    border-radius: 2px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .25) inset;
  
    height: 20px;  
    width: 100%;
  
    position: relative;
}

p[data-value] 
{
    position: relative;
    line-height: 200%;
    margin: 1.5em 0 0;
}

p[data-value]:after
{
    content: attr(data-value) "%";
    position: absolute;
    right: 0;
}