/* ========================================================================================================================================================== */
/* společná nastavení                                                                                                                                         */
/* ========================================================================================================================================================== */

body { color: #fff; font-family: 'Josefin Sans', sans-serif; /* "Verdana", "Arial"; */}

/* animace:  */
nav a, .gallery, .gallery ul img {
-webkit-transition: all 0.30s ease-out;
-moz-transition:    all 0.30s ease-out;
-ms-transition:     all 0.30s ease-out;
-o-transition:      all 0.30s ease-out;
transition:         all 0.30s ease-out;
      }

/* clearfix:  */
.clear:after { content: ''; clear: both; display: block;}

/* navigace:  */
/* a) obecná nastavení:  */
nav         { position: fixed; left: 0; top: 10px;}
nav ul      { padding: 0 5px; margin: 0 5px;}
nav ul li   { list-style: none; padding: 1px 5px;}
nav ul li a { display: block; text-transform: uppercase; padding: 1px 5px;
              color: #fff; text-decoration: none;}
nav ul li a:hover { /*color: #ff9900;*/ font-weight: bold; letter-spacing: 0.3ex;}

/* b) current-menu-item (u statického webu nepoužito kvůli napojování headeru):  */
.current-menu-item a        { color: #00ccff; font-weight: bold; letter-spacing: 0.3ex;}
.current-menu-item a:hover  { color: #00ccff; /*letter-spacing: normal;*/ }

/* c) navigace administrátorské sekce:  */
.nav_admin      { margin: 2% 0;}
.nav_admin li   { font-weight: bold; color: #ff0000;}


/* wrapper:  */
#wrapper { background: #000; border: none; margin: 10px auto 20px; padding: 0 10px;}

#wrapper a          { text-decoration: none; color: #0099ff;}
#wrapper a:visited  { text-decoration: none; color: #0099ff;}
#wrapper a:hover    { text-decoration: none; color: #ff9900;}
#wrapper a:active   { text-decoration: none; color: #ff3300;}

h1, h2 { text-align: center; padding: 0; margin: 0;}
.center, .center p { text-align: center;}
.center_img { display: block; margin: 0 auto; max-width: 100%;}
.right      { text-align: right;}

/* section:  */
section     { opacity: 0;}
section p   { text-align: justify;}
.img_titul  { display: block; margin: 0 auto;}

/* animace - zvětšování obrázků:  */
.grow_image { position: relative; width: 75%;}
.grow_div   { position: relative;}

/* footer:  */
footer      { color: #999; text-align: center;}
footer img  { margin: 0 0 5px;}
footer p    { margin: 0;}
.nahoru     { text-align: center; background-color: #333; margin-bottom: 15px; border-radius: 3px;}
.nahoru a   { display: block; line-height: 1.6em; }
.nahoru:hover { background-color: #555;}
#admin      { font-size: 4px;}

/* obecné:  */
hr          { color: #111;}
table td    { vertical-align: top;}
.disclaimer { font-size: 15px;}

/* ========================================================================================================================================================== */
/* veřejné sekce webu                                                                                                                                         */
/* ========================================================================================================================================================== */

/* Vstupní stránka (index):  */
.index section  { margin: auto;}
.index h1       { margin: 2% auto;}
.index img      { margin: 2.5% auto; max-width: 100%;}
.index table    { width: 40%; margin: 0 auto;}
.index td       { text-align: center;}
.index a        { text-decoration: none; font-size: 1.3em; font-weight: bold; color: #fff;}
.index p        { margin-top: 4%; color: #666; font-size: 0.9em;}  /* vypsání pořadí aktuální návštěvy webu */

/* Úvodní stránka (home):  */
#horni h1       { font-size: 5px; overflow: hidden; text-indent: -9000px; }
#uvitani        { margin: 10px 0 25px;}
#uvitani_lang1  { text-align: center; font-weight: bold;}
#uvitani_lang2  { text-align: center;}
#motto          { text-align: center; margin-top: 16px; padding: 2px 0 3px; color: #bbb; background-color: #444; border-radius: 3px; letter-spacing: 0.2ex; }

/* Archiv aktualit + aktuality na úvodní stránce:  */
.aktuality      { max-width: 100%; border-collapse: collapse;}     /* tabulka aktualit */
.aktuality td   { padding: 0 6px;}
.aktuality_img  { max-width: 19%; min-width: 40px;}  /* buňka tabulky s náhledovým obrázkem */
.aktuality img  { display: block; margin: 15px auto 0; max-width: 100%;} /* samotný náhledový obrázek */
.news           { margin-bottom: 48%;}   /* dolní část úvodní stránky v EN;  pokud je kontejner "news" prázdný, volit 'margin-bottom: 48%;' */

/* O nás:  */
#clenove        { margin-bottom: 10%;}  /* menší hodnotu margin nevolit kvůli stručnější EN verzi sekce (jinak se může měnit velikost obrázku pozadí) */
#clenove img    { }
#clenove p      { }
#clenove table  { max-width: 100%;}
.clen_img       { max-width: 25%; min-width: 60px;}
.clen_img img   { max-width: 100%;}
.hlas           { color: #999;}

/* O Voices of Europe:  */
.mesta_kultury { color: #999; font-weight: bold;}
.avignon    {color: #ff0000;}
.bergen     {color: #33ffff;}
.bolona     {color: #cc0099;}
.brusel     {color: #339900;}
.helsinky   {color: #00ccff;}
.krakov     {color: #33ff66;}
.praha      {color: #ff6600;}
.reykjavik  {color: #0066ff;}
.santiago   {color: #ff66ff;}
.voe .floated { float: left; padding: 0 9px;}
.voe li     { list-style: none; margin-left: -12px;}
#voe_r098_box { max-width: 60%;}
#voe_r098   {width: 100%;}
#voe_r127   {max-width: 30%;}
#voe_program{max-width: 32%;}
#voe_r132   {max-width: 30%;}
.copyright  {color: #999;}

/* Ocenění:  */
#oceneni  { width: 100%; border: none; border-collapse: collapse; margin: 10% 0 7%;}   /* menší hodnotu margin nevolit (jinak se může měnit velikost obrázku pozadí) */
#oceneni tr:hover { background-color: #333;}
.oceneni  { width: 45%; height: 80px;}
.festival { width: 50%; height: 80px;}
.fest_rok { height: 80px;}

/* Historie akcí:  */
#akce { width: 100%; border-collapse: collapse; empty-cells: show;}
#akce td { border-bottom: 1px solid #444; padding-top: 3px; padding-bottom: 3px;}
#akce tr:hover { background-color: #333;}
#akce td[colspan="2"]:hover { background-color: #000;}
#akce td[colspan="2"] { border-bottom: none; font-size: 0.5em;}
#akce .skupina_akci_l { background-color: #006666; border-top-left-radius: 4px; border-bottom-left-radius: 4px; padding-left: 12px; font-weight: bold;}
#akce .skupina_akci_p { background-color: #999; border-top-right-radius: 4px; border-bottom-right-radius: 4px; padding-right: 12px;}
#akce .skupina_akci_l, #akce .skupina_akci_p { border-bottom: none;}
#akce .event        { padding-right: 3px;}
#akce .rok          { padding-left:  4px; border-left: 1px #777 dotted; color: #999;}
#akce .akce_odkaz   { background-color: #464646;}

/* Repertoár:  */
#repertoar          { width: 100%; border: none; border-collapse: collapse; margin: 40px 0 0px/*-15px*/;}
#repertoar tr:hover { background-color: #333;}
#repertoar td       { border-top: 1px #777 dashed; border-bottom: 1px #777 dashed; /*height: 65px;*/ padding: 10px 0;}
.repert_zanr        { width: 23%; font-weight: bold;}
.repert_autori      { }

/* Hudební ukázky:  */
#ukazky             { width: 69%; border: none; text-align: center; margin: 25px auto 30px;}
.autor_skladba      { height: /*50...pro autora, jeho data života a název skladby v jedné buňce*/17px; text-align: left; /*padding: 0px 10px 0px 0px;*/}
#ukazky td[rowspan="3"] { vertical-align: middle; /* svislé zarovnání elementů <audio> na střed buňky */}
#ukazky .oddelovac  { border-bottom: 1px #777 dotted;}
audio               { opacity: 0.85; max-width: 500% /*770%*/; /* kvůli mobilům na výšku */ border-radius: 7px; }
audio:hover         { opacity: 1; /*box-shadow: 0px 0px 2px 2px #999;*/}

/* Galerie:  */

/* a) obecná nastavení galerie:  */
#galerie        { width: 100%; border: none; text-align: center; margin: 35px auto 15px;}
.galerie_cast   { background-color: #006666; border-radius: 4px; font-weight: bold; padding: 3px;}

/* b) jQuery lightBox plugin - vlastnosti náhledů na stránce Galerie:  */
.gallery        { background-color: #000;/* barva orámování celé galerie */ padding: 10px; width: 700px; border-radius: 8px;}
.gallery ul     { list-style: none;}
.gallery ul li  { display: inline;}
.gallery ul img { border: 3px solid #000; /* barva orámování jednotlivých náhledů */
  /*border-width: 5px 5px 20px;*/  /* velký rámeček kolem náhledů se širším spodním okrajem - volitelné */ }
.gallery:hover  { background-color: #222;}
.gallery:hover ul img   { border-color: #222;}
.gallery ul a:hover     { /*color: #444; nemá na nic vliv*/} /* barva zvýraznění náhledu v místě kurzoru */ 
.gallery ul li a img    { width: 72px; height: 54px; opacity: 0.85;} /* formát thumbnails */
.gallery ul a:hover img { color: #000; border: 3px solid #888/*#666*/; border-radius: 6px; opacity: 1;
 /*border-width: 5px 5px 20px;*/    /* velký rámeček kolem náhledů se širším spodním okrajem - volitelné */ }

/* c) jQuery lightBox plugin - vlastnosti lightboxu:  viz soubor 'jquery.lightbox-0.5.css' */


/* Napsali o nás:  */
#popup_info     { background: #555; font-size: 90%; padding: 0.2% 9%; margin: 25px 10px; border-radius: 12px;}
#napsali a      { color: #cccc99; font-weight: bold;}
#napsali p      { border: 0; padding: 0;}
.napsali_zdroj  { color: #999; font-style: italic;}

/* Reference:  */
.reference      { margin: 5% auto;}

/* Pro média:  */
.media          { margin-bottom: 11%;}
.media ul       { margin-bottom: 4%;}
.media ul li    { text-align: justify; margin: 1% 10% 0 5%;}

/* Nabídka vystoupení:  */
#nabidka        { margin-left: 10%;}
#nabidka ul     { margin: 1%;}

/* Kontakt:  */
#kontakty       { width: 50%; min-width: 120px; margin: 0 auto 4% /*10% auto 14% ... bez formuláře*/; border: #666 1px solid; border-radius: 9px;}
#kontakty td    { text-align: left; vertical-align: middle; padding: 1%;}
.kontakty_img   { min-width: 70px; padding: 1% 0;}
.kontakty_img img { max-width: 200%;}
.kontakty_form input[class="txt_input"][type="text"] { width: 50%;}

/* Formuláře (součást Zasílání pozvánek, Admin):  */
.formular span  { color: #ff0000; font-weight: bold;}    /* chybové hlášky */
.formular table { width: 100%; border: 0; }
.formular th    { height: 50px;}
.formular td    { text-align: center;}
.formular .limit{ font-weight: normal; color: #999; padding: 0 5px;}
.txt_input, textarea, select {
    width: 100%;
    -webkit-box-sizing: border-box;‌​
    -moz-box-sizing:    border-box;‌​
    -ms-box-sizing:     border-box;‌​
    -o-box-sizing:      border-box;‌​
    box-sizing:         border-box;‌​
}
input[type="submit"] { display: block; max-width: 100%/*110px*/;}

/* Tlačítka akcí zobrazovaná pod formuláři:  */
.buton_akce   { display: block; margin: 2% auto; max-width: 100%; font-size: 0.7em;}
.buton_marked { display: block; margin: 1% auto; max-width: 100%; font-size: 0.7em; color: #dd2222; /*font-weight: bold;*/}
.buton_exit   { display: block; margin: 5% auto; max-width: 100%; font-size: 0.7em; color: #dd2222; /*font-weight: bold; background-color: gold;*/}

/* Zasílání pozvánek:  */
.pozvanky   { margin: 0 auto 10%;}
#odeslano   { margin: 185px 0; font-weight: bold; text-align: center; color: yellow;}
.pozvanky .nazev_vstupu { width: 32%; height: 2.66em; font-weight: bold; text-align: left;}
.pozvanky .vstup        { width: 30%; text-align: left;   padding-right: 25px;}
.pozvanky .antispam     { width: 38%;}

/* Captcha:  */
/*#result { border: 1px solid green; width: 300px; margin: 0 0 0px 0; padding: 10px 20px; font-weight: bold;}     */
#change-image   { font-size: 0.8em;}
.antispam       { border-left: #111 ridge;} /* levý okraj u <td> v nichž je captcha */

/* ========================================================================================================================================================== */
/* admin (sekce administrátora):                                                                                                                              */
/* ========================================================================================================================================================== */

/* a) Obecná nastavení sekce administrátora:  */
.nadpis         { font-size: 140%; font-weight: bold; text-align: center; margin: 30px 0;}
.neprihlasen    { line-height: 3em; color: #ff0000; font-weight: bold; text-align: center; margin-top: 40%;}    /* chybová hláška - uživatel nepřihlášen (v sekci administrátora) */

/* b) Login (přihlášení do sekce administrátora),
      Historie_audit_login (přihlášení do sekce auditu logu historie návštěv): */
.login              { /*margin: *25% 0 33%;*/}
.login .nazev_vstupu{ width: 20%; font-weight: bold; text-align: right; padding-right: 20px;}
.login .vstup       { width: 20%; text-align: left;}

/* c) Činnost (volba činnosti administrátora): */
.cinnost { margin: /*280px*/0 0 391px 0;}

/* d) Nahrát přílohu s pozvánkou: */
.priloha            { margin: 4% 0 3%; text-align: justify;}
.priloha img        { width: 100%/*47%*/;}
.priloha table      { margin-bottom: 2%;}
.priloha table td   { width: 50%; /*border-bottom: 1px solid #666;*/}
.priloha .info      { font-size: 0.8em;}

/* e) Odeslat hromadný e-mail: */
.mail table         { margin-bottom: 2%;}
.mail table td[colspan="2"] { /*border-bottom: 1px solid #666;*/}
.mail .info         { width: 50%; font-size: 0.88em;}
.mail table p       { margin: 6px 0 3px;}
#info_priloha       { font-size: 0.8em;}
.mail table img     { width: 100%/*49%*/;}
.td_zvyrazneny      { background-color: firebrick;}

/* f) Prohlížet a editovat databáze kontaktů: */
/* g) Automaticky kontrolovat úplnost údajů v databázích kontaktů: */
/* h) Spravovat databáze kontaktů (administrace z 10/2015 - vše v jednom): */
#autori_kont        { border: 1px #555 solid; border-radius: 6px; font-size: 0.8em; margin-bottom: 10px;}
.editace select, .kontrola select { margin: 6% auto 3%;}
.kontrola span      { font-size: 0.85em;}
.kont_nadpisek      { color: #ff0000; font-weight: bold; text-decoration: underline; margin: 3% 0%;}
.kont_info          { color: #fff; margin: 0 0 3%;}
.kont_poradi, .kont_ok, .kont_radky { color: cyan;}
.kont_chybny        { color: red;}
.kont_nedostatek    { color: magenta;}
.kont_udaje         { color: yellow;}
.kont_err           { color: #ff0000; font-weight: bold; text-align: center; margin-bottom: -1.2em;}
                    /* chybová hláška - nevybrána databáze kojntaktů (v podsekci 'kontrola kontaktu')*/

.kontrola table     { font-family: Arial; font-size: 0.8em; margin: auto; table-layout: auto/*fixed*/; border-collapse: collapse; border-style: solid; /*border-width: 1px;*/ empty-cells: show;}
.kontrola .hlavicka { background-color: brown; font-weight: bold;}
.kontrola .hlavicka td { padding-top: 5px; padding-bottom: 5px;}             
.kontrola .radek    { text-align: left; vertical-align: central;}
.kontrola .err      { text-align: left; vertical-align: central; background-color: #002244;}
.kontrola td        { padding-left: 10px; padding-right: 10px; border-style: solid; border-width: 1px; border-color: gray; text-align: left; white-space:nowrap; width: 100%;}
.kontrola .duplicitni td { color: yellow;}
.kontrola .neaktivni  td { /*background-color: #333;*/ opacity: 0.55;}
.editace input[type="checkbox"] { display: block; width: 100%;}

.kontrola err { font-weight: bold; color: red;}
.kontrola ok  { font-weight: bold; color: greenyellow;}

/* i) Výpis historie návštěv webu: */
.historie table         { font-family: Arial; font-size: 0.63em; margin: auto; table-layout: fixed; border-collapse: collapse; border-style: solid; border-width: 1px;}
.historie .hlavicka     { background-color: brown; font-weight: bold;}
.historie .hlavicka td  { padding-top: 5px; padding-bottom: 5px;}
.historie .radek        { text-align: center; vertical-align: central; border-style: solid; border-width: 1px; border-color: gray;}
.historie .zvyrazneny   { background-color: MidnightBlue; }
 
/* j) Automatické doplnění údajů do logu historie návštěv: */
.metoda         { }
.audit          { }
.nazev_metody   { text-align: center;}
.audit_nadpisek { color: #ff0000; font-weight: bold; text-decoration: underline; margin: 3% 0%;}
.audit span     { font-size: 0.85em;}
.doplneno       { color: yellow;}
.chyba          { color: red;}


/* Popup windows:  */
.popup          { background: #000; text-align: justify;}
.popup h1       { text-align: left; margin-bottom: 25px;}
.popup span     { color: #99ffcc;}
.popup .box     { border: 1px solid #999; padding: 0 10px;}
.popup img      { max-width: 100%;}

/* ========================================================================================================================================================== */
/* responsivní design                                                                                                                                         */
/* ========================================================================================================================================================== */

@media only screen and (max-width: 479px){
    html        { background: #000;}
    nav         { font-size: 7px;}
    #wrapper    { width: 120px;}
    section, .popup h1, .nahoru { font-size: 12px;}
    .img_titul  { width: 95%; height: auto;}
    .grow_image { position: relative; width: 75%;}
    .grow_div   { position: relative;}
    /* Úvodní stránka (home)) */
    #uvitani_lang1 { font-size: 13px;}
    #uvitani_lang2, #aktuality_home p, .popup { font-size: 11px;}
    footer, .popup .popis_foto { font-size: 10px;}
}
@media only screen and (min-width: 480px) {
    html        { background: #000;}
    nav         { font-size: 10px;}
    #wrapper    { width: 200px;}
    section, .popup h1, .nahoru { font-size: 15px;}
    .img_titul  { width: 95%; height: auto;}
    .grow_image { position: relative; width: 75%;}
    .grow_div   { position: relative;}
    /* Úvodní stránka (home)) */
    #uvitani_lang1 { font-size: 16px;}
    #uvitani_lang2, #aktuality_home p, .popup { font-size: 14px;}
    footer, .popup .popis_foto { font-size: 12px;}
}
@media only screen and (min-width: 768px) {
    html        {background: #000;}
    nav         { font-size: 14px;}
    #wrapper    { width: 278px;}
    section, .popup h1, .nahoru { font-size: 16px;}
    .img_titul  { width: 95%; height: auto;}
    .grow_image { position: relative; width: 75%;}
    .grow_div   { position: relative;}
    /* Úvodní stránka (home)) */
    #uvitani_lang1 { font-size: 17px;}
    #uvitani_lang2, #aktuality_home p, .popup { font-size: 15px;}
    footer, .popup .popis_foto { font-size: 13px;}
}
@media only screen and (min-width: 960px) {
    html        { background: #000;}
    nav         { font-size: 15px;}
    #wrapper    { width: 470px;}
    section, .popup h1, .nahoru { font-size: 17px;}
    .img_titul  { width: 95%; height: 95%;}
    .grow_image { position: relative; width: 75%;}
    .grow_div   { position: relative;}
    /* Úvodní stránka (home)) */
    #uvitani_lang1 { font-size: 18px;}
    #uvitani_lang2, #aktuality_home p, .popup { font-size: 16px;}
    footer, .popup .popis_foto { font-size: 14px;}
}
@media only screen and (min-width: 1220px) {
    html { 
        background: /* #000 ... problikává jQuery fading */ transparent url("../images/bcg_1220.jpg") no-repeat center center fixed;
        -webkit-background-size:    cover;
        -moz-background-size:       cover;
        -o-background-size:         cover;
        background-size:            cover; 
       }
    .index      { background: #000;}  
    nav         { font-size: 16px;}
    #wrapper    { width: 730px;}
    section, .popup h1, .nahoru { font-size: 18px;}
    .img_titul  { width: auto; height: auto;}
    .grow_image { position: relative; width: 75%;}
    .grow_div   { position: relative;}
    /* Úvodní stránka (home)) */
    #uvitani_lang1 { font-size: 19px;}
    #uvitani_lang2, #aktuality_home p, .popup { font-size: 17px;}
    footer, .popup .popis_foto { font-size: 15px;}
}
@media only screen and (min-width: 1450px) {
    /* fixní background:  */
    html { 
        background: #000 url("../images/bcg_1450.jpg") no-repeat center center fixed;
        -webkit-background-size:    cover;
        -moz-background-size:       cover;
        -o-background-size:         cover;
        background-size:            cover; 
       }
    .index      { background: #000;}  
    nav         { font-size: 16px;}
    #wrapper    { width: 960px;}
    section, .popup h1, .nahoru { font-size: 18px;}
    .img_titul  { width: auto; height: auto;}
    .grow_image { position: relative; width: 75%;}
    .grow_div   { position: relative;}
    /* Úvodní stránka (home)) */
    #uvitani_lang1 { font-size: 19px;}
    #uvitani_lang2, #aktuality_home p, .popup { font-size: 17px;}
    footer, .popup .popis_foto { font-size: 15px;}
}
@media only screen and (min-width: 1860px) {
    /* fixní background:  */
    html { 
        background: #000 url("../images/bcg_1860.jpg") no-repeat center center fixed;
        -webkit-background-size:    cover;
        -moz-background-size:       cover;
        -o-background-size:         cover;
        background-size:            cover; 
       }
    .index      { background: #000;}  
    nav         { font-size: 16px;}
    #wrapper    { width: 960px;}
    section, .popup h1, .nahoru { font-size: 18px;}
    .img_titul  { width: auto; height: auto;}
    .grow_image { position: relative; width: 75%;}
    .grow_div   { position: relative;}
    /* Úvodní stránka (home)) */
    #uvitani_lang1 { font-size: 19px;}
    #uvitani_lang2, #aktuality_home p, .popup { font-size: 17px;}
    footer, .popup .popis_foto { font-size: 15px;}
}
/* ========================================================================================================================================================== */