@charset "utf-8";
/* Master Plan - April 2026 */

/* CSS Root - Set root font size to base 10 (10/16 = 0.625 = 62.5%) or calc(1em * 0.625) if supported, required for REM measurements (percentages or relative units are used to support client specified font sizes which allows for better accessibility). */
:root { font-size: 62.5%; font-size: calc(1em * 0.625); }

/* CSS Reset - 1em Base with Box Sizing */
* { border: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: arial,sans-serif; font-size: 1em; -webkit-font-smoothing: antialiased; line-height: 1em; margin: 0; padding: 0; text-align: center; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; vertical-align: middle; }

body, html { margin: 0;padding:0;background-color: #fff;font-family: 'Heebo', sans-serif;  vertical-align: middle; }

.Wrapper {margin: 0 auto; background: url(https://static.spokanecity.org/my/images/pages/parksrec/preserve-and-play/bg.jpg) no-repeat top;}

.Header {background-color:#aaa77d; color: #333;}
.Header>* {color: #333; text-align: center;}

.MainNav {overflow: hidden; background-color: #aaa77d;}
.MainNav >a.Icon {display: none;}

.Menu {margin: 0 auto;padding: .4rem;}
.Menu li {color: #333; text-decoration: none; display: inline-block; padding: 1rem 1.5rem;}
.Menu li a, .MainNav li a:visited {color: #333; text-decoration: none;text-align: center;}
.Menu li a:hover {color: #000;}

.Menu li a.Special, a.Special:visited {color: #f9c20a; text-decoration: none;text-align: center;}
.Menu li a.Special:hover {color: #fbcc2e;}


.Container { margin: 0 auto;position: relative; padding: 2rem; width: 100%; max-width: 1080px; }
/*.Container:nth-child(even) {background-color: #fff;}*/
.Logo {padding-bottom: 2rem;}
.Logo img {width: 100%; max-width: 38rem; }

.Block {padding: 2.4rem; margin: 2.4rem 0;}
.Orange {padding: 4.8rem; background-color: #f58220; width: 49%; display: inline-block; margin-right: 2%;}
.Intro { width: 48%;display: inline-block; vertical-align: top; margin-top: 0;}
.Basic { width: 48%;display: inline-block; vertical-align: top;}
.Olive {padding: 4.8rem; background-color: #91982c; width: 49%; min-height: 41rem; display: inline-block; margin-right: 2%;}
.Images {width: 49%; display: inline-block; vertical-align: top; padding: 0; background-color: aqua; margin-right: 2%;}

.Bar {padding: 1.2rem; margin: 2rem 3rem 2rem .5rem;background-color: #005826; color: #fff;}
.Bar>p, .Bar>p>a, .Bar>p>a:visited {color: #f9c20a; font-size: 3.2rem;text-decoration: none;} 

.Padding {padding: 1.6rem;}
.StandAlone {padding: 2.4rem 0;}
.Center {padding: 2.4rem .8rem; text-align: center;}
h1 {font-size: 4.0rem;line-height: normal; color:#45390c; padding:2rem;  width: 100%; font-weight: 700;text-transform: uppercase;}

h2 {font-size: 3.2rem;padding: .8rem; color: #45390c; text-align: left;}
h3 {font-size: 2.4rem;padding: .8rem; color: #45390c; text-align: left;}
h3.White {font-size: 2.4rem;padding: .8rem; color: #fff; text-align: left;}

p {text-align: left;color: #666; font-size: 1.8rem; line-height: 2.8rem; padding: .8rem .8rem 1.2rem .8rem;}
p.Center {text-align: center;}
p.QuoteCitation {text-align: right; font-size: 1.4rem; line-height: 2.1rem;}

img {width: 100%;}
img.WithBorders {width: 100%; border: 1px solid #aaa77d;}
.Intro img {padding-left:.8rem; padding-bottom: 1.2rem;}

hr {height: 1px; border: none; border-top: 1px dotted #999; margin-top: 70px; margin-bottom: 4.5rem;margin-left: 1.5rem;}

a, a:visited {font-family:sans-serif;text-decoration: underline;font-size: 1.8rem;color:#292929;}
a:hover {font-family:sans-serif;color:#1b1b1b;}

a.Button, a.Button:visited {background-color:#45390c; width:auto; max-width: 1.5rem; padding: 1.2rem 1.6rem;color: #fff;text-decoration: none;}
a.Button:hover {background-color:#715d2d;color: #fff;}

ul {}
ul li {color: #666; font-size: 1.8rem; line-height: 2.6rem; padding: 0 16.rem 1.2rem 1.6rem;}

.Orange>p {color: #333; font-size: 2.1rem; line-height: 3.2rem;}
.Olive>p {color: #222; font-size: 2.1rem; line-height: 3.2rem;}
.Orange>h3 {color: #333;}
.Olive>h3 {color: #222;}



/* Blockquotes */
blockquote {position: relative; padding: 3rem; font-size: 1.4rem;font-style: italic; margin-top: -3rem;}
blockquote>p { font-size: 1.8rem; font-style: italic; line-height: 2.8rem; padding-top:0; padding-right: 1.2rem; padding-bottom: .8rem; padding-left: 1.2rem; text-align: center; font-family: Georgia, "serif";}

blockquote>p:before {content: '\201C'; position: absolute; left: 1rem; top:3rem; font-family: Georgia, serif; font-size: 8rem; color: #666;}
blockquote>p:after {content: '\201D'; position: absolute; right: 3rem; bottom:1rem; font-family: Georgia, serif; font-size: 8rem; color: #666; }


/*MailChimp*/
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif;}
#mc_embed_signup h2 {color:#45390c; text-align: left;}
#mc_embed_signup .button {border-radius: 0; font-family:sans-serif; font-size: 1.8rem; background-color:#45390c; padding: .4rem 1.6rem;height: 4.4rem; color: #fff; text-decoration: none;}
#mc_embed_signup .button:hover {background-color:#715d2d;}
#mc_embed_signup input {border-radius: 0;}

.FullWidth {width: 100%;}

/*Timeline */

.Timeline { padding:.8rem 2.5rem; position: relative; margin: 0 auto; width: 100%;}
.TlInner {width: 60%; position: relative; margin: 0 auto; padding-left: 2rem;}
.TlInner:before {content: ""; position: absolute; top: 0; left: 0; height: 96%; border: 1px solid #999;}

.Primary { padding: 0 2rem; position: relative; margin: 5rem auto; }
.Primary > span { content: ""; position: absolute; top: 0; left: -2rem; height: 100%; border: 1px solid #999; }
.Primary > span:before { content: ""; position: absolute; left: -1.5rem; width: 3rem; height: 3rem; }
.Primary > span:before { top: -.3rem;}
.Primary .Title {font-size: 2.1rem; color: #333; text-transform: uppercase; padding: 0 1rem .4rem 1rem;text-align: left; }
.Primary .Subtitle { font-size: 1.4rem; color: #666; text-transform: uppercase; padding: .2rem 1rem;text-align: left;}
.Primary .Info { text-align: left;color: #666; font-size: 1.8rem; line-height: 2.8rem; padding: .8rem .8rem 1.2rem .8rem;}

.Primary > span.Last { border:none;}
.Primary.Phase1 {margin-top: 1rem;}

.Primary.Phase1 > span:before {background: #f9c20a;}
.Primary.Phase2 > span:before {background: #f58220;}
.Primary.Phase3 > span:before {background: #91982c;}
.Primary.Phase4 > span:before {background: #005826;}
.Primary.Adoption > span:before {background: #45390c;}
.Primary.AdoptionChecked > span:before {background: #45390c; background-image: url(//static.spokanecity.org/my/svg/check-mark.svg);}

.Secondary { padding: .8rem 2rem;  position: relative; margin: -1rem auto 1rem auto;}
.Secondary > span { content: ""; position: absolute; top: 0; left: -2rem; height: 100%; border: 1px solid #999;}
.Secondary > span:before { content: ""; position: absolute; left: -.7rem; width: 1.4rem; height: 1.4rem; background: #000; margin-top:2rem; }
.Secondary .Title {font-size: 1.8rem; color: #333; text-transform: uppercase; padding: 1rem 1rem .4rem 1rem;text-align: left; font-weight: normal;}
.Secondary .Subtitle { font-size: 1.4rem; color: #666; text-transform: uppercase; padding: .2rem 1rem;text-align: left;}
.Secondary .Info { text-align: left;color: #666; font-size: 1.8rem; line-height: 2.8rem; padding: .8rem .8rem 1.2rem .8rem;}

.Primary + .Secondary {margin-top: -5rem;}

@media screen and (max-width: 47.5em) {
	/*Screen size 760px */
	.Block {margin: 0;}
	.Orange,.Intro,.Basic,.Olive,.Images {width: 100%; margin-left: 0; padding: 1.8rem;}
	.Intro {margin-top: 2rem;}
	.Bar {margin: 2rem 0rem 2rem 0rem;}
	.FullWidth { padding: 2rem;}
	.Timeline { padding: 0;}
	.TlInner { width:100%;padding-right: 0;}
	.Primary, .Secondary {padding: 0 2.4rem;}
	.TlInner:before, .Primary > span, .Secondary > span { left: .8em; }
	.TlInner:before { left: 2.8rem;}
	.Timeline >h3{text-align: left;}
	.Intro {padding:0;}
	.Intro img {padding-left:0;}
	.Images {padding: 0;}
	.Orange>p, .Olive>p { font-size: 1.8rem; line-height: 2.8rem;}
	blockquote { margin-top: 0;}

}


@media screen and (max-width: 38em){
	/*Screen size 608px */
	
	.MainNav {padding: 1.2rem .8rem .8rem .8rem;}
	.MainNav >a.Icon {float: left;display: block; padding: .8rem;}
	.MainNav >a.Icon img {}
	
	
	.MainNav>*.Menu { display: none; }
	.MainNav.Open>*.Menu { display: block; padding-bottom: 1.2rem;padding-top: .4rem;}
	.MainNav.Open>*.Menu li{ width: 100%; }
	
	.MainNav>a,.MainNav.Open>a {text-decoration: none;}
	.MainNav>a>span.MenuIcon:before { content: "\2630"; text-decoration: none; color: #fff; font-size: 3.6rem;}
	.MainNav.Open>a>span.MenuIcon:before { content: "\2716"; text-decoration: none; color: #fff; font-size: 3.6rem;}
	
  
		
}