/* CSS pour FdM */
body {width:100%; min-width:360px; max-width:980px;}
main { float:center; max-width: 970px; background-color: #FFFFFF; font-size: 14px; font-family: Arial, Sans-serif;}
footer { float:left; max-width: 970px; background-color:#E8E8E8; font-size: 14px; line-height: 100%; font-family: Arial, Sans-serif;}
.bloc1 { width: 46%; float: left; }
.bloc2 { width: 46%; float: left; margin-left: 40px; } 	
/* bulles aide/tip------------------------------------------- */
a.tipdroite {position: relative; }
a.tipdroite span {display: none; position: absolute; top: +5px; left: -5px; width: 350px; padding: 5px; z-index: 900; background: #FFFFCC; color: #000000; border: 1px solid red;border-radius: 5px; }
a:hover.tipdroite, a:active.tipdroite {font-size: 99%; text-decoration: none; }
a:hover.tipdroite span, a:active.tipdroite span { display: block; text-decoration: none; }

a.tipgauche { position: relative; }
a.tipgauche spanç position: absolute; top: +5px; left: -320px; width: 350px; padding: 5px; z-index: 900; background: #FFFFCC; color: #000000; border: 1px solid red; border-radius: 5px; }
a:hover.tipgauche, a:active.tipgauche {font-size: 99%;  text-decoration: none;}
a:hover.tipgauche span, a:active.tipgauche span { display: block; text-decoration: none; }

a.tipcentre { position: relative; }
a.tipcentre span { display: none; padding: 5px; z-index: 900; background: #FFFFCC; color: #000000; border: 1px solid red; border-radius: 5px; }
a:hover.tipcentre,a:focus.tipcentre, a:active.tipcentre {font-size: 99%;  text-decoration: none;}
a:hover.tipcentre span,a:focus.tipcentre span, a:active.tipcentre span { display: inline-block; text-decoration: none; }
/* infobulle avec javascript */
.bulle { display: inline-block; z-index: 700; background-color:#FFFFE0 ; border: 1px solid red; -moz-border-radius: 5px; -webkit-border-radius: 5px; font-size: 96%;  color: #000; text-decoration: none;}

/*------taille écran ----------------------------------- */   
@media screen and (max-width:980px){ html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} }
@viewport { width: auto, device-width; zoom: 1.0;}
aera, textarea, table, td, th,img, block,input, iframe, object, embed, video {max-width: 100%;}
@media(hover: hover) and (pointer: fine) {span a:hover {}}

.style1 { color: #0000FF; font-size: 14px; font-family: Arial, Sans-serif; }
.style2 { color: #000000; font-size: 14px; font-family: Arial, Sans-serif; }
.style3 { color: #000000;font-size: 18px;font-family: Arial, Sans-serif;}
.style4 { color: #000000; font-size: 12px; line-height: 95%; font-family: Arial, Sans-serif;}
small { color: #000000; font-size: 12px; line-height:1; font-family: Arial, Sans-serif; }
.style5 { color: #006600; font-size: 14px; font-family: Arial, Sans-serif; }
.style6 { color: #CC3366; font-size: 36px; font-family: Arial, Sans-serif; }
.style7 { color: #0000CC; font-size: 14px; font-family: Arial, Sans-serif; }
.style8 { color: #FF00FF;font-size: 18px;font-family: Arial, Sans-serif; font-weight: bold;}
h1 { color: #FF0000; font-size: 26px; line-height: 24px; font-family: Arial, Sans-serif; text-align: center;}
.style10 { color: #7D0000; font-size: 14px; font-family: Arial, Sans-serif; }
.style11 { color: #000099; font-size: 11px; font-family: Arial, Sans-serif; }
.style12 { color: #7D0000; font-size: 16px; font-family: Arial, Sans-serif; }
.style13 { color: #006600; font-size: 16px; font-family: Arial, Sans-serif; }
.style14 { color: #EDEDED; font-size: 16px; font-family: Arial, Sans-serif; }
.style15 { color: #D400FF; font-size: 16px; font-family: Arial, Sans-serif; }

audio1 {display:inline; height:16px; border-radius: 90px; backgound-color: hotpink; }
audio  {display:inline; height:14px; background-color: #FF00FF;opacity: 0.8; border-radius:8px;transform: scale(0.9);}
.mark {color: yellow;}
a:link { text-decoration: none;} 
a:hover {font-weight: bold;}
a:active { color: hotpink; background-color: yellow;}
a{ cursor:pointer;}