/* ************************************************************************* 
webdesign: Nicolas Brosse
************************************************************************* */

/* *********** CSS RESET ************************************************ */

* {margin:0; padding:0}  :link,:visited { text-decoration:none } ul,ol { list-style:none } address{ font-style:normal;} acronym { border-bottom-width:0; } fieldset { border: 0; } 
img{border:none; background:none;} a img {border: 0 none;} h1, h2, h3, h4, h5, h6{margin:0; padding:0;} .clear{clear:both;} textarea {overflow:auto;}
/*table {border-collapse:collapse; border-spacing:0;} caption,th {text-align:left;} 
*/
/* *********** STRUCTURE AND TAGS **************************************************** */

html{font-size: 100%;}
body{
font:12px/15px Verdana,Arial,Geneva,Tahoma,Helvetica,sans-serif;
background-color:white;
}
h1,h2{text-indent:-99999px;}
h1 {
background:url(../img/logo-hollodeck.png) no-repeat left top;
width:229px;
height:108px;
margin-left: 49px;
}
h2 {
position:relative;
left:180px;
top:-20px;
background:url(../img/accroche-hollodeck.png) no-repeat left top;
text-align:center;
width:384px;
height:28px;
}
/*form {
position:absolute;
top:30px;
right:0;
width:180px;
height:80px;
background-color:#d30019;
color:white;
font-size:10px;
font-weight: bold;
}

form div {margin:5px 0 0 10px;}

input{float:left;border-width:0;}
input#login,input#pass {height:20px;margin:3px 0;line-height:20px;padding-left:3px;}
input#login {width:160px}
input#pass {width:130px;margin-right:7px;}
input#submit {
background:url(../img/submit.png) no-repeat;
width:29px;
height:29px;
position:relative;
top:2px;
cursor:pointer;
}
*/
.whole-container{
width:1200px;
background-color:white;
margin:0px auto;
position:relative;
overflow:auto;
}

.wrap{
margin:10px 20px 20px 80px;
position:relative;
clear:both;
/*overflow:auto;*/
}

span.highlight {color:#d30019;}

/* *****************************  menu   */
#menu {
list-style-type:none;
clear:both;
}
#menu li{
display:block;
float:left;
}
#menu li a{
display:block;
text-indent:-999px;
overflow:hidden;
height:32px;
}
#menu_home {background:url(../img/menu/menu_left.jpg) 0 0 no-repeat;width:93px;}

#separation {background:url(../img/menu/separateur.jpg) 0 0 no-repeat;width:1px;}

#menu_formation {background:url(../img/menu/menu_flash_learning.jpg) 0 0 no-repeat;width:104px;}
#menu_formation:hover {background-position:0 -31px;}
#menu_formation_active {background:url(../img/menu/menu_flash_learning.jpg) 0 0 no-repeat;width:104px;background-position:0 -31px;}

#menu_office {background:url(../img/menu/menu_serious_game.jpg) 0 0 no-repeat;width:113px;}
#menu_office:hover {background-position:0 -31px;}
#menu_office_active {background:url(../img/menu/menu_serious_game.jpg) 0 0 no-repeat;width:113px;background-position:0 -31px;}


#menu_contact {background:url(../img/menu/menu_quiz_learning.jpg) 0 0 no-repeat;width:107px;}
#menu_contact:hover {background-position:0 -31px;}
#menu_contact_active {background:url(../img/menu/menu_quiz_learning.jpg) 0 0 no-repeat;width:107px;background-position:0 -31px;}


#menu_blog {background:url(../img/menu/menu_video_learning.jpg) 0 0 no-repeat;width:115px;}
#menu_blog:hover {background-position:0 -31px;}
#menu_blog_active {background:url(../img/menu/menu_video_learning.jpg) 0 0 no-repeat;width:115px;background-position:0 -31px;}


#menu_rhchat {background:url(../img/menu/menu_contact_us.jpg) 0 0 no-repeat;width:88px;}
#menu_rhchat:hover {background-position:0 -31px;}
#menu_rhchat_active {background:url(../img/menu/menu_contact_us.jpg) 0 0 no-repeat;width:88px;background-position:0 -31px;}


#menu #menu_membre {background:url(../img/menu/menu_enregistrement.jpg) 0 0 no-repeat;width:410px;
display:block;
text-indent:-999px;
overflow:hidden;
height:32px;
}

#menu #menu_enregistre {background:url(../img/menu/menu_enregistre.jpg) 0 0 no-repeat;width:410px;

display:block;
text-indent:-999px;
overflow:hidden;
height:32px;
}

#menu .active{background-position:0 -34px;}

#identification{
position: relative;
float:right;
margin-top: -30px;
margin-right:175px;
}
#identifie {
font-size:10px;
position: relative;
float:right;
margin-top: -25px;
margin-right:100px;

}
#identifie a {
text-decoration: underline;
color:red;

}
#identification input {border:none}
/* ************************************************************************* 
  home page
************************************************************************** */

#flags {
float:right;
margin:5px 20px 0 0;
display:inline;
}
.menuCaption{
clear:both;
text-align:center;
margin-bottom:15px;
padding-top:15px;
width:710px;
}
/***********************   Product zone */
#productZone {
margin-top: 50px;
margin-left: 270px;
width:500px;
overflow:visible;

}
#productZoneLeft {
margin-top: 50px;
margin-left: 570px;
width:500px;
overflow:visible;

}
#productZoneMiddle {
margin-top: 50px;
margin-left: 320px;
width:700px;
overflow:visible;

}
#FlashLearning {
margin-top: 120px;
margin-left: 100px;
height:490px;
width:838px;
overflow:visible;
background:url(../img/flash_learning_main.png) 0 0 no-repeat;


}


#flash_learning_text {
float: left;
margin-left: 80px;
margin-top: -50px;
width:350px;
overflow:visible;


}
#flash_learning {font-size:10px;font-weight:bold; margin-bottom:10px;color:#0091d4;text-align: left;}


#products {
list-style-type:none;
clear:both;
}
#products li{
display:block;
float:left;
text-align:right;

}
#products li a{
display:block;
text-indent:-999px;
overflow:hidden;
height:150px;
text-align:center;
}


input.noborder{
border:0;
}
#box_flash_learning {background:url(../img/flash_learning_box.jpg) 0 0 no-repeat;width:149px;height:133px;z-index: 1;}
#box_quiz_learning {background:url(../img/quiz_learning_box.jpg) 0 0 no-repeat;width:149px;height:133px;z-index: 0;}
#box_video_learning {background:url(../img/video_learning_box.jpg) 0 0 no-repeat;width:149px;height:133px;z-index: 0;}
#box_serious_game_learning {background:url(../img/serious_game_learning_box.jpg) 0 0 no-repeat;width:149px;height:133px;z-index: 0;}
#identification_error
{

color:red;
font-size:10px;
margin-right: 200px;
margin-top:0px;
}
#identification_error a
{ color:red;
}
#colonne_gauche{
background:url(../img/fond_colonne_gauche.jpg) 0 0 repeat;
width:178px;
height: 550px;
margin-left: 17px;
margin-top:40px;
position: absolute;

padding: 25px 0 0 20px;

}
#colonne {font-size:12px; margin-bottom:40px;color:#fefefe;text-align: left;}
#colonne li {margin-top:3px;color:#9c9e9f;font-weight:bold;}
#colonne li a{margin-top:3px;color:#9c9e9f;font-weight:bold;}

#colonne li a:hover{color:red;}


#color_strip{
width:568px;
height: 5px;
margin-left: 17px;
margin-top:170px;
background:url(../img/color_strip.jpg) 0 0 no-repeat;
position: relative;


}

#formulaire{
width:400px;
height: 50px;
margin-right: 300px;
margin-top:-190px;

float:right;
position:relative;

}

#operatrice{
width:182px;
height: 326px;
margin-left: 145px;
margin-top:-80px;
background:url(../img/operatrice_telephone.png) 0 0 no-repeat;
position: relative;


}

#indigo{
width:282px;
height: 30px;
margin-left: 45px;
margin-top:5px;
background:url(../img/indigo_number.png) 0 0 no-repeat;
position: relative;


}

#robot {

width:39px;
height: 66px;
margin-left: 30px;
margin-top:15px;
background:url(../img/robot_picto.png) 0 0 no-repeat;
position: relative;
}

#robot_contact {

width:390px;
height: 40px;
margin-left: -50px;
margin-top:15px;
margin-bottom:15px;
position: relative;
padding: 30px 0px 0px 60px;

}
#robot_connect {

width:700px;
height: 40px;
margin-left: -100px;
margin-top:15px;
margin-bottom:15px;
position: relative;
padding: 30px 0px 0px 60px;

}

#packshot_serious{

width:474px;
height: 410px;
margin-left: -10px;
margin-top:-15px;
background:url(../img/packshot_recruit_life.png) 0 0 no-repeat;
position: relative;
}

#quiz_learning_main{

width:802px;
height: 472px;
margin-left: 30px;
margin-top:10px;
background:url(../img/quiz_learning_main.png) 0 0 no-repeat;
position: relative;
}

#video_learning_main{

width:980px;
height: 413px;
margin-left: 30px;
margin-top:80px;
background:url(../img/video_learning_main.png) 0 0 no-repeat;
position: relative;
}
#ordi_demo{
float:left;
width:383px;
height: 240px;
margin-left: 490px;
margin-top:15px;
background:url(../img/ordi_demo.jpg) 0 0 no-repeat;
position: relative;
}
#screenshots{
float:right;
width:191px;
height: 278px;
margin-top:-337px;
margin-right:45px;
background:url(../img/serious_screenshots.jpg) 0 0 no-repeat;
position: relative;
}
#quiz_learning_text {
float: left;
margin-left: 90px;
margin-top: -140px;
width:350px;
overflow:visible;


}

#quiz_learning_quiz {
float: right;
margin-right: 90px;
margin-top: -320px;
width:350px;
overflow:visible;

}
#quiz_learning {font-size:13px; margin-bottom:10px;color:#884288;text-align: left;}
#quiz_learning_big {font-size:16px;  color:#884288;text-align: left;}
#quiz_learning_big li {margin: 5px;}

#video_learning_text {
float: left;
margin-left: 90px;
margin-top: -140px;
width:450px;
overflow:visible;


}
#video_learning_slogan{
float: left;
margin-left: 30px;
margin-top: 5px;
width:400px;
overflow:visible;
}

#video_learning {font-size:18px; margin-bottom:10px;color:#bfc500;text-align: left;}
#video_learning li {margin-bottom:10px;}

#video_learning_black {font-size:14px; margin-bottom:10px;color:#000000;text-align: left;}
#video_learning_black li {margin-bottom:10px;}


#serious_game_text {
float: left;
margin-left: 90px;
margin-top: -140px;
width:350px;
overflow:visible;


}
#serious_game {font-size:13px; margin-bottom:10px;color:#e96f1e;text-align: left;}


#promo {
float : left;
width:251px;
height: 212px;
margin-left: 300px;
margin-top:10px;
background:url(../img/serious_game_home_promo.jpg) 0 0 no-repeat;width:251px;heigth:212px;
position: relative;
}

#savoirplus {
float :left;
width:100px;
height: 20px;
margin-left: 10px;
margin-top:150px;
background:url(../img/en_savoir_plus.jpg) 0 0 no-repeat;width:251px;heigth:10px;
}

#catalogue {
float: left;
margin-left: 40px;
margin-top: -6px;
width:50px;
overflow:visible;
position:relative;
}
#lancement_orange {
margin-left: 160px;
margin-top: 20px;
width:290px;

overflow:visible;




}
#lancement {font-size:16px;margin-bottom:10px;color:#e96f1e;text-align: right;z-index: 0;}
#lancement li {margin:3px 0;}

#evaluez_orange{
margin-left: 490px;
margin-top: -310px;
width:360px;
overflow:visible;
color:#e96f1e;

}
#evaluez_gris {
margin-left: 470px;
margin-top: -87px;
width:350px;
overflow:visible;
color:#999999;

}
#evaluez {font-size:16px;margin-bottom:10px;text-align: left;}
#evaluez li {margin:7px 0;}



#slogan {
float: left;
margin-left: 620px;
margin-top: 30px;
width:290px;
overflow:visible;
position:relative;

}
#expertise {font-size:13px;margin-bottom:10px;}
#expertise li {margin:3px 0;}

#moreProducts {position:relative;height:650px;}
#moreProducts ul li{
display:block;
float:left;
margin:0 5px 10px 0;
}
#moreProducts ul li a {
display:block;
overflow:hidden;
height:120px;
width:137px;
background:url(../img/bg-produit.png) 0 0 no-repeat;
font-weight:bold;
color:white;
font-size:13px;
line-height:13px;
}
#moreProducts ul li.fade a , #moreProducts ul li.fade a:hover {background:url(../img/bg-produit-fade.png) 0 0 no-repeat;}
#moreProducts ul li a:hover {background-position:0 -120px;}
#moreProducts ul li a span {
display:block;
padding:10px 0 0 10px;
}
/***********************   fin Product zone */

/***********************   Service zone */

#serviceZone {
float:right;
border-left:1px dotted black;
width:480px;
}

.serviceZoneWrap {margin-left:10px;}

#moreServices {
background:url(../img/robot-small.png) 0 40px no-repeat;
margin-top:20px;
}
#moreServices h4 {
font-size: 15px;
width:120px;
float:left;
}

#moreServices dl {
margin:0 0 15px 130px;
}

#moreServices dl dt {
color:#d30019;
font-weight:bold;
}
#moreServices dl a:link,#moreServices dl a:visited,#moreServices dl a:hover,#moreServices dl a:active {
color:black;
text-decoration:underline;
}

/* ancienne version de la home page
#moreServices a {
display:block;
width:137px;
height:75px;
background:url(../img/bg-service.png) 0 0 no-repeat;
color:white;
font-weight:bold;
font-size:14px;
margin-bottom:20px;
padding:5px;
}
#moreServices a img{display:block;margin-top:20px;}*/

a.download {
display:block;
width:90px;
height:60px;
color:#a2a2a2;
font-size:10px;
padding:0px 0 0 0;
line-height:11px;
margin:40px 0 0 0;
}
.onlinePayment {
float:right;
width:90px;
clear:right;
}
.onlinePayment img{float:left;margin:1px;}

.legal {

float:left;
top:100px;
clear:both;
color:#9d9d9d;
margin-top: 50px;
text-align:left;
margin-left:80px;
height: 50px;
color:#000000;
background:url(../img/fond_footer.jpg) 0 0 no-repeat;
font-size:9px;
width:900px;
padding: 7px 100px;
}
.legal a{color:#000000;font-size:9px;}


/* ************************************************************************** 
  page formation
************************************************************************** */
#formation #serviceZone {border-width:0;}
#formation #productZone {border-right:1px dotted black;}
#formation .serviceZoneWrap {background:url(../img/bg-robot-formation.png) no-repeat left top;}

#offer1 {
padding: 10px 190px 4px 10px;
font-size:14px;
}
.credit {
text-transform:uppercase;
font-size:15px;
margin-bottom:15px;
}
.dif {
text-align:right;
margin-top:10px;
font-size:10px;
}

#offer2 {
width:290px;
font-size: 20px;
line-height:25px;
font-weight:bold;
color:white;
background: #c6c6c6 url(../img/bg-offer2.gif) no-repeat scroll right bottom;
padding-bottom:10px;
}
#offer2 div,#offer3 div {padding:10px;} /* pour éviter le problème du modèle de boîte */
#offer2 div em {font-weight:normal;}

#offer3 {
width:290px;
font-size: 15px;
line-height:20px;
margin-top:20px;
font-weight:normal;
color:white;
background: url(../img/bg-offer3.gif) no-repeat scroll top left;
}
#offer3 div p a:link , #offer3 div p a:visited , #offer3 div p a:hover , #offer3 div p a:active {
color:black;
text-decoration:underline;
}
#product1 {
background: url(../img/bg-product1.png) no-repeat scroll top left;
padding:10px 50px 0 10px;
color:white;
height:210px;
}
#product1 h4 {
font-size:20px;
line-height:23px;
width:175px;
}
#product1 p {
margin:15px 0;
font-size:13px;
}
#product1 p span {
font-weight:bold;
}
#formation h5 {
font-size:15px;
font-weight:bold;
margin:10px 0;
}
#formation #productZone {font-size:15px;}
#formation #productZone ul {margin:20px 0;}
#formation #productZone ul li{margin:7px 0;}
#formation #productZone ul a{
color:black;
text-decoration:underline;
}
#formation #productZone ul a span {
color:#ff0000;
font-weight:bold;
font-size:17px;
}
.soon {
margin:40px 0 3px 0;
font-style:italic;
font-weight:bold;
}

#connection {
float: left;
margin-top: 50px;
margin-left: 400px;
}