@charset "UTF-8";
/* CSS Document */

/* ====================RESET=CSS==================== */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}



/* ====================IMAGES=CSS==================== */

/* --------------------Général-------------------- */
html{
	height:100%;
}

body{
	font-family:"Share", Georgia, Times, serif;
	font-size:16px;
	color:#CCC;
	height:100%;
}

#wrapper{
	width:960px;
	height:auto;
	margin:0 auto;
	overflow:hidden;
}

#content{
	width:960px;
	height:auto;
	padding-bottom:60px;
}

.fond{
	width:100%;
	height:100%;
	background-position:center 0;
	background-size:cover;
	position:fixed;
	z-index:-999;
}

#fond1{
	background-image:url(images/originales/demomode.png);
}

#fond2{
	background-image:url(images/originales/space.jpg);
}

#fond3{
	background-image:url(images/originales/lion.jpg);
}

#fond4{
	background-image:url(images/originales/liquidsound.jpg);
}

#fond5{
	background-image:url(images/originales/princesaoulant.jpg);
}

#filet{
	width:100%;
	height:100%;
	background-image:url(images/graphisme/texture_3x3.png);
	position:fixed;
	z-index:-998
}


/* --------------------Texte-Général-------------------- */

a{
	color:#CCC;
	text-decoration:none;
}

a:hover{
	color:#FFF;
	text-decoration:none;
}

.date{
	font-size:60%;
	text-transform:uppercase;
	color:#aaa;
}

h1, h2, h3, h4,h5{
	color:#fff;
	font-family: "Oswald", Verdana, Geneva, sans-serif;
	
	text-shadow: #000 1px 1px 2px;
}

h2{
	font-size:43px;
	padding:160px 0 0 10px;
}

h3{
	font-size:27px;
	padding:15px 0 0 10px;
}

h4{
	font-size:20px;
	padding:0 0 5px 0;
}

h5{
	font-size:16px;
	padding:7px 0;
}

p{
	padding-bottom:15px;
	line-height:120%;
}

.clear{
	clear:both;
}

/* --------------------Header-------------------- */

#header{
	width:960px;
	height:auto;
	padding:15px 0;
	font-family: "Oswald", Verdana, Geneva, sans-serif;
}

#fr-en{
	width:960px;
	height:auto;
	text-align:right;
	font-size:12px;
}

#fr-en a{
	color:#CCC;
	text-align:right;
	text-decoration:none;
	text-transform:uppercase;
	
	text-shadow: #000 1px 1px 2px;
}

#fr-en a:hover{
	color:#FFF;
}

#fr-en a.current{
	color:#FFF;
}

#fr-en a.last{
	padding-left:30px;
}

#logo{
	width:960px;
	height:auto;
}

#site-title a{
	display:block;
	width:323px;
	height:87px;
	margin:auto;
	background-image:url(images/graphisme/logo.png);
}

#site-title a span{
	display:none;
}

/* --------------------Navigation-------------------- */
#navigation{
	width:960px;
	height:auto;
	padding:10px 0 0 0;
	font-size:14px;
}

#navigation ul li{
	display:inline;
	padding:0 103px 0 0;
}

#navigation ul li a{
	display:inline-block;
	padding:10px 0 10px 15px;
	
	text-transform:uppercase;
	
	text-shadow: #000 1px 1px 2px;
}

#navigation a.current{
	color:#FFF;
	background-image:url(images/graphisme/puce_select.png);
	background-position:center left;
	background-repeat:no-repeat;
}

#navigation li.last{
	padding:5px 0 5px 15px;
}

/* --------------------Sous-Navigation-------------------- */
#sous-navigation{
	width:960px;
	height:21px;
	padding:9px 0 0 0;
	margin-top:10px;
	background-color:rgba(0,0,0,0.4);
	font-size:14px;
}

#sous-navigation ul{
	padding:0 0 0 10px;
}

#sous-navigation ul li{
	display:inline;
	padding:0 15px 0 0;
}

#sous-navigation ul li a{
	text-transform:uppercase;
	text-shadow: #000 1px 1px 2px;
}

#sous-navigation a.current{
	color:#FFF;
}

#sous-navigation li.last{
	padding:0;
}

/* ====================MODELE#1==INDEX==================== */
/* --------------------Diaporama-------------------- */

#diaporama{
	width:960px;
	height:330px;
	position:relative;
}

#diaporama-arrows{
	width:960px;
	height:30px;
	position:absolute;
	top:50%;
	margin-top:-15px; /* - #diaporama-arrows:height/2*/
}

#diaporama-arrows a span{
	display:none;
}

#diaporama-arrows #prev, #diaporama-arrows #next{
	width:21px;
	height:30px;
	position:absolute;
	
	background-image:url(images/graphisme/diapo-arrows-passive.png);
	background-repeat:no-repeat;
}

#diaporama-arrows #prev:hover{
	background-image:url(images/graphisme/diapo-arrows.png);
	left:0;
}

#diaporama-arrows #prev:hover, #diaporama-arrows #next:hover{
	background-image:url(images/graphisme/diapo-arrows.png);
	right:0;
}

#diaporama-arrows #prev{
	left:2px;
	background-position:left;
}

#diaporama-arrows #next{
	right:2px;
	background-position:right;
}

#diaporama-title{
	width:960px;
	height:30px;
	position:absolute;
	bottom:0;
	
	text-align:center;
}

#diaporama-title .inside{
	width:960px;
	height:30px;
	position:relative;
}

#diaporama-title ul{
	position:absolute;
	width:200px;
	text-align:center;
	left:50%;
	margin-left:-100px;
	bottom:0;
}

#diaporama-title ul li{
	display:inline;
}

#diaporama-title ul li a{
	display:inline-block;
	width:14px;
	height:14px;
	border-radius:7px;
	margin:0 2px;
	background-color:#ccc;
	
	box-shadow: #000 1px 1px 2px;
}

#diaporama-title ul li a:hover{
	background-color:#fff;
}

#diaporama-title ul li a span{
	display:none;
}

#diaporama-title h3{
	position:absolute;
	text-align:right;
	right:0;
	bottom:0;	
}


/* --------------------Index-Mid-News-------------------- */

#mid-news{ /* rangée pour 3 news */
	width:960px;
	height:300px;
	padding-top:30px;
}

#mid-news div{ /* bloc 1 news */
	width:300px;
	height:300px;
	margin-right:30px;
	float:left;
	position:relative;
}

#mid-news div div{ /* cartouche */
	width:280px;
	height:70px;
	padding:10px;
	background-color:rgba(0,0,0,0.4);
	overflow:hidden;
}

#mid-news div.last{ /* dernier bloc 1 news */
	margin-right:0;
}

#mid-news a span.lire-la-suite{
	display:none;
}

#mid-news a:hover span.lire-la-suite{
	display:block;
	width:300px;
	height:300px;
	background-color:rgba(0,0,0,0.4);
	position:absolute;
}

#mid-news a:hover span.lire-la-suite p{
	font-family: "Oswald", Verdana, Geneva, sans-serif;
	font-size:18px;
	padding:185px 0 0 10px;
	color:#fff;
	
	text-shadow: #000 1px 1px 2px;
}

#mid-news p{
	padding:0;
	line-height:100%;
}


/* ====================MODELE#2==VIGNETTES==================== */
/* --------------------Festival-------------------- */

.section{
	width:960px;
	height:60px;
	background-color:rgba(0,0,0,0.4);
	margin-top:60px;
}

.vignette-news{ /* rangée pour 4 vignette-news */
	width:100%;
	height:180px;
	padding-top:30px;
}

.vignette-news div{ /* bloc 1 vignette-news */
	width:210px;
	height:180px;
	margin-right:40px;
	float:left;
	position:relative;
}

.vignette-news div div{ /* cartouche */
	width:190px;
	height:20px;
	padding:10px 10px 0 10px;
	background-color:rgba(0,0,0,0.4);
	overflow:hidden;
}

.vignette-news div.last{ /* dernier bloc 1 vignette-news */
	margin-right:0;
}

.vignette-news h4{
	font-size:15px;
	padding-bottom:5px;
}

.vignette-news a span.lire-la-suite{
	display:none;
}

.vignette-news a:hover span.lire-la-suite{
	display:block;
	width:210px;
	height:180px;
	background-color:rgba(0,0,0,0.4);
	position:absolute;
}

.vignette-news a:hover span.lire-la-suite p{
	font-family: "Oswald", Verdana, Geneva, sans-serif;
	font-size:15px;
	padding:95px 0 0 10px;
	color:#fff;
	
	text-shadow: #000 1px 1px 2px;
}


/* ====================MODELE#3==COLONNES=2/3+1/3==================== */
/* --------------------Festival-Presentation-------------------- */

#col-container{
	width:960px;
	height:auto;
	padding:20px 0 0 0;
}

#left-col{
	width:600px;
	height:auto;
	float:left;
	padding-right:20px;
}

#left-col img{
	margin:0 0 20px 0;
}

#right-col{
	width:320px;
	height:auto;
	padding:10px;
	float:left;
	background-color:rgba(0,0,0,0.4);
}


/* ====================MODELE#4==COLONNES=50/50==================== */
/* --------------------News-------------------- */

.news-col{
	width:470px;
	height:auto;
	float:left;
}

.news-col.last{
	margin-left:20px;
}

.news{
	width:470px;
	height:auto;
	margin-bottom:20px;
	background-color:rgba(0,0,0,0.4);
	position:relative;
}

.news h4{
	font-size:18px;
	padding:10px;
}

.news .text{
	padding:10px;
}

.news p{
	padding-bottom:15px;
}

.news span.news-social{
	position:absolute;
	font-size:14px;
	top:15px;
	right:15px;
}

/* --------------------Footer-------------------- */

#footer{
	width:100%;
	height:12px;
	padding:9px 0;
	font-size:14px;
	position:fixed;
	bottom:0;
	
	background-color:rgba(0,0,0,0.4);
}

#footer .inside{
	width:960px;
	height:auto;
	margin:auto;
	
	font-family: "Oswald", Verdana, Geneva, sans-serif;
	font-size:12px;
	text-align:left;
	text-decoration:none;
	text-transform:uppercase;
	
	text-shadow: #000 1px 1px 2px;
}

#footer-links{
	float:right;
}

#footer-links a{
	padding-left:30px;
}