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 */
img#titre-spécial {position:absolute; left:256px; top:160px; width:540px} /* Bandeau titre spécial, inventé pour les pères Noëls bleus 2010 */

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 */
div#corps {position:absolute; left:256px; top:220px; width:540px; text-align:justify}
div#corps img.max {width:540px;} /* images de largeur maximale */
div#corps img.rectangle0 {position:relative; left:-3px; top:-3px} /* les images clickables dépassent de 3 points à gauche et à droite */
div#corps > a img.rectangle0:first-child {margin-top: 17px;}

div#corps object object {border-left: solid 1px; border-top: solid 1px; border-right: solid 1px; padding: 0} /* Cadre des vidéos */

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 */}

div#corps > h3 {margin-top: 6ex; padding-bottom: 0; margin-bottom: 0}
div#corps > :first-child {margin-top: 0ex}

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;}

/* Horaire d'une journée, créé pour la Fête des pères '11 */
/* On reproduit à peu près ici le comportement de l'attribut de la balise DT «compact», qui n'a pas de valeur associée et qui est déprécié (deprecated) */
dl.programme dt {display: inline-block; vertical-align: top; width: 19%; font-weight: bold;}
dl.programme dd {display: inline-block; vertical-align: top; width: 80%; margin-left: 0}

/* position:relative; border:1px solid gray */