@font-face { font-family: 'Droid Sans'; font-style: normal; font-weight: 400; src: local('Droid Sans'), local('DroidSans'), url(../fonts/DroidSans.ttf) format('truetype'); } @font-face { font-family: 'Droid Sans'; font-style: normal; font-weight: 700; src: local('Droid Sans Bold'), local('DroidSans-Bold'), url(../fonts/DroidSans-Bold.ttf) format('truetype'); } body { background: white; color: black; margin: 0; padding: 0; font-family: 'Droid Sans', sans-serif; font-size: 12pt; } #content { padding: 0; margin: 1.5em 0; } #top-nav { background: #eee; color: black; } #top-nav ul { margin: 0 -0.75em; padding: 0; list-style-type: none; } #top-nav li { display: inline-block; } #top-nav li input, #top-nav li a { color: black; display: inline-block; margin-bottom: 3px; text-decoration: none; } #top-nav li a { padding: 0.2em 0.75em; outline: 0; } #top-nav li.search { background: white; margin: 0 0.25em; padding: 0.2em 0.5em; } #top-nav li a:focus, #top-nav li a:hover { color: firebrick; border-bottom: 3px solid firebrick; margin-bottom: 0; } #top-nav li.search input { border: 0; } .main-wrapper { margin: 0 auto; min-width: 700px; width: 80%; max-width: 1000px; } /* small screens */ @media (max-width: 699px), (max-device-width: 699px) { .main-wrapper { min-width: 0; width: 95%; max-width: 700px; } } .clear { clear: both; } #sidebar { float: left; width: 25%; margin-right: 1em; } #sidebar h1 { margin-top: 0; font-weight: normal; } #inner-content { overflow: hidden; } p:first-child, h1:first-child { margin-top: 0; } a { color: firebrick; text-decoration: none; outline: 0; } a:focus, a:hover { color: red; } i[class*='icon-'] { background-image: url('../img/icons.png'); background-repeat: no-repeat; display: inline-block; } a i[class*='icon-'] { background-color: firebrick; } a:focus i[class*='icon-'], a:hover i[class*='icon-'] { background-color: red; }