#html {}
	html {
		position: relative;
		min-height: 100%;
	}

/* To make older browser HTML5 aware */
    header, nav, aside, article, footer {
    	display: block;
    }

#header {}

	header {
		margin: 10px auto;
		width: 100%;
		border: solid 2px green;
		background: #A4F9F5;
	}




#body {}

	body {
		color: #40514E;		/* gives it an off-black/dark-greyish text color */
		width: 100%;
		margin: 0 0 100px; /* bottom = footer height */
		
		text-align: center; /* ...NB: will center both images and text... */
	/* 	font-family: Verdana, sans-serif;	 *//* if 'verdana', doesn't exist, then sans-serif will get used */
	/* 	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; */
		/* at www.cssfontstack.com, the most common fonts installed are listed (Mac vs Windows) */
		/* can copy-paste a set of Fall-Back fonts at this website (top-right corner icon of font...doesn't work?) */
	
		/* Can instead do: Font embedding: via Google Fonts */
		font-family: 'Merriweather', serif;
	
		/* Base Fonts: */
	/* 	font-family: sans-serif; */
	/* 	font-family: serif; */
	/* 	font-family: monospace; */
	/* 	font-family: fantasy; */		/* ...these last 2 can be difficult to read */
	/* 	font-family: cursive; */
	}
	
#h_subheadings {}

	h1 {
		/* margin-top: 50px; */	/* personal preference, px is more precise than 'rem' or % */
		margin: 50px auto 0 auto;  /* ...some fine-tuning of margins */
	/* 	width: 10%;		 */		/* ...if have a width parameter, then need to center with 'auto' value */
	/* 	margin: 0 auto 0 auto; */  /* top bottom right left */
	/*	margin: 0 auto;	 */		/* top and bottom equal 0, left and right equal auto */
		font-family: 'Merriweather', serif;
	/* 	font-size: 90px; */
		/* font-size: 562.5%; */	/* 16px  90px/16 = 5.625 times = 562.5% which is more dynamic*/
		/* font-size: 2em;	 */	/* or, could use 'em' which also dynamically sized; 16px = 100% = 1em */
		/* also notes, em or % style is inherited in HTML structure */
		/* NB: if use 'rem' will be relative to root, and is not affected by upstream changes */
		font-size: 4.625rem;		/* 'rem' only available in CSS 3.0 */
	
		color: #333333;		
		line-height: 2rem;			
		padding-bottom: 10px;
		/* border: solid 2px orange; */
	}

	h2 {
		font-family: 'Montserrat', sans-serif;
		font-size: 2.5rem;	/* 40px/16px = */
		color: #66BFBF;			
		font-weight: normal;	
		padding: 5px;
		text-align: center;
		/* border: solid 2px green; */
	}

	h2.subheading {
		color: #333333;
		/* border: solid 2px blue; */
	}
	

	h3 {
		font-family: 'Montserrat', sans-serif;
		color: #11999E;
		text-align: center;
		/* border: solid 2px purple; */	
	}
	
	
/* =========================================================== */
/* ------ FORMATTING: LEFT / RIGHT COLUMNS ----------------------------- */
#navBar_styling {}
	/* Top level menu bar */
	nav ul {
		display: inline-block;
		width: 100%;
		list-style-type: none;
		margin: 0px;
		padding: 0px;
		font-family: 'Montserrat', sans-serif;
/* 		border: solid 1px red; */
	}
	/* Each list item inside horizontal menu bar */
	/* (Putting menu items side-by-side) */
	nav ul li {
		float: left;
		width: 25%;
		position: relative;
		z-index: 10;
		color: #11999E;
/* 		border: solid 2px green; */
	}
	/* Text and links across navbar */
	nav span, nav a {
	/* Preload two background images */
		text-decoration: none;
		outline: none;
		display: block;
		height: 40px;
		line-height: 40px;
		width: 100%;

		text-align: center;
	}
	/* Unvisited/visited links in horizontal bar */
	nav a:link, nav a:visited {
		color: #11999E;
	}


	/* Hovering over list item in top menu bar */
	nav ul li:hover a, nav ul li:hover span {
		color: black;
	}
	
	/* Drop-down menu for each item in menu bar */
	/* (NB: rule of specificity applies here. That is, there's more specific targetting of elements, this style rule overrides less specific targetted elements.) */
	nav ul li ul {
		background: #A4F9F5;
		position: absolute;
		z-index: 11;
		width: 100%;
		
		/* Hide List !!! */
		visibility: hidden;
	}
	
	/* Make drop-down visible when hovering on menu bar item  */
	nav ul li:hover ul {
		visibility: visible;
/* 		border: solid 2px green; */
	}

	/* Individual list items in drop-down menus */
	nav ul li ul li {
		width: 100%;
		float: none;
		height: 44px;
		line-height: 44px;
		background: #A4F9F5;
		border: solid 2px green;
	}
	
	/* Links in drop-down menus */
	nav ul li ul li a,
	nav ul li ul li a:link,
	nav ul li ul li a:visited {
		background: none;
		display: block;
		text-align: center;
		text-indent:0%;
		width: 100%;
		height: 100%;
		color: #11999E;
		text-decoration: none;
		outline: none;
	}
	/* Hover and active states in drop down menu */
	nav ul li ul li a:hover,
	nav ul li ul li a:active {
		background: #A4F9F5;
		color: black;
	}


/* =========================================================== */
/* ------ FORMATTING: LINKS ----------------------------- */
#a_links {}
	a {
		color: #11999E;		
		font-family: 'Montserrat', sans-serif;
		/* margin: 10px 20px; */
		text-decoration: none;	/* by default, it's underlined for anchor (link) tags. Use hover color change instead. */
	}

	a:hover {
	/* 	color: #EAF6F6; */
		color: black;
	}



/* =========================================================== */
/* ------ FORMATTING: PARAGRAPH ELEMENTS ----------------------------- */
#paragraph_elements {}
	p {
		line-height: 1.5;		/* ...target all paragraphs */
	}


	hr {
		border: dotted #EAF6F6 6px;
		border-bottom: none;
		width: 4%;
		margin: 50px auto;	/* 100px for top & bottom, and left-right centered */
	}


	div {
	/* 	background-color: #A4F9F5; */
	/* 	border: solid 2px blue; */
	}


/* =========================================================== */
/* ------ FORMATTING: LEFT / RIGHT COLUMNS ----------------------------- */
#formatting_left-right {}
	.leftside {
		display: inline-block;
		position: relative;
/* 		border: solid blue; */
	}


	.rightside {
		display: inline-block;
		position: absolute;
		width: 250px;
		height: 400px;
/* 		border: solid 2px green; */
	}


	section .leftside {
		font: 20px/30px Arial, Helvetica, Sans-Serif;
		margin: 40px;
		width: 60%;
		height: 300px;
		/* border: solid 2px red; */
	}
	
	
	.searchinfosection {
		margin: 20px;
	}

	.searchinfosection leftside maintext2 {
		z-index: 0;  /* NB: Inheriting position=relative; a position is necessary for z-index to work. 
						Will use a z-index=1 for "table.zoom img:hover". */
	}


/* =========================================================== */
/* ------ FORMATTING: TEXT ----------------------------------- */
#formatting_text {}
.justify {
	text-align: justify;
}

.maintext {
	/* text-align: center; */
	float: clear;
	position: relative;
	font: 50px/50px Arial, Helvetica, Sans-Serif;
	/* font-size: 80px; */
	font-weight: bold;
	margin-top: 50px;
/* 	margin-left: 50px; */
}

.maintext2 {
	text-align: center;
	float: clear;
	position: relative;
	font: 40px/40px Arial, Helvetica, Sans-Serif;
}

.maintext3 {
	float: clear;
	position: relative;
	font: 20px/20px Arial, Helvetica, Sans-Serif;
	margin-top: 10px;
/* 	margin-left: 50px; */
}


.maintext4 {
	float: clear;
	position: relative;
	font: 20px/20px Arial, Helvetica, Sans-Serif;
	margin: 50px auto;
	width: 50%;
	text-align: justify;
}

.minortext {
	float: clear;
	/* position: relative; */
	font: 20px/30px Arial, Helvetica, Sans-Serif;
	margin-top: 20px;
	text-align: center;
}


/* =========================================================== */
/* ------ FORMATTING: EXTRAS ----------------------------- */
#formatting_extras {}
	.displayinlineblock {
	/*  	width: 200px; */
	/*  	background-color: green; */
		display: inline-block;	/* uses width and also in-line */
	}
	
	.binarybluebackground {
	 position: relative;
	 width: 100%;
	 height: 300px;
	}
	

	
	.contact-message {
		width: 40%;
		margin: 40px auto 60px; /* 40px top, auto for left-right, 60px bottom */
	}


/* =========================================================== */
/* ------ TOP CONTAINER ----------------------------------- */
#top_containers {}
	.top-container {
		background-color: #A4F9F5;
		position: relative;				/* will want bottom-cloud to be relative to top-container */
	/* 	padding: 10px; */
	/* 	height: 300px; */
		width: 100%;
		/* border: solid 5px red; */
	}
	
	.intro {
		width: 50%;		/* ...instead of 30% */
		margin: auto;
		/* border: solid 5px red; */
	}
	
	.heading {
	/* 	width: 60%; */
	/* 	position: center; */
		position: relative;
		/* border: solid 5px red; */
	}


	section.intro-text {
		font: 20px/30px Arial, Helvetica, Sans-Serif;
		margin: 0 auto; /* top & bottom are zero, left & right automatically adjusted; centers div ...only works if define a width */
		padding: 0px;
		width: 41%;
		height: auto;
		/* border: solid 5px red; */
	}
	

/* =========================================================== */
/* ------ MIDDLE CONTAINER ----------------------------------- */
#middle_containers {}
	.middle-container {
		margin: 50px 0;		/* 50px for top & bottom, 0px for left & right */
/* 		position: relative; */
	}
	
	.skill-row {
		width: 50%;
		/* margin: auto; */	/* will center it */
		margin: 100px auto; /* moving clockwise: top right bottom left ...*/	
							/* top and bottom = 100px, left and right = auto, which centers it */
/* 		text-align: left; */
	/* 	line-height: 2; */
/* 		border: solid 2px red; */
	}
	
		/* 
	.code-skill-description {
		clear: left;	/* clears the left side and prevents wrapping around the left */
		/* ...the description paragraph now gets pushed below the floating image, but preceding paragraph remains on the right ('Design and Development')
	}
	 */

	.pro {
		text-decoration: underline;
	}
	
	
		/* ------ MIDDLE SECTIONS ----------------------------------- */
	.middle {
		clear: both;
		margin-top: 100px;
	}


	section.middle {
		margin: 50px;
		width: 60%;
		height: 400px;
/* 		border: solid 5px red; */
	}
	


/* =========================================================== */
/* ------ BOTTOM CONTAINER ----------------------------------- */
#bottom_container {}
	.bottom-container {
		background-color: #66BFBF;
		padding: 50px 0 20px  /* 20px for bottom should be more than enough to cover the 16px default padding at bottom */
		text-align: center;
/* 		border: solid 2px black; */
	}

	
	.comingsoon {
		width: 33%;
		float: right;	/* NB: 'float' is commonly abused. Use it for wrapping text, and not for positioning */
	}
	 
	 .contact-me {	 	
		height: 400px;
/* 		border: solid 2px red; */
	}
	
	
	.contact-me.previews-contactme {
		clear: both;
		position: relative;		
/* 		border: solid 2px blue; */
	}
	 
	 
	 .privacypolicy {
		margin: 50px;
		text-align: center;
	}
	
	
	.copyright {
		color: #EAF6F6;
		font-size: 0.75rem;		/* i.e., 75% of 16px */
		padding: 10px 0;
	}
	
	
	/* ------ FOOTER --------------------------------------------- */
	#footer {}
		/* Styling For Footer */
		footer {
			 clear: both;	/* Prevent sidebar from running right through the footer: use "clear:both;" */
			 
			 /* Will pin footer to bottom of page */
			 position: absolute;
			 left: 0;				/* ...overrides padding by parent div wrapper */
			 bottom: 0;				/* ...just use absolute positioning without bottom parameter*/
			 width: 100%;
			 height: 100px;
		}


		/* Styling for Table in Footer */
		footer table {
			 width: 98%;
			 margin: 5px auto;
			 color: black;
			 text-align: center;
		}


/* =========================================================== */
/* ------ IMAGES ----------------------------------- */
#images {}
	.top-beakerWithBytes {
	/* 	display: inline-block; */
	/* 	vertical-align: middle; */
	/* 	position: relative; */
	/* 	bottom: 30px;		...from bottom of it's parent */
	/* 	float: left; */
	/* 	left: 50px; */
		position: relative;
		margin: 50px 30px 50px 0px;
		height: 80px;
	}
	
	
	.bottom-beakerWithBytes {
	/* 	vertical-align: middle; */	
	/* 	top: 30px; */
	/* 	float: right; */
	/* 	right: 100px; */
		position: absolute;
		margin: 50px 0px 50px 30px;
		height: 80px;
	}
	
	
	.iconImage {
		width: 200px;
		margin: 20px 0px 0px 0px;
		/* border: solid 2px red; */
	}
	
	
	.screenShotImage {
		width: 300px;
		margin: 50px 0px 0px 0px;
		/* border: solid 2px red; */
	}
	
	
	.cartoonBusinessMan {
		width: 100px;
/* 		border: solid 2px red; */
	}
	
	
	.computer {
		width: 25%;
		float: left;	/* image on left, and text wraps to right of it */
		margin-right: 30px; /* creates 30px space from right of image */
	}


/* =========================================================== */
/* ------ TABLES ----------------------------------- */
#tables {}
	table.zoom tr.spacer {
		height: 150%;	/* NB: 100px is the default, and makes no change */
/* 		background: red; */
	}
	
	/* NOTE: Just use "table.zoom tr.spacer" instead of "table.zoom tr", 
	to specifically target the "spacer" class for certain table rows! */
/* 
	table.zoom tr {
		height: 150px;
		background: red;
	}
 */
	
	table.zoom {
		width: 500px;
		margin: 0px auto;
	}

	table.zoom td {
		width: 250px;
	}
	
	table.zoom img {
		width: 100%;
	}
	
	/* Enlarge image on hover */
	table.zoom img:hover {
		transform: scale(2.5);
		transform-origin: center;
		display: inline;
		
		/* NB: Include a position value, relative, and a z-index = 1, 
		to keep zoomed images above any elements/text in the block below it */
		position: relative;	
		z-index: 1;
	}


/* =========================================================== */
/* ------ BUTTONS ----------------------------------- */
#buttons {}
	/* Generated using "css3buttongenerator.com" */
	.btn {
	  background: #11cdd4;
	  background-image: -webkit-linear-gradient(top, #11cdd4, #11999e);
	  background-image: -moz-linear-gradient(top, #11cdd4, #11999e);
	  background-image: -ms-linear-gradient(top, #11cdd4, #11999e);
	  background-image: -o-linear-gradient(top, #11cdd4, #11999e);
	  background-image: linear-gradient(to bottom, #11cdd4, #11999e);
	  -webkit-border-radius: 8;
	  -moz-border-radius: 8;
  
	  border-radius: 8px;
	  font-family: 'Montserrat', sans-serif; /* changed from generated Arial to my favorite from above */
	  color: #ffffff;
	  font-size: 20px;
	  padding: 10px 20px 10px 20px;
	  text-decoration: none;
	}

	.btn:hover {
	  background: #30e3cb;
	  background-image: -webkit-linear-gradient(top, #30e3cb, #2bc4ad);
	  background-image: -moz-linear-gradient(top, #30e3cb, #2bc4ad);
	  background-image: -ms-linear-gradient(top, #30e3cb, #2bc4ad);
	  background-image: -o-linear-gradient(top, #30e3cb, #2bc4ad);
	  background-image: linear-gradient(to bottom, #30e3cb, #2bc4ad);
	  text-decoration: none;
	}


/* =========================================================== */
/* ------ FIGURE/VIDEO ------------------------------------ */
#figures_videos {}
	figure {
		position: absolute;
		width: 200px;
		height: 400px;
		margin: 0;
/* 		border: solid 2px purple; */
	}


	.iphoneBezelImage {
		position: absolute;
		height: 100%;
		left: 10%;
		z-index: 2;
		pointer-events: none;
	}


	.iphonevideo {
		position: absolute;
		height: 96%;
		left: 16%;
		top: 2.5%;
		border-radius: 15px;
		z-index: 1;
	}


/* ======================================================= */
/* ------ FORM SHEETS ------------------------------------ */
#formsheets {}
	.formsheet {
		width: 60%;
	}


	section.formsheet {
		font: 20px/30px Arial, Helvetica, Sans-Serif;
		
		position: relative;
		margin: 20px auto;
		
		height: 400px;
/* 		border: solid 2px red; */
	}