/**
 * @file
 * Styles are organized using the SMACSS technique. @see http://smacss.com/book/
 *
 * When you turn on CSS aggregation at admin/config/development/performance, all
 * of these @include files will be combined into a single file.
 
*/
/************************************************
IMPORTS
************************************************/


/* Section Styling*/ 
@import "sections/aboutxenos.css";
@import "sections/access.css";
@import "sections/aidfund.css";
@import "sections/calendar.css";
@import "sections/classes.css";
@import "sections/college.css";
@import "sections/coronavirus.css";
@import "sections/counseling.css";
@import "sections/essays.css";
@import "sections/give.css";
@import "sections/globalpartners.css";
@import "sections/highschool.css";
@import "sections/jrhigh.css";
@import "sections/leaders.css";
@import "sections/ministry.css";
@import "sections/missions.css";
@import "sections/news.css";
@import "sections/oasis.css";
@import "sections/outreach.css";
@import "sections/renegade.css";
@import "sections/servantteam.css";
@import "sections/smallgroups.css";
@import "sections/teds.css";
@import "sections/xsi.css";
@import "sections/unsorted.css";

/* Component Styling*/ 
@import "components/body.css";
@import "components/booknavigation.css";
@import "components/comments.css";
@import "components/constantcontact.css";
/*@import "components/ctcards.css";*/
@import "components/footer.css";
@import "components/frontpagectcards.css";
@import "components/frontpageslideshow.css";
@import "components/googlecustomsearch.css";
/*@import "components/homegroupfinder.css";*/
@import "components/imagestyles.css";
@import "components/latestteachings.css";
@import "components/mmenu.css";
@import "components/mmenuicon.css";
@import "components/newscalendar.css";
@import "components/quicklinkcards.css";
@import "components/sectionmenus.css";
@import "components/snippet.css";
@import "components/universalheader.css";
@import "components/universalmenu.css";
@import "components/webforms.css";

/************************************************
  I. Header
      1. Responsive Menu
      2. Logo
      3. Search Button
************************************************/


#block-xenos-local-tasks .button-group {
    display: flex;
}

h1 {
    font-size: 2em !important;
    font-weight: bold !important;
}

.path-frontpage .xenos-content {
    background-image: url('/themes/custom/xenos/images/xenos-backgrounds/clouds.png');
    background-repeat: no-repeat;
}



#testimony-video {
    max-width: 100%;
}

#easter-service {
    display: none;
    /*position: absolute;*/
    /*left: 0;*/
    /*top: 0;*/
    /*height: 0px;*/
    /*width: 0px;*/
    transition: 2s;
    /*opacity: 0;*/
}

.we-did-it-mr-stark #block-essaysmenu {
    /*width: 100vw !important;*/
    /*height: 100vh !important;*/
    /*transform: rotate(2160deg);*/
    transform: rotate(90deg);
    /*opacity: 1 !important;*/
    /*transition: 2s;*/
    /*background-color: red !important;*/
}

@media all and (max-width: 800px) {
    .region-highlighted {
        max-width: 100vw;
    }
}

.statistics-counter {
    font-size: 0 !important;
}

/**
* Custom header on about-xenos/leadership
*/

.candidate,
.elder-custom-header,
.sphere-leader-custom-header,
.administrator-custom-header {
    font-weight: bold;
    font-size: 1.17em;
}

.fc-unthemed .fc-content,
.fc-unthemed .fc-divider, 
.fc-unthemed .fc-list-heading td, 
.fc-unthemed .fc-list-view, 
.fc-unthemed .fc-popover, 
.fc-unthemed .fc-row, 
.fc-unthemed tbody, 
.fc-unthemed td {
    border-color: unset !important;
}

.fc .fc-row .fc-content-skeleton table,
.fc .fc-row .fc-content-skeleton td,
.fc .fc-row .fc-helper-skeleton td {
    border-color: transparent !important;
}

.path-calendar .fc-row.fc-week {
    /*border-color: none !important;*/
    border-top: .5px solid black !important;
    border-bottom: .5px solid black !important;
    border-right: 1px solid black !important;
    border-left: 1px solid black !important;
}

body:not(.path-frontpage) h2 {
    font-size: 1.5rem !important;
    font-weight: bold;
}

.ui-accordion-content-active {
    height: unset !important;
}
/*
 HTML element (SMACSS base) rules 
@import "normalize.css";

 Layout rules 
@import "layouts/responsive.css";

 Component (SMACSS module) rules 
@import "components/misc.css";

 Optionally, add your own components here. 
@import "print.css";

 Sliding Menu styling, including hamburger styling 
@import "mmenu.css";

 Calendar styling 
@import "calendar.css";

 Table Styling
@import "stacktable.css";


 SMACSS theme rules 
 @import "theme-A.css"; 
 @import "theme-B.css"; 

*
 * README:
 * Unless otherwise noted, comments explaining styling refer to the styles
 * directly below them. Sections and headings comments are laid out 
 * according to the following three templates:
 

 MAJOR SECTION HEADING 
************************************************
  X. MAJOR SECTION LABEL
      1. Minor Section Label
      2. Minor Section Label
          a. Sub-Section Label
          b. Sub-Section Label
************************************************

 MINOR SECTION HEADING 
*
 * 1. Minor Section Label
 

 SUB-SECTION HEADING 
 1.a. Sub-Section Label 

************************************************
Table of Contents
    I. Header
        1. Nice Menus
        2. Search Button
    II. Content
        1. Images, Banner
        2. Alert Marquee
        3. Button Menu
        4. Table Styling
        5. General Styling
    III. Modules
        1. Views
            a. General Views Styling
            b. Essays
            c. Latest Teachings
            d. Book Promo Block
        2. Webform
        3. Panels
        4. jQuery UI
            a. Accordion Height
            b. Accordion Style
            c. Accordion Arrow 
        5. MMenu
    IV. Footer
        1. Content
        2. Blocks
    V. Front Page Specific
        1. General Body Styling
        2. Olive Boxes
        3. Flex Slideshow
           a. Margins and Placement
           b. Pager Shading
        4. Connect Box
           a. General
           b. Stay in Touch
************************************************


************************************************
  I. Header
      1. Nice Menu
      2. Search Button
      3. Audio Button
      4. Logout Block
************************************************


*
 * 1. Nice Menus
 

#block-menu-menu-header-menu {
    margin: 0em;
}
#block-menu-menu-header-menu ul.menu,
ul.nice-menu {
    text-align: center;
    width: 100%;
    background-color: #524E4F;
    padding: 0.1em 0em;
    margin: 0em;
    letter-spacing: 1px;
}
#block-menu-menu-header-menu ul.menu li a,
ul.nice-menu-down li a {
    font-size: 1em;
    color: white;
    font-weight: normal;
    text-decoration: none;
}
#block-menu-menu-header-menu ul.menu li,
ul.nice-menu-down li {
    background-color: #524E4F; 
    display: inline-block;
    float: none;
}

*
 * 2. Search Button
 

input.button,
.page-front-page input.webform-submit,
.audio-button {
    border-style: solid;
    border-color: #3E3D33;
    border-width: 1px;
    background: #9B9899 none repeat scroll 0% 0%;
    color: #FFF;
    font-size: 0.9em;
}
input.button:hover,
.page-front-page input.webform-submit:hover,
.audio-button:hover {
    background: #524E4F; 
    color: white;
}

*
 * 3. Audio Button
 

.audio-button {
    border-style: solid;
    border-color: #3E3D33;
    border-width: 1px;
    background: #663333 none repeat scroll 0% 0%;
    color: #FFF;
    font-size: 0.9em;
    padding: 0.5em;
    font-weight: bold;
    margin-left: 3em;
    text-decoration: none;
}
.audio-button:hover {
    background: rgba(102, 51, 51, 0.72); 
    color: white;
}

*
 * 4. Logout Block
 

#block-block-25 {
    position: absolute;
    top: 1em;
    right: 1em;
}
#logout-block a{
    text-decoration: none;
    font-weight: bold;
    color: white;
    border: 2px solid #524E4F;
    border-radius: 5%;
    padding: .3em .6em;
    background: #524E4F;
}
#logout-block a:hover{
    border: 2px solid #9B9899;
    background: #9B9899;
}

************************************************
  II. Content
      1. Images, Banner
      2. Alert Marquee
      3. Button Menu
      4. Table Styling
      5. General Styling
************************************************


*
 * 1. Images, Banners
 

*
 * Force the section banner image to stretch across the
 * width of the content area.
 
#banner-image {
    width: 100%; 
}
.profile-pic {
    width: 50%;
    height: auto;
    max-width: 200px;
    display: inline-block;
    float: left;
    padding-right: 5px;
}
.bio-pic {
    display: inline-block;
    margin: 0em 1em 0em 0em;
    float: left;
    max-width: 100px;
}
.view-book-promotion{
    margin: 1em 1em 0em 1em;
}
#block-block-21{
    margin: 0em;
}

*
* Found at /about-xenos/leadership


.elder-pic, .sphere-leader-pic, .administrator-pic {
    float: left;
    width: 110px;
    padding: 5px 10px 5px 5px;
}

*
 * 2. Alert Marquee
 

.alert-marquee {
    background: #ECE6DD;
}
#alert-banner {
    display: inline-block;
}

*
 * 3. Button Menu
 

.region-highlighted {
    background: white; 
}
.region-highlighted .block-menu ul {
    text-align: center;
    margin: 0em;
    padding: 1em 0em 0em 0em;
    * 
     * Note that there is a left padding by default. That is removed above in 
     * in order to center the menu. 
     
}
.region-highlighted .block-menu li.menu__item {
    display: inline-block;
    *
     * This bottom margin is important to provide adequate spacing 
     * when there are multiple rows of buttons in a menu.
     
    margin-bottom: .6em;
}
.region-highlighted .block-menu li.menu__item a.menu__link {
    border-radius: 3px;
    border-width: 1px;
    border-style: solid;
    text-decoration: none;
    padding: 0.2em 0.5em 0.2em 0.5em;
    * 
     * Only the following three color attributes may be overridden by a section.
     
    border-color: #313131; 
    color: #313131;
    background: white;
}
.region-highlighted .block-menu li.menu__item a.is-active-trail,
.region-highlighted .block-menu li.menu__item a.menu__link:hover {
    text-decoration: none;
    *
     * Only the following two color attributes may be overridden by a section.
     
    background: #313131;
    color: white;
}
.region-highlighted .block-menu {
    margin:0em;
}
.region-highlighted .view-section-banner .content img {
    width:100%;
}
.region-highlighted .block-views {
    margin-bottom: 0em;
}

*
 * For some reason, the Context module doesn't respect Drupal's
 * core block title configurations, particularly when '<none>.' This 
 * removes the title of any blocks in the Highlighted region, for the purpose
 * of the menus not displaying their titles.
 
.region-highlighted .block-title { 
    display: none;
}
.page-user-759 .tabs-primary {
    display: none;
}

*
 * 4. Tables
 

table.stacktable {
    border: 1px solid gray;
    width: 100%;
}
table.stacktable th {
    font-size: 1.1em;
    background: gray;
    color: white;
    padding: 3px 5px;
}
table#responsive-table tr:nth-child(odd),
table.stacktable.small-only tr:nth-child(even) {
    background: #CCC;
}
table.stacktable td {
    padding: 3px 5px;
}

*
 * 5. Miscellaneous Styling
 
#block-block-26.block {
    margin-bottom: 0em;
}

.node-type-small-group h1 {
    clear: both;
}

#block-block-26 .back-to-finder {
    padding: 0em;
        border: 0em;
        border-radius: 0em;
        background: none;
        float:left;
        background-color: #01485f;
        display: inline-block;
        padding: 6px 12px;
        margin-bottom: 2em;
        margin-left: 1em;
        margin-top: 1em;
        font-size: 1em;
        font-weight: 400;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
        color: white !important;
        text-decoration: none;
}

 Learning theory essay, hermeneutics 
.figure { 
    border: black solid 1px;
    text-align: justify;
    padding: 0em 1em;
    margin:  1em;
}
.panel-pane .figure.figure-xsmall {
    width: 22%;
    margin: 0em 0em .5em 0em;
}
.panel-pane .figure.figure-medium,
article .figure.figure-medium {
    width: 46%;
    margin: 0em 0em .5em 0em;
    padding: .6em .3em .6em .3em;
}
.figure.figure-medium,
.figure.figure-small,
.figure.figure-xsmall {
    width: 30%;
    margin: 1em 0em;
    display: inline-block;
    padding: 1em .3em 1em .3em;
    border-radius: 10px;
    border: solid 2px #686868;
    background-color: dimgrey;
    text-align: center;
    color: linen;
    font-size: 1.4em;
    line-height: 1.5em;
    font-weight: bold;
    -webkit-text-stroke: .4px #000000;
}
#west-side.figure.figure-medium,
#west-side.figure.figure-small,
#west-side.figure.figure-xsmall {
    position: relative;
}
#west-side.figure.figure-medium,
#west-side.figure.figure-small,
#west-side.figure.figure-xsmall {
    background-image: url(/sites/default/files/westside-flat.png);
    background-position-x: -200px;
    background-size: cover; 
}
.panel-pane #main-campus.figure.figure-medium,
article #main-campus.figure.figure-medium {
    background-position-x: 0px;
}
#main-campus.figure.figure-medium,
#main-campus.figure.figure-small,
#main-campus.figure.figure-xsmall {
    background-image: url(/sites/default/files/main-flat.png);
    background-position-x: -200px;
    background-size: cover; 
}
#nepali.figure.figure-medium,
#nepali.figure.figure-small,
#nepali.figure.figure-xsmall {
    background-image: url(/sites/default/files/office-flat.png);
    background-size: cover; 
}
#cafe.figure.figure-medium,
#cafe.figure.figure-small,
#cafe.figure.figure-xsmall {
    background-image: url(/sites/default/files/cafe-flat.png);
    background-size: cover; 
}
.panel-pane #fourth-street.figure.figure-medium,
article #fourth-street.figure.figure-medium {
    background-position-x: 0px;
}
#fourth-street.figure.figure-medium,
#fourth-street.figure.figure-small,
#fourth-street.figure.figure-xsmall {
    background-image: url(/sites/default/files/4thst-flat.png);
    background-position-x: -200px;
    background-size: cover;
}
.panel-pane .figure.figure-medium.figure-left,
article .figure.figure-medium.figure-left {
    margin-left: .5em;
}
.panel-pane #high-school.figure.figure-medium,
.panel-pane #the-warehouse.figure.figure-medium,
article #high-school.figure.figure-medium,
article #the-warehouse.figure.figure-medium {
    background-position-x: 0px;
}
#the-warehouse.figure.figure-medium,
#the-warehouse.figure.figure-small,
#the-warehouse.figure.figure-xsmall,
#high-school.figure.figure-medium,
#high-school.figure.figure-xsmall {
    background-image: url(/sites/default/files/warehouse-flat.png);
    background-position-x: -150px;
    background-size: cover;
}
#east-side.figure.figure-medium,
#east-side.figure.figure-small,
#east-side.figure.figure-xsmall {
    background-image: url(/sites/default/files/eastside-flat.png);
    background-position-x: -150px;
    background-size: cover;
}
#study-center.figure.figure-medium,
#study-center.figure.figure-small,
#study-center.figure.figure-xsmall {
    background-image: url(/sites/default/files/sc-flat.png);
    background-size: cover;
}
#west-side-ct {
    display: inline-block;
    width: 30%;
    margin: 0em;
    padding: 1em .6em 1em .5em;
    border: solid 2px #686868;
}
.figure.figure-medium a,
.figure.figure-small a,
.figure.figure-xsmall a{
    color: #00b0ff;
    text-decoration: none;
    -webkit-text-stroke: .4px #000000;
}
.panel-pane .figure.figure-medium a:visited,
.panel-pane .figure.figure-medium a {
    color: white;
}
.figure.figure-small a:visited,
.figure.figure-xsmall a:visited,
.figure.figure-small a:hover,
.figure.figure-xsmall a:hover{
    color: #00b0ff;
}
.panel-pane .figure.figure-medium a:hover,
article .figure.figure-medium a:hover {
    color: #708893;
}
.figure.figure-feature {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80px;
    padding: 1em;
}
 Books page banner 
.page-node-2860 #block-block-18 p{ 
    margin: 0em;
}
#block-block-17{
    margin: 0em;
}

 Possibility for Upside-Down Text 
.upside-down {
    display: inline-block;
    -webkit-transform:rotate(-180deg);
    -moz-transform:rotate(-180deg);
    -o-transform:rotate(-180deg);
    transform:rotate(-180deg);
    ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

*
* Custom header on about-xenos/leadership




*
* Custom header on missions/our-staff


.missions-custom-header {
    font-weight: bold;
    font-size: 1.17em;
    color: #78994a;
}

*
 * 6. Comments
 

.node-type-essay #comments .form-item-name {
    display: none;
}
.comment .field-name-field-name{
    display: none;
}

************************************************
  III. Modules
      1. Views
        a. General Views Styling
        b. Essays
        c. Latest Teachings
        d. Book Promo Block
      2. Webform
      3. Panels
      4. jQuery UI
        a. Accordion Height
        b. Accordion Style
        c. Accordion Arrow 
      5. Calendar
      6. MMenu
      7. CK Editor
************************************************


* 
 * 1. Views
 

 1a. General Views Styling 
*
 * The odd and even classes on the rows provide offsetting row colors on 
 * Views which use tables to display.
 
.view-content tr.odd { 
    background-color: white;
}
.view-content tr.even { 
    background-color: #f0f9ff;
}
.pane-views-teaching-feed-block .views-field-title {
    font-weight: bold;
}

 1b. Essays 
.view-essays .view-content td a {
    font-weight: bold;
    font-size: 1.2em;
    letter-spacing: 0.02em;
}
.view-essays .view-content td {
    font-size: 0.9em;
    padding: 4px;
}
#block-views-recommended-reading-block-1{
    border-radius: 10px;
    border-width: 2px;
    border-style: solid;
    border-color: #ADADAD;
}
#block-views-recommended-reading-block-1 h2{
    font-size: 1.4em;
    color: #414141;
}
#block-views-recommended-reading-block-1 .popular-essay-list{
    margin-top:.5em;
}
#block-views-recommended-reading-block-1 li{
    color: #414141;
}
.view-display-id-page_14 .views-field .views-field-field-author {
    font-style: italic;  Style for essay mobile view 
}

 1c. Latest Teachings
*
 * Formats the Header Row of the Latest Teachings View. Note that the
 * same header row is used for all three Views.
 
.pane-views-teaching-feed-block h2.pane-title { 
    margin: 0em;
    text-align: center;
    background: #663333; 
    color: white;
    font-weight: normal;
}
* 
 * This stretches all three sizes of the latest
 * teachings View across the whole page.
 
.latest-teachings table,
.latest-teachings-mini table,
.latest-teachings-micro table {
    margin: 0em;
    width: 100%;
}
.latest-teachings td,
.latest-teachings-mini td,
.latest-teachings-micro td {
    background-color: #663333;
    border: 3px solid #DFDCC7; 
    padding: 1em 0.6em 1em 0.6em;
    color: white;
    width: 34%;
}
.latest-teachings td.col-first,
.latest-teachings-mini td.col-first,
.latest-teachings-micro td.col-first {
    border-left: none;
}
.latest-teachings td.col-last,
.latest-teachings-mini td.col-last,
.latest-teachings-micro td.col-first,
.latest-teachings-micro td.col-last {
    border-right: none;
}
.play-button {
    background-repeat: no-repeat;
    float: right;
    padding: 0.5em;
    max-width: 55%;
    width: 32px;
    height: 32px;
    background-image: url('/sites/all/themes/xenos/images/buttonarrow-dkgray.png');
    background-size: cover;
}
img.play-button:hover{
    background-image: url('/sites/all/themes/xenos/images/buttonarrow-ltgray.png');
}

 1d. Book Promo Block 
 Picture Container <span> tag 
.view-book-promotion .views-field-field-book-photo { 
    display: inline-block;
    width: 20%;
    padding-left:1%;
}
 Book picture 
.view-book-promotion .views-field-field-book-photo img {
    max-height: 150px;
}
 Promotion text 
.view-book-promotion .views-field-field-promo-text { 
    width: 75%;
    padding-left: 1%;
    display: inline-block;
    vertical-align: top;
    margin-top: 1.5em;
}
.view-book-promotion .views-field-field-promo-text a {
    color: black;
    text-decoration: none;
}

*
 * 2. Webform
 

.width-adjust {
    width: 70%;  Adjusting field width 
}
.half-page {
    width: 50%;
    float: left;
    margin: 0.5em 0em;
}
.half-page input {
    width: 90%;
}
.half-page.webform-component-checkboxes input,
.half-page.webform-component-radios input,
.half-page.webform-component-date input {
    width: inherit;
}
.whole-page {
    width: 100%;
    float: left;
    margin: 0.5em 0em;
}
input#edit-submitted-photo-upload-button{
    display: none;
}
.view-id-photo_contest_submissions.view-display-id-page .view-contest-image-view img {
    margin: 1em 0em;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.select-venue{
    margin:0;
}
.webform-component--venues,
.webform-component--venues p{
    margin-bottom: 0.5em;
}


*
 * 3. Panels
 

.panels-flexible-region {
    width: 100%;  Sets panel width to full body width 
}
*
 * Selector References:
 * - .pane-views-front-news-block:   Desktop News View Block
 * - .pane-views-front-news-block-1: Mobile News View Block
 * - .pane-views-front-news-block-2: Desktop Calendar View Block
 * - .pane-views-front-news-block-3: Mobile Calendar View Block
 
*
 * Capitalizing the headers of the News and Calendar Views which are
 * found toward the bottom of the front page.
 
.pane-views-front-news-block .view-header h2,
.pane-views-front-news-block-2 .view-header h2,
.pane-views-front-news-block-3 .view-header h2,
.pane-views-front-news-block-1 .view-header h2 {
    text-transform: uppercase;
    font-size: 1.9em;
    font-weight: normal;
    margin: 0.3em 0em .1em 0em;
}
*
 * Formatting the links of the News and Calendar Views which are 
 * found on the front page.
 
.pane-views-front-news-block a,
.pane-views-front-news-block a:visited,
.pane-views-front-news-block-2 a,
.pane-views-front-news-block-2 a:visited {
    color: #524E4F;
    text-decoration: none;
}
 Front Page Mobile Calendar and News Links 
.pane-views-front-news-block-1 a, 
.pane-views-front-news-block-1 a:visited,
.pane-views-front-news-block-3 a,
.pane-views-front-news-block-3 a:visited {
    color: #524E4F;
    text-decoration: none;
}
 Front Page Calendar and News Links 
.pane-views-front-news-block a:hover, 
.pane-views-front-news-block-1 a:hover,
.pane-views-front-news-block-2 a:hover,
.pane-views-front-news-block-3 a:hover {
    color: #9B9899;
}
*
 * This removes the default padding from panel columns and rows as set by
 * CTools. Margin is used to set this spacing in the Front Page Section.
 
.panels-flexible-column-inside,
.panels-flexible-row {          
    padding: 0em !important;   
}
 Negates default float left of CTools stylesheet 
.panels-flexible-region-front_page-center {
    float: none; 
}

*
 * 4. jQuery UI - Accordion
 *     a. Accordion Height
 *     b. Accordion Style
 *     c. Accordion Arrow
 

 4a. Accordion Height 

 * This is IMPORTANT. It makes the height of the accordion content
 * areas fit the content when the resolution is shrunk. If we one
 * day feel the need to fix it in the js, see the link below:
 * stackoverflow.com/questions/11034756/jquery-accordion-auto-height-issue
 * -Travis, Nov. 11, 2015
 
.ui-accordion-content-active { 
    height: inherit !important; 
}

 4b. Accordion Style 
.page-front-page .jquery-ui-filter-header,
.page-front-page .ui-accordion-header {
    background: #524E4F;  Same color as olive boxes to match on front page  
    font-weight: bold;
}
.jquery-ui-filter-header,
.ui-accordion-header {
    background: #8D9A8B; Same color as olive boxes to match on front page  
    font-weight: bold;
}
.section-adult-ct .jquery-ui-filter-header,
.section-adult-ct .ui-accordion-header {
    background: #739bb5; 
    font-weight: bold;
}
.jquery-ui-filter-header a:link,
.ui-accordion-header a:link {
    color: white;
}
.ui-accordion-content p {
    margin: .8em 0em .8em 0em;
}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
    color: white;
}
.ui-state-hover, .ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover, .ui-state-focus,
.ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
    color: white;
}
.ui-state-default, .ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    color: white;
}
.ui-datepicker-calendar .ui-state-active{
    color: #363636;
}
.ui-datepicker-calendar .ui-state-default{
    color: #555;
}

 4c. Accordion Arrow Customization 
* 
 * The Default Arrows were too small and subtle
 * The customized .ui-icon styling overrides the jQuery UI styling of arrows. 
 
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
    position: absolute;
    left: 0.5em;
    top: 15%;
}
.page-front-page .ui-state-default .ui-icon,
.section-classes .ui-state-default .ui-icon,
.section-about-xenos .ui-state-default .ui-icon,
.section-adult-ct .ui-state-default .ui-icon,
.ui-state-default .ui-icon {
    background-image: url(../images/grey-side-arrow.png);
}
.page-front-page .ui-state-default .ui-icon:hover,
.section-classes .ui-state-default .ui-icon:hover,
.section-about-xenos .ui-state-default .ui-icon:hover,
.section-adult-ct .ui-state-default .ui-icon:hover,
.ui-state-default .ui-icon:hover {
    background-image: url(../images/black-side-arrow.png);
}
.page-front-page .ui-icon,
.section-classes .ui-icon,
.section-about-xenos .ui-icon,
.section-adult-ct .ui-icon,
.ui-icon {
    width: 23px;
    height: 44px;
}
.ui-icon-triangle-1-e {
    background-position: 0px;
}
.ui-datepicker .ui-corner-all .ui-icon{
    width: 16px;
    height: 16px;
}
.page-front-page .ui-state-active .ui-icon,
.section-classes .ui-state-active .ui-icon,
.section-about-xenos .ui-state-active .ui-icon,
.section-adult-ct .ui-state-active .ui-icon,
.ui-state-active .ui-icon {
    background-image: url(../images/grey-down-arrow.png);
    background-position: 0px;
}
.page-front-page .ui-state-active .ui-icon:hover, 
.section-classes .ui-state-active .ui-icon:hover,
.section-about-xenos .ui-state-active .ui-icon:hover,
.section-adult-ct .ui-state-active .ui-icon:hover,
.ui-state-active .ui-icon:hover {
    background-image: url(../images/black-down-arrow.png);
    background-position: 0px;
}

*
 * 5. Calendar
 
li.calendar_link.last{
    display: none;
}

*
 * 6. MMenu
 

.mmenu-nav.mm-basic [class^="icon-"], 
.mmenu-nav.mm-basic [class*=" icon-"],
.mmenu-nav.mm-basic .mmenu-block-icon {
    display: none;    Hides the list icons on the sliding menu 
}

*
 * 7. CK Editor
 

.cke_source {
    white-space: pre-wrap !important;
}

* 
 * 8. Image Caption
  
   Fixes problem with setting height
 *   https://www.drupal.org/node/785664#comment-11108073
 
.image-caption-container { 
    height: auto !important;
    border: 1px solid rgb(82, 78, 79);
    border-radius: 5px;
    padding: 0.3em;
}
.image-caption-container-left{
    margin-right: .5em;
}
.image-caption-container-right{
    margin-left: .5em;
}
.image-caption-container .image-caption{
    font-style: italic;
    font-size: .9em;
    text-align: center;
}

************************************************
  IV. Footer
    1. Content
    2. Blocks
************************************************

*
 * 1. Content
 

#footer,
#footer a {
    color: white; 
    text-align: center;
    line-height: 1.4em;
}
#footer a {
     text-decoration: none; 
    color: #80baff;
}
#footer a:hover {
    color: #abc8d9;
}
#footer {
    background-color: #524E4F; 
    font-size: 0.9em;
}
 Necessary override since many section stylesheets set custom header colors 
#footer h2 {
    color: white; 
}

* 
 * 2. Blocks
 

.meet-xenos {  Div tag for Xenos Description 
    text-align: left;
    margin-left: 1em;
    margin-bottom: 0em;
}
#block-block-16 {  Block containing Xenos Description 
    float: left;
    margin-bottom: 0em;
}
#block-block-20 {  Footer Links 
    display: inline-block;
}

************************************************
  V. Front Page Specific 
     1. General Body Styling
     2. Link Boxes
     3. Flex Slideshow
        a. Margins and Placement
        b. Pager Shading
     4. Connect Box
        a. General
        b. Stay in Touch
************************************************
*
 * This section is for styling that *must* be done specifically
 * on the front page, as designated by the leading class: ".page-front-page"
 


*
 * 1. General Body Styling
 

.page-front-page #content {
    padding: 0em;
    *
     * Set specifically on front page so that content
     * background on normal pages remains white.
     
    background-color: transparent; 
}
*
 * Selector References:
 * - .panels-flexible-row-front_page-main-row: Sliding Banner Panel
 * - .panels-flexible-row-front_page-1:        Link Boxes Panel
 * - .panels-flexible-row-front_page-2:        Latest Teachings Panel
 * - .panels-flexible-row-front_page-3:        News/Calendar Panel
 
.page-front-page .panels-flexible-row-front_page-1,    
.page-front-page .panels-flexible-row-front_page-2 {    
    margin-top: 1em;
}
.page-front-page .panels-flexible-row-front_page-3 {
    background-color: white;
    margin: 0.5em 0em;
}
.page-front-page .form-submit {
    margin: 0em;
}

*
 * 2. Link Boxes
 

 Olive is used as the class name, since their color used to be olive... 
.olive h2, 
.olive-left h2, 
.olive-right h2 {
    font-size: 1.9em;
    margin: 0.1em;
}
.olive a, .olive-left a, .olive-right a {
    color: white;
    text-decoration: none;
}
.olive a:hover, .olive-left a:hover, .olive-right a:hover {
    color: #9B9899; 
}

*
 * 3. Flex Slideshow
 

 3a. Margins and Placement 
.flexslider {
    margin: 0em;
}
.flex-control-nav {
    bottom: -.5em;
}

 3b. Pager Shading 
 .flex-control-paging are the pager dots at the bottom of the slideshow. 
.page-front-page .flex-control-paging li a.flex-active {
     The active pager is a solid color (totally opaque)
    background: rgb(218, 218, 218);
    border: 1px solid white;
}
.page-front-page .flex-control-paging li a:hover {
     The pager which is hovered over is the next most opaque (dark)
    background: rgb(218, 218, 218);
    border: 1px solid white;
}
.page-front-page  .flex-control-paging li a {
     Inactive, pagers in a normal state are the least opaque (dark)
    background: rgba(82, 78, 79, 0.4); 
    border: 1px solid white;
}

*
 * 4. Connect Box - Bottom box with phone number and social media links
 

 4a. General 
.panels-flexible-row-front_page-8 {
    border-style: solid;
    border-width: 2px;
    border-color: #3E3D33;
    border-radius: 2px;
    margin-bottom: .5em !important;
}
.pane-webform-client-block-3568 .pane-title {
    display: none;
}
.phone-link {
    text-decoration: none;
    color: black;
}

 4.b Stay in Touch 
.webform-client-form-3568,
.page-front-page .form-actions {
    float: left;
    display: inline-block;
}
.pane-webform-client-block-3568 {
    float: right;
    margin: 0.3em 0.3em 0em 0em;
}
.page-front-page .webform-component--email-address {
    margin: 0em;
    float: left;
}
.page-front-page .webform-component--email-address .email-field {
    margin-right: 0.3em;
}

 IE Text Selection Fix 
html body {
    -ms-user-select: text !important;
    user-select: text !important;
}

 XSI Styling -- Needs Moved 
table .xsi-volunteer{
    text-decoration: none;
    text-align: center;
    display: inline-block;
    font-size:1em;
    font-weight: bold;
    background: #357996;
    padding: 4px 4px;
    color:white;
    border: 1px #313131 solid;
}
table .xsi-volunteer:hover{
    background: #0f3748;
}
 XSI Volunteer Accordions 
.section-xsi .jquery-ui-filter-header,
.section-xsi .ui-accordion-header {
    background: #0f272f;
}
.section-xsi table {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 1em;
}
.section-xsi table tr td:last-child {
    text-align: center;
}
.section-xsi table.stacktable th {
    background: #0f272f;
}
***********************************
    Google Custom Search 
***********************************
.gsc-input input {    
    box-sizing: initial;
}
.gsc-search-box table,  top layer 
.gsc-input-box  table,  secondary layer 
table.gstl_50.gssb_c{  suggestion dropdown 
    margin-top: 0em;
}
table.gsc-above-wrapper-area-container,  part of results overlay 
table.gsc-resultsHeader {  part of results overlay 
    margin: 0em;
}
table.gsc-table-result {
    margin-left:16px;
    margin-top: 0em;
    margin-bottom: 0em;
}
.gsc-search-box table,  top layer 
.gsc-input-box  table{  secondary layer 
    border-collapse: initial;
}
.gsc-search-button input.gsc-search-button-v2{
    -webkit-box-sizing: initial;
    -moz-box-sizing: initial;
    box-sizing: initial;
    margin-top: 5px;
}
.gcsc-branding {
    padding: 0em;
}
td.gsib_a{
    padding-top: 2px;
}
#___gcse_0 .gsc-control-cse {
    background: none;
    border: none;
}
#___gcse_0 div.gsc-control-cse {
    padding: 0em;
}

.keywords-column .form-type-checkbox {
    width: 30%;
    float: left;
}
.gsc-search-box.gsc-search-box-tools .gsc-input-box table#gs_id50 {
    margin-bottom: 0em;
}

  
.page-node-4395 #webform-component-draggable-list-items-wrapper .description {
    font-size: 1em;
}

.page-node-4395 .draggable .tabledrag-handle .handle {
    background-image: url(/sites/all/themes/xenos/images/arrow-icon-black.png);
    background-size: 27px 27px;
    width: 35px;
    height: 45px;
    margin-right:0.1em;
}

.page-node-4395 .draggable .tabledrag-handle .handle:hover {
    background-image: url(/sites/all/themes/xenos/images/arrow-icon-grey.png);
    background-size: 27px 27px;
    background-position: 6px 9px;
    width: 35px;
    height: 45px;
    margin-right:0.1em;
}

.page-node-4395 tr.draggable {
    height: 2.5em;
}

 tabledrag-handle tabledrag-handle-hover 

a.tabledrag-handle-hover .handle {
    background-position: 6px 9px;
    margin-right:0.1em;
}

.draggable a.tabledrag-handle {
    height: 1.8em;
}

#teaching-schedule .ui-tabs-anchor {
    color: black;
}
#teaching-schedule .ui-button-text {
    background-color: #053aa0;
}

#teaching-schedule .schedule-date {
    width: 5em;
}
#teaching-schedule .schedule-teacher {
    width: 8em;
}
#teaching-schedule .schedule-notes {
    width: 9em;
}

#teaching-schedule a {
    color: blue;
}


#study-center-button {
    display: flex;
    border-radius: 5px;
    cursor: pointer;
    transition: transform .2s;
    background-color: darkslategray;
    text-decoration: none;
    color: white;
    font-weight: bold;
    padding: 5px 4px;
    width: fit-content;
}

#study-center-button:hover {
    transform: scale(1.05);
}

#teaching-schedule table {
    display: flex;
}

#teaching-schedule thead {
    display: none;
}*/