@charset "utf-8";

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

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, address, th, td { margin : 0; padding :0; border:0px; color:#333; font-size:12px; }
h1, h2, h3, h4, h5, h6 { font-size : 100%; font-weight : normal;  }
ol, ul { list-style-type : none; }
caption, th { text-align : left; }
fieldset, img { border : 0; }
dt, address, caption, cite, code, dfn, th, var { font-style : normal; font-weight : normal; }
q:before, q:after { content :''; }
:lang(fr) { quotes:'\ab\2005' '\2005\bb' '\2039\2005' '\2005\203a'; }
/* ======================================================================================= */


/* Global Styles ========================================================================= */
body { word-spacing:1px; line-height: 1px; background-color: #EEEEEE; font: 12px Arial, Helvetica, sans-serif; }
#page { position:relative; margin:0 auto; width:1160px; }
a { text-decoration:none; }
h2, label { }
h3 { font-size:20px; letter-spacing:0.1em; }
h5 { font-size:16px; }
li { list-style-position: inside; list-style-image: url("../images/arrow_grey.png"); }
.clear { clear:both; }
.noir { color:#000000; }
.grisSombre { color:#313131; }
.grisMoyen1 { color:#545652; }
.grisMoyen2 { color:#767676; }
.grisClair { color:#dddddd; }
.orange { color:#ff7200; }
.blanc { color:#ffffff; }
.small { font-size:10px; }

/* Base Columns ========================================================================= */
.col4-set { position:absolute; top:780px; left:0px; height:410px; width:1160px; line-height:1.5em; padding-top: 40px; }
.col4-set .col-1 { float:left; width: 260px; margin-left: 0px; }
.col4-set .col-2 { float:left; width: 300px; margin-left: 40px; }
.col4-set .col-3 { float:left; width: 260px; margin-left: 40px; margin-top:10px; }
.col4-set .col-4 { float:left; width: 200px; margin-left: 60px; }

/* Titles ========================================================================= */
.col4-set .col-1 h1 span,
.col4-set .col-2 h1 span,
.col4-set .col-4 h1 span { display:block; position:absolute; top:-999em; left:-999em; }
.col4-set .col-1 h1,
.col4-set .col-2 h1,
.col4-set .col-4 h1 { height:30px; margin-bottom:15px; }
.col4-set .col-1 h1 { background:transparent url("../images/a-propos.png") left top no-repeat; }
.col4-set .col-2 h1.design { background:transparent url("../images/interface-et-design.png") left top no-repeat; }
.col4-set .col-2 h1.web { background:transparent url("../images/web-et-applications.png") left top no-repeat; }
.col4-set .col-4 h1 { background:transparent url("../images/contact.png") left top no-repeat; height:30px; }

/* Pages ========================================================================= */
.col4-set .col-1 p,
.col4-set .col-2 p,
.col4-set .col-4 p { margin-bottom:15px; }

/* xHtml ========================================================================= */
#fx-project { width: 1160px; height: 780px; background-color: #FCFCFC; }
.projectsGrid { width:1140px; height:100%; padding:30px; }
.projectItemGrid { float:left; width:140px; height:200px; margin-right:50px; }
.projectItemGrid h2 { color:#222222; }
.projectItemGrid h3 { color:#222222; font-size:10px; }

/* A propos */
.col4-set .col-1 #dispo { height:45px; width:210px; color:#774E00; background: #FFD200 url("../images/valid-dispo.png") left top no-repeat; margin-top:24px; padding: 5px 0 0 50px; }

/* Design et web */
.col4-set .col-2 ul.design { padding-bottom: 32px; margin-bottom: 28px; border-bottom: 1px dotted #B2B2B2; }

/* Formulaire */
#contact { }
#contactText { float:right; width:160px; }
#contactText p { margin-bottom:10px; line-height:15px; font-size:10px; }
#contactForm  { position:relative; }
label { display:block; margin:3px 0; }
input { background-color:#DDDDDD; width:250px; height:20px; padding:5px; font:12px Arial, Helvetica, sans-serif; color:#222; }
input:focus { background-color:#B4B4B2; outline:#FFAD00 solid 2px; }
textarea { background-color:#DDDDDD; width:250px; height:124px; padding:5px; border:0px; font:12px Arial, Helvetica, sans-serif; color:#222; overflow:auto; }
textarea:focus { background-color:#B4B4B2; outline:#FFAD00 solid 2px; }
textarea#texte {  }
label#texte_label {  }
label.error { font-weight:normal; color:red; text-align:left; width:160px; padding-left:20px; background: transparent url("../images/cancel.png") no-repeat top left; }
label#name_error { position:absolute; top:25px; left:236px; z-index:10; width:16px; height:16px; }
label#email_error { position:absolute; top:79px; left:236px; z-index:10; width:16px; height:16px; }
label#texte_error { position:absolute; top:188px; left:236px; z-index:10; width:16px; height:16px; }
input.button { margin-left:20px; height:30px; width:250px; cursor:pointer; padding:0; outline:none; background: transparent url("../images/envoyer.png") top left no-repeat;}
input.button:hover { background: transparent url("../images/envoyer-hover.png") top left no-repeat; }
input.button:focus { outline:none; }
#message { position:absolute; top:60px; left:60px; width:200px; }
#message h2 { font-size:120%; }
#message p { font-weight:bold; margin:6px 0px; }
#checkmark { position:relative; top:-25px; left:-40px; }

/*shadow */
.shadowLeft { position:absolute; top:780px; left:0px; width:900px; height:14px; background:transparent url('../images/mz_shadow-left.png') left top no-repeat; }
.shadowRight { width:900px; height:14px; background:transparent url('../images/mz_shadow-right.png') right top no-repeat; }


/* Contacts */
.col4-set .col-4 a { color:#555555; font-style:italic; }
.col4-set .col-4 .type,
.col4-set .col-4 .tel,
.col4-set .col-4 .email { display:none; }
.col4-set .col-4 .vcard { margin-bottom:22px; }
.col4-set .col-4 .social { float:right; }

/* Footer */
#wrapper { position:absolute; top:1225px; left:0; width:100%; }
#footer { width: 1160px; height:75px; margin:0 auto 48px; background-image:url('../images/mz_footer.png');  clear: left; padding-top:60px;  }
#footer p { color: #666; }
.footerMain { margin-left:20px; }
.footerMain a { color: #555555; margin-right:6px; }
.footerMain a:hover { color: #ff7200; }
.footerCopy { float:right; margin-right: 124px; }