Изменить форму поиска и выровнять по центру

.top ul li form{
    padding: 13px;   
}

body{
    width: 90%;
    padding: 20px;
    margin: 0 auto;
    box-shadow: 10px 10px 10px rgba(0,0,0,.5);
    background-color: #E1EDEB;
}
h2{
    font-family:"Century Gothic", "Gill Sans", sans-serif;
    color:#000000;
    margin-bottom:0;
    border: 2px solid black;
    border-radius: 5px;
    background-color: green;
    padding: 5px;
}
h2:hover{
    color: #ffffff;
}
::selection {
    color: #FFFFFF;
    background-color: blue;
}
.top ul {
    overflow: hidden; zoom: 1;
    padding: 1px;
    background: #0db5b5; /* Цвет блоков меню. */
    border-radius: 5px;
    
}
.top ul li{
    list-style: none;
    float: left; /* Выстраивание элементов списка в один ряд. */
    margin-right: 1px; /* создание отступов для того, чтобы не сливались пункты меню. */
    font-family: Arial, Helvetica, sans-serif; /* Указание типа шрифта. */
    font-size: 15px; /* Размер текста в ссылках. */
    font-weight: 600;
}
.top ul li a:hover{
    background: #92d3d3; /* Цвет блока при наведении курсора. */
    color: #6b6b6b;  /* Цвет текста при наведении курсора. */
    
}
.top ul li a{
   width: auto;
   display: block; /* Изменение отображения на блочное для того чтобы иметь возможность задать внутренние отступы. */
   padding: 15px 20px;  /* Внутри блочные отступы. */
 
   color: #3f3f3f; /* Цвет текста в блоках меню. */
   text-decoration: none; /* Устранение подчёркивания ссылок. */
   position: relative; /* Это необходимо при использовании Internet Explorer 6 для того, чтобы ссылка по всей своей площади была «кликабельной». */
}
.top ul li ul{
    list-style:none;  
    position:absolute;
    display: none;
    border-radius: 0px;
    opacity:0; /* Устанавливаем начальное состояние прозрачности */
    -webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */
}
.top ul li ul li{
    width: 800px;
    padding: 1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */
    float:none;
}
 
.top ul li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */
    display: block;
    opacity:1; /* Делаем непрозрачным */
}
 
.top ul li form{
    padding: 13px;
    
}
.top img{
    size: 30%;
}
 
.center{
    width: 72%;
    float:left;
}
.right{
    padding: 0 0;
    width: 25%;
    float:right;
}
.right li{
    padding: 5px 5px;
    list-style: none;
}
.right h2{
    text-align:center;
}
 
#map{
    border: 3px solid #afbcd1;
    margin: 10px;
}
 
.right ul {
    overflow: hidden; zoom: 1;
    padding: 0px;
    background: #0db5b5; /* Цвет блоков меню. */
    border-radius: 5px;
    font-size: 15px;
}
 
.right #rightList li ul{
    list-style:none;
    right: 27.5%;
    position:absolute;
    display: none;
    border-radius: 0px;
    opacity:0; /* Устанавливаем начальное состояние прозрачности */
    -webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */
}
 
.right #rightList li:hover{
    background: #92d3d3;
}
.right #rightList li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */   
    opacity:1; /* Делаем непрозрачным */
    display: block;
}
.right li a{
   width: auto;
   display: block; /* Изменение отображения на блочное для того чтобы иметь возможность задать внутренние отступы. */
   padding: 10px 10px;  /* Внутри блочные отступы. */
 
   color: #3f3f3f; /* Цвет текста в блоках меню. */
   text-decoration: none; /* Устранение подчёркивания ссылок. */
   position: relative; /* Это необходимо при использовании Internet Explorer 6 для того, чтобы ссылка по всей своей площади была «кликабельной». */
}

.search-field{
  border-radius:5px;
  background-color:green;
  border:2px solid black;
}