#wrapper {
	width: 100%;
	/* text-align: center; NO EFFECT */
}

#wrapper td {
	vertical-align: top;
}

td#previousImage a,
td#nextImage a {
	display: block;
	/* set dimensions on innermost element, controls parents as well */
	width: 100%;
	height: 222px;
}

td#previousImage.portrait a,
td#nextImage.portrait a {
	/* portrait images have different dimensions */
	height: 370px;
	/* prev/next have no width = elastic */
}

.frame {
	background: url(/images/DiaporamaFrameOverlay.png) no-repeat;
}

.portrait .frame {
	background-image: url(/images/DiaporamaFrameOverlayPortrait.png);
}

/* --- Previous image --- */

td#previousImage {
	padding-top: 2.5em; /* Match #diapoNav total height (part 1 of 2: the margin) */
}

td#previousImage .image {
	width: 100%;
	margin-top: 1px; /* Match #diapoNav total height (part 2 of 2: the border) */
	background: url(espace-presecondaire/cropped/002.jpg) no-repeat center right;
}

td#previousImage .frame {
	background-position: center right;
}

td#previousImage .fadeOut {
	background: url(/images/fadeOutLeft.png) repeat-y top left;
}

td#previousImage a {
	background: url(/images/LeftArrow60.png) no-repeat center;
}

td#previousImage a:hover,
td#previousImage a:focus {
	background: url(/images/LeftArrow60hover.png) no-repeat center;
}

/* --- Current image --- */

td#currentImage {
	width: 370px;
	padding: 0 20px;
}

td#currentImage.portrait {
	width: 222px;
}

td#currentImage .image {
	background: url(espace-presecondaire/003.jpg) no-repeat center;
}

td#currentImage .frame {
	/* set dimensions on innermost element, controls parents as well */
	/* (currentImage has no link; .frame is innermost) */
	width: 370px;
	height: 222px;
	background-position: center;
}

td#currentImage.portrait .frame{
	/* portrait images have different dimensions */
	width: 222px;
	height: 370px;
}

#diapoNav {
	height: 1.5em;
	/* width: 370px; Unneeded, since container td is dimensioned */
	margin: auto;
	margin-bottom: 1em;
	border-bottom: 1px solid #CCC6B8;
	text-align: right;
	font-family : "Trebuchet MS", Verdana, sans-serif;
}

#diapoNav #imageXofY {
	float: left;
}

#diapoNav a {
	background-repeat: no-repeat;
	background-position: center;
}

#diapoNav a:hover,
#diapoNav a:focus {
	text-decoration: none;
}

#diapoNav a#first {
	padding-left: 8px;
	padding-right: 8px;
	background-image: url(/images/LeftDoubleArrow-11b.gif);
}
#diapoNav a#prev {
	padding-left: 6px;
	padding-right: 6px;
	background-image: url(/images/LeftArrow-11b.gif);
}
#diapoNav a#next {
	padding-left: 6px;
	padding-right: 6px;
	background-image: url(/images/RightArrow-11b.gif);
}
#diapoNav a#last {
	padding-left: 8px;
	padding-right: 8px;
	background-image: url(/images/RightDoubleArrow-11b.gif);
}

#diapoNav a#first:hover,
#diapoNav a#first:focus {
	background-image: url(/images/LeftDoubleArrow-11b-hover.gif);
}
#diapoNav a#prev:hover,
#diapoNav a#prev:focus {
	background-image: url(/images/LeftArrow-11b-hover.gif);
}
#diapoNav a#next:hover,
#diapoNav a#next:focus {
	background-image: url(/images/RightArrow-11b-hover.gif);
}
#diapoNav a#last:hover,
#diapoNav a#last:focus {
	background-image: url(/images/RightDoubleArrow-11b-hover.gif);
}

#currentImage p {
	width: 370px;
	margin: 1em auto;
	text-align: left;
}

#currentImage.portrait p {
	width: 222px;
}

/* --- Next image --- */

td#nextImage {
	padding-top: 2.5em; /* Match #diapoNav total height (part 1 of 2: the margin) */
}

td#nextImage .image {
	width: 100%;
	margin-top: 1px; /* Match #diapoNav total height (part 2 of 2: the border) */
	background: url(espace-presecondaire/cropped/004.jpg) no-repeat center left;
}

td#nextImage .frame {
	background-position: center left;
}

td#nextImage .fadeOut {
	background: url(/images/fadeOutRight.png) repeat-y top right;
}

td#nextImage a {
	background: url(/images/RightArrow60.png) no-repeat center;
}

td#nextImage a:hover,
td#nextImage a:focus {
	background: url(/images/RightArrow60hover.png) no-repeat center;
}

.hidden {
	/* IE fix: hidden div to preload CSS hover/focus background images,
		preventing loading flash in IE (the only browser that will brainlessly
		load multiple background-images, one after the other */
	background-image: url(/images/LeftArrow60hover.png);
	background-image: url(/images/RightArrow60hover.png);
}