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

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

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". Не стал выкладывать код, чтобы он не получился слишком длинным. Еще раз спасибо!