/* ===================== Main HTML Sections ===================================== */
#base {
	background: #888888;
	margin: 0;
	padding: 0;
}
#shell {
	min-width: 500px;
	max-width: 1050px;
	margin: 0 auto;
	padding: 0;
	background-color: #FFFFFF;
	background-size: 100%;
	background-repeat: repeat-y;
	background-position: left top;
	background-image: url("bg-left-blue-gradient.png");
}


/*	====================================================================
		Head Elements
	==================================================================== */

.head {
	margin: 0;
	padding: 0;
}
.nav {
	display: flex;
	min-height: 35px;
	margin: 0;
	padding: 0;
	font-family: "Avant Garde", Helvetica, sans-serif;
	font-size: 1.25em;
	background-color: black;
}

.logo-text {
	display: flex;
	align-items: center;
}

.logo-text a {
	white-space: nowrap;
	font-weight: bold;
	padding: 2px 0.5em;
	text-transform: initial;
	text-decoration: initial;
	font-size: 1.25em;
	font-weight: bold;
	color: white;
}

.menu {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: right;
	justify-content: flex-end;
}

.menu span {
	margin: 0;
	padding: 0.25em 0.5em;
	font-family: "Avant Garde", Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: underline;
	color: white;
}

.menu a:visited, .menu a {
	color: white;
}
.menu a:hover {
	color: #9999FF;
}
.menu .active {
	font-weight: bold;
	text-decoration-color: #FFFFFF;
}

.banner {
	margin: 0;
	padding: 0;
	position: relative;
	background-color: white;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: left top;
	background-attachment: fixed;
	background-origin: padding-box;
}
/*
#banner-bg-why {
	background-image: url("banner-why-bg.jpg");
}
#banner-bg-who {
	background-image: url("banner-who-bg.jpg");
}
#banner-bg-work {
	background-image: url("banner-work-bg.jpg");
}
*/
.banner-wave {
	width: 100%;
}

/*	====================================================================
		Page Content Elements
	==================================================================== */

.content {
	margin: 0;
	padding: 0em 3em;
	max-height: 5000em;
}

h1.why {
	margin: 0;
	padding: 1em 0;
	font-family: "Avant Garde", Helvetica, sans-serif;
	font-size: 1.25em;
}
h2.why {
	margin: 0 0 0 1em;
	padding-top: 1em;
	font-family: "Avant Garde", Helvetica, sans-serif;
	font-size: 1em;
	color: #133C6E;
	text-transform: uppercase;
	text-decoration: underline;
	display: list-item;
	list-style-type: disc;
	list-style-position: outside;
}
h1.work {
	margin: 0;
	padding: 1em 0;
	font-family: "Garamonde", Times, serif;
	font-size: 1.25em;
	color: #133c6e;
	text-transform: uppercase;
}
h3.codes {
	margin: 0;
	padding: 1em 0 0 0;
	font-family: "Garamonde", Times, serif;
	font-size: 1em;
	color: #133c6e;	
}

p.why, p.who, p.work {
	margin: 0;
	padding: 0;
	font-family: "Garamonde", Times, serif;
	font-size: 1em;
	text-align: justify;
}
p.who, #first-p {
	padding-top: 1em;
}
#last-p {
	padding-bottom: 1em;
}

ul.no-dots {
	margin: 0;
	padding: 0;
}
ul.no-dots li {
	margin: 0;
	padding: 0;
	list-style: none;
}
div.proj-reset {
	position: absolute;
}
div.project {
	max-width: 1050px;
	margin: .5em -3em;
	padding: .5em 0 .5em 8em;
	font-family: "Garamonde", Times, serif;
	background-color: #e5eaef;
	background-size: 100%;
	background-repeat: repeat-y;
	background-position: left top;
	background-image: url("bg-right-blue-gradient.png");
}
h2.project {
	margin: 0;
	padding: 0;	
	text-decoration: underline;
	font-size: 1.25em;
	color: #133c6e;
}
p.project {
	margin: 0;
	padding: 0;
}
ul.project {
	margin: 0 0 0 1em;
	padding: 0;
}
.codesNquotes {

}
.quote {
	margin: 0;
	padding: 5px;
	overflow: hidden;
	display: block;
	font-family: "Garamonde", Times, serif;
	font-size: 1em;
	color: #133C6E;
	font-style: italic;
	text-align: justify;
	background-color: rgba(200,200,200,0.3);
}
.quote-source {
	text-align: right;
	font-style: normal;
	overflow: hidden;
	font-size: .85em;
}

#quote-work {
	width: initial;
	float: none;
	margin: 0 3em;
}

/*	====================================================================
		Footer Elements
	==================================================================== */

.foot {
	overflow: hidden;
	min-height: 255px;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: right bottom;
}
#foot-who {
	background-image: url("footer-DoyleDesk.png");
}
#foot-why {
	background-image: url("footer-KoreanWarMemorial.png");
}
#foot-work {
	background-image: url("footer-PtOtRenov.png");
}
#quote-foot {
	margin: 1em 5em 5em 5em;
	width: 40%;
	float: left;
}

/*	====================================================================
		Revisions for smaller screens phones
	==================================================================== */

@media only screen and (min-width: 700px) {
	#quote-work {
		width: 50%;
		float: right;
		margin: 0 0 0 3em;
	}
}

@media only screen and (orientation : portrait) {
	#quote-foot {
		width: 50%;
	}
}


/*	====================================================================
		Revisions for Printing
	==================================================================== */

@media only print {
	#base {
		background-color: initial;
	}
	#shell {
		background: initial;
	}
	.menu a {
		display: none;
	}
	.menu .active {
		display: initial;
	}
	div.project {
		background: initial;
		border: 1px solid black;
	}
	.content {
		padding: 0;
	}
	h1, h2, h3, p {
		color: black;
	}
}