CSS

ninja-media-script

Ninja Media Script

Well, it’s been awhile since I’ve written a post. I hope to get back into my daily post routine :) In the meantime I’ve been fairly busy creating some new scripts and learning some new technologies. One of the latest scripts that I’ve written was a Viral Media Script that’s available on CodeCanyon. Feel free to check it out here.

The response has been great so far, I am reaching nearly 250 sales within the first couple months. It’s great to be able to continue to work on something that people care about. Whenever I’m working on updates during the weekend it’s a great feeling to know that I have users who are looking forward to these updates.

The script was built using Laravel 4 framework, Bootstrap 3, FontAwesome4, and jQuery.

Here are some of the screenshots of the script below:

ninja-media-script-screenshot-1 ninja-media-script-screenshot-2 ninja-media-script-screenshot-3

Be sure to check it out on the Envato page here: http://codecanyon.net/item/ninja-media-script/6822888

And I look forward to hearing your feedback :)

imgtocss.com – easily create css/html images

With¬†imgtocss.com you can easily create css/html images. This service allows you to input a URL of an image and click ‘Convert to CSS’ and the application will convert your image into pure css/html. The preferred image type is PNG, because they can have a transparent background. This tool could be helpful for sending html emails. Instead of including images in your email, you could simply put in HTML/CSS. Additionally this tool just seems fun to play around with :)

I have inserted the following image into imgtocss.com and converted to CSS:

And this was the html/css that was output:

<table cellpadding=0 cellspacing=0 height=128 width=128 style="height:128px;width:128px">
<tr height=0><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /><td width=1 /></tr>
<tr height=25><td colspan=128 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.04;filter:alpha(opacity=3) /><td bgcolor="#000000" style=opacity:0.09;filter:alpha(opacity=9) /><td colspan=73 bgcolor="#000000" style=opacity:0.09;filter:alpha(opacity=8) /><td bgcolor="#000000" style=opacity:0.02;filter:alpha(opacity=1) /><td colspan=24 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.42;filter:alpha(opacity=42) /><td bgcolor="#000000" style=opacity:0.89;filter:alpha(opacity=89) /><td colspan=73 bgcolor="#000000" style=opacity:0.89;filter:alpha(opacity=88) /><td bgcolor="#000000" style=opacity:0.85;filter:alpha(opacity=84) /><td bgcolor="#000000" style=opacity:0.77;filter:alpha(opacity=76) /><td bgcolor="#000000" style=opacity:0.61;filter:alpha(opacity=60) /><td bgcolor="#000000" style=opacity:0.40;filter:alpha(opacity=40) /><td bgcolor="#000000" style=opacity:0.19;filter:alpha(opacity=19) /><td bgcolor="#000000" style=opacity:0.01;filter:alpha(opacity=0) /><td colspan=19 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.49;filter:alpha(opacity=48) /><td colspan=78 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.95;filter:alpha(opacity=95) /><td bgcolor="#000000" style=opacity:0.78;filter:alpha(opacity=77) /><td bgcolor="#000000" style=opacity:0.41;filter:alpha(opacity=41) /><td bgcolor="#000000" style=opacity:0.09;filter:alpha(opacity=8) /><td colspan=17 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=81 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.87;filter:alpha(opacity=87) /><td bgcolor="#000000" style=opacity:0.44;filter:alpha(opacity=43) /><td bgcolor="#000000" style=opacity:0.04;filter:alpha(opacity=4) /><td colspan=15 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=83 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.78;filter:alpha(opacity=77) /><td bgcolor="#000000" style=opacity:0.23;filter:alpha(opacity=22) /><td colspan=14 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=84 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.95;filter:alpha(opacity=94) /><td bgcolor="#000000" style=opacity:0.42;filter:alpha(opacity=41) /><td colspan=13 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=86 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.53;filter:alpha(opacity=52) /><td bgcolor="#000000" style=opacity:0.02;filter:alpha(opacity=2) /><td colspan=11 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=87 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.56;filter:alpha(opacity=56) /><td bgcolor="#000000" style=opacity:0.01;filter:alpha(opacity=0) /><td colspan=10 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=88 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.46;filter:alpha(opacity=46) /><td colspan=10 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.99;filter:alpha(opacity=99) /><td colspan=3 bgcolor="#000000" style=opacity:0.99;filter:alpha(opacity=98) /><td bgcolor="#070707" /><td bgcolor="#080808" /><td colspan=12 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.97;filter:alpha(opacity=97) /><td bgcolor="#000000" style=opacity:0.30;filter:alpha(opacity=29) /><td colspan=9 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.44;filter:alpha(opacity=44) /><td colspan=3 bgcolor="#000000" style=opacity:0.14;filter:alpha(opacity=13) /><td bgcolor="#939393" style=opacity:0.42;filter:alpha(opacity=41) /><td bgcolor="#767676" style=opacity:0.62;filter:alpha(opacity=61) /><td bgcolor="#2a2a2a" style=opacity:0.69;filter:alpha(opacity=68) /><td bgcolor="#292929" style=opacity:1.00;filter:alpha(opacity=99) /><td bgcolor="#040404" /><td colspan=10 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.87;filter:alpha(opacity=87) /><td bgcolor="#000000" style=opacity:0.10;filter:alpha(opacity=10) /><td colspan=8 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.34;filter:alpha(opacity=34) /><td colspan=5 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#ffffff" style=opacity:0.02;filter:alpha(opacity=2) /><td bgcolor="#bababa" style=opacity:0.20;filter:alpha(opacity=20) /><td bgcolor="#686868" style=opacity:0.66;filter:alpha(opacity=66) /><td bgcolor="#232323" style=opacity:1.00;filter:alpha(opacity=99) /><td colspan=10 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.60;filter:alpha(opacity=59) /><td colspan=8 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.35;filter:alpha(opacity=35) /><td colspan=7 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#ffffff" style=opacity:0.02;filter:alpha(opacity=1) /><td bgcolor="#828282" style=opacity:0.22;filter:alpha(opacity=22) /><td bgcolor="#383838" style=opacity:0.88;filter:alpha(opacity=87) /><td bgcolor="#010101" /><td colspan=8 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.96;filter:alpha(opacity=95) /><td bgcolor="#000000" style=opacity:0.21;filter:alpha(opacity=20) /><td colspan=7 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.35;filter:alpha(opacity=35) /><td colspan=9 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#bcbcbc" style=opacity:0.16;filter:alpha(opacity=16) /><td bgcolor="#414141" style=opacity:0.88;filter:alpha(opacity=87) /><td bgcolor="#020202" /><td colspan=8 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.65;filter:alpha(opacity=64) /><td colspan=7 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.35;filter:alpha(opacity=35) /><td colspan=10 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#9e9e9e" style=opacity:0.16;filter:alpha(opacity=16) /><td bgcolor="#292929" style=opacity:0.89;filter:alpha(opacity=89) /><td colspan=8 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.95;filter:alpha(opacity=95) /><td bgcolor="#000000" style=opacity:0.17;filter:alpha(opacity=16) /><td colspan=6 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.35;filter:alpha(opacity=35) /><td colspan=11 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#8d8d8d" style=opacity:0.43;filter:alpha(opacity=43) /><td bgcolor="#141414" style=opacity:1.00;filter:alpha(opacity=99) /><td colspan=8 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.50;filter:alpha(opacity=50) /><td colspan=6 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.35;filter:alpha(opacity=35) /><td colspan=11 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#ffffff" style=opacity:0.01;filter:alpha(opacity=0) /><td bgcolor="#3d3d3d" style=opacity:0.72;filter:alpha(opacity=72) /><td colspan=8 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.80;filter:alpha(opacity=80) /><td bgcolor="#000000" style=opacity:0.02;filter:alpha(opacity=2) /><td colspan=5 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.35;filter:alpha(opacity=35) /><td colspan=12 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#787878" style=opacity:0.25;filter:alpha(opacity=25) /><td bgcolor="#161616" /><td colspan=7 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.96;filter:alpha(opacity=95) /><td bgcolor="#000000" style=opacity:0.18;filter:alpha(opacity=18) /><td colspan=5 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.35;filter:alpha(opacity=35) /><td colspan=12 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#ffffff" style=opacity:0.04;filter:alpha(opacity=4) /><td bgcolor="#292929" style=opacity:0.77;filter:alpha(opacity=77) /><td bgcolor="#010101" /><td colspan=7 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.34;filter:alpha(opacity=33) /><td colspan=5 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.35;filter:alpha(opacity=35) /><td colspan=13 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#717171" style=opacity:0.64;filter:alpha(opacity=63) /><td bgcolor="#030303" /><td colspan=7 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.53;filter:alpha(opacity=53) /><td colspan=5 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.35;filter:alpha(opacity=35) /><td colspan=13 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#5a5a5a" style=opacity:0.24;filter:alpha(opacity=24) /><td bgcolor="#0e0e0e" /><td colspan=7 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.67;filter:alpha(opacity=66) /><td colspan=5 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.35;filter:alpha(opacity=35) /><td colspan=13 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#9b9b9b" style=opacity:0.20;filter:alpha(opacity=20) /><td bgcolor="#2a2a2a" /><td colspan=7 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.76;filter:alpha(opacity=76) /><td colspan=5 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.35;filter:alpha(opacity=35) /><td colspan=13 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#e2e2e2" style=opacity:0.20;filter:alpha(opacity=20) /><td bgcolor="#3c3c3c" /><td colspan=7 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.76;filter:alpha(opacity=76) /><td colspan=5 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.35;filter:alpha(opacity=35) /><td colspan=13 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#ebebeb" style=opacity:0.20;filter:alpha(opacity=20) /><td bgcolor="#3e3e3e" /><td colspan=7 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.76;filter:alpha(opacity=76) /><td colspan=5 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.35;filter:alpha(opacity=35) /><td colspan=13 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#c9c9c9" style=opacity:0.20;filter:alpha(opacity=20) /><td bgcolor="#353535" /><td colspan=7 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.76;filter:alpha(opacity=76) /><td colspan=5 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.35;filter:alpha(opacity=35) /><td colspan=13 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#5e5e5e" style=opacity:0.18;filter:alpha(opacity=18) /><td bgcolor="#1c1c1c" /><td colspan=7 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.68;filter:alpha(opacity=68) /><td colspan=5 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.35;filter:alpha(opacity=35) /><td colspan=13 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#737373" style=opacity:0.42;filter:alpha(opacity=41) /><td bgcolor="#050505" /><td colspan=7 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.55;filter:alpha(opacity=55) /><td colspan=5 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.35;filter:alpha(opacity=35) /><td colspan=12 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#ffffff" style=opacity:0.01;filter:alpha(opacity=1) /><td bgcolor="#545454" style=opacity:0.73;filter:alpha(opacity=72) /><td bgcolor="#020202" /><td colspan=7 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.36;filter:alpha(opacity=36) /><td colspan=5 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.35;filter:alpha(opacity=35) /><td colspan=12 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#c6c6c6" style=opacity:0.19;filter:alpha(opacity=19) /><td bgcolor="#2c2c2c" style=opacity:0.97;filter:alpha(opacity=97) /><td colspan=7 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.97;filter:alpha(opacity=97) /><td bgcolor="#000000" style=opacity:0.20;filter:alpha(opacity=20) /><td colspan=5 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.35;filter:alpha(opacity=35) /><td colspan=11 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#ffffff" style=opacity:0.01;filter:alpha(opacity=0) /><td bgcolor="#6b6b6b" style=opacity:0.62;filter:alpha(opacity=62) /><td bgcolor="#040404" /><td colspan=7 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.81;filter:alpha(opacity=80) /><td bgcolor="#000000" style=opacity:0.04;filter:alpha(opacity=3) /><td colspan=5 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.35;filter:alpha(opacity=35) /><td colspan=11 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#a6a6a6" style=opacity:0.24;filter:alpha(opacity=23) /><td bgcolor="#262626" style=opacity:0.98;filter:alpha(opacity=98) /><td colspan=8 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.52;filter:alpha(opacity=51) /><td colspan=6 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.35;filter:alpha(opacity=35) /><td colspan=10 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#c2c2c2" style=opacity:0.10;filter:alpha(opacity=9) /><td bgcolor="#363636" style=opacity:0.81;filter:alpha(opacity=80) /><td colspan=8 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.96;filter:alpha(opacity=96) /><td bgcolor="#000000" style=opacity:0.19;filter:alpha(opacity=18) /><td colspan=6 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.35;filter:alpha(opacity=35) /><td colspan=9 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#c2c2c2" style=opacity:0.10;filter:alpha(opacity=9) /><td bgcolor="#4e4e4e" style=opacity:0.80;filter:alpha(opacity=80) /><td bgcolor="#060606" /><td colspan=8 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.65;filter:alpha(opacity=65) /><td bgcolor="#000000" style=opacity:0.00;filter:alpha(opacity=0) /><td colspan=6 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.35;filter:alpha(opacity=35) /><td colspan=8 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#a2a2a2" style=opacity:0.29;filter:alpha(opacity=29) /><td bgcolor="#333333" style=opacity:0.80;filter:alpha(opacity=80) /><td bgcolor="#050505" /><td colspan=8 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.96;filter:alpha(opacity=96) /><td bgcolor="#000000" style=opacity:0.22;filter:alpha(opacity=21) /><td colspan=7 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.35;filter:alpha(opacity=34) /><td colspan=5 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#ffffff" style=opacity:0.05;filter:alpha(opacity=5) /><td bgcolor="#b0b0b0" style=opacity:0.18;filter:alpha(opacity=17) /><td bgcolor="#4d4d4d" style=opacity:0.55;filter:alpha(opacity=54) /><td bgcolor="#242424" /><td bgcolor="#010101" /><td colspan=9 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.58;filter:alpha(opacity=57) /><td colspan=8 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#0a0a0a" style=opacity:0.39;filter:alpha(opacity=38) /><td colspan=2 bgcolor="#808080" style=opacity:0.05;filter:alpha(opacity=5) /><td bgcolor="#242424" style=opacity:0.05;filter:alpha(opacity=5) /><td bgcolor="#989898" style=opacity:0.32;filter:alpha(opacity=32) /><td bgcolor="#5d5d5d" style=opacity:0.46;filter:alpha(opacity=46) /><td bgcolor="#4e4e4e" style=opacity:0.77;filter:alpha(opacity=77) /><td bgcolor="#212121" style=opacity:0.96;filter:alpha(opacity=96) /><td bgcolor="#070707" /><td colspan=10 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.82;filter:alpha(opacity=82) /><td bgcolor="#000000" style=opacity:0.08;filter:alpha(opacity=8) /><td colspan=8 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#141414" style=opacity:0.96;filter:alpha(opacity=95) /><td bgcolor="#212121" style=opacity:0.93;filter:alpha(opacity=92) /><td bgcolor="#202020" style=opacity:0.93;filter:alpha(opacity=92) /><td bgcolor="#080808" style=opacity:0.93;filter:alpha(opacity=92) /><td bgcolor="#0e0e0e" /><td bgcolor="#0c0c0c" /><td colspan=12 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.94;filter:alpha(opacity=94) /><td bgcolor="#000000" style=opacity:0.24;filter:alpha(opacity=24) /><td colspan=9 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=87 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.98;filter:alpha(opacity=97) /><td bgcolor="#000000" style=opacity:0.37;filter:alpha(opacity=37) /><td colspan=10 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=86 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.98;filter:alpha(opacity=97) /><td bgcolor="#000000" style=opacity:0.41;filter:alpha(opacity=40) /><td colspan=11 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=85 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.93;filter:alpha(opacity=92) /><td bgcolor="#000000" style=opacity:0.35;filter:alpha(opacity=34) /><td colspan=12 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=84 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.81;filter:alpha(opacity=80) /><td bgcolor="#000000" style=opacity:0.22;filter:alpha(opacity=21) /><td colspan=13 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=82 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.97;filter:alpha(opacity=97) /><td bgcolor="#000000" style=opacity:0.55;filter:alpha(opacity=54) /><td bgcolor="#000000" style=opacity:0.07;filter:alpha(opacity=7) /><td colspan=14 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=80 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.98;filter:alpha(opacity=98) /><td bgcolor="#000000" style=opacity:0.67;filter:alpha(opacity=67) /><td bgcolor="#000000" style=opacity:0.23;filter:alpha(opacity=22) /><td colspan=16 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=77 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:1.00;filter:alpha(opacity=99) /><td bgcolor="#000000" style=opacity:0.87;filter:alpha(opacity=87) /><td bgcolor="#000000" style=opacity:0.56;filter:alpha(opacity=55) /><td bgcolor="#000000" style=opacity:0.22;filter:alpha(opacity=22) /><td colspan=18 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.99;filter:alpha(opacity=99) /><td bgcolor="#000000" style=opacity:0.98;filter:alpha(opacity=98) /><td bgcolor="#000000" style=opacity:0.98;filter:alpha(opacity=97) /><td bgcolor="#000000" style=opacity:0.95;filter:alpha(opacity=94) /><td bgcolor="#000000" style=opacity:0.88;filter:alpha(opacity=88) /><td bgcolor="#000000" style=opacity:0.72;filter:alpha(opacity=71) /><td bgcolor="#000000" style=opacity:0.51;filter:alpha(opacity=50) /><td bgcolor="#000000" style=opacity:0.29;filter:alpha(opacity=28) /><td bgcolor="#000000" style=opacity:0.06;filter:alpha(opacity=5) /><td colspan=20 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.61;filter:alpha(opacity=60) /><td bgcolor="#000000" style=opacity:0.25;filter:alpha(opacity=24) /><td bgcolor="#000000" style=opacity:0.22;filter:alpha(opacity=21) /><td bgcolor="#000000" style=opacity:0.12;filter:alpha(opacity=12) /><td bgcolor="#000000" style=opacity:0.04;filter:alpha(opacity=4) /><td bgcolor="#000000" style=opacity:0.01;filter:alpha(opacity=0) /><td colspan=23 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.46;filter:alpha(opacity=46) /><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=47) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.48;filter:alpha(opacity=48) /><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.47;filter:alpha(opacity=47) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.44;filter:alpha(opacity=43) /><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.37;filter:alpha(opacity=36) /><td colspan=70 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.35;filter:alpha(opacity=34) /><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.25;filter:alpha(opacity=24) /><td bgcolor="#000000" style=opacity:0.98;filter:alpha(opacity=98) /><td colspan=68 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.98;filter:alpha(opacity=98) /><td bgcolor="#000000" style=opacity:0.24;filter:alpha(opacity=24) /><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.08;filter:alpha(opacity=7) /><td bgcolor="#000000" style=opacity:0.89;filter:alpha(opacity=89) /><td colspan=68 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.89;filter:alpha(opacity=89) /><td bgcolor="#000000" style=opacity:0.08;filter:alpha(opacity=8) /><td colspan=28 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=29 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.61;filter:alpha(opacity=60) /><td colspan=68 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.61;filter:alpha(opacity=61) /><td colspan=29 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=29 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.20;filter:alpha(opacity=19) /><td bgcolor="#000000" style=opacity:0.96;filter:alpha(opacity=95) /><td colspan=66 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.97;filter:alpha(opacity=97) /><td bgcolor="#000000" style=opacity:0.23;filter:alpha(opacity=22) /><td colspan=29 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=30 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.56;filter:alpha(opacity=56) /><td colspan=66 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.60;filter:alpha(opacity=59) /><td colspan=30 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=30 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.06;filter:alpha(opacity=6) /><td bgcolor="#000000" style=opacity:0.75;filter:alpha(opacity=74) /><td colspan=64 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.82;filter:alpha(opacity=82) /><td bgcolor="#000000" style=opacity:0.09;filter:alpha(opacity=8) /><td colspan=30 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=31 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.09;filter:alpha(opacity=9) /><td bgcolor="#000000" style=opacity:0.76;filter:alpha(opacity=76) /><td colspan=62 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.87;filter:alpha(opacity=87) /><td bgcolor="#000000" style=opacity:0.18;filter:alpha(opacity=18) /><td colspan=31 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=32 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.09;filter:alpha(opacity=9) /><td bgcolor="#000000" style=opacity:0.66;filter:alpha(opacity=66) /><td colspan=60 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.76;filter:alpha(opacity=75) /><td bgcolor="#000000" style=opacity:0.15;filter:alpha(opacity=14) /><td colspan=32 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=33 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.01;filter:alpha(opacity=0) /><td bgcolor="#000000" style=opacity:0.35;filter:alpha(opacity=34) /><td bgcolor="#000000" style=opacity:0.80;filter:alpha(opacity=80) /><td colspan=56 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.88;filter:alpha(opacity=88) /><td bgcolor="#000000" style=opacity:0.47;filter:alpha(opacity=47) /><td bgcolor="#000000" style=opacity:0.05;filter:alpha(opacity=5) /><td colspan=33 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=35 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.04;filter:alpha(opacity=4) /><td bgcolor="#000000" style=opacity:0.29;filter:alpha(opacity=29) /><td bgcolor="#000000" style=opacity:0.55;filter:alpha(opacity=55) /><td bgcolor="#000000" style=opacity:0.78;filter:alpha(opacity=78) /><td colspan=50 bgcolor="#000000" style=opacity:0.88;filter:alpha(opacity=88) /><td bgcolor="#000000" style=opacity:0.80;filter:alpha(opacity=80) /><td bgcolor="#000000" style=opacity:0.61;filter:alpha(opacity=61) /><td bgcolor="#000000" style=opacity:0.37;filter:alpha(opacity=36) /><td bgcolor="#000000" style=opacity:0.09;filter:alpha(opacity=9) /><td colspan=35 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=38 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.01;filter:alpha(opacity=0) /><td colspan=50 bgcolor="#000000" style=opacity:0.02;filter:alpha(opacity=2) /><td bgcolor="#000000" style=opacity:0.01;filter:alpha(opacity=1) /><td colspan=38 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=128 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=2 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.16;filter:alpha(opacity=15) /><td bgcolor="#000000" style=opacity:0.25;filter:alpha(opacity=25) /><td colspan=120 bgcolor="#000000" style=opacity:0.25;filter:alpha(opacity=24) /><td bgcolor="#000000" style=opacity:0.25;filter:alpha(opacity=25) /><td bgcolor="#000000" style=opacity:0.07;filter:alpha(opacity=6) /><td colspan=2 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=2 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.64;filter:alpha(opacity=63) /><td colspan=121 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:1.00;filter:alpha(opacity=99) /><td bgcolor="#000000" style=opacity:0.25;filter:alpha(opacity=25) /><td colspan=2 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=2 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.58;filter:alpha(opacity=58) /><td colspan=121 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.97;filter:alpha(opacity=97) /><td bgcolor="#000000" style=opacity:0.20;filter:alpha(opacity=19) /><td colspan=2 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=2 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.43;filter:alpha(opacity=42) /><td colspan=121 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.91;filter:alpha(opacity=90) /><td bgcolor="#000000" style=opacity:0.12;filter:alpha(opacity=12) /><td colspan=2 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=2 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.25;filter:alpha(opacity=25) /><td bgcolor="#000000" style=opacity:1.00;filter:alpha(opacity=99) /><td colspan=120 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.78;filter:alpha(opacity=77) /><td bgcolor="#000000" style=opacity:0.02;filter:alpha(opacity=1) /><td colspan=2 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=2 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.08;filter:alpha(opacity=8) /><td bgcolor="#000000" style=opacity:0.87;filter:alpha(opacity=87) /><td colspan=120 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.52;filter:alpha(opacity=52) /><td colspan=3 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=3 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.55;filter:alpha(opacity=55) /><td colspan=119 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.95;filter:alpha(opacity=95) /><td bgcolor="#000000" style=opacity:0.18;filter:alpha(opacity=18) /><td colspan=3 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=3 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.15;filter:alpha(opacity=15) /><td bgcolor="#000000" style=opacity:0.93;filter:alpha(opacity=92) /><td colspan=118 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.63;filter:alpha(opacity=62) /><td colspan=4 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=4 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.49;filter:alpha(opacity=49) /><td colspan=117 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.91;filter:alpha(opacity=91) /><td bgcolor="#000000" style=opacity:0.15;filter:alpha(opacity=15) /><td colspan=4 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=4 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.04;filter:alpha(opacity=3) /><td bgcolor="#000000" style=opacity:0.69;filter:alpha(opacity=69) /><td colspan=115 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.99;filter:alpha(opacity=98) /><td bgcolor="#000000" style=opacity:0.35;filter:alpha(opacity=35) /><td colspan=5 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=5 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.08;filter:alpha(opacity=7) /><td bgcolor="#000000" style=opacity:0.73;filter:alpha(opacity=72) /><td colspan=113 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.98;filter:alpha(opacity=98) /><td bgcolor="#000000" style=opacity:0.45;filter:alpha(opacity=45) /><td colspan=6 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=6 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.05;filter:alpha(opacity=5) /><td bgcolor="#000000" style=opacity:0.56;filter:alpha(opacity=56) /><td bgcolor="#000000" style=opacity:0.98;filter:alpha(opacity=98) /><td colspan=110 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.88;filter:alpha(opacity=87) /><td bgcolor="#000000" style=opacity:0.33;filter:alpha(opacity=33) /><td colspan=7 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=8 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.26;filter:alpha(opacity=26) /><td bgcolor="#000000" style=opacity:0.71;filter:alpha(opacity=70) /><td bgcolor="#000000" style=opacity:0.96;filter:alpha(opacity=96) /><td colspan=106 bgcolor="#000000" /><td bgcolor="#000000" style=opacity:0.92;filter:alpha(opacity=91) /><td bgcolor="#000000" style=opacity:0.56;filter:alpha(opacity=56) /><td bgcolor="#000000" style=opacity:0.13;filter:alpha(opacity=12) /><td colspan=8 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=1><td colspan=10 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /><td bgcolor="#000000" style=opacity:0.21;filter:alpha(opacity=20) /><td bgcolor="#000000" style=opacity:0.46;filter:alpha(opacity=45) /><td bgcolor="#000000" style=opacity:0.69;filter:alpha(opacity=68) /><td bgcolor="#000000" style=opacity:0.82;filter:alpha(opacity=82) /><td colspan=100 bgcolor="#000000" style=opacity:0.84;filter:alpha(opacity=83) /><td bgcolor="#000000" style=opacity:0.79;filter:alpha(opacity=78) /><td bgcolor="#000000" style=opacity:0.62;filter:alpha(opacity=62) /><td bgcolor="#000000" style=opacity:0.38;filter:alpha(opacity=38) /><td bgcolor="#000000" style=opacity:0.13;filter:alpha(opacity=12) /><td colspan=10 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
<tr height=26><td colspan=128 bgcolor="#ffffff" style="opacity:0;filter:alpha(opacity=0)" /></tr>
</table>

Which gave me this result:

Excellent! Now, you can easily convert simple png images to html/css. So, be sure to have some fun and visit http://www.imgtocss.com ;)

Safari Overflow Hidden Problem

There may be times when you need to hide the overflow (scrollbars) being visible on a page. You can specify to have all scrollbars hidden or the x and y scroll bars separately. When trying to hide the overflow of a project I was working on I realized that the ‘overflow:hidden’ was not working on the Safari browser. This was very frustrating because it worked on all other browsers except Safari. Well, there is a very simple solution to solve this problem… All you have to do is set that element to have a relative position. For instance, if you were to specify for the body to hide the horizontal scrollbars you would want to have the following css in your stylesheet:

 
body {
	position:relative;
	overflow-x:hidden;
}

All ya have to do is set the position to relative! Hope this helps someone :)

Awesome CSS3 Buttons

In the past creating aesthetically pleasing buttons would require a little skill in photoshop, exporting the png or jpg, and then adding the button to your page. With the help of CSS3 and CSS3 compatible browsers we can get a lot more detailed in the way our buttons look and feel. There is a super helpful blog post available at zurb.com. You can checkout the post for detailed instructions on how to incorporate these awesome buttons on your page: http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba.

Home Page | Demo Page

Adding font-faces in CSS3

The common fonts used for web development are all very boring (Arial, Verdana, Times, Helvetica, etc…). Using the font-face attribute in CSS3 you can specify fonts to be used on your site. This means you can use a true-type font face located on your server; however, you will have to be cautious about licensing issues. Be sure to check out the following link to learn more about font face licensing: http://www.fonts.com/FontServices/FontEmbedding.htm. Okay, so to embed a font on your page, you will want to obviously make sure that you have added the font file to your web server, then you will need to link to the file from your CSS file:

@font-face{
	font-family: 'BleedingCowboys';
	src: url('../../../go/fonts/bleeding-cowboys.ttf') format('truetype');	
}
 
@font-face{
	font-family: 'BirthOfAHero';
	src: url('../../../go/fonts/birth-of-a-hero.ttf') format('truetype');	
}

Then in your html you can add:

<p style='font-family:BleedingCowboys; font-size:22px;'>This is the Bleeding Cowboys Font Face</p>
<p style='font-family:BirthOfAHero; font-size:22px;'>This is the Birth Of A Hero Font Face</p>

and your result will be the following:

This is the Bleeding Cowboys Font Face

This is the Birth Of A Hero Font Face

If your browser does not support the font-face attribute, then the above will be displayed as a default font.

CSS 3 Multiple backgrounds

In CSS3 you can specify for an object to contain multiple backgrounds. Using multiple backgrounds in CSS3 will allow you to overlap images or even repeat multiple images. This is absolutely fantastic. The user must be on a browser that supports multiple backgrounds; and, unfortunately it seems that the latest version of Safari is the only browser that currently supports multiple backgrounds. The following images are the images we are going to set as background to an object:

So, to add multiple backgrounds on an object we will add the following CSS:

 
.card_background
{
      background: url(http://www.tonylea.com/wp-content/uploads/2010/07/card-black-seven.png) top left no-repeat, url(http://www.tonylea.com/wp-content/uploads/2010/07/card-red-eight.png) top 20px no-repeat, url(http://www.tonylea.com/wp-content/uploads/2010/07/card-black-nine.png) top 40px no-repeat; 
      display:block; 
      height:100px; 
      width:120px;
}

And the following HTML

<span class=".card_background"></span>

This will be the final result:

RGBA and Opacity using CSS3

RGBA and Opacity features allow developers to create a tint or transparency value on an image or an object on their web interface. RGB has previously been supported in CSS; however, there is now an additional value which is the ‘A’ or alpha. So, when you set an RGBA value you will be setting Red, Green, Blue, and the Alpha value. We will begin by first of all showing the Opacity feature in CSS. As a demonstration we will apply these features to the following image:

Okay now by applying the following CSS values to the image object:

.image
{
	 filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

The image will now end up looking like this:

In this example we had specified for this object to only be shown up to 50%, we can choose any opacity amount to the object as desired. We have added a transparency value of 50%, so if there were any other elements behind this image block, then they would be visible through this object by 50 percent.

Okay, now lets try the RGBA feature. By applying the following CSS values to the image object:

.image
{
	 background: rgba(255, 99, 0, 1);
}

The image will be displayed like the following:

Alternatively if we were to give the Alpha value say 0.5 which would be 50% the rgb colors would only be shown with 50 percent transparency. The Alpha value ranges from 0 to 1. Finally applying these CSS values to the image object:

.image
{
	 background: rgba(255, 99, 0, 0.5);
}

Will result in the following:

So, just have some fun playing around with the RGBA and Opacity values used in CSS3. This is definitely a great feature for building some awesome and aesthetically pleasing web interfaces ;)

CSS 3 Drop Shadow Text

In CSS3 you can use drop shadow around divs or tables (if you still use tables). You can use these drop shadows to add a nice aesthetic look around blocks in your web interface. Check out the article on CSS 3 Drop Shadow Here. A very cool thing about CSS3 is that you can also add drop shadow effects to your text. To add a drop shadow effect to your text add the following code to your stylesheet:

.dropshadow_text
{
 
     text-shadow: rgba(0,0,0,.8) 0 2px 0;
     font-size:28px;
     color:#cccccc;
 
}

And add the following to your HTML file

<p class='dropshadow_text'>This text has a drop shadow effect!</p>

The result you will come up with is the following:

This text has a drop shadow effect!

CSS Making Your Footer Stay at the Bottom

Well, I have been working on a few projects and one thing that made me frustrated was the hassle of trying to get my footer to remain at the bottom of the page. In certain cases you will have content on a specific page that will not be the full length of the page; therefore, if the footer came right after that it might show up near the middle or the top of the page. The point is to get your footer to stay at the bottom of the page no matter the height of the page.

Problem: CSS/HTML Footer does not remain at the bottom of the page.

Solution: CSS Sticky Footer, Use the CSS and HTML code below:

CSS CODE:

/* must declare 0 margins on everything */
 
html, body, #wrap {height: 100%; margin:0; padding:0;}
 
body > #wrap {height: auto; min-height: 100%;}
 
#main {padding-bottom: 150px;}  /* must be same height as the footer */
 
#footer {position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;
	clear:both;} 
 
/* CLEAR FIX*/
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
* html .clearfix { height: 1%;}
.clearfix {display: block;}

HTML CODE:

<div id="wrap">
 
</div>
 
 
<div id="footer"></div>

There you go… It should be that Simple. Enjoy!