/*
	Stylesheet for John Benjamins Antiquariat.
	jba-rood: #9d0000;
*/
@import url(//fonts.googleapis.com/css?family=Noto+Serif:400,400italic,700,700italic);
@import url(//fonts.googleapis.com/css?family=Noto+Sans:400,400italic,700,700italic);

:root {
    --background-gray: #fafafa;
}
body, td, button { 
	font-family:"Noto Sans", "Roboto", helvetica, sans-serif !important;
	font-size: 9.5pt;
	line-height: 1.65em;
}


*, *::before, *::after {
    box-sizing: border-box;
}
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
	margin: 0; padding: 0; border: 0;
}
body, html {
	margin:auto;
	text-align: center;
    background-color: #eee;
    font-size:11pt;
}
main {
	background-color: #fafafa; /* fallback for browsers not supporting variables */
	background-color: var(--background-gray,#fafafa);
    padding: 2vh 3em;
    padding-top:4vh;
    display: block;
    margin:auto;
    margin-top:65px;
    width:100%;
    height:auto;
    min-height: calc(100vh - 97px);
    max-width:1000px;
    z-index:-1;
   	vertical-align:top;
   	text-align:left;
}
main.part {
    background-color:#fff;
}
main.part h1 {
  background-color: inherit;
}

.top_embed {
	float:right;
}
#antiq {
    font-size:2em;
    font-weight:bold;
}
header {
    width: 100%;
    background-color:#9d0000;
    position:fixed;
    top:0px;
    height:65px;
    z-index:999;
}
.header__search {
    background-color:#fff;
}
.header__search input {
    line-height:2em;
    width:20em;
    padding-left:.5em;
}
.header__search button {
    cursor:pointer;
    line-height:1.8em;
    font-family: 'Noto Serif' ! important;
    font-style:italic;
}
.header__search svg {
    height:20px;
    width:auto;
    vertical-align:bottom;
}
.main__search button span {
   display:none;
}
.main__search input {
    line-height:2.5em;
    background-color:#ffe;
    border:1px solid #9d0000;
    width:20em;
    vertical-align:top;
    padding-left:.5em;
}
.main__inquiry {
    margin-top:.5em;
}
/* switch for multiple view modes */
label {
    margin-top:1em;
    display:block;
    font-family: "Noto Serif";
    font-style: italic;
}
label.listmode {
  display:inline;
  padding-right:1em;
  font-weight:bold;
}
#listmode-list:checked ~ div {
  display:block;
}
#listmode-list:checked ~ div .list-item {
  height:auto;
  min-height:initial;
  width:100%;
  border:none;
  box-shadow:none;
  background-color:inherit;
  padding-bottom:1em;
}

#listmode-hideall:checked ~ div .volumes, 
#listmode-hidevolumes:checked ~ div .volumes 
{
  display:none;
} 
#listmode-list:checked ~ div span.ref {
  float:right;
}
#listmode-list:checked ~ div p.price {
  position:static;
}
#listmode-hideimages:checked ~ div .thumbholder,
#listmode-hideall:checked ~ div .thumbholder
{
  display:none;
} 


.main__inquiry input, .main__inquiry textarea  {
    background-color:#ffe;
    border:1px solid #9d0000;
    line-height:2em;
    padding:0 .5em;
    margin-top:.25em;
    font-family:"Noto Sans";
    max-width:100%;
    
}
#antiq-logo-container {
    width:250px;
    display:inline-block;
}
#antiq-logo-container * {
    fill:white !important;
}

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
	text-align: center;
    background-color:#ddd;
    line-height:1.8em;
    padding:.15em;
}
.bullet::after {
	color: #9d0000;
	content: " • ";
	font-size:.9em;
}
.logo_new {
	width: 65px;
	height:48px;
	float:right;
}

#header-content {
    padding:1em;
    height:65px;
    max-width:1000px;
    margin: 0 auto;
    text-align:left;
    vertical-align: middle;
    color:white;
}
nav {
	width:100%;
	max-width:1000px;
	margin: auto;
	line-height: 1.6em;
	color: white;
	clear:both;
	text-align: left;
	z-index:999;
}
.inline-svg {
  display: block;
  margin: 0 auto;
}
/*hamburger end */

.logo {
	width:250px;
	height:39px;
	height:100%;
	display:inline-block;
}
path.logo-char, .logo-text {
	fill:#fff;
}

ul li, li li {
	list-style: none;
	margin:0;
	}
nav ul ul {
	display: none;
}
nav ul li:hover > ul {
	display: block;
}
nav ul {
	background: #ddd;
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	list-style: none;
	position: relative;
	display: inline-table;
	width:100%;
}
	nav ul:after {
		content: ""; clear: both; display: block;
	}

	nav ul li {
		float: left;
	}
		nav ul li:hover {
			background: #4b545f;
			background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
			background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
			background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
		}
			
		
	nav ul ul {
		background: #5f6975; border-radius: 0px; padding: 0;
		position: absolute; top: 100%;
		max-width: 15em;
	}
		nav ul ul li {
			float: none; 
			border-top: 1px solid #6b727c;
			border-bottom: 1px solid #575f6a; position: relative;
		}
			nav ul ul li a {
				padding: 10px 1em;
				color: #fff;
			}	
				nav ul ul li a:hover {
					background: #4b545f;
				}
		
	nav ul ul ul {
		position: absolute; left: 100%; top:0;
		min-width:200px;
	}
	
nav ul li:hover a {
	color: #fff;
}
		
nav ul li a {
	display: block; padding: .25em 1em;
	color: #666; text-decoration: none;
	font-weight:bold;
}
nav a.nolink {
	text-decoration:none;
	background-color:inherit;
}
nav li a:link, footer a:link {
	color: #666;
}
nav li a:visited, footer a:visited {
	color: #666;
}
.list-item {
    vertical-align: top;
    width: 48%;
    min-height: 300px;
    display: inline-block;
    padding:.5em 1em .2em .75em;
    border: 1px;
    border-style:solid;
    border-color:#dadada;
    background-color:#fff;
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    border-radius: .25em;
    vertical-align:top;
    text-align:left;
    font-size:1.1em;
    margin-bottom: 1em;
    margin-right:1em;
    position:relative;
    padding-bottom:4em;
}
.list-item.full-width {
    width:48%;
}
.catalog-list {
    margin:1em -1.5em;
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
}
.catalog-items {
    display:flex;
    flex-wrap:wrap;
}
.catalog-item {
    width:18.5em;
    height:25em;
    border:1px solid #253776;
    background-color:#fff;
    text-align:center;
    display:inline-block;
    vertical-align:top;
    margin:1em 1.5em;
    padding:1em .5em;
    position:relative;
}
.catalog-pdf {
    margin-right:2em;
    margin-bottom:2em;
}
.catalog-item .name {
    margin-top:1.5em;
}
.listitemimage {
    float: right;
    height: 100px;
    width: 75px;
    padding: 1em;
    padding-top: .5em;
    padding-left: .5em;
    margin-right:1.2em;
}
.catalog-image{
    margin:.5em 0 1em;
    height:220px;
    width:auto;
}
.selectionimage {
    display:none;
    
}
.selection h3.name {
    font-size:1.5em;
}
.selection h3.selectiontype {
    margin-top:1.5em;
}
.item {
    position:relative;
    padding-bottom:1em;
}
main .item {
    margin-top:1em;
}
p {
	margin-top:0.5em;
	font-family: "Noto Serif";
	line-height:1.5em;
}
.volumes {
	padding-bottom:1em;
	max-width:44em;
	font-family:"Noto Serif";
	margin-top:.5em;
}
.list-item .volumes {
    font-size:.9em;
}

.notes{
    margin-top:.5em;
	margin-bottom:1.5em;
	font-size:.925em;
    max-width:45em;
    line-height:1.6em;
    font-family:"Noto Serif";
}
.selection .notes {
    display:none;
}
.detailedinfo {
    border: solid 1px #ddd;
    padding:0 .5em;
	margin:0 0 1em;
	background-color:#e9e9e9;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding:.25em .65em;
    display: inline-block;
    clear: right;
    line-height:1em;
    font-size: .75em;
    position:absolute;
    bottom:.5em;
}
.inquiries button, .main__inquiry button {
    margin:2em 0 1.5em;
	background-color:#9d0000;
    font-size: .95em;
    font-weight: bold;
    color:white;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding:.1em .65em .1em .65em;
    border:1px solid #ddd;
    border-radius:.25em;
    float:right;
}
.inquiries.price button {
    float:none;
    background-color:#253776;
}
.inquiries button:before {
    content:"► ";
}
a.inquiries:visited {
    color: white;
}

.price, .price-on-request {
    position:absolute;
	bottom:4em;
}
.price-on-request {
    font-size:.9em;
    font-style:italic;
}
.item .price {
    position:static;
}
li{
	display: list-item;
	list-style:outside;
	margin: 0pt;
	margin-left: -1em;
	padding:.3em 0 .3em 0;
	list-style-type: disc;
}


ol, ul {
	vertical-padding:0;
}

LI LI {
	margin-top:.25em;
}

a {
	color:#9d0000;
	text-decoration: none;
}
#header-content a{
    color:white;
}

a:visited {
	color:#9d0000;
}

a:active {
	color:#eeffff;
}

a:hover {
	 text-decoration: underline;
}

DIV .browsebar {
	margin-bottom:1em;
}

HR {
	border: solid 1px black;
}

/* menu bar catalog */
table.browsebar {
	width:100%;
	margin:0;
	padding:.5em 0;
	border-top:2px solid #ffffe8;
	border-bottom: 2px solid #ffffe8;
}

table.browsebar td {
	text-align:left;
	padding:0.25em 0;
}

table.browsebar A, table.browsebar A:visited {
	color:#ffffff;
}

a.itemlink {
	display:block;
	color:black;
}


.blockLink {
	display:block;
	width:100%;
	height:100%
}

h1	{
	font-size: 1.2em;
	font-weight:bold;
	color: #050;
	margin: 1em auto;
  }
h1.name {
  position: sticky;
  top: 100px;
  z-index: 1;
  background-color: #def;
  border-radius:.25em;
  padding: .5em 1em;
}

h2 {
	font-size: 1.1em;
	color: #333;
    margin:1em 0 .5em;
    line-height:1.5em;
}

h3 {
    vertical-align:top;
    margin-top:.2em;
    line-height:1.5em;
}
.printtitle {
    letter-spacing:.015em;
    font-size:1.1em;
}
main > .item .printtitle {
    font-size:1.5em;
} 
main > .item .subtitle {
    font-size:1.1em
}
h3.selectiontype {
    background-color: #eee;
    color: #333;
    margin:0;
    padding: .1em .5em .1em .5em;
    display:inline-block;
    text-transform: uppercase;
    font-size:.8em;
    letter-spacing:.15em;
    border: 1px solid #ddd;
    border-radius:.15em;
}
h2.sub	{
	margin-bottom:.75em;
}
h4.subtitle {
	font-size:.9em;
	margin-top:0em;
	color:#333333;
	font-weight:bold;
	line-height:1.3em;
}

#listtitle, #listtitle a {
	margin:0;
	margin-top:-0.5em;
	text-align:center;
	font-size:small;
	font-weight:bold;
	color:#af0c00;
}


.request {
	display:block;
	float:left;
	text-decoration:none;
	border:1px solid #aaa;
	background-color: #f0f0f0;
	white-space:nowrap;
	margin-right:1em;
	margin-bottom:1em;
	padding: 0 .3em .2em .3em;
	font-size:small;
}

.requestR {
	display:block;
	float:right;
	text-decoration:none;
	border:1px solid green;
	white-space:nowrap;
	padding:.1em;
	font-size:small;
}

.selection .ref {
    color:#666;
    font-size:.85em;
    position:absolute;
    right:1em;
    bottom:1em;
}

.tunderlined{
	vertical-align:bottom;

}

.buylink {
	text-align:left;
}

.formheader{
	margin-bottom:1em;
	font-size:small;
	font-weight:bold;
	color:#436026;
}

#nav {
	 background-color:#9d0000;
	 color:#ffffe8;
	 width:150px;
}

.cattable {
	width:100%;
	height:100%;
	background-color:#ffffff;
	border:1px solid #cccccc;
}

.cattitlerow {
	height:35px;	
	padding: 10px;
	font-size: 10pt;
}

.catthumbrow {
	height:300px;
}

.list_anchor {
	position:relative;
	width:0px;
	height:0px;
	top:-89px;
}

#buypart {
	width: 200px;
	padding:0;
	margin-top: 0em;
	margin-bottom:0em;
}

.thumbholder {
    margin:.5em 0 1em 1.5em;
	display:inline;
	float:right;
	z-index:2;
}
.with-border {
    border:solid 1px #888; 
}
.clear {
    clear:both;
}

.smallthumb {
	margin-right:-.5em;
	margin-top:-1.5em;
	width:120px;
	height:auto;
}

.thumbholder .smallthumb {
    float:right;
    margin:0;
    width:auto;
}
.item > .thumbholder .smallthumb {
  height:400px;
}
.selection .thumbholder .smallthumb {
  max-width:100%;
  max-height:100%;
/*  height: auto;
  width:auto;*/
}
.full-width .smallthumb {
    width:15em;
}
.otherthumbs-title {
    margin-bottom:1.5em;
    clear:both;
}
.otherthumbs {
	float:left;
	display:flex;
  flex-wrap: wrap;
  margin:-1em;
}

.note {
	font-size:x-small;
	font-style:italic;
	color: #ffffe8;
	padding-bottom:1em;
	margin-top:0;
}

.hilite {
	background-color:#C4FF97;
}

.redbullet { list-style-image: url(/images/rd_ball.gif); }

.cattitle {
}

.orderdetails p {
}

.erratum {
	border:solid 1px black;
	padding:5px;
	color:black;
	background:white;
}

.sc {
	font-variant: small-caps;
}

.at {
	vertical-align:middle;
}

#wrap {
	background-color:white;
	position: absolute;
	z-index:0;
	padding:0;
	margin:0;
	text-align:center;
	width:100%;	
	height:100%;
}

#container {
	width:800px;
	height:100%;
	z-index:1;
	margin-left:auto;
	margin-right:auto;
	background-color:#ffffe8;
}

#navfixer {
	position:fixed;
	margin-left:5px;
	width:140px;
	text-align:center;
}

#main {
	padding: 0;
	width:auto;
	text-align: left;
	height:100%;
	background-image:url(imgs/edge.gif);
	background-position:right;
	background-repeat:repeat-y;
}

#mainlogofixer{
	position:fixed;
	z-index:10;
	width:640px;
	height:70px;
	background-color:#ffffe8;
	text-align:center;
}

#browselogo {
	text-align:center;
	padding-top:1em;
	padding-bottom:1em;
}

#popup {
	position:fixed;
	top:0px;
	left: 0px;
	width:100vw;
	height:100vh;
	z-index:200;
	text-align:center;
	display:none;
}

#dark {
	display: none;
	position:fixed;
	width:100%;
	height:100%;
	left:0;
	top:0;
	z-index:50;
	background-color:black;
	opacity:.5;
	filter: alpha(opacity=50);
}

.cat_special {
    background-color: #fff0f0;
}

.authmsg {
    border: 1px solid #d3d3d3;
    padding: 2px 2px 3px;
    float:right;
    margin-top:8px;
    color:#bb5040;
    cursor:pointer;
}

#wishlen {
	font-size:x-small;
	padding-bottom: 1em;
}

ul#cartlist {
	list-style: none;
	margin: 0px;
	padding: 0px;
	width: 100%;
	max-height:140px;
	border:1px solid white;
	overflow: auto;
}

ul#cartlist li{
	display: block;
	width: auto;
	height: 18px;
	padding:0px;
	margin: 0px;
	font-size: x-small;
	font-weight:bold;
	white-space: nowrap;
	overflow:hidden;
	background-color:#ffffe8;
	color:black;
	border: 1px solid #9d0000;
}

ul#cartlist li a {
}

ul#cartlist li a:hover {
}
@media screen and (max-width: 1000px) {
    .item > .thumbholder .smallthumb {
        height:300px;
    }
}
@media screen and (max-width: 800px) {
    .header__search input {
        width:30vw;
    }
    #antiq {
        font-size:3.5vw;
    }
	.list-item {
	    width: 100%;
        max-width: inherit;
	    clear:both;
	    display:block;
        margin: 1vh 0;
	}
    .item > .thumbholder .smallthumb {
        height:200px;
    }
}
@media screen and (max-width: 600px) {
    .header__search input {
        width:20vw;
        display:none;
    }
	.bookimage3ditem {
	    height: 200px;
	    width: 150px;
	}
	.imageContainer {
		height:200px;
	    width: 150px;
	}
    nav {
		font-size:.9em;
    }
    .item > .thumbholder .smallthumb {
        max-width:40vw;
    }
    .otherthumbs .thumbholder .smallthumb {
      height: 150px;
    }
}
/* refined this so that it is not dependent on screen size */

.volumes volumes {
  max-width: 44em;
  font-family: "Noto Serif";
  margin-top: .5em;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  position: relative;
  margin-bottom: 2em;
}


@media screen and (max-width: 450px) {
	main {
	    padding: 5px;
	    padding-left:10px;
        margin-bottom: 0;
        margin-top:125px;
	}
	h1 {
	  top:0; /* snap to top when scrolling */
	}
	#top {
	    padding-top: 0;
	}
	#top_embed {
		max-width: 65px;
		padding:0;
		padding-left:.5em;
	}
    header {
        position:absolute;
    }
	footer {
		position:relative;
	}	
	nav {
		margin-top: 0;
		font-size:.8em;
	}
    .header__search {
        background-color:transparent;
    }
	.header__search button {
	    padding:0;
	    border:none;
	    background-color:transparent;
	}
	.header__search button span {
	   display:none;
   }
	.header__search button svg {
	    width:40px;
	    height:auto;
	    vertical-align:top;
	}
	.header__search button svg * {
	    fill:white;
	}
	.list-item.full-width {
	    width: 100%
	}
}
@media screen and (max-width: 350px) {
#antiq-logo-container {
    width:70vw;
    }
	.header__search button svg {
	    width:10vw;
    }
    .main__search input {
        width:70vw;
    }
}


@media screen and (max-height: 450px) {
	header {
        position:absolute;
	}	
    footer {
        position: relative;
    }
	nav {
		margin-top: 0;
	}
	main {
	    padding: 5px;
	    padding-left:10px;
   	    margin-bottom:0;
	}
	
}

@media screen and (min-width: 2000px) {
 .selection .list-item .thumbholder {
    position:absolute;
    right:100%;
    margin-right:2em;
    height:auto;
    width:auto;
  }
 .selection .list-item:nth-child(even) .thumbholder {
    left:100%;
    margin-left:2em;
  }
  .selection .thumbholder .smallthumb {
    max-width:inherit;
    max-height:inherit;
  }
 .selection .list-item .thumbholder img {
    height:300px; 
    width:auto;
  }
  main, body {
    background-color: #fff;
    }
    
}