/* 
This is the Style-Sheet for the church web-pages.
Author: John Fischer III of Christians Conquering Depression in 2026
Updated:
*/

body {
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
}
body.homePage_bg {
    background-image: url('../images/bgImage.jpg');
}
* {
  box-sizing: border-box;
}

h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 200%;
    margin-bottom: 0;
    color: var(--headerFontColor);
    text-align: center;
}
h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 175%;
    margin-bottom: 0;
    color: var(--headerFontColor);
}
h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 150%;
    margin-bottom: 0;
    color: var(--headerFontColor);
}
h4 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 125%;
    margin-bottom: 0;
    color: var(--headerFontColor);
}
h4.centered {
    text-align: center;
}
h5 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin-bottom: 0;
    color: var(--headerFontColor);
}
a {
    font-weight: bold;
}
label {
    float: left;
}

.header-container {
    background-image: url('../images/banner_bg.jpg');
    display: block;
    margin: 0;
    /*position: relative;*/
    height: 150px;
}
.ul_header {
    /* background-image: url('../images/w4c_banner.jpg');*/
    /*background-color: #DDDDFF!important; */
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.header_logo {
    padding: 0 10px 0 10px;
    float: left;
    max-height: 100px;
    width: auto;
    display: block;
}
.header_center_banner {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}
.header_SocialMedia {
    display: inline-block;
    float: right;
    /*line-height: 1.2em; */
}

.header_detail {
    display: block;
    float: right;
    padding: 10px;
}

.header_WelcomeName {
    display: inline-block;
    float: right;
    background-color: #000000;
    color: #FFFFFF;
}

.banner_image {
    margin-left: auto;
    margin-right: auto;
    width: auto;
    max-width: 100%;
    max-height: 100px;
}


.left_section {
    width: 65%;
    float: left;
}
.right_section {
    float: right;
}

.left_aside {
    width: 30%;
    float: left;
}
.right_aside {
    width: 300px;
    float: right;
}

.alignCenter {
    align-content: center;
    align-items: center;
}
.article_align_left{
    display: inline-block;
}
.article_right {
    width: auto;
    float: right;
    /*padding-left: 1em;*/
}
.article_centered {
    width: 50%;
    align-content: center;
    align-items: center;
    margin: 0 auto;
    padding-left: 1em;
    padding-right: 1em;
}
.div_align_left{
    display: inline-block;
}

.DayOfWeek {
    display: block;
    width: 10vw;
    text-align: right;
    font-weight: bold;
    color: var(--DayOfWeekColor);
}
.TimeOfDay {
    text-align: left;
    font-weight: bold;
    color: var(--TimeOfDayColor);
}
/* Error Message */
div.errorMessage {
    color: var(--errorMessageColor);
    margin-top: 10px;
}

.inputButton {
    margin-left: 120px;
}
input {
    margin-left: 1em;
    margin-bottom: .5em;
}
textarea.long400 {
    width: 400px;
    height: 80px
}
textarea.short300 {
    width: 300px;
    height: 60px
}
select {
    margin-left: 1em;
    margin-bottom: .5em;
}

#button {
    margin-left: 7em;
}

/* Footer Bar */
footer {
    width: 100%;
    clear: both;
    background-color: var(--footer-bg-Color);
    color: var(--footerFontColor);
}
footer p {
    font-size: 80%;
    text-align: center;
}

.article_align_left{
    display: inline-block;
}
.article_right {
    width: auto;
    float: right;
    /*padding-left: 1em;*/
}
.section_centered {
    width: 100%;
    align-content: center;
    align-items: center;
    margin: 0 auto;
    padding-left: 1em;
    padding-right: 1em;
}
.coding {
    background-color: #CCFFFF;
}
.Note {
    font-weight: bold;
    color: var(--NoteFontColor);
}

/* Set a style for all buttons */
button {
    background-color: var(--Button-bg-Color);
    color: var(--ButtonFontColor);
    width: auto;
    padding: 5px 10px;
    margin: 0;
    border: 1px solid #000000;
    cursor: pointer;
}

/* Add a hover effect for buttons */
button:hover {
    opacity: 0.8;
}


/* Center the avatar image inside this container */
.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
}

/* Avatar image */
img.avatar {
    width: 40%;
    border-radius: 50%;
}

/* Add padding to containers */
.container {
    padding: 16px;
}

/* The "Forgot password" text */
span.psw {
    float: right;
    padding-top: 16px;
}
span.codeComment {
    background: #99FFCC;
    color: #006600;
}

/* Responsive layout - makes the three columns stack on top of each other 
 * instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        width: 100%;
        height: auto;
    }
    .right_aside {
        width: 100%;
    }
    .DayOfWeek {
        width: 20vw;
    }
}
/* Change styles for span and cancel & signup button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
        display: block;
        float: none;
    }
    .signupbtn {
        width: 100%;
    }
}

/* The Close Button */
.close {
    /* Position it in the top right corner outside of the modal */
    position: absolute;
    right: 25px;
    top: 0; 
    color: #000;
    font-weight: bold;
}

/* Close button on hover */
.close:hover,
.close:focus {
    color: #FF0000; /* Red */
    cursor: pointer;
}

/* Clear floats */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* Add Zoom Animation */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
}

input.box {
    border: #777777 solid 1px;
}

label.box {
    width: 20vw;
    text-align: right;
    font-weight: bold;
}
label.left {
    width: 15vw;
    text-align: left;
    font-weight: bold;
}

label.box2 {
    width: 15vw;
    text-align: right;
    font-weight: bold;
}

label.box3 {
    width: 8vw;
    text-align: right;
    font-weight: bold;
    font-size: 80%;
}

.boxLayer1 {
    align-self: center;
}
.boxLayer2 {
    align-content: flex-start;
    width: 480px;
    border: solid 1px #333333;
}
.boxLayer3 {
    background-color: #333333;
    color: #DDDDDD;
    padding: 3px;
}
.boxLayer4 {
    margin: 30px;
}
.boxLayer5 {
    margin-top: 10px;
    color: #FF0000;
}

/* Password */
/* The message box is shown when the user clicks on the password field */
#message {
    background: #EEEEEE;
    color: #000000;
    position: relative;
}

/* Add a green text color and a checkmark when the requirements are right */
p.valid {
    color: green;
}

p.valid:before {
    position: relative;
    left: -35px;
    content: "✔";
}

/* Add a red text color and an "x" icon when the requirements are wrong */
p.invalid {
    color: red;
}

p.invalid:before {
    position: relative;
    left: -35px;
    content: '✖';
}

.datepicker {
    background-color: #FFFFFF;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555;
    display: inline;
    height: 34px;
    line-height: 1.42857;
    margin-right: 10px;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s  ease-in-out 0s;
}

/*************************
 * Social-Media Menu Bar *
 *************************/
/* Social-Media container */
.SocialMedia {
    overflow: hidden;
    float: right;
    width: 100%;
    background-color: #990000; /* Dark Red */
    color: #FFFFFF; /* Font color = White */
    font-family: Arial;
}

.SocialMedia a {
    float: right;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    padding: 5px 5px;
    text-decoration: none;
}

/* Create three equal columns that floats next to each other */
/*
.column {
    float: left;
    width: 16%;
    padding: 5px;
    background-color: #CCCCCC;
    height: 25px;
}*/

/* Style links inside the columns */
/*
.column a {
    float: none;
    background-color: #FFFFFF;
    color: #000000;
    padding: 5px;
    text-decoration: none;
    display: block;
    text-align: left;
}*/

/* Add a background color on hover */
/*
.column a:hover {
    background-color: #DDDDDD;
}*/

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}


/* Show the dropdown menu on hover */
/*
.dropdown:hover {
  display: block;
}*/

/* Three image containers (use 25% for four, and 50% for two, etc) */
.cardRow {
    margin: auto;
    max-width: 800px;
}
.videoRow {
    margin: auto;
    width: 100%;
}
.left2Column {
  float: left;
  width: 49.5%;
  padding: 5px;
}
.left3Column {
  float: left;
  width: 33.33%;
  padding: 5px;
}
.cardImage {
    max-width: 240px;
    height: auto;
}
.videoImage {
    width: 100%;
    height: auto;
}

/* Clear floats after image containers */
.cardRow::after {
  content: "";
  clear: both;
  display: table;
}

/************************
 * Using div as a table *
 ************************/
.rTable {
    display: table;
}
.rTableArticle {
    overflow-x: auto;
}
.rTableRow {
    display: table-row;
}
.rTableHeading {
    display: table-cell;
    background-color: #DDDDDD;
    font-weight: bold;
    padding: .3vw 1vw;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.rTableHeading2 {
    display: table-cell;
    background-color: #DDDDDD;
    font-weight: bold;
    width: 50%;
    padding: .3vw 1vw;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.rTableHeading3 {
    display: table-cell;
    background-color: #DDDDDD;
    font-weight: bold;
    width: 33%;
    padding: .3vw 1vw;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.rTableHeading4 {
    display: table-cell;
    background-color: #DDDDDD;
    font-weight: bold;
    width: 25%;
    padding: .3vw 1vw;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.rTableHeading5 {
    display: table-cell;
    background-color: #DDDDDD;
    font-weight: bold;
    width: 20%;
    padding: .3vw 1vw;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.rTableHeading6 {
    display: table-cell;
    background-color: #DDDDDD;
    font-weight: bold;
    width: 16%;
    padding: .3vw .5vw;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.rTableCell {
    display: table-cell;
    padding: .3vw 1vw;
}
.rTableCellRight {
    display: table-cell;
    padding: .3vw .5vw;
    text-align: right;
}
.rTableCell3 {
    display: table-cell;
    width: 33%;
    padding: .3vw 1vw;
}
.giveImage1 {
    max-width: 100%;
    max-height: 300px;
    height: auto;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
    .left3Column {
        width: 100%;
    }
    .cardImage {
        width: 100%;
    }
    .videoImage {
        width: 100%;
    }
    label.box2 {
        width: 50vw;
    }
    label.box3 {
        width: 20vw;
    }
    .rTableHeading6 {
        width: 50%;
    }
}