/*
 * Common classes
 *
 */
.hide { display: none; }
.grid > [class*="-columns"] { float: left; margin-right: 32px; }
.grid > div.two-columns { width: 45%; }
.grid:after { content: " "; display: table; clear: both; }


/*
 * General spacing
 *
 */
body { padding: 0; margin: 0; }
section { margin: 1em; }
section:not(:last-of-type) { border-bottom: 1px solid #333; }

header {
  font-family: "sans-serif";
  font-size: 14px;
  text-align: center;
  padding: 2em;
  background: #eee;
  box-shadow: 0 0 4px 0 #222;
}

header div:not(:last-of-type) { padding-bottom: 8px; } 
header a { color: blue; }

/*
 * Main section (search results, "console")
 *
 */
#main { height: 250px; }

#results, #messages { padding: 0 6px 0 16px; max-height: 230px; overflow-y: auto; }

/* Search results */
#results { padding: 0 12px; }
#results > p { margin-top: 0px; }
.search-matched { font-weight: bold; }
.search-result { padding: 3px 10px; }
.result-sub { color: gray; }
.result-sub .keyword { color: #333; }

/* Action notifications */
#messages > div { margin-bottom: 4px; }
#messages > div:first-of-type:before {
  content: ">";
  display: inline-block;
  position: relative;
  width: 0;
  left: -16px;
}
#messages .time { color: green; }

/* selecting backend/data */
#setup div { margin: 1em 1em 1em 0; } 
#setup div label {
  display: inline-block;
  width: 150px;
  text-align: right;
  padding-right: 10px;
}

#backend > div { display: inline-block; margin: 0; }
#selected-backend { font-weight: bold; }


/*
 * File drop target
 *
 */
#filedrop {
  margin-top: 1em;
  padding: 12px;
  height: 75px;
  border: 2px solid #aaa;
  border-radius: 12px;
  text-align: center;
}
#filedrop::after {
  content: 'Drop your own .json file to test with here.\aRequired format: {"items": [{"name": "x", "foo": "bar", ... }, ... ]}';
  white-space: pre;
  line-height: 24px;
  position: relative;
  top: 15%;
}
#filedrop.drop-active {
  background: yellowgreen;
  padding: 14px;
  border: none;
}


#d3-opts {
    margin-bottom: 2em;
}