/*

File Name: initialize.css
Description: 
Version: 0.4 February 27, 2012
Author: Christian Ziebarth
Author Twitter: http://www.twitter.com/cmziebarth

Also, much of this comes from:

HTML5 Boilerplate 3.0.2 CSS: h5bp.com/css
https://github.com/murtaugh/HTML5-Reset/blob/master/_/css/style.css
Andy Clarke's 320 and Up
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

A note about formatting, layout: HTML elements are shown in uppercase; in other style sheets outside of this one it is ubiquitous to render HTML elements in lowercase; this probably comes from around 2001 when XHTML was en vogue and people were told to put HTML elements in lowercase, but this actually only applied to elements within a valid XHTML document; it was never a requirement in style sheets (unless you were going to use XML rendered as XHTML, which nobody ever really did). Uppercase is used here because when reading through a style sheet it helps to distinguish HTML elements from id's, classes, type selectors, etc.

To create a final, production version of your style sheet we suggest you remove any comments, minify any white space as you see fit, and use the "CSS Usage" Firebug supplement to scan for any style rules that are not being used by your site and remove those or comment them out as you see fit.

*/



/* Begin "normalize" section. IMPORTANT: This section is only a comment so that style rules that have already been declared by and are universally consistent across default browser style sheets won't have to be processed again if you are going to use them as they are, but at least when they are here in comments you can see at a glance what they are. For any rules that are here that you want to change the attribute value of you can move them to the reset/base section of this stylesheet, or elsewhere as preferred. Most of this information comes from: http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm Please refer to this site for more information about default browser style sheets.


ADDRESS, BLOCKQUOTE, BODY, CENTER, DD, DIV, DT, FIELDSET,
FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6,
MENU, NOFRAMES, OL, P, PRE, UL
{
	display: block;
}

HEAD
{
	display: none;
}
 
ADDRESS, CITE, EM, I, VAR
{
	font-style: italic;
}

DEL, S, STRIKE
{
	text-decoration: line-through;
}

B, H1, H2, H3, H4, H5, H6, STRONG, TH
{
	font-weight: bold;
	font-weight: 401;
	font-weight: 700;
	font-weight: bolder;
	(The elements listed here use different values [depending on the browser] for the "font-weight" property but each one has the net effect of making the text bold. It is up to the developer to decide if they want to reset these on their own for even greater consistency.)
}

INS, U
{
	text-decoration: underline;
}

PRE
{
	white-space: pre;
}
	
 End "normalize" section. */


/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

ARTICLE, ASIDE, DETAILS, FIGCAPTION, FIGURE, FOOTER, HEADER, HGROUP, MAIN, NAV, SECTION
{
	display: block;
}

HTML, BODY, BODY DIV, SPAN, OBJECT, IFRAME, H1, H2, H3, H4, H5, H6, P, BLOCKQUOTE, PRE, ABBR, ADDRESS, CITE, CODE, DEL, DFN, EM, IMG, INS, KBD, Q, SAMP, SMALL, STRONG, SUB, SUP, VAR, B, I, DL, DT, DD, OL, UL, LI, FIELDSET, FORM, LABEL, LEGEND, TABLE, CAPTION, TBODY, TFOOT, THEAD, TR, TH, TD, ARTICLE, ASIDE, FIGURE, FOOTER, HEADER, HGROUP, MENU, MAIN, NAV, SECTION, TIME, MARK, AUDIO, VIDEO
{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

AUDIO, CANVAS, VIDEO
{
	display: inline-block;
	*display: inline;
	*zoom: 1;
}

/* AUDIO:not([controls]), [hidden]
{
	display: none;
} */


/*  Begin "reset/base" section after this comment ends. This section is generally for rules defined in default browser style sheets where there is some variance in the values that are set for them so that they can now have a consistent style applied to them across any browsers, platforms and devices that will use this stylesheet. The values here will generally come from well-known reset style sheets, such as Eric Meyer's, Yahoo's, HTML5 Boilerplate's, etc. They can be kept the same, removed, altered or moved as the developer sees fit. Examples shown here are only examples in this early version. */


@font-face
{
	font-family: 'TangaroaGlyphs';
	src: url('tangaroa_glyphs-webfont.eot');
	src: local('☺'), url('../tangaroa_glyphs-webfont.woff') format('woff'), url('../tangaroa_glyphs-webfont.ttf') format('truetype'), url('../tangaroa_glyphs-webfont.svg#webfontl0Uu3iO3') format('svg');
	font-weight: normal;
	font-style: normal;
	/* Site for this font is at: http://davidocchino.com/portfolio/typography/tangaroa-glyphs.html */
}

@font-face
{
	font-family: 'KonTikiKonaJF';
	src: url('../kontkj__-webfont.eot');
	src: local('☺'), url('../kontkj__-webfont.woff') format('woff'), url('../kontkj__-webfont.ttf') format('truetype'), url('../kontkj__-webfont.svg#webfontBdryq9rl') format('svg');
	font-weight: normal;
	font-style: normal;
}


 /* Apply a natural box layout model to all elements; http://paulirish.com/2012/box-sizing-border-box-ftw/ */
*
{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}


/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */
 

HTML
{
	font-size: 62.5%; /* Use rem's for font sizing; See http://csswizardry.com/2011/05/font-sizing-with-rem-could-be-avoided/ */
	-webkit-font-smoothing: antialiased;
	-webkit-overflow-scrolling: touch;
	-webkit-tap-highlight-color: rgb(52,158,219);
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	overflow-y: scroll;
}

/* prevent BG image flicker upon hover */
.lt-ie7 HTML
{
	filter: expression(document.execCommand("BackgroundImageCache", false, true));
}

HTML, BUTTON, INPUT, SELECT, TEXTAREA
{
	font-family: sans-serif;
	color: #222;
}

BODY
{
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: cover;
	/* color: rgb(40,40,40); 320 and Up preference */
	font-family: Helmet, Freesans, sans-serif; /* new Linux- and Windows-friendly sans-serif font stack: http://mky.be/fontstack */
	/* font-family: Cambria, Georgia, Times, "Times New Roman"; 320 and Up preference */
	font-size: 1.3rem;
	line-height: 1.4;
	margin: 0px auto;
	padding: 0;
	width: 100%;
	/* text-rendering: optimizeLegibility; Consider using the "text-rendering" property. See https://developer.mozilla.org/en/CSS/text-rendering for more information. */
	/* Also consider using the -moz-font-feature-settings (or otherwise prefixed or non-prefixed) property to handle alternates, ligatures, small caps, kerning, fractions, etc. See http://ie.microsoft.com/testdrive/Graphics/opentype/opentype-fontbureau/index.html for for more information. */
}

/* using local fonts? Make sure to read up on Paul Irish's Bulletproof @font-face syntax: http://mky.be/font-face/bulletproof/ */


/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
   
IMG, OBJECT, EMBED
{
	max-width: 100%;
	height: auto; /* Keep? */
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i and twitter.com/miketaylr/status/12228805301
 * These selection declarations have to be separate
 */
 

::-webkit-selection
{
	background: #666600;
	color: #fff;
	text-shadow: none;
}

::-moz-selection
{
	background: #666600;
	color: #fff;
	text-shadow: none;
}

::selection
{
	background: #666600;
	color: #fff;
	text-shadow: none;
}


/* =============================================================================
   Links
   ========================================================================== */
   
/* Remember that link pseudo-classes can also be combined, such as A:visited:hover (to define the state of an anchor element that has already been visited and is now being hovered over). */

A
{
	color: #00e;
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

/*	j.mp/webkit-tap-highlight-color */
A:link
{
	color: #CCCC00;
	text-decoration: none;
	-webkit-tap-highlight-color: #fcd700;
} 

A:visited
{
	color: #CCCC00;
	text-decoration: underline;
}

A:hover
{
	background-color: #CCCC00;
	color: #343434;
}

A:active
{
	background-color: #666600;
	color: #FFFFFF;
}

A:focus
{
	outline: thin dotted;
}

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */

A:hover, A:active
{
	outline: none; /* Accessible focus treatment people.opera.com/patrickl/experiments/keyboard/test */
}


/* =============================================================================
   Typography
   ========================================================================== */

ABBR[title], DFN[title]
{
	border-bottom: 1px dotted;
	cursor: help;
}

BLOCKQUOTE
{
	margin: 1em 40px;
}

DFN
{
	font-style: italic;
}

H2, ASIDE H3, SECTION H3, SECTION H4
{
	font-family: 'KonTikiKonaJF', sans-serif;
	margin: 0px 0px 8px;
}

H1
{ 
	display: none;
}

H2
{
	color: #CCCC00;
	line-height: 1.2;
	margin-bottom: .0em;
    position: relative;
	/* text-shadow: 0px 0px 6px brown; */
}

/* H2 SPAN
{
	background-image: url(../img/wood1-trans.png);
    position:absolute;
    display:block;
    top:0;
    left:0;
    height:100%;
    width:100%;
} */

H3
{ 
	color: #CCCC00;
	font-size: 2.1em;
	line-height: 1.3;
	margin-bottom: 1em;
}

H4
{ 
	color: #666600;
	font-size: 1.8em;
	line-height: 1.25;
	margin-bottom: 1.25em;
}

#shadowbox_content H4
{
	margin-bottom: .25em;
}

HEADER H3, HEADER H4
{
	color: #FFFFFF;
	font-weight: normal;
	margin-bottom: 2px;
}

HEADER H4
{
	font-style: italic;
}

HR
{
	.lt-ie8 display: block; 
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}

INS
{
	background: #ff9;
	color: #000;
	text-decoration: none;
}

MARK
{
	background: #ff0;
	color: #000;
	font-style: italic;
	font-weight: bold;
}

P
{
	/* http://www.w3.org/TR/css3-text/#hyphenation */
	-webkit-hyphens: auto;
	-webkit-hyphenate-character: "\2010";
	-webkit-hyphenate-limit-after: 1;
	-webkit-hyphenate-limit-before: 3;
	-moz-hyphens: auto;
	hyphens: auto; 
	text-align: justify;
}

P, OL, UL, DL, ADDRESS
{ 
	margin-bottom: 1.5em;
}

ADDRESS
{
	margin: 1em 0px;
}

SMALL
{
	font-size: 85%;
}

/* Position subscript and superscript content without affecting line-height: h5bp.com/k and gist.github.com/413930 */
SUB, SUP
{
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

SUP
{
	top: -0.5em;
}

SUB
{
	bottom: -0.25em;
}


/* =============================================================================
   Lists
   ========================================================================== */

UL, OL
{
	margin: 1em 0;
	padding: 0 0 0 40px;
}

/* DD, DL
{
	margin: 0 0 0 40px;
}

DT
{ 
	font-weight: normal;
}

NAV UL, NAV OL
{
	list-style: none;
	list-style-image: none;
	margin: 0;
	padding: 0;
} */

LI UL, 
LI OL
{ 
	margin: 0;
	font-size: 1em;
}

#social
{
	overflow: hidden;
	padding: 0px;
}

#social *
{
	width: 40px;
	height: 40px;
}

#social LI A
{
	display: inline-block;
}

#social LI
{
	float: left;
	list-style-type: none;
	margin-right: .6em;
	transition: all .15s ease-out;
}

#social LI A
{
	transition: all .15s ease-out;
}

#social LI A:hover
{
	transform: rotate(-7deg);
}

#social LI:nth-child(even) A:hover
{
	transform: rotate(7deg);
}

#social LI A:active
{
	transform: rotate(0deg);
	transform: scale(.7);
}

#technicalSkills LI, #workHistory LI
{
	line-height: 1em;
	list-style-type: none;
	list-style-image: url("../img/bullet.png");
	margin-bottom: 9px;
}

#technicalSkills LI SPAN, #workHistory LI SPAN
{
	position: relative;
	bottom: 1px;
}


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Improve image quality when scaled in IE7: h5bp.com/d
 * 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
 */

IMG
{
	border: 0;
	-ms-interpolation-mode: bicubic;
	vertical-align: middle;
	width: auto\9; /* ie8 */
}

FIGURE
{
	margin-bottom: 1.5em;
}

FIGURE IMG,
FIGURE OBJECT,
FIGURE EMBED
{
	margin-bottom: .75em;
	max-width: 100%;
}

FIGCAPTION
{
	display: block;
	font-weight: normal;
}


/* =============================================================================
   Tables. Tables still need cellspacing="0" in the markup (according to your preference)
   ========================================================================== */

CAPTION
{ 
	background-color: transparent;
}
   
TABLE
{
	border-collapse: collapse;
	border-spacing: 0;
	font-size: inherit;
	font: 100%;
	margin-bottom: 1.4em;
}

CAPTION, TH
{
	padding: 0px;
	/* padding: .25em 10px .25em 5px; 320 and Up Preference */
}

TD, TD IMG
{
	vertical-align: top;
}

TH
{
	vertical-align: bottom;
}


/* =============================================================================
   Chrome Frame Prompt
   ========================================================================== */

.chromeframe
{
	margin: 0.2em 0;
	background: #ccc;
	color: black;
	padding: 0.2em 0;
}


/*  Begin "website-specific styles" section after this comment ends. This is where anything goes depending on the needs of the project; generally for rules that need to be concocted, that haven't been addressed yet by the normalize and reset/base styles. If you are going to use media queries (and you probably should) then this section will mostly be for styles that will apply to any size layout, any browser, any device, etc. */

#meyer
{
	background-image: url(../img/tangaroaLeftBevel.png);
	background-position: 97% 93%;
	background-repeat: no-repeat;
	border-top: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
	position: absolute;
	left: -410px;
	top: 200px;
	background-color: black;
	padding: 1em 86px 0em 1em;
	height: auto;
	width: 500px;
	border-top-right-radius: 2em;
	border-bottom-right-radius: 2em;
	z-index: 1000;
	transition: left 1.4s;
}

#meyer:hover, #meyer.on
{
	left: 0px;
}

ASIDE BLOCKQUOTE
{
	margin: 0px;
}

ASIDE BLOCKQUOTE P
{
	text-align: left;
}

HEADER
{
	-moz-border-radius-topright: 2em;
	-webkit-border-top-right-radius: 2em;
	border-radius-topright: 2em;
	border-top-right-radius: 2em;
}

HEADER, SECTION
{
	background-color: #000000;
	margin: 1em auto;
	width: 98%;
	max-width: 637px;
	border: 1px solid #FFFFFF;
	margin-bottom: 1em;
	padding: 12px;
}

HEADER, SECTION, ASIDE BLOCKQUOTE
{
	color: #FFFFFF;
}

SECTION:first-of-type
{
	background-color: rgba(0, 0, 0, .9);
}

SECTION:nth-of-type(2)
{
	background-color: rgba(0, 0, 0, .8);
}

SECTION:nth-of-type(3)
{
	background-color: rgba(0, 0, 0, .7);
}

SECTION:last-of-type
{
	background-color: rgba(0, 0, 0, .6);
	-moz-border-radius-bottomleft: 2em;
	-webkit-border-bottom-left-radius: 2em;
	border-radius-bottomleft: 2em;
	border-bottom-left-radius: 2em;
}


/* Begin Shadowbox Styles */

#portfolio TABLE TD
{
	border: 2px groove #666600;
	padding: 3px;
}

.no-csstransforms ASIDE,
.csstransforms ASIDE,
#recently,
#extra, #beeladieshoney, #wps,
#duffy, #axcent, #mangosteen, #muller,
#signature, #viking, #gateway, #african,
#fong, #hobbit, #zen, #golftees, #maguire,
#tcc, #specificmedia, #lillydiabetes,
#acclaim, #ocmexfood, #mexfoodla, #usmexfood,
#brownkushner, #brianleatart, #tdsvaults, #corplocal
{
	display: none;
}

#shadowbox_content
{
	font-family: Georgia, serif;
	padding: 6px;
}

#shadowbox_content H4, #shadowbox_content P, #shadowbox_content UL
{
    color: #666600;
}

#shadowbox_content H5
{
    color: #CCCC00;
	font-size: 1.4em;
	margin-bottom: .4em;
}

#shadowbox_content P
{
	margin-top: 1em;
}

/* End Shadowbox Styles */


/*  End "website-specific styles." */




/* ==|== media queries ======================================================

	Remove or comment out media queries you are not using.

   ========================================================================== */
   
 /* iPhone portrait mode; This also hopefully properly targets the Blackberry browser

		Inherits styles from: Default Layout. */

@media only screen and (max-width: 479px)
{

	BODY
	{
		background-image: url(../img/dreamstime_477875mobile.jpg);
	}

	H2
	{
		font-size: 1.9em;
	}
	
	#portfolio TABLE TD IMG
	{
		width: 100px;
		height: 75px;
	}
	
	#portfolio TABLE TD + TD + TD + TD
	{
		display: none;
	}

}/*/mediaquery*/


/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome)
   consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
   
   Wide Mobile Layout; like landscape mode on iPhone and iPod touch; screen *seems to be* 491 pixels across

Inherits styles from: Default Layout, Mobile Layout. */

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

	BODY
	{
		background-image: url(../img/dreamstime_477875mobile.jpg);
	}

	H2
	{
		font-size: 3.2em;
	}
	
	#portfolio TABLE TD IMG
	{
		width: 112px;
		height: 83px;
	}
	
	#portfolio TABLE TD + TD + TD + TD
	{
		display: table-cell;
	}

}/*/mediaquery*/


/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 569px)
{

}/*/mediaquery*/


@media screen and (max-device-width: 480px)
{

}/*/mediaquery*/


@media all and (orientation: portrait)
{
	
}/*/mediaquery*/


@media all and (orientation: landscape)
{
	
}/*/mediaquery*/

/*		Tablet Layout: 768px.

		Inherits styles from: Default Layout. 

These and other media queries like it used here come from http://lessframework.com/; these might need a lot of work; as of May 16, 2011, this media query seems to be properly targeting iPad portrait */

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

	BODY
	{
		background-image: url(../img/dreamstime_477875.jpg);
	}
	
}/*/mediaquery*/

/*All Firefox*/
@-moz-document url-prefix()
{
}


/* Styles for desktop and large screen ----------- */

/*styles for 800px and up!*/
@media only screen and (min-width: 800px) {
  /* Styles */

	.csstransforms ASIDE
	{
		display: block;
	}

}/*/mediaquery*/


@media only screen and (min-width: 992px)
{
  /* Style adjustments for landscape mode and browsers with widths equal to or greater than iPad landscape mode goes here; as of May 17, 2011, this media query seems to be properly targeting iPad landscape */

}/*/mediaquery*/


/* iPhone 4, Opera Mobile 11 and other high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  /* Styles */
}/*/mediaquery*/


/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print
{

	*
	{
		background: transparent !important;
		color: black !important;
		box-shadow: none !important;
		text-shadow: none !important;
		filter:none !important;
		-ms-filter: none !important;
	} /* Black prints faster: h5bp.com/s */
	
	A, A:visited
	{
		text-decoration: underline;
	}
	
	A[href]:after
	{
		content: " (" attr(href) ")";
	}
	
	ABBR[title]:after
	{
		content: " (" attr(title) ")";
	}
	
	.ir A:after, A[href^="javascript:"]:after, A[href^="#"]:after,
	TD A[href]:after
	{
		content: "";
	}  /* Don't show links for images, or javascript/internal links */
	
	PRE, BLOCKQUOTE
	{
		border: 1px solid #999;
	}
	
	THEAD
	{
		display: table-header-group;
	} /* h5bp.com/t */
	
	BLOCKQUOTE, IMG, PRE, TR
	{
		page-break-inside: avoid;
	}
	
	IMG
	{
		max-width: 100% !important;
	}
	
	@page
	{
		margin: 0.5cm;
	}
	
	P, H2, H3
	{
		orphans: 3; widows: 3;
	}
	
	H2, H3
	{
		page-break-after: avoid;
	}
	
}

}/*/mediaquery*/