/*******************
    style par ID 
**********************/

/*  div qui affiche le background gris quand il y a des messages a afficher */


/*   div contenant la galerie de photo que la personne a uploader doit etre cache par defaut */
 
#pelemele_galerie_info
{
    position:absolute;
	opacity :1;
	margin : auto;
	text-align: center;
	width: 870px;
	background-color :#C9609B;
	color : #FFFFFF;
	display :none;
	z-index : 98;
	
} 
 
/* la galerie photo du pelemele */
#pelemele_galerie
{
  position:relative;
  margin : auto;
  background-color : white;
  width : 850px; /*  */
  height: 400px;
  z-index:98;  
            
  
}
#galerie_scroll_scrollbar{
  left:555px;
}
#galerie_scroll
{
position:relative;
width: 849px;
overflow:scroll;  
height: 400px;
}


/*  div qui contient toute les zone de travail du gabarit */
#pelemele_cont 
{
  position :absolute;
  border : 0px solid white;
  top: 100px;
  left : 5px
}
/* texte de la barre de progression en noir */ 
#texte_noir {
 height: 15px;
 position:absolute;
 z-index:98;
 left:0px;
 width : 300px;
 text-align:center;
 color : #000000;
}
/* texte de la barre de progression en blanc  */
#texte_blanc {
 height: 15px;
 position:absolute;
 left:0px;
 text-align:center;
 color : #FFFFFF;
 width : 300px;
}
   
/******************
  classe de style 
*******************/

/* div qui contient une image de la galerie */
.pelemele_thumb {
  float: left;
  margin : 5px;
  width:80px;
}

/* bouton pour ferme la galerie  */
.close {
 width : 100px;
 margin : auto;
 background-color : #666666;
}
/* img dans la galerie   */ 
.pelemele_thumb img {
   width: 80px;
}

/* style de l'image quand elle est deja utiliser au moins une fois dans le pelemele */ 
.use {
   border : 2px solid purple;
   padding: 1px ;
   position:relative;
   top : -3px;
   width:74px !important;
}
/* style de l'image quand c'est celle qui est actuellement utiliser sur dans la zone selectionner */ 

.current_use {
   border : 1px dashed red;
}
#legend_galerie
{
 padding: 10px;
 margin: 5px 10px ;
 background-color: #FFFFFF;
 color : #000000;
}
#legend_galerie .use, #legend_galerie .current_use 
{
padding: 0px 10px;
}
/* permet un retour a la ligne propre dans la galerie */
.clear
{
  clear:both;
}

/* une zone de travail dans le pelemele  */

.pelemele_case
{
  border :1px solid #666666;
  position:absolute;
  margin :auto;
  overflow: hidden;
  z-index : 98;
}
.pelemele_case2
{
  border :0px solid #666666;
  position:absolute;
  margin :auto;
  overflow: hidden;
  z-index : 50;
}

/* class pour qu'un lien ou une div prenne 100% de la taille de l'objet parent */
.pcase 
{
	display:block;
	width:100%;
	height: 100%;
	background-color : transparent;
}
/* class pour que la div des outils soit en dehors du container*/
.tools
{
  position :absolute;
  z-index : 98;
  left:0px;
  top : 0px;
  /*border : 1px solid red;*/
  width : 96%;
  height: 96%;
}
/* lien dans le fond de la zone de travail quand elle est vide  */

.zone_vide
{
 text-align: center;
  background : #ADB0B2 url(/elmts/configurateur/config_clic.gif) no-repeat center center;
}
.zone_vide_pt
{
  text-align: center;
  background : #ADB0B2 url(/elmts/configurateur/config_clicpt.gif) no-repeat center center;
}
.zone_vide_none
{
  text-align: center;
  background : #ADB0B2 ;
}
/*************
  classe de positionnement des boutons dans la zone de travail 
**************/
#boite_outils
{
position :absolute;
top:0px;
left:5px;
height: 35px;
width: 80px;
}
#boite_outils img
{
border:0px none #FFFFFF;
}
#zoom
{
position :absolute;
top:35px;
left:3px;
height: 50px;
width: 100%;

}

#cadrage
{
left:3px;
position :absolute;
top:93px;
height: 70px;
width: 100%;

}

#rotation
{
left:3px;
position :absolute;
top:176px;
height: 70px;
width: 100%;

}
#new_img
 {
  position:absolute;
  left:5px;
  top : 258px;
  height: 30px;
  width: 80px;
  margin : 0px auto;
 }

 
#submit_zone
{
  position : absolute;
  top: 348px;
  right: 3px;
  height: 40px;
  width: 83px;
  z-index:98;
}

/*  bouton delete */

.delete {
  color: #ffffff;
	position : absolute;
	bottom: 0px;
	right : 0px;
	width: 25px;
	margin:auto 2px 2px auto;
  z-index:98;
}
 /* bouton d'affichage des outils ( zoom rotation deplacement etc  */ 
.show_tools {
   color: #ffffff;
	position : absolute;
	bottom: 0px;
	left : 0px;
	width: 25px;
	margin:auto auto 2px 2px;
   z-index:98;
}

/*  boutons pour fermer les outils */

.close_tools {
   color: #ffffff;
	position : absolute;
	top: 0px;
	right : 0px;
	width: 25px;
	margin:2px auto auto 2px;
   z-index:98;
}

/* bouton d'affichage d'information sur l'image () desactiver  */
.report{
  color: #ffffff;
	position : absolute;
	width: 30px;
	margin:auto;
	z-index:98;
}


/* div d'alerte en cas de zoom trop grand niveau 1  */
.zoom_danger{
   /*background-color: #FFBF46; */
   color: #ffffff;
	position : absolute;
	top:5px;
	left:5px;
	width: 24px;
	height: 27px;
	margin: auto;
	z-index:98;
	
}
/* div d'alerte en cas de zoom trop grand niveau 2 */
.zoom_danger2{
  /* background-color: #F00;*/
   color: #ffffff;
	position : absolute;
	top:5px;
	left:5px;
	width: 24px;
	height: 27px;
	margin: auto;
	z-index:98;
	
}

/* div pour l'image dans la zone  */
.imageZone {
	position:absolute;
	top : 0px;
	left:0px;
	width: 100%;
	height:100%;
	z-index :98;
	}
/* div pour le container d'info de l'image dans la zone ( img + boutons ) */
.image_cont {
	position:absolute;
	top : 0px;
	left:0px;
	width: 100%;
	height:100%;
	display: none;
	z-index :98;
	overflow: hidden;
}
.highlight {
	border : 2px solid #C9609B;
	z-index: 51;
}


/* class pour la bar de progression de l'upload */ 
.progressbar {
  
   
  background : transparent url(/elmts/itf/progressbar.gif) repeat-x 0px 0px scroll;
  position:absolute;
  left:0px;
  overflow:hidden;
 /* z-index :1000;*/
 /* border : 1px solid blue;*/
  
}
.fleche_bleue
{
width: 50px;
height:40px;
background : transparent url(/elmts/itf/fleche_verte.gif);
float:left;
}


#selecteur
{
width:500px;
text-align:left;
margin:auto;
}

.file_input
{
float:left;
font-size:9px;
display:block;
width: 140px;
border : 0px solid #FFFFFF;
}
.ligne_uploader
{
height: 25px;
margin: 10px auto 5px 15px;
}
.bt_root
{
display:inline;
line-height:18px;

}
.bt_left
{
float: left;
width: 11px;
height:18px;
margin: 0px;
line-height:18px;
background : #CAA6BA;
}
.bt_right
{
float: left;
width: 8px;
height:18px;margin: 0px;
line-height:18px;
background : #CAA6BA;
}
.bt_center
{
float: left;
height:18px;
line-height:18px;
background : #CAA6BA;
margin: 0px;
font-size : 9px;
color : #FFFFFF;
}
.file_cached{
position :absolute;
left: 180px;
}

.bt2_root
{
display:inline;
line-height:29px;
cursor:hand;
}

* > .bt2_root
{
cursor:pointer;
}
.bt2_left
{
float: left;
width: 4px;
height:29px;
margin: 0px;
line-height:29px;
background : transparent url(/elmts/upload_photo/upload_val1.gif) no-repeat top left;
}
.bt2_right
{
float: left;
width: 4px;
height:29px;
margin: 0px;
line-height:29px;
background : transparent url(/elmts/upload_photo/upload_val3.gif) no-repeat top right;
}
.bt2_center
{
float: left;
display:block;
height:29px;
line-height:29px;
background : transparent url(/elmts/upload_photo/upload_val2.gif) repeat-x top center;
margin: 0px;
font-size : 20px;
color: #FFFFFF;
}

.cacher
{
display:none;
}
#instruction
{
margin:5px;
}

#nom_oeuvre
{
margin:5px;
}

.inst
{
float:left;
height: 25px;
}

.bt3_root
{

line-height:37px;
cursor:hand;
width: 83px;
}
* > .bt3_root
{
cursor:pointer;
}
.bt3_left
{
float: left;
width: 4px;
height:37px;
margin: 0px;
line-height:37px;
background : #CAA6BA;
}
.bt3_right
{
float: left;
width: 4px;
height:37px;
margin: 0px;
line-height:37px;
background : #CAA6BA;
}
.bt3_center
{
float: left;
display:block;
height:37px;
line-height:37px;
background : #CAA6BA;
margin: 0px;
font-size : 18px;
color: #FFFFFF;
padding:0px 2px 0px 3px;
/*border:1px solid red;*/
}

.bt4_root
{
display:block;
height:37px;
width:78px;
cursor:hand;
}
* > .bt4_root
{
cursor:pointer;
}
.bt4_left
{
float: left;
width: 4px;
height:37px;
margin: 0px;
line-height:37px;
background : transparent url(/elmts/configurateur/config_bton1g.gif) no-repeat top left;
}
.bt4_right
{
float: left;
width: 4px;
height:37px;
line-height:37px;
background : transparent url(/elmts/configurateur/config_bton1dte.gif) no-repeat top right;
}
.bt4_center
{
width: 70px;
float: left;
height:37px;
background : transparent url(/elmts/configurateur/config_bton1center.gif) repeat-x top center;
text-transform:uppercase;
padding : 4px 0px ;
}

.bt4_center a 
{
font-size : 8px;
color: #FFFFFF;
}
#changer .bt4_center a
{
padding-top : 3px;
font-size : 9px;
color: #FFFFFF;
}

#uploader
{
padding: 30px;
position :absolute;
background : #FFFFFF;
top: 150px;
left: 100px;
width: 305px;
display:none;
z-index:98;
}
legend
{
color : #000000;
margin-bottom : 10px;
}
.preview_bouton
{
display:none;
float:left;
width: 29px;
height:19px;
}
#div_modele
{
 display:none;
 position :absolute;
 left: 250px;
 top: 40px;
 width: 213px;
 height: 159px;
}
.preview {
 background: transparent url(/elmts/upload_photo/upload_visu.gif) no-repeat 0px 0px;
}
.preview img {
position:relative;
top: 10px;
left:30px;
}
.preview a {
position:absolute;
display:block;
width:20px;
height:20px;
top:0px;
right:0px;
}
.preview a  span{
   display:none;
}
.choix_pelemele_img_h
{
width: 151px;
margin: 5px 10px;
}
.choix_pelemele_img_v
{
height: 151px;
margin: 5px 10px;
}
.choix_pelemele_bloc
{
height: 170px;
float:left;
}
.choix_pelemele_label
{
height: 18px;
background-color : #BADADA;
text-align:center;
}
#galerie
{
width:530px;
margin:auto;
}

#reseteur
{
display:none;
}
#sub_upload{
position:absolute;
top:15px;
width: 83px;
height:45px;
left:30px;
}
#can_upload{
position:absolute;
top:15px;
width: 83px;
height:45px;
left:185px;
}

#legende2_v
{
text-align:center;
position:absolute;
top: 750px;
left:10px;
width: 650px;
height:30px;
}
#legende2_h
{
text-align:center;
position:absolute;
top: 595px;
left:10px;
width: 650px;
height:30px;
}
*
/* fond du nom horizontal et vertical dns la page de choix des gabarit*/
.label_select
{
background-color : #BADADA;
text-align:center;
}
/* div contenant la liste des gabarie  */
#gal_cont
{
display:none;
}
/* div contenant le texte d'intro a la liste des gabarit */ 
#gal_intro
{
display:none;
}
/* bouton radio du selecteur de gabarit */
.radio
{
border : 1px solid #BADADA;
margin : 10px;
}
#centre
{
position:relative;
height:800px;
}
#cheminfer #chemin_3
{
display:block;
}

.pelemele_case_img_over
{
  border :1px solid orange;
  position:absolute;
  margin :auto;
  overflow: hidden;
  z-index : 98;
}