/* for home page */
.background {
  background: #ffffff;
  border: 2px solid black;
  padding: 0 20px;
}

.ui-autocomplete {
  z-index: 99999; /* adjust this value */
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-state-active.ui-button:hover {
  border: 1px solid rgb(51, 122, 183);
  background-color: rgb(51, 122, 183);
}

.YHheader {
  height: 90px;
  background: #282a2b;
  padding: 0 60px;
}

.YH {
  font-family: "PT Sans";
  font-size: 24px;
  font-weight: 700;
  font-style: italic;
  color: rgba(255, 255, 255, 60);
  padding: 40px 0 20px 5px;
}

.YHSays {
  font-weight: 400;
}

.footer {
  height: 72px;
  background: #282a2b;
  padding: 0 60px;
}

.footer .copyright {
  height: 12px;
  font-weight: 400;
  text-transform: uppercase;
  color: #8c8989;
  padding: 30px 0;
}

.footer .comments {
  height: 12px;
  font-weight: 400;
  text-align: right;
  color: #8c8989;
  padding: 20px 0;
}

.footer .support {
  color: #b28526;
}

.register {
  font-family: "PT Sans";
  font-size: 14px;
  font-weight: 400;
  color: #b28526;
  padding: 9px 18px;
  border: none;
  margin-left: 10px;
  margin-top: 30px;
}

.login {
  font-family: "PT Sans";
  font-size: 14px;
  font-weight: 400;
  color: #b28526;
  padding: 9px 18px;
  border: 1px solid #b28526;
  border-radius: 3px;
  margin-left: 10px;
  margin-top: 30px;
  cursor: hand;
  cursor: pointer;
}

.type {
  height: 42px;

  font-size: 14px;

  font-weight: 400;

  color: #8c8989;

  padding: 12px 18px;

  border: 1px solid #e5e4e3;

  border-radius: 1px;

  float: left;

  margin-left: 16px;

  margin-bottom: 30px;
}

.search {
  height: 42px;

  font-size: 14px;

  font-weight: 400;

  color: #8c8989;

  padding: 12px 18px;

  border: 1px solid #e5e4e3;

  border-radius: 1px;

  float: left;
}

.bookhcategory {
  font-size: 28px;

  font-weight: 700;

  color: #8c8989;

  padding: 30px 0;
}

.bookbox {
  height: 320px;

  width: 200px;

  background: #ffffff;

  padding: 12px;

  margin: 15px 10px;

  border: 1px solid #e5e4e3;

  position: relative;

  float: left;

  cursor: pointer;

  cursor: hand;
}

.bookhimg {
  height: 228px; /* 100% */
  width: 176px; /* auto */
}

.bookhtitle {
  font-size: 18px;
  font-weight: 400;
  color: #282a2b;
  padding: 10px 0;
  font-family: NightStillComes;
}

.bookhauthor {
  font-size: 12px;
  font-weight: 700;
  color: #b28526;
  position: absolute;
  bottom: 0;
  left: 0;
  padding-left: 10px;
}

.bookhchapter {
  font-size: 10px;
  font-weight: 700;
  color: #8c8989;
  position: absolute;
  bottom: 0;
  right: 0;
  padding-right: 10px;
}
/* selected book page */
.booksbox {
  height: 254px;
  width: 100%;
  background: #f1f1f1;
  padding: 12px;
  border: 1px solid #e5e4e3;
  position: relative;
}

.booksimg {
  height: 228px;
  width: 176px;
  margin-right: 20px;
}

.bookstitle {
  font-size: 36px;

  font-weight: 400;

  color: #282a2b;

  padding: 18px 0;
}

.booksauthor {
  font-size: 21px;

  font-weight: 700;

  color: #b28526;
}

.bookschapvers {
  font-size: 14px;

  font-weight: 700;

  color: #8c8989;

  padding: 18px 0;

  position: absolute;

  bottom: 0;

  left: 0;
}

.bookheaderpadding {
  height: 80px;

  padding: 20px 0;

  background: #ffffff;
}

.logintoadd {
  font-size: 14px;

  font-weight: 400;

  text-align: right;

  color: #8c8989;

  padding: 10px 0;

  opacity: 0.3;
}

.boopchp {
  font-size: 18px;

  font-weight: 700;

  color: #8c8989;

  padding: 6px 0;

  margin-right: 20px;
}

.prev {
  height: 36px;

  font-size: 14px;

  font-weight: 400;

  color: #8c8989;

  padding: 10px 14px;

  border: 1px solid #e5e4e3;

  border-radius: 1px;

  float: left;

  margin-right: 5px;

  /*opacity: .3;*/
}

.next {
  height: 36px;

  font-size: 14px;

  font-weight: 400;

  color: #8c8989;

  padding: 10px 14px;

  /*background: #f1f1f1;*/

  border: 1px solid #e5e4e3;

  border-radius: 1px;

  float: left;

  margin-right: 5px;

  /*opacity: .3;*/
}

.searhdrop {
  height: 36px;

  font-size: 14px;

  font-weight: 400;

  color: #8c8989;

  padding: 10px 14px;

  border: 1px solid #e5e4e3;

  border-radius: 1px;

  float: left;

  margin-right: 5px;
}

.versetextbox {
  height: 36px;

  font-size: 14px;

  font-weight: 400;

  color: #8c8989;

  padding: 10px 14px;

  border: 1px solid #e5e4e3;

  border-radius: 1px;

  float: left;

  margin-right: 5px;
}

.published {
  font-size: 10px;

  font-weight: 700;

  color: #8c8989;

  margin: 2px 0 8px 0;
}

.publisheddate {
  font-size: 14px;

  font-weight: 700;

  color: #8c8989;
}

.content {
  margin-bottom: 18px !important;
}

.versenumber {
  font-family: NightStillComes;

  font-size: 19px;

  font-weight: 500;

  color: #282a2b;

  font-weight: bold !important;
}

.versetext {
  font-family: NightStillComes;
  font-size: 19px;
  font-weight: 500;
  color: #282a2b;
}

.addtopic {
  font-weight: 700;

  color: #b28526 !important;

  padding: 4px 6px;

  border: 1px solid #b28526;

  border-radius: 2px;

  margin-left: 6px;
}

.topictext {
  font-size: 13px;

  font-weight: 700;

  color: #8c8989;

  padding: 4px 6px;

  background: #dddddd;

  border-radius: 2px;

  float: left;

  margin-right: 6px;
}

/* login page */

.loginheader {
  font-size: 48px;

  font-weight: 400;

  color: #8c8989;

  margin-bottom: 30px;
}

.formlabel {
  font-size: 14px;

  font-weight: 400;

  color: #8c8989;

  padding-bottom: 5px;
}

.formtextbox {
  height: 40px;

  font-size: 14px;

  font-weight: 400;

  color: rgba(138, 138, 138, 0.9);

  padding: 12px 14px;

  border: 1px solid #e5e4e3;

  border-radius: 1px;

  margin-bottom: 18px;

  width: 100%;
}

.signinbtn {
  width: 100%;

  font-weight: 700;

  max-width: 260px;

  font-size: 18px;

  font-weight: 700;

  text-align: center;

  color: #ffffff;

  background: #b28526;

  border: none;

  margin-top: 12px;
}

.forgetpass {
  font-size: 14px;

  font-weight: 700;

  text-align: right;

  color: #b28526;

  text-align: right;
}

.haveaccount {
  color: #b28526;

  font-weight: 700;
}

.signup {
  font-size: 14px;

  font-weight: 400;

  text-align: right;

  color: #8c8989;

  text-align: right;
}

/* register page */

/* my topic */

.mytopic {
  font-family: "PT Sans";

  font-size: 14px;

  font-weight: 400;

  color: #b28526;

  padding: 9px 18px;

  border: none;

  margin-left: 10px;

  cursor: pointer;

  cursor: hand;

  text-decoration: none;
}

.loginuser {
  font-family: "PT Sans";

  font-size: 14px;

  font-weight: 400;

  color: rgba(255, 255, 255, 0.6);

  padding: 9px 18px;

  border: none;

  margin-left: 10px;
}

.mytopictitle {
  font-size: 28px;

  font-weight: 700;

  color: #8c8989;

  padding: 30px 0;
}

.mytopicselecttext {
  font-size: 14px;

  font-weight: 400;

  color: #8c8989;

  padding: 15px 0;
}

.mytopicdropdown {
  font-size: 14px;

  font-weight: 400;

  color: #282a2b;

  padding: 12px 18px;

  border: 1px solid #282a2b;

  border-radius: 1px;

  float: left;

  width: 450px;

  margin-right: 20px;
}

.mytopicremovebtn {
  font-size: 14px;

  font-weight: 400;

  color: #ffffff;

  background: #b28526;

  padding: 10px 18px;

  border: 1px solid #282a2b;

  border-radius: 1px;
}

.mytopicimg {
  height: 196px;

  width: 152px;

  margin-right: 20px;

  cursor: hand;

  cursor: pointer;
}

.mytopicbox {
  /*height: 220px;*/

  width: 100%;

  background: #ffffff;

  padding: 12px;

  border: 1px solid #e5e4e3;

  margin: 10px 0;

  position: relative;
}

.mytopicbox:hover {
  background: #f1f1f1;
}

mark {
  background-color: yellow !important;

  color: black;
}

/* all */

::-webkit-input-placeholder {
  color: rgba(138, 138, 138, 0.4);
}

::-moz-placeholder {
  color: rgba(138, 138, 138, 0.4);
} /* firefox 19+ */

:-ms-input-placeholder {
  color: rgba(138, 138, 138, 0.4);
} /* ie */

input:-moz-placeholder {
  color: rgba(138, 138, 138, 0.4);
}

/* Autocomplete

----------------------------------*/

.ui-autocomplete {
  position: absolute;
  cursor: default;
}

.ui-autocomplete-loading {
  background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
}

/* workarounds */

* html .ui-autocomplete {
  width: 1px;
} /* without this, the menu expands to 100% in IE6 */

/* Menu

----------------------------------*/

.ui-menu {
  list-style: none;

  padding: 10px;

  margin: 0;

  display: block;

  width: 227px;

  z-index: 100;

  background-color: #e5e4e3;

  color: black;
}

.ui-menu .ui-menu {
  margin-top: -3px;
}

.ui-menu .ui-menu-item {
  margin: 0;

  padding: 0;

  width: 200px;

  cursor: pointer;

  cursor: hand;
}

.ui-menu .ui-menu-item a {
  text-decoration: none;

  display: block;

  padding: 0.2em 0.4em;

  line-height: 1.5;

  zoom: 1;
}

.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
  margin: -1px;
}

.ui-autocomplete-loading {
  background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
}

.ui-helper-hidden-accessible {
  display: none;
}