﻿/*********************************************
Desktop only
**********************************************/
@media only screen and (min-width: 768px) {
    #game-tabs {
        background: url("/Images/texture2.jpg");
        padding-top: 25px;
        box-shadow: inset 0 -1px #cecece;
    }

        #game-tabs .game-type {
            position: relative;
            float: left;
        }

            #game-tabs .game-type li {
                float:left;
            }

            #game-tabs .game-type a {
                color: #c1d4e8;
                border-radius: 4px;
                display: block;
                padding: 16px 20px;
                display: inline-block;
                font-size: 20px;
                font-weight: 600;
                margin-right: 10px;
                margin-bottom: 20px;
            }

                #game-tabs .game-type a:hover {
                    color: rgba(255,255,255,0.9);
                    background: rgba(255,255,255,0.1);
                }

            #game-tabs .game-type .active a,
            #game-tabs .game-type .active a:hover {
                color: #FFF;
                background: rgba(255,255,255,0.2);
            }

}


/*********************************************
Mobile Only
**********************************************/
@media only screen and (max-width: 767px) {

    #game-tabs {
        padding: 0;
        background-color: #fff;
    }


        #game-tabs ul.game-type {
            position: relative;
            float: left;
            font-family: 0;
            width: 100%;
            clear: both;
            border-bottom: solid 1px #eee;
            display: flex;
        }

            #game-tabs ul.game-type li {
                font-size: 18px;
                flex: 1;
                font-weight: 600;
                text-align: center;
            }

                #game-tabs ul.game-type li a {
                    line-height: 49px;
                    display: block;
                }
                /*hide "kryss" from tabs */
                #game-tabs ul.game-type li span {
                    display: none;
                }


                /* Active state */
                #game-tabs ul.game-type li.active,
                #game-tabs ul.game-type li.gold.active,
                #game-tabs ul.game-type li.free.active {
                    border-bottom: 3px solid #2c486a;
                }

                #game-tabs ul.game-type li a {
                }
                    /* Hover state */
                    #game-tabs ul.game-type li a:hover,
                    #game-tabs ul.game-type li.gold.active a,
                    #game-tabs ul.game-type li.free.active a {
                    }

                /* Tabs: Free */
                #game-tabs ul.game-type li.free.active {
                    /*background-color: #c4e4f6;
                            background-image: linear-gradient(to bottom, #e0f0fa 0%, #c4e4f6 100%);
                            */
                    border-color: #2c486a; /*light: 85bae9*/
                }

                #game-tabs ul.game-type li.free a {
                    color: #2c486a; /*light: 85bae9*/
                }

                /* Tabs: Gold */
                #game-tabs ul.game-type li.gold.active {
                    /*background-color: #fceba0;
                            background-image: linear-gradient(to bottom, #fef5cf 0%, #fceba0 100%);
                            */
                    border-color: #f8c22d;
                }

                #game-tabs ul.game-type li.gold a {
                    color: #f8c22d;
                }


        /* Dark mode */
        #game-tabs.dark-mode ul.game-type {
            background-color: #345d8b;
        }

            #game-tabs.dark-mode ul.game-type li.active {
                border-color: #77bfff;
            }

            #game-tabs.dark-mode ul.game-type li.gold.active {
                border-color: #f8c22d;
            }

            #game-tabs.dark-mode ul.game-type li a {
                color: #77bfff;
                opacity: .6;
            }

            #game-tabs.dark-mode ul.game-type li.active a {
                background-color: #2c486a;
                color: #77bfff;
                opacity: 1;
            }

            #game-tabs.dark-mode ul.game-type li.gold.active a {
                background-color: #2c486a;
                color: #f8c22d;
                opacity: 1;
            }
}
/* Mobile end */
