<style type="text/css">

/* Terence Ordona, portal[AT]imaputz[DOT]com     */
/* http://creativecommons.org/licenses/by-sa/2.0/  */
/* begin some basic styling here              */
body {
   background: #FFF;
   color: #000;
   font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
   margin: 0px;
   padding: 0
}
table, td, a {
   color: #000;
   font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
}
h1 {
   font: normal normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
   margin: 0 0 0px 0
}
h2 {
   font: normal normal 16px Verdana, Geneva, Arial, Helvetica, sans-serif;
   margin: 0 0 px 0
}
h3 {
   font: normal normal 13px Verdana, Geneva, Arial, Helvetica, sans-serif;
   color: #008000;
   margin: 0 0 0px 0
}
/* end basic styling                       */
/* define height and width of scrollable area. Add 16px to width for scrollbar        */
div.tableContainer {
   clear: both;
   overflow-x:hidden;
   /*border: 1px solid #963;*/
   height: 200px;
   overflow: auto;
   width: 201px
}
/* Reset overflow value to hidden for all non-IE browsers. */
html>body div.tableContainer {
   overflow: hidden;
   width: 201px
}
/* define width of table. IE browsers only             */
div.tableContainer table {
   float: left;
   width: 201px
}
/* define width of table. Add 16px to width for scrollbar.        */
/* All other non-IE browsers.                            */
html>body div.tableContainer table {
   width: 201px
}
/* set table header to a fixed position. WinIE 6.x only                             */
/* In WinIE 6.x, any element with a position property set to relative and is a child of      */
/* an element that has an overflow property set, the relative value translates into fixed.   */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
thead.fixedHeader tr {
   position: relative
}
/* set THEAD element to have block level attributes. All other non-IE browsers         */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
html>body thead.fixedHeader tr {
   display: block
}
/* make the TH elements pretty */
thead.fixedHeader th {
   background: #343434;
   border-left: 0px solid #EB8;
   border-right: 0px solid #B74;
   border-top: 0px solid #EB8;
   font-weight: normal;
   padding: 0px 0px;
   text-align: left
}
/* make the A elements pretty. makes for nice clickable headers            */
thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
   color: #FFF;
   display: block;
   text-decoration: none;
   width: 201px
}
/* make the A elements pretty. makes for nice clickable headers            */
/* WARNING: swapping the background on hover may cause problems in WinIE 6.x   */
thead.fixedHeader a:hover {
   color: #FFF;
   display: block;
   text-decoration: underline;
   width: 201px
}
/* define the table content to be scrollable                                 */
/* set TBODY element to have block level attributes. All other non-IE browsers         */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* induced side effect is that child TDs no longer accept width: auto                */
html>body tbody.scrollContent {
   display: block;
   height: 200px;
   overflow: auto;
   width: 201px;
   scrollbar-face-color:#67a92d;
   scrollbar-shadow-color: #d8f22d;
   scrollbar-highlight-color: #d8f22d;
   scrollbar-3dlight-color: #d8f22d;
   scrollbar-darkshadow-color: #d8f22d;
   scrollbar-track-color:#d8f22d;
   scrollbar-arrow-color: #d8f22d;

}
/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/                    */
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
   background: #d8f22d;
   border-bottom: none;
   border-left: none;
   border-right: 0px solid #CCC;
   border-top: 0px solid #DDD;
   padding: 0px 0px 0px 0px
}
tbody.scrollContent tr.alternateRow td {
   background: #EEE;
   border-bottom: none;
   border-left: none;
   border-right: 0px solid #CCC;
   border-top: 0px solid #DDD;
   padding: 0px 0px 0px 0px
}
/* define width of TH elements: 1st, 2nd, and 3rd respectively.        */
/* Add 16px to last TH for scrollbar padding. All other non-IE browsers. */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors    */
html>body thead.fixedHeader th {
   width: 260px
}
html>body thead.fixedHeader th + th {
   width: 260px
}
html>body thead.fixedHeader th + th + th {
   width: 260px
}
/* define width of TD elements: 1st, 2nd, and 3rd respectively.        */
/* All other non-IE browsers.                               */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors    */
html>body tbody.scrollContent td {
   width: 260px
}
html>body tbody.scrollContent td + td {
   width: 260px
}
html>body tbody.scrollContent td + td + td {
   width: 260px
}


div.tableContainer1 {
   clear: both;
   overflow-x:hidden;
   /*border: 1px solid #963;*/
   height: 200px;
   overflow: auto;
   width: 202px;

}
/* Reset overflow value to hidden for all non-IE browsers. */
html>body div.tableContainer1 {
   overflow: hidden;
   width: 202px
}
/* define width of table. IE browsers only             */
div.tableContainer1 table {
   float: left;
   width: 202px
}
/* define width of table. Add 16px to width for scrollbar.        */
/* All other non-IE browsers.                            */
html>body div.tableContainer1 table {
   width: 202px
}
html>body tbody.scrollContent1 td {
   width: 190px
}
html>body tbody.scrollContent1 td + td {
   width: 190px
}
html>body tbody.scrollContent1 td + td + td {
   width: 190px
}
html>body tbody.scrollContent1 {
   display: block;
   height: 200px;
   overflow: auto;
   width: 202px;

}
/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/                    */
tbody.scrollContent1 td, tbody.scrollContent tr.normalRow td {
   background: none;
   border-bottom: none;
   border-left: none;
   border-right: 0px solid #CCC;
   border-top: 0px solid #DDD;
   padding: 2px 3px 3px 4px
}
tbody.scrollContent1 tr.alternateRow td {
   background: #EEE;
   border-bottom: none;
   border-left: none;
   border-right: 1px solid #CCC;
   border-top: 1px solid #DDD;
   padding: 2px 3px 3px 4px
}



div.tableContainer10 {
   clear: both;
   overflow-x:hidden;
   /*border: 1px solid #963;*/
   height: 100px;
   overflow: auto;
   width: 159px;

}
/* Reset overflow value to hidden for all non-IE browsers. */
html>body div.tableContainer10 {
   overflow: hidden;
   width: 159px
}
/* define width of table. IE browsers only             */
div.tableContainer10 table {
   float: left;
   width: 159px
}
/* define width of table. Add 16px to width for scrollbar.        */
/* All other non-IE browsers.                            */
html>body div.tableContainer10 table {
   width: 159px
}
html>body tbody.scrollContent10 td {
   width: 150px
}
html>body tbody.scrollContent10 td + td {
   width: 150px
}
html>body tbody.scrollContent10 td + td + td {
   width: 150px
}
html>body tbody.scrollContent10 {
   display: block;
    height: 100px;
   overflow: auto;
   width: 150px;

}
/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/                    */
tbody.scrollContent10 td, tbody.scrollContent tr.normalRow td {
   background: none;
   border-bottom: none;
   border-left: none;
   border-right: 0px solid #CCC;
   border-top: 0px solid #DDD;
   padding: 2px 3px 3px 4px
}
tbody.scrollContent10 tr.alternateRow td {
   background: #EEE;
   border-bottom: none;
   border-left: none;
   border-right: 1px solid #CCC;
   border-top: 1px solid #DDD;
   padding: 2px 3px 3px 4px
}




div.tableContainer101 {
   clear: both;
   overflow-x:hidden;
   /*border: 1px solid #963;*/
   height: 545px;
   overflow: auto;
   width: 500px;

}
/* Reset overflow value to hidden for all non-IE browsers. */
html>body div.tableContainer101 {
   overflow: hidden;
   width: 500px
}
/* define width of table. IE browsers only             */
div.tableContainer101 table {
   float: left;
   width: 500px
}
/* define width of table. Add 16px to width for scrollbar.        */
/* All other non-IE browsers.                            */
html>body div.tableContainer101 table {
   width: 500px
}
html>body tbody.scrollContent101 td {
   width: 500px
}
html>body tbody.scrollContent101 td + td {
   width: 500px
}
html>body tbody.scrollContent101 td + td + td {
   width: 500px
}
html>body tbody.scrollContent101 {
   display: block;
   height: 545px;
   overflow: auto;
   width: 495px;

}
/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/                    */
tbody.scrollContent101 td, tbody.scrollContent tr.normalRow td {
   background: none;
   border-bottom: none;
   border-left: none;
   border-right: 0px solid #CCC;
   border-top: 0px solid #DDD;
   padding: 2px 3px 3px 4px
}
tbody.scrollContent101 tr.alternateRow td {
   background: #EEE;
   border-bottom: none;
   border-left: none;
   border-right: 1px solid #CCC;
   border-top: 1px solid #DDD;
   padding: 2px 3px 3px 4px
}




div.tableContainer1012 {
   clear: both;
   overflow-x:hidden;
   /*border: 1px solid #963;*/
   height: 160px;
   overflow: auto;
   width: 215px;

}
/* Reset overflow value to hidden for all non-IE browsers. */
html>body div.tableContainer1012{
   overflow: hidden;
   width: 215px
}
/* define width of table. IE browsers only             */
div.tableContainer1012 table {
   float: left;
   width: 215px
}
/* define width of table. Add 16px to width for scrollbar.        */
/* All other non-IE browsers.                            */
html>body div.tableContainer1012 table {
   width: 215px
}
html>body tbody.scrollContent1012 td {
   width: 215px
}
html>body tbody.scrollContent1012 td + td {
   width: 215px
}
html>body tbody.scrollContent1012 td + td + td {
   width: 190px
}
html>body tbody.scrollContent1012 {
   display: block;
   height: 160px;
   overflow: auto;
   width: 190px;

}
/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/                    */
tbody.scrollContent1012 td, tbody.scrollContent tr.normalRow td {
   background: none;
   border-bottom: none;
   border-left: none;
   border-right: 0px solid #CCC;
   border-top: 0px solid #DDD;
   padding: 2px 3px 3px 4px
}
tbody.scrollContent1012 tr.alternateRow td {
   background: #EEE;
   border-bottom: none;
   border-left: none;
   border-right: 1px solid #CCC;
   border-top: 1px solid #DDD;
   padding: 2px 3px 3px 4px
}





div.tableContainer10121 {
   clear: both;
   overflow-x:hidden;
   /*border: 1px solid #963;*/
   height: 450px;
   overflow: auto;
   width: 700px;

}
/* Reset overflow value to hidden for all non-IE browsers. */
html>body div.tableContainer10121{
   overflow: hidden;
   width: 700px
}
/* define width of table. IE browsers only             */
div.tableContainer10121 table {
   float: left;
   width: 700px
}
/* define width of table. Add 16px to width for scrollbar.        */
/* All other non-IE browsers.                            */
html>body div.tableContainer10121 table {
   width: 700px
}
html>body tbody.scrollContent10121 td {
   width: 700px
}
html>body tbody.scrollContent10121 td + td {
   width: 700px
}
html>body tbody.scrollContent10121 td + td + td {
   width: 700px
}
html>body tbody.scrollContent10121 {
   display: block;
   height: 450px;
   overflow: auto;
   width: 690px

}
/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/                    */
tbody.scrollContent10121 td, tbody.scrollContent tr.normalRow td {
   background: none;
   border-bottom: none;
   border-left: none;
   border-right: 0px solid #CCC;
   border-top: 0px solid #DDD;
   padding: 2px 3px 3px 4px
}
tbody.scrollContent10121 tr.alternateRow td {
   background: #EEE;
   border-bottom: none;
   border-left: none;
   border-right: 1px solid #CCC;
   border-top: 1px solid #DDD;
   padding: 2px 3px 3px 4px
}



div.tableContainer2 {
   clear: both;
   overflow-x:hidden;
   /*border: 1px solid #963;*/
   height: 310px;
   overflow: auto;
   width: 403px;

}
/* Reset overflow value to hidden for all non-IE browsers. */
html>body div.tableContainer2{
   overflow: hidden;
   width: 403px
}
/* define width of table. IE browsers only             */
div.tableContainer2 table {
   float: left;
   width: 403px
}
/* define width of table. Add 16px to width for scrollbar.        */
/* All other non-IE browsers.                            */
html>body div.tableContainer2 table {
   width: 403px
}
html>body tbody.scrollContent2 td {
   width: 403px
}
html>body tbody.scrollContent2 td + td {
   width: 403px
}
html>body tbody.scrollContent2 td + td + td {
   width: 403px
}
html>body tbody.scrollContent2 {
   display: block;
   height: 310px;
   overflow: auto;
   width: 400px
   scrollbar-face-color:#67a92d;
   scrollbar-shadow-color: #d8f22d;
   scrollbar-highlight-color: #d8f22d;
   scrollbar-3dlight-color: #d8f22d;
   scrollbar-darkshadow-color: #d8f22d;
   scrollbar-track-color:#d8f22d;
   scrollbar-arrow-color: #d8f22d;
}
/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/                    */
tbody.scrollContent2 td, tbody.scrollContent tr.normalRow td {

   border-bottom: none;
   border-left: none;
   border-right: 0px solid #CCC;
   border-top: 0px solid #DDD;
   padding: 0px 0px 0px 0px
}
tbody.scrollContent2 tr.alternateRow td {
   background: #EEE;
   border-bottom: none;
   border-left: none;
   border-right: 0px solid #CCC;
   border-top: 0px solid #DDD;
   padding: 0px 0px 0px 0px
}


div.tableContainer21 {
   clear: both;
   overflow-x:hidden;
   /*border: 1px solid #963;*/
   height: 55px;
   overflow: auto;
   width: 400px;

}
/* Reset overflow value to hidden for all non-IE browsers. */
html>body div.tableContainer21 {
   overflow: hidden;
   width: 400px
}
/* define width of table. IE browsers only             */
div.tableContainer21 table {
   float: left;
   width: 380px
}
/* define width of table. Add 16px to width for scrollbar.        */
/* All other non-IE browsers.                            */
html>body div.tableContainer21 table {
   width: 380px
}
html>body tbody.scrollContent21 td {
   width: 380px
}
html>body tbody.scrollContent21 td + td {
   width: 380px
}
html>body tbody.scrollContent21 td + td + td {
   width: 380px
}
html>body tbody.scrollContent21 {
   display: block;
    height: 55px;
   overflow: auto;
   width: 380px;

}
/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/                    */
tbody.scrollContent21 td, tbody.scrollContent tr.normalRow td {
   background: none;
   border-bottom: none;
   border-left: none;
   border-right: 0px solid #CCC;
   border-top: 0px solid #DDD;
   padding: 2px 3px 3px 4px
}
tbody.scrollContent21 tr.alternateRow td {
   background: #EEE;
   border-bottom: none;
   border-left: none;
   border-right: 1px solid #CCC;
   border-top: 1px solid #DDD;
   padding: 2px 3px 3px 4px
}

</style>

