/* Artwork app */


body {
    font-family: 'Roboto', sans-serif; /* loaded in base.html */
    font-size:  11px;
    font-weight: 500;
    justify-content: center;
    max-width:1300px;
    margin: 75 100px 30px 100px;
}

a {
    color:#333;
    text-decoration:none;
}

/* Page menu */

#page_menu {
    text-align: center;
    vertical-align: baseline;
}

.page_menu_item {
    font-size: 16.5px; 
    font-weight: 500; /* loaded are 300, 400, and 500 */
    margin-right: 10px;
    text-transform: uppercase;
    color: hsl(0, 0%, 70%);
    text-decoration: none;
}

.page_menu_title {
    font-size: 16.5px;
    font-weight: 500; /* loaded are 300, 400, and 500 */
    margin-right: 16px;
    text-transform: uppercase;
    color: hsl(0, 0%, 25%);
    text-decoration: none;
}

/* Content block */

#content_block {
    padding-top: 54px;
    /* width: 1400px;*/ /* this will prevent columns from scaling, if that's desired */
}


/* Thumbnail page */

 .thumbnail_container_row_small {
    position:absolute; 
    top:84px; bottom:59px;
    left:0px; right:0px; 
    padding: 48px;
    overflow-y:auto;     
    display: grid;
    grid-template-columns: repeat(auto-fill, 140px);
    grid-gap: 1rem;
    align-content: flex-start;
    text-align: center;
 }

 .thumbnail_container_row_medium {
    padding: 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 32px;
    column-gap: 48px;
    text-align: center;
    width: 1300px;
}

 .thumbnail_container_row_large {
    padding: 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 32px;
    column-gap: 48px;
    text-align: center;
    width: 1700px;
}

/* Small thumbnails get a left-right layout rather than columns */
 .thumbnail_container_column_small {
    display: grid;
    grid-template-columns: repeat(auto-fill, 140px);
    div {
        margin: 0 1.5rem 0.5rem 0;
        width: 100%;
        &:hover img {
            cursor: zoom-in;
        }
        img {
            width: 120px; /* keep this the same as the image size */
            loading:lazy;
        }
    }
}
/* Medium thumbnails get a left-right layout rather than columns */
 .thumbnail_container_column_medium {
    display: grid;
    grid-template-columns: repeat(auto-fill, 300px);

    div {
        margin: 0 1.5rem 2.0rem 0;
        width: 100%;
        &:hover img {
            cursor: zoom-in;
        }
        img {
            loading:lazy;
        }
    }
}

 .thumbnail_container_column_large {
    justify-content: center;
    columns: 3 420px;
    min-width: 1400px;

    div {
        margin: 0 1.0rem 2.0rem 0;
        width: 100%;
        &:hover img {
            cursor: zoom-in;
        }
        img {
            width: 420px; /* keep this the same as the image size */
            loading:lazy;
        }
    }
}

 .thumbnail_container_small {
    display: grid;
    row-gap: 36px;
    column-gap: 11px;
    grid-template-columns: auto auto auto auto auto auto auto auto;
}

 .thumbnail_container_medium {
    justify-content: center;
    columns: 4 250px;
    column-gap: 40px;

    div {
        margin: 0 1.5rem 2.5rem 0;
        width: 100%;
        &:hover img {
            cursor: zoom-in;
        }
        img {
            width: 300px; /* keep this the same as the image size */
            loading:lazy;
      }
    }
 }

.thumbnail_container_large {
    justify-content: center;
    columns: 3 350px;
    column-gap: 40px;
    div {
        margin: 24px; 1.5rem 1.5rem 0;
        width: 100%;
        &:hover img {
            cursor: zoom-in;
        }
        img {
            width: 420px; /* keep this the same as the image size */
            loading:lazy;
      }
    }
 }

.thumbnail_text {
    font-size: 12px;
    color:#888;
    font-style: italic;
}

.tooltip a {
    color:#777;
}

.tooltip {
  position: relative;
  display: inline-block;
  text-align: center;
}

.tooltiptext {
  visibility: hidden;
  background-color: white;
  border-radius: 3px;
  border: 1px solid #BBB;
  color: #777;main_
  text-align: left;
  padding: 5px 8px 4px 8px;
  font-size:11px;
  position: absolute;
  left: 40px; top: 30px;
  width: 100px;
  z-index: 1;
  box-shadow: 2px 2px 6px rgba(128,128,128,0.3);
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

/* Detail page */

.detail_image {
}

.detail_caption  {
    display: flex;
    justify-content: center;
    font-weight: 400;
    font-size: 14px;
    color: hsl(0 0% 65%);
    padding-top: 24px;
    margin-bottom: 36px;
}

.detail_caption_resize_icons {
    margin: 0 8px 0 8px;
}

/* Exhibitions page */

.exhibition_columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0;
}

.exhibition_list {
    line-height: 12px;
    font-size: 11pt;
    font-weight: 600;
    color: #787878;
}

.exhibition_list a {
    color: #787878;
}

/* CV page */

.cv_list {
    font-size: 10pt;
    color: #222;
    padding-bottom: 4px;
}

.cv_list_head {
    font-size: 11pt;
    font-weight: 600;
    color: #787878;
    padding-bottom: 12px;
}

/* Contact page */

.contact_text{
    font-size: 14px;
    color:  #444;
    margin-bottom: -11px;
    padding-left:  146px;
}

.contact_text a {
    color:  #008;
}

/* Misc */

.debug_notice {
    background-color: orange; 
    color: white; 
    width: 90px; 
    border-radius: 4px; 
    padding: 2px 6px 2px 6px; 
    text-align:center; 
    margin-right: 10px;
    font-size: 14px; 

}