body    {

  scrollbar-base-color: orange;
  
  scrollbar-base-color: #C0C0C0;
  
  scrollbar-3dlight-color: #C0C0C0;
  
  scrollbar-highlight-color: #C0C0C0;
  
  scrollbar-track-color: orange;
  
  scrollbar-arrow-color: black;
  
  scrollbar-shadow-color: grey;
  
  scrollbar-dark-shadow-color: #C0C0C0;  

  z-index:4;
  margin-top:0;  
  margin-bottom:0;   } 



#fond {

  background-color: #555;
  background-position: center center;
  background-repeat: repeat;
  position: relative;
  top: 20px;
  width: 422px;
  height:1080px;
  display:block;
  border-radius: 10px;
  border: 1px solid #000;  }

img  {  border: none; }


/*------------11--PALETTES COULEURS + le-bouton-pour-fermer---PAGE-MENU------------------------*/

 
#palette1  {  

position:absolute;
top: 98px;
left: 254px;
width:162px;
height:81px;
border-collapse: collapse; 
border-spacing: 0px;
z-index:4;
display:none;
cursor : crosshair;  }

#palette2   {  

position:absolute;
top: 98px;
left:254px;
width:162px;
height:81px;
border-collapse: collapse; 
border-spacing: 0px;
z-index:4;
display:none;
cursor : crosshair;   }

#palette3  {

position:absolute;
top: 98px;
left:254px;
width:162px;
height:81px;
border-collapse: collapse; 
border-spacing: 0px;
z-index:5;
display:none;
cursor : crosshair;  }

#palette4   {

position:absolute;
top: 98px;
left:254px;
width:162px;
height:81px;
border-collapse: collapse; 
border-spacing: 0px;
z-index:4;
display:none;
cursor : crosshair;  }

#palette5   {

position:absolute;
top: 98px;
left:254px;
width:162px;
height:81px;
border-collapse: collapse; 
border-spacing: 0px;
z-index:4;
display:none;
cursor : crosshair;  }

#palette6  {  

position:absolute;
top: 98px;
left:254px;
width:162px;
height:81px;
border-collapse: collapse; 
border-spacing: 0px;
z-index:1;
display:none;
cursor : crosshair;  }

#palette7  {  

position:absolute;
top: 427px;
left:118px;
width:162px;
height:81px;
border-collapse: collapse; 
border-spacing: 0px;
z-index:4;
display:none;
cursor : crosshair;  }


#palette8  {  

position:absolute;
top: 427px;
left:118px;
width:162px;
height:81px;
border-collapse: collapse; 
border-spacing: 0px;
z-index:4;
display:none;
cursor : crosshair;  }

#palette9  {  

position:absolute;
top: 427px;
left:118px;
width:162px;
height:81px;
border-collapse: collapse; 
border-spacing: 0px;
z-index:4;
display:none;
cursor : crosshair;  }

#palette10  {  

position:absolute;
top: 427px;
left:118px;
width:162px;
height:81px;
border-collapse: collapse; 
border-spacing: 0px;
z-index:4;
display:none;
cursor : crosshair;  }

#palette11  {  

position:absolute;
top: 427px;
left:118px;
width:162px;
height:81px;
border-collapse: collapse; 
border-spacing: 0px;
z-index:4;
display:none;
cursor : crosshair;  }


.boutoncroix  {

position:absolute;
left:148px;
top: 2px;
width:10px;
height:10px;
border-width: 1px;
border-color: #000000;
border-style: solid;
display: block;   }


/*--------------Les  l ments pour les boutons et icones----PAGE--MENU---------------------------------*/


.zonetexte {
position: absolute;
top: 90px;
left: 10px;
width: 220px;
height: 21px;
border-radius: 8px 8px;
-ms-border-radius: 8px 8px;
-moz-border-radius: 8px 8px;
-webkit-border-radius: 8px 8px;
font-family: arial;
}

.ok-pict {
position: absolute;
top: 90px;
left: 242px;
width: 46px;
height: 28px;
border: 1px solid black;
border-radius: 8px 8px;
-ms-border-radius: 8px 8px;
-moz-border-radius: 8px 8px;
-webkit-border-radius: 8px 8px;
background-color: #C0C0C0;
}

#picto-menu {
position: absolute;
top: 6px;
left: 10px;
background-color: #C0C0C0;
font-family: arial;
font-size: 13px;
width:400px;
height:60px;
padding: 4px;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;
border: solid #000000 1px;    }

#picto-menu td {

border-radius: 4px 4px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;
background-color: #ffffff;
text-align: center;
border: solid #000000 1px;  }

input.bouton-texte-left1   {

width: 24px;
height: 22px;
background-image: url(../images/left-picto.gif);
background-repeat: no-repeat;
background-position: center center;
z-index:3;
padding: 6px;  }

input.bouton-texte-center1   {

width:24px;
height:22px;
background-image: url(../images/center-picto.gif);
background-repeat: no-repeat;
background-position: center center;
z-index:3;
padding: 6px;   }

input.bouton-texte-right1  {

width:24px;
height:22px;
background-image: url(../images/right-picto.gif);
background-repeat: no-repeat;
background-position: center center;
z-index:3;
padding: 6px;  }

input.bouton-texte-gras1   {

width:24px;
height:22px;
background-image: url(../images/bold-picto.gif);
background-repeat: no-repeat;
background-position: center center;
z-index:3;
padding: 6px;   }

input.bouton-texte-italic1   {

width:24px;
height:22px;
background-image: url(../images/italic-picto.gif);
background-repeat: no-repeat;
background-position: center center;
z-index:3;
padding: 6px;   }


.tableau-control-couleur   {

position: absolute ;
top: 76px;
left: 10px;
width:220px;
height: 160px;   
background-color: #C0C0C0;
font-family: arial;
font-size: 13px;
border-radius: 8px 8px;
-moz-border-radius: 8px 8px;
-webkit-border-radius: 8px 8px;
border: solid #000000 1px;
padding:4px;    }

.tableau-control-couleur td {

width:260px;
border-radius: 4px 4px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;
background-color: #ffffff;    }

input.bouton-ok-texte1    {

position: absolute;
top: -32px;
left: 400px;
width:22px;
height:24px;
background-image: url(../images/ok-picto.gif);
background-repeat: no-repeat;
background-position: center center;  }

input.bouton-ok-texte2  {

position: absolute;
top: 58px;
left: 400px;
width:24px;
height:24px;
background-image: url(../images/ok-picto.gif);
background-repeat: no-repeat;
background-position: center center;  }


.bouton-ok-text02    {
  
position: relative;
top: 0px;
left: 0px;
width:40px;
height:24px;   }

.bouton-reset-02   {
  
position: relative;
top: 620px;
left: 135px;
width:70px;
height:24px;   }

input.bouton-texte-reset1 {

position: absolute ;
top: 400px;
left: 18px;
width:82px;
height:22px;
z-index:1;   }

#selection-typo2   {

position: relative;
top: 530px;
left: 338px;
width:30px;
height:18px;   }

#selection-typo4   {

position: relative;
top: -2px;
left: 0px;
width: 56px;
height: 26px;  }

.ico1 {

border: 1px #E6E6E6 solid;
padding: 3px;
text-align: center;
decoration: none;  }

.ico1:hover {
border: solid red 1px;  }


#media-photo {
position: absolute;
top: 820px;
left: 10px;
background-color: #C0C0C0;
font-family: arial;
font-size: 13px;
width:400px;
height:160px;
padding: 3px;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;
border: solid #000000 1px;
}

#media-photo td {

background-color: #FFFFFF;
width:200px;;
height:22px;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;   }

#sizepolice-titre {

position: relative;
top: 0px;
left: 0px;
width: 64px;
height: 26px;   }

#tab-check-select {

position: absolute;
top: 340px;
left: 10px; 
background-color: #C0C0C0;
font-family: arial;
font-size: 13px;
width:400px;
height:34px;
padding: 3px;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;
border: solid #000000 1px;  }


#tab-check-select td {

background-color: #FFFFFF;
width:200px;;
height:22px;
text-align: center;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;  }

#tab-police-glob {

position: absolute;
top: 300px;
left: 10px;
width:400px;
height:36px; 
background-color: #C0C0C0;
font-size: 20px;
padding: 0px;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;
border: solid #000000 1px;
font-family: arial;
}

#tab-police-glob td {

background-color: #FFFFFF;
border: 0px black solid;
text-align: center;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;  }


#cel-police1 {

width:155px;
height:22px;
padding: 0px;
text-align: center;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;  }

#cel-police2 {

width:145px;
height:22px;
padding: 0px;
text-align: center;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;  }

#tab-check-epilog {
position: absolute;
top: 776px;
left: 10px; 
background-color: #C0C0C0;
font-family: arial;
font-size: 13px;
width:400px;
height:34px;
padding: 3px;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;
border: solid #000000 1px;
}

#tab-check-epilog td {

background-color: #FFFFFF;
width:200px;;
height:22px;
text-align: center;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;
}


#tab-check-liens {

position: absolute;
top: 690px;
left: 10px; 
background-color: #C0C0C0;
font-family: arial;
font-size: 13px;
width:400px;
height:28px;
padding: 3px;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;
border: solid #000000 1px;  }


#tab-check-liens td {

background-color: #FFFFFF;
width:200px;;
height:22px;
text-align: center;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;  }


#tableau-champ-texte1  {
position: absolute;
top: 250px;
left: 10px;
background-color: #C0C0C0;
font-family: arial;
font-size: 13px;
width:400px;
height:12px;
padding: 2px;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;
border: solid #000000 1px;
}

#tableau-champ-texte1 td  {

background-color: #FFFFFF;
font-family: arial;
font-size: 13px;
padding: 2px;
border-radius: 6px 6px;
text-align: left;
vertical-align: middle;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;
}

.bouton-ok-champ-titre  {

position: relative;
top: -2px;
left: 0px;
width:40px;
height:24px;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;   }

#champtaille1  { width: 38px;  }

#champ-texte-titre  {
 
width: 72px; 
height: 14px;
text-align: center;
border-color:#FFFFFF;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;   }



#saveas {
position: absolute;
top: 990px;
left: 10px;
}


/*--TEXTEAREA---------BOXZONETEXTE1--chapeau1----------*/ 

#boxzonetexte1 {
position: absolute ;
top: 384px;
left: 10px;
width:400px;
height:270px;
background-color: #C0C0C0;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;
border: solid #000000 1px;  
display: none; }

#icone-zone1 {
position: relative;
top: 7px;
left: 6px;
width:380px;
height: 46px;
padding: 2px;
background-color: #ffffff;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;
border: solid #000000 1px; }


#select-typo-box1  {

position: relative;
top: -2px;
left: 0px;
width: 60px;
height: 26px;    }


#boite-texte1   {

position: absolute;
top: 60px;
left: 10px;
width: 374px;
height: 160px;
cursor : text;   }

.bouton-ok-text01
{
position: absolute;
top: 232px;
left: 215px;
width:40px;
height:24px   }

.bouton-reset-01
{
position: absolute;
top: 232px;
left: 135px;
width:70px;
height:24px;  }


/*--TEXTAREA-------BoxTexteZone2---Texte-1 -----*/

#boxzonetexte2
{
position: absolute ;
top: 384px;
left: 10px;
width:400px;
height:270px;
background-color: #C0C0C0;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;
border: solid #000000 1px; 
display: none; }

#icone-zone2 {
position: relative;
top: 7px;
left: 6px;
width:380px;
height: 46px;
padding: 2px;
background-color: #ffffff;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;
border: solid #000000 1px; }

#select-typo-box2  {

position: relative;
top: -2px;
left: 0px;
width: 60px;
height: 26px;    }

#boite-texte2   {

position: absolute;
top: 60px;
left: 10px;
width: 374px;
height: 160px;
cursor : text;   }

.bouton-ok-text02  {

position: absolute;
top: 232px;
left: 215px;
width:40px;
height:24px   }

.bouton-reset-02
{
position: absolute;
top: 232px;
left: 135px;
width:70px;
height:24px;  }


/*TEXTEAREA----------boxZoneTexte3-------TEXTE2----*/

#boxzonetexte3
{
position: absolute ;
top: 384px;
left: 10px;
width:400px;
height:270px;
background-color: #C0C0C0;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;
border: solid #000000 1px; 
display: none;  }


#icone-zone3 {
position: relative;
top: 7px;
left: 6px;
width:380px;
height: 46px;
padding: 2px;
background-color: #ffffff;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;
border: solid #000000 1px; }


#select-typo-box3  {

position: relative;
top: -2px;
left: 0px;
width: 60px;
height: 26px;    }


#boite-texte3   {

position: absolute;
top: 60px;
left: 10px;
width: 374px;
height: 160px;
cursor : text;   }


.bouton-ok-text03  {

position: absolute;
top: 232px;
left: 215px;
width:40px;
height:24px   }


.bouton-reset-03
{
position: absolute;
top: 232px;
left: 135px;
width:70px;
height:24px;  }


/*--------TEXTEAREA------boxZoneTexte4-------TEXTE3----*/

#boxzonetexte4
{
position: absolute ;
top: 384px;
left: 10px;
width:400px;
height:270px;
background-color: #C0C0C0;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;
border: solid #000000 1px; 
display: none;  }


#icone-zone4 {
position: relative;
top: 7px;
left: 6px;
width:380px;
height: 46px;
padding: 2px;
background-color: #ffffff;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;
border: solid #000000 1px; }


#select-typo-box4  {

position: relative;
top: -2px;
left: 0px;
width: 60px;
height: 26px;    }


#boite-texte4   {

position: absolute;
top: 60px;
left: 10px;
width: 374px;
height: 160px;
cursor : text;   }


.bouton-ok-text04  {

position: absolute;
top: 232px;
left: 215px;
width:40px;
height:24px   }


.bouton-reset-04
{
position: absolute;
top: 232px;
left: 135px;
width:70px;
height:24px;  }



/*---------TEXTEAREA------boxZoneTexte5-------TEXTE4----*/


#boxzonetexte5
{
position: absolute ;
top: 384px;
left: 10px;
width:400px;
height:270px;
background-color: #C0C0C0;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;
border: solid #000000 1px; 
display: none;  }


#icone-zone5 {
position: relative;
top: 7px;
left: 6px;
width:380px;
height: 46px;
padding: 2px;
background-color: #ffffff;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;
border: solid #000000 1px; }


#select-typo-box5  {

position: relative;
top: -2px;
left: 0px;
width: 60px;
height: 26px;    }


#boite-texte5   {

position: absolute;
top: 60px;
left: 10px;
width: 374px;
height: 160px;
cursor : text;   }


.bouton-ok-text05  {

position: absolute;
top: 232px;
left: 215px;
width:40px;
height:24px   }


.bouton-reset-05
{
position: absolute;
top: 232px;
left: 135px;
width:70px;
height:24px;  }



/*------------------------EDITER-LIENS--1-------------------------*/


#box-liens1  {

position: absolute ;
top: 730px;
left: 10px;
width: 398px;
height: 38px;
background-color: #C0C0C0;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;
border: solid black 1px;
vertical-align: bottom; 
display: none;     }


#icone-liens1 {


width: 396px;
height: 34px;
background-color: #C0C0C0;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;  }


#icone-liens1 td {

position: relative;
top: 2px;
left: 2px;
background-color: #ffffff;
height: 18px;
text-align: center;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;  }


#champ-lien1  {

width: 72px;
height: 14px;
text-align: center;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;  }

#choix-typo  {

width: 82px;
height: 22px;
text-align: center;  }

#select-typo-liens1  {

width: 68px;
height: 22px;
text-align: center;  }

.bouton-ok-lien-01  {

width: 34px;
height: 22px;
text-align: center;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;  }


.ico-lien1 {

width: 20px;
height: 18px;
padding: 2px;
text-align: center;
vertical-align: bottom;   }

.ico-lien1:hover {

border: solid red 1px;  }

#cel-lien1 {

width: 46px;
height: 18px;  }

#cel-lien2 {

width: 26px;
height: 22px;  }

#cel-lien3 {

width: 26px;
height: 18px;   }

#cel-lien4 {

width: 80px;
height: 18px;  }

#cel-lien5 {

width: 64px;
height: 18px;  }


#cel-lien6 {

width: 34px;
height: 18px; }

/*------------------------EDITER-LIENS--2-------------------------*/


#box-liens2  {

position: absolute ;
top: 730px;
left: 10px;
width: 398px;
height: 38px;
background-color: #C0C0C0;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;
border: solid black 1px;
vertical-align: bottom; 
display: none;     }


#icone-liens2 {


width: 396px;
height: 34px;
background-color: #C0C0C0;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;  }


#icone-liens2 td {

position: relative;
top: 2px;
left: 2px;
background-color: #ffffff;
height: 18px;
text-align: center;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;  }


/*------------------------EDITER-LIENS--3-------------------------*/

#box-liens3  {

position: absolute ;
top: 730px;
left: 10px;
width: 398px;
height: 38px;
background-color: #C0C0C0;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;
border: solid black 1px;
vertical-align: bottom; 
display: none;     }


#icone-liens3 {


width: 396px;
height: 34px;
background-color: #C0C0C0;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;  }


#icone-liens3 td {

position: relative;
top: 2px;
left: 2px;
background-color: #ffffff;
height: 18px;
text-align: center;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;  }


/*------------------------EDITER-LIENS--4-------------------------*/

#box-liens4  {

position: absolute ;
top: 730px;
left: 10px;
width: 398px;
height: 38px;
background-color: #C0C0C0;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;
border: solid black 1px;
vertical-align: bottom; 
display: none;     }


#icone-liens4 {


width: 396px;
height: 34px;
background-color: #C0C0C0;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;  }


#icone-liens4 td {

position: relative;
top: 2px;
left: 2px;
background-color: #ffffff;
height: 18px;
text-align: center;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;  }


/*------------------------EDITER-LIENS--5-------------------------*/


#box-liens5  {

position: absolute ;
top: 730px;
left: 10px;
width: 398px;
height: 38px;
background-color: #C0C0C0;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;
border: solid black 1px;
vertical-align: bottom; 
display: none;     }


#icone-liens5 {


width: 396px;
height: 34px;
background-color: #C0C0C0;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;  }


#icone-liens5 td {

position: relative;
top: 2px;
left: 2px;
background-color: #ffffff;
height: 18px;
text-align: center;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;  }

/*--------------------------EDITER-LIENS--6-------------------*/

#box-liens6  {

position: absolute ;
top: 730px;
left: 10px;
width: 398px;
height: 38px;
background-color: #C0C0C0;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;
border: solid black 1px;
vertical-align: bottom; 
display: none;     }


#icone-liens6 {


width: 396px;
height: 34px;
background-color: #C0C0C0;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;  }


#icone-liens6 td {

position: relative;
top: 2px;
left: 2px;
background-color: #ffffff;
height: 18px;
text-align: center;
border-radius: 6px 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px 6px;  }



/*-------------SCROLLBAR-------------------------------------------------*/

@-moz-document url-prefix(http://),url-prefix(https://) 
{scrollbar                        {  -moz-appearance: none;   background: grey;  } 
thumb,scrollbarbutton             {  -moz-appearance: none;   background-color: silver;}
thumb:hover,scrollbarbutton:hover {  -moz-appearance : none;  background-color: orange;}
scrollbarbutton                   {   display: block;  }

scrollbar[orient="vertical"]    {  min-width: 15px;  } }


::-webkit-scrollbar { width: 16px; height: 14px; background-color: silver; }
::-webkit-scrollbar-button { width: 16px; height: 28px; border-radius: 8px; background-color: orange; }
::-webkit-scrollbar-track {  background-color: black; width: 8px;}
::-webkit-scrollbar-track-piece { background-color: silver;}
::-webkit-scrollbar-thumb { height: 1em; background-color: grey; border-radius: 8px;}
::-webkit-scrollbar-corner { background-color: silver;}
::-webkit-resizer { background-color: silver;}



/*-------------------------------animation-transition----------------------------------*/

@-webkit-keyframes trans {
	
0%   {
 opacity:0;  left: -320px;}
	
100% {	opacity:1;
 left: 0px;   }

}

@keyframes trans {
	
0%   {
 opacity:0;  left: -320px; }
	
100% { opacity:1;
  left: 0px;    }

}

@-ms-keyframes trans {
	
0%   {
 opacity:0;  left: -320px; }
	
100% {	opacity:1;
 left: 0px;    }

}

@-moz-keyframes trans {
	
0%   {
 opacity:0;  left: -320px; }
	
100% {	opacity:1;
 left: 0px;    }

}

@-o-keyframes trans {
	
0%   {
 opacity:0;  left: -320px; }
	
100% {	opacity:1;
 left: 0px;    }

}


#doc    { 
background-color: #222;

}


#transition
{ 
position: absolute;
top: -70px;
left: 1020px;  }

/*
-ms-animation:trans 1s ease;
	
-webkit-animation:trans 1s ease;
-moz-animation:trans 1s ease;
-o-animation:trans 1s ease;
animation:trans 1s ease;      }
*/


/*-------------------------------animation-transition---2-------------------------------*/

@-webkit-keyframes trans2 {
	
0%   {
 opacity:0;  left: 640px;}
	
100% {	opacity:1;
 left: 0px;   }

}

@keyframes trans2 {
	
0%   {
 opacity:0;  left: 640px; }
	
100% { opacity:1;
  left: 0px;   }

}

@-ms-keyframes trans2 {
	
0%   {
 opacity:0;  left: 900px; }
	
100% {	opacity:1;
 left: 580px; }

}

@-moz-keyframes trans2 {
	
0%   {
 opacity:0;  left: 640px; }
	
100% {	opacity:1;
 left: 0px;   }

}

@-o-keyframes trans2 {
	
0%   {
 opacity:0;  left: 640px; }
	
100% {	opacity:1;
 left: 0px;   }

}


#transition2  {
 
position: absolute;
left: -1024px;

-ms-animation:trans2 1s ease;
	
-webkit-animation:trans2 1s ease;
-moz-animation:trans2 1s ease;
-o-animation:trans2 1s ease;
animation:trans2 1s ease;      }