body {
	font-family: nobel;
	width: 640px;
}

#bodyContent {
	position: relative;
	overflow: hidden;
	float: left;
	width: 640px;
}

	#metiers {
		position: relative;
		float: left;
		width: 100%;
		height: 1504px;
		background: url(../images/metiers/background.png) top no-repeat;
	}

	#metiers h1 {
		float: left;
		margin: 50px 0 0 170px;
		color: #f3722e;
		font-size: 48px;
		text-transform: uppercase;
	}

	#metiers .trait {
		float: left;
		width: 187px;
		margin: 5px 0 0 170px;
	}

	#metiers h3 {
		float: left;
		width: 225px;
		margin: 10px 0 0 145px;
		font-size: 24px;
		color: #fff;
		text-transform: uppercase;
		text-align: center;
	}

		#metiers h3 span {
			color: #f3722e;
			font-size: 48px;
		}

	#metiers #lienMenu {
		position: absolute;
		top: 110px;
		right: 140px;
		width: 61px;
		height: 60px;
	}

	#metiers #contenu {
		float: left;
		width: 100%;
		margin: 0;
		padding: 150px 0 0 0;
	}

		#contenu #lienArts {
			float: left;
			width: 350px;
			margin: 0 0 40px 170px;
			background: url(../images/metiers/fleche.png) no-repeat 220px 35px;
		}

		#contenu #lienWeb {
			float: left;
			width: 350px;
			margin: 0 0 45px 95px;
			background: url(../images/metiers/fleche.png) no-repeat 295px 10px;
		}

		#contenu #lienAudio {
			float: left;
			width: 350px;
			margin: 0 0 20px 95px;
			background: url(../images/metiers/fleche.png) no-repeat 295px 20px;
		}

		#contenu #lienEvent {
			float: left;
			width: 350px;
			margin: 0 0 0 150px;
			background: url(../images/metiers/fleche.png) no-repeat 240px 45px;
		}

	#menu {
		position: absolute;
		top: 0;
		left: -640px;
		float: left;
		width: 640px;
		background-color: #25292b;
	}

		#menu #header {
			float: left;
			width: 100%;
			height: 120px;
			padding: 65px 0;
			text-align: center;
		}

		#menu #navigation {
			float: left;
			width: 100%;
		}

			#navigation li {
				float: left;
				width: 100%;
				border-top: 1px solid #56595a;
			}

			#navigation li.last {
				border-bottom: 1px solid #56595a;
			}

				#navigation li a {
					float: left;
					width: 100%;
					line-height: 75px;
					font-size: 30px;
					color: #fff;
					text-align: center;
					text-transform: uppercase;
					text-decoration: none;
				}

				#navigation li a:hover, #navigation li a:active {
					background-color: #f3722e;
				}

	#arts {
		position: absolute;
		top: 0;
		left: -640px;
		float: left;
		width: 640px;
		height: 1504px;
		background: url(../images/metiers/back_arts.png) top no-repeat;
	}

		#arts h1 {
			float: left;
			margin: 60px 0 0 45px;
			color: #45484a;
			font-size: 48px;
			text-transform: uppercase;
		}

		#arts .trait {
			float: left;
			width: 187px;
			margin: 10px 0 0 155px;
		}

			#arts .trait img {
				float: left;
			}

		#arts .lienRetour {
			position: absolute;
			top: 130px;
			right: 165px;
			width: 61px;
			height: 60px;
		}

		#arts #actions {
			clear: both;
			float: left;
			width: 250px;
			height: 154px;
			padding: 15px 0 0 45px;
			color: #f3722e;
			font-size: 32px;
			text-transform: uppercase;
		}

		#arts .metier {
			float: left;
			width: 430px;
			height: 141px;
			margin: 0 0 46px 0;
			padding: 35px 0 0 170px;
		}

			#arts .metier h2 {
				float: left;
				width: 100%;
				font-size: 32px;
				color: #fff;
				text-transform: uppercase;
			}

			#arts .metier p {
				float: left;
				width: 380px;
				line-height: 28px;
				font-family: nobel_light;
				font-size: 28px;
				color: #fff;
			}

	#web {
		position: absolute;
		top: 0;
		left: -640px;
		float: left;
		width: 640px;
		height: 1504px;
		background: url(../images/metiers/back_web.png) top no-repeat;
	}

		#web h1 {
			float: left;
			margin: 56px 0 0 208px;
			color: #45484a;
			font-size: 48px;
			text-transform: uppercase;
		}

		#web .trait {
			float: left;
			width: 187px;
			margin: 10px 0 0 165px;
		}

			#web .trait img {
				float: left;
			}

		#web .lienRetour {
			position: absolute;
			top: 130px;
			right: 165px;
			width: 61px;
			height: 60px;
		}

		#web #actions {
			clear: both;
			float: left;
			width: 350px;
			height: 154px;
			padding: 15px 0 0 45px;
			color: #f3722e;
			font-size: 32px;
			text-transform: uppercase;
		}

		#web .metier {
			float: left;
			width: 430px;
			height: 141px;
			margin: 0 0 46px 0;
			padding: 35px 0 0 170px;
		}

			#web .metier h2 {
				float: left;
				width: 100%;
				font-size: 32px;
				color: #fff;
				text-transform: uppercase;
			}

			#web .metier p {
				float: left;
				width: 380px;
				line-height: 28px;
				font-family: nobel_light;
				font-size: 28px;
				color: #fff;
			}

	#audio {
		position: absolute;
		top: 0;
		left: -640px;
		float: left;
		width: 640px;
		height: 1504px;
		background: url(../images/metiers/back_audio.png) top no-repeat;
	}

		#audio h1 {
			float: left;
			margin: 45px 0 0 120px;
			color: #45484a;
			font-size: 48px;
			text-transform: uppercase;
		}

		#audio .trait {
			float: left;
			width: 187px;
			margin: 10px 0 0 178px;
		}

			#audio .trait img {
				float: left;
			}

		#audio .lienRetour {
			position: absolute;
			top: 130px;
			right: 165px;
			width: 61px;
			height: 60px;
		}

		#audio #actions {
			clear: both;
			float: left;
			width: 350px;
			height: 192px;
			padding: 15px 0 0 45px;
			color: #f3722e;
			font-size: 32px;
			text-transform: uppercase;
		}

		#audio .metier {
			float: left;
			width: 430px;
			height: 141px;
			margin: 0 0 50px 0;
			padding: 35px 0 0 170px;
		}

			#audio .metier h2 {
				float: left;
				width: 100%;
				font-size: 32px;
				color: #fff;
				text-transform: uppercase;
			}

			#audio .metier p {
				float: left;
				width: 340px;
				line-height: 28px;
				font-family: nobel_light;
				font-size: 28px;
				color: #fff;
			}

	#event {
		position: absolute;
		top: 0;
		left: -640px;
		float: left;
		width: 640px;
		height: 1504px;
		background: url(../images/metiers/back_event.png) top no-repeat;
	}

		#event h1 {
			float: left;
			margin: 65px 0 0 215px;
			color: #fff;
			font-size: 48px;
			text-transform: uppercase;
		}

		#event .trait {
			float: left;
			width: 187px;
			margin: 10px 0 0 190px;
		}

			#event .trait img {
				float: left;
			}

		#event .lienRetour {
			position: absolute;
			top: 130px;
			right: 165px;
			width: 61px;
			height: 60px;
		}

		#event #actions {
			clear: both;
			float: left;
			width: 350px;
			height: 169px;
			padding: 15px 0 0 45px;
			color: #fff;
			font-size: 32px;
			text-transform: uppercase;
		}

		#event .metier {
			float: left;
			width: 430px;
			height: 141px;
			margin: 0 0 48px 0;
			padding: 35px 0 0 170px;
		}

			#event .metier h2 {
				float: left;
				width: 100%;
				font-size: 32px;
				color: #fff;
				text-transform: uppercase;
			}

			#event .metier p {
				float: left;
				width: 410px;
				line-height: 28px;
				font-family: nobel_light;
				font-size: 28px;
				color: #fff;
			}