I have widgetized the entire homepage at http://www.theagnonschool.org. I like the result. But I want all the new widget areas I've created to appear only on the front page.

I've used widget logic to specify that each widget should appear only on the homepage, assuming that on the other pages of the site, the new widget areas would collapse when there was no widgets in them.

Unfortunately, while the spaces the widgets occupied do collapse, the dashed-line borders I created around those new widget areas persist on every page. How can I get rid of them on all but the home pages?

Example: The dashed lines bunched together at the top of http://theagnonschool.org/an-agnon-e...ood-education/. They aren't supposed to be there and only appeared after I created and styled the new widget areas.

If it helps, here is the code I used to create the new widget areas:

/*fix padding on homepage only*/
body.page-id-576 td#middle {
padding: 0px}


/*Style new widget areas on homepage*/
/*top left*/
td#intro_area_1 {
margin-top: -2px;
border-top: dashed 1px #DDEEFF;
border-bottom: dashed 1px #DDEEFF;
border-right: dashed 1px #DDEEFF;
font-family: trebuchet, helvetica, verdana, sans-serif;
background-color: #B3B3FF;
}

/*top right */
td#intro_area_2 {
border-top: dashed 1px #DDEEFF;
border-bottom: dashed 1px #DDEEFF;
font-family: trebuchet, helvetica, verdana, sans-serif;
background-color: #FFEEBD;
}


/*top_widgets=second row of widgets*/
td#top_widgets_1 {
border-bottom: dashed 1px #DDEEFF;
font-family: trebuchet, helvetica, verdana, sans-serif;
background-color: #C1E4FF;
}

td#top_widgets_2 {
border-bottom: dashed 1px #DDEEFF;
border-left: dashed 1px #DDEEFF;
font-family: trebuchet, helvetica, verdana, sans-serif;
color: #84C2F2;
background-color: #405B9E;}

/*bottom_squares=third row widgets*/
td#bottom_squares_1 {
border-top: dashed 1px #DDEEFF;
border-bottom: dashed 1px #DDEEFF;
border-right: dashed 1px #DDEEFF;
font-family: trebuchet, helvetica, verdana, sans-serif;
color: #84C2F2;
background-color: #013467;
}
td#bottom_squares_2 {
border-bottom: dashed 1px #DDEEFF;
font-family: trebuchet, helvetica, verdana, sans-serif;
color: #84C2F2;
background-color: #FFEEBD;
}
td#bottom_squares_3 {
border-bottom: dashed 1px #DDEEFF;
border-left: dashed 1px #DDEEFF;
font-family: trebuchet, helvetica, verdana, sans-serif;
font-size: 12px;
color: #84C2F2;
background-color: #B3B3FF;
}
/*despite name these are footer widgets*/
td#header_widgets_1{
font-family: trebuchet, helvetica, verdana, sans-serif;
background-color: #FFfffD;
}

td#header_widgets_2{
font-family: trebuchet, helvetica, verdana, sans-serif;
background-color: #FFfffD;
}

td#header_widgets_3{
font-family: trebuchet, helvetica, verdana, sans-serif;
background-color: #FFfffD;
}

try applying the style only to the home page so your css would be

body.home td#intro_area_1 {
margin-top: -2px;
border-top: dashed 1px #DDEEFF;
border-bottom: dashed 1px #DDEEFF;
border-right: dashed 1px #DDEEFF;
font-family: trebuchet, helvetica, verdana, sans-serif;
background-color: #B3B3FF;
}
etc, etc, so the sytle will only apply on the home page

Ah. I didn't know there was a way to do that. Thanks.