A:link		IMG	{opacity: 1; filter:alpha(opacity=100);}
A:hover	IMG	{opacity: 0.5; filter:alpha(opacity=50);}

.pageBody, #pBody {
	margin-right: auto;
	margin-bottom: 50px;
	margin-left: auto;
	width: 760px;
	}
	
.tocAuthor	{
	font-size: 1.1em;
	text-align: center;
	margin-bottom: 4px;
	margin-top: 8px;
	}

.tocImage {
	padding: 6px;
	text-align: center
	}
	
.tocImage img { width: 54.5%; }

.tocLinksTitle, .tocIntroTitle, .tocContactTitle {
	text-align: left;
	font-size: 1.6em;
	font-weight: bold;
	font-style: italic;
	margin-top: 2px;
	margin-bottom: 1x;
	border-bottom: 1px solid;
	}

.tocLinks, .tocIntro, .tocSur, .tocContact { padding: 2px; }

.tocLinks div { display: table; }

.surRecord {
	margin: .2em;
	padding-top: .2em;
	border-top: dotted;
	border-width: 1px;
	font-size: 1.15em;
	}
	
div.sur > div:first-child 	{
	border-top: none;
	padding-top: 0em;
	}

.surLetter	{
	float: left;
	width: 1em;
	font-weight: bold;
	text-align: center;
	}

.surName {
	display: block;
	margin-left: 1.5em;
	}

.tocLinkStart { padding-bottom: 2px; }

.tocContactRecord { margin-bottom: 5px; }

.tocContactIcon img 	{
	width: 20px;
	height: 20px;
	}

.tocContactIcon {
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	}

.tocContactLink {
	display: inline-block;
	vertical-align: middle;
	text-align: left;
	padding-left: 4px;
	}

/* add some left and right margins when there is more horizontal space */
@media all and (min-width: 415px)	{
	.tocLinkStart { padding-bottom: 4px; }
	.tocContactIcon img	{
		width: auto;
		height: auto;
		}
	.tocContactIcon { min-width: 40px;	}
	.tocLinks, .tocIntro, .sur, .tocContact { padding: 8px;}
	}

@media all and (min-width: 769px) 	{
	.tocAuthor	{
		margin-bottom: 5px;
		margin-top: 0px;
		}
	}

.footer {
	padding: .4em;
	text-align: center;
	}

/***********************FD styles*********************/
.tocLangues {
	float: right;
	display: block;
	text-align: right;
	margin-right: 0em;
	font-size: 88%;
	}

.tocMusic 	{
	float: right;
	display: block;
	text-align: center;
	margin-right: 1em;
	margin-top: 0.4em;
	font-size: 88%;
	padding-bottom: 25px;
	}

.tocUpdate {
	float: left;
	display: block;
	text-align: center;
	margin-left: 1em;
	margin-top: 0.4em;
	font-size: 88%;
	padding-bottom: 25px;
	}
.tocTexte	{
	text-align: justify;
	padding: 0.6em;
	z-index: 3;
	}
	
TABLE.updateList TD	{
	padding-left: 20px;
	}
	
DIV#cartouche { /* Fixed floating div */
	position: fixed; 
	left: 0em; 
	top: 0em; 
	width: 8em;
	font-size: 13px;
	padding: 3px;
	background: white; 
	text-align: center;
	border: Red 1px solid;
	z-index: 4; 
	}
	
DIV.cartouche1 { /* . not # !!! */
	width: 14em;
	padding: 6px;
	margin-top: 0.5em;
	background: white; 
	border: Red 1px solid;
	}	
	
DIV#cartouche2 {
	position: absolute; 
	left: 0.8em; 
	top: 14em; 
	width: 8em;
	padding: 4px;
	text-align: center;
	background: #F6F6F6; 
	border: #CCC 1px solid;
	z-index: 2; 
	}

DIV.W55 { width: 55%; margin-top: 1.2em; }

DIV#fleches { 
	position: fixed; 
	background: transparent; 
	border: 0px;
	text-align: center;
	font-size: 88%;
	right: 2px; 
	bottom: 4em; 
	line-height: 1.5;
	z-index: 1; 
	}

.compteur {
	padding: 3px; 
	color: #EEE; 
	background: #222; 
	text-align: center; 
	}
bloc {clear: both;}
	
@media screen and (max-width: 740px) {
	.tocUpdate IMG {max-width: 50%;}
	.tocMusic  IMG {max-width: 50%;}
	.pageBody {max-width: 100%;}
	.tocUpdate {margin-left:  0.1em;}
	.tocMusic  {margin-right: 0.1em;}
	DIV#cartouche2 {margin-left:  0.1em; position: relative; top: 5px;}
	DIV.W55 { width: 90%; margin-top: 0.2em; }
	bloc {clear: none;}
	}
@media screen and (max-width: 500px) {
	DIV.gauche, DIV.droite {float: none; text-align: center; margin: auto;}
	}