/* Gregory Ecklund */
/* February 2023 */

/* Background Color */
body {
    background-color: tan;
}

/* Table */
.periodicTable {
    float: left;
}
table {
    border-spacing: 0px;
    cursor: default;
}
td {
    font-size: 16px;
    border-style: solid;
    border-color: black;
    height: 60px;
    width: 60px;
    text-align: center;
    font-weight: bolder;
    border-width: 1px;
}
.atomicMass {
    font-size: 10px;
    margin: 0px;
}
.atomicNumber {
    font-size: 10px;
    margin: 0px;
}
.elementSymbol {
    font-size: 14px;
    margin: 0px;
}
.BLANKSPACE {
    border-color: tan;
}

/* Blue Staircase */
#boronSquare {
    border-bottom-color: blue;
    border-bottom-width: 2px;
}
#tennessineSquare {
    border-top-color: blue;
    border-top-width: 2px;
}
#aluminiumSquare, #germaniumSquare, #antimonySquare, #poloniumSquare {
    border-right-color: blue;
    border-top-color: blue;
    border-right-width: 2px;
    border-top-width: 2px;
}
#siliconSquare, #arsenicSquare, #telluriumSquare, #astatineSquare {
    border-left-color: blue;
    border-bottom-color: blue;
    border-left-width: 2px;
    border-bottom-width: 2px;
}

/* Element Category Coloring */
.reactiveNonMetal {
    background-color: yellow;
}
.nobleGas {
    background-color: #46BDC6
}
.postTransitionMetal {
    background-color: #999999
}
.metalloid {
    background-color: #93C47D
}
.transitionMetal {
    background-color: #EAD1DC
}
.alkaliMetal {
    background-color: #FFC90E;
}
.alkalineEarthMetal {
    background-color: #F9CB9C
}
.lanthanide {
    background-color: #d4aded
}
.actinide {
    background-color: #bd919c
}
.unknown {
    background-color: #D9D9D9
}

/* D-F Block */
#lanthanumSquare, #actiniumSquare {
    border-right-color: goldenrod;
    border-right-width: 3px;
}
#ceriumSquare, #thoriumSquare {
    border-left-color: goldenrod;
    border-left-width: 6px;
}
#hafniumSquare, #rutherfordiumSquare {
    border-left-color: goldenrod;
    border-left-width: 3px;
}

/* State at STP Coloring */
#bromineSquare, #mercurySquare, #coperniciumSquare {
    color: blue;
}
#hydrogenSquare, #heliumSquare, #nitrogenSquare, #oxygenSquare, #fluorineSquare, #neonSquare {
    color: red;
}
#chlorineSquare, #argonSquare, #kryptonSquare, #xenonSquare, #radonSquare, #fleroviumSquare {
    color: red;
}

/* Element Data Table */
.elementData {
    display: flex;
    float: right;
    margin-right: 60px;
    font-size: 16px;
    font-family: arial;
    visibility: hidden;
}
.elementDataLabels > p, .elementDataInfo > p {
    border-width: 2px;
    border-style: solid;
    margin: 0px;
    padding: 2px;
}
.elementDataLabels {
    background-color: greenyellow;
}
.elementDataInfo {
    background-color:darkgrey;
}

/* Navbar */
.navbar {
    overflow: hidden;
    margin-bottom: 2%;
}
/* Navbar Elements */
.navbar a {
    float: left;
    text-decoration: none;
}
/* Navbar Dropdown Containers */
.dropdown {
    float: left;
    overflow: hidden;
}
/* Change Background Color on Hover */
.navbar a:hover, .dropdown:hover .dropdownLabel {
    background-color: lightgreen;
}
/* Dropdown Div */
.dropdownLinks {
    display: none;
    position: absolute;
}
/* Dropdown Options */
.dropdownLinks a {
    float: none;
    display: block;
}
/* Display Dropdown Options on Hover */
.dropdown:hover .dropdownLinks {
    display: block;
}
/* Background Color and Border */
.navbar a, .dropdownLabel {
    border-style: solid;
    border-width: 1px;
    border-color: black;
    background-color: lightskyblue;
    padding: 15px;
    font-size: 16px;
    color: black;
    text-align: left;
}