/*
NOTE 1: CSS MEDIA QUERIES CAN BE USED TO SCALE THE MAP BUT ENSURE 
YOU SET Set "enableMapJavaScriptScaling" TO 0 IN "app.js" or BOTH
WILL BE BATTLING FOR SETTING THE HEIGHT VALUES OF #svg.

NOTE 2: You will need to adjust the width snapping to suit your needs
NOTE 3: You will need to set your desired sizes/styles for each point
*/

@media all and (min-width: 960px) {
	#svg { height: 500px !important }
	#blue-bar #svg { height: 200px !important;}
}
@media all and (max-width: 959px) and (min-width: 860px) {
	#svg { height: 400px; }
	#blue-bar #svg { height: 200px !important;}
}
@media all and (max-width: 859px) and (min-width: 660px) {
	#svg, #blue-bar #svg { height: 350px; }
}
@media all and (max-width: 659px) and (min-width: 460px) {
	#svg, #blue-bar #svg { height: 300px; }
}
@media all and (max-width: 459px) and (min-width: 360px) {
	#svg, #blue-bar #svg { height: 250px; }
}
@media all and (max-width: 359px) {
	#svg, #blue-bar #svg { height: 100px; }
}
@media all and (min-width: 700px) {
	.page-template-page-magazine-sidebar-php #svg { height: 400px !important; }
}

#gr1:hover { cursor: pointer; }
#gr2:hover { cursor: pointer; }
#gr3:hover { cursor: pointer; }
#gr4:hover { cursor: pointer; }
#gr5:hover { cursor: pointer; }
#gr6:hover { cursor: pointer; }
#gr7:hover { cursor: pointer; }
#gr8:hover { cursor: pointer; }
#gr9:hover { cursor: pointer; }
#gr10:hover { cursor: pointer; }
#gr11:hover { cursor: pointer; }
#gr12:hover { cursor: pointer; }
#gr13:hover { cursor: pointer; }
#gr14:hover { cursor: pointer; }
#gr15:hover { cursor: pointer; }
#gr16:hover { cursor: pointer; }
#gr17:hover { cursor: pointer; }
#gr18:hover { cursor: pointer; }
#gr19:hover { cursor: pointer; }
#gr20:hover { cursor: pointer; }