updates tab 01 - solar

/** PASTE THIS BETWEEN <style> and </style> **/

/** UPDATES TAB BY PEACHTHMS | PLEASE DO NOT REMOVE THIS CREDIT **/

#solar {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 120px;
    padding: 0 5px;
    background-color: #ffffff;
    color: #696969;
}

#solar h1 {
    font-size: 12px;
    text-transform: uppercase;
    text-align: center;
    border-bottom: 2px solid #eeeeee; /** colour of header's bottom border **/
    padding-bottom: 5px;
    cursor: help;
}

#solar:hover #celestial {
    display: block;
}

#celestial  {
    display: none;
    background-color: #ffffff;
    font-size: 11px;
    text-align: center;
    padding: 0 10px;
    max-height: 500px;
    overflow-y: scroll;
}

#celestial img {
    max-width: 100px;
}

.lunar h1 {
    margin: 15px 0 -10px 0;
    padding: 0;
    border: none;
}



<!-- PASTE THIS AFTER <body> -->

<!-- UPDATES TAB BY PEACHTHMS | PLEASE DO NOT REMOVE THIS CREDIT -->

<div id="solar">

<h1>updates</h1>

<div id="celestial">

    <!-- to add more sections copy and paste

    <div class="lunar">
        <h1>title</h1>
        <p>text</p>
    </div>

    -->

    <div class="lunar">
        <h1>title</h1>
        <p>information</p>
    </div>

    <div class="lunar">
        <h1>title</h1>
        <p>stats</p>
    </div>

    <div class="lunar">
        <h1>title</h1>
        <p>links</p>
    </div>

</div><!-- celestial // keep lunar divs above here-->

</div><!-- solar // end of updates tab -->