webcit/static/colorpicker.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"><html><head><title>pantsblazing: Web Color Picker</title>
   2
   3         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   4         <meta http-equiv="Content-Language" content="en">
   5         <meta name="description" content="pantsblazing.com | Web Color Picker generates BODY and CSS tags with live preview.">
   6         <meta name="keywords" content="color,web,rgb,hex,hexadecimal,selector,picker">
   7         <meta name="author" content="Nick Grossman - pantsblazing.com">
   8         <LINK REL=StyleSheet HREF="/static/style.css" TYPE="text/css" MEDIA=all>
   9
  10         <script language="JavaScript">
  11         <!--
  12
  13                 function Color(color_code) {
  14                         if (document.getElementById) {
  15
  16                                 var prop = GetSelectedRadio();
  17                                 document.forms.cp[prop].value = color_code;
  18
  19                                 var chip = document.getElementById("chip-" + prop);
  20                                 chip.style.backgroundColor = "#" + color_code;
  21
  22                                 var preview = document.getElementById("preview-" + prop);
  23                                 if(prop == "bg") {
  24                                         preview.style.backgroundColor = "#" + color_code;
  25                                 } else {
  26                                         preview.style.color = "#" + color_code;
  27                                 }
  28
  29                                 var code = document.getElementById("code-" + prop);
  30                                 code.innerHTML = "#" + color_code;
  31
  32                                 RenderTags();
  33
  34                         } else {
  35                                 alert("Sorry, your browser won't run this!");
  36                         }
  37                 }
  38
  39
  40                 function GetSelectedRadio() {
  41                         var ctr;
  42
  43                         for(ctr = 0; ctr <= 4; ctr++) {
  44                                 if(document.forms.cp.ass[ctr].checked) {
  45                                         return(document.forms.cp.ass[ctr].value);
  46                                 }
  47                         }
  48
  49                         return(false);
  50                 }
  51
  52
  53                 function RenderTags() {
  54                         document.forms.cp.body_tag.value =
  55                                 "<BODY "      +
  56                                 "BGCOLOR=\"#" + document.forms.cp.bg.value    + "\" " +
  57                                 "TEXT=\"#"    + document.forms.cp.text.value  + "\" " +
  58                                 "LINK=\"#"    + document.forms.cp.link.value  + "\" " +
  59                                 "ALINK=\"#"   + document.forms.cp.alink.value + "\" " +
  60                                 "VLINK=\"#"   + document.forms.cp.vlink.value + "\"" +
  61                                 ">";
  62
  63                         document.forms.cp.css_tag.value =
  64                                 "<STYLE TYPE=\"text/css\" MEDIA=\"screen\">\n" +
  65                                 "\tBODY      { background-color: #" + document.forms.cp.bg.value    + "; }\n" +
  66                                 "\tP         { color: #"            + document.forms.cp.text.value  + "; }\n" +
  67                                 "\tA         { color: #"            + document.forms.cp.link.value  + "; }\n" +
  68                                 "\tA:active  { color: #"            + document.forms.cp.alink.value + "; }\n" +
  69                                 "\tA:visited { color: #"            + document.forms.cp.vlink.value + "; }\n" +
  70                                 "</STYLE>";
  71                 }
  72
  73         // -->
  74         </script></head>
  75
  76 <body bgcolor="#ffcc66" link="#cc0000" alink="#999999" vlink="#cc0000" onload="RenderTags();">
  77
  78 <form action="#" name="cp">
  79 <input type="hidden" name="bg" value="FFFFFF">
  80 <input type="hidden" name="text" value="000000">
  81 <input type="hidden" name="link" value="FF0000">
  82 <input type="hidden" name="alink" value="FF0000">
  83 <input type="hidden" name="vlink" value="9900CC">
  84
  85 <table border="0" cellpadding="10">
  86 <tbody><tr>
  87         <td colspan="2">
  88                 <table border="0" width="100%" cellpadding="10" cellspacing="0">
  89                 <tbody><tr>
  90                         <td align="center" bgcolor="#ff9933"><span class="head">Web Color Picker</span></td>
  91                 </tr>
  92                 </tbody></table>
  93         </td>
  94 </tr><tr>
  95         <td width="425" valign="top">
  96
  97                 <table border="0" width="100%" cellpadding="3" cellspacing="0">
  98                 <tbody><tr>
  99                         <td align="center" bgcolor="#ffccff"><span class="section-head">Preview</span></td>
 100                 </tr>
 101                 </tbody></table>
 102
 103                 <table border="0" width="100%" cellpadding="1" cellspacing="0" bgcolor="#000000">
 104                 <tbody><tr>
 105                         <td>
 106                                 <table border="0" cellpadding="10" cellspacing="0" width="100%" height="100%">
 107                                 <tbody><tr>
 108                                         <td id="preview-bg">
 109                                                 <p id="preview-text">Text<br><br>Blah blah blah blah blah blah blah. Blah blah blah blah blah blah blah. Blah blah blah blah. Blah blah blah blah blah blah blah.</p>
 110                                                 <p id="preview-link">Unvisited Link</p>
 111                                                 <p id="preview-alink" style="color: rgb(255, 0, 0);">Active Link</p>
 112                                                 <p id="preview-vlink">Visited Link</p>
 113                                         </td>
 114                                 </tr>
 115                                 </tbody></table>
 116                         </td>
 117                 </tr>
 118                 </tbody></table>
 119
 120                 <br><br>
 121
 122                 <table border="0" width="100%" cellpadding="3" cellspacing="0">
 123                 <tbody><tr>
 124                         <td align="center" bgcolor="#ffccff"><span class="section-head">Choose Element</span></td>
 125                 </tr>
 126                 </tbody></table>
 127
 128                 <table border="0" width="100%" cellpadding="1" cellspacing="0">
 129                 <tbody><tr>
 130                         <td width="20%" bgcolor="#ffffff">
 131                                 <table border="0" width="80">
 132                                 <tbody><tr>
 133                                         <td align="center">
 134                                                 <input type="radio" name="ass" value="bg" checked="checked">
 135                                                 <br>
 136                                                 <table border="0" cellpadding="1" cellspacing="0" bgcolor="#000000">
 137                                                 <tbody><tr>
 138                                                         <td>
 139                                                                 <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
 140                                                                 <tbody><tr>
 141                                                                         <td id="chip-bg"><img src="blank.gif" width="40" height="30" alt="spacer"></td>
 142                                                                 </tr>
 143                                                                 </tbody></table>
 144                                                         </td>
 145                                                 </tr>
 146                                                 </tbody></table>
 147                                                 <span class="hex-code"><div id="code-bg">#FFFFFF</div></span>
 148                                                 <span class="text">Background</span>
 149                                         </td>
 150                                 </tr>
 151                                 </tbody></table>
 152                         </td>
 153
 154                         <td width="20%" bgcolor="#ffffff">
 155                                 <table border="0" width="80">
 156                                 <tbody><tr>
 157                                         <td align="center">
 158                                                 <input type="radio" name="ass" value="text">
 159                                                 <br>
 160                                                 <table border="0" cellpadding="1" cellspacing="0" bgcolor="#000000">
 161                                                 <tbody><tr>
 162                                                         <td>
 163                                                                 <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
 164                                                                 <tbody><tr>
 165                                                                         <td id="chip-text"><img src="blank.gif" width="40" height="30" alt="spacer"></td>
 166                                                                 </tr>
 167                                                                 </tbody></table>
 168                                                         </td>
 169                                                 </tr>
 170                                                 </tbody></table>
 171                                                 <span class="hex-code"><div id="code-text">#FFFFFF</div></span>
 172                                                 <span class="text">Text</span>
 173                                         </td>
 174                                 </tr>
 175                                 </tbody></table>
 176                         </td>
 177
 178                         <td width="20%" bgcolor="#ffffff">
 179                                 <table border="0" width="80">
 180                                 <tbody><tr>
 181                                         <td align="center">
 182                                                 <input type="radio" name="ass" value="link">
 183                                                 <br>
 184                                                 <table border="0" cellpadding="1" cellspacing="0" bgcolor="#000000">
 185                                                 <tbody><tr>
 186                                                         <td>
 187                                                                 <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
 188                                                                 <tbody><tr>
 189                                                                         <td id="chip-link"><img src="blank.gif" width="40" height="30" alt="spacer"></td>
 190                                                                 </tr>
 191                                                                 </tbody></table>
 192                                                         </td>
 193                                                 </tr>
 194                                                 </tbody></table>
 195                                                 <span class="hex-code"><div id="code-link">#FF0000</div></span>
 196                                                 <span class="text">Link</span>
 197                                         </td>
 198                                 </tr>
 199                                 </tbody></table>
 200                         </td>
 201
 202                         <td width="20%" bgcolor="#ffffff">
 203                                 <table border="0" width="80">
 204                                 <tbody><tr>
 205                                         <td align="center">
 206                                                 <input type="radio" name="ass" value="alink">
 207                                                 <br>
 208                                                 <table border="0" cellpadding="1" cellspacing="0" bgcolor="#000000">
 209                                                 <tbody><tr>
 210                                                         <td>
 211                                                                 <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
 212                                                                 <tbody><tr>
 213                                                                         <td id="chip-alink" style="background-color: rgb(255, 0, 0);"><img src="blank.gif" width="40" height="30" alt="spacer"></td>
 214                                                                 </tr>
 215                                                                 </tbody></table>
 216                                                         </td>
 217                                                 </tr>
 218                                                 </tbody></table>
 219                                                 <span class="hex-code"><div id="code-alink">#FF0000</div></span>
 220                                                 <span class="text">Active Link</span>
 221                                         </td>
 222                                 </tr>
 223                                 </tbody></table>
 224                         </td>
 225
 226                         <td width="20%" bgcolor="#ffffff">
 227                                 <table border="0" width="80">
 228                                 <tbody><tr>
 229                                         <td align="center">
 230                                                 <input type="radio" name="ass" value="vlink">
 231                                                 <br>
 232                                                 <table border="0" cellpadding="1" cellspacing="0" bgcolor="#000000">
 233                                                 <tbody><tr>
 234                                                         <td>
 235                                                                 <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%" id="chip-vlink">
 236                                                                 <tbody><tr>
 237                                                                         <td><img src="blank.gif" width="40" height="30" alt="spacer"></td>
 238                                                                 </tr>
 239                                                                 </tbody></table>
 240                                                         </td>
 241                                                 </tr>
 242                                                 </tbody></table>
 243                                                 <span class="hex-code"><div id="code-vlink">#9900CC</div></span>
 244                                                 <span class="text">Visited Link</span>
 245                                         </td>
 246                                 </tr>
 247                                 </tbody></table>
 248                         </td>
 249
 250                 </tr>
 251                 </tbody></table>
 252
 253                 <br><br>
 254
 255                 <table border="0" width="100%" cellpadding="3" cellspacing="0">
 256                 <tbody><tr>
 257                         <td align="center" bgcolor="#ffccff"><span class="section-head">Copy Tags</span></td>
 258                 </tr><tr>
 259                         <td bgcolor="#ffffff">
 260                                 <span class="section-head">BODY</span><br>
 261                                 <span class="hex-code"><input type="text" name="body_tag" size="85" class="hex-code"></span>
 262
 263                                 <br><br>
 264
 265                                 <span class="section-head">CSS</span><br>
 266                                 <span class="hex-code"><textarea name="css_tag" rows="7" cols="60" class="hex-code"></textarea></span>
 267                         </td>
 268                 </tr>
 269                 </tbody></table>
 270
 271
 272
 273         </td>
 274         <td valign="top">
 275 <!-- Color pallette -->
 276                 <table border="0" cellpadding="3" cellspacing="0" width="100%">
 277                 <tbody><tr>
 278                         <td align="center" bgcolor="#ffccff"><span class="section-head">Choose Color</span></td>
 279                 </tr>
 280                 </tbody></table>
 281
 282                 <table cellpadding="0" cellspacing="0" border="0">
 283                 <tbody><tr>
 284                         <td bgcolor="#ffffff">
 285                                 <table cellpadding="0" cellspacing="0" border="0">
 286                                 <tbody><tr>
 287                                         <td bgcolor="#ffffff"><a href="javascript:Color('FFFFFF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 288                                         <td bgcolor="#ffccff"><a href="javascript:Color('FFCCFF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 289                                         <td bgcolor="#ff99ff"><a href="javascript:Color('FF99FF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 290                                         <td bgcolor="#ff66ff"><a href="javascript:Color('FF66FF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 291                                         <td bgcolor="#ff33ff"><a href="javascript:Color('FF33FF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 292                                         <td bgcolor="#ff00ff"><a href="javascript:Color('FF00FF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 293                                 </tr><tr>
 294                                         <td bgcolor="#ccffff"><a href="javascript:Color('CCFFFF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 295                                         <td bgcolor="#ccccff"><a href="javascript:Color('CCCCFF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 296                                         <td bgcolor="#cc99ff"><a href="javascript:Color('CC99FF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 297                                         <td bgcolor="#cc66ff"><a href="javascript:Color('CC66FF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 298                                         <td bgcolor="#cc33ff"><a href="javascript:Color('CC33FF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 299                                         <td bgcolor="#cc00ff"><a href="javascript:Color('CC00FF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 300                                 </tr><tr>
 301                                         <td bgcolor="#99ffff"><a href="javascript:Color('99FFFF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 302                                         <td bgcolor="#99ccff"><a href="javascript:Color('99CCFF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 303                                         <td bgcolor="#9999ff"><a href="javascript:Color('9999FF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 304                                         <td bgcolor="#9966ff"><a href="javascript:Color('9966FF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 305                                         <td bgcolor="#9933ff"><a href="javascript:Color('9933FF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 306                                         <td bgcolor="#9900ff"><a href="javascript:Color('9900FF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 307                                 </tr><tr>
 308                                         <td bgcolor="#66ffff"><a href="javascript:Color('66FFFF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 309                                         <td bgcolor="#66ccff"><a href="javascript:Color('66CCFF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 310                                         <td bgcolor="#6699ff"><a href="javascript:Color('6699FF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 311                                         <td bgcolor="#6666ff"><a href="javascript:Color('6666FF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 312                                         <td bgcolor="#6633ff"><a href="javascript:Color('6633FF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 313                                         <td bgcolor="#6600ff"><a href="javascript:Color('6600FF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 314                                 </tr><tr>
 315                                         <td bgcolor="#33ffff"><a href="javascript:Color('33FFFF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 316                                         <td bgcolor="#33ccff"><a href="javascript:Color('33CCFF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 317                                         <td bgcolor="#3399ff"><a href="javascript:Color('3399FF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 318                                         <td bgcolor="#3366ff"><a href="javascript:Color('3366FF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 319                                         <td bgcolor="#3333ff"><a href="javascript:Color('3333FF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 320                                         <td bgcolor="#3300ff"><a href="javascript:Color('3300FF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 321                                 </tr><tr>
 322                                         <td bgcolor="#00ffff"><a href="javascript:Color('00FFFF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 323                                         <td bgcolor="#00ccff"><a href="javascript:Color('00CCFF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 324                                         <td bgcolor="#0099ff"><a href="javascript:Color('0099FF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 325                                         <td bgcolor="#0066ff"><a href="javascript:Color('0066FF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 326                                         <td bgcolor="#0033ff"><a href="javascript:Color('0033FF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 327                                         <td bgcolor="#0000ff"><a href="javascript:Color('0000FF')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 328                                 </tr>
 329                                 </tbody></table>
 330                         </td>
 331                         <td bgcolor="#ffffff">
 332                                 <table cellpadding="0" cellspacing="0" border="0">
 333                                 <tbody><tr>
 334                                         <td bgcolor="#ffff66"><a href="javascript:Color('FFFF66')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 335                                         <td bgcolor="#ffcc66"><a href="javascript:Color('FFCC66')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 336                                         <td bgcolor="#ff9966"><a href="javascript:Color('FF9966')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 337                                         <td bgcolor="#ff6666"><a href="javascript:Color('FF6666')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 338                                         <td bgcolor="#ff3366"><a href="javascript:Color('FF3366')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 339                                         <td bgcolor="#ff0066"><a href="javascript:Color('FF0066')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 340                                 </tr><tr>
 341                                         <td bgcolor="#ccff66"><a href="javascript:Color('CCFF66')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 342                                         <td bgcolor="#cccc66"><a href="javascript:Color('CCCC66')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 343                                         <td bgcolor="#cc9966"><a href="javascript:Color('CC9966')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 344                                         <td bgcolor="#cc6666"><a href="javascript:Color('CC6666')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 345                                         <td bgcolor="#cc3366"><a href="javascript:Color('CC3366')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 346                                         <td bgcolor="#cc0066"><a href="javascript:Color('CC0066')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 347                                 </tr><tr>
 348                                         <td bgcolor="#99ff66"><a href="javascript:Color('99FF66')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 349                                         <td bgcolor="#99cc66"><a href="javascript:Color('99CC66')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 350                                         <td bgcolor="#999966"><a href="javascript:Color('999966')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 351                                         <td bgcolor="#996666"><a href="javascript:Color('996666')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 352                                         <td bgcolor="#993366"><a href="javascript:Color('993366')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 353                                         <td bgcolor="#990066"><a href="javascript:Color('990066')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 354                                 </tr><tr>
 355                                         <td bgcolor="#66ff66"><a href="javascript:Color('66FF66')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 356                                         <td bgcolor="#66cc66"><a href="javascript:Color('66CC66')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 357                                         <td bgcolor="#669966"><a href="javascript:Color('669966')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 358                                         <td bgcolor="#666666"><a href="javascript:Color('666666')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 359                                         <td bgcolor="#663366"><a href="javascript:Color('663366')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 360                                         <td bgcolor="#660066"><a href="javascript:Color('660066')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 361                                 </tr><tr>
 362                                         <td bgcolor="#33ff66"><a href="javascript:Color('33FF66')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 363                                         <td bgcolor="#33cc66"><a href="javascript:Color('33CC66')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 364                                         <td bgcolor="#339966"><a href="javascript:Color('339966')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 365                                         <td bgcolor="#336666"><a href="javascript:Color('336666')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 366                                         <td bgcolor="#333366"><a href="javascript:Color('333366')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 367                                         <td bgcolor="#330066"><a href="javascript:Color('330066')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 368                                 </tr><tr>
 369                                         <td bgcolor="#00ff66"><a href="javascript:Color('00FF66')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 370                                         <td bgcolor="#00cc66"><a href="javascript:Color('00CC66')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 371                                         <td bgcolor="#009966"><a href="javascript:Color('009966')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 372                                         <td bgcolor="#006666"><a href="javascript:Color('006666')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 373                                         <td bgcolor="#003366"><a href="javascript:Color('003366')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 374                                         <td bgcolor="#000066"><a href="javascript:Color('000066')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 375                                 </tr>
 376                                 </tbody></table>
 377                         </td>
 378                 </tr><tr>
 379                         <td bgcolor="#ffffff">
 380                                 <table cellpadding="0" cellspacing="0" border="0">
 381                                 <tbody><tr>
 382                                         <td bgcolor="#ffffcc"><a href="javascript:Color('FFFFCC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 383                                         <td bgcolor="#ffcccc"><a href="javascript:Color('FFCCCC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 384                                         <td bgcolor="#ff99cc"><a href="javascript:Color('FF99CC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 385                                         <td bgcolor="#ff66cc"><a href="javascript:Color('FF66CC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 386                                         <td bgcolor="#ff33cc"><a href="javascript:Color('FF33CC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 387                                         <td bgcolor="#ff00cc"><a href="javascript:Color('FF00CC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 388                                 </tr><tr>
 389                                         <td bgcolor="#ccffcc"><a href="javascript:Color('CCFFCC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 390                                         <td bgcolor="#cccccc"><a href="javascript:Color('CCCCCC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 391                                         <td bgcolor="#cc99cc"><a href="javascript:Color('CC99CC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 392                                         <td bgcolor="#cc66cc"><a href="javascript:Color('CC66CC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 393                                         <td bgcolor="#cc33cc"><a href="javascript:Color('CC33CC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 394                                         <td bgcolor="#cc00cc"><a href="javascript:Color('CC00CC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 395                                 </tr><tr>
 396                                         <td bgcolor="#99ffcc"><a href="javascript:Color('99FFCC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 397                                         <td bgcolor="#99cccc"><a href="javascript:Color('99CCCC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 398                                         <td bgcolor="#9999cc"><a href="javascript:Color('9999CC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 399                                         <td bgcolor="#9966cc"><a href="javascript:Color('9966CC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 400                                         <td bgcolor="#9933cc"><a href="javascript:Color('9933CC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 401                                         <td bgcolor="#9900cc"><a href="javascript:Color('9900CC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 402                                 </tr><tr>
 403                                         <td bgcolor="#66ffcc"><a href="javascript:Color('66FFCC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 404                                         <td bgcolor="#66cccc"><a href="javascript:Color('66CCCC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 405                                         <td bgcolor="#6699cc"><a href="javascript:Color('6699CC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 406                                         <td bgcolor="#6666cc"><a href="javascript:Color('6666CC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 407                                         <td bgcolor="#6633cc"><a href="javascript:Color('6633CC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 408                                         <td bgcolor="#6600cc"><a href="javascript:Color('6600CC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 409                                 </tr><tr>
 410                                         <td bgcolor="#33ffcc"><a href="javascript:Color('33FFCC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 411                                         <td bgcolor="#33cccc"><a href="javascript:Color('33CCCC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 412                                         <td bgcolor="#3399cc"><a href="javascript:Color('3399CC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 413                                         <td bgcolor="#3366cc"><a href="javascript:Color('3366CC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 414                                         <td bgcolor="#3333cc"><a href="javascript:Color('3333CC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 415                                         <td bgcolor="#3300cc"><a href="javascript:Color('3300CC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 416                                 </tr><tr>
 417                                         <td bgcolor="#00ffcc"><a href="javascript:Color('00FFCC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 418                                         <td bgcolor="#00cccc"><a href="javascript:Color('00CCCC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 419                                         <td bgcolor="#0099cc"><a href="javascript:Color('0099CC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 420                                         <td bgcolor="#0066cc"><a href="javascript:Color('0066CC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 421                                         <td bgcolor="#0033cc"><a href="javascript:Color('0033CC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 422                                         <td bgcolor="#0000cc"><a href="javascript:Color('0000CC')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 423                                 </tr>
 424                                 </tbody></table>
 425                         </td>
 426                         <td bgcolor="#ffffff">
 427                                 <table cellpadding="0" cellspacing="0" border="0">
 428                                 <tbody><tr>
 429                                         <td bgcolor="#ffff33"><a href="javascript:Color('FFFF33')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 430                                         <td bgcolor="#ffcc33"><a href="javascript:Color('FFCC33')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 431                                         <td bgcolor="#ff9933"><a href="javascript:Color('FF9933')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 432                                         <td bgcolor="#ff6633"><a href="javascript:Color('FF6633')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 433                                         <td bgcolor="#ff3333"><a href="javascript:Color('FF3333')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 434                                         <td bgcolor="#ff0033"><a href="javascript:Color('FF0033')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 435                                 </tr><tr>
 436                                         <td bgcolor="#ccff33"><a href="javascript:Color('CCFF33')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 437                                         <td bgcolor="#cccc33"><a href="javascript:Color('CCCC33')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 438                                         <td bgcolor="#cc9933"><a href="javascript:Color('CC9933')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 439                                         <td bgcolor="#cc6633"><a href="javascript:Color('CC6633')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 440                                         <td bgcolor="#cc3333"><a href="javascript:Color('CC3333')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 441                                         <td bgcolor="#cc0033"><a href="javascript:Color('CC0033')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 442                                 </tr><tr>
 443                                         <td bgcolor="#99ff33"><a href="javascript:Color('99FF33')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 444                                         <td bgcolor="#99cc33"><a href="javascript:Color('99CC33')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 445                                         <td bgcolor="#999933"><a href="javascript:Color('999933')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 446                                         <td bgcolor="#996633"><a href="javascript:Color('996633')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 447                                         <td bgcolor="#993333"><a href="javascript:Color('993333')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 448                                         <td bgcolor="#990033"><a href="javascript:Color('990033')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 449                                 </tr><tr>
 450                                         <td bgcolor="#66ff33"><a href="javascript:Color('66FF33')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 451                                         <td bgcolor="#66cc33"><a href="javascript:Color('66CC33')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 452                                         <td bgcolor="#669933"><a href="javascript:Color('669933')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 453                                         <td bgcolor="#666633"><a href="javascript:Color('666633')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 454                                         <td bgcolor="#663333"><a href="javascript:Color('663333')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 455                                         <td bgcolor="#660033"><a href="javascript:Color('660033')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 456                                 </tr><tr>
 457                                         <td bgcolor="#33ff33"><a href="javascript:Color('33FF33')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 458                                         <td bgcolor="#33cc33"><a href="javascript:Color('33CC33')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 459                                         <td bgcolor="#339933"><a href="javascript:Color('339933')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 460                                         <td bgcolor="#336633"><a href="javascript:Color('336633')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 461                                         <td bgcolor="#333333"><a href="javascript:Color('333333')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 462                                         <td bgcolor="#330033"><a href="javascript:Color('330033')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 463                                 </tr><tr>
 464                                         <td bgcolor="#00ff33"><a href="javascript:Color('00FF33')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 465                                         <td bgcolor="#00cc33"><a href="javascript:Color('00CC33')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 466                                         <td bgcolor="#009933"><a href="javascript:Color('009933')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 467                                         <td bgcolor="#006633"><a href="javascript:Color('006633')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 468                                         <td bgcolor="#003333"><a href="javascript:Color('003333')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 469                                         <td bgcolor="#000033"><a href="javascript:Color('000033')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 470                                 </tr>
 471                                 </tbody></table>
 472                         </td>
 473                 </tr><tr>
 474                         <td bgcolor="#ffffff">
 475                                 <table cellpadding="0" cellspacing="0" border="0">
 476                                 <tbody><tr>
 477                                         <td bgcolor="#ffff99"><a href="javascript:Color('FFFF99')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 478                                         <td bgcolor="#ffcc99"><a href="javascript:Color('FFCC99')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 479                                         <td bgcolor="#ff9999"><a href="javascript:Color('FF9999')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 480                                         <td bgcolor="#ff6699"><a href="javascript:Color('FF6699')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 481                                         <td bgcolor="#ff3399"><a href="javascript:Color('FF3399')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 482                                         <td bgcolor="#ff0099"><a href="javascript:Color('FF0099')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 483                                 </tr><tr>
 484                                         <td bgcolor="#ccff99"><a href="javascript:Color('CCFF99')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 485                                         <td bgcolor="#cccc99"><a href="javascript:Color('CCCC99')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 486                                         <td bgcolor="#cc9999"><a href="javascript:Color('CC9999')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 487                                         <td bgcolor="#cc6699"><a href="javascript:Color('CC6699')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 488                                         <td bgcolor="#cc3399"><a href="javascript:Color('CC3399')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 489                                         <td bgcolor="#cc0099"><a href="javascript:Color('CC0099')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 490                                 </tr><tr>
 491                                         <td bgcolor="#99ff99"><a href="javascript:Color('99FF99')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 492                                         <td bgcolor="#99cc99"><a href="javascript:Color('99CC99')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 493                                         <td bgcolor="#999999"><a href="javascript:Color('999999')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 494                                         <td bgcolor="#996699"><a href="javascript:Color('996699')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 495                                         <td bgcolor="#993399"><a href="javascript:Color('993399')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 496                                         <td bgcolor="#990099"><a href="javascript:Color('990099')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 497                                 </tr><tr>
 498                                         <td bgcolor="#66ff99"><a href="javascript:Color('66FF99')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 499                                         <td bgcolor="#66cc99"><a href="javascript:Color('66CC99')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 500                                         <td bgcolor="#669999"><a href="javascript:Color('669999')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 501                                         <td bgcolor="#666699"><a href="javascript:Color('666699')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 502                                         <td bgcolor="#663399"><a href="javascript:Color('663399')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 503                                         <td bgcolor="#660099"><a href="javascript:Color('660099')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 504                                 </tr><tr>
 505                                         <td bgcolor="#33ff99"><a href="javascript:Color('33FF99')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 506                                         <td bgcolor="#33cc99"><a href="javascript:Color('33CC99')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 507                                         <td bgcolor="#339999"><a href="javascript:Color('339999')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 508                                         <td bgcolor="#336699"><a href="javascript:Color('336699')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 509                                         <td bgcolor="#333399"><a href="javascript:Color('333399')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 510                                         <td bgcolor="#330099"><a href="javascript:Color('330099')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 511                                 </tr><tr>
 512                                         <td bgcolor="#00ff99"><a href="javascript:Color('00FF99')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 513                                         <td bgcolor="#00cc99"><a href="javascript:Color('00CC99')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 514                                         <td bgcolor="#009999"><a href="javascript:Color('009999')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 515                                         <td bgcolor="#006699"><a href="javascript:Color('006699')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 516                                         <td bgcolor="#003399"><a href="javascript:Color('003399')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 517                                         <td bgcolor="#000099"><a href="javascript:Color('000099')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 518                                 </tr>
 519                                 </tbody></table>
 520                         </td>
 521                         <td bgcolor="#ffffff">
 522                                 <table cellpadding="0" cellspacing="0" border="0">
 523                                 <tbody><tr>
 524                                         <td bgcolor="#ffff00"><a href="javascript:Color('FFFF00')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 525                                         <td bgcolor="#ffcc00"><a href="javascript:Color('FFCC00')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 526                                         <td bgcolor="#ff9900"><a href="javascript:Color('FF9900')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 527                                         <td bgcolor="#ff6600"><a href="javascript:Color('FF6600')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 528                                         <td bgcolor="#ff3300"><a href="javascript:Color('FF3300')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 529                                         <td bgcolor="#ff0000"><a href="javascript:Color('FF0000')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 530                                 </tr><tr>
 531                                         <td bgcolor="#ccff00"><a href="javascript:Color('CCFF00')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 532                                         <td bgcolor="#cccc00"><a href="javascript:Color('CCCC00')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 533                                         <td bgcolor="#cc9900"><a href="javascript:Color('CC9900')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 534                                         <td bgcolor="#cc6600"><a href="javascript:Color('CC6600')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 535                                         <td bgcolor="#cc3300"><a href="javascript:Color('CC3300')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 536                                         <td bgcolor="#cc0000"><a href="javascript:Color('CC0000')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 537                                 </tr><tr>
 538                                         <td bgcolor="#99ff00"><a href="javascript:Color('99FF00')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 539                                         <td bgcolor="#99cc00"><a href="javascript:Color('99CC00')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 540                                         <td bgcolor="#999900"><a href="javascript:Color('999900')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 541                                         <td bgcolor="#996600"><a href="javascript:Color('996600')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 542                                         <td bgcolor="#993300"><a href="javascript:Color('993300')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 543                                         <td bgcolor="#990000"><a href="javascript:Color('990000')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 544                                 </tr><tr>
 545                                         <td bgcolor="#66ff00"><a href="javascript:Color('66FF00')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 546                                         <td bgcolor="#66cc00"><a href="javascript:Color('66CC00')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 547                                         <td bgcolor="#669900"><a href="javascript:Color('669900')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 548                                         <td bgcolor="#666600"><a href="javascript:Color('666600')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 549                                         <td bgcolor="#663300"><a href="javascript:Color('663300')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 550                                         <td bgcolor="#660000"><a href="javascript:Color('660000')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 551                                 </tr><tr>
 552                                         <td bgcolor="#33ff00"><a href="javascript:Color('33FF00')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 553                                         <td bgcolor="#33cc00"><a href="javascript:Color('33CC00')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 554                                         <td bgcolor="#339900"><a href="javascript:Color('339900')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 555                                         <td bgcolor="#336600"><a href="javascript:Color('336600')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 556                                         <td bgcolor="#333300"><a href="javascript:Color('333300')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 557                                         <td bgcolor="#330000"><a href="javascript:Color('330000')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 558                                 </tr><tr>
 559                                         <td bgcolor="#00ff00"><a href="javascript:Color('00FF00')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 560                                         <td bgcolor="#00cc00"><a href="javascript:Color('00CC00')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 561                                         <td bgcolor="#009900"><a href="javascript:Color('009900')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 562                                         <td bgcolor="#006600"><a href="javascript:Color('006600')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 563                                         <td bgcolor="#003300"><a href="javascript:Color('003300')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 564                                         <td bgcolor="#000000"><a href="javascript:Color('000000')"><img src="blank.gif" border="0" height="15" width="15"></a></td>
 565                                 </tr>
 566                                 </tbody></table>
 567                         </td>
 568                 </tr>
 569                 </tbody></table>
 570
 571         </td>
 572 </tr>
 573 </tbody></table>
 574
 575 <br>
 576
 577 </form></body></html>