css

/*  -----------------  Main ------------------------ */
*
{
 font-family: Arial, Verdana, Helvetica, sans-serif;
 font-size: 12.5px; 
}

body {
 font-family: Arial, Verdana, Helvetica, sans-serif;
 font-size: 12px;
 color:#000000;
 background-color: #FFFFFF;
 margin: 0px;
 padding: 0px;
 position:relative;
 min-height:100%; /* For Modern Browsers */
 height:auto !important; /* For Modern Browsers */
 height: 100%;
}

#head
{
  100%;
 background: #637DBC url("../images/Top_left.gif") no-repeat top left;
 height: 60px;
 position: absolute;
 top: 0;
 text-align:center;
}

#head_height
{
 height: 60px;
}

#head_content
{
  100%;
 height: 60px;
}

#middle
{
 margin: 0px;
 vertical-align: top;
 background: url("../images/Main_bg.gif") repeat-x;
 background-position: top 1px;
}

#middle_content
{
 padding: 8px 8px 0px 8px;
}

#Main
{
 background: url("../images/F4F4F4.gif") repeat-x top;
 padding: 5px 0px 0px 0px;
}

#foot
{
 100%;
 text-align:center;
 background: #637DBC url("../images/Bottom.gif") no-repeat right;
 height: 20px;
 position:absolute;
 bottom: 0px;
 color: #FFFFFF;
}
#foot span
{
 font-size: 10px;
}

* html #foot
{
 bottom:-1px;
}

#foot_height
{
 height: 20px;
}

.Top_left
{
 background: url("../images/Top_left.gif") no-repeat top left;
  239px;
 height: 60px;
}

.Top_top
{
 height: 30px;
}

.Top_right
{
 background: url("../images/Top_right.gif") no-repeat top right;
  100%;
 height: 60px;
 text-align: right;
}

#divRT
{
 height: 38px;
}
#divMenu
{
 height: 22px;
}
.Menu_left
{
 background: url("../images/Menu_left.gif") no-repeat right;
  100%;
}

A:link, A:visited
{
 color: #000000;
 text-decoration: none;
}

A:hover, A:active
{
 color: #07384A;
 text-decoration: underline;
}

/*  -----------------  Header ------------------------ */

.menu a
{
 color: #07384A;
}

.DHoverStyle
{
 background: #777 url("../images/Menu_arrow2.gif") no-repeat left !important;
 padding: 2px 6px 1px 6px;
}
.DMenuItemStyle a:link
{
 background: none !important;
 color: #07384A;
 text-decoration: none;
}
.DMenuItemStyle a:visited
{
 background: none !important;
 color: #07384A;
 text-decoration: none;
}
.DMenuItemStyle a:hover
{
 background: none !important;
 color: #EEE;
 text-decoration: none;
}
.DMenuItemStyle a:active
{
 background: none !important;
 color: #EEE;
 text-decoration: none;
}
.DMenuItemStyle
{
 border: 0px;
 border-right: 1px solid #EEE;
 border-bottom: 0px;
 border-left: 3px solid #FED016;
 padding: 2px 6px 1px 6px;
 text-align: left;
 background: url("../images/EEE.gif") repeat-x bottom;
}
.DMenuStyle
{
 background: none;
}
.SMenuStyle
{
 background: url("../images/Menu_bg.gif") repeat-x;
 height: 21px;
}
.SMenuItemStyle
{
 padding: 0px 8px 0px 8px;
 background: Transparent url("../images/sep.gif") no-repeat right;
}
.SMenuItemStyle a
{
 background: none;
}
.SHoverStyle
{
 background: url("../images/Menu_arrow.gif") no-repeat right;
}

/*  ----------------- Datagrid & Table ------------------------ */

.DataGrid
{
  100%;
 border: 0px;
 border-top: 1px solid #DBD7CF;
 border-left: 1px solid #DBD7CF;
}

.DataGrid td
{
 border: 0px;
 border-right: 1px solid #DBD7CF;
 border-bottom: 1px solid #DBD7CF;
 padding: 0px 2px 0px 2px;
}

.DataGrid td td
{
 border: 0px;
}

.hs
{
 color: #FF5500;
 height: 21px;
 background: url("../images/Title_bg.gif") repeat-x top;
 text-align: left;
 white-space: nowrap;
 font-weight: 300;
}

.hs a:link,.hs a:visited
{
 color: #FF5500;
 white-space: nowrap;
 text-decoration: none;
}

.hs a:hover, .hs a:active
{
 color: #1843C3;
 text-decoration: underline;
}

.hs td
{
 white-space: nowrap;
 padding: 0px 2px 0px 2px;
}

.hs2 td
{
 white-space: nowrap;
 color: #FF5500;
 padding: 5px 2px 0px 2px;
 background: url(../images/Title_bg2.gif) repeat;
}

.hs2_bg
{
 white-space: nowrap;
 color: #0A526E;
 background: url(../images/Title_bg2.gif) repeat;
}

.hs2_bg td
{
 white-space: nowrap;
}

.is
{
 height: 19px;
 text-align: left;
 white-space: nowrap;
}

.is td a:link, .is td a:visited, .ais td a:link, .ais td a:visited
{
 color: #3264B2;
 text-decoration: underline;
}

.is td a:hover, .is td a:active, .ais td a:hover, .ais td a:active
{
 color: #FF7700;
 text-decoration: none;
}

.ais
{
 height: 19px;
 text-align: left;
}

.sis
{
 height: 19px;
 background-color: #FEFFD3;
 text-align: left;
}

.fs
{
 color: #000066;
}

.Table
{
 border: 0px;
 border-top: 1px solid #F0F0F0;
 border-left: 1px solid #F0F0F0;
}

.Table td
{
 border: 0px;
 border-right: 1px solid #F0F0F0;
 border-bottom: 1px solid #F0F0F0;
 padding: 3px 2px 1px 2px;
}

.Table2
{
 border: 0px;
 border-top: 1px solid #DDDDDD;
 border-left: 1px solid #DDDDDD;
}

.Table2 td
{
 border: 0px;
 border-right: 1px solid #DDDDDD;
 border-bottom: 1px solid #DDDDDD;
 padding: 3px 2px 0px 2px;
}

.Table2_td
{
 white-space: nowrap;
 background-color: #F4F4F4;
}

.Table td td,.Table2 td td
{
 border: 0px;
}

/*  ----------------- input button forms ------------------------ */
/*
input
{
  star: expression(
 onmouseover=function()
  {this.style.backgroundColor="#EEEEEE",
  this.style.border="1px",
  this.style.borderStyle="solid",
  this.style.borderColor="#999999"},
 onmouseout=function()
  {this.style.backgroundColor="#FFFFFF",
  this.style.border="1px",
  this.style.borderStyle="solid",
  this.style.borderColor="#FFFFFF"})
}
*/

input
{
 padding: 0px 0px 0px 3px;
}

.Select
{
 background-color: #F3F3F3;
}

label input
{
 14px;
 height:14px;
 border:0;
} /*For input type is Radio*/

.btnSave
{
 behavior: url(../Javascript/input.htc);
 XbackgroundImage: url(../images/Save.gif);
 XbackgroundRepeat: no-repeat;
 XbackgroundPosition: left;
 XbackgroundColor: #FFFFFF;
 RXbackgroundColor: #F2F2F2;
 padding: 2px 0px 0px 20px;
 cursor: pointer;
 text-align: left;
 height: 21px;
 RXborderWidth: 1px;
 RXborderStyle: solid;
 RXborderColor: #DDDDDD;
 OXborderWidth: 1px;
 OXborderStyle: solid;
 OXborderColor: #000000;
 background: #F2F2F2 url(../images/Save.gif) no-repeat left;
 border: 1px solid #DDDDDD;
 RXcolor: #000000;
 OXcolor: #F4793B;
}

.btnNew
{
 behavior: url(../Javascript/input.htc);
 XbackgroundImage: url(../images/New.gif);
 XbackgroundRepeat: no-repeat;
 XbackgroundPosition: left;
 XbackgroundColor: #FFFFFF;
 RXbackgroundColor: #F2F2F2;
 padding: 2px 0px 0px 20px;
 cursor: pointer;
 text-align: left;
 height: 21px;
 RXborderWidth: 1px;
 RXborderStyle: solid;
 RXborderColor: #DDDDDD;
 OXborderWidth: 1px;
 OXborderStyle: solid;
 OXborderColor: #000000;
 background: #F2F2F2 url(../images/New.gif) no-repeat left;
 border: 1px solid #DDDDDD;
 RXcolor: #000000;
 OXcolor: #F4793B;
}

.btnEdit
{
 behavior: url(../Javascript/input.htc);
 XbackgroundImage: url(../images/Modify.gif);
 XbackgroundRepeat: no-repeat;
 XbackgroundPosition: left;
 XbackgroundColor: #FFFFFF;
 RXbackgroundColor: #F2F2F2;
 padding: 2px 0px 0px 20px;
 cursor: pointer;
 text-align: left;
 height: 21px;
 RXborderWidth: 1px;
 RXborderStyle: solid;
 RXborderColor: #DDDDDD;
 OXborderWidth: 1px;
 OXborderStyle: solid;
 OXborderColor: #000000;
 background: #F2F2F2 url(../images/Modify.gif) no-repeat left;
 border: 1px solid #DDDDDD;
 RXcolor: #000000;
 OXcolor: #F4793B;
}

.btnDel
{
 behavior: url(../Javascript/input.htc);
 XbackgroundImage: url(../images/Del.gif);
 XbackgroundRepeat: no-repeat;
 XbackgroundPosition: left;
 XbackgroundColor: #FFFFFF;
 RXbackgroundColor: #F2F2F2;
 padding: 2px 0px 0px 20px;
 cursor: pointer;
 text-align: left;
 height: 21px;
 RXborderWidth: 1px;
 RXborderStyle: solid;
 RXborderColor: #DDDDDD;
 OXborderWidth: 1px;
 OXborderStyle: solid;
 OXborderColor: #000000;
 background: #F2F2F2 url(../images/Del.gif) no-repeat left;
 border: 1px solid #DDDDDD;
 RXcolor: #000000;
 OXcolor: #F4793B;
}

.btnBack
{
 behavior: url(../Javascript/input.htc);
 XbackgroundImage: url(../images/Back.gif);
 XbackgroundRepeat: no-repeat;
 XbackgroundPosition: left;
 XbackgroundColor: #FFFFFF;
 RXbackgroundColor: #F2F2F2;
 padding: 2px 0px 0px 20px;
 cursor: pointer;
 text-align: left;
 height: 21px;
 RXborderWidth: 1px;
 RXborderStyle: solid;
 RXborderColor: #DDDDDD;
 OXborderWidth: 1px;
 OXborderStyle: solid;
 OXborderColor: #000000;
 background: #F2F2F2 url(../images/Back.gif) no-repeat left;
 border: 1px solid #DDDDDD;
 RXcolor: #000000;
 OXcolor: #F4793B;
}

.btnSearch
{
 behavior: url(../Javascript/input.htc);
 XbackgroundImage: url(../images/Search.gif);
 XbackgroundRepeat: no-repeat;
 XbackgroundPosition: left;
 XbackgroundColor: #FFFFFF;
 RXbackgroundColor: #F2F2F2;
 padding: 2px 0px 0px 20px;
 cursor: pointer;
 text-align: left;
 height: 21px;
 RXborderWidth: 1px;
 RXborderStyle: solid;
 RXborderColor: #DDDDDD;
 OXborderWidth: 1px;
 OXborderStyle: solid;
 OXborderColor: #000000;
 background: #F2F2F2 url(../images/Search.gif) no-repeat left;
 border: 1px solid #DDDDDD;
 RXcolor: #000000;
 OXcolor: #F4793B;
}

.btnRole
{
 behavior: url(../Javascript/input.htc);
 XbackgroundImage: url(../images/Role.gif);
 XbackgroundRepeat: no-repeat;
 XbackgroundPosition: left;
 XbackgroundColor: #FFFFFF;
 RXbackgroundColor: #F2F2F2;
 padding: 2px 0px 0px 20px;
 cursor: pointer;
 text-align: left;
 height: 21px;
 RXborderWidth: 1px;
 RXborderStyle: solid;
 RXborderColor: #DDDDDD;
 OXborderWidth: 1px;
 OXborderStyle: solid;
 OXborderColor: #000000;
 background: #F2F2F2 url(../images/Role.gif) no-repeat left;
 border: 1px solid #DDDDDD;
 RXcolor: #000000;
 OXcolor: #F4793B;
}

.btnDept
{
 behavior: url(../Javascript/input.htc);
 XbackgroundImage: url(../images/Dept.gif);
 XbackgroundRepeat: no-repeat;
 XbackgroundPosition: left;
 XbackgroundColor: #FFFFFF;
 RXbackgroundColor: #F2F2F2;
 padding: 2px 0px 0px 20px;
 cursor: pointer;
 text-align: left;
 height: 21px;
 RXborderWidth: 1px;
 RXborderStyle: solid;
 RXborderColor: #DDDDDD;
 OXborderWidth: 1px;
 OXborderStyle: solid;
 OXborderColor: #000000;
 background: #F2F2F2 url(../images/Dept.gif) no-repeat left;
 border: 1px solid #DDDDDD;
 RXcolor: #000000;
 OXcolor: #F4793B;
}

.btnPermission
{
 behavior: url(../Javascript/input.htc);
 XbackgroundImage: url(../images/Permission.gif);
 XbackgroundRepeat: no-repeat;
 XbackgroundPosition: left;
 XbackgroundColor: #FFFFFF;
 RXbackgroundColor: #F2F2F2;
 padding: 2px 0px 0px 20px;
 cursor: pointer;
 text-align: left;
 height: 21px;
 RXborderWidth: 1px;
 RXborderStyle: solid;
 RXborderColor: #DDDDDD;
 OXborderWidth: 1px;
 OXborderStyle: solid;
 OXborderColor: #000000;
 background: #F2F2F2 url(../images/Permission.gif) no-repeat left;
 border: 1px solid #DDDDDD;
 RXcolor: #000000;
 OXcolor: #F4793B;
}

.btnReset
{
 behavior: url(../Javascript/input.htc);
 XbackgroundImage: url(../images/Reset.gif);
 XbackgroundRepeat: no-repeat;
 XbackgroundPosition: left;
 XbackgroundColor: #FFFFFF;
 RXbackgroundColor: #F2F2F2;
 padding: 2px 0px 0px 20px;
 cursor: pointer;
 text-align: left;
 height: 21px;
 RXborderWidth: 1px;
 RXborderStyle: solid;
 RXborderColor: #DDDDDD;
 OXborderWidth: 1px;
 OXborderStyle: solid;
 OXborderColor: #000000;
 background: #F2F2F2 url(../images/Reset.gif) no-repeat left;
 border: 1px solid #DDDDDD;
 RXcolor: #000000;
 OXcolor: #F4793B;
}

.btnExport
{
 behavior: url(../Javascript/input.htc);
 XbackgroundImage: url(../images/excel.gif);
 XbackgroundRepeat: no-repeat;
 XbackgroundPosition: left;
 XbackgroundColor: #FFFFFF;
 RXbackgroundColor: #F2F2F2;
 padding: 2px 0px 0px 20px;
 cursor: pointer;
 text-align: left;
 height: 21px;
 RXborderWidth: 1px;
 RXborderStyle: solid;
 RXborderColor: #DDDDDD;
 OXborderWidth: 1px;
 OXborderStyle: solid;
 OXborderColor: #000000;
 background: #F2F2F2 url(../images/excel.gif) no-repeat left;
 border: 1px solid #DDDDDD;
 RXcolor: #000000;
 OXcolor: #F4793B;
}

.btnPreDay
{
 behavior: url(../Javascript/input.htc);
 XbackgroundImage: url(../images/ArrowLeft.gif);
 XbackgroundRepeat: no-repeat;
 XbackgroundPosition: left;
 XbackgroundColor: #FFFFFF;
 RXbackgroundColor: #F2F2F2;
 padding: 2px 0px 0px 12px;
 cursor: pointer;
 text-align: left;
 height: 21px;
 RXborderWidth: 1px;
 RXborderStyle: solid;
 RXborderColor: #DDDDDD;
 OXborderWidth: 1px;
 OXborderStyle: solid;
 OXborderColor: #000000;
 background: #F2F2F2 url(../images/ArrowLeft.gif) no-repeat left;
 border: 1px solid #DDDDDD;
 RXcolor: #000000;
 OXcolor: #F4793B;
}

.btnNextDay
{
 behavior: url(../Javascript/input.htc);
 XbackgroundImage: url(../images/ArrowRight.gif);
 XbackgroundRepeat: no-repeat;
 XbackgroundPosition: left;
 XbackgroundColor: #FFFFFF;
 RXbackgroundColor: #F2F2F2;
 padding: 2px 0px 0px 12px;
 cursor: pointer;
 text-align: left;
 height: 21px;
 RXborderWidth: 1px;
 RXborderStyle: solid;
 RXborderColor: #DDDDDD;
 OXborderWidth: 1px;
 OXborderStyle: solid;
 OXborderColor: #000000;
 background: #F2F2F2 url(../images/ArrowRight.gif) no-repeat left;
 border: 1px solid #DDDDDD;
 RXcolor: #000000;
 OXcolor: #F4793B;
}

.btnEdit2
{
 background: url(../images/Modify2.gif) no-repeat left;
 padding: 2px 0px 0px 15px;
 border: 0px;
 cursor: pointer;
}

.btnSearch2
{
 background: url(../images/Search2.gif) no-repeat left;
 padding: 2px 0px 0px 16px;
 border: 0px;
 cursor: pointer;
}

hr
{
 height: 1px;
 color: #f7f7f7;
}

.btnGo
{
 background: url(../images/go.gif) no-repeat;
 height: 17px;
  27px;
 border: 0px;
 cursor: pointer;
}

.btnAttachment
{
 background: url(../images/Attachment.gif) no-repeat left;
 border: 0px;
 cursor: pointer;
  16px;
 height: 16px;
}

A.btnAttachment2
{
 background: url(../images/Attachment.gif) no-repeat left;
 border: 0px;
 cursor: pointer;
  16px;
 height: 16px;
 padding: 0px 0px 0px 16px;
 color: #637DBC;
 text-transform: capitalize;
}

.inputID
{
 text-transform: capitalize;
}

/*  ----------------- Font字體  ------------------------ */

.wrap
{
 white-space: nowrap;
}

.F_error
{
 color: #D24200;
 padding: 0px 8px 0px 16px;
 background: url(../images/Error.gif) no-repeat 0px 2px;
}

.FF4400
{
 color: #FF4400;
}

.bold
{
 font-weight: 800;
}

/*  ----------------- other  ------------------------ */
.AlignRight
{
 text-align: right;
}

.tool
{
 padding: 0px 0px 0px 0px;
}

#divData
{
 padding: 6px 0px 0px 0px;
}

#divGridPage
{
 text-align: right;
}

.paddingT10
{
 padding: 10px 0px 0px 0px;
}

.paddingRL20
{
 padding: 0px 48px 0px 48px;
}

.border1
{
 border: solid 1px #F0F0F0;
 padding: 4px 0px 0px 8px;
 text-align: center;
}

.PL20
{
 padding: 0px 0px 0px 20px;
}