img { border: none; }

body {
	background-color: #FFde00;
	margin-left: 00px;
	font-family: trebuchet, arial , sans-serif;
	}
	
.contenu-central { 
	margin-left: 400px;
	position: absolute;
	top: 405px;
	}

/* =les liens
----------------------------------------------- */

a:link {
	color: #ffffff;
	text-decoration:none;
	}
a:visited {
	color: #ffffff;
	text-decoration:none;
	}
a:hover {
	color: #FFde00;
	text-decoration:none;
	}
a.mail {
	color: black;
	text-decoration:underline;
	}

/* =le logo spad en haut
----------------------------------------------- */
#box1  {
	margin-left: 200px;
	position: absolute;
	top: 10px;
	}

/* =Solution pour acces dificiles
----------------------------------------------- */
#box2 {
	margin-left: 43px;
	position: absolute;
	top: 50px;
			}

/* =le menu (presentation;metiers;actualités ...)
----------------------------------------------- */
#box3 {
	text-transform: capitalize;
	text-align: center;
	width: 160px;
	height: 320px;
	color: #ffffff;
	background-color: black;
	border-width: 1px;
	margin-left: 200px;
	position: absolute;
	top: 115px;
	z-index: 2;
		}

/* =la bande noire a gauche du texte
----------------------------------------------- */
#box4 {
	float: left;
	width: 160px;
	background-color: black;
	height: 420px;
	position: absolute;
	top: 430px;
	left: 200px;
		}

/* =grandes images
----------------------------------------------- */
#box31 {
	border: 1px solid black;
	position: absolute;
	top: 145px;
	border-bottom-color:#F6dc00;
		}

/* =petites images (metiers)
----------------------------------------------- */
#box50 {
	text-shadow: 1px 1px 0px #000000;
	border: 3px solid black;
	position: absolute;
	top: 145px;
	left: 360px;
	}
#box51 {
	text-shadow: 1px 1px 0px #000000;
	border: 3px solid black;
	position: absolute;
	top: 195px;
	left: 360px;
	}	
#box52 {
	text-shadow: 1px 1px 0px #000000;
	border: 3px solid black;
	position: absolute;
	top: 245px;
	left: 360px;
	}	
#box53 {
	text-shadow: 1px 1px 0px #000000;
	border: 3px solid black;
	position: absolute;
	top: 295px;
	left: 360px;
	}	
#box54 {
	text-shadow: 1px 1px 0px #000000;
	border: 3px solid black;
	position: absolute;
	top: 345px;
	left: 360px;
	border-bottom-color:#F6dc00;
	}	
	
/* = sous metiers page "métiers maintenance ..."
----------------------------------------------- */
#box70 {
	text-shadow: 1px 1px 0px #000000;
	position: absolute;
	top: 160px;
	left: 420px;
		}
#box71{
	text-shadow: 1px 1px 0px #000000;
	position: absolute;
	top: 210px;
	left: 420px;
		}
#box72{
	text-shadow: 1px 1px 0px #000000;
	position: absolute;
	top: 260px;
	left: 420px;
		}
#box73{
	text-shadow: 1px 1px 0px #000000;
	position: absolute;
	top: 310px;
	left: 420px;
		}
#box74{
	text-shadow: 1px 1px 0px #000000;
	position: absolute;
	top: 360px;
	left: 420px;
		}
		
/* = logo du cordiste
----------------------------------------------- */
#box5 {
	float: left;
	margin-left: 200px;
	position: absolute;
	top: 758px;
		}

/* = image de gauche dans la page "nos metiers"
----------------------------------------------- */
#box8 { 
	border: 3px solid black;
	position: absolute;
	top: 146px;
	border-bottom-color:#F6dc00;
	}


/* = la pastille avec les 3 symboles
----------------------------------------------- */
#box9 {
	float: right;
	position: absolute;
	left: 920px;
	}

/* = le warning
----------------------------------------------- */
#box32 {
	position: absolute;
	top: 388px;
	z-index: 3;
	}

/* = la solution est dans nos cordes
----------------------------------------------- */
#box6 {
	float: right;
	position: absolute;
	top: 890px;
	left: 950px;
	font-size: 25px;
	font-weight: bold;
	}

/* ="mention legale" dans la page "index"
----------------------------------------------- */
#box11 {
	position: absolute;
	top: 905px;
	left: 50px;
	font-size: 10px;
	}

/* = texte sur les photos des sous metiers
----------------------------------------------- */
#sousmetiers1 {
	text-shadow: 1px 1px 0px #FFde00;
	font-size: 25px;
	font-weight: bold;
	position: absolute;
	top: 310px;
	left: 1020px; 
	}
#sousmetiers2 {
	text-shadow: 1px 1px 0px #000000;
	font-size: 25px;
	color: #FFde00;
	font-weight: bold;
	position: absolute;
	top: 310px;
	left: 1020px; 
	}

/* = le logo spad en bas
----------------------------------------------- */
#logo2 {
	position: absolute;
	top: 820px;
	left: 1060px;
	}
	
/* = les logos validation dans page cachée
----------------------------------------------- */
#box80 {
	position: absolute;
	top: 800px;
	left: 420px;
	}

/* tout le reste = le diaporama des sous metiers
----------------------------------------------- */
* {padding: 0;  }
* {transition-duration: 1.2s;} 

/* =parametre du diaporama
----------------------------------------------- */

.box_skitter {
	box-shadow: 20px 10px 8px #DBA901;
	position: absolute;
	top: 415px;
	left: 375px;
	width: 900px;
	height: 300px;
	background: #000;
}
.box_skitter img {
	max-width: none;
} /* Tip for stildv */
.box_skitter ul {
	display: none;
}
.box_skitter .container_skitter {
	overflow: hidden;
	position: relative;
}
.box_skitter .image {
	overflow: hidden;
}
.box_skitter .image img {
	display: none;
}

/* =Box clone
-------------------------------------------------------------- */
.box_skitter .box_clone {
	position: absolute;
	top: 0;
	left: 0;
	width: 100px;
	overflow: hidden;
	display: none;
	z-index: 20;
}
.box_skitter .box_clone img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
}

/* =les fleches gauche et droite
-------------------------------------------------------------- */

.box_skitter .prev_button {
	position: absolute;
	top: 50%;
	left: 00px;
	width: 0px;
	height: 0px;
	overflow: hidden;
}

.box_skitter .next_button {
	position: absolute;
	top: 50%;
	right: 0px;
	width: 0px;
	height: 0px;
	overflow: hidden;
	
}



/* =les points (rouge) en bas de l'image            
-------------------------------------------------------------- */
.box_skitter .info_slide_dots {
	position: absolute;
	bottom: -40px;
	z-index: 151;
	padding: 5px 0 5px 5px;
	border-radius: 50px;
}
.box_skitter .info_slide_dots .image_number {
	background: #000000;
	float: left;
	margin: 0 5px 0 0;
	cursor: pointer;
	border-radius: 50px;
	width: 18px;
	height: 18px;
	text-indent: -9999em;
	overflow: hidden;
	
}
.box_skitter .info_slide_dots .image_number:hover {
	background: #000;
}
.box_skitter .info_slide_dots .image_number_select, .box_skitter .info_slide_dots .image_number_select:hover {
	background: #ff0000;
	float: left;
	margin: 0 5px 0 0;
}

/* =texte sur l'image
-------------------------------------------------------------- */
.box_skitter .label_skitter {
	z-index: 150;
	position: absolute;
	bottom: 0px;
	left: 0px;
	display: none;
}
.box_skitter .label_skitter {
	z-index: 150;
	position: absolute;
	top: 30px;
	left: 250px;
	color: #ffde00;
	display: none;
	opacity: 0.8;
	
}
.box_skitter .label_skitter p {
	padding: 10px;
	margin: 0;
	font-size: 20px;
	letter-spacing: -1px;
}

/* = zoom dans les petits point en bas de l'image
-------------------------------------------------------------- */
.box_skitter .preview_slide {
	display: none;
	position: absolute;
	z-index: 152;
	bottom: 30px;
	left: -40px;
	width: 100px;
	height: 100px;
	background: #fff;
	border: 1px solid #222;
	
	overflow: hidden;
}
.box_skitter .preview_slide ul {
	height: 100px !important;
	overflow: hidden !important;
	margin: 0 !important;
	list-style: none !important;
	display: block !important;
	position: absolute !important;
	top: 0;
	left: 0;
}
.box_skitter .preview_slide ul li {
	width: 100px !important;
	height: 100px !important;
	overflow: hidden !important;
	float: left !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative !important;
	display: block !important;
}
.box_skitter .preview_slide ul li img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	height: 150px !important;
	width: auto !important;
}

/* =parametre du diaporama actualitée
----------------------------------------------- */
.box_skitter1 {
	box-shadow: 20px 10px 8px #DBA901;
	position: absolute;
	top: 410px;
	left: 456px;
	width: 744px;
	height: 400px;
	background: #000;
}
.box_skitter1 img {
	max-width: none;
} /* Tip for stildv */
.box_skitter1 ul {
	display: none;
}
.box_skitter1 .container_skitter {
	overflow: hidden;
	position: relative;
}
.box_skitter1 .image {
	overflow: hidden;
}
.box_skitter1 .image img {
	display: none;
}

/* =Box clone actualitée
-------------------------------------------------------------- */
.box_skitter1 .box_clone {
	position: absolute;
	top: 0;
	left: 0;
	width: 100px;
	overflow: hidden;
	display: none;
	z-index: 20;
}
.box_skitter1 .box_clone img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
}

/* =les fleches gauche et droite actualitée
-------------------------------------------------------------- */

.box_skitter1 .prev_button {
	position: absolute;
	top: 50%;
	left: 00px;
	width: 0px;
	height: 0px;
	overflow: hidden;
}

.box_skitter1 .next_button {
	position: absolute;
	top: 50%;
	right: 0px;
	width: 0px;
	height: 0px;
	overflow: hidden;
	
}



/* =les points (rouge) en bas de l'image     actualitée      
-------------------------------------------------------------- */
.box_skitter1 .info_slide_dots {
	position: absolute;
	bottom: -40px;
	z-index: 151;
	padding: 5px 0 5px 5px;
	border-radius: 50px;
}
.box_skitter1 .info_slide_dots .image_number {
	background: #000000;
	float: left;
	margin: 0 5px 0 0;
	cursor: pointer;
	border-radius: 50px;
	width: 18px;
	height: 18px;
	text-indent: -9999em;
	overflow: hidden;
	
}
.box_skitter1 .info_slide_dots .image_number:hover {
	background: #000;
}
.box_skitter1 .info_slide_dots .image_number_select, .box_skitter .info_slide_dots .image_number_select:hover {
	background: #ff0000;
	float: left;
	margin: 0 5px 0 0;
}

/* =texte sur l'image actualitée
-------------------------------------------------------------- */
.box_skitter1 .label_skitter {
	z-index: 150;
	position: absolute;
	bottom: 0px;
	left: 0px;
	display: none;
}
.box_skitter1 .label_skitter {
	z-index: 150;
	position: absolute;
	top: 100px;
	left: 250px;
	color: #ffde00;
	display: none;
	opacity: 0.8;
	
}
.box_skitter1 .label_skitter p {
	padding: 10px;
	margin: 0;
	font-size: 20px;
	letter-spacing: -1px;
}

/* = zoom dans les petits point en bas de l'image actualitée
-------------------------------------------------------------- */
.box_skitter1 .preview_slide {
	display: none;
	position: absolute;
	z-index: 152;
	bottom: 30px;
	left: -40px;
	width: 100px;
	height: 100px;
	background: #fff;
	border: 1px solid #222;
	overflow: hidden;
}
.box_skitter1 .preview_slide ul {
	height: 100px !important;
	overflow: hidden !important;
	margin: 0 !important;
	list-style: none !important;
	display: block !important;
	position: absolute !important;
	top: 0;
	left: 0;
}
.box_skitter1 .preview_slide ul li {
	width: 100px !important;
	height: 100px !important;
	overflow: hidden !important;
	float: left !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative !important;
	display: block !important;
}
.box_skitter1 .preview_slide ul li img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	height: 150px !important;
	width: auto !important;
}