Адаптивная верстка PSD макета - HTML + CSS

К проекту прикреплены превью файлов PSD 

Необходима адаптивная вёрстка главной страницы сайта с использованием HTML + CSS.

По версии для десктопов.

Задний фон должен растягиваться по ширине на 100% во весь экран.

То есть блок куда будет помещён background должен иметь примерно такие свойства в таблице CSS:

.mainbody {

width:100%;

height: auto;

padding-bottom:86%;

background:url(../back.jpg);

background-position:top;

background-size:100%;

}

Элементы главной страницы: 

Меню сверху, центральное меню, футер должны находится на одинаковом расстоянии от верха, низа, боков экарна (как на скриншоте в превью). То есть при уменьшении экрана они должны пропорционально сдвигатья на величину уменьшения размеров окна и заднего фона. Шрифт, чёрточки в верхнем меню будут уменьшаться, центральное меню и футер тоже...

В футере скобка "^" поднимает страницу кверху

При наведении на пункт верхнего меню, полоска над ним меняется на синюю.

Адаптивный шаблон:

При уменьшении размеров до вертикально ориентированных мобильных устройств или просто при просмотре на вертикально вытянутом экране (в CSS вроде можно задать ориентацию экрана для мобильных устройств) - будет происходить смена позиционирования элементов (адаптивный шаблон). 

Пример адаптивной вёрстки так же прикреплён к проекту.

В адаптивном варианте -фон будет фиксирован и такой как на превью.. При движении элементов вверх - background фиксирован. Так же имеется скобочка "^" для перемещения обратно к началу сайта.

В правом верхнем углу выпадающее меню при нажатии на иконку.

PSD имеется