Квитанция на печать

Проблема: при выводе на печать видим что-то такое:

1. На печать выводится много лишней информации: меню, строка поиска и тд.
2. Разноцветные надписи надо привести к ч/б виду
3. По умолчанию современные браузеры убирают фон страницы (на практике: игнорируют тэг background), однако проблема возникает в старых браузерах

Работаем:  Для решения задачи будем использовать очень модную штуку - адаптивную верстку. Суть в следующем: необходимо задать несколько css шаблонов для различных устройств. Возможно это двумя способами: подключение нескольких файлов и разбиение существующего файла на блоки под каждое устройство. Первый вариант нам не подходит из-за ммм… не гибкой системы подключения css файлов в битриксе. Используем второе решение. Открываем стиль шаблона и заносим весь шаблон со всеми блоками, классами и идентификаторами в конструкцию:

@media screen { }

Проще говоря, браузеры всех устройств с экранами будут брать стиль отсюда. Теперь ниже печатаем конструкцию для вывода на печать:

@media print { }

…и в нем пишем новый стиль для вывода на печать, который будет обрабатываться только принтерами. Я сделал невидимыми все ненужные блоки, изменил цвет текста на черный, прописал отсутствие фона блока, выводимого на печать и немного изменил форматирование текста, чтоб форма занимала всю страницу и не выходила за её пределы. Весь стиль у меня занял всего несколько строк:

@media print { 
   #pagetitle { 
      color: black; 
      margin-left: 5%; 
   } 
   #panel, #header-wrapper, #left-column, #print-btn, #breadcrumb-search, #footer{       display: none; 
   } 
   #print { 
      background: none; 
      margin-left: 5%; 
      margin-right: 5%; 
      width: 90%; 
   } 
}

Теперь вывод на печать выглядит так: