/*
Plugin Name: Progress Bar
Plugin URI: https://github.com/jazzsequence/progress-bar
Description: a simple progress bar shortcode that can be styled with CSS
Author: Chris Reynolds
Author URI: http://museumthemes.com
License: GPL3
*/

/*
	Progress Bar
    Copyright (C) 2012 | Chris Reynolds (chris@arcanepalette.com)

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.


    http://www.opensource.org/licenses/gpl-3.0.html
*/

/*
   for some awesome ideas for styling these progress bars
   go here: http://css-tricks.com/css3-progress-bars/
   and for an awesome css gradient generator
   go here: http://www.colorzilla.com/gradient-editor/
*/

/* base */
div.wppb-wrapper {
	clear: both;
}

div.wppb-progress {
	height: 25px;
	width: 400px;
	background: #555;
	-moz-border-radius: 30px;
	-o-border-radius: 30px;
	border-radius: 30px;
	position: relative;
}

div.wppb-progress > span {
	display: block;
	height: 25px;
	-moz-border-radius: 30px;
	-o-border-radius: 30px;
	border-radius: 30px;
	background: #5a84c4;
	/* Old browsers */
	background: -moz-linear-gradient(top, #5a84c4 0%, #1a2275 100%);
	/* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5a84c4), color-stop(100%, #1a2275));
	/* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #5a84c4 0%, #1a2275 100%);
	/* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #5a84c4 0%, #1a2275 100%);
	/* Opera 11.10+ */
	background: -ms-linear-gradient(top, #5a84c4 0%, #1a2275 100%);
	/* IE10+ */
	background: linear-gradient(top, #5a84c4 0%, #1a2275 100%);
	/* W3C */
	-webkit-box-shadow: inset 0 2px 9px rgba(255, 255, 255, .3), inset 0 -2px 6px rgba(0, 0, 0, .4);
	-moz-box-shadow: inset 0 2px 9px rgba(255, 255, 255, .3), inset 0 -2px 6px rgba(0, 0, 0, .4);
	box-shadow: inset 0 2px 9px rgba(255, 255, 255, .3), inset 0 -2px 6px rgba(0, 0, 0, .4);
	overflow: hidden;
	position: relative;
}

/* red */
div.wppb-progress > span.red {
	background: #d10418;
	/* Old browsers */
	background: -moz-linear-gradient(top, #d10418 0%, #6d0019 100%);
	/* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d10418), color-stop(100%, #6d0019));
	/* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #d10418 0%, #6d0019 100%);
	/* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #d10418 0%, #6d0019 100%);
	/* Opera 11.10+ */
	background: -ms-linear-gradient(top, #d10418 0%, #6d0019 100%);
	/* IE10+ */
	background: linear-gradient(top, #d10418 0%, #6d0019 100%);
}

/* yellow */
div.wppb-progress > span.yellow {
	background: #f6e6b4;
	/* Old browsers */
	background: -moz-linear-gradient(top, #f6e6b4 0%, #ed9017 100%);
	/* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f6e6b4), color-stop(100%, #ed9017));
	/* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #f6e6b4 0%, #ed9017 100%);
	/* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #f6e6b4 0%, #ed9017 100%);
	/* Opera 11.10+ */
	background: -ms-linear-gradient(top, #f6e6b4 0%, #ed9017 100%);
	/* IE10+ */
	background: linear-gradient(to bottom, #f6e6b4 0%, #ed9017 100%);
}

/* orange */
div.wppb-progress > span.orange {
	background: #ffa84c;
	/* Old browsers */
	background: -moz-linear-gradient(top, #ffa84c 0%, #ff7b0d 100%);
	/* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffa84c), color-stop(100%, #ff7b0d));
	/* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffa84c 0%, #ff7b0d 100%);
	/* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffa84c 0%, #ff7b0d 100%);
	/* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ffa84c 0%, #ff7b0d 100%);
	/* IE10+ */
	background: linear-gradient(to bottom, #ffa84c 0%, #ff7b0d 100%);
}

/* green */
div.wppb-progress > span.green {
	background: #83c783;
	/* Old browsers */
	background: -moz-linear-gradient(top, #83c783 0%, #52b152 33%, #008a00 62%, #005700 100%);
	/* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #83c783), color-stop(33%, #52b152), color-stop(62%, #008a00), color-stop(100%, #005700));
	/* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #83c783 0%, #52b152 33%, #008a00 62%, #005700 100%);
	/* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #83c783 0%, #52b152 33%, #008a00 62%, #005700 100%);
	/* Opera 11.10+ */
	background: -ms-linear-gradient(top, #83c783 0%, #52b152 33%, #008a00 62%, #005700 100%);
	/* IE10+ */
	background: linear-gradient(to bottom, #83c783 0%, #52b152 33%, #008a00 62%, #005700 100%);
}

/* candystripes */
div.wppb-progress > span.candystripes:after, div.wppb-progress > span.candystripe:after, div.wppb-progress > span.animated-candystripe:after, div.wppb-progress > span.animated-candystripes: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)) !important;
	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) !important;
	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) !important;
	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) !important;
	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) !important;
	z-index: 1;
	-webkit-background-size: 50px 50px;
	-moz-background-size: 50px 50px;
	-moz-border-radius: 25px;
	-o-border-radius: 25px;
	border-radius: 25px;
	overflow: hidden;
}

/* animated candystripes */
div.wppb-progress > span.animated-candystripe:after, div.wppb-progress > span.animated-candystripes:after {
	-webkit-animation: move 2s linear infinite;
}

.animated-candystripes > span:after, .animated-candystripe > span:after {
	display: none;
}

@-webkit-keyframes move {
	0% {
		background-position: 0 0;
	}
	
	100% {
		background-position: 50px 50px;
	}
}

@-moz-keyframes move {
	0% {
		background-position: 0 0;
	}
	
	100% {
		background-position: 50px 50px;
	}
}

/* after */
div.wppb-wrapper.after {
	width: 440px;
}

div.wppb-wrapper.after div.wppb-progress {
	float: left;
}

div.wppb-wrapper.after div.after {
	float: right;
	line-height: 25px;
}

/* inside */
div.wppb-wrapper.inside {
	width: 400px;
	height: 25px;
	position: relative;
}

div.wppb-wrapper div.inside {
	margin: 0 auto;
	line-height: 25px;
	color: #fff;
	font-weight: bold;
	position: absolute;
	z-index: 1;
	width: 400px;
	text-align: center;
}

/* responsive */
div.wppb-progress.full, div.wppb-wrapper.full, div.wppb-wrapper.full div.inside {
	width: 100%;
}

/* flat color */
div.wppb-progress > span.flat {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}