index.css

/* Generic Classes */

form {
  margin: auto;
}

#wrapper {
  margin-left:auto;
  margin-right:auto;
  max-width: 100%;
  padding: none;
}

header {
  background: linear-gradient( to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7) ), url(images/bg1.jpg);
  background-size: cover;
  background-position: 15% 0%;
  background-attachment: scroll;
  padding: 20px 0;
  margin-bottom: 13px;
  box-shadow: 0 0 10px black;
}

body {
  margin: 0px auto;
  font-family: 'Lato', sans-serif;
  background-color:#F1C0B1;
  color: #0B4863; 
}

h1 {
  color: white;
}

h3 {
  color:#0B4863;;
  font-size:16px;
  text-align:left;
}

h4 {
  color: #0B4863;
  font-size:16px;
}

a {
  color: inherit;
  text-decoration: none;
}

a, 
button, 
.fas, 
{
  cursor: pointer;
}

i {
  padding: 2px;
}

.fas {
  font-size: 25px;
  height: 20px;
  width:20px;
  margin-right:10px;
  position: relative;
  padding-right:3px;
  padding-left:4px;
  text-align:left;
  
}

.fa-angle-double-down, 
.fa-angle-double-up {
  color:  #0B4863;
  -webkit-transition-property: color;
     -moz-transition-property: color;
       -o-transition-property: color;
          transition-property:color;
  -webkit-transition-duration: .5s;
     -moz-transition-duration: .5s;
      -o-transition-duration: .5s;
         transition-duration: .5s;
  -webkit-transition-timing-function: linear;
     -moz-transition-timing-function: linear;
       -o-transition-timing-function: linear;
          transition-timing-function: linear;

}

.fa-angle-double-down:hover {
  color: #9BAA37;
}

.fa-search {
  color:  #a54132;
}

.fa-search:hover{
  color:  #F1C0B1;
}

.fa-kiwi-bird:before {
  content: "\f535";
  height:20px;
  width:20px;
  padding-right:3px;
}

input {
  display:inline-block;
  overflow:auto;
}

*:focus {
  outline:none;
}


/* Header rules */
.banner {
  text-align:right;
  margin-top:150px;
}

.tophalf {
  margin-top:50px;
  text-align:right;
}

.tagline {
  margin-bottom: 10px;
  color: white;
  text-shadow: 0 0 3px #777777;
  padding-bottom: 20px;
  font-weight: 200;
  -webkit-font-smoothing: antialiased;
}

.js-search-form {
  margin-left: auto;
  margin-right:auto;
}

input {
  border: none;
  border-bottom: 3px solid ghostwhite;
  border-radius: none;
  padding: 8px 0;
  color: white;
  -webkit-font-smoothing: antialiased;
  font-size: 2em;
  background: none;
  width: 50%;
}
.sdexample {
  /*border:1px solid blue;*/
  height:100%;
  text-align:left;
  animation-name: slidedown;
  animation-duration: 4s;
}

/* Main rules */

.definition {
 background:#0B4863;
 overflow:auto;
 float:right;
 position:relative;
 margin: 50px 0 50px 150px;
 text-align:right;
}

.logo {
  float: left;
  width:25%;
  position:relative;
  padding-top:3%;
  padding-left:5%;
  padding-bottom:5%;
}

.get-the-book-btn {
  border-style:outset;
  border: 3px solid  #9BAA37;
  background-color: #BEB968;
  color: white;
  text-shadow: 0 0 3px #555555;
  text-align:center;
  padding: 0px 25px 10px 25px;
}

.get-the-book-btn:hover{
  border-style:outset;
  border: 3px solid  #BEB968;
  background-color: #9BAA37;
  color: white;
  text-shadow: 0 0 3px #555555;
  text-align:center;
  padding: 0px 25px 10px 25px;
}

.get-the-book-logo {
  border-style:outset;
  border: 3px solid  #9BAA37;
  background-color: #BEB968;
  height: 50px;
  width: 170px;
  margin:auto;
  color: white;
  text-shadow: 0 0 3px #555555;
  text-align:center;
  padding: 10px 10px 10px 10px;
}

.verbage {
  position:relative;
  padding-top: 10px;
  position:relative;
  color: white;
  padding: 2%;
}

/* Data section rules */
.boxshadow {
  box-shadow: 1px 1px 5px #777777; 
  background-color:white;
  overflow:auto;
  padding:10px;
}

.overviewitem {
  padding-left:3px;
  padding-right:3px;
}

.overviewdetail {
  float: left;
}

.boxtitle {
  box-shadow: 1px 1px 5px #777777;
  border-width: 2px;
  background-color: #BEB968;
  padding:5px;
  margin:0 0 10px 0;
}

.footerboxtitle {
  box-shadow: 1px 1px 5px #777777;
  border-width: 2px;
  background-color: #BEB968;
  padding:5px;
  margin:0 0 10px 0;
  height:25px;
  display:table;
  text-decoration: none;
  text-align:right;
  color:white;
  position:relative;
  font-size:14px;
  width:100%;
}

.nextyt,
.nextnews {
  display:none;
  font-size:12px;
}

.title-style {
  display:table;
  text-decoration: none;
  /*padding: 5px;*/
  display: block;
  text-align:right;
  color:white;
  position:relative;
  height: 80px;
} 

.slidedown {
  float:left;
  display:table-cell;
  width:15%;
  height:100%;
  text-align:left;
  animation-name: slidedown;
  animation-duration: 4s;
  position:relative;
}

.slidedown:hover {
  cursor:pointer;
}

.othertitle {
  display:table-cell;
  float:right;
  position:absolute;
  top:0;
  right:0;
}

.appicons {
  padding-right:5px;
  width:40px;
  display:inline-block;
  vertical-align:middle;
}

.titleverbage {
  display:inline-block;
  vertical-align:middle;
  font-size:14px;
}

@keyframes colorchange {
    0%   {color:#9BAA37}
    50%  {color: #0B4863;}
    100% {color:#BEB968}
}

.saleprice, .linktobuy {
  color:#0B4863;
}

 .fa-angle-double-down, .fa-angle-double-up {
  animation-name: colorchange;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}


.back-to-list,
.nextlist {
  font-size:12px;
  text-align:right;
}

.nextyt:hover, 
.nextnews:hover, 
.nextwiki:hover, 
.back-to-list:hover,
.nextlist:hover {
  cursor:pointer;
  color:#0B4863;
}

.myVideo {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

.videoItem {
  padding-bottom: 8%;
  border-bottom: 1px inset #0B4863;
}

.resp-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.itemid {
  display:none;
}

.results {
  margin: 0 2%;
  padding-top:2%;
}

.dataitem, .newsitem, .youtubeitem {
  border-bottom:1px inset #0B4863;
  padding-bottom: 8px;
  padding:8px;
}

.listofbooks {
  height:250px;
  float:left;
  overflow:auto;
  border:1px inset #0B4863;
  padding:3px;

}

.otherinfo {
  text-align: left;
  padding: 10px 3px 10px 10px;
  color:  #a54132;
  font-size:12px;
  
}

.dataitem:hover, .youtubeitem:hover {
  background-color:lightgray;
}

.headerinfo {
  font-size: 14px;
  text-align: center;
  padding: 0 0 10px 0;
  color:  #a54132;
  overflow:auto;
}


.listofbookstable {
  display:table;
  width:100%;
  text-align:left;
  margin:.5%;
}

.book {
  float:left;
  width:50%;
  padding:3px;
  height:216px;
}

.book:hover {
  cursor:pointer;
  background-color:lightgray;
}

.bookthumbtable-cell {
  display:table-cell;
  width:33.33%;
  vertical-align:middle;
}

.listofbookstable-cell {
  display:table-cell;
  width:66.66%;
  padding-left:3px;
}
.listofbooksthumb {
  display:inline-block;
  height:192px;
  width:128px;

}
.indbookthumbtable-cell {
  display:table-cell;
  vertical-align:top;
  width:15%;
 
}
.indbooktable-cell {
  display:table-cell;
  vertical-align:top;
  width:85%;
  padding-left:10px;
  
}
.indbookheaderinfo {
  display:inline-block;
  font-size: 14px;
  text-align: left;
  padding: 0 0 10px 10px;
  color:  #a54132;
}

.indbookbodyinfo {
  float:left;
  padding:5px 10px 5px 12px;
}

.resultbody {
  font-size: 12px;
  padding-bottom:3px;
  text-align:left;
}

.otherdata {
  font-size:12px;
}
.title-style-1 {
  font-size:14px;
  font-weight:bold;
  padding:0 3px 5px 0;
  width:100%;
  text-align:center;
}

.author-name-style {
  font-weight: bold;
  width:100%;
}

.pub-style {
  padding:0 3px 5px 0;
  width: 100%;
}

.pubwords, .genwords, .ratingwords {
  float:left;
  font-weight:bold;
  padding-right:5px;
}

.pubdata, 
.gendata, 
.ratingdata {
  padding-right:5px;
  text-align:left;
}

.desc-style {
  font-size: 12px;
  color:  #0B4863;
  margin-top:5px;
  text-align:left;
}
.ytdesc-style {
  margin-bottom: 10px;
}

.wikiimg {
  width:100%;
  height:100%;
  margin-bottom:5px;
}

.wikiimg img {
  margin: 0 auto;
  display: block;

}

.pagecount {
  padding-bottom:3px;
}

.newsearchrow {
  vertical-align:middle;
}

.row {
  margin-bottom: 13px;
}

iframe {
  overflow:auto;
}

.saleprice {
  font-weight:600;
}

.read {
  color:#0B4863;
  font-weight:bold;
  margin-top:10px;
}

.read:hover, .linktobuy:hover {
  color: #a54132;
}

.purchasedata {
  margin-bottom: 20px;
  margin-top:10px;
  margin-left:20px;
  font-size:14px;
}

/* Footer rules */
footer {
  background: linear-gradient( to bottom, rgba(213, 102, 75, 0.5), rgba(213, 102, 75, 0.2) );
  padding-top: 20px;
  bottom: 0;
  width: 100%;

}

.footerbox {
  display:table;
  padding-bottom: 1px; 
  padding-top:3px;
  height:50px;
  float:left;
  width:100%;
  transition: color 0.25s linear;
  position: relative;
}


.share {
  text-align:left;
  font-size:14px;
}

.searchagain {
  width:50%;
  position:absolute;
  font-size:14px;
}

.sharebuttons {
  width:100%;
  
  padding-bottom: 5px;
  margin-bottom: 5px;
}

.topbox {
  border-bottom: 1px solid #a54132;
  margin-bottom: 8px;

}
.companylogo {
  float:right;
}

#searchdoubleup, #searchsearch, #searchwords, #cowords, #cologo {
  display: inline-block;
  vertical-align: middle;
}

#builtby {
  color:#a54132;
  font-size:14px;
}

#builtby:hover {
  color:  #F1C0B1;
}

#itc_icon {
  height: 40px;
}
#footerdetail {
  position: absolute;
  bottom:0;
}

/* Media Queries */
@media only screen and (min-height: 450px) {
header {
    height: 100vh;
}
}

@media only screen and (min-width: 800px) {}

.headerinfo {
  padding-top:10px;
  padding-bottom:10px;
}

.youtubeitem {
  padding-top:10px;
  padding-bottom:10px;
}
}
  
@media only screen and (max-width: 767px) {
header {
    padding: 10px;
}


.js-youtube {
  width: 100%;
}

.tophalf {
  margin-top:50px;
  text-align:center;
}
h4 {
  color: white;
  font-size:14px;
  font-weight:50;
}

.banner {
  text-align:center;
}

input {
  width:100%;
}

.logo { 
  float: none;
  width:auto;
  text-align:center;
  padding-top:12px;
  padding-left:none;
}

.get-the-book-logo {
  padding: 13px 25px 10px 25px;
}
.verbage { 
  width:100%;
  margin-top: 10px; 
  padding: 5px 12px 12px 12px;
  font-size:12px;
}

.title-style {
  padding: 5px;
  text-align:center;
  font-size:12px;
} 

.headerinfo {
  font-size: 14px;
  text-align: center;
  padding-bottom:3px;
}

.book {
  float:left;
  width:100%;
}

.bookthumbtable-cell {
  width:20%;
}

.listofbookstable-cell {
  width:100%;
  text-align:center;
}

.indbookthumbtable-cell {
    vertical-align:top;
    text-align:center;
   
  }
.indbooktable-cell {
  width:100%;
  display:inline-block;
  padding-left:none;
}

.slidedown {
  width:100%;
  float:none;
}

.resultbody {
  font-size: 12px;
  padding-bottom:2px;
}

.purchasedata {
  margin-bottom: 20px;
  margin-top:10px;
  margin-left:20px;
  font-size:12px;
}

.searchagain, .companylogo {
  display:inline-block;
  text-align:center;
  width:100%;
  position:unset;
}
.definition {
  text-align: center;
  margin:50px 10px 50px 10px;
}

.searchagain {
  padding-bottom:5px;
  border-bottom:1px solid #a54132;
  padding-bottom:5px;
}
.companylogo {
  float:none;
  margin-top: 8px;
}
}