body 
{
}

/* https://www.w3schools.com/howto/howto_css_navbar_image.asp */

.ia-img {
    /* The image used */
    background-image: url('../../images/IaBlueBanner.jpg');
    min-height: 380px;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* Needed to position the navbar */
    position: relative;
}

/* Position the navbar container inside the image */
.sa-container {
    position: absolute;
    margin-top: 90px;
    margin-left: 50px;
    width: auto;
}

/* The navbar */
.topnav {
    overflow: hidden;
    background-color: #333;
}

    /* Navbar links */
    .topnav a {
        float: left;
        color: #f2f2f2;
        text-align: center;
        padding: 4px 25px;
        text-decoration: none;
        font-size: 12px;
    }

    .topnav a:hover {
       background-color: #ddd;
       color: black;
    }

div.SurahSearch {
    background-color: #0181FF;
    color: #E0E0E0;
    text-align: center;
}

div.cl-R {
    text-align: right;
    font-size: 150%;
    color: green;
    padding: 2px;
}

div.donate-container {
    align-content: center;
    clear: both;
    border-block: double;
}

div.donate-child {
    margin: auto;
    width: 55%;
    border: 3px solid blue;
    padding: 10px;
    align-content: center;
    border-block: double;
    background-color: lightgray;
}



div.audioAyah {
    text-align: center;
}

div.cl0 {
    text-align: left;
    font-size: 100%;
    color: black;
    padding: 2px;
}

fieldset.cat0 {
    text-align: left;
    font-size: 100%;
    color: black;
    background-color: #E6FFFF;
}

div.cl1-a {
    text-align: right;
    font-size: 150%;
    color: green;
    padding: 2px;
}
fieldset.cat1-a {
    text-align: right;
    font-size: 150%;
    color: black;
    background-color: #FFFFFF;
}
div.cl1 {
    text-align: left;
    font-size: 100%;
    color: green;
    padding: 2px;
}

fieldset.cat1 {
    text-align: left;
    font-size: 100%;
    color: black;
    background-color: #FFFFFF;
}
fieldset.cat1-a {
    text-align: right;
    font-size: 100%;
    color: black;
    background-color: #FFFFFF;
}

div.cl2 {
    text-align: left;
    font-size: 100%;
    color: black;
    background-color: #E4FFE1;
    padding: 2px;
}
fieldset.cat2 {
    text-align: left;
    font-size: 100%;
    color: black;
    background-color: #E4FFE1;
        
}
div.cl3 {
    text-align: left;
    font-size: 100%;
    color: black;
    background-color: #FEFFE1;
    padding: 2px;
}
fieldset.cat3 {
    text-align: left;
    font-size: 100%;
    color: black;
    background-color: #FEFFE1;
}

div.cl4 {
    text-align: left;
    font-size: 100%;
    color: black;
    background-color: #FFE8E6;
    padding: 2px;
}
fieldset.cat4 {
    text-align: left;
    font-size: 100%;
    color: black;
    background-color: #FFE8E6;
}

div.cl5 {
    text-align: left;
    font-size: 100%;
    color: black;
    background-color: #E6FFFF;
    padding: 2px;
}
fieldset.cat5 {
    text-align: left;
    font-size: 100%;
    color: black;
    background-color: #E6FFFF;
}

div.cl6 {
    text-align: left;
    font-size: 100%;
    color: black;
    background-color: gray;
    padding: 2px;
}
fieldset.cat6 {
    text-align: left;
    font-size: 100%;
    color: black;
    background-color: gray;
}

div.eng1 {
    text-align: left;
    font-size: 100%;
    color: green;
    padding: 20px;
}

legend.ayah {
    border:thin;
    background-color: white;
    color: black;
    background: white;
    font: 12px Verdana, sans-serif;
    text-align: left;
}

/* The other navbar */
.ayahNav {
    overflow: hidden;
    background-color: #FFFFFF;
}

    /* Navbar links */
    .ayahNav a {
        float: left;
        color: #222222;
        text-align: center;
        padding: 4px 25px;
        text-decoration: none;
        font-size: 12px;
    }

        .ayahNav a:hover {
            background-color: #EEEEEE;
            color: black;
        }

div.stcl1 {
    background-color: #FFFFFF;
    border-color: lightgray;
    border-style: solid;
    text-align: right;
    font-size: 100%;
    color: green;
    padding: 2px;
}
div.stcl1-a {
    background-color: #FFFFFF;
    border-color: lightgray;
    border-style: solid;
    text-align: right;
    font-size: 150%;
    color: green;
    padding: 2px;
}

div.stcl2 {
    border-color: lightgray;
    border-style: solid;
    text-align: left;
    font-size: 100%;
    color: black;
    background-color: #E4FFE1;
    padding: 2px;
}
div.stcl3 {
    border-color: lightgray;
    border-style: solid;
    text-align: left;
    font-size: 100%;
    color: black;
    background-color: #FEFFE1;
    padding: 2px;
}
div.stcl4 {
    border-color: lightgray;
    border-style: solid;
    text-align: left;
    font-size: 100%;
    color: black;
    background-color: #FFE8E6;
    padding: 2px;
}
div.stcl5 {
    border-color: lightgray;
    border-style: solid;
    text-align: left;
    font-size: 100%;
    color: black;
    background-color: #E6FFFF;
    padding: 2px;
}
div.stcl6 {
    border-color: lightgray;
    border-style: solid;
    text-align: left;
    font-size: 100%;
    color: black;
    background-color: gray;
    padding: 2px;
}