styles.5

    /**
     *JPaul Meyer and Jake Morrissey
     *styles.css
     *
     *CS50
     *State Compare
     *
     *global css
     */

/* container for entire page */
.container
{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 25px;
}

/* entire compare table */
.comparetable
{
    margin-left: auto;
    margin-right: auto;
    width: auto;
}

/* for sliders on forms */
input[type=range]
{
    margin-left: auto;
    margin-right: auto;
    width: 400px;
    height:50px;
}

/* the following "number" classes for the numbers under sliders */
.popnumber
{
    font-size: 20px;
    color: #6495ED;
}
.areanumber
{
    font-size: 20px;
    color: #6495ED;
}
.tempnumber
{
    font-size: 20px;
    color: #6495ED;
}
.incomenumber
{
    font-size: 20px;
    color: #6495ED;
}
.coastnumber
{
    font-size: 20px;
    color: #6495ED;
}

/* title for each factor on the form */
.title
{
    font-size: 30px;
    color: #CD5C5C;
    text-decoration: underline;
    font-weight: bold;
}

/* table cells for factor winner in compare */
.option-a 
{
    background-color: WhiteSmoke;
    font-size: 25px;
    color: MediumSeaGreen; 
    font-weight: bold;
}

/* table cells for score winner in compare */
.option-ax
{
    background-color: MediumSeaGreen;
    font-size: 25px; 
    font-weight: bold;
}

/* table cells for factor loser in compare */
.option-b
{
    background-color: WhiteSmoke;
    font-size: 25px;
    color: #F08080;
}

/* table cells for score loser in compare */
.option-bx
{
    background-color: #F08080;
    font-size: 25px;
}

/* table cells for factor tier in compare */
.option-c
{
    background-color: WhiteSmoke;
    font-size: 25px;
    color: gold;
    font-weight: bold;
}

/* table cells for score tier in compare */
.option-cx
{
    background-color: gold;
    font-size: 25px;
    font-weight: bold;
}

/* red title cell */
.topredbox
{
    background-color: #CD5C5C;
    font-size: 25px;
    border: 4px solid black;
    font-weight: bold;
} 

/* red content cell */
.contentredbox
{
    background-color: #F08080;
    font-size: 25px;
    border: 4px solid black;
    font-weight: bold;
} 

/* blue title cell */
.topbluebox
{
    background-color: #6495ED;
    font-size: 25px;
    border: 4px solid black;
    font-weight: bold;
}

/* blue content cell */
.contentbluebox
{
    background-color: LightBlue;
    font-size: 25px;
    border: 4px solid black;
    font-weight: bold;
}

/* gray title cell */
.topcontentbox
{
    background-color: LightGray;
    font-size: 25px;
    border: 4px solid black;
    font-weight: bold;
}

/* gray content cell */
.contentbox
{
    background-color: WhiteSmoke;
    font-size: 25px;
    border: 2px solid black;
}

/* all tables */
#middle table
{
    width: auto;
}

/* all table elements */
#middle table, tr, td
{
    border: 2px solid black;
    padding: 30px;
}

/* header of page */
#top
{
    text-align: center;
}

#middle .form-control
{
    /* center form controls */
    display: inline-block;

    /* override Bootstrap's 100% width for form controls */
    width: auto;
}

/* all table data */
#middle td
{
    text-align: center;
    font-size: 25px;
}

#middle .nav
{
    /* center navigation pills */
    display: inline-block;
}

/* intro text on home page */
#middle .intro
{
    text-align: left;
    font-size: 18px;
}

/* bold text on home page */
#middle .bolds
{
    font-weight: bold;
}

#doc
{
    text-align: left;
}

/* footer of page */
#bottom
{
    font-size: 15px;
    margin: 20px;
    text-align: center;
}