body {
  margin: 0px;
  padding: 0px;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 12px;
  line-height: 22px;
  color: #000;
  background: #1f5674 url('images/fond.jpg') 0 0 repeat-x;
  font-weight:normal;
  }
#header {
  margin-top: 26px;
  margin-bottom: 0;
  margin-right: auto;
  margin-left: auto;
  width: 962px;
  height:217px;
  background: #1f5674 url('images/header.jpg') 0 0 no-repeat;
  padding:12px 0 0 15px;
}
#logo {
  float:left;
  margin-top: 52px;
  margin-bottom: 0;
  margin-right: 0;
  margin-left: 33px;
  width: 200px;
  height:60px;
  text-align:center;
  font-size:10px;
  color:#1f5674;
}
#logo a {
  text-decoration:none;
  color:#1f5674;
}
#logo a:hover {
  font-weight:bold;
}
.bloc-ul {
  color: #fff;
}
#contenu ul li {
  font-size: 11px;
  line-height: 13px;
  color: #1a5270;
  text-align: justify;
  padding:0px;
}
#contenu .mynav {
  margin-left:25px;
  .margin-left:65px; /* Uniquement IE7 */
  .margin-bottom:0px; /* Uniquement IE7 */
}
#contenu #nav {
  margin-left:25px;
  .margin-left:65px; /* Uniquement IE7 */
  .margin-bottom:0px; /* Uniquement IE7 */
}

#packs {
  margin-top: 10px;
  .margin-top: 0px; /* Uniquement IE7 */
  margin-bottom: 0;
  margin-right: 0;
  margin-left: 460px;
  width: 436px;
  height:138px;
}
#pack{
	list-style:none; 
	margin:20px 0 0 0px;
	padding:0;
	width:450px;
	height:145px;
}
#pack li {
 	list-style-type:none;
	font-size:2em;
  float:left;
}
#pack li a {
  background: url('images/csg-4a5dd9da9393e.png') no-repeat top left;
	padding:60px 70px;
  float:left;
  text-decoration:none;
}
#pack li a.pack_catalogue { background-position: 0 -582px; } 
#pack li a:hover.pack_catalogue { background-position: 0 -194px; }

#pack li a.pack_e-commerce { background-position: 0 -776px; } 
#pack li a:hover.pack_e-commerce { background-position: 0 -388px; }

#pack li a.pack_vitrine { background-position: 0 -970px; }
#pack li a:hover.pack_vitrine { background-position: 0 0; }

.phrase{
  margin:4px 0px 0px 0px;
  color:#1f5674;
  font-weight:bold;
  .padding-top: 4px; /* Uniquement IE7 */
}

#page {
  margin-top: 0;
  margin-bottom: 0;
  margin-right: auto;
  margin-left: auto;
  background: #FFF url('images/fond_contenu.jpg') 0 0 repeat-y;
  width: 937px;
  padding:0 0px 0 40px;
  border:0;
}
#menu {
  margin:0 0 0 4px;
  width: 240px;
  float:left;
}
#menu ul#rose li a:hover, #menu ul#bleu li a:hover{
  font-weight:bold;
}
#menu ul#bleu li.contact a:hover{
  color: #ca0846;
}
#menu p{
  margin-left:20px;
  width:180px;
}
#menu ul#rose {
  margin:0;
  padding:0;
  list-style-type:none;
}
#menu ul#rose li.first{
  background: transparent url('images/ul_rose.jpg') 0 0 no-repeat;
  padding:7px 0 0 45px;
  color:#FFF;
  font-weight:bold;
  font-size:10px;
}
#menu ul#rose li.first a{
  color:#FFF;
  font-weight:bold;
  font-size:10px;
}
#menu ul#rose li{
  background: transparent url('images/li_rose.jpg') 0 0 no-repeat;
  padding:4px 0 4px 55px;
}
#menu ul#rose li a{
  color:#c80a48;
  text-decoration:none;
}
#menu ul#bleu {
  margin:15px 0;
  padding:0;
  list-style-type:none;
}
#menu ul#bleu li.first{
  background: transparent url('images/ul_bleu.jpg') 0 0 no-repeat;
  padding:7px 0 0 45px;
  color:#FFF;
  font-weight:bold;
  font-size:10px;
}
#menu ul#bleu li.first a{
  color:#FFF;
  font-weight:bold;
  font-size:10px;
}
#menu ul#bleu li{
  background: transparent url('images/li_bleu.jpg') 0 0 no-repeat;
  padding:4px 0 4px 55px;
}
#menu ul#bleu li a{
  color:#1a5270;
  text-decoration:none;
}
#contenu {
  margin:0;
  width: 656px;
  float:left;
  padding:0 10px 0 1px;
}
p{
  margin:15px 25px 15px 15px;
  font-size:11px;
  line-height:14px;
  color:#1a5270;
  text-align:justify;
}
h1{
  background: transparent url('images/h1.jpg') 0 0 no-repeat;
  padding:15px 0 15px 65px;
  .margin-top:12px; /* Uniquement IE7 */
  color:#FFF;
  font-size:18px;
}
h2{
  color:#1a5270;
  text-transform:uppercase;
  padding-left:30px;
  font-size:15px;
}
h3{
  color:#FFFFFF;
  border-bottom:1px solid white;
  border-left:2px solid white;
  padding:0 0 0px 10px;
  text-transform:uppercase;
  font-size:11px;
  margin:0;
  line-height:20px;
}
#nav{
	list-style:none; 
	margin:0 0 0 25px;
	padding:0;
	width:600px;
	height:200px;
	.height:220px;; /* Uniquement IE7 */
}
#nav ul {
	margin-left:25px;
}
#nav li {
 	list-style-type:none;
	font-size:2em;
  float:left;
  margin-left:20px;
  .margin-left:0px; /* Uniquement IE7 */
}
#nav li a {
  background: url('images/csg-4a5dd22a8dd67.png') no-repeat 0 0;
	padding:55px 130px;
  float:left;
  text-decoration:none;
}
#nav li a.hebergement {background-position:0px 0px;}
#nav li a:hover.hebergement {background-position:0px -167px;}

#nav li a.maintenance {background-position:0px -334px;}
#nav li a:hover.maintenance {background-position:0px -501px;}

#nav li a.outil {background-position:0px -668px;}
#nav li a:hover.outil {background-position:0px -834px;}

#nav li a.webdesign {background-position:0px -1000px;}
#nav li a:hover.webdesign {background-position:0px -1166px;}

 
 
 


div.bloc{
  background-color:#ca0846;
  border:1px solid #eb9cb5;
  margin-left:-13px;
  margin-bottom:20px;
  padding:10px;
  color:#FFFFFF;
  line-height:14px;
}
div.bloc p{
  color:#FFFFFF;
  line-height:14px;
}
#footer {
  margin-top: -2px;
  .margin-top: -17px; /* Uniquement IE7 */
  margin-bottom: 0px;
  margin-right: auto;
  margin-left: auto;
  background: url('images/footer.jpg') 0 0 no-repeat;
  width: 977px;
  height:64px;
  padding:100px 0 0px 0;
  border:0;
}
#footer p{
  margin: 0 0 10px 0;
  text-align:center;
  color:#FFF;
}
#footer a{
  color:#FFF;
}
#footer a:hover{
  font-weight:bold;
}
div#references ul#references{
  list-style-position : inside; 
  list-style-type : none;
}

div#references ul#references li{
  min-height:140px;
  list-style-type : none;
  margin-bottom:20px;
  margin-right:5px;
  border-bottom: 1px solid black;
}
div#references ul#references li p {
  margin-left:200px;
}

div#references ul#references li a img, div#references ul#references li a.grande img{
  float:left;
  padding:0px 17px 0px 0px;
}

div#references ul#references li a.grande:hover img{
  width:532px;
  height:438px;
  position:absolute;
}

div#references ul#references li a {
  padding:0;
}

/** TABLEAU DE TARIFS **/
table.tarifs { 
 border-style : none; 
 margin-top : 20px;
 width : 100%;
}

table.tarifs th {
 height : 50px; font-weight : bold;
}

table.tarifs#deplacements th {
 height : 30px;
 line-height : 1em;
}

table.tarifs th.service {
 width : 360px;
 text-align : left;
 vertical-align : middle; 
 line-height : 2em;
 font-size : 140%;
 padding-left:25px;
}
.descr {
 text-align:justify;
}


table.tarifs th.service span.indent {
 font-size : 0px;
 padding-left : 60px;
}

table.tarifs tbody td {
 border-bottom :  1px solid black;
 margin-bottom : 10px;
 padding : 6px 0px 10px;
}

table.tarifs tr.lastrow td {
 border-bottom-style : none;
}

table.tarifs tfoot td {
 border-top : solid 3px;
}

table.tarifs tfoot.nobody td {
 border-top-style : none;
}

table.tarifs td.cost, table.tarifs th.cost, table.tarifs th.lowcost { 
  text-align : center; 
  font-weight : bold; 
  width : 105px; 
}
table.tarifs td.lowcost { 
  text-align : left; 
  font-weight : bold; 
  width : 105px; 
}

table.tarifs tfoot div.contact {
  font-weight : bold;
  margin-top : 10px;
  padding : 10px 0px 10px;
  text-indent : 60px;
  background : transparent url('../img/tel.png') 26px center no-repeat;
}

table.tarifs tfoot div.contact a {
 text-decoration : underline;
}

table.tarifs tbody li {
 padding-left : 0px;
 margin-left : 0px;
 background : transparent 0% 0% no-repeat;
}
table.tarifs tbody ul li {
  font-size: 11px;
  line-height: 14px;
  color: #1a5270;
  text-align: justify;
}
table.tarifs tbody ul {
  margin:5px 15px 5px 0px;
}

table.tarifs tfoot div.contact {
 background-image : url("../img/tel.png");
}

table.tarifs tbody li.by1 {
 background-image : url('../img/tarifs_1.png');
}

table.tarifs tbody li.by2 {
 background-image : url('../img/tarifs_2.png');
}

table.tarifs tbody li.by3 {
 background-image : url('../img/tarifs_3.png');
}

table.tarifs#developpement th.rien, table.tarifs#developpement th.service, table.tarifs#graphisme th.service, table.tarifs#hebergement th.service, table.tarifs#referencement th.service, table.tarifs#maintenance th.service /*, table.tarifs th.service*/{ 
 color : #fff;
 background-color : #3690C0;
}

#MDInnerContent .tarifcontact {
 color : #69AB09;
}

table.tarifs th.cost { background-color : #205674; color : #FFF;  }
table.tarifs th.lowcost { background-color : #205674; color : #FFF; }

table.tarifs td.cost { color : #3690C0; }
table.tarifs td.lowcost { color : #205674; }

table.tarifs tbody td {
 border-bottom-color : #3690C0;
}

table.tarifs tfoot td {
 border-top-color : #3690C0;
}

hr.clear{
  clear:both;
  visibility:hidden;
  margin:0;
}
a img{
  border:0;
}
img.right{
  float:right;
  padding:0 2px 0 10px;
}
img.left{
  float:left;
  padding-right:10px;
}
.prix {
  background-color: transparent;
  background-image: url(images/badge1.jpg);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: 0px 0px;
  height: 120px;
  width: 120px;
  font-size: 16px;
  font-weight: bold;
  line-height: 18px;
  color:#fff;
  text-align:center;
  text-decoration:none;
  padding-top:40px;
  margin-left:25px;
}
.prix span{
  font-size: 12px;
}
.bouton {
  background-color: transparent;
  background-image: url(images/bouton.png);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: 0px 0px;
  height: 62px;
  width: 200px;
  font-size: 13px;
  font-weight: bold;
  line-height: 62px;
  color:#fff;
  padding-left:20px;
  text-decoration:none;
}
.boutona {
  text-decoration:none;
}
.bouton:hover {
  background-color: transparent;
  background-image: url(images/bouton.png);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: 0px -62px;
}
.separation{
  width:75%;
  margin:14px 0px 14px 65px;
}
/******************** FORMULAIRE CONTACT ********************/

  .roi{
    margin-top:10px;
    border:2px solid #CC0000;
    padding:10px;
    background-color:#FF0033;
    font-weight:bold;
  }
  .roi input{
    background-color:#FF0033;
    border:0;
    font-size:14px;
    font-weight:bold;
    color:#ffffff;
  }
  .ok{
    margin-top:10px;
    border:2px solid #00CC00;
    padding:10px;
    background-color:#00FF00;
        font-weight:bold;
  }
  .ok input{
    background-color:#00FF00;
    border:0;
    font-size:14px;
    font-weight:bold;
}

label{
font-size: 10px;
}

#calc label {
float: left;
width: 200px;
}

#calc .row{
padding: 5px 0 5px 15px;
font-weight: bold;
background: #EEEEEE;
}

#calc .res{
padding: 5px 0 5px 15px;
}

#calc .rew{
padding: 5px 0px 5px 0;
}

.row{
padding:5px 0px 5px 0;
}

form.devis label {
float: left;
width: 110px;
font-size: 10px;
font-weight: bold;
text-decoration:underline;
}
form.devis .labelnotcompulsory {
font-weight: normal;
text-decoration:underline;
}


form.devis fieldset {
background: #EEEEEE;
}

form.devis td {
font-size: 10px;
}


.cssform p{
padding: 5px 0 10px 0;
padding-left: 1px; /*width of left column containing the label elements*/
border-bottom: 1px dashed gray;
}
.cssform label{
font-size: 10px;
float: left;
margin-left: 0px; /*width of left column*/
width: 170px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}
.cssform textarea{
width: 250px;
height: 150px;
font-size:11px;
}
input.submit {
background-color: #ECF6F8;
color: #D4114D;
border:none;
font-size:12px;
font-weight:bold;
width:100px;
}
input:focus, textarea:focus{ 
background-color:#FFDDFF;
border:1px;
border-color:#d4114c;
border-style:solid;
}
/*input:hover { 
background-color:#FFDDFF;
border:1px;
border-color:#888888;
border-style:solid;
}*/
textarea {
color: #D4114C;
padding: 3px;
border:1px solid #CCCCCC;
font-size:11px;
}
select {
color: #D4114C;
padding: 3px;
border:1px solid #CCCCCC;
font-size:11px;
}
fieldset{
padding:10px;
margin:0 20px 20px 20px;
border:1px solid #CCC;
}
legend{
font-family:Arial, Verdana, Helvetica, sans-serif;
color:#D4114D;
font-weight:bold;
font-size:14px;
}
.mymessage{
	border:1px solid #D4114C;
	color: #D4114C;
	background: #FFFFFF;
	margin: 0 30px 0 30px;
	font-size: 10px;
	padding: 3px 12px 3px 12px;
	margin-bottom: 18px;
}
/******************** FORMULAIRE CONTACT ********************/