/*========================================
*   Part specifique css for SlideShow
*/

/* container for slides */
.sShow_img {
	float:left;	
	position:relative;	
	width:640px;
	height:480px;
	cursor:pointer;
	background-color: #fff;
}

/* single slide */
.sShow_img div {
	display:none;
	position:absolute;
	top:0;
	left:0;		
	padding:5px;
	width:650px;
	height:470px;
}

/* header */
.sShow_img h3 {
	margin:0 0 20px 0;
	color:#456;
}

/* container for slides */
.pres{
	height:280px;
	width:370px;
}


/* tabs (those little circles below slides) */
.sShow_tabs{
	clear:both;
	margin-left:5px;
}

/* single tab */
.sShow_tabs a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
        margin-left: 1px;
	background:url(../img/navigator.png) 0 0 no-repeat;
	display:block;
	font-size:1px;		
}

/* mouseover state */
.sShow_tabs a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
.sShow_tabs a.current {
	background-position:0 -16px;     
} 	


/* prev and next buttons */
.forward, .backward {
	float:left;
	margin-top:140px;
	background:#fff url(../img/hori_large.png) no-repeat;
	display:block;
	width:30px;
	height:30px;
	cursor:pointer;
	font-size:1px;
	text-indent:-9999em;	
}

/* next */
.forward 			{ background-position: 0 -30px; clear:right; }
.forward:hover 		{ background-position:-30px -30px; }
.forward:active 	 	{ background-position:-60px -30px; } 


/* prev */
.backward:hover  	{ background-position:-30px 0; }
.backward:active  	{ background-position:-60px 0; }

/* disabled navigational button. is not needed when tabs are configured with rotate: true */
.disabled {
	visibility:hidden !important;		
}



/* main vertical scroll */
#sShow{
	margin:0px auto;
	width:580px;
	position:0px;
}
#sShow_main {
	position:relative;
	overflow:hidden;
	height: 490px;
}

/* root element for pages */
#sShow_pages {
	position:absolute;
	height:20000em;
}

/* single page */
.sShow_page {
	margin: 0px 0px 25px 0;
	padding: 10px;

	height:460px;
	width:515px;
	border:1px solid #666;	
	background-color:#fff;
		
	/* CSS3 tweaks for modern browsers */
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-moz-box-shadow:0 0 25px #666;
	-webkit-box-shadow:0 0 25px #666;
}

/* root element for horizontal scrollables */
.scrollable {
	position:relative;
	overflow:hidden;
	width: 510px;
	height: 445px;
}

/* root element for scrollable items */
.scrollable .items {
	width:20000em;
	position:absolute;
	clear:both;
}

/* single scrollable item */
.item {
	float:left;
	cursor:pointer;
	width:500px;
	padding:10px;
}

/* main navigator */
#sShow_main_navi {
	float:left;
	padding:0px !important;
	margin:0px !important;
}

#sShow_main_navi li {
	background-color:#B4CCD0;
	border-bottom:1px solid #666;
	border-left:1px solid #666;
	border-top:1px solid #666;
	clear:both;
	color:#FFFFFF;
	font-size:12px;
	height:75px;
	list-style-type:none;
	margin-top:2px;
	padding: 5px 0; 
	width:30px;
	cursor:pointer;

	/* CSS3 tweaks for modern browsers */	
	-moz-border-radius:5px 0px 0px 5px;
	-webkit-border-radius:5px 0px 0px 5px;
	-moz-box-shadow: #666 5px 2px 25px;
	-webkit-box-shadow: #666 5px 2px 25px;
}
#sShow_main_navi li.first{
	margin-top:15px;
	border-top:1px solid #666;
}

#sShow_main_navi li:hover {
	background-color:#fff;
}

#sShow_main_navi li.active {
	background-color:#fff;
}

#sShow_main_navi img {
	float:left;
	margin-right:10px;
}

#sShow_main_navi strong {
	display:block;
}

#sShow_main div.navi {
	margin: 0px;
	margin-left: 5px;
	padding: 0px;
	cursor:pointer;
}

/* this makes it possible to add next button beside scrollable */
div.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
	display:block;
	width:18px;
	height:18px;
	background:url(../img/left.png) no-repeat;
	float:left;
	margin:43px 10px;
	cursor:pointer;
	font-size:1px;
}

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
	background-position:0px -18px;		
}

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}

/* next button uses another background image */
a.next, a.nextPage {
	background-image:url(../img/right.png);
	clear:right;	
}

/*********** width navigator ***********/

/* position and dimensions of the navigator */
div.navi {
	margin:128px;
	width:200px;
	height:20px;
}
/* items inside navigator */
div.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(../img/navigator.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
div.navi a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
div.navi a.active {
	background-position:0 -16px;     
}



/*========================================
*   Part specifique css for Overlay
*/

/* the overlayed element */
div.overlay {
	/* initially overlay is hidden */
	display:none;
	background-image: url(../img/white.png);
	padding: 50px;
	/* dimensions after the growing animation finishes  */
	margin-bottom: 20px;
}

/* default close button positioned on upper right corner */
div.overlay div.close {
	background-image: url(../img/close.png);
	position:absolute;
	right: 10px;
	top: 10px;
	cursor:pointer;
	height:35px;
	width:35px;
}

.no_mask {
	background:none;
}

/* get rid of those system borders being generated for A tags */
a:active {
  outline:none;
}

:focus {
  -moz-outline-style:none;
}


/*========================================
*   Part specifique css for Externel Page
*/

/* use a semi-transparent image for the overlay */
#overlay {
    color:#666666;
    width: 680px;
    height: 550px;
}

/* container for external content. uses vertical scrollbar, if needed */
div.contentWrap {
    height: 520px;
    overflow:auto;
}

/*========================================
*   Part specifique css for Tooltip
*/

/* tooltip styling */ 
.tooltip { 
    display:none; 
    background-color:#3A3A3A;
	margin: 2px;
    padding:10px; 
    width:220px; 
    color:#fff;
	border: 1px solid #3A3A3A;	
} 

.tooltip h3{font-size:16px;color: #FF6235;}
.tooltip p{color:#fff;}
.tooltip ul{margin-left: 10px;padding-left: 3px;}
.tooltip .alert {color:#F7E991; } 
.aide {margin-left: 120px;}
.aideMenu {position:absolute;}
.icoMenuS {top:265px;}
.icoGallery {top:240px;}
.icoNuanciers {top:235px;margin-left: -20px;}
.icoContact {top:235px;margin-left: -20px;}

/* a .label element inside tooltip */ 
.tooltip .label { 
    color:yellow; 
    width:35px; 
} 
 
.tooltip a { 
    color:#ad4; 
    font-size:11px; 
    font-weight:bold; 
}


/*========================================
*   Part specifique css for Scroll Navigator
*/

#scrollnavi {
	margin: 0px auto;
	padding: 0px;
	margin-left: 70px;
	width: 580px;
}

.scroll .items{
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}

/* single scrollable item */
.scroll img {
	float:left;
	margin:0px;
	background-color:#fff;
	padding:5px;
	cursor:pointer;
	width:110px;
	height:85px;
	
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}

/* active item */
.scroll .active {
	border:2px solid #3A3A3A;
	z-index:9999;
	position:relative;
}

/* this makes it possible to add next button beside scrollable */
.scroll {
	float:left;	
}

.scroll{
	/* required settings */
	margin-left: 5px;
	position:relative;
	overflow:hidden;
	width: 485px;
	height:125px;
	/*background-color: #fff;*/
}

.gallery_img{
	float:left;	
	position:relative;	
	padding: 5px;
	cursor:pointer;
	background-color: #fff;
}

/* single slide */
.gallery div {
	display:none;
	position:absolute;
	top:0;
	left:0;		
	padding:50px;
	width:650px;
	height:470px;
}

/* header */
.gallery_img h3 {
	margin:0 0 20px 0;
	color:#456;
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	float:left;
	display:block;
	margin:5px;
	margin-top:40px;
	width:30px;
	height:30px;
	font-size:1px;
	cursor:pointer;
	background:url(../img/hori_large.png) no-repeat;
}

/* right */
a.right 			{ background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover 	{ background-position:-30px -30px; }
a.right:active 	{ background-position:-60px -30px; } 

/* left */
a.left			{ margin-left: 0px; } 
a.left:hover  	{ background-position:-30px 0; }
a.left:active  	{ background-position:-60px 0; }

/* up and down */
a.up, a.down		{ 
	background:url(../img/vert_large.png) no-repeat; 
	float: none;
	margin: 10px 50px;
}

/* up */
a.up:hover  		{ background-position:-30px 0; }
a.up:active  	{ background-position:-60px 0; }

/* down */
a.down 			{ background-position: 0 -30px; }
a.down:hover  	{ background-position:-30px -30px; }
a.down:active  	{ background-position:-60px -30px; } 


/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
} 	


/* position and dimensions of the navigator */
.navi {
	margin-left:328px;
	width:200px;
	height:20px;
}


/* items inside navigator */
.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(../img/navigator.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
.navi a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
.navi a.active {
	background-position:0 -16px;     
}

/*** override styling in external stylesheets ***/



/* remove margins from the image */
.items img {
	/*margin:0px;*/
}

/* make A tags our floating scrollable items */
.items a {
	display:block;
	float:left;
	margin:20px 15px;
} 

/* scrollable should not disable gallery navigation */
#gallery_ovl .disabled {
	visibility:visible !important;
}

#gallery_ovl .inactive {
	visibility:hidden !important;
}


/* the overlayed element */
.simple_overlay {
	
	/* must be initially hidden */
	display:none;
	
	/* place overlay on top of other elements */
	z-index:10000;
	
	/* styling */
	/*background-color:#333;*/
	background-color:#fff;
	
	width:675px;	
	min-height:200px;
	border:1px solid #666;
	padding: 15px;
	
	/* CSS3 styling for latest browsers */
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	-moz-box-shadow:0 0 90px 5px #000;
	-webkit-box-shadow: 0 0 90px #000;	
}

/* close button positioned on upper right corner */
.simple_overlay .close {
	background-image:url(../img/close.png);
	position:absolute;
	right:-15px;
	top:-15px;
	cursor:pointer;
	height:35px;
	width:35px;
}

/* the large image. we use a gray border around it */
#img {
	border:1px solid #666;
}

/* "next image" and "prev image" links */
.next, .prev {
	position:absolute;
	bottom:42px;
	cursor:pointer;
	display:block;
	width:30px;
	height:30px;
	background:url(../img/hori_large.png) no-repeat;
}

/* next */
.next			{ background-position: 0 -30px; clear:right; margin-right: 0px; }
.next:hover 		{ background-position:-30px -30px; }
.next:active 	 { background-position:-60px -30px; } 

/* prev */
.prev			{ margin-left: 0px;} 
.prev:hover  	{ background-position:-30px 0; }
.prev:active  	{ background-position:-60px 0; }

.prev {
	left:5px;
	border-left:0px;
}

.next {
	right:5px;
	border-right:0px;
}

.next:hover, .prev:hover {
/*
	text-decoration:underline;
	background-color:#fff;
*/
}

/* when there is no next or previous link available this class is added */
.disabled {
	visibility:hidden;		
}

/* the "information box" */
.info {
	position:absolute;
	bottom:20px;
	left:8px;	
	padding:20px 45px 20px 45px;
	border-top:1px solid #666;
	border-bottom:1px solid #666;
}

.info strong {
	display:block;	
}

.info span {
	float: right;
	display:block;	
}

/* progress indicator (animated gif). should be initially hidden */
.progress {
	position:absolute;
	top:45%;
	left:50%;
	display:none;
}

/* everybody should know about RGBA colors. */
.info {
	background-color:#fff!important;
	/*background:rgba(0, 0, 0, 0.6) url(../img/h80.png) repeat-x;	*/	
}