/* Taskerdoo CSS file */

/* Format the body of the html and add a graphic */
body              {
                     background-color: #FFFFE0;
                     color: #221811;
                     font-family: Tahoma, Arial, sans-serif;
                     background-image: url(cogpic.jpg);
                     background-repeat: no-repeat;
                     background-attachment: fixed;
                     background-size: cover;
                  }

#wrapper          {
                     display:grid;
                     grid-gap: 20px;
                     width: 80%;
                     background-color: #FEFAEB;
                     margin-right: auto;
                     margin-left: auto;
                     min-width: 900px;
                     max-width: 1280px;
                     box-shadow: 3px 3px 3px 3px #333;
                  }


/* Centers the header in the wrapper - gives it a blue background color with white text */
/* Puts it in the grid at the top */
header            {
                     background-color: blue;
                     color: white;
                     text-align: center;
                     padding-top: 5px;
                     padding-bottom: 5px;
                     grid-column-start: 1;
                     grid-column-end: 1;
                     grid-row-start: 1;
                     grid-row-end: 1;
                  }

/* Main holds all the elements of the main part of the page */
/* It is the second item in the grid - create a grid within to partition more */

main              {
                     grid-column-start: 1;
                     grid-column-end: 1;
                     grid-row-start: 2;
                     grid-row-end: 2;
                     padding: 0em 2em 2em 2em;
                     text-align: center;
                  }

.button
                  {
                    background-color: blue;
                    border: none;
                    color: white;
                    font-size: 24px;
                    font-weight: bold;
                    padding: 15px 32px;
                    text-align: center;
                    text-decoration: none;
                    display: inline-block;
                    margin: 4px 2px;
                    cursor: pointer;
                    border-radius: 12px;
                  }

table, th, td
                  {
                     margin-left:auto;
                     margin-right:auto;
                     border: 2px solid blue;
                  }

tr, th, td
                  {
                     text-align: left;
                  }

.taskcolumn
                  {
                     min-width: 350px;
                  }

.projectcolumn
                  {
                     min-width: 350px;
                  }

.duedatecolumn
                  {
                     min-width:100px;
                  }

.normaltask
                  {
                     color: green;
                  }

.latetask
                  {
                     color: red;
                  }

.centerdata
                  {
                     text-align:center;
                  }
.justifyright
                  {
                     text-align:right;
                  }

/* The footer is similar on every page and included with footer.js but formatted here */
/* It is the third item in the grid */
footer
                  {
                     grid-column-start: 1;
                     grid-column-end: 1;
                     grid-row-start: 3;
                     grid-row-end: 3;
                     font-size: .90em;
                     font-style: italic;
                     padding: 1em;
                     text-align: center;
                  }

/* Horizontal line used in footer because border-top created a line on the bottom */
hr                { color:blue;}

#mobile           {
                     display:none;
                  }
#desktop          {
                     display: inline;
                  }