/*
Zilla+Slab: 300,400,500
Source+Sans+Pro: 300,400,400i,600,600i,700,700i 
*/


/* COLORS */
/*
Hop purple: #2e008b
Hop orange: #ff6900
Hop green: #48a23f
Portland Streetcar NS: #7fbc03 green
Portland Streetcar A: #d51668 fushia
Portland Streetcar B: #3e0099 violet
*/
.white {
    color: #fff;
}
.blue {		    /* MAX Blue */
    color: #004c9d;
}
.green {		/* MAX Green */
    color: #008540;
}
.orange {		/* MAX Orange */
	color: #cc6118;
}
.red {			/* MAX Red */
    color: #c00d44;
}
.yellow {		/* MAX Yellow */
    color: #ffc836;
}
.red-alert {    /* Alert Red */
    color: #c63c2f;
}
.blue-snow {    /* Snow/Ice Blue */
    color: #7da4cc;
}
.blue-trimet {    /* TriMet Blue */
    color: #084c8d;
}
.orange-trimet {	/* TriMet Orange */
    color: #d14727;
}
.green-trimet {    /* FX and Frequent green */
    color: #61a744;
    color: #3a840b;    /* new darker green for accessibility */
}



/* ICONS */
.icons {
	border: none;
}
	.icons a {
		border: none;
	}
	.icons img {
		display: inline-block;
		margin-right: .5em;
	}
	img.icon36 {
		width: 36px;
		height: 36px;
	}
	img.icon48 {
		width: 48px;
		height: 48px;
	}
	img.icon64 {
		width: 64px;
		height: 64px;
	}
	img.icon80 {
		width: 80px;
		height: 80px;
	}





/* CHECKMARKS */
.checkmark {
	padding-left: 28px;
	background: url("/global/img/checkmark.png") 0 16px no-repeat;
	background-size: 25px auto;
}
	.checkmark.x {
		background-image: url("/global/img/checkmark-x.png");
	}
	.checkmark.greencheck {
		background-image: url("/global/img/checkmark-green.png");
	}
	.checkmark.bluecheck {
		background-image: url("/global/img/checkmark-blue.png");
	}
	.checkmark.bluecircle {
		background-image: url("/global/img/checkmark-blue-circle.png");
	}

.chevmark {
	padding-left: 28px;
	background: url("/global/img/chevmark-green.png") 0 16px no-repeat;
	background-size: 25px auto;
}
	.chevmark.bluecheck {
		background-image: url("/global/img/chevmark-blue.png");
	}
	.chevmark.orangecheck {
		background-image: url("/global/img/chevmark-orange.png");
	}

@media only screen and (min-width: 768px) { /* sm screens and up */
    .checkmark, .chevmark {
        padding-left: 35px;
        background-position: 0 16px;
        background-size: 35px auto;
    }
}

ul.chevmark-list {
	margin-left: 0;
}
	ul.chevmark-list > li {
		padding-left: 1.75em;
		background: url("/global/img/chevmark-green.png") 0 -.0625em no-repeat;
		background-size: 1.5em auto;
		list-style: none;
	}
		ul.chevmark-list.bluecheck > li {
			background-image: url("/global/img/chevmark-blue.png");
		}
		ul.chevmark-list.orangecheck > li {
			background-image: url("/global/img/chevmark-orange.png");
		}



/****** LINKS *****/
a, a:visited {
	color: #084c8d;
	text-decoration: none;
	border-bottom: 1px solid #6396D9;
}
    a img {
        text-decoration: none;
        border: none;
    }
    a.noborder {
        border: none;
    }
    a:hover {
        text-decoration: none;
        border-color: #084c8d;
    }
    a img, a:hover img {
        text-decoration: none;
        border: none;
    }


    

/****** PAGE SETUP *****/
.fullwidth {
    margin-left: auto;
    margin-right: auto;
}
    .contentcontainer {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .gray {
        background: #f1f1f1;
        background: -moz-linear-gradient(top,  #d8d8d8 0px, #f1f1f1 300px);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0px,#d8d8d8), color-stop(300px,#f1f1f1));
        background: -webkit-linear-gradient(top,  #d8d8d8 0px,#f1f1f1 300px);
        background: -o-linear-gradient(top,  #d8d8d8 0px,#f1f1f1 300px);
        background: -ms-linear-gradient(top,  #d8d8d8 0px,#f1f1f1 300px);
        background: linear-gradient(top,  #d8d8d8 0px,#f1f1f1 300px);        
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#d8d8d8", endColorstr="#f1f1f1", GradientType=0 );
    }
    .lightgray {
        background: #f6f6f6;
    }
    .darkgray {
        background: #eee
    }
    .bluebg {
        background-color: #084c8d;
    }
		.bluebg.greenbg {
			background-color: #61a60e;
		}
        .bluebg h2, 
        .bluebg h3, 
        .bluebg h4, 
        .bluebg h5, 
        .bluebg p, 
        .bluebg ul li,
		.bluebg ol li {
            color: #fff;
            border-color: #0c72d4;
        }
        .bluebg a,
        .bluebg a:visited  {
            color: #fff;
        }
        .bluebg a.pdf:visited {
            color: #333;
        }
			.bluebg a:hover {
				color: #fff;
			}
			.bluebg ul.anchor li a:visited {
				color: #333;
			}
		.bluebg a.button.learnmore, 
		.bluebg a.button.learnmore:hover {
			border: none;
		}
        .bluebg ul.links li a {
            background-color: #d3e9ff;
            color: #084c8d;
        }
        .bluebg a.pdf {
            background-color: #fff;
        }
        .bluebg ul.links li a:hover {
            background-color: #084c8d;
            color: #fff;
        }

	.charcoal {
		background-color: #333;
	}
		.charcoal h2, 
		.charcoal h3, 
		.charcoal h4, 
		.charcoal h5, 
		.charcoal p, 
		.charcoal a,
		.charcoal a:visited, 
		.charcoal ul li a,
        .charcoal ul li a:visited {
			color: #fff;
			border-color: #666;
		}
		.charcoal a:hover {
			color: #fff;
			border-color: #fff;
		}
			.charcoal ul li a:hover {
				background-color: #666;
				color: #fff;
                border-color: #fff;
            }

		.charcoal .box {
			background-color: #fff;
	/*		background-color: rgba(255,255,255,.85);*/
			border: none;
		}
			.charcoal .box h2,
			.charcoal .box h3,
			.charcoal .box h4,
			.charcoal .box h5,
			.charcoal .box h6,
			.charcoal .box p,
			.charcoal .box li {
				color: #222;
			}
			.charcoal .box a, 
			.charcoal .box a:visited,
			.charcoal .box a:hover {
				color: #084c8d;
			}
				.charcoal .box a.button {
					color: #fff;
				}
				.charcoal .box a.button.secondary {
					color: #084c8d;
					border-color: #084c8d;
				}
                    .charcoal .box a.button.secondary:hover {
                        color: #fff;
                    }
				.charcoal .box ul.links a,
				.charcoal .box a.pdf {
					background-color: #fff;
					color: #084c8d;
				}
					.charcoal .box ul.links a:hover, 
					.charcoal .box a.pdf:hover {
						background-color: #084c8d;
						color: #fff;
					}



    .firstbg {
        background-color: #888;
    }
        .firstbg p {
            color: #fff;
        }
        .firstbg .contentcontainer {
            padding-bottom: 30px;
        }
    
@media only screen and (min-width: 768px) { /* sm screens and up */
    .contentcontainer {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}



/******* STANDARD HEADER / FIRST BLOCK *******/
.standardheader {
}
    .standardheader p.breadcrumb {
		display: none;
    }
    .standardheader h1 {
        margin: 40px 10px 0 15px;
   }
.standardheader .first {
    width: 100%;
    padding: 15px 15px 0;
}
    .first.alert {
        background-color: #c63c2f;
    }
        .first.alert p {
            background-image: url("/global/img/icon-alert-white.png");
            background-repeat: no-repeat;
            background-position: 0 0;
            background-size: 25px 25px;
            padding-left: 35px;
        }

    .standardheader .first p {
        padding: 0 0 15px 0;
		font-family: "Zilla Slab", serif;
		font-size: 18px;
		font-weight: 400;
		line-height: 1.125;
    }

            
@media only screen and (min-width: 768px) { /* sm screens and up */
.standardheader {
}
    .standardheader h1 {
        padding: 0;
        line-height: 1;
        width: 595px;
        margin: 80px auto 0;

   }
    .standardheader .first {
        padding: 0;
    }
        .standardheader .first p, .standardheader .first h3 {
            width: 595px;
            margin: 0 auto;
 			line-height: 1.25;
       }
            .standardheader .first p {
                font-size: 21px;
            }
				.standardheader div:nth-of-type(2) {	/* add padding when the .first p is below a .hero header */
					padding-top: 1em;
				}
        .first.alert p {
            background-size: 50px 50px;
            padding-left: 70px;
        }
   .standardheader.wide h1, .standardheader.wide .first p {
        width: 720px;
   }
}
@media only screen and (min-width: 992px) { /* md screens and up */
    .standardheader h1 {
        width: 617px;
		margin-top: 127px;
        line-height: 1.25;
    }
	.standardheader .first p {
		font-size: 24px;
 		line-height: 1.5;
	}
   .standardheader .first p, .standardheader .first h3 {
        width: 617px;
    }
   .standardheader.wide h1, .standardheader.wide .first p {
        width: 940px;
   }
}
@media only screen and (min-width: 1200px) { /* lg screens and up */
    .standardheader h1, 
    .standardheader .first p,
    .standardheader .first h3 {
        width: 730px;
    }
   .standardheader.wide h1, .standardheader.wide .first p {
        width: 1110px;
   }
}




/******* HERO HEADER *******/
.standardheader .hero {
}
	.standardheader .hero > img, .standardheader .hero > video {
		width: 100%;
		height: auto;
		padding: 0;
		margin: 0;
    }
    .standardheader .hero .inner {
    }
		.standardheader .hero .center {
			padding-right: 15px;
			padding-left: 15px;
			margin-right: auto;
			margin-left: auto
		}
			.standardheader .hero h1 {
				font-size: 250%;
				padding: 40px 0 0;
                margin: 0;
				text-align: center;
				width: auto;
			}
				.standardheader .hero h1 .h1icon {
					display: inline-block;
					float: none;
					padding-bottom: 0;
					margin: 0 0 -1.5em 0;
				}
			.standardheader .hero p {
				font-size: 1.125em;
				line-height: 1.25;
				text-align: center;
				padding-top: 1em;
				width: auto;
			}
				.standardheader .hero p.small {
					font-size: 1em;
				}
			.standardheader .hero .center > img {	/* treating this like  logo for the h1 */
				width: 120px;
				height: auto;
				margin: 0 auto;
				display: block;
			}
			.standardheader .hero ul.anchor.big {
				margin: 1em 0 1em;
			}
				.standardheader .hero ul.anchor.big li a {
					font-size: 100%;
					padding: .5em .75em;
				}

@media (min-width:480px) and (max-width:767px) {
	.standardheader .hero .center {
		max-width: 748px
	}
}
@media only screen and (min-width: 768px) { /* sm screens and up */
	.standardheader .hero {
		position: relative;
		overflow: hidden;
/*		background-color: #fff;*/
		text-align: center;
	}
		.standardheader .hero::before {
			content: "";
			position: absolute;
			top: 0;
			width: 100%;
			height: calc(100% - 6.1px);	/* don't know where the 6.1px comes from */
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 99;
			max-width: 1600px;
		}
		.standardheader .hero > img, .standardheader .hero > video {
			width: 100%;
			height: auto;
			padding: 0;
			margin: 0;
		}
		.standardheader .hero .inner {
			position: absolute;
			padding: 0;
			text-align: center;
			z-index: 100;
			top: 50%;
			left: 50%;
			-ms-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
		}
			.standardheader .hero .center {
				width: 750px
			}
				.standardheader .hero h1 {
					color: #fff;
					text-shadow: 0 0 6px #000;
					padding-top: 0;
					font-size: 300%;
				}
				.standardheader .hero p {
					color: #fff;
					text-shadow: 0 0 6px #000;
					padding-top: .5em;
					font-size: 1.25em;
				}
				.standardheader .hero a, .standardheader .hero a:visited {
					color: #fff;
					border-color: rgba(255,255,255,.5);
				}
					.standardheader .hero a:hover {
						border-color: #fff;
					}
				.standardheader .hero .center > img {
					width: 120px;
					margin-top: -60px;
				}
				.standardheader .hero ul.anchor li a {
					background-color: #fff;
					color: #222;
				}
}
@media only screen and (min-width: 992px) { /* md screens and up */
	.standardheader .hero {
		margin-bottom: 1em;
		margin-bottom: 0;
	}
		.standardheader .hero > img, .standardheader .hero > video {
			max-width: 1600px;
		}
			.standardheader .hero .center {
				width: 970px
			}
				.standardheader .hero p {
					font-size: 1.5em;
				}
}
@media only screen and (min-width: 1200px) { /* lg screens and up */
	.standardheader .hero {
	}
		.standardheader .hero .center {
			width: 1140px
		}
			.standardheader .hero h1 {
				font-size: 400%;
			}
}
@media only screen and (min-width: 1600px) { 
	.standardheader .hero {
		margin: 2em;
	}
}
@media only screen and (min-width: 1750px) {
	.standardheader .hero {
		margin: 6em 0 4em;
	}
}







/******* STANDARD CONTENT *******/
.standardcontent {
    background-color: #fff;
    padding-top: 0;
    padding-bottom: 0;
}
    .standardcontent .contentcontainer {
        padding-top: 30px;
    }
.isolate {
    padding: 15px 0;
}
@media only screen and (min-width: 768px) { /* sm screen and up */
	.isolate {
		padding: 30px 0;
	}
}



/***** HEADERS *****/
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Zilla Slab", Helvetica, Arial, sans-serif;
	font-size: 32px;
	line-height: 1.5;
	padding-bottom: .5em
}

h2.strata,
h3 {
	padding-top: 1em;
	padding-bottom: .75em
}

h1 {
	font-weight: 600;
	font-size: 34px;
	line-height: 1
}
    h1.big {
        font-size: 250%;
    }
    h1.h1icon {   /* use this with font-awesome icons in h1 */
        font-size: 135%;
        margin: 0 .25em -.5em 0;
        display: block;
        padding: 0 0 15px 0;
        float: left;
    }
        h1 a.h1icon {
            color: #333;
            border: none;
        }
        h1 a {
            border: none;
        }

h1 small,
h2 {
	font-weight: 300;
}

h2 {
	font-size: 32px;
	line-height: 1em;
	color: #333;
	padding-top: .5em
}

h2.strata,
h3,
h3.big {
	line-height: 1
}
h2.strata {
    text-transform: none;
    font-weight: 400;
    font-size: 36px;
	text-align: center;
	letter-spacing: 1px
/*
	font-size: 28px;
	text-transform: uppercase;
	color: #333;
*/
}
h2.big {
    font-size: 200%;
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1em;
}
    h2.strata.divider {
        padding-bottom: .5em;
        margin-bottom: 1em;
        border-bottom: 1px solid #ccc;
    }
    @media only screen and (min-width: 992px) { /* md screens and up */
        h2.strata.divider {
            width: 797px;
            margin-left: -90px;
        }
    }
    @media only screen and (min-width: 1200px) { /* lg screens and up */
        h2.strata.divider {
            width: 910px;
        }
    }

h3 {
	font-size: 20px;
	font-weight: 400
}
	h3.big {
        font-size: 1.5em;
		font-weight: 300;
		padding-bottom: .5em
	}
h4,
h5,
h6 {
	padding-bottom: .125em
}
h4 {
	font-size: 20px;
	line-height: 1.25
}
	h4.big {
		font-size: 24px
	}
h5 {
	font-size: 18px;
	font-weight: 400
}
h6 {
	font-size: 14px;
	font-weight: 600;
}



@media only screen and (min-width:768px) {
	h1 {
		font-size: 36px;
		padding-bottom: .5em
	}
	h2 {
		font-size: 32px
	}
	h3 {
		font-size: 24px;
		font-weight: 500
	}
	h3.big {
		font-size: 32px;
		font-weight: 400
	}
	h4 {
		font-size: 24px
	}
	h4.big {
		font-size: 32px
	}
	h5 {
		font-size: 18px
	}
	h6 {
		font-size: 16px
	}
}

@media only screen and (min-width:992px) {
	h1 {
		font-size: 42px
	}
	h2,
	h2.strata {
		font-size: 36px
	}
	h5 {
		font-size: 20px
	}
	h6 {
		font-size: 18px
	}
}
@media only screen and (min-width:1200px) {
	h2.strata {
		font-size: 42px
	}
}




.leftcenter {
	text-align: left;
}
.centerleft {
	text-align: center;
}

@media only screen and (min-width: 768px) { /* sm screens and up */
	h1.big {
		font-size: 300%;
	}
	h2.strata {
		font-size: 48px;
	}
	h2.big {
		font-size: 300%;
		padding-top: 2em;
		padding-bottom: 2em;
	}
	h3.big {
		font-size: 2em;
	}
	.leftcenter {
		text-align: center;
	}
	.centerleft {
		text-align: left;
	}
}
@media only screen and (min-width: 992px) { /* md screens and up */
	h2.strata {
		font-size: 54px;
	}
}
@media only screen and (min-width: 1200px) { /* lg screens and up */
	h1.big {
		font-size: 400%;
	}
}

h2.big.notoppadding {
	padding-top: .25em;
}
h2.big.nobottompadding {
	padding-bottom: .25em;
}




/****** TEXT *****/
p, li {
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    padding-bottom: 1em;
}
    p b, li b {
        font-weight: 600;
    }
		p.big {
			font-size: 1.125em;
			line-height: 1.25;
			font-family: 'Source Sans Pro';
		}
    small, .small, ul.small li  {
        font-size: 12px;
        line-height: 1.25;
    }
    .first, .h1sub, .big {
        font-size: 18px;
        font-weight: 400;
		font-family: "Zilla Slab", serif;
		margin-bottom: 0;
		line-height: 1.125;
    }
        .big {
            background: none;
        }

@media only screen and (min-width: 768px) { /* sm screen and up */
    p, li {
        font-size: 20px;
    }
		p.big {
/*
			font-size: 1.25em;
			line-height: 1.25;
*/
		}
    .first, .h1sub, .big {
        font-size: 21px;
		line-height: 1.25;
		padding-bottom: .5em;
    }
    p.breadcrumb {
        font-size: 14px;
    }
    small, .small, ul.small li  {
        font-size: 14px;
    }
    ul.inline li {
        padding-bottom: 10px;
    }
    /* Make <ul> span 2 or 3 columns when in one row. */
    ul.multi-col-ul {
        column-count: 2;
    }
    ul.multi-col-ul li {
        max-width: 98%;
    }
    ul.three-col-ul {
        column-count: 3;
    }
    ul.three-col-ul li {
        max-width: 98%;
    }
}
@media only screen and (min-width: 992px) { /* md screens and up */
	p.big {
		font-size: 1.5em;
	}
    small, .small, ul.small li  {
        font-size: 16px;
    }
    .first, .h1sub, .big {
        font-size: 24px;
		line-height: 1.5;
    }
}


ul.inline {
    margin-left: 0;
}
    ul.inline li {
        padding-bottom: 5px;
        padding-left: 0;
        display: inline-block;
        margin: 0 15px 0 0;
    }

.caps {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 300;
}

hr {
    margin: 30px auto 45px;
    color: #ccc;
    width: 75%;
}
.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.text-right, .hright {
    text-align: right;
}

sup {
    font-size: 50%;
    vertical-align: baseline;
    line-height: 0;
    position: relative;
    top: -.85em;
    left: -.125em;
}

    sup.money {
        font-size: 75%;
        top: -.2em;
        left: 0;
    }

sub {
    position: relative;
    top: .25em;  
}
.nowrap {
    white-space: nowrap;
}
.number {
    background-color: #6cb445;
    border-radius: 50%;
    width: 1.125em;
    height: 1.125em;
    float: left;
    display: block;
    color: #fff;
    font-style: normal;
	font-weight: 400;
    text-align: center;
    margin: .25em .5em .25em 0;
    line-height: 1;
	padding: .03125em 0 0 .03125em;
	font-family: "Source Sans Pro", sans-serif;
}
	h2 .number, h3 .number, h4 .number, h5 .number {
		margin-top: 0;
	}




/***** BLOCKQUOTE *****/
blockquote {
    padding: 1em 2em;
    margin: 1em 0 2em;
    border-top: 2px solid #eebdb1;
    border-bottom: 2px solid #eebdb1;
}
    blockquote.big {
        padding: 1em 20px;
    }
        blockquote:before, blockquote:after {
            content:"";
            display:table;
        }
        blockquote:after {
            clear:both;
        }
    blockquote h3 {
        font-size: 150%;
        color: #e69a88;
        text-align:  center;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    blockquote p {
        font-size: 150%;
        line-height: 1.25;
        color: #d14727;
    }
        blockquote.big p {
            text-align: center;
        }
        blockquote p.bignumber {
            font-size: 500%;
            line-height: 1;
            padding: 0 10px 0 0;
            text-align: center;
        }

    blockquote.pullstat {  /* for big XX% with accompanying text */
        padding-left: 3em;
        padding-right: 3em;
    }
        blockquote.pullstat p {
            padding: 0;
            line-height: 1;
        }
        blockquote.pullstat p.stat {
            font-size: 500%;
            padding: 0 15px 0 0;
            margin: 0;
            font-weight: 400;
            width: 1.625em;
            float: left;
        }
            blockquote.pullstat p.stat span {
                font-size: 50%;
                font-weight: 400;
                vertical-align: super;
            }
        blockquote.pullstat p.desc {
            font-size: 225%;
            text-align: left;
        }


    blockquote.quote {
        border: none;
        padding: .5em .5em 1em 1.5em;
        margin: 1em 0;
    }    
        blockquote.quote p {
            font-family: "Zilla Slab", serif;
			font-size: 135%;
            line-height: 1.5;
            color: #333;
        }    
        blockquote.quote span {
            font-family: Georgia, serif;
            font-size: 250%;
            line-height: .75;
            float: left;
            display: block;
            width: 25px;
            margin-left: -25px;
        }

@media only screen and (min-width: 480px) {
    blockquote.quote {
        padding: 1em 1em 1em 2em;
        margin: 1em 0 2em;
    }    
}
@media only screen and (min-width: 768px) { /* sm screens and up */

    blockquote.big {
        padding: 1em 50px;
    }
        blockquote.big p.bignumber {
            float: left;
            text-align: left;
        }
    blockquote.big p {
        text-align: left;
    }
    blockquote.quote {
        padding-left: 4em;
        padding-right: 4em;
    }    
       blockquote.quote span {
            font-size: 350%;
            width: 35px;
            margin-left: -35px;
        }
}
@media only screen and (min-width: 992px) { /* md screens and up */
    blockquote.big {
        padding: 1em 100px;
    }
    blockquote.quote {
    }    
        blockquote.quote span {
            font-size: 400%;

            width: 40px;
            margin-left: -40px;
        }
}
@media only screen and (min-width: 1200px) { /* lg screens and up */
    blockquote.quote {
    }    
        blockquote.quote p {
            font-size: 115%;
        }
        blockquote.quote span {
            font-size: 400%;
            width: 37px;
            margin-left: -37px;
        }
}



/***** ITEM *****/
.item {
    margin-bottom: 2em;
}
    .item h2, .item h3 {
        padding-top: .25em;
        margin-left: -.5em;
    }
    .item img.circle {
        border-radius: 50%;
    }
@media only screen and (min-width: 480px) {
    .item h2, .item h3 {
        padding-top: inherit;
        margin-left: inherit;
    }
}
@media only screen and (min-width: 768px) { /* sm screen and up */
    .item img.circle {
        margin-top: -.5em;
    }
}
@media only screen and (min-width: 992px) { /* md screens and up */
	.item {
		margin-bottom: 3em;
	}
}



/****** BOXES *****/
.box {
    background-color: #f4f4f4;
    padding: 15px 15px 0;
    border-radius: 5px;
    margin: 0 0 1em;
/*    border: 1px solid #ccc;*/
    clear: both;
}
    .box a {
        border: none;
        text-decoration: underline;
        text-decoration-color: #bbd4ee;
    }
        .box a.button {
            text-decoration: none;
        }
			.box a:hover {
				text-decoration-color: #084c8d;
			}
    .box.white {
        background-color: rgba(255, 255, 255, 0.8);
        border: none;
        color: #222;
    }
    .box.transparent {
        background-color: inherit;
    }
    .box.important {
        background-color: #ffc;
    }
    .box.message {
        background: url("/global/img/icon-info.png") 15px 17px no-repeat #f3f3f3;
        background-size: 15px 15px;
        padding-left: 35px;
    }
    .box.servicealertbox { /* automatically generated alerts */
        background-color: #ffc;
        margin: 0 15px 1em;
    }
        .box.servicealertbox p.servicealert, .box.servicealertbox p.servicealert-future {
            background: url("/global/img/icon-alert.png") 0 0 no-repeat #ffc;
            background-size: 10px 15px;
            padding-left: 25px;
        }
            .box.servicealertbox p.servicealert-future {
                background-image: url("/global/img/icon-alert-future.png");
            }
    .box.alertbox, .box.snowbox { /* manual alerts via include file */
        background: url("/global/img/icon-alert-future.png") 10px 10px no-repeat #ffc;
        background-size: 25px 25px;
        padding-left: 40px;
    }
        .box.snowbox {
            background-color: transparent;
            background-image: url("/global/img/icon-snow.png");
            padding-top: 15px;
        }
        .box.alertbox ul.links a {
            background-color: #ffc;
            border-color: #ccc;
            text-decoration: underline #ccc;
        }
            .box.alertbox ul.links a:hover {
                background-color: #fff;
                text-decoration: underline #084c8d;
            }
    .box.alertbox .expand_header h3 span, .box.snowbox .expand_header h3 span { /* account for expand button margin */
        margin-left: 0;
    }
    .box h2:first-child, .box h3:first-child, .box h4:first-child, .box h5:first-child {
        padding-top: 0;
    }
    .box h2 {
        padding-bottom: 6px;
    }
    .box p, .box li, .box a, .box em, .box i {
        font-weight: 300;
    }
	.box strong, .box b, .box b i, .box b em, .box strong i .box b em,
	.box i b, .box i strong, .box em b .box em strong {
		font-weight: 600;
	}
	.bluebg .box {
		background-color: #fff;
/*		background-color: rgba(255,255,255,.85);*/
		border: none;
	}
		.bluebg .box h2, .bluebg.greenbg ul.flex h2, 
		.bluebg .box h3, .bluebg.greenbg ul.flex h3, 
		.bluebg .box h4, .bluebg.greenbg ul.flex h4, 
		.bluebg .box h5, .bluebg.greenbg ul.flex h5, 
		.bluebg .box h6, .bluebg.greenbg ul.flex h6, 
		.bluebg .box p, .bluebg.greenbg ul.flex p, 
		.bluebg .box li,.bluebg.greenbg ul.flex li {
			color: #222;
		}
		.bluebg .box a, .bluebg.greenbg ul.flex a {
			color: #084c8d;
		}
			.bluebg .box a.button, .bluebg.greenbg ul.flex a.button {
				color: #fff;
			}
			.bluebg .box ul.links a, .bluebg.greenbg ul.flex ul.links a, .bluebg.greenbg ul.flex a.pdf {
				background-color: #fff;
				color: #084c8d;
			}
				.bluebg .box ul.links a:hover, .bluebg.greenbg ul.flex ul.links a:hover, 
				 .bluebg.greenbg ul.flex a.pdf:hover {
					background-color: #084c8d;
					color: #fff;
				}

            .bluebg .box a.button.secondary {
                color: #084c8d;
                border-color: #084c8d;
            }
                .bluebg .box a.button.secondary:hover {
                    color: #fff;
                }

@media only screen and (min-width: 768px) { /* sm screens and up */
.box {
    padding: 30px 30px 5px;
    margin: 0 0 2em;
}
    .box.message {
        background-position: 15px 28px;
        background-size: 35px 35px;
        padding-left: 60px;
    }
            .box.servicealertbox p.servicealert, .box.servicealertbox p.servicealert-future {
                background-position: 0 0;
                background-size: 25px 25px;
                padding-left: 40px;
            }
    .box.alertbox, .box.snowbox {
        background-position: 15px 15px;
        background-size: 50px 50px;
        padding-left: 80px;
    }
}



/****** IMAGES *****/
.img {
    display: block;
    height: auto;
    max-width: 100%;
    margin-bottom: 15px;    
}
.img-left, .img-right {
    display: block;
    max-width: 100%;    
    height: auto;
    margin: 0 0 15px 0;
}
    .img-left img, .img-right img {   /* if image is used with a caption */
        width: 100%;
    }
.icon-left {
    float: left;
    margin: 0 15px 15px 0;
}
.icon-right {
    float: right;
    margin: 0 0 15px 15px;
}
img.smallicon  {
    width: 35px;
    height: auto;
    float: left;
    margin-right: 10px;
    margin-top: -3px;
}
a.iconlink, a.iconlink:hover {    /* for font-awesome icons with links */
    border: none;
}
img.frame {
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 5px;
}
    a img.frame:hover {
        border: 1px solid #ccc;
        background-color: #dbdbdb;
    }
.caption {
    margin-bottom: 1em;
}
    .caption img {
        margin: 0;
    }
        .caption.img-right img, .caption.img-left img,
        .caption.icon-right img, .caption.icon-left img {
/*            margin-bottom: -8px;*/
        }
    .caption small {
        display: block;
        padding: 5px 10px;
        background-color: #404040;
        color: #fff;
        width: 100%;
        line-height: 1.25;
    }
    .caption a, .caption a:hover {
        color: #ccc;
        border: none;
    }
        .caption a:hover {
            color: #fff;
            text-decoration: underline;
        }
        
    p.imgsmall {
        width: 100%;
    }
@media only screen and (min-width: 460px) {
    .img-left {
        float: left;
        margin: 5px 15px 15px 0;
        width: 240px;
    }
    .img-right {
        float: right;
        margin: 5px 0 15px 15px;
        width: 240px;
    }
    p.imgsmall {
        width: 65%;
        margin: 0 auto;
    }
}
@media only screen and (min-width: 768px) { /* sm screens and up */
    .img-left {
        margin: 5px 30px 30px -90px;
        width: 360px;

    }
    .img-right {
        margin: 5px -90px 30px 30px;
        width: 360px;
    }
    .caption small {
        padding: 6px 10px;
    }
}



/****** PDF, AUDIO, VIDEO and VIEW BUTTONS *****/
a.pdf, a.view, a.video, a.pdf-small, a.view-small, a.audio-small, a.video-small {
    font-weight: 300;
    padding: 5px 15px 5px 50px;
    margin: 0 0 10px;
    border-radius: 5px;
    border: 1px solid #eee;
    line-height: 1.25;
    background: url("/global/img/icon-pdf.png") 10px 12px no-repeat #f6f6f6;
    background-size: 30px 30px;
    color: #333;
    min-height: 55px;
    cursor: pointer;
    text-decoration: none;
	display: block;
/*	display: inline-block;*/
}
    a.pdf-small, a.view-small, a.audio-small, a.video-small {
        font-weight: 400;
        margin: 0;
        padding-left: 40px;
        padding-right: 10px;
        line-height: 1.25;
        background-position: 10px 7px;
        background-size: 20px 20px;
        min-height: auto;
    }
        .box a.pdf-small, .box a.view-small, .box a.audio-small, .box a.video-small {
            border-color: #ccc;
        }
    a.view, a.view-small {
        background-image: url("/global/img/icon-view.png");
    }
    a.audio, a.audio-small {
        background-image: url("/global/img/icon-audio.png");
    }
    a.video, a.video-small {
        background-image: url("/global/img/icon-video.png");
    }
    a.pdf:hover, a.view:hover, a.video:hover, a.pdf-small:hover, a.view-small:hover, a.audio-small:hover, a.video-small:hover {
        border-color: #ccc;
        background-color: #dbdbdb;
        background-color: #d3e9ff;
        color: #333;
    }
    a.pdf small, a.pdf:hover small, a.view small, a.view:hover small, a.audio small, a.audio:hover small, a.video small, a.video:hover small {
        color: #666;
    }

    a.pdfcover {
        border: 1px solid #ccc;
        background-color: #fff;
        padding: 5px;
        border-radius: 5px;
        margin-bottom: 5px;
        display: block;
    }
        a.pdfcover img.img {
            margin-bottom: 0;
        }
        a.pdfcover p {
            color: #333;
            padding: .5em;
            line-height: 1.25;
            text-decoration: none;
            border: none;
        }
        a.pdfcover small {
            text-transform: uppercase;
        }
        a.pdfcover:hover {
            border: 1px solid #ccc;
            background-color: #dbdbdb;
        }
            a.pdfcover:hover p {
                color: #084c8d;
                text-decoration: underline;
            }


/****** VIDEO ******/
.embed-responsive {
    display: block;
    height: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}
    .embed-responsive .embed-responsive-item, .embed-responsive embed, .embed-responsive iframe, .embed-responsive object, .embed-responsive video {
        border: 0 none;
        bottom: 0;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
.embed-responsive-16by9 {
    padding-bottom: 56.25%;
}



/****** LISTS ******/
ul, ol {
    padding-bottom: 1em;
    margin-left: 1.25em;
}
	ul.columns, ol.columns {
		padding-bottom: 0;
	}
    ol li {
        list-style: decimal;
    }
    ul li {
        list-style: circle;
    }
    ul ul {
        padding-bottom: 0;

    }
        ul ul li {
            padding-bottom: .5em;
            list-style: disc;
        }
            ul ul li:last-child {
                padding-bottom: 0;
            }
        
    ul.checkmark {
        background: none;
		padding-left: 0;
    }
		ul.checkmark li {
			background: url("/global/img/checkmark-blue.png") 0 0 no-repeat;
			background-size: 25px auto;
			list-style: none;
			padding-left: 30px;
		}

    ol.circle {
		counter-reset: ol-counter;
		list-style: none;
    }
		ol.circle li {
			list-style: none;
			margin: 1.5em 0 1em 0;
			padding-left: 50px;
			line-height: 1;
			counter-increment: ol-counter;
			position: relative;
		}
		ol.circle li::before {
			content: counter(ol-counter);
			position: absolute;
			top: -10px;
			left: -5px;
			background-color: #3a840b;
			border-radius: 50%;
			display: block;
			width: 40px;
			height: 40px;
			margin: 0 0 0 0;
			padding: 6px 0 0;
			font-style: normal;
			font-size: 26px;
			font-weight: 400;
			line-height: 1;
			color: #fff;
			text-align: center;
		}




/****** LINK LISTS ******/
ul.links, ol.links, ul.schedulelinks {
    margin-left: 0;
}
    ul.links li, ol.links li, ul.schedulelinks li {

        list-style: none;
    }

    ul.links a, ol.links a, ul.schedulelinks a {
        border: 1px solid #eee;
        padding: 7px 15px;
        border-radius: 5px;
        display: block;
		font-weight: 300;

    }
        ul.schedulelinks a {
            border-color: #ccc;
            padding: 10px 15px;
       }
        ul.links a::after, ol.links a::after, ul.schedulelinks a::after {
            /*
            content: " »";
            */
        }
    ul.links a:hover, ol.links a:hover, ul.schedulelinks a:hover {
        background-color: #d3e9ff;
    }
        .box ul.links a, .box ol.links a {
            background-color: #fdfdfd;
			text-decoration: none;
        }
            .box ul.links a:hover, .box ol.links a:hover {
                background-color: #d3e9ff;
            }
    
    ul.links.big a {
        border-color: #ddd;
        padding: 15px 30px;
        font-size: 125%;
    }
        ul.links.big a:hover {
            background-color: #dbdbdb;
        }



/****** TOP LINK *****/
p.top {
    display: none;
}




/****** BUTTONS *****/
a.button {
	min-width: 140px;
	cursor: pointer;
	border-radius: 5px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-size: 1.2em;
    font-weight: 400;
    display: inline-block;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    text-align: center;
    vertical-align: top;
    background-color: #3A840B;
/*    border: 2px solid #568d32;*/
	border: none;
    margin-bottom: 15px;
	padding: .25em .75em;
	transition: background-color 0.2s;
    line-height: 1.125;
}
	a.button:hover {
		background-color: #62a038;
/*		border-color: #62a038;*/
	}

a.button-heading {
    border: 1px solid #eee;
    border: 1px solid #0c72d4;
    padding: 7px 5px 7px 15px;
    border-radius: 10px;
    display: block;
    margin-bottom: 1em;
}
    a.button-heading:hover {
        background-color: #dbdbdb;
        background-color: #d3e9ff;
    }
    a.button-heading h3 {
        padding-top: .5em;
        padding-bottom: .5em;
    }
    a.button-heading p {
        line-height: 1.125;
        padding-bottom: .5em;
        margin-top: -.25em;
    }
	a.button-heading:hover {
		background-color: #62a038;
		border-color: #62a038;
	}
        a.button-heading:hover h3 {
            color: #fff;
        }
        a.button-heading:hover p {
            color: #fff;
        }


/****** BUTTON SECONDARY ******/
a.button.secondary {
	background-color: transparent;
	border: 1px solid #084c8d;
	color: #084c8d;
	text-shadow: none;
}
	a.button.secondary:hover {
		color: #fff;
		border: 1px solid #62a038;
		background-color: #62a038;
	}
	.bluebg a.button.secondary,
	.charcoal a.button.secondary {
		border: 1px solid #fff;
		color: #fff;
	}
		.bluebg a.button.secondary:hover,
		.charcoal a.button.secondary:hover {
			border: 1px solid #62a038;
			background-color: #62a038;
		}
	a.button.secondary.small {
		font-size: .8em;
	}





/****** MAP BUTTONS *****/
a.detailedmap, a.interactivemap, a.tripplanner {
    background: url("/global/img/icon-maps.png") 5px 2px no-repeat;
	background-size: 25px 200px;
	border: 1px solid #ddd;
	display: block;
	margin: 0;
    padding: 10px 0 10px 35px;
    border-radius: 5px;
    font-size: 16px;
}
    a.interactivemap {
        background-position: 5px -100px;
    }
		a.detailedmap:hover, a.interactivemap:hover, a.tripplanner:hover {
            background-color: #d3e9ff;
		}
		a.detailedmap small {
			color: #666;
		}

a.maplink {
    cursor: pointer;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid #ddd;
    display: block;
    margin: 0 15px 15px 0;
    width: 202px;
}
    a.maplink:hover {
        background-color: #ffc;
    }
    a.maplink img {
        width: 200px;
        height: auto;
        border-radius: 5px 5px 0 0;
    }
    a.maplink span {
        background: url("/global/img/icon-maps.png") 2px -4px no-repeat;
        background-size: 25px 200px;
        display: block;
        padding: 3px 5px 5px 28px;
        font-weight: 500;
    }

@media only screen and (min-width: 480px) {
    a.maplink {
        /*fixes Chrome bug in displaying floating anchor */
        position: relative;
        overflow: auto;
        float: left;
        margin-right: 1em;
    }
        a.maplink.right {
            float: right;
            margin-left: 1em;
            margin-right: 0;
        }
}



/***** TABLES *****/
table.table-chart {
    margin-bottom: 30px;
}
    table.table-chart h3 {
        padding: 0;
        margin: 0;
    }
    table.table-chart b {
        font-weight: 700;
    }
    table.table-chart th {
        background-color:#1c5c99;
        color: #ffffff;
        /*
        border-right: 1px solid #fff;
        */
        font-weight: 700;
        padding: 10px;
    }
        table.table-chart th a {
            color: #fff;
            border: none;
            text-decoration: underline;
            text-decoration-color: #7ea2c5;
        }
            table.table-chart th a:hover {
                text-decoration-color: #fff;
            }
        table.table-chart th.header-odd {
            background-color: #084c8d;
        }
        table.table-chart th.header-corner {
            background-color: #fff;
            background-color: #1c5c99;
        }
    table.table-chart sup {
        font-size: 12px;
    }
    table.table-chart td {
        /*
        border-right: 1px solid #fff;
        */
        padding: 10px;
    }
        table.table-chart td a {
            border: none;
            text-decoration: underline;
            text-decoration-color: #bbd4ee;
        }
            table.table-chart td a:hover {
                text-decoration-color: #084c8d;
            }
    table.table-chart .odd {
        background-color: #f3f3f3;
    }
    table.table-chart .intersection {
        background-color: #e7e7e7;
    }

    table.table-chart.highlight {
        background-color: #fff;
    }
    table.table-chart.highlight tr:nth-child(odd) {
        background-color: #f3f3f3;
    }


table.simple {
	margin-bottom: 1em;
	text-align: left;
}
	table.simple th, table.simple td {
		border: 1px solid #084c8d;
		padding: .5em;
	}
		table.simple th {
			color: #084c8d;
		}



@media only screen and (min-width: 1200px) { /* lg screens and up */
	.fullwidthplus {
		margin-left: -90px;
		width: 910px;
	}
	a.button-heading p.small {
		font-size: 16px;
	}
}



/****** ASIDE BLOCK *****/
.aside {
    display: block;
    max-width: 100%;    
    height: auto;
    margin: 0 0 15px 0;
    background-color: #f6f6f6;
    padding: 15px 15px 5px;
    position: relative; /* need this so links are accessible in chrome */
}

    .aside.nobg {
        background-color: inherit;
        padding: 0;
    }
@media only screen and (min-width: 480px) {
.aside {
    width: 70%;
    margin: 0 auto 15px;
}
}
@media only screen and (min-width: 768px) {

    .aside {
        float: right;
        margin: 0 -60px 30px 30px;
        padding: 25px 30px 15px;
        width: 365px;
    }
}
@media only screen and (min-width: 790px) {
    .aside {
        margin-right: -90px;
    }
}



/****** STANDARD SHOW/HIDE (FAQ) *****/
.expand_content_container {
    height: 0;
    overflow: hidden;
    padding: 0;
    margin-bottom: 1.5em;
}
    .expand {
    }
        .expand_header {
            cursor: pointer;
            color: #333;
            padding: 0 0 .25em 30px;
            padding: 0 0 .25em 0;
            display: block;
        }
            .expand_header:hover {
                color: #084c8d;
            }

            /* show gray down icon */
            .expand_header span {
                display: inline-block;
                background: url("/global/img/expand-down.png") 0 0 no-repeat;
                background-size: 1.5em 1em;
                width: 1.5em;
                height: 1em;

            }
                /* show blue down icon */
                .expand_header:hover span {
                    background-image: url("/global/img/expand-downover.png");
                }
                    .expand_header.reverse:hover span {
                        background-image: url("/global/img/expand-downover-reverse.png");
                    }

                /* show gray up icon */
                .open .expand_header span {
                    background-image: url("/global/img/expand-up.png");
                }

                /* show blue up icon */
                .open .expand_header:hover span {
                    background-image: url("/global/img/expand-upover.png");
                }
                    .open .expand_header.reverse:hover span {
                        background-image: url("/global/img/expand-upover-reverse.png");
                    }

        .expand_content {
            margin: 0 0 0 30px;
            margin: 0;
        }

/* Begin global Details & Summary HTML styles */
:root {
    --svg-code: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' preserveAspectRatio='xMinYMid'><path fill='currentColor' d='M6 8l-1 1l5 5l5-5l-1-1l-4 4l-4-4z'/></svg>");
}

summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    list-style: none;
    /* justify-content: space-between; */
    justify-content: start; 
    padding: 0 0 .75em;
}
/* Safari webkit prefix */
summary::-webkit-details-marker {
    display: none;
}

summary::after {
    background-color: #000;
    content: '';
    mask: var(--svg-code);
    -webkit-mask: var(--svg-code);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    height: 24px;
    width: 24px;
    min-width: 24px;
    margin-left: 1em;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: 0.5s;
}

details[open]>summary::after {
    transform: rotate(-180deg);
}

summary.marker-right {
    justify-content: space-between;
    padding: 0 0 .75em;
}

summary:focus>h2,
summary:focus>h3,
summary:focus>h4,
summary:focus>h5,
summary:focus>p {
    color: #084c8d;
}

summary:hover>h2,
summary:hover>h3,
summary:hover>h4,
summary:hover>h5,
summary:hover>p {
    color: #084c8d;
}

summary:active>h2,
summary:active>h3,
summary:active>h4,
summary:active>h5,
summary:active>p {
    color: #084c8d;
}

details[open] summary>h2,
details[open] summary>h3,
details[open] summary>h4,
details[open] summary>h5,
details[open] summary>p {
    color: #084c8d;
} 

details:focus summary::after {
    background-color: #084c8d;
    transition: 0.5s;
}
details:hover summary::after {
    background-color: #084c8d;
    transition: 0.5s;
}
details:active summary::after {
    background-color: #084c8d;
    transition: 0.5s;
}
details[open] summary::after {
    background-color: #084c8d;
}

@media only screen and (min-width: 768px) {
    summary::after {
        height: 30px;
        width: 30px;
        min-width: 30px;
    }
    details:hover summary::after {
        height: 30px;
        width: 30px;
    }
}

/* 
Edit for accordions with multi-column content. 
Add to <div class="row"> column wrapper inside of summary.
*/
.detail-col-wrapper {
    box-sizing: border-box;
}

/* 
Edits specific to one page (borders, colors, padding, etc.) are in their own <head> styles. 
These aren't global, but happen with some frequency. 
*/
summary.hcenter {
    justify-content: center;
}
summary h3 {
    padding-bottom: 1em;
}
.meetings-details h4 {
    padding-bottom: .5em;
}

/* For /betterbus/servicechanges pages */
details h5 {
    font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    padding-bottom: 1em;
}

/* Details / Summary in .charcoal & .darkbg sections */
.charcoal summary::after,
.darkbg summary::after {
    background-color: #fff;
}
.darkbg summary h5 {
    color: #fff;
}
.charcoal summary:focus h3,
.charcoal summary:hover h3,
.charcoal summary:active h3,
.darkbg summary:focus h5,
.darkbg summary:hover h5,
.darkbg summary:active h5 {
    color: #ccc;
}
.charcoal details:focus summary::after,
.charcoal details:hover summary::after,
.charcoal details:active summary::after,
.darkbg details:focus summary::after,
.darkbg details:hover summary::after,
.darkbg details:active summary::after {
    background-color: #ccc;
    transition: 0.5s;
}

/* 
Add class="detail-wrapper expand" to <details> within <div class="anchormenu"> for anchor list dropdown styling.
*/
#content .anchormenu .detail-wrapper {
    border: 2px solid #ccc;
    border-radius: 5px;
    margin-bottom: 1em;
    padding: 1em .5em 0;
}
#content .anchormenu .detail-wrapper summary h4 {
    padding-left: 10px;
}




/****** MAX DOTS FOR TCS and STATIONS ******/
/* need to update this to use font icons */
h4.blue, h4.green, h4.orange, h4.red, h4.yellow, h4.wes {
    background: url("/max/img/max-icon-blue.png") 0 3px no-repeat;
    background-size: 25px 25px; 
    padding-left: 37px;
    padding-top: 3px;
    color: #222;
}
    h4.green {
        background-image: url("/max/img/max-icon-green.png");
    }
    h4.orange {
        background-image: url("/max/img/max-icon-orange.png");
    }
    h4.red {
        background-image: url("/max/img/max-icon-red.png");
    }
    h4.yellow {
        background-image: url("/max/img/max-icon-yellow.png");
    }
    h4.wes {
        background-image: url("/wes/img/wes-icon.png");
    }


/****** MAX SCHEDULE DOTS *****/
.maxdots a {
    display: block;
    padding: 12px 0 12px 12px;
    width: 100%;
    margin: 0;
    color: #000000;
    border: 1px solid #eee;
    border-radius: 5px;
}
    .maxdots a:hover {
        background-color: #dbdbdb;
        border: 1px solid #eee;
    }
    .maxdots a i {
        font-size: 150%;

        padding: 0 10px 15px 0;
        float: left;
    }
    .maxdots a b {
        font-size: 1.25em;
        font-weight: normal;
        color: #084C8D;
    }
@media only screen and (min-width: 992px) and (max-width: 1200px) { /* md screens only */
    .maxdots a {
        font-size: 16px;
    }
}








/****** EMAIL SUBSCRIBE FORM ******/
form.getemailupdates {
    text-align: center;
    display: inline-block;
}
form.getemailupdates input, form.getemailupdates select {
    border-radius: 5px;
    padding: 8px 15px;
/*    border: 2px solid #ccc;*/
    font-size: 18px;
    line-height: 1.4;
    margin-bottom: 15px;
    -webkit-appearance: none;   /* removes default safari formatting */
	width: 100%;
	font-family: "Source Sans Pro", Helvetica, Arial;
}
form.getemailupdates select {
/*
background: url("/global/img/select-arrow.png") right 18px no-repeat #fff;
background-size: auto 12px;
padding-right: 40px;
*/
}
form.getemailupdates input#email, form.getemailupdates input#phone, form.getemailupdates input#q {
    padding-top: 9px;
    padding-bottom: 9px;
    width: 100%;
}
form.getemailupdates.half input#email, form.getemailupdates.half input#phone {
    width: 205px;
}
form.getemailupdates input.submit {
    font-weight: bold;
    display: inline-block;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    text-align: center;
    vertical-align: top;
    background-color: #62a038;
    border: 2px solid #62a038;
    cursor: pointer;
	width: auto;

}
form.getemailupdates.half input.submit {
    padding-left: 5px;
    padding-right: 5px;
}
form.getemailupdates input.submit:hover {
    background-color: #568d32;
    border-color: #568d32;
}

@media only screen and (min-width: 768px) { /* sm screen and up */
    form.getemailupdates select {
        width: auto;
    }
    form.getemailupdates input#email, form.getemailupdates input#phone, form.getemailupdates input#q, form.getemailupdates input#q2 {
        margin-right: 10px;
        width: 400px;
    }
}
@media only screen and (min-width: 1200px) { /* lg screens and up */
    form.getemailupdates.half input#email {
        width: 275px;
    }
}

/* Place a visible label above the email signup input on /schedules pages. */
form.getemailupdates .top-label span {
    display: block;
    text-align: left;
}
form.getemailupdates label + input.submit {
    vertical-align: baseline;
}



/****** ANCHOR MENU ******/	
ul.anchor {
    text-align: center;
    margin: 30px 0 5em;
    padding: 0;
    list-style: none;
    clear: both;
}
    ul.anchor.tight {
        margin: 0 0 1em;
    }
    ul.anchor li {
        display: inline-block;
        padding: 0;
    }
        ul.anchor li a {
            padding: 5px 20px;
            margin: 0 5px 10px;
            display: block;
            color: #333;
            border-radius: 5px;
            background-color: #f6f6f6;
            border: 1px solid #999;
            font-weight: 400;
        }
        ul.anchor li b {
            font-weight: 600;
        }
            ul.anchor li a:hover {
                background-color: #dbdbdb;
                border-color: #ccc;
                color: #333;
            }
            ul.anchor li a.new {
                color: #333;
                background-color: #ffc;
            }
ul.anchor.big {
	margin-top: 4em;
	margin-bottom: 0;
}
	ul.anchor.big li a {
		display: inline-block;
		padding: .5em 1em;
		border-radius: 10px;
		text-align: center;
		margin-bottom: 1em;
		font-size: 115%;
	}
		ul.anchor.big li a:hover {
			border-color: #084c8d;
			background-color: #084c8d;
			color: #fff;
		}

@media only screen and (min-width: 768px) {
	ul.anchor.big li a {
		font-size: 125%;
		padding: 1em 1.5em;
	}
}


/****** ANCHOR MENU COMPACT (SHOW/HIDE) ******/	
        ul.anchor.compact {    /* inherit from .anchor */
            margin: 0;
            text-align: left;
        }
            ul.anchor.compact li { /* inherit from .anchor */
                display: block;
            }
.expand_container {
    clear: both;
}
.anchormenu .expand_content_container {
    height: 0;
    overflow: hidden;
    padding: 0;
}
    .anchormenu .expand {
        border: 2px solid #ccc;
        border-radius: 5px;
        padding: 0;
        margin: 2em 0 5em;
    }
        .anchormenu .expand_header {
            display: block;
            cursor: pointer;
            padding: 10px 15px 5px 10px;
            color: #666;
      }
           .anchormenu .expand_header:hover {
               color: #084c8d;
            }
           .anchormenu .expand_header span {

               float: right;
            }
        .anchormenu .expand_content {
            margin: 0;
            padding: 0 5px 15px;
        }
        .anchormenu .expand_content_container {
            margin-bottom: 0;
        }

/****** ALERT LINK IN ANCHOR MENU ******/
ul.anchor li.servicealertlink {
    display: none;
}
    ul.anchor li.servicealertlink a {
        background-color: #ffc;
    }
        ul.anchor li.servicealertlink a i {
            color: #c63c2f;
        }






/***** FREQUENT SERVICE BUGS *****/
.frequentservice-bug .contentcontainer {
	padding-top: 1em;
	padding-bottom: 0;
}
    .frequentservice-bug .box {
		padding-top: 1em;
    }
    .frequentservice-bug p {
		line-height: 1.25;
    }
    .frequentservice-bug img {
        width: 50px;
        margin-top: 0;
    }
@media only screen and (min-width: 992px) { /* md screens and up */
    .frequentservice-bug img {
        width: 75px;
        margin-top: -10px;
    }
}


/***** ZOOM ICON *****/
p.zoom {
    position: relative;
}
    p.zoom img {
        border: 1px solid #ddd;
        background-color: #fff;
        padding: 15px;
        border-radius: 5px;
    }
    p.zoom span {
        position: absolute;
        top: 9px;
        right: 9px;
        transition: opacity 0.2s ease-in 0s;
        opacity: .25;
        cursor: pointer;
        border-radius: 3px;
        background: url("/global/img/icon-zoom.png") 0 0 no-repeat;
        background-size: 50px 50px;
        display: block;
        width: 50px;
        height: 50px;
    }
    p.zoom:hover span {
        opacity: 1;
    }

p.zoomy {
    padding-bottom: 0;
}
    p.zoomy a img {
        padding: 0;
        border-radius: 15px;
        outline: 2px solid #fff;
        outline-offset: -2px;
        box-shadow: 0 0 0 1px #ddd;
        
        transition-property: box-shadow;
        transition-duration: .15s;
        transition-timing-function: ease-out;
    }
        p.zoomy a:hover img {
            box-shadow: 0 0 0 1px #333;
            transition-property: box-shadow;
            transition-duration: .2s;
            transition-timing-function: ease-out;
        }




/******* MODES PAGES *******/
    .routepicker select {        
        display: block;
        padding: .5em;
        color: #333;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 5px;
        cursor: pointer;
        margin: 1em;
        float: right;
    }
@media only screen and (min-width: 768px) { /* sm screens and up */
	.routepicker {
		margin: 0 auto -50px;
		width: 720px;
		height: 50px;
		text-align: right;
	}
}
@media only screen and (min-width: 992px) { /* md screens and up */
	.routepicker {
		width: 940px;
	}
}
@media only screen and (min-width: 1200px) { /* lg screens and up */
	.routepicker {
		width: 1110px;
	}
}




/****** SCHEDULE PAGES ******/
@media only screen and (min-width: 768px) { /* sm screens and up */
	a.detailedmap, a.interactivemap {
		padding: 15px 0 15px 35px;
		background-position: 5px 10px;
	}
		a.interactivemap {
			background-position: 5px -90px;
		}

		a.detailedmap, a.interactivemap, ul.schedulelinks a {
			font-size: inherit;
		}
	p.noservice {
		margin-top: 11px;
	}
}