body{
  background:white; /* Меняется фон экрана, выбирается здесь */
}

#wrapper{ /* Оболочка страницы сайта */
  width: 80%; /* Меняется ширина страницы */
  margin: 0 auto;
  background:white; /* Меняется задний фон страницы */
}

/* Шапка сайта */
 a {
    text-decoration: none;
}
a:link, a:active {
color:black;
font-weight:bold
    text-decoration: none;
}
a:visited {
color:black;
font-weight:bold
}
a:hover {
color:#ff0000;
font-weight:bold;
text-decoration:none
}

    #menu, #menu li {

        margin: 0; /* убрать внутренние отступы */

        padding: 0; /* убрать внешние отступы */

    }

    #menu {

        background: #03658e; /* цвет фона навигационной панели */

    }

    #menu li{

        display:inline-block; /* расположить пункты горизонтально */

        text-align: center; /* текст горизонтально по центру */

    }

    #menu a {

        display: block; /* ссылка растягивается на весь пункт li */

        padding: 5px 15px; /* задаем внутренние отступы */

        color: #fff; /* цвет текста */

        text-decoration: none; /* убрать нижнее подчёркивание у ссылок */

    }

    #menu a:hover {

        background: #8AB8CC; /* фон пунктов при наведении */

    }
#header{
position:relative; /* Задаём блоку относительное позиционирование для того, чтобы затем размещать, в нём другие элементы и позиционировать относительно его границ поверх фоновой картинки и заголовка */
  height:  5%; /* Высота шапки */
    width: 100%;
   background-image: url("img/55.jpg"); /* Фон шапки */
      background-repeat: no-repeat;
    background-position: center; /* Center the image */
    background-size: cover; /* Resize the background image to cover the entire container */
   margin-bottom: 5px; /* Нижний отступ шапки от остального контента */
  border-radius: 5px; /* Закругляются углы блока */
  box-shadow: rgba(0,0,0,0.5) 0px 1px 3px; /* Тень. Визуально приподнимает блок над оболочкой */
         position: sticky;
  top: 0;
}
img{ /* Фоновая картинка в шапке */
float: left; /* Разрешаем наплывание других элементов на картинку */
  margin: -40px 0 0 0;} /* Размещаем картинку в блоке header. 1-я и 3-я цифры - двигаем вверх-вниз, 2-я и 4-я цифры - двигаем вправо-влево */
h1{ /* Заголовок сайта */
  margin:15px 0 10px 40px; /* Заголовок двигается верх-вправо-вниз-влево. */
  color:black; /* Цвет заголовка */
}
.nomer{ /*Подзаголовок (номер телефона)*/
  position:absolute; /* Позиционируем абсолютно подзаголовок, относительно границ блока header. Также можно разместить в шапке сайта ещё другие картинки и абзацы поверх фоновой картинки и заголовка */
  top:5px; /* Двигается вверх-вниз */
  left:680px; /* Двигается вправо-влево */
  font-size: 25px; /* Размер букв подзаголовка */
  font-style:italic; /* Курсив */
  font-weight:bold; /* Жирный */
  color:#464451; /* Цвет букв подзаголовка */
}

/* Сайдбар (колонка справа) */

#sidebar{ /* Блок сайдбара */
  background-color: #ffffff; /* Фон блока */
  width: 20%; /* Ширина блока */
  padding: 10px; /* Отступ текста от краёв */
  float: right; /* Размещаем блок справа от других элементов, наплывание или обтекание справа). Если делать сайдбар слева, то значение right меняем на left */
  border-radius: 5px; /* Закругляем углы блока */
  box-shadow: rgba(0,0,0,0.5) 0px 1px 3px; /* Задаём блоку тень */
     position: sticky;
  top: 0;
}
.marcer{ /* Галочки маркеры меню */
  float: left; /* Размещаем слева от текста */
  margin: 5px 5px 0 0; /* Двигаются вверх-вправо-вниз-влево */
}

/* Контент (статья) */

#content{ /* Блок контента */
  margin-bottom: 5px; /* Отступ блока статьи от блока подвала */
  width: 100%; /* Ширина статьи */
  padding: 10px; /* Отступ текста от краёв блока */
  background: #ffffff; /* Фон статьи */
  border-radius: 5px;
  box-shadow: rgba(0,0,0,0.5) 0px 1px 3px;
     
}
.left{ /* Картинка в тексте слева */
  float: left;
  margin: 30px 7px 7px 7px;
}
.center{ /* Картинка в тексте слева */
  float: middle;
  margin: 1px 0px 50px 500px;
}
.right{ /* Картинка в тексте справа */
  float: right;
  margin: 7px 0 7px 7px;
}
/* Подвал */

#footer{ /* Блок подвала */
  height:80px; /* Высота блока подвала */
  background-color: #ffffff; /* Фон блока подвала */
  margin-bottom: 10px; /* Отступ снизу */
  border-radius: 5px; /* Закруглённые углы */
  box-shadow: rgba(0,0,0,0.5) 0px 1px 3px; /* Тень блока */
}
.clear{ /* Запрет наплывания. Устанавливается для того, чтобы блок контента, при заполнении текстом и изображениями не наплывал на подвал */
  clear: both;
}
  .fon{ /* Номер телефона */
  float:left; /* Разрешаем другим элементам обтекать абзац справа */
  margin:20px 0 0 20px;
}
.fax{ /* Номер факса */
  float:left;
  margin:20px 0 0 60px;
}
.mail{ /* Адрес E-mail */
  float:left;
 margin:20px 0 0 60px;
}