search flyout placeholder

dashboard-ui/css/search.css

@@ -0,0 +1,89 @@
+.headerSearch {
+    display: none;
+    margin-right: 3em;
+}
+
+.txtSearch {
+    vertical-align: middle;
+    font: 16px arial,sans-serif;
+    height: 28px;
+    margin: 0 .15em 0 0;
+    width: 150px;
+}
+
+.searchHints {
+    width: 148px;
+    color: #000;
+    font-family: Arial;
+}
+
+.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 {
+    background-color: #fff;
+    border: 1px solid #ccc;
+    position: absolute;
+    z-index: 999;
+}
+
+.searchHintsContent {
+    padding: 10px;
+}
+
+@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;
+    }
+}