*,::after,::before{box-sizing:content-box}

/* uber styles */

html {font-size: 125%;}

body {margin:0px; padding:0px; font: 50% arial, helvetica, sans-serif; text-align:center; background-color:#f5f5f5; behavior:url(style/csshover.htc);}

* {margin:0; padding:0;}

.floatleft {float:left;}
.floatright {float:right;}

img {border: 1px solid #efefef; max-width: 100%;}
.bannerLogo img {border: 0;}


h1 {font: 1.9em/1.2em Arial, Helvetica, sans-serif; color: #333; padding: 10px 0 12px 0;}
#projectsIndex h1 {font: 1.5em/1.1em Arial, Helvetica, sans-serif; color: #333; padding: 0 0 10px 0;}
#resume h1 {padding: 10px 0 4px 0;}

h2 {font: 1.4em/1.2em Arial, Helvetica, sans-serif; color: #333; font-weight: bold; margin: 16px 0 0 0; padding: 4px 0 8px 0; border-top: 4px solid #e3e3e3;}

p {font: 1.2em/1.3em arial, helvetica, sans-serif; color: #707070; text-align: left; padding: 2px 0 6px 0;}
p.projectDate {color: #333; padding: 0 0 12px 0;}
p.projectMaterials {font-size: 1.1em; line-height: 1.1em; color: #333; padding: 0 0 16px 0;}
#resume p {padding-bottom: 2px; padding-left: 16px; text-indent: -16px;}
p.resumeDate {font-size: 1.1em; color: #333; padding: 10px 0 0 0;}

ul {margin: 0px; padding: 0px;}

.small {font-size: 1.1em; line-height: 1.2em; color: #999999;}

.highlight {background-color: #ededed; padding: 3px 6px;}


#mainwrap {width:1000px; max-width: 100%; margin-left:auto; margin-right:auto; margin-top: 0; margin-bottom:60px; padding: 0; background-color: #FFF; border: 0;}

#banner {
	background-color: #FFF;
	width: 1000px;
	max-width: 100%;
	height: 40px;
	border-bottom: 1px solid #efefef;
	margin: 0;
	padding: 10px 0 0 0;
}

.bannerLogo {float: left; height: 30; margin: 6px 0 0 24px;}

#main {width: 1000px; max-width: 100%; margin: 30px 0 0 0;}


/* home page */
#hp {width: 768px; max-width: 100%; margin-left:auto; margin-right:auto; }
.hpMain {margin: 0 23px;}
.hpThumbnails {width: 769px; max-width: 100%; margin: 10px 0 0 0;}/*NOTE: updated from 768 to 769 for Chrome break*/
.hpThumb {float: left; margin: 0 22px;}

/* projects index page */
#projectsIndex {width: 976px; max-width: 100%; margin: 0 12px 0 12px;}
.projectsIndexItem {float: left; width: 464px; max-width: 100%; margin: 0 12px 26px 12px; text-align: left; background-color: #f5f5f5;}
.projectsThumb {float: left; width: 212px;}
.projectsBlurb {float: left; width: 228px; padding: 12px;}
.projectsBlurb .small {padding: 8px 0 0 0;}


/* individual project page */
#project, #resume {width: 952px; max-width: 100%; margin: 0 24px 0 24px;}
.projectImages {float: left; width: 654px; max-width: 100%; text-align: left;}
.projectImages img {margin: 0 6px 6px 0;}
.projectImages iframe {margin: 0 6px 6px 0;}
.projectText {float: left; width: 272px; text-align: left; margin: 0 0 0 16px; padding: 0 10px 0 0; border-top: 4px solid #e3e3e3;}

.projectimagesIpadDrawings { column-count: 4; column-gap: 1em; width: 654px; float: left;}
.projectImagesIpadDrawings img {background-color: #eee; display: inline-block; width: 100%; } 
.projectimagesIpadDrawings div { margin: 0 0 1em; font: 1.2em/1.3em arial, helvetica, sans-serif;
    color: #707070;}
.ipadCaption {margin: 1em 0 .5em 0; font: 1.2em/1.3em arial, helvetica, sans-serif;
    color: #707070; text-align: center;}


.contactImage {float: left; width: 282px; text-align: left; margin: 0 0 0 16px; border-top: 4px solid #e3e3e3;}

.resumeLeftCol, .resumeRightCol {float: left; width: 528px; text-align: left;  border-top: 4px solid #e3e3e3;}
.resumeRightCol {width: 400px; margin: 0 0 0 24px;}



#footer {width: 952px; max-width: 100%; margin: 20px 24px 0 24px; padding: 6px 0;}
#footer p {font-size: 1em;}



a:link {
	font-family: arial, helvetica, sans-serif;
	color: #00aeef;
	text-decoration: none;
	letter-spacing: .03em;
}

a:visited {
	color: #6dcff6;
	text-decoration: none;
}

a:hover {
	color: #00aeef;
	text-decoration: underline;
}

a:active {
	color: #00aeef;
	text-decoration: underline;
}


h1 a:link {color: #333;}
h1 a:visited {color: #333;}
h1 a:hover {color: #00aeef; text-decoration: none;}
h1 a:active {color: #00aeef; text-decoration: none;}


a:link.lightLink {font-size: .9em; color: #707070; padding: 0;}
a:visited.lightLink {font-size: .9em; color: #707070;}
a:hover.lightLink {font-size: .9em; color: #00aeef; text-decoration: none;}
a:active.lightLink {font-size: .9em; color: #00aeef; text-decoration: none;}



/* see below for horizontal menu */
#globalNav {float: right; margin: 16px 14px 0 0; padding: 0 10px 0 0;  width: 282px;}
#globalNav ul {font: 1.1em/1.6em Arial, Helvetica, sans-serif; text-align: left; list-style-type: none; }

/* start horizontal menu */

#listmenu {
	width: 100%; 	/* makes the div full width */
	height: 24px;
	float:left; /*makes the div enclose the list */
	text-align: center;
	/* font: 1.1em/1.6em Arial, Helvetica, sans-serif;	SET FONT-SIZE HERE */
	font-weight: bold;
	background-color: #fff;
	margin: 0;
	padding: 0;
	}
#listmenu ul {
	margin: 0;/* indents ul from edge of container. if add this back, you must add in IE hack. see pg 193.*/
	padding: 0;
	}
#listmenu li {
	float: right;	/* causes the list to align horizontally instead of stack */
	position: relative; /* positioning context for the absolutely positioned drop-down */
	list-style-type: none;	/* removes the bullet off each list item */
	margin: 0 0 0 40px; /* sets space between each nav name */
	padding: 0;
	}
#listmenu li:first-child {
	/* border-left: 1px solid #a84023; */
	}
#listmenu a {
	font-size: 1.2em;
	display: block;
	padding: 0 0 2px 0; 
	text-decoration:none;	
	color:#333;	
	}
#listmenu a:visited {
	color:#333;	
	}
#listmenu a:hover, .navON { 
	color:#000;
	border-bottom: 4px solid #000; 
	}
#listmenu a:active {
	color:#000;
	}
/* end horizontal menu */


/* here follows the brillant "no-extra-markup" clearing method devised by Tony Aslett - www.csscreator.com */
/* simply add the clearfix class to any containter that must enclose floated elements */
/* read the details of how and why this works at http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {
    content: ".";              /* the period is placed on the page as the last thing before the div closes */
	display: block;          /* inline elements don't respond to the clear property */ 
    height: 0;                  /* ensure the period is not visible */
    clear: both;               /* make the container clear the period */
    visibility: hidden;	     /* further ensures the period is not visible */
}

.clearfix {display: inline-block;}   /* a fix for IE Mac */

/* next a fix for the dreaded Guillotine bug in IE6 */
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* end of "no-extra-markup" clearing method */


.col-xs {
	display: none;
	width: 100%;
	clear: both;
}

.minisoundtrackitemclass{
	margin-bottom: 10px;
	border-bottom: 1px solid black;
}

@media (max-width: 1024px) {
	.col-xs .projectText,
	.col-xs {
		display: block;
		float: left;
		position: relative;
	}
	.col-xs .projectText {
		width: 100%;
		/*max-width: 500px;*/
		margin: 0 auto;
	}
	.projectText {
		display: none;
	}
	#project {
		margin: 0 auto;
	}
	.projectImages {
		padding-left: 15px;
		padding-right: 15px;
		float: none;
		margin: 0 auto;
		box-sizing: border-box;
	}
	.projectImages iframe {
		max-width: 100%;
	}
	.projectImages img {
		max-width: 100%;
		height: auto;
	}
	.projectImages img.col-sm-6 {
		width: 49%;
		float: left;
		margin: 0;
		margin-bottom: 8px;
		margin-right: 1%;
		box-sizing: border-box;
	}
	.projectImages img.col-sm-6 + img.col-sm-6 {
		margin-left: 1%;
		margin-right: 0;
	}
	.projectImages img.h-200 {
		height: 200px;
	}
	.hpMain img {
		display: block;
		height: auto;
	}
	.social,
	.email {
		text-align: center;
	}
	.contactImage {
		margin: 0 auto;
		float: none;
	}
	#resume {
		width: 100%;
		padding-right: 20px;
		padding-left: 20px;
		margin: 0 auto;
		box-sizing: border-box;
	}
	.resumeLeftCol, .resumeRightCol {
		width: 100%;
		margin: 10px 0;
	}
	.projectsIndexItem {
		width: 47%;
		margin: 0 1% 26px;
		box-sizing: border-box;
	}
	.projectsThumb {
		width: 45%;
		box-sizing: border-box;
		overflow: hidden;
	}
	.projectsThumb img {
		display: none;
	}
	.projectsThumb a {
		display: block;
		width: 100%;
		box-sizing: border-box;
		min-height: 140px;
		background-repeat: no-repeat;
		background-size: cover;
	}
	/*.projectsThumb img {
		height: auto;
		width: 100%;
	}*/
	.projectsBlurb {
		width: 55%;
		box-sizing: border-box;
	}
	#footer {
		margin: 20px 0 0;
		padding: 6px 15px;
		box-sizing: border-box;
	}
}

@media (max-width: 800px) {
	.hpThumb {
		float: none;
		margin: 0 auto 20px;
		padding: 0 15px;
	}
	.hpThumb img {
		display: block;
		height: auto;
		width: 350px;
		max-width: 100%;
		margin: 0 auto;
		box-sizing: border-box;
	}
	.hpThumb p {
		text-align: center;
	}
}


@media (max-width: 767px) {
	#projectsIndex {
		margin: 0 auto;
	}
	.projectsIndexItem {
		width: 74%;
		margin: 0 13% 26px;
	}
}

@media (max-width: 576px) {
	#banner {
		height: auto;
	}
	#banner:after {
		content: '';
		clear: both;
		display: block;
	}
	.bannerLogo {
		float: none;
		margin: 6px  auto;
		box-sizing: border-box;
	}
	#globalNav {
		float: none;
		margin: 10px auto 5px;
		clear: both;
	}
	#listmenu {
		margin-left: -20px;
	}
	#listmenu li {
		display: inline-block;
	}
	.projectImages img.col-sm-6 {
		width: 100%;
		margin: 0 0 5px;
	}
	.projectImages img.col-sm-6 + img.col-sm-6 {
		margin-left: 0;
	}
	#footer p {
		text-align: center;
	}
}

@media (max-width: 480px) {
	/*.projectsThumb img {
		min-height: 120px;
	}*/
	.projectsBlurb .small {
		padding: 0;
	}
	.projectImages iframe {
		height: auto;
		min-height: 300px;
	}
	.projectsIndexItem {
		width: 90%;
		margin: 0 5% 26px;
	}
}

@media (max-width: 400px) {

	.projectImages iframe {
		height: auto;
		min-height: 200px;
	}
}