:root {
    /* For the time being, the main section takes 100% of the container */
    /* For future use, resize the widths for the main section (70%) and sidebar (30%) */
    --layout-total-width: 60%; /* show 60% of the browser width*/
    --layout-main-section-width: 100%; /* take 70% the container if sidebar is used; otherwise, 100% */
    --layout-sidebar-section-width: 0%; /* if sidebar is used, it should be 30% */

    --body-bg-color: #f4fde4; /* main body */

    --link-color: #000000; /* <a> text color link/focus/active/visited */
    --link-color-hover: #215c0a; /* <a> hover text color */
    --link-bg-hover: #fdf8cc; /* <a> hover bg color */

    --banner-bg-color: #fdf8cc; /* page banner */

    --vote-sidebar-bg-color: #eeeaba; /* vertical vote */

    --action-ribbon-bg-color: #f7dc84; /* action ribbon */

    --scroll-width: 600px; /* category scroll desktop width */
    --scroll-mobile-width: 240px; /* category scroll mobile width */
    --scroll-button-link-bg-color: #f8c058; /* scroll button */
    --scroll-button-link-bg-color-hover: #fdf8cc; /* scroll button hover/focus/active/visited */
    --scroll-button-link-text-color-hover: #522510; /* scroll button hover/focus/active/visited */
    --scroll-button-link-border-color: #f8c058; /* scroll button border hover/focus/active/visited */

    --card-bg-color: #e9fcbf; /* ID card */

    --border-color: #f8c058; /* general border color */
    --button-text-color: #522510; /* general button text color */
    --button-bg-color: #f8c058; /* general button background color */
    --button-bg-color-hover: #fdf8cc; /* general button background color hover/focus/active/visited */
    --button-bg-color-disabled: #e4ee89; /* general button background color disabled */
}


body {
    background-color: var(--body-bg-color);
}


a:link, a:focus, a:active, a:visited {
    color: var(--link-color);
    text-decoration: none;
}
a:hover {
    color: var(--link-color-hover);
    background-color: var(--link-bg-hover);
}


/* Layout - BEGIN */
.id-container { 
    display: flex;
    width: var(--layout-total-width); 
}
.id-main-section {
    width: var(--layout-main-section-width); 
}
.id-sidebar-section {
    display: none !important;
    width: var(--layout-sidebar-section-width);
}
/* Layout - END */


.id-bg-banner {
    background-color: var(--banner-bg-color);
}


.id-button-border {
    color: var(--button-text-color);
    border-color: var(--border-color);
}
.id-button-border:hover, 
.id-button-border:focus,
.id-button-border:active,
.id-button-border.active {
    color: var(--button-text-color);
    background-color: var(--button-bg-color-hover);
    border-color: var(--border-color);
}
.id-button-border:disabled {
    color: var(--button-text-color);
    background-color: var(--button-bg-color-disabled);
    border-color: var(--border-color);
}
.id-button {
    background-color: var(--button-bg-color);
}

.id-border {
    border-color: var(--border-color) !important;
    box-shadow: none !important; /* Eliminate the blue outline */
}

.id-card-bg-color {
    background-color: var(--card-bg-color);
}

.id-center {
    margin:auto !important;
}

.id-float-right{
    float: right;
    margin: 1px 1px 1px 1px;
}
.id-headline-header {
    font-size: .75em;
}
.id-misc-font-small {
    font-size: .3em;
}
.id-misc-font-large {
    font-size: 2em;
}
.id-coffee {
    width: 130px;
}
.id-align-middle {
    margin: auto;
}
.id-comment-header {
    font-size: .90em;
}
.id-comment-content {
    font-size: 1em;
}


/* Vote sidebar - BEGIN */
.id-vote-bar {
    width: 10% !important;
    font-size: 1em;
    background-color: var(--vote-sidebar-bg-color);
}
.id-show-vertical-vote-bar {
    display:block;
}
.id-show-horizontal-vote-bar {
    display:none;
}
/* Vote sidebar - END */


/* Action Ribbon (bottom of post) - BEGIN */
.id-ribbon {
    margin: 0 !important;
    padding: 0 !important;
}
.id-ribbon ul {
    list-style-type: none;
    display: inline;
    padding-left: 0;
}
.id-ribbon ul li {
    display: inline-block;
}
.id-ribbon-show-text {
    display: inline-block;
}
.id-ribbon-item {
    background-color: var(--action-ribbon-bg-color);
    padding: 0px 5px 5px 0px;
    margin: 0px 20px 0px 0px;
    border-radius: 10px;
    font-size: .90em;
}
/* Ribbon (bottom of post) - END */


/* Category scroll - BEGIN */
.id-horizontal-scroll-label-text {
    font-size: 1em;
}
.id-horizontal-scroll-wrapper {
    width: var(--scroll-width);
    overflow-y: auto;
    overflow-x: hidden;
    white-space: nowrap;
}
.id-horizontal-scroll-button {
    background-color: var(--scroll-button-link-bg-color);
}
.id-horizontal-scroll-button:hover {
    background-color: var(--scroll-button-link-bg-color-hover);
}
.id-horizontal-scroll-button:focus,
.id-horizontal-scroll-button:active,
.id-horizontal-scroll-button:visited,
.id-horizontal-scroll-button.active {
    color: var(--scroll-button-link-text-color-hover);
    background-color: var(--scroll-button-link-bg-color-hover);
    border-color: var(--scroll-button-link-border-color);
}
/* Category scroll - END */


/* Mobile settings - BEGIN */
@media (max-width: 768px) {
    body {
        font-family: Arial, Helvetica, sans-serif;
        /*letter-spacing: -.25px;*/ /* make letters closer */
        line-height: 98%; /* make letter vertical gap smaller */
    }
    body strong {
        font-weight: 500 !important;
    }
    .id-container { 
        display: flex;
        width: 100%; /* show 100% of the browser width*/
    }
    .id-horizontal-scroll-label-text {
        font-size: .7em;
    }
    .id-horizontal-scroll-wrapper {
        width: var(--scroll-mobile-width);
        overflow-y: auto;
        overflow-x: hidden;
        white-space: nowrap;
    }    
   .id-show-vertical-vote-bar {
        display:none;
    }
    .id-show-horizontal-vote-bar {
        display:block;
    }
    .id-comment-header {
        font-size: .80em;
    }
    .id-comment-content {
        font-size: .9em;
        line-height: 130%;
        /*letter-spacing: 1.1px;*/
    }
    .id-ribbon-item {
        background-color:var(--action-ribbon-bg-color);
        padding: 2px 2px 4px 2px;
        margin: 0px 15px 0px 0px;
        border-radius: 10px;
        font-size: .70em;
    }
    .id-ribbon-show-text {
        display: none;
    }
    .id-misc-font-small {
        font-size: .1em;
    }
    .id-coffee {
        width: 100px;
    }
}

@media (max-width: 768px) {
    #sidenav {
        display: none;
    }
}
/* Mobile settings - END */

/*
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {   
  border-color: #f8c058  !important;
  outline: 0  !important;
}
.form-control:focus {
    border-color: #f8c058 !important;
    outline: 0  !important;
}
.id-border:hover, 
.id-border:focus,
.id-border:active,
.id-border.active {
    outline: none !important;
}

input:focus, textarea:focus, select:focus, 
input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: none !important;
}
*/