/* default css and general definitions that are somewhat universal */

:root
{
    --white: #ffffff;
    --black: #000000;
    --grey: #a0a0a0;
    --ltgrey: #e0e0e0;
    --dkgrey: #606060;
    
    --alert-red: #ee0000;
    
    --def_align: center;
}

body
{
    font-size: 1.0vw;
    background-color: var(--white);
    color: var(--black);
    text-align: var(--def_align);
}


/* class triggers for commonly used displays and positions */
.g-container
{
    display: grid;
}
.f-container
{
    display: flex;
}
.b-container
{
    display: block;
}
.ib-container
{
    display: inline-block;
}

.abs
{
    position: absolute;
}

.rel
{
    position: relative;
}

/* fall-back button definitions */
button
{
    background-color: var(--black);
    color: var(--white);
    min-width: 0.5vw;
    max-width: 4.0vw;
    min-height: 0.5vh;
    max-height: 3.5vh;
    font-size: 1.0vw;
    border: none;
    outline: none;
    padding: 0;
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
    border-radius: 0.05vw;
    line-height: 1.2;
}

button > span
{
    display: inline;
    margin: 0.25vw;
}

/* buttons of various sizes */
button.siz-xsm
{
    min-width: 0.5vw;
    max-width: 2.8vw;
    min-height: 0.5vh;
    max-height: 1.5vh;
    font-size: 0.5vw;
    border-radius: 0.3vw;
}

button.siz-sm
{
    min-width: 0.8vw;
    max-width: 3.5vw;
    min-height: 0.6vh;
    max-height: 2.5vh;
    font-size: 0.6vw;
    border-radius: 0.5vw;
}

button.siz-med
{
    min-width: 1.0vw;
    max-width: 4.0vw;
    min-height: 0.8vh;
    max-height: 3.0vh;
    font-size: 0.8vw;
    border-radius: 0.7vw;
}

button.siz-lg
{
    min-width: 1.2vw;
    max-width: 4.5vw;
    min-height: 1.0vh;
    max-height: 3.5vh;
    font-size: 1.0vw;
    border-radius: 0.8vw;
}

button.siz-xlg
{
    min-width: 1.5vw;
    max-width: 5.5vw;
    min-height: 1.5vh;
    max-height: 4.0vh;
    font-size: 1.1vw;
    border-radius: 0.9vw;
}

button.siz-xlong
{
    min-width: 1.5vw;
    max-width: 10.0vw;
    min-height: 1.5vh;
    max-height: 4.0vh;
    font-size: 1.1vw;
    border-radius: 0.9vw;
}

button[disabled]
{
    background-color: var(--grey);
    color: var(--white);
}

/* generic class trigers */
.f-left {float: left;}
.f-right {float: right;}

.t-left {text-align: left;}
.t-right {text-align: right;}
.t-center {text-align: center;}

/* grid self justifies */
.gj-strt {justify-self: start;}
.gj-ctr {justify-self: center;}
.gj-end {justify-self: end;}

/* grid self aligns */
.ga-strt {align-self: start;}
.ga-ctr {align-self: center;}
.ga-end {align-self: end;}

.block {display: block;}
.inblock {display: inline-block}

.round-corners
{
	border-radius: 0.7em;
}

.font-curs
{
    font-family: "Brush Script MT", "Brush Script Std", "Bradley Hand", "Comic Sans MS", "Lucida Handwriting", "Lucida Calligraphy", "Apple Chancery", cursive;
}
.font-serif
{
    font-family: "Times", "Times New Roman", "Georgia", "Garamond", "Palatino", "Baskerville", "Lucida Bright", "Lucida Fax", "Palatino Linotype", "Palladio", "URW Palladio", serif;
}
.font-sans
{
    font-family: "Arial", "Verdana", "Helvetica", "Arial Black", "Arial Narrow", "Tahoma", "Trebuchet MS", "Impact", "Gill Sans", "Open Sans", "Fira Sans", "Lucida Sans", "Lucida Sans Unicode", "Liberation Sans", "Nimbus Sans L", sans-serif;
}
.font-mono
{
    font-family: "Courier", "Lucida", "Lucida Console", "Monaco", "Fira Mono", "DejaVu Sans Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
}