Layout Preto e Branco Desenhos para Blog HTML
Autor: Mariane | Publicado: 2011-03-19T11:42:00-07:00

Visualise o Template
http://disneyprogramacao.blogspot.com/2011/03/layout-preto-e-branco-desenhos-para.html
&lt;?xml version="1.0" encoding="UTF-8" ?&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;&lt;html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'&gt;
&lt;head&gt;&lt;script type='text/javascript'&gt;
// &lt;![CDATA[
var colour="#000000";
var sparkles=50;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i&lt;sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c&lt;sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c&lt;sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]&lt;shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]&lt;shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement &amp;&amp; (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement &amp;&amp; document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]&gt;
&lt;/script&gt;&nbsp;&nbsp;&lt;b:include data='blog' name='all-head-content'/&gt;&nbsp;&nbsp;&lt;title&gt;&lt;data:blog.pageTitle/&gt;&lt;/title&gt;&nbsp;&nbsp;&lt;b:skin&gt;&lt;![CDATA[/*

/* Variable definitions&nbsp;&nbsp;====================&nbsp;&nbsp; &lt;Variable name="mainBgColor" description="Main Background Color"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="color" default="#FFF" value="#FFFFFF"&gt;&nbsp;&nbsp; &lt;Variable name="mainTextColor" description="Text Color" type="color"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; default="#000" value="#000000"&gt;&nbsp;&nbsp; &lt;Variable name="postTitleColor" description="Post Title Color" type="color"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; default="#000000" value="#000000"&gt;&nbsp;&nbsp; &lt;Variable name="dateHeaderColor" description="Date Header Color"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="color" default="#FFF" value="#FFFFFF"&gt;&nbsp;&nbsp; &lt;Variable name="borderColor" description="Post Border Color" type="color"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; default="#000" value="#000000"&gt;

&nbsp;&nbsp; &lt;Variable name="mainLinkColor" description="Link Color" type="color"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; default="#000" value="#000000"&gt;&nbsp;&nbsp; &lt;Variable name="mainVisitedLinkColor" description="Visited Link Color"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="color" default="#000" value="#000000"&gt;
&nbsp;&nbsp; &lt;Variable name="titleBgColor" description="Page Header Background Color"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="color" default="#FFF" value="#FFFFFF"&gt;&nbsp;&nbsp; &lt;Variable name="titleTextColor" description="Blog Title Color"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="color" default="#000" value="#000000"&gt;
&nbsp;&nbsp; &lt;Variable name="topSidebarHeaderColor"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; description="Top Sidebar Title Color"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="color" default="#000" value="#000000"&gt;&nbsp;&nbsp; &lt;Variable name="topSidebarBgColor"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; description="Top Sidebar Background Color"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="color" default="#FFF" value="#FFFFFF"&gt;&nbsp;&nbsp; &lt;Variable name="topSidebarTextColor" description="Top Sidebar Text Color"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="color" default="#000" value="#000000"&gt;&nbsp;&nbsp; &lt;Variable name="topSidebarLinkColor" description="Top Sidebar Link Color"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="color" default="#000" value="#000000"&gt;&nbsp;&nbsp; &lt;Variable name="topSidebarVisitedLinkColor"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; description="Top Sidebar Visited Link Color"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="color" default="#000" value="#000000"&gt;&nbsp;&nbsp; &lt;Variable name="bottomSidebarHeaderColor"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; description="Bottom Sidebar Title Color"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="color" default="#000" value="#000000"&gt;
&nbsp;&nbsp; &lt;Variable name="bottomSidebarLinkColor"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; description="Bottom Sidebar Link Color"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="color" default="#000" value="#000000"&gt;&nbsp;&nbsp; &lt;Variable name="bottomSidebarVisitedLinkColor"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; description="Bottom Sidebar Visited Link Color"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="color" default="#000" value="#000000"&gt;&nbsp;&nbsp; &lt;Variable name="bodyFont" description="Text Font" type="font"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; default="normal normal 100% 'Trebuchet MS',Verdana,Arial,Sans-serif" value="normal normal 100% 'Trebuchet MS',Verdana,Arial,Sans-serif"&gt;&nbsp;&nbsp; &lt;Variable name="pageTitleFont" description="Blog Title Font" type="font"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; default="normal bold 200% 'Trebuchet MS',Verdana,Arial,Sans-serif" value="normal bold 200% 'Trebuchet MS',Verdana,Arial,Sans-serif"&gt;&nbsp;&nbsp; &lt;Variable name="descriptionFont" description="Blog Description Font" type="font"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; default="normal normal 100% 'Trebuchet MS',Verdana,Arial,Sans-serif" value="normal normal 100% 'Trebuchet MS',Verdana,Arial,Sans-serif"&gt;&nbsp;&nbsp; &lt;Variable name="headerFont" description="Sidebar Title Font" type="font"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; default="normal bold 100% 'Trebuchet MS',Verdana,Arial,Sans-serif" value="normal bold 100% 'Trebuchet MS',Verdana,Arial,Sans-serif"&gt;&nbsp;&nbsp; &lt;Variable name="postTitleFont" description="Post Title Font" type="font"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; default="normal bold 135% 'Trebuchet MS',Verdana,Arial,Sans-serif" value="normal bold 135% 'Trebuchet MS',Verdana,Arial,Sans-serif"&gt;&nbsp;&nbsp; &lt;Variable name="startSide" description="Start side in blog language"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="automatic" default="left" value="left"&gt;&nbsp;&nbsp; &lt;Variable name="endSide" description="End side in blog language"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="automatic" default="right" value="right"&gt;*/
body {&nbsp;&nbsp;background:url('http://www.snazzyspace.com/defaultimages/080808_brass-knuckles.gif') repeat #000000;&nbsp;&nbsp;margin:0;&nbsp;&nbsp;text-align:center;&nbsp;&nbsp;line-height: 1.5em;&nbsp;&nbsp;font: x-small Trebuchet MS, Verdana, Arial, Sans-serif;&nbsp;&nbsp;color:$mainTextColor;&nbsp;&nbsp;font-size/* */:/**/small;&nbsp;&nbsp;font-size: /**/small;&nbsp;&nbsp;}

/* Page Structure----------------------------------------------- *//* The images which help create rounded corners depend on the&nbsp;&nbsp;&nbsp; following widths and measurements. If you want to change&nbsp;&nbsp;&nbsp; these measurements, the images will also need to change.&nbsp;&nbsp; */#outer-wrapper {&nbsp;&nbsp;width:740px;&nbsp;&nbsp;margin:0 auto;&nbsp;&nbsp;text-align:$startSide;&nbsp;&nbsp;font: $bodyFont;&nbsp;&nbsp;}#main-wrap1 {&nbsp;&nbsp;width:485px;&nbsp;&nbsp;float:$startSide;&nbsp;&nbsp;background:#FFFFFF;&nbsp;&nbsp;margin:15px 0 0;&nbsp;&nbsp;padding:0 0 10px;&nbsp;&nbsp;color:$mainTextColor;&nbsp;&nbsp;font-size:97%;&nbsp;&nbsp;line-height:1.5em;&nbsp;&nbsp;word-wrap: break-word; /* fix for long text breaking sidebar float in IE */&nbsp;&nbsp;overflow: hidden; &nbsp; &nbsp; /* fix for long non-text content breaking IE sidebar float */&nbsp;&nbsp;}#main-wrap2 {&nbsp;&nbsp;float:$startSide;&nbsp;&nbsp;width:100%;&nbsp;&nbsp;background:#FFFFFF;&nbsp;&nbsp;padding:10px 0 0;&nbsp;&nbsp;}#main {&nbsp;&nbsp;background:#FFFFFF;&nbsp;&nbsp;padding:0;&nbsp;&nbsp;width:485px;&nbsp;&nbsp;}#sidebar-wrap {&nbsp;&nbsp;width:240px;&nbsp;&nbsp;float:$endSide;&nbsp;&nbsp;margin:15px 0 0;&nbsp;&nbsp;font-size:97%;&nbsp;&nbsp;line-height:1.5em;&nbsp;&nbsp;word-wrap: break-word; /* fix for long text breaking sidebar float in IE */&nbsp;&nbsp;overflow: hidden; &nbsp; &nbsp; /* fix for long non-text content breaking IE sidebar float */&nbsp;&nbsp;}
.main .widget {&nbsp;&nbsp;&nbsp;margin-top: 4px;&nbsp;&nbsp;width: 468px;&nbsp;&nbsp;padding: 0 13px;}
.main .Blog {&nbsp;&nbsp;margin: 0;&nbsp;&nbsp;padding: 0;&nbsp;&nbsp;width: 484px;}
/* Links----------------------------------------------- */a:link {&nbsp;&nbsp;color: $mainLinkColor;&nbsp;&nbsp;}a:visited {&nbsp;&nbsp;color: $mainVisitedLinkColor;&nbsp;&nbsp;}a:hover {&nbsp;&nbsp;color: $mainVisitedLinkColor;&nbsp;&nbsp;}a img {&nbsp;&nbsp;border-width:0;&nbsp;&nbsp;}

/* Blog Header----------------------------------------------- */#header-wrapper {&nbsp;&nbsp; &nbsp;background:#FFFFFF;&nbsp;&nbsp;margin-top:22px;&nbsp;&nbsp;margin-$endSide:0;&nbsp;&nbsp;margin-bottom:0;&nbsp;&nbsp;margin-$startSide:0;&nbsp;&nbsp;padding-top:8px;&nbsp;&nbsp;padding-$endSide:0;&nbsp;&nbsp;padding-bottom:0;&nbsp;&nbsp;padding-$startSide:0;&nbsp;&nbsp;color:$titleTextColor;&nbsp;&nbsp;}#header {&nbsp;&nbsp;background:#FFFFFF;&nbsp;&nbsp;padding:0 15px 8px;&nbsp;&nbsp;}#header h1 {&nbsp;&nbsp;margin:0;&nbsp;&nbsp;padding:10px 30px 5px;&nbsp;&nbsp;line-height:1.2em;&nbsp;&nbsp;font: $pageTitleFont;&nbsp;&nbsp;}#header a,#header a:visited {&nbsp;&nbsp;text-decoration:none;&nbsp;&nbsp;color: $titleTextColor;&nbsp;&nbsp;}#header .description {&nbsp;&nbsp;margin:0;&nbsp;&nbsp;padding:5px 30px 10px;&nbsp;&nbsp;line-height:1.5em;&nbsp;&nbsp;font: $descriptionFont;}

/* Posts----------------------------------------------- */h2.date-header {&nbsp;&nbsp;margin-top:0;&nbsp;&nbsp;margin-$endSide:28px;&nbsp;&nbsp;margin-bottom:0;&nbsp;&nbsp;margin-$startSide:43px;&nbsp;&nbsp;font-size:85%;&nbsp;&nbsp;line-height:2em;&nbsp;&nbsp;text-transform:uppercase;&nbsp;&nbsp;letter-spacing:.2em;&nbsp;&nbsp;color:#000000;&nbsp;&nbsp;}.post {&nbsp;&nbsp;margin:.3em 0 25px;&nbsp;&nbsp;padding:0 13px;&nbsp;&nbsp;border-width:1px 0;&nbsp;&nbsp;}.post h3 {&nbsp;&nbsp;margin:0;&nbsp;&nbsp;line-height:1.5em;&nbsp;&nbsp;background:url("http://www2.blogblog.com/rounders3/icon_arrow.gif") no-repeat 10px .5em;&nbsp;&nbsp;display:block;&nbsp;&nbsp;border-width:0 1px 1px;&nbsp;&nbsp;padding-top:2px;&nbsp;&nbsp;padding-$endSide:14px;&nbsp;&nbsp;padding-bottom:2px;&nbsp;&nbsp;padding-$startSide:29px;&nbsp;&nbsp;color: $postTitleColor;&nbsp;&nbsp;font: $postTitleFont;&nbsp;&nbsp;}.post h3 a, .post h3 a:visited {&nbsp;&nbsp;text-decoration:none;&nbsp;&nbsp;color: $postTitleColor;&nbsp;&nbsp;}a.title-link:hover {&nbsp;&nbsp;background-color: $borderColor;&nbsp;&nbsp;color: $mainTextColor;&nbsp;&nbsp;}.post-body {&nbsp;&nbsp;border-width:0 1px 1px;&nbsp;&nbsp;border-bottom-color:$mainBgColor;&nbsp;&nbsp;padding-top:10px;&nbsp;&nbsp;padding-$endSide:14px;&nbsp;&nbsp;padding-bottom:1px;&nbsp;&nbsp;padding-$startSide:29px;&nbsp;&nbsp;}html&gt;body .post-body {&nbsp;&nbsp;border-bottom-width:0;&nbsp;&nbsp;}.post-body {&nbsp;&nbsp;margin:0 0 .75em;&nbsp;&nbsp;}.post-body blockquote {&nbsp;&nbsp;line-height:1.3em; &nbsp;&nbsp;&nbsp;}.post-footer {&nbsp;&nbsp;background: #ffffff;&nbsp;&nbsp;margin:0;&nbsp;&nbsp;padding-top:2px;&nbsp;&nbsp;padding-$endSide:14px;&nbsp;&nbsp;padding-bottom:2px;&nbsp;&nbsp;padding-$startSide:29px;&nbsp;&nbsp;border-width:1px;&nbsp;&nbsp;font-size:100%;&nbsp;&nbsp;line-height:1.5em;&nbsp;&nbsp;color: #666666;}/*The first line of the post footer might only have floated text, so we need to give it a height.The height comes from the post-footer line-height*/.post-footer-line-1 {&nbsp;&nbsp;min-height:1.5em;&nbsp;&nbsp;_height:1.5em;}
.post-footer p {&nbsp;&nbsp;margin: 0;}html&gt;body .post-footer {&nbsp;&nbsp;border-bottom-color:transparent;&nbsp;&nbsp;}
.uncustomized-post-template .post-footer {&nbsp;&nbsp;text-align: $endSide;}
.uncustomized-post-template .post-author,.uncustomized-post-template .post-timestamp {&nbsp;&nbsp;display: block;&nbsp;&nbsp;float: $startSide;&nbsp;&nbsp;text-align:$startSide;&nbsp;&nbsp;margin-$endSide: 4px;}
.post-footer a {&nbsp;&nbsp;&nbsp;color: #456;&nbsp;}.post-footer a:hover {&nbsp;&nbsp;&nbsp;color: #234;&nbsp;}a.comment-link {&nbsp;&nbsp;/* IE5.0/Win doesn't apply padding to inline elements,&nbsp;&nbsp; &nbsp; so we hide these two declarations from it */&nbsp;&nbsp;background/* */:/**/url("http://www.blogblog.com/rounders/icon_comment_$startSide.gif") no-repeat $startSide 45%;&nbsp;&nbsp;padding-$startSide:14px;&nbsp;&nbsp;}html&gt;body a.comment-link {&nbsp;&nbsp;/* Respecified, for IE5/Mac's benefit */&nbsp;&nbsp;background:url("http://www.blogblog.com/rounders3/icon_comment_$startSide.gif") no-repeat $startSide 45%;&nbsp;&nbsp;padding-$startSide:14px;&nbsp;&nbsp;}.post img {&nbsp;&nbsp;margin-top:0;&nbsp;&nbsp;margin-$endSide:0;&nbsp;&nbsp;margin-bottom:5px;&nbsp;&nbsp;margin-$startSide:0;&nbsp;&nbsp;padding:4px;&nbsp;&nbsp;border:1px solid $borderColor;&nbsp;&nbsp;}blockquote {&nbsp;&nbsp;margin:.75em 0;&nbsp;&nbsp;border-width:1px 0;&nbsp;&nbsp;padding:5px 15px;&nbsp;&nbsp;color: $dateHeaderColor;&nbsp;&nbsp;}.post blockquote p {&nbsp;&nbsp;margin:.5em 0;&nbsp;&nbsp;}
#blog-pager-newer-link {&nbsp;&nbsp;float: $startSide;&nbsp;&nbsp;margin-$startSide: 13px;&nbsp;}
#blog-pager-older-link {&nbsp;&nbsp;float: $endSide;&nbsp;&nbsp;margin-$endSide: 13px;&nbsp;}
#blog-pager { &nbsp;&nbsp;&nbsp;&nbsp;text-align: center;&nbsp;&nbsp;}
.feed-links {&nbsp;&nbsp;&nbsp;clear: both;&nbsp;&nbsp;line-height: 2.5em;&nbsp;&nbsp;margin-$startSide: 13px;}
/* Comments----------------------------------------------- */#comments {&nbsp;&nbsp;margin:-25px 13px 0;&nbsp;&nbsp;border-width:0 1px 1px;&nbsp;&nbsp;padding-top:20px;&nbsp;&nbsp;padding-$endSide:0;&nbsp;&nbsp;padding-bottom:15px;&nbsp;&nbsp;padding-$startSide:0;&nbsp;&nbsp;}#comments h4 {&nbsp;&nbsp;margin:0 0 10px;&nbsp;&nbsp;padding-top:0;&nbsp;&nbsp;padding-$endSide:14px;&nbsp;&nbsp;padding-bottom:2px;&nbsp;&nbsp;padding-$startSide:29px;&nbsp;&nbsp;font-size:120%;&nbsp;&nbsp;line-height:1.4em;&nbsp;&nbsp;color:$postTitleColor;&nbsp;&nbsp;}#comments-block {&nbsp;&nbsp;margin-top:0;&nbsp;&nbsp;margin-$endSide:15px;&nbsp;&nbsp;margin-bottom:0;&nbsp;&nbsp;margin-$startSide:9px;&nbsp;&nbsp;}.comment-author {&nbsp;&nbsp;background:url("http://www.blogblog.com/rounders3/icon_comment_$startSide.gif") no-repeat 2px .3em;&nbsp;&nbsp;margin:.5em 0;&nbsp;&nbsp;padding-top:0;&nbsp;&nbsp;padding-$endSide:0;&nbsp;&nbsp;padding-bottom:0;&nbsp;&nbsp;padding-$startSide:20px;&nbsp;&nbsp;font-weight:bold;&nbsp;&nbsp;}.comment-body {&nbsp;&nbsp;margin:0 0 1.25em;&nbsp;&nbsp;padding-top:0;&nbsp;&nbsp;padding-$endSide:0;&nbsp;&nbsp;padding-bottom:0;&nbsp;&nbsp;padding-$startSide:20px;&nbsp;&nbsp;}.comment-body p {&nbsp;&nbsp;margin:0 0 .5em;&nbsp;&nbsp;}.comment-footer {&nbsp;&nbsp;margin:0 0 .5em;&nbsp;&nbsp;padding-top:0;&nbsp;&nbsp;padding-$endSide:0;&nbsp;&nbsp;padding-bottom:.75em;&nbsp;&nbsp;padding-$startSide:20px;&nbsp;&nbsp;}.comment-footer a:link {&nbsp;&nbsp;color: #333;&nbsp;&nbsp;}.deleted-comment {&nbsp;&nbsp;font-style:italic;&nbsp;&nbsp;color:gray;&nbsp;&nbsp;}.comment-form {&nbsp;&nbsp;padding-$startSide:20px;&nbsp;&nbsp;padding-$endSide:5px;}#comments .comment-form h4 {&nbsp;&nbsp;padding-$startSide:0px;}
/* Profile----------------------------------------------- */.profile-img {&nbsp;&nbsp;&nbsp;float: $startSide;&nbsp;&nbsp;margin-top: 5px;&nbsp;&nbsp;margin-$endSide: 5px;&nbsp;&nbsp;margin-bottom: 5px;&nbsp;&nbsp;margin-$startSide: 0;&nbsp;&nbsp;border: 4px solid $topSidebarTextColor;}
.profile-datablock {&nbsp;&nbsp;margin-top:0;&nbsp;&nbsp;margin-$endSide:15px;&nbsp;&nbsp;margin-bottom:.5em;&nbsp;&nbsp;margin-$startSide:0;&nbsp;&nbsp;padding-top:8px;}
.profile-link {&nbsp;&nbsp;&nbsp;background:url("http://www.blogblog.com/rounders3/icon_profile_$startSide.gif") no-repeat $startSide .1em;&nbsp;&nbsp;padding-$startSide:15px;&nbsp;&nbsp;font-weight:bold;}
.profile-textblock {&nbsp;&nbsp;clear: both;&nbsp;&nbsp;margin: 0;}
.sidebar .clear, .main .widget .clear {&nbsp;&nbsp;&nbsp;clear: both;}
#sidebartop-wrap {background:#FFFFFF;&nbsp;&nbsp;margin:0px 0px 15px;&nbsp;&nbsp;padding:0px 0px 10px;&nbsp;&nbsp;color:$topSidebarTextColor;&nbsp;&nbsp;}
#sidebartop-wrap2 {&nbsp;background:#FFFFFF;&nbsp;&nbsp;padding: 10px 0 0;&nbsp;&nbsp;margin:0;&nbsp;&nbsp;border-width:0;&nbsp;}
#sidebartop h2 {&nbsp;&nbsp;line-height:1.5em;&nbsp;&nbsp;color:$topSidebarHeaderColor;&nbsp;&nbsp;font: $headerFont;&nbsp;&nbsp;margin-bottom: 0.5em;}
#sidebartop a {&nbsp;&nbsp;color: $topSidebarLinkColor;}
#sidebartop a:hover {&nbsp;&nbsp;color: $topSidebarVisitedLinkColor;}#sidebartop a:visited {&nbsp;&nbsp;color: $topSidebarVisitedLinkColor;}
#sidebar a {&nbsp;&nbsp;&nbsp;color: $bottomSidebarLinkColor;}#sidebar a:hover,#sidebar a:visited {&nbsp;&nbsp;&nbsp;color: $bottomSidebarVisitedLinkColor;}
/* Sidebar Boxes----------------------------------------------- */
.sidebar .widget {&nbsp;&nbsp;&nbsp;margin:.5em 13px 1.25em;&nbsp;&nbsp;padding:0 0px;&nbsp;}
.widget-content {&nbsp;&nbsp;&nbsp;margin-top: 0.5em;&nbsp;}
#sidebarbottom-wrap1 {background:#FFFFFF;&nbsp;&nbsp;margin:0 0 15px;&nbsp;&nbsp;padding:10px 0 0;&nbsp;&nbsp;color: $titleTextColor;}
#sidebarbottom-wrap2 {&nbsp;&nbsp;background:#FFFFFF;&nbsp;&nbsp;padding:0 0 8px;}
.sidebar h2 {&nbsp;&nbsp;margin-top:0;&nbsp;&nbsp;margin-$endSide:0;&nbsp;&nbsp;margin-bottom:.5em;&nbsp;&nbsp;margin-$startSide:0;&nbsp;&nbsp;padding:0 0 .2em;&nbsp;&nbsp;line-height:1.5em;&nbsp;&nbsp;font:$headerFont;}
.sidebar ul {&nbsp;&nbsp;list-style:none;&nbsp;&nbsp;margin:0 0 1.25em;&nbsp;&nbsp;padding:0;}
.sidebar ul li {&nbsp;&nbsp;background:url("http://www2.blogblog.com/rounders3/icon_arrow_sm.gif") no-repeat 2px .25em;&nbsp;&nbsp;margin:0;&nbsp;&nbsp;padding-top:0;&nbsp;&nbsp;padding-$endSide:0;&nbsp;&nbsp;padding-bottom:3px;&nbsp;&nbsp;padding-$startSide:16px;&nbsp;&nbsp;margin-bottom:3px;&nbsp;&nbsp;line-height:1.4em;&nbsp;&nbsp;}.sidebar p {&nbsp;&nbsp;margin:0 0 .6em;&nbsp;&nbsp;}
#sidebar h2 {&nbsp;&nbsp;color: $bottomSidebarHeaderColor;&nbsp;}
/* Footer----------------------------------------------- */#footer-wrap1 {&nbsp;&nbsp;clear:both;&nbsp;&nbsp;margin:0 0 10px;&nbsp;&nbsp;padding:15px 0 0;&nbsp;&nbsp;}#footer-wrap2 {&nbsp;&nbsp;background:#FFFFFF;&nbsp;&nbsp;color:$titleTextColor;&nbsp;&nbsp;}#footer {background:#FFFFFF;&nbsp;&nbsp;padding:8px 15px;&nbsp;&nbsp;}#footer hr {display:none;}#footer p {margin:0;}#footer a {color:$titleTextColor;}#footer .widget-content {&nbsp;&nbsp;margin:0;}
/** Page structure tweaks for layout editor wireframe */body#layout #main-wrap1,body#layout #sidebar-wrap,body#layout #header-wrapper {&nbsp;&nbsp;margin-top: 0;}
body#layout #header, body#layout #header-wrapper,body#layout #outer-wrapper {&nbsp;&nbsp;&nbsp;margin-$startSide:0,&nbsp;&nbsp;margin-$endSide: 0;&nbsp;&nbsp;padding: 0;}
body#layout #outer-wrapper {&nbsp;&nbsp;&nbsp;width: 730px;}
body#layout #footer-wrap1 {&nbsp;&nbsp;&nbsp;padding-top: 0;&nbsp;}
.SnazzyBar { background-color:#ff6600;color:#114477;font-family: Arial, Helvetica, sans-serif;font-size:10px;text-align:left;font-weigth:bold;padding:2px 2px 2px 6px;}.SnazzyBar a {color:#114477;}.SnazLogo {float:right;padding-right:9px;}
]]&gt;&lt;/b:skin&gt;&lt;/head&gt;
&lt;body&gt;
&lt;div class="SnazzyBar" style="cursor:pointer;"&gt;&lt;div class="SnazLogo"&gt;&lt;span style="position:relative;top:-1px;left:0px"&gt;&lt;/span&gt; &lt;a href="http://www.snazzyspace.com"&gt;SNAZZYSPACE.COM&lt;/a&gt;&lt;/div&gt;&nbsp;&nbsp; &nbsp;&lt;a href="http://www.snazzyspace.com/blogger-templates/page/1"&gt;BLOGGER TEMPLATES&lt;/a&gt; AND &lt;a href="http://www.snazzyspace.com/twitter-backgrounds/page/1"&gt;TWITTER BACKGROUNDS&lt;/a&gt; &lt;span style="position:relative;top:-1px;left:0px;"&gt;&lt;/span&gt; &lt;/div&gt;
&nbsp;&nbsp;&lt;div id='outer-wrapper'&gt;
&nbsp;&nbsp;&lt;div id='header-wrapper'&gt;&nbsp;&nbsp; &nbsp;&lt;b:section class='header' id='header' maxwidgets='1'&gt;&lt;b:widget id='Header1' locked='true' title='Blogger Templates (Header)' type='Header'/&gt;&lt;/b:section&gt;&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&lt;div id='crosscol-wrapper' style='text-align:center'&gt;&nbsp;&nbsp; &nbsp;&lt;b:section class='crosscol' id='crosscol' showaddelement='no'/&gt;&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&lt;div id='main-wrap1'&gt;&lt;div id='main-wrap2'&gt;&nbsp;&nbsp; &nbsp;&lt;b:section class='main' id='main' showaddelement='no'&gt;&lt;b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/&gt;&lt;/b:section&gt;&nbsp;&nbsp;&lt;/div&gt;&lt;/div&gt;
&nbsp;&nbsp;&lt;div id='sidebar-wrap'&gt;
&nbsp;&nbsp; &nbsp;&lt;div id='sidebartop-wrap'&gt;&lt;div id='sidebartop-wrap2'&gt;&nbsp;&nbsp; &nbsp; &nbsp;&lt;b:section class='sidebar' id='sidebartop'&gt;&lt;b:widget id='Followers1' locked='false' title='Followers' type='Followers'/&gt;&lt;b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/&gt;&lt;b:widget id='Profile1' locked='false' title='About Me' type='Profile'/&gt;&lt;/b:section&gt;&nbsp;&nbsp; &nbsp;&lt;/div&gt;&lt;/div&gt;
&nbsp;&nbsp; &nbsp;&lt;div id='sidebarbottom-wrap1'&gt;&lt;div id='sidebarbottom-wrap2'&gt;&nbsp;&nbsp; &nbsp; &nbsp;&lt;b:section class='sidebar' id='sidebar' preferred='yes'/&gt;&nbsp;&nbsp; &nbsp;&lt;/div&gt;&lt;/div&gt;
&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&lt;div id='footer-wrap1'&gt;&lt;div id='footer-wrap2'&gt;&nbsp;&nbsp; &nbsp;&lt;b:section class='footer' id='footer'/&gt;&nbsp;&nbsp;&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;