/* JSON-LD CSS */

@font-face {
  font-family: "sketch-rockwell";
  src: url("https://sdl-lambda.s3.amazonaws.com/assets/css/SketchRockwell-Bold.ttf");
}

@font-face {
  font-family: "calluna";
  src: url("https://sdl-lambda.s3.amazonaws.com/assets/css/Calluna-Regular.ttf");
}


* {
  margin: 0;
  padding: 0;
}

body.linter {
  color: #333;
  background-color: #f7f7f7; /* #a7cb87;*/
  font-family: "calluna", Georgia, serif;
  font-size: 1.5vw;
}

body.linter a {
  color: #ea1331; /*#926394;*/
  text-decoration: none;
  outline-style: none;
  font-weight: bold;
}

body.linter h1 {
  font-size: 2.0em;
  font-family: "sketch-rockwell", Helvetica, Arial, serif;
}

body.linter p {
  margin: 10px 0;
  /*font-family: "Georgia", Times, serif;*/
}

.tagline {
   font-style: italic;
   font-family: Georgia, serif;
   font-size: 1.5vw;
}

.breadcrumbs {
   margin: 12px 12px;
}

.lighter {
  background: #2d867126; /*  #c7e5ab;*/
  margin: 0 auto;
}

ul {
  margin: 0 2em;
}

dl {
  padding: 0.5em;
}

dt {
  clear: left;
  text-align: left;
  font-weight: bold;
}

dd {
  margin: 0 0 0 50px;
  padding: 0 0 0.5em 0;
}

form {
  margin-top: 10px;
  clear:left;
}

legend, span.form-examples, #results-turtle {
  font-size: 0.8em;
}

form span.form-examples {
  font-size: 0.8em;
}

.hidden {
  display: none;
}

.banner {
  float: left;
}

nav.navbar {
  position: relative;
  height: 80px;
  color: black; /*#fff;*/
  background-color: #2d867126; /*#55842c;*/
}

nav.navbar a.navbar-brand {
  margin-top: 15px;
  margin-left: 25px;
  white-space:nowrap;
  font-size: 4vw;
  font-family: Helvetica, Arial, serif; /* "sketch-rockwell",*/
  text-shadow: none;
  color: #000; /*#fff;*/
}
nav.navbar a.navbar-brand:hover {
/*  color:      #c7e5ab;*/
}

nav.navbar ul.navbar-nav {
  margin-top: 20px;
}

nav.navbar ul.navbar-nav:last-child {
  margin-right: 25px;
}

nav.navbar .dropdown-menu {
/*  background-color: rgb(85, 132, 44);*/
    background-color: #2d867126;
}

nav.navbar .dropdown-menu>li>a {
  color: white;
}

nav.navbar .dropdown-menu>li>a:hover {
  color:            black;
}
nav.navbar .dropdown-menu>li>a.active {
  font-weight:      bold;
}

nav.navbar li>a, nav.navbar li>a:link, nav.navbar li>a:visited {
  padding:            3px 12px;
  color:              black; /*white;*/
  text-decoration:    none;
  font-size:          2vw;
}

nav.navbar li>a.active, nav.navbar li>a:hover, nav.navbar li>a:focus {
  color:            #c7e5ab;
  background-color: transparent !important;
}

ul.linter {
  font:           bolder 1em 'Trebuchet MS', sans-serif;
  color:          white;
  list-style:     none;
  margin:         0;
  padding:        0;
  padding-bottom: 1em;
}

ul.linter li {
  display: inline;
}

ul.linter>li>a, ul.linter>li>a:link {
  color: white;
  border-bottom: solid 2px #55842c;
  margin-right: 0;
}
ul.linter>li>a, ul.linter li>a:link, ul.linter>li>a:visited {
  padding: 3px 12px;
}

ul.linter>li>a.active, ul.linter>li>a:hover {
/*  color:  #55842c;*/
}

ul.linter>li>a.active {
  border: solid 2px #55842c;
  border-bottom: none;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

form#linter_input fieldset {
  border: none;
}
form#linter_input fieldset legend {
  display: none;
}

.content {
  max-width: 960px;
  /*margin: 0 auto;*/
  padding: 10px 10px;
}

footer {
  background-color: #55842c;
  color: #333;
  text-align: center;
}

body.linter footer a {
  color: #ddd;
}

body.linter footer p {
  font-size: 0.8em;
}

.extracted-content .label {
  font-size: 100%;
  color: black;
  text-align: left;
}
.extracted-content table {
  border-collapse:collapse;
  font-family: monospace;
}
.extracted-content table td {
  vertical-align: baseline;
  border: 1px solid black;
  padding: 4px;
}
.grid-container {
  display: grid;
  grid-template-columns: auto auto;
  /*background-color: #fcfc0a; /*#2196F3;*/*/
  padding: 10px;
  max-width: 100%;
 /* overflow-x: auto;*/
}

.grid-item {
  background-color: #2d867126; /*rgba(255, 255, 255, 0.8);*/
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 20px;
  text-align: center;
  height: 400px;
  width: 750px;
  overflow-y: scroll;
  overflow-x: scroll;
}

loading {
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:100vh;
      z-index:1001;
      background:#fff;
      display:flex;
      align-items: center;
  }
.loader-wrapper { margin:auto; text-align:center; }
  .loader-wrapper > p {
	text-align:center;
  }

  .loader {
      margin:auto;
      border: 16px solid #f3f3f3; /* Light grey */
      border-top: 16px solid #3498db; /* Blue */
      border-radius: 50%;
      width: 120px;
      height: 120px;
      animation: spin 2s linear infinite;
  }

  @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }