.col-1, .col-2, .col-3, .col-4{ float:left}
/*======= width =======*/
.main{margin:0 auto; text-align:left; width:980px; }

/*======= header =======*/
#header {height:187px;  background:url(template_images/top.gif) repeat-x top}

/*======= index.html =======*/
#page1 #content .col-1{ width:353px}
#page1 #content .col-2{ width:317px}
#page1 #content .col-3{ width:294px}
#page1 #content .col-3 .col-1{ width:112px}
#page1 #content .col-3 .col-2{ width:80px}
/*======= index-2.html =======*/
#page3 #content .col-1{ width:353px}
#page3 #content .col-2{ width:611px}
#page3 #content .col-2 .col-1{ width:260px; margin-right:35px}
#page3 #content .col-2 .col-2{ width:260px}
/*======= index-3.html =======*/
#page4 #content .row1 .col-1{ width:647px}
#page4 #content .row1 .col-2{ width:317px}
#page4 #content .col-1{ width:300px} /* |I made this change to accomodate IE6 after we modified the layout|  #page4 #content .col-1{ width:317px}*/
#page4 #content .col-2{ width:647px}
#page4 #content .col-2 .col-1{ width:260px; margin-right:35px}
#page4 #content .col-2 .col-2{ width:260px}
/*======= index-4.html =======*/
#page5 #content .col-1{ width:353px}
#page5 #content .col-2{ width:611px}
#page5 #content .col-2 .col-1{ width:260px; margin-right:35px}
#page5 #content .col-2 .col-2{ width:260px}
/*======= my addition "6" =======*/
#page6 #content .col-1{ width:353px}
#page6 #content .col-2{ width:964px;}
#page6 #content .col-2 .col-1{ width:260px; margin-right:45px;}
#page6 #content .col-2 .col-2{ width:260px; margin-right:45px;}
#page6 #content .col-2 .col-3{ width:260px;}


/*======= footer =======*/
#footer { height:127px; }
#footer .col-1{ width:677px; background:url(template_images/bot1.gif) repeat-x top; height:65px}
#footer .col-2{ width:303px; background:url(template_images/bot2.gif) repeat-x top; height:65px}