/* Reflections */

/* Reset CSS defaults for all browsers */
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, div,
	code, address, variable, form, fieldset, blockquote, img, table, object 
	{padding: 0; margin: 0; border: 0; font-size: 100%; font-weight: normal;}

/* Basic rules */
html{font-family: Garamond, serif; }
body {background-color: #f4f6f9; width: 1000px;}
p {text-indent: 1em;}
p.stanza {margin-top: 25px; text-indent: 0em}
p.indented {margin-left: 1em;  text-indent: 1em}
p.indented-stanza {margin-left: 1em;  text-indent: 0em}
p.en-caption {font-size: large; font-family: sans-serif; margin-top: 20px}
p.fr-caption {font-size: large; font-family: sans-serif; margin-top: 20px}
h1 {font-size: 180%; font-weight: bold; text-align: center;}
h2 {font-size: 150%; font-weight: bold; text-align: center; 
  padding-bottom: 12px;}
h3 {font-size: 125%; font-weight: bold; text-align: left; 
  padding-top: 16px; padding-bottom: 12px;}
h4 {font-size: 115%; font-weight: bold; text-align: left; 
  padding-top: 12px; padding-bottom: 12px;}
h5 {font-size: 100%; font-weight: bold; text-align: left; 
  padding-top: 12px; padding-bottom: 12px;}
hr.pagedivider {height: 2px; 
  margin-top: 10px; margin-bottom: 10px; 
  background-color: black;}
sup {font-size: .75em; }
pre {font-family: "Courier New", monospace; font-size: .7em;}
ul {list-style: disc outside; margin-left: 10px;}
ol {list-style: decimal outside; margin-left: 10px;}
li {margin-top: 10px; margin-bottom: 10px;}
object {width: 90%;
}

/* Anchor rules */
a {font-family: Arial, sans-serif; font-weight: bold;
  font-size: 100%;	text-decoration: none; }
a:link, a:visited {color: #2b6aa8; }
a:hover, a:active {color: #009966;}
a.website:link, a.website:visited {color:#2b6aa8;
  font-family: brush script MT; font-size: 300%;
	text-decoration: underline;}
a.website:hover, a.website:active {color: #009966;} 
a.genre:link, a.genre:visited {color: #2b6aa8; text-decoration: none; 	
  font-family: Arial, sans-serif; font-weight: bold;  font-size: 150%; }
a.genre:hover, a.genre:active {color: #009966;}
a.menu:link, a.menu:visited {color: #2b6aa8; text-decoration: none; 	
  font-family: Arial, sans-serif;  font-weight: bold;
	font-size: 100%;}
a.menu:hover, a.menu:active {color: #009966;}
a.ext:link, a.ext:visited {color: #2b6aa8; 
  text-decoration: underline; 
	font-family: Arial, sans-serif;
	font-weight: bold; font-size: 100%;}
a.ext:hover, a.ext:active {color: #009966;}

 
/* div rules */
div.pageborder {clear: both; float: left; 
  width: 1000px; 
  margin: 0px; 
	padding: 0px;		
	border: 2px solid black; }
div.header {display: block; float: left;  clear: both; 
  width: 1000px;  
  text-align: center;
  background-color: #b8babc; }
div.banner {clear: both; float: left; width: 1000px;}
div.menuEn {clear: both; float: left; width: 500px;
	text-align: center;
  margin-top: 0px; margin-bottom: 0px;
	padding-top:0px; padding-bottom:20px;	
	background-color: #b8babc;}
div.menuFr {float: right; width: 500px;
	text-align: center;
  margin-top: 0px; margin-bottom: 0px;
	padding-top:10px; padding-bottom:20px;	
	background-color: #b8babc;}
div.main {clear: both; float: left; width: 1000px; }
div.english {clear: both; float: left; width: 440px; 
  text-align: justify;
	margin: 40px 10px 20px 40px;}
div.french {float: right;  width: 440px; 
  text-align: justify;
	margin: 40px 40px 20px 10px;}
div.footer {display: block; float: left; width: 1000px;  
   background-color: #b8babc;}
div.poem {text-align: center; font-style: italic; font-weight: bold;}

/* Image rules */
div.image-left {float: left; width: 33%; padding: 2em 0em 0em 3em; 
	font-size: small; font-style: italic;}
div.image-center {float: left; padding: 2em 0em 0em 2em;}
div.image-right {float: right; width: 33%; padding: 2em 3em 0em 0em; 
	font-size: small;  font-style: italic;}

/* TOC & Categories rules */
p.category {font-size: 1em; font-weight: bold; line-height: 120%;}
table {border: 0px; border-collapse: collapse;}
table.toc {width: 1000px; margin: 20px;;}
tr.toc {text-align: left; vertical-align: top; line-height: 120%; color: black;}
td.toc-left {padding: 0px 10px 0 10px; font-size: 100%; font-weight: bold;}
td.toc-right {width: 50%;  padding: 0px 10px 0 10px; font-size: 100%; font-weight: bold;}
a.old {display: block; width:400px;}/*font-family: "Times New Roman", serif;*/
a.old:link, a.old:visited {color: #2b6aa8;}
a.old:hover, a.old:active {color: #009966;}
a.ntr {display: block; width:400px;} /*font-family: "Times New Roman", serif;*/ 
a.ntr:link, a.ntr:visited {color: gray;}
a.ntr:hover, a.ntr:active {color: #009966;}
a.new {display: block; width:400px;} /*font-family: "Times New Roman", serif;*/
a.new:link, a.new:visited {color: black;}
a.new:hover, a.new:active {color: #009966;}
a.chg {display: block; width:400px;} /*font-family: "Times New Roman", serif;*/
a.chg:link, a.chg:visited {color: darkred;}
a.chg:hover, a.chg:active {color: #009966;}

/* Box rules */
div.box {width:90%; text-align: center; 
	border-style:solid; border-width: thin; border-color: #2b6aa8; 
	padding: 10px;}
div.notebox {width: 100%; 
	border-style:solid; border-width: thin; border-color: #6D3303; 
	margin: 10px 10px 10px 0px; padding: 10px 10px 10px 10px;}
p.old {color: #2b6aa8; 
	font-family: Arial, sans-serif; font-weight: bold; font-size: 100%;}
p.ntr {color: gray;
	font-family: Arial, sans-serif; font-weight: bold; font-size: 100%;}
p.new {color: black;
	font-family: Arial, sans-serif; font-weight: bold; font-size: 100%;}
p.chg {color: darkred;
	font-family: Arial, sans-serif; font-weight: bold; font-size: 100%;}

/* Drop-cap rules */
p.category {text-indent: 0; padding-top: 20px; font-family: serif; font-weight: bold; }
p.dropcap {text-indent: 0em;}
p.dropcap:first-letter{
  display      : block;
  float        : left;
  margin-top   : -0.205em; 
  color        : #009966;
  font-size    : 300%;
}

p.title {padding: 0px; font-family: serif; font-weight: bold; font-size: 125%;}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
/*  border-bottom: 1px dotted black; */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  background-color: #b8babc;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 120%;
  left: 25%;
  margin-left: -60px;
  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

span.title {padding: 0px; font-family: serif; font-weight: bold; font-size: 125%;}