<style type='text/css'>

/* ### GLOBAL ### */
.clearBoth { clear: both !important;}

.background {
  fill: none;
  pointer-events: all;
}

#states {
  fill: #aaa;
}

#states .active {
  fill: orange;
}

#state-borders {
  fill: none;
  stroke: #fff;
  stroke-width: 1.5px;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}

.svgKey path {display: none}


/* bar chart */
#statewidechart svg text {font-family: 'Open Sans', sans-serif; font-size: 14px; fill: #fff; z-index: 100; font-weight: 600;}
#statewidechart svg text#halfway {font-size: 12px; fill: #000; }
#statewidechart svg g rect {z-index: 10;}


/* ### CONTAINERS ### */
svg { float: right; }
#svgBox { 
	position: relative; width: 100%; max-width: 645px; height: auto; 
	font-family: 'Open Sans', sans-serif; 
	border-top: solid 1px rgb(204,204,204); 
	padding: 1em 0;
	border-bottom: solid 1px rgb(204,204,204); 
}
#svgNav { width: 220px; position: absolute; }

#svgMap { width: 100%; position absolute; }
#mapWrap { padding-left: 60px; }
#svgChatBloc { padding: 10px 0 0 20px; }


/* ### TOOLTIPS ### */
.qtip-content, .qtip-title {  font-family: 'Open Sans'; font-weight: 300; }
.qtip-title { font-weight: 600; font-size: 15px; line-height: 16px; padding: 3px 0; text-transform: uppercase; }


/* ### MAP OUTLINES ### */
.svgTown { stroke-width: .25; }
.svgTownActive { cursor: pointer; }
.svgTownActive:hover { opacity: .5; }
.counties { fill: transparent; pointer-events: none; stroke: none; }
.state { stroke: none; fill: transparent; pointer-events: none; }

/* ### MAP KEY ### */
.svgKey { font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 14px;  }
.keyChit { stroke: rgb(200,200,200); stroke-width: .5; }


/* ### BUTTONS ### */
.switchbuttons {width: 100%; display: block; padding: 0px;}
.svgButton { font-family: 'Open Sans', sans-serif; text-transform: uppercase; 
	width: 35%; display: inline-block;
	padding: 8px; height: 1.25em; 
	background-color: white; cursor: pointer; border: solid 1px rgb(225,225,225); 
	margin-top: -1px; color: rgb(100,100,100); font-size: 13px; font-weight: 600; letter-spacing: 1px; }
.svgButton.active, .svgButton:hover { 
	background-color: rgb(198,40,40); 
	border: solid 1px rgb(198,40,40); 
	color: rgb(255,255,255); 
    -webkit-transition: background 0.5s linear;
    -moz-transition: background 0.5s linear;
    -ms-transition: background 0.5s linear;
    -o-transition: background 0.5s linear;
    transition: background 0.5s linear;
}
.svgButton:last-child { margin-bottom: 20px; }


/* ### TEXT ### */
.svgH1 { font-family: 'Lusitana', sans-serif; margin-top: 0; margin-bottom: 15px; font-size: 48px; font-weight: 700; letter-spacing: -1px; line-height: 52px; }
.bcBold { font-weight: 700; }
#iaAnno { text-align: right; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 13px; padding: 7px 0 15px 0; letter-spacing: -.5px; }
#mapTitle { background-color: rgb(249,249,249); padding: 4px 0 6px 10px; border-top: solid 1px rgb(204,204,204); position: relative; }
#mapTitleText { font-size: 24px; padding-top: 7px; float: left; font-family: 'Open Sans', sans-serif; letter-spacing: -1px; font-weight: 700; line-height: 24px; }

#svgNav h3 { margin: 0 0 0 0!important; padding: 0 0 6px 0; font-size: 13px; line-height: 13px; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; color: rgb(70,70,70); }

#svgChatBloc p { font-family: 'Lusitana',serif; color: #505050; font-size: 18px; line-height: 24px; margin: 0px; padding: 0 0 20px 0; letter-spacing: -0.3px; }


/* ### TOWN INFO ### */
#svgClick h2 { font-family: 'Open Sans', sans-serif; font-weight: 600; color: rgb(70,70,70); font-size: 18px; line-height: 19px; text-transform: uppercase; letter-spacing: 1px; border-bottom: solid 1px rgb(235,235,235); margin: 0 0 5px 0; padding: 5px 0 7px 0; }
#svgClick { padding-top: 10px; font-weight: 300; }
#svgClickText { padding-right: 10px; }
#svgClickText span { font-weight: 700; }
h3.downMap { padding-top: 15px !important; }

/* ### SEARCH ### */
#mapSearch { margin: 0; width: auto; height: 26px; padding: 6px 0; border: solid 1px rgb(225,225,225); background: url(https://dev.mainetodaymedia.com/towntrac/V2/imgTrac/tracSearch.png) 172px 12px no-repeat rgb(255,255,255); }
#mapSearch input { font-family: 'Open Sans', sans-serif; font-weight: 300; color: rgb(150,150,150); border: none; height: 15px; font-size: 12px; text-transform: uppercase; font-weight: 600; letter-spacing: 1px; padding-left: 10px; width: 155px; outline: none; }
.ui-menu-item { font-family: 'Open Sans', sans-serif; font-weight: 300; }
.ui-corner-all { border-radius: 0 !important; }
.ui-menu-item { text-transform: uppercase; font-size: 13px;  }
.ui-widget-content a { color: rgb(70,70,70); }
a.ui-corner-all:hover, .ui-menu-item a:hover { background-color: rgb(198,40,40); color: rgb(255,255,255); }
.ui-autocomplete { background-color: rgb(255,255,255); }
#mapTowns { font-size: 12px; line-height: 15px; }


/* ### SEARCH & TOOLTIP TABLES ### */
table.tipster, table.clickster { width: 100%; border-collapse: collapse; padding: 0; border: none !important; margin-bottom: 0px !important;}
td.tipLeft, td.clickLeft { font-size: 14px; font-weight: 300; text-align: left; padding-right: 10px; padding-bottom: 1px; vertical-align: top; }
td.tipRight, td.clickRight { font-size: 14px; font-weight: 700; padding-bottom: 1px; vertical-align: top; text-align: right; }


/* ### DATATABLES ### */
th{width:18%;}
.group{background:#f1f1f1;font-weight:bold;}
 table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd{background-color:#ffffff;}
.sorting{text-align:left;}


/* ### COMPASS ### */
#d3ZoomBox { width: 29px; height: 55px; position: absolute; left: 240px; top: 20px; border-radius: 2px; box-shadow: 0 0 2px rgba(0,0,0,.3); z-index: 5; }
#d3ZoomPlus { width: 29px; height: 26px; background: url(https://dev.mainetodaymedia.com/devMap/img/d3Plus.png) left top no-repeat; }
#d3ZoomMinus { width: 29px; height: 26px; background: url(https://dev.mainetodaymedia.com/devMap/img/d3Minus.png) left top no-repeat; }
#d3ZoomMid { width: 29px; height: 3px; background: url(https://dev.mainetodaymedia.com/devMap/img/d3Mid.png) left top no-repeat; }
#d3ZoomPlus:hover { background-position: right top; cursor: pointer; }
#d3ZoomMinus:hover { background-position: right top; cursor: pointer; }





/* ######## MOBILE ONLY ######## */

@media screen and (min-width: 320px) and (max-width: 645px) {
	
	#mapWrap { padding-left: 5px; }
	#svgBox { width: auto; float: none; height: auto; }
	#svgKey { width: auto; border-right: none; height: auto; }
	#svgMap { float: none; height: auto; padding: 0; width: 100%; position: relative; margin: 0 auto;  }
	#svgLeft { width: auto; }
	#svgNav { width: 100%; float: none; position: relative;}
	svg { position: relative; margin: 0 auto; }
	#svgChat { width: auto; float: none; height: auto; border: none; }
	#svgChatBloc { padding: 0; }
	#mapSearch input { width: 85%; }
	.svgButton { width: 50% !important; float: left; box-sizing: border-box; font-size: 10px; padding: 4px 7px 7px 7px; line-height: 16px; height: 27px; overflow: hidden; }
	#mapSearch { background-position: 273px 12px; width: auto; }
	#keyTitle {font-size: 12px;}
	#svgLeft, #svgChat { display: block; }
	#d3ZoomBox { right: auto; left: 20px; top: 20px; }
	#mapWrap { position: relative; }
	.ui-autocomplete {z-index: 100;}
	.svgKey text {font-size: 10px;}
}


</style>