1.Как "прикрутить" всплывающее боковое меню к штатному шаблону "Корпорация Чудеса"

В этом году в панели управления Blogger появился сервис дизайна шаблонов. На основании предустановленных шаблонов теперь можно строить полноценный качественный дизайн... Хочется написать об этом, но некогда..., да и лучше сначала "показать", что можно сделать, а потому ограничусь промежуточным, но очень важным постом о хаках CSS для того, чтобы прилепить jQuery SooperFish Multi-Column Animated Drop-down меню к боковой стенке окна броузера (т.е. сделать меню неподвижным. (Меню можно посмотреть и скачать, если кликнуть по картинке).
Итак, начнем с HTML шаблона виджета темы Blogger`a

Это виджет в футере
<footer>
<div class='footer-outer'>
<div class='footer-cap-top cap-top'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
<div class='fauxborder-left footer-fauxborder-left'>
<div class='fauxborder-right footer-fauxborder-right'
></div>
<div class='region-inner footer-inner'>
<div class='foot section' id='footer-1'><
div class='widget HTML' id='HTML9'>
<div class='widget-content'>
<ul class="sf-menu" id="nav">
.............

Виджет в правой боковой панели
<div class='column-right-outer'>
<div class='column-right-inner'>
<aside>
<div class='sidebar section' id='sidebar-right-1'
><div class='widget HTML' id='HTML2'>
<div class='widget-content'>
<ul class="sf-menu" id="nav">

Виджет (то, что можно перемещать в разные места шаблона) определяется стилем только двух тегов div, причем? в первом определены и ID и class, а во втором только class, но для обоих шаблонов мы можем использовать ID для форматирования..., хотя, надо еще проверить, вдруг в штатном шаблоне есть стили вроде #HTML...
Открываем во вкадке "Дизайн" страницу "Изменить HTML" и ищем на странице сочетание "#HTML", пусто..., а теперь "widget HTML"

/* Widgets (Элемент штатной CSS шаблона)
----------------------------------------------- */
.main-inner .section {
margin: 0 27px;
padding: 0;
}
.main-inner .column-left-outer,
.main-inner .column-right-outer {
margin-top: $(widget.outer.margin.top);
}
#layout .main-inner .column-left-outer,
#layout .main-inner .column-right-outer {
margin-top: 0;
}
.main-inner .column-left-inner,
.main-inner .column-right-inner {
background: $(widget.outer.background.color)
$(widget.outer.background.gradient) repeat 0 0;

-moz-box-shadow: 0 0 $(outer.shadow.spread) rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 $(outer.shadow.spread) rgba(0, 0, 0, .2);
-goog-ms-box-shadow: 0 0 $(outer.shadow.spread) rgba(0, 0, 0, .2);
box-shadow: 0 0 $(outer.shadow.spread) rgba(0, 0, 0, .2);

-moz-border-radius: $(widget.border.radius);
-webkit-border-radius: $(widget.border.radius);
-goog-ms-border-radius: $(widget.border.radius);
border-radius: $(widget.border.radius);
}

#layout .main-inner .column-left-inner,
#layout .main-inner .column-right-inner {
margin-top: 0;
}

.sidebar .widget {
font: $(widget.font);
color: $(widget.text.color);
}

.sidebar .widget a:link {
color: $(widget.link.color);
}

.sidebar .widget a:visited {
color: $(widget.link.visited.color);
}

.sidebar .widget a:hover {
color: $(widget.link.hover.color);
}

.sidebar .widget h2 {
text-shadow: 0 0 $(title.shadow.spread) #000000;
}

.main-inner .widget {
background-color: $(widget.background.color);
border: 1px solid $(widget.border.color);
padding: 0 $(widget.padding.side) 15px;
margin: 20px -16px;

-moz-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
-goog-ms-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
-moz-border-radius: $(widget.border.radius);
-webkit-border-radius: $(widget.border.radius);
-goog-ms-border-radius: $(widget.border.radius);
border-radius: $(widget.border.radius);
}
.main-inner .widget h2 {
margin: 0 -$(separator.outdent);
padding: .6em $(separator.outdent) .5em;
border-bottom: 1px solid $(widget.border.bevel.color);
}
.footer-inner .widget h2 {
padding: 0 0 .4em;
border-bottom: 1px solid $(widget.border.bevel.color);
}
.main-inner .widget h2 + div, .footer-inner .widget h2 + div {
border-top: $(title.separator.border.size) solid $(widget.border.color);
padding-top: $(widget.padding.top);
}
.main-inner .widget .widget-content {
margin: 0 -$(separator.outdent);
padding: 7px $(separator.outdent) 0;
}
.main-inner .widget ul, .main-inner .widget #ArchiveList ul.flat {
margin: -$(widget.padding.top) -15px 0;
padding: 0;
list-style: none;
}
.main-inner .widget #ArchiveList {
margin: -$(widget.padding.top) 0 0;
}
.main-inner .widget ul li, .main-inner .widget #ArchiveList ul.flat li {
padding: .5em 15px;
text-indent: 0;

color: $(widget.alternate.text.color);
border-top: $(list.separator.border.size) solid $(widget.border.color);
border-bottom: 1px solid $(widget.border.bevel.color);
}
.main-inner .widget #ArchiveList ul li {
padding-top: .25em;
padding-bottom: .25em;
}

.main-inner .widget ul li:first-child, .main-inner .widget
#ArchiveList ul.flat li:first-child {
border-top: none;
}
.main-inner .widget ul li:last-child, .main-inner .widget
#ArchiveList ul.flat li:last-child {
border-bottom: none;
}
.post-body {
position: relative;
}
.main-inner .widget .post-body ul {
padding: 0 2.5em;
margin: .5em 0;

list-style: disc;
}
.main-inner .widget .post-body ul li {
padding: 0.25em 0;
margin-bottom: .25em;
color: $(body.text.color);
border: none;
}
.footer-inner .widget ul {
padding: 0;
list-style: none;
}
.widget .zippy {
color: $(widget.alternate.text.color);
}

Стили  <div class='widget HTML' id='HTML2'> 
для виджета в правой боковой панели (с границей и тенями)
(показывает Firebug)
.main-inner .widget {
-webkit-box-shadow: rgba(0, 0, 0, 0.199219) 0px 0px 20px;
background-color: #FEFDFA;
border: 1px solid #AAB123;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
margin: 20px -16px;
padding: 0px 15px 15px;
}
.sidebar .widget {
color: #333;
font: normal normal normal 14px/normal Arial,
Tahoma, Helvetica, FreeSans, sans-serif;
}
.widget {
line-height: 1.4;
}
.widget {
margin: 30px 0px;
}
.content-outer, .header-outer, .tabs-outer,
.main-outer, .main-inner, .footer-outer, .post,
.comments, .widget, .date-header, .inline-ad {
min-height: 0px;
position: relative;
}
user agent stylesheet
div {
display: block;
}
Inherited from body
body {
color: #333;
font: normal normal normal 13px/normal Arial,
Tahoma, Helvetica, FreeSans, sans-serif;
}

Стили тега <div class='widget HTML' id='HTML9'> 
для ФУТЕРА (без границ и теней) (показывает Firebug)
element.style {
left: 20px;
position: fixed;
top: 100px;
}
Matched CSS Rules
.section:first-child .widget:first-child {
margin-top: 0px;
}
.widget {
line-height: 1.4;
}
.widget {
margin: 30px 0px;
}
.content-outer, .header-outer, .tabs-outer, .main-outer,
.main-inner, .footer-outer, .post, .comments, .widget,
.date-header, .inline-ad {
min-height: 0px;
position: relative;
}
user agent stylesheet
div {
display: block;
}
Inherited from div.footer-outer
.footer-outer {
color: #333;
}
Inherited from body
body {
color: #333;
font: normal normal normal 13px/normal Arial, Tahoma,
Helvetica, FreeSans, sans-serif;
}

Так, вроде бы все логично. Форматирование виджета долэно определятся в той области шаблона, куда он помещен... Т.о. мы можем просто задать цепочку форматирование начиная с ID виджета.
А как подстроится под переменные форматирования Blogger? Вот примеры из шаблона:

<Variable name="widget.padding.top" description="Widget Padding Top" type="length" default="8px" value="8px"/>
<Variable name="widget.padding.side" description="Widget Padding Side" type="length" default="15px" value="15px"/>
<Variable name="widget.outer.margin.top" description="Widget Top Margin" type="length" default="0" value="0"/>
<Variable name="widget.outer.background.gradient" description="Gradient" type="url" default="none" value="none"/>
<Variable name="widget.border.radius" description="Gadget Border Radius" type="length" default="0" value="5px"/>
<Variable name="outer.shadow.spread" description="Outer Shadow Size" type="length" default="0" value="0"/>