body { overflow: hidden; } #header { height: 30px; width: calc(100vw - 20px); padding: 4px 10px; background-color: #f7f3dc; border-bottom: 2px solid #d8d0a0; font-family: 'Libre Baskerville', sans-serif; } #header h1{ font-size: xx-large; display: inline; } #searchBox { position: absolute; right: 10px; top: 7px; text-align: right; width: 400px; } #searchBox input { width: 300px; font-size: 16px; background: #f9f8ed; padding: 2px 5px; border: none; border-bottom: 2px solid #d8d0a0; font-family: 'Libre Baskerville', sans-serif; } #searchBox input:focus { outline: none; } #searchBox input::placeholder { font-family: 'Libre Baskerville', sans-serif; color: #d8d0a0; } #current { background-color: #f7f3dc; width: calc(40vw - 40px); height: calc(100vh - 80px); padding: 20px; overflow: auto; float: left; } #books { width: calc(60vw - 40px); height: calc(100vh - 80px); padding: 20px; overflow: auto; float: left; } .bookTable th { font-weight: bold; text-align: left; font-family: 'Libre Baskerville', sans-serif; } .bookTable th[data-sort-by] { cursor: pointer; } .bookTable th[data-sort-by]::after { content: "\f0dc"; font-family: FontAwesome; font-size: x-small; position: relative; left: 4px; bottom: 2px; } .bookTable th.asc::after { content: "\f0de"; font-family: FontAwesome; font-size: x-small; position: relative; left: 4px; bottom: 2px; } .bookTable th.desc::after { content: "\f0dd"; font-family: FontAwesome; font-size: x-small; position: relative; left: 4px; bottom: 2px; } .bookTable td, .bookTable th { padding: 5px; min-width: 50px; } .tRow:nth-child(odd) { background: #f9f8ed; border-bottom: 1px solid #d8d0a0; } .bookTable .tRow { cursor: pointer; } .bookTable .onLoan { color: #bbb; } .bookTable .tRow .title { font-style: italic; max-width: 600px; } #current h1 { font-size: x-large; font-weight: bold; font-style: italic; padding: 10px 0; } #current h2 { font-size: large; padding: 7px 0; } #current img { max-height: 400px; max-width: 100%; display: block; margin: 0 auto; } #current .description p { padding: 20px 0; } #current h1.onLoan { color: #bbb; } #current h2.onLoan { font-weight: bold; }