/* All form elements are within the definition list for this example */
		dl {
		    font:normal 12px/15px Arial;
		    position: relative;
		    width: 350px;
		}
		dt {
		    clear: both;
		    float:left;
		    width: 130px;
		    padding: 4px 0 2px 0;
		    text-align: left;
		}
		dd {
		    float: left;
		    width: 200px;
		    margin: 0 0 8px 0;
		    padding-left: 6px;
		}
		
		.tdToolTip {
    		float: left;
		    font:normal 12px/15px Arial;
    		position: relative;
		    margin: 0 0 8px 0;
		    padding-left: 6px;
		}

		
		/* The hint to Hide and Show */
		.hint10 {
		   	display: none;
		    position: absolute;
		    right: 90px;
		    width: 200px;
		    margin-top: -4px;
		    border: 1px solid #0F92EE;
		    padding: 10px 12px;
		    color: black;
		    /* to fix IE6, I can't just declare a background-color,
		    I must do a bg image, too!  So I'm duplicating the pointer.gif
		    image, and positioning it so that it doesn't show up
		    within the box */
		    background: #CBD7FE;
		}
		.hint10 .hint-pointer {
		    position: absolute;
		    left: -10px;
		    top: 5px;
		    width: 10px;
		    height: 19px;
		    background: url(../../images/tooltip/pointer.jpg) left top no-repeat;
		}
		.hint1 {
		   	display: none;
		    position: absolute;
		    right: -300px;
		    width: 200px;
		    margin-top: -4px;
		    border: 1px solid #0F92EE;
		    padding: 10px 12px;
		    color: black;
		    /* to fix IE6, I can't just declare a background-color,
		    I must do a bg image, too!  So I'm duplicating the pointer.gif
		    image, and positioning it so that it doesn't show up
		    within the box */
		    background: #CCE0EB;
		}
		.hint1 .hint-pointer {
		    position: absolute;
		    left: -10px;
		    top: 5px;
		    width: 10px;
		    height: 19px;
		    background: url(../../images/tooltip/pointer.jpg) left top no-repeat;
		}
		.hint2 {
		   	display: none;
		    position: absolute;
		    right: -200px;
		    width: 200px;
		    margin-top: -4px;
		    border: 1px solid #0F92EE;
		    padding: 10px 12px;
		    color: black;
		    /* to fix IE6, I can't just declare a background-color,
		    I must do a bg image, too!  So I'm duplicating the pointer.gif
		    image, and positioning it so that it doesn't show up
		    within the box */
		    background: #CCE0EB;
		}
		.hint2 .hint-pointer {
		    position: absolute;
		    left: -10px;
		    top: 5px;
		    width: 10px;
		    height: 19px;
		    background: url(../../images/tooltip/pointer.jpg) left top no-repeat;
		}
		
		.hint3 {
		   	display: none;
		    position: absolute;
		    right: -20px;
		    width: 200px;
		    margin-top: -4px;
		    border: 1px solid #0F92EE;
		    padding: 10px 12px;
		    color: black;
		    /* to fix IE6, I can't just declare a background-color,
		    I must do a bg image, too!  So I'm duplicating the pointer.gif
		    image, and positioning it so that it doesn't show up
		    within the box */
		    background: #CCE0EB;
		}
		.hint3 .hint-pointer {
		    position: absolute;
		    left: -10px;
		    top: 5px;
		    width: 10px;
		    height: 19px;
		    background: url(../../images/tooltip/pointer.jpg) left top no-repeat;
		}
		
		.hint {
		   	display: none;
		    position: absolute;
		    right: -10px;
		    width: 200px;
		    margin-top: -4px;
		    border: 1px solid #0F92EE;
		    padding: 10px 12px;
		    color: black;
		    /* to fix IE6, I can't just declare a background-color,
		    I must do a bg image, too!  So I'm duplicating the pointer.gif
		    image, and positioning it so that it doesn't show up
		    within the box */
		    background: #CBD7FE;
		}
		
		/* The pointer image is hadded by using another span */
		.hint .hint-pointer {
		    position: absolute;
		    left: -10px;
		    top: 5px;
		    width: 10px;
		    height: 19px;
		    background: url(../../images/tooltip/pointer.jpg) left top no-repeat;
		}
		
		/* The hint to Hide and Show */
		.hintSelect {
		   	display: none;
		    position: absolute;
		    left: 675px;
		    width: 200px;
		    margin-top: -4px;
		    border: 1px solid #0F92EE;
		    padding: 10px 12px;
		    color: black;
		    /* to fix IE6, I can't just declare a background-color,
		    I must do a bg image, too!  So I'm duplicating the pointer.gif
		    image, and positioning it so that it doesn't show up
		    within the box */
		    background: #CBD7FE;
		}
		
		
		/* The pointer image is hadded by using another span */
		.hintSelect .hint-pointerSelect {
		    position: absolute;
		    left: -10px;
		    top: 5px;
		    width: 10px;
		    height: 19px;
		    background: url(../../images/tooltip/pointer.jpg) left top no-repeat;
		}