/*Feuille de style (écran) pour le Guide des difficultés de rédaction en musique (GDRM) <https://roberge.mus.ulaval.ca/gdrm/>
© Marc-André Roberge 2025
*/

#contenant {
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	width: 760px;
	margin-top: 0.5em;
}
#logo, #recherche, #liens-bandeau, #signification {
	position: absolute;
	background-color: #EDE271;
}
#logo {
	top: 10px;
	margin-left: 0px;
	width: 450px;
	height: 90px;
}
#recherche {
	top: 100px;
	margin-left: 0px;
	padding-left: 5px;
	width: 450px;
	height: 40px;
}
#liens-bandeau {
	top: 10px;
	margin-left: 450px;
/*	width: 170px; */
	width: 150px;
	height: 130px;
}
#signification {
	top: 10px;
	margin-left: 600px;
	width: 160px;
	height: 130px;
}
#liens-bandeau ul, #signification ul {
	list-style: none;
	margin: 0;
	padding: 0.4em 0 0.4em 0.5em;
	text-align: top;
}
#symboles ul {
	list-style: none;
	margin: 0;
	padding: 0.4em 0 0.4em 0.5em;
/*	font-size: 0.5em; */
}
#menu {
	margin-top: 145px;
	height: 5px;
	font-size: 10pt;
}
#contenu {
	margin-top: 40px;
}
#pied1, #pied2, #pied3 {
	text-align: center;
}
#pied1 {
	font-size: 90%;
}
#pied2 {
	font-size: 80%;
}
#pied3 {
	font-size: 70%;
}
#modification {
	margin-top: 2em;
	font-size: 80%;
	text-align: left;
}
#logos {
	margin-top: 2em;
}
#logos .famul {
	float: left;
}
#logos .milonic {
	float: right;
}
#index-boites {
}
#index-gauche {
	float: left;
	width: 350px;
	height: 290px;
	margin: 0px 0px 0px 0px;
	padding: 10px 10px 0px 10px;
	background-color: #7D7A04;
	color: #FFFFFF;
	font-size: 95%;
}
#index-droit {
	float: right;
	width: 350px;
	height: 290px;
	margin: 0px 0px 0px 0px;
	padding: 10px 10px 0px 10px;
	background-color: #EDE271;
	color: #000000;
	font-size: 95%;
}
#printMsg {
	display: none;
}
/* Doit être placé avant les balises <a> pour éviter que les liens ne deviennent invisibles avec hover. */
a[href $=".pdf"] {
	padding-right: 18px;
	background: url(../images/pdficon-small.png) no-repeat center right;
}
a {
	outline: none;
	text-decoration: underline;
}
/* Color Picking Tool, Dan's Tools <http://www.hexcolortool.com/>; visited (-30%), hover (+15%), and active (-45%). */
/* WebAIM <http://webaim.org/resources/contrastchecker/> */
a:link {
	color: #7D2904;
}
a:visited {
	color: #CA7651;
}
a:hover {
	text-decoration: none;
	background-color: rgba(125, 41, 4, 0.7);
	color: rgba(255, 255, 255, 1.0);
}
a:active {
	background-color: rgba(125, 41, 4, 0.2);
	color: #7D2904;
}
body {
	margin: 0;
	padding: 0;
	background-color: #FFFFFF;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	/*	font-size: 100%;*/
	font-size: 11pt;
	text-align: center;
}
body {
	/* Mozilla Firefox alignment */
	text-align: -moz-center;/* https://developer.mozilla.org/fr/docs/Web/CSS/text-size-adjust
text-size-adjust: none;
*/
}
/*
This line added to force Android phones (from 4.2, but probably also from after 2.2) to display the text to the screen's full width rather than just the left half or so; solution found at <http://code.google.com/p/android/issues/detail?id=16287> */
/*p, h1, h2, h3, h4, td, th, tr, ul, li {
	background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}
*/

/*
Increase space before a section title (and decrease between a title and the text that follows).
h1, h2, h3, h4, h5, h6 {
  margin-top: 15px;
  margin-bottom: 10px;
  padding-top: 5px;
  padding-bottom: 0px;
}
*/
em {
	font-style: italic;
}
h1, h2, h3, h4, h5, h6 {
	margin-top: 30px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
}
h1 {
	font-size: 125%;
	font-style: normal;
	margin-top: 3em;
	color: #7D2904;
}
h2 {
	font-size: 115%;
	font-style: normal;
	color: #7D7A04;
}
h3 {
	font-size: 105%;
	font-style: italic;
	margin-left: 2em;
}
h4 {
	font-style: normal;
	font-size: 100%;
	margin-left: 4em;
}
img {
	border: 0;
	vertical-align: center;
	margin: 0px;
}
a:hover img {
	display: block;
	/*	border: 0px transparent; */
	/* requis pour éviter un bordure inférieure */
}
img.symbole {
	width: 7px;
	height: 7px;
	margin: 0px 3px 0px 0px;
	display: inline-block;
	white-space: nowrap;
}
img.photo {
	float: right;
	margin-left: 20px;
}
strong {
	font-family: Verdana, Arial, Helvetica, serif;
	font-weight: bold;
	font-style: normal;
	font-size: 90%;
}
/*
sup {
	position: relative;
	font-size: smaller;
	vertical-align: baseline;
	bottom: 0.75em;
}
sub {
	position: relative;
	font-size: smaller;
	vertical-align: baseline;
	bottom: -0.25em;
}*/
/* Solution trouvée à: http://www.cs.tut.fi/~jkorpela/www/linespacing.html */
sup, sub {
	vertical-align: 0;
	position: relative;
}
sup {
	bottom: 1ex;
}
sub {
	top: 0.8ex;
}
ul {
	list-style-type: square;
}
/* Balises em (mot-cle) et cite (langue) redéfinies pour éviter le problème de <span> imbriqués */
.align-center {
	text-align: center;
}
.align-right {
	text-align: right;
}
.annotation {
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
	text-indent: 1.5em;
	font-size: 90%;
	font-weight: normal;
	margin-top: -1em;
}
.avertissement_gris {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 90%;
	color: #555555;
}
.avertissement_rouge {
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
	font-size: 90%;
	color: #7D2904;
}
.bannertable {
	background-color: #EDE271;
	color: #000000;
	border: 0px;
	vertical-align: top;
}
.bibliographie {
	text-indent: -1.5em;
	margin-left: 1.5em;
}
/*
.carre_gauche {
	background-color: #7D7A04;
	color: #FFFFFF;
	font-size: 95%;
}
.carre_droit {
	background-color: #EDE271;
	color: #000000;
	font-size: 95%;
}
*/
.clear {
	clear: both;
}
.clearfix::after {
	/* https://www.w3schools.com/css/css_float.asp */
	content: "";
	clear: both;
	display: table;
}
.courier {
	font-family: "Courier New", Courier, monospace;
}
.datatable {
	border: 1px solid #CCCCCC;
	border-collapse: collapse;
	width: 100%;
}
.datatable td {
	border: 1px solid #CCCCCC;
	padding: 0.3em;
	vertical-align: top;
}
.datatable th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: italic;
	font-weight: bold;
	background-color: #7D7A04;
	color: #FFFFFF;
	text-align: center;
	border: 1px solid #CCCCCC;
	padding: 0.3em;
	vertical-align: top;
}
.datatable tr:hover {
	/*	background-color: #FCFAB4;*/
	background-color: #FFE8C3;
	color: #000000;
}
.explication {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	/*	font-size: 10pt;*/
	font-size: 90%;
	font-style: normal;
	font-weight: normal;
}
.filet {
	color: #7D7A04;
	margin: auto;
	text-align: center;
	width: 75%;
	border-top: 2px solid;
	margin-top: 2.5em;
}
.espace_bandeau_menu {
	margin-top: 5px;
}
.gdrm {
/*	font-family: "Courier New", Courier, monospace; */
	font-size: 90%;
	font-style: normal;
	font-weight: bold;
}
.introd {
	font-family: Arial, Helvetica, sans-serif;
	/*	font-size: 10pt;*/
	font-size: 90%;
	font-style: normal;
	font-weight: normal;
}
.introd_bordure {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 95%;
	font-weight: normal;
	color: #000000;
	padding: 0em 0.5em 0em 0.5em;
	border-top: 1px solid #7D7A04;
	border-left: 4px solid #7D7A04;
	border-right: 4px solid #7D7A04;
	border-bottom: 1px solid #7D7A04;
}
.langue {
	font-style: italic;
}
.liens00 {
	font-size: 13px;
	font-family: Verdana, Arial, Helvetica, serif;
	font-weight: bold;
	text-align: left;
}
.liste {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 90%;
}
.mot-cle {
	font-family: Verdana, Arial, Helvetica, serif;
	font-weight: bold;/*	font-size: 11pt; */
}
.mot-cle, explication {
	font-size: 90%;
}
.petites-cap {
	font-variant: small-caps;
}
.pseudolien {
	color: blue;
}
.relief {
	border: 1px dotted #99825D;
	border-radius: 2px;
	background-color: #FFE8C3;
}
.rouge {
	color: #C00000;
}
.rubrique {
	font-style: normal;
	font-weight: bold;
}
.souligne {
	text-decoration: underline;
}
.sujet {
	color: #7D2904;
}
[class^="symbole-"] {
	position: relative;
	font-weight: bold;
	font-size: 100%;
	margin-left: -1px;
	margin-right: 3px;
}
.symbole-noir {
	color: #000000;
}
.symbole-rouge {
	color: #B30000;
}
.symbole-vert {
	color: #1A651A;
}
.titre {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #7D2904;
	font-size: 140%;
	font-weight: bold;
}
@media screen {
	.titre-print {display: none;}
}
.unicode {
	font-family: "Arial Unicode MS", "Lucida Sans Unicode", "Tahoma", "Times New Roman";
}
.wrap_urls {
	/* Chris Collier, "Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)" <https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/> */
	overflow-wrap: break-word;
	word-wrap: break-word;
	-ms-word-break: break-all;
	word-break: break-all;
	word-break: break-word;
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}