/* 
  Site CSS for Talking Coyotes ... 
    https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
*/

/* Global document and element definitions... */

/* root declarations and Talking Coyotes theme colors used thoughout style sheet... */
/* for light theme: main-color is dark; accent is light */
:root {

    --body-font: 'Open Sans', sans-serif;     /* all body text */
    --body-font-size: 16px;
    --heading-font: 'Open Sans', sans-serif;  /* all headings and titles */
    --heading-weight: 300;                    /* 300,300i,400,400i,700 */
    --heading-style: italic;
    --mono_font: 'Andale Mono', monospace;

    --default: black!important;
    --shade: lightgray!important;

    --light-bg-less:#FFD149!important;
    --light-bg:#FFA000!important;
    --light-bg-more: #C67100!important;
    --light-text: white!important;

    --dark-bg-less: #4C8C4A!important;
    --dark-bg: #165E20!important;
    --dark-bg-more: #003300!important;
    --dark-text: black!important;

    --accent: #ff5e00!important;

    --link-color: var(--light-text);
    --link-visited: var(--light-bg-more);
    --link-hover: var(--accent);
    --heading-color: var(--light-text);
    --heading-bkgd: var(--dark-bg);

}

/* global/base definitions */
body {
    height: 100vh;
    background-color: var(--default);
    color: var(--shade);
    font-family: var(--body-font);
    font-size: var(--body-font-size);
    word-wrap: break-word;
    margin: auto;
    padding: 8px;
}
h1, h2, h3, h4, h5, h6 {
    color: var(--heading-color);
    font-family: var(--heading-font);
    font-weight: var(--heading-weight);
    font-style: var(--heading-style);
    line-height: 1.25;
    clear: both;
    margin: 0;
}
h1 {font-size:2.25rem; } 
h2 {font-size:2rem; } 
h3 {font-size:1.5rem; } 
h4 {font-size:1.25rem; } 
h5 {font-size:1.125rem; }
h6 {font-size:1rem; }

/* definitions to get uniform behavoir across browsers */
a { color: var(--link-color); text-decoration: none; } 
a:visited { color: var(--link-visited); }
a:hover { cursor: pointer; color: var(--link-hover); }

.icon { width: 32px; height: 32px; padding: 4px; cursor: pointer; filter:invert(1); }
.icon.nav { float: right; }
.icon-small { width: 16px; height: 16px; cursor: pointer; filter:invert(1); }
.icon-small.id { padding: 0 0 0 4px }
.invert { filter: invert(1); }

.none { display: none!important; }
.right { float: right; }
.italic { font-style: italic; }
.text-small { font-size: 0.8rem; }

/* header items */
.header { position: relative; margin: 0; background-color: var(--dark-bg); color: var(--light-text); height: 40px; }
.title { font-family: var(--heading-font); font-size: 2rem; position: relative; top: -0.66rem; }
.menu-content { position: absolute; display: inline-block; top: 100%; left: 0; 
    background-color: var(--light-bg-less); z-index: 20; }
.menu-content a { color: var(--dark-text); display: block; padding: 0.5em 2rem; text-decoration: none; }
.identity { float: right; padding-top: 4px; padding-right: 8px; text-align: left; cursor: pointer; line-height: 0.9; }

/*
.nav-icon, .nav-icon-overlay { padding: 0.5em 0.25rem; font-size: 2rem; cursor: pointer; float: right; }
.nav-icon-overlay { font-size: 1rem; position: relative; top: 0.5rem; left:1.5rem; }
.wndw-icon { padding: 0.25rem; font-size: 1rem; cursor: pointer; float: right; }
.dialog-icon { padding: 0.5rem; font-size: 1rem; cursor: pointer; float: right; }
*/

/* blk-x */
.blk-x { display: block; border: 2px solid var(--dark-bg);  margin: 0.25em 0; }
.blk-x-hdr { background-color: var(--light-bg-less); color: var(--dark-text); }
.blk-x-hdr img { vertical-align: middle; }
.blk-x-icon { width: 32px; height: 32px; padding: 4px; cursor: pointer; filter:invert(0); }
.blk-x-slot { color: var(--dark-text); background-color: var(--light-bg-more); margin: 0.25rem; }

/* Login dialog styling */
.login-dialog { position: absolute; top: 100%; right: 0; margin: 0; padding: 4px; max-width: 18rem; z-index: 2;
    color: var(--dark-text); background-color: var(--light-bg-more); border: 2px solid black;  }
.login-text, .login-msg, .login-input, .login-desc { display: block; text-align: left; padding: 4px 8px; }
.login-input, .login-pw { display: inline-block; margin-left: 0 0.5rem; width: -webkit-fill-available }
.login-desc { font-size: 0.75rem; }
.login-close { width: 16px; height: 16px; cursor: pointer; content:url('/cdn/icons/close.png'); border: 1px solid var(--light-text); float: right; }

/* Account dialog styling */
.account-dialog { position: absolute; top: 100%; left: 0; padding: 4px; max-width: 400px; z-index: 2;
    color: var(--dark-text); background-color: var(--light-bg-more); border: 2px solid black; }
.account-grid, .account-form .blk-x .blk-x-slot { display: grid; padding: 0.25rem; grid-template-columns: auto auto; }
.account-text { display: block; text-align: left; padding: 4px 8px; }
.account-msg, .account-grid .blk-x .blk-x-hdr { grid-column: 1 / span 2; justify-self: start; padding: 0.1em 0.25rem; }
.account-label, .blk-x-slot .account-label { grid-column: 1 / span 1; justify-self: end; padding: 0em 0.25rem; }
.account-input, .blk-x-slot .account-input { grid-column: 2 / span 1; justify-self: start; padding: 0.1em 0.25rem; }
.account-desc, .blk-x-slot .account-desc { grid-column: 2 / span 1; align-self: center; justify-self: start; padding: 0em 0.25rem; font-size: 0.8rem; }
.account-button { grid-column: 2 / span 1; }
.account-icon { width: 32px; height: 32px; vertical-align: middle; cursor: pointer; }
.account-group { display: inline-block; color: var(--dark-text); background-color: var(--light-bg-more); cursor: pointer; width: 60px; text-align: center; border-radius: 0.25rem; }

.logo { width: 100%; }

.link-overlay {
    position: fixed;
    top: 80px;
    left: 40px;
    font-size: 2rem;
    text-decoration: underline;
    color: white;
    background-color: black;
    padding: 0 0.5rem 0.25rem 0.5rem;
  }

.gh { position: relative; margin: auto; width: 1024px; }