/*help bubbles that pop sup form thead user... 9 types depending content where thead pointer is*/
        div.speechTopLeft {
            position: relative;
            font-size:large;
            width: 300px;
            text-align: left;
            background-color: white;
            border: solid ;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            -webkit-box-shadow: 2px 2px 4px #888;
            -moz-box-shadow: 2px 2px 4px #888;
            box-shadow: 2px 2px 4px #888;
        }
        div.speechTopLeft:before {
            content: ' ';
            position: absolute;
            width: 0;
            height: 0;
            left: 20px;
            top: -43px;
            border: 21px solid;
            border-color: transparent transparent black transparent;
        }
        div.speechTopLeft:after {
            content: ' ';
            position: absolute;
            width: 0;
            height: 0;
            left: 22px;
            top: -35px;
            border: 19px solid;
            border-color: transparent transparent white transparent;
        }

        div.speechTopCentre {
            position: relative;
            font-size:large;
            width: 300px;
            text-align: left;
            background-color: white;
            border: solid ;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            -webkit-box-shadow: 2px 2px 4px #888;
            -moz-box-shadow: 2px 2px 4px #888;
            box-shadow: 2px 2px 4px #888;
        }
        div.speechTopCentre:before {
            content: ' ';
            position: absolute;
            width: 0;
            height: 0;
            left: 130px;
            top: -43px;
            border: 21px solid;
            border-color: transparent transparent black transparent;
        }
        div.speechTopCentre:after {
            content: ' ';
            position: absolute;
            width: 0;
            height: 0;
            left: 132px;
            top: -35px;
            border: 19px solid;
            border-color: transparent transparent white transparent;
        }

        div.speechTopRight {
            position: relative;
            font-size:large;
            width: 300px;
            text-align: left;
            background-color: white;
            border: solid ;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            -webkit-box-shadow: 2px 2px 4px #888;
            -moz-box-shadow: 2px 2px 4px #888;
            box-shadow: 2px 2px 4px #888;
        }
        div.speechTopRight:before {
            content: ' ';
            position: absolute;
            width: 0;
            height: 0;
            right: 20px;
            top: -43px;
            border: 21px solid;
            border-color: transparent transparent black transparent;
        }
        div.speechTopRight:after {
            content: ' ';
            position: absolute;
            width: 0;
            height: 0;
            right: 22px;
            top: -35px;
            border: 19px solid;
            border-color: transparent transparent white transparent;
        }

        div.speechRightTop {
            position: relative;
            font-size:large;
            width: 300px;
            text-align: left;
            background-color: white;
            border: solid ;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            -webkit-box-shadow: 2px 2px 4px #888;
            -moz-box-shadow: 2px 2px 4px #888;
            box-shadow: 2px 2px 4px #888;
        }
        div.speechRightTop:before {
            content: ' ';
            position: absolute;
            width: 0;
            height: 0;
            left: 300px;
            top: 23px;
            border: 21px solid;
            border-color: transparent transparent transparent black;
        }
        div.speechRightTop:after {
            content: ' ';
            position: absolute;
            width: 0;
            height: 0;
            left: 298px;
            top: 25px;
            border: 19px solid;
            border-color: transparent transparent transparent white;
        }

        div.speechRightBottom {
            position: relative;
            font-size:large;
            width: 300px;
            text-align: left;
            background-color: white;
            border: solid ;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            -webkit-box-shadow: 2px 2px 4px #888;
            -moz-box-shadow: 2px 2px 4px #888;
            box-shadow: 2px 2px 4px #888;
        }
        div.speechRightBottom:before {
            content: ' ';
            position: absolute;
            width: 0;
            height: 0;
            left: 300px;
            bottom: 25px;
            border: 21px solid;
            border-color: transparent transparent transparent black;
        }
        div.speechRightBottom:after {
            content: ' ';
            position: absolute;
            width: 0;
            height: 0;
            left: 298px;
            bottom: 27px;
            border: 19px solid;
            border-color: transparent transparent transparent white;
        }

        div.speechBottomRight {
            position: relative;
            font-size:large;
            width: 300px;
            text-align: left;
            background-color: white;
            border: solid ;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            -webkit-box-shadow: 2px 2px 4px #888;
            -moz-box-shadow: 2px 2px 4px #888;
            box-shadow: 2px 2px 4px #888;
        }
        div.speechBottomRight:before {
            content: ' ';
            position: absolute;
            width: 0;
            height: 0;
            right: 20px;
            bottom: -43px;
            border: 21px solid;
            border-color: black transparent transparent transparent;
        }
        div.speechBottomRight:after {
            content: ' ';
            position: absolute;
            width: 0;
            height: 0;
            right: 22px;
            bottom: -35px;
            border: 19px solid;
            border-color: white transparent transparent transparent;
        }

        div.speechBottomCentre {
            position: relative;
            font-size:large;
            width: 300px;
            text-align: left;
            background-color: white;
            border: solid ;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            -webkit-box-shadow: 2px 2px 4px #888;
            -moz-box-shadow: 2px 2px 4px #888;
            box-shadow: 2px 2px 4px #888;
        }
        div.speechBottomCentre:before {
            content: ' ';
            position: absolute;
            width: 0;
            height: 0;
            left: 130px;
            bottom: -43px;
            border: 21px solid;
            border-color: black transparent transparent transparent;
        }
        div.speechBottomCentre:after {
            content: ' ';
            position: absolute;
            width: 0;
            height: 0;
            left: 132px;
            bottom: -35px;
            border: 19px solid;
            border-color: white transparent transparent transparent;
        }

        div.speechBottomLeft {
            position: relative;
            font-size:large;
            width: 300px;
            text-align: left;
            background-color: white;
            border: solid ;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            -webkit-box-shadow: 2px 2px 4px #888;
            -moz-box-shadow: 2px 2px 4px #888;
            box-shadow: 2px 2px 4px #888;
        }
        div.speechBottomLeft:before {
            content: ' ';
            position: absolute;
            width: 0;
            height: 0;
            left: 20px;
            bottom: -43px;
            border: 21px solid;
            border-color: black transparent transparent transparent;
        }
        div.speechBottomLeft:after {
            content: ' ';
            position: absolute;
            width: 0;
            height: 0;
            left: 22px;
            bottom: -35px;
            border: 19px solid;
            border-color: white transparent transparent transparent;
        }

        div.speechLeftTop {
            position: relative;
            font-size:large;
            width: 300px;
            text-align: left;
            background-color: white;
            border: solid ;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            -webkit-box-shadow: 2px 2px 4px #888;
            -moz-box-shadow: 2px 2px 4px #888;
            box-shadow: 2px 2px 4px #888;
        }
        div.speechLeftTop:before {
            content: ' ';
            position: absolute;
            width: 0;
            height: 0;
            left: -45px;
            top: 22px;
            border: 21px solid;
            border-color: transparent black transparent transparent;
        }
        div.speechLeftTop:after {
            content: ' ';
            position: absolute;
            width: 0;
            height: 0;
            left: -38px;
            top: 24px;
            border: 19px solid;
            border-color: transparent white transparent transparent;
        }

        div.speechLeftBottom {
            position: relative;
            font-size:large;
            width: 300px;
            text-align: left;
            background-color: white;
            border: solid ;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            -webkit-box-shadow: 2px 2px 4px #888;
            -moz-box-shadow: 2px 2px 4px #888;
            box-shadow: 2px 2px 4px #888;
        }
        div.speechLeftBottom:before {
            content: ' ';
            position: absolute;
            width: 0;
            height: 0;
            left: -45px;
            bottom: 25px;
            border: 21px solid;
            border-color: transparent black transparent transparent;
        }
        div.speechLeftBottom:after {
            content: ' ';
            position: absolute;
            width: 0;
            height: 0;
            left: -38px;
            bottom: 27px;
            border: 19px solid;
            border-color: transparent white transparent transparent;
        }



        .commonButton {
            /* style used for most of the buttons */
            /*CssClass="commonButton"*/ 
            border-style:solid;
            border-color:black;
            border-radius: 8px 8px 8px 8px;
            font-size:14px;
            font-weight:bold;
            height:40px;
            width:150px;
            color:black;
            background-color:white;
        }