@font-face {
    font-family: 'LimelightRegular';
    src: url('Limelight-webfont.eot');
    src: url('Limelight-webfont.eot?#iefix') format('embedded-opentype'),
         url('Limelight-webfont.woff') format('woff'),
         url('Limelight-webfont.ttf') format('truetype'),
         url('Limelight-webfont.svg#LimelightRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*organisation des div dans la page */
html, body{
	background-color: #000;
	font-family: Arial;
	font-size:12px;
	margin:0;
	padding:0;
	height:100%;
}


#container{
	min-height:100%;
	width:100%;
   	position:relative;
}

#header{

	height:105px;
	background-image: url(pix/motif.jpg);

	color:rgb(160,160,160);
	border-top:1px solid rgb(160,160,160);
	border-bottom:1px solid rgb(100,100,100);
}


#body{
	padding-top: 4%;
	padding-bottom:105px; /*footer height+marge*/
	text-align:center;
	color:white;
}

#footer{
	position:absolute;
	bottom:0;
	height: 83px; /*footer height*/
	text-align:center;
    width: 100%;
    overflow: auto; 
	white-space:nowrap; 
	margin: 0 auto;
	
}

/* header : logo K + menu des réalisateurs + contact */



#header a:link, a:active, a:visited {
	 color:rgb(160,160,160);
	 text-decoration: none;
}

#header a:hover {
	 color: rgb(200,0,0); 
	 text-decoration: none;
}

#logo { 
	background-image:url(kashmirlogogris.png);
	width:75px;
	background-repeat:no-repeat;
	outline: none;
	border: none;
	position: relative;
	top:8px;
	left:15px;
	text-align:left;
	font-family:LimelightRegular;
}


#logo:hover { 
	 background-image:url(kashmirlogored.png);
	 width:75px;
	 background-repeat:no-repeat;
	 outline: none;
	 border: none;
}


#logo img{
	width:75px;	
	border: none;
	outline: none;
}


li{
	list-style:none;
}

.real0{
	position:absolute;
	font-size:1.2em;
	top:20px;
	right:800px;

}

.real1{
	position:absolute;
	font-size:1.2em;
	top:20px;
	right:620px;
	padding-left:10px;
	border-left:1px solid rgb(160,160,160);	
}

.real2{
	position:absolute;
	font-size:1.2em;
	top:20px;
	right:440px;
	padding-left:10px;
	border-left:1px solid rgb(160,160,160);	
}

.real3{
	position:absolute;
	font-size:1.2em;	
	top:20px;
	right:300px;
	padding-left:10px;
	border-left:1px solid rgb(160,160,160);	
}

.contact{	
	position:absolute;
	top:11px;
	right:20px;
}
.contact strong{
	font-family:LimelightRegular;
	
	font-weight:400;
	text-decoration: none;
	font-size:30px;
}		
	

/* film joué avec nom et titre */




#body strong{
	color:rgb(200,0,0);
}

#videodiv{
	width: 800px;
	outline: none;
	margin: 0px auto;
}



/* frontpage homepage sélection films */

article {	
	position:relative;
	text-align:left;
	margin: 0 auto;
	padding: 20px;
}

#frontpage {
	width:32.3%; /* pour 4 vignettes par ligne, valeur 28.3% */
	display:inline-block;
	padding:0.4%; /* pour 4 vignettes par ligne, valeur 0.4% */
	border-radius: 5px;	
}

#frontpage:hover{
	background-color:rgb(160,160,160);
	background-repeat:repeat;
}

#fpvignette {
	z-index:1;
	border: none;
	ouline: none;
}

#fpvignette img{
	width:100%;
	border-radius: 5px;	
	border: none;
	outline: none;
}



article p{
	z-index:2;
	color:white;
	padding-left:2px;
	}

article strong{
	color:rgb(200,0,0);
}
	
article a:link, a:active, a:visited {
	 text-decoration: none;
}

article a:hover {
	 color: rgb(200,0,0); 
	 text-decoration: none;
	 border-color: rgb(0,255,0);
}


/*footer liste films par réal */





#filmlist a:link, a:active, a:visited p{
	 color: rgba(255,255,255,0);
	 text-decoration: none;
	 outline: none;
	 border: none;
}

#filmlist a:hover {
	 color: rgb(255,255,255); 
	 text-decoration: none;
	 background-color: rgb(200,0,0);
	 border-color: rgb(0,255,0);
}

#filmlist a:hover p{
	background-image:url(hoverfilm.png);
	height:72px;
	text-align:left;
	padding:5px;
	}

#filmlist, #vignette, #vignettetexte{
	position:relative;
	display:inline-block;
}


#vignette {
	z-index:1;
}

#vignette img{
	 height:80px;
	 	border: none;
	outline: none;
}


#vignettetexte {
	position:absolute;
	top:-13px;
	width:100%;
	z-index:2;
	left:0px;
	white-space: normal;
}



/* You can alter this CSS in order to give Smooth Div Scroll your own look'n'feel */

/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
	/* The hotspots have a minimum width of 100 pixels and if there is room the will grow
    and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
	
	width: 140px;
	height: 80px;
	/* There is a big background image and it's used to solve some problems I experienced
    in Internet Explorer 6. */
	background-image: url(images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	left: 0;
	/*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
	cursor: url(images/cursors/cursor_arrow_left.png), url(images/cursors/cursor_arrow_left.cur),w-resize;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
	background-image: url(images/arrow_left3.png);				
	background-repeat: no-repeat;
	zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}

/* Invisible right hotspot */
div.scrollingHotSpotRight
{
	
	width: 140px;
	height: 80px;
	background-image: url(images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	right: 0;
	cursor: url(images/cursors/cursor_arrow_right.png), url(images/cursors/cursor_arrow_right.cur),e-resize;
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
	background-image: url(images/arrow_right3.png);
	background-repeat: no-repeat;
	zoom: 1;
}

/* The scroll wrapper is always the same width and height as the containing element (div).
   Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
	
	overflow: hidden;
	width: 100%;
	height: 100%;
}

div.scrollableArea
{

	width: auto;
	height: 100%;
	margin: 0 auto;
}