﻿/* HelpControl */
#HelpBox {
    display:none;
    position: fixed;
    bottom: 0px;
    z-index: 995;
    right: 25px;
    color: #ffffff;

    a { 
        text-decoration: none;
    }

    .HelpClosed {
        color: #fff;
        font-size: 15px;
        border-bottom: 0px;
    
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#89ccfa+0,72c3f8+26,30a7f5+76,1a9df4+100 */
        /* LET OP: Ik heb hier de hoogtes handmatig gezet in pixels! */
        .linear-gradient( 
            @origin: top; 
            @direction: to bottom;
            @start-color:#89ccfa;
            @stops: #89ccfa 0%,#72c3f8 13px,#30a7f5 41px,#1a9df4 100%;
        );

        font-weight: bold;
        height: 35px;
        width: 277px;
        padding: 20px 20px 0 10px;
        text-transform: uppercase;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
	    cursor:pointer;

         .icon {
            background: url("../../img/base/elements/pc/HelpControl/Information.png") no-repeat;
            height: 43px;
            width: 43px;
            float: left;
            margin-top: -12px;
            padding-right: 5px;
        }
    }

    .OptionBox {
        width: 217px;

        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#89ccfa+0,72c3f8+26,30a7f5+76,1a9df4+100 */
        /* LET OP: Ik heb hier de hoogtes handmatig gezet in pixels! */
        .linear-gradient( 
            @origin: top; 
            @direction: to bottom;
            @start-color:#89ccfa;
            @stops: #89ccfa 0%,#72c3f8 13px,#30a7f5 41px,#1a9df4 100%;
        );

        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        padding: 20px 20px 0 40px;

        .optionBox_Header_Close {
            float: right;
            cursor: pointer;
            height: 17px;
            width: 17px;
            background: url("../../img/base/elements/pc/HelpControl/close.png") no-repeat;
            position: relative;
            top: -10px;
            right: -10px;
        }

        li {
            height: 75px;

            .optionText {
                font-size: 17px;
                font-weight: bold;
                color: #fff;
            }

            p.subText {
                margin: 0px;
                padding: 0px;
            }
        }

        .icon {
            height: 61px;
            width: 61px;
            float: left;
            margin-top: -3px;
            padding-right: 10px;
            float: left;
        }

        .phoneIcon{ 
            background: url("../../img/base/elements/pc/HelpControl/Phone.png") no-repeat;
        }
        .chatIcon{ 
            background: url("../../img/base/elements/pc/HelpControl/Chat.png") no-repeat;
        }
        .faqIcon{ 
            background: url("../../img/base/elements/pc/HelpControl/Faq.png") no-repeat;
        }
    }

    #dvStartChat{ 
        cursor: pointer;
        &.offline{ cursor: default;}
    }
}
/* END HelpControl */