/* CSS specific to Museum in a Box layout/style, to lay over Skeleton/Normalize */

body {
	font-family: Verdana, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
}

input, textarea, button {
	font-family: monospace;
}

table {
	margin-top: 20px;
	width: 100%;
}

.object-list {
	width: 100%;
}

th, td {
	padding: 5px;
	padding-right: 20px;
	font-weight: normal;
}

p {
	font-size: 100%;
}

.mt-0 {
  margin-top: 0 !important;
}
.mb-0 {
  margin-bottom: 0 !important;
}

dt {
  font-weight: bold;
  display: block;
}
dd {
  margin-left: 0;
  margin-bottom: 0.5em;
}

@media (min-width: 750px) {
  dl.dl-inline dt {
    width: 150px;
    margin-bottom: 0.5em;
  }
  dl.dl-inline dt:before {
    content: "";
    display: block;
  }
  dl.dl-inline dt {
    display: inline-block;
    width: 40%;
  }
  dl.dl-inline dd {
    display: inline-block;
    width: 55%;
  }
}

nav {
	margin-top: 20px;
	padding-bottom: 20px;
	border-bottom: 1px dotted black;
}

nav ul {
	display: block;
}

nav li {
	float: left;
	padding-right: 20px;
	list-style: none;
}

nav .edge {
	padding-left: 20px;
	border-left: 1px black solid;
}

nav .logged-in {
	margin:0;
}

nav a {
	vertical-align: middle;
	margin: 0;
	display: inline-block;
	padding-right: 20px;
}

nav span {
	vertical-align: middle;
	margin: 0;
	display: inline-block;
}

nav a img {
	vertical-align: middle;
}

footer {
	margin-top: 40px;
	padding-top: 20px;
	margin-bottom: 50px;
	border-top: 1px dotted black;
}
footer a {
	vertical-align: middle;
	margin: 0;
	display: inline-block;
	padding-right: 20px;
}

.larger {
	font-size: larger;
}

.right {
	text-align: right;
}

.info {
	color:rgb(200,100,100);
}

.alert {
	background-color: #ffff99;
	padding: 2px;
}

.private {
	background-color: red;
	color: white;
	padding: 2px;
}

.no-bullet li {
	list-style: none;
}

.grey {
	color: #aaa;
}

.add-collection {
	padding:20px;
	background-color:#f5f5f5;
}

.boop-graph-large {
	background-color:#f5f5f5;
	padding:20px;
}

.form-space {
	margin-bottom: 20px;
	margin-top: 10px;
}

.media-files {
	margin-top: 10px;
	margin-bottom: 50px;
}

.small {
	font-size: smaller;
}

.license-list {
	margin-top: 0;
	padding:10px;
	background-color: #f3f3f3;
}

.license-list label {
	font-size: smaller;
}

.box-icon {
	width:68px; height: 44px; margin-bottom: 10px;
}

.box-icon.pink {
	background-color: #ff0099;
}

.box-icon.black {
	background-color: #000000;
}

.box-icon.yellow {
	background-color: #ffdd00;
}

.box-icon.blue {
	background-color: #0099ff;
}

.box-icon.transparent {
	background-color: white;
	border: 1px solid #999999;
}

.box-icon.plywood {
	background-image: url("../images/plywood.jpg");
	background-color: #efe3bd;
}

.yay { 
	padding: 20px; 
	font-size: larger; 
	color: white; 
	background-color: #00cc00;
}

.boo, .errorlist {
	padding: 20px; 
	font-size: larger; 
	color: white; 
	background-color: #cc0000;
}

.red {
	color: #cc0000;
}

.pagination {
	margin-top: 60px;
	margin-bottom: 60px;
	text-align: center;
}

/* FLEX COLUMNS

Skeleton's columns are old and use float, which causes some problems, so we'll
add a more modern variant to use in places.

Use like:
<div class="gridlist gridlist-6">
  <div class="gridlist-cell">Hello</div>
  <div class="gridlist-cell">Hello</div>
</div>
*/

.gridlist {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0 -10px 20px -10px;
  font-size: smaller;
}

.gridlist .gridlist-cell {
  box-sizing: border-box;
  padding: 10px;
}

.gridlist-4 .gridlist-cell,
.gridlist-6 .gridlist-cell {
  width: 50%;
}

@media (min-width: 550px) {
  .gridlist-4 .gridlist-cell,
  .gridlist-6 .gridlist-cell {
    width: 25%;
  }
}

@media (min-width: 750px) {
  .gridlist-6 .gridlist-cell {
    /* 6 columns at max width */
    width: 16.6666667%;
  }
}

/* Currently used in collectionsRow.html */
.gridlist .thumb {
	height: 150px;
	width: auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}


/* THIBAUT */

.thumb {
	background-color: #f5f5f5;
	width: 70px;
	height: 70px;
}

.center {
	text-align: center;
}

.empty {
	padding-top: 50px;
	padding-bottom: 50px;
	background-color: #afc6ff;
}
.empty:hover {
	background-color: #b2c7ff;
}

.hidden {
	display: none;
}

hr {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.greyed {
	background-color: #f9f9f9;
}

.danger {
	color: #ff6156;
}

input {
	margin-bottom: 1rem;
}

.list-header {
	padding: 1rem;
	border-bottom: 1px solid rgb(230,230,230);
}

.list {
	padding: 1rem;
	border-bottom: 1px solid rgb(230,230,230);
}

.list:hover {
	background-color: #f7f7f7;
}

div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
		border-bottom: 1px solid rgb(230,230,230);
}

.popup {
	max-height: 90vh;
	overflow:auto;
	background:white;
	position: fixed;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
	border: 1px solid black;
	width: 50%;
	padding: 0 20px;
}

.backdrop {
	position:fixed;
	width: 100%;
	height: 100%;
	opacity: 0.5;
	left:0;
	top:0;
	background-color: rgb(0,0,0);
}

body.noscroll {
	overflow: hidden;
}


/* ------------- HEADER DROPDOWN MENU */

.dropdown {
	display:inline-block;
	position: relative;
	min-width: 150px;
	/* border: 1px solid blue; */
}

.dropdown-content {
	z-index: 1;
	position: absolute;
	width: 250px;
	display: none;
	background-color: white;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-element {
	display: block;
	padding: 10px;
	padding-right: 40px;
	margin: 0;
}

.dropdown-element:hover {
	background-color: rgb(240,240,240);
}

.dropdown-separator {
	border-top: 1px solid #aaa;
	margin: 0px 5px;
}

.wip:after {
  height: 8px;
  width: 8px;
  background-color: red;
  border-radius: 50%;
  display: inline-block;
  content: "";
  position: absolute;
}

.object_image {
  max-width: 300px;
  max-height: 200px;
}

.box-icon.unknown, .box-icon.other {
	background-color: #f5f5f5;
	border: 1px dotted #ddd;
}

.ql-source {
  display: none;
}
.ql-editor {
  height: 250px !important;
}

.large-pic {
	margin-bottom: 40px;
}

.description > p {
  margin: 0;
  line-height: 1.42;
}

.description {
  margin-bottom: 25px;
}