@charset "utf-8";

/* ============================== =blocks - base styles ============================== */

/* =CalloutBox - base */

.CalloutBox {
    color: #fff;
    background-color: #888;
    margin: 2em auto;
    padding: 1px 4%;
}

.CalloutBox p {
    margin: 1em 0;
}

/* =ReminderBox - base */

.ReminderBox {
    color: #fff;
    background-color: #888;
    width: 50%;
    float: right;
    padding: 1px 4%;
    margin: 1em 0 1em 2em;
}

.ReminderBox h4 {
    margin-top: 0.5em;
}

.ReminderBox p {
    margin: 1em 0;
}

/* =AdSense - base */

.AdSenseBoxLeft, .AdSenseBoxRight, .AdSenseBoxCenter468, .AdSenseBoxExtraColumn {
    padding: 1%;
}

.AdSenseBoxLeft {
    float: left;
    margin-right: 2%;
    margin-bottom: 2%;
}

.AdSenseBoxRight {
    float: right;
    margin-left: 2%;
    margin-bottom: 2%;
}

.AdSenseResponsiveBox {
    width: 50%;
}

@media only screen and (max-width: 447px) {
    .AdSenseResponsiveBox {
        margin: 0;
        float: none;
        width: 100%;
    }
}

.AdSenseBoxCenter {
    text-align: center;
    clear: both;
}

.AdSenseBoxCenter468 {
    width: 468px;
    margin: 2% auto;
    clear: both;
}

.AdSenseBoxExtraColumn {
    padding: 0;
    margin: 2% auto;
    clear: both;
}

/* =FBI - base */

.formBarGraphBar {
    border: 0;
    background-color: #eee;
}

#PageWrapper .formwrapper .formBuilderForm-Throbber {
    border: 0;
}
#PageWrapper .FormBlockLeft .formwrapper {
    float: left;
    margin-right: 5px;
}

#PageWrapper .FormBlockRight .formwrapper {
    float: right;
    margin-left: 5px;
}

#PageWrapper .FormBlockCenter .formwrapper {
    margin-left: auto;
    margin-right: auto;
}

/* =WhatsNew - base */

.WhatsNew {
    border: 1px solid #eee;
    margin: 1em 0;
    position: relative;
    box-sizing: border-box;
}

.WhatsNewLeft {
    float: left;
    margin-right: 0.5em;
}

.WhatsNewRight {
    float: right;
    margin-left: 0.5em;
}

.WhatsNewCenter {
    margin-left: auto;
    margin-right: auto;
}

#PageWrapper .WhatsNew img {
    border: 0;
}

#PageWrapper .WhatsNew h2 {
    margin: 0;
    padding: 0.3em 24px 0.3em 4px;
    background: #eee;
    line-height: 1.2;
    font-size: 125%;
    text-align: center;
    color: #888;
}

#PageWrapper .WhatsNew ol,
#PageWrapper .WhatsNew ul,
#PageWrapper .WhatsNew li {
    margin: 0;
    padding: 0;
    list-style: none;
    background: transparent;
}

#PageWrapper .WhatsNew ol {
    margin: 0 4%;
    overflow: hidden;
}

#PageWrapper .WhatsNew ol li {
    display: block;
    padding-bottom: 1px;
    border-top: 1px solid #ECF0F1;
    margin-top: -1px;
}

#PageWrapper .WhatsNew h3 {
    font-size: 125%;
    line-height: 1.2;
    margin-top: 1em;
    margin-bottom: 0;
}

.WhatsNew-time {
    font-size: 75%;
    color: #888;
    margin-top: 0.5em;
}

.WhatsNew-more {
    text-align: right;
    margin: 1em 0;
}

.WhatsNew-subscribe {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    text-align: right;
}

.WhatsNew-icon {
    padding: 4px 4px 2px;
    width: 24px;
    height: 22px;
}

#PageWrapper .WhatsNew-subscribe ul {
    display: none;
    padding: 2px 4px;
    background: #eee;
}

#PageWrapper .WhatsNew-subscribe ul li {
    display: block;
    background-image: none;
}

#PageWrapper .WhatsNew-subscribe:hover ul {
    display: block;
}

#PageWrapper .WhatsNew-subscribe ul img {
    display: block;
    padding: 2px 0;
    width: 91px;
    height: 21px;
}

@media only screen and (max-width: 768px) {
    #PageWrapper .WhatsNew h2 {
        padding-right: 4px;
    }

    .WhatsNew-subscribe {
        position: static;
    }

    .WhatsNew-icon {
        display: none;
    }

    #PageWrapper .WhatsNew-subscribe ul {
        display: block;
        text-align: center;
    }

    #PageWrapper .WhatsNew-subscribe ul img {
        display: inline-block;
    }
}

/* =RSSbox - base */

.RSSbox {
    margin: 1em 0 2em;
    text-align: center;
}

.RSSbox ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.RSSbox li {
    background-image: none;
    padding: 0;
    margin: 0 0 5px 0;
}

/* BEGIN =Text\Image Block - base */
.text_image_block {
    margin: 0.5em 0 0 0;
}

.text_image_not_floated.text_image_left .ImageBlock img {
    float: left;
}

.text_image_not_floated.text_image_right .ImageBlock img {
    float: right;
}

.text_image_not_floated.text_image_center .ImageBlock {
    text-align: center;
}

#PageWrapper .text_image_floated .ImageBlock {
    margin: 0.3em 0 0 0;
}

#PageWrapper .text_image_floated.text_image_left .ImageBlock {
    float: left;
    margin-right: 10px;
}

#PageWrapper .text_image_floated.text_image_right .ImageBlock {
    float: right;
    margin-left: 10px;
}

.text_image_top_cleared,
.text_image_both_cleared {
    clear: both;
}

.text_image_bottom_cleared p:last-of-type:after,
.text_image_both_cleared p:last-of-type:after {
    content: "";
    clear: both;
    display: block;
    width: 100%;
}
/* END =Text\Image Block - base */

/* BEGIN =Text\Image Block - responsive */
@media (max-width: 768px) {
    #PageWrapper .text_image_floated.text_image_left .ImageBlock,
    #PageWrapper .text_image_floated.text_image_right .ImageBlock {
        float: none;
        margin: 0 0 15px 0;
    }

    div#PageWrapper .text_image_floated .ImageBlock {
        max-width: 100%;
    }
}
/* END =Text\Image Block - responsive */

/* =Ezine - base */

.Ezine {
    padding: 4%;
    margin-bottom: 2em;
    background: #eee;
}

.Ezine table {
    width: 100%;
}

.Ezine td {
    width: 50%;
    text-align: center;
    vertical-align: top;
}

.Ezine .EzineInputAbove {
    width: 100%;
}

.EzineInput input {
    width: 85%;
    max-width: 350px;
    padding: 5px;
}

.Ezine input:focus[type="text"] {
    background-color: #ffffcc;
}

td.EzineLabel {
    text-align: right;
    vertical-align: middle;
}

td.EzineLabelAbove {
    text-align: center;
}

.EzineDescription {
    text-align: center;
}

/* =Ezine2 - base */

.Ezine2 {
    margin: 1em 0;
    padding: 0.5em;
    border: 1px solid #eee;
}

.EzineRow {
    padding: 0.5em 0;
    max-width: 100%;
    box-sizing: border-box;
}

.EzineVertical label {
    display: block;
}

.EzineHorizontal .EzineRow,
.EzineHorizontal label {
    display: inline-block;
}

.Ezine2 label,
.Ezine2 input[type="text"],
.Ezine2 input[type="email"],
.EzineButton {
    vertical-align: middle;
    max-width: 100%;
    box-sizing: border-box;
}

.Ezine2 input:focus[type="text"],
.Ezine2 input:focus[type="email"] {
    background-color: #ffffcc;
}

.EzineLeft,
body #PageWrapper .Ezine2.EzineLeft,
html.mobile body #PageWrapper .Ezine2.EzineLeft {
    text-align: left;
}

.EzineCenter,
body #PageWrapper .Ezine2.EzineCenter,
html.mobile body #PageWrapper .Ezine2.EzineCenter {
    text-align: center;
}

.EzineRight,
body #PageWrapper .Ezine2.EzineRight,
html.mobile body #PageWrapper .Ezine2.EzineRight {
    text-align: right;
}

/* =ImageBlock - base */

a .Caption {
    color: inherit;
}

.CaptionLeft {
    text-align: left !important;
}

.CaptionCenter {
    margin-left: auto;
    margin-right: auto;
    text-align: center !important;
}

.CaptionRight {
    text-align: right !important;
}

.Caption {
    font-size: 85%;
    display: block;
}

img {
    max-width: 100%;
    box-sizing: border-box;
}

/* none-JavaScript fix for too large images */
#PageWrapper .ImageBlock img {
    max-width: 100%;
}

/* IE9 and Chrome (~20) margin fix for block images with margin: auto */
.ImageBlock img {
    margin: 0;
}

#PageWrapper .ImageBlock {
    overflow: hidden;
    max-width: 100%;
}

#PageWrapper .ImageBlockLeft {
    float: left;
    text-align: center;
    margin-bottom: 10px;
}

#PageWrapper .ImageBlockLeft img {
    margin-right: 15px;
}

#PageWrapper .ImageBlockRight {
    float: right;
    text-align: center;
    margin-bottom: 10px;
}

#PageWrapper .ImageBlockRight img {
    margin-left: 15px;
}

#PageWrapper .ImageBlockRight .Caption {
    margin-left: 15px;
}
#PageWrapper .ImageBlockCenter {
    margin: 15px 0;
    text-align: center;
}

/* BEGIN =Media Block */
#PageWrapper .MediaBlock {
    margin-top: 15px;
    margin-bottom: 15px;
}

#PageWrapper .MediaBlockLeft {
    float: left;
    margin-right: 15px;
}

#PageWrapper .MediaBlockRight {
    float: right;
    margin-left: 15px;
}

#PageWrapper .MediaBlockCenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    margin-bottom: 15px;
}
/* END =Media Block */

/* BEGIN =GDPR consent cookie bar */
.eucookiebar button, .eucookiebar p{
    display:inline-block;
    margin:.25em .5em;
    font-family:"Lucida Grande",Geneva,Arial,Verdana,sans-serif;
}

.eucookiebar{
    text-align:center;
    position:absolute;
    top:-250px;
    left:0;
    right:0;
    background:#fff;
    padding:.5% 2%;
    box-shadow:0 4px 10px 1px rgba(0,0,0,.2);
    z-index:9999;
    font-size:12px;
    font-family:"Lucida Grande",Geneva,Arial,Verdana,sans-serif;
    color:#666;
    transition:top .5s ease,bottom .5s ease, opacity .5s ease
}
.eucookiebar a{
    color:#00f;
    font-weight:400;
    text-decoration:underline
}
.eucookiebar a:visited{
    color:#551A8B
}
.eucookiebar a:active{
    color:red
}
.eucookiebar button{
    background:#eee;
    border:1px solid #888;
    border-radius:4px;
    font-size:100%;
    font-weight:700;
    color:#666
}
.eucookiebar button:hover{
    background:#666;
    color:#fff
}
.eucookiebar.show{
    top:0;
    opacity:1;
}
.eucookiebar.hide{
    top:-250px;
    opacity:0;
    pointer-events:none;
}
.eucookiebar.bottom{
    top:auto;
    bottom:-250px;
    position:fixed;
}
.eucookiebar.bottom.show{
    bottom:0;
}
.eucookiebar.bottom.hide{
    bottom:-250px;
}
/* END =GDPR consent cookie bar */

#PageWrapper .noalignment {
    float: left;
}

#PageWrapper .pinit {
    text-align: center;
}

/* -- Related Pages Block -- */
#PageWrapper .RelatedPagesBlock ul {
    padding:0;
    margin:0;
    list-style:none;
}
/* down with thumbnail */
#PageWrapper .RelatedPagesBlock ul.down .relatedPagesThumbnail {
    float:left;
    margin-right:10px;
 }
 #PageWrapper .RelatedPagesBlock ul.down .relatedPagesThumbnail a {
    display: block;
    width:50px;
    height:50px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

 }
 #PageWrapper .RelatedPagesBlock ul.down h3 {
    margin-top:0;
    margin-bottom:0;
 }
 #PageWrapper .RelatedPagesBlock ul.down p {
    margin:0;
 }
 #PageWrapper .RelatedPagesBlock ul li {
    border:none !important;
    list-style-type: none!important;
 }
 #PageWrapper .RelatedPagesBlock ul.down  li {
    clear: both;
    overflow: hidden;
    padding-top:10px;
    padding-bottom:10px;
 }

/* 4 across */
#PageWrapper .RelatedPagesBlock ul.across {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row wrap;
  justify-content: space-between;
}

#PageWrapper .RelatedPagesBlock ul.across .relatedPagesThumbnail a {
    display: block;
    width:100%;
    height:200px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

 }

#PageWrapper .RelatedPagesBlock ul.across li {
    box-sizing: border-box;
    padding:10px 0;
    width: 200px;
}

/* text */
#PageWrapper .RelatedPagesBlock ul.text li {
    padding-top:10px;
    padding-bottom:10px;
}
#PageWrapper .RelatedPagesBlock ul.text li .relatedPagesThumbnail{
    display: none;
}
#PageWrapper .RelatedPagesBlock ul.text li p {
    margin:0;
}
#PageWrapper .RelatedPagesBlock .text h3 {
    margin-top:0;
}

/* =TOC - base */

.TOC dt {
    font-weight: bold;
}
.TOC dd {
    margin-bottom: 20px;
}

/* =C2 - base */

table#comments {
    table-layout: fixed;
    max-width: 100%;
}

#PageWrapper .formbody td {
    padding: 2px;
}

#NavColumn .formbody input[type="text"],
#NavColumn .formbody textarea,
#NavColumn .formbody img {
    box-sizing: border-box;
}

#NavColumn .formbody img.captcha_img {
    margin-bottom: 10px;
}

/* remove graphical bullets in the C2 Thank you notifications section */
#notificationOptions,
#notificationOptions li {
    list-style-type: none;
}

.socializeIt,
.formbody,
.c2_invitation {
    margin-top: 12px;
    margin-bottom: 12px;
}

.googlePlusOne {
    margin-top: 8px;
    margin-bottom: 8px;
}

.with_images .othervisitors p {
    margin-left:56px;
}

.thumb_container {
    float:left;
    width:50px;
    height:50px;
    overflow:hidden;
    margin-top:3px;
}

.with_images .othervisitors .submission_thumbnail {
    width:100%;
}

.othervisitors {
    clear: both;
}

.othervisitors img {
    border: 0;
}

/* -- Grid Block -- */

.grid_block {
    table-layout: fixed;
    border-collapse: collapse;
}

.grid_block td {
    padding: 0;
}

/* -- Responsive Grid Block -- */

.mobile .responsive-row img,
.bb1mobile .responsive-row img {
    max-width: 100% !important;
    box-sizing: border-box;
}

@media only screen and (max-width: 768px) {
    .responsive-row img {
        max-width: 100% !important;
        box-sizing: border-box;
    }
}

.responsive-row,
div[class*='responsive_grid_block-'] {
    overflow: hidden;
}

div[class*='responsive_col-'] {
    float: left;
    min-height: 1px;
    box-sizing: border-box;
}

.responsive_grid_block-12 div[class*='responsive_col-'] {
    width: 8.333%;
}

.responsive_grid_block-11 div[class*='responsive_col-'] {
    width: 9.0909%;
}

.responsive_grid_block-10 div[class*='responsive_col-'] {
    width: 10%;
}

.responsive_grid_block-9 div[class*='responsive_col-'] {
    width: 11.111%;
}

.responsive_grid_block-8 div[class*='responsive_col-'] {
    width: 12.5%;
}

.responsive_grid_block-7 div[class*='responsive_col-'] {
    width: 14.285%;
}

.responsive_grid_block-6 div[class*='responsive_col-'] {
    width: 16.666%;
}

.responsive_grid_block-5 div[class*='responsive_col-'] {
    width: 20%;
}

.responsive_grid_block-4 div[class*='responsive_col-'] {
    width: 25%;
}

.responsive_grid_block-3 div[class*='responsive_col-'] {
    width: 33.333%;
}

.responsive_grid_block-2 div[class*='responsive_col-'] {
    width: 50%;
}

@media only screen and (max-width: 768px) {
    .responsive_grid_block-12 div[class*='responsive_col-'] {
        width: 16.666%;
    }

    .responsive_grid_block-12 > .responsive-row > .responsive_col-7 {
        clear: left;
    }

    .responsive_grid_block-10 div[class*='responsive_col-'] {
        width: 20%;
    }

    .responsive_grid_block-10 > .responsive-row > .responsive_col-6 {
        clear: left;
    }

    .responsive_grid_block-9 div[class*='responsive_col-'] {
        width: 33.333%;
    }

    .responsive_grid_block-9 > .responsive-row > .responsive_col-4,
    .responsive_grid_block-9 > .responsive-row > .responsive_col-7 {
        clear: left;
    }

    .responsive_grid_block-8 div[class*='responsive_col-'] {
        width: 25%;
    }

    .responsive_grid_block-8 > .responsive-row > .responsive_col-5 {
        clear: left;
    }

    .responsive_grid_block-6 div[class*='responsive_col-'] {
        width: 33.333%;
    }

    .responsive_grid_block-6 > .responsive-row > .responsive_col-4 {
        clear: left;
    }

    .responsive_grid_block-4 div[class*='responsive_col-'] {
        width: 50%;
    }

    .responsive_grid_block-4 > .responsive-row > .responsive_col-3 {
        clear: left;
    }
}

@media only screen and (max-width: 447px) {

    .responsive_grid_block-12 div[class*='responsive_col-'] {
        width: 25%;
    }

    .responsive_grid_block-12 > .responsive-row > .responsive_col-5,
    .responsive_grid_block-12 > .responsive-row > .responsive_col-9 {
        clear: left;
    }

    .responsive_grid_block-12 > .responsive-row > .responsive_col-7 {
        clear: none;
    }

    .responsive_grid_block-8 div[class*='responsive_col-'],
    .responsive_grid_block-6 div[class*='responsive_col-'] {
        width: 50%;
    }

    .responsive_grid_block-8 > .responsive-row .responsive_col-3,
    .responsive_grid_block-8 > .responsive-row .responsive_col-5,
    .responsive_grid_block-8 > .responsive-row .responsive_col-7 {
        clear: left;
    }

    .responsive_grid_block-6 > .responsive-row > .responsive_col-3,
    .responsive_grid_block-6 > .responsive-row > .responsive_col-5 {
        clear: left;
    }

    .responsive_grid_block-6 > .responsive-row > .responsive_col-4 {
        clear: none;
    }

    .responsive_grid_block-11 div[class*='responsive_col-'],
    .responsive_grid_block-10 div[class*='responsive_col-'],
    .responsive_grid_block-7 div[class*='responsive_col-'],
    .responsive_grid_block-5 div[class*='responsive_col-'],
    .responsive_grid_block-4 div[class*='responsive_col-'],
    .responsive_grid_block-3 div[class*='responsive_col-'],
    .responsive_grid_block-2 div[class*='responsive_col-'] {
        width: 100%;
    }
}

/* Responsive videos */

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0; 
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed,
.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* center Facebook like and comment widgets */
#PageWrapper .fb-like,
#PageWrapper .fb-comments {
    display: block;
    text-align:center;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* =Navigation - base */

.Navigation ul {
    margin: 1em 0 2em;
    padding: 0;
    list-style: none;
}

.Navigation li {
    padding: 0;
    margin: 0;
}

#PageWrapper div.Navigation a,
.Navigation a,
#PageWrapper div.Navigation a:visited,
.Navigation a:visited {
    font-size: 20px;
    background: #eee;
    color: #888;
    padding: 5px 10px;
    text-decoration: none;
    display: block;
}

#PageWrapper div.Navigation a:hover,
.Navigation a:hover {
    background: #888;
    color: #fff;
}

/* =HorizontalNavBar - base */

#PageWrapper div.HorizontalNavBar ul.root {
    display: inline-block;
    vertical-align: top;
    *display: inline;
    *zoom: 1;
    margin: 0 auto;
    padding: 0;
    line-height: 18px;
    font-size: 16px;
}

#PageWrapper div.HorizontalNavBar ul ul {
    display: none;
    position: absolute;
    top: 27px;
    left: 1px;
    z-index: 2;
    margin: 0 0 0 -1px;
    padding: 0;
    *zoom: 1;
    background: #fff;
    width: 200px;
}

#PageWrapper div.HorizontalNavBar ul ul ul {
    top: 0;
    left: 200px;
    margin: 0 0 0 -2px;
    _top: 1px;
}

#PageWrapper div.HorizontalNavBar li {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    float: left;
    white-space: nowrap;
    border: 0;
}

#PageWrapper div.HorizontalNavBar li.li1 {
    z-index: 1;
}

#PageWrapper div.HorizontalNavBar li.hover {
    z-index: 2;
}

#PageWrapper div.HorizontalNavBar li li {
    float: none;
    white-space: normal;
    border: 1px solid #fff;
    background: #fff;
    margin-top: -1px;
}

#PageWrapper div.HorizontalNavBar span.navheader,
#PageWrapper div.HorizontalNavBar a {
    display: block;
    padding: 4px 8px;
    text-decoration: none;
    _float: left;
}

#PageWrapper div.HorizontalNavBar ul ul span.navheader,
#PageWrapper div.HorizontalNavBar ul ul a {
    _float: none;
}

#PageWrapper div.HorizontalNavBar span.navheader {
    cursor: default;
    *zoom: 1;
    position: relative;
    padding-left: 18px;
}

#PageWrapper div.HorizontalNavBar ul ul span.navheader {
    padding-left: 8px;
    padding-right: 18px;
}

#PageWrapper div.HorizontalNavBar span.navheader ins {
    display: block;
    width: 0;
    height: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    margin-top: -2px;
    left: 2px;
    border: 6px solid transparent;
    border-top-color: #000;
}

#PageWrapper div.HorizontalNavBar ul ul span.navheader ins {
    left: auto;
    top: 50%;
    right: 2px;
    margin-top: -6px;
    border: 6px solid transparent;
    border-left-color: #000;
}

#PageWrapper div.HorizontalNavBar li.hover ul,
#PageWrapper div.HorizontalNavBarCSS li:hover ul {
    display: block;
}

#PageWrapper div.HorizontalNavBar li.hover li ul,
#PageWrapper div.HorizontalNavBarCSS li:hover li ul {
    display: none;
}

#PageWrapper div.HorizontalNavBar li li.hover ul,
#PageWrapper div.HorizontalNavBarCSS li li:hover ul {
    display: block;
}

#PageWrapper div.HorizontalNavBar li li.hover li ul,
#PageWrapper div.HorizontalNavBarCSS li li:hover li ul {
    display: none;
}

#PageWrapper div.HorizontalNavBar li li li.hover ul,
#PageWrapper div.HorizontalNavBarCSS li li li:hover ul {
    display: block;
}

#PageWrapper div.HorizontalNavBar li li li.hover li ul,
#PageWrapper div.HorizontalNavBarCSS li li li:hover li ul {
    display: none;
}

#PageWrapper div.HorizontalNavBar li li li li.hover ul,
#PageWrapper div.HorizontalNavBarCSS li li li li:hover ul {
    display: block;
}

/* .wide */
#PageWrapper div.HorizontalNavBarWide ul.root {
    width: 100%;
    display: table;
}

#PageWrapper div.HorizontalNavBarWide li {
    display: table-cell;
    float: none;
    text-align: center;
}

#PageWrapper div.HorizontalNavBarWide li li {
    text-align: left;
    display: block;
}

/* alignment */
#PageWrapper div.HorizontalNavBarLeft,
#PageWrapper div.HorizontalNavBarLeft li {
    text-align: left;
}

#PageWrapper div.HorizontalNavBarCenter,
#PageWrapper div.HorizontalNavBarCenter li {
    text-align: center;
}

#PageWrapper div.HorizontalNavBarRight,
#PageWrapper div.HorizontalNavBarRight li {
    text-align: right;
}

#PageWrapper div.HorizontalNavBarCenter li li,
#PageWrapper div.HorizontalNavBarRight li li {
    text-align: left;
}

/* touch devices */
html.touch #PageWrapper div.HorizontalNavBar ul.root > li {
    z-index: 2;
}

html.touch #PageWrapper div.HorizontalNavBar ul.root > li.hover {
    z-index: 3;
}

.ResponsiveNavButton {
    display: none;
}

table#ColumnsWrapper,
table#ContentWrapper {
    border-collapse: collapse;
    width: 100%;
}

/* =SocializeIt - base */

@media only screen and (max-width: 550px) {
    .socializeIt,
    .socializeIt img,
    .socializeIt textarea {
        width: 100% !important;
    }

    .socializeIt td[rowspan="2"],
    .socializeIt td[rowspan="1"] {
        white-space: normal !important;
    }
}

/* =misc */

iframe {
    max-width: 100%;
}

.fb-like iframe {
    max-width: none !important;
}

hr {
    clear: both;
}

/* ============================== =generic ============================== */

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: Amble, Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #808080;
    background: #f2f2f2;
    padding: 0;
    margin: 0;
    text-rendering: optimizeLegibility;
}

a {
    color: #c0392b;
    font-weight: normal;
    text-decoration: none;
}

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

a img {
    border: 0;
}

hr {
    width: 80%;
    border-style: solid;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Amble, Arial, Helvetica, sans-serif;
    line-height: 1.3;
    margin: 1em 0 0.25em;
    font-weight: bold;
    color: #333;
}

h1 {
    font-size: 200%;
    text-align: center;
}

h2 {
    font-size: 166%;
}

h3 {
    font-size: 133%;
}

h4 {
    font-size: 111%;
}

h5,
h6 {
    font-size: 100%;
}

p {
    margin: 1em 0 1.5em 0;
}

/* ============================== =layout ============================== */

#PageWrapper {
    max-width: 1680px;
    margin: 0 auto;
    background: #f2f2f2;
    overflow: hidden;
}

#PageWrapper.legacy {
    min-width: 980px;
}

#Header .Liner,
#Footer .Liner {
    padding: 1px 0;
}

#ExtraWrapper {
    display: none;
}

/* =Header */

#HeaderWrapper {
    background: #fff url('sd/image-files/header.jpg') no-repeat bottom center;

}

#Header .Liner {
    position: relative;
    z-index: 2;
    min-height: 448px;
    margin: 0 auto;
    max-width: 980px;
}

#Header .WebsiteName {
    font-size: 30px;
    line-height: 1.3;
}

#Header .WebsiteName { /* SiteDesigner inheritance prevention */
    font-family: Amble, Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: bold;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    color: #333;
    text-align: left;
    border: 0;
    margin: 25px auto;
    padding: 18px 73% 18px 25px;
    background: #fff;
}

#Header .WebsiteName a {
    color: #333;
    font-weight: bold;
    text-decoration: none;
}

#Header .WebsiteName a:hover {
    color: #c0392b;
    text-decoration: none;
}

#Header .Tagline {
    color: #fff;
    font-size: 50px;
    font-weight: bold;
    text-align: center;
    margin: 2em 1em 1em 1em;
    line-height: 1.1;
}

/* =ContentColumn */

#ContentWrapper {
    max-width: 980px;
    margin: 4% auto;
}

#ContentColumn .Liner {
    padding: 1px 5%;
    background: #fff;
}

/* =NavColumn */

#NavWrapper {
    display: none;
}

/* =Footer */

#FooterWrapper {
    clear: both;
}

#Footer .Liner {
    padding: 5%;
    background: #333333;
    text-align: center;    
}

#Footer p {
    color: #868686;
    text-align: center;
}

#Footer .Liner a,
#Footer .Liner a:hover {
    color: #fff;
}

/* ============================== =blocks - custom styles ============================== */

/* =CalloutBox - custom */

.CalloutBox {
    color: #fff;
    background-color: #c0392b;
    margin: 5% 10%;
    padding: 2% 4%;
}

#PageWrapper .CalloutBox p { /* SiteDesigner inheritance prevention */
    font-family: Amble, Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    font-variant: normal;
    color: #fff;
}

.CalloutBox a,
.ReminderBox a {
    color: #e1afab;
}

/* =ReminderBox - custom */

.ReminderBox {
    color: #fff;
    background-color: #c0392b;
    padding: 2% 4%;
}

#PageWrapper .ReminderBox h4 { /* SiteDesigner inheritance prevention */
    font-family: Amble, Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    font-style: normal;
    font-variant: normal;
    color: #fff;
    text-align: left;
    border: 0;
    margin: 8px 0px 4px 0px;
    background: none;
}

#PageWrapper .ReminderBox p { /* SiteDesigner inheritance prevention */
    font-family: Amble, Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-variant: normal;
    color: #fff;
}

/* =Ezine - custom */

.Ezine {
    color: #fff;
    background: #c0392b;
    max-width: 800px;
    margin: 0 auto;
}

.EzineInput input {
    padding: 7px;
    margin: 10px;
    background: #c0392b;
    border: 1px solid #fff;
}

td.EzineLabel {
    font-family: Amble, Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
}

.EzineDescription {
    font-size: 20px;
}

/* =Ezine2 - custom */

.Ezine2 {
    color: #fff;
    background: #c0392b;
    max-width: 800px;
    margin: 0 auto;
    padding: 4%;
}

.Ezine2 label {
    font-family: Amble, Arial, Helvetica, sans-serif;
    font-size: 16px;
    margin: 5px;
    font-weight: bold;
    text-transform: uppercase;
}

.Ezine2 input[type=text],
.Ezine2 input[type=email] {
    padding: 7px;
    margin: 5px;
    background: #c0392b;
    border: 1px solid #fff;
    color: #fff;
}

.Ezine2 input:focus[type="text"],
.Ezine2 input:focus[type="email"] {
    background-color: #eb5367;
}

.EzineButton {
    margin: 5px;
    border: 0;
    padding: 1em 1.5em;
    line-height: 1.1;
    background: #da4453;
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
}

.EzineButton:hover {
    background: #eb5367;
}

/* =ImageBlock - custom */

#PageWrapper .ImageBlockLeft img {
    margin-right: 30px;
}

#PageWrapper .ImageBlockRight img,
#PageWrapper .ImageBlockRight .Caption {
    margin-left: 30px;
}

.Caption {
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    color: #333;
}

/* =Navigation - custom */

#PageWrapper div.Navigation h3,
.Navigation h3 {
    text-transform: uppercase;
}

#PageWrapper div.Navigation a,
.Navigation a,
#PageWrapper div.Navigation a:visited,
.Navigation a:visited {
    font-size: 18px;
    color: #808080;
    background: #f2f2f2;
    padding: 1% 2%;
    margin: 1% 0;;
}

#PageWrapper div.Navigation a:hover,
.Navigation a:hover {
    background: #c0392b;
    color: #fff;
}

/* =HorizontalNavBar - custom */

#Header .HorizontalNavBar {
    width: 70%;
    position: absolute;
    top: 45px;
    right: 25px;
    margin: 0 auto;
}

#PageWrapper div.HorizontalNavBar ul.root {
    font-family: Amble, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: normal;
    text-transform: uppercase;
}

#PageWrapper div.HorizontalNavBar ul ul {
    top: 40px;
    background-color: transparent;
}

#PageWrapper div.HorizontalNavBar li li {
    background: transparent;
    border: 1px solid #e74c3c;
}

#PageWrapper div.HorizontalNavBar span.navheader,
#PageWrapper div.HorizontalNavBar a {
    color: #000;
    background: #fff;
    line-height: 2;
    padding: 5px 25px;
}

#PageWrapper div.HorizontalNavBar .hover > span.navheader,
#PageWrapper div.HorizontalNavBar span.navheader:hover,
#PageWrapper div.HorizontalNavBar a:hover {
    color: #fff;
    background: #c0392b;
}

#PageWrapper div.HorizontalNavBar span.navheader ins {
    border-top-color: transparent;
}

#PageWrapper div.HorizontalNavBar ul ul span.navheader,
#PageWrapper div.HorizontalNavBar ul ul a {
    color: #fff;
    background: #e74c3c;
    padding-left: 25px;
}

#PageWrapper div.HorizontalNavBar ul ul span.navheader ins {
    border-color: transparent;
    border-left-color: #fff;
}

#PageWrapper div.HorizontalNavBar ul ul .hover > span.navheader ins,
#PageWrapper div.HorizontalNavBar ul ul span.navheader:hover ins {
    border-color: transparent;
    border-left-color: #fff;
}

/* =ResponsiveNav - custom */

@media only screen and (max-width: 768px) {
    .ResponsiveNavWrapper .HorizontalNavBar {
        display: none !important;
    }

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

    .ResponsiveNavReady .ResponsiveNavWrapper:after {
        content:'';
        display:block;
        clear: both;
    }

    .ResponsiveNavReady .ResponsiveNav {
        text-align: left;
        padding-top: 0;
        padding-bottom: 40px;
        background: #fff;
        width: 100%;
        position: absolute;
        left: -100%;
        top: 0;
        z-index: 2;
        min-height: 100%;
        box-sizing: border-box;
    }

    .ResponsiveNavReady .ResponsiveNav {
        transition: left 0.5s ease;
    }

    .ResponsiveNavActive .ResponsiveNav {
        left: 0;
    }

    .ResponsiveNavActivated #PageWrapper {
        overflow: hidden;
    }

    .ResponsiveNavReady .ResponsiveNav ul {
        border-left: 1px solid #ccc;
        margin-bottom: 10px;
        padding-left: 30px;
        list-style: none;
    }

    .ResponsiveNavReady .ResponsiveNav .navheader {
        font-size: 22px;
        color: #141412;
        font-weight: bold;
        font-style: normal;
        text-align: left;
        text-transform: uppercase;
        background: transparent;
        margin: 10px 0;
    }

    .ResponsiveNavReady .ResponsiveNav a {
        display: block;
    }

    .ResponsiveNavReady .ResponsiveNavButton {
        display: table;
        height: 45px;
        padding: 0 0.5em;
        line-height: 1.1;
        background: #da4453;
        color: #fff;
        font-size: 12px;
        text-transform: uppercase;
        text-align: center;
        cursor: pointer;
        position: absolute;
        top: 25px;
        margin-top: 15px;
        right: 25px;
        z-index: 1;
    }

    .ResponsiveNavReady .ResponsiveNavButton span {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }

    .ResponsiveNavReady .ResponsiveNavButton:hover {
        background: #eb5367;
    }

    .ResponsiveNavActive .ResponsiveNavButton {
        font-size: 18px;
        width: 45px;
        padding: 0;
        position: fixed !important;
        top: 0;
        right: 15px;
        z-index: 3;
    }

    .ResponsiveNavReady #Header .ResponsiveNavButton {
        position: absolute;
        bottom: 0;
        right: 10px;
    }
}

/* =WhatsNew - custom */

.WhatsNew {
    border: none;
    margin: 50px 0;
}

#PageWrapper .WhatsNew h2 { /* SiteDesigner inheritance prevention */
    font-family: Amble, Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: bold;
    font-style: normal;
    font-variant: normal;
    text-align: left;
    color: #333;
    border: 0;
    background: none;
}

#PageWrapper .WhatsNew h2 a {
    font-weight: bold;
    color: #333;
}

#PageWrapper .WhatsNew h3 { /* SiteDesigner inheritance prevention */
    font-family: Amble, Arial, Helvetica, sans-serif;
    font-size: 21px;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    text-align: left;
    border: 0;
    margin: 1em 0 5px 0;
    padding: 0;
    background: none;
}

#PageWrapper .WhatsNew ol li {
    border-top: 1px solid #f2f2f2;
}

.WhatsNew-subscribe {
    right: 5px;
    top: 5px;
}

.questionMark {
    font-family: Amble, Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    color: #333;
}

.RSSbox ul {
    margin: 30px 0;
}

/* ============================== =responsive ============================== */

.mobileOnly {
    display: none !important;
}

@media only screen and (max-width: 447px) {
    .desktopOnly {
        display: none !important;
    }

    .mobileOnly {
        display: block !important;
    }
}

@media only screen and (max-width: 768px) {
    .modern #Header .Liner {
        padding-top: 1px;
        min-height: 250px;
    }

    .modern #Header .WebsiteName {
        padding-right: 25px;
    }

    .modern #Header .Tagline {
        font-size: 35px;
        margin-top: 1em;
    }
}

/* =Breadcrumbs */
#PageWrapper .BreadcrumbBlock .BreadcrumbTiers {
    list-style: none;
    margin:30px 0 0;
    padding:0;
}
#PageWrapper .BreadcrumbBlock .BreadcrumbTiers .BreadcrumbItem { 
    display: inline-block;
}
#PageWrapper .BreadcrumbBlock .BreadcrumbTiers .BreadcrumbItem + .BreadcrumbItem::before {
    color: black;
    content: ">";
}
#PageWrapper .BreadcrumbBlock.BreadcrumbBlockRight .BreadcrumbTiers {
    text-align:right;
}
#PageWrapper .BreadcrumbBlock.BreadcrumbBlockLeft .BreadcrumbTiers {
    text-align:left;
}
#PageWrapper .BreadcrumbBlock.BreadcrumbBlockCenter .BreadcrumbTiers {
    text-align:center;
}

/* socialize it 3.0 */
.SocialDestinations span {
    display: none;
}
.SocialShare .socialIcon:hover {
    text-decoration: none;
}
.SocialShare .socialIcon {
    line-height: 2em;
    white-space: nowrap;
    display: inline-block;
}
#PageWrapper .SocialShare .socialIcon.twitter {
    color: #000000;
}
#PageWrapper .SocialShare .socialIcon.facebook {
    color: #3b579d;
}
#PageWrapper .SocialShare .socialIcon.pinterest {
    color: #CD1D1F;
}
#PageWrapper .SocialShare .socialIcon.tumblr {
    color: #35465c;
}
#PageWrapper .SocialShare .socialIcon.reddit {
    color: #ff4500;
}
#PageWrapper .SocialShare .socialIcon.whatsapp {
    color: #25D366;
}
#PageWrapper .SocialShare .socialIcon.messenger {
    color: #0078FF;
}
#PageWrapper .SocialShare .socialIcon.google-plus {
    color: #df4a32;
}

.SocialShare.SocialShareSticky.SocialShareStickyRightNoTranslation a, 
.SocialShare.SocialShareSticky.SocialShareStickyRight a, 
.SocialShare.SocialShareSticky.SocialShareStickyLeft a,
.SocialShare.SocialShareSticky label
{
    display: block;
}
.SocialShare.SocialShareSticky.SocialShareStickyTop a, 
.SocialShare.SocialShareSticky.SocialShareStickyBottom a,
.SocialShare.SocialShareSticky label
{
    display: inline-block;
    vertical-align: middle;
}
/* social sticky show/hide button */
.SocialShare.SocialShareSticky.SocialShareStickyRight.hidden,
.SocialShare.SocialShareSticky.SocialShareStickyRightNoTranslation.hidden {
      transform: translateY(-50%) translateX(100%);
}
.SocialShare.SocialShareSticky.SocialShareStickyLeft.hidden {
      transform: translateY(-50%) translateX(-100%);
}
.SocialShare.SocialShareSticky.SocialShareStickyTop.hidden {
      transform: translateY(-100%) translateX(-50%);
}
.SocialShare.SocialShareSticky.SocialShareStickyBottom.hidden {
      transform: translateY(100%) translateX(-50%);
}

.SocialShareSticky.SocialShareStickyRight.hidden .hideButton,
.SocialShareSticky.SocialShareStickyRightNoTranslation.hidden .hideButton 
{
    left: -35px;
    -ms-transform: rotate(0.75turn);
    transform: rotate(0.75turn);
}

.SocialShareSticky.SocialShareStickyLeft.hidden .hideButton
{
    right: -35px;
    -ms-transform: rotate(-0.75turn);
    transform: rotate(-0.75turn);
}
.SocialShareSticky.SocialShareStickyTop.hidden .hideButton
{
    top: 30px;
    -ms-transform: rotate(0.5turn);
    transform: rotate(0.5turn);
}
.SocialShareSticky.SocialShareStickyBottom.hidden .hideButton
{
    bottom: 30px;
    -ms-transform: rotate(1turn);
    transform: rotate(1turn);
}
.SocialShareSticky .hideButton {
    cursor: pointer; 
    border: 0; 
    position: absolute; 
    right: 0px;
    width: 51px; 
    height: 51px; 
    padding: 20px; 
}
.SocialShareStickyRight .hideButton,
.SocialShareStickyRightNoTranslation .hideButton {
    -ms-transform: rotate(0.25turn);
    transform: rotate(0.25turn);
}
.SocialShareStickyLeft .hideButton {
    -ms-transform: rotate(-0.25turn);
    transform: rotate(-0.25turn);
}
.SocialShareSticky.SocialShareStickyTop .hideButton {
    right:-47px;
    top:0;
}
.SocialShareSticky.SocialShareStickyBottom .hideButton {
    right:-47px;
    bottom:0;
    -ms-transform: rotate(0.50turn);
    transform: rotate(0.50turn);
}
.SocialShareSticky {
    position: fixed;
    right: 0;
    top: 50%;
    padding: 5px;
    z-index: 9999;
    background: #fff;
    text-align:center;
}
.SocialShare.SocialShareMini span, .SocialShare.SocialShareSticky span{
    display: none;
}
.SocialShareSticky.SocialShareStickyRightNoTranslation {
    right:0;
    left: auto;
    top: 25%;
    border-radius: 5px 0 0 5px;
    border-right: none !important;
}
.SocialShareSticky.SocialShareStickyRight {
    right:0;
    left: auto;
    border-radius: 5px 0 0 5px;
    transform: translateY(-50%);
    border-right: none !important;
}
.SocialShareSticky.SocialShareStickyTop {
    right:auto;
    left: 50%;
    top:0;
    border-radius: 0 0 5px 5px;
    transform: translateX(-50%);
    border-top: none !important;
}
.SocialShareSticky.SocialShareStickyBottom {
    right:auto;
    left: 50%;
    bottom:0;
    top: auto;
    border-radius: 5px 5px 0 0;
    transform: translateX(-50%);
    border-bottom: none !important;
}
.SocialShareSticky.SocialShareStickyLeft {
    left:0;
    right: auto;
    border-radius: 0 5px 5px 0;
    transform: translateY(-50%);
    border-left: none !important;
}
.socialize-pay-it-forward-wrapper {
    padding:0.5em;
    margin:2px;
}
.socialize-pay-it-forward-wrapper details {
    text-align:left;
}
.socialize-pay-it-forward-wrapper summary {
    cursor:pointer;
    text-align:center;
    outline:none;
    list-style:none;
    text-decoration: none;
}
.socialize-pay-it-forward-wrapper summary:hover {
    text-decoration: underline;
}
.socialize-pay-it-forward-wrapper summary::-webkit-details-marker {
    display:none;
}
.socialIcon svg {
    margin-left: 3px;
    margin-right: 3px;
    height: 2em;
    width: 2em;
    display: inline-block;
    vertical-align: middle;
}

/* FAQ and Accordion block */
.FAQContainer {
    padding: 20px 0;
}
.FAQContainer .AccordionContainer summary {
    font-size: 22px;
    margin-top: 0;
    padding: 10px 0;
    list-style: none;
}
.FAQContainer .AccordionContainer summary .AccordionHeader {
    cursor: pointer;
}
.FAQContainer .AccordionContainer summary::-webkit-details-marker {
    display: none;
}
.FAQContainer .AccordionContainer summary .AccordionHeader:before {
    content: "\25BA";
    float: left;
    margin-right: 5px;
    font-size: 0.7em;
    line-height: 2em;
}
.FAQContainer .AccordionContainer[open] .AccordionHeader:before {
    content: "\25BC";
}
.FAQContainer.disabled .AccordionContainer summary .AccordionHeader:before {
    display: none;
}
.FAQContainer .AccordionContainer summary .AccordionHeader p {
    display: block;
    margin: 0;
    padding: 0;
}

.FAQContainer.disabled .AccordionContainer summary::marker {
    content: '';
    display: block;
}
.FAQContainer.disabled .AccordionContainer summary {
    pointer-events: none;
}

/* submission block fix - #42174*/
@media (max-width: 768px) {
    .imagePreview img {
        height: auto;
    }
}

/* BEGIN = YT Facade - #43415 */
.YtFacade {
    position: relative;
}
.YtFacade iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.YtFacade img {
    width: 100%;
    height: 100%;
    z-index: 2;
    object-fit: cover;
}
.YtFacade svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 48px;
    margin-top: -24px;
    margin-left: -34px;
    z-index: 3;
}
.YtFacadeButton {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    cursor: pointer;
}
/* END = YT Facade - #43415 */

/* BEGIN = WhatsNew layout fixes - #43571 */
#PageWrapper .WhatsNew-subscribe ul {
    padding: 4px;
}
#PageWrapper .WhatsNew-subscribe ul img {
    margin: 4px;
}
/* END = WhatsNew layout fixes - #43571 */

/* BEGIN = YT Facade mobile fix - #43731 */
.YtFacade {
    max-width: 100%;
}
@media (max-width: 768px) {
    .YtFacade {
        height: auto !important;
        aspect-ratio: 16 / 9;
    }
}
/* END = YT Facade mobile fix - #43731 */
/* =styles-combo.css temp= */

/***** C2 styles *****/
.c2Form {
padding:8px;
border:1px solid #ddd;
}

.c2Form input[type=text] {
max-width: 100%;
}

@media only screen and (max-width: 440px) {
.c2Form table,
.c2Form tr,
.c2Form tbody,
.c2Form td {
display: block;
}
.c2Form table p {
text-align: left !important;
}
.otherText {
display: block;
}
}

.InvShelp {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #ffc;
}

.InvShelpT {
background:#ddd;
padding:0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin:0px;
padding:0px;
text-align:left;
}

a:link.InvShelp {text-decoration:none; color:#000;}

.InvShelpbox {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #ffc;
padding: 2px;
border: 1px solid #666;
}

.InvSquestions {
font-weight:bold;
font-size:14px;
margin:0;
}

.titleInput {
width:80%;
padding-top:4px;
margin:0;
}

.storyInput {
width:98%;
padding-top:4px;
margin:0;
}

.otherText {
}

.dividerRule {
border-top:1px solid #ddd;
}

/***** Blog It! styles *****/

.blogItItem .blogItThumbnail {
float: left;
margin-right: 10px;
margin-bottom: 10px;
max-width: 150px;
}

.blogItItem .blogItReadMore {
clear: both;
}

/* additional styles */

/***********************************************/
/* Customizations from SiteDesigner start here */
/***********************************************/

/* font Amble definition */
@font-face {
    font-family: Amble;
    font-display: fallback;
    src: url('css_webfonts/amble-webfont.eot');
    src: url('css_webfonts/amble-webfont.eot?iefix') format('eot'),
         url('css_webfonts/amble-webfont.woff') format('woff'),
         url('css_webfonts/amble-webfont.ttf') format('truetype'),
         url('css_webfonts/amble-webfont.svg#ambleregular') format('svg');
    font-weight: normal;
    font-style: normal;
} 

/* font Amble bold definition */
@font-face {
    font-family: Amble;
    font-display: fallback;
    src: url('css_webfonts/amble-bold-webfont.eot');
    src: url('css_webfonts/amble-bold-webfont.eot?iefix') format('eot'),
         url('css_webfonts/amble-bold-webfont.woff') format('woff'),
         url('css_webfonts/amble-bold-webfont.ttf') format('truetype'),
         url('css_webfonts/amble-bold-webfont.svg#amblebold') format('svg');
    font-weight: bold;
        font-style: normal;
} 

/* font Amble italic definition */
@font-face {
    font-family: Amble;
    font-display: fallback;
    src: url('css_webfonts/amble-italic-webfont.eot');
    src: url('css_webfonts/amble-italic-webfont.eot?iefix') format('eot'),
         url('css_webfonts/amble-italic-webfont.woff') format('woff'),
         url('css_webfonts/amble-italic-webfont.ttf') format('truetype'),
         url('css_webfonts/amble-italic-webfont.svg#ambleitalic') format('svg');
    font-weight: normal;
        font-style: italic;
} 

/* font Amble bold-italic definition */
@font-face {
    font-family: Amble;
    font-display: fallback;
    src: url('css_webfonts/amble-bold-italic-webfont.eot');
    src: url('css_webfonts/amble-bold-italic-webfont.eot?iefix') format('eot'),
         url('css_webfonts/amble-bold-italic-webfont.woff') format('woff'),
         url('css_webfonts/amble-bold-italic-webfont.ttf') format('truetype'),
         url('css_webfonts/amble-bold-italic-webfont.svg#amblebold_italic') format('svg');
    font-weight: bold;
        font-style: italic;
} 
/* regular */body, html.mobile body {
	background-color : #efefef;
	font-family : Amble, Arial, Helvetica, sans-serif;
}
#PageWrapper #Footer .Liner p, html.mobile #PageWrapper #Footer .Liner p {
	color : #000000;
	font-size : 12px;
	letter-spacing : 1px;
	text-transform : uppercase;
}
body, html.mobile body {
	background-color : #efefef;
	font-family : Amble, Arial, Helvetica, sans-serif;
}
#PageWrapper #Footer .Liner p, html.mobile #PageWrapper #Footer .Liner p {
	color : #000000;
	font-size : 12px;
	letter-spacing : 1px;
	text-transform : uppercase;
}
#PageWrapper #Footer .Liner, html.mobile #PageWrapper #Footer .Liner {
	background-color : transparent;
}

/* custom fix for footer transparency #PageWrapper #Footer .Liner, html.mobile #PageWrapper #Footer .Liner */ 
 #Footer {
 background: transparent; }
                #PageWrapper #Header .Liner, html.mobile #PageWrapper #Header .Liner {
	background-image : url("sd/image-files/otter-header-with-words.png");
	background-position : 0% 0%;
	background-repeat : no-repeat;
	background-size : 100% auto;
	min-height : 350px;
}
#PageWrapper #ContentColumn .Liner, html.mobile #PageWrapper #ContentColumn .Liner {
	margin-left : 0px;
	margin-right : 0px;
	margin-top : 0px;
	padding-bottom : 49px;
	padding-left : 18px;
	padding-right : 13px;
	padding-top : 0px;
}
#PageWrapper #ContentColumn .Liner, html.mobile #PageWrapper #ContentColumn .Liner {
	background-color : #f4f1ee;
	background-image : none;
}
#PageWrapper #ContentColumn , html.mobile #PageWrapper #ContentColumn  {
	color : #333333;
	font-family : Tahoma, Geneva;
	font-size : 19px;
	letter-spacing : 0px;
	line-height : 30px;
	word-spacing : 3px;
}
body #PageWrapper, html.mobile body #PageWrapper {
	box-shadow : 3px 3px 3px 0px #cccccc;
}
#PageWrapper, html.mobile #PageWrapper {
	background-color : #f4f1ee;
	background-image : none;
	background-position : 0% 100%;
	background-repeat : no-repeat;
	border-bottom-width : 0;
	border-color : #e4dbc5;
	border-left-width : 0;
	border-right-width : 0;
	border-style : solid;
	border-top-width : 0;
}
#PageWrapper h1, html.mobile #PageWrapper h1 {
	color : #1f1c1a;
	font-family : Georgia, "Times New Roman", Times, serif;
	font-size : 34px;
}
#PageWrapper h2, html.mobile #PageWrapper h2 {
	color : #1f1c1a;
	font-family : Georgia, "Times New Roman", Times, serif;
	font-size : 28px;
	margin-bottom : 10px;
	margin-top : 19px;
	padding-bottom : 8px;
	padding-top : 30px;
}
#PageWrapper h3, html.mobile #PageWrapper h3 {
	color : #1f1c1a;
	font-family : Georgia, "Times New Roman", Times, serif;
	font-size : 23px;
	margin-top : 21px;
	padding-top : 30px;
}
#PageWrapper h4, html.mobile #PageWrapper h4 {
	color : #000000;
	font-family : Alice, Georgia, Times, serif;
	font-size : 19px;
	padding-top : 12px;
	text-transform : none;
}
#PageWrapper #Header .HorizontalNavBar, html.mobile #PageWrapper #Header .HorizontalNavBar {
	background-color : #5e5650;
}
#PageWrapper div.HorizontalNavBar ul a, html.mobile #PageWrapper div.HorizontalNavBar ul a {
	font-family : Verdana, Geneva;
	font-size : 18px;
	padding-bottom : 7px;
	padding-left : 14px;
	padding-right : 14px;
	padding-top : 7px;
	text-transform : none;
}
#PageWrapper div.HorizontalNavBar ul a:link, html.mobile #PageWrapper div.HorizontalNavBar ul a:link {
	background-color : #2d2926;
	color : #dcd4ca;
}
#PageWrapper div.HorizontalNavBar ul a:visited, html.mobile #PageWrapper div.HorizontalNavBar ul a:visited {
	background-color : #5e5650;
	color : #dcd4ca;
}
#PageWrapper div.HorizontalNavBar ul a:hover, html.mobile #PageWrapper div.HorizontalNavBar ul a:hover {
	background-color : #2d2926;
	color : #dcd4ca;
}
#PageWrapper div.HorizontalNavBar ul span.navheader, html.mobile #PageWrapper div.HorizontalNavBar ul span.navheader {
	background-color : #2d2926;
	color : #dcd4ca;
	font-family : Verdana, Geneva;
	font-size : 18px;
	padding-bottom : 7px;
	padding-left : 14px;
	padding-right : 14px;
	padding-top : 7px;
	text-transform : none;
}
#PageWrapper div.HorizontalNavBar ul span.navheader:hover, #PageWrapper div.HorizontalNavBar li:hover > span.navheader, #PageWrapper div.HorizontalNavBar .hover > span.navheader, html.mobile #PageWrapper div.HorizontalNavBar ul span.navheader:hover, #PageWrapper div.HorizontalNavBar li:hover > span.navheader, #PageWrapper div.HorizontalNavBar .hover > span.navheader {
	background-color : #2d2926;
	color : #dcd4ca;
}
#PageWrapper div.HorizontalNavBar ul span.navheader ins, html.mobile #PageWrapper div.HorizontalNavBar ul span.navheader ins {
	border-bottom-color : #2d2926;
	border-left-color : #2d2926;
	border-right-color : #2d2926;
}
#PageWrapper div.HorizontalNavBar ul span.navheader:hover ins, #PageWrapper div.HorizontalNavBar ul li:hover > span.navheader ins, #PageWrapper div.HorizontalNavBar ul .hover > span.navheader ins, html.mobile #PageWrapper div.HorizontalNavBar ul span.navheader:hover ins, #PageWrapper div.HorizontalNavBar ul li:hover > span.navheader ins, #PageWrapper div.HorizontalNavBar ul .hover > span.navheader ins {
	border-bottom-color : #2d2926;
	border-left-color : #2d2926;
	border-right-color : #2d2926;
}
#PageWrapper div.HorizontalNavBar, html.mobile #PageWrapper div.HorizontalNavBar {
	bottom : 0px;
	top : auto;
}
#PageWrapper div.HorizontalNavBar .li1 .li2, html.mobile #PageWrapper div.HorizontalNavBar .li1 .li2 {
	border-bottom-width : 0;
	border-color : #000000;
	border-left-width : 0;
	border-right-width : 0;
	border-style : solid;
	border-top-width : 0;
}
#PageWrapper div.HorizontalNavBar .li1 .li2 .li3, html.mobile #PageWrapper div.HorizontalNavBar .li1 .li2 .li3 {
	border-bottom-width : 0;
	border-color : #000000;
	border-left-width : 0;
	border-right-width : 0;
	border-style : solid;
	border-top-width : 0;
}
#PageWrapper div.HorizontalNavBar ul ul, html.mobile #PageWrapper div.HorizontalNavBar ul ul {
	top : 43px;
}
#PageWrapper div.HorizontalNavBar ul ul a, html.mobile #PageWrapper div.HorizontalNavBar ul ul a {
	font-size : 16px;
	padding-left : 10px;
	padding-right : 18px;
}
#PageWrapper div.HorizontalNavBar ul ul a:link, html.mobile #PageWrapper div.HorizontalNavBar ul ul a:link {
	background-color : #5e5650;
	color : #dcd4ca;
}
#PageWrapper div.HorizontalNavBar ul ul a:visited, html.mobile #PageWrapper div.HorizontalNavBar ul ul a:visited {
	background-color : #5e5650;
	color : #dcd4ca;
}
#PageWrapper div.HorizontalNavBar ul ul a:hover, html.mobile #PageWrapper div.HorizontalNavBar ul ul a:hover {
	background-color : #2d2926;
	color : #dcd4ca;
}
#PageWrapper div.HorizontalNavBar ul ul span.navheader, #PageWrapper div.HorizontalNavBar ul ul .hover > span.navheader, html.mobile #PageWrapper div.HorizontalNavBar ul ul span.navheader, #PageWrapper div.HorizontalNavBar ul ul .hover > span.navheader {
	background-color : #5e5650;
	color : #dcd4ca;
	font-size : 16px;
	padding-left : 10px;
	padding-right : 18px;
}
#PageWrapper div.HorizontalNavBar ul ul span.navheader:hover, #PageWrapper div.HorizontalNavBar ul ul li:hover > span.navheader, html.mobile #PageWrapper div.HorizontalNavBar ul ul span.navheader:hover, #PageWrapper div.HorizontalNavBar ul ul li:hover > span.navheader {
	background-color : #2d2926;
	color : #dcd4ca;
}
#PageWrapper div.HorizontalNavBar ul ul span.navheader ins, html.mobile #PageWrapper div.HorizontalNavBar ul ul span.navheader ins {
	border-bottom-color : #5E5650;
	border-left-color : #333333;
	border-right-color : #5E5650;
	border-top-color : #5E5650;
	border-width : 6px;
	margin-top : -6px;
}
#PageWrapper div.HorizontalNavBar ul ul span.navheader:hover ins, html.mobile #PageWrapper div.HorizontalNavBar ul ul span.navheader:hover ins {
	border-bottom-color : #2d2926;
	border-left-color : #bfbfbf;
	border-right-color : #2d2926;
	border-top-color : #2d2926;
}
#ContentColumn ol, html.mobile #ContentColumn ol {
	margin-left : 1px;
}
#ContentColumn ol li, html.mobile #ContentColumn ol li {
	line-height : 33px;
	padding-left : 5px;
}
#ContentColumn ul, html.mobile #ContentColumn ul {
	margin-left : 3px;
}
#ContentColumn ul li, html.mobile #ContentColumn ul li {
	line-height : 31px;
	padding-left : 3px;
}
#PageWrapper .CalloutBox p, html.mobile #PageWrapper .CalloutBox p {
	color : #000000;
	font-family : Tahoma, Geneva;
	font-size : 18px;
	font-style : italic;
	text-align : left;
	word-spacing : 4px;
}
#PageWrapper .CalloutBox, html.mobile #PageWrapper .CalloutBox {
	background-color : #f4f1ee;
	background-image : none;
	background-position : 50% 0%;
	background-repeat : no-repeat;
	border-bottom-width : 0;
	border-color : #0f4b91;
	border-left-width : 4px;
	border-right-width : 0;
	border-style : solid;
	border-top-width : 0;
	color : #000000;
	font-family : Tahoma, Geneva;
	font-size : 18px;
	font-style : italic;
	margin-bottom : 18px;
	margin-left : 0px;
	margin-right : 0px;
	margin-top : 31px;
	padding-bottom : 10px;
	padding-left : 1%;
	padding-right : 1%;
	padding-top : 10px;
	text-align : left;
	width : 100%;
	word-spacing : 4px;
}
#PageWrapper .ReminderBox, html.mobile #PageWrapper .ReminderBox {
	background-color : #dcd4ca;
	border-bottom-width : 2px;
	border-color : #004aad;
	border-left-width : 2px;
	border-right-width : 2px;
	border-style : solid;
	border-top-width : 2px;
	margin-left : 45px;
	padding-left : 45px;
	width : 30%;
}
#PageWrapper .ReminderBox h4, html.mobile #PageWrapper .ReminderBox h4 {
	color : #000000;
	font-size : 20px;
}
#PageWrapper .ReminderBox ul, html.mobile #PageWrapper .ReminderBox ul {
	color : #000000;
	font-size : 16px;
	font-style : normal;
}
#PageWrapper .ReminderBox ol, html.mobile #PageWrapper .ReminderBox ol {
	color : #000000;
	font-size : 16px;
	font-style : normal;
}
#PageWrapper .ReminderBox p, html.mobile #PageWrapper .ReminderBox p {
	color : #000000;
	font-size : 16px;
	font-style : normal;
}
#ContentColumn a, html.mobile #ContentColumn a {
	font-style : italic;
	font-weight : bold;
	text-decoration : underline;
}
#ContentColumn a:not([data-pin-href]):link, html.mobile #ContentColumn a:not([data-pin-href]):link {
	color : #004aad;
}
#ContentColumn a:visited, html.mobile #ContentColumn a:visited {
	color : #004aad;
}
#ContentColumn a:not([data-pin-href]):hover, html.mobile #ContentColumn a:not([data-pin-href]):hover {
	background-color : #ffffff;
	color : #7561ba;
}
#PageWrapper #Footer a, html.mobile #PageWrapper #Footer a {
	font-style : normal;
	font-weight : bold;
	text-decoration : underline;
}
#PageWrapper #Footer a:link, html.mobile #PageWrapper #Footer a:link {
	color : #1460b9;
}
#PageWrapper #Footer a:visited, html.mobile #PageWrapper #Footer a:visited {
	color : #655794;
}
#PageWrapper #Footer a:hover, html.mobile #PageWrapper #Footer a:hover {
	color : #868686;
	font-style : normal;
}
#PageWrapper .ReminderBox a, html.mobile #PageWrapper .ReminderBox a {
	font-weight : normal;
	text-decoration : underline;
}
#PageWrapper .ReminderBox a:link, html.mobile #PageWrapper .ReminderBox a:link {
	color : #004aad;
}
#PageWrapper .ReminderBox a:visited, html.mobile #PageWrapper .ReminderBox a:visited {
	color : #004aad;
}
#PageWrapper .ReminderBox a:hover, html.mobile #PageWrapper .ReminderBox a:hover {
	background-color : transparent;
	color : #655794;
	font-style : italic;
	font-weight : bold;
	text-decoration : underline;
}
#PageWrapper .CalloutBox a, html.mobile #PageWrapper .CalloutBox a {
	font-style : normal;
	font-weight : normal;
	text-decoration : underline;
}
#PageWrapper .CalloutBox a:link, html.mobile #PageWrapper .CalloutBox a:link {
	color : #004aad;
}
#PageWrapper .CalloutBox a:visited, html.mobile #PageWrapper .CalloutBox a:visited {
	color : #655794;
}
#PageWrapper .CalloutBox a:hover, html.mobile #PageWrapper .CalloutBox a:hover {
	background-color : transparent;
	color : #655794;
}
hr, html.mobile hr {
	background-color : #868686;
	color : #868686;
	width : 90%;
}
#PageWrapper .WhatsNew h2, html.mobile #PageWrapper .WhatsNew h2 {
	color : #004aad;
}
#PageWrapper .WhatsNew .WhatsNew-time, html.mobile #PageWrapper .WhatsNew .WhatsNew-time {
	margin-bottom : 6px;
	margin-top : 4px;
}
#PageWrapper .WhatsNew .WhatsNew-content, html.mobile #PageWrapper .WhatsNew .WhatsNew-content {
	font-family : Verdana, Geneva;
	margin-bottom : 23px;
}
#PageWrapper .WhatsNew h3 a, html.mobile #PageWrapper .WhatsNew h3 a {
	font-style : normal;
	text-decoration : underline;
}
#PageWrapper .responsive-row div[class*="responsive_col-"], html.mobile #PageWrapper .responsive-row div[class*="responsive_col-"] {
	box-sizing : border-box;
	padding-bottom : 5px;
	padding-left : 2%;
	padding-right : 2%;
	padding-top : 5px;
}
#PageWrapper .WhatsNew h3 a:link, html.mobile #PageWrapper .WhatsNew h3 a:link {
	color : #004aad;
}
#PageWrapper .WhatsNew h3 a:visited, html.mobile #PageWrapper .WhatsNew h3 a:visited {
	color : #868686;
}
#PageWrapper .WhatsNew h3, html.mobile #PageWrapper .WhatsNew h3 {
	font-size : 20px;
	margin-bottom : 14px;
	margin-top : 19px;
}
#PageWrapper .WhatsNew .WhatsNew-more, html.mobile #PageWrapper .WhatsNew .WhatsNew-more {
	margin-bottom : 13px;
	margin-top : 10px;
	padding-bottom : 26px;
}
#PageWrapper .WhatsNew h2 a, html.mobile #PageWrapper .WhatsNew h2 a {
	font-style : normal;
}
#PageWrapper .WhatsNew h2 a:link, html.mobile #PageWrapper .WhatsNew h2 a:link {
	color : #333333;
}
#PageWrapper #HeaderWrapper, html.mobile #PageWrapper #HeaderWrapper {
	background-color : transparent;
	background-image : none;
	background-position : 0% 0%;
	background-repeat : no-repeat;
	background-size : 100% auto;
}
#PageWrapper #FooterWrapper, html.mobile #PageWrapper #FooterWrapper {
	background-color : transparent;
}
#PageWrapper .Caption, html.mobile #PageWrapper .Caption {
	font-size : 15px;
}
#PageWrapper .ImageBlock a:link span, html.mobile #PageWrapper .ImageBlock a:link span {
	font-style : normal;
	font-weight : normal;
	text-decoration : none;
}
#PageWrapper .ImageBlock a:visited span, html.mobile #PageWrapper .ImageBlock a:visited span {
	color : #004aad;
}
#PageWrapper .ImageBlock a:hover span, html.mobile #PageWrapper .ImageBlock a:hover span {
	font-style : italic;
	text-decoration : underline;
}
#PageWrapper #Header .WebsiteName, html.mobile #PageWrapper #Header .WebsiteName {
	background-color : transparent;
	background-image : none;
	font-family : Verdana, Geneva;
	font-size : 36px;
	line-height : 16px;
	margin-bottom : 0px;
	margin-left : 80px;
	margin-right : 0px;
	margin-top : 150px;
	padding-bottom : 0px;
	padding-left : 80px;
	padding-right : 300px;
	padding-top : 0px;
}
#PageWrapper #Header .Tagline, html.mobile #PageWrapper #Header .Tagline {
	background-position : 0% 100%;
	color : #333333;
	font-size : 24px;
	margin-bottom : 42px;
	margin-left : 150px;
	margin-right : 20px;
	margin-top : 55px;
	padding-bottom : 5px;
	text-align : left;
}
#PageWrapper #Header .WebsiteName a, html.mobile #PageWrapper #Header .WebsiteName a {
	color : #ffffff;
}
#PageWrapper #Header .WebsiteName a:link, html.mobile #PageWrapper #Header .WebsiteName a:link {
	color : #ffffff;
}
#PageWrapper #Header .WebsiteName a:visited, html.mobile #PageWrapper #Header .WebsiteName a:visited {
	color : #ffffff;
}
#PageWrapper #Header .WebsiteName a:hover, html.mobile #PageWrapper #Header .WebsiteName a:hover {
	color : #ffffff;
}
body #PageWrapper .Ezine2, body #PageWrapper .Ezine, html.mobile body #PageWrapper .Ezine2, body #PageWrapper .Ezine {
	background-color : transparent;
	color : #333333;
	text-align : center;
}
body #PageWrapper .Ezine2 .EzineRow label, html.mobile body #PageWrapper .Ezine2 .EzineRow label {
	color : #ffffff;
}
body #PageWrapper .Ezine2 .EzineRow input[type=text], html.mobile body #PageWrapper .Ezine2 .EzineRow input[type=text] {
	background-color : #ffffff;
	color : #ffffff;
	text-align : center;
}
body #PageWrapper .Ezine2 .EzineRow input[type=email], html.mobile body #PageWrapper .Ezine2 .EzineRow input[type=email] {
	background-color : #ffffff;
	color : #ffffff;
	text-align : center;
}
#PageWrapper .Ezine2 .EzineButton, html.mobile #PageWrapper .Ezine2 .EzineButton {
	background-color : #1a69c4;
	border-bottom-left-radius : 31px;
	border-bottom-right-radius : 31px;
	border-bottom-width : 2px;
	border-color : #ffffff;
	border-left-width : 2px;
	border-right-width : 2px;
	border-style : solid;
	border-top-left-radius : 31px;
	border-top-right-radius : 31px;
	border-top-width : 2px;
	font-weight : bold;
	letter-spacing : 1px;
	margin-bottom : 6px;
	margin-left : 6px;
	margin-right : 6px;
	margin-top : 6px;
	padding-bottom : 13px;
	padding-left : 23px;
	padding-right : 24px;
	padding-top : 14px;
}
#PageWrapper .Ezine2 a, html.mobile #PageWrapper .Ezine2 a {
	color : #ffffff;
}
#PageWrapper .Ezine2 a:link, html.mobile #PageWrapper .Ezine2 a:link {
	color : #ffffff;
}
#PageWrapper .Ezine2 a:visited, html.mobile #PageWrapper .Ezine2 a:visited {
	color : #c4d9f5;
}
#PageWrapper .Ezine2 a:hover, html.mobile #PageWrapper .Ezine2 a:hover {
	background-color : transparent;
	color : #edf3fa;
}
body .eucookiebar, html.mobile body .eucookiebar {
	background-color : #303030;
}
body .eucookiebar p, html.mobile body .eucookiebar p {
	color : #d6d6d6;
}
body .eucookiebar a, html.mobile body .eucookiebar a {
	color : #c4d9f5;
	font-weight : bold;
}
body .eucookiebar a:link, html.mobile body .eucookiebar a:link {
	color : #c4d9f5;
	font-weight : bold;
}
body .eucookiebar a:visited, html.mobile body .eucookiebar a:visited {
	color : #c4d9f5;
}
body .eucookiebar a:hover, html.mobile body .eucookiebar a:hover {
	color : #ffffff;
}
#PageWrapper .BreadcrumbBlock .BreadcrumbTiers, html.mobile #PageWrapper .BreadcrumbBlock .BreadcrumbTiers {
	text-align : left;
}
#PageWrapper .BreadcrumbBlock .BreadcrumbTiers .BreadcrumbItem + .BreadcrumbItem::before, html.mobile #PageWrapper .BreadcrumbBlock .BreadcrumbTiers .BreadcrumbItem + .BreadcrumbItem::before {
	margin-left : 2px;
	margin-right : 6px;
}
#PageWrapper .BreadcrumbBlock .BreadcrumbTiers .BreadcrumbItem, html.mobile #PageWrapper .BreadcrumbBlock .BreadcrumbTiers .BreadcrumbItem {
	font-size : 16px;
	margin-bottom : 14px;
	padding-left : 4px;
	padding-right : 4px;
}
#PageWrapper .BreadcrumbBlock .BreadcrumbTiers .BreadcrumbItem a, html.mobile #PageWrapper .BreadcrumbBlock .BreadcrumbTiers .BreadcrumbItem a {
	color : #7a4a36;
}
#PageWrapper .BreadcrumbBlock .BreadcrumbTiers .BreadcrumbItem a:link, html.mobile #PageWrapper .BreadcrumbBlock .BreadcrumbTiers .BreadcrumbItem a:link {
	color : #7a4a36;
}
#PageWrapper .BreadcrumbBlock .BreadcrumbTiers .BreadcrumbItem a:hover, html.mobile #PageWrapper .BreadcrumbBlock .BreadcrumbTiers .BreadcrumbItem a:hover {
	color : #7a4a36;
}
#PageWrapper .BreadcrumbBlock .BreadcrumbTiers .BreadcrumbItem a:visited, html.mobile #PageWrapper .BreadcrumbBlock .BreadcrumbTiers .BreadcrumbItem a:visited {
	color : #655794;
}
#PageWrapper .FAQContainer .AccordionContainer summary, html.mobile #PageWrapper .FAQContainer .AccordionContainer summary {
	color : #1f1c1a;
	font-weight : bold;
	padding-bottom : 7px;
}
#PageWrapper .FAQContainer .AccordionContainer .AccordionContent, html.mobile #PageWrapper .FAQContainer .AccordionContainer .AccordionContent {
	font-family : Tahoma, Geneva;
	word-spacing : 4px;
}

/* mobile */
/* media queries */@media (max-width:768px) {body {
	background-image : url("sd/image-files/medium-pencil-header-landscape.png");
	background-position : 50% 0%;
	background-repeat : no-repeat;
}
body {
	background-image : url("sd/image-files/medium-pencil-header-landscape.png");
	background-position : 50% 0%;
	background-repeat : no-repeat;
}
#PageWrapper #Header .Liner {
	background-color : transparent;
	background-image : url("sd/image-files/otter-header-with-words-tablet.jpg");
	background-position : 0% 0%;
	min-height : 259px;
}
#PageWrapper #ContentColumn .Liner {
	padding-bottom : 49px;
	padding-top : 9px;
}
#PageWrapper h1 {
	font-size : 34px;
	margin-top : 20px;
}
#PageWrapper h2 {
	font-size : 31px;
}
#PageWrapper .ResponsiveNavButton {
	background-color : #000000;
	background-position : 0% 0%;
	color : #ffffff;
}
#PageWrapper .ResponsiveNav {
	background-color : #000000;
	background-position : 0% 100%;
}
#PageWrapper #HeaderWrapper {
	background-image : none;
	background-size : 100% auto;
}
#PageWrapper #Header .WebsiteName {
	font-size : 24px;
	margin-top : 63px;
}
#PageWrapper .BreadcrumbBlock .BreadcrumbTiers .BreadcrumbItem {
	margin-top : 0px;
	padding-top : 0px;
}
}@media (max-width:447px) {body {
	background-position : 0% 0%;
}
body {
	background-position : 0% 0%;
}
#PageWrapper #Header .Liner {
	background-color : transparent;
	background-image : url("sd/image-files/otter-header-with-words-mobile.jpg");
	background-size : 100% auto;
	min-height : 51px;
}
#PageWrapper #ContentColumn .Liner {
	padding-top : 0px;
}
#PageWrapper #ContentColumn .Liner {
	background-image : none;
}
#PageWrapper #ContentColumn  {
	font-size : 20px;
}
#PageWrapper h1 {
	font-size : 30px;
}
#PageWrapper h2 {
	font-size : 24px;
}
#PageWrapper h3 {
	font-size : 20px;
}
#PageWrapper h4 {
	font-size : 16px;
}
#PageWrapper .CalloutBox p {
	line-height : 33px;
}
#PageWrapper .CalloutBox {
	line-height : 33px;
}
#PageWrapper .ReminderBox h4 {
	font-size : 17px;
}
#PageWrapper .ResponsiveNavButton {
	background-color : #303030;
	background-position : 0% 0%;
}
#PageWrapper .ResponsiveNav a {
	font-size : 19px;
	line-height : 35px;
}
#PageWrapper #HeaderWrapper {
	background-image : none;
}
#PageWrapper #Header .WebsiteName {
	font-size : 18px;
	margin-left : 41px;
	margin-top : 12px;
	padding-left : 55px;
	padding-right : 312px;
	padding-top : 1px;
}
#PageWrapper .BreadcrumbBlock .BreadcrumbTiers .BreadcrumbItem {
	font-size : 15px;
	line-height : 36px;
}
}.Navigation h3, html.mobile .Navigation h3{font-family:Verdana, Geneva;color:#004aad;
}html.mobile .Navigation h3{
}@media (max-width:768px) {.Navigation h3{
}}@media (max-width:447px) {.Navigation h3{
}}#PageWrapper .Navigation h3, html.mobile #PageWrapper .Navigation h3{font-family:Verdana, Geneva;color:#004aad;
}html.mobile #PageWrapper .Navigation h3{
}@media (max-width:768px) {#PageWrapper .Navigation h3{
}}@media (max-width:447px) {#PageWrapper .Navigation h3{
}}body #PageWrapper div.Navigation h3, html.mobile body #PageWrapper div.Navigation h3{font-family:Verdana, Geneva;color:#004aad;
}html.mobile body #PageWrapper div.Navigation h3{
}@media (max-width:768px) {body #PageWrapper div.Navigation h3{
}}@media (max-width:447px) {body #PageWrapper div.Navigation h3{
}}.Navigation a, html.mobile .Navigation a{font-weight:normal;font-style:normal;font-family:Verdana, Geneva;font-family:Verdana, Geneva;
}html.mobile .Navigation a{
}@media (max-width:768px) {.Navigation a{
}}@media (max-width:447px) {.Navigation a{
}}#PageWrapper div.Navigation a, html.mobile #PageWrapper div.Navigation a{font-weight:normal;font-style:normal;font-family:Verdana, Geneva;font-family:Verdana, Geneva;
}html.mobile #PageWrapper div.Navigation a{
}@media (max-width:768px) {#PageWrapper div.Navigation a{
}}@media (max-width:447px) {#PageWrapper div.Navigation a{
}}.Navigation a,
#PageWrapper div.Navigation a {}
html.mobile .Navigation a,
html.mobile #PageWrapper div.Navigation a {}.Navigation a:link, html.mobile .Navigation a:link{color:#004aad;background-color:#dcd4ca;
}html.mobile .Navigation a:link{
}@media (max-width:768px) {.Navigation a:link{
}}@media (max-width:447px) {.Navigation a:link{
}}#PageWrapper div.Navigation a:link, html.mobile #PageWrapper div.Navigation a:link{color:#004aad;background-color:#dcd4ca;
}html.mobile #PageWrapper div.Navigation a:link{
}@media (max-width:768px) {#PageWrapper div.Navigation a:link{
}}@media (max-width:447px) {#PageWrapper div.Navigation a:link{
}}.Navigation a:visited, html.mobile .Navigation a:visited{border-color:#d6d6d6;background-color:#dcd4ca;color:#ffffff;
}html.mobile .Navigation a:visited{
}@media (max-width:768px) {.Navigation a:visited{
}}@media (max-width:447px) {.Navigation a:visited{
}}#PageWrapper div.Navigation a:visited, html.mobile #PageWrapper div.Navigation a:visited{border-color:#d6d6d6;background-color:#dcd4ca;color:#ffffff;
}html.mobile #PageWrapper div.Navigation a:visited{
}@media (max-width:768px) {#PageWrapper div.Navigation a:visited{
}}@media (max-width:447px) {#PageWrapper div.Navigation a:visited{
}}.Navigation a:hover, html.mobile .Navigation a:hover{background-color:#dcd4ca;color:#333333;
}html.mobile .Navigation a:hover{
}@media (max-width:768px) {.Navigation a:hover{
}}@media (max-width:447px) {.Navigation a:hover{
}}#PageWrapper div.Navigation a:hover, html.mobile #PageWrapper div.Navigation a:hover{background-color:#dcd4ca;color:#333333;
}html.mobile #PageWrapper div.Navigation a:hover{
}@media (max-width:768px) {#PageWrapper div.Navigation a:hover{
}}@media (max-width:447px) {#PageWrapper div.Navigation a:hover{
}}
#PageWrapper .Ezine {
padding: 4px 0;
}
/* footer css *//* footer css */
/* Advanced CSS provided by user */@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Nunito+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&display=swap');

/* =============================================================
   PENCIL TOPICS — COMPLETE CUSTOM CSS
   Paste this entire file into SBI Site Designer → Custom CSS,
   replacing whatever is currently there.

   Structure:
   1. Google Fonts @import (above — must be first line)
   2. PART 1: Legacy site styling (modified to remove specificity conflicts)
   3. PART 2: New Soft Stone + Terracotta theme

   Last updated: 2026-05-24
   ============================================================= */

/* =============================================================
   PART 1 — LEGACY SITE STYLING
   Styles for un-migrated pages. The new theme overrides these
   for any page wrapped in <div class="pencil-page">.
   ============================================================= */

/* ------ TYPOGRAPHY ------ */

body,
p,
#Footer .Liner p {
line-height: 31px;
font-family: 'Verdana', Arial, sans-serif;
}

.CalloutBox p {
font-family: 'Verdana', Georgia, serif;
line-height: 1.9;
}

.ReminderBox p {
font-family: 'Verdana', Georgia, serif;
font-style: italic;
}

h1, h2, h3, h4,
.CalloutBox h2,
.CalloutBox h3,
.CalloutBox h4,
.ReminderBox h2,
.ReminderBox h3,
.ReminderBox h4,
.WhatsNew h2,
.WhatsNew h3 {
line-height: 1.25;
margin: 1em 0 .75em;
font-family: Georgia, serif;
font-weight: 700;
font-style: normal;
letter-spacing: -0.02em;
margin-top: 20px
}

h1 {
margin: 1em 0 0.5em;
}

.CalloutBox h2,
.CalloutBox h3,
.CalloutBox h4 {
margin-top: 0.5em;
}

#relatedpages h3 {
font-size:19px;
}

h4,
.CalloutBox h4,
.ReminderBox h4 {
letter-spacing: 0.05em;
}

a img:hover {
opacity: 0.8;
}

.ImageBlock a:hover {
background: none !important;
}

ul li,
html.mobile ul li {
margin: 0 0 10px 0;
}

#Footer .Liner p {
font-weight: bold;
display: table;
padding: 4px 10px;
clear: both;
margin: 10px auto;
}

/* ------ SITE STRUCTURE ------ */

body {
padding: 0;
}

#PageWrapper {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0 !important;
box-sizing: border-box;
position: relative;
}

#Header,
#Footer {
width: 100%;
max-width: 100%;
margin: 0 auto;
}

#PageWrapper #HeaderWrapper {
background-position: center bottom;
}

#PageWrapper #Header .Liner {
width: 100%;
max-width: 1150px;
padding: 0;
margin: 0 auto;
display: table;
min-height: 40px;
}

#ContentWrapper {
margin: 20px auto;
border-radius: 4px;
box-shadow: 0 0 10px #0002;
background: #fff;
}

#PageWrapper #ContentColumn .Liner {
  background: none;
  padding: 10px 50px 50px;
  max-width: 1080px;    /* NEW — caps content area at 980px (1080 minus 50px padding each side) */
  margin: 0 auto;       /* NEW — centres the Liner so Soft Stone shows on either side */
}

#Footer .Liner {
padding: 45px 15px 50px;
}

@media only screen and (max-width: 768px) {
#PageWrapper #Header .Liner {
min-height: 50px;
position: initial;
}

#PageWrapper #ContentColumn .Liner {
padding: 10px 40px 50px;
}
}

@media only screen and (max-width: 640px) {
#PageWrapper #ContentColumn .Liner {
padding: 10px 25px 50px;
}
}

@media only screen and (max-width: 447px) {
#PageWrapper #ContentColumn .Liner {
padding: 10px 15px 50px;
}
}

/* ------ SITE NAVIGATION ------ */

@media only screen and (min-width: 769px) {
#PageWrapper #Header .HorizontalNavBar {
display: none;
}
.SS_BB2 #PageWrapper #Header .HorizontalNavBar {
display: block;
}
}

#BelowHeaderWrapper {
clear: both;
width: 100%;
}

#PageWrapper div.HorizontalNavBar {
top: initial;
width: 100%;
max-width: 100%;
height: auto;
position: relative;
float: none;
clear: both;
margin: 0;
padding: 0;
font-family: Georgia, serif;
bottom: initial;
opacity: 1;
background: #f1f0f1;
}

.SS_BB2 #PageWrapper div.HorizontalNavBar {
margin: 0;
padding: 0;
float: none;
max-width: 100%;
}

#PageWrapper div.HorizontalNavBar ul.root {
padding: 10px 20px 0;
width: 100%;
box-sizing: border-box;
font-family: Georgia, serif;
}

#PageWrapper div.HorizontalNavBar ul.root li {
float: none;
display: inline-block;
}

#PageWrapper div.HorizontalNavBar ul.root li li {
display: block;
background: none;
}

#PageWrapper div.HorizontalNavBar ul ul {
background: #3a2e26;
padding: 6px 0;
border-radius: 4px;
top: 50px;
line-height: 1.5;
box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

#PageWrapper div.HorizontalNavBar ul ul ul {
border-radius: 4px;
padding: 6px 0;
top: 0px;
background: #3a2e26;
box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

#PageWrapper div.HorizontalNavBar ul .li1:last-child ul {
left: auto;
right: -15px;
}

.HorizontalNavBar a {
border: 0;
}

#PageWrapper div.HorizontalNavBar ul span.navheader,
#PageWrapper div.HorizontalNavBar ul a {
padding-top: 12px;
padding-bottom: 5px;
font-family: Georgia, serif;
}

#PageWrapper div.HorizontalNavBar ul a {
padding-left: 12px;
padding-right: 12px;
}

#PageWrapper div.HorizontalNavBar ul span.navheader {
padding-left: 12px;
padding-right: 21px;
}

#PageWrapper div.HorizontalNavBar ul ul span.navheader,
#PageWrapper div.HorizontalNavBar ul ul a {
line-height: 1.3;
padding-top: 7px;
padding-bottom: 7px;
font-weight: 400;
}

#PageWrapper div.HorizontalNavBar ul span.navheader ins,
#PageWrapper div.HorizontalNavBar ul ul span.navheader ins {
left: auto;
content: " ";
height: 4px;
width: 4px;
border: 1px solid #000;
display: inline-block;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
margin: 0px 0 5px 0px;
top: 53%;
right: 9px;
opacity: 1;
}

#PageWrapper div.HorizontalNavBar ul span.navheader ins {
border-width: 0 0.1em 0.1em 0;
}

#PageWrapper div.HorizontalNavBar ul ul span.navheader ins {
border-width: 0.1em 0.1em 0 0;
border-color: #333;
top: 37%;
}

#PageWrapper div.HorizontalNavBar ul li:hover > span.navheader ins,
#PageWrapper div.HorizontalNavBar ul .hover > span.navheader ins {
border-color: #1460b9;
}
#PageWrapper div.HorizontalNavBar ul ul li:hover > span.navheader ins,
#PageWrapper div.HorizontalNavBar ul ul .hover > span.navheader ins {
border-color: #1460b9;
opacity: 1;
}

@media only screen and (max-width: 768px) {
.BelowHeaderWrapper {
display: none !important;
}
.ResponsiveNavReady #Header .ResponsiveNavButton {
top: 34px;
right: 20px;
}
#PageWrapper .ResponsiveNavButton span,
#PageWrapper .ResponsiveNavActive .ResponsiveNavButton span {
color: rgba(0,0,0,0);
font-size: 10px;
background: url("https://www.pencil-topics.co.uk/image-files/menu-white.png") no-repeat center center;
background-size: 30px 25px;
width: 29px;
display: inline-block;
height: 52px;
}
#PageWrapper .ResponsiveNavActive .ResponsiveNavButton span {
background: url("https://www.pencil-topics.co.uk/image-files/menu-x.png") no-repeat center center;
background-size: 30px 25px;
}
#PageWrapper .ResponsiveNavButton,
#PageWrapper .ResponsiveNavActive .ResponsiveNavButton {
border-radius: 50%;
border: 1px solid #fff;
background: #1460b9;
width: 55px !important;
height: 55px;
padding: 0;
margin: 0;
}
#PageWrapper .ResponsiveNavActive .ResponsiveNavButton {
border: 1px solid #fff;
background: #1460b9;
}
#PageWrapper .ResponsiveNavButton:hover {
background: #000;
}
#PageWrapper .ResponsiveNav span {
font-size: 16px;
letter-spacing: 0.02em;
text-transform: uppercase;
font-weight: bold;
}
#PageWrapper .ResponsiveNav {
background: #f4f4f4;
margin-top: 0;
padding: 5px 10px;
}
.ResponsiveNavReady .ResponsiveNav ul {
padding-left: 20px;
}
#PageWrapper .ResponsiveNav a {
display: inline-block;
border: none !important;
color: #000;
letter-spacing: 0.02em;
width: 100%;
box-sizing: border-box;
text-decoration: none;
font-size: 18px;
padding: 3px 5px 0;
margin: 4px 0;
font-weight: bold;
}
#PageWrapper .ResponsiveNav a:hover {
color: #1460b9;
}
}

/* ------ CALLOUT BOX ------ */

#PageWrapper .CalloutBox {
background-size: 100% 100%;
background-position: center;
}

/* ------ BUTTON ELEMENTS ------ */

.ButtonBlock {
margin: 1em 0 2em;
}

.ss-ui-bootstrap .btn-primary {
color: #fff !important;
background-color: #1460b9 !important;
border-color: #1460b9 !important;
text-decoration: none !important;
padding: 12px 25px 14px !important;
border-radius: 10px !important;
font-weight: 700 !important;
font-size: 17px !important;
letter-spacing: 0.025em !important;
margin: 0.5em 0;
white-space: initial !important;
font-family: 'Lato', Arial, sans-serif;
text-transform: uppercase;
}

.ss-ui-bootstrap .btn-primary:hover {
color: #1460b9 !important;
background-color: #fff !important;
}

/* ------ HORIZONTAL LINE - DIVIDER ------ */

hr {
border: none !important;
width: 100%;
border-width: 0;
margin: 45px auto 40px;
height: 1px;
}

@media only screen and (max-width: 768px) {
hr {
margin: 30px auto 25px;
}
}

/* ------ FACEBOOK COMMENTS ------ */

.fb-like,
.fb-like span,
.fb-like span iframe,
.fb-comment,
.fb-comments,
.fb-comments span,
.fb-comments span iframe {
width: 100% !important;
}

/* ------ FORMS (contact form) ------ */

table.formwrapper input[type="text"],
table.formwrapper textarea {
background-color: #FFF;
border-radius: 2px;
border: 0.1em solid #aaa;
padding: 10px 2%;
line-height: 23px;
font-size: 17px;
width: 96%;
}

table.formwrapper h2 {
text-align: left !important;
}

table.formwrapper label {
padding-top: 12px;
float: left;
padding-bottom: 12px;
text-align: left;
}

table.formwrapper p input {
min-width: 250px;
clear: both;
float: left;
width: 250px;
}

table.formwrapper p a {
float: left;
clear: both;
display: block;
}

table.formwrapper input[type="submit"] {
float: left;
padding: 10px 25px;
border: 2px solid #52572f;
border-radius: 10px;
background: #fff;
color: #52572f;
text-transform: none;
font-size: 17px;
margin: 20px 0;
cursor: pointer;
-webkit-appearance: none;
font-family: 'Lato', Arial, sans-serif;
font-weight: 700;
}

table.formwrapper input[type="submit"]:hover {
background: #52572f;
color: #fff;
border-color: #52572f;
}

table.formwrapper textarea {
margin-left: -5px
}

/* ------ CUSTOM SEARCH ------ */

.CustomSearch {
padding: 0;
max-width: 100%;
margin: 100px 30px 0 0;
width: 210px;
float: right;
box-sizing: border-box;
clear: right;
}

.CustomSearchBox {
margin: 0;
position: relative;
width: 100%;
height: auto;
float: none;
}

.CustomSearchBox form {
text-align: center;
border: 1px solid #ddd;
display: table;
border-radius: 4px;
width: 100%;
background: #fff;
}

.CustomSearchBox input.CustomSearchInput {
margin: 0;
width: calc(100% - 46px);
padding: 8px 12px 6px 17px;
border-radius: 4px 0 0 4px;
height: 42px;
-webkit-appearance: none;
font-size: 13px;
color: #333;
border: 0;
background: none;
text-align: left;
line-height: 42px;
float: left;
box-sizing: border-box;
font-family: 'Lato', Arial, sans-serif;
}

.CustomSearchBox input.CustomSearchButton {
color: transparent;
background: url("image-files/search-icon-57x57.png") no-repeat transparent;
font-size: 12px;
height: 42px;
width: 44px;
cursor: pointer;
-webkit-appearance: none;
border: 0;
padding: 0;
border-radius: 0 4px 4px 0;
background-size: 20px;
background-position: center center;
margin: 0;
float: left;
opacity: 1;
}

.CustomSearchBox:hover input.CustomSearchInput {
color: #000;
}

.CustomSearchBox input.CustomSearchButton:hover {
opacity: 0.6;
}

@media only screen and (max-width: 768px) {
#Header .CustomSearch {
padding: 0;
margin: 41px 100px 0 0;
width: 100%;
max-width: 190px;
}
.CustomSearchBox form {
background: #fffd;
}
}

@media only screen and (max-width: 600px) {
#Header .CustomSearch {
margin: 8px 15px 12px;
max-width: calc(100% - 30px);
float: left;
clear: both;
}
}

/* ------ REMINDER BOX ------ */

@media only screen and (max-width: 768px) {
#PageWrapper .ReminderBox {
width: 60%;
}
}

@media only screen and (max-width: 640px) {
#PageWrapper .ReminderBox {
width: 60%;
margin-left: auto;
margin-right: auto;
float: none;
}
}

/* ------ PHOTO FRAME ------ */

#PageWrapper .Frame .ImageBlock {
background: #eee;
border: 1px solid #d4d4d4;
display: table;
padding: 30px 35px 13px;
border-radius: 4px;
margin: 0 auto;
}

#ContentColumn .Frame .ImageBlock span.Caption {
font-family: 'Caveat', Georgia, script;
font-weight: bold;
font-style: normal;
color: #4b4b4b;
font-size: 20px;
}

/* ------ LIST ITEM MARGINS ------ */

ol li {
margin-bottom: 16px;
}

ul li {
margin-bottom: 16px;
}

/* ------ SITESELL SUPPORT FIXES (Jun 19, 2025: header gap on mobile) ------ */

#PageWrapper #Header .Liner, html.mobile #PageWrapper #Header .Liner {
height: auto;
}

#ContentWrapper {
margin: 0px auto;
}

@media only screen and (max-width: 600px) {
#Header .CustomSearch {
margin: 35px 15px 12px;
}}

@media only screen and (max-width: 768px) {
.BelowHeaderWrapper {
display: block !important;
}
}

#PageWrapper .ResponsiveNavButton,
#PageWrapper .ResponsiveNavActive .ResponsiveNavButton {
background-color:#000000;
}
#PageWrapper .ResponsiveNavButton:hover,
#PageWrapper .ResponsiveNavActive .ResponsiveNavButton:hover {
background-color:#333333;
}

/* ------ TABLE OF CONTENTS ------ */

#table-of-contents {
  max-width: 100%;
  border: 1px solid #e6e6e6;
  background: #fbfbfb;
  padding: 14px;
  margin: 8px 0 20px;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  font-size: 15px;
  line-height: 1.45;
}

#table-of-contents > h2 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
}

#table-of-contents ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#table-of-contents li {
  margin: 6px 0;
}

#table-of-contents a {
  color: inherit;
  text-decoration: none;
  padding: 6px 8px;
  display: inline-block;
  border-radius: 4px;
}

#table-of-contents a:hover,
#table-of-contents a:focus {
  background: rgba(0,0,0,0.04);
  outline: none;
  text-decoration: none;
}

#table-of-contents a:focus-visible {
  box-shadow: 0 0 0 3px rgba(21,156,228,0.18);
  border-radius: 4px;
}

#toc-toggle {
  display: inline-block;
  margin-bottom: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #1d3a5f;     /* dark blue */
  background: #1d3a5f;           /* dark blue */
  color: #fff;                   /* white text */
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

#toc-toggle:hover,
#toc-toggle:focus {
  background: #274d7a;           /* a touch lighter on hover */
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  outline: none;
}

/* Triangle indicator — flips with the script's aria-expanded */
#toc-toggle::after { content: " \25BC"; font-size: 0.7em; }        /* ▼ when open */
#toc-toggle[aria-expanded="false"]::after { content: " \25B6"; }   /* ▶ when collapsed */

@media (max-width: 760px) {
  #table-of-contents {
    padding: 12px;
    margin: 8px 0 16px;
    font-size: 15px;
  }
  #toc-toggle {
    width: 100%;
    text-align: left;
    padding-left: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
}

h2 { scroll-margin-top: 90px; }

#table-of-contents {
  box-sizing: border-box;
  padding: 14px 20px;
  margin-left: 12px;
  margin-right: 12px;
  max-width: calc(100% - 24px);
}

#table-of-contents ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

#table-of-contents li {
  margin: 8px 0;
}

#table-of-contents a {
  display: inline-block;
  padding: 6px 8px;
}
@media (max-width:760px){
  #table-of-contents { margin-left: 8px; margin-right: 8px; padding: 12px; }
   #table-of-contents ul { padding-left: 0; }
}

/* =============================================================
   PART 2 — NEW PENCIL TOPICS THEME
   Soft Stone + Terracotta. All page styles scoped under
   .pencil-page. Site header + nav + footer apply globally.
   ============================================================= */

/* ====== PAGE WRAPPER ====== */
.pencil-page {
  background: #f4f1ee;
  color: #2d2926;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 1.25rem;
  line-height: 1.75;
  font-weight: 400;
  min-height: 100vh;
  padding: 0;
}

.pencil-page .page-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 40px 32px 80px;
}

/* ====== TYPOGRAPHY ====== */
.pencil-page h1,
.pencil-page h2,
.pencil-page h3,
.pencil-page h4 {
  font-family: 'Lora', serif;
  font-weight: 600;
  margin-top: 1.8em;
  margin-bottom: 0.5em;
  letter-spacing: -0.01em;
}

.pencil-page h1 {
  font-size: 2.3rem;
  color: #1f1c1a;
  line-height: 1.25;
  margin-top: 0.5em;
  margin-bottom: 0.3em;
  text-align: center;
}

.pencil-page h2 {
  font-size: 1.6rem;
  color: #5e3a2a;
  border-bottom: 1px solid #d8d0c8;
  padding-bottom: 8px;
  line-height: 1.35;
}

.pencil-page h3 {
  font-size: 1.25rem;
  color: #7a4a36;
  font-weight: 600;
}

.pencil-page p {
  margin: 0 0 1.1em;
  color: #2d2926;
}

.pencil-page strong { color: #1f1c1a; font-weight: 700; }

.pencil-page a {
  color: #a85e3e;
  text-decoration: underline;
  font-weight: inherit;
}
.pencil-page a:hover { color: #7a4226; }

/* External link indicator (triggered by target="_blank") */
.pencil-page p a[target="_blank"]::after,
.pencil-page li a[target="_blank"]::after {
  content: " ↗";
  font-size: 0.85em;
  color: #a85e3e;
  font-weight: 400;
  white-space: nowrap;
}

.pencil-page ul, .pencil-page ol {
  padding-left: 24px;
  margin: 0 0 1.2em;
}
.pencil-page li { margin-bottom: 0.5em; }

.pencil-page hr {
  border: 0;
  border-top: 1px solid #d8d0c8;
  margin: 36px 0;
}

/* ====== STANDARD BYLINE ====== */
.pencil-page .byline {
  text-align: center;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.95rem;
  color: #5e5650;
  margin-bottom: 32px;
}
.pencil-page .byline a { color: #a85e3e; }

/* ====== HIGHLIGHT BOX (with paper-edge texture) ====== */
.pencil-page .highlight-box {
  position: relative;
  background: #ede5dc;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.30 0 0 0 0 0.22 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  border-left: 4px solid #a85e3e;
  border-radius: 0 6px 6px 0;
  padding: 20px 24px 18px;
  margin: 28px 0;
}
.pencil-page .highlight-box::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 4px;
  right: 0;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M0,8 Q10,2 20,5 T40,4 T60,7 T80,3 T100,6 T120,4 T140,7 T160,3 T180,5 T200,4 L200,10 L0,10 Z' fill='%23ede5dc'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 200px 10px;
}
.pencil-page .highlight-box p:last-child { margin-bottom: 0; }
.pencil-page .highlight-box .hb-label {
  font-family: 'Lora', serif;
  font-weight: 600;
  color: #5e3a2a;
}

/* ====== ANSWER CAPSULE (direct answer under H1 / H2) ====== */
.pencil-page .answer-capsule {
  background: #fcf6ef;
  border: 1px solid #e4d2bc;
  border-left: 4px solid #a85e3e;
  border-radius: 0 6px 6px 0;
  padding: 18px 24px 16px;
  margin: 0 0 32px;
}
.pencil-page .answer-capsule .capsule-label {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #a85e3e;
  margin: 0 0 8px;
  line-height: 1.4;
}
.pencil-page .answer-capsule .capsule-text {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.65;
  color: #2d2926;
  font-weight: 500;
}
.pencil-page .answer-capsule.compact {
  padding: 14px 20px 12px;
  margin: 0 0 24px;
}
.pencil-page .answer-capsule.compact .capsule-label {
  font-size: 0.72rem;
  margin-bottom: 6px;
}
.pencil-page .answer-capsule.compact .capsule-text {
  font-size: 1.08rem;
  font-weight: 400;
}

/* ====== CALLOUT BOX (with pencil graphic) ====== */
.pencil-page .callout-box {
  position: relative;
  background: #ede5dc;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.30 0 0 0 0 0.22 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  border-radius: 8px;
  padding: 22px 24px 20px 28px;
  margin: 32px 0 32px 56px;
}
.pencil-page .callout-box::before {
  content: "";
  position: absolute;
  left: -64px;
  top: 14px;
  width: 76px;
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30'%3E%3Crect x='8' y='11' width='2' height='8' fill='%238b9499'/%3E%3Crect x='10' y='11' width='10' height='8' fill='%23c47969'/%3E%3Crect x='20' y='12' width='55' height='6' fill='%23d4a373'/%3E%3Crect x='20' y='12' width='55' height='1.5' fill='%23a85e3e'/%3E%3Crect x='20' y='16.5' width='55' height='1.5' fill='%237a4226'/%3E%3Cpolygon points='75,12 95,15 75,18' fill='%23e7c8a0'/%3E%3Cpolygon points='88,14 95,15 88,16' fill='%232d2926'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.85;
}
.pencil-page .callout-title {
  font-family: 'Lora', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #5e3a2a;
  margin: 0 0 6px;
}
.pencil-page .callout-box p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .pencil-page .callout-box { margin-left: 0; }
  .pencil-page .callout-box::before {
    position: static;
    display: block;
    margin: 0 auto 8px;
  }
}

/* ====== SKETCHED LINE DIVIDER ====== */
.pencil-page .sketch-divider {
  display: block;
  margin: 44px auto;
  width: 360px;
  max-width: 80%;
  height: auto;
  opacity: 0.7;
}

/* ====== T4 Q&A BLOCK ====== */
.pencil-page .qa-block {
  background: #fffefb;
  border: 1px solid #dcd4ca;
  border-left: 4px solid #a85e3e;
  border-radius: 0 6px 6px 0;
  padding: 22px 24px 18px;
  margin: 24px 0;
}
.pencil-page .qa-question {
  font-family: 'Lora', serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #5e3a2a;
  margin: 0 0 12px;
  line-height: 1.4;
}
.pencil-page .qa-question::before {
  content: "Q. ";
  color: #a85e3e;
  font-weight: 700;
}
.pencil-page .qa-answer { margin-bottom: 0; }
.pencil-page .qa-answer::before {
  content: "A. ";
  color: #a85e3e;
  font-weight: 700;
  font-family: 'Lora', serif;
}

/* ====== T4 PAGE HERO (typographic question) ====== */
.pencil-page .t4-question-hero {
  background: #ede5dc;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.30 0 0 0 0 0.22 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  border-radius: 8px;
  padding: 32px 36px;
  margin: 0 0 28px;
  text-align: center;
}
.pencil-page .t4-question-hero .t4-eyebrow {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #a85e3e;
  margin: 0 0 8px;
}
.pencil-page .t4-question-hero h1 {
  font-family: 'Lora', serif;
  font-size: 2rem;
  color: #1f1c1a;
  margin: 0;
  text-align: center;
  line-height: 1.3;
  border: none;
}

/* ====== TUTORIAL STEP CARD ====== */
.pencil-page .step-card {
  background: #fffefb;
  border: 1px solid #dcd4ca;
  border-radius: 6px;
  padding: 22px 24px;
  margin: 20px 0;
  position: relative;
}
.pencil-page .step-card .step-number {
  display: inline-block;
  background: #a85e3e;
  color: #ffffff;
  font-family: 'Lora', serif;
  font-weight: 600;
  font-size: 1.05rem;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border-radius: 50%;
  margin-right: 14px;
  vertical-align: middle;
}
.pencil-page .step-card .step-title {
  font-family: 'Lora', serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #5e3a2a;
  display: inline;
  vertical-align: middle;
}
.pencil-page .step-card .step-body {
  margin-top: 14px;
  margin-bottom: 0;
}

/* ====== PHOTO LAYOUTS ====== */
.pencil-page .photo-inline,
.pencil-page .photo-wide {
  margin: 28px 0;
}
.pencil-page .photo-inline .photo-img {
  width: 100%;
  height: 0;
  padding-top: 66.67%; /* 3:2 */
  background-size: cover;
  background-position: center;
  border-radius: 4px;
}
.pencil-page .photo-wide .photo-img {
  width: 100%;
  height: 0;
  padding-top: 56.25%; /* 16:9 */
  background-size: cover;
  background-position: center;
  border-radius: 4px;
}

.pencil-page .photo-caption {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.95rem;
  color: #5e5650;
  font-style: italic;
  text-align: center;
  margin: 10px 0 0;
  line-height: 1.5;
  padding: 0 12px;
}

.pencil-page .photo-feature {
  width: calc(100% + 80px);
  margin-left: -40px;
  margin-right: -40px;
  margin-top: 32px;
  margin-bottom: 32px;
}
.pencil-page .photo-feature .photo-img {
  width: 100%;
  height: 0;
  padding-top: 40%; /* 2.5:1 */
  background-size: cover;
  background-position: center;
  border-radius: 4px;
}
.pencil-page .photo-feature .feature-caption {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.95rem;
  color: #5e5650;
  text-align: center;
  font-style: italic;
  margin: 10px 0 0;
  padding: 0 12px;
  line-height: 1.5;
}
@media (max-width: 640px) {
  .pencil-page .photo-feature {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

.pencil-page .photo-pair {
  display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  margin: 28px -8px;
}
.pencil-page .photo-pair-item {
  width: calc(50% - 16px);
  margin: 8px;
}
.pencil-page .photo-pair-item .photo-img {
  width: 100%;
  height: 0;
  padding-top: 75%; /* 4:3 */
  background-size: cover;
  background-position: center;
  border-radius: 4px;
}
@media (max-width: 640px) {
  .pencil-page .photo-pair-item { width: calc(100% - 16px); }
}

.pencil-page .photo-trio {
  display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  margin: 28px -8px;
}
.pencil-page .photo-trio-item {
  width: calc(33.333% - 16px);
  margin: 8px;
}
.pencil-page .photo-trio-item .photo-img {
  width: 100%;
  height: 0;
  padding-top: 100%; /* square */
  background-size: cover;
  background-position: center;
  border-radius: 4px;
}
.pencil-page .photo-trio-item .photo-caption {
  font-size: 0.88rem;
}
@media (max-width: 640px) {
  .pencil-page .photo-trio-item { width: calc(50% - 16px); }
}

/* ====== PHOTO PORTRAIT (single, preserves aspect ratio) ====== */
.pencil-page .photo-portrait {
  text-align: center;
  margin: 28px auto;
}
.pencil-page .photo-portrait img {
  display: block;
  margin: 0 auto;
  max-width: 460px;
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.pencil-page .photo-portrait .photo-caption {
  margin-top: 10px;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}

/* ====== PHOTO TRIO PORTRAIT (three vertical photos side by side) ====== */
.pencil-page .photo-trio-portrait {
  display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-justify-content: center; justify-content: center;
  -webkit-align-items: flex-start; align-items: flex-start;
  margin: 28px -8px;
}
.pencil-page .photo-trio-portrait-item {
  width: calc(33.333% - 16px);
  margin: 8px;
  text-align: center;
}
.pencil-page .photo-trio-portrait-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}
.pencil-page .photo-trio-portrait-item .photo-caption {
  font-size: 0.88rem;
  margin-top: 8px;
}
@media (max-width: 640px) {
  .pencil-page .photo-trio-portrait-item { width: calc(50% - 16px); }
}

/* ====== LINK CARDS ====== */
.pencil-page .link-card {
  background: #fffefb;
  border: 1px solid #dcd4ca;
  border-radius: 6px;
  padding: 18px 22px;
  margin: 14px 0;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.pencil-page .link-card:hover {
  border-color: #a85e3e;
  box-shadow: 0 4px 14px rgba(45,41,38,0.08);
}
.pencil-page .link-card .card-title {
  font-family: 'Lora', serif;
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 6px;
}
.pencil-page .link-card .card-title a {
  color: #5e3a2a;
  text-decoration: none;
}
.pencil-page .link-card .card-title a:hover { color: #a85e3e; }
.pencil-page .link-card .card-desc {
  margin: 0;
  font-size: 1rem;
  color: #5e5650;
  line-height: 1.6;
}

.pencil-page .card-grid {
  display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  margin: 24px -8px;
}
.pencil-page .card-grid .link-card {
  width: calc(50% - 16px);
  margin: 8px;
}
@media (max-width: 640px) {
  .pencil-page .card-grid .link-card { width: calc(100% - 16px); }
}

/* ====== SCENARIO CARDS ====== */
.pencil-page .scenario-card {
  display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  background: #fffefb;
  border: 1px solid #dcd4ca;
  border-radius: 6px;
  padding: 18px 22px;
  margin: 14px 0;
}
.pencil-page .scenario-best {
  border-color: #a85e3e;
  background: #fcf6ef;
}
.pencil-page .scenario-label {
  width: 36%;
  font-family: 'Lora', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #5e3a2a;
  padding-right: 16px;
}
.pencil-page .scenario-tag {
  display: block;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 400;
  font-style: italic;
  color: #7a4a36;
  margin-top: 2px;
}
.pencil-page .scenario-body {
  width: 64%;
}
.pencil-page .scenario-desc {
  margin: 0 0 8px;
  font-size: 1rem;
  line-height: 1.6;
}
.pencil-page .scenario-commit {
  margin: 0;
  padding-left: 12px;
  border-left: 3px solid #a85e3e;
  font-size: 0.98rem;
}
@media (max-width: 640px) {
  .pencil-page .scenario-label,
  .pencil-page .scenario-body { width: 100%; }
  .pencil-page .scenario-label { margin-bottom: 8px; }
}

/* ====== MISTAKE CARDS ====== */
.pencil-page .mistake-card {
  background: #fffefb;
  border: 1px solid #dcd4ca;
  border-radius: 6px;
  padding: 18px 22px;
  margin: 14px 0;
}
.pencil-page .mistake-label {
  font-family: 'Lora', serif;
  font-weight: 600;
  color: #8a3a2a;
  margin: 0 0 6px;
}
.pencil-page .mistake-fix {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
}

/* ====== HUB CARD (homepage navigation cards: image + body + CTA) ====== */
.pencil-page .hub-card {
  display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-align-items: center; align-items: center;
  background: #fffefb;
  border: 1px solid #dcd4ca;
  border-radius: 8px;
  padding: 18px;
  margin: 18px 0;
  box-shadow: 0 4px 12px rgba(45,41,38,0.05);
}
.pencil-page .hub-card .hub-thumb {
  width: 220px;
  -webkit-flex-shrink: 0; flex-shrink: 0;
  margin-right: 22px;
  text-decoration: none;
  display: block;
}
.pencil-page .hub-card .hub-thumb img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}
.pencil-page .hub-card .hub-body {
  -webkit-flex: 1; flex: 1;
  min-width: 220px;
}
.pencil-page .hub-card .hub-title {
  font-family: 'Lora', serif;
  font-size: 1.3rem;
  color: #5e3a2a;
  margin: 0 0 8px;
  font-weight: 600;
  border-bottom: none;
}
.pencil-page .hub-card .hub-body p {
  margin: 0 0 12px;
  font-size: 1.05rem;
  line-height: 1.55;
}
.pencil-page .hub-card .hub-body p:last-of-type {
  margin-bottom: 14px;
}
.pencil-page .hub-card .hub-cta {
  display: inline-block;
  padding: 10px 22px;
  background: #a85e3e;
  color: #ffffff;
  text-decoration: none;
  border-radius: 6px;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
}
.pencil-page .hub-card .hub-cta:hover {
  background: #7a4226;
  color: #ffffff;
}
@media (max-width: 640px) {
  .pencil-page .hub-card { display: block; padding: 14px; }
  .pencil-page .hub-card .hub-thumb { width: 100%; margin: 0 0 14px 0; }
}

/* ====== ABOUT FEATURE (homepage teacher intro block) ====== */
.pencil-page .about-feature {
  display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-align-items: center; align-items: center;
  background: #fffefb;
  border: 1px solid #dcd4ca;
  border-radius: 8px;
  padding: 22px 26px;
  margin: 32px 0;
}
.pencil-page .about-feature .about-photo {
  -webkit-flex-shrink: 0; flex-shrink: 0;
  margin-right: 24px;
}
.pencil-page .about-feature .about-photo img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.pencil-page .about-feature .about-body {
  -webkit-flex: 1; flex: 1;
  min-width: 240px;
}
.pencil-page .about-feature .about-title {
  font-family: 'Lora', serif;
  font-size: 1.5rem;
  color: #5e3a2a;
  margin: 0 0 12px;
  font-weight: 600;
  border-bottom: none;
  padding-bottom: 0;
}
.pencil-page .about-feature .about-body p {
  margin: 0 0 10px;
  font-size: 1.05rem;
  line-height: 1.6;
}
.pencil-page .about-feature .about-body p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .pencil-page .about-feature { -webkit-flex-direction: column; flex-direction: column; text-align: center; }
  .pencil-page .about-feature .about-photo { margin: 0 auto 16px; }
}

/* ====== ART CARD (visual link: image + italic caption) ====== */
.pencil-page .art-card {
  display: block;
  background: #fffefb;
  border: 1px solid #dcd4ca;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}
.pencil-page .art-card:hover {
  border-color: #a85e3e;
  box-shadow: 0 8px 20px rgba(45,41,38,0.1);
  transform: translateY(-2px);
}
.pencil-page .art-card img {
  width: 100%;
  height: auto;
  display: block;
}
.pencil-page .art-card .art-caption {
  padding: 14px 16px;
  text-align: center;
  font-family: 'Lora', serif;
  font-size: 1rem;
  font-style: italic;
  color: #5e3a2a;
  background: #fffefb;
  border-top: 1px solid #ede5dc;
  display: block;
  line-height: 1.4;
}
.pencil-page .art-pair {
  display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  margin: 28px -8px;
}
.pencil-page .art-pair .art-card {
  width: calc(50% - 16px);
  margin: 8px;
  box-sizing: border-box;
}
@media (max-width: 640px) {
  .pencil-page .art-pair .art-card { width: calc(100% - 16px); }
}

/* ====== FAQ (h3 question + answer card list) ====== */
.pencil-page .faq {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  margin: 18px 0 24px;
}
.pencil-page .faq-item {
  background: #fffefb;
  border: 1px solid #dcd4ca;
  border-radius: 8px;
  padding: 16px 22px;
  margin-bottom: 12px;
}
.pencil-page .faq-item h3 {
  font-family: 'Lora', serif;
  font-size: 1.15rem;
  color: #5e3a2a;
  margin: 0 0 8px;
  line-height: 1.35;
  font-weight: 600;
  border-bottom: none;
  padding-bottom: 0;
}
.pencil-page .faq-item p { margin: 0; line-height: 1.6; }
.pencil-page .faq-item p:last-child { margin-bottom: 0; }

/* ====== NEWSLETTER SIGN-UP BOX ====== */
.pencil-page .newsletter-box {
  position: relative;
  background: #ede5dc;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.30 0 0 0 0 0.22 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  border: 1px solid #d8c8b0;
  border-radius: 8px;
  padding: 32px 28px 26px;
  margin: 40px auto;
  max-width: 640px;
  text-align: center;
}
.pencil-page .newsletter-eyebrow {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #a85e3e;
  margin: 0 0 8px;
}
.pencil-page .newsletter-title {
  font-family: 'Lora', serif;
  font-size: 1.55rem;
  font-weight: 600;
  color: #5e3a2a;
  margin: 0 0 8px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.pencil-page .newsletter-tagline {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 1rem;
  color: #5e5650;
  margin: 0 0 22px;
  line-height: 1.55;
}

/* SBI Ezine2 form styling — overrides SBI's default blue treatment */
.pencil-page .newsletter-box .Ezine2 {
  background: transparent !important;
  padding: 0;
  margin: 0;
  color: #2d2926;
}
.pencil-page .newsletter-box .Ezine2 form { margin: 0; }
.pencil-page .newsletter-box .EzineRow {
  margin-bottom: 14px;
  text-align: left;
}
.pencil-page .newsletter-box .EzineEmailRow label,
.pencil-page .newsletter-box .EzineNameRow label {
  display: block;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: #5e3a2a;
  margin: 0 0 4px;
}
.pencil-page .newsletter-box .EzineEmailRow input[type="email"],
.pencil-page .newsletter-box .EzineNameRow input[type="text"]:not(.business) {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 1rem;
  padding: 12px 16px;
  border: 1px solid #d8c8b0;
  border-radius: 6px;
  background: #fffefb;
  color: #2d2926;
  width: 100%;
  box-sizing: border-box;
}
.pencil-page .newsletter-box .EzineEmailRow input[type="email"]:focus,
.pencil-page .newsletter-box .EzineNameRow input[type="text"]:not(.business):focus {
  outline: none;
  border-color: #a85e3e;
}
.pencil-page .newsletter-box .EzineGDPRAgeConsentRow label,
.pencil-page .newsletter-box .GDPRPrivacyPolicyConsentRow label,
.pencil-page .newsletter-box .GDPRInformationPurposeRow label {
  display: block;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.88rem;
  color: #5e5650;
  line-height: 1.5;
  cursor: pointer;
}
.pencil-page .newsletter-box .EzineGDPRAgeConsentRow input[type="checkbox"],
.pencil-page .newsletter-box .GDPRPrivacyPolicyConsentRow input[type="checkbox"],
.pencil-page .newsletter-box .GDPRInformationPurposeRow input[type="checkbox"] {
  margin-right: 8px;
  vertical-align: top;
  margin-top: 3px;
  accent-color: #a85e3e;
}
.pencil-page .newsletter-box .EzineReCaptcha {
  margin: 16px 0;
  display: -webkit-flex; display: flex;
  -webkit-justify-content: center; justify-content: center;
}
.pencil-page .newsletter-box .EzineButtonRow {
  margin-top: 18px;
  margin-bottom: 4px;
  text-align: center;
}
.pencil-page .newsletter-box .EzineButton {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  padding: 12px 32px;
  background: #a85e3e;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.pencil-page .newsletter-box .EzineButton:hover { background: #7a4226; }
.pencil-page .newsletter-fineprint {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.82rem;
  color: #7a6f60;
  font-style: italic;
  margin: 14px 0 0;
}
/* Anti-spam honeypot fields stay hidden */
.pencil-page .newsletter-box input.business {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ====== AUTHOR BOX ====== */
.pencil-page .author-box {
  display: -webkit-flex; display: flex;
  -webkit-align-items: flex-start; align-items: flex-start;
  background: #ede5dc;
  border-radius: 8px;
  padding: 22px 26px;
  margin: 48px 0 0;
  gap: 20px;
}
.pencil-page .author-photo img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.pencil-page .author-text p {
  margin: 0 0 8px;
  font-size: 1rem;
  line-height: 1.65;
}
.pencil-page .author-text p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .pencil-page .author-box { -webkit-flex-direction: column; flex-direction: column; }
}

/* ====== SITE HEADER (otter banner + nav) ====== */
.site-header {
  background: #f4f1ee;
}
.site-header-inner {
  max-width: 1600px;
  margin: 0 auto;
}
.site-header .otter-banner {
  width: 100%;
  height: auto;
  display: block;
}
.site-nav {
  background: #3a2e26;
}
.site-nav-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px;
  display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
}
.site-nav a {
  color: #e8ddd0;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  padding: 14px 18px;
  display: block;
}
.site-nav a:hover {
  background: #4a3a30;
  color: #ffffff;
}
@media (max-width: 640px) {
  .site-nav-inner { -webkit-justify-content: center; justify-content: center; }
  .site-nav a { padding: 10px 12px; font-size: 0.88rem; }
}

/* ====== FOOTER DIVIDER (sketched line above footer) ====== */
.footer-divider {
  background: #f4f1ee;
  padding: 20px 0 6px;
}
.footer-divider svg {
  display: block;
  margin: 0 auto;
  max-width: 980px;
  width: 92%;
  height: auto;
  opacity: 0.5;
}

/* ====== SITE FOOTER ====== */
.site-footer {
  background: #3a2e26;
  color: #e8ddd0;
}
.site-footer-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 40px 32px 28px;
  text-align: center;
}
.footer-brand { margin-bottom: 24px; }
.footer-title {
  font-family: 'Lora', serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #f4d4b8;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.footer-tagline {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.95rem;
  color: #c4a890;
  font-style: italic;
  margin: 0;
}
.footer-links {
  display: -webkit-flex; display: flex;
  -webkit-justify-content: center; justify-content: center;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  gap: 8px 28px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid #4a3a30;
}
.footer-links a {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #e8ddd0;
  text-decoration: none;
  padding: 4px 0;
}
.footer-links a:hover { color: #f4d4b8; }
.footer-meta p {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.85rem;
  color: #a89478;
  margin: 4px 0;
}
.footer-meta a {
  color: #d4b896;
  text-decoration: none;
  font-weight: 600;
}
.footer-meta a:hover { color: #f4d4b8; }
@media (max-width: 640px) {
  .footer-links { gap: 6px 18px; }
  .footer-links a { font-size: 0.88rem; }
}

/* =============================================================
   PART 3 — SBI SPECIFICITY OVERRIDES
   SBI's system CSS uses #PageWrapper prefixes for default form
   labels (white-on-blue), submit buttons (blue) and default
   link colours (blue). These overrides win those specificity
   battles so the theme styling holds inside SBI.
   ============================================================= */

/* Body links — terracotta */
#PageWrapper #ContentColumn .pencil-page a {
  color: #a85e3e;
}
#PageWrapper #ContentColumn .pencil-page a:hover {
  color: #7a4226;
}

/* Byline link */
#PageWrapper #ContentColumn .pencil-page .byline a {
  color: #a85e3e;
}

/* Link card titles — deep terracotta, no underline */
#PageWrapper #ContentColumn .pencil-page .link-card .card-title a {
  color: #5e3a2a;
  text-decoration: none;
}
#PageWrapper #ContentColumn .pencil-page .link-card .card-title a:hover {
  color: #a85e3e;
}

/* Newsletter form: Email + First Name labels — dark terracotta */
#PageWrapper #ContentColumn .pencil-page .newsletter-box .EzineEmailRow label,
#PageWrapper #ContentColumn .pencil-page .newsletter-box .EzineNameRow label {
  color: #5e3a2a;
}

/* Newsletter form: GDPR consent checkbox labels — muted stone */
#PageWrapper #ContentColumn .pencil-page .newsletter-box .EzineGDPRAgeConsentRow label,
#PageWrapper #ContentColumn .pencil-page .newsletter-box .GDPRPrivacyPolicyConsentRow label,
#PageWrapper #ContentColumn .pencil-page .newsletter-box .GDPRInformationPurposeRow label {
  color: #5e5650;
}

/* Newsletter form: Subscribe button — terracotta with white text */
#PageWrapper #ContentColumn .pencil-page .newsletter-box .EzineButton {
  background: #a85e3e !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 12px 32px !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
#PageWrapper #ContentColumn .pencil-page .newsletter-box .EzineButton:hover {
  background: #7a4226 !important;
  color: #ffffff !important;
}

/* Author photo — force 80px round (SBI's img defaults distort the size) */
#PageWrapper #ContentColumn .pencil-page .author-box .author-photo img {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  max-width: none;
  margin: 0;
}

/* Card grid — force 2-column flex layout */
#PageWrapper #ContentColumn .pencil-page .card-grid {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
  margin: 24px -8px;
}
#PageWrapper #ContentColumn .pencil-page .card-grid .link-card {
  width: calc(50% - 16px) !important;
  margin: 8px !important;
  box-sizing: border-box;
}
@media (max-width: 640px) {
  #PageWrapper #ContentColumn .pencil-page .card-grid .link-card {
    width: calc(100% - 16px) !important;
  }
}

/* Hub card image — force responsive sizing inside thumb link */
#PageWrapper #ContentColumn .pencil-page .hub-card .hub-thumb img {
  width: 100% !important;
  height: auto !important;
  max-width: none;
  display: block;
}

/* Hub card CTA — terracotta button styling, beats SBI link defaults */
#PageWrapper #ContentColumn .pencil-page .hub-card .hub-cta {
  background: #a85e3e !important;
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 10px 22px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
}
#PageWrapper #ContentColumn .pencil-page .hub-card .hub-cta:hover {
  background: #7a4226 !important;
  color: #ffffff !important;
}

/* About feature photo — force 140px square */
#PageWrapper #ContentColumn .pencil-page .about-feature .about-photo img {
  width: 140px !important;
  height: 140px !important;
  object-fit: cover !important;
  border-radius: 8px;
  max-width: none;
  display: block;
}

/* Art card image — full width inside the card */
#PageWrapper #ContentColumn .pencil-page .art-card img {
  width: 100% !important;
  height: auto !important;
  max-width: none;
  display: block;
}

/* Site-wide background = Soft Stone, ContentWrapper transparent. */
body {
  background: #f4f1ee;
}
#PageWrapper #ContentWrapper {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

/* ====== PHOTO PAIR PORTRAIT (two portrait images, natural aspect ratio) ====== */
.pencil-page .photo-pair-portrait {
  display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-justify-content: center; justify-content: center;
  -webkit-align-items: flex-start; align-items: flex-start;
  margin: 28px -8px;
}
.pencil-page .photo-pair-portrait-item {
  width: calc(50% - 16px);
  margin: 8px;
  text-align: center;
}
.pencil-page .photo-pair-portrait-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}
.pencil-page .photo-pair-portrait-item .photo-caption {
  font-size: 0.88rem;
  margin-top: 8px;
}
@media (max-width: 640px) {
  .pencil-page .photo-pair-portrait-item { width: calc(100% - 16px); }
}

.photo-pair {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 1.5rem 0;
}

.photo-pair .photo-inline,
.photo-pair .photo-portrait {
  width: 48% !important;
  margin: 0 0 1rem 0;
}

.photo-pair .photo-inline,
  .photo-pair .photo-portrait {
    width: 100% !important;
  }

.photo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 1.5rem 0;
}

.photo-grid .photo-inline,
.photo-grid .photo-portrait {
  width: 31% !important;
  margin: 0 0 1rem 0;
}

@media (max-width: 600px) {
  .photo-grid .photo-inline,
  .photo-grid .photo-portrait {
    width: 48% !important;
  }
}

.pencil-page .photo-portrait .photo-caption {
  margin-top: 10px;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}

/* Size modifiers for portrait photos. .feature = large (landscape/square finished pieces);
   .wide = medium (step images, portrait finished pieces). Keeps img + caption widths in step. */
.pencil-page .photo-portrait.feature img,
.pencil-page .photo-portrait.feature .photo-caption { max-width: 880px; }
.pencil-page .photo-portrait.wide img,
.pencil-page .photo-portrait.wide .photo-caption { max-width: 620px; }

.pencil-page .carol-note { position: relative; background: #fbf2e9; border: 1px solid #e4d2bc; border-left: 4px solid #a85e3e; border-radius: 10px; padding: 20px 24px 20px 96px; margin: 30px 0; }
.pencil-page .carol-note::before { content: ""; position: absolute; left: 22px; top: 22px; width: 58px; height: 58px; border-radius: 50%; background-image: url('images/carol-drawing.jpg'); background-size: cover; background-position: center; border: 2px solid #fffefb; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.pencil-page .carol-note .carol-note-label { font-family: 'Lora', serif; font-style: italic; font-weight: 600; color: #a85e3e; margin: 0 0 8px; }
.pencil-page .carol-note p { margin: 0 0 12px; }
.pencil-page .carol-note p:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .pencil-page .carol-note { padding: 20px; } .pencil-page .carol-note::before { position: static; margin: 0 0 12px; } }

/* ===== Comparison / "at a glance" table (Soft Stone + Terracotta) ===== */
.pencil-page .table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.5rem 0 0.5rem;
}
.pencil-page table.compare {
  border-collapse: collapse;
  width: 100%;
  min-width: 700px;
  background-color: #fffefb;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.4;
}
.pencil-page table.compare th,
.pencil-page table.compare td {
  border: 1px solid #dcd4ca;
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.pencil-page table.compare thead th {
  background-color: #5e3a2a;
  color: #fdf7f0;
  font-weight: 700;
  font-size: 0.95rem;
}
.pencil-page table.compare tbody tr:nth-child(even) {
  background-color: #f3ece3;
}
.pencil-page table.compare tbody td:first-child {
  font-weight: 700;
  color: #1f1c1a;
  white-space: nowrap;
}
.pencil-page .table-hint {
  display: none;
  font-style: italic;
  color: #7a6f64;
  font-size: 0.9rem;
  margin: 0 0 0.5rem;
}
@media (max-width: 640px) {
  .pencil-page .table-hint { display: block; }
}

/* ===== "Jump straight to a range" anchor nav (pill links) ===== */
.pencil-page .range-jump {
  background-color: #fcf6ef;
  border: 1px solid #e4d2bc;
  border-radius: 10px;
  padding: 18px 20px 10px;
  margin: 1.5rem 0;
}
.pencil-page .range-jump .rj-title {
  font-family: 'Lora', serif;
  font-weight: 600;
  color: #5e3a2a;
  font-size: 1.15rem;
  margin: 0 0 14px;
}
.pencil-page .range-jump .rj-group {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 0 6px;
}
.pencil-page .range-jump .rj-label {
  width: 100%;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: #7a6f64;
  margin: 0 0 6px;
}
.pencil-page .range-jump a {
  display: inline-block;
  background-color: #fffefb;
  border: 1px solid #dcd4ca;
  border-radius: 999px;
  color: #a85e3e;
  text-decoration: none;
  font-size: 0.98rem;
  padding: 5px 14px;
  margin: 0 8px 8px 0;
  -webkit-transition: all 0.15s ease;
  transition: all 0.15s ease;
}
.pencil-page .range-jump a:hover {
  background-color: #a85e3e;
  border-color: #a85e3e;
  color: #ffffff;
}

.pencil-page .photo-img { position: relative; overflow: hidden; }
#PageWrapper #ContentColumn .pencil-page .photo-img > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

/* ==========================================================================
   13 Oct 2026: TEXT links and small accent labels darkened for WCAG AA.
   #a85e3e fails at small sizes (4.30:1 on #f4f1ee, 3.88:1 on #ede5dc).
   #8f4f33 passes AA normal text on every page background (lowest 5.05:1).
   Buttons, borders, bars and badges stay #a85e3e. Hover stays #7a4226.
   ========================================================================== */
.pencil-page a,
.pencil-page .byline a,
.pencil-page p a[target="_blank"]::after,
.pencil-page li a[target="_blank"]::after,
.pencil-page .answer-capsule .capsule-label,
.pencil-page .qa-question::before,
.pencil-page .qa-answer::before,
.pencil-page .t4-question-hero .t4-eyebrow,
.pencil-page .carol-note .carol-note-label,
.pencil-page .link-card .card-title a:hover,
.pencil-page .newsletter-eyebrow,
.pencil-page .range-jump a { color: #8f4f33; }
#PageWrapper #ContentColumn .pencil-page a,
#PageWrapper #ContentColumn .pencil-page .byline a,
#PageWrapper #ContentColumn .pencil-page .link-card .card-title a:hover { color: #8f4f33; }

/* 17 Oct 2026: the byline rule above out-ranked the existing hover (equal specificity, later wins), so the byline lost its hover darkening. Restore it. */
#PageWrapper #ContentColumn .pencil-page .byline a:hover,
#PageWrapper #ContentColumn .pencil-page .byline a:focus { color: #7a4226; }

/* 17 Oct 2026: header home link. The site name is baked into the header image, so the
   Website Name link was empty: screen readers announced a link with no name (WCAG fail),
   and it had no clickable area. With "Pencil Topics" typed into Site Designer's Website
   Name field, this hides the words visually (they are in the image), keeps them for
   screen readers, and makes the whole header a home link. Search stays on top.
   Tested 17 Oct at 1280 and 390 wide: search reachable, header click goes home.
   body #PageWrapper is needed: a phone-only rule sets .Liner to position:initial. */
body #PageWrapper #Header .Liner { position: relative; z-index: 0; }
body #PageWrapper #Header .WebsiteName a {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;
  font-size: 0; line-height: 0; color: transparent; text-decoration: none; overflow: hidden;
}
body #PageWrapper #Header .WebsiteName a:focus-visible { outline: 3px solid #8f4f33; outline-offset: -3px; }
body #PageWrapper #Header .CustomSearch { position: relative; z-index: 2; }

/* 17 Oct 2026: pencil newsletter box. The footer's own text rule out-ranked the block's styles,
   so the label, intro and small print rendered black, bold, 12px capitals in Verdana, and the
   form labels were in capitals too (and each paragraph was a shrink-wrapped table box, so it sat left). These restore the designed styles, scoped to #pt-newsletter. */
#PageWrapper #Footer #pt-newsletter p.pt-nl-label { font-family: 'Nunito Sans', sans-serif; font-size: .78rem; color: #8f4f33; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600; font-style: normal; line-height: 1.4; margin: 0 0 8px 0; text-align: center; display: block; padding: 0; }
#PageWrapper #Footer #pt-newsletter p.pt-nl-intro { font-family: 'Nunito Sans', sans-serif; font-size: 1.02rem; color: #2d2926; letter-spacing: normal; text-transform: none; font-weight: 400; font-style: normal; line-height: 1.7; max-width: 520px; margin: 0 auto 24px auto; text-align: center; display: block; padding: 0; }
#PageWrapper #Footer #pt-newsletter p.pt-nl-fineprint { font-family: 'Nunito Sans', sans-serif; font-size: .85rem; color: #5e5650; letter-spacing: normal; text-transform: none; font-weight: 400; font-style: italic; line-height: 1.5; margin: 16px 0 0 0; text-align: center; display: block; padding: 0; }
#PageWrapper #Footer #pt-newsletter label { text-transform: none; font-weight: 400; letter-spacing: normal; line-height: 1.5; }

/* 17 Oct 2026: FAQ questions become real H3 headings (screen readers can jump between them).
   Same look as the old <p class="qa-question">: resets the theme's h3 styling for this class only. */
#PageWrapper #ContentColumn .pencil-page h3.qa-question {
  font-family: 'Lora', serif; font-size: 1.2rem; font-weight: 600; color: #5e3a2a;
  margin: 0 0 12px; padding: 0; line-height: 1.4; border: none; background: none;
  text-align: left; letter-spacing: normal; text-transform: none;
}

/* Layout *//* Full size col content */
.variantFullSizeContentColumn #ContentWrapper {
    padding-left:0;
    padding-right:0;
    width: 100%;
}
.variantFullSizeContentColumn #PageWrapper #ContentColumn { 
    width: 100%; 
    float: none; 
}
.variantFullSizeContentColumn #NavWrapper {
    display: none;
}
.variantFullSizeContentColumn #ExtraWrapper {
    display:none;
}

/* hidden header */
.variantNoHeader #HeaderWrapper {
    display: none;
}

/* hidden footer */
.variantNoFooter #FooterWrapper {
    display:none;
}

/* hide extra column */
.variantNoExtraColumn #ExtraWrapper {
    display:none;
}

/* hide navigation column */
.variantNoNavColumn #NavWrapper {
    display: none;
}
/* alice-cyrillic-ext-400-normal*/
@font-face {
  font-family: 'Alice';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/alice/files/alice-cyrillic-ext-400-normal.woff2') format('woff2'), url('fonts/alice/files/alice-all-400-normal.woff') format('woff');
  unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* alice-cyrillic-400-normal*/
@font-face {
  font-family: 'Alice';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/alice/files/alice-cyrillic-400-normal.woff2') format('woff2'), url('fonts/alice/files/alice-all-400-normal.woff') format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
/* alice-latin-ext-400-normal*/
@font-face {
  font-family: 'Alice';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/alice/files/alice-latin-ext-400-normal.woff2') format('woff2'), url('fonts/alice/files/alice-all-400-normal.woff') format('woff');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* alice-latin-400-normal*/
@font-face {
  font-family: 'Alice';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/alice/files/alice-latin-400-normal.woff2') format('woff2'), url('fonts/alice/files/alice-all-400-normal.woff') format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}