// 300x450px widget
// styles
style = '<style type="text/css"> \
#HollrrWidget300x450 { width:300px; text-align:center;font-size:10px; line-height:13px; position:relative; margin-bottom:10px; font-family:Verdana, sans-serif; } \
#HollrrWidget300x450 img { border:0; } \
#HollrrWidget300x450 * { font-size:11px;} \
#HollrrWidget300x450 table { } \
#HollrrWidget300x450 a, #HollrrWidget300x450 table td a { color:#0171bd; text-decoration:none; } \
#HollrrWidget300x450 a:hover, , #HollrrWidget300x450 table td a:hover { text-decoration:underline; } \
#HollrrWidget300x450 #HollrrHead { display:block; height:36px; width:300px;  background-image:url(http://hollrr.com/images/widget/widget.300x450.top.blue.png); _background-image:none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://hollrr.com/images/widget/widget.300x450.top.blue.png", sizingMethod="scale"); \
position:relative; z-index:1; _top:2px; } \
#HollrrWidget300x450 #HollrrTableHeader { z-index:10; position:relative; left:-2px; margin-top:-31px; margin-bottom:10px; width:100%; } \
#HollrrWidget300x450 #HollrrWrapper { text-align:left; margin:0 auto; width:300px; background-image:url(http://hollrr.com/images/widget/widget.300x450.bg.blue.png); background-repeat:repeat-y; } \
#HollrrWidget300x450 #HollrrInnerWrapper { margin:0px 7px; } \
#HollrrWidget300x450 #HollrrTopLabel { padding-top:3px;text-align:left; font-weight:bold; font-size:17px; color:#333; } \
#HollrrWidget300x450 #HollrrProduct { margin:0px 5px; } \
#HollrrWidget300x450 #HollrrProductInfo { margin:0px 5px; width: 140px; margin-bottom:10px; }  \
#HollrrWidget300x450 #HollrrProductName { font-size:11px;text-align:center;font-weight:bold; margin:4px 0px; font-size:15px; text-align:left; } \
#HollrrWidget300x450 #HollrrProductImage { vertical-align:top; width:100px;  } \
#HollrrWidget300x450 #HollrrProductDescription {  line-height:13px; padding:3px 5px; } \
#HollrrWidget300x450 #HollrrProductUrl { text-align:right; padding:0px 5px; } \
#HollrrWidget300x450 #HollrrHollrr { margin:5px; } \
#HollrrWidget300x450 #HollrrHollrrAuthor { font-weight:bold; } \
#HollrrWidget300x450 #HollrrHollrrUrl { text-align:right; } \
#HollrrWidget300x450 #HollrrComments { width:276px; _width:285px; margin:0px 0px; padding:2px 4px; background-color:#E3EFFB; overflow:hidden; } \
#HollrrWidget300x450 #HollrrComments table td{ padding:3px;} \
#HollrrWidget300x450 #HollrrCommentsLabel { color:#0171bd; font-weight:bold; } \
#HollrrWidget300x450 .HollrrComment { } \
#HollrrWidget300x450 .HollrrCommentAuthor { font-weight:bold; } \
#HollrrWidget300x450 #HollrrFooter { } \
#HollrrWidget300x450 #HollrrFooter a { display:block; height:52px; width:300px; background-image:url(http://hollrr.com/images/widget/widget.300x450.bottom.blue.png); _background-image:none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://hollrr.com/images/widget/widget.300x450.bottom.blue.png", sizingMethod="scale"); } \
#HollrrWidget300x450 #HollrrCommentInfo { width: 100%} \
#HollrrWidget300x450 #HollrrCommentLinks { text-align:right; } \
</style>'
// html content
html = '\
<!-- header --> \
<div id="HollrrWidget300x450"><div id="HollrrHead"></div> \
<!-- wrapper --> \
<div id="HollrrWrapper"> \
<!--  inner wrapper --> \
<div id="HollrrInnerWrapper"> \
<table id="HollrrTableHeader"><tr><td rowspan="2"><img alt="SGRecommends" class="size_smaller twitter_image" src="http://tweetimag.es/i/Sgrecommends_b" /></td><td id="HollrrTopLabel">I love this product!</td></tr><tr> \
<td><div id="HollrrProductName">ÜberTwitter </div></td></table> \
<div id="HollrrProductDescription"> Twitter application for BlackBerry. Post photos direct to TweetPhoto ( http://www.tweetphoto.com ) </div> \
<div id="HollrrProductUrl"><a href="http://hollrr.com/u/ImD4nv" target="_blank">website</a></div> \
<!--  product info --> \
<table id="HollrrProduct"><tr><td id="HollrrProductImage"><img alt="Ubertwitter_small" class="size_small" src="http://s3.amazonaws.com/hollrr/public/data/14066/UberTwitter_small.JPG" /></td><td style="vertical-align:top"> \
<div id="HollrrHollrr"> \
<span id="HollrrHollrrAuthor"> \
SentosaGirl:</span> \
 \
<div id="HollrrHollrrUrl"><a href="http://hollrr.com/ImD4nv">more</a></div> </div> \
</td></tr></table> \
<table id="HollrrProductInfo"><tr><td><span><img src="http://hollrr.com/images/star.off.white.gif" alt="star" /><img src="http://hollrr.com/images/star.off.white.gif" alt="star" /><img src="http://hollrr.com/images/star.off.white.gif" alt="star" /><img src="http://hollrr.com/images/star.off.white.gif" alt="star" /><img src="http://hollrr.com/images/star.off.white.gif" alt="star" /></span></td></tr></table> \
<!-- comments --> \
<!--  description --> \
<div id="HollrrComments"> \
<div id="HollrrCommentsLabel">Comments </div> \
<table> \
<tr><td><img alt="Default_photo" class="size_tiny default_tiny" src="http://hollrr.com/images/default_photo.png"  style="width:25px" /></td><td> \
<div class="HollrrComment"> \
<span class="HollrrCommentAuthor"> \
  \
</span> \
No comments yet. Be first!  \
<a target="javascript:void()" href="http://hollrr.com/products/2385#6231">&gt;&gt;&gt;</a></div> \
</td></tr></table> \
  <table id="HollrrCommentInfo"><tr><td><span><img src="http://hollrr.com/images/star.off.blue.gif" alt="star" /><img src="http://hollrr.com/images/star.off.blue.gif" alt="star" /><img src="http://hollrr.com/images/star.off.blue.gif" alt="star" /><img src="http://hollrr.com/images/star.off.blue.gif" alt="star" /><img src="http://hollrr.com/images/star.off.blue.gif" alt="star" /></span></td><td id="HollrrCommentLinks"> <a target="javascript:void()" href="http://hollrr.com/products/2385#6231">add comment</a> | <a target="javascript:void()" href="http://hollrr.com//products/2385">more comments</a> </td></tr></table> \
</div> <!-- #HollrrComments> --> \
<!-- inner wrapper --> \
</div> \
<!-- wrapper --> \
</div> \
<!-- footer --> \
<div id="HollrrFooter"><a href="http://hollrr.com/"></a></div> \
</div> \
'


// render both
document.write(style)
document.write(html)

