/* ------------------------------------------------------------ */
/* top                                                          */
/*     top_left                     top_right                   */
/*         logo                         menu_navigator_top      */
/*                                      menu_navigator_bottom   */
/* ------------------------------------------------------------ */
.top {
    grid-area: top-row;
    background-color: white;
    display: grid;
    grid-template-columns: auto auto;
}

    .top_left,
    .top_right {
        background: url("/interface/top/fondo.gif");
    }

        .logo {
            text-align: left;
            padding-left: 3px;
        }

        .menu_navigator_top,
        .menu_navigator_bottom {
            text-align: right;
            padding-right: 3px;
        }

        .menu_navigator_top {
            font-family: arial, serif;
            font-size: 8pt;
            font-weight:bold
        }

        .menu_navigator_top a {
            color: #666666;
            text-decoration: none;
        }

        .menu_navigator_top a:hover {
            text-decoration: underline;
        }
/* ------------------------------------------------------------ */


/* ------------------------------------------------------------ */
/* bottom                                                       */
/*     footer                                                   */
/* ------------------------------------------------------------ */
.bottom {
    grid-area: bottom-row;
    background-color: white;
}

    .footer {
        font-family: arial, serif;
        font-size: 8pt;
        font-weight:bold;
        color: #666666;
        padding: 10px 3px 50px;
        text-align: center;
    }

    .footer a {
        color: #666666;
        text-decoration: none;
    }
/* ------------------------------------------------------------ */


.middle {
    grid-area: middle-row;
    background-color: white;
    display: grid;
    grid-template-columns: 140px 660px;
}

.middle-left {
    background-color: white;
}

.middle-right {
    background-color: white;
}


.pagination {
    display: grid;
    grid-template-columns: 50% 50%;

    padding-left:20px;'
    padding-bottom: 10px;
    background-color: #F7F7F7;

    text-decoration: none;
    font-family: Arial, sans-serif;
    font-size: 8pt;
    color: #333399;
}

.pagination a {
    text-decoration: none;
    font-family: Arial, sans-serif;
    font-size: 8pt;
    color: #333399;
}

.pagination a:visited {
    color: #004499;
}

.pagination a:hover,
.pagination a:active {
    color: #0066cc;
}

.pagination a:hover {
    text-decoration: underline;
}

.pagination_left {
    text-align: left;
}

.pagination_right {
    text-align: right;
}

.layout-container {
    display: grid;
    grid-template-columns: 200px 600px;
    grid-template-rows: auto auto auto;

    grid-template-areas:
    "top-row top-row"
    "middle-row middle-row"
    "bottom-row bottom-row";

    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

/*.box {
    text-align: center;
    border: 1px solid #999;
}*/

.points {
    text-align: center;
    padding: 3px;

    font-family: arial, serif;
    font-size: 8pt;
    font-weight:bold;
    color: #666666;
}

.points a {
    color: #666666;
    text-decoration: none;
}

.points_ads {
    text-align: center;
    padding-top: 4px;
}

.announcements {
    text-align: left;
    color: #004499;
    font-family: Arial, sans-serif;
    font-size: 9pt;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
}


/* -------------------------------------------- */
/* grid_container_diagrams                      */
/*     diagram    diagram    diagram    diagram */
/* -------------------------------------------- */
.grid_container_diagrams {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
}
/* -------------------------------------------- */


/* -------------------------------------------- */
/* diagram                                      */
/*     diagram_image                            */
/*     diagram_data_and_links                   */
/*         diagram_data                         */
/*         diagram_links                        */
/* -------------------------------------------- */
.diagram {
    padding-bottom: 10px;
}

    .diagram_image {
        text-align: center;
    }

    .diagram_data_and_links {
        text-decoration: none;
        font-family: Arial, sans-serif;
        font-size: 8pt;
        color: #333399;
        text-align: center;
    }

        .diagram_data {
        }

        .diagram_links {
        }
/* -------------------------------------------- */



/* -------------------------------------------- */
/* categories.                                  */
/*     categories_light                         */
/*     categories_dark                          */
/* -------------------------------------------- */
.categories {
    background-color: white;
    text-align: left;
    color: #666666;
    border: #E6E6E6 1px solid;
}

    .categories a {
        text-decoration: none;
        font-family: Arial, sans-serif;
        font-size: 8pt;
        color: #333399;
    }

    .categories a:visited {
        color: #004499;
    }

    .categories a:hover,
    .categories a:active {
        color: #0066cc;
    }

    .categories a:hover {
        text-decoration: underline;
    }

    .categories_light,
    .categories_dark {
        padding: 3px;
    }

    .categories_light {
        background-color: #FFFFFF;
    }

    .categories_dark {
        background-color: #F7F7F7;
    }
/* -------------------------------------------- */


/* -------------------------------------------- */
/* subcategories_and_sample                     */
/*     subcategories                            */
/*         subcategories_message                */
/*         subcategories_link_and_icons_dark or */
/*         subcategories_link_and_icons_light   */
/*             subcategories_link               */
/*             subcategories_icons              */
/*     subcategories_sample                     */
/* -------------------------------------------- */
.subcategories_and_sample {
    display: grid;
    grid-template-columns: 70% 30%;
}

    .subcategories {
        text-align: left;
        padding-left: 10px;
    }

        .subcategories_message {
            text-decoration: none;
            font-family: Arial, sans-serif;
            font-size: 8pt;
            color: #333399;

            padding-top: 20px;
            padding-bottom: 10px;
        }

        .subcategories_link_and_icons_dark {
            display: grid;
            grid-template-columns: 70% 30%;

            background-color: #F7F7F7;
        }

        .subcategories_link_and_icons_light {
            display: grid;
            grid-template-columns: 70% 30%;

            background-color: #FFFFFF;
        }

            .subcategories_link {
                padding: 3px;
            }

                .subcategories_link a {
                    text-decoration: none;
                    font-family: Arial, sans-serif;
                    font-size: 8pt;
                    color: #333399;
                }

                .subcategories_link a:visited {
                    color: #004499;
                }

                .subcategories_link a:hover,
                .subcategories_link a:active {
                    color: #0066cc;
                }

                .subcategories_link a:hover {
                    text-decoration: underline;
                }

            .subcategories_icons {
            }

    .subcategories_sample {
        padding-top: 50px;
    }
/* -------------------------------------------- */