/*

File Name: initialize.css
Description: 
Version: 0.6 August 24, 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, 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, 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. */


 /* 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;
	-o-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-image: url(../images/dreamstime_2170309.JPG);
	background-repeat: no-repeat;
	background-size: cover;
	/* color: rgb(40,40,40); 320 and Up preference */
	margin: 0 auto;
	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;
	padding: 0;
	/* 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
 * Also: hot pink! (or customize the background color to match your design)
 */
 

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

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

::selection
{
	background: #fe57a1;
	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
{
	-webkit-tap-highlight-color: #fcd700;
}

HEADER A
{
	color: ButtonFace;
	text-decoration: none;
}

P A:link
{
	background-color: #005687;
	color: #FFFFFF;
}

P A:visited
{
	background-color: #005687;
	color: #FFFFFF;
}

P A:hover, .hover
{
	background-color: #005687;
	color: #000000;
}

P A:active
{
	background-color: #005687;
	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;
}

H1
{ 
	margin-bottom: .75em;
	font-size: 3em; /* 48 / 16 = 3 */
	line-height: 1.2;
	
	color: #33CC33;
	font-size: 3.2em;
	font-weight: normal;
	margin: 0px 0px 11px;
    position: relative;
}

H1 SPAN
{
	color: #005687;
}

H2
{
	color: #FF9933;
	font-size: 1.8em;
	margin: .4em 0px;
}

H2
{ 
	margin-bottom: .4em;
	font-size: 2em; /* 36 / 16 = 2 */
	line-height: 1.2;
}

H3
{ 
	margin-bottom: 1em;
	font-size: 1.5em; /* 24 / 16 = 1.5 */
	line-height: 1.3;
}

H4
{ 
	margin-bottom: 1.25em;
	font-size: 1.25em; /* 20 / 16 = 1.25 */
	line-height: 1.25;
}

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

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;

	font-size: 1.3em;
	line-height: 1.36em;
}

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

BLOCKQUOTE, Q
{
	quotes: none;
}

BLOCKQUOTE:before, 
BLOCKQUOTE:after,
Q:before, Q:after
{
	content: "";
	content: none;
}

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

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

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


/* =============================================================================
   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;
}





/* =============================================================================
   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. */

HEADER
{
	background-color: rgba(0, 0, 0, 0.5);
	border: 1px solid #FFFFFF;
	margin: 1em auto;
	overflow: auto;
	padding: 12px;
	color: #FFFFFF;
}

HEADER UL
{
	margin: 0px;
	heXight: 25px;
	padding: 0px;
	vertical-align: middle;
}

HEADER UL LI
{ 
	list-style: none;
	font-size: 1.3em;
	line-height: 25px;
	margin-right: .6em;
}

HEADER UL LI SPAN
{
	position: relative;
}

HEADER UL LI SPAN:hover
{
	color: #FFFFFF;
	cursor: pointer;
	background-color: #005687;
}

IMG[src="images/flower-trans.png"]
{
	margin-right: .6em;
}

#body
{
	border: 0px solid rgb(50, 109, 167);
	overflow: auto;
	margin: 1em auto;
	position: relative;
	min-height: 440px;
}


/* Begin Styles for Initially Hidden Sections */

#resume, #foodBlogs, #animation, #photos, #recipes
{
	background-color: rgba(0, 0, 0, 0.8);
	border: 1px solid #FFFFFF;
	display: none;
	padding: 8px;
	color: #FFFFFF;
	/* position: absolute;
	left: 35px;
	bottom: 60px;
	max-width: 300px;
	max-height: 300px; */
	min-width: 200px;
	min-height: 100px;
	overflow: auto;
}

/* #photos
{
	min-width: 480px;
	min-height: 400px;
	padding-bottom: 1em;
} */






/* ==|== 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)
{

	HEADER, #body
	{
		max-width: 94%;
	}

}/*/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)
{

	HEADER, #body
	{
		max-width: 94%;
	}

	HEADER UL LI
	{ 
		float: left;
	}

	HEADER UL LI SPAN
	{
		top: 2px;
	}
	
}/*/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)
{

	HEADER, #body
	{
		max-width: 800px;
	}

	HEADER UL LI SPAN
	{
		top: 6px;
	}
	
}/*/mediaquery*/


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




/*  The following are various media queries targeting various browsers. They may or may not be needed. */

/*ie 6*/
* html .selector
{
}

/*ie 7 */
*+html . selector
{
}

/*ie 8*/
@media \0screen
{
}/*/mediaquery*/

/*ie 9*/
:root . selector
{
}

/*Ie 7 and less */
. selector
{
}

/*All ie */
.selector
{
}

/* The following is supposed to target only Webkit browsers (and it seems to work): */

@media screen and (-webkit-min-device-pixel-ratio:0)
{

}/*/mediaquery*/


/* The following is supposed to target only Chrome browsers http://www.republicof3.com/a-few-cross-browser-css-hacks-every-developer-should-know/?goback=.gde_2071438_member_107474833: */

body:nth-of-type(1) .selector
{
}


/* The following is supposed to target only Mozilla browsers http://www.pixelastic.com/blog/68:firefox-only-css-rules and http://www.republicof3.com/a-few-cross-browser-css-hacks-every-developer-should-know/?goback=.gde_2071438_member_107474833: */

/*Firefox 2.0 */
html>/**/body .selector, x:-moz-any-link
{
}

/*Firefox 3.0 */
html>/**/body .selector, x:-moz-any-link, x:default
{
}

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


/* The following is supposed to target only Opera browsers http://www.republicof3.com/a-few-cross-browser-css-hacks-every-developer-should-know/?goback=.gde_2071438_member_107474833: */

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
}/*/mediaquery*/


/* Targets Opera browsers, possibly 9.5 and above: http://preview.tinyurl.com/874x89m*/
*:-o-prefocus
{
}


/* 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*/





/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir
{
	display: block;
	border: 0;
	text-indent: -999em;
	overflow: hidden;
	background-color: transparent;
	background-repeat: no-repeat;
	text-align: left;
	direction: ltr;
	*line-height: 0;
}
.ir BR
{
	display: none;
}

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden
{
	display: none !important;
	visibility: hidden;
}

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden
{
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus
{
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}

/* Hide visually and from screenreaders, but maintain layout */
.invisible
{
	visibility: hidden;
}


/* let's clear some floats */
.clearfix:before, .clearfix:after {    }  
 

/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after
{
	content: "\0020";
	display: table; /* Boilerplate Preference */
	/* display: block; HTML5 Reset and 320 and Up Preference */
	height: 0;
	overflow: hidden;
}

.clearfix:after
{
	clear: both;
}

.clearfix
{
	zoom: 1;
	*zoom: 1;
}



/* ==|== 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
	{
		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*/