@charset "utf-8";
@font-face {
    font-family: "Evanson";
    src:url("https://static.spokanecity.org/my/fonts/custom/parksrec/EvanstonAlehouse1858MediumR.otf");
    font-weight: normal;
    font-style: normal;
}

/* Park Improvement Levy - Oct 2025*/

/* 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; }

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

/*.MainNav {overflow: hidden; background-color: #aaa77d;}*/
.MainNav {overflow: hidden; background-color: #060; min-height: 5rem;}
.MainNav >a.Icon {display: none;}

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

.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: 40%;}

.MainGraphic {padding: .8rem;margin: 1.2rem 0;}
.Block {}
.FullContent {padding: 2.4rem; text-align: left;}
.Orange {padding: 4.8rem; background-color: #f58220; width: 47%; display: inline-block; margin-right: 3%;}
.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%;}
.Cream { width: 48%;display: inline-block; vertical-align: top; background-color:#ffe8b3; padding: .6rem 1rem; margin-top: 2rem;}

.SectionIcons {width: 100%; min-height: 15rem; padding: 2rem 1rem;}
.SectionIcons>div {position: relative; display: inline-block; vertical-align: top; width: 18%; margin: .8rem 1.2rem; padding-bottom: 4rem;}

.Docs {margin-top: 5rem;}
.Docs>div {width: 24%; display: inline-block; margin: 0 2rem;}

.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: 1.2rem .8rem; text-align: center;}
h2 {font-family: 'Evanson', sans-serif;font-size: 5.6rem;line-height: 6.4rem; color:#060; padding:2rem;  width: 100%; font-weight: 700;text-transform: uppercase;}
h2.OrangeColor { color:#f58221;}
h2.OliveColor { color:#aaa77c;}
h2.GoldColor { color:#fac408;}

h3 {font-size: 3.2rem; line-height: 5.6rem;padding: .8rem; color: #45390c; text-align: left;}
h3.Green {font-family: 'Evanson', sans-serif; font-size: 3.2rem; line-height: 4.2rem;padding: .8rem; color: #060; text-align: left; text-transform: uppercase; font-weight: 700;}
h3.OrangeColor {font-family: 'Evanson', sans-serif; font-size: 3.2rem; line-height: 4.2rem;padding: .8rem; text-align: left; text-transform: uppercase; font-weight: 700; color: #f58221; }
h3.OliveColor {font-family: 'Evanson', sans-serif; font-size: 3.2rem; line-height: 4.2rem;padding: .8rem; text-align: left; text-transform: uppercase; font-weight: 700; color: #aaa77c;}
h3.GoldColor {font-family: 'Evanson', sans-serif; font-size: 3.2rem; line-height: 4.2rem;padding: .8rem; text-align: left; text-transform: uppercase; font-weight: 700; color: #fac408;}

h4 {font-size: 2.4rem; line-height: 3.6rem; padding: .8rem; color: #45390c; text-align: left;}
h4.White {font-size: 2.4rem; line-height: 3.6rem; padding: .8rem; color: #fff; text-align: left;}
h4.Green {font-family: 'Evanson', sans-serif; font-size: 2.4rem; line-height: 3.6rem;padding: .8rem; color: #060; text-align: left; text-transform: uppercase; font-weight: 700;}
h4.Gold {font-family: 'Evanson', sans-serif; font-size: 2.4rem; line-height: 3.6rem;padding: .8rem; color: #fac408; text-align: left; text-transform: uppercase; font-weight: 700;}
h4.OrangeColor {font-family: 'Evanson', sans-serif; font-size: 2.4rem; line-height: 3.6rem;padding: .8rem; color: #f58221; text-align: left; text-transform: uppercase; font-weight: 700;}
h5 {font-size: 3.0rem; line-height: 4.2rem; color:#333; padding: .8rem; text-align: left;}
h6 {font-size: 2.4rem; line-height:3.6rem; color:#333; padding: .8rem; text-align: left;}

p {font-family: 'Heebo', sans-serif;text-align: left;color: #666; font-size: 1.8rem; line-height: 2.8rem; padding: .8rem 1.2rem 1.2rem .8rem;}
p.Center {text-align: center;}
p.QuoteCitation {text-align: right; font-size: 1.4rem; line-height: 2.1rem;}
p.SubTitle {font-size: 2.8rem; line-height: 3.6rem; color:#060; text-align: center; font-weight: 300;}
p.Notes {font-size: 1.4rem; color: #999;}
p.Alert {font-size: 1.4rem; color: #900;}
p.Warning {font-size: 1.4rem; color:#e47008;}
p.IconText {padding: 0;}
p.IconText>a, p.IconText>a:visited {font-family: 'Evanson', sans-serif; font-size: 1.8rem; line-height:1.8rem; text-align: center; padding: .8rem; color: #060; text-decoration: none; display: block; width: 100%;}
p.IconText.OrangeColor>a, p.IconText.OrangeColor>a:visited {color: #f58221;}
p.IconText.GoldColor>a, p.IconText.GoldColor>a:visited {color: #fac408;}
p.Caption {padding: .4rem .8rem 2rem .8rem; text-align: center; font-style: italic;}

.Cream>p {color: #444;}


img {width: 100%;}
img.Poster {width: 100%; padding: 1.6rem;}
img.WithBorders {width: 100%; border: 0.2rem solid #aaa77d;}
img.WithBordersPad {width: 98%; border: 0.2rem solid #ccc; padding: .6rem;}
img.NoBorders {width: 100%; padding: 1rem;}
img.Right{float: right; margin-left: 1.6rem;}
img.Left{float: left; margin-right: 1.6rem;}
img.Medium {width: 35%;}
img.Small {width: 25%;}
.Intro img {padding-left:.8rem; padding-bottom: 1.2rem;}
img.MiniMap{display: inline-block; width: 42%; vertical-align: top; margin-bottom: 4rem;}
img.Icons{display: inline-block; width: 56%; vertical-align: top; margin-bottom: 4rem;}

.Video {width: 100%; padding: 0 0 0 .4rem; margin-top: 5rem;}
.EmbedContainer {position: relative; padding-bottom: 56.25%; overflow: hidden; }	
.EmbedContainer iframe,.EmbedContainer object,.EmbedContainer embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

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

a, a:visited {font-family:sans-serif;text-decoration: underline;font-size: 1.8rem;color:#45390c;}
a:hover {font-family:sans-serif;color: #715d2d;}

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 {padding:0 4.8rem;}
ul li {text-align: left; color: #666; font-size: 1.8rem; line-height: 2.6rem; padding: 0 1.6rem 1.2rem 1.6rem;}

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

.Boxes {width: 100%; height:18rem; text-align: center; position: relative; clear: both;margin: 6rem 0;}
.Boxes>div {width: 23%; height: 100%; position: relative; display: inline-block; text-align: center;margin: 0 .6rem;}
.GreenBox {background-color: #060;}
.OrangeBox {background-color: #f48221;}
.YellowBox {background-color: #fac408;}
.OliveBox {background-color: #aaa77c;}

p.BoxName {text-align: center; padding-top: 12%;}
p.BoxName>a, p.BoxName>a:visited { font-family: 'Evanson', sans-serif; font-size: 2.8rem; text-transform: uppercase; line-height: 2.8rem; color: #fff; text-decoration: none;}

.Percentage {padding: .5rem 1.5rem .75rem 1.5rem; background-color:#eee; position: absolute;bottom: 0; right: 0; border-top-left-radius: 1.5rem 1.5rem; border-top: .4rem solid #fff;border-left: .4rem solid #fff; }
.Percentage span {padding: .2rem .4rem; font-family: 'Evanson', sans-serif;font-size: 2.8rem; font-weight: 600; color: #777; line-height: 4.2rem;}



/* 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; }


@keyframes modal-video{from{opacity:0}to{opacity:1}}@keyframes modal-video-inner{from{transform:translate(0, 100px)}to{transform:translate(0, 0)}}.modal-video{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.7);z-index:1000000;cursor:pointer;opacity:1;animation-timing-function:ease-out;animation-duration:.3s;animation-name:modal-video;-webkit-transition:opacity .3s ease-out;-moz-transition:opacity .3s ease-out;-ms-transition:opacity .3s ease-out;-o-transition:opacity .3s ease-out;transition:opacity .3s ease-out}.modal-video-close{opacity:0}.modal-video-close .modal-video-movie-wrap{-webkit-transform:translate(0, 100px);-moz-transform:translate(0, 100px);-ms-transform:translate(0, 100px);-o-transform:translate(0, 100px);transform:translate(0, 100px)}.modal-video-body{max-width:940px;width:100%;height:100%;margin:0 auto;display:table}.modal-video-inner{display:table-cell;vertical-align:middle;width:100%;height:100%}.modal-video-movie-wrap{width:100%;height:0;position:relative;padding-bottom:56.25%;background-color:#333;animation-timing-function:ease-out;animation-duration:.3s;animation-name:modal-video-inner;-webkit-transform:translate(0, 0);-moz-transform:translate(0, 0);-ms-transform:translate(0, 0);-o-transform:translate(0, 0);transform:translate(0, 0);-webkit-transition:-webkit-transform .3s ease-out;-moz-transition:-moz-transform .3s ease-out;-ms-transition:-ms-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out}.modal-video-movie-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%}.modal-video-close-btn{position:absolute;z-index:2;top:-35px;right:-35px;display:inline-block;width:35px;height:35px;overflow:hidden;border:none;background:transparent}.modal-video-close-btn:before{transform:rotate(45deg)}.modal-video-close-btn:after{transform:rotate(-45deg)}.modal-video-close-btn:before,.modal-video-close-btn:after{content:'';position:absolute;height:2px;width:100%;top:50%;left:0;background:#fff;border-radius:5px;margin-top:-6px}

.LevyVideos { width: 100%; padding: 0;}
#ThreeUp li {min-height: 28rem; width: 33%;display: inline-block; padding: 1rem 1rem; vertical-align: top;}
#TwoUp li {min-height: 28rem; width: 48%;display: inline-block; padding: 1rem 1rem; vertical-align: top;}
.VideoTitle {padding: .8rem .4rem; color: #666; text-align: center;}



@media screen and (max-width: 60em) {
	/*Screen size 960px */
	img.MiniMap{ width: 41%;}
}


@media screen and (max-width: 54em) {
	/*Screen size 864px */
	p.BoxName>a, p.BoxName>a:visited { font-size: 2.4rem;}
	.Percentage span{ font-size: 2.4rem;}
	
	#ThreeUp li {min-height: 30rem;}
}

@media screen and (max-width: 50em) {
	/*Screen size 800px */
	.Boxes { height: 100%;}
	.Boxes>div { margin:0 .4rem .8rem .4rem;width: 47%;height: 15rem;}
	p.BoxName {padding-top: 10%;}
	
	#ThreeUp li {min-height: 28rem; width: 48%;}
}

@media screen and (max-width: 47.5em) {
	/*Screen size 760px */
	.MainGraphic {padding: 1.2rem 0;margin: 1.2rem 0;}
	.Block {margin: 0;}
	.FullContent,.Orange,.Intro,.Basic,.Olive,.Images,.Cream {width: 100%; margin-left: 0; padding: 1.8rem;}
	.Intro {margin-top: 2rem;}
	.Bar {margin: 2rem 0rem 2rem 0rem;}
	.FullWidth { padding: 2rem;}
	.Intro {padding:0;}
	.Intro img {padding-left:0;}
	.Images {padding: 0;}
	.Orange>p, .Olive>p, .Cream>p { font-size: 1.8rem; line-height: 2.8rem;}
	blockquote { margin-top: 0;}
	.Docs>div {width: 40%;}
	.Video { margin-top: 0;}
	h2 {font-size: 4.2rem;line-height: 5.6rem;}
	.Center {margin-bottom: 2.4rem;}
	img.MiniMap {width: 90%; margin-bottom: 2rem; margin-left: 6%;}
	img.Icons {width: 100%; margin-bottom: 2rem; margin-top: 2rem;}
	.SectionIcons {padding: 0 1rem;}
	.SectionIcons>div { padding-bottom: 1.5rem;}
	p.IconText>a,p.IconText>a:visited {font-size: 1.4rem; line-height: 1.4rem;}

}
@media screen and (max-width: 45em) {
	#ThreeUp li {min-height: 25rem; width: 48%;}
	#TwoUp li {min-height: 20rem;}
	
}

@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;}
	.Docs {margin-top: 3rem;}
	.Docs>div {width: 96%;}
	
	.Percentage {padding: .15rem 1rem .35rem 1rem;}
	p.BoxName {padding-top: 8%;}
	p.IconText>a,p.IconText>a:visited {font-size: 1rem; line-height:1rem;}
	h2 {padding: .8rem;}
	
	.SectionIcons>div { width: 24%; }
	
}

@media screen and (max-width: 35em) {
	#ThreeUp li, #TwoUp li {width: 100%;}
}


@media screen and (max-width: 25em){
	/*Screen size 400px */
	h2 {font-size: 3.2rem; line-height: 4.2rem;}
}

@media screen and (max-width: 20em){
	/*Screen size 320px */
	.SectionIcons>div { width: 36%; }
}