body {background: #ffffff;}
body > div {position:relative; width:800px; margin-left:auto; margin-right:auto;}

div#vid_2 {position:absolute; left:257px; top:22px; width:440px; height:116px;} /* banière du site sospapas.ch */
img#main_gauche {position:absolute; left:68px; top:9px; width:99px; height:140px;} /* logo du MCPV² de gauche */
img#main_droite {position:absolute; left:717px; top:0px; width:99px; height:140px;} /* logo du MCPV² de droite */

img#titre {position:absolute; left:255px; top:160px; width:544px; height:44px} /* Bandeau titre, dont la largeur apparente est de 540 points, le cadre noir gauche et l'ombre droite sont alignés sur le corps situé en dessous de sorte que celui-ci dépasse de 1 pixel sur la droite pour compenser l'effet optique de l'ombre */

h1#titre {position:absolute; left:256px; top:160px; border: solid 2px; padding-top: 6px; padding-left: 31px; width:505px; height:30px; margin: 0; font-size: 16px; font-weight:bold; font-family:'Arial Narrow', "N Helvetica Narrow", sans-serif; font-stretch: narrower /* à partir de CSS 3 seulement */} /* le titre, quand il n'y a pas d'image */
/* Sommes sous tout autre navigateur qu'Explorer PC, qui ... */
div#corps {position:absolute; left:246px; top:200px; width:553px; text-align:justify} /* colonne de droite dont les éléments ont des marges latérales pour un total de 12 points, ce qui laisse une largeur effective de 541 point */
div#corps > * {margin-left: 10px; margin-right: 2px;} /* attention aussi à la ligne suivante */
div#corps > *:first-child {margin-top: 20px;} /* le corps commence par une marge */
div#corps img.max {margin-left: 10px; width:540px;} /* images de largeur maximale */
div#corps img.rectangle0.max {margin-left: 7px; width:540px;} /* les images clickables dépassent de 3 points à gauche et 2 à droite, pour ne pas dépasser la somme de 800 points */
div#corps > a img.rectangle0:first-child {margin-top: 17px;}

div#colonne {position:absolute; left:0; top:185px; width:236px; text-align:center} /* colonne de gauche */
div#colonne div, div#colonne a.icone, div#colonne p, div#colonne ul {margin-left: 5px; margin-right: 5px;}
div#colonne > div:first-child, div#colonne > a.icone:first-child, div#colonne > p:first-child, div#colonne > ul:first-child {margin-top: 35px;}
div#colonne > a:first-child img.bouton, div#colonne > img.bouton:first-child {margin-top: 30px;}
div#colonne img.bouton {margin-left: 0; margin-right: 0; /*margin-top: 0; margin-bottom: 0; Explorer PC FE n'en tient aucun compte */}

img {border: none} /* ... pour Explorer PC qui produit des cadres autour des images cliquables. */

/* Un lien qui se sélectionne en blanc sur un fond plus sombre */
a.bouton {padding: 5px}
a.bouton:hover, a.bouton:focus {background-color: white}
a.bouton:link, a.bouton:visited {text-decoration: none; color: black} /* j'aurais préféré inherit, mais Explorer... */
/* a.bouton:hover, a.bouton:focus {text-decoration: inherit} ne change rien sur Safari */
a.bouton:active {color: red}

/* Un lien fait d'un texte et d'une illustration, de la classe "icone" */
a.icone:link, a.icone:visited {text-decoration: none; color: black} /* j'aurais préféré inherit, mais Explorer... */
a.icone:link:hover img, a.icone:link:focus img {color: blue}
a.icone:visited:hover img, a.icone:visited:focus img {color: purple} /* ne change que ... */
a.icone:active:hover img, a.icone:active img, a.icone:active div, a.icone:active p {color: red} /* Retester sur la couleur des cadres Explorer */

/* Images clickables */
a img.rectangle0 {border: solid 3px; color:transparent;} /* sans cadre au repos */
a img.rectangle1 {border: solid 1px; padding: 2px;} /* avec un cadre fin au repos, hélas pour Explorer qui le décalera on mouse over */
a:hover img, a:focus img {border-width: 3px; padding: 0; color: inherit;} /* sous-entendu que toutes les images appartenant à un lien et du type rectangle0 ou rectangle1 */

/* Pour le microformat hCalendar */
/* .vevent abbr.dtstart, .vevent abbr.dtend {text-decoration: inherit} Pour Firefox qui souligne en pointillés mais ne tient pas compte du style présent ni de "none" */

/* Feuille de style du logo de map.search.ch */
.sl_logo{font-family:"Verdana",sans-serif;font-size:small;color:black;background-color:white;height:98%;width:80%;text-decoration:none;font-weight:bold;color:black;white-space:nowrap}
.sl_logo:before{content: "["}
.sl_logo:after{content: "]"}
.sl_logo:before, .sl_logo:after{padding:0 0.1em;position:relative;top:0.035em;font-family:"Arial","Helvetica",sans-serif;font-size:1.7em;font-weight:normal;color:white} /*pour être transparent*/
a:hover .sl_logo:before, a:focus .sl_logo:before, a:hover .sl_logo:after, a:focus .sl_logo:after{color:black}
.sl_logo a{text-decoration:none;color:black}
.sl_logo_r{color:#d00}
a:active .sl_logo:before, a:active .sl_logo, a:active .sl_logo .sl_logo_r, a:active .sl_logo:after{color:red}

/* Diverses caractéristiques du texte */
p.chapeau {font-weight: bold;}
ul {padding-left:2.5em;} /* Pour Explorer PC, ce qui est sensiblement le réglage par défaut de Safari */
ul.paragraphes li {margin-top:2ex;}
*#signature {position:relative; width:60%; left:40%; text-align: center;}