﻿/* HelpControl */
#HelpBox {
    display:none;
    position: fixed;
    bottom: 0px;
    z-index: 995;
    right: 25px;
    color: #ffffff;
}

#HelpBox a{ text-decoration: none;}

#HelpBox .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;
}	

#HelpBox .HelpClosed .icon {
    background: url("../../img/base/elements/pc/HelpControl/Information.png") no-repeat;
    height: 43px;
    width: 43px;
    float: left;
    margin-top: -12px;
    padding-right: 5px;
}

#HelpBox .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;
}

#HelpBox #dvStartChat{ cursor: pointer;}
#HelpBox #dvStartChat.offline{ cursor: default;}

    #HelpBox .OptionBox .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;
    }
#HelpBox .OptionBox li{ height: 75px;}

#HelpBox .OptionBox li .optionText {
    font-size: 17px;
    font-weight: bold;
    color: #fff;
}

#HelpBox .OptionBox li p.subText {
    margin: 0px;
    padding: 0px;
}

#HelpBox .OptionBox .icon{
    height: 61px;
    width: 61px;
    float: left;
    margin-top: -3px;
    padding-right: 10px;
    float: left;
}

#HelpBox .OptionBox .phoneIcon{ 
    background: url("../../img/base/elements/pc/HelpControl/Phone.png") no-repeat;
}
#HelpBox .OptionBox .chatIcon{ 
    background: url("../../img/base/elements/pc/HelpControl/Chat.png") no-repeat;
}
#HelpBox .OptionBox .faqIcon{ 
    background: url("../../img/base/elements/pc/HelpControl/Faq.png") no-repeat;
}


/* END HelpControl */