#top{
	background: url("../images/top.gif") repeat-x scroll 0 0;
	width:100%;
	top:0px;
	height: 110px;
}

#top_contenu{
	width: 1020px;
	margin: 0 auto;
	position:relative;
}


#logo{
	top:5px;
	z-index:-1;
	position:absolute;
}


/* USER ***************************************************/

#user{
	top:10px;
	right:30px;
	right:0px;
	z-index:3;
	line-height: 26px;
	position:absolute;
}

#user ul{
    list-style: none outside none;
}

#user li {
    display: inline;
    float: left;
	padding: 0px 10px 2px 40px;
	margin: 0px 5px;
	font-size:100%;
	color:#666666;
	cursor: pointer;
	font-size:80%;
}

#user li.sign {
	/*background: linear-gradient(#798FB6, #576E94);*/
	background: url("../images/vcard1.png") no-repeat scroll 0 0 #576E94;
	color:white;
	box-shadow : 2px 2px 5px #999 ;
	border-radius: 11px 4px 11px 4px;
	text-shadow: 0 0 1px #123;
	margin: 3px 10px;
}

#user li.sign:hover{
	color:yellow;
}

#user li.sign:active{
	color:yellow;
	background: url("../images/vcard1.png") no-repeat scroll 0 0 #798FB6;
}

#user li.login {
	background: url("../images/secure.png") no-repeat scroll 0 0 #DDD;
	color:#666666;
	box-shadow : 2px 2px 5px #999 ;
	border-radius: 11px 4px 11px 4px;
	text-shadow: 0 0 1px #FFF;
	margin: 3px 10px;
}

#user li.login:hover{
	color:red;
}

#user li.login:active{
	color:red;
	background: url("../images/secure.png") no-repeat scroll 0 0 #EEE;
}

/* SOCIAL ***************************************************/

#social{
	top:60px;
	right:0px;
	z-index:3;
	position:absolute;
}

#social ul{
    list-style: none outside none;
}


#social li {
    display: inline;
    float: left;
	padding: 10px 5px;
	cursor: pointer;
	box-direction: 30%;
	transform: rotate(20deg);
	-webkit-transform: rotate(20deg);
}

#social li img {
	margin: 16px 0px 0px 0px;
	width:32px;
	height:32px;
}

#social li:hover {
	top:-10px;
	color:#e36838;
	box-shadow : 2px 2px 10px #DDD;
	border-radius: 10px 10px 0px 0px;
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1);

}

#social li:hover img {
	margin: 0px;
	width:48px;
	height:48px;
}


/* MENU ***************************************************/

#menu{
	top:55px;
	left:350px;
	right:0px;
	z-index:3;
	line-height: 32px;
	position:absolute;
}

#menu ul{
    list-style: none outside none;
}


#menu li {
    display: inline;
    float: left;
	padding: 0px 10px 2px 10px;
	margin: 0px 5px;
	font-size:100%;
	color:#666666;
	cursor: pointer;
}

#menu li:hover {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.05);
	color:#e36838;
	box-shadow : 2px 2px 10px #DDD;
}

#menu li.select {
	background: #e36838;
	background: linear-gradient(#e36838,#c34b1f);
	color:white;
	box-shadow : 2px 2px 10px #999 ;
}


/* CONTENU ***************************************************/


#contenu{
	width: 1000px;
	height:auto;
	margin: 0 auto;
	background:white;
	box-shadow : 1px 1px 5px #666 ;
	padding: 10px 10px 50px 10px;
	z-index:10;
	position:relative;
}

#page{
	width:970px;
	min-height:500px;
	font-size:100%;
}


/* FOOTER ***************************************************/


#footer{
	width: 1000px;
	height:auto;
	margin: 0 auto;
	padding: 10px 0px;
	font-size:80%;
	color:#66666;
    position: relative;
}

#footer .HTML5Pane {
    min-height: 200px;
    position: absolute;
    width: 300px;
	padding:10px
}

#footer .HTML5Pane a {
	text-decoration:none;
	color:#333;
}

#footer .HTML5Pane a:hover {
	color:red;
}


#footer .pane1{
    left: 0px;
}

#footer .pane2{
    left: 340px;
	border-left: 1px dashed #CCC;
	border-right: 1px dashed #CCC;
}

#footer .pane3{
    left: 680px;
}


/* DIAPO ***************************************************/

#diapo{
	width:1000px;
	height:280px;
	position:relative;
	margin: 0px 0px 20px 0px;
}

#diapo div.filled{
	background: url("../images/filligramme_75.png") repeat scroll 0 0;
	width: 300px;
	z-index:2px;
    position: absolute;
	right:0px;
	top:0px;
	bottom:0px;
	padding: 20px 10px 10px 10px;
}

#diapo div.title{
	z-index: 3px;
    position: absolute;
	top: 20px;
	right: 0px;
	width: 300px;
	color:white;
	font-size:200%;
    letter-spacing: -2px;
}

#diapo div.text{
	z-index: 3px;
    position: absolute;
	right: 0px;
	bottom: 0px;
	width: 300px;
	color:white;
	font-size:90%;
    line-height: 1.1em;
}

#diapo div.text p{
	padding: 10px 10px 10px 0px;
	text-align: justify;
}


/* THUMBS ***************************************************/

#thumbs{
	width:1000px;
	height:300px;
	position:relative;
	margin: 0px 0px 20px 0px;
}

#thumbs div.HTML5Pane{
	background: white;
	border: 1px solid #DDD;
	z-index:1px;
	width: 300px;
    position: absolute;
	top:0px;
	bottom:0px;
	padding: 10px;
	cursor:pointer;
}

#thumbs div.HTML5Pane:hover{
	background: #EEE;
}

#thumbs .pane1{
    left: 0px;
}
#thumbs .pane2{
    left: 340px;
}
#thumbs .pane3{
    right: 0px;
}

#thumbs div.thumbs{
	background: url("../images/filligramme_75.png") repeat scroll 0 0;
	width: 300px;
	height: 120px;
    position: relative;
}

#thumbs div.thumbs div.title{
    position: absolute;
	bottom:0px;
	left:0px;
	right:0px;
	color:white;
	font-size:100%;
	padding: 5px 30px 5px 10px;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1);
    line-height: 35px;
}



#thumbs div.text{
	font-size:90%;
	color:#3333;
	bottom:0px;
	left:0px;
	right:0px;
	z-index:2;
	padding: 5px;
	text-align:justify;
}

#thumbs div.plus{
	background: url("../images/plus.png") no-repeat scroll 0 0;
	color:white;
    position: absolute;
	bottom:0px;	
	right:0px;
	height:40px;
	width:40px;
	z-index:2;
}



scrollbar {
    width: 12px;
}
 
scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}