@charset "UTF-8";
/* CSS Document */

body{ 	
	font-family: 'Lato', Arial, sans-serif;
	line-height: 1.4em;
	font-size: 100%;
	color: #FFFFF0; 
	background-color: #000000;
    max-width: 1000px; 
	min-width: 300px;
    margin: auto;
    padding:30px;
	}

body.about { 	
	color: #FFFFF0; 
	background-color: #000000;
	}

body.blog { 	
	color: #000000; 
	background-color: #FDF5E6;
	}
		
header {
	background-color: #000000;
	}
	  
footer {
	background-color: #000000;
 	}
 
footer.blog {
 	color: #fffff0;
 	}
 
h1 {
    display: block;
	line-height: 1.1em;
    margin-top: 0em;
    margin-bottom: .3em;
    font-weight: bold;
	}

h2 {
    display: block;
    font-size: 1.5em;
	line-height: 1.1em;
    margin-top: .4em;
    margin-bottom: .1em;
    font-weight: bold;
	}

h3 {
	 display: block;
	 font-size: 1.1em;
	line-height: 1.1em;
	 margin-top: .4em;
	 margin-bottom: .1em;
	 font-weight: bold;
		}
p {
    margin-top: .8em;
    margin-bottom: .8em;
	font-size: 1.1em;
	line-height:1.4em;
	}
	
ul {
	font-size:1.1em;
	}

sup{
	font-size: .7em;
	}

strong {
		font-weight:bold;
		font-size:1.3em;
	}

em{
		font-style: italic;
	}

/* Link Styling */

a{ 
    color: #000000;
	text-decoration: none;
}

a:hover{ 
    color: #000000;
	text-decoration: underline;
	font-weight:bold;
}

.navigation a{ 
    color: #999999;
	text-decoration: none;
}

.navigation a:hover{ 
    color: #ffffff;
	text-decoration: underline;
	font-weight:bold;
}

.in-page-link a { 
    color:#000000;
	text-decoration: underline solid 5%;
}

.in-page-link a:hover{ 
    color: #999999;
	text-decoration: underline;
}


/* Selects all a elements within .content, within body of class "blog" */

/* RDS can't get this to work 
body.blog .content a {
	color: #4d4d4d;
}
navigation a {
	color: #4d4d4d;
}

body.blog hr.horzbar {
    border: 4px solid #FDF5E6;
    border-radius: 6px;
    width: 30%;
    float: left;
}



/*Header and footer elements*/

.site-title {
	font-size: 1.4em;
	color: #fffff0;
	padding-top:.2em;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 6px;
}

.wordmark {
	display: block;
	font-size: 1em;
	color: #cccccc;
	padding-bottom: .5em;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 6px;
}
 
.navigation{
	font-size:1em;
	color: #D9D9D9;
	margin-top: 0;
	margin-bottom:0;
	margin-left:6px;
	padding-top:.5em;
	padding-bottom: .5em;
	
}


.footer-text {
	font-size: 1em;
	line-height: 1.5em;
	color: #fffff0;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 6px;
}


/*Content area elements*/

/*left collumn elements */
.blog-date {
	color: #666666;
	font-size:.9em;
	margin-left:0;
	margin-right:0em;
	margin-bottom:1.5em;
}
hr.horzbar {
  border: 4px solid #FFFFF0;
  border-radius: 6px;
  width: 30%;
  float: left;
}

hr.horzbar-blog {
  border: 4px solid #000000;
  border-radius: 6px;
  width: 30%;
  float: left;
}
/* RDS this is not justifying the text across the space */
.in-page-link {
	text-align: center;
	padding-right:10%;
	font-size: 1.1em;
	margin-bottom: .8em;
}



/*right column elements */

.areas_title {
	margin-left:0;
}

.areas {
	font-size:.9em;
	margin-left:0;
	margin-right:2em;
	margin-bottom:1.5em;
	text-align:justify;
}

.cutline {
	font-size:.9em;
	text-align:center;
}

.callout {
	font-size:1em;
	margin-left:0;
	margin-right:2em;
	margin-top:2em;
	margin-bottom:1.5em;
	text-align:justify;
	padding: .5em;
	padding-top:1em;
	padding-bottom:1.1em;
	background-color:#c9c9c9;
}

.callout-lead {
	font-size:1.4em;
}

.blog-diagram-title {
	font-size:1.4em;
	margin-top: .5em;
	margin-left:1.4em;
}

.blog-diagram-caption {
	font-size:1.1em;
	margin-top:0;
	margin-left:2em;
	margin-bottom:2em;
}

.mentalnote_links {
	text-align:left;
	padding: .5em;
	padding-right:0;
	background-color:#c9c9c9;
}

.flex-right-spacer {
	display:none;
}

/*Notes and sources */
.notes {
	font-size:.9em;
	line-height: .5em;
	width: 80%;
}

.sources {
	font-size:.9em;
	line-height: .5em;
	width: 80%;
}

/*Flex basics*/
.wrap-flex{ 
    display: flex;
    flex-wrap: wrap;
}
.wrap-flex-header{ 
    display: flex;
    flex-wrap: wrap;
	align-items: flex-end;
	margin-bottom: 4vh;
}
/*RDS why are these commented out, arent' they needed?
need refresher on media query*/
/*
.flex-left-header {
    display: flex;
    flex: 60%;
    justify-content: left;
    flex-wrap: wrap;
	align-items:flex-end;
}

.flex-right-header {
    display: flex;
    flex: 40%;
    justify-content: right;
    flex-wrap: wrap;
	align-items:flex-end;
}
*/
/*Responsive behaviour*/
@media only screen and (min-width: 768px) { 
    body{
    	  padding:40px;
    }
	header{
        margin-bottom: 0;
    }
    .flex-left {  
        flex: 60%;
        justify-content: left;
    } 
    .flex-right { 
      flex: 40%;
      justify-content: right;
    }
	h1.name {
	    font-size: 3em;
		margin-bottom: .3em;
	}
	.tagline {
	font-size:2em;  	
	line-height:.5em;
	}
	
	img.portrait {
	margin-bottom:32px;
	}
	
	img.diagram{
		margin-top: 3;
	}
	
	img.blog-diagram{
		margin-top:5em;
	}
	
	.flex-right-spacer {
		display:block;
		height:88px;
	}
	
	.areas_title {
		margin-top:4em;
		margin-left:32px;
	}
	
	.areas {
		margin-left:32px;
	}
	
	.cutline{
		margin-top: 4.5em;
	}
	
	.callout {
		margin-left:32px;
	}
	.contact{
		width:60%;
	}
	.CTA{ 
		width:60%;
	}
  }
 



.Contact {
  	 justify-content: left;
  }
  
  .CTA {
	  background-color:#FDF5E6;
	  color:black;
	  padding-left:1em;
	  padding-right:1em;
	  padding-top:.1px;
	  padding-bottom:1px;
	  
  }

  img.portrait {
  	display:block;
  	margin-top:.75em;
  	margin-left:auto;
  	margin-right:auto;
	margin-bottom:2em;
  	max-width:70%;
  	height:auto;
  	border-radius:2%;
  	border:20px; 
  	border-style:solid;
  	border-color:#FDF5E6;
  }

  img.diagram {
  	display:block;
  	margin-top:0em;
	margin-bottom:2em;
  	margin-left:auto;
  	margin-right:auto;
  	max-width:80%;
  	height:auto;
  	border-radius:2%;
  	border:5px; 
  	border-style:solid;
  	border-color:#FDF5E6;
  }
  
  img.blog-diagram {
  	display:block;
  	margin-top:0em;
	margin-bottom:.5em;
  	margin-left:auto;
  	margin-right:auto;
  	max-width:80%;
  	height:auto;
  	border-radius:2%;
  	border:5px; 
  	border-style:solid;
  	border-color:#747b7c;
  }

img.social{
    max-width: 100%; 
  	height: auto;
      transition: opacity 0.25s; 
      width: 20px;
      margin: 16px;
  }

/*
.lato {
	font-family: 'Lato', sans-serif;
}

.grey {
	padding-bottom: 10px;
	color: #666666;
}

.banner {
	width: 50%;
}

  
#content {
	max-width: 800px;
	min-width: 320px;
	margin: 0 auto;
	background-color: #0FF; view the content area by uncommenting
	padding: 40px;
} 

/* .flex-socials{
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-content: flex-end;
      width: 30px;
      margin: 10px;
  }
  

.nobullet {
	list-style-type: none;
	padding-left: 0;
}

#img {
 width:220px; 
 height:330px; 

 float: right;
}
  
a{ 
    color: #A9A9A9;
	text-decoration: underline;
}

a:hover{ 
    color: white;
	text-decoration: underline;
}
  */