@charset "utf-8";
/* CSS Document */

/* add custom site CSS here */

/* A Route not in use currently 
.RouteAPanel a:hover {
    background-color: #FFFFFF;
}

.RouteAPanel a {
    display: block;
    border: 5px solid #D68006; 
    border-radius: .5rem;
    padding: 1.2em;
    background-color: #D68006;
    min-height: 12.5em;
}

.RouteAPanel h3 {
    color: #FFFFFF;
}

.RouteAPanel a:hover h3 {
    color: #000000;
}

*/


.RouteBPanel a {
    display: block;
    border: 5px solid #BD0000; 
    border-radius: .5rem;
    padding: 1.2em;
    background-color: #BD0000;
    min-height: 12.5em;
}

.RouteBPanel a:hover {
    background-color: #FFFFFF;
}

.RouteBPanel a:hover P {
    background-color: #FFFFFF;
    color: #000000;
}

.RouteBPanel p {
    color: #FFFFFF;
}

.RouteBPanel h3 {
    color: #FFFFFF;
}

.RouteBPanel a:hover h3 {
    color: #000000;
}

.BRouteButton {
    border: 5px solid #BD0000;
    border-radius: .5rem;
    padding: 0.4em 0.6em;
    background-color: #bd0000;
    color: white;
    font-weight: bold;
    width: 8em;
    font-size: 130%;
    margin-bottom: 0.5em;
}

.RouteCPanel a:hover {
    background-color: #FFFFFF;
}

.RouteCPanel a:hover p {
    background-color: #FFFFFF;
    color: #000000;
}


.RouteCPanel a {
    display: block;
    border: 5px solid #005B94; 
    border-radius: .5rem;
    padding: 1.2em;
    background-color: #005B94;
    min-height: 12.5em;
}

.RouteCPanel p {
    color: #FFFFFF;
}

.RouteCPanel h3 {
    color: #FFFFFF;
}

.RouteCPanel a:hover h3 {
    color: #000000;
}


.RouteCPanel a:hover {
    background-color: #FFFFFF;
}

.RouteEPanel a {
    display: block;
    border: 5px solid #DF3603; 
    border-radius: .5rem;
    padding: 1.2em;
    background-color: #DF3603;
    min-height: 12.5em;
}

.RouteEPanel p {
    color: #FFFFFF;
}

.RouteEPanel h3 {
    color: #FFFFFF;
}

.RouteEPanel a:hover h3 {
    color: #000000;
}

.RouteEPanel a:hover {
    background-color: #FFFFFF;
}

.RouteEPanel a:hover p {
    background-color: #FFFFFF;
    color: #000000;
}

.ERouteButton {
    border: 5px solid #DF3603;
    border-radius: .5rem;
    padding: 0.4em 0.6em;
    background-color: #DF3603;
    color: white;
    font-weight: bold;
    width: 8em;
    font-size: 130%;
    margin-bottom: 0.5em;
}


.RouteWPanel a:hover {
    background-color: #FFFFFF;
}

.RouteWPanel a {
    display: block;
    border: 5px solid #008571; 
    border-radius: .5rem;
    padding: 1.2em;
    background-color: #008571;
    min-height: 12.5em;
}

.RouteWPanel h3 {
    color: #FFFFFF;
}

.RouteWPanel p {
    color: #FFFFFF;
}

.RouteWPanel a:hover h3 {
    color: #000000;
}

.RouteWPanel a:hover p {
    color: #000000;
}

.WRouteButton {
    border: 5px solid #008571;
    border-radius: .5rem;
    padding: 0.4em 0.6em;
    background-color: #008571;
    color: white;
    font-weight: bold;
    width: 8em;
    font-size: 130%;
    margin-bottom: 0.5em;
}


.RouteXPanel a:hover {
    background-color: #FFFFFF;
}

.RouteXPanel a {
    display: block;
    border: 5px solid #66435A; 
    border-radius: .5rem;
    padding: 1.2em;
    background-color: #66435A;
    min-height: 12.5em;
}

.RouteXPanel h3 {
    color: #FFFFFF;
}

.RouteXPanel p {
    color: #FFFFFF;
}

.RouteXPanel a:hover h3 {
    color: #000000;
}

.RouteXPanel a:hover p {
    color: #000000;
}

.XRouteButton {
    border: 5px solid #66435A;
    border-radius: .5rem;
    padding: 0.4em 0.6em;
    background-color: #66435a;
    color: white;
    font-weight: bold;
    width: 8em;
    font-size: 130%;
    margin-bottom: 0.5em;
}


.RouteFPanel a:hover {
    background-color: #FFFFFF;
}

.RouteFPanel a {
    display: block;
    border: 5px solid #A36B00; 
    border-radius: .5rem;
    padding: 1.2em;
    background-color: #A36B00;
    min-height: 12.5em;
}

.RouteFPanel p {
    color: #FFFFFF;
}

.RouteFPanel h3 {
    color: #FFFFFF;
}

.RouteFPanel a:hover h3 {
    color: #000000;
}

.RouteFPanel a:hover p {
    color: #000000;
}

.FRouteButton {
    border: 5px solid #A36B00;
    border-radius: .5rem;
    padding: 0.4em 0.6em;
    background-color: #A36B00;
    color: white;
    font-weight: bold;
    width: 8em;
    font-size: 130%;
    margin-bottom: 0.5em;
}


.RouteCMPanel a:hover {
    background-color: #FFFFFF;
}

.RouteCMPanel a {
    display: block;
    border: 5px solid #C44C74; 
    border-radius: .5rem;
    padding: 1.2em;
    background-color: #C44C74;
    min-height: 12.5em;
}

.RouteCMPanel h3 {
    color: #FFFFFF;
}

.RouteCMPanel p {
    color: #FFFFFF;
}

.RouteCMPanel a:hover h3 {
    color: #000000;
}

.RouteCMPanel a:hover p {
    color: #000000;
}

.CMRouteButton {
    border: 5px solid #C44C74; 
    border-radius: .5rem; 
    padding: 0.4em 0.6em; 
    background-color: #C44C74; 
    color: white; 
    font-weight: bold; 
    width: 8em; 
    font-size: 130%; 
    margin-bottom: 0.5em;
}

.RouteNOPanel a:hover {
    background-color: #FFFFFF;
}

.RouteNOPanel a {
    display: block;
    border: 5px solid #867d78; 
    border-radius: .5rem;
    padding: 1.2em;
    background-color: #867d78;
    min-height: 12.5em;
}

.RouteNOPanel h3 {
    color: #FFFFFF;
}

.RouteNOPanel a:hover h3 {
    color: #000000;
}



/* Support for schedules */

#schedulecontainer {
		
}
	
#schedulecontainer table {
	table-layout: fixed;
	width: 100%;
}
#schedulecontainer td {
	vertical-align: top;
	border-top: 1px solid #ccc;
	padding: 0.6em;
	width: 6.5em;
}
#schedulecontainer th {
	vertical-align: top;
	border-top: 1px solid #ccc;
	padding: 0.6em;
	position: absolute;
	left: 0;
	width: 9em;
	text-align: left;
	background-color: #990000;
	color: #FFFFFF;
	font-weight: bold;
}
#schedulecontainer .outer {
	position: relative;
	width: 100%;
}
#schedulecontainer .inner {
	overflow-x: scroll;
	overflow-y: visible;
	margin-left: 9em;
}


#schedulecontainer2 {
		
}
	
#schedulecontainer2 table {
	table-layout: fixed;
	width: 100%;
}
#schedulecontainer2 td {
	vertical-align: top;
	border-top: 1px solid #ccc;
	padding: 0.6em;
	width: 6.5em;
}
#schedulecontainer2 th {
	vertical-align: top;
	border-top: 1px solid #ccc;
	padding: 0.6em;
	position: absolute;
	left: 0;
	width: 9em;
	text-align: left;
	background-color: #990000;
	color: #FFFFFF;
	font-weight: bold;
}
#schedulecontainer2 .outer {
	position: relative;
	width: 100%;
}
#schedulecontainer2 .inner {
	overflow-x: scroll;
	overflow-y: visible;
	margin-left: 9em;
}

/* E Route */
/* E route IDs are used due to variant line heights */
/* For use when there is a reference to "m-th only" type of clarifier on a schedule table on E Route*/
#eschedulecontainer1 {
		
}
	
#eschedulecontainer1 table {
	table-layout: fixed;
	width: 100%;
}

#eschedulecontainer1 td {
	vertical-align: top;
	border-top: 1px solid #ccc;
	padding: 0.6em;
	width: 6.5em;
}

#eschedulecontainer1 th {
	vertical-align: top;
	border-top: 1px solid #ccc;
	padding: 0.6em;
	position: absolute;
	left: 0;
	width: 9em;
	text-align: left;
	background-color: #990000;
	color: #FFFFFF;
	font-weight: bold;
	height: 4.3em;
}

#eschedulecontainer1 tr {
	height: 4em;
}

#eschedulecontainer1 .outer {
	position: relative;
	width: 100%;
}

#eschedulecontainer1 .inner {
	overflow-x: scroll;
	overflow-y: visible;
	margin-left: 9em;
}


#eschedulecontainer {
		
}
	
#eschedulecontainer table {
	table-layout: fixed;
	width: 100%;
}

#eschedulecontainer td {
	vertical-align: top;
	border-top: 1px solid #ccc;
	padding: 0.6em;
	width: 6.5em;
}

#eschedulecontainer th {
	vertical-align: top;
	border-top: 1px solid #ccc;
	padding: 0.6em;
	position: absolute;
	left: 0;
	width: 9em;
	text-align: left;
	background-color: #990000;
	color: #FFFFFF;
	font-weight: bold;
	height: 4.3em;
}

#eschedulecontainer tr {
	height: 4em;
}

#eschedulecontainer .outer {
	position: relative;
	width: 100%;
}

#eschedulecontainer .inner {
	overflow-x: scroll;
	overflow-y: visible;
	margin-left: 9em;
}