/*CADRE GENERAL*/

.photo {
margin-left : auto;
margin-right : auto;
margin-top : 5px;
padding : 12px;
background : #000020;
width : 670px;
height : 430px;
text-align : left;
position : relative;
}
.photo a {
color : #000;
}
.photo a:hover {
text-decoration : none;
}
.photo a:visited {
color : #000;
}

/*PHOTO D'ACCUEIL*/

img.default {
position : absolute;
left : 370px;
top : 75px;
z-index : 0;
}

/*MENU DU  HAUT*/

.photo ul.topic {
padding : 0;
margin : 0;
list-style : none;
width : 360px;
height : auto;
position : relative;
z-index : 10;
}
.photo ul.topic li {
display : inline;
width : 60px;
height : 20px;
float : left;
margin : 0;
}
.photo ul.topic li a.set {
display : block;
font-size : 17px;
width : 60px;
height : 10px;
background : transparent;
text-align : center;
line-height : 16px;
color : #ff7d00;
text-decoration : none;
margin : 0;
}
.photo ul.topic li a ul, .photo ul.topic li ul {
display : none;
}
.photo ul.topic li a:hover, .photo ul.topic li:hover a {
border : 0;
color : #ffff80;
}

/*ENCADREMENT DU  CADRE*/

.photo ul.topic li a:hover em, .photo ul.topic li:hover em {
display : block;
position : absolute;
left : -17px;
top : -17px;
width : 696px;
height : 456px;
z-index : -1;
border : 4px ridge #ff7d00;
}

/*PLACEMENT DU CADRE À VIGNETTES*/

.photo ul.topic li a:hover ul, .photo ul.topic li:hover ul {
display : block;
position : absolute;
left : 0;
top : 49px;
list-style : none;
padding : 0;
margin : 0;
width : 240px;
height : 150px;
}

/*PLACEMENT DES VIGNETTES*/

.photo ul.topic li a:hover ul li, .photo ul.topic li:hover ul li {
display : inline;
width : 44px;
height : 44px;
float : left;
margin : 5px;
cursor : pointer;
}
.photo ul.topic li a:hover ul li a, .photo ul.topic li:hover ul li a {
display : block;
width : 44px;
height : 44px;
cursor : default;
background : url(arrow.gif) no-repeat;
float : left;
text-decoration : none;
cursor : pointer;
}

/*DESCRIPTIF*/

.photo ul.topic li a:hover ul li a b, .photo ul.topic li:hover ul li a b {
visibility : hidden;
position : absolute;
width : 230px;
height : 115px;
top : 270px;
left : 0;
color : #ffff80;
font-weight : normal;
font-size : 18px;
padding : 6px;
text-align : left;
line-height : 17px;
}

/*VIGNETTES*/

.photo ul.topic li a:hover ul li a img, .photo ul.topic li:hover ul li a img {
display : block;
width : 38px;
height : 38px;
border : 1px solid #ff7d00;
border-top-color : #ff7d00;
}
.photo ul.topic li a:hover ul li a:hover, .photo ul.topic li:hover ul li a:hover {
white-space : normal;
position : relative;
}

/*APERCU*/

.photo ul.topic li a:hover ul li a.vert:hover img, .photo ul.topic li:hover ul li a.vert:hover img {
position : absolute;
left : -18px;
top : -30px;
width : 72px;
height : 96px;
border-color : #ff7d00;
cursor : pointer;
}
.photo ul.topic li a:hover ul li a.hor:hover img, .photo ul.topic li:hover ul li a.hor:hover img {
position : absolute;
left : -30px;
top : -18px;
width : 96px;
height : 72px;
border-color : #ff7d00;
cursor : pointer;
}
.photo ul.topic li:hover ul li a:focus, .photo ul.topic li:hover ul li a:active, .photo ul.topic li a:hover ul li a:active {
position : static;
outline : 0;
cursor : pointer;
}

/*VUES*/

.photo ul.topic li:hover ul li a:focus.vert img, .photo ul.topic li:hover ul li a:active.vert img, .photo ul.topic li a:hover ul li a:active.vert img {
position : absolute;
left : 345px;
top : -48px;
width : 303px;
height : 404px;
padding : 12px;
background : #000;
border : 0;
z-index : 10;
}
.photo ul.topic li:hover ul li a:focus.hor img, .photo ul.topic li:hover ul li a:active.hor img, .photo ul.topic li a:hover ul li a:active.hor img {
position : absolute;
left : 245px;
top : 0;
width : 404px;
height : 303px;
padding : 12px;
background : #000;
border : 0;
z-index : 10;
}
.photo ul.topic li:hover ul li a:focus b, .photo ul.topic li:hover ul li a:active b, .photo ul.topic li a:hover ul li a:active b {
visibility : visible;
}