--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/style.js	Wed Nov 17 16:42:59 2021 -0800
@@ -0,0 +1,159 @@
+import { css } from 'lit';
+
+export function addFontToRootPage() {
+  const content = `
+  @font-face {
+    font-family: 'Allerta';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/allerta/v11/TwMO-IAHRlkbx940YnYXTQ.ttf) format('truetype');
+  }`;
+
+  if (!document.getElementById('allerta-style')) {
+    var head = document.head || document.getElementsByTagName('head')[0],
+      style = document.createElement('style');
+    style.id = 'allerta-style';
+    style.type = 'text/css';
+    style.innerText = content;
+    head.appendChild(style);
+  }
+}
+
+
+export const style = css`
+:host {
+  display: flex;
+  flex-direction: column;
+  padding: 2px 0;
+}
+#ui {
+  display: inline-block;
+  width: 30em;
+}
+#ui button {
+  width: 2em;
+}
+#ui .expander {
+  display: inline-block;
+  padding: 3px;
+}
+#graphView section {
+  padding: 4px;
+}
+#graphView .spoGrid {
+  display: flex;
+  flex-direction: column;
+}
+#graphView .subject,
+#graphView .predicate {
+  display: flex;
+  align-items: baseline;
+}
+#graphView .predicate,
+#graphView .object {
+  margin-left: 5px;
+}
+#graphView .literal {
+  display: inline-block;
+  margin: 3px;
+  padding: 4px;
+}
+#graphView .literalType {
+  vertical-align: super;
+  font-size: 80%;
+}
+#graphView .resource {
+  display: inline-block;
+  margin: 2px;
+  padding: 1px 6px;
+}
+#graphView .predicate > a::before {
+  padding-right: 2px;
+  content: '━';
+  font-weight: bolder;
+  font-size: 125%;
+}
+#graphView .predicate > a::after {
+  content: '🠪';
+}
+#graphView table.typeBlock {
+  border-collapse: collapse;
+}
+#graphView table.typeBlock td {
+  white-space: nowrap;
+}
+#graphView table.typeBlock td .literal {
+  padding-top: 1px;
+  padding-bottom: 1px;
+}
+#graphView .typeBlockScroll {
+  overflow-x: auto;
+  max-width: 100%;
+}
+a {
+  color: #b1b1fd;
+  text-shadow: 1px 1px 0px rgba(4,0,255,0.58);
+  text-decoration-color: rgba(0,0,119,0.078);
+}
+body.rdfBrowsePage {
+  background: #000;
+  color: #fff;
+  font-size: 12px;
+}
+#ui {
+  border: 1px solid #808080;
+  background: #000;
+  color: #fff;
+  font-family: 'Allerta', sans-serif;
+}
+#graphView {
+  background: #000;
+  color: #fff;
+  font-family: 'Allerta', sans-serif;
+}
+#graphView section {
+  border: 1px solid #808080;
+}
+#graphView .subject {
+  border-top: 1px solid #2f2f2f;
+}
+#graphView .literal {
+  border: 1px solid #808080;
+  border-radius: 9px;
+  font-size: 115%;
+  font-family: monospace;
+}
+#graphView .subject > .node {
+  border: 2px solid #448d44;
+}
+#graphView .resource {
+  border-radius: 6px;
+  background: #add8e6;
+}
+#graphView .predicate > a {
+  color: #e49dfb;
+}
+#graphView .comment {
+  color: #008000;
+}
+#graphView table.typeBlock th {
+  border: 2px #333 outset;
+  background: #1f1f1f;
+}
+#graphView table.typeBlock td {
+  border: 2px #4a4a4a outset;
+  background: #2b2b2b;
+}
+/*
+for my pages serving rdf data, not necessarily part of browse/
+*/
+.served-resources {
+  margin-top: 4em;
+  padding-top: 1em;
+  border-top: 1px solid #808080;
+}
+.served-resources a {
+  padding-right: 2em;
+}
+  `;
\ No newline at end of file