/*
 * Theme Name  : uua-congregation Child Theme
 * Theme URI   : http://www.bruu.org/gallery/uua-congregation/
 * Description : uua-congregation Child Theme
 * Author      : BRUU
 * Author URI  : https://www.bruu.org
 * Template    : uua-congregation
 * Version     : 1.0.0
 *
 * Add Your Custom CSS Below This Line
---------------------------------------------------------------- */


/**************************/
/* Banner on every page
 *
 */
/* Header logo area */
.logo-area            {
  background-image    : url(banner-left.png);
  background-position : right bottom;
  background-size     : cover;
}

/* Right area for tag line */
.header-right         {
  text-transform      : inherit;
}
.header-right .header-text-field   ,
.header-right .social-media-links  {
  margin              : 0;
}
.header-right .header-text-field h4     {
  margin              : 0;
}

/* Small Devices, Tablets */
@media only screen and (min-width: 768px) {
  .header-right         {
    background-image    : none;
    height              : auto;
  }
}

/* Medium Devices, Desktops */
@media only screen and (min-width: 992px) {
  .header-right         {
    background-image    : url(banner-right.png);
    background-position : right bottom;
    background-size     : cover;
    height              : 110px;
  }
  .header-right .header-text-field {
    position            : absolute;
    bottom              : 0;
    right               : 0;
  }
  /* The slogan in the banner area */
  .cls-tagline          {
       font-size        : 2.0em;
  }
}



/**************************/
/* All links */
.primary-content a:not(.btn)  ,
.right-sidebar   a:not(.btn)  {
  border              : 3px solid transparent;
  text-decoration     : underline;
}
.primary-content a:not(.btn):hover  ,
.right-sidebar   a:not(.btn):hover  {
  color               : #153377;
  text-decoration     : none;
}
.primary-content a:not(.btn):visited  ,
.right-sidebar   a:not(.btn):visited  {
  color               : #016088;
}
.primary-content a:not(.btn):focus  ,
.right-sidebar   a:not(.btn):focus  {
  outline             : #0099CC solid 2px;
}
.primary-content a:not(.btn):focus img ,
.right-sidebar   a:not(.btn):focus img {
  outline             : #0099CC solid 2px;
}

/* Links that open a new tab or window
 *  We have added a message that displays on hover & focus.
 *  See footer.php JavaScript
 */
a[target="_blank"]     {
  position:relative;
  z-index:24;
}
a[target="_blank"]:hover  ,
a[target="_blank"]:focus  ,
a[target="_blank"]:active {
  z-index:25;
  background-color:#ff0
}
/* We have injected a message span into each link with target="_blank".
 *  Usually hide the message span by showing it off-screen
 *  The span is still "visible" to screen readers
 */
@media screen {
a[target="_blank"]{
    border          : 1px solid red;
}
  a[target="_blank"]  .cls-link-window-message {
    position        : absolute;
    left            : -9000px;
    width           : 0;
    overflow        : hidden;
  }
  /* Show the message when needed  */
  a[target="_blank"]:hover  .cls-link-window-message  ,
  a[target="_blank"]:focus  .cls-link-window-message  ,
  a[target="_blank"]:active .cls-link-window-message  {
    background-color: #fcfff2;
    border          : 1px solid #0cf;
    border-radius   : 0.5em;
    box-shadow      : -0.2em -0.2em 1em #607523 inset, 0.1em 0.1em 0.3em #607523 inset;
    color           : #000;
    display         : block;
    font-size       : initial;
    font-weight     : initial;
    font-style      : initial;
    padding         : 0.2em;
    position        : absolute;
    top             : 1em;
    left            : 1em;
    width           : initial;
  }
}

/* The footer.php file has a template image with this ID attribute.
 *  We clone it to every external link.
 *  We want the template image itself to not display.
 */
img.cls-link-external-icon#id-link-external-template   {
  display               : none;
}
/* Every external link gets a clone of the template icon image with this class name.
 */
a img.cls-link-external-icon   {
  font-size             : initial;  /* Keep the icon from scaling with the element's font size  */
  height                : 0.7em;
  margin-left           : 0.2em;
}
/* in a P tag, let the icon scale with font size  */
p a img.cls-link-external-icon   {
  font-size             : 0.7em;
}
/* Stop adding outline to the icon when the link gets focus by tabbing */
a.cls-link-external:focus   img.cls-link-external-icon   {
  outline               : none;
}
a.cls-link-external   {
  position              : relative;
}
/**
 * In the logo area in the fourth footer sidebar area, the external link icon wraps for UUA logo,
 * so we make it a little smaller and move the external link icon to the left.
 */
 .affiliation-logos .uua-flag  {
  width: 95%;
}
.affiliation-logos .cls-link-external-icon  {
  margin-left: -1.0em;
}

/**************************/
/* Horizontal rule
 *  The original color (#eeeeee) is too light.
 */
hr                {
  border-color    : #aaa;
}

/**************************/
/* Page titles */

.page-header h1 {
  /* Multiple background images
   *  The first is on top of thge second
   *  The second is the horizontal line across the entire element
   *  The first is the primary image at the far right
   *  The combined image covers any size element
   */
  background-image    : url(page-header-prime.png), url(page-header-left.png);
  background-position : right bottom, right bottom;
  background-size     : auto 1.0em, auto 1.0em;
  background-repeat   : no-repeat, repeat-x;
}



/**************************/
/* Figure element for images with captions
 *  !important to override the element attribute
 */

figure      {
  width               : initial !important;
}


div.cls-choir-schedule-container table td ,
div.cls-choir-schedule-container table th {
  padding           : 0.2em 0.5em;
  vertical-align    : top;
}
div.cls-choir-schedule-container h3 {
  border-bottom     : 1px solid black;

}
div.cls-choir-schedule-container table td:first-of-type {
  min-width         : 3em;
  text-align        : right;
}


/* Control word break keeping groups of words together */
span.cls-preferred-break {
  display             : inline-block;
}

/* For speaker description for UUA Service speaker taxonomy archive pages */
.cls-uu-speaker-description {
  border            : 2px solid #0092b5;
  border-radius     : 0.5em;
  padding           : 0.5em;
  font-size         : 0.9em;
  overflow          : hidden; /* Keeps floated images inside the container */
}


/* Alerts, such as on the 404 page
 */
.alert-warning      {
  border-radius     : 0.5em;
  color             : rgb(55, 56, 57);
}
.alert-warning .cls-alert-message  {
  color             : #607523;
  font-size         : 1.5em;
}

/* Video -- make it be full width, but stay in proportion in height */
div#id-custom-video {
  padding-bottom    : 65%;
  position          : relative;
  width             : 100%;
}
div#id-custom-video iframe {
  height            : 90%;
  width             : 90%;
  position          : absolute;
  top               : 2%;
  bottom            : 8%;
  left              : 5%;
  right             : 5%;
}
/* The copyright line */
div#id-custom-video > p.cls-copyright {
  font-size         : 0.6em;
  margin            : 0;
  position          : absolute;
  bottom            : 0;
  right             : 2.0em;
}

/* On the RE page this displays colored bars */
.cls-re-class-path-1    ,
.cls-re-class-path-2    ,
.cls-re-class-path-3    ,
.cls-re-class-path-4    {
  margin-top  : -12px;
  padding     : 0 0.5em;
  font-size   : 0.8em;
}
.cls-re-class-path-1    {
  background  : orange;
  color       : black;
}
.cls-re-class-path-2    {
  background  : yellow;
  color       : black;
}
.cls-re-class-path-3    {
  background  : green;
  color       : white;
}
.cls-re-class-path-4    {
  background  : blue;
  color       : white;
}