<body>
<div id="MainPage_Body">
<div id="Header">
<div id="Logo"><a href="Index.html"></a></div>
<div id="CategorySelector"></div>
<form>
<input id="Search" type="text" autocomplete="off" required>
</form>
</div>
</div>
</body>
#Header {
width: 100%; height: 100px;
background-color: #2d2d2d;
position: relative;
}
#Logo {
width: 400px; height: 100px;
background-image: url(Images/Logo/Logo.png);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
position: absolute;
left: 50%; margin-left: -200px;
cursor: pointer;
transition-duration: 0.2s;
}
#Logo:active {
background-size: 90%;
}
#CategorySelector {
width: 50px; height: 50px;
background-image: url(Images/Icons/CategorySelectorIcon.png);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
position: absolute;
margin-top: 25px; margin-left: 30px;
cursor: pointer;
transition-duration: 0.2s;
}
#CategorySelector:active {
background-size: 80%;
}
#Search {
width: 20%; height: 50px;
text-align: center;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 30px;
color: #2d2d2d;
background-color: #ffb0f0;
border: 0;
border-radius: 25px;
position: absolute;
right: 25px; top: 25px;
}