/* 
    Document   : xw_progressbar.css
    Created on : 10.12.2012, 15:36:56
    Author     : xwolf
    Description:
        CSS stylesheet for wordpress plugin xwolf Progress Bar
*/

 .xw-progressbar {
        width: 100%; 
        margin: 0; padding: 3px;
        text-align: right; 
        border: 1px solid rgba(0,0,0,0.1);
        font-size: 0.9em;
        background: rgba(0,0,0,0.05);
 } 
 div.rounded {
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     -ms-border-radius: 5px;
     border-radius: 5px;
 }

 
 .xw-progressbar h3 {    
     font-family: Arial,Times New Roman;
    font-size: 1em;
    font-weight: bold;
    margin: 0px;     
    text-align: left;
 }

 .xw-progressbar progress { width: 100%; line-height: 0.9em; }
 .numberbar progress {
     float: left;
     width:  75%;
     min-width: 100px;
 }
 .xw-progressbar div { width: 100%;  } 
 .xw-progressbar div.gesamt { 
     padding-top: 10px;
     background: rgba(0,0,0,0.1);
 }
 .rounded div.gesamt{ 
       	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
        -ms-border-radius: 3px;
	border-radius: 3px;   
 }
 .xw-progressbar div.gesamt span.number {
     font-weight: bold;
 }

 .xw-progressbar span.number {  
    margin-right: 0px;
    font-size: 0.9em;
    font-style: italic;
    border: none;
 }
 .numberbar span.number {  
     clear: left;
     width: 25%;
     min-width: 50px;
 }
 /* 
 * CSS Code adopted by CSS-Tricks, http://css-tricks.com/css3-progress-bars/
 */
 
 .xw-progressbar .meter {
     height: 18px;  /* Can be anything */
	position: relative;
	background: rgba(0,0,0,0.1);
        padding: 0;
        -ms-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
	-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);
 }
 .rounded .meter {
     	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
        -ms-border-radius: 7px;
	border-radius: 7px;
 }    
 .numberbar .meter {     
     float: left;
     width: 75%;
     min-width: 100px;
 }
  .xw-progressbar .meter > span {
	display: block;
	height: 100%;
        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: -webkit-linear-gradient(
	  center bottom,
	  rgb(43,194,83) 37%,
	  rgb(84,240,84) 69%
	 );
	background-image: -moz-linear-gradient(
	  center bottom,
	  rgb(43,194,83) 37%,
	  rgb(84,240,84) 69%
	 );
	background-image: -ms-linear-gradient(
	  center bottom,
	  rgb(43,194,83) 37%,
	  rgb(84,240,84) 69%
	 );
	background-image: -o-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);
	position: relative;
	overflow: hidden;
}
.rounded .meter > span { 
    -webkit-border-top-right-radius: 7px;
    -webkit-border-bottom-right-radius: 7px;
    -moz-border-radius-topright: 7px;
    -moz-border-radius-bottomright: 7px;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    -webkit-border-top-left-radius: 7px;
    -webkit-border-bottom-left-radius: 7px;
    -moz-border-radius-topleft: 7px;
    -moz-border-radius-bottomleft: 7px;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}
.xw-progressbar .orange > span {
    background-color: #f1a165;
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a));
    background-image: -webkit-linear-gradient(top, #f1a165, #f36d0a); 
    background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
    background-image: -ms-linear-gradient(top, #f1a165, #f36d0a);
    background-image: -o-linear-gradient(top, #f1a165, #f36d0a);
}

.xw-progressbar .red > span {
    background-color: #f0a3a3;
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
    background-image: -webkit-linear-gradient(top, #f0a3a3, #f42323);
    background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
    background-image: -ms-linear-gradient(top, #f0a3a3, #f42323);
    background-image: -o-linear-gradient(top, #f0a3a3, #f42323);
}
.xw-progressbar .blue > span {
    background-color: #2d7dc5;
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #2d7dc5),color-stop(1, #0000ff));
    background-image: -webkit-linear-gradient(top, #2d7dc5, #0000ff);
    background-image: -moz-linear-gradient(top, #2d7dc5, #0000ff);
    background-image: -ms-linear-gradient(top, #2d7dc5, #0000ff);
    background-image: -o-linear-gradient(top, #2d7dc5, #0000ff);        
}

.meter > span.gradient:after {
    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: 
            -webkit-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
       );
    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
       );
    background-image: 
            -ms-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
       );
    background-image: 
            -o-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;
    -ms-background-size:    50px 50px;
    background-size:         50px 50px;
    -webkit-animation: move 2s linear infinite;
    overflow: hidden;
}
.rounded .meter > span.gradient:after {
    -webkit-border-top-right-radius: 7px;
    -webkit-border-bottom-right-radius: 7px;
    -moz-border-radius-topright: 7px;
    -moz-border-radius-bottomright: 7px;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    -webkit-border-top-left-radius: 7px;
    -webkit-border-bottom-left-radius: 7px;
    -moz-border-radius-topleft: 7px;
    -moz-border-radius-bottomleft: 7px;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px; 
}