body,ul{
margin:0;
padding:0;
background-color:white/*#999*/;
}
ul{
list-style:none;
}
#header{
position:relative;
width:100%;
height:40px;
background-color:white/*#333*/;
}
#logo{
position:relative;
width:316px;
height:40px;
background-image:url(pics/btn/small.jpg);
margin:auto;
cursor:pointer;
}
#hide,#show{
position:absolute;
width:40px;
height:40px;
top:0;
right:0;
transition:opacity linear 400ms;
}
#show{
background-image:url(pics/btn/smallshow.jpg);
}
#hide{
background-image:url(pics/btn/smallhide.jpg);
opacity:0;
}
#nav{
position:absolute;
width:80%;
height:auto;
margin-left:10%;
margin-right:10%;
top:45px;
}
#menu{
display:none;
}
li{
width:100%;
height:44px;
background-color:#909090/*#ddd*/;
margin:auto;
margin-bottom:4px;
cursor:pointer;
opacity:0;
/*border:solid 1px silver;*/
/*box-shadow: 2px 2px 2px 2px #333;*/
/*text-shadow: 2px 2px 4px #333;*/
}
li img{
display:none;
}
li .caption{
text-align:center;
line-height:44px;
font-family:Arial;
color:white/*#999*/;
font-size:1.25em;
/*font-weight:bold;*/
}
/* IMG ETC */
#all{
position:relative;
width:100%;
height:auto;	
}
#content{
position:relative;
width:96%;
height:auto;
margin:auto;
margin-top:5px;
}
#pic img{
max-width:100%;
transition:opacity linear 400ms;
/*box-shadow: 1px 1px 1px 1px red;*/
}
#trans{
position:absolute;
top:0;
cursor:pointer;	
}
#trans img{
max-width:100%;
}
#arrow{
position:absolute;
width:100%;
height:auto;
top:0;
display:none;
z-index:101;
}
#left,#right{
position:absolute;
width:100px;
height:auto;
top:0;
cursor:pointer;
opacity:0;
transition:opacity linear 400ms;
cursor:pointer;
}
#right{
right:0;
}
#right img,#left img{
position:absolute;
width:100px;
height:240px;
}
#right:hover,#left:hover{
opacity:1;
}
.loading{
background-image:url(pics/anim.gif);
background-repeat:no-repeat;
background-position:center;
}
#smallnav{
position:relative;
width:80%;
height:15px;
margin:auto;
margin-top:5px;
overflow:hidden;
display:none;
}
#caption{
position:absolute;
width:auto;
height:12px;
right:0;
text-align:right;
line-height:12px;
font-family:Arial;
font-size:.8em;
color:#757575;
display:none;
padding-right:2px;
}
#dots{
position:absolute;
width:auto;
height:10px;
overflow:hidden;
}
.repere{
position:relative;
width:10px;
height:10px;
float:left;
margin-left:1px;
}
.gris,.rouge{
position:absolute;
width:10px;
height:10px;
}
#loader{
position:absolute;
width:100%;
height:31px;
top:180px;
}
#footer{
position:absolute;
width:100%;
height:20px;
bottom:0;	
}
#credits{
position:relative;
width:300px;
height:20px;
margin:auto;	
}
#text{
line-height:20px;
text-align:center;
font-family:Arial;
font-size:xx-small;
color:#666;	
}
#containerextra{
display:none;
}
/*   MEDIA QUERIES   */	
@media (min-width:360px){
li{
height:40px;
}
li .caption{
line-height:40px;
}
}
@media (min-width:524px){
#content{
width:428px;
}
#smallnav{
width:428px;
}

}
@media (min-width:768px){
#nav{
width:100%;
margin-left:0;
margin-right:0;
top:115px;
}
#menu{
position:relative;
width:570px;
height:auto;
margin:auto;
}
li{
position:relative;
width:180px;
height:120px;
float:left;
margin:5px;
background-color:transparent;
}

li img{
display:block;
border-radius:15px/15px;
box-shadow: 1px 1px 6px 2px #555;
}
li .caption{
position:absolute;
width:180px;
height:20px;
top:100px;
background-color:rgba(255,255,255,.5);
line-height:20px;
color:#333;
font-size:.8em;
font-weight:bold;
border-radius:0px 0px 15px 15px/0px 0px 15px 15px;
}
#header{
height:100px;
}
#logo{
position:relative;
width:758px;
height:100px;
background-image:url(pics/btn/medium.jpg);
background-repeat:no-repeat;
margin:auto;
}
#hide,#show{
position:absolute;
width:90px;
height:100px;
top:0;
right:0;
transition:opacity linear 400ms;
}
#show{
background-image:url(pics/btn/mediumshow.jpg);
}
#hide{
background-image:url(pics/btn/mediumhide.jpg);
}
#content{
position:relative;
margin-top:10px;
}
#pic{
width:428px;
}
#pic img{
/*box-shadow: 1px 1px 5px 2px #555;*/
}
}
@media (min-width:1024px){
li{
	display;block;
}
#nav{
top:85px;
}
li img{
	opacity:.75;
	transition:all .5s linear;
}
li img:hover{
	opacity:1;
}
#menu{
width:960px;
height:auto;
margin:auto;
}
li{
margin:6px;
}
#header{
height:80px;
}
#logo{
position:relative;
width:900px;
height:80px;
background-image:url(pics/btn/medium80.jpg);
background-repeat:no-repeat;
margin:auto;
}
#hide,#show{
position:absolute;
width:90px;
height:80px;
top:0;
right:0;
transition:opacity linear 400ms;
}
#show{
background-image:url(pics/btn/medium80show.jpg);
}
#hide{
background-image:url(pics/btn/medium80hide.jpg);
}
#content{
width:960px;	
}
#pic{
width:960px;
}
#pic img{
position:relative;
}
}
@media (min-width:1300px){
#header{
height:110px;
}
#logo{
width:960px;
height:110px;
background-image:url(pics/btn/big.jpg);
background-repeat:no-repeat;
margin:auto;
}
#hide,#show{
position:absolute;
width:90px;
height:110px;
top:0;
right:0;
transition:opacity linear 400ms;
}
#show{
background-image:url(pics/btn/bigshow.jpg);
}
#hide{
background-image:url(pics/btn/bighide.jpg);
}
#nav{
top:120px;
}
#footer{
top:80px;
}
#credits{
width:960px;	
font-size:small;
color:white;	
}
#text{
position:absolute;
width:450px;
left:145px;
top:-10px;
text-align:left;
color:#999;
font-size:.75em;
letter-spacing:.25px;
}
#containerextra{
display:block;
position:absolute;
width:100%;
height:25px;
bottom:0;
}
#extra{
position:relative;
width:100%;
height:25px;
margin:auto;

}
#contact{
width:100%;
height:25px;
line-height:25px;
text-align:center;
font-family:Verdana;
font-size:.75em;
color:#666;
}
}
/* MAX PIC 880 */