media queries

diff --git a/style.css b/style.css
index 4849e3491e5a25c94a86c9e9c3f9efbfe86ffc75..8de1b342016a62e78d5815006d437d2c540d2e52 100644 (file)
--- a/style.css
+++ b/style.css
@@ -193,14 +193,38 @@ a[href="#advsearch"]:before {
 #advsearch input.and:checked + label + .select {
   display: inline-block;
   position: relative;
 #advsearch input.and:checked + label + .select {
   display: inline-block;
   position: relative;

-  width: 19%;
+  width: 100%;

   margin: 0 .5% 1em .5%;
   margin: 0 .5% 1em .5%;

-  min-width: 200px;

   min-height: 12em;
   overflow: hidden;
   vertical-align: top;
 }
 
   min-height: 12em;
   overflow: hidden;
   vertical-align: top;
 }
 

+@media (min-width: 460px){
+#advsearch .submit,
+#advsearch input.and + label + .select:first-of-type,
+#advsearch input.and:checked + label + .select {
+  width: 49%; min-width: 200px;
+} }
+@media (min-width: 660px){
+#advsearch .submit,
+#advsearch input.and + label + .select:first-of-type,
+#advsearch input.and:checked + label + .select {
+  width: 32%;
+} }
+@media (min-width: 860px){
+#advsearch .submit,
+#advsearch input.and + label + .select:first-of-type,
+#advsearch input.and:checked + label + .select {
+  width: 24%;
+} }
+@media (min-width: 1060px){
+#advsearch .submit,
+#advsearch input.and + label + .select:first-of-type,
+#advsearch input.and:checked + label + .select {
+  width: 19%;
+} }
+

 #advsearch .submit { min-height: 0; }
 #advsearch .submit * { width: 50%; }
 
 #advsearch .submit { min-height: 0; }
 #advsearch .submit * { width: 50%; }
 


@@ -243,13 +267,13 @@ a[href="#advsearch"]:before {
 .list {
   position: relative;
   display: inline-block;
 .list {
   position: relative;
   display: inline-block;

-  width: 25%; min-width: 250px;
+  width: 100%;

   padding: .375em;
   vertical-align: top;
   overflow: hidden;
 }
   padding: .375em;
   vertical-align: top;
   overflow: hidden;
 }

-.list.dir { padding: .5em 1em; }

 
 

+.list.dir { padding: .5em 1em; }

 .list:before {
   position: absolute;
   top: .25em; left: .25em;
 .list:before {
   position: absolute;
   top: .25em; left: .25em;


@@ -327,10 +351,15 @@ a[href="#advsearch"]:before {
 
 #multitag fieldset{
   display: inline-block;
 
 #multitag fieldset{
   display: inline-block;

-  width: 25%; min-width: 250px;
+  width: 100%;

   vertical-align: top;
   padding: 0 .25em;
   border: none;
 }
   vertical-align: top;
   padding: 0 .25em;
   border: none;
 }

+
+@media (min-width: 520px) { .list, #multitag fieldset { width: 50%; min-width: 250px; } }
+@media (min-width: 760px) { .list, #multitag fieldset { width: 33%; } }
+@media (min-width: 1020px){ .list, #multitag fieldset { width: 25%; } }
+

 #multitag fieldset * { width: 100%; }
 #multitag fieldset button { width: 50%; }
 #multitag fieldset * { width: 100%; }
 #multitag fieldset button { width: 50%; }