/* Tables */
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
table {
    max-width: 100%;
    width: 100%;
    table-layout: fixed;
}
table img {
    max-width: 100%;
}

/* Default page */
#page-liner {
    background: rgb( 255, 255, 255 );
    margin: auto auto auto auto; /* [top, right, bottom, left]. add [10px auto 10px auto] to add gap above and below website. */
    max-width: 1200px;
    box-shadow: 0px 0px 2px #5b5b5b;
}

/* Body */
body {
    font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 18px;
    line-height: 1.15; /* automatic; will be fontsize * thisvalue */
    font-weight: 300;
}
b,strong {
    font-weight: bold;
}

/* Links -------------------------------------------------------------- */
a,a:hover,a:active,a:focus {
    color: rgb( 13, 61, 155 );
    color: rgba( 18, 90, 222, 1 ); /* <<<<<< COLOUR OF LINKS (was 13, 61, 155) */
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
    /* color: rgb( 190, 110, 0 ); <<<<<< COLOUR OF LINKS HOVER */
}
a:active,a:focus {
    background: rgb( 235, 235, 235 );
    background: rgba( 50, 50, 50, .1 );
}

/* Grids (books) -------------------------------------------------------------- */
.grid-container-5cols {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 4 columns */
    gap: 10px;
    width: 100%;
}

.grid-container-4cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns */
    gap: 10px;
    width: 100%;
}

.grid-container-3cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 4 columns */
    gap: 10px;
    width: 100%;
}

.grid-container-2cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 4 columns */
    gap: 10px;
    width: 100%;
}

.grid-item {
    background-color: white;
    text-align: left;
}

.grid-item-with-border { /* This border will include the text */
    background-color: white;
    border: 1px solid #ddd;
    text-align: left;
}

.grid-item img {
    width: 100%;
    height: auto;
    display: block;
    padding: 0px;
}

.grid-item .caption {
    padding: 5px 0 5px 0;  /* top, right, bottom, left */
}

.grid-item .caption-ar {
    padding: 5px 0 5px 0;
    text-align: right;
    direction: rtl;
}

/* Text Dividers */
.text_divider {
    display: block; /*display: block makes the image act like its own line*/
    margin: 0px auto; /*margin: auto horizontally centers it*/
    max-width: 90px; /* You can adjust margin-top / margin-bottom for spacing */
}