/*******************************************************
*  site-structure.css for the Skeleton 2.0 HTML theme  *
*                                                      *
*  These are additions and alterations to the various  *
*  Skeleton CSS settings creating a basic theme        *
*                                                      *
*  Written by: Ian Matters                             *
*  Email: ian [at] matters [dot] id [dot] au           *
*  Date stamp: 2021-01-04                              *
*******************************************************/

html {
    font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #222;
}

.container {
    background-color: #fff;
    position: relative;
    width: 98%;
    max-width: 960px;
    margin: 0 auto;
}

#wrap {
    color: #000;
    border-top: 5px solid #222;
    background-color: #fff;
}

#wrap a {
    color: #2883de;
    text-decoration: none;
}

#wrap a:hover {
    color: #2883de;
    text-decoration: underline;
}

#header-content {
    width: 98%;
    max-width: 960px;
    margin: 0 auto;
}

#header-content {
    width: 98%;
    max-width: 960px;
    margin: 0 auto;
}

#credits {
    color: #777;
    background-color: #fff;
    text-align: left;
    font-size: 0.8em;
    line-height: 1.5em;
    padding-top: 10px;
    padding-bottom: 10px;
}

#footer {
    background-color: #fff;
    border-top: 1px solid #ccc;
}

img {
    max-width: 99%;
}

/*
* Font styles
*/
h1, h2, h3, h4, h5 {
    letter-spacing: normal;
    margin:0;
}

h1 {
    font-size: 35px;
    font-weight :normal;
    font-style: normal;
    line-height: 140%;
    margin-bottom: 14px;
}

h2 {
    font-size: 28px;
    font-weight: normal;
    font-style: normal;
    line-height: 130%;
    margin-bottom: 10px;
}

h3 {
    font-size: 21px;
    font-weight: normal;
    font-style: normal;
    line-height: 130%;
    margin-bottom: 8px;
}

h4 {
    font-size: 17px;
    font-weight: normal;
    font-style: normal;
    line-height: 125%;
    margin-bottom: 8px;
}

h5 {
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    line-height: 120%;
    margin-bottom: 8px;
}

h1 a, h2 a, h3 a, h4 a, h5 a {
    font-weight: inherit;
    text-decoration: none;
}

p {
    margin-bottom: 0.9em;
}

/*
* Table styles
*/
table {
    font-size: 1em;
    width: 350px;
    max-width: 100%;
    margin-bottom: 20px;
}

table td {
    border: 1px solid #ddd;
}

table tr td, tr th {
    padding: 5px 10px;
}

table tr {
    background: #eee;
}

table tr.even {
    background: #f7f7f7;
}

th:first-child,
td:first-child {
    padding-left: 10px;
}

th:last-child,
td:last-child {
    padding-right: 10px;
}

/*
* Horizontal rules
*/
hr {
    color: #ccc;
    background-color: #ccc;
    border-top: 1px solid #ccc;
    width: 100%;
    height: 0;
    margin-top: 10px;
    margin-bottom: 10px;
}

hr.black {
    color: #444;
    background-color: #444;
    width: 100%;
    height: 2px;
    margin: 10px 0;
    border: none;
}

hr.grey {
    color: #bbb;
    background-color: #bbb;
    width: 100%;
    height: 2px;
    margin: 10px 0;
    border: none;
}

hr.red {
    color: #f00;
    background-color: #f00;
    width: 100%;
    height: 2px;
    margin: 10px 0;
    border: none;
}

hr.orange {
    color: #ff7f00;
    background-color: #ff7f00;
    width: 100%;
    height: 2px;
    margin: 10px 0;
    border: none;
}

hr.yellow {
    color: #ffcf00;
    background-color: #ffcf00;
    width: 100%;
    height: 2px;
    margin: 10px 0;
    border: none;
}

hr.green {
    color: #0f0;
    background-color: #0f0;
    width: 100%;
    height: 2px;
    margin: 10px 0;
    border: none;
}

hr.cyan {
    color: #0ff;
    background-color: #0ff;
    width: 100%;
    height: 2px;
    margin: 10px 0;
    border: none;
}

hr.blue {
    color: #00f;
    background-color: #00f;
    width: 100%;
    height: 2px;
    margin: 10px 0;
    border: none;
}

hr.magenta, hr.violet {
    color: #f0f;
    background-color: #f0f;
    width: 100%;
    height: 2px;
    margin: 10px 0;
    border: none;
}

hr.rainbow {
    color: #bbb;
    background: #ccc url(../images/rainbow-300x3.png) repeat-x 0 0;
    max-width: 100%;
    width: 300;
    height: 3px;
    margin: 10px auto 10px 0;
    border: none;
}

/*
* Ordered and unordered lists
*/
ol {
    list-style-position: outside;
    margin-left: 3em;
    margin-bottom: 0;
}

ul {
    list-style-position: outside;
    margin-left: 3em;
    margin-bottom: 0;
}

ul {
    list-style-type: disc;
}

ul.indent {
    padding-left: 30px;
}

ul.no-indent {
    padding-left: 0;
}

ul.circle {
    list-style-type: circle;
}

ul.disc {
    list-style-type: disc;
}

ul.none {
    list-style-type: none;
}

ul.square {
    list-style-type: square;
}

ul li, ol li {
    margin-bottom: 0.7em;
}

/*
* Additional classes
*/
.date-stamp, .obscure {
    color: #bbb;
    font-size: 0.7em;
}

.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}

.align-centre,.align-center {
    text-align: center;
}

.align-justify {
    text-align: justify;
}

.image-centre,.image-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.largest {
    font-size: 2em;
}

.larger {
    font-size: 1.4em;
}

.smaller {
    font-size: 0.7em;
}

.spacer {
    margin: 0 20px;
}

.clear {
    clear: both;
}

.hide {
    display: none;
}

.bottom-line {
    border-bottom: 2px solid #bbb;
    margin-bottom: 15px;
}

.border {
    border: 1px solid #ccc;
}

.rounded {
    border-radius: 6px;
}

.italic {
    font-style: italic;
}

.underline {
    text-decoration: underline;
}

.shadow {
    -webkit-box-shadow: 0 8px 6px -6px #4a4a4a;
    -moz-box-shadow: 0 8px 6px -6px #4a4a4a;
    box-shadow: 0 8px 6px -6px #4a4a4a;
}

.slider-wrapper {
    margin-top: 10px;
    margin-bottom: 10px;
}

.attention {
    background-color: #ff0;
    border: 1px solid #dd0;
    padding: 0 2px 2px 2px;
}

/*
* Photo frames
*/
.photo, .photo-with-title {
    margin-top: 0;
    margin-bottom: 30px;
}

.photo img, .photo-with-title img {
    background-color: #fff;
    padding: 10px;
    border: 1px solid #ccc;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 918px;
    -webkit-box-shadow: 0 8px 6px -6px #4a4a4a;
    -moz-box-shadow: 0 8px 6px -6px #4a4a4a;
    box-shadow: 0 8px 6px -6px #4a4a4a;
}

.photo-with-title img {
    padding: 10px 10px 30px 10px;
    margin-bottom: -20px;
}

.photo-with-title p {
    font-size: 0.8em;
    text-align: center;
    line-height: 1;
}

/*
* Foreground colour definitions
*/
.grey {
    color: #bbb;
}

.red {
    color: #f00;
}

.orange {
    color: #ff7f00;
}

.yellow {
    color: #ff0;
}

.green {
    color: #0f0;
}

.cyan {
    color: #0ff;
}

.blue {
    color: #007fff;
}

.indigo {
    color: #7f00ff;
}

.violet {
    color: #f0f;
}

/*
* Quotation
*/
.quotation {
    margin: 15px 0;
    padding: 15px 10px 0;
    font-family: "Noto Serif", Georgia, "Times New Roman", Times, serif;
    font-style: italic;
    font-size: 1.5em;
    background-color: #eee;
    border: 1px solid #ddd;
    text-align: center;
}

.quotation p {
    color: #333;
    display: inline;
}

.quotation:before {
    content: '“';
    color: #ccc;
    font-size: 2em;
    margin-right: 5px;
    vertical-align: -0.3em;
}

.quotation:after {
    content: '”';
    color: #ccc;
    font-size: 2em;
    margin-left: 0;
    vertical-align: -0.3em;
}

.quotation-small {
    margin: 10px 0 15px 0;
    padding: 0;
    font-family: "Noto Serif", Georgia, "Times New Roman", Times, serif;
    font-style: italic;
    font-size: 1.2em;
    background-color: #eee;
    border: 1px solid #ddd;
    text-align: center;
}

.quotation-small p {
    color: #333;
    display: inline;
}

.quotation-small:before {
    content: '“';
    color: #ccc;
    font-size: 4em;
    vertical-align: -1em;
}

.quotation-small:after {
    content: '”';
    color: #ccc;
    font-size: 4em;
    vertical-align: -1em;
}

/*
* Coloured blocks
*
* Note: These blocks can be located within rows and coloumns if provision is made for the
* extra horizontal space requirements, however, rows and columns CANNOT be located within
* these blocks.
*
*/
.block-white, .block-grey, .block-red, .block-orange, .block-yellow,
.block-green, .block-cyan, .block-blue, .block-magenta, .block-violet {
    margin: 15px 0 20px;
    padding: 10px 12px 0 10px;
    min-width: 110px;
}

.block-white h1, h2, h3, h4, h5, h6,
.block-grey h1, h2, h3, h4, h5, h6,
.block-red h1, h2, h3, h4, h5, h6,
.block-orange h1, h2, h3, h4, h5, h6,
.block-yellow h1, h2, h3, h4, h5, h6,
.block-green h1, h2, h3, h4, h5, h6,
.block-cyan h1, h2, h3, h4, h5, h6,
.block-blue h1, h2, h3, h4, h5, h6,
.block-magenta h1, h2, h3, h4, h5, h6, .block-violet h1, h2, h3, h4, h5, h6 {
    padding-bottom: 10px;
}

.block-red a, .block-orange a, .block-yellow a, .block-green a,
.block-cyan a, .block-blue a, .block-magenta a, .block-violet a {
    font-weight: bold;
}

.block-white {
    background-color: #fff;
    border: 1px solid #ccc;
}

.block-grey {
    background-color: #eee;
    border: 1px solid #ddd;
}

.block-red {
    background-color: #ffe5e5;
    border: 1px solid #ffabab;
}

.block-orange {
    background-color: #fff2e5;
    border: 1px solid #ffd5ab;
}

.block-yellow {
    background-color: #ffffe5;
    border: 1px solid #fff0ab;
}

.block-green {
    background-color: #e5ffe5;
    border: 1px solid #abffab;
}

.block-cyan {
    background-color: #e5ffff;
    border: 1px solid #abffff;
}

.block-blue {
    background-color: #e5e5ff;
    border: 1px solid #ababff;
}

.block-magenta, .block-violet {
    background-color: #ffe5ff;
    border: 1px solid #ffabff;
}

.block-white ol, .block-white ul {
    margin-left: 5px;
}

.block-grey ol, .block-grey ul {
    margin-left: 5px;
}

.block-red ol, .block-red ul {
    margin-left: 5px;
}

.block-orange ol, .block-orange ul {
    margin-left: 5px;
}

.block-yellow ol, .block-yellow ul {
    margin-left: 5px;
}

.block-green ol, .block-green ul {
    margin-left: 5px;
}

.block-cyan ol, .block-cyan ul {
    margin-left: 5px;
}

.block-blue ol, .block-blue ul {
    margin-left: 5px;
}

.block-magenta ol, .block-magenta ul, .block-violet ol, .block-violet ul {
    margin-left: 5px;
}

.block-white.bold {
    background-color: #fff;
}

.block-grey.bold {
    background-color: #eee;
}

.block-red.bold {
    background-color: #ffabab;
}

.block-orange.bold {
    background-color: #ffd5ab;
}

.block-yellow.bold {
    background-color: #ffffab;
}

.block-green.bold {
    background-color: #abffab;
}

.block-cyan.bold {
    background-color: #abffff;
}

.block-blue.bold {
    background-color: #ababff;
}

.block-magenta.bold, .block-violet.bold {
    background-color: #ffabff;
}

/*
* Sticky notes
*/
.sticky-note-white,
.sticky-note-grey,
.sticky-note-red,
.sticky-note-orange,
.sticky-note, .sticky-note-yellow,
.sticky-note-green,
.sticky-note-cyan,
.sticky-note-blue,
.sticky-note-magenta,.sticky-note-violet {
    min-height: 20em;
    padding: 10px;
    text-align: left;
    font-size: 0.9em;
    margin: 0 auto 20px;
}

.sticky-note-red a,
.sticky-note-orange a,
.sticky-note a, .sticky-note-yellow a,
.sticky-note-green a,
.sticky-note-cyan a,
.sticky-note-blue a,
.sticky-note-magenta a,.sticky-note-violet a {
    font-weight: bold;
}

.sticky-note-white {
    background-color: #fff;
    border: 1px solid #ddd;
}

.sticky-note-grey {
    background-color: #eee;
    border: 1px solid #ddd;
}

.sticky-note-red {
    background-color: #ffe5e5;
    border: 1px solid #ffabab;
}

.sticky-note-orange {
    background-color: #fff2e5;
    border: 1px solid #ffd5ab;
}

.sticky-note, .sticky-note-yellow {
    background-color: #ffffe5;
    border: 1px solid #fff0ab;
}

.sticky-note-green {
    background-color: #e5ffe5;
    border: 1px solid #abffab;
}

.sticky-note-cyan {
    background-color: #e5ffff;
    border: 1px solid #abffff;
}

.sticky-note-blue {
    background-color: #e5e5ff;
    border: 1px solid #ababff;
}

.sticky-note-magenta, .sticky-note-violet {
    background-color: #ffe5ff;
    border: 1px solid #ffabff;
}

.sticky-note-white ul,
.sticky-note-grey ul,
.sticky-note-red ul,
.sticky-note-orange ul,
.sticky-note ul, .sticky-note-yellow ul,
.sticky-note-green ul,
.sticky-note-cyan ul,
.sticky-note-blue ul,
.sticky-note-magenta ul, .sticky-note-violet ul {
    margin-left: -30px;
}

.sticky-note-white ul li,
.sticky-note-grey ul li,
.sticky-note-red ul li,
.sticky-note-orange ul li,
.sticky-note ul li, .sticky-note-yellow ul li,
.sticky-note-green ul li,
.sticky-note-cyan ul li,
.sticky-note-blue ul li,
.sticky-note-magenta ul li, .sticky-note-violet ul li {
    margin: 10px;
}

.sticky-note-red.bold {
    background-color: #ffabab;
}

.sticky-note-orange.bold {
    background-color: #ffd5ab;
}

.sticky-note.bold, .sticky-note-yellow.bold {
    background-color: #ffffab;
}

.sticky-note-green.bold {
    background-color: #abffab;
}

.sticky-note-cyan.bold {
    background-color: #abffff;
}

.sticky-note-blue.bold {
    background-color: #ababff;
}

.sticky-note-magenta.bold, .sticky-note-violet.bold {
    background-color: #ffabff;
}

/*
* Wide list styles
*/
#wide-list, #sermons {
    margin: 10px 0 20px;
}

#wide-list ul, #sermons ul {
    margin-left: 0;
    padding-left: 0;
}

#wide-list li, #sermons li {
    list-style: none;
    margin-bottom: 15px;
    padding: 10px 20px 10px 10px;
    text-align: left;
    background-color: #eee;
    border: 1px solid #ddd;
    border-left: 5px solid #bbb;
}

#wide-list a, #sermons a {
    font-size: 1.2em;
}

#wide-list ul.outline-none li, #sermons ul.outline-none li {
    border: 1px solid #eee;
    padding-bottom: 0;
    margin-bottom: 0;
}

/*
* Wide list and sermon styles overrides for WordPress Divi HC website
*/
#wide-list, #sermons {
    margin: 10px 0 20px;
}

#wide-list ul, #sermons ul {
    margin-left: 0;
    padding-left: 0;
}

#wide-list li, #sermons li {
    list-style: none;
	  margin-top: 0;
    margin-bottom: 10px;
    padding: 10px 20px;
    text-align: left;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 20px;
}

#wide-list a, #sermons a {
    font-size: 1.2em;
}

#wide-list ul.outline-none li, #sermons ul.outline-none li {
    border: 1px solid #eee;
    padding-bottom: 0;
    margin-bottom: 0;
}

/*
* Block borders
*/
.outline, .outline-white,.outline-grey {
    border: 3px solid #bbb;
}

.outline-red {
    border: 3px solid #f00;
}

.outline-orange {
    border: 3px solid #ff7f00;
}

.outline-yellow {
    border: 3px solid #ffcf00;
}

.outline-green {
    border: 3px solid #0f0;
}

.outline-cyan {
    border: 3px solid #0ff;
}

.outline-blue {
    border: 3px solid #00f;
}

.outline-magenta, .outline-violet {
    border: 3px solid #f0f;
}

.sideline, .sideline-white, .sideline-grey {
    border-left: 5px solid #bbb;
}

.sideline-red {
    border-left: 5px solid #f00;
}

.sideline-orange {
    border-left: 5px solid #ff7f00;
}

.sideline-yellow {
    border-left: 5px solid #ffcf00;
}

.sideline-green {
    border-left: 5px solid #0f0;
}

.sideline-cyan {
    border-left: 5px solid #0ff;
}

.sideline-blue {
    border-left: 5px solid #00f;
}

.sideline-magenta, .sideline-violet {
    border-left: 5px solid #f0f;
}

.headline, .-headlinewhite, .headline-grey {
    border-top: 5px solid #bbb;
}

.headline-red {
    border-top: 5px solid #f00;
}

.headline-orange {
    border-top: 5px solid #ff7f00;
}

.headline-yellow {
    border-top: 5px solid #ffcf00;
}

.headline-green {
    border-top: 5px solid #0f0;
}

.headline-cyan {
    border-top: 5px solid #0ff;
}

.headline-blue {
    border-top: 5px solid #00f;
}

.headline-magenta, .headline-violet {
    border-top: 5px solid #f0f;
}

.baseline, .baseline-white, .baseline-grey {
    border-bottom: 5px solid #bbb;
}

.baseline-red {
    border-bottom: 5px solid #f00;
}

.baseline-orange {
    border-bottom: 5px solid #ff7f00;
}

.baseline-yellow {
    border-bottom: 5px solid #ffcf00;
}

.baseline-green {
    border-bottom: 5px solid #0f0;
}

.baseline-cyan {
    border-bottom: 5px solid #0ff;
}

.baseline-blue {
    border-bottom: 5px solid #00f;
}

.baseline-magenta, .baseline-violet {
    border-bottom: 5px solid #f0f;
}

/*
* Footer sitemap
*/
#sitemap-box {
    border-top: 1px solid #ccc;
    background-color: #fff;
}

#sitemap {
    text-align: left;
    font-size: 1em;
    font-weight: normal;
    line-height: 1.4em;
    padding-top: 10px;
    background-color: #fff;
}

#sitemap ul {
    list-style-type: none;
    margin-left: 0;
    margin-bottom: 10px;
    font-size: 0.8em;
}

#sitemap ul li {
    list-style-type: none;
    margin-bottom: 0;
    padding-left: 5px;
    border-left: 1px solid #bbb;
}

#sitemap a {
    color: #777;
    text-transform: none;
}

#sitemap ul a {
    text-transform: none;
}

#sitemap a.current {
    color: #333;
}

#sitemap p {
    font-size: 1em;
    margin-bottom: 5px;
}

#sitemap p a:hover,
#sitemap ul li a:hover {
    color: #555;
    text-decoration: underline;
}

.narrow-screen-only {
    visibility: hidden;
    overflow: hidden;
    height: 0;
    width: 0;
    display: none;
}

.white-header {
    background-color:#fff;
    padding-top: 10px;
    padding-bottom: 10px;
}

.white-header h3 {
    padding-top: 10px;
    padding-bottom: 0;
}

/*
* Secondary menus
*/
.simple-menu {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    filter: none;
    height: 48px;
    padding: 0;
    margin-top: 4px;
    border-radius: 0;
    background: #bdd2ff;
}

.simple-menu a {
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;
}

.simple-menu ul {
    list-style: none;
    margin: 0 auto;
}

.simple-menu ul li {
    margin-bottom: 0;
    border-left: 1px solid #fff;
}

.simple-menu > ul > li {
    float: left;
    z-index: 300;
    padding: 0;
}

.simple-menu > ul > li > a {
    line-height: 48px;
    text-decoration: none;
    display: block;
    padding: 0 15px;
    z-index: 6;
    position: relative;
}

.simple-menu ul li a.current {
    background-color: #aabde6;
}

.simple-menu > ul > li:hover > a {
    background-color: #cfdeff;
    text-decoration: none;
}

.simple-menu li.grey, .simple-menu li.grey:hover {
    color: #aaa;
    line-height: 48px;
    text-decoration: none;
    display: block;
    padding: 0 15px;
    text-shadow: 1px 1px #777;
}

/* #Screen less than 1024 pixels wide
================================================== */

/* Note: Design for a width of less than 1024px */
@media only screen and (max-width: 1023px) {
    .photo img, .photo-with-title img {
        max-width: 95%;
    }
}

/* #Screen less than 768 pixels wide
================================================== */

/* Note: Design for a width of less than 768px */
@media only screen and (max-width: 767px) {
    .wide-screen-only {
        visibility: hidden;
        overflow: hidden;
        height: 0;
        width: 0;
        display: none;
    }

    .narrow-screen-only {
        visibility: visible;
        overflow: visible;
        height: 100%;
        width: 100%;
        display: inherit;
    }

    .container {
        background-color: #fff;
    }

    #wrap {
        background-color: #fff;
    }

    /*
    * Menus for small screens and secondary menus
    */
    #simple-menu-holder {
        height: 50px;
        margin-bottom: 30px;
    }

    .simple-menu {
        color: #444;
        height: 30px;
        font-size: 0.9em;
        border: 1px solid #ccc;
    }

    .simple-menu > ul > li > a {
        color: #666 !important;
        line-height: 30px;
        padding: 0 5px;
    }

    .simple-menu li.grey, .simple-menu li.grey:hover {
        line-height: 30px;
        padding: 0 6px;
    }

    #footer {
        background-color: #fff;
    }

    #credits {
        background-color: #fff;
    }
}

/* #Screen less than 550 pixels wide
================================================== */

/* Note: Design for a width of less than 550px */
@media only screen and (max-width: 549px) {
    .narrow-screen-only {
        visibility: visible;
        overflow: visible;
        height: 100%;
        width: 100%;
        display: inherit;
    }

    #wide-list a {
        font-size: 1em;
    }

    /* Disable photo titles on small screens */
    .photo-with-title {
        margin-bottom: 15px;
    }

    .photo-with-title img {
        padding-bottom: 10px;
    }

    .photo-with-title p {
        color: transparent;
    }
}

/* #Screen less than 380 pixels wide
================================================== */

/* Note: Design for a width of less than 380px */
@media only screen and (max-width: 379px) {
    .sf-menu li ul li ul {
        margin-top: 35px !important;
        margin-left: -130px !important;
    }
}