@CHARSET "UTF-8";
/**
 * Browser: IE 6.0, IE 7.0, FireFox 2.0
 * Font-size: 8pt, 10pt
 * Using following template to display.
 * Module1: only for block element.
 * <table cellpadding="0" cellspacing="0" class="butt4">
 * 	<tr>
 * 		<td class="butt4_lbg"></td>
 * 		<td class="butt4_cbg"><a href="javascript:button()">button value</a></td>
 * 		<td class="butt4_rbg"></td>
 * 	</tr>
 * </table>
 * 
 * If two buttons, such as "save", "cancel"
 * <table cellpadding="0" cellspacing="0" class="butt4">
 * 	<tr>
 * 		<td class="butt4_lbg"></td><td class="butt4_cbg"><a href="javascript:save()">save</a></html:link></td><td class="butt4_rbg"></td>
 * 		<td class="butt4_lbg"></td><td class="butt4_cbg"><a href="javascript:cancel()">cancel</a></td><td class="butt4_rbg"></td>
 * 	</tr>
 * </table>
 * 
 * Module2: only for inline element.
 * <table id="parentTable" width="300">
 *   <tr>
 *     <td width="300"> //NOTE: width must greater than textfield + button width.
 *       <input type="text" id="leftTextField" style="float:left;"/>
 *       <div style="display:inline">
 *         <table cellpadding="0" cellspacing="0" class="butt4">
 *           <tr>
 *             <td class="butt4_lbg"></td>
 *             <td class="butt4_cbg"><a href="javascript:button()">button value</a></td>
 *             <td class="butt4_rbg"></td>
 *           </tr>
 *         </table>
 *       </div>
 *     </td>
 *   </tr>
 * </table>
 * NOTE(IMPORTANT): Module 2 sometimes will need to consider which browser. 
 * Using the following code to get browser index.
 * <%
 *	String ua = request.getHeader("User-Agent");
 *	if (ua != null) {
 *		if (ua.indexOf("MSIE 6.0") != -1) {
 *			ua = "style=\"line-height:20px\"";
 *		} else if (ua.indexOf("Firefox/") != -1) {
 *			ua = "";
 *		} else {
 *			ua = "";
 *		}
 *	}
 *	%>
 * <div style="display:inline">
 *   <table cellpadding="0" cellspacing="0" class="butt4">
 *     <tr>
 *       <td class="butt4_lbg"></td>
 *       <td class="butt4_cbg" <%= ua %>><a href="javascript:button()">button value</a></td>
 *       <td class="butt4_rbg"></td>
 *     </tr>
 *   </table>
 * </div>
 *
 *
**/
/** ======================== Single Button Style ======================== **/
.butt4_lbg{ /* lbg = left background image */
	background:transparent url("../image/btn/1_bg_classic.gif") no-repeat left 0px;
	width:3px;
	height:24px;
	white-space:nowrap;
}
.butt4_cbg{ /* cbg = center background image */
	background:transparent url("../image/btn/2_bg_classic.gif") repeat-x left 0px;
	vertical-align:middle;
	white-space:nowrap;
}
.butt4_rbg{ /* rbg = right background image */
	background:transparent url("../image/btn/3_bg_classic.gif") no-repeat left 0px;
	width:3px;
	height:24px;
	white-space:nowrap;
	padding-right:8px;
}
.butt4 a{
	padding-left:6px;
	padding-right:6px;
	text-decoration:none;
	font-family:"Verdana", "Arial", "Helvetica", "sans-serif";
	font-size:12px;
	font-weight:bold;
	color:#333333;
}



/** ============ Single Button Style (Transparent background) ============== **/
.butt5_lbg{ /* lbg = left background image */
	background:transparent url("../image/btn/1_bg_classic.gif") no-repeat left 0px;
	width:3px;
	height:24px;
	white-space:nowrap;
}
.butt5_cbg{ /* cbg = center background image */
	background:transparent url("../image/btn/2_bg_classic.gif") repeat-x left 0px;
	vertical-align:middle;
	white-space:nowrap;
}
.butt5_rbg{ /* rbg = right background image */
	background:transparent url("../image/btn/3_bg_classic.gif") no-repeat left 0px;
	width:3px;
	height:24px;
	white-space:nowrap;
	padding-right:8px;
}
.butt5 a{
	padding-left:6px;
	padding-right:6px;
	text-decoration:none;
	font-family:"Verdana", "Arial", "Helvetica", "sans-serif";
	font-size:12px;
	font-weight:bold;
	color:#333333;
}