/* see https://google-webfonts-helper.herokuapp.com/fonts/junge?subsets=latin */
@font-face {
    font-family: 'Junge';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/junge-v5-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Junge'), local('Junge-Regular'),
    url('fonts/junge-v5-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('fonts/junge-v5-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('fonts/junge-v5-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('fonts/junge-v5-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('fonts/junge-v5-latin-regular.svg#Junge') format('svg'); /* Legacy iOS */
}

html, html *, html body * {
    color: black;
    background-color: white;
    font-family: 'Junge';
}

body {
    color: black;
    background-color: white;
    font-family: 'Junge';
}

div {
    font-family: 'Junge';
}

* {
    font-family: 'Junge';
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Junge';
    clear: both;
}

summary{
    clear: both;
}

details {
    margin-left: 1em;
}


div.gallerytnbox {
    box-shadow: 6px 6px 2px 1px rgba(0, 0, 0, .2);
    border: 2px solid rgba(0, 0, 0, .5);
    margin: 0.5em;
    background-color: #FFF;
    max-width: 17em;
    vertical-align: top;
    /* flex: 0 0 300px; */
    width: auto;
    max-width: inherit;
}


div.result div.gallerytnbox {
    box-shadow: unset;
    border: none;
}

div.gallerytnbox.cols2 {
    max-width: 35em;
}

a.lti {
    border-top: none;
    border-bottom: none;
    border-left: none;
    border-right: none;
    background-color: inherit;
}

a:link {
    color: #33C;
}

a:visited {
    color: #339;
}

a:hover {
    background: rgba(200, 120, 120, 0.2);
}

div.tndiv a.lti:hover {
    border-top: none;
    border-bottom: none;
    border-left: none;
    border-right: none;
}

html body div.tndiv a.lti img {
    display: inline; /* for applying/animating text-indent */
}

html body div.tndiv div.npxholder a.lti {
    box-shadow: 2px 2px 4px 4px rgba(0,0,0,0.2);
}

div.tngallerytext {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(385px, 1fr));
}


/* override the branding */
body div.userbar {
    box-shadow: inset 0 -16px 16px -4px rgb(255, 255, 255);
    padding-bottom: 20px; /* leave room for the shadow */
    background-image: url(/g/bookorama-946x69.jpg);
}

html body div.tngallery-text {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(385px, 1fr));
}

html body div.samples {
    border: none;
}

div.css-panes div.css-pane {
    color: black;
    background-color: white;
}

ul.css-tabs {
    background-color: white;
    color: black;
}

ul.css-tabs a, ul.css-tabs a span {
    background-color: rgba(255, 255, 255, 0);
    color: black;
}

ul.css-tabs a:hover {
    background-color: white;
    color: inherit;
}

ul.css-tabs a.current {
    background-color: white;
    color: inherit;
    font-weight: bold;
}

ul.css-tabs a.current span {
    color: inherit;
}

div.tagcloud {
    background: white;
}

div.tagcloud a.tag {
    margin: 0;
    vertical-align: middle;
    border-bottom: 1px dotted white; /* to reduce jitter */
}
div.tagcloud a.freq4 {
    background-color: #FFF0EE;
}
div.tagcloud a.freq4:hover {
    background-color: #FFE0F0;
}
div.tagcloud a.freq6 {
    transform: rotate(-5deg);
}
div.tagcloud a.freq6:hover {
    transform: rotate(0);
}

div.slide {
    overflow: hidden;
    text-indent: 0;
    transition: text-indent ease 3s;
    width: 220px;
}
div.result {
    display: inline-block;
}
div.result img {
    width: auto;
    height: 200px;
    margin: 8px 8px 0 8px;
}


ol.breadcrumb {
  width: 120%; /* overlap the nav box */
  display: block;
  margin: 0 0 0.5em 0;
  padding-left: 0;
  width: 100%;
  list-type: none;
  font-size: 90%;
}

ol.breadcrumb li {
  display: inline;
}

ol.breadcrumb li:first-child:before {
  content: "";
}

ol.breadcrumb li a {
  text-decoration: none;
}

ol.breadcrumb li a:hover {
  text-decoration: underline;
}

ol.breadcrumb li:before {
  content: " / ";
}

/* for text cards: */
div.cardbox {
  min-height: 218.5px;
  width: 320px;
  padding-left: 4px;
  padding-right: 4px;
}
div.cardbox div.gallerytndesc {
    display: contents;
}

div.cardbox div {
    border: none;
    box-shadow: none;
    margin: 0;
    line-height: 1.3;
}

div.cardbox div.inline {
    display: inline;
}

div.cardbox p.inline {
    display: inline;
}

div#similardiv div.tn {
    display: inline-block;
    margin-right: 1em;
    background-color: white;
}

span.red {
    color: red;
}