/* @@@ Page Layout (start) @@@ */

/* kevin powell "stop over-engineering your css" - wrapper {width: min(70ch, 100% - 4rem); margin-inline: auto;} */

/* St. Patrick's Blue (#252580), Munsell Red (#f2003c). */

/*
Wrapper div
    Content div
        skip links
        breadcrums
        header
        nav (hamburger menu)
        main div
            innermost (i.e., "article")
            various asides (further reading)
        footer (will become footer landmark)
    Content div (END)
Wrapper div (END)

keep the scan length between 7 and 14 words.  How many REMs does that make?  70rems
elastic layouts: measured in ems
links for touch screen readers
*/

#wrapper {
    /* The WIDTH and MARGINS are set in responsive.css */
    background-color: #FFFFFF;
    background-image: url(../images_bg/bg_wrapper_borders_lf_&_rt.gif);
    background-repeat: repeat;
    background-size: contain;
    box-sizing: border-box;
    display: block;
    margin-top: 0;
    margin-bottom: 0;
    /* margin: 0px auto;   1st value: top & bottom. 2nd value: right & left */
    /* margin-inline: auto; */
    padding: 0 6px;  /* 1st value: top & bottom. 2nd value: right & left */
    position: relative;
    text-align: left;
}

.content {
    box-sizing: border-box;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    /* margin-left: 0px; */
    /* margin-left: 40px */
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 0;
    padding-bottom: 0;
    width: 100%;
}

/*  Bypass Block or "skip links" */

/* @@@ SKIP LINKS - BYPASS BLOCKS -BEGIN- @@@ */

.tab-only {
     background-color: transparent;
     position: absolute;
     text-align: center;
}

a.bypass-block {
     background-color: transparent;
     font-weight: bold;
     left: -10000px;
     overflow: hidden;
     position: absolute;
     top: -10000px;
}

a.bypass-block:focus,
a.bypass-block:active {
    /* background-color: #00FF00; */
    background-image: url(../images_bg/bg26.gif) #f2003c;
    border: 1px solid #f2003c;
    color: #f2003c;
    /* color: #000000; */
    display: block;
    font-family: Calibri, "Trebuchet MS", Arial, Georgia, "Times New Roman", Helvetica, Serif;
    font-size: 1.2rem; /* 14px */
    font-weight: bold;
    left: 1rem;
    margin: -.5rem -.5rem -.5rem 1.25REM; /* was -8px -8px -8px 20px; */
    outline: 1px solid #EE0000;
    overflow: visible;
    padding-bottom: .125rem; /* was 2px; padding-bottom -2px negative values are not allowed :  -2px */
    padding-left: .186rem; /* .372em = 6px ? */
    padding-right: .186rem; /* 0px; */
    padding-top: .125rem; /* padding-top -2px negative values are not allowed :  -2px */
    position: absolute;
    text-decoration: none;
    top: 1rem;
    max-width: 26px; /* was 7.5rem 120px; */
}

/*

SYNTAX

<div id="tab-only">
    <a href="#uniquecontent" class="bypass-block" title="Skip the Site Navigation" id="Skip the Site Navigation">Skip the Site Navigation</a>
</div>

<span aria-hidden="true" id="uniquecontent" tabindex="-1">&nbsp;<span>

*/

/* @@@ SKIP LINKS - BYPASS BLOCKS -END- @@@ */

/* @@@ BREAD CRUMS (start) @@@ */

.breadcrumz {
    box-sizing: border-box;
    display: block;
    font-size: 1rem;
    margin-left: 2rem;
    margin-right: 4rem;
    padding-right: 4rem;
    text-align: right;
    width: 100%;
}

/* Style the breadcrums list */
ul.crumz {
    color: #01447e;
    font-size: 1rem;
    list-style: none;
    /* padding: 0 0 0 20%; */
    text-align: right;
}

/* Display list items side by side */
ul.crumz li {
    display: inline;
}

/* Add a symbol before each list item except for the first one */
ul.crumz li:not(:first-child)::before {
    color: #252580;
    /* content: "\2B8A"; */
    content: "/";
    padding: .5rem;
}
/* double slash: 20EB arrow: 21E8 double triangles: 23E9  arrow in a circle: 2B8A */
/* https://symbl.cc/en/unicode/table/#supplemental-punctuation */

/* Unknown Parse Error
ul.crumz li(:first-child)::before {
    content: "\2302";
    color: #252580;
    padding: .5rem;
}
*/

/* Add a color to all links inside the list */
ul.crumz li a {
  color: #0275d8;
  text-decoration: none;
}

/* Add a color on mouse-over */
ul.crumz li a:hover {
  color: #01447e;
  text-decoration: underline;
}

/*
icon_house_in_square_round_corners_20px.gif

ul.crumz  li:(:first-child)::before {
  content: "/\00a0";
  padding: 8px;
#crumz ul {
    display: inline;
    padding-left: 0;
    margin-left: 0;
}
#crumz ul li {
    display: inline;
}
#crumz ul li a:link {
    padding: 2rem;
}
#crumz ul ul {
    list-style-image: url(images_arch/bullet_white_arrow_in_blue_rounded_square_20px.png);
    text-align: right;
*/

/* @@@ BREAD CRUMS (end) @@@ */

/* @@@ HEADER including NAV / HAMBURGER MENU (end) @@@ */

HEADER,
NAV,
.nav {
    display: block;
    margin: 0 auto;
    padding: 0 1px;
    text-align: center;
    width: 100%;
}

/*
WCAG 2.1 recommends a target size of at least 44 x 44 pixels. However, the button can be smaller in the following scenarios:
    * Equivalent - there is another button that serves the same purpose and is at least 44 x 44 pixels
    * Inline - it's a link in a block of text
    * User agent control - the size of the button is set by the user
    * Essential - a certain presentation is essential

So "min-width: 44px;" ?
*/

DETAILS.hamburger-bun {
    font-weight: bold;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
	width: min(20rem, 80%);
}

SUMMARY.hamburger-patty {
    background-color: #ddd;
    border: 3px ridge blue;
    background: #edf2ff;
    box-shadow: .188rem .188rem 4px black;
    cursor: pointer;
    font-size: 1.5rem;
    list-style: none;
    margin: .25rem auto; /* 1st value: top & bottom. 2nd value: right & left */
    min-width: 44px; /* WCAG compliant */
    padding: 1rem 0 1rem 0;
    text-align: center;
}

.banner {
    background-color: #FFFFFF;
    background-image: url(../images_bg/bg06.gif);
    border: .188rem inset #E80035;
    margin: .125rem auto 4rem auto;
    padding: 1rem;
    text-align: center;
}

UL.sitenavlist {
    list-style-image: none;
    list-style-type: none;
}

.centerbuttons {
    border: 0px;
    margin: 1rem auto 1rem auto;
    padding: 1rem;
    text-align: center;
    margin: .125rem auto .125rem auto;
}

.logo {
    /* background-image: url(../images_bg/bg20.gif) #FFFFFF; */
    border: 0px #000000 solid;
    margin-bottom: .188rem;
    margin-left: 36px;
    margin-right: 37px;
    margin-top: .188rem;
    padding: .125rem;
    text-align: center;
    width: auto;
}

A.pushbttn {
    background-color: #FFFFFF;
    background-image: url(../images_bg/bg20.gif);
    border-color: #000000 #CC0000 #CC0000 #000000;
    border: .188rem inset;
    color: #E80035;
    display: block;
    font-family: Calibri, "Trebuchet MS", Arial, Georgia, "Times New Roman", Helvetica, sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
    margin: .25rem auto .25rem auto;
    min-width: 44px;
    padding: 1rem 0 1rem 0;
    text-align: center;
    text-decoration: none;
}

A.pushbttn:hover {
    background-color: #E80035;
    background-image: url(../images_bg/bg26.gif);
    border-color: #E80035;
    color: #252580;
    display: block;
}

/* @@@ HEADER including NAV / HAMBURGER MENU (end) @@@ */

.innermost  {
    margin: 0 auto;
    padding: 0;
    width: 100%;
}

MAIN,
.main {
    margin: 0 auto;
    padding: 0;
    width: 100%;
}

/* width: min(70ch, 100% - 4rem);
max(100% - 6rem);*/


/* HTML5 Landmarks (begin) */

/* article,
aside
 {
    display: block;
} */

/* The "Year" links in the LHT navigation menu.
https://readlearncode.com/code-and-stuff/creating-buttons-from-ul-element/ */

ul.headerbuttons {
    list-style-type: none;
    /* margin-left: 40px; */
}

ul.headerbuttons li {
    background-color: white;
    border-radius: 10px;
    border: 3px solid #252580;
    color: #000000;
    float: left;
    font-size: 1.5rem;
    list-style: none;
    margin-bottom: .5rem;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-top: .5rem;
    width: 20rem;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
}

ul.headerbuttons li a {
    display: block;
    text-decoration: none;
}

ul.headerbuttons li a:hover {
    background-color: #FFFFFF;
    color: #252580;
}

ul.headerbuttons li a:focus {
    background-color: #000000;
    color: #FFFFFF;
    border: 5px solid #E80035;
}

/*
.footer-wrapper {
    display: block;
    margin: 0 auto;
    padding: 0 1px;
    text-align: center;
    width: 100%;
}
*/

FOOTER,
.footer {
    background-image: url(../images_bg/bg81.gif);
    border: 2px solid blue;
    box-sizing: border-box; /* include border and padding in the overall height and width of the element. */
    /* display: block; */
    height: auto;
    margin: 0 auto;
    /* margin: 1.125rem 4px; */
    /* min-height: 7rem; */
    overflow: auto;
    padding: 0 1rem;
    width: 100%;
    /* margin-left: auto;
    Margin-right: auto; */
}

ul.footbuttons {
    list-style-type: none;
    /* margin-left: 40px; */
}

ul.footbuttons li {
    background-color: #ffffff;
    border-radius: 10px;
    border: 3px solid #252580;
    color: #000000;
    float: left;
    font-size: 1.5rem;
    list-style: none;
    margin-bottom: .5rem;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-top: .5rem;
    min-width: 44px;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
}

ul.footbuttons li a {
    display: block;
    text-decoration: none;
}

ul.footbuttons li a:hover {
    background-color: #FFFFFF;
    color: #252580;
    outline: none;
}

ul.footbuttons li a:focus {
    /* negative color scheme, border turns from blue to red */
    background-color: #000000;
    /* border: 3px solid #E80035; */
    color: #FFFFFF;
    outline: none;
}

/*
.footerlinks {
    background-color: white;
    border-radius: 10px;
    border: 2px solid #E80035;
    color: #E80035;
    display: block;
    font-weight: bold;
    margin-botton: .5rem;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-top: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
}
*/

.section,
SECTION {
    padding: 4rem 0;
}

/* HTML5 Landmarks (End) */

.fakelink {
    color: hotpink;
    text-decoration: underline;
    cursor: pointer;
}

CENTER {
    text-align: center;
}

SPAN.centext {
    display: inline-block;
    text-align: center;
    width: 100%;
}

.icon-elements {
    color: #E80035;
    font-weight: bold;
    text-decoration: none;
    /* black dropshadow? */
}

/* hide a link.  Might adversely affect the Google page rank */
.hiddenlink {
    color: #000; /* same color as the surrounding text */
    text-decoration: none; /* to remove the underline */
    cursor: text;
}
/* to make the cursor stay as a text cursor, not the hand */

/* Gray out the nav bar link for the current page. */
#menu .menu,
#gen00 .gen00,
#locales .locales,
#health00 .health00,
#abuse00 .abuse00,
#date00 .date00,
#manners .manners,
#history .history,
#law00 .law00,
#net00 .net00,
#scene00 .scene00,
#misc .misc,
#vanity .vanity,
#email .email {
    background-color: #FFFFFF;
    background-image: url(../images_bg/bg48.gif);
    border-color: #666666;
    color: #666666;
    font: bold 2rem 'NEW YORK','MS SERIF',HELVETICA,'ARIAL NARROW',ARIAL;
    margin: .25rem auto .25rem auto;
    padding: 1rem 0 1rem 0;
    text-align: center;
    text-decoration: none;
}

/* Make the  bottom topical navigation menu link for the current page appear "grayed out" (ie. appear "not availalble.") */

#tx00 .tx00_b,
#tx_aus .tx_aus_b,
#tx_dfw .tx_dfw_b,
#tx_hou .tx_hou_b,
#tx_sa .tx_sa_b,
#tx_misc .tx_misc_b,
#shop .shop_b,
#store .store_b,
#c_toy_s .c_toy_s_b,
#clothpin .clothpin_b,
#makecane .makecane_b,
#book .book_b,
#feargift .feargift_b,
#music .music_b,
#dvds .dvds_b,
#originalgansta .originalgansta_b,
#notetrad .notetrad_b,
#rover .rover_b,
#jwbean .jwbean_b,
#rinella .rinella_b,
#grubin .grubin_b,
#oldlethr .oldlethr_b,
#bamm01 .bamm01_b,
#bamm02 .bamm02_b,
#bamm03 .bamm03_b,
#bamm04 .bamm04_b,
#bamm05 .bamm05_b,
#bamm06 .bamm06_b,
#constance01 .constance01_b,
#constance02 .constance02_b,
#constance03 .constance03_b,
#constance04 .constance04_b,
#constance05 .constance05_b,
#constance06 .constance06_b,
#what_now .what_now,
#share .share,
#irc_idiot .irc_idiot,
#wicca .wicca,
#illusoria .illusoria {
    color: #666666;
    text-decoration: none;
    cursor: default;
}

/* @@@ Page Layouut (end) @@@ */

/* DIVS for centering */

DIV.centering_outside {
    width: 100%
}

DIV.centering_inside {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center
}

/*
SYNTAX
<div class="centering_outside">
    <div class="centering_inside" style="max-width: 393px">
        <a href="menu.cfm"><IMG SRC="../images_bg/am_logo.gif" style="max-width: 100%; height: auto; style="border: 0;" alt="Homepage for Ambrosio's BDSM Site"></a>
    </div>
</div>
*/

/* This class is to center the following decorative boxes while */
/* leaving the text within the said boxes left aligned.         */

DIV.centerbox {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    width: 100%;
}
/* 400px; */