/* only used for when there are 5 tabs */
.twenty {
    width: 20%;
}

/* Style tab links */

.tablink {
    color: white;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1.5em;
    font-weight: normal;
    font-style: normal;
    font-family: 'helvetica';
    /* TODO: base width off of the number tabs, data-bind?*/
}

.tab-height {
    height: 50px;
}

.tab-view-height {
    height: calc(100% - 50px);
}

/* .tablink:hover {
    background-color: #777;
}
 */
.tabcontainer {
    color: black;
    height: 100%;
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
    /* color: white; */
    display: block;
    /* padding: 100px 20px;*/
    height: 100%;
    /* TODO: get a sold number for this based off of the tab button*/
}

/* Below is temporary, each child should control how it looks */

/* #Home {
    background-color: red;
}

#News {
    background-color: green;
}

#Contact {
    background-color: blue;
}

#About {
    background-color: orange;
} */

/*For laptops and Tablets*/
/* 
    To compensate for the difference in pixel density
    do the following:
                    new_size = 1.25 * old_size
*/
@media only screen and (min-width: 768px) {
    .tab-height {
        height: 63px;
    }

    .tab-view-height {
        height: calc(100% - 63px);
    }

    .tablink {
        font-size: 2.25em;
    }
}