/*<!-- CSS file:
	Author : James Huffman
	Date   : 3/27/2024
	Desc   : style sheet for the Integrator webapp 
-->*/

/* Coloring of webpage background */
body {
	background-color: #1B1F23;
}
/* title wrapper */
.titleWrapper {
    background-attachment: fixed;
    z-index: -1;
    position: fixed;
    top: 32px;
    left: 32px;
    color: #00FF00;
    font-family: "Courier";
    font-size: 32px;
    text-align: left;
}
/* app wrapper to contain main app elements */
.appWrapper {
    margin-left: auto;
    margin-right: auto;
    background: linear-gradient(rgba(27, 31, 35, 0.5), rgba(27, 31, 35, 1)); 
}
/* HuffmanCS logo */
#hcsLogo {
    background-image: url(img/HcsLogo_GRN.png);
    z-index: -1;
    position: fixed;
    top: 32px;
    right: 32px;
    width: 200px;
    height: 200px;
}
/* author block */
#author {
    z-index: -1;
    position: fixed;
    top: 232px;
    right: 32px;
    color: #00FF00;
    font-family: "Courier";
    font-size: 12px;
    text-align: left;
}
/* gradient for below title */
#titleGradient {
    background-image: linear-gradient(rgba(0,255,0,0), rgba(0,255,0,0.3)); 
    height: 64px;
}
/* button class for all buttons in app */
.button {
    transition-duration: 0.5s;
    cursor: pointer;
}
/* text entry class for text fields */
.textEntry{
    background-color: #990000;
    border-radius: 20px;
}
.headings {
    background-image: radial-gradient(rgba(30, 70, 63, 0.5), rgba(28, 64, 57, 1.0)); 
    text-align: center;
    line-height: 50px;
    font-family: "Courier";
    font-size: 18px;
    font-weight: bold;
    color: rgb(162, 215, 205);
}
.title {
    background-attachment: fixed; 
    color: #00FF00;
    font-family: "Courier";
    font-size: 86px;
}
.bodyText {
    margin: 0 auto;
    width: 700px;
    color: #FFFFFF;
    font-family: 'Courier New', Courier, monospace;
    background-color: #182c25;
    padding: 1rem;
    border-width: 3px;
    border-style: solid;
    border-image: linear-gradient(rgb(0, 60, 0), #00ff00) 1 100%;
}
.imageStyle {
    width: 200px;
    height: 200px;
    margin-right: auto;
    margin-left: auto;

}
/* the graph canvas area */
#graph {
    margin: 0 auto;
    display: block;
    background: #182c25; 
    border-style: solid;
    border-width: 3px;
    border-radius: 10px;
    border-color: #00FF00;
}
/* form for function entry section */
#functionFormWrapper {
    margin: 0 auto;
    width: 500px;
    background: linear-gradient(to right, rgb(0, 60, 0), #00ff00);
    padding: 3px;
}
.functionForm {
    position: relative;
    padding: 1rem;
	background-color: #1B1F23;
    overflow: hidden;
    white-space: nowrap;
    font-size: 24px;
    font-family: "courier";
    color: #00FF00;
}
.functionInput {
    background-color: rgb(69, 91, 86);
    border-color: rgb(35, 46, 44);
    border-style: solid;
    border-radius: 3px;
    margin-top: 4px;
    margin-bottom: 4px;
    font-size: 24px;
    font-family:'Courier New', Courier, monospace;
    color: #00FF00;
}
.functionPlotButton {
    position: absolute;
    right: 8px;
    top: 50%;
    margin-top: -20px;
    background: radial-gradient(rgb(0, 128, 0), #00ff00); 
    width: 100px;
    height: 40px;
    border: none;
    border-radius: 3px;
    font-family: 'Courier New', Courier, monospace;
    color: white;
}
.functionPlotButton:hover {
    background: #009c00;
}
.functionPlotButton:active {
    background: #003c00; 
}
.tabButton {
    background-color: #00000000;
    border-style: solid;
    border-color: #1B1F23;
    border-bottom: none;
    font-family: 'Courier New', Courier, monospace;
    color: white;
}

#sample {
	border-style: solid;
	border-width: thin;
	border-color: #000;
	border-collapse: collapse; 
    margin-left: auto;
    margin-right: auto;
}
.tableheader {
    font-weight: bold;
    font-size: 20px;
    background-color: #990000; 
    border-color: #000;
    border-style: solid;
    border-width: thin;
    color: #000;
}
.tdgrey {
    font-weight: bold;
    font-size: 15px;
    background-color: #999;
    border-color: #000;
    border-style: solid;
    border-width: thin;
    color: #FFF; 
}
.tdgreycurrent {
    font-weight: bold;
    font-size: 15px;
    background-color: #999;
    border-color: #000;
    border-style: solid;
    border-width: thin;
    color: #008000; 
}
.tdwhite {
    font-weight: bold;
    font-size: 15px;
    background-color: #FFF;
    border-color: #000;
    border-style: solid;
    border-width: thin;
    color: #999; 
}

/* For the Submit Section */
.formstructure {
	width: 100px;
}
.formstructure input {
	width: 100%;
}

/* directory list */
ul {
    list-style-type:  hebrew;
    background-color: rgb(48, 104, 67); 
    width: 24rem; 
    margin-left: auto;
    margin-right: auto;
    font-family: 'Courier New', Courier, monospace;
    color: rgb(162, 215, 205);
}
li {
    background-color: rgb(43, 76, 58);
    height: 1rem;
    text-align: left;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.25rem;
}

/* function graph styling */
#plotTest {
    width:100%; 
    max-width:700px; 
    margin: 0 auto;
}