@import url(//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);
@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700);
@import url(//fonts.googleapis.com/css?family=Lato);
@import url(//fonts.googleapis.com/css?family=Buenard);
@import url(//fonts.googleapis.com/css?family=Montserrat:400,700,900);

html, body {
	width: 100%;
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	background-color: white;
    font-family: Montserrat, Georgia, serif;
}

header {
    text-align: right;
    background-color: #ffffff;
    vertical-align: bottom;
    font-size: 110%;
    font-family: Lato, sans-serif;
	padding-left: 20px;
	padding-top: 2px;
	padding-bottom: 10px;
	padding-right: 20px;
}

header a { 
    color: #333;
}

header a:hover {  
    color: #666;
}

header > span.title {
	float: left;
	clear: left;
    font-size: 200%;
    color: #2171b5;
}

header > span.title > a {
    color: #2171b5;
}

header > span.title > a:hover {
    color: #2171b5;
}

header > span.title::after {
    content: "";
    clear: both;
    display: table;
}

nav {
	font-size: 200%;
	text-align: right;
	clear: right;
}

nav > ul {
	list-style-type: none;
    margin: 0;
    padding: 0;
}

nav > ul > li {
    display: inline;
    margin-right: 20px;
}

#content {
    position: relative;
    z-index: 2;
    overflow: auto;
    width: auto;
    background-color: white;
    vertical-align: top;
    padding-top: 5px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    float: left;
	clear: left;
}

h1 {
	font-family: Lato, sans-serif;
	text-transform: uppercase;
	text-align: center;
	background-color: #cfdde8;
	padding: 5px 15px 5px 15px;
}

footer {
    text-align: center;
    width: 100%;
    background-color: #eeeeee;
    color: #555555;
    font-size: small;
    font-family: Lato, sans-serif;
	padding-left: 20px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 20px;
	float: left;
	clear: left;
}

.copyright {
	color: #666;
}

a {
    color: #2171b5;
    text-decoration: none;
}

a:hover {
    color: #4292c6;
}

h2 {
    color: #333;
}

h3 {
    color: #666;
}

h4 { 
    color: #999;
}

p { 
    text-indent: 2em;
}

div.rounded {
    padding: 5px;
    margin: 5px;
    border: 5px;
    border-radius: 5px;
}

.float-center {
    float: right;

    position: relative;
    left: -50%;
    text-align: left;
}

.float-center > .float-center-child {
    position: relative;                              
    left: 50%;
}

.hidden {
    display: none;
}


/* ABOUT PAGE */

.headshot {
    float: left;
    padding: 5px 15px 5px 15px;
	border: 5px;
	border-style: solid;
	border-color: #fff;
    border-radius: 30px;
}

.about_summary {
	font-weight: bold;
	font-size: 120%;
	color: #2171b5;
}


/* PROJECT PAGE */

.project {
	clear: both;
}

.project_image {
    float: left;
    padding: 5px 15px 5px 15px;
    width: 160px;
    text-align: center;
}

.project_image img {
	text-align: center;
	border: 5px;
	border-style: solid;
	border-color: #cfdde8;
    border-radius: 5px;
}

.project_image figcaption {
	color: #666;
	text-align: center;
}

.project_image::after {
    content: "";
    clear: both;
    display: table;
}

.project_summary {
	clear: right;
	width: 75%;
    padding: 15px;
}

.project_title {
	text-align: center;
	font-size: 120%;
	font-weight: bold;
	color: #444;
	clear: both;
	font-variant: small-caps;
}

/* PORTFOLIO PAGE */

.portfolio {
	clear: both;
	margin-bottom: 20px;
	border: 5px;
	border-style: solid;
	border-color: #cccccc;
    border-radius: 5px;
}

.portfolio_image {
    padding: 5px 15px 5px 15px;
    text-align: center;
    float: right;
}

.portfolio_title > .portfolio_image {
	float: none;
	text-align: center;
	width: 90%;
}

.portfolio_image img {
	text-align: center;
	max-width: 100%;
}

.portfolio_image figcaption {
	color: #666;
	text-align: center;
}

.portfolio::after {
    content: "";
    clear: both;
    display: table;
}

.portfolio_column {
	float: left;
	width: 50%;
}

.portfolio_summary {
	width: 75%;
    padding: 15px;
}

.portfolio_title {
	text-align: center;
	font-size: 120%;
	/*font-weight: bold;*/
	color: #444;
	clear: both;
	font-variant: small-caps;
}

.portfolio ul {
	color: #444;
	font-size: 110%;
	font-weight: bold;
	/*margin-left: 30px;*/
	margin-left: 1em;
	padding-left: 0px;
}

.portfolio_ul_label {
	border: 2px;
	border-style: solid;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    font-variant: small-caps;
    font-size: 120%;
}

ul.patent_list {
	list-style-position: inside;
	margin-bottom: 25px;
}

ul.domain_list {
	color: #cc4c00;
	/*list-style: none;*/
}

.domain_list .portfolio_ul_label {
	background-color: #cc4c00;
	border-color: #cc4c00;
	margin-right: 5px;
}

ul.solution_list {
	color: #1a7c17;
	list-style: none;
}

.solution_list .portfolio_ul_label {
	background-color: #1a7c17;
	border-color: #1a7c17;
	margin-right: 5px;
}

ul.skill_list {
	color: #651b70;
	list-style: none;
}

.skill_list .portfolio_ul_label {
	background-color: #651b70;
	border-color: #651b70;
	margin-right: 5px;
}

.portfolio li {
	font-weight: normal;
	font-variant: normal;
	text-decoration: none;
	font-size: 110%;
}

.portfolio ul:not(.patent_list) > li {
	display: inline;
	margin-left: 5px;
}

ul.patent_list > li {
	color: #222;
}
/*
.portfolio blockquote {
	color: #555;
	border-left: 2px solid #555;
	padding-left: 6px;
}
*/
.portfolio .highlight {
	font-weight: bold;
	font-size: 120%;
}

/* Brand colors acquired via https://coolestguidesontheplanet.com/creating-social-media-menu-icons-fontawesome/ */
.fa-facebook {
	color:#3b5998
} 

.fa-linkedin {
	color:#007bb6
}

.fa-twitter {
	color:#00aced
}

.fa-google-plus {
	color:#dd4b39
}