body{
    margin:0;
     position:relative;
    font-family: 'Open Sans', sans-serif;


}
a{
    text-decoration:none;
    color:#3E3E3E;
}
a:visited {
color: #3E3E3E !important;
}
a:active {
    color: #3E3E3E;
}

#corps{
    width:960px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}


/********** MENU***********/

#menuBar{
    width:960px;
    height:45px;
    margin-top:60px;
    position:relative;

}

#menuImage{
    float:left;

}

#menuNav{
    display:block;
    right:0;
    position:absolute;
    height:45px;
    text-align:center;

}

#menuNav :hover{
    color : #f09319;
    font-weight: 600;

}

.Nav{
       width: 110px;
    height: 20px;
    float: left;
    margin: 10px 0px 0px;
    line-height: 20px;
    font-weight: 100;
    color: #4C4C4C;
    font-size: 12px !important;
    text-align: left;
    padding-left: 20px;
}




.text{
    color: #3e3e3e;
    line-height: 18px;
    text-align: justify;
    float: left;
}


.textContact{
    display :block; 
    width:200px;
    margin-left:117px;
    text-align:justify;
    color: #3e3e3e;
    line-height: 18px;
}





/***-------------DEBUT DE LA PARTIE INDEX-----------------***/


#dataBox1{

    width: 960px;
    background: white;
    font: 100;
    font-size: 12px;
    height: 100%;
float: left;
color: #353535
}



#introPart{
    width: 960px;
    height: 335px;
    background-image: url("../img/aio-limited-edition-index-banner.jpg");
    position: relative;
   
}

	#textIntroPart{
		width: 300px;
		height: 150px;
		position: absolute;
		right: 0;
		top: 50px;
		text-align: center;
		
	}
	
	#textIntroPart h2{
		font-size: 24px;
		margin-bottom: 0;
		color: #f29400;
	}

#paragraph0{
    margin-top: 60px;
    margin-bottom: 60px;
    width: 960px;
    height: 100px;
    line-height: 20px;
    text-align: center;

}

	#paragraph0 h2{
		color: #f29400;
	}


#paragraph1{
	border-top: solid 1px #eeeeee;
    margin-top: 60px;
    margin-bottom: 60px;
    width: 960px;
    height: 500px;
    line-height: 20px;
    text-align: center;

}

#paragraph1News{

    width: 255px;
    height: 450px;	
    float: left;
    margin-left: 150px;

}

#paragraph1News h3{
	font-weight: 500;
	font-size: 15px;
	}


#paragraph2{
	padding-top: 20px;
	border-top: solid 2px #eeeeee;
    margin-top: 40px;
    margin-bottom: 60px;
    width: 960px;
    height: 430px;
    line-height: 20px;
    text-align: center;

}

	#paragraph2Product{
		
		width: 110px;
		height: 250px;
		float: left;
		margin-right: 60px;
		margin-top: 40px;
	}
	
	#paragraph2Product:hover{
		
		color:#f29400;
		cursor: pointer;
		font-weight: 800;
	}
	
	
#paragraph3{
	border-top: solid 1px #eeeeee;
    margin-top: 60px;
    width: 960px;
    height: 430px;
    line-height: 20px;
    text-align: center;

}

	#paragraph3Content{
		
		width: 320px;
		height: 450px;
		float: left;
		margin-top: 40px;
	}
	
		#paragraph3Product{
		
		width: 110px;
		height: 165px;
		float: left;
		margin-right:33px;
		margin-top: 40px;
	}
	
		#paragraph3Product:hover{
		
		color:#f29400;
		cursor: pointer;
		font-weight: 800;
	}



#gamme{

    margin-top: 15px;
    margin-left: 30px;
    width: 202px;
    height: 200px;
    float: left;
    background: blue;
    position: relative;

}


#gamme:hover #legend{

    background: black;	

}


#gamme:hover{

    opacity: 0.8;

}


#legend{
    width: 202px;
    height: 30px;
    position: absolute;
    bottom:0;
    background: #414040;
    color: white;
    text-align: center;
    line-height: 30px;
}




/************** LES CALL TO ACTION ***************/

#download{
    width: 150px;
    height: 30px;
    background:url("../img/download-1.png");
}


#download:hover{
    background:url("../img/download-2.png");
    cursor: pointer;
}

#contact{
    width: 150px;
    height: 30px;
    background:url("../img/contact-1.png");
}


#contact:hover{
    background:url("../img/contact-2.png");
    cursor: pointer;
}

.textParagraph4{
    display:block;
    width:280px;
    height: 65px;
}








/**** PARTIE PRODUIT *************/



#part1{
    width: 960px;
    height: 150px;
    margin-top: 50px;
    margin-bottom: 30px;

}

#produitBloc1{
    margin-left: 180px;
    width: 600px;
    height: 75px;
    float: left;
    text-align: center;
}





/***** PARTIE DOWNLOAD BOX --- PAGE PRODUIT ****/


#downloadBox{

    width: 960px;
    height: 500px;
    margin-bottom: 50px;

}


#content1{
    margin-left:30px;
    width: 435px;
    height: 250px;
    float: left;



}

#titre1{
    color: white;
    width: 430px;
    height: 30px;
    background: #3e3e3e;
    line-height: 30px;
    padding-left: 5px;
    text-transform: uppercase;
}



#info1{
    width: 430px;
    height: 40px;
    padding-left: 5px;
    color: #3e3e3e;
    line-height: 40px;
    text-align: justify;
    text-transform: uppercase;
}



a.download1{
    width: 430px;
    height: 50px;
    background: #f8f8f8;
    margin: 0;
   color: #dea346 ;
  font-size: 13px;
  padding-left: 5px;
    display:block;
    line-height: 50px;

}

a.download1:hover{
    background: #bababa;
    color: #d17500;
    cursor: pointer;
}



a.download2 {
    width: 430px;
    height: 50px;
    background: #efefef;
    margin: 0;
      font-size: 13px;
  padding-left: 5px;
    display:block;
    line-height: 50px;
}

a.download2:hover {
    background: #bababa;
    color: #d17500;
    cursor: pointer;
}


.link{
    display: block;
    line-height:50px;
    margin:0;
    color:#d98418;
    font-size:13px;
    padding-left: 5px;	
}



/* login */



/************************* FOOTER ******************************/


#footer{
 width: 100%;
background: none repeat scroll 0% 0% #3E3E3E;
height: 60px;
float: left;
padding-top: 20px;
}

	#footerContent{
		width: 960px;
		margin-left: auto;
		margin-right: auto;
	}

#textFooter{
   
    color:#FFF;
    font-size:12px;

}


#textFooter ul > li{
    float:left;
    margin-right:50px;
    list-style: none !important;
    text-transform: uppercase;
}
#footer a:hover {
color: #d98418 !important;
}


.nav ul {
  list-style: none;
  text-align: center;
  padding: 0;
  margin: 0;
    float:right;
    line-height: 35px !important;
}

.nav li {
  line-height: 40px;
  text-align: center;
   
}
.nav li:last-child { border: none;}

.nav a {
  text-decoration: none;
  text-transform:uppercase;
  display: block;
  border-bottom: 1px solid #888;
  transition: .3s all;
  font-size: 12px;
}

.nav a:hover {

    color:#f6881c !important;
    
}

.nav a.active {
  background-color: #aaa;
  color: #444;
  cursor: default;
}

/* Sub Menus */
.nav li li {
  font-size: 12px !important;
  background: white;
}

/*******************************************
   Style menu for larger screens

   Using 650px (130px each * 5 items), but ems
   or other values could be used depending on other factors
********************************************/

@media screen and (min-width: 650px) {
  .nav li {
    width: 120px;
    border-bottom: none;
  height: 25px;
  	line-height: 25px;
    display: inline-block;
    margin-right: -4px;
  }

  .nav a {
    border-bottom: none;
  }

  .nav > ul > li {
    text-align: center;
  }

  .nav > ul > li > a {
    padding-left: 0;
  }
ul.sub li:hover {
   
    background: #ebebeb;
     }
.Nav:hover {  color:#f6881c !important;}
li.sub > a {
     font-size:12px !important;
    font-weight: normal;
    
    
     }
  /* Sub Menus */
  .nav li ul {
    position: absolute;
    display: none;
    width: inherit;
    background: #fff;
      box-shadow: 0px 10px 10px #666;
      
     
     z-index: 1000;
  }

  .nav li:hover ul {
    display: block;
  }

  .nav li ul li {
    display: block;
      border-bottom: 1px solid #eeeeee;
      height:40px;
  }
  
  #sleep{
	  background: #787878;
  }
  
  
  
}

.Nav{
	font-size: 10px;
	color:grey;
}



/******** CSSS POUR LE CALL TO ACTION ****/




.myButton {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
	background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);
	background-color:#ffffff;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#666666;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
	background:-moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0);
	background-color:#f6f6f6;
	color:#f29400;
}
.myButton:active {
	position:relative;
	top:1px;
}