﻿.bg {
    /* The image used */
    background-image: url("../img/ball-close-stitching-black-and-white.jpg");
    /* Full height */
    height: 100%;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.rule-list-container {
    position:fixed;
}

.rule-link-list {
    list-style-type: none;
    text-align: left;
    padding:0;
}

.rule-link-list li {
        margin: .75rem 0;
    }

    .rule-link-list li:hover {
        cursor: pointer;
        text-decoration: none;
        text-decoration-color: #3C8B33;
    }

.nav-to-top {
    position: fixed;
    right: 1.5em;
    bottom: 1.5em;
    display: block;
    z-index: 2;
    background-color: transparent;
    border-color: transparent;
    font-size: 2em;
    color: #FFF;
    padding: 0;
    border:none;
}

    .nav-to-top:hover {
        background-color: transparent;
        border-color: transparent;
        color: #3C8B33;
    }

    .nav-to-top:focus {
        background-color: transparent;
        border-color: transparent;
        color: #3C8B33;
    }



@media(max-width:1200px) {
    .rule-link-list {
        padding: 0;
        text-align: center;
    }
    .rule-list-container {
        position: relative;
    }
}


.rule-row {
    padding-bottom: 5em;
}

.rule-container {
    background-color: #999;
    padding: 1em;
    /*overflow-y: scroll;*/
}

.rule-section {
    font-size: .85rem;
}

.rule-nav-content {
    position: relative;
    background-color: #3C8B33;
}

.rule-category-title {

}

.rule-subcategory {
    text-align: center;
}

.rule-subcategory-title {
    padding-top: 2em;
    max-width: 20em;
    margin: 0 auto;
}

.rule-info-container {
    width: 100%;
    height: 100%;
    max-height: 80vh;
    padding: 15px;
    margin: auto;
    overflow-y: scroll;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

    /* Hide scrollbar for Chrome, Safari and Opera */
    .rule-container::-webkit-scrollbar {
        display: none;
    }