.schoolList thead {
    font-family:'Trebuchet MS';
    background-color: aliceblue;
    height: 30px;
    font-weight: bold;
}

.schoolList td  {
    background-color: whitesmoke;
    font-size: 90%;
    height: 25px;
}

#schoolList {
    border: 2px solid burlywood;
}
#schoolList .details {
    cursor: pointer;
    color: brown;
    text-decoration: underline;
    text-align:center;
}

#schoolDetail {
    margin: auto;
    width: 80%;
    display: none;
}

#schoolDetail div {
    padding: 5px;
}

#schoolDetail .header {
    font-weight: bold;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    border-bottom: 2px solid lightskyblue;
    width: 100%;
}

#schoolDetail .title {
    font-weight: bold;
}

#schoolDetail .background{
    background-color: #f0f0f0;
}

#schooLDetail .ass {
    background-color: #fffaf0
}
#schooLDetail .needs {
    background-color: #f0f0f0
}

#schooLDetail .cost {
    font-weight: bold;
}

#schoolDetail .pics {
    display: flex;
}
#schoolDetail .pics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 10px;
    justify-content: center;
}
#schoolDetail .pics img{
    width: 250px;
    border:7px solid #594848;
}
 
.even td {
    background-color: #f0f0f0;
}

.odd td {
    background-color: white;
}