@@ -25,21 +25,6 @@ html {
2525 min-height: 100%;
2626}
2727
28−.center:after {
29− content: "";
30− z-index: -1;
31− background: url(../img/bg-body-index.jpg) no-repeat;
32− background-size: cover;
33− width: 100%;
34− height: 100%;
35− top: 0;
36− left: 0;
37− position: fixed;
38−}
39− .center.search:after {
40− content: none;
41− }
42−
4328.title h1 {
4429 background: url(../img/searx.png) no-repeat;
4530 width: 319px;
@@ -49,16 +34,12 @@ html {
4934}
5035
5136.center {
52− width: 55em;
37+ max-width: 55em;
5338 text-align: center;
5439 background: rgba(255,255,255,0.6);
5540 padding: 4em 2em;
5641 margin: 7% auto 0;
5742 position: relative;
58− /*position: absolute;
59− top: 50%;
60− left: 50%;
61− margin:-220px 0 0 -408px;*/
6243}
6344
6445.center.search {
@@ -69,6 +50,23 @@ html {
6950 padding-top: 1.8em;
7051}
7152
53+@media screen and (min-width: 1001px) {
54+ .center:after {
55+ content: "";
56+ z-index: -1;
57+ background: url(../img/bg-body-index.jpg) no-repeat;
58+ background-size: cover;
59+ width: 100%;
60+ height: 100%;
61+ top: 0;
62+ left: 0;
63+ position: fixed;
64+ }
65+ .center.search:after {
66+ content: none;
67+ }
68+}
69+
7270.autocompleter-choices {
7371 position: absolute;
7472 margin: 0;
@@ -106,11 +104,19 @@ html {
106104 text-decoration: underline;
107105 }
108106
107+@media screen and (max-width: 1000px) {
108+ .center { background: none; }
109+ .top_margin a {
110+ color: #333;
111+ }
112+}
113+
109114.checkbox_container { margin-top: 1.5em; }
110115 .checkbox_container label {
111116 padding: 0.5em 1em;
112117 color: #333;
113118 cursor: pointer;
119+ font-size: 0.9em;
114120 }
115121 .checkbox_container label:hover {
116122 background: #3498DB;
@@ -127,10 +133,70 @@ html {
127133 color: #FFF;
128134 }
129135
130−#categories > div {
136+#categories_container > div {
131137 display: inline-block;
132138}
133139
140+#categories .hidden {
141+ display: none;
142+ position: absolute;
143+ bottom: 1em;
144+ left: 0;
145+ text-align: center;
146+ width: 100%;
147+ font-size: 0.9em;
148+ font-style: italic;
149+ color: #333;
150+}
151+
152+#categories:hover .hidden {
153+ display: block;
154+}
155+
156+@media screen and (max-width: 900px) {
157+ #categories_container { letter-spacing: -5px; }
158+ #categories_container > div {
159+ letter-spacing: normal;
160+ margin-top: 1em;
161+ }
162+ .checkbox_container {
163+ margin: 0;
164+ }
165+ .checkbox_container label {
166+ display: block;
167+ background: #CCC;
168+ padding: 1em;
169+ border: 1px solid #FFF;
170+ }
171+ .top_margin { position: static; }
172+ #categories .hidden {
173+ position: static;
174+ display: block;
175+ }
176+}
177+
178+@media screen and (max-width: 900px) and (min-width: 501px) {
179+ #categories_container > div {
180+ width: 31%;
181+ margin-left: 2.333%;
182+ }
183+ #categories_container > div:nth-child(3n+1) { margin-left: 0; }
184+}
185+
186+@media screen and (max-width: 500px) {
187+ #categories_container > div {
188+ width: 48%;
189+ margin-left: 2%;
190+ font-size: 0.9em;
191+ }
192+ #categories_container > div:nth-child(2n+1) { margin-left: 0; }
193+ .title h1 {
194+ background: url(../img/searx-mobile.png) no-repeat;
195+ width: 200px;
196+ height: 39px;
197+ }
198+}
199+
134200#search_wrapper {
135201 position: relative;
136202}
@@ -284,6 +350,12 @@ html {
284350 text-decoration: underline;
285351 }
286352
353+.cache_link {
354+ color: #666;
355+ font-size: 0.9em;
356+ font-style: italic;
357+}
358+
287359.search.center {
288360 padding-right: 17em;
289361}
@@ -339,6 +411,10 @@ input[type="submit"]:focus {
339411 margin: auto;
340412}
341413
414+.row a {
415+ color: #3498db;
416+}
417+
342418.row form {
343419 letter-spacing: -5px;
344420}
@@ -368,6 +444,48 @@ input[type="submit"]:focus {
368444 min-height: 10.5em;
369445}
370446
447+@media screen and (max-width: 900px) {
448+ .row {
449+ margin: 0 1em;
450+ }
451+ .row fieldset { width: 49%; }
452+ .row fieldset,
453+ .row fieldset:nth-child(odd) {
454+ margin-right: 0;
455+ }
456+
457+ .row fieldset:first-child {
458+ width: 100%;
459+ margin-right: 0;
460+ }
461+
462+ .row fieldset:nth-child(even) {
463+ margin-right: 2%;
464+ }
465+
466+}
467+
468+@media screen and (max-width: 800px) {
469+ .row fieldset { width: 100%; }
470+
471+ select { width: 100%; }
472+
473+ table { font-size: 0.8em; }
474+ .right {display: none;}
475+ #sidebar { display: none; }
476+ #results { padding: 0 2em; }
477+ .search.center {
478+ padding-right: 2em;
479+ }
480+}
481+
482+@media screen and (max-width: 400px) {
483+ .row #categories_container > div {
484+ width: 100%;
485+ margin-left: 0;
486+ }
487+}
488+
371489fieldset {
372490 border: 0;
373491 margin: 1em 0;