/* CSS Reset ================================================================================= */

* { margin:0; padding:0; }

body {font:100% Helvetica, Arial, sans-serif; text-align:left; color:#fff;}

a, a:visited { text-decoration:none; color:#000; outline:none; }
a:hover { text-decoration:underline; }
a img { border:0;}
.clearboth{
clear:both;	
}
.yellow{
background:#f2ee71;	
}

.yellow-box{
float: left;
margin-bottom: 20px;
background:#FFFDCC;	
padding: 20px 20px 10px 20px;

}

#content .intro .intro-text  p.message {
	margin-top:20px;
	padding:5px;
font: 12px 'DroidSansRegular', Helvetica, Arial, sans-serif;
background:#fffbcc;
float:left;
}

/* Heading */
h1, h2, h3, h4, h5, h6, .head { margin-bottom:.4em; line-height:1.3em; }
h1 { font-size:2em; line-height:1.17; }
h2 { font-size:1.5em; }
h3 { font-size:1.35em; }
h4 { font-size:1.05em; }
h5 { font-size:1.05em; }
h6 { font-size:.95em; }


.getclicky{
	position:absolute;
	left:-3000px;
}

/* Forms */
form          { display:inline; }
fieldset      { border:0; }
legend        { display:none; }

/* Table */
table         { border:0; border-collapse:collapse; border-spacing:0; empty-cells:show; font-size:100%; }
caption,th,td { vertical-align:top; text-align:left; font-weight:normal; }

/* Content */
address       { font-style:normal; }
cite          { font-style:normal; }
q,
blockquote    { quotes:none; }
q:before, 
q:after       { content:''; }
/*small,big     { font-size:1em; }*/
sup           { font-size:1em; vertical-align:top; }

/* Lists */
ul,ol         { list-style:none; }

/* Global Typo */
body {font: 13px/1.2em 'DroidSansRegular', Helvetica, Arial, sans-serif; color:#534741;}
h1, h2, h3 {font: 14px/1.2em 'DroidSerifRegular', Georgia, serif;} 
#content .intro .intro-text p {font: 21px/1.2em 'DroidSansBold', Helvetica, Arial, sans-serif;}
#nav a, .intro-text, #footer .title, .heading h2, .heading-minimal h2,
.two-column .left-col .block h3 {font: 14px/1.2em 'DroidSerifBold', Georgia, serif;}
a.bluearrow {color:#0071bc; background:url(../images/arrow-link.png) no-repeat left center; padding-left:18px;}


/* Global Styles */
.left {float:left;}
.right {float:right;}
.heading h2, .heading-minimal h2 {font-size:42px; color:#005289;}
.heading-minimal h2 {font-size:32px; color:#005289;}
.heading li, .heading p, .heading-minimal li, .heading-minimal p {
	padding:0 0 30px 0; 
	font-size:22px; 
	color:#536F80; 
	line-height:1.2em;
}
.heading li, .heading-minimal li {background:url(../images/icn-check.png) no-repeat left center; padding:3px 0 3px 30px;}
.nopadding {padding:0;}
.img-border{border:1px solid #dcd9d6;}
.small {font-size: 11px;}
a.gray{color:red;}
.orange{color:#f27500;}

/* Structure ================================================================================= */
body {background:url(../images/bg-page-2.jpg) repeat left top;}
#wrapper {overflow:hidden; width:1020px; padding:0 55px; margin:0 auto; background:url(../images/ruler.gif) no-repeat left top;}
#content, #footer {overflow:hidden;}
#content {background:url(../images/dot-horizontal.gif) repeat-x left bottom;}
.one-column, .two-column .left-col {padding:0 0 40px 29px; }


/* Header ================================================================================= */
#header {background:url(../images/bg-menu-bis.png) repeat-x left top;}
#header-holder {
	overflow:hidden; 
	width:1020px; 
	padding:0 55px; 
	height:75px; 
	margin:0 auto; 
	background:url(../images/bg-menu.png) no-repeat 55px top;
}

/* Logo */
#logo {width:160px; height:75px; margin:0; padding-left:42px;}
#logo a {display:block; width:152px; height:75px; text-indent:-999em;}

/* Navigation */
#nav {float:left; padding:10px 0 0 35px;}
#nav li {float:left; padding:25px 15px 23px 15px; background:url(../images/nav-border.gif) no-repeat right center;}
#nav li:last-child {background:none;}
#nav li span {display:block; text-indent:-999em; height:0;}
#nav li a {display:block; padding-bottom:5px; color:#cff1ff; text-transform:uppercase; text-decoration:none;}
#nav li a:hover, #nav li a.current {color:#fff; border-bottom:2px solid #fff;}


/* Content - Homepage ================================================================================= */

/** Intro **/
#content .intro {padding-top:42px; background:url(../images/img-vincent.jpg) no-repeat 445px top; height:425px;}
#content .intro .intro-text {width:480px; color:#536f80; font-size:21px; padding-bottom:24px;}
#content .intro .intro-text h2 {font-size:40px; color:#1e323d; line-height:1em; margin:0; padding-bottom:25px;}
#content .intro .intro-text p {padding-bottom:12px;}
#content .intro .intro-text a {color:#0071bc; text-decoration:underline;}

#content .intro .more-reference {
	font:16px 'DroidSansRegular', Helvetica, Arial, sans-serif; 
	background:url(../images/btn-portfolio.png) no-repeat left top; 
	height:60px; 
	margin-top:20px;
}
#content .intro .more-reference a {color:#536F80; font-weight:bold;}
#content .intro .more-reference a.btn-voir-reference {display:block; width:280px; height:50px; text-indent:-999em; float:left;}
#content .intro .more-reference span {float:left; display:block; padding:10px 0 0 15px;}

/** Competence & Advantages Blocks **/
.block {overflow:hidden; color:#374a57;}
.block h3 {
	font:16px 'DroidSerifRegular', Georgia, serif;
	color:#005289; 
	text-transform:uppercase; 
	background:url(../images/separation-title.png) no-repeat left bottom; 
	padding:6px 0; 
	margin-bottom:15px;
}
.block a {color:#0071bc; background:url(../images/arrow-link.png) no-repeat left center; padding-left:18px;}
.block div.left {width:300px; padding-right:25px; background:url(../images/separation-title.png) no-repeat left top;}
.block div.left:last-child {padding-right:0;}

/** Competence Block **/
.competence {padding-bottom:45px;}
.competence div.left {position:relative;}
.competence div.left img {position:absolute; right:25px;}
.competence div.left p {width:170px; height:125px; position:relative; z-index:2;}
.competence div.left:last-child img {right:-25px;}
.competence .mid {width:305px;}
.competence .mid img {margin-right:-10px;}

/** Portfolio **/
.portfolio {background:url(../images/bg-portfolio.png) no-repeat left top; width:922px; height:452px; padding:20px; color:#534741;}
.portfolio .img-folio {background:url(../images/thumbnail-big.png) no-repeat left top; width:639px; height:458px;}
.portfolio .text-folio {padding:12px 0 0 0; width:265px; background:url(../images/separation-title.png) no-repeat left 12px;}
.portfolio .text-folio p {padding-right:20px;}
.portfolio .text-folio h3 {
	font: 14px/1.2em 'DroidSerifRegular', Georgia, serif; 
	text-transform:uppercase; 
	background:url(../images/separation-title.png) no-repeat left bottom; 
	padding:10px 0; 
	margin-bottom:15px;
}
.portfolio .text-folio .port-title {font: 21px/1.2em 'DroidSerifRegular', Georgia, serif; }
.portfolio .text-folio .slogan {font-size:14px; display:block; padding-bottom:20px;}

/* Portfolio Carousel */
.jcarousel-skin-tango {position:relative;}
.jcarousel-skin-tango .jcarousel-item-horizontal {width:922px;}
.jcarousel-skin-tango .jcarousel-next-horizontal, .jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 20px;
    right: 5px;
    width: 23px;
    height: 23px;
    cursor: pointer;
    background: url(../images/arrow-right.png) no-repeat left top;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {background: url(../images/arrow-left.png) no-repeat left top; right:40px;}

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal {cursor: default;}

/** Advantages Block **/
.advantages {padding-top:35px;}
.advantages p {padding-bottom:15px;}
.advantages .img-holder {overflow:hidden; height:96px; padding-top:10px;}
.advantages .img-holder img.mid {padding:10px 0 0 20px;}
.advantages .img-holder img.right {padding-top:10px;}

/* Content - Header ================================================================================= */
.ergonomie-heading {background:url(../images/illustrations/wireframe-top.png) no-repeat 30px top; }
.e-commerce-heading {background:url(../images/illustrations/commerce-top.png) no-repeat ; }
.design-heading {background:url(../images/illustrations/design-top.png)  no-repeat 20px 15px; ; }

/* Content - Ergonomie ================================================================================= */
.two-column .left-col {width:715px; background:url(../images/bg-grid.png) repeat left top; margin:0 0 2px 3px; padding-bottom:0;}
.two-column .left-col .left-holder {background:url(../images/dot-vertical.gif) repeat-y right top; padding-top:35px; overflow:hidden;}
.two-column .left-col .block {padding:0 20px 20px 0;}
.two-column .left-col .heading {padding:0 0 55px 220px;}
.two-column .left-col .heading-minimal {padding:0 0 40px 0;}
.two-column .left-col .block h3 {background:none; font-size:18px; text-transform:none;}
.two-column .left-col .block .image-holder {width:auto;}
.two-column .left-col .block .image-holder img {width:auto; height:auto; padding-left:15px;}
.two-column .left-col .block .image-holder .caption {
	font:12px/1.2em 'DroidSerif', Georgia, serif; font-style:italic;
	display:block; 
	margin:10px 10px 10px 25px;
	border-left:2px solid #536F80;
	padding-left:10px;
	color:#536F80;
}
.two-column .left-col .block p, 
.two-column .left-col .block li {/*width:370px;*/ padding-bottom:15px; font-size:14px; line-height:1.3em; color:#534741;}
.two-column .left-col .block ul ul {list-style:disc; padding-left:15px;}
.two-column .left-col .block li li {padding-bottom:0;}
.two-column .left-col .block a {background:none; padding:0; text-decoration:underline;}

.two-column .left-col .reference {background:url(../images/separation-title.png) repeat-x left top; margin-right:20px;}
.two-column .left-col .reference h3 {
	font:16px 'DroidSansRegular', Helvetica, Arial, sans-serif; 
	color:#005289;
	text-transform:uppercase; 
	background:url(../images/separation-title.png) repeat-x left bottom; 
	padding:8px 0;
}
.two-column .left-col .reference ul {padding-top:20px;}
.two-column .left-col .reference li {
	float:left; 
	background:url(../images/thumbnail-small.png) no-repeat left top; 
	width:217px; 
	height:180px; 
	padding-right:10px;
}
.two-column .left-col .reference li:last-child {padding:0;}

.two-column .right-col {width:272px; padding-top:222px; background:url(../images/dot-horizontal.gif) repeat-x left bottom;}
.two-column .right-col-bis {width:272px; padding-top:40px; background:url(../images/dot-horizontal.gif) repeat-x left bottom;}
.two-column .right-col .right-block, .two-column .right-col-bis .right-block   {background:url(../images/dot-horizontal.gif) repeat-x left top; padding:20px;}
.two-column .right-col .right-block h3, .two-column .right-col-bis .right-block h3 {color:#005289; font-weight:normal; padding:10px 0; font-size:16px;}
.two-column .right-col .right-block img, .two-column .right-col-bis .right-block img {padding:0 0 5px 5px;}
.two-column .right-col .right-block a, .two-column .right-col-bis .right-block a {color:#0071bc;}

/* Content - Portfolio List ================================================================================= */
.one-column .heading {padding:35px 0 0 0;}
.one-column .port-heading {background:url(../images/illustrations/portfolio.png) no-repeat left 35px; padding-left:220px;}
.showcase {padding:30px 0; min-height:450px;}
.showcase ul {
	overflow:hidden; 
	background:url(../images/separation-title.png) repeat-x left top; 
	margin-right:20px; 
	padding-top:2px;
}
.showcase ul li {float:left;}
.showcase #portfolio-filter li {border-right:1px solid #d2d9db;}
.showcase #portfolio-filter a {display:block; padding:10px; color:#005289; font-size:16px;}
.showcase #portfolio-filter a:hover, 
.showcase #portfolio-filter a.current {background-color:#fff; text-decoration:none;}
.showcase #portfolio-list {padding:20px 0 40px 0;}
.showcase #portfolio-list li {
	width:217px; 
	height:156px; 
	background:url(../images/thumbnail-small.png) no-repeat left top; 
	margin:0 20px 20px 0;
}
.showcase #portfolio-list li a img {border:1px solid #ccc;}

/* Content - Portfolio Details ================================================================================= */
.port-details {
	overflow:hidden; 
	background:url(../images/separation-title.png) repeat-x left top; 
	margin-right:20px; 
	padding-top:40px;
}
.port-details .block {padding-bottom:50px; color:#534741; clear: both; float: left;}
.port-details .block .image-holder {
	
 	width:724px; 

 	padding-right:0;
 }
.port-details .block img {border:1px solid #ccc;}

.port-details .block .details-box {width:220px; padding:8px 10px 0 0; border-top:1px solid #e6dfd6;}
.port-details .block .details-box h2 {
	border-bottom:1px solid #e6dfd6; 
	padding:0 0 6px 5px; 
	font:14px 'DroidSansBold',Helvetica,Arial,sans-serif; 
	color:#534741; 
	text-transform:uppercase;
	margin:0;
}
.showcase .port-details .block .details-box ul {background:none; padding:0; margin:0;}
.port-details .block .details-box li {padding:3px; border-bottom:1px solid #e6dfd6; float:none; overflow:hidden;}
.port-details .block .details-box li.nopadding {padding:0 2px;}
.port-details .block .details-box li span {display:block; padding:2px;}
.port-details .block .details-box li span.left {width:53px; border-right:1px solid #e6dfd6;}
.port-details .block .details-box li span.client {padding-left:10px; width:auto; border:0;}
.port-details .block .details-box a {background:none; padding:0;}

/* Content - Downloads ================================================================================= */

.move{
position: relative;
bottom: -10px;
left:-30px;	
}

.move2{
position: relative;
bottom: -5px;
}

/* Content - Contact ================================================================================= */
#contact {background:none;}
.two-column .left-col .contact-heading {background:url(../images/illustrations/contact.png) no-repeat left 20px; padding-bottom:25px;}
#contact-right {padding-top:275px; font-size:14px;}
#contact-right .skype {background:url(../images/icn-skype.png) no-repeat left center; padding:2px 0 2px 45px;}
#contact-right ul.social li {line-height:2em; padding-bottom:15px;}
#contact-right ul.social li a {display:block; padding-left:45px; color:#534741; height:32px;}
#contact-right ul.social li a:hover {text-decoration:none;}
#contact-right ul.social li.wordpress a {background:url(../images/link-wordpress-blue.png) no-repeat left center;}
#contact-right ul.social li.twitter a {background:url(../images/link-twitter.png) no-repeat left center;}
#contact-right ul.social li.linkedin a {background:url(../images/link-linkedin.png) no-repeat left center;}



/* Contact Form */ 
div.left input, 
div.left textarea {border:1px solid #b2a497; width:176px; padding:5px 10px; color:#534741; float:left;}
div.left fieldset {padding-top:30px; width:650px;}
div.left fieldset ol {overflow:hidden;}
div.left fieldset li {float:left; width:320px; padding-bottom:18px;}
div.left fieldset li.clear-left {clear:left;}
div.left fieldset li.comment {width:620px;}
div.left label {font-weight:bold; font-size:13px; display:block; width:80px; float:left; padding-top:5px;}

.thankyou {padding:0 0 20px 20px; font-size: 18px; color:green;}
.thankyou p {padding-bottom:5px;}

div.left label.error {width:auto; color:red; padding-left:80px; font-weight:normal;}

div.left .contact-form fieldset {padding:0 0 40px 30px;}
div.left .contact-form textarea {width:495px;}

/* Form alert */
.special {
		display:none;
}
#alert {
	width:575px;
	padding:10px;
	margin:0 0 10px 30px;
	text-align: left;
	line-height:18px;
}

/* Footer ================================================================================ */
#footer {padding:18px 0 20px 29px; background:url(../images/bg-footer.png) repeat-x left top; font-size:14px; color:#534741;}
#footer div.left {width:645px; padding-top:11px;}
#footer div.left .title {font-size:21px; padding-bottom:20px;}
#footer div.left a {color:#0071BC; text-decoration:underline;}
#footer div.left a.skype {background:url(../images/link-skype.png) no-repeat right center; padding-right:22px;}
#footer div.left fieldset {padding-top:0; width:650px;}
#footer div.left fieldset ol {overflow:hidden;}
#footer div.left fieldset li {float:left; width:320px; padding-bottom:18px;}
#footer div.left fieldset li.comment {width:620px;}
#footer div.left label {font-weight:bold; font-size:13px; display:block; width:80px; float:left; padding-top:5px;}
#footer div.left input {width:176px;}
#footer div.left textarea {width:496px; height:145px;}
div.left input.btn-envoyer {
	width:124px; 
	height:46px; 
	border:0; 
	background:url(../images/btn-envoyer.png) no-repeat left top; 
	padding:0; 
	text-indent:-999em; 
	margin-left:80px; 
	cursor:pointer;
}
div.left input.btn-send {
	width:124px; 
	height:46px; 
	border:0; 
	background:url(../images/btn-send.png) no-repeat left top; 
	padding:0; 
	text-indent:-999em; 
	margin-left:80px; 
	cursor:pointer;
}
#footer div.left input.btn-envoyer {margin-left:80px;}

#footer div.right {width:342px; background:url(../images/dot-vertical.gif) repeat-y left top; padding:15px 0 0 0;}
#footer div.right .footer-block {
	margin-bottom:30px; 
	padding:0 0 30px 30px; 
	background:url(../images/separation-dot-horizontal.png) repeat-x left bottom; 
	font-size:12px;
}
#footer div.right .footer-block a {font-size:12px; color:#534741;}
#footer div.right .title {font-size:16px; padding-bottom:15px;}
#footer div.right ul.social {overflow:hidden; padding-left:10px;}
#footer div.right ul.social li {
	float:left; 
	padding:5px 20px 5px 0; 
	margin-right:20px; 
	background:url(../images/dot-vertical.gif) repeat-y right top;
}
#footer div.right ul.social li:last-child {background:none;}
#footer div.right ul.social li a {display:block; padding-top:35px;}
#footer div.right ul.social li a:hover {text-decoration:none;}
#footer div.right ul.social li.wordpress a {background:url(../images/link-wordpress-blue.png) no-repeat center top;}
#footer div.right ul.social li.twitter a {background:url(../images/link-twitter.png) no-repeat center top;}
#footer div.right ul.social li.linkedin a {background:url(../images/link-linkedin.png) no-repeat center top;}

#footer div.right ul.more-info {}
#footer div.right ul.more-info li {padding:2px 0 3px 25px;}
#footer div.right ul.more-info li.propos {background:url(../images/mini-icn-people.png) no-repeat left center;}
#footer div.right ul.more-info li.travail {background:url(../images/mini-icn-notepad.png) no-repeat left center;}
#footer div.right ul.more-info li.expert {background:url(../images/mini-icn-network.png) no-repeat left center;}
#footer div.right ul.more-info li.resource {background:url(../images/mini-icn-gift.png) no-repeat left center;}
#footer div.right ul.more-info li.legal {background:url(../images/mini-icn-book.png) no-repeat left center;}

.footer-contact {height:150px;}
.footer-contact div.right {width:275px !important;}