/**************************************
*                                     *
* Bab Jedid template                  *
* ==================                  *
* Common styles (mobile & widescreen) *
*                                     *
**************************************/

/* Body styles */
* {
	margin: 0;
	padding: 0;
}
body {
	border:0;            /* This removes the border around the viewport in old versions of IE */
	font-size:100%;
	font:12pt Tahoma, Geneva;
	line-height:1.5;
}
p
{
	margin:12px 0;
}
h1 {
	margin:10px 0px;
	font-size:200%;
	font-weight:bold;
	color:#044262;
}
h2, .registration legend {
	margin: 0px;
	font-size:150%;
	font-weight:bold;
	color:#489692;
}
h3 {
	margin:10px 0px;
	font-size:120%;
	font-weight:bold;
	color:#044262;
}
a {
	color:#2a6eb7;
	text-decoration:none;
}
a:hover {
	color:#72a3d8;
}
.button,.btn {
	padding:6px;
}
textarea {
	padding:4px;
	border:1px solid #a9a9a9;
	border-radius:4px;
	max-width:100%;
}
input[type="text"] {
	border:1px solid #a9a9a9;
	border-radius:4px;
}
select {
	font:12pt Tahoma, Geneva;
	border-radius:4px;
	height:36px;
	padding:4px;
}
ol, ul {
	list-style-position:inside;
}

.clearfix {
	clear:both;
}
.visually-hidden
{
	display:none;
}
.mod-menu__toggle-sub
{
	display:none;
}

/* The popup login menu */
div#popuploginlink {
/*	padding:6px; */
	height:48px;
	color:#ffffff;
	font-size:14pt;
	cursor:pointer;
}
div#popuplogin {
	position:relative;
	right:0px;
	top:0px;
	width:300px;
	background-color:#3a3a3a;
	padding:8px;
	padding-left:30px;
	text-align:right;
	color:#ffffff;
	font-size:14pt;
	line-height:1.4em;
	z-index:100;
	display:none;
}
div#popuplogin a {
	color:#e0e0e0;
}
div#popuplogin button {
	background-color:#d8d8d8;
	color:#3a3a3a;
	font-size:140%;
}
div#popuplogin button:hover { background-color:#e8e8e8; }

/* Standard login form */
fieldset { border:0; }
.userdata label
{
	display:inline-block;
	width:150px;
}

/* User positions above the component */
div#user1 { clear:both; }
div#component { clear:both; }

/* moduletable */
.moduletable { clear:both; }

/* moduletableflags - used for horizontal image menu (e.g. BWB flags) */
.moduletableflags
{
	display:inline-block;
	width:100%;
	padding-top:10px;
	list-style-type:none;
}
.moduletableflags li
{
	float: right;
	margin:8px 2px;
	font-size:90%;
	width:42px;
	height:26px;
	text-align:center;
	padding-bottom:10px;
}
.moduletableflags img
{
	border: 0;
	margin: 0 1px -6px 1px;
}

/* Content styles */
.page-header
{
	clear:both;
	/*margin-top:20px;*/
}

/*.page-header h1  /* Like h2 */
/*{
	margin:10px 0px;
	font-size:150%;
	font-weight:bold;
	color:#489692;
}
.page-header h2  /* Like h1 */
/*{
	margin:10px 0px;
	font-size:200%;
	font-weight:bold;
	color:#044262;
}*/
.article-info
{
	font-size:80%;
	color:#cc0000;
}
.item-page .article-block {
	margin: 0px -42px;
	padding: 40px 42px;
	display: flex;
	flex-wrap: wrap;
}
.article-block > h3 {
	flex-basis: 100%;
	font-size: 1.5rem;
	margin-bottom: 20px;
}
.item-page .article-block > img {
	float: none;
	margin: 0 0 0 40px;
	flex: 0 1;
	box-shadow: 0px 0px 15px 2px #00000080;
}

@media(max-width: 576px) {
	.item-page .article-block > img { order: 10; }
	.item-page .article-block > .block-content { flex-basis: 100%; }
}

.article-block > .block-content {
	flex: 1 1;
}

.bg-primary {
	background-color: #3D65B0;
	color: #fff;
}
.bg-secondary {
	background-color: #1DB5A5;
	color: #fff;
}
.bg-alt-1 {
	background-color: #F1DAC4;
}
.bg-alt-2 {
	background-color: #FF8800;
}
.bg-alt-3 {
	background-color: #B6244F;
}
.bg-light-gray {
	background-color: #f7f4f4;
}

.bg-dark h3,
.bg-primary h3,
.bg-secondary h3 {
	color: #fff;
}

/* Page navigation - copied from Beez3  */
.pagenav {
	text-align: right
	display: inline-block;
	*display: inline;
	/* IE7 inline-block hack */
	list-style-type: none;
	margin-left: 0;
	margin-bottom: 0;
}
.pagenav li {
	display: inline;
	margin: 0;
	padding: 0
}

.pagenav a,span.pagenav {
	padding: 0 14px;
	margin: 0;
	text-decoration: none;
	border: 1px solid #ddd;
	border-left: 0 solid #ddd;
	display: inline-block;
	line-height: 1.9em;
}

.pagenav li:first-child a,.pagination-start span {
	-webkit-border-radius: 3px 0 0 3px;
	-moz-border-radius: 3px 0 0 3px;
	border-radius: 3px 0 0 3px;
	border-left: solid 1px #ddd
}

.pagenav li:last-child a,.pagination-end span {
	-webkit-border-radius: 0 3px 3px 0;
	-moz-border-radius: 0 3px 3px 0;
	border-radius: 0 3px 3px 0;
}

.pagination
{
	float:right;
	text-align:right;
	padding:10px 10px 0px 0px;
	width: 100%;
	clear:both;
}

.pagination ul {
	float:right;
	text-align:right;
	margin: 10px 10px 10px 0;
	padding: 0
}

.pagination li {
	float:right;
	text-align:right;
	display: inline;
}

.pagination a {
	padding: 0 14px;
	line-height: 2em;
	text-decoration: none;
	border: 1px solid #ddd;
	display: inline-block
}

.pagination li a:hover {
	color:#fff;
	background-color:#3d65b0;
}

.pagination .active a {
	cursor: default;
}

.pagination span,.pagination span  a:hover {
	cursor: default;
	padding: 0 14px;
	line-height: 2em;
}

/* Removes margin from an image */
.marginless
{
	margin:0 !important;
}

/* Used by com_webforms and com_activities */
.submitbutton
{
	margin:0.2em 0;
	border-width:0;
	border-radius:8px;
	background-color:#ff8800;
	padding:16px;
	font-family:"Tahoma";
	font-size:160%;
	color:#fff;
	cursor:pointer;
}
.submitbutton:hover { background-color:#ffaa00; }
.submitbutton:disabled { background-color:#c8c8c8; }

/* Call to action buttons */
.cta-button
{
	display: inline-block;
	margin:0.2em auto;
	border-width:0;
	border-radius:8px;
	padding:16px;
	text-align:center;
	color:#fff;
	font-family:Tahoma;
	font-size:160%;
	cursor:pointer;
}
.cta-button a, .cta-button { color:#fff; }
.cta-button a:hover, .cta-button:hover { text-decoration:none; }
.cta-blue { background-color:#3d65b0; }
.cta-blue:hover { background-color:#7393ce; }
.cta-blue:disabled { background-color:#c8c8c8; }
.cta-turquoise { background-color:#16c6af; }
.cta-turquoise:hover { background-color:#3cead5; }
.cta-turquoise:disabled { background-color:#c8c8c8; }
.cta-orange { background-color:#ff8800; }
.cta-orange:hover { background-color:#ffaa00; }
.cta-orange:disabled { background-color:#c8c8c8; }
.cta-button img
{
	display: inline-block;
	margin-left: 6px;
	width: 24px;
	height: 24px;
	vertical-align: middle;
}
.cta-button-sm
{
	border-radius:6px;
	padding:8px;
	font-size:100%;
}

/* Mini Menu module styles */
.minimenu { margin-bottom:16px; }

/* Popover (copied from Beez3 */
.popover {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1010;
	display: none;
	max-width: 276px;
	padding: 1px;
	text-align: left;
	background-color: #fff;
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding;
	background-clip: padding-box;
	border: 1px solid #ccc;
	border: 1px solid rgba(0,0,0,0.2);
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
	box-shadow: 0 5px 10px rgba(0,0,0,0.2);
	white-space: normal;
}
.popover.top {
	margin-top: -10px;
}
.popover.right {
	margin-left: 10px;
}
.popover.bottom {
	margin-top: 10px;
}
.popover.left {
	margin-left: -10px;
}
.popover-title {
	margin: 0;
	padding: 8px 14px;
	font-size: 14px;
	font-weight: normal;
	line-height: 18px;
	background-color: #f7f7f7;
	border-bottom: 1px solid #ebebeb;
	-webkit-border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}
.popover-title:empty {
	display: none;
}
.popover-content {
	padding: 9px 14px;
}
.popover .arrow,
.popover .arrow:after {
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
}
.popover .arrow {
	border-width: 11px;
}
.popover .arrow:after {
	border-width: 10px;
	content: "";
}
.popover.top .arrow {
	left: 50%;
	margin-left: -11px;
	border-bottom-width: 0;
	border-top-color: #999;
	border-top-color: rgba(0,0,0,0.25);
	bottom: -11px;
}
.popover.top .arrow:after {
	bottom: 1px;
	margin-left: -10px;
	border-bottom-width: 0;
	border-top-color: #fff;
}
.popover.right .arrow {
	top: 50%;
	left: -11px;
	margin-top: -11px;
	border-left-width: 0;
	border-right-color: #999;
	border-right-color: rgba(0,0,0,0.25);
}
.popover.right .arrow:after {
	left: 1px;
	bottom: -10px;
	border-left-width: 0;
	border-right-color: #fff;
}
.popover.bottom .arrow {
	left: 50%;
	margin-left: -11px;
	border-top-width: 0;
	border-bottom-color: #999;
	border-bottom-color: rgba(0,0,0,0.25);
	top: -11px;
}
.popover.bottom .arrow:after {
	top: 1px;
	margin-left: -10px;
	border-top-width: 0;
	border-bottom-color: #fff;
}
.popover.left .arrow {
	top: 50%;
	right: -11px;
	margin-top: -11px;
	border-right-width: 0;
	border-left-color: #999;
	border-left-color: rgba(0,0,0,0.25);
}
.popover.left .arrow:after {
	right: 1px;
	border-right-width: 0;
	border-left-color: #fff;
	bottom: -10px;
}

/* The Story iframe style - different for widescreen and mobile */
.the-story { width: 720; height:405; }
@media (max-width: 720px) {
	.the-story { width: 100%; }
}

/* Styles for showing Bible passages in articles */
.bible-textbox
{
	border: 1px solid #666;
	background-color: #ffffcc;
	padding: 6px;
}
.bible-textbox .vnum
{
	font-size:10px;
	vertical-align: super;
	font-family:'Times New Roman';
	color:crimson;
}

/* Blog layout styling (some copied from Cassiopeia) */
.blog-items
{
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 1em;
  margin-left: -.5em;
  margin-right: -.5em;
  padding: 0;
  display: flex;
}
.blog-items p, .blog-items h2, .blog-items h3
{
	display:none;
}

@media (width >= 992px)
{
  .blog-items.columns-2 > div {
    width: 50%;
  }

  .blog-items.columns-3 > div {
    width: 33.3333%;
  }

  .blog-items.columns-4 > div {
    width: 25%;
  }
}

.blog-item {
  flex-direction: column !important;
  padding: 0 .5em 1em;
  display: flex;
  overflow: hidden;
	border:1px solid #aaa;
	background-color:white;
}
.blog-item:hover
{
	background-color:aliceblue !important;
}
.page-header h2
{
	display:inline-block !important;
	font-size:120%;
}
.blog-item p.readmore
{
	display:block;
	width:100px;
	margin:6px auto;
	border: 1px solid #aaa;
	border-radius:6px;
	padding:5px 10px;
	background-color:orange;
}
.blog-item p.readmore a
{
	color:white;
}

.boxed .blog-item {
  box-shadow: 0 0 2px #3339421a, 0 2px 5px #33394214, 0 5px 15px #33394214, inset 0 3px 0 var(--cassiopeia-color-primary);
  background-color: #fff;
}

.boxed .blog-item .item-content {
  padding: 4px 25px;
	height:110px;
}

.blog-item .item-image {
  margin: 0 auto;
  /*overflow: hidden;*/
}

.boxed .blog-item .item-image {
	height:180px;
  margin-bottom: 0;
	overflow:hidden;
}

@media (width >= 992px) {
  .image-right .blog-item .item-image {
    order: 1;
  }
}

.image-bottom .blog-item .item-image {
  order: 1;
  margin-top: -15px;
}

.image-left .blog-item .item-content {
  padding-left: 25px;
}

.image-right .blog-item .item-content {
  padding-right: 25px;
}

.image-left .blog-item, .image-right .blog-item {
  flex-direction: row;
}

@media (width >= 992px) {
  .image-left .blog-item, .image-right .blog-item {
    flex-direction: row;
  }

  .image-left .blog-item .item-image, .image-right .blog-item .item-image {
    flex: 1 0 40%;
  }

  .image-left .blog-item .item-content, .image-right .blog-item .item-content {
    flex: 1 0 60%;
  }
}

.article-info dd {
  padding: 0;
}

@supports (display: grid) {
  .blog-items {
    grid-gap: 1em;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    margin: 0 0 1em;
    display: grid;
  }

  .blog-items .blog-item {
    padding: 0;
  }

  .blog-items[class^="columns-"] > div, .blog-items[class*=" columns-"] > div {
    flex: 0 auto;
    width: auto;
    max-width: none;
  }

  @media (width >= 992px) {
    .blog-items.columns-2 {
      grid-template-columns: 1fr 1fr;
    }

    .blog-items.columns-3 {
      grid-template-columns: 1fr 1fr 1fr;
    }

    .blog-items.columns-4 {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  }
}

.blog-items[class^="masonry-"], .blog-items[class*=" masonry-"] {
  column-gap: 1em;
  display: block;
}

.blog-items[class^="masonry-"] .blog-item, .blog-items[class*=" masonry-"] .blog-item {
  page-break-inside: avoid;
  break-inside: avoid;
  margin-bottom: 1em;
  display: inline-flex;
}

@media (width >= 992px) {
  .blog-items.masonry-2 {
    column-count: 2;
  }

  .blog-items.masonry-3 {
    column-count: 3;
  }

  .blog-items.masonry-4 {
    column-count: 4;
  }
}

.image-alternate .blog-item:nth-of-type(odd) .item-image {
  order: 0;
}

.image-alternate.image-left .blog-item:nth-of-type(odd) .item-image {
  order: 1;
  margin-left: 25px;
  margin-right: 0;
}

.image-alternate.image-top .blog-item:nth-of-type(odd) .item-image {
  order: 1;
}
/* End of blog layout styling */

/* Library component styling using site brand colours for button background */
.library_button {
	background: linear-gradient(0deg, #4265ae, #4e9692);
}