/*--------------------------------------------------------------
!!!!! IMPORTANT NOTES !!!!!!!!!!

Breakpoints 

phones: max-width: 599px
lg phones and small tablets: max-width: 767px
tablets: max-width: 992px
laptops & desktops: min-width: 993px;

#e40707 = link colours
#cd1d1d = button background
#fa7c7c = button border
#622 = button border

*/


/*css for material types */



#audio-content, 
#button-content, 
#document-content, 
#ephemera-content, 
#film-content, 
#periodical-content, 
#photo-content, 
#poster-content {display: flex; flex-wrap: wrap; justify-content: space-between;
	width: 100%; 
	/*border: solid 1px #f00;*/
}

#audio-content p, 
#button-content p, 
#document-content p, 
#ephemera-content p, 
#film-content p, 
#periodical-content p,
#photo-content p, 
#poster-content p	{display: block; width: 100%; padding: 0; margin: 1em 0;}

#audio-content p:first-of-type, 
#button-content p:first-of-type, 
#document-content p:first-of-type, 
#ephemera-content p:first-of-type, 
#film-content p:first-of-type, 
#periodical-content p:first-of-type,
#photo-content p:first-of-type, 
#poster-content p:first-of-type {
  margin: 0 !important;
}


#audio-content ul, 
#button-content ul, 
#document-content ul, 
#ephemera-content ul, 
#film-content ul, 
#periodical-content ul,
#photo-content ul, 
#poster-content ul	{display: block; padding: 0; margin: 0;}

#audio-content .entry-content,
#button-content .entry-content, 
#document-content .entry-content, 
#ephemera-content .entry-content, 
#film-content .entry-content, 
#periodical-content .entry-content, 
#photo-content .entry-content, 
#poster-content .entry-content	{padding: 0; margin: 0;
	/*border: solid 1px #f00;*/
}


#audio-info, 
#button-info, 
#document-info, 
#ephemera-info, 

#periodical-info, 
#photo-info, 
#poster-info {justify-content: flex-start; display: flex;  flex-wrap: wrap; width: 50%; padding: 0 2% 2% 2%; min-width: 450px;
 	/*border: solid 1px #f00;*/
}


#audio-thumbnail, 
#button-thumbnail, 
#document-thumbnail, 
#ephemera-thumbnail, 
#film-thumbnail, 
#periodical-thumbnail, 
#photo-thumbnail, 
#poster-thumbnail {display: flex; width: 50%; flex-wrap: wrap; padding: 0 2%; align-items: flex-start;
	/*border: solid 1px #f00;*/
}

#audio-thumbnail a img, 
#button-thumbnail a img, 
#document-thumbnail a img, 
#ephemera-thumbnail a img, 
#film-thumbnail a img, 
#periodical-thumbnail a img, 
#photo-thumbnail a img, 
#poster-thumbnail a img {border: solid 1px #dedede;
	/*border: solid 1px #f00;*/
}

#audio-meta, 
#button-meta, 
#document-meta, 
#ephemera-meta, 
#periodical-meta, 
#photo-meta, 
#poster-meta{ padding: 0%; min-width: 200px; 
	font-size: .8em; margin: 0; align-content: flex-end;
	/*border: solid 1px #f0f;*/
}

h3.metadata {background-color: #ccc; padding: 1em; margin: 0;}
.meta {border: solid 1px #ccc; padding: 1em;}
#metadataArea {width: 100%; margin: 4% 0 0 0; }


/* ----- the film page layout is different because it has embedded films from other sites, not stuff from the media library --- */


#film-info {justify-content: flex-start; display: flex; min-width: 640px; flex-wrap: wrap; width: 65%; padding: 0 2% 2% 2%; 
	/*border: solid 1px #f00;*/}
	#film-info p {width: 100%; padding: 1em 0;}

#film-meta { width: 35%; padding: 0%; min-width: 200px; 
	font-size: .8em; margin: 0;
	/*border: solid 1px #f0f;*/
}


/* periodical pages styles */

.periodical-info p, .periodical-info ul {display:block; clear: all; }