.headerSearch { display: none; margin-right: 1em; position: relative; } .txtSearch { vertical-align: middle; font: 13px arial,sans-serif; margin: 0 .15em 0 0; width: 80px; padding: 0; border: 1px solid #4d90fe; } .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; min-width: 54px; padding: 0 8px; text-align: center; text-decoration: none !important; -moz-user-select: none; -webkit-user-select: none; } .txtSearch, .btnSearch { height: 22px; line-height: 22px; } .btnSearch img { height: 22px; margin: 0 auto; border: 0; } .searchHints { width: 248px; color: #000; background-color: #fff; border: 1px solid #999; position: absolute; z-index: 998; margin-top: 1px; } .searchHintsContent { padding: 10px; } .searchHint { display: block; text-decoration: none; color: #000; border-bottom: 1px solid #eee; } .searchHint:hover { background-color: #eee; } .searchHint:focus { 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: 300px) { .headerSearch { display: inline-block; } } @media all and (min-width: 340px) { .txtSearch { width: 150px; } } @media all and (min-width: 850px) { .txtSearch { width: 200px; } .searchHints { width: 248px; } } @media all and (min-width: 950px) { .txtSearch { width: 250px; } .searchHints { width: 248px; } } @media all and (min-width: 1200px) { .txtSearch { width: 300px; } .searchHints { width: 298px; } } .circle { background-color: rgba(0,0,0,0); border: 5px solid rgba(0,183,229,0.9); opacity: .9; border-right: 5px solid rgba(0,0,0,0); border-left: 5px solid rgba(0,0,0,0); border-radius: 30px; box-shadow: 0 0 20px #2187e7; width: 30px; height: 30px; margin: 0 auto; -moz-animation: spinPulse 1s infinite ease-in-out; -webkit-animation: spinPulse 1s infinite linear; } .circle1 { background-color: rgba(0,0,0,0); border: 5px solid rgba(0,183,229,0.9); opacity: .9; border-left: 5px solid rgba(0,0,0,0); border-right: 5px solid rgba(0,0,0,0); border-radius: 30px; box-shadow: 0 0 15px #2187e7; width: 15px; height: 15px; margin: 0 auto; position: relative; top: -32px; -moz-animation: spinoffPulse 1s infinite linear; -webkit-animation: spinoffPulse 1s infinite linear; } @-moz-keyframes spinPulse { 0% { -moz-transform: rotate(160deg); opacity: 0; box-shadow: 0 0 1px #2187e7; } 50% { -moz-transform: rotate(145deg); opacity: 1; } 100% { -moz-transform: rotate(-320deg); opacity: 0; } } @-moz-keyframes spinoffPulse { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spinPulse { 0% { -webkit-transform: rotate(160deg); opacity: 0; box-shadow: 0 0 1px #2187e7; } 50% { -webkit-transform: rotate(145deg); opacity: 1; } 100% { -webkit-transform: rotate(-320deg); opacity: 0; } } @-webkit-keyframes spinoffPulse { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } }