/* ------------------------------------------------------------------------- */
/* Fonts                                                                     */
/* ------------------------------------------------------------------------- */
@font-face {
	font-family: Fira;
	src: url('http://schiff.co.nz/fonts/FiraSans-Book.eot'); /* IE9 Compat Modes */
	src: url('http://schiff.co.nz/fonts/FiraSans-Book.woff') format('woff'), url('http://schiff.co.nz/fonts/FiraSans-Book.ttf') format('truetype'); 
	font-weight: normal;
	text-rendering: optimizeLegibility;
}

@font-face {
	font-family: Fira;
	src: url('http://schiff.co.nz/fonts/FiraSans-Light.eot'); /* IE9 Compat Modes */
	src: url('http://schiff.co.nz/fonts/FiraSans-Light.woff') format('woff'), url('http://schiff.co.nz/fonts/FiraSans-Light.ttf') format('truetype'); 
	font-weight: 200;
	text-rendering: optimizeLegibility;
}

@font-face {
	font-family: Fira;
	src: url('http://schiff.co.nz/fonts/FiraSans-SemiBold.eot'); /* IE9 Compat Modes */
	src: url('http://schiff.co.nz/fonts/FiraSans-SemiBold.woff') format('woff'), url('http://schiff.co.nz/fonts/FiraSans-SemiBold.ttf') format('truetype');
	font-weight: bold;
	text-rendering: optimizeLegibility;
}

@font-face {
	font-family: Fira-Mono;
	src: url('http://schiff.co.nz/fonts/FiraMono-Regular.eot'); /* IE9 Compat Modes */
	src: url('http://schiff.co.nz/fonts/FiraMono-Regular.woff') format('woff'), url('http://schiff.co.nz/fonts/FiraMono-Regular.ttf') format('truetype'); 
	font-weight: normal;
	text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------------------- */
/* General                                                                   */
/* ------------------------------------------------------------------------- */
body, html {
	background-color: #fff;
	color: rgb(42, 33, 31);
	min-width: 960px;
	font-family: Fira, Helvetica, Arial, Sans-Serif;
	text-rendering: optimizeLegibility;
	-webkit-font-variant-ligatures: common-ligatures; /* for iOS and Safari 6 */
	font-variant-ligatures: common-ligatures;
	font-feature-settings: "kern" on, "liga" on, "calt" on, "palt" on;
	-moz-font-feature-settings: "kern" on, "liga" on, "calt" on, "palt" on;
	-webkit-font-feature-settings: "kern" on, "liga" on, "calt" on, "palt" on;
	-ms-font-feature-settings: "kern" on, "liga" on, "calt" on, "palt" on;
	-o-font-feature-settings: "kern" on, "liga" on, "calt" on, "palt" on;
  	font-kerning: normal;
  	margin: 0;
}

body {
	padding: 20px;
}

html {
	height: 100%;
	min-height: 650px;
}

a, a:visited {
	color: rgb(42, 33, 31);
	text-decoration: none;
	border-bottom: 1px solid rgb(42, 33, 31);
}

div#metaarea {
	width: 280px;
	float: left;
	overflow: auto;
}

div#leftcontainer {
	float: left;
}

div#map {
	overflow: hidden;
}

div#legend-area {
	width: 280px;
	float: left;
	padding-left: 40px;
}

@media screen and (max-width: 1100px) {
    div#legend-area {
    	float: none;
    	padding: 20px 0 0 0;
    }

    div#map {
    	float: left;
    	width: 600px;
    }

    div#controls {
    	overflow: auto;
    	padding-bottom: 20px;
    }
}

div#credits {
	clear: both;
	padding: 20px 0 20px 0;
	font-size: 0.8em;
}

/* ------------------------------------------------------------------------- */
/* Title                                                                     */
/* ------------------------------------------------------------------------- */
div#heading {
	font-size: 1.5em;
	font-weight: 200;
}

div#notes {
	font-size: 0.9em;
}

/* ------------------------------------------------------------------------- */
/* Map				                                                         */
/* ------------------------------------------------------------------------- */
.regiondot {
	fill: #fff;
	stroke: #444;
	stroke-width: 3px;
}

.regionlabel {
	font-size: 0.8em;
	fill: #333;
	font-weight: bold;
}

.regionlabel-outline {
	stroke: #eee;
	stroke-width: 1px;
	paint-order: stroke;
	stroke-linecap: butt;
	stroke-linejoin: miter;
}

.region-selected {
	fill: rgb(253, 101, 103) !important;
}

.tripline {
	fill: none;
	stroke-linecap: round;
}

.north {
	stroke: rgb(127, 157, 154);
}

.south {
	stroke: rgb(220, 134, 59);
}

.inbound {
	stroke: rgb(35, 82, 53) !important;
}

.outbound {
	stroke: rgb(124, 110, 169) !important;
}

/* ------------------------------------------------------------------------- */
/* Mode controls	                                                         */
/* ------------------------------------------------------------------------- */
div#controls {
	padding-top: 10px;
}

div#controls-title {
	font-size: 0.9em;
	font-weight: bold;
	padding-bottom: 5px;
}

a.mode-control {
	padding: 10px;
	margin-bottom: 10px;
	color: #111;
	text-decoration: none;
	border: none;
	width: 180px;
	height: 21px;
	display: block;
	float: left;
	font-size: 0.9em;
	background-color: rgba(50, 50, 50, 0.1);
}

a.mode-control-selected {
	color: #fff !important;
	font-weight: bold !important;
	background-color: rgba(50, 50, 50, 0.4) !important;
}

/* ------------------------------------------------------------------------- */
/* Trip data table                                                           */
/* ------------------------------------------------------------------------- */
div#tripdata {
	overflow-y: auto;
	overflow-x: hidden;
	width: 250px;
}

div#tripdata-title {
	font-size: 0.8em;
	font-weight: bold;
	padding: 2px 3px 2px 3px;
}

div#tripdata-content {
	font-size: 0.9em;
	padding: 0 3px 0 3px;
}

table, th, tr, td {
	padding: 0;
	margin: 0;
	border: none;
	font-family: Fira-Mono, Helvetica, Arial, Sans-Serif;
	font-size: 0.9em;
}

table#tripcount-table {
	padding: 0;
}

.trips-cell {
	text-align: right;
	width: 50px;
	padding: 0;
	margin: 0;
}

.dest-cell {
	width: 200px;
	text-align: left;
	padding: 0;
	margin: 0;
}

/* ------------------------------------------------------------------------- */
/* Legend                                                                    */
/* ------------------------------------------------------------------------- */
.legend-label {
	font-size: 0.8em;
}

.legend {
	fill: none;
	stroke: rgb(200, 200, 200);
	stroke-linecap: round;
}

.legend-north {
	stroke: rgb(127, 157, 154);
}

.legend-south {
	stroke: rgb(220, 134, 59);
}