#map_canvas, #NameIndexContainer {height: 425px}
#map_canvas, #MapMessage {width: 400px}
#NameIndexContainer {width: 270px}
#NameIndexContainer .fieldset {padding: 0; position: absolute; left: 0; right: 0; width: 100%}
#NameIndexContainer .fieldset .fieldset-legend {margin-left: 5px}
#NameIndexContainer .fieldset .NameIndex div {padding-left: 7px}
#NameIndexContainer .fieldset .NameIndexBox {position: absolute; top: 9px; bottom: 0; left: 0; right: 0; width: 100%}
@media (max-width: 740px) {
	/* just before the name index falls down below the map due to the float */
	.large-map #NameIndexContainer.left {width: 400px !important} /* make it specific enough to override the width:177px at viewport with 530px in google-maps.css */
	#map-container {margin-right: 0; float: none}
	#NameIndexContainer {float:none; margin-right: 0 !important}
	.chart-container {margin-right:0 !important}
}
@media (max-width: 590px) {
	/* just before chart2's legend sticks out too far */
	#chart2.chart table.jqplot-table-legend {right: 20px !important}
}
@media (max-width: 470px) {
	/* just before chart1 is too big */
	.chart, .chart-center {width: 270px !important; height: 250px !important}
}
@media (max-width: 445px) {
	.large-map #NameIndexContainer.left {width: 270px !important}
}

#controls {width: 245px}

.chart-container {position: relative}
.chart {height: 400px; width: 430px} /* set .chart-center left and width when changing this width */
.chart-center {position: absolute; top: 125px; left: 15px; width: 400px; text-align: center}
.chart-message {display: none; padding: 0 20px; font-size: 85%; position: relative; top: -20px}
.chart-csv-download-links {text-align: center}

/*#chart2_container {width: 550px}*/
#chart2-center {top: 40px; left: 40px}
#chart2 table.jqplot-table-legend {width: 100px; right: -100px !important; margin:0}

#chart-loading-indicator {width: 32px; height: 32px; display: none}

#controls .disabled {color: #a0a0a0}
#valid-data-years-container {font-size: 75%}
#reference-controls {font-size: 75%}
.ui-datepicker {font-size: 10px}
.jqplot-highlighter-tooltip {background-color: white}
.jqplot-point-label {text-align: right; font-size: 8pt} /* used to have width: 280px but doesn't seem necessary and interferes with .no-data-label */
.no-data-label {font-size: 6pt; text-align: center}
td.jqplot-table-legend {border-style: none; padding: 2px 0 2px 5px !important}
td.jqplot-table-legend > div {padding:0; width: 12px}
.no-data * {color: #a0a0a0 !important}
#reference-controls * {vertical-align: middle}
#reference-controls div.swatch {display: inline-block; border:1px solid #cccccc; margin-left: 3px; margin-right: 5px}
label * {vertical-align: middle}