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

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 {
       padding-left: 1em;
} 


.homeplus {   /* for central body text on home and some header-like text on other "pages" */
          font-size: 1.0em;
          line-height: 1.0em;
          margin-top: 1em;
          margin-bottom: 1em; 
          text-align: center;      
          font-family: 'Orbitron', sans-serif;
	  /* color: #333333; /* dark gray */
	  color: #666666; /* medium gray */

}



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


#portfolioskills { /* for skills claimed on portfolio "page" */
	font-size: 1em;
	line-height: 1.2em;
	margin: 0.2em 0.5em 1.3em 0.5em; 
	text-align: center; 
}

#businesssectors { /* for business sectors on home "page" */
	font-size: 2em;
	line-height: 2em;
	margin: 0em 0em 0em 0em; 
	text-align: center; 
	font-family: 'Orbitron', sans-serif;
	color: #666666;
}

.italics { /* for "mobile-first" and "mobile-sensitive" on portfolio "page" */
	font-style: italic;
	margin-right: .21em;
}


.squaremarkers { /* for unordered list in portfolio */
	list-style: square;
	list-style-position: inside;
	margin-top: 0;
	padding: 0 0 0 0px;
}


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

	/*font: 1.05em 'Nova square', sans-serif;
	color: #666666; */


}


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


.blockquote {
	font-style: italic;
}


.emph { /* for questions "What is UX?" and "What is responsive development?" on About page */
	font-weight: bold;
}


/* .clock { /* so far, for digital clock .gif and Swift gestures demo .gif in portfolio */
/*	width: 600px;
	height: auto;
} */

.logo {
	  font-size: 1.5em;
          line-height: 1.5em;
          padding-bottom: 1em;
          text-align: center;      
          font-family: 'Orbitron', sans-serif;
          font-weight: bold;
	  color: #ffffff;
}

.lowercasequestionmark { /* for Perpuzzles word logo */
	padding-top: 2em;
	margin-top: 2em;
}

figcaption {
	font-weight: bold;
}


ul {
	list-style: none;
	display: inline;
	padding: 0 0 0 10px;
}


a:link {

	/* color: #ff6600; 
	/* color: #8dd7bf;
	/* color: #009966; */ 
	/* color: #6600ff; /* bright purple */
	color: #663399; /* purple */ 
}


a:visited {
	color: #666666;
}


a:hover {
	color: #666666;
}


a:active {
	color: #000000;
}


h1 {    

}

h2 {
	color: #666;
	font-weight: bold;
	font-size: 1em;
	line-height: 1em;
        margin-bottom: 0.2em; 	
}


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


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


/*header*/

header {
	font-size: 1.0em;
	/* background: #ff6600; */ /* orange */
	/* background: #8dd7bf; */ /* soft green */
	/* background: #009966; /* dark green */
	/* background: #00a5e3; /* light-med blue */
	background: #00cdac; /* minty green */
	height: 2em;
	padding: 0.4em 0.4em 0.3em 0.9em;
}

		/*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: #fff; */
	/* color: #ffff66; /* yellow */
	/* color: #330099; /* purple */
	color: #000; /* black */
	text-decoration: none;
	font-weight: bold;
	font-size: 1.3em;
	line-height: 1em;
	letter-spacing: 0.15em;
	float: left;
        margin-left: 0em;
	padding-left: 0em;
	font-family: 'Orbitron', sans-serif;
}

/* a.logolowercasequestionmark a {
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	font-size: 1.3em;
	line-height: 1em;
	letter-spacing: 0.15em;
	float: left;
        margin-left: 0em;
	padding-left: 0em;
	font-family: 'Orbitron', sans-serif;
	padding-top: 2em;
	margin-top: 2em;
} */

a.to_nav {
	float: right;
	color: #fff;
	background: #ff6600;
	/* background: #8dd7bf;
	background: #009966; */
	text-decoration: none;
	padding: 0 10px;
	font-size: 12px;
	font-weight: bold;
	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;
        /* background: #ff6600; */ /* orange */
        /* background: #8dd7bf; 
        background: #009966; */
        background: #00cdac; /* minty green*/
	padding: 5px 0 0 0;

	font-family: 'Orbitron', sans-serif;
}


#primary_nav li a {
	display: block;
  	margin-left: 0em;
	padding: 0.5em 0em 0em 1.5em;
	/* color: #fff; */
	/* color: #ffff66; /* yellow */
	color: #000; /* black */ 
        /* background: #ff6600; */
        /* background: #8dd7bf;
        background: #009966; */
        background: #00cdac; /* minty green*/
	text-decoration: none;
	font-weight: bold;
	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: #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) {
		
                        .homeplus {
                                font-size: 3em;
                        }
 
			#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 */
			}

			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;
			}
	
		}