body div#main
{
    /* can anchor bottom, but irregular size images pushes PDA into top menu 
     * avoidable if the JS to adjust height is enabled, but that does mess with page height */
    background: white no-repeat scroll right top;
/*    background-image: url(../images/front_background1.jpeg);*/
    height: 410px;
    margin-top: 22px;
}
#main ul
{
    margin-top: 30px;
    list-style-image: url(../images/arrow_blue.png);
    margin-left: 40px;
}

#main ul.links { margin-top: 15px;}
ul#features { width: auto; }
/*
#features
{
    display: block;
    margin-left: auto;
    margin-right: auto; 
    width: 1000px;  
    IE had issue with width calculation of items. used slightly larger size  when centring
}
*/
ul#features li
{
    float: left;
}
#main p { padding-right: 50%; line-height: 18px; margin-top: 20px; }
#features #web { background-image: url(../images/web.png); }
#features #survey { background-image: url(../images/survey.png); }
#features #mac { background-image: url(../images/mac.png); }
#features #widget { background-image: url(../images/widget.png); }
#features #myhealthwidget { background-image: url(../images/myhealth_widget.png); }
#features #email { background-image: url(../images/email.png); }
#features #ahrquspstf { background-image: url(../images/ahrquspstf.png); }

/* the e-mail and AHRQ/USPSTF blocks need to be given more room */
#features #email span, #features #ahrquspstf span { padding-right: 85px; }
#features #email span.title, #features #ahrquspstf span.title { padding-right: 0px; }
#features #ahrquspstf span { margin-top: -5px;margin-bottom: 0; }
#features #ahrquspstf span.title { margin-top: -8px; }