Поиск по вакансиям

by pharma_nsk

HTML

<body>
<div class="nav">
<nav>
<div class="block">
<a href="#1">Вакансии</a>
</div>
<div class="block">
<form action="" method="post" id="search">
  <input type="text" name="seach" placeholder="Поиск по вакансиям"  class="input" />
  <input type="submit" name="" value="" class="submit" />
</form>
</div>
<div class="block">
<a href="#2">Зарплаты</a>
<a href="#3">Компании</a>
</div>
<div class="block">
<a href="#4">Блог</a>
<a href="#5">Новости</a>
</div>
<div class="block">
<a href="#4">Календарь</a>
</div>
</nav>
</div>
</body>

CSS

body {background-image:url('http://html5book.ru/wp-content/uploads/2015/07/background46.png'); font-size:10px; font-family:sans-serif;}
.nav {height:32px; width:90%;  margin: 50px auto; text-align:center; padding:5px; background-color: #4A4A4A; } 
nav {border:1px solid grey; border-radius: 5px; height:20px; padding:5px 0;}
.block {display:inline-block; float:left; height:20px}
.block:nth-child(3) {border-right:1px solid grey; }
.block:nth-child(4) {border-right:1px solid grey; }
a {display:inline-block; height:15px; padding:0 10px; color:white; text-align:center; line-height:16px; white-space: nowrap;}
nav a:hover {transition:all linear 0.2s; color:#A3A3A3;}
#search {width: 175px; height: 20px;  border-radius:5px; padding:0 3px;background-color:white; box-shadow: 0px 0px 5px 0px #6475B0;}
#search input { float: left; border:none;}
#search .input {font-size:10px; width: 130px; height: 17px; padding: 0 37px 1px 5px; color:#8A8A8A; outline: none;}
#search .submit { width: 20px; height: 20px; cursor: pointer; margin-left: -20px; background: url('http://iconizer.net/files/Fugue_Icons/orig/magnifier_medium_left.png') no-repeat 0px 2px;}