@import url('fancy.css');
@import url('menu.css');
@import url('popup.css');

*{
	margin	: 0;
	padding	: 0;
}

body{
	background	: #fff url('../img/body.jpg') top center no-repeat;
	text-align	: center;
	font		: 0.8em Arial, Helvetica, sans-serif;
	color		: #7f7f7f;
}

a {
	outline			: none;
	color			: #e42322;
	text-decoration	: none;
}

a:hover{
	color			: #690100;
}

p {
	line-height		: 1.4em;
	margin			: 0.5em 0 0.5em 0;
}

img {
	border			: 0;
}

hr.clear {
    clear			: both ;
    visibility		: hidden ;
	line-height		: 0 ;
    font-size		: 0 ;
	border			: 0;
	height			: 0;
}

.clear {
	clear: both;
}

strong{
	color			: #e42322;
	font-weight		: normal;
}

ul,li{
	margin			: 0;
	padding			: 0;
	list-style-type	: none;
}


/* =================================== */
/* ============ STRUCTURE ============ */
/* =================================== */

div#global {
	text-align		: left;
	width			: 750px;
	margin			: auto;
	background		: transparent;
	position		: relative;
	padding			: 0;
}

div#top {
	position		: relative;
	width			: 750px;
	height			: 220px;
	background		: transparent;
}

div#footer{
	width			: 589px;
	margin			: 0 auto;
	text-align		: center;
	background		: transparent;
	color			: #b3b3b3;
	font-size		: 0.9em;
	padding			: 40px 0;
}

div#footer p{
	margin			: 0;
}

div#footer a{
	color			: #b3b3b3;
}

div#footer a:hover{
	color			: #404040;
}

div#footer p.red{
	color			: #e42322;
}

div#footer p.red a{
	color			: #e42322;
}

div#footer p.red a:hover{
	color			: #690100;
}



/* =================================== */
/* =============== TOP =============== */
/* =================================== */

#top h1 a {
	display			: block;
	position		: absolute;
	top				: 30px;
	left			: 215px;
	width			: 480px;
	height			: 110px;
	text-indent		: -5000px;
}

/* =================================== */
/* =============== CONTENT =========== */
/* =================================== */

div#content{
	position		: relative;
	width			: 750px;
	height			: 465px;
}

div#cache{
	position		: absolute;
	top				: 0;
	left			: 0;
	width			: 100%;
	height			: 100%;
	background		: url('../img/cache.png') top left no-repeat;
}

div#container{
	position		: absolute;
	width			: 736px;
	height			: 448px;
	margin			: 10px 5px 7px 9px;
	overflow		: hidden;
}

div#overflow{
	position		: relative;
	width			: 4000px;
	height			: 448px;
	background		: transparent;
}

div#container1,div#container2,div#container3,div#container4,div#container5{
	position		: relative;
	float			: left;
	width			: 736px;
	height			: 448px;
}

/* ============================================ */
/* =============== TITRES ===================== */
/* ============================================ */

div#container1 h1, div#container2 h1, div#container3 h1, div#container4 h1, div#container5 h1{
	color				: #e42322;
	font-size			: 1.6em;
	background			: url('../img/redline.gif') repeat-x;
	background-position	: left 18px;
	padding				: 0 0 0 50px;
	margin				: 20px 0 0 0;
}


div#container1 h1 span, div#container5 h1 span{
	background			: url('../img/greyline.gif') repeat-x;
	background-position	: left 18px;
	padding				: 0 15px;
	display				: inline-block;
}

h2{
	color				: #e42322;
	font-size			: 0.9em;
	padding				: 0 0 0 65px;
	margin				: 0;
}

/* ============================================ */
/* =============== PARAGRAPHES ================ */
/* ============================================ */

div#container1 p{
	margin			: 20px 0 0.5em 160px;
}

div#content p.under-h2{
	margin			: 0 0 0 65px;
}

.p2{
	margin-left		: 160px;
	margin-top		: 40px;
}

/** container 2 */

div#container2{
	background		: url('../img/line-3.gif') no-repeat 0 350px;
}

div#container2 img{
	margin			: 27px 0 0 0;
	float			: left;
}

div#container2 p{
	margin			: 1.5em 0 0 0;
	width			: 386px;
	text-align		: justify;
	float			: left;
}

a#confidentiel{
	text-decoration	: underline;
	background		: url('../img/go.jpg') center right no-repeat;
	padding			: 0 15px 0 0;
	float			: right;
	margin			: 0 25px; 0 0;
	display			: block;
}

/** container 3 */

div#container3{
	background		: url('../img/bg-container-3.png') no-repeat left 345px;
}

div#container3 div.contenu{
	width			: 630px;
	height			: 275px;
	background		: url('../img/bg-contenu-1.jpg') no-repeat right 0;
	margin			: 70px 0 0 60px;
}

div#container3 p{
	margin-left		: 100px;
	width			: 390px;
}

div#container3 p.p1{
	margin-top		: 50px;
	font-size		: 0.85em;
}

ul.specialites{
	height			: 39px;
	padding-top		: 12px;
}

ul.specialites li{
	float			: left;
}

ul.specialites li a{
	display			: block;
	font-size		: 1.2em;
	text-align		: center;
}

ul.specialites li a#web			{ width : 80px; margin-left:35px; 	}
ul.specialites li a#plaquettes	{ width : 100px; margin-left:0px; 	}
ul.specialites li a#blog		{ width : 60px; margin-left:8px; 	}
ul.specialites li a#communiques	{ width : 180px; margin-left:20px; 	}
ul.specialites li a#reseaux	{ width : 130px; margin-left:15px; 	}

/** container 4 */

div#container4{
	background		: url('../img/bg-container-4.png') no-repeat left 151px;
}

div#container4 p{
	margin			: 65px 0 0 160px;
	width			: 385px;
	text-align		: justify;
}

div#container4 p.p1{
	margin-top		: 50px;
	margin-left		: 315px;
	font-size		: 0.85em;
	width			: auto;
}

ul.specialites2{
	margin-top		: 130px;
	height			: 39px;
	padding-top		: 12px;
}

ul.specialites2 li{
	float			: left;
}

ul.specialites2 li a{
	display			: block;
	font-size		: 1.2em;
	text-align		: center;
}

ul.specialites2 li a#web		{ width : 80px; margin-left:330px;	}
ul.specialites2 li a#plaquettes	{ width : 150px; margin-left:0px; 	}

/** container 5 */

div#container5 p{
	margin-left			: 160px;
	text-align			: justify;
	width				: 560px;
}

div#container5 p.resume{
	font-size			: 0.85em;
}

ul.livres {	
	margin-left: 160px;
}

ul.livres li {
	float: left;
	margin: 10px 40px 0 0;
}

ul.livres a:hover {
	opacity: 0.7;
}

/* =================================== */
/* =============== FOOTER ============ */
/* =================================== */

ul.social-network {
	padding-top: 10px;
	margin: 0 auto;
	text-align: center;
}

ul.social-network li {
	display: inline;
	width: 25px;
	height: 25px;
	margin: 5px;
}

ul.social-network li a {
	display: inline-block;
	width: 25px;
	height: 25px;
}

ul.social-network li a:hover {
	opacity: 0.7;
}

a.twitter {
	background : url('../img/icn-twitter.png') 0 0 no-repeat ;
}

a.linkedin {
	background : url('../img/icn-linkedin.png') 0 0 no-repeat ;

}

a.tumblr {
	background : url('../img/icn-tumblr.png') 0 0 no-repeat ;
}