#islamic_library { width:90%; margin:0 auto; text-align:center; border:1px solid #cccccc; padding:5px; margin-top:15px; margin-bottom:15px; }
#islamic_library .lang { padding:5px 0 5px 0; margin:5px 0 10px 0; }

.breadcrumb {
  padding: 8px 15px;
  margin-bottom: 20px;
  list-style: none;
  background-color: #f5f5f5;
  border-radius: 4px;
}
.breadcrumb > li {
  display: inline-block;
}
.breadcrumb > li + li:before {
  padding: 0 5px;
  color: #ccc;
  content: "/\00a0";
}
.breadcrumb > .active {
  color: #777;
}
.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 20px 0;
  border-radius: 4px;
}
.pagination > li {
  display: inline;
}
.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: #337ab7;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #ddd;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
  margin-left: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  color: #23527c;
  background-color: #eee;
  border-color: #ddd;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  z-index: 2;
  color: #fff;
  cursor: default;
  background-color: #337ab7;
  border-color: #337ab7;
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
  color: #777;
  cursor: not-allowed;
  background-color: #fff;
  border-color: #ddd;
}

.media {
  margin-top: 15px;
}
.media:first-child {
  margin-top: 0;
}
.media-right,
.media > .pull-right {
  padding-left: 10px;
  width:128px;
}
.media-left,
.media > .pull-left {
  padding-right: 10px;
  width:128px;
}
.media-left,
.media-right,
.media-body {
  display: table-cell;
  vertical-align: top;
}
.media-middle {
  vertical-align: middle;
}
.media-bottom {
  vertical-align: bottom;
}
.media-heading {
  margin-top: 0;
  margin-bottom: 5px;
  color:#1589FF;
}
.media-heading a {
  color:#1589FF;
}
.media-list {
  padding-left: 0;
  list-style: none;
}
.media-object { width:128px; }
.media span { color:#348017; }

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (min-width: 959px) and (max-width: 1200px) {

}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {

}

/* rules for iPad in landscape orientation */
@media only screen and (device-width: 768px) and (orientation: landscape) {

}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.media-left, .media-right { text-align:center; display: block; }
.media-right, .media > .pull-right { padding-left: 0px; width:100%; }
.media-left,.media > .pull-left { padding-right: 0px; width:100%; }
.media-object { width:70%; }
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (min-width: 320px) and (max-width: 479px) {
.media-left, .media-right { display: block; }
.media-right, .media > .pull-right { padding-left: 0px; width:100%; }
.media-left,.media > .pull-left { padding-right: 0px; width:100%; }
.media-object { width:100%; }
}

@media only screen and (min-width: 240px) and (max-width: 320px) {
.media-left, .media-right { display: block; }
.media-right, .media > .pull-right { padding-left: 0px; width:100%; }
.media-left,.media > .pull-left { padding-right: 0px; width:100%; }
.media-object { width:100%; }
}

@media only screen and (max-width: 240px) {
.media-left, .media-right { display: block; }
.media-right, .media > .pull-right { padding-left: 0px; width:100%; }
.media-left,.media > .pull-left { padding-right: 0px; width:100%; }
.media-object { width:100%; }
}