Верстка сложного изображения

[Digidie]

Здравствуйте! Есть одно изображение, собственно вот оно Тут. Кому то покажется что оно вполне простое, но у меня не получается сверстать его. Прошу обратить внимание на "угасающие" границы голубого цвета по краям сайта, они и не сплошные и не такие маленькие чтобы взять часть во всю ширину изображения(верх или низ). Верхнюю часть я сверстал, проблема в нижней части. А именно нужно сделать так чтобы и тухнущие границы были на месте и блок по высоте тянулся. Я конечно могу взять кусок во всю ширину и в высоту как у границ(нижних), но тогда будет ооочень много места внизу. Уже намучался. Подскажите как это реализовать? Заранее Спасибо!

P.S. Заодно выложу сверстанную верхнюю часть, может можно как то будет по тому же принципу сделать:

html

<div id="content">
   <div class="l_line"></div>
   <div class="блок1"></div>
   <div class="блок2"></div>
   <div class="r_line"></div>
</div>

CSS

#content{
	width: 948px;
	float: left;
	min-height: 450px;
	margin: 46px 0 0 0;
	border-top: 1px solid #2c4b77;
	border-bottom: 1px solid #2c4b77;
	background: url(../images/cont_bg.png) repeat top center;
}
.l_line{
	width: 1px;
	height: 159px;
	background: url(../images/left_line_1.png) no-repeat top left;
	float: left;
}
.r_line{
	width: 1px;
	height: 159px;
	background: url(../images/left_line_1.png) no-repeat top right;
	float: right;
}
.блок1{
	width: 343px;
	height: 200px;
	float: left;
	margin: 41px 0 0 34px;
	border: 1px solid red;
}
.блок2{
	width: 422px;
	float: left;
	margin: 41px 0 0 39px;
	border: 1px solid red;
}

Ну и сам результат: вот. Синие заголовки это просто 2 блока в "блок1,блок2". Не стал выкладывать код, чтобы он не получился слишком длинным. Еще раз спасибо!