.headerSearch { display: none; margin-right: 3em; position: relative; } .txtSearch { vertical-align: middle; font: 16px arial,sans-serif; height: 28px; margin: 0 .15em 0 0; width: 150px; } .btnSearch { vertical-align: middle; background-color: #4d90fe; background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed)); background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed); background-image: -moz-linear-gradient(top,#4d90fe,#4787ed); background-image: -ms-linear-gradient(top,#4d90fe,#4787ed); background-image: -o-linear-gradient(top,#4d90fe,#4787ed); background-image: linear-gradient(top,#4d90fe,#4787ed); border: 1px solid #3079ed; color: #fff!important; margin: 0 0; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; font-weight: bold; height: 28px; min-width: 54px; padding: 0 8px; text-align: center; text-decoration: none !important; -moz-user-select: none; -webkit-user-select: none; text-align: center; } .btnSearch img { height: 28px; margin: 0 auto; border: 0; } .searchHints { width: 148px; color: #000; background-color: #fff; border: 1px solid #999; position: absolute; z-index: 999; margin-top: 1px; font-size: 14px; } .searchHintsContent { padding: 10px; } .searchHint { display: block; text-decoration: none; color: #000; border-bottom: 1px solid #eee; } .searchHint:hover { background-color: #eee; } .searchHintImage { display: inline-block; width: 15%; vertical-align: middle; } .searchHintContent { vertical-align: top; display: inline-block; width: 85%; } .searchHintName { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .searchHintSecondaryText { font-size: 11px; color: #999; margin-top: 3px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .searchHintContentInner { padding: 2px 5px; } @media all and (min-width: 650px) { .headerSearch { display: inline-block; } } @media all and (min-width: 750px) { .txtSearch { width: 200px; } .searchHints { width: 198px; } } @media all and (min-width: 850px) { .txtSearch { width: 250px; } .searchHints { width: 248px; } } @media all and (min-width: 1200px) { .txtSearch { width: 350px; } .searchHints { width: 348px; } } @media all and (min-width: 1440px) { .txtSearch { width: 400px; } .searchHints { width: 398px; } }