@charset "UTF-8";
body,html{
	font-family: Verdana, Arial, sans-serif;
	background-color:#000;
	margin : 0;
	padding:0;
	height:100%;
	width:100%;
        font-size: 14px;
	overflow : hidden;
        outline: none;
}
a:focus{
    outline: none;
}
.slider{
	width:780px;
}
#actu, #edito, #accueil, #index, #realisations, #contact{
	height: 100%;
	width:100%;
	position : absolute; 
}
.titre{
	padding: 5px;
	position:absolute;
	background-color:#000;
	color:#FFF;
	display:inline-block;
	width:118px;
	left:2px;	
	margin-top:5px;
	opacity:0;
	line-height : 15px;
}

/* menu index */

#quiindex{
	position:absolute;
	left: 50%;
	margin-left : -400px;
	top:50%;
	margin-top: 50px;	
}
#reaindex{
	position:absolute;
	left: 50%;
	margin-left : 200px;
	top:50%;
	margin-top: 50px;	
}
#contactindex{
	position:absolute;
	left: 50%;
	margin-left : 320px;
	top:50%;
	margin-top: 90px;	
}

#quiindex h2 a{
	letter-spacing: 1.5px;
	font-weight: normal;
	font-size : 22px;	
	text-decoration:none;
	color: #777778;
}

#quiindex h2 a:hover{
color : #000000;
}

#reaindex h2 a{
	letter-spacing: 1.5px;
	font-weight: normal;
	font-size : 22px;	
	text-decoration:none;
	color: #777778;
}

#reaindex h2 a:hover{
color : #000000;
}

#contactindex h2 a{
	letter-spacing: 1.5px;
	font-weight: normal;
	font-size : 22px;	
	text-decoration:none;
	color: #777778;
}

#contactindex h2 a:hover{
color : #000000;
}

.listeMenu{
        list-style: none;
	width : 250px;
        magin: 0;
        padding: 0;
        list-style-position: inside;
}

#menu h2 a{
	height:20px;
	position:relative
	float:left;
	letter-spacing: 1.5px;
	font-weight: normal;
	font-size : 16px;	
	text-decoration:none;
	color: #777778;
}
#menu h2 a:hover{
	color : #000000;
}

.menu{
    display: block;
}

a, a img{
    border: none;
    text-decoration: none;
}

#edito p{
    text-align: justify;
}

/* position and dimensions of the navigator */
.navi {
	margin-left:328px;
	width:200px;
	height:20px;
}


/* items inside navigator */
.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(../img/navigator.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
.navi a:hover {
	background-position:0 -8px;
}

/* active state (current page state) */
.navi a.active {
	background-position:0 -16px;
}

/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {
	/* required settings */
	position:relative;
	overflow:hidden;
	width: 640px;
        height: 178px;

	/* custom decorations */
	/* background:url(../img/h300.png) repeat-x; */
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items {                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
	/* this cannot be too large */
	width:20000em;
	position:absolute;
}

/* single scrollable item */
.scrollable .visuel {
	float:left;
	margin: 0px 0px 20px 0px !important;
	cursor:pointer;
	width:128px;
	height:128px;
	display: inline;
}

/* active item */
.scrollable .active {
	/* border:2px solid #000; */
	position:relative;
}

/* remove margins from the image */
.items .visuel {
	margin:0;
}

/* make A tags our floating scrollable items */
.items a {
	display:block;
	float:left;
	margin: 15px;
	width:  128px;
	height: 128px;
	border: none;
	background: white url(loader.gif) center center no-repeat;
}

.items a img{
        padding: 0;
        margin: 0;
        border: 0;
        box-shadow: 2px 5px 10px 1px rgba(0 ,0 ,0 , 0.4);
        -moz-box-shadow: 2px 5px 10px 1px rgba(0 ,0 ,0 , 0.4);
        -webkit-box-shadow: 2px 5px 10px 1px rgba(0 ,0 ,0 , 0.4);
}

/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;
	margin-left:15px;
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	background:url(../img/hori_large.png) no-repeat;
	display:block;
	width:30px;
	height:30px;
	float:left;
	margin:65px 10px;
	cursor:pointer;
	font-size:1px;
}

/* right */
a.right 				{ background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover 		{ background-position:-30px -30px; }
a.right:active 	{ background-position:-60px -30px; }


/* left */
a.left				{ margin-left: 0px; }
a.left:hover  		{ background-position:-30px 0; }
a.left:active  	{ background-position:-60px 0; }

/* up and down */
a.up, a.down		{
	background:url(../img/vert_large.png) no-repeat;
	float: none;
	margin: 10px 50px;
}

/* up */
a.up:hover  		{ background-position:-30px 0; }
a.up:active  		{ background-position:-60px 0; }

/* down */
a.down 				{ background-position: 0 -30px; }
a.down:hover  		{ background-position:-30px -30px; }
a.down:active  	{ background-position:-60px -30px; }


/* disabled navigational button */
a.disabled {
	visibility:hidden !important;
}

.imgTitre{
    position: relative;
    right: 3px;
}

.bottom, .bottom tr, .bottom tr td{
    vertical-align: bottom;
    padding: 0;
    margin: 0;
    border: 0;
}

/*

	GalleryView Stylesheet

	Use the CSS rules below to modify the look of your gallery.

	To create additional rules, use the markup below as a guide to GalleryView's architecture.

	<div class="gallery">
		<div class="panel">
			<img src="path/to/image.jpg" />
			<div class="panel-overlay">
				...overlay content...
			</div>
			<div class="overlay-background"></div>
		</div>
		<ul class="filmstrip">
			<li class="frame current">
				<img src="path/to/thumbnail.jpg" />
				<div class="caption">caption text</div>
			</li>
			<li class="frame">
				<img src="path/to/thumbnail.jpg" />
				<div class="caption">caption text</div>
			</li>
		</ul>
	</div>


*/

/* GALLERY LIST */
/* IMPORTANT - Change '#photos' to the ID of your gallery list to prevent a flash of unstyled content */
#photos { visibility: hidden;}

/* GALLERY CONTAINER */
.gallery { background: #ddd; padding: 5px;}

/* LOADING BOX */
.loader { background: url(loader.gif) center center no-repeat #ddd; }

/* GALLERY PANELS */
.panel {
background: url(loader.gif) center center no-repeat;
}

/* DEFINE HEIGHT OF PANEL OVERLAY */
/* NOTE - It is best to define padding here as well so overlay and background retain identical dimensions */
.panel .panel-overlay,
.panel .overlay-background { height: 60px; padding: 0 1em; }

/* PANEL OVERLAY BACKGROUND */
.panel .overlay-background { background: #222; display:none; }

/* PANEL OVERLAY CONTENT */
.overlay{display:none;}
.panel .panel-overlay { color: white; font-size: 0.7em; }
.panel .panel-overlay a { color: white; text-decoration: underline; font-weight: bold; }

/* FILMSTRIP */
/* 'margin' will define top/bottom margin in completed gallery */
.filmstrip { margin: 5px; }
.filmstrip li{
	width:50px;
	height:50px;
	background: url(loader.gif) center center no-repeat;
}

/* FILMSTRIP FRAMES (contains both images and captions) */
.frame {}

/* WRAPPER FOR FILMSTRIP IMAGES */
.frame .img_wrap { border: 1px solid #aaa; }

/* WRAPPER FOR CURRENT FILMSTRIP IMAGE */
.frame.current .img_wrap { border-color: #000; }

/* FRAME IMAGES */
.frame img { border: none; }

/* FRAME CAPTION */
.frame .caption { font-size: 11px; text-align: center; color: #888; }

/* CURRENT FRAME CAPTION */
.frame.current .caption { color: #000; }

/* POINTER FOR CURRENT FRAME */
.pointer {
	border-color: #000;
}

/* TRANSPARENT BORDER FIX FOR IE6 */
/* NOTE - DO NOT CHANGE THIS RULE */
*html .pointer {
	filter: chroma(color=pink);
}

.article{
    display:block;
	float:left;
	margin: 15px;
	width:  300px;
	height: 150px;
	border: none;
	}
.article h1{
    margin:0;
    padding: 0;
	}
.article p{
	margin: 0 5px;
}
.items .article a{
    display:block;
    float: none;
	clear:both;
	margin: 0;
	width:  auto;
	height: auto;
	border: none;
	background:  none;

	}
.items .article a.top_up{
    display:block;
	float:left;
	margin: 0 5px;
	width:  auto;
	height: 128px;
	border: none;
	background:  url(loader.gif) center center no-repeat;
	}


.article .image-article{
    margin-right: 20px;
    height: 120px;
    float: left;
}

.article .image-article img{
    box-shadow: 2px 5px 10px 1px rgba(0 ,0 ,0 , 0.4);
    -moz-box-shadow: 2px 5px 10px 1px rgba(0 ,0 ,0 , 0.4);
    -webkit-box-shadow: 2px 5px 10px 1px rgba(0 ,0 ,0 , 0.4);
}

.clear{
    clear: both;
}

h1{
    font-size: 24px;
    font-weight: normal;
}

label{
   
    display: inline-block;
}

input[type=text], textarea{
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.8);
    background: white;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px;
}

input[type=text]{
	width: 145px;
        display: inline-block;
        margin: 2px 0;
}

textarea{
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
        width: 225px;
        margin: 2px 0;
}

a{
    color: #1c1c1c;
    text-decoration: underline;
}

a:hover{
    color: #000;
}

#foot{
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 1000;
    font-size: 12px;
    padding: 2px 5px;
    background-color: rgba(0,0,0,0.2);
    color: white;
}

#foot a:visited{
	color: white;
	text-decoration: none;
}


#foot a:link{
	color: white;
	text-decoration: none;
}


#foot a:hover{
	color: white;
	text-decoration: underline;
}

img { -ms-interpolation-mode: bicubic; }

#error strong{
	color : #ff1717;
}