/* See the documentation for how to load in regular weight versions */
@font-face {
font-family: 'Benton';
src: url('https://apps.bostonglobe.com/common/font/benton-bold.woff2') format('woff2'), url('https://apps.bostonglobe.com/common/font/benton-bold.woff') format('woff');
font-weight: 600;
}

@font-face {
font-family: 'Miller';
src: url('https://apps.bostonglobe.com/common/font/miller-bold.woff2') format('woff2'), url('https://apps.bostonglobe.com/common/font/miller-bold.woff') format('woff');
font-weight: 600;
}

/* =========================== */
/* Globe font stack examples
/* =========================== */

/* Serif (Miller) */
/* font-family: 'Miller', Georgia, Times New Roman, Times, serif; */
/* font-weight: 600; */

/* Sans-serif (Benton) */
/* font-family: 'Benton', Helvetica, Arial, sans-serif; */
/* font-weight: 600; */

/* Serif */
/* font-family: 'Georgia', Times New Roman, Times, serif; */

/* Sans-serif */
/* font-family: 'Helvetica', Arial, sans-serif; */

/* =========================== */
/* Graphic styles
/* =========================== */

.graphichead {font-family:'BentonSans', Helvetica, Arial, sans-serif; font-size:1.2em;font-weight:bold; display:block;}
.subtitle {font-family:'BentonSans', Helvetica, Arial, sans-serif; font-size:0.9em; line-height:1.4em; margin-top:10px; margin-bottom:15px;}


.verticalBarChart {width:100%; float:left; display:block; margin-bottom:30px;}

.verticalBarChart #main {float:left; width:100%; height:400px; display:block; position:relative; margin-bottom:5px;}

.verticalBarChart #topper {float:left; width:100%; display:block; border-bottom: 1px solid #ccc; position:relative; font-family:'BentonSans', Helvetica, Arial, sans-serif; font-size:0.9em;}
.verticalBarChart .row {float:left; width:100%; display:block; border-bottom: 1px solid #ccc; position:relative; font-family:'BentonSans', Helvetica, Arial, sans-serif; font-size:0.9em;}
.verticalBarChart .label {position: absolute; bottom: 0; margin-bottom:-6px;}

.verticalBarChart #bars {float:right; width:80%; right:0; display:inline-block; position:absolute;}
.verticalBarChart #labels {float:right; width:80%; right:0; display:inline-block; font-family:'BentonSans', Helvetica, Arial, sans-serif; font-size:0.8em; font-weight: lighter; text-transform: uppercase;}

.verticalBarChart .day {height:100%; float:left; display:inline-block; position: relative; margin: 0 0.5%;}
.verticalBarChart .record {width:100%;  position: absolute;} 
.verticalBarChart .daily {width:100%; background:#bf6151; position: absolute;} 

.verticalBarChart #label {position:absolute; padding: 0.5em; background:#FFF; border:1px solid #eee;
-moz-box-shadow:    0px 0px 2px 2px rgba(190,190,190,.1);
-webkit-box-shadow: 0px 0px 2px 2px rgba(190,190,190,.1);
box-shadow:         0px 0px 2px 2px rgba(190,190,190,.1);	
}

.verticalBarChart .name {font-family:'BentonSans', Helvetica, Arial, sans-serif; font-size:0.8em; font-weight: lighter; text-transform: uppercase; width:100%; float:left;}
.verticalBarChart .value {font-family:'BentonSans', Helvetica, Arial, sans-serif;}
.verticalBarChart .value span {font-weight:bold;}



.verticalBarChart .left {float:left;}
.verticalBarChart .right {float:right;}


.verticalBarChart #key {float:left; margin-bottom:1em; font-family:'BentonSans', Helvetica, Arial, sans-serif;}
.verticalBarChart .keyel {display:inline; float:left; margin-right:0.9em;}
.verticalBarChart .keysq {display:inline; float:left; margin-right:0.5em; width:15px; height:20px;}
.verticalBarChart .keytxt {display:inline; float:left; font-family: $sansSerif; font-weight:lighter; font-size:0.8em; text-transform: uppercase;}



.notes{
font-family: 'BentonSans', Helvetica, Arial, sans-serif;
color: #888; 
font-weight: 400;
font-size: .8em;
margin: 0 auto;
margin-bottom: 1.5em;
line-height: 1.2em;
text-align: left;
width: 100%;
float: left;
}


.sub1{
font-family: 'Benton', Helvetica, Arial, sans-serif;
font-size: 1em;
font-weight: 800;
text-transform: uppercase;
color: #333;
line-height: 1.5em;
margin-top: 1em;
margin-bottom: .5em;
width: 100%;
float: left;
}

.feverChart .highcharts-button {display:none;}
.feverChart .datett {font-family: 'BentonSans', Helvetica, Arial, sans-serif; font-weight: lighter; }
.feverChart .valuett {font-family: 'BentonSans', Helvetica, Arial, sans-serif;}
.feverChart .seriesname {font-family: 'BentonSans', Helvetica, Arial, sans-serif; font-size:0.85em; text-transform:uppercase; }
table {margin:0;}

.feverChart #container {margin-bottom:1em; width:100%; float:left; min-width: 310px; height: 400px; margin: 30 auto;}
.feverChart {margin-bottom:30px; width:100%; display:inline-block;}

.feverChart #key {width:100%; float:left;}
.feverChart .keyel {display:inline; float:left; margin-right:0.9em;}
.feverChart .keysq {display:inline; float:left; margin-right:0.5em; border-top:3px solid #999; width:15px; margin-top:0.5em;}
.feverChart .keytxt {display:inline; float:left; font-family: 'BentonSans', Helvetica, Arial, sans-serif; font-weight:lighter; font-size:0.8em; text-transform: uppercase;}
.feverChart .color0 {border-top:3px solid rgba(220,105,81,1);}
.feverChart .color1 {border-top:3px solid rgba(244, 148, 87, 1);}
.feverChart .color2 {border-top:3px solid rgba(250, 186, 84, 1);}
.feverChart .color3 {border-top:3px solid rgba(227, 225, 214, 1);}
.feverChart .color4 {border-top:3px solid rgba(181, 153, 125, 1);}

.horizontalBarChart {width:100%; margin-bottom: 20px; display:inline-block;}

.horizontalBarChart .row { margin-bottom:0.2em; padding-bottom:0.2em; border-bottom:1px dotted #eee; width:100%; float:left;}
.horizontalBarChart .Name { margin-bottom:0.2em; font-family:'BentonSans', Helvetica, Arial, sans-serif; float:left; font-size:0.9em;}
.horizontalBarChart .Value { float:left; display:inline; margin-right:1.5%;}
.horizontalBarChart .Value span { float:left; height:20px; width:100%;}
.horizontalBarChart .ValueNumber { margin-bottom:0.2em; font-family:'BentonSans', Helvetica, Arial, sans-serif; float:left; font-size:0.9em; display:inline;}


.horizontalBarChart .highlight .Name{font-weight:bold;}

.Maps {margin-top:20px; display:inline-block; width:100%; margin-bottom:35px;}

.Maps #chart {width:100%; position:relative;}


.Maps #label {position:absolute; padding: 0.5em; background:#FFF; border:1px solid #EEE;
-moz-box-shadow:    0px 0px 2px 2px rgba(0,0,0,.1);
-webkit-box-shadow: 0px 0px 2px 2px rgba(0,0,0,.1);
box-shadow:         0px 0px 2px 2px rgba(0,0,0,.1);	
}

.Maps .statename {font-family:'BentonSans', Helvetica, Arial, sans-serif; font-size:0.8em; font-weight: lighter; text-transform: uppercase; width:100%; float:left;}
.Maps .value {font-family:'BentonSans', Helvetica, Arial, sans-serif; font-weight:bold;}

.Maps #key {float:left; margin-bottom:1em;}
.Maps .keyel {display:inline; float:right; margin-right:0.9em;}
.Maps .keysq {display:inline; float:left; margin-right:0.5em; width:15px; height:20px;}
.Maps .keytxt {display:inline; float:left; font-family: 'BentonSans', Helvetica, Arial, sans-serif; font-weight:lighter; font-size:0.8em; text-transform: lowercase;}




.stackedBarChart	.row {float:left; margin-bottom:.75em;}
.stackedBarChart	.concept {float:left; margin-bottom:.25em; font-family:'BentonSans', Helvetica, Arial, sans-serif; font-weight:bold; font-size:0.9em;}
.stackedBarChart	.bar {width:100%; float:left; height:35px; }
.stackedBarChart	.portion {display: inline; float:left; height:35px; width:10%; background:#EEE;}	
.stackedBarChart	.portion span {padding:10px 0; margin-left:5px; font-family:'BentonSans', Helvetica, Arial, sans-serif; font-weight:bold; font-size:.7em; display:inline; float:left;}
.stackedBarChart	.portion:hover {cursor:pointer;}

.stackedBarChart	#stackedBarchart {width:100%; float:left; margin-bottom:1em; position: relative;}


.stackedBarChart	#key {width:100%; float:left; margin-bottom:1em;}
.stackedBarChart	.keyel {display:inline; float:left; margin-right:1em;}
.stackedBarChart	.keysq {display:inline; float:left; margin-right:.5em; width:15px; height:15px;}
.stackedBarChart	.keytext {display:inline; float:left; font-family:'BentonSans', Helvetica, Arial, sans-serif; font-weight:normal; font-size: .75em; font-weight: lighter; text-transform: uppercase;}

.stackedBarChart	#tag {position:absolute; padding:0.5em 1em; background:#FFF; border:1px solid #CCC;}
.stackedBarChart	.category {font-family:'BentonSans', Helvetica, Arial, sans-serif; font-weight:normal; font-size: .8em;}
.stackedBarChart	.valueNum {font-family:'BentonSans', Helvetica, Arial, sans-serif; font-weight:bold; font-size: .8em;}

.stackedBarChart	.clearboth {clear:both; display:inline-block; margin-bottom:10px; width:100%;}



.horizontalBarChartTwoValues .row { margin-bottom:0.75em; padding-bottom:0.2em; border-bottom:1px dotted #eee; width:100%; float:left;}
.horizontalBarChartTwoValues .Name { margin-bottom:0.2em; font-weight:bold; font-family:'BentonSans', Helvetica, Arial, sans-serif; width:100%; float:left; font-size:1em;}
.horizontalBarChartTwoValues .Value { float:left; display:inline; margin-right:1.5%;}
.horizontalBarChartTwoValues .clearboth {clear:both; width:100%; display:block; float:left;}

.horizontalBarChartTwoValues .labeled {
font-family:'BentonSans', Helvetica, Arial, sans-serif;
font-size:15px;
float: left;
width: 115px;
text-align:right;
padding-right:8px;
}

.horizontalBarChartTwoValues .Value span{ float:left; height:20px; width:100%;}



.horizontalBarChartTwoValues .ValueNumber { margin-bottom:0.2em; font-family:'BentonSans', Helvetica, Arial, sans-serif; float:left; font-size:0.9em; display:inline;}

.pollSurvey .question {font-family:'BentonSans', Helvetica, Arial, sans-serif; font-size:1em;font-weight:bold; display:block;}

.pollSurvey .holder {width:100%; float:left; display:block; margin-bottom:20px;}

.pollSurvey .row { margin-bottom:0.2em; padding-bottom:0.2em; border-bottom:1px dotted #eee; float:left;}
.pollSurvey .Name { margin-bottom:0.2em; font-family:'BentonSans', Helvetica, Arial, sans-serif; float:left; font-size:0.9em;}
.pollSurvey .Value { float:left; display:inline; margin-right:15px;}
.pollSurvey .Value span{float:left; height:20px; width:100%;}
.pollSurvey .ValueNumber { margin-bottom:0.2em; font-family:'BentonSans', Helvetica, Arial, sans-serif; float:left; font-size:0.9em; display:inline;}


.pollSurvey .highlight .Name{font-weight:bold;}


.circleSquare .row {
	margin-bottom:0.2em;
	padding-bottom:0.2em;
	border-bottom:1px dotted #eee;
	width:100%;
	float:left;
}

.circleSquare .Name {
	margin-bottom:0.2em;
	font-family:'BentonSans', Helvetica, Arial, sans-serif;
	float:left;
	font-size:0.9em;
}

.circleSquare .Value {
	float:left;
	display:inline;
	margin-right:1.5%;
}






.circleSquare .ValueNumber {
	margin:0em 0.7em;
	font-family:'BentonSans', Helvetica, Arial, sans-serif;
	float:left;
	font-size:0.9em;
	display:inline;
}



.circleSquare .highlight .Name {
	font-weight:bold;
}

.pullquote {
	width:100%;
    border-top: 7px solid;
    padding-top: 25px;
    font: bold 25px/29px "Miller Headline Bold", "Times New Roman", Times, Georgia, serif;
    border-bottom: 1px solid #999;
    padding-bottom: 30px;
}

.magGold .pullquote {border-top: 7px solid #febc23;}

@media screen and (min-width: 450px) {

.verticalBarChart #bars {width:85%;}
.verticalBarChart #labels {width:85%;}

}

@media screen and (min-width: 800px) {	
.pullquote {
	width:80%;
	margin-left:10%;
}
}


@media screen and (min-width: 1000px) {	
.pullquote {
	width:70%;
	margin-left:15%;
}
}