body
{
 
 background-color:#EFEFEF;
 
  
margin: 0;
 
 }

#global {
   
  margin-left: auto;
  margin-right: auto;
  width: 1400;
}

header
{
	background:url(photos/bronze_chien.jpg) no-repeat top left;
  padding-right: 50px;
margin: 0; 
 margin-right: auto;
    margin-left: auto;
 width: 1300px;
 height: 350px;
color : black;
font-size : 24px;
font-family : verdana,Century Schoolbook L,Impact,"Times New Roman";
font-style : italic;
font-weight :none ;
text-align:right;
opacity : 0,9;
 border-radius: 10px; 
}

section
{&
 
    background-color:#d6d6d6;
    display: block;    
    
    vertical-align: top;
    width: 1350px;
    border-radius: 10px;
    font-size : 14px;
    font-family : verdana,Century Schoolbook L,Impact,"Times New Roman";
      
     margin-left: auto;
    margin-right: auto;
}

article
{
	
	opacity: 1;
    display: inline-block;    
   
    vertical-align: top;
    width: 1070px;
    border-radius: 10px;
    font-size : 14px;
    font-family : verdana,Century Schoolbook L,Impact,"Times New Roman";
     box-shadow: 8px 8px 8px #999;
     padding: 12px;
    margin: 5px;
    
}
	

aside
{
		background-color:#d6d6d6;
     opacity: 1;
    display: inline-block;    
     
    vertical-align: top;
    width: 200px;
      margin-right: auto;
    border-radius: 10px;
    box-shadow: 8px 8px 8px #999;
    font-family : verdana,Century Schoolbook L,Impact,"Times New Roman";
    font-size : 14px;
    padding: 12px;
}

footer
{background-color:#d6d6d6;} 
 
 
 h2,h1
{
    font-family: verdana;
    font-style : italic;
    
}

.imageflottante
{
    float: right;
}

 

 dl
 
 {
 
 font-size: 16px;
 }
 
 a
{
 text-decoration: underline;
 font-style: italic;
 color: black;
 
} 
.dessous

{

    clear: both;

}
 
/* partie positionnement et déco */
#menu a { 
	display:block; 
	color: #fff; 
	text-decoration:none;
}
#menu > li,
#menu > li li {
	position: relative;
	display:inline-block;
	width: 110px;
	padding: 6px 15px;
	background-color: #777;
	background-image: linear-gradient(#aaa, #888 50%, #777 50%,#999);
}
#menu > li li { background: transparent none; }
#menu > li li a { color: #444; }
#menu > li li:hover { background:#eee; }
#menu > li:first-child {
	border-right: 1px solid #777;
	border-radius: 8px 0 0 8px;
}
#menu > li + li {
	border-left: 1px solid #aaa;
	border-right: 1px solid #777;
}
#menu > li:last-child {
	border-right: 0;
	border-left: 1px solid #aaa;
	border-radius: 0 8px 8px 0 ;
}
#menu > li:hover {
	background-color: #999;
	background-image: linear-gradient(#ccc, #aaa 50%, #999 50%,#bbb);
}
/* (presque) fin de la partie positionnement/déco */
/* dans cette déclaration, on fixe le max-height */
#menu ul {
	position: absolute;
	top: 2em; left: 0;
	max-height:0em;	
	margin: 0; padding: 0;
	background-color: #ddd;
	background-image: linear-gradient(#fff,#ddd);
	overflow: hidden;
	transition: 1s max-height 0.3s;
	border-radius: 0 0 8px 8px;
}
/* ici on change la valeur de max-height au :hover */
#menu > li:hover ul {
	/* à adapter, le minimum est le meilleur mais voyez large 😉 */
	max-height: 40em;
}

figure
{

  border: 1px solid black;
   display: inline-block;
    width: 170px;
   margin: auto;
  background :#fff;
} 

 .jDiaporama{
	position:relative;
}

.jDiaporama ul{
	-moz-box-shadow:1px 1px 0.5em #222;
	overflow:hidden;
}

.jDiaporama li{
	list-style-type:none;
	overflow:hidden;
	position:absolute
}

.jDiaporama li img{
	display:block
}

.jDiaporama li .desc{
	position:absolute;
	bottom: 0; left: 0;
	display:none;
	margin:0;
	color:#fff;
	font-size:12px;
	font-family: Arial;
	padding:5px;
	background:url(img/back_desc.png) repeat;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/back_desc.png',sizingMethod='scale');  _background-image:none;
	width:100%;
	height:30px
}

.jDiaporama li .title{
	position:absolute;
	top: 0; left: 0;
	display:none;
	margin:0;
	color:#fff;
	font-size:12px;
	font-family: Arial;
	padding:5px;
}

.jDiaporama li .count{
	position:absolute;
	top: 0; right: 0;
	display:none;
	margin:0;
	color:#fff;
	font-size:12px;
	font-family: Arial;
	padding:5px;
}

.jDiaporama_controls{
	display:none;
}

.jDiaporama_controls a{
	font-weight:normal;
	width:10px;
	height:13px;
	text-indent:-9999px;
	display:block;
	margin:0 3px;
	position:absolute;
}

.jDiaporama_controls .prev{
	background:url(img/controls2.png) no-repeat bottom;
	_background:url(img/controls.gif) no-repeat bottom;
	top:50%;
	margin-top:-16px;
	height:32px;
	width:32px;
	left: 0px
}

.jDiaporama_controls .next{
	background:url(img/controls2.png) no-repeat top;
	_background:url(img/controls.gif) no-repeat top;
	top:50%;
	margin-top:-16px;
	height:32px;
	width:32px;
	right: 0px
}

.jDiaporama_controls .pause{
	background:url(img/playpause.png) no-repeat top;
	_background:url(img/playpause.gif) no-repeat top;
	width:64px;
	height:48px;
	left:50%;
	top:50%;
	margin-left:-32px;
	margin-top:-24px;
}

.jDiaporama_controls .play{
	background:url(img/playpause.png) no-repeat bottom;
	_background:url(img/playpause.gif) no-repeat bottom;
	width:64px;
	height:48px;
	left:50%;
	top:50%;
	margin-left:-32px;
	margin-top:-24px;
}

/**** Status ****/

.jDiaporama_status{
	text-align:center;
	margin-top:10px;
	position:absolute;
	left:50%;
	display:none
}

.jDiaporama_status a{
	background:url(img/bullets.png) no-repeat left;
	_background:url(img/bullets.gif) no-repeat left;
	float:left;
	width:10px;
	height:10px;
	text-indent:-9999px;
	margin-right:5px;
}

.jDiaporama_status a.active, .jDiaporama_status a:hover{
	background:url(img/bullets.png) no-repeat right;
	_background:url(img/bullets.gif) no-repeat right;
}