/*following rules are taken from older style.css file:*/
    
    .Right {
        text-align: right;
    }
    
    .Zdroj {
        text-align: right;
        font-size: 11px;
        margin: 0px;
    }
    
    .odstavec {
        margin: 7px 0px 0px 0px;
    }
    
    .InputPole {
        border: #555575 1px solid;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
        padding-left: 2px;
        background: #efefef;
        color: #333353;
    }
    /*-------------------------------*/
    /*following rules are based on INTERNAL STYLE SHEETS from html pages:*/
    
    body * {
        font-family: arial, helvetica, sans-serif !important;
        font-size: 14px;
    }
    
    td {
        text-align: justify;
    }
    
    .InputStyle {
        border: #555575 1px solid;
        font-size: 11px;
        background: #efefef;
        color: #333353;
    }
    
    .MenuLink {
        font-family: arial, helvetica, sans-serif !important;
        color: #0C098C;
        text-decoration: none;
    }
    
    .MenuLink:hover {
        font-family: arial, helvetica, sans-serif !important;
        color: #0000a0;
        text-decoration: underline;
    }
    
    div {
        position: absolute;
    }
    /*-------------------------------*/
    /* NEW RULES overriding inline styles and internal style sheets:*/
    
    #ZahlaviNadpis {
        top: 30px !important;
        left: 50px !important;
    }
    
    #zahlaviNadpis span {
        font-size: 40px !important;
        color: #6A0028 !important;
        text-align: left !important;
    }
    
    #ZahlaviPopis {
        top: 30px !important;
        left: 480px !important;
        width: 250px !important;
    }
    
    #ZahlaviPopis a {
        font-size: 11px !important;
    }
    
    #ZahlaviMenu {
        top: 90px !important;
        left: 50px !important;
    }
    
    #Obsah {
        top: 130px !important;
        left: 50px !important;
        z-Index: 1 !important;
    }
    /*.Nadpis is <span> - change display to block so text-align can take effect*/
    
    .Nadpis {
        font-size: 27px !important;
        line-height: 130% !important;
        color: #6A0028 !important;
        text-align: left !important;
        display: block !important;
        margin: 0 !important;
    }
    /*do not display line break in .Nadpis to provide better look when resizing window*/
    
    .Nadpis br {
        display: none !important;
    }
    
    .PodNadpis,
    h1 {
        font-size: 19px !important;
        text-transform: uppercase !important;
        line-height: 130% !important;
        color: #6A0028 !important;
        text-align: left !important;
        margin: 25 0 0 0px !important;
    }
    
    h2 {
        font-size: 14px !important;
        font-weight: normal !important;
        text-transform: uppercase !important;
        line-height: 130% !important;
        color: #6A0028 !important;
        text-align: left !important;
        margin: 10px 0px 0px 0px !important;
    }
    
    .NadpisDatum {
        font-size: 14px !important;
        font-weight: bold !important;
        line-height: 130% !important;
        color: #6A0028 !important;
        text-align: left !important;
        margin: 15px 0px 0px 0px !important;
    }
    
    h3 {
        font-size: 12px !important;
        text-transform: uppercase !important;
        line-height: 130% !important;
        color: #6A0028 !important;
        text-align: left !important;
    }
    
    table,
    td,
    p,
    i,
    b {
        line-height: 130% !important;
        font-size: 14px !important;
    }
    /*let line with "©" stay smaller*/
    
    #Obsah p:last-of-type {
        font-size: 12px !important;
    }
    /*let empty lines be smaller*/
    
    #Obsah br {
        line-height: 100% !important;
    }
    
    a {
        color: #6A0028 !important;
        text-decoration: none !important;
    }
    
    a:hover {
        color: #6A0028 !important;
        text-decoration: underline !important;
    }
    
    a:visited {
        color: #CC0000 !important;
    }
    
    #Zahlavi {
        top: 10px !important;
        left: 0px !important;
        z-Index: 0 !important;
    }
    /*change color of already visited links for their recognition*/
    
    #ZahlaviMenu a:visited {
        color: #6A0028 !important;
    }
    /*add dots before menu items for better menu recognition*/
    
    #ZahlaviMenu a:before {
        content: "● " !important;
        color: #6A0028 !important;
    }
    /*set maximal page width*/
    
    #ZahlaviNadpis,
    #ZahlaviMenu,
    #Obsah {
        width: 750px !important;
        padding-left: 25px !important;
        padding-right: 25px !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    #ZahlaviPopis {
        position: absolute !important;
        left: 535px !important;
        font-size: 11px !important;
        color: #606080 !important;
        text-align: left !important;
    }
    
    #ZahlaviMenu table,
    #ZahlaviMenu img:first-of-type,
    #Obsah > table tr td:last-of-type table {
        width: 100% !important;
        position: relative !important;
    }
    /*-------------------------------*/
    /*NEW RULES FOR RESPONSIVE PAGE WIDTH*/
    /*author: rysavy.jindrich@seznam.cz */
    
    @media screen and (max-width: 810px) {
        #ZahlaviNadpis,
        #ZahlaviMenu,
        #Obsah {
            width: 94% !important;
            padding-left: 3% !important;
            padding-right: 3% !important;
        }
        #ZahlaviPopis {
            right: 15px !important;
            left: auto !important;
        }
        #ZahlaviMenu input[type="text"] {
            right: 0px !important;
            left: auto !important;
            position: relative !important;
        }
    }
    
    @media screen and (max-width: 700px) {
        /*put copyright info under website title*/
        #ZahlaviNadpis {
            top: 10px !important;
        }
        #ZahlaviNadpis span {
            font-size: 36px !important;
        }
        #ZahlaviPopis {
            width: 350px !important;
            top: 55px !important;
            left: 0px !important;
            padding-left: 3% !important;
        }
        #ZahlaviMenu input[type="text"] {
            top: -18px !important;
            right: 0px !important;
            position: absolute !important;
        }
        #Obsah table p {
        	margin-left: 0 !important;
        }
    }
    
    @media screen and (max-width: 600px) {
        table,
        td,
        p,
        i,
        b {
            font-size: 13px !important;
        }
    }
    
    @media screen and (max-width: 550px) {
        #Obsah {
            position: relative !important;
            z-index: 0 !important;
        }
        #ZahlaviPopis {
            width: 94% !important;
            padding-left: 3% !important;
            padding-right: 3% !important;            
        }
        /*put menu items in one column*/
        #ZahlaviMenu {
            position: relative !important;
        }
        #ZahlaviMenu td a {
            display: block !important;
            width: 100% !important;
            line-height: 130% !important;
        }
        #ZahlaviMenu input[type="text"] {
            top: 105px !important;
            left: 0px !important;
            width: 200px !important;
        }
        .Nadpis {
            font-size: 25px !important;
        }
        .PodNadpis,
        h1 {
            font-size: 17px !important;
        }
        h2 {
            font-size: 12px !important;
        }
        h3 {
            font-size: 12px !important;
        }
        #Obsah br {
            line-height: 25% !important;
        }
        #Obsah img:first-of-type {
            margin: 10px 0px 0px 0px !important;
        }
        /*put search-box before content*/
        #ZahlaviMenu {
            z-index: 1 !important;
        }
        /*following is a decent solution - both images of saints and texts about them are visible; 
        BUT "display: block" for "table" does NOT work in Chrome 
        because <!DOCTYPE HTML> in some webpages is not present - 
        therefore is this solution not used; 
        for more info see stackoverflow.com/questions/21425138/chrome-specific-css-issue-setting-table-cell-to-displayblock */
        /*
        #Obsah table,
        #Obsah thead,
        #Obsah tbody,
        #Obsah tr,
        #Obsah td,
        #Obsah th {
            display: block !important;
            position: relative !important;
            width: 100% !important;
        }
        */
        /*end of the decent solution*/
        /*following is a HACK solution, but does work in Chrome; when more images are present, only the first one is "readable" :-( */
        #Obsah table,
        #Obsah thead,
        #Obsah tbody,
        #Obsah tr,
        #Obsah th {
            position: relative !important;
            width: 100% !important;
        }
        #Obsah td {
            width: auto !important;
        }
        /*put image(s) higher (in textflow) than text */
        #Obsah>table:first-of-type>tbody:first-of-type>tr:first-of-type>td:first-of-type {
            position: absolute !important;
        }
        /*put text lower than image(s) and*/
        #Obsah>table:first-of-type>tbody:first-of-type>tr:first-of-type>td:last-of-type {
            position: absolute !important;
            /*"top" property is a hack because more than one images will interfere with text*/
            top: 260px !important;
            height: auto !important;
            /*when more images are present, text overlays second (and following) images; 
            for better readability, set text background with alpha channel - 
            images will not be "readable", but will remain "visible" 
            so user will (hopefully) know that using wider window will fully show more images. */
            background-color: rgba(255, 255, 255, 0.9) !important;
        }
        /*end of the HACK solution*/
        #Obsah * {
            max-width: 100% !important;
        }
        #Obsah table a {
        	display: block !important;
        }
    }
    
    @media screen and (max-width: 400px) {
        #ZahlaviNadpis {
            top: 6px !important;
        }
        #ZahlaviNadpis span {
            font-size: 30px !important;
        }
        #ZahlaviPopis {
            top: 45px !important;
        }
    }
    
    @media screen and (max-width: 330px) {
        #Obsah table,
        #Obsah td,
        #Obsah p,
        #Obsah i,
        #Obsah b {
            line-height: 125% !important;
            font-size: 12px !important;
        }
        #zahlaviNadpis {
            top: 10px !important;
        }
        #ZahlaviNadpis span {
            font-size: 25px !important;
        }
        .Nadpis {
            font-size: 23px !important;
        }
        .PodNadpis,
        h1 {
            font-size: 15px !important;
        }
        h2 {
            font-size: 11px !important;
        }
        h3 {
            font-size: 11px !important;
        }
    }
    
    @media screen and (max-width: 280px) {
        #ZahlaviNadpis span {
            font-size: 22px !important;
        }
        #ZahlaviPopis {
            top: 35px !important;
        }
        /*set minimal width of important sections, but let #Obsah be still responsive*/
        #ZahlaviNadpis,
        #ZahlaviPopis,
        #ZahlaviMenu,
        #ZahlaviMenu table,
        #ZahlaviMenu img:first-of-type {
            min-width: 230px !important;
        }
       
    }
    /*-------------------------------*/
    /*following rules are taken from INLINE STYLES in html pages - use in case of removing inline styles*/
    /*
table {
border: 0px;
}
*/
    /*taken from <tr><td colspan=3><img src="distance.gif" width=702 height=2 border=0 style="background:#bfbfbf"></td></tr>*/
    /*
#ZahlaviMenu img:first-of-type {
width: 702px;
height: 2px;
border: 0px;
background: #bfbfbf;
}
*/
    /*taken from <tr><td height=20><a href="index.html%3Fa=1.html">úvodní informace</a> ...*/
    /*
#ZahlaviMenu tr:last-of-type td:first-of-type {
height: 20px;
}
*/
    /*taken from <td style='text-align:right'><form method=post action="http://www.catholica.cz/index.php">*/
    /*
#ZahlaviMenu tr td:last-of-type {
text-align: right;
}
*/
    /*taken from <input type=text name=search value="VYHLEDAT ...*/
    /*
#ZahlaviMenu input[type="text"] {
width: 160px;
}

#Datum {
font-size: 10px;
width: 300px;
}
*/
    /*taken from  <td valign=top><img src="images/3513-1.jpg" alt="" border=0 style='margin:0px 15px 5px 0px;'>
*/
    /*
#Obsah > table tr td:first-of-type {
vertical-align: top;
}

#Obsah > table img:first-of-type {
border: 0px;
margin: 0px 15px 5px 0px;
}

/*taken from <table cellpadding=0 cellspacing=0 border=0 width=90%>*/
    /*
#Obsah table table:first-of-type {
border: 0px;
width: 90%;
}
*/
    /*taken from <td><i style='font-size:11px;'></i></td>*/
    /*
#Obsah table table:first-of-type i {
font-size: 11px;
}
*/
    /*taken from <td width=100% valign=top>*/
    /*
#Obsah > table > tr > td:last-of-type {
width: 100%;
vertical-align: top;
}
*/
    /*taken from <table width=500 border=0>*/
    /*
#Obsah > table tr td:last-of-type table {
width: 500px;
border: 0;
}
*/