@import url(menu.css);

body {
 font-family: arial;
 font-size:14px;
 color: #000;
 margin:0;
 padding:0;
 background-image: url(images/background.jpg);
}

img{
 border:none;
}

.img_supp {
 float:left;
 margin:5Px;
}

#page{
 width: 980px;
 margin:0 auto;
 background-color: white;
 border-left: 1px solid #404040;
 border-right: 1px solid #404040;
}

/* header section */
#header{
 height: 140px;
 background-image: url(images/header.png);
 background-repeat:no-repeat;
 width:100%;
 text-align:center;
}

#header h1{
 font-family: arial;
 font-size:22px;
 color: white;
 margin: 0;
 padding-top: 10px;
}

#title{
 float: left;
 width:400px;
 height:88px;
 padding-left:300px;
 color:white;
}

#contact{
 width: 180px;
 height: 40px;
 float:right;
 color:white;
 font-weight:bold;
}

.white_link{
 text-decoration:none;
 color:white;
}

/* menu */
#menu{
 float:left;
 width: 100%;
 text-align:left;
 height:50px; 
}

/* fin header section */

#selection{
 background-color: white;
 height: 309px;
 width:95%;
 margin:2px;
 margin-left: 45px;
}

#produit{
 width:99%;
 margin:2px;
}

#service{
 float:left;
 margin:2px;
}

#screenshots{
 float:left;
 width:520px;
}

/* selection du pack */
.pack{
 float: left;
 width: 265px;
 margin-right : 40px;
 height: 100%;
 text-align:center;
  background-image: url(images/pack_bg.png);
 background-repeat:no-repeat;
}

.pack h2{
 font-family: arial;
 font-size: 22px;
 color: #404040;
 margin-top:0;
}

.select_option{
 background-color: #404040;
 color:white;
 font-size:16px;
 font-weight:bold;
 text-align:center;
 width: 200px;
 border: 1px solid black;
}

#pack_zone div {
 display: none;
 margin: auto;
 width:261px;
 height:135px;
 text-align:left;
 padding-top:15px;
 padding-left:10px;
 color:#404040;
 font-family: Arial;
}

#duree_zone div {
 display: none;
 margin: auto;
 width:271px;
 height:135px; 
 text-align:center;
 padding-top:15px;
 padding-left:10px;
 color:#404040;
 font-family: Arial;
}

#price_zone{
 width:271px;
 height:160px;
 margin: auto;
 text-align:right;
 color: green;
}

#price_zone_display{
 padding-top:20px;
 padding-right:80px;
 font-size: 42px;
 color: green;
 font-family: Verdana;
 font-weight:bold;
}

#price_zone_ht{
 float:left;
 padding-left:140px;
}

#valider{
 float:right;
 height: 31px;
 width: 110px;
 padding-top:30px;
}

.submit_button{
 width:200px;
 height:50px;
}

.infoBox_1{
 float:left;
 background-image: url(images/info.png);
 width: 32px;
 height: 32px;
 border:1px solid red;
 top:50px;
}

/* fin selection */

#details{
 float: left;
 width: 638px;
 padding-top:5px;
}

#details_products{
 float: left;
 width: 600px;
 height: 650px;
 padding:10px;
}

/** details information **/

.first_left{
 float:left;
 width: 94%;
 padding-left:15px; 
 color:#404040;
 text-align:justify;
}

.last_left{
 float:left;
 width: 94%;
 height:120px;
 padding-left:15px; 
 color:#404040;
 text-align:justify;
}

.explic_left{
 float:left;
 width:40px;
 height:70px;
 padding-top:5px;
}

.explic_right{
 float:left;
 width:530px;
 height:70px;
 padding-top:5px;
}

#third{
 float: left;
 width:96%;
 padding-left:10px;
 color:#404040;
 text-align:justify;
 font-size:12px; 
}

#fourth{
 float: left;
 width:98%;
 height:100%;
 padding-left:10px;
 padding-right:10px;
 color:#404040;
 text-align:justify;
 padding-top:10px;
}

#fourth a{
 text-decoration: none;
 color:#404040;
}

/** fin details **/

#column{
 float: right;
 width: 342px;
}

#column h2{
 margin:0px;
 font-size:16px;
 color:#016901;
}

#column_products{
 float: right;
 width: 334px;
 height: 463px;
 background-image:url('images/bg_column.png');
 background-repeat:no-repeat;
 padding-left:5px;
}

#column_products h2{
 font-size:16px;
 color:#016901;
}

.spacer{
 clear: both;
}

/*** references ***/
.photo_reference{
	width: 232px;
	height: 148px;
	float:left;
	margin:2px;
}

.texte_reference{
	width: 600px;	
	float:left;
	margin:2px;
	line-height:20px;
}

.greentexte{
 font-weight:bold;
 font-size:17px;
 color:green;
}

/*** reference ***/

#logos{
 width: 980px;
 height: 95px;
 background-image: url(images/logos.png);
 background-repeat: no-repeat;
 background-position:center;
}

#footer{
 background-color: #3b3c3e;
 width: 100%;
 height: 160px;
 color:white;
 text-align:center;
}

#footer_left{
 float:left;
 padding-left:100px;
 padding-top:10px;
}

#footer_right{
 float:right;
 padding-right:100px;
 padding-top:10px;
}

#footer_right a, #footer_right a:visited, #footer_right a:link{
 text-decoration: none;
 color:white;
}

#footer_right a:hover{
 text-decoration: underline;
}

/**** commande ****/

#commande{
 background-color: white;
 height: 782px;
 width:98%;
 padding:5px;
}

.left_tot{
 background-color:#C0C0C0;
 float:left;
 font-size:18px;
 height:30px;
 margin:0;
 width:320px;
 padding-top:3px;
}

.left_com{
 float:left;
 width:200px;
 height:30px;
}

.right_com{
 float:left;
 width:200px;
 height:20px;
}

.right_text{
 float:left;
 width:500px;
}

a {
 color: #02A5A5;
}

h1{
 margin:0px;
 font-size:16px;
 color:#016901;
}

.input_com{
  border:1px solid #808080;
}
.input_com:focus{
  border:1px solid #0E660E;
  background-color: #EFEFEF;
}
.input_com:hover{
  border:1px solid #0E660E;
}

.submit_btn{
 border:1px solid #808080;
 background-color: #C0C0C0;
 font-size:20px;
}

.submit_btn:hover{
 border:1px solid #E8CC06;
 background-color: #C0C0C0;
 font-size:20px;
}

#final_com{
 float:left;
 width:100%;
 text-align:center;
 padding-top:10px;
}

.comm_breadcumb{
 color:#e8cc06;
 font-size:18px;
 float:left;
 height:30px;
 width:100%;

 padding-left:3px;
 padding-top:3px;
 text-align:right;
}

.comm_breadcumb .chiffre{
 font-size:24px;
 color:black;
 font-weight:bold;
}

/*** contact ***/
#contact_left{
 float:left;
 width:450px;
 height:400px;
}

#contact_right{
 float:left;
 width:450px;
 height:400px;
 color:#808080;
}
/*** contact eof ***/

/*** video ***/
#video_left{
 float:left;
 width: 128px;
 height:128px;
}

#video_right{
 float:left;
 width:400px;
 height:100px;
 font-size:36px;
 padding-top:60px;
 padding-left: 20px;
 color:green;
}

#video_references{
 float:right;
 width:300px;
 height:170px;
}

#video_right a.video:hover{
 text-decoration: none;
 color:green;
}

#video_right a.video:visited{
 text-decoration: none;
 color:green;
}

#video_subtitle{
 float:left;
 width:400px;
 height:30px;
 padding-left: 20px;
}

#video_subtitle{
 float:left;
 width:400px;
 height:30px;
 padding-left: 20px;
}

/*** video ***/

.col_fo{
 color:red;
}

#blog{
 float:left;
 width:320px;
 height:270px;
 background-image :url(images/blog.png);
}

#blog ul{
 width:260px;
 height:260px;
 padding-top:60px;
 text-align:left;
}

#blog ul li a {
 color:#75604F;
 text-decoration: none;
}

.title_color{
 color:#e8cc06;
}

#google_voucher{
 position:absolute;
 width: 300px;
 height: 150px;
 display: none;
 left:890px;
 top:90px;
}

/*** debuter-e-commerce.html ***/
.debuter{
 margin-left:60px;
}