/* Display Album Picture, orig from top picts, but modified */
div.album_pict_display_container {
    margin-left: auto;
    margin-right: auto;
    margin-top: 6px;
    margin-bottom: 6px;
}
div.album_pict_img_container {
    text-align: center;
    width: 100%;
    line-height: 0px; /* putting extra space below other content? */
}
img.album_pict_full_pict {
    max-width: 1000px;
    max-height: 800px;
    height: auto;
    vertical-align: top;
    line-height: 0px; /* maintaining display: inline; with out the space on bottom for text, not working? */
}
span.album_pict_full_arrows_container {
    position: relative;
    display: inline-block;
}
span.album_pict_full_arrows {
    opacity: 0.0;
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 10%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 10;
}
span.album_pict_full_arrows_container:hover span.album_pict_full_arrows {
    opacity: 1.0;
}
span.show_arrows span.album_pict_full_arrows {
    opacity: 1.0;
}
div.album_name {
    text-align: center;
    font-size: 200%;
    margin-bottom: 4px;
}
div.album_pict_caption {
    margin-left: auto;
    margin-right: auto;
    padding: 0px 1em;
    clear: both;
}
div.album_pict_count {
    float: left;
    text-align: left;
    color: grey;
    padding: 0em 1em;
}
div.album_pict_date {
    float: right;
    text-align: right;
    color: grey;
    padding: 0em 1em;
}
div.album_pict_photographer {
    /* appears on same line as proceding floated divs */
    text-align: center;
    color: grey;
}
div.album_pict_all_albums {
    float: left;
    text-align: left;
    color: grey;
    padding: 0em 1em;
}
div.album_pict_reprints {
    float: right;
    text-align: right;
    color: grey;
    padding: 0em 1em;
}
div.album_pict_all_albums a:link,
div.album_pict_all_albums a:visited,
div.album_pict_reprints a:link,
div.album_pict_reprints a:visited {
    color: grey;
}
@media screen and (max-width: 800px) {
div.album_pict_photographer {
    clear: both;
}
}

div.album_pict_display_other_links {
    max-width: 1000px;
    height: 170px; /* overridden by padding-bottom for window < 1000px */
    margin-left: auto;
    margin-right: auto;
    background-color: #CCC;
    border-radius: 8px;
    position: relative;
    /*padding-bottom: 17%; /*set this for window < 1000px. This in conjunction with div.album_pict_ratio holds this other links div/rectangle at a constant aspect ratio */
}
div.album_pict_ratio {
    position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
}
div.album_pict_other_link {
    display: inline-block;
    box-sizing: border-box;
    padding: 0px 1px;
    width: 17.2%;
    height: 100%;
    position: relative;
    vertical-align: top;
    text-align: center;
}
div.pict_nav_highlight {
    border: 4px solid #ead94e;
}
div.background_image {
    background-repeat: no-repeat;
    /*background-attachment: fixed;*/
    background-position: center;
    background-size: 100%;
    
    height:100%;
}
div.album_pict_arrow {
    display: inline-block;
    width: 7%;
    height: 100%;
    position: relative; /* for centering */
    /*vertical-align: center; /* does not work*/
}
div.album_pict_arrow img { /* is this still used? */
    width: 100%;
    height: 100%;
    /* for centering */
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;
    margin: auto;

}
input.album_pict_other_arrow {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: none;
    cursor: pointer;
    padding: 0px; /* default inputs have lots of padding */
    margin: 0px; /* undoing what set for consistenty */
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 8px; /* should not have to reset this, but do */
    background-color: #CCC; /* user agent style sheet sets this (input?) to silver */
}

@media screen and (max-width:1120px) { /* changed to below for album 5958 with 800px picts */
img.album_pict_full_pict {
    max-width: 100%; /* makes below redundant */
}
}
@media screen and (max-width:1000px) {
img.album_pict_full_pict {
    /*width: 100%; causes portraite img to stretch horz */
    max-width: 100%;
    /*max-height: 1000px;*/
}
div.album_pict_display_other_links {
    height: auto;
    padding-bottom: 17%; /* This in conjunction with div.album_pict_ratio holds this other links div/rectangle at a constant aspect ratio */
}
}

img.resale_ad {
    display: block;
    max-width: 350px;
    margin: 6px auto 0px auto;
}

/* Display Album, orig for its own page, but may abandon that view */
#album_display_container {
    margin-top: 4px;
}

div.album_pict_grid {
    width: 24%;
    /*border: 1px solid grey;*/
    float: left;
    height: 120px;
    padding: 2px;
    text-align: center;
}
img.album_pict_grid {
    max-height: 100px;
    max-width: 100px;
}
div.album_date {
    text-align: center;
    font-size: 150%;
}
div.album_description {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4px;
    margin-bottom: 4px;
    padding: 0px 1em;
}

@media screen and (max-width:600px) {
div.album_pict_grid {
    width: 32%;
}
img.resale_ad {
    display: block;
    max-width: 80%;
    margin: 6px auto 0px auto;
}
}
@media screen and (max-width:490px) { /* unsure if it gets this narrow */
div.album_pict_grid {
    width: 48%;
}
}

/* Search Form */
#album_search_container {
    margin-top: 4px;
}
#album_search_items {
    float: left;
    width: 40%;
}
#album_search_container div.album_search_items_div {
    float: left;
}
#album_search_container div.album_search_label {
    color: #444444;
}
#album_search_or {
    float: left;
    width: 19%;
    height: 100%;
    text-align: center;
}
#album_search_text {
    float: left;
    width: 40%;
}

@media screen and (max-width:930px) {
#album_search_items, #album_search_or, #album_search_text {
    float: none;
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}
}

#search_other_pages {
    margin-top: 4px;
}

/* Search Results */
#search_results {
    margin-top: 4px;
}
div.search_result {
    width: 24%;
    /*border: 1px solid grey;*/
    float: left;
    height: 120px;
    padding: 2px;
}
div.search_result_date {
    color: gray;
    text-align: center;
}
div.search_result_text {
    float: right;
    width: 50%;
    
}
div.search_result_img {
    float: left;
    width: 100px;
    text-align: center;
}
img.search_result_img {
    max-height: 100px;
    max-width: 100px;
}

@media screen and (max-width:830px) {
div.search_result {
    width: 32%;
}
}
@media screen and (max-width:625px) {
div.search_result {
    width: 49%;
}
}
@media screen and (max-width:412px) {
div.search_result {
    width: 100%;
}
}

/* more albums displayed at end of an album */
div.more_album_display_container {
    margin-left: auto;
    margin-right: auto;
    margin-top: 6px;
    margin-bottom: 6px;
    text-align: center;
}
div.more_album_content_container {
    width: 600px; /* inside the span, so takes contents width, use this as driver for all other content */
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
div.more_album_title {
    font-size: 150%;
    margin-bottom: 6px;
}
div.more_album {
    float: left;
    position: relative;
    
    height: 0px;
    width: 50%;
    padding-bottom: 50%;
    overflow: hidden;
}
div.more_album_text {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 75%;
    background-color: rgba(255,255,255,0.5);
    font-size: 130%;
    padding: 4px;
    
    margin-bottom: 1px;
    margin-right: 1px;
    
    text-shadow:
                -1px 0px rgba(255, 255, 255, 0.5),
                0px -1px rgba(255, 255, 255, 0.5),
                1px 0px rgba(255, 255, 255, 0.5),
                0px 1px rgba(255, 255, 255, 0.5);
}
div.more_album_text a:link, a:visited {
    color: black;
    text-decoration: none;
}
div.more_album_img {
    position: absolute;
    top: 0px;
    bottom: 6px;
    left: 0px;
    right: 6px;
    
    border-right: 1px solid grey;
    border-bottom: 1px solid grey;
}
img.more_album_img {
    max-width: 100%;
    max-height: 100%;
    
    /* this might be being appled by the dragging js automatically, but these items are ontop of that element and get moved. But still able to drag the link. */
    user-select: none;
    user-drag: none;
    
    -webkit-user-select: none;
    -webkit-user-drag: none;
    
    -moz-user-select: none;
    -moz-user-drag: none;
    
    -ms-user-select: none;
    -ms-user-drag: none;
}
@media screen and (max-width: 800px) {
div.more_album_content_container {
    width: 100%;
}
div.more_album_display_container span.album_pict_full_arrows_container {
    width: 100%;
    /* I can not begin to explain why this is needed, but with out it, the content goes to 300px wide. */
}
}
@media screen and (max-width: 450px) {
div.more_album {
    width: 100%;
}
}