/*requires skin.css, requires google fonts with Tomorrow,Roboto*/
/* generic button styles */

button.btn {/*borderless, default button font*/
    border: none;
    padding: 0 1.5em 0 1.5em;
    cursor: pointer;
    text-align: center;
    outline: none;
    font-family: 'Tomorrow', sans-serif;
    font-weight: 500;
}
button.btn-content {/*default for anywhere on the page, centered, sized*/
    border-radius: 17px;
    height: 34px;
    line-height: 34px;
    font-size: .9em;
}

/*top page, stick to right/top of page on header, desktop and mobile versions*/
button.top-contact, button.top-contact-mobile {
    padding: 0 .5em 0 .5em;/*override to conserve space*/
}
button.top-contact {/*desktop*/
    display: none;
    height: 24px;
    border-radius: 12px;
    line-height: 24px;
}
button.top-contact-mobile {/*as narrow as iphone13*/
    display: inline-block;
    height: 20px;
    border-radius: 10px;
    line-height: 20px;
}
button.top-contact, button.top-contact-mobile {
    position: fixed;
    top: 7px;
    right: 3px;
    z-index:1100;
    font-size: .7em;
}
@media (min-width: 22rem) {/*wider than iphone13*/
    button.top-contact-mobile {
        height: 24px;
        border-radius: 12px;
        line-height: 24px;
    }
}
@media (min-width: 45rem) {/*tablet,desktop and wider*/
    button.top-contact-mobile {
        display: none;
    }
    button.top-contact {
        display: inline-block;
    }
}
/*defines color skin as some sort of orange-pink*/
button.btn-orange {
    background-color: var(--bg-btn-orange-color);
    color: var(--tx-btn-orange-color);
}
button.btn-orange:focus {
    background-color: var(--bg-btn-orange-focus-color);
}
button.btn-orange:hover {
    background-color: var(--bg-btn-orange-hover-color);
    color: var(--tx-btn-orange-hover-color);
}
button.btn-orange:active {
    background-color: var(--bg-btn-orange-active-color);
    color: var(--tx-btn-orange-active-color);
}
/*generic page button container, centered button*/
.button-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

/*links, a-ka skinless button, static menu, not popup menu: link defines only text decor, outline*/
a.link {
    text-decoration: none;
    outline: none;
}
a.light, a.light:link, a.light:visited {/*light color on dark bg*/
    color: var(--tx-link-light-color);
}
a.light:focus {
    color: var(--tx-link-light-focus-color);
}
a.light:hover {
    color: var(--tx-link-light-hover-color);
}
a.light:active {
    color: var(--tx-link-light-active-color);
}
a.dark, a.dark:link, a.dark:visited {/*dark color on light bg*/
    color: var(--tx-link-dark-color);
}
a.dark:focus {
    color: var(--tx-link-dark-focus-color);
}
a.dark:hover {
    color: var(--tx-link-dark-hover-color);
}
a.dark:active {
    color: var(--tx-link-dark-active-color);
}
/*footer links, do not define color or text decoration here, only font, size*/
.footer a.footer-links .link {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: .9em;
}