/*
File: css/style.css
GUI Assignment: Using the jQuery Plugin/UI with Your Dynamic Table, Part 2: jQuery UI Slider and Tab Widgets
Halleluia Zeyohannes, UMass Lowell Computer Science, 
halleluia_zeyohannes@student.uml.edu
Copyright (c) 2022 by Halleluia Zeyohannes. All rights reserved. May be freely
copied or excerpted for educational purposes with credit to the author.
updated by HZ on 30 Nov 2022 at 5PM

Purpose: Style the elements of index.html to increase readability and ease of use
of the site.
*/

/*
General styling for the whole site
*/
body {
    background-color: #FFEBC1;
    font-family: 'Courier New', Courier, monospace;
    font-size: large;
    color: #8E3200;
}

h1 {
    text-align: center;
    text-decoration: underline;
    text-transform: uppercase;
}

p {
    text-align: center;
}
/*
Center the content of the site based on window size.
*/
.wrapper {
    width: 80%;
    min-width: 600px;
    margin: auto;
    background-color: #ffe09c;
    font-weight: bold;
    padding: 15px;
}

/*
Styled to match the site's styling with font style and size,
and ensure readability of input.
*/
input {
    font-style: normal;
    font-size: 100%;
    font-family: 'Courier New', Courier, monospace;
}

/*
Center the form in the wrapper.
*/
#form {
    margin-left: auto;
    margin-right: auto;
}

/*
Center the fieldsets within the form to help group related inputs.
*/
#form fieldset {
    border: 1px solid #8E3200;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
    width: 50%;
}

#form legend {
    font-style: italic;
}

#form input[type="number"] {
    margin-right: 15px;
}

/*
Styling the sliders to match site's aesthetic and add spacing
*/
.ui-slider-horizontal {
    background: #f5c04d;
    margin-top: 15px;
    margin-bottom: 15px;
}

.ui-slider-horizontal .ui-slider-handle {
    background: #8E3200; 
}

/*
Styling the tabs area to match site's aesthetic
*/
#saved_tables {
    background-color: #ffffff;
}

.tab.ui-state-default {
    color: #8E3200;
    background: #ffe09c; 
}

.tab.ui-state-active {
    background: #f5c04d;
}

.ui-tabs-nav {
    background: #FFEBC1;
}

#saved_tables > ul > li > a {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    color: #8E3200;
}

input#remove_tabs {
    color: #8E3200;
    font-family: 'Courier New', Courier, monospace;
    background-color: #ffe09c;
    font-weight: bold;
    font-size: 90%;
    margin: 10px;
}

input#remove_tabs:hover {
    background-color: #f5c04d;
}

input#remove_tabs:active {
    background-color: #000000;
    color: #ffffff;
}

div.tab_content {
    max-width: 1440px;
    max-height: 550px;
    overflow: scroll;
    margin-right: 10px;
    margin-bottom: 30px;
    
}
/*
Styled to match the site's aesthetic rather than using the bland grey
button.
*/
#form input[type="submit"] {
    color: #8E3200;
    background-color: #ffffff;
    font-weight: bold;
}

#form input[type="submit"]:hover {
    background-color: #f5c04d;
}

#form input[type="submit"]:active {
    background-color: #000000;
    color: #ffffff;
}

/*
Used to hide elements as needed
*/
.hidden {
    display: none;
}
/*
Add styling to error messages to catch user's attention
*/
#error_invalid_input {
    color: #F03200;
    font-style: italic;
    margin: 5px;
    text-align: center;
}

/*
Style the message to alert the user that min and max were swapped
*/
#minmax-multiplier, #minmax-multiplicand {
    color:#ff0000;
    font-style: italic;
    font-size: 90%;
    text-align: center;
}

/*
Style error message for user when trying save a table and there is invalid input
*/
#invalid_save {
    color: #ff0000;
    margin: 2px;;
}
/*
Add styling to error messages that are generated by jQuery in validate()
*/
div.error {
    color: #ff0000;
    font-style: italic;
    font-size: 90%;
    margin: 5px;
    text-align: center;
}

/*
Style the input boxes where any invalid input has been entered to catch user's attention
*/
input.error {
    color: #ff0000;
    border: 2.5px solid #ff0000;
}
/*
Add borders around table and its cells to separate the content for 
readabiltiy.
*/
table,
th,
td {
    border: 2px solid #8E3200;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
}

th,
td {
    padding: 15px;
}
/*
Style the table so that every other cell has alternating colors
and separate the cells clearly.
*/
table tr:nth-child(even) td:nth-child(odd),
table tr:nth-child(odd) td:nth-child(even) {
    background-color: #f5c04d;
}

/*
Places table into a scollable container so that tables created with inputs
of a large range will not take over the site's space.
*/
#multiplication-table {
    max-height: 550px;
    overflow: scroll;
    margin: 30px;
}

table {
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    outline-color: #8E3200;
    color: #8E3200;
}

table th {
    background-color: #000000;
    color: #f3b225;
}

/* attempting scrolling body and sticky headers.
Noticed that doing this leaves the headers going over the empty cell rather
than under. If i had more time, I would change buildTable() in script.js to add
a class to the first empty cell so that I could write a rule for each type of
header cell, the empty left most corner cell, horizontal header, and vertical 
headers and use the z-index property to layer it properly. To see what this rule
does to the table, please move the comment closing delimiter. 

https://www.w3schools.com/cssref/pr_pos_z-index.php

th {
    position: sticky;
    top: 0%;
    left: 0%;
}
*/