@import url(https://fonts.googleapis.com/css?family=Expletus+Sans);

/* Basic resets */

/** { 
	margin:0; padding:0; 
	box-sizing: border-box;
}

body {
	margin: 50px auto 0;
	max-width: 800px;

	font-family: "Expletus Sans", sans-serif;
}

li {

	width: 50%;
	float: left;
	list-style-type: none;
	
	padding-right: 5.3333333%;
}

li:nth-child(even) { margin-bottom: 5em;}

h2 {
	margin: 0 0 1.5em;
	border-bottom: 1px solid #ccc;
	
	padding: 0 0 .25em;
}
*/
/* Styling an indeterminate progress bar */

progress:not(value) {
	/* Add your styles here. As part of this walkthrough we will focus only on determinate progress bars. */
}

/* Styling the determinate progress element */

progress[value] {
	/* Get rid of the default appearance */
	appearance: none;
	
	/* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. */
	border: none;
	
	/* Add dimensions */
	width: 100%; 
	/*height: 20px;*/
	height: 10px;
	
	/* Although firefox doesn't provide any additional pseudo class to style the progress element container, any style applied here works on the container. */
	background-color: whiteSmoke;
	border-radius: 3px;
	box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
	
	/* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
	color: royalblue;
	
	position: relative;
	/*margin: 0 0 1.5em;*/ 
}

/*
Webkit browsers provide two pseudo classes that can be use to style HTML5 progress element.
-webkit-progress-bar -> To style the progress element container
-webkit-progress-value -> To style the progress element value.
*/

progress[value]::-webkit-progress-bar {
	background-color: whiteSmoke;
	border-radius: 3px;
	box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
}

progress[value]::-webkit-progress-value {
	position: relative;
	
	background-size: 35px 20px, 100% 100%, 100% 100%;
	border-radius:3px;
	
	/* Let's animate this */
	animation: animate-stripes 5s linear infinite;
}

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

/* Let's spice up things little bit by using pseudo elements. */

progress[value]::-webkit-progress-value:after {
	/* Only webkit/blink browsers understand pseudo elements on pseudo classes. A rare phenomenon! */
	content: '';
	position: absolute;
	
	width:5px; height:5px;
	top:7px; right:7px;
	
	background-color: white;
	border-radius: 100%;
}

/* Firefox provides a single pseudo class to style the progress element value and not for container. -moz-progress-bar */

progress[value]::-moz-progress-bar {
	/* Gradient background with Stripes */
	background-image:
	-moz-linear-gradient( 135deg,
		transparent,
		transparent 33%,
		rgba(0,0,0,.1) 33%,
		rgba(0,0,0,.1) 66%,
		transparent 66%),
	-moz-linear-gradient( top,
		rgba(255, 255, 255, .25),
		rgba(0,0,0,.2)),
	-moz-linear-gradient( left, #09c, #f44);
	
	background-size: 35px 20px, 100% 100%, 100% 100%;
	border-radius:3px;
	
	/* Firefox doesn't support CSS3 keyframe animations on progress element. Hence, we did not include animate-stripes in this code block */
}

/* Fallback technique styles */
.progress-bar {
	background-color: whiteSmoke;
	border-radius: 3px;
	box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;

	/* Dimensions should be similar to the parent progress element. */
	width: 100%; height:20px;
}

.progress-bar span {
	background-color: royalblue;
	border-radius: 3px;
	
	display: block;
	text-indent: -9999px;
}

p[data-value] { 

	position: relative; 
}

/* The percentage will automatically fall in place as soon as we make the width fluid. Now making widths fluid. */

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

/*.ValorSimulacaoAno1B[data-value]:after{
	content: attr(data-value) '% teste';
	position: absolute; right:0;
}
*/

.prouni1{
	display: none;
}

.prouni2{
	display: none;
}

.prouni3{
	display: none;
}

.bolsa1{
	display: none;
}

.bolsa2{
	display: none;
}

.bolsa3{
	display: none;
}

.fies1{
	display: none;
}

.fies2{
	display: none;
}

.fies3{
	display: none;
}



.ProUniSimulacaoAno1P[data-value]:after{
	content: attr(data-value) '';
	position: absolute; right:0;
}

.ProUniSimulacaoAno2P[data-value]:after{
	content: attr(data-value) '';
	position: absolute; right:0;
}

.ProUniSimulacaoAno3P[data-value]:after{
	content: attr(data-value) '';
	position: absolute; right:0;
}


.ValorSimulacaoAno1B[data-value]:after{
	content: attr(data-value) '';
	position: absolute; right:0;
}

.ValorSimulacaoAno2B[data-value]:after{
	content: attr(data-value) '';
	position: absolute; right:0;
}

.ValorSimulacaoAno3B[data-value]:after{
	content: attr(data-value) '';
	position: absolute; right:0;
}

.FiesSimulacaoAno1F[data-value]:after{
	content: attr(data-value) '';
	position: absolute; right:0;
}

.FiesSimulacaoAno2F[data-value]:after{
	content: attr(data-value) '';
	position: absolute; right:0;
}

.FiesSimulacaoAno3F[data-value]:after{
	content: attr(data-value) '';
	position: absolute; right:0;
}



.html5::-webkit-progress-value,
.python::-webkit-progress-value  {
	/* Gradient background with Stripes */
	background-image:
	-webkit-linear-gradient( 135deg,
		transparent,
		transparent 33%,
		rgba(0,0,0,.1) 33%,
		rgba(0,0,0,.1) 66%,
		transparent 66%),
	-webkit-linear-gradient( top,
		rgba(255, 255, 255, .25),
		rgba(0,0,0,.2)),
	-webkit-linear-gradient( left, #09c, #f44);
}

.css3::-webkit-progress-value,
.php::-webkit-progress-value 
{
	/* Gradient background with Stripes */
	background-image:
	-webkit-linear-gradient( 135deg,
		transparent,
		transparent 33%,
		rgba(0,0,0,.1) 33%,
		rgba(0,0,0,.1) 66%,
		transparent 66%),
	-webkit-linear-gradient( top,
		rgba(255, 255, 255, .25),
		rgba(0,0,0,.2)),
	-webkit-linear-gradient( left, #09c, #ff0);
}

.jquery::-webkit-progress-value,
.node-js::-webkit-progress-value 
{
	/* Gradient background with Stripes */
	background-image:
	-webkit-linear-gradient( 135deg,
		transparent,
		transparent 33%,
		rgba(0,0,0,.1) 33%,
		rgba(0,0,0,.1) 66%,
		transparent 66%),
	-webkit-linear-gradient( top,
		rgba(255, 255, 255, .25),
		rgba(0,0,0,.2)),
	-webkit-linear-gradient( left, #09c, #690);
}

/* Similarly, for Mozillaa. Unfortunately combining the styles for different browsers will break every other browser. Hence, we need a separate block. */

.html5::-moz-progress-bar,
.php::-moz-progress-bar {
	/* Gradient background with Stripes */
	background-image:
	-moz-linear-gradient( 135deg,
		transparent,
		transparent 33%,
		rgba(0,0,0,.1) 33%,
		rgba(0,0,0,.1) 66%,
		transparent 66%),
	-moz-linear-gradient( top,
		rgba(255, 255, 255, .25),
		rgba(0,0,0,.2)),
	-moz-linear-gradient( left, #09c, #f44);
}

.css3::-moz-progress-bar,
.php::-moz-progress-bar {
	{
		/* Gradient background with Stripes */
		background-image:
		-moz-linear-gradient( 135deg,
			transparent,
			transparent 33%,
			rgba(0,0,0,.1) 33%,
			rgba(0,0,0,.1) 66%,
			transparent 66%),
		-moz-linear-gradient( top,
			rgba(255, 255, 255, .25),
			rgba(0,0,0,.2)),
		-moz-linear-gradient( left, #09c, #ff0);
	}

	.jquery::-moz-progress-bar,
	.node-js::-moz-progress-bar {
		/* Gradient background with Stripes */
		background-image:
		-moz-linear-gradient( 135deg,
			transparent,
			transparent 33%,
			rgba(0,0,0,.1) 33%,
			rgba(0,0,0,.1) 66%,
			transparent 66%),
		-moz-linear-gradient( top,
			rgba(255, 255, 255, .25),
			rgba(0,0,0,.2)),
		-moz-linear-gradient( left, #09c, #690);
	}

	/* Now we are good to duplicate html code for other skills and then add the css code for the new skill based on data-skill */


/* THE END */