Настройка стилей для меню Sooperfich

Все хаки в шаблон "Корпорация чудеса"
Файл шаблона Blogger со скриптами Sooperfish

Это добавления в стили (из "Добавить стили" в дизайнере шаблонов). Их надо доработать. Хотелось бы использовать переменные шаблона, чтобы можно было регулировать углы, шрифты, цвета, градиенты вместе с шаблоном..., еще надо подобрать свойство "zoom"
.content-inner {float: right;}
#navbar {height: 0px; visibility: hidden; display: none;}
#header {height: 0px; visibility: hidden; display: none;}
div#HTML9 ul#nav {
left: 20px;
position: fixed;
top: 10px;
}
#HTML9 ul li {
padding: 0px 0px ;
}
ul#nav li a {
background: rgba(0, 0, 0, 0.009219);
color: #595959;
}
ul#nav > li > a, ul#nav li ul{
-webkit-box-shadow: rgba(0, 0, 0, 0.199219) 0px 0px 10px;
background: rgba(242, 242, 241, 0.899219);

border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
color: #595959;
font-family: 'Lucida Sans', 'Century Gothic', 'Franklin Gothic Book',
Franklin Gothic', helvetica, arial, verdana, sans;

text-decoration: none;
hover: red;
}
ul#nav > li {
background: rgba(197, 197, 196, 0.999219);
}
ul#nav{
border: 0px ;
float: left;
font-size: 100%;
}
ul#nav ul{
border: 0px ;
float: left;
font-size: 105%;
zoom: 0,5;
}
#HTML9 > ul > li {
padding: 1px 1px ;
color: #3D9AD0;

}

Это скрипт с настройками из виджета в нижней части страницы.
<script type="text/javascript">
$(document).ready(function() {
$('ul.sf-menu').sooperfish({
dualColumn : 6, //if a submenu has at least this many items it will be divided in 2 columns
tripleColumn : 8, //if a submenu has at least this many items it will be divided in 3 columns
hoverClass : 'sfHover',
delay : 500, //make sure menus only disappear when intended, 500ms is advised by Jacob Nielsen
animationShow : {width:'show',height:'show',opacity:'show'},
speedShow : 750,
easingShow : 'easeOutBounce',
animationHide : {width:'hide',height:'hide',opacity:'hide'},
speedHide : 300,
easingHide : 'easeInOvershoot',
autoArrows : true
});
});
</script>

А это фрагмент HTML-кода меню Sooperfish со страницы.
<ul class="sf-menu" id="nav">  /* Главное меню
<li class="current">
<a href="http://realaudio.rferl.org/ram.mp3">Fruits by Color</a>
<ul>  /* Первый блок подменю 
<li>
<a href="#aa">All fruits with drawings and photos</a>
</li>
<li class="current">
<a href="#ab">Red Fruits</a>
<ul> /* Второй блок подменю 
<li class="current"><a href="#">Red Apples</a></li>
<li><a href="#aba">Red Grapes</a></li>
<li><a href="#abc">Cherries</a></li>
<li><a href="#abb">Strawberries</a>
<ul> /* Третий  блок подменю 
<li class="current"><a href="#">Dutch Strawberries</a></li>
<li><a href="#aba">French Strawberries</a></li>
<li><a href="#abb">German Strawberries</a></li>
<li><a href="#abc">American Strawberries</a></li>
<li><a href="#abd">Scandinavian Strawberries</a></li>
</ul>  /* Третий  блок подменю окончание
</li>
<li><a href="#abd">Berries</a></li>
<li><a href="#abd">Cherry Tomatoes</a></li>
</ul>  /* Второй блок подменю окончание
</li>
............

Это стили форматирования виджета блока
темы "Корпорация Чудеса".
 Тени, границы, скругление углов.
.main-inner .widget {
background-color: #FEFDFA;
border: 1px solid #AAB123;
padding: 0 15px 15px;
margin: 20px -16px;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-goog-ms-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-goog-ms-border-radius: 5px;
border-radius: 5px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
}

}