/**
 * Default theme for the backend of md:cms:
 * Styles for data embedded from museum-digital.
 */

/**********
 * Objects in search results.
 */

.searchGrid {  }
.searchGrid .objTile     { margin-bottom: 1em; vertical-align: top; }
.searchGrid .objTile img { max-height: 180px; }

/******
 * Pagination bars
 */

.paginationBar         { margin: 0 0 2em 0; background: #F2F2F2; border: 1px solid #D6D6D6; text-align: center; }
.paginationBar a       { display: inline-block; padding: .3em .8em; transition: background .4s, color .4s; }
.paginationBar a.current:hover,
.paginationBar a:hover { background: #646464; color: #FFF; }
.paginationBar a.current,
a.navicurrent          { background: #D6D6D6; }

/**********
 * Simple tiles for displaying an object.
 * This class also builds the base for other tiles.
 */

div.objTile       { display: inline-block; width: 200px; border: 1px solid #D6D6D6;
                    vertical-align: top; text-align: center;
                    transition: background .4s, box-shadow .4s; }
div.objTile > div { position: relative; padding: .5em .5em 1.5em .5em; }
div.objTile h4    { margin: 0; padding: 0 .5em; text-align: center; }
div.objTile img   { max-width: 198px; }
div.objTile:hover { background: #F2F2F2; box-shadow: 1px 1px 3px #D6D6D6, -1px -1px 3px #D6D6D6; }

div.objTile > div > div     { color: #888; font-size: .8em; }
div.objTile > div > div > a { position: absolute; top: 100%; left: -1px;
                              display: none; max-width: 50%; padding: .3em;
                              background: #FFF; text-align: left; border: 1px solid #D6D6D6;
                              transition: background .4s, color .4s; }

div.objTile:hover > div > div > a      { display: block; animation: fade-in .4s; }
div.objTile > div > div > a:last-child { left: initial; right: -1px; text-align: right; }
div.objTile > div > div > a:hover      { background: #EEE; color: #212121; }

/**********
 * Object details.
 */

div.objDetails {  }
div.objDetails dt          { font-weight: bold; margin-top: .5em; }
div.objDetails dd          { margin-left: 0; padding-left: 0; }
div.objDetails .objMainImg { max-width: 200px; margin: .5em 1em 1em 0; float: left;
                             border: 1px solid #D6D6D6; transition: max-width .4s; }
div.objDetails .objMainImg:hover { max-width: 100vw; max-height: 80vh; float: initial; }

.metadataLine        { margin-top: 2.5em; color: #666; border-top: 1px solid #D6D6D6; }
.metadataLine > span { margin-right: 2em; font-size: .95em; font-style: italic; }

/**********
 * Collection tiles.
 */

.objTile.collectionTile { text-align: left; }
.objTile.collectionTile h4 { padding: 0 0; }
/*****
 * Events on object detail page.
 */

.events       { display: block; max-width: 100%; width: auto; margin: 0 0 1em 0; }
.events > *   { display: inline-block; margin: 0 1em 1em 0; padding: 0 1em; border: 1px solid #D6D6D6;
                vertical-align: top; transition: box-shadow .4s; }
.events h5    { margin: 0; padding: .5em 1em; font-size: .9em; background: #F2F2F2; color: #646464; }
.events tr *  { padding: .1em .5em; vertical-align: middle; font-size: .95em; }
.events th    { font-weight: normal; color: #646464; }
.events table { margin: .5em 0; }

.events > *:hover    { box-shadow: 1px 1px 3px #D6D6D6, -1px -1px 3px #D6D6D6; }
.events tr:hover { background: initial; }