*{
	/* A universal CSS reset */
	margin:0;
	padding:0;
}
img{
border:none;
}
 body{
	background:#282012;
	color:#fff;
}
#main{
	background: #fff url(img/mixeur-noir-08nov.jpg) no-repeat -100px 250px;
width:1120px;
margin:auto;
border: 10px solid #ededed;
}
td a:link, a:visited {
text-decoration:none;
color:#fff;
}

td a:hover, a:active {
text-decoration:none;
color:#fff;
}
a:link, a:visited {
text-decoration:none;
color:#C03000;
}
a:hover, a:active {
text-decoration:underline;
color:#C03000;
}
.news a {
float:right;
color:#F0AE41;
margin-right:170px;
}
h1 a{
	display:block;
	text-align:center;
	font-size:28px;
	text-decoration:none;
	font-family: 'Comfortaa', cursive;
	color:#fff;
}
h1{
	text-align:center;
	font-size:48px;
	margin-top:-20px;
	font-family: 'Marck Script', cursive;
	color:#ededed;
}
h2 a{
	font-family: 'Comfortaa', cursive;
	font-size:24px;
	text-decoration:none;
	color:#fff;
}
h4 {
	font-family: 'Comfortaa', cursive;
	font-size:24px;
	text-decoration:none;
	color:#fff;
}
h2{
	font-family: 'Marck Script', cursive;
	font-size:30px;
	text-align:center;
	margin-bottom:30px;
	text-decoration:none;
	color:#282012;
	background-color:#F0AE41;
}
h3{
	font-family: 'Comfortaa', cursive;
	font-size:22px;
	color:#F0AE41;
	margin-top: 30px;
	padding-left:40px;
	background: url(img/fleche.png) no-repeat 0px 3px;;
}
p .switch{
	font-size:20px;
	font-family: 'Marck Script', cursive;
}
p{
	font-family: 'Comfortaa', cursive;
	margin:20px;
}


.tip {
	font-size:14px;
    color: #fff;
    background:#1d1d1d;
    display:none; /*--Hides by default--*/
    padding:10px;
    position:absolute;    z-index:1000;
    
}
.toon{
	
	margin-top:89px;
}
#logo{
	width:100%;
	margin-top:20px;
	background-color:#282012   ;
	background-image:url(img/banniere2.png);
	background-repeat: no-repeat;
	background-position:50% 100%;
	height:242px;

}
/*Menu*/
.index{
font-size:10px;
}


ul#menu {
	float:left; 
	padding: 0px;
	margin-left:400px;
	list-style: none;
	width:780px;

}
ul#menu li {
	margin: 50px 20px 0 20px;
    display:inline;
    float:left;    
}
ul#menu li a {
	font-size:24px;
	font-family: 'Comfortaa', cursive;
	color:#282012;
    text-decoration:none;  
}
ul#menu li a:hover{
		border-bottom:4px solid #F0AE41;
   }
.active{
	border-bottom:4px solid #F0AE41;
	font-size:24px;
	font-family: 'Comfortaa', cursive;
	color:#282012;
}


/*fin menu*/
#centre{

	width:800px;
	margin: 130px 0 0 300px;
}

#centre li{
	margin-left:50px;
	font-family: 'Comfortaa', cursive;
	font-size:16px;
	color:#000;
}

#centre p{
	margin-left:50px;
	font-family: 'Comfortaa', cursive;
	font-size:16px;
	color:#000;
}
#rss {
width:400px;
}
/*slideshow*/
#gallery {
	position:relative;
	height:360px;
	margin:auto;
	width:580px;
	border:10px solid #ededed;
}
	#gallery a {
		color:#fff;
		float:left;
		position:absolute;
	}
	
	#gallery a img {
		color:#fff;
		border:none;
	}
	
	#gallery a.show {
		color:#fff;
		z-index:500;
	}

	#gallery .caption {
		z-index:600; 
		background-color:#000; 
		color:#ffffff; 
		height:100px; 
		width:100%; 
		position:absolute;
		bottom:0;
	}

	#gallery .caption .content {
		margin:5px
	}
	
	#gallery .caption .content h3 {
		margin:0;
		padding:0;
		color:#1DCCEF;
	}
	/*references*/


.eff {
	
	/* the image size is 126x126, it's adjusted to fit the border as well*/
	width:136px;
	height:136px;
	font-family: 'Comfortaa', cursive;
	/* important, allow the children object to move inside its parent obj */
	position:relative;	

	/* important, it hides the moved image */
	overflow:hidden;
	
	/* with the clear class, make it into 3 x 3 layout */
	float:left;
	
	/* IE float bug fix */
	display:inline;
	
	/* styling */
	margin:12px;
	font-size:12px;
}

.eff img {
	display:block;
	width:126px;
	height:126px;
	
	/* styling */
	text-decoration:none;
	border:4px solid #ccc;
	background:#ddd;

	/* important, it allows this obj to move by jquery */
	position:absolute;
	
	/* make sure it appears above the caption */
	z-index:500;
	

}


.eff .caption {
	/* should be the same size with the image */
	width:126px;
	height:126px;
	
	/* styling */
	background:#333;
	border:4px solid #ccc;
	color:#eee;
	
	/* set the position to 0, 0 and appear under the image */
	position:absolute;
	top:0; left:0;
	z-index:0;
}


/* extra styling*/

.eff .caption a.header {
	margin:10px 5px 5px 5px;
	display:block;
	font-size:14px;	
	font-weight:700;
	color:#ff9733;
}

.eff .caption p {
	margin:5px;	
}

.clear {clear:both}
#centre .ref{
font-size:12px;
color:#fff;
	margin:5px;	
}

/*contact*/


#contact-area {
	width: 560px;
font-family: 'Comfortaa', cursive;
}

#contact-area input, #contact-area textarea {
	padding: 5px;
	width: 428px;
	font-family: 'Verdana';
	font-size: 1em;
	color:#282012;
	margin: 0px 0px 10px 0px;
	border: 2px solid #ccc;
}

#contact-area textarea {
	height: 90px;
}

#contact-area textarea:focus, #contact-area input:focus {
	border: 2px solid #F0AE41;
}

#contact-area input.submit-button {
	width: 100px;
	float: left;
margin-left:115px;
background-color:#F0AE41;
}
label {
color:#000;
	float: left;
	text-align: right;
	margin-right: 15px;
	width: 100px;
	padding-top: 5px;
	font-size: 1.1em;
}

/*footer*/
#footer{

width:100%;
background-color:#282012;
height:100px;
text-align:center;
	font-size:12px;
	text-decoration:none;
	font-family: 'Comfortaa', cursive;
	color:#fff;
}
#footer a{
color:#fff;
}