/* Mobile First iPhone 5S 321px */

/* Across all Header, Main, Footer */
*, html, body {
font-family: Raleway, Montserrat, "Sans-serif";
}
.site {
text-align:left;
}


.logo {
	display:inline-block;
	text-align:center;
	margin:0 auto;
	}

#masthead-reasources {
    display: flex;
    justify-content: center;
    align-items: center;
}

h1 {
	/*color:#eaf0f0;*/
	color:#013E39;
	/* background-color:white; */
	font-size:4em;
	font-weight:100;
	line-height:1.2em;
	padding:5%;
	margin-top:0;
	text-align:center;
	}
	
	/*..............RESOURCES PAGE .............*/
#masthead-resources {
background:#000 url(../images/fl_rosefence2.jpg) 80% 100% no-repeat;
	}
h3 + h4 {
        margin-top:0;
        font-weight:600;
        font-size:1.2em;
        }

h2,h3,h4 {
	margin-top:1em;
	}

h3 {
	font-weight:bold;
	}


	#blogPage > form > h3 {
	/*	margin-left:2.7em;*/
	}

img {
max-width:100%;
height:auto;
}

figure img {
width:100%;
height:auto;
display:block;
}

h1 img {
margin-right:.5em;
width:40px;
}

h2:first-of-type {
	margin-left:auto;
	margin-right:auto;
  font-size:200%;
	}

nav.global-nav ul, nav.footer-nav ul {
	list-style-type: none;
	padding:.5em 1em;
	display:flex;
	gap: 0 1.4rem;
	flex-direction:row;
	align-content:center;
	/* justify-content:center;  comment out to enable login or other utilities to be right justified in same nav bar. works coupled with class on utility items and margin auto.  */
	align-items:center;
	}


	/* margin auto enables utility items to fly to the right or opposite primary nav links. note need class in html. */
	.log {
	margin-left:auto;
	}

ul li {
	list-style-type:none;
	}

ul.cv > li {
	list-style-type:square;
	}

ul.cv > li > a {
font-size: 1em;
}

ul.cv > li > strong, ul.cv > li > em {
font-size: 1em;
}

    .blogarchive-nav{
    display:flex;
    flex-direction:column;
    }

.main-content {
    margin:0 30px 30px .5em;
	}

.site {
	width:100%;
	}


section.main-content h5 {
    display:block;
	width:100%;
	}


/* header */

.siteDescrip {
	font-style:italic;
	font-size:.8em;
	}

#site-intro {

	padding:1px 15px;
	}

.logo {
position:absolute;
top:60px;
left:60px;
z-index:2;
/*	font-size:1.2em;
 	margin-left:-10px; */
	}

#site-intro > h1 > i:nth-child(2) {
	margin-left:-5px;
	}


/* ===========   main   =============== */

p {
	/*font-size:1em; */
	line-height:1.8em;
	}

a#tagcloud {
	font-size:1em;
	line-height:1.2em;
	}

article::after {
content:"";

}


aside { /*mobile*/

	width:100%;
	font-size:150%;
	}

aside blockquote {
	color: #0198E1;
	}

ul.resources li:last-child {
		margin-bottom:2em;
		}

	#blogPage > form > p:nth-child(n) > input [type=text] {
	 margin-right: 2em;
	}


	main p {
	margin: 1em;
	padding: 0 2em;
	}

siteDescrip {
	margin-left:1em;
	font-style:italic;
	font-size:.8em;
	}



a, a:hover {
text-decoration:none;
font-size:1em;
}

/* ------------ footer ----------*/

.mid-align {
	margin-top:-10%;
	}

address {
font-size: 50%;
background-color:#013E39;
}

address p {
color: white;
background-color:#013E39;
font-size:1.8em;
}

@media only screen and (min-width: 400px) {

/* Across all Header, Main, Footer ====================400==========*/


ul {
	list-style-position:inside;
	justify-content: middle;
	}

	li , li a{
		font-family: Raleway, Open-sans;
		font-size:1em;
		line-height:1em;
	}

.main-content {

/*	padding:1em;*/
	margin: 0 0 0 1.8em;
	}


h1 {
	font-size:4em;
	margin:0;
	line-height:1.2em;
	}

h2:first-of-type {
	margin-left:auto;
	margin-right:auto;
  font-size:200%;
	}

.siteDescrip {
	text-align:center;
	}

h3, h4 {
margin-top:2rem;
}




aside {   /*400*/
	justify-content:center;
	margin-left: 0; /* kate April saturday */

	}

aside p {

	color: #0198E1;
	padding:0 1em 1em 1em !important;
	width:90%;
	font-size:1em;
	}


main p {

	margin-left:3px;
	margin-right:.5em;
	}


}

@media only screen and (min-width: 500px) {

.site {
margin:auto;
}


/* header */

.siteDescrip {
	font-style:italic;
	font-size:1em;
	margin-left:40%;
	}

h1 {
    font-weight:100;
	font-size:400%;
	text-align:center;
	color:#013E39;
	letter-spacing:.2em;
	}


h2 {
    font-weight:800;
	margin-top:1em;

	}

h3 {
	font-size:120%;
	}

h3, h4 {
	font-weight:600;

	}

h4 {
	font-size:100%;
	margin-top:20%;
	}
	h2,h3,h4 {
	/*margin-top:.6em;*/
	margin-top:2%;

	}


/*        Main       */

.main-content {
columns:1;
/* margin:1% 5%; */
}


.main-content p {
columns:1;
margin-right:1em;
}


main+ 	article p  {
		width:90%;
		margin-bottom:5%;
		line-height:2em;
		}

	aside { /*500*/

		font-size:200%;
		width:90%;
		margin-top:0;
		margin-right:0;

		padding-left:2%;
		display:flex;
		flex-wrap:nowrap;
		flex-direction:column;
		justify-content:right;
		align-items:flex-start;
        position:relative;
        float:right;
        clear:left;
		}

	ul.resources li {
		margin:0;
		}


	#cloud, #archive {
	border-left: 1px solid black;

		}

figure img {
    width: 100%;
    gap : 25px;
    height: auto;
    flex-grow: 1;
    max-height: 100%;
    min-width: 100%;
    object-fit: cover;
  /*   vertical-align: middle; */
    justify-congent:center;
  }

figcaption {
margin-bottom:2em;
}

}
@media only screen and (min-width: 1200px) {   /* ===============    wide   ============= */

/* Across all Header, Main, Footer */

h1 {
font-size:500%;
font-weight:100;
line-height:400%;
}

h2 {
	font-size:250%;
/*
	margin-left:auto;
	margin-right:auto;
 */
	}

#site-intro {
		/* was margin-right:16%.
		   #site-intro sits inside <header>, so a 16% strip of the header
		   was left bare down its right-hand side — that is the block
		   hanging below the nav bars, and its height is the height of
		   this section, which is why it read as a fixed rectangle.
		   fl_gallery2.php has no #site-intro, and was the only gallery
		   page without the block. 15 Aug 2026. */
		margin-right:0;
		}

aside { /*999*/
		font-size:250%;
		width:30%;
		}
main{
	margin-right:16%;
		}

article p {
	font-size:1em;
	margin-bottom:1em;
	}
ul li {

	list-style-type:none;
	margin-bottom:1em;
	}

}