/*css document*/
/********************RESET********************/
*,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin: 0;
padding: 0;
}
table{
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0;
}
ul,ol {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
q:before,q:after {
content: '';
}
abbr,acronym {
border: 0;
cursor: help;
}
a {
text-decoration: none;
}
h3 {
font-family: Helvetica, Verdana, Arial, sans-serif;
font-size: 17px;
font-weight: bold;
letter-spacing: -1px;
margin: 0 27px;
padding: 14px 0 8px 0px;
color: #F8CE89;
text-decoration: underline;
}
/*******************************************************************************************************************************/
body {
background: /*#114a66*/ #3e310e url(../img/bg.gif) repeat-x;
font: 12px , Verdana, tahoma, Verdana, Helvetica, Arial, Verdana, sans-serif;
color: #606060;
}

#logo, #header, #nav, #content, #footer-content {
width: 840px;
margin: 0 auto;
clear: both;
text-align: left;
line-height: 1.6em;
}
#header {
height: 360px;
}
#logo h1 a {
display: block;
}
#logo h2 a {
display: block;
}
/***************************************NAVIGATION***************************************/
#nav {
height: 90px;
}
#nav ul {
float: left;
height: 90px;
margin-top: 27px;
}
#nav ul li {
float: left;
width: 210px;
height: 90px;
}
#nav ul li a {
width: 210px;
height: 90px;
display: block;
}
#nav ul li a span {
display: none;
}
#nav ul li#home {
background: url(../img/nav/home_hover.gif) no-repeat;
}
#nav ul li#contact {
background: url(../img/nav/contact_hover.gif) no-repeat;
}
#nav ul li#services {
background: url(../img/nav/services_hover.gif) no-repeat;
}
#nav ul li#ref {
background: url(../img/nav/ref_hover.gif) no-repeat;
}
/************************************LAYOUT*************************************************/
#wrapper {
background: #114a66 url(../img/bg_wrapper.gif) repeat-x;
}
#content {
background: url(../img/bg_content.gif) no-repeat top;
padding-top: 60px;
text-align: justify;
color: #FFF;
padding-bottom: 60px;
}
#leftcol {
float: left;
width: 520px;
background: url(../img/title.gif) repeat-y;
}
#leftcol p {
padding: 0 27px;
}
#leftcol ul.descriptif, #leftcol ul.ul_services, #leftcol ul.ul_plan {
padding: 0 40px;
}
#leftcol ul.ul_services, #leftcol ul.highlight, #leftcol ul.external_link {
padding: 0 27px; 
}
#leftcol ul.ul_plan {
margin: 24px 0 40px 0;
font-weight: bold;
}
#leftcol ul.ul_plan ul {
padding: 0 27px;
font-size: .9em;
font-weight: normal;
}
#leftcol ul.ul_plan a, #leftcol ul.ul_plan ul a {
text-decoration: underline;
color: #FFF;
}
#leftcol ul.highlight {
margin: 12px 0 22px 0;
}
#leftcol ul.highlight li {
font-size: 1.3em;
font-weight: bold;
} 
#leftcol ul.descriptif li {
background: url(../img/fleche.gif) no-repeat left 50%;
padding-left: 22px;
margin: 8px 0;
font-weight:  bold; 
}
#leftcol ul.ul_services li {
background: url(../img/ok.gif) no-repeat left 50%;
padding-left: 22px;
margin: 3px 0;
}
#leftcol ul.external_link li {
margin: 6px 0;
}
#leftcol ul.external_link li a {
color: #FFF;
text-decoration: underline;
background: url(../img/link_out.gif) no-repeat right top;
padding-right: 10px;
font-size: .9em;
font-weight: bold;
}
#leftcol p.last {
padding-bottom: 36px;
background: url(../img/bottom.gif) no-repeat bottom left;
}
#leftcol p.last a {
color: #FFF;
text-decoration: underline;
font-weight: bold;
}
#leftcol img {
float: right;
margin-right: 14px;
margin-top: -40px;
padding-left: 8px; 
}
#rightcol, #rightcol_contact {
width: 260px;
float: right;
padding: 6px 6px 0 0;
color: #FFF;
}
#rightcol ul  {
background: url(../img/rightcol.gif) repeat-y;
padding-top: 8px;
}
#rightcol ul li {
padding-left: 12px;
}
#rightcol ul li span {
padding-left: 14px;
font-size: .9em;
}
#rightcol ul li a {
background: url(../img/bullet.gif) no-repeat 0 12px;
font-weight: bold;
text-decoration: underline;
color: #FFF;
padding: 8px 0;
padding-left: 16px;
}
#rightcol ul li.lastLi {
background: url(../img/rightcol_bottom.gif) no-repeat bottom left;
padding-bottom: 24px;
padding-left: 12px;
}
#rightcol_contact {
background: url(../img/rightcol_bottom.gif) no-repeat bottom left;
padding-bottom: 48px;
}
#rightcol_contact p {
background: url(../img/rightcol.gif) repeat-y;
padding: 0 8px;
}
#rightcol_contact p a {
font-size: .9em; 
color: #FFF;
text-decoration: underline;
}
#rightcol_contact p span {
font-weight: bold;
}
#loader {
  display: none;
}
#mess {
  display: none;
}  

/* paragraphe 'pitch' des packs */
p.highlight {
  margin: 12px 0 22px 0;
  /*font-size: 1.3em;*/
  font-weight: bold;
  font-style:italic;
}



/****************************************************H2***************************************************/
#h2_creation {
background: url(../img/h2_accueil_creation.gif) no-repeat top left;
text-indent: -9999px;
height: 69px;
}
#h2_standards {
background: url(../img/h2_accueil_standards.gif) no-repeat;
text-indent: -9999px;
height: 46px;
margin-top: 22px;
}
#h2_accessible {
background: url(../img/h2_accessible.gif) no-repeat;
text-indent: -9999px;
height: 46px;
margin-top: 22px;
}
#h2_contact {
background: url(../img/h2_contact.gif) no-repeat;
text-indent: -9999px;
height: 107px;
}
#h2_conseil {
background: url(../img/h2_services_conseil.gif) no-repeat;
text-indent: -9999px;
height: 69px;
}
#h2_webdesign {
background: url(../img/h2_services_webdesign.gif) no-repeat;
text-indent: -9999px;
height: 46px;
margin-top: 22px;
}
#h2_dev {
background: url(../img/h2_services_dev.gif) no-repeat;
text-indent: -9999px;
height: 46px;
margin-top: 22px;
}
#h2_refonte {
background: url(../img/h2_services_refonte.gif) no-repeat;
text-indent: -9999px;
height: 46px;
margin-top: 22px;
}
#h2_ref {
background: url(../img/h2_services_ref.gif) no-repeat;
text-indent: -9999px;
height: 46px;
margin-top: 22px;
}
#h2_resume {
background: url(../img/h2_resume.gif) no-repeat;
text-indent: -9999px;
height: 69px;
margin-top: 22px;
}
#h2_services_resume {
background: url(../img/h2_services_resume.gif)  no-repeat;
text-indent: -9999px;
height: 69px;
margin-top: 22px;
}
#h2_adresse {
background: url(../img/h2_adresse.gif)  no-repeat;
text-indent: -9999px;
height: 69px;
margin-top: 22px;
}
#h2_references {
background: url(../img/h2_references.gif)  no-repeat;
text-indent: -9999px;
height: 69px;
}
#h2_references_resume {
background: url(../img/h2_references_resume.gif) no-repeat;
height: 69px;
text-indent: -9999px;
margin-top: 22px;
}
#h2_creation_sites_internet {
background: url(../img/h2_creation_sites_internet.gif) no-repeat;
height: 69px;
text-indent: -9999px;
}
#h2_services_a_la_carte {
background: url(../img/h2_a_la_carte.gif) no-repeat;
height: 69px;
text-indent: -9999px;	
}
#h2_creation_sites_internet {
background: url(../img/h2_creation_sites_internet.gif) no-repeat;
height: 46px;
text-indent: -9999px;	
}
#h2_liens {
background: url(../img/h2_liens.gif) no-repeat;
height: 69px;
text-indent: -9999px;
}
#h2_plan_du_site {
background: url(../img/h2_plan_du_site.gif) no-repeat;
height: 69px;
text-indent: -9999px;
}
.h3_offre {
font-size: 22px;
font-variant: small-caps;
}
/****************************************************LISTE DROITE ****************************************/



/****************************************************CONTACT FORM****************************************/
form {
background: url(../img/bottom.gif) no-repeat bottom left;
padding-bottom: 20px;
}
fieldset {
position: relative;
clear: both;
padding: 0 27px;
}
fieldset ul {
padding: 4px 0 0;
margin-top: 5px;
}
fieldset ul li {
padding-bottom: 1em;
float: left;
width: 100%;
clear: left;
}
fieldset label {
position: relative;
display: block;
width: 7em;
font-size: 17px;
font-weight: bold;
letter-spacing: -1px;
margin-right: 1em;
line-height: 26px;
color: #F8CE89;
font-family: Helvetica, Verdana, Arial, sans-serif;
}
fieldset input, fieldset textarea, fieldset select {
width: 460px;
padding:8px 2px;
background-color: #FFF;
border: none;
border-bottom: 2px solid #2798AF;
color: #1E526F;
font-weight: bold;
font-size: 1.6em;
font-family: Trebuchet, Arial, Verdana, Sans-serif;
}
fieldset select {
width: 464px;
color: #114967;
font-weight: bold;
font-size: 1.3em;
}
fieldset textarea {
overflow: hidden;
}
fieldset span {
float: right;
margin: 2px 6px 0 0;
font-size: .8em;
color: #FFF;
}

form #button {
text-indent: -9999px;
margin: 0 27px;
background: url(../img/button.gif) no-repeat;
width: 220px;
height: 66px;
display: block;
border: none;
cursor: pointer;
}
/****************************************************FOOTER*******************************************/
#footer {
padding: 35px 0;
height: 130px;
font-size: 12px;
background: url(../img/footer_bg.gif) repeat-x;
}
#footer-content {
color: #FFF;
background: url(../img/footer_second.gif) no-repeat top left ;
margin-top: -35px;
padding-top: 40px;
}
#foot_left {
float: left;
width: 520px;
padding-left: 18px;
}
#foot_left a {
color: #82B830;
margin-right: 12px;
text-decoration: underline;
}
#foot_left a:hover {
color: #fff;
}
#foot_right {
float: right;
padding-right: 18px;
}
#overlay {
z-index: 200;
position: absolute; 
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: #000;
display: none;
}
#table {
z-index: 201;
position: absolute;
display: none;
width: 780px;

}

#loading{
position: absolute;
left: 50%;
top: 950px;
width: 350px; 
z-index: 201; 
margin-left: -174px; 
width: 300px; 
border: 1px solid #666666;
text-align: center;
padding: 24px;
background: #3C3C3C;
color: #FFF;
display: none;
}

#close {
background-color: #FFF;
padding: 16px 0;
}
#close a  {
color: #82CCE0;
font-weight: bold;
padding: 6px 14px;
left: 680px;
}
/****************************************************CLASS SPECIAL****************************************/
#logo h1 a {
outline: none;	
}
.backTop {
position: relative;
left: 450px;
text-indent: -9999px;
background: url(../img/back.gif) no-repeat;
display: block;

width: 16px;
height: 16px;
}
.backTop span {
display: none;	
}
strong {
font-weight: bold;
}
.offre  {
margin-top: 36px;
}
.offre span {
display: none;
}
.offre a {
display: block;
width: 256px;
height: 214px;
background: url(../img/offres_before_after.gif) no-repeat;
}
a.close {
background: url(../img/fermer.gif) no-repeat;
display: block;
margin: 2px 0 0 0;
padding-top: 2px;
width: 80px;
height: 18px;
}
a.comparer span {
display: none;
}
.comparer {
text-indent: -9999px;
background: url(../img/comparer_offres.gif) no-repeat;
width: 281px;
height: 42px;
display: block;
margin: 8px 0;
}
.devis_creation_web {
text-align: center;
margin: 24px 0;
font-size: 1.2em;
}
.devis_creation_web a {
color: #FFF;
text-decoration: underline;
font-weight: bold;
}
.ref {
margin-top: 24px;
margin-right: 18px;
padding-top: 40px;
height: 108px;
margin-bottom: -18px;
}
#offre_reference {
width: 260px;
float: right;
padding: 6px 6px 0 0;
color: #FFF;
margin-top: 30px;
}
#offre_reference span {
display: none; 
}
#offre_reference a {
display: block;
width: 256px;
height: 214px;
background: url(../img/offres_before_after.gif) no-repeat;
}
.devis {
font-size: 1.2em;
text-align: center;
font-weight: bold;
}
.external_link {
color: #FFF;
text-decoration: underline;
background: url(../img/link_out.gif) no-repeat right top;
padding-right: 10px;
font-size: .9em;
font-weight: bold;
}
/****************************************************FIX********************************************/
.fix:after{content: "."; display: block; height: 0; clear: both; visibility: hidden;}