/* Diagram */

.graphRow{
	overflow-x: scroll;
	padding-left: 10px;
	padding-right: 10px;
}

@media(min-width:768px) {
	.graphRow{
		overflow-x: auto;
		padding: 0;
	}
}

#graph_container{
	width: 750px;
	margin-top: 50px;
	margin-bottom: 20px;
	padding-bottom: 20px;
	margin: auto;
}

#graphs_box{
	width: 809px;
	float:left;
}

#graph_percent{
	margin-left: -80px;
	margin-top: 5px;
	width: 50px;
	float:left;
}

#graph_stats{
	width: 750px;
	height: 30px;
	background-image:url(../img/expbar.png);
	background-size: 750px 30px;
	clear:both;
}

#graph_name{
	font-family: Montserrat, "Helvetica", Arial, Sans-serif;
	font-weight: 200;
	font-size: 12px;
	text-transform: uppercase;
	color: black;
	float:left;
	padding-left: 10px;
	padding-top: 7px;
}

#graph_rank{
	font-family: "Helvetica Neue", "Open Sans", Arial, Sans-serif;
	font-size: 12px;
	color: #515151;
	float:right;
	padding-right: 10px;
	padding-top: 8px;
}

/*
	---------------------------
	GRAPH BARS
	---------------------------
*/

/*	
Novice
Apprentice (10)
Regular (30)
Professional(60)
Expert (75)
Master (100)
*/

#graph_bar{
	margin-top: 5px;    
}

#graph_bar.blue{
	background-color: #4597DE;
}

#graph_bar.phpblue{
	background-color: #6676AB;
}

#graph_bar.photoblue{
	background-color: #42c6f8;
}

#graph_bar.green{
	background-color: lightgreen;
}

#graph_bar.javaorange{
	background-color: #e76f00;
}

#graph_bar.orange{
	background-color: orange;
}

#graph_bar.lightred{
	background-color: #FC6F67;
}

#graph_bar.teal{
	background-color: #01A690;
}

#graph_bar.yellow{
	background-color: #D7AF85;
}

#graph_bar.purple{
	background-color: #C590C2;
}

#graph_bar.p90{
	width: 90%;
	height: 30px;
}

#graph_bar.p95{
	width: 95%;
	height: 30px;
}

#graph_bar.p85{
	width: 85%;
	height: 30px;
}

#graph_bar.p80{
	width: 80%;
	height: 30px;
}

#graph_bar.p70{
	width: 70%;
	height: 30px;
}

#graph_bar.p64{
	width: 64%;
	height: 30px;
}

#graph_bar.p60{
	width: 60%;
	height: 30px;
}

#graph_bar.p55{
	width: 55%;
	height: 30px;
}

#graph_bar.p50{
	width: 50%;
	height: 30px;
}

#graph_bar.p45{
	width: 45%;
	height: 30px;
}

#graph_bar.p40{
	width: 40%;
	height: 30px;
}

#graph_bar.p35{
	width: 35%;
	height: 30px;
}

#graph_bar.p30{
	width: 30%;
	height: 30px;
}

#graph_bar.p23{
	width: 23%;
	height: 30px;
}

#graph_bar.p7{
	width: 7%;
	height: 30px;
}