/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0b1 | 201101 
   NOTE: WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */

/* @font-face to embed custom font on visitors' browsers  */
 @font-face {
    font-family: 'HamletOrNot';
    src: url('/fonts/hamletornot.ttf') format('truetype'),
    	 url('/fonts/hamletornot-webfont.woff') format('woff'),
    	 url('/fonts/hamletornot-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}


div {
}


aside {
        border-top: 1px solid #666666;
}


.six.columns h2 {
	margin-top: 1em; 
}

.imageborder {  /* For business card, screenshot(s) in portfolio */
	border: 1px solid #999;
}


.container {
/*	display: flex; */
    padding-left: .5em;
    padding-right: .5em;
} 


.homeplus {   /* for main photo on home page */
    font-size: 2em;
    line-height: 1em;
    margin-right: : 1em; 
    margin-bottom: 0.2em;
    text-align: center;      
}

.coloredportrait {
	margin-bottom: 1em;
}

.coloredportraitmediakit {
	margin-bottom: 2em;
}

.youtube {
	margin-bottom: 1em;
}


.pageheader { /* atop media kit page and??? blog page and privacy policy page */
	font-family: HamletOrNot;
	font-size: 3em;
	text-align: center;
	margin-top: 2em;
}

.privacyheader { /* atop privacy policy page - abandoned, used pageheader instead */
	font-family: HamletOrNot;
	font-size: 2em;
	text-align: center;
	margin-top: 2em;
}

.latestPost {
	font-family: HamletOrNot;
	font-size: 1.5em;
	text-align: left;
	color: #000000; /*#666;*/
}

.olderBlogPosts { /* Do not confuse this with .otherBlogPostsList below */
	font-family: HamletOrNot;
	font-size: 1.5em;
	text-align: left;
	color: #000000; /*#666;*/
}

/*
#portfolioskillsprojectsheader {
	font-size: 1.25em;
	line-height: 1.2em;
	margin: 0em; 
	text-align: center; 
}


#portfolioskills { 
	font-size: 1em;
	line-height: 1.2em;
	margin: 0.2em 0.5em 1.3em 0.5em; 
	text-align: center; 
}
*/

.italics { /*  */
	font-style: italic;
	margin-right: .21em;
}


body {
	font: 1.2em 'PT Sans', sans-serif;
	color: #000000;  /* color: #666666; medium-dark gray*/
}

.hamletornot { /* for identifying in the media kit the custom font used in the app - NOT USING?!?! */
	font-family: HamletOrNot;
}


p {
	margin: 0em 1em 1.2em 0em;
/*	margin: 0em 1em 1em 0em; */
}

/* article {
	margin-top: 2em;
	margin-bottom: 2em;
} */


.blockquote {
	font-style: italic;
	margin-left: 1em;
	margin-right: 1em;
}


.emph { /*  */
	font-weight: bold;
}

.screenshot {
	margin-top: 2em;
	margin-bottom: 2em;
}

.appstores {
	/*align-content: center; */
	background-position: center;
	margin-left: : 0 auto;
	margin-top: 1em;
	margin-bottom: 1em;

}

figcaption {
	font-weight: bold;
	margin-bottom: 1em;
}


ul { /* NOTE: There is another ul id (#primary_nav ul) below for the Navigation menu */
	list-style: square;
	list-style-position: inside;
	margin-top: 0;
	padding: 0 0 0 0px;
}

.otherBlogPostsList { /* Do not confuse this with .olderBlogPosts above */
	list-style-type: none;
	margin-top: 0;
	padding: 0 0 0 0px;
}


/*
a.shakesquizdotcomlink {
	color: #ff6600;
}
*/

a:link {
	color: #FF8000; /* = orange /* #ff6600; = another orange */
}


a:visited {
	color: #666666;
}


a:hover {
	color: #000000; #/* #666666; */
}


a:active {
	color: #FF0000; /* #666666; */
}

a.shakesquizdotcomlink {
	color: #FE7315; /* #ff6600; */
}

h1 {    
	color: #000000; /*#666;*/
	font-weight: bold;
	font-size: 1em;
	/*line-height: .2em;*/
	/*margin-top: 2em;
    margin-bottom: 0.2em; */
}

h2 {
	color: #000000; /*#666;*/
	font-weight: bold;
	font-size: 1em;
	/*line-height: .2em;*/
	margin-top: 2em;
    margin-bottom: 0.2em; 	
}


h3      {
	color: #000000; /*#666;*/
	text-decoration: none;
	font-weight: bold;
	font-size: 1em;
	line-height: 1em;
}


h5      {
	color: #000000; /*#666;*/
	font-weight: bold;
	font-size: .8em;
	line-height: 1em;
}


/*header*/

.mainHeader {
	background: #FF8000; /* = orange /* #000000; blk /* #0080FF; blue /* #00804E; /* #8000FF; /* #B201AF; /* = purple = rgb 178,1,175 */ /* green = rgb 12,162,82 #0CA252; /* orange #ff6600;*/
	padding: 0.8em 0.4em 0.4em 1.5em;
}

header {
	background: #FFFFFF;
}

		/*shorter clearfix http://nicolasgallagher.com/micro-clearfix-hack/*/
		header:before,
		header:after {
		    content:"";
		    display:table;
		}
		
		header:after {
		    clear:both;
		}
		
		/* For IE 6/7 (trigger hasLayout) */
		header {
		    zoom:1;
		}

h1.logo a {
	color: #ffffff; /* #FFD925; /* = yellow-orange = rgb 255,215,37 */ /*#FFBC46;*/
	font-family: HamletOrNot;
	text-decoration: none;
	font-weight: normal;
	font-size: 1.4em;
	line-height: 0.4em;
	letter-spacing: 0.15em;
	float: left;
    margin-left: 0em;
    margin-bottom: 0.4em;
	padding-left: 0em;
	padding-bottom: 0.2em;
}

h1.logo a:hover {
	color: #FFFFFF;
	font-family: HamletOrNot;
	text-decoration: none;
	font-weight: normal;
	font-size: 1.4em;
	line-height: 0.4em;
	letter-spacing: 0.15em;
	float: left;
    margin-left: 0em;
    margin-bottom: 0.4em;
	padding-left: 0em;
	padding-bottom: 0.2em;
}


a.to_nav {
	float: right;
	/* color: #FFD925; yellow-orange */
	/* color: #fff; */
	background: #ff6600;
	text-decoration: none;
	padding: 0 10px;
	font-size: 12px;
	font-weight: normal;
	line-height: 22px;
	height: 22px;
	letter-spacing: 0.1em;
}

a.to_nav:hover,
a.to_nav:focus {
	color: #666666;
/*	background: #ccc;  */
}
	
/*navigation*/	

/* This pushes the nav elements down to align them with the name, I think */ 
#primary_nav ul {
	list-style: none;
	color: #FFD925; /* yellow-orange */
    /* background: #B201AF; *#ff6600; */
	padding: 0px 0 0 0;
	margin-top: 0px;
}


#primary_nav li a {
	display: block;
	font-family: HamletOrNot;
	color: #ffffff; /* #FFD925; /* yellow-orange */
	/*font-size: 1em; */
  	margin-left: 0em;
	padding: 0.5em 0em 0.5em 1.5em;
    background: #FF8000; /* = orange /* #000000; blk /* #00804E; /*#B201AF; /*#ff6600;*/
	text-decoration: none;
	font-weight: normal;
	letter-spacing: 0.1em;
	height: 1.6em;
	border-bottom: 1px dotted #666666;
}


#primary_nav li:first-child a {
	border-top: 1px dotted #666666;
}


#primary_nav li:last-child a {
	border-bottom: none;
}

#primary_nav li a:hover,
#primary_nav li a:focus {
	color: #ffffff; /* #666666; */
/*	background: #ccc;  */
}

/*footer*/

footer {
    font-size: 1em;
	color: #666666;
	font-family: 'PT Sans', sans-serif;
	text-align: center;
    line-height: 2em;
}


/* This limits phone call link in footer to mobile devices */
/*.mobilesOnly {
visibility:hidden;
}
*/

/* This prevents an image, object, etc., from exceeding screen width & keeps things responsive */
img, embed, object, video {
	max-width: 100%;
}


/*media queries - note @media ONLY keyword so IE8 doesn’t process the query*/

		@media only screen and (min-width: 768px) {

			figcaption {
				font-weight: bold;
				/* margin-bottom: 1em; turn off for wider viewports */
			}
		
            .homeplus {
                font-size: 6em;
            }
 
			#portfolioskillsprojectsheader {
				font-size: 1.5em;
				line-height: 1.2em;
				margin: 0em; 
				text-align: center; 
			}

			/*
			aside {
       			border-top: none;
				margin-top: 2em; /* keep margin-top same as for .ten.columns */
			/* } */

			/*
			.six.columns h2 {
				margin-top: 0em; 
			}

			.ten.columns {
				margin-top: 2em; /* keep margin-top same as for aside */
			/* } */

			h1 {
			font-size: 1.2em;
			}

			h2 {
			font-size: 1.2em;
			}

			a.to_nav {
				display: none;
			}
			
			
			#primary_nav {
				position: absolute;
				top: 5px;
				right: 10px;
				background: none;
			}
			
			#primary_nav li {
				display: inline;
			}
			
			#primary_nav li a {
				float: left;
				border: none;
				/*padding: 0 1em;*/
                padding: 0 0.5em;

			}

			#primary_nav li:first-child a {
				border-top: none;
			}
			
			#primary_nav li.top {
				display: none;
			}
	
		}