html {
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
}

body {
  /*margin: 20px;*/
  font-size: 125%;
  line-height: 1.4;
  max-width: 800px;
  margin: 0 auto;
  font-family:spectral;
}

footer {
  margin-top: 50px;
  border-top: 1px solid silver;
  font-size: 0.8em;
}

footer ol {
  padding-left: 20px;
}

/**
 * Initialiazing a `footnotes` counter on the wrapper
 */
article {
  counter-reset: footnotes;
}

/**
 * Inline footnotes references
 * 1. Increment the counter at each new reference
 * 2. Reset link styles to make it appear like regular text
 */
[aria-describedby="footnote-label"] {
  counter-increment: footnotes; /* 1 */
  text-decoration: none; /* 2 */
  color: inherit; /* 2 */
  cursor: default; /* 2 */
  outline: none; /* 2 */
}

/**
 * Actual numbered references
 * 1. Display the current state of the counter (e.g. `[1]`)
 * 2. Align text as superscript
 * 3. Make the number smaller (since it's superscript)
 * 4. Slightly offset the number from the text
 * 5. Reset link styles on the number to show it's usable
 */
[aria-describedby="footnote-label"]::after {
  content: '[' counter(footnotes) ']'; /* 1 */
  vertical-align: super; /* 2 */
  font-size: 0.5em; /* 3 */
  margin-left: 2px; /* 4 */
  color: orangered; /* 5 */
  text-decoration: underline; /* 5 */
  cursor: pointer; /* 5 */
}

/**
 * Resetting the default focused styles on the number
 */
[aria-describedby="footnote-label"]:focus::after {
  outline: thin dotted;
  outline-offset: 2px;
}

[aria-label="Back to content"] {
  font-size: 0.8em;
  color:orangered;
}

/**
 * Highlight target note
 */
footer :target {
  background: lightgrey;
}

/**
 * Visually hidden yet accessible content
 */
.visually-hidden {
  position: absolute;
  clip: rect(0 0 0 0);
  visibility: hidden;
  opacity: 0;
}

.p {
  text-align: center;
  font-size: .75em;
  padding-top: 150px;
}




/* default headers -START*/
h1 {	
	font-size: 1.5rem;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 1.5em;
	padding-bottom: 1.5rem;
	margin-top: 5rem;
	text-wrap: balance;
	color: white;
	background-color: black;
}

h2 {
    font-weight: 500;
    font-size: 1.2rem;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: .6rem;
	padding-bottom: .6rem;
    line-height: 1;	
	color: black;
	background-color: darkgrey;
	text-wrap: balance;
}

h3 {
    font-weight: 500;
    font-size: 1.5rem;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: .7rem;
	padding-bottom: .7rem;
    line-height: 1;
	color: white;
	background-color: #491400;
	text-wrap: balance;
}
/* default headers -END*/

/* column headers -START*/
h1.columnheaders {	
	font-size: 1.5rem;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 1.5em;
	padding-bottom: 1.5rem;
	margin-top: 5rem;
	text-wrap: balance;
	color: white;
	background-color: black;
}

h2.columnheaders {
    font-weight: 500;
    font-size: 1.2rem;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: .6rem;
	padding-bottom: .6rem;
    line-height: 1;	
	color: black;
	background-color: darkgrey;
	text-wrap: balance;
	margin-left:1rem;
	margin-right:1rem;
}

h3.columnheaders {
    font-weight: 500;
    font-size: 1.5rem;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: .7rem;
	padding-bottom: .7rem;
    line-height: 1;
	color: white;
	background-color: #491400;
	text-wrap: balance;
}
/* column headers -END*/


/* horizontal rule */
hr {

}

/* navigation style*/
ul.headerstyle {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
}

li.headerstyle {
  float: left;
  border-right:1px solid #bbb;
}

li.headerstyle:last-child {
  border-right: none;
}

li.headerstyle a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li.headerstyle a:hover:not(.active) {
  background-color: orangered;
}

.active {
  background-color: #orangered;
}

/* links -START */
a.toppagesection {
	font-size: 1rem;
	color: orangered;
}
/* link to PDF score */
a.fulltextpdf {
	color: orangered;
}
/* table of contents links */
a.toc {
	color: orangered;
}
/* top of section link */
a.sectionlink {
	font-size: 1rem;
	color: orangered;
}
/* links -END */





/* two sidebyside boxes -START*/
	* {
	  box-sizing: border-box;
	}
	/* Create two equal columns that floats next to each other */
	.column {
	  float: left;
	  width: 50%;
	  margin: 0;
	  border:15px;
	  border-color:blue;
	  /*padding: 10px;*/
	}
	/* Clear floats after the columns */
	.row:after {
	  content: "";
	  display: table;
	  clear: both;
	}
	/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
	@media screen and (max-width: 600px) {
	  .column {
		width: 100%;
	  }
	}
/* two sidebyside boxes -END*/




/* My custom pagefooter styling -START*/
p.updatetracker {
	font-size:.75rem;
	width:100%;
}

p.commonsnotice {
	font-size:.75rem;
	width:100%;
}

section.footersection {
	padding-left: .75rem;
	padding-right: .75rem;
	padding-top: 0rem;
	padding-bottom: 0rem;
	border-style: solid;
	border-width: 2px;
	border-color: black;
	margin-top: 1rem;
	margin-bottom: 1rem;
	text-wrap: balance;
}
/* My custom pagefooter styling -END*/


/* Page section */
section.pagesection {
border-style: solid;
border-width: 2px;
padding: 1em;
}




/* My custom link styling -START*/
a.ircamlink {
	font-size:1rem;
	color: white;
}

a.ircamlink:hover {
	font-size:1rem;
	color: orangered;
}

a.LINKlink {
	font-size:.8rem;
	color: white;
	background: black;
	padding:.15rem;
}

a.LINKlink:hover {
	font-size:.8rem;
	color: black;
	background:orangered;
	padding:.15rem;
}

a.webresource {
	color: orangered;
}

a.oalink {
    color:orangered;
}
/* My custom link styling -END*/

/* blockquote style -START */
blockquote {
    font-size: 1.4rem;
	border-left: .5rem solid orangered;
	margin-right: 4rem;
	padding-left: 2rem;
	text-align:justify;
}
blockquote p {
    margin-right: 1rem;
	
}
blockquote footer {
    font-size: 1.1rem;
    text-align: right;
}
/* blockquote style -END */

/* figure style -START */
figure {
	margin:0;
	padding-top:1.5rem;
	padding-bottom:1.5rem;
}

figcaption {
font-size: .8rem;
font-style: italic;
}
/* figure style -END */

/* image style -START */
img.logostyle {
	width:100%;
	padding:0;
}
/* image style -END */

/* table style -START */
table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid;
}
/* table style -END */