/* -------------- */
/* HTML générique */
/* -------------- */

body, div, a, img, ul, ol, li, h4, h3, h2, h1, p, form, fieldset{
	padding:0;
	margin:0;
	list-style:none;
	text-decoration:none;
	border:none;
}

html {
	height:100%;
}

body {
	position:relative;
	height:100%;
	font: 100%/1.125em Helvetica, Arial, Verdana, sans-serif; /* 16px/18px */
	background-color: #000;
	color:#fff;
}

span.hameka {
	text-transform:uppercase;
	font-weight:bold;
}

/* ------ */
/* LAYOUT */
/* ------ */

#screen{
	width:100%;
	height:100%;
	overflow:hidden;
}

#navigation{
	position:absolute;
	overflow:hidden;
	width:100%;
	top:0;
	left:0;
	border-bottom:1px solid #fff;
	background-color:#000;
}

#footer {
	position:absolute;
	overflow:hidden;
	width:100%;
	bottom:0;
	height:40px;
	border-top:1px solid #fff;
	background-color:#000;
}

	#pages {
		overflow:hidden;
		height:100%;
	}
		#pages-wrapper {
			width:30000px;
			height:100%;
			background:#000 url(../img/bg-hameka-black-big-800.png) no-repeat center left;
			overflow:hidden;
		}

			.page {
				float:left;
				width:3550px;
				height:100%;
			}
				
				#home {padding:120px 0 0 85px;}
				
				#histoire {padding:120px 0 0 180px;}
				
				#films {padding:0 0 0 100px;}
				
				#contact {padding:120px 0 0 100px;}
				
				#plus {padding:100px 0 0 100px;}
				
						#s-screen {
							width:850px;
							height:100%;
							overflow:hidden;
						}
						
							#s-navigation {
								float:left;
								width:250px;
								height:100%;
								padding-top:110px;
								overflow:hidden;
							}
											
							#s-pages {
								float:right;
								width:600px;
								height:100%;
								overflow:hidden;
								}
								
								#s-pages-wrapper {
									width:3000px;
									height:100%;
									overflow:hidden;
								}
					
									.s-page {
										float:left;
										width:600px;
										height:100%;
										padding:110px 0 0 50px;
										border-left:1px solid #fff;
									}

/* ------------- */
/* MISE EN FORME */
/* ------------- */

/* --- LE MENU DE NAVIGATION --- */
/* ----------------------------- */

#navigation ul{
	float:left;
	font-size:20px;
	height:75px;
}
	
	#navigation li {
		float:left;
		height:57px;
		padding-left:100px;
		padding-top:25px;
	}

	#navigation li#logo {padding-top:22px;}

		#navigation li a{color:#929395;}
	
		#navigation li#logo a {
			display:block;
			width:117px;
			height:20px;
			background:transparent url(../img/logo-hameka-small.png) no-repeat;
			text-indent:-90000px;
		}
	
		#navigation li a:hover {color:#fff;}
			
			#navigation li a.active {color:#fff;}

/* --- LA PAGE HOME --- */
/* -------------------- */

p#accroche {
	width:485px;
	height:123px;
	padding:0 0 0 15px;
	font-size:1.5em; /*24px*/
	line-height:1.5em; /*36px*/
	font-weight:bold;
	color:#929395;
	background:transparent url(../img/bg-accroche.png) repeat-y;
}

div#presents {margin-top:145px;}

div#presents a {display:block;}

/* --- LA PAGE HISTOIRE --- */
/* ------------------------ */

p#histoire-chapo {
	padding:40px 0 30px 0;
	font-size:1.25em; /*20px*/
	line-height:1.6em; /*32px*/
	font-weight:bold;
	color:#fff;
}

p#histoire-content {
	width:590px;
	line-height:1.5em; /*24px*/
	color:#929395;
}

/* --- LA PAGE FILMS --- */
/* --------------------- */

/*#films.bg-des-rats {background:transparent url(../img/des-rats-800.jpg) no-repeat -830px center;}
#films.bg-performance {background:transparent url(../img/performance-800.jpg) no-repeat -330px center;}
#films.bg-homme-a-prendre {background:transparent url(../img/homme-a-prendre-800-3.jpg) no-repeat -130px center;}
#films.bg-le-cri-du-papillon {background:transparent url(../img/le-cri-du-papillon-800.jpg) no-repeat -100px center;}*/

.bg-des-rats {background:transparent url(../img/des-rats-800.jpg) no-repeat -830px center;}
.bg-performance {background:transparent url(../img/performance-800.jpg) no-repeat -330px center;}
.bg-homme-a-prendre {background:transparent url(../img/homme-a-prendre-800-3.jpg) no-repeat -130px center;}
.bg-le-cri-du-papillon {background:transparent url(../img/le-cri-du-papillon-800.jpg) no-repeat -100px center;}

/* --- le menu de navigation des films ---*/

#s-navigation li {padding-bottom:20px;}

	#s-navigation li a {
		font:1.25em "Arial Black", Helvetica, Arial, sans-serif;
		text-transform:uppercase;
		color:#929395;
	}
	
	#s-navigation li a:hover {color:#fff;}
	
		#s-navigation a.s-active {color:#fff;}

/* --- le descriptif des films --- */

.s-page h2 {
		font:1em "Arial Black", Helvetica, Arial, sans-serif;
		text-transform:uppercase;
		color:#fff;
}

.s-page ul.generique {
	margin:10px 0;
	font-size:0.875em;
	font-weight:bold;
	/*text-transform:lowercase;*/
	color:#929395;
}

.s-page ul.generique li span.real {text-transform:uppercase;}

.s-page ul.generique li a {color:#fff;}

.s-page p {
	width:400px;
	padding-bottom:20px;
	font-size:0.875em;
	line-height:1.7em;
	color:#fff;
}

.s-page ul.voir li {
	width:160px;
	margin:20px 0 0 -51px;
	padding:5px 5px 5px 25px;
	font-size:0.875em;
	border:1px solid white;
	border-left:none;
	background:transparent url(../img/icon.png) no-repeat center left;
}

	.s-page ul.voir li a {
		font:1em "Arial Black", Helvetica, Arial, sans-serif;
		font-weight:bold;
		text-transform:uppercase;
		color:#fff;
	}
			
/* --- LA PAGE CONTACT --- */
/* ----------------------- */

fieldset {width:700px;}

		fieldset li {
			padding-bottom: 1em;
			font-weight:bold;
		}

		fieldset.submit {border-style: none;}

		label {
			display: block;
			width:100%;
			padding-bottom:5px;
			color:#929395;
		}
		
			label#message-area {display:block;}
			
		input.nobutton {
			width: 100%;
			height: 25px;
			font:1.5em "courier new", courier, monospace;
			border:none;
			color:#212121;
			background-color:#fff;
		}

		textarea {
			width:100%;
			height:110px;
			font:1.125em "courier new", courier, monospace;
			border:none;
			color:#212121;
			background-color:#fff;
		}
		
		input.button {
			width:100%;
			height:30px;
			margin-top:5px;
			border:2px solid #929395;
			font-size:1.25em;
			color:#fff;
			background:transparent;
			cursor:pointer;
		}

p.erreur {color:#C30;}

p.noerreur a{color:#090;}


/* ---------------------------- */
/* LA PAGE NEWS, HISTORIQUE,... */
/* ---------------------------- */

#plus-wrapper {
	width:850px;
}

#col1 {
	float:left;
	width:590px;
}

#col2 {
	float:right;
	width:260px;
}

#plus p {
	line-height:1.5em;
	color:#929395;
}

	#news {
		float:left;
		width:590px;
		height:110px;;
	}

		#news-date {
			float:left;
			width:50px;
			padding:5px 0;
			color:white;
			background-color:#333;
		}

			#news-date span {
				text-align:center;
				display:block;
				font-weight:bold;
			}
		
				span#jour {
					font-size:2.25em;
					line-height:1em;
				}
				span#mois {text-transform:uppercase;}

		#news-content {
			float:right;
			width:520px;
		}

			#news-content strong {color:#aaa;}

		#news p { padding: 20px 20px 0 0;}

			#news p a {
				color:#fff;
				font-variant:small-caps;
			}

				#news p a:hover {
					text-decoration:underline;
				}

	#historique {
		clear:both;
		float:left;
		width:590px;
		padding-top:20px;
		border-top:1px solid #fff;
	}

		#historique p{
			padding-top:10px;
			width:590px;
		}

			#plus p span.plus-titre {
				padding-right:5px;
				text-transform:uppercase;
				color:#fff;
				font-weight:bold;
			}

	#partenaires {
		padding-top:20px;
		margin-left:60px;
		width:200px;
	}
	
	#partenaires ul li {
		color:#555;
		padding-top:2px;
		font-size:0.875em;
	}
	
	#partenaires ul li a {
		color:#929395;
	}
	
	#partenaires ul li a:hover {
		color:#fff;
	}
/* ------------------------*/
/* --- LE PIED DE PAGE --- */
/* ------------------------*/

#footer p {
	padding-left:100px;
	padding-top:12px;
	font-size:0.875em;
	line-height:0.875em;
	color:#929395;
}

	#footer p a {
		color:#fff;
		text-transform:uppercase;
		font-size:1em;
	}
		
		#footer p a:hover {text-decoration:underline;}