/*---------------------------------------------
Formatage des style prédéfinis
---------------------------------------------*/
*{
    padding: 0;
    margin: 0;
}
body{
    background: url(images/fond.jpng) repeat-x;
}
ul, ol{
    list-style: none;
}
.clearer{
    width: 100%;
    font-size: 0px;
    float: left;
    clear: both;
}

/*---------------------------------------------
Fenetre d'outils
---------------------------------------------*/
#tools{
    width:685px;
    margin:0 auto;
    border:1px solid #c9c9c9      ;
    font-size: 11px;
}

.menu-general{
    border-bottom: 1px solid #c9c9c9;
    float:left;
    width:96%;
}

.menu-general,#content-tools{
    padding:2%;
}
.menu-general li.normal,#tools .orientation li{
    float:left;
}
.menu-general li.normal{
    padding:4px 3px 0 3px
}
.menu-general li.normal span, #tools .orientation li span{
    display:none
}
.menu-general li.normal a, #tools .orientation li a{
    display: block;
    width: 16px;
    height:16px;
}

.menu-general li.show-hide-note-on a{
    background: url(images/menu/note.png);
}
.menu-general li.show-hide-note-off a{
    background: url(images/menu/note_off.png);
}
.menu-general li.create-image a{
   background: url(images/menu/picture_add.png); 
}

.btn2{
    display: block;
    text-align: right;
    margin:0 0 10px 0;
}


.menu-general li.create-note a{
    background: url(images/menu/note_add.png);
}

#tools {
    padding: 0;
}
table.myorientation{

}
table.myorientation td{
    padding:0 10px
}
table.myorientation td .dd .ddTitle{
    height:80px
}
#tools  div.fleche a{
    display: block;
    width:16px;
    height:16px
}
#tools  div.fleche a span{
    display: none;
}
#tools  div.p-haut-gauche a{
   background: url(images/menu/haut-gauche.png); 
}
#tools  div.p-haut-droite a{
   background: url(images/menu/haut-droite.png); 
}
#tools  div.p-bas-gauche a{
   background: url(images/menu/bas-gauche.png); 
}
#tools  div.p-bas-droite a{
   background: url(images/menu/bas-droite.png); 
}
#tools  div.p-gauche a{
   background: url(images/menu/gauche.png);        
}
#tools  div.p-droite a{
   background: url(images/menu/droite.png);        
}
#tools  div.p-bas a{
   background: url(images/menu/bas.png);        
}
#tools  div.p-haut a{
   background: url(images/menu/haut.png);        
}

#tools textarea{
    background: #f2f2f2;
    border:1px solid #C3C3C3;
    font-family:arial;
    font-size:11px;
    overflow:auto;
    width:100%;
    height:135px;
    margin:0 0 15px 0
}

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
      
#chose-boards{
    float:right;
    width: 300px;
    height:55px;
    border: red;
    overflow: auto;
}
input.error,textarea.error, #form_board select.error{
    border:6px solid red
}
label.error{
    font-size:0
}
.chp-input, .chp-textarea, #form_board select{
    border:6px solid #d6d6d3;
    width:300px;
    padding:2px;
    font-size:14px;
}
#form_board select{
  width:316px;    
}
#form_board{
    font-size:12px
}
#form_board td{
    vertical-align: top;
}
#btnupload{
    background:#d6d6d3 ;
    font-size:12px;
    padding:10px;
    float:right;
    color:#fff;
    cursor: pointer;
    font-weight: bold;
} 
td.label{
    padding:9px 10px 0 0 ;
}
.btnsub{
    background:#676666 ;
    font-size:12px;
    padding:10px;
    color:#fff;
    border:none;
    cursor: pointer;
    margin:10px 0;
    font-weight: bold;
    float:right;   
}
/*---------------------------------------------
Liste des images
---------------------------------------------*/
.list-board li{
    float: left;
    padding:0 5px   ;
    font-size: 11px;
    
}
.list-board li, .list-board li a{
     width:230px; 
}
.list-board option{
    width:150px;
    height:150px;
    
}
.list-board img{
    float: left
}




/*---------------------------------------------
Edition d'une note
---------------------------------------------*/
#url_vignette option,#url_vignette{
    width:100px;
    height:60px;
    display: block;
}
#form_note{
    clear:both
}



.fond{
    width: 100%;
    height:100%;
}
.fond-gris{
   background: url(images/fond.png) repeat;               
}
/*---------------------------------------------
Loader
---------------------------------------------*/
#loader{
   width:220px;
   height:19px;
   margin:0 auto;
   font-size:0;
   clear:both;
   background: url(images/loader.gif);  
   display: none;
}




 /*---------------------------------------------
views
---------------------------------------------*/
.view {
    position:absolute;
    top:-4px;
    right:3px
}
.view li a.close{
    background: url(images/close.gif) #fff;
    border: none;
} 
/*----------------------------------------------------
Option des couleurs
-----------------------------------------------------*/

.colors li,.view li{
  float:left;
  display: block;
  margin:0 2px;
}
.colors li a, .view li a{
  display: block;
  width:10px;
  height:10px;
  font-size: 12px;
  text-decoration: none;
}

.yellow{background: #f8f1a1;}
.blue{background: #a1bef8;}
.red{background: #f8a1a1;}
.green{background: #a1f8b8;}
/*----------------------------------------------------
Post it
-----------------------------------------------------*/
.drsElement .content{
    background-repeat: no-repeat;
    height:38px;
    width:38px;
   
}

.content{position:relative;}
.pastille-ronde,.infobulle{
    width:38px;
    height:38px;
    background-repeat: no-repeat;
    position: absolute;
  
}


.box-gauche, .box-droite{
    width:192px;
    height:76px;  
}

.box-haut, .box-bas{
  height:192px;
  width:76px;
}

.box-gauche .content{
    background-image: url(images/pastilles/gauche.png);
    width:214px;
    height:96px;  
}
.box-droite .content{
    background-image: url(images/pastilles/droite.png);
     width:214px;
    height:96px;  
}
.box-haut .content{
    background-image: url(images/pastilles/bas.png);       
    height:214px;
  width:96px;
}
.box-bas .content{
    background-image: url(images/pastilles/haut.png);       
     height:214px;
  width:96px;
}
.box-haut-gauche .content{
    
    background-image: url(images/pastilles/bas-droite.png); 
    height:148px;
    width:188px;
}
.box-bas-gauche .content{
    background-image: url(images/pastilles/haut-droite.png);
     height:148px;
    width:188px;
}
.box-bas-droite .content{
     height:148px;
    width:188px;
    
     background-image: url(images/pastilles/haut-gauche.png);
}
.box-haut-droite .content{

  z-index:999999;
     height:148px;
    width:188px;
   background-image: url(images/pastilles/bas-gauche.png);
}






.pastille-ronde,.infobulle{
    width:92px;
    height:92px;
    background-repeat: no-repeat;
    position: absolute;
  
}
.box-gauche .pastille-ronde,.box-gauche .infobulle{  
    top:1px;
    left:119px
}
.box-droite .pastille-ronde,.box-droite .infobulle{  
    top:1px;
    left:1px
}
.box-bas .pastille-ronde,.box-bas .infobulle{  
    top:1px;
    left:1px
}
.box-haut .pastille-ronde,.box-haut .infobulle{  
    top:119px;
    left:1px
}


.box-bas-gauche .pastille-ronde,.box-bas-gauche .infobulle{  
    top:1px;
    left:91px
}
.box-bas-droite .pastille-ronde,.box-bas-droite .infobulle{  
    top:1px;
    left:3px;
}
.box-haut-droite .pastille-ronde,.box-haut-droite .infobulle{  
    top:52px;
    left:3px;
}
.box-haut-gauche .pastille-ronde,.box-haut-gauche .infobulle{  
    top:53px;
    left:93px;
}



#choix_pastilles{
    height:120px;
    width:540px;
    overflow-x:auto;
}

#choix_vignettes{
    height:175px;
    overflow-x:auto;
}


.content-pastilles{

}
#choix_pastilles img,#choix_vignettes img{
    float:left;
    display: block;
    cursor:pointer;
}

#choix_vignettes img.selected{
    border: 6px solid yellow;
    padding:5px;
}
#choix_pastilles img.selected{
    border: 6px solid yellow;
    padding:5px;
}




/* Apply the element you want to drag/resize */
.drsElement {
 position: absolute;
}






/*
 The main mouse handle that moves the whole element.
 You can apply to the same tag as drsElement if you want.
*/
.drsMoveHandle {
 font-size: 10px;
 border-bottom: 1px dotted #c9c9c9;
 cursor: move;
 background-color: #fff;
 position: absolute;
 top:-5px;
 width:100%;
 z-index:9999999999999994;
 display: none;
}



.drsElement .option{
   display: none; 
}
.drsElement:hover .drsMoveHandle,.drsElement:hover .option {
   display:block 
}
/*
 The DragResize object name is automatically applied to all generated
 corner resize handles, as well as one of the individual classes below.
*/
.dragresize {
 position: absolute;
 width: 5px;
 height: 5px;
 font-size: 1px;
 background: #EEE;
 border: 1px solid #333;
 display: none;
}

/*
 Individual corner classes - required for resize support.
 These are based on the object name plus the handle ID.
*/
.dragresize-tl {
 top: -8px;
 left: -8px;
 cursor: nw-resize;
}
.dragresize-tm {
 top: -8px;
 left: 50%;
 margin-left: -4px;
 cursor: n-resize;
}
.dragresize-tr {
 top: -8px;
 right: -8px;
 cursor: ne-resize;
}

.dragresize-ml {
 top: 50%;
 margin-top: -4px;
 left: -8px;
 cursor: w-resize;
}
.dragresize-mr {
 top: 50%;
 margin-top: -4px;
 right: -8px;
 cursor: e-resize;
}

.dragresize-bl {
 bottom: -8px;
 left: -8px;
 cursor: sw-resize;
}
.dragresize-bm {
 bottom: -8px;
 left: 50%;
 margin-left: -4px;
 cursor: s-resize;
}
.dragresize-br {
 bottom: -8px;
 right: -8px;
 cursor: se-resize;
}
.mytext{
    display: block;
    overflow:auto;
    padding:0 5px;  
    background: transparent;
    border:none;
    font-family: arial;
    font-size:11px;
}





/*----------------------------------------------------
Menu des bureau de styles
-----------------------------------------------------*/
#myhead{
    height:110px;
    position: relative;
}
#mymenu{
    background: #817d72;
    font-size:11px;
    width: 100%;
    float:left;
    position: absolute;
    bottom: 0;
}
#mymenu ul{
  border-left:1px solid #a6a4a0;
  padding:0 0 0 25px;  
}
#mymenu li{
   float:left;
   border-right:1px solid #a6a4a0;
   cursor: move;
   display: block;
   padding: 10px;
  
}
#mymenu li a{
    color:#fff;

    text-decoration: none;
}
#mymenu li:hover, #mymenu li.selected{
    text-decoration:none;
    background: #cdcdcc;
   
}
#mymenu li.selected a{
     color:#817d72
}


#ssmenu{
    position: absolute;
    top:0;
    right:25px;
    font-size:11px;
    background: #817D72;
    padding:5px ;
       
       color:#fff
}
#ssmenu li{
    float:left;
    padding:0 5px;
}
#ssmenu li a{
    color:#fff;
    text-decoration: none;
}
.gerervisules{
   
    color:#cdcdcc;
    display: block;

}

/*----------------------------------------------------
Zone de contenu principale
-----------------------------------------------------*/
#mycontent{
    padding:25px;
    font-size:12px
}
.lienimgg, .lienimgg *{
    text-decoration:none;
    border:none
}
#listvisule img{
    display: block;
    float:left;
   
    border:none;
    text-decoration: none;
}
.lienimgg{
    display: block;
    position: relative;
    height:120px;
    width:120px;
     margin:0 10px 10px 0;
    float:left;
}
.lienimgg .namefichier{
    display: none;
    position: absolute;
    width: 114px;
    bottom:0;
    padding:3px;
    left:0;
    background: #c9c9c9;
    color:#000;
    font-size:11px;
    text-align: center;
    text-decoration:none;
    border:none;
}
.lienimgg:hover .namefichier{
    display:block
}
/*----------------------------------------------------
liste des images
-----------------------------------------------------*/
h2.mytitle,h3.myh3{
    font-size:24px;
    color:#817d72;
    font-weight:normal;
    padding:0 0 15px 0
}
h3.myh3{
    font-size:18px;
    color:#a8a49a; 
}
.myimagelist{
   clear:both;

}
.liste-images{
    
}
#atrier li{
   float:left;
   display: block;
}
.liste-images li img{
   
}


#atrier{
    
}

td{
    vertical-align: top;
}

.sort{
    font-size:10px;
    padding:5px;
    margin:0 10px 10px 0;
    border: 3px solid #cdcdcc;
}
.sort img{
    cursor: move;
}
.ui-state-highlight{
    width:160px;
    height:110px;
    margin:0 10px 10px 0;
    border: 3px solid #cdcdcc;
    display: block;
}
.monform{
    clear:both;
    float:left;
    width:100%;
    margin:25px 0
}
.tap5 td{
    padding:0 10px 10px 0;
    font-size:11px;
}
.tap5 textarea{
    height:110px;
    font-size:11px;
    font-family: arial ;
}