/*<!--general-->*/

#infographic
{
	box-shadow: 0px 0px 5px #888888;
    padding: 15px;
    margin-bottom: 10px;
    background-color: white;
    border-radius: 5px;
	    display: block;
	
}
.infographicHeader
{
	
	background-color:transparent;
	color:white;
	
	text-align: center;
	/*text-shadow: 1px 1px 2px #000000;*/
	text-shadow:none;
	width:90%;
	margin-right:auto;
	margin-left:auto;
	
}

.infographicTitle
{
	background-color:transparent;
	color:#085887;
	text-shadow:none;
}

.well
{
	/*aside background color*/
	/*background-color:#e7e7e7;
	*/
	background-color: #363636;
	/*background-color:rgba(0,0,0,0.5);*/
	border:none;
}

.colStyle
{
	margin:0;
	padding:5px;	
}

/*box shadow*/
.topShadow {
	box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, 0.4);
}

.rightShadow {
	box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.4);
}

.bottomShadow {
	box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.4);
}

.leftShadow {
	box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.4);
}

.allShadow {
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}
/*<!--CIRCLES ========================================================================= -->*/
.redCircle
{
	background-color:#A3181C;
	background-color: rgba(163,24,28,1);
	background-image: url('svg/background/redCircleBackground.svg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 95%;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	margin-top:5%;
	margin-left:auto;
	margin-right:auto;
}

.mobile .blueCircle
{
	margin-top:10%;
	width:85%;
}
.blueCircle
{
	
	background-color:#0C3E69;
	background-color:rgba(12,62,105,1);
	background-image: url('svg/background/blueCircleBackground.svg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 75%;
	border-radius:50%;
	margin-top:25%;
	margin-left:auto;
	margin-right:auto;
}


.mobile .yellowCircle
{
	margin-top:10%;
	margin-bottom:15%;
	width:75%;
}
.yellowCircle
{
	background-color:#FC9804;
	background-color:rgba(252,152,4,1);
	background-image: url('svg/background/yellowCircleBackground.svg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 20%;
	border-radius:50%;
	margin-top:80%;
	margin-left:auto;
	margin-right:auto;
}
.mobile .CircleText
{
	top:15%;
	/*background-color:rgba(0,0,0,0.1);*/
}

.CircleText
{
	position:absolute;
	width:60%;
	top:35%;
	left:20%;	
	/*background-color:rgba(0,0,0,0.3);*/
	/*border-radius:50%;*/
}

.yellowText .infographicHeader
{
	color:#FC9804;	
}

.mobile .yellowText .infographicHeader
{
	color:white;
}


/*<!--FILL LINE =========================================================================== -->*/
.redBlueLine
{
	height:50px;
	width:10px;
	margin-top:-2px;
	margin-bottom:-5px;
	margin-left:auto;
	margin-right:auto;
	background: #A3181C; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#A3181C, #1A5C98); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#A3181C, #1A5C98); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#A3181C, #1A5C98); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#A3181C, #1A5C98); /* Standard syntax */
}

.mobile .redBlueLine
{
	display:none;
}

.blueBlueLine
{
	height:50px;
	width:10px;
	margin-top:-2px;
	margin-bottom:-5px;
	margin-left:auto;
	margin-right:auto;
	background: #0C3E69; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#0C3E69, #1A5C98); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#0C3E69, #1A5C98); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#0C3E69, #1A5C98); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#0C3E69, #1A5C98); /* Standard syntax */
}

.mobile .blueBlueLine
{
	display:none;
}


.yellowBlueLine
{
	height:50px;
	width:10px;
	margin-top:-2px;
	margin-bottom:-5px;
	margin-left:auto;
	margin-right:auto;
	background: #FC9804; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#FC9804, #1A5C98); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#FC9804, #1A5C98); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#FC9804, #1A5C98); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#FC9804, #1A5C98); /* Standard syntax */
}

.mobile .yellowBlueLine
{
	display:none;
}

/*<!--TOTAL REVENUE LINE ======================================================================= -->*/
#infographicBar
{
	padding:5px;
	border-radius:10px;
	background-color:#1A5C98;
	margin:5px;
}

/*<!--BUCKET FILL LINES ================================================ -->*/
.LIGHTblueBlueLine
{
	height:50px;
	width:10px;
	margin-top:-5px;
	margin-bottom:-5px;
	margin-left:auto;
	margin-right:auto;
	background: #0C3E69; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#1A5C98, #0C3E69); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#1A5C98, #0C3E69); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#1A5C98, #0C3E69); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#1A5C98, #0C3E69); /* Standard syntax */
}

.mobile .LIGHTblueBlueLine
{
	display:none;
}

.blueRedLine
{
	height:50px;
	width:10px;
	margin-top:-5px;
	margin-bottom:-5px;
	margin-left:auto;
	margin-right:auto;
	background: #1A5C98; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#1A5C98, #A3181C); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#1A5C98, #A3181C); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#1A5C98, #A3181C); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#1A5C98, #A3181C); /* Standard syntax */
}

.mobile .blueRedLine
{
	display:none;
}

/*<!--BUCKETS ========================================================================= -->*/
.bucket
{
	width:100%;
}

.roundTop
{
	border-top-right-radius:50%;
	border-top-left-radius:50%;
}
.roundBottom
{
	border-bottom-right-radius:50%;
	border-bottom-left-radius:50%;	
}
.placeHolderCircle
{
	padding: 15px;
	border-radius:50%;
	visibility: hidden;
}

.darkRed
{
	background-color:#8d1518;
	/*padding: 15px;*/
	border-radius:50%;
}

.red
{
	background-color:#A3181C;
}

.redBucketCircle
{
	background-color:#A3181C;
	padding: 15px;
	border-radius:50%;
}

.darkBlue
{
	background-color:#093052;
	/*padding: 15px;*/
	border-radius:50%;
}

.blue
{
	background-color:#0C3E69;
}
.blueBucketCircle
{
	background-color:#0C3E69;
	padding: 15px;
	border-radius:50%;
}

.yellow
{
	background-color:#FC9804;
}

.lightBlue
{
	background-color:rgb(0,150,206);
	padding: 15px;
    margin-bottom: 10px;
}
/*bucket info box*/
.infoBox
{
	box-shadow: 0px 0px 5px #888888;
    padding: 5px;
    margin-bottom: 10px;
    background-color: white;
    border-radius: 5px;
	word-wrap: break-word;
}
.infoBox hr
{
	margin:0;
}

.infoBoxTitle
{
	background-color:transparent;
	text-shadow:none;
	color:#085887;
	padding:0;
}

.buffer
{
	margin-bottom:10%;
}

.padding
{
	padding:5%;
}

.bucketOverlay
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;	
	/*
	background:url('svg/bucketOutline.svg');
	*/
	background:url('svg/bucketOutline.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	

}