/* Правила для экранной версии представления данных */
@media screen {
  /* Общие установки для страницы */
  html, body {
    margin: 0px;
    padding: 0px;
    border: 0px;
  }
  body {
    color: #000;
    background: #999 url(images/bg_page.gif) scroll;
    font-family: Georgia, "Times New Roman", Times, serif;
  }

  /* "Подложка" для всей страницы */
  #carrier {
    width: 100%;
    background: #fff;
    width: 980px;
	      margin: auto;
      text-align: left;
  }

  /* Шрифт для "шапки", меню навигации, заголовков второго уровня в основном тексте и "подвала" */
  #header, #menu, #text h2, #footer {
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  }

/* Общие правила оформления "шапки" и "подвала" */
  #header_im {
    color: #ff0000;
    background: #ffffff;
    padding: 0px 0px;
    margin: 0px;
  }

  /* Общие правила оформления "шапки" и "подвала" */
  #header, #footer p {
    color: #ff0000;
    background: #ffffff;
    padding: 0px 0px;
    margin: 0px;
  }

  /* Представление "шапки" */
  #header {
    font-size: 100%;
    /*border-bottom: solid 5px #69c;*/
  }

  /* На внутренних страницах сайта титульная надпись в "шапке"
     выступает в качестве ссылки на главную страницу. Для этой
     ссылки задаются такие правила, чтобы она визуально была
     неотличима от заголовка без ссылки */
  #header a:link, #header a:visited, #header a:hover, #header a:active {
    color: #fff;
    text-decoration: none;
  }

  /* "Подложка" для навигационного меню. Ширина области навигации
      постоянна во всех браузерах и составляет 200 пикселей */
  #menucarrier
  {
    width: 200px;
    margin-bottom: 20px;
    float: left;
    background: #fff0cc url(images/bg_menu.gif) center repeat-y scroll;
  }

  /* Собственно блок навигации */
  #menu {
	font-size: 12px;
	text-align: center;
	padding: 10px 20px;
	border-style: none dotted dotted none;
	border-width: 0px 0px 0px 0px;
	border-color: #c00;
	
	vertical-align: middle;
  }

  /* Хитрые игры со свойствами margin и padding имеют целью
     полную совместимость с IE5. Блок навигации отображается в IE5
     так же, как и в более современных браузерах. "Кнопки"
     навигационного меню расположены на расстоянии 20 пикселей
     друг от друга и от границ навигационного блока по вертикали */
  #menu p {
    padding: 10px 0px;
    margin: 0px;
  }

  /* При помощи свойства display мы превращаем гиперссылки и
     контейнер <span>...</span>, размещенные в блоке навигации, из
     внутристрочных элементов в блочные, что дает нам возможность
     указать ширину при помощи свойства width */
  #menu a, #menu span
  {
	display: block;
	width: 154px;
	margin: auto;
  }

  /* Далее следуют правила представления "кнопок" навигационного меню.
     Их четыре вида: 1) обыкновенные; 2) выделенные при помощи курсора
     мыши; 3) соответствующие текущему "магистральному" разделу и
     предназначенные для его внутренних страниц - для таких "кнопок"
     назначен класс current; 4) соответствующие текущей
     странице и поэтому не являющиеся ссылками - этот вид "кнопок"
     представлен элементами <span>...</span> */
  #menu a {
    color: #000;
    text-decoration: none;
  }
  #menu a:link, #menu a:visited {
    background: #fff0cc;
    border: solid 1px #fc9;
  }
  #menu a:hover, #menu a:active, #menu a.current:link, #menu a.current:visited, #menu span {
    border-style: solid dotted;
    border-width: 1px;
    border-color: #c00;
  }
  #menu a.current:link, #menu a.current:visited, #menu span {
    background: #fff;
  }
  #menu span
  {
    color: #999;
  }
  #menu a.current:hover, #menu a.current:active {
    background: #fff0cc;
  }


  /* Дальнейшие правила определяют оформление элементов области
     основного текстового содержания страницы */
  #text {
    margin-left: 200px;
    padding: 20px;
	color: #369;
  }
  #text h2 {
    font-size: 120%;
    font-weight: normal;
    text-transform: uppercase;
    color: #369;
  }

  /* Псевдокласс first-child указывает на первый вложенный
     в блок #text заголовок <h2>...</h2>. Для таких заголовков
     верхний вертикальный отступ устанавливается равным нулю.
     Впрочем, Internet Explorer не понимает этого псевдокласса,
     так что в браузере от Microsoft первый заголовок области
     основного текста будет расположен заметно дальше от
     "шапки", нежели в браузерах, относящихся к рекомендациям
     W3C более уважительно */
  #text h2:first-child {
    margin-top: 0px;
  }

  /* Абзацы основного текста оформляются в соответствии
     с традициями русскоязычного текстового набора */
  #text p {
    text-align: justify;
    text-indent: 1.5em;
    margin: 0px;
  }

  /* Класс абзацев, предназначенный для новостей сайта */
  #text p.news {
    text-align: left;
    text-indent: 0pt;
    margin-top: .5em;
    margin-bottom: .5em;
  }

  /* Класс, позволяющий выделять полужирным начертанием
     даты свежих обновлений сайта */
  .date {
    font-weight: bold;
  }

  /* Представление нумерованных и маркированных списков
     в основном тексте */
  #text ul, text ol {
    margin-top: 0px;
    margin-bottom: 0px;
  }
  #text ul {
    list-style-type: square;
  }

  /* Оформление ссылок в основном тексте */
  #text a {
    text-decoration: none;
  }
  #text a:link {
    color: #f60;
  }
  #text a:visited
  {
    color: #999;
  }
  #text a:hover {
    text-decoration: underline;
  }
  #text a:active {
    color: #f00;
  }

  /* Правила, определяющие представление "подвала" и содержащихся в нем
     элементов - абзацев и гипертекстовых ссылок */
  #footer {
    width: 100%;
    clear: both;
  }
  #footer p {
	font-size: 70%;
	border-top-width: 0px;
	border-top-style: none;
  }
  #footer a:link, #footer a:visited, #footer a:hover, #footer a:active {
    color: #000;
    text-decoration: underline;
  }
}

/* Правила, определяющие версию представления данных для карманных
   компьютеров. Никак не взаимосвязаны с правилами, определенными
   для экранной версии представления. Перечисленные ниже конструкции
   очень простые, комментировать здесь почти нечего. Все блоки
   позиционированы согласно простейшей схеме static и следуют
   друг за другом в нормальном потоке. Размер шрифта для всего
   текста страницы задан в пикселях: 16 пикселей для заголовков
   первого уровня, 14 - для заголовков второго уровня и 12 - для
   всех остальных элементов */
@media handheld {
  html, body {
    margin: 0px;
    padding: 0px;
    border: 0px;
  }
  body {
    font: 12px Tahoma, Arial, Helvetica, sans-serif;
    color: #000;
    background: #fff;
  }
  #header, #menucarrier, #text, #footer {
    padding: 5px;
  }
  #header, #footer {
    background: #ccc;
  }
  #header {
    font-size: 16px;
    margin: 0px;
  }
  #menucarrier {
    background: #fff0cc;
    border-top: solid 1px #666;
    border-bottom: solid 1px #666;
  }
  #footer {
    border-top: solid 1px #666;
  }
  h2, p {
    margin: 5px 0px;
  }
  #text h2
  {
    font-size: 14px;
  }
  ul {
    list-style: square inside;
    margin: 5px;
    padding: 0px;
  }
  li {
    margin: 0px;
    padding: 0px;
  }
  a:link {
    color: #00f;
  }
  a:visited {
    color: #609;
  }
}

/* Правила для печатной версии представления данных.
   Этот фрагмент листа стилей еще проще. При помощи свойства
   display со значением none мы скрываем все элементы, не
   требующиеся в печатной версии - "шапку", блок навигации
   и "подвал". Остается только область основного текста.
   Используем рубленый шрифт кегля 16 пунктов для заголовков,
   антикву кегля 12 пунктов для всего остального. Всему
   тексту, включая гиперссылки, назначаем черный цвет. */
@media print {
  body {
    color: #000;
    font: 12pt "Times New Roman", Times, serif;
  }
  #header, #menucarrier, #footer {
    display: none;
  }
  #text h2 {
    font: 16pt Arial, Helvetica, sans-serif;
  }
  #text a {
    color: #000;
    text-decoration: none;
  }
}