/* The bgtscc.net forum look for the shop database: the forum's page background, its header and
   footer (drawn by js/forum-header.js) and a dark content box, with Bootstrap's pieces recoloured. */

html { background-color: transparent; color: #dbdbdb; font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 14px; height: 101%; }
body { margin: 0; padding: 0; color: #dbdbdb; font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 14px;
       background-color: #4d6263; background-image: linear-gradient(180deg, #000 20%, #4d6263); background-repeat: no-repeat; }

.main-container { background: none; border: 1px solid transparent; box-sizing: border-box; margin: 0 auto;
                  max-width: 1300px; min-width: 625px; overflow-x: visible; padding: 5px 15px 15px; }
.forumHeader { display: block; height: 348.8px; overflow: hidden; }
.forumFooter { display: block; }
.plannerBody { background-color: #202020; border: 2px solid #303030; margin: 0 0 4px; overflow-x: auto; padding: 20px; }

@media only screen and (max-width: 1220px) { .main-container { margin: 0 12px; } }
@media (max-width: 656px) { .main-container { min-width: 0 !important; } .plannerBody { padding: 8px !important; } }

/* The header and footer are laid out full size before they're scaled; their floats stay inside. */
#forumHeader, #forumFooter { display: flow-root; }

/* Phones: the page box, header and footer follow the forum's 657px phone page, scaled to the screen
   (forum-header.js works out --forum-scale). */
html.forumScaled .main-container { margin-left: calc(12px * var(--forum-scale)) !important; margin-right: calc(12px * var(--forum-scale)) !important; padding: calc(6px * var(--forum-scale) - 1px) calc(16px * var(--forum-scale) - 1px) !important; }
html.forumScaled #forumHeader { position: relative; z-index: 1; }

/* Tapping twice quickly shouldn't zoom the page in; pinch zoom still works. */
html { touch-action: manipulation; }
@media screen and (max-width: 768px) { .main-container { max-width: 100vw; padding: 0 5px; } .plannerBody { padding: 10px; } }

/* Text and links */
.plannerBody a, .plannerBody a:visited { color: #d3a253; }
.plannerBody a:hover { color: #fff; text-decoration: underline; }
.plannerBody h1, .plannerBody h2, .plannerBody h3, .plannerBody h4, .page-header {
    color: #e6e9e8; font-family: "Trebuchet MS", Arial, sans-serif; font-weight: bold; }
.page-header { font-size: 1.6em; border-bottom: 1px solid #303030; padding-bottom: 8px; margin: 0 0 12px; }
.orange, a.orange, .orange a { color: #d3a253 !important; }
.bold { font-weight: bold; }
.plannerBody .container, .plannerBody .container-fluid { max-width: none; }

/* Tables */
.plannerBody table, .plannerBody .table { color: #dbdbdb; background: transparent; border-collapse: collapse; width: 100%; }
.plannerBody .table th, .plannerBody .table td, .plannerBody th, .plannerBody td { border-color: #303030; vertical-align: top; }
.plannerBody thead th, .plannerBody .table thead th, .plannerBody .thead-dark th {
    background: linear-gradient(180deg, #667976 0, #28312f); color: #e6e9e8; border: 1px solid #000; font-weight: bold; }
.plannerBody .table-striped tbody tr:nth-of-type(odd), .plannerBody tbody tr:nth-of-type(odd) { background-color: #262626; }
.plannerBody tbody tr:nth-of-type(even) { background-color: #1c1c1c; }
.plannerBody .table-hover tbody tr:hover, .plannerBody tbody tr:hover { background-color: #2f3a39; }

/* Forms */
.plannerBody input[type=text], .plannerBody input[type=password], .plannerBody input[type=email], .plannerBody input[type=number],
.plannerBody select, .plannerBody textarea, .plannerBody .form-control {
    background: #1b1b1b; border: 1px solid #3a3a3a; border-radius: 3px; color: #dbdbdb; padding: 4px 8px; }
.plannerBody .form-control:focus, .plannerBody input:focus, .plannerBody select:focus, .plannerBody textarea:focus {
    background: #1b1b1b; color: #fff; border-color: #667976; box-shadow: none; outline: none; }
.plannerBody label { color: #c7cccb; }

/* Buttons, the forum's grey-green */
.plannerBody .btn, .plannerBody button, .plannerBody input[type=submit], .plannerBody input[type=button] {
    background: #667976; background: linear-gradient(180deg, #667976 0, #28312f); border: 1px solid #000; border-radius: 0;
    color: #e6e9e8; cursor: pointer; font: 12px Verdana, Helvetica, Arial, sans-serif; padding: 4px 10px; text-shadow: 0 1px 1px #000; }
.plannerBody .btn:hover, .plannerBody button:hover, .plannerBody input[type=submit]:hover, .plannerBody input[type=button]:hover {
    background: linear-gradient(180deg, #7a8f8b 0, #323d3b); color: #fff; }

/* Dropdowns, alerts, cards */
.dropdown-menu { background: #202020; border: 1px solid #303030; }
.dropdown-item, .dropdown-menu a { color: #dbdbdb !important; }
.dropdown-item:hover, .dropdown-menu a:hover { background: #2f3a39; color: #fff !important; }
.plannerBody .card, .plannerBody .panel, .plannerBody .well { background: #1c1c1c; border: 1px solid #303030; color: #dbdbdb; }
.plannerBody .alert { border-radius: 0; }
.plannerBody hr { border-color: #303030; }

/* No focus outline when something is clicked with the mouse; the keyboard still shows where you are */
a:focus:not(:focus-visible), button:focus:not(:focus-visible), select:focus:not(:focus-visible),
input:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* Back to top, at the bottom of the content box */
.storeBackTop { text-align: center; font-size: 12px; margin: 18px 0 0; }
.storeBackTop a, .storeBackTop a:visited { color: #d3a253; }

/* The editor: a disabled shop's row is dimmed */
.shopOff { opacity: .45; }