/* breakpoints */ .search-results { /* breakpoints */ } .search-results label { background: transparent; color: #000; } .search-results input, .search-results button { display: inline-block; box-sizing: border-box; background: #fff !important; border: 1px solid #d2d2d2; border-radius: 0 !important; color: #000; font-weight: normal; padding: 8px 2%; clear: both; height: auto; font-size: 13px; } .search-results input:focus { border: 1px solid #d2d2d2; } .search-results input[type="submit"], .search-results input[type="reset"], .search-results input[type="button"], .search-results button { border: 1px solid #89C6CC; padding: 5px 20px; } .search-results input[type="submit"]:hover, .search-results input[type="reset"]:hover, .search-results input[type="button"]:hover, .search-results button:hover { background: #f7f7f7 !important; } .search-results input::-moz-focus-inner, .search-results button::-moz-focus-inner { border: 0; padding: 0; } .search-results input[type="text"] { font-size: 13px; } .search-results input[type="text"], .search-results input[type="email"], .search-results input[type="password"], .search-results textarea, .search-results select { box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1); color: #000; width: 100%; background: #fff; border: 1px solid #d2d2d2; } .search-results select { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; box-sizing: border-box; outline: none; cursor: pointer; padding: 5px; } .search-results .search-result-list { padding-top: 5px; } .search-results.vertical .search-result-list > li, .search-results.component-details .search-result-list > li, .search-results.standard-fields .search-result-list > li { border-width: 1px 1px 2px 1px; border-style: solid; border-color: #d2d2d2; box-sizing: border-box; display: inline-block; margin: 0 7px 10px 0; padding: 5px; position: relative; vertical-align: top; width: 100%; } .search-results.vertical .search-result-list > li .field-title, .search-results.component-details .search-result-list > li .field-title, .search-results.standard-fields .search-result-list > li .field-title { display: block; margin-top: 10px; } .search-results.vertical .search-result-list > li .field-title a, .search-results.component-details .search-result-list > li .field-title a, .search-results.standard-fields .search-result-list > li .field-title a { display: block; font-size: 16px; font-weight: normal; line-height: 20px; text-decoration: none; } .search-results.vertical .search-result-list > li a img, .search-results.component-details .search-result-list > li a img, .search-results.standard-fields .search-result-list > li a img { max-width: 100%; height: auto; } .search-results.vertical .search-result-list > li:hover, .search-results.component-details .search-result-list > li:hover, .search-results.standard-fields .search-result-list > li:hover { border-bottom-width: 1px 1px 2px 1px; border-bottom-style: solid; border-bottom-color: #15909c; } .search-results.horizontal .search-result-list, .search-results.components .search-result-list, .search-results.example-fields .search-result-list { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; } .search-results.horizontal .search-result-list:after, .search-results.components .search-result-list:after, .search-results.example-fields .search-result-list:after { content: ""; display: table; clear: both; } .search-results.horizontal .search-result-list > li, .search-results.components .search-result-list > li, .search-results.example-fields .search-result-list > li { border-width: 1px 1px 2px 1px; border-style: solid; border-color: #d2d2d2; box-sizing: border-box; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin: 0 2% 10px 0; min-height: 175px; min-width: 23%; padding: 5px; position: relative; } .search-results.horizontal .search-result-list > li .field-title, .search-results.components .search-result-list > li .field-title, .search-results.example-fields .search-result-list > li .field-title { display: block; padding: 0 5px; text-align: center; } .search-results.horizontal .search-result-list > li .field-title a, .search-results.components .search-result-list > li .field-title a, .search-results.example-fields .search-result-list > li .field-title a { font-size: 18px; font-weight: normal; line-height: 20px; text-decoration: none; } .search-results.horizontal .search-result-list > li a img, .search-results.components .search-result-list > li a img, .search-results.example-fields .search-result-list > li a img { height: auto; max-width: 100%; } .search-results.horizontal .search-result-list > li:hover, .search-results.components .search-result-list > li:hover, .search-results.example-fields .search-result-list > li:hover { border-bottom-width: 1px 1px 2px 1px; border-bottom-style: solid; border-bottom-color: #15909c; } .search-results .search-results-overlay { display: none; } .search-results.loading-in-progress { min-height: 200px; } .search-results.loading-in-progress .search-result-overlay { background-color: rgba(255, 255, 255, 0.9); height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .search-results.loading-in-progress .search-result-overlay:after { background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiBmaWxsPSJibGFjayI+CiAgPHBhdGggIG9wYWNpdHk9Ii4yNSIgZD0iTTE2IDAgQTE2IDE2IDAgMCAwIDE2IDMyIEExNiAxNiAwIDAgMCAxNiAwIE0xNiA0IEExMiAxMiAwIDAgMSAxNiAyOCBBMTIgMTIgMCAwIDEgMTYgNCIvPgogIDxwYXRoIGZpbGw9JyNkZGRkZGQnIGQ9Ik0xNiAwIEExNiAxNiAwIDAgMSAzMiAxNiBMMjggMTYgQTEyIDEyIDAgMCAwIDE2IDR6Ij4KICAgIDxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiBmcm9tPSIwIDE2IDE2IiB0bz0iMzYwIDE2IDE2IiBkdXI9IjAuOHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogIDwvcGF0aD4KPC9zdmc+); background-repeat: no-repeat; background-size: 100% 100%; content: ""; height: 50px; left: 0; margin: -30px auto 0; position: absolute; right: 0; top: 50%; width: 50px; } .search-results.loading-more-in-progress:after { background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiBmaWxsPSJibGFjayI+DQogIDxwYXRoICBvcGFjaXR5PSIuMjUiIGQ9Ik0xNiAwIEExNiAxNiAwIDAgMCAxNiAzMiBBMTYgMTYgMCAwIDAgMTYgMCBNMTYgNCBBMTIgMTIgMCAwIDEgMTYgMjggQTEyIDEyIDAgMCAxIDE2IDQiLz4NCiAgPHBhdGggZmlsbD0nIzFhODBiNicgZD0iTTE2IDAgQTE2IDE2IDAgMCAxIDMyIDE2IEwyOCAxNiBBMTIgMTIgMCAwIDAgMTYgNHoiPg0KICAgIDxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiBmcm9tPSIwIDE2IDE2IiB0bz0iMzYwIDE2IDE2IiBkdXI9IjAuOHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICA8L3BhdGg+DQo8L3N2Zz4NCg==); background-position: center center; background-repeat: no-repeat; background-size: 50% 50%; content: ""; display: block; height: 100px; } .search-results .no-results { padding: 5px; }