/* Document css */   /* TOP MENU  */   /* css pro Mystics */


/* ===================================== T O P    M E N U ==================================================*/
/* ===================================== T O P    M E N U ==================================================*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#blok-pro-klavesy { width:1000px;         
                    height: 252px;
                    margin: 0 auto;
                    background: url(../grafika/klavesy.png);
                    bor der: 1px solid white;  }

#div-nad-menu  { width:998px;  /* div je zde proto, aby byly klapky odsunuty níže */       
                 height: 100px;
                 margin-bottom: 18px;  /* určuje posun kláves i textu nahoru a dolu */
                 mar gin: 1px 1px 1px 1px;
                 bor der: 1px solid yellow; }

#menu-texty  { width:990px;
               height:30px;
               margin-top: 30px ;
               bor der: 1px solid tomato; }

#topmenu ul li { display: inline; } /* ruší odrážky u textu , musí být umísteno pouze zde #topmenu ul li */

#topmenu a { display: block;  /* odkazy v menu jsou blokové elementy */
             color: grey;             /* základní barva písmen v tlacítkách - odkazu */
             margin-top: 0px;
             text-decoration: none;      /* odkazy nejsou podtrženy */
             bor der: 1px solid red; }

#topmenu ul li a:hover {color: #66ccff;}     /* barva písma pri najetí kurzoru na tlacítko */         
 
#topmenu a:hover { background-position: left -130px; } 


/*------K L Á V E S Y -------------------------------------------------------*/
/*---------------------------------------------------------------------------*/
/*  1. blok menu  */
/*---------------------------------------------------------------------------*/

#div-1-prazdny  { width:83px;         
                  height: 100px;
                  margin-left: 23px;    /* zacátek levé hrany klávesy 1+2 */
                  margin-top: 14px;
                  padding-top: 16px;    /* zacátek vrchní hrany klávesy 1+2 */
                  float: left;
                  bor der: 1px solid pink; }

/*---------------------------------------------------------------------------*/
/*  2. blok menu  */
/*---------------------------------------------------------------------------*/

/*  O D K A Z   pro   Ú V O D   */

#tlacitko-1 { width:125px; /*šírka tohoto blok elementu *//* šírka obrázku tlacítka */
              height: 130px;   /*výška tohoto blok elementu *//* výška obrázku tlacítka 100px + 30px pro text */
              float: left; /* nebude-li left, tlacítka budou pod sebou */
              margin-top:0px;
              font-family: Century Gothic;  /* styl písma v tlacítkách */
              text-align: center;  /* zarovnání textu odkazu vůči tlačítkum */
              font-size: 90%;    /*velikost písma v tlacítkách */ 
              bor der: 1px solid red; }

#tlacitko-1 {background: url(../grafika/3+4+5.png);}  

#stranka-uvod #tlacitko-1  {color: #ffcc99;} /*zajistí, aby text nad tlacítkem byl žlutý*/

#stranka-uvod #tlacitko-1 { background: url(../grafika/3+4+5.png); 
                            background-position: left -260px; }   
                            

/*---------------------------------------------------------------------------*/
/*  3. blok menu  */
/*---------------------------------------------------------------------------*/

#div-3-prazdny  { width:41px;     /* 6 klapka , bunka mezi ÚVODEM a HUDBOU */    
                  height: 100px;
                  float: left;
                  padding-top: 30px;    /* zacátek vrchní hrany klávesy 6 */
                  bor der: 1px solid pink; }

/*---------------------------------------------------------------------------*/
/*  4. blok menu  */
/*---------------------------------------------------------------------------*/

/*  O D K A Z   pro   H U D B A   */

#tlacitko-2 { width:84px; /*šírka tohoto blok elementu *//* šírka obrázku tlacítka */
              height: 130px;   /*výška tohoto blok elementu *//* výška obrázku tlacítka 100px + 30px pro text */
              float: left; /* nebude-li left, tlacítka budou pod sebou */
              margin: 0px;    /* má vliv na mezery mezitlacítky *//* velké mezery-poslední tlacítko muže vypadnout z rádku*/
              font-family: Century Gothic;  /* styl písma v tlacítkách */
              text-align: center;  /* zarovnání textu odkazu vuci tlacítkum */
              font-size: 90%;    /*velikost písma v tlacítkách */ }
                  
#tlacitko-2 {background: url(../grafika/7+8.png);}  

#stranka-hudba #tlacitko-2  {color: #ffcc99;} /*zajistí, aby text nad tlacítkem byl žlutý*/

#stranka-hudba #tlacitko-2 { background: url(../grafika/7+8.png); 
                             background-position: left -260px; }   

/*   K O N E C   O D K A Z U  pro   H U D B A   */

/*---------------------------------------------------------------------------*/
/*  5. blok menu  */
/*---------------------------------------------------------------------------*/

#div-5-prazdny  { width:41px;     /* 9. klapka */    
                  height: 100px;
                  float: left;
                  margin-left: 0px;    /* zacátek levé hrany klávesy k 3+4+5 */
                  padding-top: 30px;    /* zacátek vrchní hrany klávesy 6 */
                  bor der: 1px solid pink; }
                  
/*---------------------------------------------------------------------------*/
/*  6. blok menu  */
/*---------------------------------------------------------------------------*/

/*  O D K A Z   pro   K O N C E R T Y   */

#tlacitko-3 { width:125px; /*šírka tohoto blok elementu - šírka obrázku tlacítka */
              height: 130px;   /*výška tohoto blok elementu *//* výška obrázku tlacítka 100px + 30px pro text */
              float: left;  /*nebude-li left, tlacítka budou pod sebou */
              margin: 0px;    /* má vliv na mezery mezitlacítky *//* velké mezery-poslední tlacítko muže vypadnout z rádku*/
              font-family: Century Gothic;  /* styl písma v tlacítkách */
              text-align: center;  /* zarovnání textu odkazu vuci tlacítkum */
              font-size: 90%;    /*velikost písma v tlacítkách */ }

#tlacitko-3 {background: url(../grafika/3+4+5.png);}  

#stranka-koncerty #tlacitko-3  {color: #ffcc99;} /*zajistí, aby text nad tlacítkem byl žlutý*/

#stranka-koncerty #tlacitko-3 { background: url(../grafika/3+4+5.png); 
                                background-position: left -260px; }  


/*   K O N E C   O D K A Z U  pro   K O N C E R T Y   */

/*---------------------------------------------------------------------------*/
/*  7. blok menu  */
/*---------------------------------------------------------------------------*/

#div-7-prazdny  { width:41px;     /* 6. klapka */    
                  height: 100px;
                  float: left;
                  margin-left: 0px;    /* zacátek levé hrany klávesy k 3+4+5 */
                  padding-top: 30px;    /* zacátek vrchní hrany klávesy 6 */
                  bor der: 1px solid pink; }

/*---------------------------------------------------------------------------*/
/*  8. blok menu  */
/*---------------------------------------------------------------------------*/

/*  O D K A Z   pro   F O T O   */

#tlacitko-4 { width:84px; /*šírka tohoto blok elementu *//* šírka obrázku tlacítka */
              height: 130px;   /*výška tohoto blok elementu *//* výška obrázku tlacítka 100px + 30px pro text */
              float: left; /* nebude-li left, tlacítka budou pod sebou */
              margin: 0px;    /* má vliv na mezery mezitlacítky *//* velké mezery-poslední tlacítko muže vypadnout z rádku*/
              font-family: Century Gothic;  /* styl písma v tlacítkách */
              text-align: center;  /* zarovnání textu odkazu vuci tlacítkum */
              font-size: 90%;    /*velikost písma v tlacítkách */ }
                  
#tlacitko-4 {background: url(../grafika/7+8.png);}  

#stranka-foto #tlacitko-4  {color: #ffcc99;} /*zajistí, aby text nad tlacítkem byl žlutý*/

#stranka-foto #tlacitko-4 { background: url(../grafika/7+8.png); 
                            background-position: left -260px; }

/*   K O N E C   O D K A Z U  pro   F O T O   */

/*---------------------------------------------------------------------------*/
/*  9. blok menu  */
/*---------------------------------------------------------------------------*/

#div-9-prazdny  { width:41px;     /* 9. klapka */    
                  height: 100px;
                  float: left;
                  margin-left: 0px;    /* zacátek levé hrany klávesy k 3+4+5 */
                  padding-top: 30px;    /* zacátek vrchní hrany klávesy 6 */
                  bor der: 1px solid pink; }

/*---------------------------------------------------------------------------*/
/*  10. blok menu  */
/*---------------------------------------------------------------------------*/

/*  O D K A Z   pro   C D   */

#tlacitko-5 { width:125px; /*šírka tohoto blok elementu *//* šírka obrázku tlacítka */
              height: 130px;   /*výška tohoto blok elementu *//* výška obrázku tlacítka 100px + 30px pro text */
              float: left; /* nebude-li left, tlacítka budou pod sebou */
              margin: 0px;    /* má vliv na mezery mezitlacítky *//* velké mezery-poslední tlacítko muže vypadnout z rádku*/
              font-family: Century Gothic;  /* styl písma v tlacítkách */
              text-align: center;  /* zarovnání textu odkazu vuci tlacítkum */
              font-size: 90%;    /*velikost písma v tlacítkách */ }

#tlacitko-5 {background: url(../grafika/3+4+5.png);}  

#stranka-ome #tlacitko-5  {color: #ffcc99;} /*zajistí, aby text nad tlacítkem byl žlutý*/

#stranka-ome #tlacitko-5 { background: url(../grafika/3+4+5.png); 
                          background-position: left -260px; }  

/*   K O N E C   O D K A Z U  pro   C D   */

/*---------------------------------------------------------------------------*/
/*  11. blok menu  */
/*---------------------------------------------------------------------------*/

#div-11-prazdny  { width:41px;     /* 6. klapka */    
                   height: 100px;
                   float: left;
                   margin-left: 0px;    /* zacátek levé hrany klávesy k 3+4+5 */
                   padding-top: 30px;    /* zacátek vrchní hrany klávesy 6 */
                   bor der: 1px solid pink; }

/*---------------------------------------------------------------------------*/
/*  12. blok menu  */
/*---------------------------------------------------------------------------*/

/*  O D K A Z   pro   K O N T A K T   */

#tlacitko-6 { width:84px; /*šírka tohoto blok elementu *//* šírka obrázku tlacítka */
              height: 130px;   /*výška tohoto blok elementu *//* výška obrázku tlacítka 100px + 30px pro text */
              float: left; /* nebude-li left, tlacítka budou pod sebou */
              margin: 0px;    /* má vliv na mezery mezitlacítky *//* velké mezery-poslední tlacítko muže vypadnout z rádku*/
              font-family: Century Gothic;  /* styl písma v tlacítkách */
              text-align: center;  /* zarovnání textu odkazu vuci tlacítkum */
              font-size: 90%;    /*velikost písma v tlacítkách */ }
                  
#tlacitko-6 {background: url(../grafika/7+8.png);}  

#stranka-kontakt #tlacitko-6  {color: #ffcc99;} /*zajistí, aby text nad tlacítkem byl žlutý*/

#stranka-kontakt #tlacitko-6 { background: url(../grafika/7+8.png); 
                               background-position: left -260px; }

/*   K O N E C   O D K A Z U  pro   K O N T A K T   */

/*---------------------------------------------------------------------------*/
/*  13. blok menu  */
/*---------------------------------------------------------------------------*/

#div-13-prazdny  { width:41px;     /* 9. klapka */    
                   height: 100px;
                   float: left;
                   margin-left: 0px;    /* zacátek levé hrany klávesy k 3+4+5 */
                   padding-top: 30px;    /* zacátek vrchní hrany klávesy 6 */
                   bor der: 1px solid pink; }

/*---------------------------------------------------------------------------*/
/*   KONEC   BLOKU  PRO  KLÁVESY
/*---------------------------------------------------------------------------*/










/* =========== DIV pro Menu TEXTY ============================================*/
/* =========== DIV pro Menu TEXTY ============================================*/

#div-2-uvod  { width:121px;       /* v tomto divu napsán text Úvod  */ 
               height: 25px;
               float: left;
               font-family: calibri;
               font-size: 22px;
               color: #444444;
               margin-top: 1px;  /* udává odsazení od top, umístení názvu úvod na lište */ 
               margin-bottom: 6px;  /* udává odsazení od spodu, mezera mezi slovem úvod a klávesou */ 
               pad ding-top: 50px;
               text-align: center;
               bor der: 1px solid green;  }   
               
#div-4-hudba  { width:84px;    /* KONTAKT */    
                height: 25px;
                float: left;
                font-family: calibri;
                font-size: 22px;
                color: #555555; 
                margin-top: 1px;  /* udává odsazení od top, umístení názvu Foto na lište */ 
                margin-bottom: 6px;  /* udává odsazení od spodu, mezera mezi slovem Foto a klávesou */ 
                text-align: center;
                bor der: 1px solid green;  }
                   
#div-6-koncerty  { width:121px;     /* Koncerty */    
                   height: 25px;
                   float: left;
                   font-family: calibri;
                   font-size: 22px;
                   color: #555555; 
                   margin-top: 1px;  /* udává odsazení od top, umístení názvu úvod na lište */ 
                   margin-bottom: 6px;  /* udává odsazení od spodu, mezera mezi slovem úvod a klávesou */ 
                   text-align: center;
                   bor der: 1px solid blue; }

#div-8-foto  { width:84px;    /* FOTO */    
               height: 25px;
               float: left;
               font-family: calibri;
               font-size: 22px;
               color: #555555; 
               margin-top: 1px;  /* udává odsazení od top, umístení názvu Foto na lište */ 
               margin-bottom: 6px;  /* udává odsazení od spodu, mezera mezi slovem Foto a klávesou */ 
               text-align: center;
               bor der: 1px solid green;  }
               
#div-10-ome  { width:121px;     /* O mě */    
              height: 25px;
              float: left;
              font-family: calibri;
              font-size: 22px;
              color: #555555; 
              margin-top: 1px;  /* udává odsazení od top, umístení názvu úvod na lište */ 
              margin-bottom: 6px;  /* udává odsazení od spodu, mezera mezi slovem úvod a klávesou */ 
              text-align: center;
              bor der: 1px solid blue; }

#div-12-kontakt  { width:84px;    /* KONTAKT */    
                   height: 25px;
                   float: left;
                   font-family: calibri;
                   font-size: 22px;
                   color: #444444; 
                   margin-top: 1px;  /* udává odsazení od top, umístení názvu Foto na lište */ 
                   margin-bottom: 6px;  /* udává odsazení od spodu, mezera mezi slovem Foto a klávesou */ 
                   text-align: center;
                   bor der: 1px solid green;  }