* {
	margin: 0;
	padding: 0;
}

body {
	margin: 10px;
	padding: 0;
	background-color: white;
	color: #101010;
	font-family: "Helvetica Neue",Helvetica, Arial, sans-serif;
	sfont-size: 12px;
	sline-height: 15px;
}





/* Vis Container */

#visContainer {
	position: relative;
	width: 950px;
	swidth: 90%;
	height: auto;
	background-color: #ccc;
}

#visContainer #loading {
	position: absolute;
	width: 900px;
	top: 200px;
	padding: 30px;
	background-color: #fff;
	font-size: 18px;
	line-height: 24px;
	font-weight: bold;
	color: #333;
}

#visContainer #loading #spinner {
	display: inline-block;
	width: 50px;
	height: 15px;
}

#storybox {
	position: absolute;
	top: 0;
	left: 0;
	width: 350px;
	height: 300px;
	spadding: 20px;
	padding-top: 0px;
	padding-left: 0px;
	sbackground-color: #fff;
	border-style: none;
	border-width: 1px;
	border-color: #ccc;
	overflow: hidden;
}

#storybox h1 {
	font-family: Georgia, serif;
	letter-spacing: -0.9px;
	margin-bottom: 15px;
	font-size: 20px;
	font-weight: normal;
	line-height: 22px;
}

#storybox p {
	margin-bottom: 15px;
	font-size: 13px;
	line-height: 16px;
}

#storybox span.storyButton {
	display: inline-block;
	sposition: absolute;
	position: inline;
	bottom: 20px;
	padding: 5px;
	color: #333;
	font-size: 12px;
	font-weight: bold;
	border-style: dotted;
	border-width: 0.25px;
	border-color: #ccc;
	/*text-shadow: 1px 1px 1px black;
	border-style: solid;
	-webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
	-webkit-transition: all 0.1s ease-in;
	*/cursor: pointer;
}

#storybox span.storyButton.next {
	sbackground-color: #519c0d;
	background-color: #efefef;
	left: -10px;
	sright: 0;
	-moz-border-radius: 7px 7px 7px 7px;
	-webkit-border-radius: 7px 7px 7px 7px;
	border-radius: 0px 7px 7px 0px/*
	-moz-border-radius: 7px 0 0 7px;
	-webkit-border-radius: 7px 0 0 7px ;
	border-radius: 7px 0 0 7px;*/
}

#storybox span.storyButton.next:hover {
	scolor: #077f00;
	text-shadow: none;
	color:#fff;
	sbackground-color: #9fec8a;
	background-color: #666;
	border-color: #67e824;
}

#storybox span.storyButton.previous {
	display: none;
	background-color: #999;
	sborder-width: 3px 3px 3px 0;
	sborder-color: #777;
	left: 0;
	-moz-border-radius: 7px 7px 7px 7px;
	-webkit-border-radius: 7px 7px 7px 7px;
	border-radius: 7px 7px 7px 7px;
}

#storybox span.storyButton.previous:hover {
	color: black;
	text-shadow: none;
	background-color: #999;
	border-color: #555;
}

#texasTooltip {
	position: absolute;
	top: 0;
	left: 0;
	padding: 10px;
	background-color: white;
	border-style: dotted;
	border-width: 1px;
	border-color: #ccc;
	-moz-border-radius: 0 7px 7px 7px;
	-webkit-border-radius: 0 7px 7px 7px;
	border-radius: 0 7px 7px 7px;
	-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

#texasTooltip .city {
	font-size: 18px;
	line-height: 24px;
	font-weight: bold;
}

#texasTooltip .fee,
#texasTooltip .population {
	font-size: 14px;
	line-height: 18px;
}



/* Visualization */
#vis {
	display: block;
	overflow: hidden;
}

#vis .hidden {
	display: none;
}



/* All vis text */
#vis text {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}



#vis #map #legend {
}

#vis #map #legendTitle {
	font-size: 10px;
}




/* Circles */
#vis #map circle {
	stroke: black;
	stroke-width: 0.25;
	cursor: pointer;
}

#vis #map #nationalCityLabels text,
#vis #map #texasCityLabels text {
	display: none;
	font-size: 11px;
	font-weight: bold;
	fill: black;
	pointer-events: none;
}

#vis #map #nationalCityLabels text {
	display: block;
}


/* All vis text */
#vis #labels text {
	font-size: 12px;
	cursor: pointer;
}



/* Chart elements */
#vis #charts {
	shape-rendering: crispEdges;
}

#vis #charts #sortByCityButton {
	cursor: pointer;
	font-size: 12px;
	font-weight: bold;
	fill: #555;
}

#vis #charts #sortByCityButton:hover {
	fill: blue;
}

#vis #charts #sortByTexasCityButton {
	cursor: pointer;
	font-size: 12px;
	font-weight: bold;
	fill: #555;
}

#vis #charts #sortByTexasCityButton:hover {
	fill: blue;
}


/* City labels */

#vis #charts #labels text {
	sfill: #555;
}

#vis #charts #labels text.texas {
	fill: #333;
	font-weight: bold;
}



/* Chart titles */
#vis #charts .chart .title text {
	font-size: 13px;
	letter-spacing: -0.5px;
	font-weight: bold;
	cursor: pointer;
}

#vis #timelineCharts #timelineChart .title text {
	font-size: 13px;
	letter-spacing: -0.5px;
	font-weight: bold;
	cursor: pointer;
}

#vis #charts .chart .title.highlight text {
	sfill: #555;
	fill: #111;
	text-decoration: underline;
}

#vis #charts .chart.locked .title text {
	text-decoration: none;
}

#vis #charts .chart .title rect {
	sfill: #ccc;
	/*opacity: 0.2;*/
	shape-rendering: crispEdges;
	cursor: pointer;
}

#vis #charts .chart .title.highlight rect {
	fill: yellow;
}

#vis #charts .chart.locked .title rect {
	fill: green;
}








/* Texas bgbars */
#vis #charts #bgbars rect.texas {
	sfill: #dde0fd;
	fill: #fffad1;
	opacity: 1;
}



/* Value labels */
#vis #charts .chart .row .value {
	pointer-events: none;
	font-size: 12px;
	font-weight: bold;
	fill: white;
}

#vis #charts .chart .row .value.outside {
	fill: #111;
}

#vis #charts .chart .row.highlight .value {
	opacity: 1.0;
}

#vis #timelineCharts #timelineChart .row.highlight .value {
	opacity: 1.0;
	fill: #ffcc00;
}


/* Axes */
#vis #charts .axis path,
#vis #charts .axis line {
    fill: none;
    stroke: #777;
    shape-rendering: crispEdges;
}

#vis #charts .axis text {
    font-family: sans-serif;
    font-size: 11px;
    fill: #777;
}



/* Pass mouse events through to bgrects */

#vis #charts .chart .row rect,
#vis #charts .chart .label,
#vis #charts #labels text {
	pointer-events: none;
}




/* Colors */

#vis #map circle.highlight,
#vis #charts .chart .row.highlight rect,
#vis #timelineCharts #timelineChart .row.highlight rect,



#vis #charts #labels text.highlight {
	sfill: #e85525;
	fill: #ffcc00;
}



/* gm attempt to override color of bars wo highlight*/
/**/
#timelineValueBars rect.row {

	sfill: #ff00ff;
	sstroke-width:1.0;
}


/*#timelineValueBars rect{

	fill: #336699;
	stroke-width:1.0;
}*/

#timelineValueBars  rect.highlight{
	fill: #000;
	sstroke-width:3.0;
	stroke-width:0;
}
/* gm attempt to highlight bars 130719 */
#vis #timelineCharts #timelineChart #timelineValueBars rect.row.highlight {

	fill: #ffcc00;
	stroke:#ffcc00;
	ssstroke-width:3.0;
	stroke-width:0;
}

#vis #timelineCharts #timelineChart #timelineValueBars rect.row.inactive {

	fill: #efefef;
	ssstroke-width:3.0;
	stroke-width:0;
}

#vis #timelineCharts #timelineChart #timelineValueBars rect.row.nodate {

	fill: #73a78c;
	stroke-width:2;
	stroke-color:#fff;
}


#vis #timelineCharts #timelineChart #timelineValueBars rect.row.inactive.nodate {

	fill: #73a78c;
	stroke-width:0;
	stroke-color:#fff;
}


#vis #timelineCharts #timelineChart #timelineValueBars rect.row.inactive.highlight {

	fill: #ffcc00;
	stroke:#ffcc00;
	stroke-width:0;
	ssstroke-width:0;
}




#vis #timelineCharts #timelineChart #timelineValueBars rect.row.water {
	fill: #336699;
	sfill: #ff00ff;
	sstroke-width:1.0;
}



#vis #timelineCharts #timelineChart #timelineValueBars rect.row.highlight,
#vis #timelineCharts #timelineChart #timelineValueBars rect.row.water.highlight  {

	fill: #ffcc00;
	stroke:#ffcc00;
	ssstroke-width:3.0;
	stroke-width:0;
}

#vis #timelineCharts #timelineChart #timelineValueBars rect.row.water.inactive {

	fill: #efefef;
	ssstroke-width:3.0;
	stroke-width:0;
}

#vis #timelineCharts #timelineChart #timelineValueBars rect.row.water.inactive.highlight {

	fill: #ffcc00;
	stroke:#ffcc00;
	stroke-width:3.0;
	ssstroke-width:0;
}

#timelineValueBars .City, #bayAreaOpenSpace .City{
	sfill:  #308E90;
	sfill: #C09542;
	fill: #c34022;
}
#timelineValueBars .State, #bayAreaOpenSpace .State{
	sfill: #2F885D;
	sfill: #B95340;
	fill: #ebd032;
}
#timelineValueBars .Special, #bayAreaOpenSpace .Special{
	sfill: #306298;
	sfill: #B0C446;
	fill: #6FC44E;
}
#timelineValueBars .County, #bayAreaOpenSpace .County{
	sfill: #2F8C77;
	sfill: #BD7340;
	fill: #39ABA4;
}
#timelineValueBars .Non, #bayAreaOpenSpace .Non{
	sfill: #307994;
	sfill: #C2B644;
	fill: #51AAC5;
}

#timelineValueBars .Federal, #bayAreaOpenSpace .Federal{
	sfill: #2F8446;
	sfill: #B5404A;
	fill: #3A72B0;
}





#vis #map #nationalCityLabels text.highlight,
#vis #map #texasCityLabels text.highlight {
	display: block;
}





#storyNotes {
	margin-top: 25px;
	margin-bottom: 15px;
	background-color: white;
	font-size: 12px;
	font-weight: normal;
	color: #777;
}










/* JS & SVG warnings */

#warnings {
	width: 960px;
	//height: 90px;
	background-color: #fff;
	/* background-image: url(../images/gray_map.png); */
	background-repeat: no-repeat;
}

#warnings div {
	position: relative;
	width: 960px;
	top: 10px;
	padding: 0px;
	smargin-left: 15px;
	margin-bottom: 20px;
	background-color: rgba(235, 0, 0, 0.9);
	background-color: #cc0000;
	font-size: 14px;
	line-height: 18px;
	font-weight: bold;
	color: #fff;
}

#warnings div a {
	color: #336699;
}

#warnings div a:hover {
	color: #ffcc00;
}

html.no-js #warnings #jswarning {
	display: block;
}
html.js #warnings #jswarning,
html.no-js #warnings #svgwarning,
html.svg.inlinesvg #warnings #svgwarning {
	display: none;
}

/* Hide all warnings if all is OK */
html.js.svg.inlinesvg #warnings {
	display: none;
}





/* Hidden */

.hidden {
	display: none;
}



/* BLC STUFF */


.blc {
	
	sposition: absolute;
	stop: 725px;
	sleft:20px;
	
	width: 916px;
	background: #f9f9f9;
	display:block;
	overflow: hidden;
	margin-left: 1px;
	margin-top: -19px;
	padding:10px;
	padding-top: 15px;
	padding-left: 20px;
	border-top-style: solid;
	border-left-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-top-width: 1px;
	border-left-width: 1px;
	border-right-width: 2px;
	border-bottom-width: 3px;
	border-top-color: #000;
	border-left-color: #000;
	border-right-color: #666;
	border-bottom-color: #000;
	margin-bottom:0px;
	
}

.logoBLC {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 11px;
	color: #333;
	margin-top: 0px;
	padding-top: 2px;
	margin-bottom: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
	margin-right: 0px;
	padding-right: 0px;
	top: 795px;
	right: 900px;
	width: 230px;
	float: right;
}

.sourceLine {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 18px;
	color: #333;
	margin-top: 0px;
	padding-top: 0px;
	margin-bottom: 10px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.sourceLineFirst {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 14px;
	color: #333;
	margin-top: 0px;
	padding-top: 0px;
	margin-bottom: 10px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.blc a {
	font-weight: bold;
	scolor: #21436c;
	color: #010101;
	text-decoration: none;
}