@charset "utf-8";
/* CSS Document */
body{
font-family:Arial, Helvetica, sans-serif;
background:url(/images/bkg-body.png);
margin:0;
padding:0;
font-size:11px;
}
:focus{
	outline:none;}
/**************** Xavier css **********************/
/*#slideshow * { margin: 0; padding: 0; }*/
#slideshow { background: url('images/bg_shadow.gif') no-repeat top; position: relative; padding: 0px 0 0px; width: 822px; height: 340px;
 }
#slideshow #menu, #slideshow #pictures, #slideshow #loading { position: absolute; }
#slideshow #loading { background: url('/images/spinner.gif'); display: block; top: 158px; left: 205px; text-indent: -5000px; width: 24px; height: 24px; visibility: hidden; z-index: 5; }
#slideshow #pictures { background: url('/images/bg.jpg'); width: 822px; height: 340px; left: 0; overflow: hidden; float:left; margin:0; padding:0; }

#slideshow #pictures li {  position: absolute; top: 0; width: 505px; float:left;}
#slideshow #test {  position: absolute; top: 0; width: 300px; left:510px; padding: 0 0 0 13px; background-color:#FFFFFF; }


#slideshow #menu {
height:10px;
padding-top:0;
right:630px;
top:347px;
width:166px;
left:-49px;
}
*+html #slideshow #menu {
top:357px;
}
*+html #slideshow #menu {
top:357px;
}
#slideshow #menu li{
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:-13px 0 0 0;
width:32px;
height:40px;
display:block;
}
*+html #slideshow #menu li{
margin:-12px 0 0 0;
}

* html #slideshow #menu li{
margin:0;
}
/*#slideshow #menu li {
z-index: 1000;
position: relative;
}*/
#slideshow #menu li a {
text-decoration: none;
z-index: 1000;
color:#0099FF;
margin:13px 0 0 13px;
display:block;
font-weight:bold;
cursor:pointer;
}
#slideshow #menu li a:hover {
color: #fff;
}

#slideshow #menu li.current{
background:url(/images/bkg-current.gif) no-repeat left top;
}
#slideshow #menu li.current a {
color: #fff;
font-weight:bold;
}
#slideshow #menu li.background { background: url('/images/bkg-current.gif') no-repeat left center; position: absolute; font-size: 1px; height: 7px; width: 4px; z-index: 5; display:none; }

#slideshow-options {display:none;}

input.mailzone {background-color:transparent; color:#FFFFFF; font:normal 10px Verdana; border:none 0; margin:0; padding:0;}

/**************** end Xavier css **********************/
/**************** common ****************/
a{
text-decoration:none;
color:#0099FF;
}
a:hover{
text-decoration:underline;
}
.clear {
	clear:both;
}
h3{
font-size:15px;
margin:0;
padding:0;
}
h4{
font-size:13px;
margin:12px 0;
padding:0;
color:#222222;
}
/**************** common end ****************/

#bkg{
height:1973px;
background:url(/images/bkg-global.png) no-repeat scroll 50% bottom;
margin:0 0 0 0;
}
#content{

margin:auto;
padding:0;
width:906px;
}
/**************** info top ****************/
#continfo{
float:right;
min-width:442px;
}
#continfo img{
float:left;
margin:0;
padding:0;
}
#infotop{
float:left;
margin:0;
padding:3px 5px 3px 0;
font-weight:bold;
background-color:#000000;
height:17px;
color:#ffffff;
}

#infotop img{
margin:4px 0 -4px 0;
float:none;
}
#infotop span{
margin: 2px 0 0 10px;
float:left;
}
#language{
float:right;
margin-left:2px;
/*float:left;
margin-left:401px;
_margin-left:200px;*/
}
#language img{
float:left;
margin:0;
padding:0;
}
#languagetop{
color:#FFFFFF;
float:left;
font-weight:bold;
height:14px;
margin:0;
padding:6px 5px 3px 4px;
}
#languagetop img{
margin:4px 0 -4px 0;
float:none;
}
#languagetop span{
margin: 0 0 0 10px;
}
ul#topcontact{
list-style-type:none;
margin:2px 0 0 8px;
padding:0;
float:left;
}
/**+html ul#topcontact{
margin:-3px 0 0 8px;
}*/

ul#topcontact img{
margin:4px 4px -4px 0;
float:none;
}
ul#topcontact li{
float:left;
padding:0;
margin:0;
position:relative;
width:180px;
height:34px;
z-index:100;
}
* html ul#topcontact li{
height:15px;
}
ul#topcontact li.contacteznous{
	/*width:105px;*/
	width:100px;
	}
ul#topcontact li.tel{
	/*width:89px;*/
	width:108px;
	}
ul#topcontact li.email{
	/*width:109px;*/
	width:105px;
	}
ul#topcontact li a, ul#topcontact li a:visited{
text-decoration:none;
}
ul#topcontact li:hover , ul#topcontact li a:hover{
border:0;
}
ul#topcontact li dl{
position:absolute;
top:0;
left:0;
margin:0;
padding:0;
}
*+html ul#topcontact li dl{
width:180px;
margin:0;
}
* html ul#topcontact li dl{
width:180px;
}
ul#topcontact li dl dt{
margin:0;
padding:0;
}
ul#topcontact li dl dt a.howtoreachus{
	background: url(/images/cible.gif) no-repeat left top;
	padding:0 0 0 20px;
	}
ul#topcontact li dl dd{
display:none;
margin:0;
/*padding:4px 4px 4px 21px;*/
padding:2px 4px 2px 21px;
width:164px;
background-color:#000000;
}
ul#topcontact li dl dd#end{
	background:url(/images/bottom-contact-top.png) no-repeat left top;
	height:8px;
width:189px;
padding:0;
font-size:1px;
vertical-align:bottom;
}
ul#topcontact li dl dd#end img{
margin:0;
}
ul#topcontact li:hover dl dd, ul#topcontact li a:hover dl dd{
display:block;
}
ul#topcontact  table{
border-collapse:collapse;
padding:0;
margin:-1px;
}
ul#topcontact li dl dd a:hover{
text-decoration:underline;
}
/**************** info top end****************/

#flash{
float:left;
margin:0;
padding:0 3px;
}

/**************** 4 blocs ****************/
#four{
width:900px;
margin:0 3px;
float:left;
}
#four .bloc{
float:left;
width:191px;
height:228px;
margin:0 13px 0 0;
padding:12px;
background-image:url(/images/bloc-4.png);
_background-image:url(/images/bloc-4.gif);
	background-position:left top;
	background-repeat:no-repeat;
	
	}
#four #end{
margin:0;
}
#four .bloc img{
float:left;
}
#four .bloc div{
float:left;
/*width:130px;
modif post 3 mars// width:120px;*/
margin:0 0 0 -31px;
width:170px;
}
#four .bloc div p{
/*height:158px;*/
}
#four .bloc div h2{
/*modif post 3 mars// margin:8px 0 18px 0;*/
margin:18px 0 33px 31px;
}
#four .bloc div h2 img{
float:none;
}

#four .bloc a.howthatwork:hover{
background-position:0 -21px;
}
#four .bloc a.howthatwork span{
display:none;
}
/**************** 4 blocs end ****************/
/**************** center *********************/
#center{
margin:17px 0 0 0;
_margin:30px 0 0 4px;

padding:0;
width:906px;
/*background-image:url(img/bkg-center.png);
	background-position:-1px top;
	background-repeat:no-repeat;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='img/bkg-center.png', sizingMethod='crop');
	_background-image: none;*/
}
*+html #center{
margin:30px 0 0 2px;
}

a.feedback:hover{
background-position:0 -64px;
}
a.feedback span{
display:none;
}
img#discoverworks{
float:left;
margin:26px 0 0 25px;
}
/**************** center end ***************/
/**************** portfolio ****************/
#portfolio{
width:850px;
/*margin:10px 25px;*/
margin:10px 0 10px 28px;
height:410px;
background:url(/images/bkg-portfolio.png) no-repeat;
padding:0;
}
#preview{
float:left;
margin:14px 0 0 14px ;
_margin:14px 0 0 7px ;
width:822px;
}
#preview img{
border:1px solid #DDDDDD;
float:left;
height:338px;
}

#legende{
float:left;
/*margin:0 0 0 17px;*/
margin:0;
width:298px;
}
#description{
float:left;
width:298px;
height:97px;
}
#description h3 {
font-size:17px;
margin:0 0 5px 0;
color:#222222;
}
#description p {
margin:5px 0;
}
table.used{
float:left;
margin-right:7px;
width:140px;
}
table#tablend{
margin:0;
}
table.used tr{
display:block;
border-bottom:1px solid #dddddd;
border-top:none;
border-left:none;
border-right:none;
}
table.used tr th{
text-align:left;
height:18px;
border-bottom:1px solid #ffffff;
border-top:1px solid #ffffff;
border-left:none;
border-right:none;
padding:0 0 0 7px;
}
table.used tr td{

color:#999999;
border-bottom:1px solid #ffffff;
border-top:1px solid #ffffff;
border-left:none;
border-right:none;
height:16px;
padding:2px 0 0 7px;
display:block;
width:137px;
}
table.used tr td.actif{
color:#000000;
background-color:#eeeeee;
}

a.viewscreen:hover, a.viewsonline:hover{
background-position:0 -24px;
}
a.viewscreen span, a.viewsonline span{
display:none;
}
#commande{
float:left;
height:28px;
width:829px;
margin:12px 0 0 -3px;

}
a.back{
background:url(/images/portfolio-back.gif) no-repeat;
text-decoration:none;
display:block;
height:28px;
width:28px;
float:left;
}
a.next{
background:url(/images/portfolio-next.gif) no-repeat;
text-decoration:none;
display:block;
height:28px;
width:28px;
float:left;
}
a.back:hover, a.next:hover{
background-position:0 -28px;
}
#commande a span{
display:none;
}
#commande span{
display:block;
color:#FFFFFF;
float:left;
/*margin:6px 4px 6px 124px;*/
margin:6px 4px 6px 0;
}

#commande a#just span{
display:none;
}
#commande a#just:hover{
background-position: 0 -20px;
}
a.num{
background:url(/images/bgk-num.gif) no-repeat 0 -16px;
display:block;
height:16px;
width:16px;
color:#0099FF;
font-weight:bold;
float:left;
text-align:center;
margin:6px 4px;
padding-top:1px;
text-decoration:none;

}
a.num:hover{
background-position: left top;
color:#ffffff;
text-decoration:none;
}
a.numactif{
background:url(/images/bgk-num.gif) no-repeat left top;
display:block;
height:16px;
width:16px;
font-weight:bold;
float:left;
text-align:center;
margin:6px 4px;
padding-top:1px;
color:#FFFFFF;
text-decoration:none;
}
#emailupdate{
float:right;
display:none;
}

a.send span{
display:none;
}
a.send:hover{
background-position:0 -18px;
}
#emailupdate span{
float:left;
}
#emailupdate div#box{
background:url(/images/portfolio-box.gif) no-repeat;
width:140px;
height:20px;
padding:3px 0 0 8px;
margin:2px 5px 0 0;
float:left;
color:#FFFFFF;
}
#emailupdate div#box_error{
background:url(/images/portfolio-box-error.gif) no-repeat;
width:140px;
height:20px;
padding:3px 0 0 8px;
margin:2px 5px 0 0;
float:left;
color:#FFFFFF;
}
#emailupdate div#box_valid{
background:url(/images/portfolio-box-valid.gif) no-repeat;
width:140px;
height:20px;
padding:3px 0 0 8px;
margin:2px 5px 0 0;
float:left;
color:#FFFFFF;
}
#wanttosee{
/*margin:0 0 0 165px;*/
float:right;
}
/**************** portfolio end ****************/
/**************** client ******************/
#worksample{
width:564px;
float:left;
margin:0 0 0 28px;
/*_margin:-20px 0 0 12px;*/
}
* html #worksample{
	margin:0 0 0 14px;
	}
#worksample ul{
float:left;
padding:0 16px;
_margin:10px 0;
}
*+html #worksample img{
margin-bottom:15px;
}
* html #worksample img{
margin-bottom:15px;
}
*+html #worksample ul{
margin:10px 0;
}
#worksample ul li{
list-style-image:url(/images/puce_bleu.gif);
padding-bottom:6px;
}

a.viewmore span{
display:none;
}
a.viewmore:hover{
background-position:0 0;
}
#withthat{
background-image:url(/images/post-it.png);
background-position: left top;
background-repeat: no-repeat;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='/images/post-it.png', sizingMethod='crop');
	_background-image: none;
float:left;
width:286px;
height:250px;
margin:0 0 -10px 0;
_margin:0 0 0 0;
}
#postittxt{
margin:20px 0 0 11px;
}
a img{
border:none;
}
/**************** client end ******************/
/**************** About Rubbik *****************/
#aboutrubbik{
float:left;
margin:70px 0 0 25px;
_margin:70px 0 0 12px;
padding:0 05px 0 0;
width:334px;
background:url(/images/spacer.gif) no-repeat right top;
color:#FFFFFF;
}
*+html #aboutrubbik{
	margin:80px 0 0 25px;
	}
#aboutrubbik p{
padding:1px 10px 0 0;
line-height:15px;
}
#aboutrubbik a{
color:#B9C53D;
text-decoration:none;
}
#aboutrubbik a:hover{
text-decoration:underline;
}
*+html #aboutrubbik p{
line-height:12px;
}
* html #aboutrubbik p{
line-height:12px;
}
#aboutrubbik ul, #whyworkwithus ul{
padding:0 16px;
_margin:0;
}
*+html #aboutrubbik ul, #whyworkwithus ul{
margin:0;
}
#aboutrubbik ul li a{
color:#B9C53D;
text-decoration:none;
font-weight:bold;
}
#aboutrubbik ul li a img{
border:none;
}
#aboutrubbik ul li a:hover{
text-decoration:underline;
}
.linkedin{
float:right;
margin:0 -13px 0 5px;
}
#aboutrubbik ul li, #whyworkwithus ul li{
list-style-image:url(/images/puce_verte.gif);
padding-bottom:6px;
}
#whyworkwithus{
margin:70px 0 0 0;
padding:0 0 0 10px;
float:left;
color:#FFFFFF;
width:215px;
background:url(/images/spacer.gif) no-repeat right top;
}
*+html #whyworkwithus{
	margin:80px 0 0 0;
	}
h4#maisAussi{
	margin:17px 0 -5px;
	}
h4#etNosPartenaires{
	margin:15px 0 10px;
	}
#howtoreachus{
margin:70px 0 0 0;
padding:0 0 0 15px;
float:left;
width:276px;
color:#FFFFFF;
}
*+html #howtoreachus{
	margin:80px 0 0 0;
	}
#howtoreachus ul{
padding:0 0 0 25px;
_margin:0;
float:left;
}
*+html #howtoreachus ul{
margin:0;
}
#howtoreachus ul li a{
color:#B9C53D;
text-decoration:none;
font-weight:bold;
}
#howtoreachus ul li a:hover{
text-decoration:underline;
}
#howtoreachus ul.adess{
padding:0 0 0 35px;
float:left;
}
#howtoreachus ul li.tel{
list-style-image:url(/images/mini-telephone.gif);

}
#howtoreachus ul li.fax{
list-style-image:url(/images/mini-fax.gif);
}
#howtoreachus ul li.mail{
list-style-image:url(/images/mini-mail.gif);
}
#howtoreachus ul li.skip{
list-style-image:url(/images/mini-skipe.gif);
}
#howtoreachus ul.adess li{
list-style-image:url(/images/mini-adresse.gif);
}
#twitter{
background:url(/images/bgk-twiter.png) no-repeat;
float:left;
width:273px;
height:105px;
margin:10px 0 0 0;
}
#twitter h4{
margin:8px 0 16px;
}
a.tittwitter{
background:url(/images/btn-twitter-fr.gif) no-repeat;
display:block;
width:196px;
height:12px;
font-size:5px;
text-decoration:none;
padding:0;
margin:10px 0 0 0;
}
a.tittwitter:hover{
background-position: 0 -12px;
text-decoration:none;
}
a.tittwitter span{
display:none;
}
#twitter p{
color:#FFFFFF;
margin: 23px 7px 0 7px;
}
#twitter p strong{
color:#394613;
}
#twitter a{
color:#B9C53D;
text-decoration:none;
}
#twitter a:hover{
text-decoration:underline;
}
a.lastfm{
background:url(/images/btn-lastfm.gif) no-repeat;
display:block;
width:272px;
height:20px;
float:left;
margin-top:5px;
}
a.lastfm:hover{
background-position:0 -20px;
}
a.lastfm span{
display:none;
}
#allcustomers ul{}
#allcustomers ul li a{
display:block;
color:#000000;
min-width:130px;
cursor:default;
}
#allcustomers ul li a:hover{
text-decoration:none;
display:block;
background-color:#0099FF;
color:#FFFFFF;
}
.over{
width:212px;
margin:-20px 0 0 100px;
position:absolute;
background-image:url(/images/bkg_overlay.png);
background-position: left top;
background-repeat: no-repeat;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='/images/bkg_overlay_ie.gif', sizingMethod='crop');
	_background-image: none;
z-index:100;
}
.overwhite{
background-color:#FFFFFF;
margin:6px 6px 6px 15px;
padding:4px;
width:183px;
line-height:18px;

}

#allcustomers ul li a.overview{
margin-top:2px;
font-weight:bold;
display:block;
border-top:1px solid #cccccc;
color:#0099FF;
}
#allcustomers ul li a.overview:hover{
background-color:#ffffff;
text-decoration:underline;
color:#0099ff;
}
a.voirnosrealisation{
	background:url(/images/btn-voir-nos-realisation.png) no-repeat left top;
	width:136px;
	height:21px;
	display:none;
	margin:167px 0 0 364px;
	position:absolute;
	}
*+html a.voirnosrealisation{
	margin:167px 0 0 -166px;
	}
* html a.voirnosrealisation{
	margin:167px 0 0 -166px;
	}
a.voirnosrealisation:hover{
	background-position:0 -21px;
	}
a.voirnosrealisation span{
	display:none;
	}
table#coordonnees{
margin:6px 0;
width:274px;
}
table#coordonnees tr{}
table#coordonnees tr td{
padding:2px;
}
table#coordonnees tr td a{
color:#B9C53D;
text-decoration:none;
font-weight:bold;
}
table#coordonnees tr td a:hover{
text-decoration: underline;
}
table#coordonnees tr h4{
font-size:11px;
margin:0 0 5px 0;
}
#equipe{
width:208px;
/*margin:0 0 -10px;*/
margin:0;
}
#equipe tr{}
#equipe tr:first-child td{
padding:0 0 9px 0;}
#equipe tr td{
vertical-align:top;
/*padding: 3px 0;*/
padding:9px 0;
line-height:18px;
}
#equipe tr td a{
color:#D3DF3F;
font-weight:bold;
}
#equipe tr td a:hover{}
#equipe tr td img{}
#equipe tr td img.puce{
margin:4px 4px 0 0;
}
.partenaires{}
.partenaires a{}
.partenaires img{
margin:0 10px 0 0;
}
.aussi{
line-height:15px;
width:202px;
}
*+html .aussi{
margin:15px 0;
}
* html .aussi{
margin:15px 0;
}
#reseausocial{
background:transparent url(../images/etsur.gif) no-repeat scroll left top;
float:left;
height:34px;
margin:10px 0 0;
padding:0 0 0 52px;
width:221px;
}
#reseausocial img{
float:left;
margin:4px 0 0 2px;
}
#reseausocial img:hover{
float:left;
margin:3px 1px 1px 1px ;
}
#emailskype{
height:28px;
width:273px;
margin:0 0 20px;
}
#emailskype a{
display:block;
height:28px;
float:left;
}
#emailskype a span{
display:none;
}
#emailskype a.mail{
background:url(/images/btn-mail.gif) no-repeat left top;
width:153px;
}
#emailskype a.skype{
background:url(/images/btn-skype.gif) no-repeat left top;
width:120px;
}
#emailskype a:hover{
background-position: 0 -28px;
}
/**************** About Rubbik end ****************/
/**************** pictos flotants *****************/
#arbre{
position:absolute;
margin-left: 200px;
_margin-left: -700px;
top:1390px;
_top:1380px;
width:188px;
_width:138px;
height:124px;
background-image:url(/images/tree.png);
	background-position:left top;
	background-repeat:no-repeat;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='/images/tree.png', sizingMethod='scale');
	_background-image: none;
}
*+html #arbre{
margin-left: -700px;
top:1390px;
}
#perso{
position:absolute;
margin-left: 843px;
_margin-left: -50px;
top:1350px;
_top:1330px;
width:75px;
height:168px;
background-image:url(/images/perso.png);
	background-position:left top;
	background-repeat:no-repeat;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='/images/perso.png', sizingMethod='scale');
	_background-image: none;
}
*+html #perso{
margin-left: -80px;
top:1350px;
}

/**************** pictos flotants end *************/
/**************** bottom **************************/
#bottom{
font-size:10px;
color:#B9C53D;
/*float:left;
_margin:43px 0 0 12px;*/
margin:25px 0 0 25px;
padding:0;
width:851px;
position:absolute;
top:1927px;
}
/**+html #bottom{
margin:43px 0 0 12px;
}*/
#bottom a{
color:#B9C53D;
text-decoration:none;
}
#bottom a:hover{
text-decoration:underline;
}
#xhtmlvalid{
float:right;
}

#picturehide{
display:none;
}

/**************** bottom end **********************/
#aboutrubbik a.btnvs{
background:url(../images/bgk-photos.gif) no-repeat left top;
display:block;
float:left;
height:83px;
margin:0 -3px;
padding:3px;
width:109px;
}
/***************** skype de merde ************************/
li dl dt span.skype_pnh_print_container, table tr td span.skype_pnh_print_container{
	display:block !important;
	margin:0 !important;
	}
li dl dt span.skype_pnh_container, table tr td span.skype_pnh_container{
	display:none !important;
	}
/******* réseau social *******/
#rspicto{
	float:right;
	margin:4px 0 0 0;
	}
#rspicto a{
	width:30px;
	height:30px;
	float:left;
	margin:0 0 0 4px;
	}
#rspicto a span{
	display:none;
	}
#rspicto a.facebook{
	background:url(/images/facebook.png) no-repeat left top;
	}
#rspicto a.forrst{
	background:url(/images/forrst.png) no-repeat left top;
	}
#rspicto a.emberapp{
	background:url(/images/emberapp.png) no-repeat left top;
	}
#rspicto a.behance{
	background:url(/images/behance.png) no-repeat left top;
	}
#rspicto a.dribbble{
	background:url(/images/dribbble.png) no-repeat left top;
	}
#rspicto a.favwork{
	background:url(/images/favwork.png) no-repeat left top;
	}