Blogger Layouts

Author

Message

Keron James

Posted: 11/8/2010

Hi I'm trying to alter the code to add a a 300X250 at the top of the side bar and continue on with two separate vertical side bars at the bottom. How do i do this? Artisteer only seem to generate two side bars at different widths.

Endy

Posted: 11/9/2010

Quote message

You can make a 2 column template with a 300 px sidebar or whatever dimension you want, and then you can split this sidebar in 2 columns. For the 2 columns you will have to do this:

go to layout > Edit HTML and search :

body#layout .art-sidebar1{          



 width: 25%;        



 }

after this line add:

#sidebar-top{



clear:both;



}



#sidebar-right{



width:142px;



float:right;



word-wrap:break-word;



overflow:hidden;



}



#sidebar-left{



width:143px;



float:left;



word-wrap:break-word;



overflow:hidden;



}

change the width:143px; with your own dimensions of the sidebars
you can change columns width in percentages, so if you change the sidebar width the two columns will be sized correctly, without modifying them manually.

width: 50% or whatever you like

After that search:

<b:section class='art-layout-cell art-sidebar1' id='sidebar1' preferred='yes'>

Change : id='sidebar1' to id='sidebar-right'

paste the folowing lines :

<b:section class='sidebar' id='sidebar-top'/>



<b:section class='sidebar' id='sidebar-left'/>

before the :

<b:section class='art-layout-cell art-sidebar1' id='sidebar1' preferred='yes'>

Save your template and you are done.

here you have a demo :

http://548621.blogspot.com/

Keron J

Posted: 11/9/2010

Quote message

Thx alot eddie however, i did everything you said and this is the layout that i'm constantly getting ==> http://img580.imageshack.us/img580/6654/layoutxf.jpg

I wish artisteer could update their layout tabs to include 300X250 squares in addition to vertical sidebars

keronJ

Posted: 11/9/2010

Quote message

Eddy*

Endy

Posted: 11/9/2010

Quote message

change the:

<b:section class='art-layout-cell art-sidebar1' id='sidebar-right' preferred='yes'>

to:

<b:section class='sidebar' id='sidebar-right' preferred='yes'>

it will align the columns better.

KeronJ

Posted: 11/10/2010

Quote message

Hi Endy i did what you said however i'm still getting the same layout in the image that i put up in my previous post. Do you know if artisteer woudl release an update to include the layout requested above?

Endy

Posted: 11/10/2010

Quote message

Unfortunately I do not think they will release any updates. If you want, give me your blog template, to see what's wrong with the layout.

KeronJ

Posted: 11/11/2010

Quote message

Hi Endy This is my template

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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'>
<head>
<b:include data='blog' name='all-head-content'/>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[

/* begin Page */

/* Generated with Artisteer version 2.3.0.23326, file checksum is D7C5768C. */

body
{
margin: 0 auto;
padding: 0;
background-color: #6E6E6E;
}

#art-main
{
position: relative;
width: 100%;
left: 0;
top: 0;
}

#art-page-background-simple-gradient
{
position: absolute;
background-image: url('http://lh3.ggpht.com/_Ij2NhP7tfkA/TNvibF2v-BI/AAAAAAAAAu8/JwsW72mKIhY/Page-BgSimpleGradient.jpg');
background-repeat: repeat-x;
top:0;
width: 100%;
height: 900px;
}

.cleared
{
float: none;
clear: both;
margin: 0;
padding: 0;
border: none;
font-size:1px;
}

form
{
padding:0 !important;
margin:0 !important;
}

table.position
{
position: relative;
width: 100%;
table-layout: fixed;
}

#navbar
{
position: relative;
z-index:10;
}
#comments{
padding:0 15px 15px 15px;
}

#ArchiveList ul li
{
text-indent: -10px !important;
padding:0 0 0 15px;
}

.profile-datablock, .profile-textblock {
margin:0 0 .75em;
line-height:1.4em;
}
.profile-img {
float: left;
margin-top: 0;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 0;
border: 5px solid #889977;
}
.profile-data {
font-weight: bold;
}

.blog-pager{
margin-left:15px;
}

.post-feeds{
margin-left:15px;
}

.blog-feeds
{
margin-left:15px;
}

/* for Blogger Page Elements */

body#layout div.art-Header{
height: auto;
width: 100%;
}
body#layout .art-contentLayout{
margin-top: 18px;
padding-top: 2px;
width: 100%
}

body#layout .art-Sheet{
width: 100%;
}

body#layout .art-Footer{
width: 100%;
}

body#layout .art-sidebar1{
width: 25%;
}

body#layout .art-sidebar2{
width: 25%;
}

body#layout .art-content{
width: 50%;
}

body#layout .art-Footer .art-Footer-text{
height: 85px;
}

body#layout .art-BlockContent-body{
padding: 0;
}

body#layout .art-Block-body{
padding: 0;
}

body#layout .art-nav{
height: auto;
}

/* search results */

#uds-searchControl .gsc-results, #uds-searchControl .gsc-tabhActive
{
background-color: transparent !important;
}/* end Page */

/* begin Box, Sheet */
.art-Sheet
{
position:relative;
z-index:0;
margin:0 auto;
width: 1000px;
min-width:69px;
min-height:69px;
}

.art-Sheet-body
{
position: relative;
z-index: 1;
padding: 7px;
}

.art-Sheet-tr, .art-Sheet-tl, .art-Sheet-br, .art-Sheet-bl, .art-Sheet-tc, .art-Sheet-bc,.art-Sheet-cr, .art-Sheet-cl
{
position:absolute;
z-index:-1;
}

.art-Sheet-tr, .art-Sheet-tl, .art-Sheet-br, .art-Sheet-bl
{
width: 96px;
height: 96px;
background-image: url('http://lh5.ggpht.com/_Ij2NhP7tfkA/TNvib8EebsI/AAAAAAAAAvA/FFRltutWbo8/s320/Sheet-s.png');
}

.art-Sheet-tl
{
top:0;
left:0;
clip: rect(auto, 48px, 48px, auto);
}

.art-Sheet-tr
{
top: 0;
right: 0;
clip: rect(auto, auto, 48px, 48px);
}

.art-Sheet-bl
{
bottom: 0;
left: 0;
clip: rect(48px, 48px, auto, auto);
}

.art-Sheet-br
{
bottom: 0;
right: 0;
clip: rect(48px, auto, auto, 48px);
}

.art-Sheet-tc, .art-Sheet-bc
{
left: 48px;
right: 48px;
height: 96px;
background-image: url('http://lh6.ggpht.com/_Ij2NhP7tfkA/TNvicF9mUtI/AAAAAAAAAvE/6WSCTAM9rug/s320/Sheet-h.png');
}

.art-Sheet-tc
{
top: 0;
clip: rect(auto, auto, 48px, auto);
}

.art-Sheet-bc
{
bottom: 0;
clip: rect(48px, auto, auto, auto);
}

.art-Sheet-cr, .art-Sheet-cl
{
top: 48px;
bottom: 48px;
width: 96px;
background-image: url('http://lh5.ggpht.com/_Ij2NhP7tfkA/TNvicZjsnOI/AAAAAAAAAvI/ZNrSpcp8Fig/s320/Sheet-v.png');
}

.art-Sheet-cr
{
right:0;
clip: rect(auto, auto, auto, 48px);
}

.art-Sheet-cl
{
left:0;
clip: rect(auto, 48px, auto, auto);
}

.art-Sheet-cc
{
position:absolute;
z-index:-1;
top: 48px;
left: 48px;
right: 48px;
bottom: 48px;
background-color: #FFFFFF;
}

.art-Sheet
{
margin-top: -7px !important;
}

#art-page-background-simple-gradient, #art-page-background-gradient, #art-page-background-glare
{
min-width:1000px;
}

/* end Box, Sheet */

/* begin Header */
div.art-Header
{
margin: 0 auto;
position: relative;
z-index:0;
width: 986px;
height: 150px;
}

div.art-Header-jpeg
{
position: absolute;
z-index:-1;
top: 0;
left: 0;
width: 986px;
height: 150px;
background-image: url('http://lh6.ggpht.com/_Ij2NhP7tfkA/TNvicqbgNtI/AAAAAAAAAvM/wEosZqdD5ac/Header.jpg');
background-repeat: no-repeat;
background-position: center center;
}
/* end Header */

/* begin Logo */
.art-Logo
{
display : block;
position: absolute;
left: 404px;
top: 54px;
width: 582px;
}

h1.art-Logo-name
{
display: block;
text-align: left;
}

h1.art-Logo-name, h1.art-Logo-name a, h1.art-Logo-name a:link, h1.art-Logo-name a:visited, h1.art-Logo-name a:hover
{
font-family:"Copperplate Gothic Light",Arial, Helvetica, Sans-Serif;
font-size: 40px;
font-style: normal;
font-weight: normal;
text-decoration: none;
font-variant: normal;
padding:0;
margin:0;
color: #454545 !important;
}

/* end Logo */

/* begin Menu */
/* menu structure */

.art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover
{
text-align:left;
text-decoration:none;
outline:none;
letter-spacing:normal;
word-spacing:normal;
}

.art-menu, .art-menu ul
{
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
display: block;
}

.art-menu li
{
margin: 0;
padding: 0;
border: 0;
display: block;
float: left;
position: relative;
z-index: 5;
background:none;
}

.art-menu li:hover
{
z-index: 10000;
white-space: normal;
}

.art-menu li li
{
float: none;
}

.art-menu ul
{
visibility: hidden;
position: absolute;
z-index: 10;
left: 0;
top: 0;
background:none;
}

.art-menu li:hover>ul
{
visibility: visible;
top: 100%;
}

.art-menu li li:hover>ul
{
top: 0;
left: 100%;
}

.art-menu:after, .art-menu ul:after
{
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
.art-menu, .art-menu ul
{
min-height: 0;
}

.art-menu ul
{
background-image: url(http://lh5.ggpht.com/_Ij2NhP7tfkA/TNvifXR0HVI/AAAAAAAAAwE/7h79vDPKG-A/s320/spacer.gif);
padding: 10px 30px 30px 30px;
margin: -10px 0 0 -30px;
}

.art-menu ul ul
{
padding: 30px 30px 30px 10px;
margin: -30px 0 0 -10px;
}

/* menu structure */

.art-menu
{
padding: 0px 0px 0px 0px;
}

.art-nav
{
position: relative;
height: 28px;
z-index: 100;
}

/* end Menu */

/* begin MenuItem */
.art-menu ul li
{
clear: both;
}

.art-menu a
{
position:relative;
display: block;
overflow:hidden;
height: 28px;
cursor: pointer;
text-decoration: none;
margin-right: 0px;
margin-left: 0px;
}

.art-menu a .r, .art-menu a .l
{
position:absolute;
display: block;
top:0;
z-index:-1;
height: 84px;
background-image: url('http://lh6.ggpht.com/_Ij2NhP7tfkA/TNvict78fNI/AAAAAAAAAvQ/A0kv8vJQ0SI/s800/MenuItem.png');
}

.art-menu a .l
{
left:0;
right:0px;
}

.art-menu a .r
{
width:400px;
right:0;
clip: rect(auto, auto, auto, 400px);
}

.art-menu a .t
{
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #404040;
padding: 0 22px;
margin: 0 0px;
line-height: 28px;
text-align: center;
}

.art-menu a:hover .l, .art-menu a:hover .r
{
top:-28px;
}

.art-menu li:hover>a .l, .art-menu li:hover>a .r
{
top:-28px;
}

.art-menu li:hover a .l, .art-menu li:hover a .r
{
top:-28px;
}
.art-menu a:hover .t
{
color: #F0F0F0;
}

.art-menu li:hover a .t
{
color: #F0F0F0;
}

.art-menu li:hover>a .t
{
color: #F0F0F0;
}

/* end MenuItem */

/* begin MenuSeparator */
.art-nav .art-menu-separator
{
display: block;
width: 1px;
height: 28px;
background-image: url('http://lh6.ggpht.com/_Ij2NhP7tfkA/TNvicyVL2bI/AAAAAAAAAvU/77PXEo8_Oio/s320/MenuSeparator.png');
}

/* end MenuSeparator */

/* begin MenuSubItem */
.art-menu ul a
{
display:block;
text-align: center;
white-space: nowrap;
height: 26px;
width: 180px;
overflow:hidden;
line-height: 26px;
margin-right: auto;

background-image: url('http://lh5.ggpht.com/_Ij2NhP7tfkA/TNvidOjZ82I/AAAAAAAAAvY/tutUAKyDMw8/s320/subitem-bg.png');
background-position: left top;
background-repeat: repeat-x;
border-width: 1px;
border-style: solid;
border-color: #ECBF83;
}

.art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
display: inline;
float: none;
margin: inherit;
padding: inherit;
background-image: none;
text-align: inherit;
text-decoration: inherit;
}

.art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
text-align: left;
text-indent: 12px;
text-decoration: none;
line-height: 26px;
color: #FFFFFF;
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
font-size: 14px;
}

.art-menu ul ul a
{
margin-left: auto;
}

.art-menu ul li a:hover
{
color: #F0F0F0;
border-color: #E6A856;
background-position: 0 -26px;
}

.art-menu ul li:hover>a
{
color: #F0F0F0;
border-color: #E6A856;
background-position: 0 -26px;
}

.art-nav .art-menu ul li a:hover span, .art-nav .art-menu ul li a:hover span span
{
color: #F0F0F0;
}

.art-nav .art-menu ul li:hover>a span, .art-nav .art-menu ul li:hover>a span span
{
color: #F0F0F0;
}

/* end MenuSubItem */

/* begin ContentLayout */
.art-contentLayout
{
position: relative;
margin-bottom: 9px;
width: 986px;
}
/* end ContentLayout */

/* begin Box, Block */
.art-Block
{
position:relative;
z-index:0;
margin:0 auto;
min-width:1px;
min-height:1px;
}

.art-Block-body
{
position: relative;
z-index: 1;
padding: 0px;
}

.art-Block
{
margin: 7px;
}

/* end Box, Block */

/* begin BlockHeader */
.art-BlockHeader
{
position:relative;
z-index:0;
height: 30px;
padding: 0 7px;
margin-bottom: 0px;
}

.art-BlockHeader .t
{
height: 30px;
color: #FFFFFF;
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
font-size: 14px;
white-space : nowrap;
padding: 0 1px;
line-height: 30px;
}

.art-BlockHeader .l, .art-BlockHeader .r
{
display:block;
position:absolute;
z-index:-1;
height: 30px;
background-image: url('http://lh6.ggpht.com/_Ij2NhP7tfkA/TNvidVnBvkI/AAAAAAAAAvc/eEiIv5gJ-W0/BlockHeader.png');
}

.art-BlockHeader .l
{
left:0;
right:0px;
}

.art-BlockHeader .r
{
width:986px;
right:0;
clip: rect(auto, auto, auto, 986px);
}

/* end BlockHeader */

/* begin Box, BlockContent */
.art-BlockContent
{
position:relative;
z-index:0;
margin:0 auto;
min-width:3px;
min-height:3px;
}

.art-BlockContent-body
{
position: relative;
z-index: 1;
padding: 8px;
}

.art-BlockContent-tr, .art-BlockContent-tl, .art-BlockContent-br, .art-BlockContent-bl, .art-BlockContent-tc, .art-BlockContent-bc,.art-BlockContent-cr, .art-BlockContent-cl
{
position:absolute;
z-index:-1;
}

.art-BlockContent-tr, .art-BlockContent-tl, .art-BlockContent-br, .art-BlockContent-bl
{
width: 2px;
height: 2px;
background-image: url('http://lh5.ggpht.com/_Ij2NhP7tfkA/TNvidgKX46I/AAAAAAAAAvg/y11bdMK3D4I/s320/BlockContent-s.png');
}

.art-BlockContent-tl
{
top:0;
left:0;
clip: rect(auto, 1px, 1px, auto);
}

.art-BlockContent-tr
{
top: 0;
right: 0;
clip: rect(auto, auto, 1px, 1px);
}

.art-BlockContent-bl
{
bottom: 0;
left: 0;
clip: rect(1px, 1px, auto, auto);
}

.art-BlockContent-br
{
bottom: 0;
right: 0;
clip: rect(1px, auto, auto, 1px);
}

.art-BlockContent-tc, .art-BlockContent-bc
{
left: 1px;
right: 1px;
height: 2px;
background-image: url('http://lh4.ggpht.com/_Ij2NhP7tfkA/TNvid-vVcOI/AAAAAAAAAvk/z6OulgeBKNA/s320/BlockContent-h.png');
}

.art-BlockContent-tc
{
top: 0;
clip: rect(auto, auto, 1px, auto);
}

.art-BlockContent-bc
{
bottom: 0;
clip: rect(1px, auto, auto, auto);
}

.art-BlockContent-cr, .art-BlockContent-cl
{
top: 1px;
bottom: 1px;
width: 2px;
background-image: url('http://lh6.ggpht.com/_Ij2NhP7tfkA/TNvidxeL4JI/AAAAAAAAAvo/ztxnYgIohpE/s320/BlockContent-v.png');
}

.art-BlockContent-cr
{
right:0;
clip: rect(auto, auto, auto, 1px);
}

.art-BlockContent-cl
{
left:0;
clip: rect(auto, 1px, auto, auto);
}

.art-BlockContent-cc
{
position:absolute;
z-index:-1;
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
background-color: #FFFFFF;
}

.art-BlockContent-body
{
color:#404040;
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
font-size: 14px;
}

.art-BlockContent-body a:link
{
color: #000000;
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
}

.art-BlockContent-body a:visited, .art-BlockContent-body a.visited
{
color: #000000;
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
text-decoration: none;
}

.art-BlockContent-body a:hover, .art-BlockContent-body a.hover
{
color: #311F07;
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
text-decoration: none;
}

.art-BlockContent-body ul
{
list-style-type: none;
color: #545454;
margin:0;
padding:0;
}

.art-BlockContent-body ul li
{
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
font-size: 14px;
line-height: 125%;
line-height: 1.25em;
}

/* Variable definitions
====================
<Variable name="textcolor" description="Block Text Color"
type="color" default="#404040" value="#404040">

<Variable name="linkcolor" description="Block Link Color"
type="color" default="#000000" value="#000000">

<Variable name="visitedlinkcolor" description="Block Visited Link Color"
type="color" default="#000000" value="#000000">

<Variable name="hoveredlinkcolor" description="Block Hovered Link Color"
type="color" default="#311F07" value="#311F07">

*/

.art-BlockContent-body
{
color: $textcolor;
}

.art-BlockContent-body a:link
{
color: $linkcolor;
}

.art-BlockContent-body a:visited, .art-BlockContent-body a.visited
{
color: $visitedlinkcolor;
}

.art-BlockContent-body a:hover, .art-BlockContent-body a.hover
{
color: $hoveredlinkcolor;
}

.toggle span
{
color: $linkcolor;
}

.gsc-branding-text {
color: $textcolor !important;
}

/* end Box, BlockContent */

/* begin Box, Post */
.art-Post
{
position:relative;
z-index:0;
margin:0 auto;
min-width:33px;
min-height:33px;
}

.art-Post-body
{
position: relative;
z-index: 1;
padding: 11px;
}

.art-Post-tr, .art-Post-tl, .art-Post-br, .art-Post-bl, .art-Post-tc, .art-Post-bc,.art-Post-cr, .art-Post-cl
{
position:absolute;
z-index:-1;
}

.art-Post-tr, .art-Post-tl, .art-Post-br, .art-Post-bl
{
width: 32px;
height: 32px;
background-image: url('http://lh5.ggpht.com/_Ij2NhP7tfkA/TNvieKmpfcI/AAAAAAAAAvs/wEFuvMEH6TQ/s320/Post-s.png');
}

.art-Post-tl
{
top:0;
left:0;
clip: rect(auto, 16px, 16px, auto);
}

.art-Post-tr
{
top: 0;
right: 0;
clip: rect(auto, auto, 16px, 16px);
}

.art-Post-bl
{
bottom: 0;
left: 0;
clip: rect(16px, 16px, auto, auto);
}

.art-Post-br
{
bottom: 0;
right: 0;
clip: rect(16px, auto, auto, 16px);
}

.art-Post-tc, .art-Post-bc
{
left: 16px;
right: 16px;
height: 32px;
background-image: url('http://lh4.ggpht.com/_Ij2NhP7tfkA/TNvieGtwguI/AAAAAAAAAvw/zaCBkiL2SjI/s320/Post-h.png');
}

.art-Post-tc
{
top: 0;
clip: rect(auto, auto, 16px, auto);
}

.art-Post-bc
{
bottom: 0;
clip: rect(16px, auto, auto, auto);
}

.art-Post-cr, .art-Post-cl
{
top: 16px;
bottom: 16px;
width: 32px;
background-image: url('http://lh3.ggpht.com/_Ij2NhP7tfkA/TNvieZPSRFI/AAAAAAAAAv0/Qe3Rk2RkLi0/s320/Post-v.png');
}

.art-Post-cr
{
right:0;
clip: rect(auto, auto, auto, 16px);
}

.art-Post-cl
{
left:0;
clip: rect(auto, 16px, auto, auto);
}

.art-Post-cc
{
position:absolute;
z-index:-1;
top: 16px;
left: 16px;
right: 16px;
bottom: 16px;
background-color: #F2F2F2;
}

.art-Post
{
margin: 10px;
}

/* Start images */
a img
{
border: 0;
}

.art-article img, img.art-article
{
margin: 1em;
}

.art-metadata-icons img
{
border: none;
vertical-align: middle;
margin: 2px;
}
/* Finish images */

/* Start tables */

.art-article table, table.art-article
{
border-collapse: collapse;
margin: 1px;
width:auto;
}

.art-article table, table.art-article .art-article tr, .art-article th, .art-article td
{
background-color:Transparent;
}

.art-article th
{
text-align: center;
vertical-align: middle;
padding: 7px;
}

/* Finish tables */

pre
{
overflow: auto;
padding: 0.1em;
}

/* end Box, Post */

/* begin PostHeaderIcon */
.art-PostHeader
{
text-decoration:none;
margin: 0.2em 0;
padding: 0;
font-weight:normal;
font-style:normal;
letter-spacing:normal;
word-spacing:normal;
font-variant:normal;
text-decoration:none;
font-variant:normal;
text-transform:none;
text-align:left;
text-indent:0;
line-height:inherit;
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
font-size: 26px;
color: #651010;
}

.art-PostHeader a, .art-PostHeader a:link, .art-PostHeader a:visited, .art-PostHeader a:hover
{
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
font-size: 26px;
margin:0;
color: #651010;
}

/* end PostHeaderIcon */

/* begin PostHeader */
.art-PostHeader a:link
{
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
text-decoration: none;
text-align: left;
color: #7B1414;
}

.art-PostHeader a:visited, .art-PostHeader a.visited
{
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
text-decoration: none;
text-align: left;
color: #7B1414;
}

.art-PostHeader a:hover, .art-PostHeader a.hovered
{
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
text-decoration: none;
text-align: left;
color: #C11F1F;
}
/* end PostHeader */

/* begin PostIcons */
.art-PostHeaderIcons
{
padding:1px;
}

.art-PostHeaderIcons, .art-PostHeaderIcons a, .art-PostHeaderIcons a:link, .art-PostHeaderIcons a:visited, .art-PostHeaderIcons a:hover
{
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
color: #3B3B3B;
}

.art-PostHeaderIcons a, .art-PostHeaderIcons a:link, .art-PostHeaderIcons a:visited, .art-PostHeaderIcons a:hover
{
margin:0;
}

.art-PostHeaderIcons a:link
{
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
text-decoration: none;
color: #911818;
}

.art-PostHeaderIcons a:visited, .art-PostHeaderIcons a.visited
{
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
font-style: italic;
font-weight: normal;
text-decoration: none;
color: #911818;
}

.art-PostHeaderIcons a:hover, .art-PostHeaderIcons a.hover
{
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
font-style: italic;
font-weight: normal;
text-decoration: underline;
color: #300808;
}
/* end PostIcons */

/* begin PostContent */
/* Content Text Font & Color (Default) */
body
{
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
font-size: 14px;
color: #3B3B3B;
}

.art-PostContent p
{
margin: 0.5em 0;
}

.art-PostContent, .art-PostContent p
{
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
color: #3B3B3B;
}

.art-PostContent
{
margin:0;
}

/* Start Content link style */
/*
The right order of link pseudo-classes: Link-Visited-Hover-Focus-Active.
http://www.w3schools.com/CSS/css_pseudo_classes.asp
http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states/
*/
a
{
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
text-decoration: none;
color: #000000;
}

/* Adds special style to an unvisited link. */
a:link
{
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
text-decoration: none;
color: #000000;
}

/* Adds special style to a visited link. */
a:visited, a.visited
{
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
text-decoration: none;
color: #C37B1D;
}

/* :hover - adds special style to an element when you mouse over it. */
a:hover, a.hover
{
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
text-decoration: none;
color: #DF3A3A;
}

/* Finish Content link style */

/* Resert some headings default style & links default style for links in headings*/
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited
{
font-weight: normal;
font-style: normal;
text-decoration: none;
}

/* Start Content headings Fonts & Colors */
h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover
{
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
font-size: 35px;
color: #000000;
}

h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover
{
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
font-size: 26px;
color: #000000;
}

h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover
{
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
font-size: 21px;
color: #545454;
}

h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover
{
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
font-size: 18px;
color: #A71B1B;
}

h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover
{
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
font-size: 14px;
color: #262626;
}

h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover
{
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
font-size: 12px;
color: #262626;
}
/* Finish Content headings Fonts & Colors */

#uds-searchControl .gsc-results,
#uds-searchControl .gsc-tabhActive
{
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
color: #3B3B3B !important;
}

#uds-searchControl a,
#uds-searchControl .gs-result .gs-title *,
#uds-searchControl .gs-visibleUrl ,
#uds-searchControl .gsc-tabhInactive
{
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
text-decoration: none;
color: #000000 !important;
}/* end PostContent */

/* begin PostBullets */
/* Start Content list */
ol, ul
{
color: #3B3B3B;
margin:1em 0 1em 2em;
padding:0;
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
font-size: 14px;
}

li ol, li ul
{
margin:0.5em 0 0.5em 2em;
padding:0;
}

li
{
margin:0.2em 0;
padding:0;
}

ul
{
list-style-type: none;
}

ol
{
list-style-position:inside;

}

/* Finish Content list */
/* end PostBullets */

/* begin PostQuote */
/* Start blockquote */
blockquote,
blockquote p,
.art-PostContent blockquote p
{
color:#3B3B3B;
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
}

blockquote,
.art-PostContent blockquote
{
margin:10px 10px 10px 50px;
padding:5px 5px 5px 5px;
background-color:#F2F2F2;
}

/* Finish blockuote */
/* end PostQuote */

/* begin PostIcons */
.art-PostFooterIcons
{
padding:1px;
}

.art-PostFooterIcons, .art-PostFooterIcons a, .art-PostFooterIcons a:link, .art-PostFooterIcons a:visited, .art-PostFooterIcons a:hover
{
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
font-size: 15px;
text-align: right;
word-spacing: 0px;
margin-bottom: 0px;
color: #3B3B3B;
}

.art-PostFooterIcons a, .art-PostFooterIcons a:link, .art-PostFooterIcons a:visited, .art-PostFooterIcons a:hover
{
margin:0;
}

.art-PostFooterIcons a:link
{
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
text-decoration: none;
color: #911818;
}

.art-PostFooterIcons a:visited, .art-PostFooterIcons a.visited
{
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
text-decoration: none;
color: #911818;
}

.art-PostFooterIcons a:hover, .art-PostFooterIcons a.hover
{
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
text-decoration: none;
color: #300808;
}
/* end PostIcons */

/* begin Button */
.art-button-wrapper .art-button
{
display:inline-block;
width: auto;
outline:none;
border:none;
background:none;
line-height:34px;
margin:0 !important;
padding:0 !important;
overflow: visible;
cursor: default;
text-decoration: none !important;
z-index:0;
vertical-align: middle;
}

.art-button img, .art-button-wrapper img
{
margin: 0;
}

.art-button-wrapper
{
display:inline-block;
vertical-align: middle;
position:relative;
height: 34px;
overflow:hidden;
white-space: nowrap;
width: auto;
z-index:0;
}

.firefox2 .art-button-wrapper
{
display:block;
float:left;
}

.art-button-wrapper .art-button
{
display:block;
height: 34px;
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
font-size: 14px;
white-space: nowrap;
text-align: left;
padding: 0 19px !important;
line-height: 34px;
text-decoration: none !important;
color: #FCF4E9 !important;
}

input, select
{
vertical-align: middle;
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
font-size: 14px;
}

.art-button-wrapper.hover .art-button, .art-button:hover
{
color: #FCEDED !important;
text-decoration: none !important;
}

.art-button-wrapper.active .art-button
{
color: #F2F2F2 !important;
}

.art-button-wrapper .l, .art-button-wrapper .r
{
display:block;
position:absolute;
z-index:-1;
height: 102px;
background-image: url('http://lh5.ggpht.com/_Ij2NhP7tfkA/TNvierBruGI/AAAAAAAAAv4/L5O89mIq-PM/s800/Button.png');
}

.art-button-wrapper .l
{
left:0;
right:16px;
}

.art-button-wrapper .r
{
width:425px;
right:0;
clip: rect(auto, auto, auto, 409px);
}

.art-button-wrapper.hover .l, .art-button-wrapper.hover .r
{
top: -34px;
}

.art-button-wrapper.active .l, .art-button-wrapper.active .r
{
top: -68px;
}

/* end Button */

/* begin Footer */
.art-Footer
{
position:relative;
z-index:0;
overflow:hidden;
width: 986px;
margin: 5px auto 0px auto;
}

.art-Footer .art-Footer-inner
{
height:1%;
position: relative;
z-index: 0;
padding: 8px;
text-align: center;
}

.art-Footer .art-Footer-background
{
position:absolute;
z-index:-1;
background-repeat:no-repeat;
background-image: url('http://lh3.ggpht.com/_Ij2NhP7tfkA/TNvifIQPryI/AAAAAAAAAv8/_7_J6BIJJco/Footer.png');
width: 986px;
height: 150px;
bottom:0;
left:0;
}

.art-rss-tag-icon
{
position: relative;
display:block;
float:left;
background-image: url('http://lh5.ggpht.com/_Ij2NhP7tfkA/TNvifH2t-hI/AAAAAAAAAwA/ISYScd6z6Gg/s320/rssIcon.png');
background-position: center right;
background-repeat: no-repeat;
margin: 0 5px 0 0;
height: 16px;
width: 16px;
cursor: default;
}

.art-Footer .art-Footer-text p
{
margin: 0;
}

.art-Footer .art-Footer-text
{
display:inline-block;
color:#000000;
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
}

.art-Footer .art-Footer-text a:link
{
text-decoration: none;
color: #855414;
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
text-decoration: none;
}

.art-Footer .art-Footer-text a:visited
{
text-decoration: none;
color: #333333;
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
text-decoration: none;
}

.art-Footer .art-Footer-text a:hover
{
text-decoration: none;
color: #2C1C07;
font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
text-decoration: none;
}
/* end Footer */

/* begin PageFooter */
.art-page-footer, .art-page-footer a, .art-page-footer a:link, .art-page-footer a:visited, .art-page-footer a:hover
{
font-family:Arial;
font-size:10px;
letter-spacing:normal;
word-spacing:normal;
font-style:normal;
font-weight:normal;
text-decoration:underline;
color:#E19533;
}

.art-page-footer
{
margin:1em;
text-align:center;
text-decoration:none;
color:#8A8A8A;
}
/* end PageFooter */

/* begin LayoutCell */
.art-contentLayout .art-content
{
position: relative;
margin: 0;
padding: 0;
border: 0;
float: left;
overflow: hidden;
width: 591px;
}
.art-contentLayout .art-content-sidebar1
{
position: relative;
margin: 0;
padding: 0;
border: 0;
float: left;
overflow: hidden;
width: 788px;
}
.art-contentLayout .art-content-sidebar2
{
position: relative;
margin: 0;
padding: 0;
border: 0;
float: left;
overflow: hidden;
width: 788px;
}
.art-contentLayout .art-content-wide
{
position: relative;
margin: 0;
padding: 0;
border: 0;
float: left;
overflow: hidden;
width: 985px;
}
/* end LayoutCell */

/* begin LayoutCell */
.art-contentLayout .art-sidebar1
{
position: relative;
margin: 0;
padding: 0;
border: 0;
float: left;
overflow: hidden;
width: 197px;
}
/* end LayoutCell */

/* begin LayoutCell */
.art-contentLayout .art-sidebar2
{
position: relative;
margin: 0;
padding: 0;
border: 0;
float: left;
overflow: hidden;
width: 197px;
}
/* end LayoutCell */

]]></b:skin>




<script type='text/javascript'>
/* begin Page */

/* Generated with Artisteer version 2.3.0.23326, file checksum is 5BBC8659. */

cssFix = function(){
var u = navigator.userAgent.toLowerCase(),
addClass = function(el, val){
if(! el.className) {
el.className = val;
} else {
var newCl = el.className;
newCl+=(' '+val);
el.className = newCl;
}
},
is = function(t){return (u.indexOf(t)!=-1)};
addClass(document.getElementsByTagName('html')[0],[
(!(/opera|webtv/i.test(u))&&/msie (\d)/.test(u))?('ie ie'+RegExp.$1)
: is('firefox/2')?'gecko firefox2'
: is('firefox/3')?'gecko firefox3'
: is('gecko/')?'gecko'
: is('chrome/')?'chrome'
: is('opera/9')?'opera opera9':/opera (\d)/.test(u)?'opera opera'+RegExp.$1
: is('konqueror')?'konqueror'
: is('applewebkit/')?'webkit safari'
: is('mozilla/')?'gecko':'',
(is('x11')||is('linux'))?' linux'
: is('mac')?' mac'
: is('win')?' win':''
].join(' '));
}();

var artEventHelper = {
'bind': function(obj, evt, fn) {
if (obj.addEventListener)
obj.addEventListener(evt, fn, false);
else if (obj.attachEvent)
obj.attachEvent('on' + evt, fn);
else
obj['on' + evt] = fn;
}
};

var userAgent = navigator.userAgent.toLowerCase();
var browser = {
version: (userAgent.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) || [])[1],
safari: /webkit/.test(userAgent) && !/chrome/.test(userAgent),
chrome: /chrome/.test(userAgent),
opera: /opera/.test(userAgent),
msie: /msie/.test(userAgent) && !/opera/.test(userAgent),
mozilla: /mozilla/.test(userAgent) && !/(compatible|webkit)/.test(userAgent)
};

var artLoadEvent = (function() {

var list = [];

var done = false;
var ready = function() {
if (done) return;
done = true;
for (var i = 0; i < list.length; i++)
list();
};

if (document.addEventListener && !browser.opera)
document.addEventListener('DOMContentLoaded', ready, false);

if (browser.msie && window == top) {
(function() {
try {
document.documentElement.doScroll('left');
} catch (e) {
setTimeout(arguments.callee, 10);
return;
}
ready();
})();
}

if (browser.opera) {
document.addEventListener('DOMContentLoaded', function() {
for (var i = 0; i < document.styleSheets.length; i++) {
if (document.styleSheets.disabled) {
setTimeout(arguments.callee, 10);
return;
}
}
ready();
}, false);
}

if (browser.safari || browser.chrome) {
var numStyles;
(function() {
if (document.readyState != 'loaded' && document.readyState != 'complete') {
setTimeout(arguments.callee, 10);
return;
}
if ('undefined' == typeof numStyles) {
numStyles = document.getElementsByTagName('style').length;
var links = document.getElementsByTagName('link');
for (var i = 0; i < links.length; i++) {
numStyles += (links.getAttribute('rel') == 'stylesheet') ? 1 : 0;
}
if (document.styleSheets.length != numStyles) {
setTimeout(arguments.callee, 0);
return;
}
}
ready();
})();
}
artEventHelper.bind(window, 'load', ready);
return ({
add: function(f) {
list.push(f);
}
})
})();

(function() {
// fix ie blinking
var m = document.uniqueID && document.compatMode && !window.XMLHttpRequest && document.execCommand;
try { if (!!m) { m('BackgroundImageCache', false, true); } }
catch (oh) { };
})();

function xGetElementsByClassName(clsName, parentEle, tagName) {
var elements = null;
var found = [];
var s = String.fromCharCode(92);
var re = new RegExp('(?:^|' + s + 's+)' + clsName + '(?:$|' + s + 's+)');
if (!parentEle) parentEle = document;
if (!tagName) tagName = '*';
elements = parentEle.getElementsByTagName(tagName);
if (elements) {
for (var i = 0; i < elements.length; ++i) {
if (elements.className.search(re) != -1) {
found[found.length] = elements;
}
}
}
return found;
}

var styleUrlCached = null;
function GetStyleUrl() {
if (null == styleUrlCached) {
var ns;
styleUrlCached = '';
ns = document.getElementsByTagName('link');
for (var i = 0; i < ns.length; i++) {
var l = ns;
if (l.href && /style\.ie6\.css(\?.*)?$/.test(l.href)) {
return styleUrlCached = l.href.replace(/style\.ie6\.css(\?.*)?$/, '');
}
}

ns = document.getElementsByTagName('style');
for (var i = 0; i < ns.length; i++) {
var matches = new RegExp('import\\s+"([^"]+\\/)style\\.ie6\\.css"').exec(ns.innerHTML);
if (null != matches && matches.length > 0)
return styleUrlCached = matches[1];
}
}
return styleUrlCached;
}

function fixPNG(element) {
if (/MSIE (5\.5|6).+Win/.test(navigator.userAgent)) {
var src;
if (element.tagName == 'IMG') {
if (/\.png$/.test(element.src)) {
src = element.src;
element.src = GetStyleUrl() + 'http://lh5.ggpht.com/_Ij2NhP7tfkA/TNvifXR0HVI/AAAAAAAAAwE/7h79vDPKG-A/s320/spacer.gif';
}
}
else {
src = element.currentStyle.backgroundImage.match(/url$"(.+\.png)"$/i);
if (src) {
src = src[1];
element.runtimeStyle.backgroundImage = 'none';
}
}
if (src) element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "')";
}
}

function artHasClass(el, cls) {
return (el && el.className && (' ' + el.className + ' ').indexOf(' ' + cls + ' ') != -1);
}

var block_header_exists = false;
/* end Page */

/* begin Menu */
function gTranslateFix() {
var menus = xGetElementsByClassName("art-menu", document);
for (var i = 0; i < menus.length; i++) {
var menu = menus;
var childs = menu.childNodes;
var listItems = [];
for (var j = 0; j < childs.length; j++) {
var el = childs[j];
if (String(el.tagName).toLowerCase() == "li") listItems.push(el);
}
for (var j = 0; j < listItems.length; j++) {
var item = listItems[j];
var a = null;
var gspan = null;
for (var p = 0; p < item.childNodes.length; p++) {
var l = item.childNodes[p];
if (!(l && l.tagName)) continue;
if (String(l.tagName).toLowerCase() == "a") a = l;
if (String(l.tagName).toLowerCase() == "span") gspan = l;
}
if (gspan && a) {
var t = null;
for (var k = 0; k < gspan.childNodes.length; k++) {
var e = gspan.childNodes[k];
if (!(e && e.tagName)) continue;
if (String(e.tagName).toLowerCase() == "a" && e.firstChild) e = e.firstChild;
if (e && e.className && e.className == 't') {
t = e;
if (t.firstChild && t.firstChild.tagName && String(t.firstChild.tagName).toLowerCase() == "a") {
while (t.firstChild.firstChild) t.appendChild(t.firstChild.firstChild);
t.removeChild(t.firstChild);
}
a.appendChild(t);
break;
}
}
gspan.parentNode.removeChild(gspan);
}
}
}
}
artLoadEvent.add(gTranslateFix);

function Insert_Separators() {
var menus = xGetElementsByClassName("art-menu", document, "ul");
for (var i = 0; i < menus.length; i++) {
var menu = menus;
var childs = menu.childNodes;
var listItems = [];
for (var j = 0; j < childs.length; j++) {
var el = childs[j];
if (String(el.tagName).toLowerCase() == "li") listItems.push(el);
}
for (var j = 0; j < listItems.length - 1; j++) {
var item = listItems[j];
var span = document.createElement('span');
span.className = 'art-menu-separator';
var li = document.createElement('li');
li.appendChild(span);
item.parentNode.insertBefore(li, item.nextSibling);

}
if (browser.msie) menu.style.position = "relative";
}

}
artLoadEvent.add(Insert_Separators);

function Menu_IE6Setup() {
var isIE6 = navigator.userAgent.toLowerCase().indexOf("msie") != -1
&& navigator.userAgent.toLowerCase().indexOf("msie 7") == -1;
if (!isIE6) return;
var aTmp2, i, j, oLI, aUL, aA;
var aTmp = xGetElementsByClassName("art-menu", document, "ul");
for (i = 0; i < aTmp.length; i++) {
aTmp2 = aTmp.getElementsByTagName("li");
for (j = 0; j < aTmp2.length; j++) {
oLI = aTmp2[j];
aUL = oLI.getElementsByTagName("ul");
if (aUL && aUL.length) {
oLI.UL = aUL[0];
aA = oLI.getElementsByTagName("a");
if (aA && aA.length)
oLI.A = aA[0];
oLI.onmouseenter = function() {
this.className += " art-menuhover";
this.UL.className += " art-menuhoverUL";
if (this.A) this.A.className += " art-menuhoverA";
};
oLI.onmouseleave = function() {
this.className = this.className.replace(/art-menuhover/, "");
this.UL.className = this.UL.className.replace(/art-menuhoverUL/, "");
if (this.A) this.A.className = this.A.className.replace(/art-menuhoverA/, "");
};
}
}
}
}
artLoadEvent.add(Menu_IE6Setup);
/* end Menu */

/* begin BlockHeader */
block_header_exists = true;/* end BlockHeader */

/* begin Button */

function artButtonsSetupJsHover(className) {
var tags = ["input", "a", "button"];
for (var j = 0; j < tags.length; j++){
var buttons = xGetElementsByClassName(className, document, tags[j]);
for (var i = 0; i < buttons.length; i++) {
var button = buttons;
if (!button.tagName || !button.parentNode) return;
if (!artHasClass(button.parentNode, 'art-button-wrapper')) {
if (!artHasClass(button, 'art-button')) button.className += ' art-button';
var wrapper = document.createElement('span');
wrapper.className = "art-button-wrapper";
if (artHasClass(button, 'active')) wrapper.className += ' active';
var spanL = document.createElement('span');
spanL.className = "l";
spanL.innerHTML = " ";
wrapper.appendChild(spanL);
var spanR = document.createElement('span');
spanR.className = "r";
spanR.innerHTML = " ";
wrapper.appendChild(spanR);
button.parentNode.insertBefore(wrapper, button);
wrapper.appendChild(button);
}
artEventHelper.bind(button, 'mouseover', function(e) {
e = e || window.event;
wrapper = (e.target || e.srcElement).parentNode;
wrapper.className += " hover";
});
artEventHelper.bind(button, 'mouseout', function(e) {
e = e || window.event;
button = e.target || e.srcElement;
wrapper = button.parentNode;
wrapper.className = wrapper.className.replace(/hover/, "");
if (!artHasClass(button, 'active')) wrapper.className = wrapper.className.replace(/active/, "");
});
artEventHelper.bind(button, 'mousedown', function(e) {
e = e || window.event;
button = e.target || e.srcElement;
wrapper = button.parentNode;
if (!artHasClass(button, 'active')) wrapper.className += " active";
});
artEventHelper.bind(button, 'mouseup', function(e) {
e = e || window.event;
button = e.target || e.srcElement;
wrapper = button.parentNode;
if (!artHasClass(button, 'active')) wrapper.className = wrapper.className.replace(/active/, "");
});
}
}
}

artLoadEvent.add(function() { artButtonsSetupJsHover("art-button"); });
/* end Button */

function artInsertSidebarBlocks(widgetClassName) {
var widgets = xGetElementsByClassName(widgetClassName, document);
for (var i = 0; i < widgets.length; i++) {
var widget = widgets;
if (widget.id == 'LinkList99') continue;
if (widget.id == 'LinkList98') continue;
if (widget.id == 'Text99') continue;

var childs = widget.childNodes;
var widgetTitle = widget.getElementsByTagName("h2");
var widgetContent = widget.innerHTML;
var widgetTitleText = '';
if (widgetTitle.length != 0){
widgetTitleText = widgetTitle[0].innerHTML;
}

var div1 = document.createElement('div'); div1.className = 'art-Block';

var div2 = document.createElement('div'); div2.className = 'art-Block-tl'; div1.appendChild(div2);
var div3 = document.createElement('div'); div3.className = 'art-Block-tr'; div1.appendChild(div3);
var div4 = document.createElement('div'); div4.className = 'art-Block-bl'; div1.appendChild(div4);
var div5 = document.createElement('div'); div5.className = 'art-Block-br'; div1.appendChild(div5);
var div6 = document.createElement('div'); div6.className = 'art-Block-tc'; div1.appendChild(div6);
var div7 = document.createElement('div'); div7.className = 'art-Block-bc'; div1.appendChild(div7);
var div8 = document.createElement('div'); div8.className = 'art-Block-cl'; div1.appendChild(div8);

var div9 = document.createElement('div'); div9.className = 'art-Block-cr'; div1.appendChild(div9);
var div10 = document.createElement('div'); div10.className = 'art-Block-cc'; div1.appendChild(div10);

var divBB = document.createElement('div'); divBB.className = 'art-Block-body'; div1.appendChild(divBB);
if (widgetTitleText && block_header_exists){
var divBH = document.createElement('div'); divBH.className = 'art-BlockHeader'; divBB.appendChild(divBH);
var divBHl = document.createElement('div'); divBHl.className = 'l'; divBH.appendChild(divBHl);
var divBHr = document.createElement('div'); divBHr.className = 'r'; divBH.appendChild(divBHr);
var divBHti = document.createElement('div'); divBHti.className = 'art-header-tag-icon'; divBH.appendChild(divBHti);
var divBHt = document.createElement('div'); divBHt.className = 't'; divBHti.appendChild(divBHt);
divBHt.innerHTML = widgetTitleText;
}

var divBC = document.createElement('div'); divBC.className = 'art-BlockContent'; divBB.appendChild(divBC);

var di2 = document.createElement('div'); di2.className = 'art-BlockContent-tl'; divBC.appendChild(di2);
var di3 = document.createElement('div'); di3.className = 'art-BlockContent-tr'; divBC.appendChild(di3);
var di4 = document.createElement('div'); di4.className = 'art-BlockContent-bl'; divBC.appendChild(di4);
var di5 = document.createElement('div'); di5.className = 'art-BlockContent-br'; divBC.appendChild(di5);
var di6 = document.createElement('div'); di6.className = 'art-BlockContent-tc'; divBC.appendChild(di6);
var di7 = document.createElement('div'); di7.className = 'art-BlockContent-bc'; divBC.appendChild(di7);
var di8 = document.createElement('div'); di8.className = 'art-BlockContent-cl'; divBC.appendChild(di8);

var di9 = document.createElement('div'); di9.className = 'art-BlockContent-cr'; divBC.appendChild(di9);
var di10 = document.createElement('div'); di10.className = 'art-BlockContent-cc'; divBC.appendChild(di10);

var divBCb = document.createElement('div'); divBCb.className = 'art-BlockContent-body'; divBC.appendChild(divBCb);

if ( ((widgetClassName == 'widget Gadget') || (widgetClassName == 'widget Followers')) && (widgetContent.indexOf("friendconnect.js") != -1)){

if (browser.mozilla){
if (widgetTitle.length != 0){
widgetTitle[0].parentNode.removeChild(widgetTitle[0]);
}
divBCb.innerHTML = widget.innerHTML;
widget.innerHTML = "";
widget.appendChild(div1);
}
if (browser.msie){
if (widgetTitle.length != 0){
widgetTitle[0].parentNode.removeChild(widgetTitle[0]);
}
var childsLength = childs.length;
for (var j = 0; j < childsLength; j++) {
divBCb.appendChild(childs[0]);
}
widget.appendChild(div1);
}

} else {
if (widgetTitle.length != 0){
widgetTitle[0].parentNode.removeChild(widgetTitle[0]);
}
var childsLength = childs.length;
for (var j = 0; j < childsLength; j++) {
divBCb.appendChild(childs[0]);
}
widget.appendChild(div1);
}

if (widgetClassName == 'widget Subscribe') {
widget.style.position = "relative";
widget.style.zIndex = "2";
}

}
}

function artCheckNavBar(){
var navbar = document.getElementById("navbar");
if (navbar){
if (false) {
var el1 = document.getElementById("art-page-background-glare");
if (el1) el1.style.top = "30px";
var el2 = document.getElementById("art-page-background-simple-gradient");
if (el2) el2.style.top = "30px";
if (!el2) {
var el3 = document.getElementById("art-page-background-gradient");
if (el3) el3.style.top = "30px";
}
} else {
navbar.style.display = 'none';
}
}
}

function artFixFooterMenu(){
var widgetLinks = document.getElementById("LinkList98");
var widgetText = document.getElementById("Text99");
if (widgetLinks) {
var widgetText = widgetLinks.innerHTML;
widgetLinks.innerHTML = widgetText.replace("| |", "");
} else {
if (widgetText){
var els = xGetElementsByClassName("widget-content", widgetText);
var el = els[0];
if (el.innerHTML == '\n') {
el.innerHTML = "<br /><br />";
} else {
el.innerHTML += "<br />";
}
}
}
}

function artFixPostHeaders(){
var els = xGetElementsByClassName("art-PostMetadataHeader", document);
for (var i = 0; i < els.length; i++) {
var el = els;
if (el) {
var elText = el.innerHTML;
if ((el.getElementsByTagName("div").length == 0) && (el.getElementsByTagName("h2").length == 0)) el.style.visibility = 'hidden';
}
}
}

artLoadEvent.add(function() { artFixPostHeaders(); });

function artFixPostFooters(){
var els = xGetElementsByClassName("art-PostMetadataFooter", document);
for (var i = 0; i < els.length; i++) {
var el = els;
if (el) {
var els2 = xGetElementsByClassName("art-PostFooterIcons", el);
for (var j = 0; j < els2.length; j++) {
var el2 = els2[j];
var elText = el2.innerHTML;
if ((el.getElementsByTagName("img").length == 0) && (el.getElementsByTagName("a").length == 0)) el.style.visibility = 'hidden';
}
}
}
}

artLoadEvent.add(function() { artFixPostFooters(); });

function artFixTopMenu(){
var topMenu = document.getElementById("LinkList99");
if (!topMenu){
var navSection = document.getElementById("navsection");
if (navSection){
if (showHomePage) {
if (window.location == homePageLink)
var tmpstr = '<a href="'+homePageLink+'" class="active">';
else
var tmpstr = '<a href="'+homePageLink+'">';
navSection.innerHTML = '<div><div class="l"></div><div class="r"></div><div class="art-nav-center"><ul class="art-menu"><li>'+tmpstr+'<span class="l"></span><span class="r"></span><span class="t">'+homePageName+'</span></a></li></ul></div></div>';
} else {
navSection.innerHTML = '<div><div class="l"></div><div class="r"></div><div class="art-nav-center"></div></div>';
}
}
}
}
artLoadEvent.add(function() { artFixTopMenu(); });

function artDisplayTopMenu(menuitems){
var i=0;
var subList = false;
var menu = new Array();
for(i=0; i < menuitems.length; i++){
var item = menuitems;
var itemname = item[0];
var itemlink = item[1];

if ( (itemname.indexOf("-") == 0) && !subList) document.write("<ul>");
else if ( (itemname.indexOf("-") != 0) && subList) { document.write("</ul></li>"); subList = false; }
else if (i != 0) document.write("</li>");

document.write("<li>");

if (itemname.indexOf("-") != 0){
if (window.location == itemlink)
document.write('<a href="'+itemlink+'" class="active"><span class="l"></span><span class="r"></span><span class="t">'+itemname+'</span></a>');
else if(itemlink == "http://./")
document.write('<a href="#"><span class="l"></span><span class="r"></span><span class="t">'+itemname+'</span></a>');
else
document.write('<a href="'+itemlink+'"><span class="l"></span><span class="r"></span><span class="t">'+itemname+'</span></a>');
} else {
document.write('<a href="'+itemlink+'">'+itemname.substr(1,itemname.length)+'</a>');
subList = true;
}
if (i==(menuitems.length-1)) document.write("</li>");
}
}
</script>

</head>
<body>
<div id='art-page-background-simple-gradient'>
</div>
<script type='text/javascript'>
artCheckNavBar();
</script>
<div id='art-main'>
<div class='art-Sheet'>
<div class='art-Sheet-tl'/>
<div class='art-Sheet-tr'/>
<div class='art-Sheet-bl'/>
<div class='art-Sheet-br'/>
<div class='art-Sheet-tc'/>
<div class='art-Sheet-bc'/>
<div class='art-Sheet-cl'/>
<div class='art-Sheet-cr'/>
<div class='art-Sheet-cc'/>
<div class='art-Sheet-body'>
<b:section class='art-Header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test (Header)' type='Header'/>
</b:section>
<script type='text/javascript'>
var menuitems = new Array();
var showHomePage = false;
if (true) {
showHomePage = true;
var homePageName = 'Home';
var homePageLink = '<data:blog.homepageUrl/>';
menuitems.push(new Array('Home','<data:blog.homepageUrl/>'));
}
</script>
<b:section class='art-nav' id='navsection' maxwidgets='1' showaddelement='no'>
<b:widget id='LinkList99' locked='true' title='Top Menu' type='LinkList'/>
</b:section>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
<div class='art-contentLayout'>
<b:section class='art-content' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
<b:section class='art-sidebar1' id='sidebar1' preferred='yes'>
<b:widget id='CustomSearch1' locked='false' title='Search' type='CustomSearch'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
<b:section class='art-sidebar2' id='sidebar2' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='BlogList1' locked='false' title='Blog Roll' type='BlogList'/>
<b:widget id='Label1' locked='false' title='Categories' type='Label'/>
</b:section>

</div>
<div class='cleared'/>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
<div class='art-Footer'>
<div class='art-Footer-inner'>
<a class='art-rss-tag-icon' href='/feeds/posts/default' title='RSS'/>
<div class='art-Footer-text'>
<b:section class='art-footer-nav' id='footersection' maxwidgets='2' showaddelement='no'>
<b:widget id='LinkList98' locked='true' title='Footer Links' type='LinkList'/>
<b:widget id='Text99' locked='true' title='Copyright Text' type='Text'/>
</b:section>

</div>
<script type='text/javascript'>
artFixFooterMenu();
artInsertSidebarBlocks("widget Gadget");
artInsertSidebarBlocks("widget Label");
artInsertSidebarBlocks("widget Profile");
artInsertSidebarBlocks("widget Followers");
artInsertSidebarBlocks("widget CustomSearch");
artInsertSidebarBlocks("widget HTML");
artInsertSidebarBlocks("widget Text");
artInsertSidebarBlocks("widget AdSense");
artInsertSidebarBlocks("widget Image");
artInsertSidebarBlocks("widget Slideshow");
artInsertSidebarBlocks("widget VideoBar");
artInsertSidebarBlocks("widget Poll");
artInsertSidebarBlocks("widget BlogList");
artInsertSidebarBlocks("widget LinkList");
artInsertSidebarBlocks("widget TextList");
artInsertSidebarBlocks("widget Feed");
artInsertSidebarBlocks("widget NewsBar");
artInsertSidebarBlocks("widget Subscribe");
artInsertSidebarBlocks("widget BloggerButton");
artInsertSidebarBlocks("widget BlogArchive");
</script>
</div>
<div class='art-Footer-background'/>
</div>

</div>
</div>
<div class='cleared'/>
<p class='art-page-footer'><a href='http://www.artisteer.com/?p=blogger_templates'>Blogger Template</a> created with Artisteer.</p>
</div>

</body>
</html>

KeronJ

Posted: 11/11/2010

Quote message

The template above corresponds to this site which is an exact replica of the site that i run

http://newtest11.blogspot.com/

My layout has one bar at the top of the first post and two side bars.

Thanks for all your help thus far Endy

Endy

Posted: 11/11/2010

Quote message

Glad to help. I will look on your template code. you can check my website i have a couple of templates made and ready to be downloaded. maybe you find something interesting.

http://www.weblodesign.co.cc/

keronj

Posted: 11/12/2010

Quote message

Thx i'll check it out

Endy

Posted: 11/12/2010

Quote message

I remade the template from scratch and inserted the columns. you can download from this link:

http://descarca.googlecode.com/files/keronj.xml

KeronJ

Posted: 11/12/2010

Quote message

Thx so much ENDY you have no idea how much you made my day

Endy

Posted: 11/12/2010

Quote message

with pleasure. I'm glad I could help.

DeeLan

Posted: 12/19/2010

Quote message

Is there a way to do this in reverse?

I did a layout I love and accidently deleted it from Artisteer so now I only have the XML file on my hard drive. I'd like to be able to tweak the code to add the wider bar above the 2 sidebars.

Endy

Posted: 12/20/2010

Quote message

yes it's possible. upload your xml file somewhere like hotfile megaupload or google sites,google code put here the link and i will fix it.

Sarah

Posted: 2/7/2011

Quote message

I have done the above, but my test blog shows that the post is taking over the entire width of my layout. It does not appear this way in Blogger Post Elements. It also appears fine in Chrome and Firefox. It seems to be some type of compatibility issue with IE. Is there something I've missed or may have added accidentally to the HTML code that would cause this?

Test blog: uglyducklingdiy.blogspot.com

IE View:

Chrome and Firefox View:

Endy

Posted: 2/8/2011

Quote message

Yes with IE it is a problem. For now I didn't find a fix .

Rachid B

Posted: 4/15/2011

Quote message

Quote Endy:

Yes with IE it is a problem. For now I didn't find a fix .

Hi Endy, could you please help me. I have an artisteer template published in sabriflix.blogspot.com and i want to add subitems and subsubitems into my TopMenu like you did in your demo http://548621.blogspot.com/
But Blogger did not suggest me any option to add subitems in my top menu.
My topMenu is coded like this in the template:


    <script type='text/javascript'>

        var menuitems = new Array();

        var showHomePage = false;

        if (true) {

          showHomePage = true;

          var homePageName = &#39;Home&#39;;

          var homePageLink = &#39;<data:blog.homepageUrl/>&#39;;

          menuitems.push(new Array(&#39;Home&#39;,&#39;<data:blog.homepageUrl/>&#39;));

        }

    </script>

    <b:section class='art-nav' id='navsection' maxwidgets='1' showaddelement='yes'>

<b:widget id='LinkList99' locked='false' title='Top Menu' type='LinkList'/>

</b:section>

As it is not <ul> <li> tags i do not know how to add new links and how to imbricate them...

Rachid B

Posted: 4/15/2011

Quote message

I find the tip : you added - for subitems and --for subsubitem etc...
(i find it in your source code : so thank you :) )

Endy

Posted: 4/15/2011

Quote message

This is the tutorial for menus submenus etc etc :)

http://www.artistutorials.co.cc/2011/03/how-to-display-3-level-subitem-menus-in.html