/**
 * New hymnary theme, based on the design by Paul Stoub.
 * Initially copied from Garland, for Drupal 5.0
 * Stefan Nagtegaal, iStyledThis [dot] nl
 * Steven Wittens, acko [dot] net`
 */

 :root {
  --primary-color: #98023e;
  --primary-dark: #7a0225;
  --primary-darker: #670c24;
  --secondary-color: #0a3f64;
  --link-color: #007ac6;
  --link-dark: #2f5ca0;
  --description-color: #6f99b6;
  --border-color: #ADA999;
  --error-color: #dc3545;
  --font-serif: Georgia, serif;
}

/**
 * Provide better support for Arabic script
 */
@font-face {
  font-family: 'NotoSansArabicOnly';
  src: url('fonts/NotoSansArabic-VariableFont_wdth,wght.ttf') format('truetype');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/**
 * Generic elements
 */
body {
	margin: 0;
	padding: 0;
	background: #ada999;
	font: 12px/170% 'NotoSansArabicOnly', Verdana, sans-serif;
	color: #0a3f64;
}

.ui-widget {
	font-family: 'NotoSansArabicOnly',Verdana,Arial,sans-serif;
}

input {
	font: 12px/100% 'NotoSansArabicOnly', "Verdana", sans-serif;
	color: #0a3f64;
}

textarea {
	font: 12px/160% 'NotoSansArabicOnly', "Lucida Console", Monaco, monospace;
	color: #0a3f64;
}

select {
	font: 12px/160% 'NotoSansArabicOnly', "Verdana", sans-serif;
	color: #0a3f64;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 2px 0px;
	font-weight: normal;
	font-family: 'NotoSansArabicOnly', "Helvetica", Arial, sans-serif;
	color: #98023e;
}

.front-page-title {
	text-align: center;
	font-size: 2em;
	margin: 100px 0 6px;
}
.page-title, .page-title a:link, .page-title a:visited {
	color: #98023e;
	background: #c8c3b0;
	margin-bottom: 0.5em;
	padding: 2px 4px;
	overflow: hidden;
}

#social-blocks {
	float: right;
	padding: 2px 0;
}

#social-blocks .block {
	float: left;
	display: inline-block;
	height: 20px;
}

#social-blocks .content p {
	padding: 0;
}

#social-block-only {
	height: 24px;
}

/* Don't show the header for social blocks */
#social-blocks .block h2 {
	display: none;
}

/* Override Drupal Form's ridiculous margin */
#social-blocks .block .content form .form-submit {
	margin: 2px;
}

/* Display with margin on the home page to line up with user links. */
body.front #social-blocks
{
	margin-right: 2em;
}

.page-title h1 {
	display: inline-block;
	padding: 0;
}

h2.breadcrumb {
	margin-bottom: 0;
}

h2.title {

}

h1 {
	font-size: 170%;
}

h2, .page-title h1 {
	font-size: 160%;
	line-height: 130%;
}

h3 {
	font-size: 140%;
}

h4 {
	font-size: 130%;
}

h5 {
	font-size: 120%;
}

h6 {
	font-size: 110%;
}

ul, quote, code, fieldset {
	margin: .5em 0;
}

p {
	margin: 0.6em 0 1.2em;
	padding: 0;
}

a:link, a:visited {
	color: #027AC6;
	text-decoration: none;
}

a:hover {
	color: #0062A0;
	text-decoration: underline;
}

a:active, a.active {
	color: #5895be;
}

hr {
	margin: 0;
	padding: 0;
	border: none;
	height: 1px;
	background: #c9c4b1;
}

ul {
	margin: 0.5em 0 1em;
	padding: 0;
}

ul li {
	margin: 0.4em 0 0.4em .5em;
}

ul.menu, .item-list ul {
	margin: 0.35em 0 0 -0.5em;
	padding: 0;
}

ul.menu ul, .item-list ul ul {
	margin-left: 0em;
}

ul li, ul.menu li, .item-list ul li, li.leaf {
	margin: 0.15em 0 0.15em .5em;
}

ul li, ul.menu li, .item-list ul li, li.leaf {
	padding: 0 0 .2em 1.5em;
	list-style-type: none;
	list-style-image: none;
	background: transparent url(menu-leaf.gif) no-repeat 1px .35em;
}

ul li.expanded {
	background: transparent url(menu-expanded.gif) no-repeat 1px .35em;
}

ul li.collapsed {
	background: transparent url(menu-collapsed.gif) no-repeat 0px .35em;
}

ul li.leaf a, ul li.expanded a, ul li.collapsed a {
	display: block;
}

ul.inline li {
	background: none;
	margin: 0;
	padding: 0 1em 0 0;
}

fieldset ul.clearfix li {
	margin: 0;
	padding: 0;
	background-image: none;
}

dl {
	margin: 0.5em 0 1em 1.5em;
}

dl dt {
}

dl dd {
	margin: 0 0 .5em 1.5em;
}

img, a img {
	border: none;
}

.csstable
{
	width: 100%;
	display: table;
}
.csstr
{
	display: table-row;
}
.csstd
{
	display: table-cell;
}
.csscaption
{
	display: table-caption;
}

table {
	margin: 1em 0;
	width: 100%;
}

thead th {
	border-bottom: 2px solid #ada999;
	color: #0a3f64;
	font-weight: bold;
}

th {
	background-color: #c8c3b0;
}

th h3 {
	padding: 0;
}

th a:link, th a:visited {
	color: #6f9dbd;
}

td, th {
	padding: .3em .5em;
}

tbody {
	border: none;
}

tr.even, tr.odd, tbody th
{
	border: solid #c9c4b1;
	border-width: 1px 0;
}

/* Add vertical blue bar to new forum topics icon */
tr.new-topic td.icon
{
	position: relative;
}
tr.new-topic td.icon::before
{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 5px;
	background: #6f9dbd;
	content: '';
}

/* Make new forum topics bold */
tr.new-topic
{
	font-weight: bold;
}

/* Add blue dot to new forum topics */
tr.new-topic td.new-indicator::after
{
	font-size: 2em;
	color: #6f9dbd;
	content: "\2022";
}

.csstr.odd, tr.odd, tr.info
{
	background-color: #f0edd3;
}

.csstr.even, tr.even {
	background-color: #fff;
}

tr.odd td.active {
	background-color: #dedac3;
}

tr.even td.active {
	background-color: #e0ddc5;
}

tr.inset td:first-child {
	padding-left: 25px;
}

td.region, td.module, td.container {
	border-top: 1.5em solid #e9e6cd;
	border-bottom: 1px solid #ada999;
	background-color: #c9c4b1;
	color: #4f4d46;
	font-weight: bold;
}

tr:first-child td.region, tr:first-child td.module, tr:first-child td.container {
	border-top-width: 0;
}

span.form-required {
	color: #ffae00;
}

span.submitted, .description {
	font-size: 0.92em;
	color: #898989;
}

.description {
	line-height: 150%;
	margin-bottom: 0.75em;
	color: #898989;
}

div .messages, .preview {
	margin: .75em 0 .75em;
}
div .warning {
	font-weight: normal;
	color: #9c7d15;
	border-color: #9c7d15;
}

.messages ul {
	margin: 0;
}

.form-checkboxes, .form-radios, .form-checkboxes .form-item, .form-radios .form-item {
	margin: 0.25em 0;
}

.form-button, .form-submit {
	margin: 2em 0.5em 1em 0;
}

.messages.green {
	border-color: #c9c4b1;
	background-color: #f8fff0;
	padding: 5px;
}

#watchdog-form-overview .form-submit,
.confirmation .form-submit,
.search-form .form-submit,
.poll .form-submit,
fieldset .form-button, fieldset .form-submit,
.sidebar .form-button, .sidebar .form-submit,
table .form-button, table .form-submit,
.add_to_cart .form-submit {
	margin: 0;
}

.box {
	margin-bottom: 2.5em;
}

/**
 * Buttons
 */
.btn, .btn:link, .btn:visited {
  min-width: 15em;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0.1em 1em;
  height: 32px;
  box-sizing: border-box;
  border-radius: 4px;
  font-family: 'NotoSansArabicOnly', Verdana, sans-serif;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  line-height: 30px;
  background: var(--primary-color);
  color: white;
  border: 1px solid var(--border-color);
  box-shadow: 0 0 3px var(--border-color);
  -webkit-appearance: none;
}
.btn-primary,
.btn-link {
  border: 1px solid var(--border-color);
}
.btn-primary {
  background: var(--primary-color);
}
.btn-link {
  background: var(--link-color);
}
.btn:hover,
.btn-primary:hover,
.btn-link:hover {
  text-decoration: none;
  background: var(--primary-dark);
  border-color: var(--border-color);
}
.btn-link:hover {
  background: var(--link-dark);
}
.btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-darker);
}
.btn-secondary {
  background: white;
  color: #49121f;
  border: 1px solid var(--border-color);
}
.btn-secondary:hover {
  background: #c8c3b0;
  border-color: var(--primary-darker);
  border: 1px solid var(--border-color);
}
.btn-small,
.btn-link {
  height: 28px;
  padding: 0.1em 0.8em;
  font-size: 12px;
  font-weight: normal;
  line-height: 26px;
}
.btn-large {
  height: 40px;
  padding: 0.1em 1.5em;
  font-size: 16px;
  line-height: 38px;
}
/* The sparkles icon is initially used for AI Hymn Recommender */
i.fa-sparkles {
  color: gold;
  text-shadow: 0 0 1px #000;
}

/**
 * Layout
 */
#header-region {
	min-height: 1em;
	background: #d2e6f3 url(bg-navigation.png) repeat-x 50% 100%;
}

#header-region .block {
	display: block;
	margin: 0 1em;
}

#header-region .block-region {
	display: block;
	margin: 0 0.5em 1em;
	padding: 0.5em;
	position: relative;
	top: 0.5em;
}

#header-region * {
	display: inline;
	line-height: 1.5em;
	margin-top: 0;
	margin-bottom: 0;
}

/* Avoid displaying content of script tags */
#header-region script {
	display: none;
}

#header-region p, #header-region img {
	margin-top: 0.5em;
}

#header-region h2 {
	margin: 0 1em 0 0;
}

#header-region h3, #header-region label, #header-region li {
	margin: 0 1em;
	padding: 0;
	background: none;
}

/* Use traditional clearfix, rather than Drupal's `content: '.'` version
 * (Fixes hamburger menu problem).
 */
.clearfix::after {
	content: ' ';
}

#wrapper #container {
	margin: 0 auto;
	height: 100%;
}

#mobile-user-links {
	display: none;
}

#wrapper #container #header {
	position: relative;
	height: 82px;
}

#wrapper #container #header #logo-floater {
	position: absolute;
	height: inherit;
}

#logo-floater a {
	width: 100%;
	position: absolute;
	height: inherit;
}

#logo_h_background {
	position: absolute;
	top: 0;
	left: 60px;
	height: 105px;
	width: 80px;
	background: #98032E;
}
#logo_h_background a
{
	display: none;
}

#logo_h_foreground{
	z-index: 10;
}

#logo-floater img {
	height: auto;
	width: 406px;
	pointer-events: none;
}

/* To insure that the logo floats on top */
#logo-floater {
	z-index: 5;
}

#compactLogo
{
	display: none;
}

#wrapper #container #header h1, #wrapper #container #header h1 a:link, #wrapper #container #header h1 a:visited {
	line-height: 120px;
	position: relative;
	z-index: 2;
	white-space: nowrap;
}

#wrapper #container #header h1 span {
	font-weight: bold;
}

body.two-sidebars {
	min-width: 700px;
}
body.sidebar-first, body.sidebar-second {
	min-width: 700px;
}

/* We must define 100% width to avoid the body being too narrow for near-empty pages */
#wrapper #container #center {
	float: left;
	width: 100%;
	padding-bottom: 1em;
}

/* So we move the #center container over the sidebars to compensate */
body.sidebar-first #center {
	margin-left: -150px;
}
body.sidebar-second #center {
	margin-right: -172px;
}
body.two-sidebars #center {
	margin: 0 -172px 0 -152px;
}

/* Modifications for wider sidebar on hymn page */
body.sidebar-first-hymn #center {
	margin-left: -250px;
}
body.sidebars-hymn #center {
	margin: 0px -172px 0px -250px;
}

/* And add blanks left and right for the sidebars to fill */
body.sidebar-first #squeeze {
	margin-left: 150px;
}
body.sidebar-second #squeeze {
	margin-right: 172px;
}
body.two-sidebars #squeeze, #before {
	margin: 0 172px 0 152px;
}

body.sidebar-first-hymn #squeeze {
	margin-left: 250px;
}
body.sidebars-hymn #squeeze {
	margin: 0px 172px 0px 250px;
}

/* We don't leave room for the sidebar for featured hymns, so that
   its sidebar blends in. */
#featured_squeeze {
	margin: 0px 152px 0px 20em;
	background: #e9e6cd;
	position: relative;
	padding: 0;
}

/* We ensure the sidebars are still clickable using z-index */
#wrapper #container .sidebar {
	margin: 0px 0 5em;
	width: 150px;
	float: left;
	z-index: 2;
	position: relative;
}

#sidebar-first {
	background: #c9c4b1;
	border-bottom: 1px solid #49121f;
}

#wrapper #container .sidebar-hymn {
	margin: 0px 0 5em;
	width: 250px;
	min-height: 500px;
	float: left;
	z-index: 2;
	position: relative;
}

#sidebar-first-hymn {
	background: #E9E6CD;
	border-bottom: 1px solid #49121f;
}

#sidebar-first-hymn .block {
	padding: 0;
}

/* for maximizing sidebar table space */
#sidebar-first-hymn td, #sidebar-first-hymn th {
	padding: 3px 0px;
}

#wrapper #container #sidebar-second {
	width: 170px;
	float: none;
	display: inline-block;
}
#sidebar-second .block {
	color: white;
	margin: .5em;
}
/* Advertisements */
#sidebar-second .block-advertising img {
    max-width: 160px;
}
#sidr .block-advertising img {
    max-width: 220px;
}

#sidr {
	overflow: hidden;
}

#sidebar-second .block a, #sidebar-second .block a:visited, #sidebar-second .block a:active {
	color: white;
}

#sidebar-first .block-region {
	margin: 0 15px 0 0px;
}

#sidebar-second .block-region {
	margin: 0 0px 0 15px;
}

.block-region {
	padding: 1em;
	background: transparent;
	border: 2px dashed #ebdfa1;
	text-align: center;
	font-size: 1.3em;
}

/* Theming for the admin links box */

#admin-links, #admin-links ul {
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1.75em;
	text-align: left;
	z-index: 1000;
}

#admin-links a {
	display: block;
	width: 145px;
	padding-left: 4px;
	z-index: 1000;
}

#admin-links a img.uc-store-icon {
	text-decoration: none;
	float: left;
	margin: 3px 6px 3px 2px;
}

#admin-links li {
	margin: 0 !important;
	padding: 0;
	background-color: #98032E;
	background-image: none;
	border: solid 1px black;
	float: left;
	width: 145px;
	z-index: 1000;
}

#admin-links li ul{
	position: absolute;
	width: 145px;
	display:none;
	margin: -1.75em 0 0 145px;
	z-index: 1000;
}

#admin-links li ul li {
	background-color: #C8C3B0;
}

#sidebar-second div #admin-links li ul {
	margin:-1.75em 0pt 0pt -145px;
}

#sidebar-second div #admin-links li ul a {
	color: #98023E;
}

#admin-links li:hover ul ul, #admin-links li:hover ul ul ul, #admin-links li.sfhover ul ul, #admin-links li.sfhover ul ul ul {
	display:none;
}

#admin-links li:hover ul, #admin-links li li:hover ul, #admin-links li li li:hover ul, #admin-links li.sfhover ul, #admin-links li li.sfhover ul, #admin-links li li li.sfhover ul {
	display:block;
}

#wrapper {
	width: 100%;
}

/* Now we add the backgrounds for the main content shading */
#wrapper #container #center #squeeze {
	background: #e9e6cd;
	position: relative;
	padding: 1em;
}

#wrapper #container #footer {
	float: none;
	clear: both;
	text-align: center;
	padding: 1em 0 0 0;
	color: #fff;
	background-color: #ada999;
	margin: 1em -1em -1em -1em;
}

#footer a, #footer a:visited, #footer a:active {
	color: #fff;
}

body.sidebar-first #footer {
	margin-left: -150px;
}

body.sidebar-second #footer {
	margin-right: -170px;
}

body.two-sidebars #footer {
	margin: 0 -170px 0 -150px;
}

#footer-logos {
	margin: 0 auto;
	width: 70%;
}

#footer-logos img:not(.nospace) {
	vertical-align: top;
	padding: 17px 1em;
}

#footer-rule {
	color: #fff;
	background-color: #fff;
	height: 1px;
	width: 100%;
	margin: 0.5em 0;
}

/**
 * Header
 */
#header {
	background: #49121f;
}

#header-bar {
	background-color: #98032E;
	height: 42px;
	line-height: 42px;
	padding-left: 160px;

	position: relative;
}

#header-bar img {
	margin-top: 15px;
	float: left;
}

#search-front-container {
	margin: 0 auto;
	width: 456px;
}

#search-box {
	float: left;
	border: 1px solid #ADA999;
	background: white;
	width: 370px;
	padding: 0 5px 0 5px;
	margin: 0;
	font-size: 120%;
	border-radius: 4px 0 0 4px;
	height: 30px;
	line-height: 30px;
	box-shadow: 0 0 3px #ADA999;
}

#search-box:hover {
	box-shadow: 0 0 12px #ADA999;
}

#search-submit {
	color: white;
	background: #98032E;
	border-radius: 0 4px 4px 0;
	font-size: 120%;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
	border: 1px solid #670c24;
	margin: 0;
	height: 32px;
	width: 73px;
	box-shadow: 0 0 3px #ADA999;
	-webkit-appearance: none;
}

#search-submit:hover {
	background: #670c24;
	box-shadow: 0 0 12px #ADA999;
}

/* Styling for advanced search autocomplete */
span.twitter-typeahead
{
	width: 100%;
}
.tt-menu
{
	background-color: white;
	border-width: 1px 2px 2px 2px;
	border-style: solid;
	border-color: rgba( 0, 0, 0, 0.2 );
	border-radius: 0px 0px 5px 5px;
}
#search-box-tt-menu
{
	top: 30px;
}
#search-box-tt-dataset
{
	padding: 0.2em;
}
#search-box-tt-dataset>div
{
	font-size: 120%;
	padding: 0.1em;
}
.tt-suggestion
{
	padding: 0em 0.5em 0em 0.5em;
}
.tt-input,
.tt-highlight
{
	color: #0a3f64;
}
.tt-hint
{
	color: #9fb6c6;
}
.tt-dataset
{
	color: #60869f;
}
.tt-cursor, .tt-selectable:hover
{
	cursor: pointer;
	color: #ffffff;
	background-color: #027ac6;
}
.tt-selectable:hover > .tt-highlight
{
	color: #ffffff;
}

#wrapper #container #header h1, #wrapper #container #header h1 a:link, #wrapper #container #header h1 a:visited {
	color: #fff;
	font-weight: normal;
	text-shadow: #1659ac 0px 1px 3px;
	font-size: 1.5em;
}

#wrapper #container #header h1 a:hover {
	text-decoration: none;
}

.breadcrumb a {
	font-size: 0.92em;
}

#highlighted {
	padding: 1em;
	background-color: #fff;
	border: 1px solid #e0e5fb;
	margin-bottom: 2em;
}

/**
 * Primary navigation, now with superfish
 */
ul.primary-links {
	margin: 0 5em 0 0;
	padding: 0;
	float: right;
	position: relative;
	z-index: 5;
}

ul.primary-links li {
	margin: 0;
	padding: 0;
	float: left;
	background: none;
}

ul.primary-links li a, ul.primary-links li a:link, ul.primary-links li a:visited {
	display: block;
	padding: .75em 1em;
	color: #cec48d;
	font-size: 15px;
	background-color: #49121F;
}

ul.primary-links li a:hover {
	color: #fff;
	background-color: #98032e;
	text-decoration: none;
}

ul.primary-links li.menuparent > a {
	padding-right: 2em;
}

ul.primary-links ul {
	margin-top: 1em;
}

/**
 * Secondary navigation
 */
ul.secondary-links {
	float: right;
	clear: right;
	position: relative;
	z-index: 6;
}

ul.secondary-links.secondary-links li {
	margin: 0;
	padding: 0 .5em;
	float: left;
	background-image: none;
}

ul.secondary-links li a, ul.secondary-links li a:link, ul.secondary-links li a:visited {
	display: block;
	margin: 1em 1em 0 0;
	color: #cec48d;
	background: transparent;
}
.secondary-links-separator {
	background: transparent;
	color: #907159;
	display: block;
	font-size:  1.5em;
	margin: 0.75em 0.5em 0 0;
}

ul.secondary-links li a:hover, ul.secondary-links li a.active {
	color: #fff;
	background: transparent;
}

/**
 * Local tasks
 */
ul.primary, ul.primary li, ul.secondary, ul.secondary li {
	border: 0;
	background: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

#tabs-wrapper {
	position: relative;
}

ul.tabs.primary, ul.tabs.secondary {
	white-space: normal;
	line-height: 27px;
}

ul.primary {
	padding: 0.5em 0 10px;
	float: left;
}
ul.secondary {
	clear: both;
	text-align: left;
	padding: 0 26px 0.6em;
}

ul.primary li a, ul.primary li.active a, ul.primary li a:hover, ul.primary li a:visited,
ul.secondary li a, ul.secondary li.active a, ul.secondary li a:hover, ul.secondary li a:visited {
	border: 0;
	background: transparent;
	color: #49121f;
	padding: 4px 1em;
	margin: 0 0 0 1px;
	height: auto;
	text-decoration: none;
	position: relative;
	top: -1px;
}
ul.primary li.active a, ul.primary li.active a:link, ul.primary li.active a:visited, ul.primary li a:hover,
ul.secondary li.active a, ul.secondary li.active a:link, ul.secondary li.active a:visited, ul.secondary li a:hover {
	background: url(bg-tab.png) repeat-x 0 50%;
	color: #fff;
}
ul.primary li.active a,
ul.secondary li.active a {
	font-weight: bold;
}

/**
 * Nodes & comments
 */
ul.links li, ul.inline li {
	margin-left: 0;
	margin-right: 0;
	padding-left: 1em;
	padding-right: 0;
	background-image: none;
}

.node .links, .comment .links {
	text-align: left;
}

.node .links ul.links li, .comment .links ul.links li {}
.terms ul.links li {
	margin-left: 0;
	margin-right: 0;
	padding-right: 0;
	padding-left: 1em;
}

.user-picture, .comment .submitted {
	float: right;
	clear: right;
	padding-left: 1em;
}

.new {
	color: #ffae00;
	font-size: 0.92em;
	font-weight: bold;
	float: right;
}

.terms {
	float: right;
}

.preview .node, .preview .comment, .sticky {
	margin: 0;
	padding: 0.5em 0;
	border: 0;
	background: 0;
}

.sticky {
	padding: 1em;
	background-color: #fff;
	border: 1px solid #e0e5fb;
	margin-bottom: 2em;
}

#comments {
	position: relative;
	top: -1px;
	border-bottom: 1px solid #c9c4b1;
	margin: -1.5em 0;
	padding: 0 25px;
}

#comments h2.comments {
	margin: 0 -25px;
	padding: .5em 25px;
	background: #fff url(gradient-inner.png) repeat-x 0 0;
}

.comment {
	margin: 0 -25px;
	padding: 1.5em 25px 1.5em;
	border-top: 1px solid #c9c4b1;
}

.indented {
	margin-left: 25px;
}

.comment h3 a.active {
	color: #0a3f64;
}

.node .content, .comment .content {
	margin: 0.6em 0;
	position: relative;
}

/**
 * Aggregator.module
 */
#aggregator {
	margin-top: 1em;
}
#aggregator .feed-item-title {
	font-size: 160%;
	line-height: 130%;
}
#aggregator .feed-item {
	border-bottom: 1px solid #c9c4b1;
	margin: -1.5em -31px 1.75em;
	padding: 1.5em 31px;
}
#aggregator .feed-item-categories {
	font-size: 0.92em;
}
#aggregator .feed-item-meta {
	font-size: 0.92em;
	color: #898989;
}

/**
 * Color.module
 */
#palette .form-item {
	border: 1px solid #fff;
}
#palette .item-selected {
	background: #fff url(gradient-inner.png) repeat-x 0 0;
	border: 1px solid #d9eaf5;
}

/**
 * Menu.module
 */
tr.odd td.menu-disabled {
	background-color: #e9e5cd;
}
tr.even td.menu-disabled {
	background-color: #fff;
}
td.menu-disabled {
	opacity: 0.5;
}

/**
 * Poll.module
 */
.poll .bar {
	background: #fff url(bg-bar-white.png) repeat-x 0 0;
	border: solid #f0f0f0;
	border-width: 0 1px 1px;
}

.poll .bar .foreground {
	background: #71a7cc url(bg-bar.png) repeat-x 0 100%;
}

.poll .percent {
	font-size: .9em;
}

/**
 * Autocomplete.
 */
#autocomplete li {
	cursor: default;
	padding: 2px;
	margin: 0;
}

#autocomplete {
	min-width: 300px;
}

/**
 * Collapsible fieldsets
 */
fieldset {
	margin: 1em 0;
	padding: 1em;
	border: 1px solid #ada999;
	background: #e9e6cd;
}

fieldset legend {
	color: #525049;
	/* Fix disappearing legend in FFox */
	display: block;
}

html.js fieldset.collapsed {
	background: transparent;
	padding-top: 0;
	padding-bottom: .6em;
}

/**
 * make fieldset arrow clickable
 */
a.fieldset-title {
	margin-left:-10px;
	padding-left:10px;
}

/**
 * Syndication icons and block
 */
#block-node-syndicate h2 {
	float: left;
	padding-right: 20px;
}

#block-node-syndicate img, .feed-icon {
	float: right;
	padding-top: 4px;
}

#block-node-syndicate .content {
	clear: right;
}

/**
 * Login Block
 */
#user-login-form {
	text-align: center;
}
#user-login-form ul {
	text-align: left;
}

#hymnary-login-form {
	text-align: left;
}
#hymnary-login-form ul {
	text-align: left;
}
#hymnary-login-form div {
	margin-top: 0px;
	margin-bottom: 0px;
}

/**
 * Admin Styles
 */
div.admin-panel,
div.admin-panel .description,
div.admin-panel .body,
div.admin,
div.admin .left,
div.admin .right,
div.admin .expert-link,
div.item-list,
.menu {
	margin: 0;
	padding: 0;
}

div.admin .left {
	float: left;
	width: 48%;
}
div.admin .right {
	float: right;
	width: 48%;
}

div.admin-panel {
	background: #fff url(gradient-inner.png) repeat-x 0 0;
	padding: 1em 1em 1.5em;
}
div.admin-panel .description {
	margin-bottom: 1.5em;
}
div.admin-panel dl {
	margin: 0;
}
div.admin-panel dd {
	color: #898989;
	font-size: 0.92em;
	line-height: 1.3em;
	margin-top: -.2em;
	margin-bottom: .65em;
}

table.system-status-report th {
	border-color: #c9c4b1;
}

#autocomplete li.selected, tr.selected td, tr.selected td.active {
	background: #027ac6;
	color: #fff;
}

tr.selected td a:link, tr.selected td a:visited, tr.selected td a:active {
	color: #d3e7f4;
}

/**
 * CSS support
 */
span.clear {
	display: block;
	clear: both;
	height: 1px;
	line-height: 0px;
	font-size: 0px;
	margin-bottom: -1px;
}

/*******************************************************************
 * Color Module: Don't touch                                       *
 *******************************************************************/

/**
 * Generic elements.
 */
.messages {
	background-color: #fff;
	border: 1px solid #c9c4b1;
}

.preview {
	background-color: #fcfce8;
	border: 1px solid #c9c4b1;
}

div.status {
	color: #525049;
	border-color: #c9c4b1;
}

div.error {
	color: #c52020;
}

.form-item input.error, .form-item textarea.error {
	border: 1px solid #c52020;
	color: #0a3f64;
}

/**
 * Watchdog.module
 */
tr.watchdog-user {
	background-color: #fcf9e5;
}

tr.watchdog-user td.active {
	background-color: #fbf5cf;
}

tr.watchdog-content {
	background-color: #fefefe;
}

tr.watchdog-content td.active {
	background-color: #f5f5f5;
}

tr.watchdog-warning {
	background-color: #fdf5e6;
}

tr.watchdog-warning td.active {
	background-color: #fdf2de;
}

tr.watchdog-error {
	background-color: #fbe4e4;
}

tr.watchdog-error td.active {
	background-color: #fbdbdb;
}
tr.watchdog-page-not-found, tr.watchdog-access-denied {
	background: #fdf2de;
}
tr.watchdog-page-not-found td.active, tr.watchdog-access-denied td.active {
	background: #fdf5d6;
}

/**
 * Status report colors.
 */
table.system-status-report tr.error, table.system-status-report tr.error th {
	background-color: #fcc;
	border-color: #ebb;
	color: #200;
}
table.system-status-report tr.warning, table.system-status-report tr.warning th {
	background-color: #ffd;
	border-color: #eeb;
}
table.system-status-report tr.ok, table.system-status-report tr.ok th {
	background-color: #dfd;
	border-color: #beb;
}


a.alt_color {
	color: #8a032a;
}

div.custom_catalog {
	float: left;
	margin-right: 1em;
	margin-bottom: 1em;
	border: 1px solid #C8C3B0;
	background: white;
}

div.custom_catalog h2 {
	padding: 0.25em 0.5em;
	background-color: #C8C3B0;
}

div.custom_catalog .content {
	padding: 0.25em 0.5em;
	background: white;
}

div.seller_tools {
	border: 1px solid #C8C3B0;
	padding: 0.5em;
	float: left;
	clear: right;
}

div.storefront_teaser .field-field-storelogo {
	float: right;
	margin-left: 0.5em;
	margin-right: 1.5em;
}

div.storefront_footer {
	clear: both;
	text-align: center;
	font-size: 11px;
}


table.minitable {
	width: auto;
	margin-top: 0px;
}

table.minitable td, table.minitable th {
	padding: 0.1em 0.75em;
}

/*
 * rules for blocks
 */

.region:not( .region-content ) div.block li {
	font-size:90%;
	margin-top:0pt;
	margin-bottom:0pt;
	}

div.block-user {
	overflow: hidden;
}

span.catalog_grid_description {
	font-size:90%;
}

#category-grid-products table {
	border-collapse: separate;
	border-spacing: 2.5em;
}

#category-grid-products td {
	width: 25em;
}

#category-grid-products tr {
	background-color: #FFFFFF;
}

img.imagecache-product_list {
	max-height: 160px;
	max-width: 100px;
}
img.imagecache-product {
	box-shadow: 2px 2px 8px #5D5B52;
}

div.product-collection-list {
	position: relative;
	margin-bottom: 0.5em;
}

div.product-collection-list.collapsed {
	max-height: 17em; /* 10 lines, where line height is 170% */
	overflow: hidden;
}

div.product-collection-list.expanded {
	padding-bottom: 1.7em;
}

div.product-collection-list.collapsed #expand-container {
	top: 0px;
}

div.product-collection-list #expand-container {
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: 1.7em;
	margin-top: 15.3em; /* max list collapsed height of 17em minus expander height of 1.7em */
}

div.product-collection-list #expander {
	position: absolute;
	width: 100%;
	bottom: 0px;
	background-color: #ada999;
	text-align: center;
}

div.product-collection-list #expander:hover {
	background-color: #c8c3b0;
}

div.product-qty {
	margin-left: 0.75em;
}

/* Expand & Collapse People Biographies */

div.biotext.collapsed {
	max-height: 13.6em; /* 8 lines, where line height is 170% */
}
div.biotext.expanded {
	max-height: 1000em;
}

div.biotext > * {
	margin-top: 0;
}

div.view-product-grid {
	text-align: center;
	clear: both;
}
div.view-product-grid table {
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 2.5em;
	margin-top: 0;
}
div.view-product-grid td {
	background: white;
	padding: 1.5em;
}
div.view-product-grid div.views-field-teaser {
	font-size: 90%;
	text-align: left;
}
#center div.view-product-grid form {
	margin-bottom: 0;
}

span.report-header-logo {
	font-family: Oxford;
	font-size: 16pt;
}

p.report-header {
	text-align: center;
}

/* infoTables need less padding */
table.infoTable td {
	padding: 2px;
	padding-right: 1.5em;
}

p.poetry {
	margin: 0 0 0 1in;
	text-indent: -0.5in;
}

/* Mobile shopping cart ( in 'Before content' ) should be normally hidden */
#block-hymnary_ecommerce-BLOCK_MOBILE_CART {
	display: none;
}

#container.clearfix {
	display: block;
}

/* Give: Basic page columns */
#giving-description address {
    padding-left: 1.5em;
}
#giving-description ul ul {
    margin-bottom: 0;
}
#giving-description ul ul p {
    margin-bottom: 0;
    margin-top: 0.3em;
}
#giving-salesforce {
    margin-top: -2em;
    width: 100%;
}

/* Basic page columns */
.group-container-flex.field-group-div > h2 {
    display: none;
}
.group-container-flex.field-group-div {
    column-gap: 2em;
    display: flex !important;
    flex-flow: row wrap;
}
.field-name-field-body-col-1 {
    width: 56%;
}
.field-name-field-body-col-2 {
    width: 40%;
}
/* TODO: Use bootstrap in place of flex columns */
@media (min-width: 992px) and (max-width: 1199px) {
    .field-name-field-body-col-1 {
        width: 48%;
    }
    .field-name-field-body-col-2 {
        width: 48%;
    }
}
@media (max-width: 991px) {
    .field-name-field-body-col-1 {
        width: 100%;
    }
    .field-name-field-body-col-2 {
        width: 100%;
    }
}

footer a {
	cursor: pointer;
}

div#sidr {
    overflow: visible;
    height: 100% !important;
}
div#sidebar-second {
    overflow: visible !important;
    height: 100% !important;
    display: block;
    position: absolute !important;
    right: 0 !important;
}
[id="hymnary.org_left_rail_sticky"], [id="hymnary.org_right_rail_bottom"] {
    position: sticky;
    top: 90px;
    /* This rule should be applied elsewhere, but Safari overrides it for some reason */
    display: flex !important;
}
#container {
    position: relative;
}

[id="hymnary.org_right_rail_top"] {
    padding-top: 0.5em;
    --height: fit-content !important;
}

div[data-freestar-ad] {
    padding-bottom: 0.5em;
    --height: fit-content !important;
}

div[data-freestar-ad]:has(> div:empty) {
    padding-bottom: 0 !important;
}

div[data-freestar-ad] > div:empty {
    height: 0 !important;
}