body,div,p,td,th { font:15px Verdana,sans-serif; }
body {
	padding:0px; margin:0px;
	background-color:#abbe99;
	background-image:url('images/backgrounds/ssm-40.jpg');
	background-repeat:no-repeat;
	background-position:center;
	background-origin:center;
	background-attachment:fixed;
	background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover;
}
a[href] { color: #0000cc; text-decoration:none; }
a[href]:visited { color: #3300cc; }
a[href]:hover { color: #0000ff; text-decoration:underline; }
div { box-sizing:border-box; }
h1 { font-size:2em; margin:8px 0px 12px 0px; }
h2 { font-size:1.5em; margin:8px 0px 10px 0px; }
h3 { font-size:1.3em; margin:8px 0px 8px 0px; }
h4 { font-size:1.1em; margin:8px 0px 6px 0px; }
h5 { margin:0px 0px 3px 0px; }
ul { padding:0px 0px 0px 1em; margin:0px; }
ul li { margin-bottom:4px; }
p { margin:0px 0px 6px 0px; }
table { border-collapse:collapse; }

@font-face {
	font-family:Rusticana; src:url('images/fonts/Rusticana-custom.ttf') format('truetype');
	font-weight:normal;
	font-style:normal;
}
.fancyfont { font-family:Rusticana,Verdana,sans-serif; }
h1.fancyfont { font-size:26px; font-family:"Rusticana"; line-height:1.05; letter-spacing:-0.05em; }
h2.fancyfont { font-size:23px; font-family:"Rusticana"; line-height:1.05; letter-spacing:-0.05em; }
h3.fancyfont { font-size:19px; font-family:"Rusticana"; line-height:1.05; letter-spacing:-0.05em; }
@media screen and (max-width:500px) {
	h1.fancyfont { font-size:20px; }
	h2.fancyfont { font-size:18px; }
	h3.fancyfont { font-size:14px; }
}

a[href].underlined { text-decoration:underline; }
a[href].plain { text-decoration:none; }
a[href].plain:hover { text-decoration:underline; }
a[href].nounderline { text-decoration:none; }
a[href].nounderline:hover { text-decoration:none; }
a.external { padding-right:10px; background-image:url('images/link.svg'); background-repeat:no-repeat; background-size:9px 9px; background-position:100% 3px; }

.smallest { font-size:80%; }
.smaller { font-size:90%; }
.bigger { font-size:110%; }
.left { text-align:left; }
.centered { text-align:center; }
.smallcaps { font-variant:small-caps; }
.bold { font-weight:bold; }
.italic { font-style:italic; }
.underlined { text-decoration:underline; }
.nowrap { white-space:nowrap; }
.blue_text { color:#0000aa; }
.blue_text a[href] { color:#0000aa; }
.green_text { color:#085d05; }
.green_text a[href] { color:#085d05; }
.white_text { color:white; }
.white_text a[href] { color:white; }
.blue_bg { background-color:#0000aa; }
.green_bg { background-color:#085d05; }
.smallspaceafter { margin-bottom:3px; }
.nospaceafter { margin-bottom:0px; }
.nospacebefore { margin-top:0px; }
.spacebefore { margin-top:1em; }


div.main {
	display:block;
	width:90%; min-width:450px;
	border-radius:10px;
	margin:2% auto 2% auto;
	background:white;
	/* border:solid 3px #dd99dd; border-radius:12px; */
	text-align:center;
	box-shadow:3px 3px 7px #666666;
}
div.header {
	width:100%;
	border-radius:10px 10px 0px 0px;
	overflow:hidden;
	padding:8px 3% 8px 3%;
	color:white;
	background-color:#0000aa;
	background-image:url('images/backgrounds/lupine-banner-blue.jpg');
	background-repeat:no-repeat;
	background-position:center;
	background-origin:center;
	background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover;
}
div.header_wide {
	display:block;
	min-height:45px; max-height:114px;
}
div.header_stacked {
	display:none;
	max-height:190px;
}
div.nav_bar {
	width:100%;
	background:#4444cc;
	margin:0px;
	padding:0px 2.5%;
}
div.nav_links {
	width:100%;
	padding:4px 0px;
	display:flex; justify-content:space-around; align-items:center;
}
div.nav_link {
	font-size:95%;
	padding:0px 2px;
	xwidth:100%;
	xtext-transform:uppercase;
	xflex-basis:32%;
}
table.nav_links {
	width:100%;
}
td.nav_link {
	width:33.33%;
	font-size:95%;
	padding:4px 2px;
	text-align:center;
}
.nav_link.selected {
	/* background:rgba(255,255,255,0.2); */
}
.nav_link a[href] {
	color:white;
}
.nav_link a[href]:hover {
	text-shadow:0px 0px 10px white;
}

div.footer {
	width:100%; min-height:48px;
	border-radius:0px 0px 10px 10px;
	padding:12px;
	color:white;
	background-color:#085d05;
	background-image:url('images/backgrounds/violet-banner-green.jpg');
	background-repeat:no-repeat;
	background-position:center;
	background-origin:center;
	background-size:auto;
}
div.footer .donate_logo {
	height:15px;
}

div.middle {
	width:100%; min-height:320px;
	background-color:white;
	padding:2.5%;
}
div.middle.with_background {
	background-image:url('images/dougfir2.png');
	background-repeat:repeat-y;
	background-position:top center;
	background-origin:center;
	background-size:contain;
}

.vmiddle_container { display:flex; justify-content:center; align-items:center; }
.vmiddle { width:100%; }

.four_across_1 { display:block; margin:0% 1.5% 0% 0%; flex-grow:1; width:22.75%; }
.four_across_2 { display:block; margin:0% 1.5% 0% 1.5%; flex-grow:1; width:22.75%; }
.four_across_3 { display:block; margin:0% 1.5% 0% 1.5%; flex-grow:1; width:22.75%; }
.four_across_4 { display:block; margin:0% 0% 0% 1.5%; flex-grow:1; width:22.75%; }

div.banner { /* decorative banner */
	width:100%; height:5em; margin-bottom:6px;
	background-repeat:no-repeat;
	background-position:center top;
	background-origin:center top;
	background-size:cover; -xwebkit-background-size:cover; -xmoz-background-size:cover; -xo-background-size:cover;
}

.popup_background {
	display:block; position:fixed; top:0; bottom:0; left:0; right:0; background-color:rgba(0,0,0,0.75);
}
.popup_item {
	display:block; box-sizing:border-box; overflow:hidden;
	position:fixed; z-index:100000; left:50%; top:25%; transform:translate(-50%, -25%);
	background-color:white; border:solid 0px black; text-align:center;
	box-shadow:16px 16px 40px #333333;
}
img.popup_item, .popup_item img {
	display:block;
	cursor:zoom-out;
}


@media screen and (max-width:720px) {
	body,div,p,td,th { font:13px Verdana,sans-serif; }
	div.main {
		/* width:90%; min-width:324px; max-width:720px; */ /* 324 = 90% of 360px */
		width:93%; min-width:335px; max-width:720px; /* 335 = 93% of 360px */
	}
	div.footer .donate_logo {
		height:14px;
	}
}

@media screen and (max-width:500px) {
	body,div,p,td,th { font:12px Verdana,sans-serif; }
	div.header_stacked {
		display:block;
	}
	div.header_wide {
		display:none;
	}
	div.home ul li { font-size:100%; }
	div.links .heading h3 { font-size:1.05em; line-height:1.05; }
	div.links .heading p { font-size:0.8em; line-height:1.05; }
	
	div.footer .donate_logo {
		height:13px;
	}
}



/* RESOURCES PAGES */
div.links { max-width:700px; }
div.links .heading { margin:12px 0px 5px 0px; padding:3px; border-top:solid 1px #229911; background:linear-gradient(to bottom, #eeffee, #ccddcc); }
div.links .heading h3 { font-size:1.15em; line-height:1.2; margin:0px; text-shadow:1px 1px 1px white; }
div.links .heading p { font-size:0.9em; margin:2px 0px 0px 0px; }
div.links ul ul { font-size:90%; }
div.links.websites ul li { margin:0px 0px 5px 0px; }
div.links.websites ul li ul { margin-top:3px; }
div.links.books .heading { margin-bottom:8px; }
div.links.books td { padding-top:0px; padding-bottom:13px; }
div.links.books td.thumbnail { text-align:center; }
div.links.books .info { padding-left:8px; text-align:left; }
div.links.books h4.title { margin-top:5px; margin-bottom:1px; font-weight:bold; font-size:14px; }
div.links.books p.author { margin-bottom:5px; font-size:13px; }
div.links.books p.description { font-size:13px; margin:0px 0px 4px 0px; }
div.links.books .subtable td { padding:2px 0px 2px 0px; font-size:12.5px; }
div.links.books .subtable .title { font-weight:normal; font-size:13px; }


/* DETAILS PAGES */
p.fees { font-size:90%; margin:2px 0px 0px 2em; text-indent:-2em; }
p.activity { font-size:90%; margin:2px 0px 0px 0px; }
p.elevation { font-size:90%; margin:2px 0px 0px 0px; }
p.bloom_status { font-weight:bold; font-size:90%; margin:4px 0px 0px 0px; padding:2px 0px 2px 0px; }
p.bloom_status span { padding:1px 3px; border-radius:4px; white-space:nowrap; }
p.bloom_status .blooming_no { color:white; background:darkred; }
p.bloom_status .blooming_soon { color:white; background:#cc6600; }
p.bloom_status .blooming_maybe { color:white; background:#ddbb00; }
p.bloom_status .blooming_early { color:white; background:#bbdd00; }
p.bloom_status .blooming_late { color:white; background:#dd9900; }
p.bloom_status .blooming_probably { color:white; background:#88bb22; }
p.bloom_status .blooming_yes { color:white; background:#00aa00; }
p.bloom_status .blooming_unknown { color:white; background:gray; }
p.bloom_status .blooming_closed { color:white; background:black; }
p.bloom_status .shift_note { font-weight:normal; font-size:90%; }
div.place_photo { width:40%; float:right; margin:0px 0px 0.5em 1em; display:block; position:relative; }
div.place_photo_mobile { max-width:100%; width:400px; display:block; position:relative; margin:0px auto 8px auto; }
div.place_photo img { width:100%; cursor:zoom-in; display:block; }
div.place_photo_mobile img { width:100%; }
div.place_photo_caption { width:100%; height:auto; text-align:right; font-size:70%; position: absolute; transform:translate(0%,-100%); padding:0px 3px 1px 0px; background-color:rgba(255,255,255,0.6); }
div.place_photo_mobile .place_photo_caption { padding-bottom:3px; }
@media screen and (max-width:600px) {
	div.place_photo { width:40%; }
	div.place_photo_caption { font-size:60%; }
}
@media screen and (max-width:500px) {
	div.place_photo { width:35%; }
	div.place_photo_mobile { width:100%; }
}
div.notes_text { margin-top:1em; }
div.notes_text div { margin-top:0.5em; }
span.notes_header { font-weight:bold; color:#000099; text-transform:uppercase; }
div.peak_bloom_text { clear:both; width:calc(100% + 4px); margin-top:1em; margin-bottom:0.75em; padding:6px 6px 8px 6px; background:#eaf0ff; border:1px solid #4444cc; border-radius:6px; margin-left:-2px; }

.link_block { display:inline-block; vertical-align:top; margin-right:1.2em; margin-bottom:0.5em; max-width:50%; }
.link_block:last-child { margin-right:0px;  }
@media screen and (max-width:560px) {
	.link_block { width:100%; max-width:100%; }
}
table.link_table { margin-top:0.5em; }
td.link_table_heading { padding:6px 0px 2px 0px; font-weight:bold; }
table.link_table td.link_icon { padding-top:2px; }
table.link_table td.link_text { padding:5px 0px 0px 6px; }
p.link_table_heading { margin:0px 0px 4px 0px; font-weight:bold; clear:left; }
p.link_table { margin-bottom:8px; clear:left; }
span.link_icon { float:left; line-height:1; padding-right:6px; }
span.link_text { position:relative; top:2px;}

p.fs_list { margin-top:1.3em; line-height:1.1; }
span.fs_list { font-size:90%; }
p.fs_heading { margin:6px 0px 4px 0px; font-weight:bold; clear:left; }
div.fs_thumbnails { display:flex;  flex-wrap:nowrap; justify-content:flex-start; align-items:flex-start; }
div.fs_thumbnails > div { width:15%; margin:0px; margin-right:12px; }
div.fs_thumbnails > div:last-child { margin-right:0px; }
@media screen and (max-width:500px) {
	div.fs_thumbnails > div { margin-right:3px; }
}		
p.driving_directions { margin-top:10px; font-size:90%; min-width:240px; }

#bloom_time_disclaimer { margin-top:2em; text-align:left; clear:both; }
#bloom_time_disclaimer p { font-size:80%; margin-bottom:4px; }




/* Fun with sliding elements */
.slider_closed {
	max-height:0px;
	overflow-y:hidden;
	transition-property:all;
	transition-duration:0.5s;
}
.slider_open {
	max-height:300px; /* approximate max height */
	overflow-y:auto;
	transition-property:all;
	transition-duration:0.5s;
}
/* Fun with fadding elements */
.fader_closed {
	opacity:0.0;
	transition-property:all;
	transition-duration:0.75s;
}
.fader_open {
	opacity:1.0;
	transition-property:all;
	transition-duration:0.75s;
}