/* CSS Document */

img, a, div { margin:0; padding:0; }

body {
	height:100%;
	margin:0;
	padding:0;
	
	font-size:62.5%;
	background:#e0e0e0 url(../images/generic/main_bg.png) repeat-x top left;
	font-family:Arial, Helvetica, sans-serif;
}

img {
	border-collapse:collapse;
	border:none;
}

a { border:none; outline:none;}

p { margin:10px 0; line-height: 140%; color:#717171;}

ul { margin:0; padding:0; }

h3 { margin:10px 0; }

/* ---------------- 
GENERAL
---------------- */

.hr {
	width:100%;
	height:2px;
	background: url(../images/generic/sep-horizontal.png) repeat-x top left;
}

.hr.top {
	position:absolute;
	top:0;
	left:0;
}

.hr.bottom {
	position:absolute;
	bottom:0;
	left:0;
}

/* ---------------- 
HEADER
---------------- */

#header {
	width:900px;
	overflow:hidden;
	margin:0 auto;
	
	background:url(../images/generic/header-bg.png) no-repeat top left;
}

#header h1 {
	float:left;
	margin:90px 0 20px 20px;
}

#header ul {
	float:right;
	list-style:none;
	
	margin-top:150px;
	
	text-align:right;
}

#header ul li {
	overflow:hidden;
	display:inline;
	
	padding-right:15px;
	margin-left:10px;
	
	background: url(../images/generic/sep.png) no-repeat top right;
}

#header ul li:last-child {
	background:none;
	margin-right:10px;
}

#header ul li a {
	font-size:1.3em;
	font-weight:bold;
	color:#aa331f;
	text-decoration:none;
}
#header ul li a:hover {
	color:#999999;
	text-decoration:underline;
}

#header ul li#accueil a {
	color:#625050;
}
#header ul li#accueil a:hover {
	color:#555555;
}

#header ul li#portfolio a {
	color:#1f6fa9;
}
#header ul li#portfolio a:hover {
	color:#1f6fa9;
}

#header ul li#services a {
	color:#5f9717;
}
#header ul li#services a:hover {
	color:#5f9717;
}

#header ul li#apropos a {
	color:#d29c3e;
}
#header ul li#apropos a:hover {
	color:#d29c3e;
}

#header ul li#contact a {
	color:#da7266;
}
#header ul li#contact a:hover {
	color:#da7266;
}

/* ---------------- 
CONTENT
---------------- */

.content {
	width:900px;
	margin:0 auto;
	padding:15px 0;
}

.content .ad {
	position:relative;
	width:868px;
	height:173px;
	margin:0 auto 20px;
}

.content .ad h2 {
	position:absolute;
	top:36px;
	left:31px;
}

.content .ad .more {
	position:absolute;
	top:57px;
	right:40px;
}

.content .ad .portfolio {
	position:absolute;
	top:75px;
	right:40px;
}

.content .ad .services {
	position:absolute;
	top:45px;
	right:40px;
}

.content .ad .etapes {
	position:absolute;
	top:60px;
	right:40px;
}

.content .ad .apropos {
	position:absolute;
	top:57px;
	right:40px;
}

.content .ad .contact {
	position:absolute;
	top:50px;
	right:40px;
}

.content .white {
	position:relative;
	width:100%;
	overflow:hidden;
	
	padding:10px 0;
	
	background:url(../images/generic/white.png) repeat-y top left;
}

body#accueil .content .ad {
	background: #625757 url(../images/generic/ad-index.jpg) no-repeat top left;
}
body#portfolio .content .ad {
	background: #185797 url(../images/generic/ad-portfolio.jpg) no-repeat top left;
}
body#services .content .ad {
	background: #4b8212 url(../images/generic/ad-services.jpg) no-repeat top left;
}
body#services .content .ad.etapes {
	background: #4b8212 url(../images/generic/ad-etapes.jpg) no-repeat top left;
}
body#apropos .content .ad {
	background: #9a5b19 url(../images/generic/ad-apropos.jpg) no-repeat top left;
}
body#contact .content .ad {
	background: #8a2215 url(../images/generic/ad-contact.jpg) no-repeat top left;
}

.block {
	width:45%;
}

.c-left {
	float:left;
	margin-left:20px;
}

.c-right {
	float:right;
	margin-right:20px;
}

div.white.last {
	margin-bottom:0px;
}

.ad h2 {
	color:#fff;
	text-indent:-9999px;
}

div.white.txt-intro {
	margin:10px 0 25px 0;
}

div.white.txt-intro p {
	text-align:center;
	margin:5px 0;
}

div.white.txt-intro a {
	color:#990000;
	text-decoration:none;
}

div.white.txt-intro a:hover {
	color:#0066CC;
	text-decoration:underline;
}

/* ---------------- 
ACCUEIL
---------------- */

ul#serv-type {
	margin-bottom:20px;
	
	text-align:center;
	list-style:none;
}

ul#serv-type li {
	display:inline;
	margin:0 20px;
}

.accueil h3 {
	margin:10px auto;
	font-size:1.4em;
	color:#A7311E;
}

.accueil p {
	margin:5px 0;
	font-size:1.2em;
}

.accueil .preview {
	overflow:hidden;

	margin:0 auto;
	
	background:none;
}

.accueil .preview a img {
	display:block;
}

.accueil .preview a img:hover {
	filter:alpha(opacity=60);
	opacity: 0.6;
	-moz-opacity:0.6;
}

.accueil .block {
	position:relative;
	padding:5px 0 20px;

	text-align:center;
	background:url(../images/generic/white-small.png) repeat-y top left;
}

.accueil .block p {
	margin-bottom:15px;
}

.accueil .block a {
	display:block;
	width:350px;
	margin:0 30px;
}

.accueil .block .hr {
	width:405px;
	
	background:url(../images/generic/sep-horizontal-small.png) no-repeat top left;
}

.accueil .txt-news {
	margin-top:25px;

	text-align:center;
}

.accueil .txt-news a {
	font-size:1.6em;
	color:#ababab;
	text-decoration:none;
}

.accueil .txt-news a:hover {
	color:#ce8383;
	text-decoration:underline;
}

/* ---------------- 
PORTFOLIO
---------------- */

.portfolio .white {
	padding:15px 0;
	margin-bottom:40px;
}

.portfolio .white .infos {
	float:right;
	width:280px;
	margin-right:20px;
}

.portfolio .white h3 {
	color:#a7311e;
	font-weight:bold;
	font-size:1.5em;
	margin:10px 0 10px;
	padding:0;
}

.portfolio .white ul {
	list-style:none;
	font-size:1.2em;
	color:#0076a3;
}

.portfolio .white ul li {
	margin:3px 0;
}

.portfolio .white p {
	margin:15px 0;
	font-size:1.2em;
}

.portfolio .white a.see-website {
	float:left;
	display:block;
	width:115px;
	height:28px;

	color:#235a89;
	font-size:1.2em;
	text-indent:-9999px;
	
	background:url(../images/portfolio/gotowebsite.png) no-repeat 0 0;
}

.portfolio .white a.see-website:hover {
	color:#b2912e;
	background:url(../images/portfolio/gotowebsite.png) no-repeat 0 -28px;
}

.portfolio .white a.see-image {
	float:left;
	display:block;
	width:112px;
	height:28px;
	
	margin-right:10px;

	color:#235a89;
	font-size:1.2em;
	text-indent:-9999px;
	
	background:url(../images/portfolio/gotoimage.png) no-repeat 0 0;
}

.portfolio .white a.see-image:hover {
	color:#b2912e;
	background:url(../images/portfolio/gotoimage.png) no-repeat 0 -28px;
}

.portfolio .white img {
	float:left;
	margin:0 20px;
}

.portfolio a {
	color:#576d7a;
}
.portfolio a:hover {
	color:#1a577b;
}

.portfolio .cv {
	margin-bottom:0;
	padding:10px 0;
}

.portfolio .cv p {
	margin:5px 0;

	text-align:center;
}

.portfolio .cv a {
	font-size:1.3em;
	color:#ababab;
	text-decoration:none;
	font-weight:bold;
}

.portfolio .cv a:hover {
	color:#ce8383;
	text-decoration:underline;
}

/* ---------------- 
SERVICES
---------------- */

.services .white {
	padding-bottom:20px;
	margin-bottom:20px;
}

.services h3 {
	position:relative;
	top:9px;
	margin:0 0 0 20px;
	z-index:100;
	
	font-size:2em;
	color:#095e0d;
}

.services .white h4 {
	position:relative;
	color:#0b417e;
	font-size:1.3em;
	margin:0;
}

.services .white h4 img {
	position:relative;
	top:15px;
	margin-right:12px;
}

.services .white .c-left p,
.services .white .c-right p {
	margin:5px 0 10px 45px;
	font-size:1.2em;
}

.services p {
	text-align:justify;
}

.services ul {
	list-style:none;
}

.services ul li {
	position:relative;
	vertical-align:middle;
}

.services ul li.white {
	margin:0;
	padding:0;
}

.services ul li h5,
.services ul li p {
	float:left;
}

.services ul li h5 {
	width:200px;

	margin:23px 0 0;
	
	font-size:1.4em;
	color:#617e98;
}

.services ul li p {
	width:450px;
	margin:13px 0 0 60px;
	font-size:1.2em;
	text-align:left;
}

.services .number {
	float:left;
	width:30px;
	height:26px;
	
	margin:16px 20px 16px 60px;
	padding-top:4px;
	
	text-align:center;
	font-size:1.7em;
	font-weight:bold;
	color:#fff;
	background:url(../images/services/bg-number.png) no-repeat top left;
}

/* ---------------- 
A PROPOS
---------------- */

.apropos .white .infos-txt {
	float:left;
	width:630px;
	
	margin-left:20px;
	padding:10px 0;
}

.apropos .white .infos-txt h3 {
	margin:30px 0 10px;
	padding:0;
	
	color:#a7311e;
	font-weight:bold;
	font-size:1.5em;
}

.apropos .white .infos-txt h3.first {
	margin-top:10px;
}

.apropos .white .infos-txt p {
	font-size:1.2em;
	margin-left:25px;
}

.apropos .white .infos-txt span {
	font-weight:bold;
}

.apropos .white .image {
	float:right;
	margin:20px 20px 0 0;
	
	text-align:center;
}

.apropos .white .image img {
	border:1px solid #fff;
}

.apropos .cv {
	margin-bottom:20px;
}

.apropos .cv p {
	margin:5px 0;

	text-align:center;
}

.apropos .cv a {
	font-size:1.6em;
	color:#ababab;
	font-weight:bold;
	text-decoration:none;
}

.apropos .cv a:hover {
	color:#ce8383;
	text-decoration:underline;
}

/* ---------------- 
CONTACT
---------------- */

.contact p {
	font-size:1.2em;
}

.contact #contact-txt {
	float:left;
	width:400px;
	
	margin:0 70px 0 60px;
}

.contact #contact-txt #direct {
	margin:30px 0;
	padding:5px 5px 5px 20px;
	
	background:#dcdcdc;
	font-size:1.1em;
	
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px; 
}

.contact #contact-txt #direct a {
	color:#990000;
	text-decoration:none;
}

.contact #contact-txt #direct a:hover {
	color:#0066CC;
	text-decoration:underline;
}

.contact #contact-txt #direct span {
	font-weight:bold;
}

.contact form {
	float:left;
	width:286px;
}

.contact form p {
	margin:15px 0 5px 0;

	font-weight:bold;
}

.contact input {
	width:286px;
	height:23px;
	
	padding:5px 5px;
	
	background:url(../images/contact/input-bg-idle.png) no-repeat top left;
	border:none;
}

.contact input:focus {
	background:url(../images/contact/input-bg-focus.png) no-repeat top left;
}

.contact textarea {
	width:286px;
	height:159px;
	
	padding:5px 5px;
	
	background:url(../images/contact/textarea-bg-idle.png) no-repeat top left;
	border:none;
}

.contact textarea:focus {
	background:url(../images/contact/textarea-bg-focus.png) no-repeat top left;
}

.contact #send {
	overflow:auto;
	width:296px;
	margin:5px 0 15px 0;
	text-align:right;
}

.contact #send #send-btn {
	display:block;
	float:right;
	width:80px;
	height:17px;
	
	text-indent:-9999px;
	background:url(../images/contact/btn-send.png) no-repeat 0 0;
	outline:none;
}

.contact #send #send-btn:hover {
	background:url(../images/contact/btn-send.png) no-repeat 0 -28px;
}

.contact a.social-link {
	display:block;
	float:left;
	width:116px;
	height:33px;
	
	margin-right:30px;
}

.contact a.social-link:hover {
	filter:alpha(opacity=50);
	opacity: 0.5;
	-moz-opacity:0.5;
} 

#contact p#success {
	width:840px;
	margin:15px auto 0;
	padding:10px;
	
	color:#fff;
	text-align:center;
	font-size:1.3em;
	font-weight:bold;
	background:#007d1d;
	
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px;  
}

/* ---------------- 
FOOTER
---------------- */

#footer {
	overflow:hidden;
	width:840px;
	
	margin:10px auto 30px;
	padding:1px 10px;
	
	background:#d1d1d1;
	text-align:center;
	
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px; 
}

#footer p {
	float:left;
}

#footer p#info-contact {
	float:right;
}

#footer a {
	color:#686868;
}

#footer a:hover {
	color:#4c4c4c;
}

#footer ul {
	float:left;
	list-style:none;
	margin:10px 0 0 105px;
}

#footer ul li {
	display:inline;
	margin:0 5px;
}