@charset "utf-8";
/* CSS Document */


/* Trifecta */
#trifecta{
    display: block;
    position: absolute;
    width: 100%; height: 100%;
    left: 0px; top: 0px;
    z-index: 7;
    text-align: left;
    background: url(../../Images/playerBgLight.png);
}

    #trifecta .trifectaCoupon{
        display: block;
        position: relative;
        float: left;
        width: 50%; height: 50%;
        margin-top: 2px;
        text-align: center;
    }


    #trifecta .trifectaColumn{
        display: block;
        position: relative;
        float: left;
        width: 33%; height: 50%;
        margin-top: 0px;
        text-align: center;
    }
        #trifecta div.trifectaColumn.fullWidth{
            width: 100% !important;
        }


    #trifecta .trifectaColumnCoupon{
        display: block;
        position: relative;
        float: left;
        width: 100%; height: 50%;
        margin-top: 0px;
        text-align: left;
        box-shadow: inset 0 0 30px #fff;
        box-shadow:  0 0 40px #333;
        overflow: hidden;
        padding-left: 20px;
    }

    #trifecta .trifectaColumn:nth-child(even){
        width: 34% !important;
    }

    #trifecta .trifectaColumn .meetTheDoctorThumb {
        background-color: #f0f0f0;
    }

        .trifectaColumnBorders{
            display: block;position: absolute;
            width: 100%;
            height: 100%;
            border-right: 1px solid #353535;
            border-left: 1px solid #565656; 
            border-top: 1px solid #565656;
            border-bottom: 1px solid #353535; 
            top: 0px; left: 0px;
        }


        .trifectaColumnBordersCoupon{
            display: block;position: absolute;
            background: url(../../Images/glow.png);
            background-position: -50px -50px;
            width: 100%;
            height: 100%;
            top: 0px; left: 0px;
        }

        #trifecta .trifectaColumn .trifectaHeader{
            display: block;
            position: relative;
            font-size: 18px;
            color: #efefef; text-shadow: 0px 1px 0px #000;
            padding-top: 5%;
            padding-bottom: 5px;
        }

        #trifecta .trifectaColumnCoupon .trifectaHeaderCoupon{
            display: block;
            position: relative;
            font-size: 18px;
            color: #444; text-shadow: 0px 1px 0px #000;
            padding-top: 1.5%;
            padding-bottom: 10px;
        }


        #trifecta .trifectaColumn img{
            display: inline-block;
            position: relative;
            margin-top: .25%;
            margin-bottom: .5%;
            border-radius: 3px;
            height: auto; width: auto;
            max-width: 70%; max-height: 25%;
            border: #000 solid 1px;
            -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.15);
            -moz-box-shadow:    0px 1px 0px rgba(255, 255, 255, 0.15);
            box-shadow:         0px 1px 0px rgba(255, 255, 255, 0.15);
        }

        #trifecta .trifectaColumn .trifectaText{
            display: inline-block;
            width: 90%;
            height: 40px;
            padding-top: 4px;
            position: relative;
            font-size: 11px;
            color: #efefef; text-shadow: 0px 1px 0px #000;
            text-align: center;
        }

        #trifecta div.trifectaColumn.fullWidth .trifectaText{
            height: 30px;
        }

        #trifecta .trifectaColumnCoupon .trifectaTextCoupon{
            display: inline-block;
            width: 70%;
            height: 40px;
            position: relative;
            font-size: 11px;
            color: #333;
            text-align: justify;
        }

        #trifecta .trifectaColumnCoupon .trifectaTextCouponDetails{
            display: inline-block;
            position: relative;
            font-size: 13px;
            color: #111; 
            text-align: justify;
        }
        #trifecta .trifectaColumnCoupon .trifectaTextCouponDetailsTop{
            padding-top: 3px;
        }
        #trifecta .trifectaColumn .trifectaButtonsHolder{
            display: block;
            position: relative;
            text-align: center;
        }


            #trifecta .trifectaColumn .trifectaButton{
                display: inline-block;
                position: relative;
                padding: 5px;
                margin-top: 10px;
                width: 70%;
                border-radius: 5px;
                font-size: 13px;
                color: #efefef; 
                text-align: center;
                text-decoration: none;
                background: url(../../Images/buttonBg.jpg);
                background-position: top;
                border: #222 1px solid;
                cursor: pointer;
                -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.15), inset 0 1px 0px 0 rgba(255, 255, 255, 0.15);
                -moz-box-shadow:    0px 1px 0px rgba(255, 255, 255, 0.15), inset 0 1px 0px 0 rgba(255, 255, 255, 0.15);
                box-shadow:         0px 1px 0px rgba(255, 255, 255, 0.15), inset 0 1px 0px 0 rgba(255, 255, 255, 0.15);
            }

            #trifecta .trifectaColumn .trifectaButtonSmall{
                display: inline-block;
                position: relative;
                padding: 5px;
                margin: 3px;
                margin-top: 10px;
                width: 35%;
                border-radius: 5px;
                font-size: 13px;
                color: #efefef; 
                text-align: center;
                text-decoration: none;
                background: url(../../Images/buttonBg.jpg);
                background-position: top;
                border: #222 1px solid;
                cursor: pointer;
                -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.15), inset 0 1px 0px 0 rgba(255, 255, 255, 0.15);
                -moz-box-shadow:    0px 1px 0px rgba(255, 255, 255, 0.15), inset 0 1px 0px 0 rgba(255, 255, 255, 0.15);
                box-shadow:         0px 1px 0px rgba(255, 255, 255, 0.15), inset 0 1px 0px 0 rgba(255, 255, 255, 0.15);
            }


            #trifecta .trifectaColumnCoupon .trifectaButtonCoupon{
                display: block;
                position: absolute;
                padding:1.5% 4%;
                top: 70%;
                left: 30%;
                width: 30%;
                max-height: 10px;
                border-radius: 5px;
                font-size: 13px;
                color: #efefef; 
                text-align: center;
                text-decoration: none;
                background:  url(../../Images/couponButtonBg.jpg);
                background-position: top;
                                
                cursor: pointer;
                -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.35), inset 0 1px 0px 0 rgba(255, 255, 255, 0.15);
                -moz-box-shadow:    0px 1px 0px rgba(255, 255, 255, 0.35), inset 0 1px 0px 0 rgba(255, 255, 255, 0.15);
                box-shadow:         0px 1px 0px rgba(255, 255, 255, 0.35), inset 0 1px 0px 0 rgba(255, 255, 255, 0.15);
            }

            .detailsContent{
                color: #db1b5a;
            }

            .trifectaGirlBg{
                display: block;
                position: absolute;
                width: 100%; height: 100%;
                z-index: 0;
                right: 0px;
                text-align: right;
            }

            .couponGirl{
                display: inline-block;
                position: relative;
                height: 100%; width: auto;

            }

            .floralPattern{
                display: block;
                position: absolute;
                height: 100%; width: auto;
                right: -100px;
                bottom: 0px;
            }

            .couponTopBorder{
                display: block;
                position: absolute;
                height: 3%; width: 100%;
                right: 0px;
                top: 0px;
                background:  url(../../Images/whiteAlpha20.png);
            }

            .couponBottomBorder{
                display: block;
                position: absolute;
                height: 4.5%; width: 100%;
                right: 0px;
                bottom: 0px;
                background:  url(../../Images/whiteAlpha20.png);
            }

            #trifecta .trifectaColumn .trifectaButton:hover{
                background-position: bottom;
            }

            #trifecta .trifectaColumn .trifectaButtonSmall:hover{
                background-position: bottom !important;
            }