Ciao Saimonn,
prova così:
div#top_menu{
height:54px;
margin:0px auto;
width: 980px;
border-left: 9px;
border-top: 0px;
border-bottom: 0px;
border-right:9px;
border-style: solid;
border-color: red;}
div#main_bg{
margin:0px auto;
width: 978px;
text-align:left;
border-left: 10px;
border-top: 0px;
border-bottom: 0px;
border-right:10px;
border-style: solid;
border-color: red;}
div#f_area{
background: #646464 url(../images/f_area_bg.png) center repeat-y;
margin:0px auto;
width: 978px;
text-align:left;
margin-bottom:3px;
border-left: 10px;
border-top: 0px;
border-bottom: 10px;
border-right:10px;
border-style: solid;
border-color: red;}
dove in quelle parti di codice aggiungi la parte in neretto.
Colore e spessore decidili tu, ma comunque il primo va poi aggiustato otticamente es.: 9px dove gli altri hanno 10px.
P.S. Nell'immagine di sfondo forse è meglio che tu metta:
background-position: center 0; perché con una risoluzione video alta lo vedi allineato a sinistra e non sta benissimo.