/* HTML5 Boilerplate  What follows is the result of much research on cross-browser styling. Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, Kroc Camen, and the H5BP dev community and team. */
/* ============================================================================= HTML5 element display ========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }

audio[controls], canvas, video { display: inline-block; *display: inline; *zoom: 1; }

/* ============================================================================= Base ========================================================================== */
/* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 2. Force vertical scrollbar in non-IE 3. Remove Android and iOS tap highlight color to prevent entire container being highlighted www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/ 4. Prevent iOS text size adjust on device orientation change, without disabling user zoom www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
html { font-size: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; font-size: 13px; line-height: 1.231; }

body, button, input, select, textarea { font-family: sans-serif; color: #222; }

/*  These selection declarations have to be separate No text-shadow: twitter.com/miketaylr/status/12228805301 Also: hot pink! */
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }

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

/* ============================================================================= Links ========================================================================== */
a { color: #00e; }

a:visited { color: #551a8b; }

a:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: 0; }

/* ============================================================================= Typography ========================================================================== */
abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

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

/* Redeclare monospace font family: en.wikipedia.org/wiki/User:Davidgothberg/Test59 */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }

q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: 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 { margin: 0 0 0 40px; }

nav ul, nav ol { list-style: none; margin: 0; padding: 0; }

/* ============================================================================= Embedded content ========================================================================== */
/* Improve image quality when scaled in IE7 code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
img { border: 0; -ms-interpolation-mode: bicubic; }

/* Correct overflow displayed oddly in IE9  */
svg:not(:root) { overflow: hidden; }

/* ============================================================================= Figures ========================================================================== */
figure { margin: 0; }

/* ============================================================================= Forms ========================================================================== */
form { margin: 0; }

fieldset { border: 0; margin: 0; padding: 0; }

/*  1. Correct color not inheriting in IE6/7/8/9  2. Correct alignment displayed oddly in IE6/7  */
legend { border: 0; *margin-left: -7px; padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }

/* 1. Correct font-size not inheriting in all browsers 2. Remove margins in FF3/4 S5 Chrome 3. Define consistent vertical alignment display in all browsers */
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

/* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet) 2. Correct inner spacing displayed oddly in IE6/7 */
button, input { line-height: normal; *overflow: visible; }

/* 1. Display hand cursor for clickable form elements 2. Allow styling of clickable form elements in iOS */
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }

/* Consistent box sizing and appearance */
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }

input[type="search"] { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }

/*  Remove inner padding and border in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/  */
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/* Remove default vertical scrollbar in IE6/7/8/9 */
textarea { overflow: auto; vertical-align: top; }

/* Colors for form validity */
input:invalid, textarea:invalid { background-color: #f0dddd; }

/* ============================================================================= Tables ========================================================================== */
table { border-collapse: collapse; border-spacing: 0; }

/* ============================================================================= Generic Utility Mixins ========================================================================== */
/* For image replacement */
/* Hide for both screenreaders and browsers: css-discuss.incutio.com/wiki/Screenreader_Visibility */
/* Hide only visually, but have it available for screenreaders: by Jon Neal. www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
/* Hide visually and from screenreaders, but maintain layout */
/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */
/* ============================================================================= Primary styles Author: Matt Senior <http://mattsenior.com> ========================================================================== */
html { background: #f3f3f3 url(../img/bg-notes.png) center top repeat; }

body { font-family: Nobile, Arial, Helvetica, sans-serif; font-family: Arimo, "Helvetica Neue", Arial, Helvetica, sans-serif; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; font-size: 15px; line-height: 1.6; color: #222222; }

::-moz-selection { background: #ed4e53; }

::selection { background: #ed4e53; }

a:link, a:visited, a:hover, a:active { font-weight: bold; }

a:link, a:visited { color: #bd2d31; text-decoration: none; }

a:hover, a:active { color: #6b191c; text-decoration: underline; }

em { font-style: italic; }

strong { font-weight: bold; }

h1, h2 { font-size: 36px; line-height: 1.3; color: #333; text-rendering: optimizeLegibility; margin: 1em 0 0.1em; }

h2 { font-family: "Maven Pro", "Helvetica Neue", Arial, Helvetica, sans-serif; font-weight: 700; letter-spacing: -0.06em; font-size: 23px; font-weight: 900; }

p, figure, table { margin: 0.2em 0 1em; }

p.meta { font-size: 14px; font-family: "Maven Pro", "Helvetica Neue", Arial, Helvetica, sans-serif; font-weight: 700; letter-spacing: -0.06em; font-weight: 400; color: #6f6f6f; line-height: 1.3; margin: 0.2em 0 1.2em; }
p.meta + p.meta { margin-top: -0.8em; }

iframe { margin: 0 0 0.6em; }

figure img { display: block; max-width: 100%; }

table { border-collapse: collapse; width: 100%; }
table th, table td { padding: 0.4em 0.6em 0.3em 0; }
table th { text-align: left; }
table td { border-top: 1px solid #eee; font-size: 14px; }

form { margin: 1em 0; }
form legend { font-weight: bold; padding: 20px 0; }
form div { zoom: 1; margin: 14px 0; }
form div:before, form div:after { content: ""; display: table; }
form div:after { clear: both; }
form label { float: left; width: 100px; margin: 0px 10px 0 0; }
form input, form textarea, form button, form select { float: left; margin-right: 10px; width: 180px; }
form textarea { height: 200px; }
form .error { color: #bc5e5d; }
form span.error { font-size: 14px; }
form span { display: block; float: left; margin-top: 3px; margin-right: 10px; }

#container { margin: 0 auto; max-width: 1000px; zoom: 1; background: #fafafa; border: 1px solid #eee; border-left-width: 0; border-right-width: 0; border-top: 4px solid #cf3439; border-bottom: 4px solid #cf3439; padding: 0; -webkit-box-shadow: inset 0 0 10px white; -moz-box-shadow: inset 0 0 10px white; -o-box-shadow: inset 0 0 10px white; box-shadow: inset 0 0 10px white; }
#container:before, #container:after { content: ""; display: table; }
#container:after { clear: both; }
.rgba #container { background: rgba(255, 255, 255, 0.7); }

[role='banner'] { zoom: 1; }
[role='banner']:before, [role='banner']:after { content: ""; display: table; }
[role='banner']:after { clear: both; }
[role='banner'] a:hover, [role='banner'] a:active { text-decoration: none; }
[role='banner'] hgroup { font-size: 42px; padding: 20px; border-bottom: 1px solid #eee; display: block; }
[role='banner'] hgroup h1, [role='banner'] hgroup h2 { font-family: "Maven Pro", "Helvetica Neue", Arial, Helvetica, sans-serif; font-weight: 700; letter-spacing: -0.06em; text-transform: uppercase; font-size: 42px; line-height: 0.8; margin: 0; }
[role='banner'] hgroup h1 { font-weight: 900; }
[role='banner'] hgroup h1 .family-name, [role='banner'] hgroup h1 .given-name { display: block; }
[role='banner'] hgroup h1 .family-name .char3 { margin-left: -0.04em; }
.no-fontface [role='banner'] hgroup h1 { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; background: transparent url("../img/header-name.png") top left no-repeat; position: relative; top: -2px; width: 200px; height: 93px; }
.no-fontface [role='banner'] hgroup h1 br { display: none; }
.ie6.no-fontface [role='banner'] hgroup h1 { background-position: left -93px; }
[role='banner'] hgroup h2 { font-weight: 400; clear: both; }
.no-fontface [role='banner'] hgroup h2 { display: none; }

[role='navigation'] { clear: both; border: 1px solid #eee; border-width: 1px 0 0; padding: 20px; background: rgba(245, 245, 245, 0.4); }
[role='banner'] [role='navigation'] { border-width: 0 0 1px; }
[role='navigation'] ul li { display: inline; }
[role='navigation'] ul li a { display: inline-block; color: #222222; font-family: "Maven Pro", "Helvetica Neue", Arial, Helvetica, sans-serif; font-weight: 700; letter-spacing: -0.06em; text-transform: uppercase; font-weight: 700; font-size: 16px; margin: 0; padding: 0.4em 1.2em 0.4em 0; line-height: 1.2; }
[role='navigation'] ul li.active a { color: #bd2d31; }

section.attention { background: #6b191c url(../img/cd-covers.jpg) center -6px repeat; color: white; font-size: 14px; padding: 10px 20px 14px; margin: 20px 0 -20px; text-shadow: 0 1px 3px #180606; }
.rgba section.attention { border: 1px solid rgba(24, 6, 6, 0.2); border-width: 6px 0; }
section.attention blockquote { margin: 0; text-align: center; -webkit-font-smoothing: antialiased; }
section.attention blockquote > p { font-family: "Maven Pro", "Helvetica Neue", Arial, Helvetica, sans-serif; font-weight: 700; letter-spacing: -0.06em; font-size: 28px; line-height: 1.3; font-weight: 700; margin-bottom: 0.2em; }
section.attention blockquote footer p { margin-bottom: 0; }

[role='complementary'] { padding: 20px; border-bottom: 1px solid #eee; }
.page-home [role='complementary'], .page-contact [role='complementary'], .page-404 [role='complementary'] { display: none; }
[role='complementary'] nav { line-height: 1.2; }
[role='complementary'] nav li { margin: 10px 0; }

[role='main'] { position: relative; }
[role='main'] > h1 { font-family: "Maven Pro", "Helvetica Neue", Arial, Helvetica, sans-serif; font-weight: 700; letter-spacing: -0.06em; font-size: 42px; line-height: 1.0; font-weight: 700; text-transform: none; letter-spacing: -0.05em; padding: 0; position: relative; left: -0.07em; }
[role='main'] time[pubdate] { display: block; margin-top: -1.4em; font-size: 14px; font-family: "Maven Pro", "Helvetica Neue", Arial, Helvetica, sans-serif; font-weight: 700; letter-spacing: -0.06em; font-weight: 400; color: #6f6f6f; }

[role='main'], section.biography { padding: 20px; }
[role='main'] figure.large, section.biography figure.large { margin-right: 0; }
[role='main'] figure.small, section.biography figure.small { width: 30%; float: right; margin: 0 0 1em 1.2em; }
[role='main'] figure img, section.biography figure img { width: 100%; }

[role='contentinfo'] { clear: both; zoom: 1; border-top: 1px solid #eee; padding: 10px 3.59%; }
[role='contentinfo']:before, [role='contentinfo']:after { content: ""; display: table; }
[role='contentinfo']:after { clear: both; }
[role='contentinfo'] h3 { margin-bottom: 0; }
[role='contentinfo'] .links { list-style: none; padding: 0; margin-top: 0; }
[role='contentinfo'] .links li { display: inline; }
[role='contentinfo'] .links li:after { content: ' • '; margin: 0 0.6em; color: #ddd; }
[role='contentinfo'] .links li:last-child:after { content: ''; margin: 0; }

article.news, article.selected-composition, article.related-composition, article.selected-recording, article.related-recording, article.selected-performance, article.related-performance { zoom: 1; border-top: 1px solid #eee; padding-top: 1.3em; padding-bottom: 0.4em; }
article.news:before, article.news:after, article.selected-composition:before, article.selected-composition:after, article.related-composition:before, article.related-composition:after, article.selected-recording:before, article.selected-recording:after, article.related-recording:before, article.related-recording:after, article.selected-performance:before, article.selected-performance:after, article.related-performance:before, article.related-performance:after { content: ""; display: table; }
article.news:after, article.selected-composition:after, article.related-composition:after, article.selected-recording:after, article.related-recording:after, article.selected-performance:after, article.related-performance:after { clear: both; }
article.news:first-of-type, article.selected-composition:first-of-type, article.related-composition:first-of-type, article.selected-recording:first-of-type, article.related-recording:first-of-type, article.selected-performance:first-of-type, article.related-performance:first-of-type { border-top: 0; }
article.news h1, article.selected-composition h1, article.related-composition h1, article.selected-recording h1, article.related-recording h1, article.selected-performance h1, article.related-performance h1 { font-family: "Maven Pro", "Helvetica Neue", Arial, Helvetica, sans-serif; font-weight: 700; letter-spacing: -0.06em; font-size: 23px; font-weight: 900; position: relative; margin: 0; left: -0.07em; }
article.news header p, article.selected-composition header p, article.related-composition header p, article.selected-recording header p, article.related-recording header p, article.selected-performance header p, article.related-performance header p { font-size: 14px; font-family: "Maven Pro", "Helvetica Neue", Arial, Helvetica, sans-serif; font-weight: 700; letter-spacing: -0.06em; font-weight: 400; color: #6f6f6f; margin: 0; }
article.news header p time[pubdate], article.selected-composition header p time[pubdate], article.related-composition header p time[pubdate], article.selected-recording header p time[pubdate], article.related-recording header p time[pubdate], article.selected-performance header p time[pubdate], article.related-performance header p time[pubdate] { margin-top: 0; }

article.related-composition h1, article.related-recording h1, article.related-performance h1 { font-family: Nobile, Arial, Helvetica, sans-serif; font-family: Arimo, "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; }

.selected-articles, .selected-research-seminars-and-conference-papers { list-style: disc; padding-left: 1.2em; }
.selected-articles li, .selected-research-seminars-and-conference-papers li { margin: 10px 0; }

section.bio { display: none; clear: both; zoom: 1; border-top: 1px solid #eee; padding: 20px; background: rgba(245, 245, 245, 0.4); }
section.bio:before, section.bio:after { content: ""; display: table; }
section.bio:after { clear: both; }
section.bio figure { zoom: 1; float: left; width: 30%; margin: 0.6em 20px 10px 0; }
section.bio figure:before, section.bio figure:after { content: ""; display: table; }
section.bio figure:after { clear: both; }
section.bio figure img { float: right; }

.audiojs { margin: 20px 0; width: 260px; }
.audiojs .scrubber { width: 080px; }
.audiojs .error-message { width: 200px; }

iframe.vimeo { width: 260px; }
iframe.vimeo.ratio-4-3 { height: 195px; }

p.advsea-results { font-size: 14px; font-family: "Maven Pro", "Helvetica Neue", Arial, Helvetica, sans-serif; font-weight: 700; letter-spacing: -0.06em; font-weight: 400; color: #6f6f6f; }

div.advsea-paging1 { text-align: center; margin: 0 0 20px; zoom: 1; }
div.advsea-paging1:before, div.advsea-paging1:after { content: ""; display: table; }
div.advsea-paging1:after { clear: both; }
div.advsea-paging1 span.advsea-previous { float: left; }
div.advsea-paging1 span.advsea-next { float: right; }

/* ============================================================================= PLACEHOLDER Media Queries for Responsive Design. These override the primary ('mobile first') styles Modify as content requires. ========================================================================== */
@media only screen and (min-width: 480px) { form label { width: 120px; }
  form input, form textarea, form button, form select { width: 200px; } }
@media only screen and (min-width: 568px) { form textarea { width: 300px; }
  [role='main'] figure.small, section.biography figure.small { width: 20.859%; margin: 0 0 1.3em 5.521%; }
  article.news, article.selected-composition, article.related-composition, article.selected-recording, article.related-recording, article.selected-performance, article.related-performance { position: relative; }
  article.news header, article.selected-composition header, article.related-composition header, article.selected-recording header, article.related-recording header, article.selected-performance header, article.related-performance header { zoom: 1; position: relative; margin: 0; padding-bottom: 0.6em; }
  article.news header:before, article.news header:after, article.selected-composition header:before, article.selected-composition header:after, article.related-composition header:before, article.related-composition header:after, article.selected-recording header:before, article.selected-recording header:after, article.related-recording header:before, article.related-recording header:after, article.selected-performance header:before, article.selected-performance header:after, article.related-performance header:before, article.related-performance header:after { content: ""; display: table; }
  article.news header:after, article.selected-composition header:after, article.related-composition header:after, article.selected-recording header:after, article.related-recording header:after, article.selected-performance header:after, article.related-performance header:after { clear: both; }
  article.news header h1, article.selected-composition header h1, article.related-composition header h1, article.selected-recording header h1, article.related-recording header h1, article.selected-performance header h1, article.related-performance header h1 { margin: 0; }
  section.bio figure { width: 20.859%; margin-right: 5.521%; }
  .audiojs { width: 460px; }
  .audiojs .scrubber { width: 280px; }
  .audiojs .error-message { width: 400px; }
  iframe.vimeo { width: 460px; }
  iframe.vimeo.ratio-4-3 { height: 345px; } }
@media only screen and (min-width: 800px) { [role='banner'] hgroup { zoom: 1; float: left; position: relative; left: 3.59%; width: 25.745%; padding: 1.3em 1px 0 0; border-bottom: 0; border-right: 1px solid #eee; }
  [role='banner'] hgroup:before, [role='banner'] hgroup:after { content: ""; display: table; }
  [role='banner'] hgroup:after { clear: both; }
  .page-home [role='banner'] hgroup { border-right: 0; }
  [role='navigation'] ul { text-align: center; }
  section.attention { padding-left: 3.59%; padding-right: 3.59%; margin-bottom: 30px; }
  section.biography { zoom: 1; float: right; width: 65.27%; margin-right: 3.59%; padding: 30px 0 0; }
  section.biography:before, section.biography:after { content: ""; display: table; }
  section.biography:after { clear: both; }
  section.biography figure.small { zoom: 1; float: right; width: 18.36%; }
  section.biography figure.small:before, section.biography figure.small:after { content: ""; display: table; }
  section.biography figure.small:after { clear: both; }
  section.biography figure.small img { width: 100%; }
  section.biography p { float: left; width: 76%; }
  [role='complementary'] { width: 23.95%; float: left; margin: 30px 0; position: relative; left: 3.59%; border: 0; padding: 0 0 40px; }
  [role='main'] { width: 68.86%; float: right; padding: 0 0 40px; }
  [role='main'] p, [role='main'] figure, [role='main'] ol, [role='main'] ul { margin-right: 25.22%; }
  [role='main'] p p, [role='main'] figure p, [role='main'] ol p, [role='main'] ul p { margin-right: 0; }
  [role='main'] > h1 { margin: -37px 0 0.8em; }
  .page-home [role='main'] > h1 { position: absolute; text-align: right; margin: 6px 0 0; width: 34.78%; left: -40%; }
  [role='main'] figure.small { width: 14.78%; margin: 0 5.22% 20px; }
  [role='main'] table { width: 94.78%; }
  article.news header h1, article.selected-composition header h1, article.related-composition header h1, article.selected-recording header h1, article.related-recording header h1, article.selected-performance header h1, article.related-performance header h1 { width: 74.78%; margin: 0; }
  article.news > *, article.selected-composition > *, article.related-composition > *, article.selected-recording > *, article.related-recording > *, article.selected-performance > *, article.related-performance > * { margin-left: 0; }
  section.bio { padding: 20px 3.59%; }
  section.bio figure { width: 25.81%; margin-right: 3.8%; }
  section.bio p { float: right; width: 70.32%; }
  div.advsea-paging1 { margin-right: 5.22%; } }
@media only screen and (min-width: 1000px) { #container { border-left-width: 1px; border-right-width: 1px; }
  [role='navigation'] { padding: 0 1.795%; }
  [role='navigation'] ul li a { padding: 1.4em 0.8em 1.2em; } }
/* ============================================================================= Print styles. Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/ ========================================================================== */
@media print { * { background: transparent !important; color: black !important; text-shadow: none !important; filter: none !important; -ms-filter: none !important; }
  /* Black prints faster: sanbeiji.com/archives/953 */
  a, a:visited { color: #444 !important; 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; page-break-inside: avoid; }
  thead { display: table-header-group; }
  /* css-discuss.incutio.com/wiki/Printing_Tables */
  tr, img { 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; } }
