.ui-dialog { z-index: 1000 !important ;}


.forbidden
{
	display:none;	
}

body
{
	font-family: Calibri, sans-serif;
	width: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
	padding: 0;
	margin: 0;
}

/* TODO: put #logo, #addRouteCtrl, and #statusBarWrapper inside some position: fixed; div rather having each separately fixed
 * (and #statusBarWrapper not fixed at all)
 */
#logo
{
	position: fixed;
	top: 0;
	left: 0;
	background: white;
	min-height: 50px;
	padding: 3px 1em 0 20px;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	border-bottom-right-radius: 1em;
	z-index: 1000;
}

#logo h3
{
	margin: 0;
}

form#addRouteCtrl
{
	position: fixed;
	top: 0;
	right: 0;
	padding: 0 0.5em 0.5em 0.5em;
	overflow: hidden;
	background: #ffa;
	border-left: 1px solid black;
	border-bottom: 1px solid black;
	border-bottom-left-radius: 1em;
	z-index: 1000;
}

.mobile form#addRouteCtrl > :not(#currRouteListCaptionDiv)
{
	visibility:hidden;
	height: 0;
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
	margin-bottom: 0;
	border-top-width: 0;
	border-bottom-width: 0;
}

.mobile form#addRouteCtrl.hovered > :not(#currRouteListCaptionDiv)
{
	visibility:visible;
	height:auto;
}

/* mobile gets larger fonts */
.mobile form#addRouteCtrl
{
	font-size: 18pt;
}

/* these divs are faux-tables to allow vertical-align and matched heights, while still being semantic HTML */
form#addRouteCtrl #currRouteListBoroDiv > div
{
	display: table;
	width: 100%;
}

form#addRouteCtrl #currRouteListBoroDiv > div > div
{
	display: table-row;
}

form#addRouteCtrl #currRouteListBoroDiv > div > div > *
{
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

form#addRouteCtrl #currRouteListBoroDiv > div > div > :not(:last-child)
{
	border-right: 1px solid black;
}

form#addRouteCtrl table
{
	width: 100%;
}

/* only the caption is visible when the control is not open */

form#addRouteCtrl:not(:hover) > :not(#currRouteListCaptionDiv)
{
	visibility: hidden;
	height: 0;
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
	margin-bottom: 0;
	border-top-width: 0;
	border-bottom-width: 0;
}


form#addRouteCrtl.hovered > (#addRouteDiv)
{
	visibility: visible;
	height:100%;
}
/* not actually used now that #statusBar is used for messages instead of this input */
form#addRouteCtrl input[type="text"][readonly="readonly"]
{
	color: #ccc;
	background: #eee;
}

form#addRouteCtrl #currRouteListHeaderDiv
{
	position: absolute;
	background: #ffa; /* matches #addRouteCtrl */
	z-index: 1005; /* greater than #addRouteCtrl */
}

form#addRouteCtrl #currRouteListDiv
{
	overflow-y: auto;
}

form#addRouteCtrl #currRouteList
{
	border-bottom: 1px solid black;
}

/* these are just place-holder/positioning elements that match the "real" header
 * Done this way to allow the header to be fixed and the table to scroll under it
 */
form#addRouteCtrl table#currRouteList caption,
form#addRouteCtrl table#currRouteList thead
{
	visibility: hidden;
}

form#addRouteCtrl table
{
	margin: 5px 0 0 0;
	border-collapse: collapse;
	width: 100%;
}

form#addRouteCtrl table caption
{
	font-size: 125%;
	font-weight: bold;
	white-space: nowrap;
}

form#addRouteCtrl table th,
form#addRouteCtrl table td
{
	white-space: nowrap;
}

form#addRouteCtrl table thead th,
form#addRouteCtrl table tbody td
{
	border: 1px solid black;
	text-align: center;
}

form#addRouteCtrl table tbody th
{
	border-bottom: 1px solid black;
}

form#addRouteCtrl table thead th
{
	border-top: 0px;
}

form#addRouteCtrl table thead tr th[colspan="2"],
form#addRouteCtrl table tbody tr:last-child td
{
	border-bottom: 0px;
}

form#addRouteCtrl table td:first-child,
form#addRouteCtrl table th:first-child
{
	border-left: 0px;
}

form#addRouteCtrl table td:last-child,
form#addRouteCtrl table th:last-child
{
	border-right: 0px;
}

form#addRouteCtrl table tbody th
{
	cursor: pointer;
}

body.mobile table tbody th
{
	padding: 5px 0;
}

/* the + sign of an unopened section */
form#addRouteCtrl table tbody th::before
{
	content: '+\a0 ';
}

/* the - sign of an opened section, actually − (general note: − looks better when compared to + so it's advisable to use it over hyphens) */
form#addRouteCtrl table tbody th.open::before
{
	content: '\2212 \a0 ';
}

form#addRouteCtrl table tbody td label
{
	color: transparent;
}

/* mobile gets a bigger hit-box for the check */
body.mobile form#addRouteCtrl input[type="checkbox"]
{
	height: 24px;
	width: 24px;
}

/* mobile gets much more padding in the button, resulting in a larger clickable area */
body:not(.mobile) form#addRouteCtrl table tbody td button
{
	padding: 1px;
}

body.mobile form#addRouteCtrl table button
{
	padding: 5px;
}

/* for add/remove's background, left center gets you the +, right center gets you the X */
form#addRouteCtrl table tbody td button.rt-add-remove div
{
	height: 16px;
	width: 16px;
	background: url(../../img/pluscross.png) left center transparent;
}

form#addRouteCtrl table tbody td button.rt-add-remove.rt-remove div
{
	background-position: right center;
}

form#addRouteCtrl #addRouteDiv
{
	padding-top: 0.5em;
}

.mobile form#addRouteCtrl #addRouteDiv
{
	padding-top: 0;
}

form#addRouteCtrl #addRouteDiv #addRouteField
{
	width: 5em;
}

#statusBarWrapper
{
	clear: both;
	font-size: 125%;
	text-align: center;
}

#statusBar
{
	background: white;
	border-radius: 5px;
	z-index: 1000;
}

/* having the last route be flush against the screen looks a little ugly, give a bit more space so it can be scrolled up higher */
.route:last-child
{
	margin-bottom: 50px;
}

:not(#addRouteDiv) > input[type="button"],
:not(#addRouteDiv) > button
{
	font-size: 75%;
}

.direction > input[type="button"],
.direction > button
{
	float: right;
	position: relative;
	top: 2.4em;
}

.direction > button.dir-remove > span,
.direction > button.dir-restore > span
{
	position: relative;
	top: -1px;
	font-family: Calibri;
}

.direction:last-child,
.direction.last
{
	border-bottom: 3px solid black;
}

h2
{
	padding: 2px;
	text-align: center;
	clear: both;
}

h2 span
{
	background: white;
	border-radius: 10px;
}
.mobile h2 span
{
	white-space:no-wrap;
	font-size:medium;
}
.route:nth-child(4)
{
	padding-top: 2em;
}

.dir
{
	margin-top: 50px;
	height: 50px;
}

.dir .line
{
	position: relative;
	top: 6px;
	height: 3px;
	margin: 0 50px;
}

.dir .line-left,
.dir .line-right
{
	position: relative;
	top: 6px;
	height: 0px;
	width: 45px;
	background: transparent !important;
	border-top-width: 3px;
	border-top-style: dashed;
	margin: 0;
}

.dir .line-left
{
	float: left;
}

.dir .line-right
{
	float: right;
}

/* shared by all RtPos elements */
.position
{
	position: absolute;
}

/* the z-indices of the various RtPos elements are carefully set relative to one another to allow hovered elements to "come forward" */
.bus
{
	z-index: 100;
}

.bus:hover
{
	z-index: 200;
}

.bus.hovered
{
	z-index: 125;
}

.bus.tooltipHover .tooltip
{
	display:block;
}

.stop
{
	z-index: 50;
}

.stop:hover,
.stop.hovered
{
	z-index: 150;
}

.stop.hovered .tooltip
{
	display:block;
}

.headway
{
	z-index: 75;
}

.headway.tooltipHover .tooltip
{
	display:block;
}

.headway[data-status="Bunched"][data-flash="true"],
.headway:hover
{
	z-index: 175;
}

.headway.hovered[data-status="Bunched"][data-flash="true"],
.headway.hovered
{
	z-index: 225;
}

.position .dot
{
	position: absolute;
	top: 2px;
	vertical-align: middle;
}

.bus .dot
{
	margin: -11px 0 0 -11px;
	background: url(../../img/B/rt_mgmt_0.png) left top no-repeat transparent;
	width: 35px;
	height: 27px;
}

.bus:hover .dot,
.bus.hovered .dot
{
	background-position: left bottom;
}

[data-dir="1"] .bus .dot
{
	background-image: url(../../img/B/rt_mgmt_1.png);
	background-position: right top;
}

[data-dir="1"] .bus:hover .dot,
[data-dir="1"] .bus.hovered .dot
{
	background-position: right bottom;
}

/* On-Time/Blue - default
[data-dir="0"] .bus.status-1 .dot
{
	background-image: url(../../img/B/rt_mgmt_0.gif);
}

[data-dir="1"] .bus.status-1 .dot
{
	background-image: url(../../img/B/rt_mgmt_1.gif);
}
*/

[data-dir="0"] .bus.status-2:not(.adjusted):not(.flash) .dot
{
	background-image: url(../../img/Y/rt_mgmt_0.png);
}

[data-dir="1"] .bus.status-2:not(.adjusted):not(.flash) .dot
{
	background-image: url(../../img/Y/rt_mgmt_1.png);
}

[data-dir="0"] .bus.status-2:not(.adjusted).flash .dot
{
	background-image: url(../../img/Y/rt_mgmt_0_f.gif);
}

[data-dir="1"] .bus.status-2:not(.adjusted).flash .dot
{
	background-image: url(../../img/Y/rt_mgmt_1_f.gif);
}

[data-dir="0"] .bus.status-2.adjusted:not(.flash) .dot
{
	background-image: url(../../img/Y/rt_mgmt_0_adj.png);
}

[data-dir="1"] .bus.status-2.adjusted:not(.flash) .dot
{
	background-image: url(../../img/Y/rt_mgmt_1_adj.png);
}

[data-dir="0"] .bus.status-2.adjusted.flash .dot
{
	background-image: url(../../img/Y/rt_mgmt_0_adj_f.gif);
}

[data-dir="1"] .bus.status-2.adjusted.flash .dot
{
	background-image: url(../../img/Y/rt_mgmt_1_adj_f.gif);
}

[data-dir="0"] .bus.status-3:not(.adjusted):not(.flash) .dot
{
	background-image: url(../../img/R/rt_mgmt_0.png);
}

[data-dir="1"] .bus.status-3:not(.adjusted):not(.flash) .dot
{
	background-image: url(../../img/R/rt_mgmt_1.png);
}

[data-dir="0"] .bus.status-3:not(.adjusted).flash .dot
{
	background-image: url(../../img/R/rt_mgmt_0_f.gif);
}

[data-dir="1"] .bus.status-3:not(.adjusted).flash .dot
{
	background-image: url(../../img/R/rt_mgmt_1_f.gif);
}

[data-dir="0"] .bus.status-3.adjusted:not(.flash) .dot
{
	background-image: url(../../img/R/rt_mgmt_0_adj.png);
}

[data-dir="1"] .bus.status-3.adjusted:not(.flash) .dot
{
	background-image: url(../../img/R/rt_mgmt_1_adj.png);
}

[data-dir="0"] .bus.status-3.adjusted.flash .dot
{
	background-image: url(../../img/R/rt_mgmt_0_adj_f.gif);
}

[data-dir="1"] .bus.status-3.adjusted.flash .dot
{
	background-image: url(../../img/R/rt_mgmt_1_adj_f.gif);
}

[data-dir="0"] .bus.status-4:not(.adjusted):not(.flash) .dot
{
	background-image: url(../../img/O/rt_mgmt_0.png);
}

[data-dir="1"] .bus.status-4:not(.adjusted):not(.flash) .dot
{
	background-image: url(../../img/O/rt_mgmt_1.png);
}

[data-dir="0"] .bus.status-4:not(.adjusted).flash .dot
{
	background-image: url(../../img/O/rt_mgmt_0_f.gif);
}

[data-dir="1"] .bus.status-4:not(.adjusted).flash .dot
{
	background-image: url(../../img/O/rt_mgmt_1_f.gif);
}

[data-dir="0"] .bus.status-4.adjusted:not(.flash) .dot
{
	background-image: url(../../img/O/rt_mgmt_0_adj.png);
}

[data-dir="1"] .bus.status-4.adjusted:not(.flash) .dot
{
	background-image: url(../../img/O/rt_mgmt_1_adj.png);
}

[data-dir="0"] .bus.status-4.adjusted.flash .dot
{
	background-image: url(../../img/O/rt_mgmt_0_adj_f.gif);
}

[data-dir="1"] .bus.status-4.adjusted.flash .dot
{
	background-image: url(../../img/O/rt_mgmt_1_adj_f.gif);
}

[data-dir="0"] .bus.status-5:not(.adjusted):not(.flash) .dot
{
	background-image: url(../../img/G/rt_mgmt_0.png);
}

[data-dir="1"] .bus.status-5:not(.adjusted):not(.flash) .dot
{
	background-image: url(../../img/G/rt_mgmt_1.png);
}

[data-dir="0"] .bus.status-5:not(.adjusted).flash .dot
{
	background-image: url(../../img/G/rt_mgmt_0_f.gif);
}

[data-dir="1"] .bus.status-5:not(.adjusted).flash .dot
{
	background-image: url(../../img/G/rt_mgmt_1_f.gif);
}

[data-dir="0"] .bus.status-5.adjusted:not(.flash) .dot
{
	background-image: url(../../img/G/rt_mgmt_0_adj.png);
}

[data-dir="1"] .bus.status-5.adjusted:not(.flash) .dot
{
	background-image: url(../../img/G/rt_mgmt_1_adj.png);
}

[data-dir="0"] .bus.status-5.adjusted.flash .dot
{
	background-image: url(../../img/G/rt_mgmt_0_adj_f.gif);
}

[data-dir="1"] .bus.status-5.adjusted.flash .dot
{
	background-image: url(../../img/G/rt_mgmt_1_adj_f.gif);
}

[data-dir="0"] .bus.status-6:not(.adjusted):not(.flash) .dot
{
	background-image: url(../../img/P/rt_mgmt_0.png);
}

[data-dir="1"] .bus.status-6:not(.adjusted):not(.flash) .dot
{
	background-image: url(../../img/P/rt_mgmt_1.png);
}

[data-dir="0"] .bus.status-6:not(.adjusted).flash .dot
{
	background-image: url(../../img/P/rt_mgmt_0_f.gif);
}

[data-dir="1"] .bus.status-6:not(.adjusted).flash .dot
{
	background-image: url(../../img/P/rt_mgmt_1_f.gif);
}

[data-dir="0"] .bus.status-6.adjusted:not(.flash) .dot
{
	background-image: url(../../img/P/rt_mgmt_0_adj.png);
}

[data-dir="1"] .bus.status-6.adjusted:not(.flash) .dot
{
	background-image: url(../../img/P/rt_mgmt_1_adj.png);
}

[data-dir="0"] .bus.status-6.adjusted.flash .dot
{
	background-image: url(../../img/P/rt_mgmt_0_adj_f.gif);
}

[data-dir="1"] .bus.status-6.adjusted.flash .dot
{
	background-image: url(../../img/P/rt_mgmt_1_adj_f.gif);
}

[data-dir="0"] .bus.status-7:not(.adjusted):not(.flash) .dot
{
	background-image: url(../../img/Gray/rt_mgmt_0.png);
}

[data-dir="1"] .bus.status-7:not(.adjusted):not(.flash) .dot
{
	background-image: url(../../img/Gray/rt_mgmt_1.png);
}

[data-dir="0"] .bus.status-7:not(.adjusted).flash .dot
{
	background-image: url(../../img/Gray/rt_mgmt_0_f.gif);
}

[data-dir="1"] .bus.status-7:not(.adjusted).flash .dot
{
	background-image: url(../../img/Gray/rt_mgmt_1_f.gif);
}

[data-dir="0"] .bus.status-7.adjusted:not(.flash) .dot
{
	background-image: url(../../img/Gray/rt_mgmt_0_adj.png);
}

[data-dir="1"] .bus.status-7.adjusted:not(.flash) .dot
{
	background-image: url(../../img/Gray/rt_mgmt_1_adj.png);
}

[data-dir="0"] .bus.status-7.adjusted.flash .dot
{
	background-image: url(../../img/Gray/rt_mgmt_0_adj_f.gif);
}

[data-dir="1"] .bus.status-7.adjusted.flash .dot
{
	background-image: url(../../img/Gray/rt_mgmt_1_adj_f.gif);
}

[data-dir="0"] .bus.status-9:not(.adjusted):not(.flash) .dot
{
	background-image: url(../../img/T/rt_mgmt_0.png);
}

[data-dir="1"] .bus.status-9:not(.adjusted):not(.flash) .dot
{
	background-image: url(../../img/T/rt_mgmt_1.png);
}

[data-dir="0"] .bus.status-9:not(.adjusted).flash .dot
{
	background-image: url(../../img/T/rt_mgmt_0_f.gif);
}

[data-dir="1"] .bus.status-9:not(.adjusted).flash .dot
{
	background-image: url(../../img/T/rt_mgmt_1_f.gif);
}

[data-dir="0"] .bus.status-9.adjusted:not(.flash) .dot
{
	background-image: url(../../img/T/rt_mgmt_0_adj.png);
}

[data-dir="1"] .bus.status-9.adjusted:not(.flash) .dot
{
	background-image: url(../../img/T/rt_mgmt_1_adj.png);
}

[data-dir="0"] .bus.status-9.adjusted.flash .dot
{
	background-image: url(../../img/T/rt_mgmt_0_adj_f.gif);
}

[data-dir="1"] .bus.status-9.adjusted.flash .dot
{
	background-image: url(../../img/T/rt_mgmt_1_adj_f.gif);
}

[data-dir="0"] .bus.status-12:not(.adjusted):not(.flash) .dot
{
	background-image: url(../../img/Ghost/rt_mgmt_0.png);
}

[data-dir="1"] .bus.status-12:not(.adjusted):not(.flash) .dot
{
	background-image: url(../../img/Ghost/rt_mgmt_1.png);
}

[data-dir="0"] .bus.status-12:not(.adjusted).flash .dot
{
	background-image: url(../../img/Ghost/rt_mgmt_0_f.gif);
}

[data-dir="1"] .bus.status-12:not(.adjusted).flash .dot
{
	background-image: url(../../img/Ghost/rt_mgmt_1_f.gif);
}

[data-dir="0"] .bus.status-12.adjusted:not(.flash) .dot
{
	background-image: url(../../img/Ghost/rt_mgmt_0_adj.png);
}

[data-dir="1"] .bus.status-12.adjusted:not(.flash) .dot
{
	background-image: url(../../img/Ghost/rt_mgmt_1_adj.png);
}

[data-dir="0"] .bus.status-12.adjusted.flash .dot
{
	background-image: url(../../img/Ghost/rt_mgmt_0_adj_f.gif);
}

[data-dir="1"] .bus.status-12.adjusted.flash .dot
{
	background-image: url(../../img/Ghost/rt_mgmt_1_adj_f.gif);
}

/* Emergency - totally different icon, so it doesn't go in the loop */
.bus.status-10 .dot
{
	margin: -13.5px 0 0 -13.5px;
	background: url(../../img/E/rt_mgmt_0.gif) -16px -22px no-repeat transparent;
	width: 45px;
	height: 27px;
}

[data-dir="1"] .bus.status-10:not(.flash) .dot
{
	background-image: url(../../img/E/rt_mgmt_1.gif);
}

[data-dir="0"] .bus.status-10.flash .dot
{
	background-image: url(../../img/E/rt_mgmt_0_f.gif);
}

[data-dir="1"] .bus.status-10.flash .dot
{
	background-image: url(../../img/E/rt_mgmt_1_f.gif);
}

.stop .dot
{
	margin: -5.5px 0 0 -5.5px;
	width: 11px;
	height: 11px;
	border: 2px solid transparent;
	border-radius: 50%;
}

.stop:hover .dot
{
	border-color: black !important;
}

/* headway triangles are made (ab)using a quirk of the CSS border rules: if 3/4 borders have a set size, and the remaining side is 0-width,
 * the 0-width side becomes the point of the triangle
 */
.headway .dot
{
	margin: -8px 0 0 -5.5px;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
}

/* this "inner dot" business is there to replicate the black borders that stops get from a border: property and buses get in their image
 * Since headway triangles are created using borders, you cannot give a border to a border, so instead one element (.inner-dot) is nested inside the other (.dot)
 * and the outer element is changed to black to create the black border. Note they don't line up perfectly. TODO: make them line up perfectly.
 */
.headway .dot .inner-dot
{
	margin-top: -7px;
	width: 0;
	height: 0;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
}

[data-dir="0"] .headway .dot
{
	border-left: 20px solid blue;
}

[data-dir="0"] .headway .dot .inner-dot
{
	margin-left: -17px;
	border-left: 12px solid blue;
}

[data-dir="0"] .headway[data-status="Bunched"] .dot,
[data-dir="0"] .headway[data-status="Bunched"] .dot .inner-dot
{
	border-left-color: black;
}

/* CSS animations are kind of a pain */
[data-dir="0"] .headway[data-status="Bunched"][data-flash="true"]:not(:hover):not(.hovered) .dot .inner-dot
{
	        animation: bunched-arrow-flash-0 0.48s infinite alternate;
	   -moz-animation: bunched-arrow-flash-0 0.48s infinite alternate;
	    -ms-animation: bunched-arrow-flash-0 0.48s infinite alternate;
	     -o-animation: bunched-arrow-flash-0 0.48s infinite alternate;
	-webkit-animation: bunched-arrow-flash-0 0.48s infinite alternate;
}

/* this is the same thing five times, with the standards-compliant (but currently unimplemented) name and then the browser-prefixed versions
 * Always check caniuse.com before using any weird CSS like this.
 */
@keyframes bunched-arrow-flash-0
{
	from
	{
		border-left-color: black;
	}
	
	to
	{
		border-left-color: white;
	}
}

@-moz-keyframes bunched-arrow-flash-0
{
	from
	{
		border-left-color: black;
	}
	
	to
	{
		border-left-color: white;
	}
}

@-ms-keyframes bunched-arrow-flash-0
{
	from
	{
		border-left-color: black;
	}
	
	to
	{
		border-left-color: white;
	}
}

@-o-keyframes bunched-arrow-flash-0
{
	from
	{
		border-left-color: black;
	}
	
	to
	{
		border-left-color: white;
	}
}

@-webkit-keyframes bunched-arrow-flash-0
{
	from
	{
		border-left-color: black;
	}
	
	to
	{
		border-left-color: white;
	}
}

[data-dir="0"] .headway[data-status="Spread Out"] .dot,
[data-dir="0"] .headway[data-status="Spread Out"] .dot .inner-dot
{
	border-left-color: red;
}

[data-dir="0"] .headway:hover .dot,
[data-dir="0"] .headway.hovered .dot
{
	border-left-color: black;
}

[data-dir="0"] .headway[data-status="Bunched"]:hover .inner-dot,
[data-dir="0"] .headway[data-status="Bunched"].hovered .inner-dot
{
	border-left-color: #aaa;
}

[data-dir="1"] .headway .dot
{
	border-right: 20px solid blue;
}

[data-dir="1"] .headway .dot .inner-dot
{
	margin-left: 5px;
	border-right: 12px solid blue;
}

[data-dir="1"] .headway[data-status="Bunched"] .dot,
[data-dir="1"] .headway[data-status="Bunched"] .dot .inner-dot
{
	border-right-color: black;
}

[data-dir="1"] .headway[data-status="Bunched"][data-flash="true"]:not(:hover):not(.hovered) .dot .inner-dot
{
	        animation: bunched-arrow-flash-1 0.48s infinite alternate;
	   -moz-animation: bunched-arrow-flash-1 0.48s infinite alternate;
	    -ms-animation: bunched-arrow-flash-1 0.48s infinite alternate;
	     -o-animation: bunched-arrow-flash-1 0.48s infinite alternate;
	-webkit-animation: bunched-arrow-flash-1 0.48s infinite alternate;
}

@keyframes bunched-arrow-flash-1
{
	from
	{
		border-right-color: black;
	}
	
	to
	{
		border-right-color: white;
	}
}

@-moz-keyframes bunched-arrow-flash-1
{
	from
	{
		border-right-color: black;
	}
	
	to
	{
		border-right-color: white;
	}
}

@-ms-keyframes bunched-arrow-flash-1
{
	from
	{
		border-right-color: black;
	}
	
	to
	{
		border-right-color: white;
	}
}

@-o-keyframes bunched-arrow-flash-1
{
	from
	{
		border-right-color: black;
	}
	
	to
	{
		border-right-color: white;
	}
}

@-webkit-keyframes bunched-arrow-flash-1
{
	from
	{
		border-right-color: black;
	}
	
	to
	{
		border-right-color: white;
	}
}

[data-dir="1"] .headway[data-status="Spread Out"] .dot,
[data-dir="1"] .headway[data-status="Spread Out"] .dot .inner-dot
{
	border-right-color: red;
}

[data-dir="1"] .headway:hover .dot,
[data-dir="1"] .headway.hovered .dot
{
	border-right-color: black;
}

[data-dir="1"] .headway[data-status="Bunched"]:hover .inner-dot,
[data-dir="1"] .headway[data-status="Bunched"].hovered .inner-dot
{
	border-right-color: #aaa;
}

.headway:hover .dot
{
	/*border-color: black;*/
}

.position .name
{
	position: absolute;
	border: solid transparent 1px;
	cursor: default;
	white-space: nowrap;
}

.position:hover .name
{
/*	color: transparent;*/
}

/* tooltips! rotation is annoying */
.bus .name
{
	margin: -6px 0 0 16px;
	transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	-ms-transform: rotate(60deg);
	-o-transform: rotate(60deg);
	-webkit-transform: rotate(60deg);
	transform-origin: -13px 10px;
	-moz-transform-origin: -13px 10px;
	-ms-transform-origin: -13px 10px;
	-o-transform-origin: -13px 10px;
	-webkit-transform-origin: -13px 10px;
	z-index: -1;		/* -Mike- added to prevent the name from shwing throught the tooltip. */
}

[data-dir="1"] .bus .name
{
	margin-left: 26px;
}

.stop .name
{
	margin: -5.5px 0 0 8.5px;
	transform: rotate(-60deg);
	-moz-transform: rotate(-60deg);
	-ms-transform: rotate(-60deg);
	-o-transform: rotate(-60deg);
	-webkit-transform: rotate(-60deg);
	transform-origin: -7.5px 10px;
	-moz-transform-origin: -7.5px 10px;
	-ms-transform-origin: -7.5px 10px;
	-o-transform-origin: -7.5px 10px;
	-webkit-transform-origin: -7.5px 10px;
}

.position .tooltip
{
	font-weight: bold;
	border: 1px solid black;
	min-width: 12em;
	background-color: white;
}

.bus .tooltip
{
	margin: 13px 0 0 12px;
}

.stop .tooltip
{
	margin: 9px 0 0 7px;
}

.headway .tooltip
{
	bottom: -100%;
	margin: 10px 0 0 10px;
}

/*.position:not(:hover) .tooltip
{
	display: none;
}*/

.position .tooltip
{
	display: none;
}

.position .tooltip a
{
	float: right;
	margin: 0 0.2em;
	font-size: 75%;
	text-decoration: underline;
	color: blue;
	cursor: pointer;
}

.headway .tooltip a,
.tooltip a.map-link
{
	clear: right;
}

.tooltip p
{
	white-space: nowrap;
	margin: 0;
}

/* when a RtPos is too close to the right edge of the screen,
 * resizing.js gives it this .against-right-edge so it extends to the left of the RtPos element instead of the right */
.position:hover .tooltip.against-right-edge
{
	position: absolute;
	right: 100%;
}
.tooltip.against-right-edge
{
	position: absolute;
	right: 100%;
}
/*
.stop:hover .tooltip.against-right-edge
{
	position: absolute;
	right: 100%;
}
*/
form.dir-form
{
	position: relative;
	/*margin-top: -20px;*/
	/*margin-bottom: -20px;*/
	margin: 0 15px;
	text-align: center;
}

.dir:not(:last-child) form.dir-form
{
	border-bottom: 1px solid black;
}

.dir-div
{
	width: 12em;
}

[data-dir="0"] .dir-select.Start
{
	/*text-align: left;*/
	float: left;
}

[data-dir="0"] .dir-select.Finish
{
	/*text-align: right;*/
	float: right;
}

[data-dir="1"] .dir-select.Start
{
	/*text-align: right;*/
	float: right;
}

[data-dir="1"] .dir-select.Finish
{
	/*text-align: left;*/
	float: left;
}

.dir-label
{
	display: none;
}

.status-6,
.hide
{
	display: none;
}

/* #loadTarget is where form.js addRoute puts newly-generated HTML before placing them in the correct locations */
#loadTarget
{
	display: none;
}

/* Terminal Recap CSS*/
#terminalRecap
{
	text-decoration:underline;
	cursor:pointer;
}