/******************************************************/
/* colors
        classic:
            brown:  #3d2228
            aqua:   #aabaaf
            tan:    #a7917a
            cream:  #eeefde
            pink:   #eed8ce
        brights: 
            #ed5171 - pink
            #fe9a9a - peach
            #fddd97 - yellow
            #acf2b4 - mint green
            #6cd1bf - green aqua
            #019dbb - blue aqua
        pastels:
            #FDE3E9 - pink
            #FFEADD ..?? not finished?
*/



/* basics (defaults) */
body {              background: var(--page-background);
                    color: var(--page-text);
                    font-family: 'Roboto', serif;
                    font-size: 20px;
                    text-align: center;}

h1 {                font-family: 'Pompiere', serif;}

.p0-background  { background-color: var(--p0-color);}
.p1-background  { background-color: var(--p1-color);}
.p2-background  { background-color: var(--p2-color);}
.p3-background  { background-color: var(--p3-color);}
.pComplete-background  { background-color: var(--pComplete-color);}

/******************************************************/
/*** tables, forms, inputs ***/

/* table format for form data - no background */
.form-table {           width: 100%;
                        margin-left: auto;
                        margin-right: auto;}
                    
.form-table-col-label { width: 50%;
                        text-align: right;}

.form-table-col-value { width: 50%;
                        text-align: left;}

.form-table-label {     font-size: 20px;}

.form-table-value {     background-color: var(--input-background);
                        color: var(--input-text);
                        font-size: 20px;
                        accent-color: var(--input-text);
                        border-color: var(--input-border);
				        border-radius: 4px;
				        border-style: solid;}
            
/* table format for displaying data - striped table for readability */
.data-table {                   margin-left: auto;
                                margin-right: auto;
						        width: 100%;
						        max-width: 500px;
                                border: none;
						        text-align: center; 
						        color: var(--data-table-text);}
						        
tr.data-table:nth-child(even) { background-color: var(--data-table-stripes);}
tr.data-table:nth-child(odd)  { background-color: var(--data-table-background);}

th.data-table, td.data-table {  text-align: center;
                                font-size: 16px;
                                color: var(--data-table-text);
                                border: 1px solid;
                                border-radius: 7px;
                                border-color: var(--table-border);
                                padding: 7px;}

.wide-table {                   max-width: 3000px;}

.small-text {                   font-size: 12px;}            

.readOnlyInput {                background-color: var(read-only-background);}

.noteText {                     font-style: italic;}

.highlight-background {         background-color: var(--highlight-background);}

/******************************************************/
/* images */
.imgSquare100 {         width: 100px;
                        height: 100px;}

.imgSquare50 {          width: 50px;
                        height: 50px;}

.imgFullPageWidth {     margin: auto;
                        width: 100%; }

/******************************************************/
/* footer and icons */

.footer {                   position: fixed;
                            left: 0;
                            bottom: 0;
                            width: 100%;
                            background-color: var(--footer-background);
                            color:  var(--footer-text);}

a.iconLink:link {           color:var(--light-icon); }                                
a.iconLink:visited {        color:var(--light-icon); }                                
a.iconLink:hover {          color:var(--light-icon); }                                
a.iconLink:active {         color:var(--light-icon); }                                

.iconLink {                 text-decoration: none;
                            display: inline-block;
                            padding: 8px 8px;
                            color:var(--light-icon);}

/* for use on light backgrounds */
a.iconLinkDark:link {       color:var(--dark-icon); }                                
a.iconLinkDark:visited {    color:var(--dark-icon); }                                
a.iconLinkDark:hover {      color:var(--dark-icon); }                                
a.iconLinkDark:active {     color:var(--dark-icon); }                                

.iconLinkDark {             text-decoration: none;
                            display: inline-block;
                            padding: 8px 8px;
                            color:var(--dark-icon);}

/******************************************************/
/* buttons, anchors */

a:link {            color: var(--link-text);
                    background-color: transparent;
                    text-decoration: underline;}

a:visited {         color: var(--link-text-visited);
                    background-color: transparent;
                    text-decoration: underline;}


a.fauxButton:link, a.fauxButton:visited, a.fauxButton:hover, a.fauxButton:active
{                   background-color: var(--button-background);
                    color: var(--button-text);
                    text-align: center;
                    width: 200px;
                    text-decoration: none;
                    font-size: 16px;
                    border: 3px solid;
                    border-color: var(--button-border);
                    border-radius: 8px;
                    padding: 7px;
                    margin: 5px 10px;
                    display: inline-block;
                    cursor: pointer;}
                    
/******************************************************/