/********************************************
	Tag Resets
********************************************/
article, aside, blockquote, body, dd, div, dl, dt, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, label, legend, li, menu, nav, ol, p, pre, section, td, th, ul { margin: 0; padding: 0; border: 0; }

/********************************************
	Normalize CSS
	http://necolas.github.com/normalize.css/
********************************************/
html { height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { min-height: 100%; font-size: 100%; }

article, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, main, nav, section, video { display: block; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

b, strong { font-weight: bold; }

button, input, select, textarea { margin: 0; font-size: 100%; line-height: normal; vertical-align: baseline; }

button, html input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }

input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }

textarea { overflow: auto; }

table { border-collapse: collapse; border-spacing: 0; }

@font-face { font-family: 'Quattrocento Regular'; src: url("/National_Library/oe_/http://patrickhaney.com/fonts/quattrocento-regular-webfont.eot"); src: url("/National_Library/oe_/http://patrickhaney.com/fonts/quattrocento-regular-webfont.eot#iefix") format("embedded-opentype"), url("/National_Library/oe_/http://patrickhaney.com/fonts/quattrocento-regular-webfont.woff") format("woff"), url("/National_Library/oe_/http://patrickhaney.com/fonts/quattrocento-regular-webfont.ttf") format("truetype"), url("/National_Library/oe_/http://patrickhaney.com/fonts/quattrocento-regular-webfont.svg#QuattrocentoRegular") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Terminal Dosis Extra Light'; src: url("/National_Library/oe_/http://patrickhaney.com/fonts/terminal_dosis-extralight-webfont.eot"); src: url("/National_Library/oe_/http://patrickhaney.com/fonts/terminal_dosis-extralight-webfont.eot#iefix") format("embedded-opentype"), url("/National_Library/oe_/http://patrickhaney.com/fonts/terminal_dosis-extralight-webfont.woff") format("woff"), url("/National_Library/oe_/http://patrickhaney.com/fonts/terminal_dosis-extralight-webfont.ttf") format("truetype"), url("/National_Library/oe_/http://patrickhaney.com/fonts/terminal_dosis-extralight-webfont.svg#TerminalDosisExtraLight") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Terminal Dosis Book'; src: url("/National_Library/oe_/http://patrickhaney.com/fonts/terminal_dosis-book-webfont.eot"); src: url("/National_Library/oe_/http://patrickhaney.com/fonts/terminal_dosis-book-webfont.eot#iefix") format("embedded-opentype"), url("/National_Library/oe_/http://patrickhaney.com/fonts/terminal_dosis-book-webfont.woff") format("woff"), url("/National_Library/oe_/http://patrickhaney.com/fonts/terminal_dosis-book-webfont.ttf") format("truetype"), url("/National_Library/oe_/http://patrickhaney.com/fonts/terminal_dosis-book-webfont.svg#TerminalDosisBook") format("svg"); font-weight: normal; font-style: normal; }
html { height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { background: url("/National_Library/oe_/http://patrickhaney.com/images/wood-white-bg.png") repeat; border-top: 4px solid #666; font-family: "Quattrocento Regular", Cambria, Georgia, serif; color: #444; }

img { border: 0; -ms-interpolation-mode: bicubic; }

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

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

a, a:visited, a:active { color: #666; }

a:hover { color: #305083; }

h1, h2, h3 { color: #000; font-family: 'Terminal Dosis Extra Light', 'Lucida Grande', 'Trebuchet MS', Arial, sans-serif; font-weight: normal; }

h4, h5, h6 { font-family: 'Quattrocento Regular', Cambria, Georgia, serif; font-weight: bold; }

/* ****************************************** Float Clearing
****************************************** */
.group:after { content: " "; display: block; height: 0; visibility: hidden; clear: both; }

/******************************************** Fixes for IE6-8 http://jonikorpi.com/leaving-old-IE-behind/
********************************************/
.ie body { width: 40em; margin: 0 auto; font-size: 1.0625em; }

.ie h1 { font-size: 2.625em; /* 42px */ line-height: 1.1428571428571428em; /* 48px */ padding: 1.1428571428571428em 0 0.5714285714285714em; }

/* ****************************************** Elastic Gutters
****************************************** */
.wrapper { padding: 0 0.75em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/* ****************************************** Elastic Gutters for IE6-7 http://github.com/Schepp/box-sizing-polyfill
****************************************** */
.ie .wrapper { /* IE8 doesn't need this, so we use the * hack */ *behavior: url("/National_Library/oe_/http://patrickhaney.com/ie/boxsizing.htc"); }

/******************************************** Fluid Media
********************************************/
figure { position: relative; }

figure img, figure object, figure embed, figure video { max-width: 100%; display: block; }

img { border: 0; -ms-interpolation-mode: bicubic; }

/******************************************** Zoomable Baseline Grid
********************************************/
body { font-size: 1em; /* 16px */ line-height: 1.5em; /* 24px */ }

.small, h5, h6 { font-size: 0.8125em; /* 13px */ line-height: 1.3846153846153846em; /* 18px */ }

.normal, h4 { font-size: 1em; /* 16px */ line-height: 1.5em; /* 24px */ }

.big, h3 { font-size: 1.375em; /* 22px */ line-height: 1.75em; /* 28px */ }

.large, h2 { font-size: 1.625em; /* 26px */ line-height: 1.23076923076923em; /* 32px */ }

.huge, h1 { font-size: 2.625em; /* 42px */ line-height: 1.1428571428571428em; /* 48px */ }

/******************************************** Four Column Grid
********************************************/
.container { /* margin: 0 5.555555555555555%; */ padding: 1em 2.555555555555555%; /* Less wasteful at phone widths */ }

h1, h2 { /* margin: 0.9230769230769231em 0 1.3846153846153846em; */ margin: 0; /* Switch to padding to handle backgrounds for containers */ padding: 0; }

h3, h4 { margin: 0; }

/******************************************** Primary Navigation
********************************************/
nav #nav-home img { border-radius: 100px; height: 200px; width: 200px; }
@media screen and (max-width: 600px) { nav #nav-home img { border-radius: 75px; height: 150px; width: 150px; } }

nav #nav-home:hover { background-image: none; }

img.icon-hover { position: absolute; left: 0; opacity: 0; transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; z-index: 100; }

main section.container, header.container, footer.container { /* Max width for current implementation */ max-width: 980px; }

/******************************************** Bio Headline
********************************************/
#bio { color: #000; margin: .5em 0 1em; /* Counteract the padding/background images for links */ padding-right: 2.2em; text-shadow: 2px 2px 1px #DDD; }
#bio h1, #bio p { display: inline; font-family: 'Terminal Dosis Extra Light', 'Lucida Grande', 'Trebuchet MS', Arial, sans-serif; font-size: 2.25em; font-weight: 200; line-height: 1.3em; margin: 0; padding: 0; }
@media screen and (max-width: 600px) { #bio h1, #bio p { font-size: 1.75em; } }
#bio .bio-link { position: relative; display: inline; }
#bio .bio-link svg { display: inline-block; height: 1em; padding-bottom: .1em; pointer-events: none; width: auto; vertical-align: bottom; }
#bio .bio-link svg path, #bio .bio-link svg polygon, #bio .bio-link svg rect, #bio .bio-link svg circle { fill: #666; }
#bio .bio-link#bio-partners:hover { color: #EF7622; }
#bio .bio-link#bio-partners:hover path, #bio .bio-link#bio-partners:hover polygon, #bio .bio-link#bio-partners:hover rect, #bio .bio-link#bio-partners:hover circle { fill: #EF7622; }
#bio .bio-link#bio-hanerino:hover { color: #8EBD3F; }
#bio .bio-link#bio-hanerino:hover path, #bio .bio-link#bio-hanerino:hover polygon, #bio .bio-link#bio-hanerino:hover rect, #bio .bio-link#bio-hanerino:hover circle { fill: #8EBD3F; }
#bio .bio-link#bio-cda:hover { color: #1946BA; }
#bio .bio-link#bio-cda:hover path, #bio .bio-link#bio-cda:hover polygon, #bio .bio-link#bio-cda:hover rect, #bio .bio-link#bio-cda:hover circle { fill: #1946BA; }
#bio .bio-link#bio-midmodernized:hover { color: #c5996e; }
#bio .bio-link#bio-midmodernized:hover path, #bio .bio-link#bio-midmodernized:hover polygon, #bio .bio-link#bio-midmodernized:hover rect, #bio .bio-link#bio-midmodernized:hover circle { fill: #c5996e; }

#bio a { text-decoration: none; }

/******************************************** Main Body Copy
********************************************/
main p { font-size: 1.125em; margin-top: .5em; }

/******************************************** Elsewhere Social Links
********************************************/
#elsewhere ul, #elsewhere li { margin: 0; list-style: none; list-style-image: none; }

#elsewhere ul { margin: .5em 0; }

#elsewhere li { display: inline-block; font-family: 'Terminal Dosis Book', 'Lucida Grande', 'Trebuchet MS', Arial, sans-serif; font-size: 1.125em; line-height: 1.1em; margin: .5em 1.5em 1em 0; }
@media screen and (max-width: 600px) { #elsewhere li { display: block; } }

#elsewhere li.last { margin-right: 0; }

#elsewhere li a { display: block; text-decoration: none; }

#elsewhere li a svg { float: left; height: 36px; margin-right: .35em; width: auto; }

#elsewhere li a h3 { float: left; font-size: 1em; line-height: 1em; }

#elsewhere li a em { display: block; font-family: 'Quattrocento Regular', Cambria, Georgia, serif; font-size: .8em; font-style: normal; }

/*
#elsewhere li { float: left; font-family: 'Terminal Dosis Book', 'Lucida Grande', 'Trebuchet MS', Arial, sans-serif; font-size: 1.125em; line-height: 1.1em; margin: .5em 1.5em 1em 0;
 @include media-query($on-palm) { float: none; }
}

#elsewhere li.last { margin-right: 0;
}

#elsewhere li a { display: block; min-height: 36px; padding-left: 42px; position: relative; text-decoration: none;
}

#elsewhere li a span { display: block; font-family: 'Quattrocento Regular', Cambria, Georgia, serif; font-size: .8em;
}

#elsewhere li#link-twitter a,
#elsewhere li#link-dribbble a,
#elsewhere li#link-flickr a,
#elsewhere li#link-amazon a { background: url("/National_Library/oe_/http://patrickhaney.com/images/icon-twitter-lines.png") no-repeat; transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out;
}

#elsewhere li#link-dribbble a { background-image: url("/National_Library/oe_/http://patrickhaney.com/images/icon-dribbble-lines.png");
}

#elsewhere li#link-flickr a { background-image: url("/National_Library/oe_/http://patrickhaney.com/images/icon-flickr-lines.png");
}

#elsewhere li#link-amazon a { background-image: url("/National_Library/oe_/http://patrickhaney.com/images/icon-amazon-lines.png");
}

#elsewhere li#link-twitter a:hover,
#elsewhere li#link-dribbble a:hover,
#elsewhere li#link-flickr a:hover,
#elsewhere li#link-amazon a:hover { background: none;
}

#elsewhere li#link-twitter a:hover { color: #33CCFF;
}

#elsewhere li#link-dribbble a:hover { color: #C5376D;
}

#elsewhere li#link-flickr a:hover { color: #0062DC;
}

#elsewhere li#link-amazon a:hover {
	color: #F69404;
}

#elsewhere li#link-twitter a:hover img.icon-hover,
#elsewhere li#link-dribbble a:hover img.icon-hover,
#elsewhere li#link-flickr a:hover img.icon-hover,
#elsewhere li#link-amazon a:hover img.icon-hover { opacity: 1;
}
*/
/******************************************** Dribbble Previews
********************************************/
#dribbble { position: relative; z-index: 1; overflow: hidden; }

#dribbble .preview { float: left; margin: 10px 25px 25px 6px; position: relative; background: #fff; width: auto; -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3); transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; }
#dribbble .preview:before, #dribbble .preview:after { background: #fff; content: ''; z-index: -1; position: absolute; left: 10px; bottom: 14px; width: 100px; height: 50px; -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); -webkit-transform: skew(-15deg) rotate(-10deg); -moz-transform: skew(-15deg) rotate(-10deg); -ms-transform: skew(-15deg) rotate(-10deg); -o-transform: skew(-15deg) rotate(-10deg); transform: skew(-15deg) rotate(-10deg); transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; }
#dribbble .preview:after { left: auto; right: 10px; -webkit-transform: skew(15deg) rotate(10deg); -moz-transform: skew(15deg) rotate(10deg); -ms-transform: skew(15deg) rotate(10deg); -o-transform: skew(15deg) rotate(10deg); transform: skew(15deg) rotate(10deg); }
#dribbble .preview:hover { -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); }
#dribbble .preview:hover:before, #dribbble .preview:hover:after { -webkit-transform: skew(0deg) rotate(0deg); -moz-transform: skew(0deg) rotate(0deg); -ms-transform: skew(0deg) rotate(0deg); -o-transform: skew(0deg) rotate(0deg); transform: skew(0deg) rotate(0deg); }
@media screen and (max-width: 600px) { #dribbble .preview { float: none; margin: 10px 6px 25px; } }

#dribbble .preview.last { margin-right: 0; }

#dribbble .preview a { text-decoration: none; }

#dribbble .preview p { line-height: 100%; margin: 0; padding: 0 10px 10px; }

#dribbble .preview img { height: 150px; width: 200px; }
@media screen and (max-width: 600px) { #dribbble .preview img { height: auto; width: 100%; } }

#dribbble .preview h4 { background: #fff; font-size: .8em; font-weight: normal; line-height: 33px; margin: 0; padding: 0 8px; text-shadow: 0px 1px 0px white; }

/******************************************** Footer
********************************************/
#page-footer { margin: 1em 0; }

#page-footer svg { float: left; height: 36px; margin-right: .75em; width: auto; }

#page-footer p { color: #888; font-size: .875em; line-height: 1.3em; position: relative; transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; }

#page-footer p:hover { color: #000; }