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

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/******   Classes to style container that displays page width (helps in creating CSS for mobile)   ******/
.mywidth-on { 
	position: absolute; 
	z-index: 2000;
	background: #333333;
	background-color:rgb(51,51,51);
	background-color:rgba(51,51,51,0.6);
	left: 55px; 
	top: 45px; 
	border: 1px solid #FFFFFF; 
	padding: .5em 1em;
	color:#E5E5E5;
	white-space: nowrap;
	cursor: pointer;
}
.mywidth-off { display: none; width: 0; height: 0; }


/*** clearfix ***/
.cf:before,.cf:after {
    content: " ";
    display: table;
	clear:both; /* I aded this; it wasn't doing the whole job! */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}
/***** end clearfix *****/


a:link { color: #63631C; }
a:hover { color: #999955; }
a:visited { color: #73734D; }

/***********************************************************************************************************************/
/***************************************  Mobile First styles  *********************************************************/

html { 
	height: 100%;
	min-height: 100%;
	background: #4d6030;
	background: -moz-linear-gradient(top, #4d6030 0%, #73734d 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4d6030), color-stop(100%, #73734d));
	background: -webkit-linear-gradient(top, #4d6030 0%, #73734d 100%);
	background: -o-linear-gradient(top, #4d6030 0%, #73734d 100%);
	background: -ms-linear-gradient(top, #4d6030 0%, #73734d 100%);
	background: linear-gradient(to bottom, #4d6030 0%, #73734d 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d6030', endColorstr='#73734d', GradientType=0 ) 
}

body { font-size: 100%; margin: 0; padding: 30px .5em 0 .5em; border: 0; }

/*section p:first-child,section figure + p,section h2 + p { margin-top: 0; }*/

#rwd { line-height: .8em; padding-left: .5em;}
#rwd span { font-size: .6em; font-weight: normal; }

/* chromeframe used in HTML5 boilerplate */
.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


nav { position: relative; }
nav #namebox {
	display: block;
	position: absolute; 
	font-family: 'Signika', sans-serif;
	text-decoration: none;
	left: -7px; 
	top: -2.8em;
	width: 153px;
	height: 47px;
	z-index: 1500;
	background: url(/images/namebox_xsm.png) no-repeat;
	-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;transition: all 0.3s ease-out;
	box-shadow:none;
}

nav #namebox h1 {
	font-size: 1em;
	color: #9F7AB3;
	margin: .44em 0 0 1.5em;
	line-height: .9em;
}



nav #namebox h1 span {
	font-size: .65em;
	white-space: nowrap;
	color: #d99400;
	font-style:italic;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin: 0 0 0 3.2em;
}


.lt-ie9 nav #namebox h1 { 
	font-size: .8em;
	margin: .6em 0 0 2.4em;
	line-height: .98em;
}

.lt-ie9 nav #namebox h1 span { 
	font-size: 60%;
	margin: 0 0 0 4.7em;
}

nav #namebox h2 {
	font-size: .8em;
	margin: 0 0 0 3.2em;
}

.newsite {
    text-align: center;
    padding: 0.5em 0 0 0;
    font-size: 1.5em;
}

#content {
	font-family: 'Signika', sans-serif;
	position: relative;
	margin: 0 auto; /* initially for mobile content spacing, overridden later to center content for non-mobile */
	padding-top: 1em;
	padding-bottom: 1em;
	background-color: #CCCC9A;
    background-image: url(/images/ConcreteBare_bg.jpg);
	background-position: 50% 50%;
	background-attachment: fixed;
	-webkit-border-radius: 6px 6px 0 0;
	-moz-border-radius: 6px 6px 0 0;
	border-radius: 6px 6px 0 0;
	max-width: 48em; /* 768px */ 
}

header h1#rwd {
	font-family: 'Magra', sans-serif;
	padding: .2em 0 0 .2em;
	margin-top: 0;
	color: #9F7AB3;
}

header h1#rwd span {
	display: block;
	color: #333333; 
	font-size: .5em;
	line-height: 1.4em;
}

header em { 
	display: block; 
	padding: 0 0 1em .2em; 
}

header h1.pgtitle {
	font-family: 'Magra', sans-serif;
	padding: .4em 0 0 0;
	margin-top: 0;
	margin-bottom: .2em; 
	text-align: center;
	color: #9F7AB3;
	line-height: .9;
}

header h1.pgtitle span {
	font-size: 60%;
}

h2.padded {
	padding-left: .4em;
}

section { position: relative; }

.sectiontitle {
	font-family: 'Magra', sans-serif;
	color: #9F7AB3;
}

.contactlink {
    display: block;
    position: absolute;
    top: -15px;
    right: 4px;
	font-size: 0.7em;
}


.padded-content {
	padding: 0 6px;
	position: relative;
}

.lastchild {
	margin-bottom: 0;
}


/************************************************************************************************/
/*******************************     Mobile Menu Navigation      ********************************/
/************************************************************************************************/
nav {
	height: auto;
}

.pull {
	display: block;
	padding: .35em 0;
	font-size: 1.2em; 
	color: #63631C; 
	text-decoration: none; 
	text-indent: .8em; 
	border-top: 1px solid #d0a0eb;
	border-bottom: 1px solid #9F7AB3;
	background: #FFD200 url(/images/nav-icon.png) 96% 50% no-repeat;
}

.menu {
	display: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.menu > li {
	position: relative;
	background: #FFD200 url(/images/menusprite_bg.png) 0 -1em repeat-x;
	font-family: 'Magra', sans-serif;
	font-size: 1em;
	letter-spacing: .02em;
}


.menu > li > a {
	display: block;
	color: #63631C;
	text-decoration: none;
	padding: .8em 0;
	background: transparent url(/images/menusprite_icons.png) no-repeat; 
}

.menu li a {
	text-indent: 3.3em;
}

.menu > li > .desktopLink {
	display: none;
}


/* Menu images - just to the left of the menu item name */
.menu > li.homemenu 		> a { background-position: -6px -18px; }
.menu > li.resumemenu 		> a { background-position: -6px -86px; }
.menu > li.portfoliomenu 	> a { background-position: -6px -155px; }
.menu > li.aboutmenu 		> a { background-position: -6px -225px; }
.menu > li.fandfmenu 		> a { background-position: -6px -294px; }
/* Menu images - just to the left of the menu item name */



.submenu a {
	position: relative;
}

/* Sub-menu indicator arrow */
.submenu .resumemenu .aclosed { 
/*    background: url(/images/navarrowsprite.png) 0px 0px no-repeat;*/
	background: url(/images/navarrow.png) 0px 0px no-repeat;
    position: absolute;
    top: 12px;
    right: 10px;
    width: 1em;
    height: 1em;
}

.submenu .fandfmenu .aclosed { 
/*    background: url(/images/navarrowsprite.png) 0px 0px no-repeat;*/
	background: url(/images/navarrow.png) 0px 0px no-repeat;
    position: absolute;
    top: 12px;
    right: 10px;
    width: 1em;
    height: 1em;
}
/* Sub-menu indicator arrow */


/** Rotate arrows when submenu is open or closed  **/
.aclosed {
    -webkit-transition: all 300ms ease-in 0s;
    -moz-transition: all 300ms ease-in 0s;
    -o-transition: all 300ms ease-in 0s;
    transition: all 300ms ease-in 0s;
}

.aopen {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}
/** Rotate arrows when submenu is open or closed  **/






/* submenus */

.menu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}


.menu ul li { background-color: #eee6af; }

.menu ul li a {
	display: block;
	line-height: 2.4em;
	padding-left: 1.5em;
	text-decoration:none;
	color: #63631C;
	border-bottom: 1px dashed #BAB48A;
}


/************************************************************************************************/
/************************************************************************************************/
/************************************************************************************************/



.portfoliocontent {
	background: #050505 url(/images/diagonal_bg.gif) 0 0;
	padding: 1em .5em 0 .5em;
	border: 1px solid #000000;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.portfoliocontent ul { 
	list-style-type: none; 
	margin:0; 
	padding:0; 
	display: block;
	position: relative; 
}

.portfoliocontent ul li { 
	-webkit-border-radius: 12px; 
	-moz-border-radius: 12px; 
	border-radius: 12px; 
	border: 1px solid #000000; 
	margin-bottom: 1em;
	cursor:pointer;
	cursor:hand; 
	height: 6em;
}

.portfoliocontent ul li a { display: block; text-indent: -9999px; height: 8em; }

.portfoliocontent ul li				{ transition: transform .5s; }
.cwc 		{ background: #FFFFFF url(/portfolio/images/CWC_lg.jpg) -90px 0 no-repeat; }
.designit 	{ background: #FFFFFF url(/portfolio/images/DesignIt_lg.jpg) -100px 0 no-repeat; }
.tnb 		{ background: #FFFFFF url(/portfolio/images/TNB_lg.jpg) -70px 0 no-repeat; }
.gtmc 		{ background: #FFFFFF url(/portfolio/images/GTMC_lg.jpg) -42px 0 no-repeat; }
.vannatta 	{ background: #FFFFFF url(/portfolio/images/VanNatta_lg.jpg) -50px -20px no-repeat; }
.bband 		{ background: #FFFFFF url(/portfolio/images/BowieBand_lg.jpg) 0px 0px no-repeat; }

.portfoliocontent ul li:hover { 
	transform:scale(1.05,1.05);
}

.portfoliolink { 
	display: block;
	border: 1px solid #333333; 
	font-size: .8em;
	white-space: nowrap;
	text-align: right; 
	color: #FFFFFF; 
	text-decoration: none; 
	font-weight: bold; 
	padding: 10px;
	margin-bottom: .8em;
	-webkit-border-radius: 0 0 8px 8px; 
	-moz-border-radius: 0 0 8px 8px; 
	border-radius: 0 0 8px 8px;
	letter-spacing: .06em; 
}
.portfoliolink:hover { 
	background: #CCCCCC;
	background-color: rgb(204,204,204); 
	background-color: rgba(204,204,204,0.6); 
	color: #000000; 
}

.portfolio fieldset {
	-webkit-border-radius: 8px; 
	-moz-border-radius: 8px; 
	border-radius: 8px;
	border: 1px solid #333333;
	margin-left: 2em;
	margin-right: 2em;
	background: #EFEFEF;
	box-shadow: 2px 2px 2px #333;
}

.portfolio fieldset.creative h2 {
    padding-left: 0;
	text-align: left;
    margin-top: 0px;
}


.beforeRedesign, .afterRedesign {
	float: left;
	position: relative;
	width: 50%;
	height: 100%;
	overflow: auto;
	background: #ffffff;
	z-index: 4;
}

.beforeRedesign p,.afterRedesign p {
	position: absolute;
	top: 3em;
	left: 3em;
	z-index: 1
}

.label {
	position: absolute;
	margin: 0 auto;
	padding: .4em;
	left: 0;
	right: 0;
	top: 30px;
	width: 32%;
	z-index: 5;
	background: #CCCCCC;
	border: 2px solid #333333;
	overflow: auto;
	-webkit-box-shadow: 0px 3px 6px #666666;
	-moz-box-shadow: 0px 3px 6px #666666;
	box-shadow: 0px 3px 6px #666666;
}

.label ul { 
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: center;
    display: block;
    overflow: auto;
}

.label li {
	display: inline-block;
	padding: 0 3%;
}

.label p {
	text-align: center;
}

.redesign {
	padding-top: 0;
}

.wontplayflash { display: none; }


#m-instruct { display: block; margin-top: .2em; text-align: center; font-size: .9em; font-style: italic; }



/* Hide submenus until needed 
.resumesubmenu,
.fandfsubmenu { display: none; }*/

/* Allow submenu to display on correct pages */
/*
#resume .resumesubmenu, 
#family .fandfsubmenu{ display: block; }
*/

/****************************************************
                   Resume
****************************************************/
#webdesigner { padding-left: 15px; }
#webdesigner li { padding-bottom: 10px; font-size: .94em; color:#191970; line-height: 1.4; }
#webdesigner li em { font-weight: bold; font-size: 1.2em !important; }

.resume-buttons {
	text-align: center;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.resume-buttons li {
	display: inline-block;
}

.lt-ie8 .resume-buttons li { 
	display: inline;
	width: 33.2%;
}
	
.resume-buttons a {
    display: inline-block;
    text-align: center;
	vertical-align: middle;
    width: 5.5em;
	height: 5.5em;
    margin-right: .5em;
    margin-bottom: .5em;
    padding: 1em;
    border: 1px solid #666;
    border-radius: 1em;
    font-size: 1.2em;
    text-decoration: none;
	text-shadow: 2px 2px 2px #333333;
    font-family: sans-serif;
    color: #ffffff;
	background: #6d55c7;
	background: -moz-linear-gradient(top,  #6d55c7 0%, #8d6eff 100%);
	background: -webkit-linear-gradient(top,  #6d55c7 0%,#8d6eff 100%);
	background: linear-gradient(to bottom,  #6d55c7 0%,#8d6eff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d55c7', endColorstr='#8d6eff',GradientType=0 );
	position: relative;
	z-index: 100;
}

	
.resume-buttons a:before {
	content: "";
	position: absolute;
	border-radius: inherit;
	top: 0;
	left: 0;
	opacity: 0;
	width: 100%;
	height: 100%;
	z-index: -100;
	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	-ms-transition: opacity 0.3s;
	transition: opacity 0.3s;
	background: #8d6eff;
	background: -moz-linear-gradient(top,  #8d6eff 0%, #6d55c7 100%);
	background: -webkit-linear-gradient(top,  #8d6eff 0%,#6d55c7 100%);
	background: linear-gradient(to bottom,  #8d6eff 0%,#6d55c7 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8d6eff', endColorstr='#6d55c7',GradientType=0 );
}
	
.resume-buttons a:hover:before {
	opacity: 1;
}


.resumecontent { 
	background-color: #FFFFFF; 
	font-family: 'Source Sans Pro', sans-serif !important; 
	font-size: 1.2rem;
	border-left: 1px solid #CCCCCC; 
	border-top: 1px solid #CCCCCC; 
	box-shadow: 3px 3px 3px #999999;
	margin: 10px 0 0 0;
	padding:0 6px;
}

/*.resumecontent h1 { */
.resumeheader h1 { 
	margin-bottom: 0; 
	font-family: 'Source Sans Pro:700', sans-serif !important; 
	text-align: center;
	/*color: #000000 !important; */
	color:hsl(213deg 84% 48%) !important;
	line-height: 1em; 
	font-size: 1.6em !important;
}

/*.resumecontent h1 span { */
.resumeheader h1 span {
	display: inline-block; 
	margin: 0; 
	padding: 0; 
	/*color: #666 !important; */
	color: hsl(213 70% 70% / 0.95);
}

#contactinfo { margin: 0; line-height: 1em; text-align: center; }
#contactinfo p { margin-top: 8px; }
#contactinfo .addrlinks { font-size: 80%; }

.resumecontent h2 { 
	font-family: 'Source Sans Pro:200', sans-serif !important; 
	font-size: 1.4em;
	margin: 5px 0;
	text-align: center;
}
.resumecontent h3 { 
	font-family: 'Source Sans Pro:200', sans-serif !important; 
	font-size: .9em;
	margin: 10px 0;
	text-align: center;
}


#objective p { font-size: 1.2rem; }
#objective h2 { margin-top: 0; }
#objective h3 { margin-top: 5px; }

#experience { padding-top: 5px; }
#experience h2.pro { padding: 0; }
#experience h2.vol { padding: 0; margin-top: 10px; }





.skills { 
/*	font-size: 96%; */
	margin-bottom: 1em;
    text-align: center;
}


.skills-box {
	display: flex;
    justify-content: center;
    column-gap: 2em;
	font-size: 1.1rem;
}


.primary-skills {
	display: inline-block;
	text-align: left;
}
.primary-skills ul,.secondary-skills ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.primary-skills li:first-child { 
	font-weight: bold; 
}


.secondary-skills ul {
	color: #666666;
}

.secondary-skills {
	display: inline-block;
	vertical-align: top;
	text-align: left;
}

.secondary-skills li:nth-child(5) {
	font-weight: bold;
}






/* Company Info blocks */
.company {
	flex-basis:100%;
}
.company ul { list-style-type: none; margin: 0; padding: 0; position: relative; display:flex; }
.company-container {
	display: flex;
}
.employer { padding: 10px; }
.employer > ul { list-style-type: none; margin: 0; padding-left: 0; }
.cname { font-weight: bold; font-size: 1.1em; text-decoration: underline; }
/*.worklocation { color: #999999; font-size: .9em; }*/
.worklocation { color: #666666; font-size: .9em; }

.workdate { 
	text-align: right; 
	flex-grow:1;
}
/*.worktitle { clear: left; font-style: italic; }*/
.worktitle { 
	font-style: italic; 
}

.worknote { 
	clear: left; 
	font-weight: bold; 
	color: #666666; 
	font-size: 85%; 
	padding-left: 1em; 
	padding: 7px 0; 
}

.stripe { 
	background-color: #F0F0F0; 
}

.workexperience ul { 
	margin: 0; 
	padding-left: 22px; 
	list-style-image:url(../../resume/images/arrowbullet.png); 
}

.workexperience li {
	margin-bottom: 5px;
}

.workexperience p { margin: .5em 0; }
.topmenu { float: left; margin-left: 3px; margin-right: 3px; font-size: .75em; }

/** Company logos **/
.logo {
	height: 50px;
	border-right: 2px solid #DDDDDD;
	margin-right: .5em;
	display: flex;
}

.logo.usaf img {
	width: 50px;
	height: auto;
	margin-right: .5em;
}

.logo.wlw img {
	width:50px;
	height:auto;
/*	background: hsl(239, 87%, 50%);*/
	margin-right:.5em;
}

.logo.nortel img,
.logo.usamo img,
.logo.fis img,
.logo.mytnb img {
	width:50px;
	height: auto;
	margin-right:.5em;
	align-self:center;
}


/****************************************************
                   End Resume
****************************************************/




/****************************************************
                    Portfolio
****************************************************/

.boxstyle { 
	font-size: .9em; 
}

.boxstyle h2 { 
	margin-top: 0; 
}

.boxstyle ul {
	padding-left: 16px;
}

.btt         { text-align: right; margin-bottom: 5px; }
.btt a       { display: block; float: right; padding: 3px 20px; border: 1px solid #999999; background-color: #F2F2F2; font-size: .8em; }
.btt a:hover { text-decoration: none; color: #ffffff; background-color:#CCCC9A; }

.plink      { display: block; max-width: 350px; max-height: 230px; margin: 0 auto;  }
.plink img  { width: 100%; border: 1px solid #666; }
	.boxstyle ul {
		padding-left: 16px;
	}

#separator      { 
	position: relative; 
	background-image: url(../portfolio/images/separatorR.png); 
	background-repeat: no-repeat; 
	background-position: center right; 
	height: 19px; 
	padding: 30px 0; 
	margin: 0 0 0 4px;
}
#separator span { 
	display: block; 
	position: absolute; 
	left: -4px; 
	top: 21px; 
	width: 32px; 
	height: 19px; 
	background-image: url(../portfolio/images/separatorL.png); 
	background-repeat: no-repeat;
}

section h2 { margin-bottom: .1em; }
#portfolio.creative section h2 { 
	text-align: center;
}

section .graphics,section .myflash {
	text-align: center;
}

section .graphics p,section .myflash p {
	text-align: left;
	margin-left: .2em;
}

section .graphics a img,section .myflash img {
	box-shadow: 3px 3px 3px #333333;
	transition: box-shadow .1s ease-in-out 0s;
}

section .graphics a img:hover,section .myflash img:hover {
	box-shadow: 1px 1px 1px #333333;
}

section .graphics ul li,section .myflash ul li {
	display: inline-block; 
	*display: inline;
	zoom: 1;
	margin: .2em;
}

section .graphics ul,section .myflash ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

section .myflash { 
	margin-bottom: 1em;
}

.my-flash-nav .fancybox-prev { margin-left: -4em; width: 15%; }
.my-flash-nav .fancybox-next { margin-right: -4em; width: 15%; }
.my-flash-nav .fancybox-title-inside-wrap { padding-left: .3em; padding-bottom: .3em; background: #F9F9F9; }

/****************************************************
                   End Portfolio
****************************************************/








/****************************************************
                    About Me
****************************************************/
.aboutme {
	-webkit-box-shadow: #333 4px 5px 6px; 
	-moz-box-shadow: #333 4px 5px 6px; 
	box-shadow: #333 4px 5px 6px; 
}

.aboutme { margin: 0 auto .6em auto; max-width: 300px; }
.aboutme img { display: block; width: 100%; height: auto;border: 1px solid #333333; }
/****************************************************
                  End About Me
****************************************************/



/****************************************************
                   Family and Friends
****************************************************/
#fandflinks { padding-left: 16px; }
#memories { list-style-type: none; padding: 0; margin: 0; }
#memories li { margin-bottom: 10px; }
#dadlink { background: url(/familyandfriends/images/dad_sm.jpg) 0 0 no-repeat; padding-top: 110px; }
#djlink  { background: url(/familyandfriends/images/dj_sm.jpg) 0 0 no-repeat; padding-top: 110px; min-height: 110px; }
#family h2 { margin: 0; }

/****    Dad    ****/
#dad { 
	text-align: center;
}

#dad img {
	border: 1px solid #333333; 
	/*width="367" height="400"*/
	width: 100%;
	max-width: 367px;
	height: auto;
}


#wedding {
	text-align: center;
}
#wedding img {
	border: 1px solid #333333;
	/* width="550" height="455"*/
	width: 100%;
	max-width: 450px;
	height: auto;	
}

#DonHaragan_Dad {
	text-align: center;
}
#DonHaragan_Dad img {
	border: 1px solid #333333;
	/* width="550" height="455"*/
	width: 100%;
	max-width: 450px;
	height: auto;		
}

ul.memories { padding-left: 1em; }
ul.memories li { margin-bottom: 15px; }
.date { display: block; float: right; }

.lastwords { 
	padding: 4px 6px;
	-webkit-box-shadow: #333 3px 3px 5px;
	-moz-box-shadow: #333 3px 3px 5px; 
	box-shadow: #333 3px 3px 5px;
	border: 1px solid #333333;
	margin-bottom: .8em;
}
#eulogylinks { 
	font-size: .95em; 
	width: 10em;
	margin: 1.2em auto .5em auto;
	padding: 0 .5em; 
	border: 1px dashed #999999; 
	background-color: #E5E5E5; 
}

#eulogycrumbs { float: right; white-space: nowrap; background-color: transparent; }

#breadcrumbnav {
	text-align: right;
	white-space: nowrap; 
	background-color: transparent; 
}
#breadcrumbnav + p {
	margin-top: 0; 
}

.eheading { margin-bottom: 0; }
.eheading + p { margin-top: 0; }

#duetvideos ul { list-style-type: none; margin: 0; padding: 0; }
#duetvideos a { 
	display: block; 
	margin: 0; 
	padding: 4px 15px; 
	background-color: #990000; 
	color: #FFFFFF; 
	font-weight: bold; 
	text-decoration: none;  
}

#duetvideos a:hover { text-decoration: underline; background-color: #A71F22; }

/*.photothumbs { text-align: center; }
.photothumbs a { display: inline-block; }*/
.photothumbs img {  
	margin: 5px 5px 10px 5px;  
	border: 1px solid #333333; 
	-webkit-box-shadow: #333 3px 3px 5px;
	-moz-box-shadow: #333 3px 3px 5px; 
	box-shadow: #333 3px 3px 5px; 
}

.photothumbR img {
	-webkit-box-shadow: #333 3px 3px 5px;
	-moz-box-shadow: #333 3px 3px 5px; 
	box-shadow: #333 3px 3px 5px; 
}


.photothumbL img {
	margin-right: .6em; 
	margin-bottom: .6em; 
	-webkit-box-shadow: #333 3px 3px 5px;
	-moz-box-shadow: #333 3px 3px 5px; 
	box-shadow: #333 3px 3px 5px;
}

/****   Demise of Dog   ****/
#dj1 { 
	float: left; 
	margin: 6px 10px 6px 0; 
}

#dj1 img {
	width: 100%;
	max-width: 299px;
	height: auto; 
	border: 1px solid #333333;
}

#dj2 { 
	float: right; 
	margin: 6px 0 6px 10px; 
}

#dj2 img {
	width: 100%;
	max-width: 300px;
	height: auto;
	border: 1px solid #333333; 
}

#calloutbox { 
	font-family:Georgia, 'Times New Roman', Times, serif;
	font-size: 150%;
	line-height: 1.2em;
	margin: 0 10px 10px 0px;
	padding: .2em;
	max-width: 270px;
	color: #666666; 
	border: 1px solid #333333; 
}
.story { text-indent: 1.5em; }


/****  My Photos  ****/
/* Automatic Breadcrumb Style */
.breadcrumbnav { 
	float: right; 
	font-size: 0.9em; 
	color: #000000; 
	padding: 0.5em; 
	text-align: right;
	position: relative;
	z-index: 100;
}


.picwidth { text-align: center; }
.picbox   { 
	border: 1px solid #000000; 
	padding: 0; 
	margin: 4px; 
	width: 100px; 
	display: inline-block; 
	*display: inline;
	zoom: 1;
	position: relative; 
}
.picbox a { display: block; width: 100px; height: 67px; }
.picnav{ text-align: right;margin: 8px 10px;}
.nextlink { display: block; text-align: right; padding: 8px 10px; }
 
#aboutpics {
	position: relative;
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: block;
	/*background-color: #F5CFCF; - garrish background color for ease of viewing whilst coding! */
}

#aboutpics li:nth-child(odd) {
	background-color: #E4E4E4;
}

#aboutpics li {
	/*background-color: #66FF99; - garrish background color for ease of viewing whilst coding!  */
	margin: 0 0 .5em 0;
	padding: .5em 0 .5em .5em;
}

#aboutpics figcaption {
	margin-left: 4.5em;
}



body.lt-ie10 #aboutpics {
	position: relative;
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: block;
	/*background-color: #F5CFCF; - garrish background color for ease of viewing whilst coding! */
}

body.lt-ie10 #aboutpics li:nth-child(odd) {
	background-color: #E4E4E4;
}

body.lt-ie10 #aboutpics li {
	/*background-color: #66FF99; - garrish background color for ease of viewing whilst coding!  */
	margin: 0 0 .5em 0;
	padding: .5em 0 .5em .5em;
}

body.lt-ie10 #aboutpics figcaption {
	margin-left: 4.5em;
}

/****************************************************
               End Family and Friends
****************************************************/


/****************************************************
                 Contact Me form
****************************************************/
#contactform { 
	width: 90%;
	margin: 0 auto 2em auto; 
	padding: 1em .4em 1em .7em;
	background: #b8b975;
	-webkit-border-radius: 10px; 
	-moz-border-radius: 10px; 
	border-radius: 10px; 
	-webkit-box-shadow: 5px 5px 9px #333; 
	-moz-box-shadow: 5px 5px 9px #333; 
	box-shadow: 5px 5px 9px #333; 
}

#contactform ul { list-style: none; margin: 0; padding: 0; display: block; }
#contactform li { margin-bottom: 10px; }
#contactform label { display: block; padding-right: 10px; color: #333; }
#contactbtn { width: 8em; height: 2em; }
.contactbtn { text-align: center; }

#Name,#Email,#Telephone,#subject,#Message { width: 96%;}

.fieldstyle { 
	height: 2em; 
	padding-left: 4px;
	border: none;
	-webkit-border-radius: 5px; 
	-moz-border-radius: 5px; 
	border-radius: 5px; 
	-webkit-box-shadow: 3px 3px 5px #333; 
	-moz-box-shadow: 3px 3px 5px #333; 
	box-shadow: 3px 3px 5px #333; 
}

textarea { 
	-webkit-border-radius: 5px; 
	-moz-border-radius: 5px; 
	border-radius: 5px; 
	-webkit-box-shadow: 3px 3px 5px #333; 
	-moz-box-shadow: 3px 3px 5px #333; 
	box-shadow: 3px 3px 5px #333; 
}

#vimg {
    max-width: 200px;
    width: 100%;
}


.required { color: #990000; font-weight: bold; }
div.error { color: #990000; padding-top: 5px; padding-left: 8px; font-size: smaller; }

/*** tooltip ***/
.why { 
	color: #333 !important; 
	font-style: italic;
	margin-left: 15px; 
	font-size: small;
}

#tooltip { 
	font-family: 'Source Sans Pro', sans-serif !important;
	font-size: small;
	text-align: center; 
	color: #fff; 
	background: rgba(001,001,001,0.8); 
	position: absolute; 
	z-index: 100; 
	padding: 15px; 
	-webkit-border-radius: 6px; 
	-moz-border-radius: 6px; 
	border-radius: 6px; 
}

#tooltip:after /* triangle decoration */ {
	width: 0; 
	height: 0; 
	border-left: 10px solid transparent; 
	border-right: 10px solid transparent; 
	border-top: 10px solid #111;
	content: ''; 
	position: absolute; 
	left: 50%; 
	bottom: -10px; 
	margin-left: -10px;
}
 
#tooltip.top:after { 
	border-top-color: transparent; 
	border-bottom: 10px solid #111; 
	top: -20px; bottom: auto; 
}

#tooltip.left:after { left: 10px; margin: 0; }
#tooltip.right:after { right: 10px; left: auto; margin: 0; }

/****************************************************
                 End Contact Me form
****************************************************/

.memories {
	margin-top: 1em;
	margin-bottom: 1em;
}
.memories img {
	width: 100%;
	height: auto;
	border: 1px solid #000000;
}
footer { display: none; }



















/******************************************************************************************/
/*** MEDIA STYLES *************************************************************************/
/******************************************************************************************/
@media screen and (min-width: 15.625em) { /* 250px */
	.portfoliocontent ul li { 
		height: 8em;
	}

	.portfolio section h2 {
		text-align: center;
	}

	header h1.pgtitle {
		padding: .4em 0 0 .4em;
		text-align: left;
	}
	
	#batman { margin-left: .5em; }


}














@media screen and (min-width: 22.5em ) { /* 360px */
	#content {
		padding-top: 2em;
	}
	.portfoliocontent { text-align: center; }
	.portfoliocontent ul li { 
		display: inline-block; 
		*display: inline;
		zoom: 1;
		width: 45.5%;
	}
	
	.portfoliocontent ul li:nth-child(odd){ margin-right: 5%; }
	
	.lt-ie9 .t-left,.lt-ie9 .t-right,.lt-ie9 .b-mid { margin-right: 5%; }



	nav #namebox {
		left: -5px; 
		top: -3.5em;
		width: 210px;
		height: 64px;
		background: url(/images/namebox_sm.png) no-repeat;
		-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;transition: all 0.3s ease-out;
	}


	nav #namebox h1 {
		font-size: 1.4em;
		margin: .3em 0 0 1em;
		line-height: .9em;
	}
	
	nav #namebox h1 span {
		font-size: .65em;
		margin: 0 0 0 3.5em;
	}

	.lt-ie9 nav #namebox h1 { 
		font-size: 1.2em;
		margin: .6em 0 0 1.6em;
		line-height: .98em;
	}
	
	.lt-ie9 nav #namebox h1 span { 
		font-size: 60%;
		margin: 0 0 0 4.7em;
	}


	.contactlink {
		display: block;
		position: absolute;
		top: -25px;
		right: 10px;
		font-size: 1em;
	}


	.resumecontent { 
		margin: 6px 0px 20px; 
		padding: 14px 10px 10px; 
	}
	
	.resumecontent h1 { 
		font-size: 2.4em !important;
	}
	
	.resumecontent h3 { 
		font-size: 1em; 
	}
	
	#portfolio.creative section h2 { 
		text-align: left;
		padding: .4em 0 0 .4em;
	}
	

	/*.workdate { position: absolute; right: 0; top: 1.4em; width: 114px; text-align: right; }*/


	#contactform { 
		padding: 1em; 
	}
	
	#dadlink,#djlink { 
		padding-left: 110px; 
		padding-top: 0; 
	}
	
	#eulogylinks { 
		float: right; 
	}
	
	.music {
		float: right;
		padding: 10px 0px 10px 15px;
		/*width: 325px;*/
		width: 11em;
	}

	.photothumbR { 
		float: right; 
	}
	
	.photothumbL { 
		float: left; 
	}
	
	#calloutbox {
		float: left;
		font-size: 200%;
	}
}



















@media screen and (min-width: 30em) { /* 480px or greater */
	#resumelinks { 
		max-width: 60%;
	}

	/****************************************************
						About Me
	****************************************************/
	.aboutme {  
		margin-left: 15px;
	}
	
	.aboutme { float: right; max-width: 250px; margin-bottom: 5px; }
	
	/****************************************************
					  End About Me
	****************************************************/

	

	
	.lt-ie8 .primary li,.lt-ie8 .secondary li { display: inline; }

	.primary li:first-child,.secondary li:first-child {
		display: block;
	}
	
	#dad { 
		float: left;
		margin-right: 15px;
	}
	
	
	
	#DonHaragan_Dad {
		float: left;
		margin-right: 15px;
	}
	
	#duetvideos { width: 60%; }
	
	#eulogycrumbs { 
		position: absolute; 
		top: 0; 
		right: 0; 
	}
	
	.memories {
		float: right;
		margin-left: 1em;
	}
	
	.memories img {
		width: 245px;
		height: auto;
	}
}





















@media screen and (min-width: 35em) { /* 560px or greater */
	.resumecontent h1 {
		float: right;
		margin-top: 0;
		text-align: right;
		font-size: 2.5em !important;
	}

	.resumecontent #contactinfo {
		float: left;
		text-align: left;
	}

	#resumelinks { 
		max-width: 60%;
	}
	
	.resumeheader hr {
		clear: both;
	}
	
	#experience {
		padding-top: .6em;
		clear: both;
	}
	
	#objective {
		float: none;
		text-align: justify;
	}

	#contactform {
		width: 75%;
	}
	
	#leftcol  { float: left; width: 47%; }
	#rightcol { float: right; width : 47%; }
	#mr-h { 
		float: right; 
		width: 11em;
	}
	
	#paddleboats {
		display: inline-block;
	}
	
	#christmaspics {
		float: right;
		padding: 10px 0px 10px 15px;
		/*width: 325px;*/
		width: 11em;
	}

/* Portfolio */
	.plink {  
		margin: 0 1em .5em 0;
		float: left; 
	}
	article p:first-child {
		margin-top: 0;
	}

	#portfolio section h2 {
		text-align: left;
	}
/* End Portfolio */
}
















@media screen and (min-width: 36.875em) { /*  590px or larger */
	#eulogylinks { 
		float: right; 
		font-size: .95em; 
		min-width: 11%; 
		margin: 1.2em auto .5em auto; 
		padding: 0 .5em; 
		border: 1px dashed #999999; 
		background-color: #E5E5E5; 
	}
	
	ul.memories { padding-left: 1.6em; }
}


















@media screen and (min-width: 40em) { /*  640px or greater - begin full screen menu */
	html { 
		filter: none;
		background: #000000 url(/images/EdgeOfWildCowMesa_blur.jpg) center top no-repeat fixed; 
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

	body { padding: 30px .5em 0 .5em; }

	header h1#rwd {
		padding: .4em 0 0 .4em;
	}

	header em {
		display: block;
		padding: 0 0 1em .4em;
	}
	
/*****************************************************************************/
/*****************************************************************************/
/*****************************************************************************/

	nav { 
		border-bottom: 2px solid #9F7AB3;
	}

	.pull { 
		display: none;
	}
	
	.menu { 
		display: block; 
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		background: url(/images/menusprite_bg.png) 0 0 repeat-x;;
	}

	.menu > li { 
		position: static;
		display: inline-block;  
		*display: inline;
		zoom: 1;
		float: left; /* remove space caused by inline-block */
		font-size: 1.1em;
		letter-spacing: .02em;
		background: none;
		transition: .2s;
	}
	
	.menu > li:hover {
		background: #62631d;
	}
	
	.lt-ie9 .menu > li { font-size: 1em; }

	.nmenuwidth { width: 17%; }
	.wmenuwidth { width: 32%; }
	
/* Menu images - just to the left of the menu item name */
	.menu > li.homemenu 		> a { background-position: -12px -10px; }
	.menu > li.resumemenu 		> a { background-position: -12px -78px; }
	.menu > li.portfoliomenu 	> a { background-position: -12px -146px; }
	.menu > li.aboutmenu 		> a { background-position: -12px -216px; }
	.menu > li.fandfmenu 		> a { background-position: -12px -284px; }
/* Menu images - just to the left of the menu item name */


	.menu > li > a {
		text-indent: 2.5em;
	}

	.menu > li > a,
	.menu > li > a.desktopLink {
		display: block;
		color: #FFFFFF;
		font-weight: bold;
		text-shadow: #666 2px 2px;
		text-decoration: none;
		position: relative;
		padding: 1em 0;
		text-indent: 2.4em;
	}
	
	.menu > li > a.mobileLink {
		display: none;
	}










	.menu .resumemenu .sub {
		position: absolute;
		left: 0;
		width: 100%;
		padding-left: 16.5%;
		background-color: #73734D;
		border-top: 2px solid #9F7AB3;
	}
	
	.menu .sub li:first-child {
		display: none; /* hide "Home" menu item in both submenus */
	}
	
	.menu .fandfmenu .sub {
		position: absolute;
		left: 0;
		width: 100%;
		padding-left: 66.5%;
		background-color: #73734D;
		border-top: 2px solid #9F7AB3;
	}
	
	.menu ul li {
		float: left;
		text-align: left;
		padding: 0;
		text-shadow: none;
		font-size: .8em;
		background-color: transparent;
		border-bottom: 0;
	}
	
	.menu ul li a {
		display: block;
		line-height: 0;
		padding: 1.2em 1.3em 1.2em 1em;
		text-decoration: none;
		color: #FFFFFF;
		border-bottom: none;
		text-indent: unset;
	}

	.sub {
		display: none;
	}

	.submenu .sub li {
		transition: all;
	}
	
	.submenu .sub li:hover {
		background: #62631d;
	}

	.submenu .resumemenu .aclosed {
		background: url(/images/navarrow.png) 0px 0px no-repeat;
		position: absolute;
		top: 38%;
		right: 3px;
		width: 1em;
		height: 1em;
	}

	.submenu .fandfmenu .aclosed {
		background: url(/images/navarrow.png) 0px 0px no-repeat;
		position: absolute;
		top: 38%;
		right: 34px;
		width: 1em;
		height: 1em;
	}

	.submenu > a span.aclosed {
	-webkit-transition: all 300ms ease-in 0s;
    -moz-transition: all 300ms ease-in 0s;
    -o-transition: all 300ms ease-in 0s;
    transition: all 300ms ease-in 0s;
	}

	.submenu:hover .submenu > a span.aclosed {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
	}


/** Rotate arrows when submenu is open or closed  **/
	.aclosed {
		-webkit-transition: all 300ms ease-in 0s;
		-moz-transition: all 300ms ease-in 0s;
		-o-transition: all 300ms ease-in 0s;
		transition: all 300ms ease-in 0s;
		/*display: none;*/
	}
	
	.aopen {
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
		/*display: none;*/
	}
/** Rotate arrows when submenu is open or closed  **/

/*****************************************************************************/
/*****************************************************************************/
/*****************************************************************************/


	.resumecontent h2 {
		font-size: 1.8em;
		text-align: left;
	}

	#objective {
/*		float: left;
		width: 52%;*/
	}
	
	#objective h2 {
		margin: 5px 0;
	}

	#skills {
		float: right;
		width: 44%;
		margin-bottom: 0;
	}
	
	.primary {
		float: left;
	}

	.secondary-skills {
		float: right;
	}

	.primary li,.secondary li {
		display: block;
	}
	
	.lt-ie8 .primary li,.lt-ie8 .secondary li {
		display: block;
	}
	
	.secondary li {
		padding: 2px 0 2px 5px;
	}
		
	.secondary-skills {
		margin: 0;
	}

	#experience {
		padding-top: .2em;
	}

	body#resume header h1.pgtitle,
	body#family header h1.pgtitle {
		padding: 1.2em 12px 0 .3em;
		overflow: auto;
	}
	
	#content {
		padding-bottom: 0;
	}
	
	.padded-content {
		padding: 0 .75em;
	}

	/****************************************************
					 Contact Me form
	****************************************************/
	#contactform { 
		width: 60%;
		margin: 0 auto 2em auto; 
		padding: 1em 1em 2em 2em; 
		background: #b8b975;
		-webkit-border-radius: 10px; 
		-moz-border-radius: 10px; 
		border-radius: 10px; 
		-webkit-box-shadow: 5px 5px 9px #333; 
		-moz-box-shadow: 5px 5px 9px #333; 
		box-shadow: 5px 5px 9px #333; 
	}
	
	#contactform ul { list-style: none; margin: 0; padding: 0; display: block; }
	#contactform li { margin-bottom: 10px; }
	#contactform label { display: block; padding-right: 10px; color: #333; }
	/*#contactbtn { margin-left: 50%; width: 8em; height: 2em; }*/
	
	#Name,#email,#Telephone { width: 96%;}
	#Message { width: 80%;}
	/****************************************************
					 End Contact Me form
	****************************************************/

	.portfoliocontent ul li { 
		display: inline-block;  
		*display: inline;
		zoom: 1;
		width: 29%;
	}
	
	.portfoliocontent ul li:nth-child(odd){ margin-right: 0%; }
	.portfoliocontent ul li:nth-child(2n+2){ margin-left: 2.5%; margin-right: 2.5%; }
	.portfoliolink { 
		padding: 10px;
		margin-bottom: .8em;
		font-size: 1em; 
		transition: all;
		transition-duration: 300ms;
	}

	.portfolio.creative section h2 { 
		padding: .4em 0 0 .1em;
	}

	.lt-ie9 .t-left,.lt-ie9 .t-right,.lt-ie9 .b-mid { margin-right: 0%; }
	.lt-ie9 .t-mid,.lt-ie9 .b-mid { margin-left: 2.5%; margin-right: 2.5%; }
	
	#webdesigner { padding-left: 30px }
	
	/*@media screen and (min-width:22.5em)*/
	.resumecontent {
		margin: 45px 0px 20px;
	}

	header h1.pgtitle {
		line-height: normal;
	}
	
	
	#calloutbox {
		font-size: 250%;
	}


	#aboutpics {
		list-style-type: none;
		padding: 0;
		margin: 0;
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-count: 2;
		-moz-column-gap: 18px;
		-webkit-column-gap: 18px;
		column-gap: 18px;
	}
	
	
	body.lt-ie10 #aboutpics li {
		/*background-color: #66FF99; - garrish background color for ease of viewing whilst coding!  */
		margin: 0 0 .5em 0;
		padding: .5em 0 .5em .5em;
		width: 48%;
	}
	
	body.lt-ie10 .col2 {
		position: absolute;
		left: 51%;
	}
	
	body.lt-ie10 .topcol {
		position: absolute;
		top: 0;
	}
	
	body.lt-ie10 .topcol + li {
		top: 5.25em; 
	}
	
	body.lt-ie10 .topcol + li + li {
		top: 10.5em; 
	}

	#eulogylinks { 
		margin: 0 auto .5em auto; 
	}

	.employer { 
		padding: 10px; 
		position: relative; 
		z-index: 10; 
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	
	.employer:hover { 
		-webkit-box-shadow: 0px 0px 15px #333333;
		-moz-box-shadow: 0px 0px 15px #333333;
		box-shadow: 0px 0px 15px #333333; 
		z-index: 20; 
	}

	/****************************************************
						 Footer
	****************************************************/
	footer { 
		display: block;
		background-color: #63631C;  
		max-width: 48em;
		margin: 0 auto; padding: 20px 0;
		font-family: 'Signika', sans-serif; 
		color: #E5E5E5; 
		border-top: 2px solid #9F7AB3;
		-webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; 
	}
	
	footer ul { 
		list-style-type: none; 
		margin: 0; 
		padding: 0; 
		display: block;
		/*overflow: auto;*/
		width: 100%; 
	}
	footer ul li { 
		float: left;
		width: 28%; 
		margin-left: 4%; 
		padding: 0; 
		background-color: #5e5e1a !important; 
		position: relative;
	 }
	
	.colcontainer {
		position: relative; 
		overflow: hidden; 
		margin: 0; 
	}
	
	.colcontainer a { 
		display: block; 
		height: 160px; 
		margin: 0 .5em; 
		text-decoration: none;
		color: #999955;
	}
	.colcontainer a h2 { margin: .2em 0; text-transform: uppercase; }
	
	
	.overlay {
		position: absolute; 
		bottom: -100px;
		left:0;
		width: 100%;
		background: rgb(0,0,0); /*fallback for IE7-8*/
		background: rgba(0,0,0,0.4);
		color:#FFFFFF;
		padding: 10px;
	}
	
	.resume-on { 
		position: absolute; 
		left: 0; 
		top: 0; 
		background: url(/images/resume_on.jpg) no-repeat 0 20px; 
		width: 100%; 
		height: 164px; 
		display: none; 
	}
	.resume-off { background: url(/images/resume_off.jpg) no-repeat 0 20px; }
	.portfolio-on { 
		position: absolute; 
		left: 0; 
		top: 0; 
		background: url(/images/portfolio_on.jpg) no-repeat; 
		width: 100%; 
		height: 164px; 
		display: none;
	}
	.portfolio-off { background: url(/images/portfolio_off.jpg) no-repeat;}
	.aboutme-on { 
		position: absolute; 
		left: 0; 
		top: 0; 
		background: url(/images/aboutme_on.jpg) no-repeat; 
		width: 100%; 
		height: 164px; 
		display: none; 
	}
	.aboutme-off { background: url(/images/aboutme_off.jpg) no-repeat;}
	
	.f-right { float: right; position: absolute; right: 9%; bottom: 2px; }
	
	.col { height: 9em;}
	
	.clearfloat { clear: both; }
	.f-left { float: left; width: 69%; }

	/****************************************************
						End Footer
	****************************************************/
}














@media screen and (min-width: 43.125em) { /*  690px or greater - begin full screen menu */
	#eulogylinks { 
		margin: 0 auto .5em auto;
	}
	
	#eulogylinks + p,#eulogylinks + h3 {
		margin-top: 0;
	}	

}



















@media screen and (min-width: 48em) { /*  768px or greater */
	.column {
		-moz-column-count: 3;
		-webkit-column-count: 3;
		column-count: 3;
		-moz-column-gap: 18px;
		-webkit-column-gap: 18px;
		column-gap: 18px;
		padding: 20px 10px;
	}
	
	.column > p { margin-top: 0; }
/*	.menu a:hover { background: url(/images/nav_sprite.png) center -70px no-repeat; }
	.menu ul li a:hover { text-shadow: #333333 2px 2px 3px; }*/
	.aboutme { max-width: 300px; }

	#skills {
		width: 37%;
	}

	.aside-container {
		display: flex; 
		column-gap: 1.25em;
	}
	
	.skills-box {
		display: flex; 
		justify-content: space-between; 
		column-gap: 20px;
	}
	
	#objective {
		width: 59.6%;
	}

	#objective p {
		line-height: 1.2;
	}
	
	#calloutbox {
		font-size: 250%;
		line-height: 1.2em;
	}
	.boxstyle { 
		margin-left: 25.5em;
	}


}











@media screen and (min-width: 50em) { /*  800px or greater */
/*
	#namebox {
		left: -34px; 
	}
	
	.menu ul li {
		display: inline-block;
		float: left;
		width: auto;
	}
*/

	#portfolio section h2 {
		margin-top: 0;	
	}

}


















@media screen and (min-width: 53.75em) { /*  860px or greater */
	body { padding: 50px .5em 0 .5em; }

	nav #namebox {
		display: block;
		position: absolute;
		text-decoration: none;
		left: -34px;
		top: -75px;
		width: 302px;
		height: 97px;
		z-index: 1500;
		background: url(/images/namebox.png) no-repeat;
		-webkit-transition: all 0.3s ease-out;
		-moz-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
	}
	#namebox:hover {
		-webkit-transform: rotate(-2deg);
		-moz-transform: rotate(-2deg);
		transform: rotate(-2deg);
		-webkit-transition: all 0.3s ease-in;
		-moz-transition: all 0.3s ease-in;
		transition: all 0.3s ease-in;
	}
	
	nav #namebox h1 {
		font-size: 2em;
		margin: .4em 0 0 1em;
		line-height: .8em;
	}
	
	nav #namebox h1 span {
		font-size: 55%;
		-webkit-transform: rotate(-2deg);
		-moz-transform: rotate(-2deg);
		transform: rotate(-2deg);
		margin: 0 0 0 5.6em;
	}

	.lt-ie9 nav #namebox h1 { 
		font-size: 1.8em;
		margin: .42em 0 0 1em;
		line-height: .98em;
	}
	
	.lt-ie9 nav #namebox h1 span { 
		font-size: 60%;
		margin: 0 0 0 5.8em;
	}
/**/
}

@media screen and (min-width: 60em) { /*  960px or greater */

}

@media screen and (min-width:64em) { /* 1024px or greater */
	body { padding: 50px .5em 0 .5em; }
}