website/css/search.css

   1
   2 .top-bar {
   3   width: 100%;
   4   padding: 1em 15px;
   5 }
   6
   7 .top-bar #q {
   8   max-width: 500px;
   9 }
  10 @media (max-width: 850px) {
  11   form #q {
  12     min-width: 400px;
  13   }
  14 }
  15 form .checkbox-inline {
  16   margin-left: 10px;
  17 }
  18 form label {
  19   font-weight: normal;
  20 }
  21
  22 .search-type-link {
  23   display: inline;
  24   margin-right: 2em;
  25   position: absolute;
  26   right: 0
  27 }
  28
  29 #switch-coords {
  30   font-size: 0.8em;
  31   font-weight: bold;
  32   cursor: pointer;
  33 }
  34
  35 .sidebar {
  36   width: 25%;
  37   padding: 15px;
  38   padding-top: 0;
  39   display: inline-block;
  40   float: left;
  41 }
  42
  43
  44 #map-wrapper {
  45   position: relative;
  46   min-height: 500px;
  47   width: 75%;
  48   padding-right: 20px;
  49   display: inline-block;
  50   float: left;
  51 }
  52
  53 #map {
  54   height: 90%;
  55   min-height: 500px;
  56   background:#eee;
  57 }
  58
  59 #map-position {
  60   display: none;
  61   position: absolute;
  62   top: 0;
  63   right: 20px;
  64   padding: 0 5px;
  65   color: #333;
  66   font-size: 11px;
  67   background-color: rgba(255, 255, 255, 0.7);
  68   z-index: 500;
  69 }
  70
  71 #map-position-close {
  72   text-align: right;
  73 }
  74
  75 .result {
  76   font-size: 0.8em;
  77   margin: 5px;
  78   margin-top:0px;
  79   padding: 4px 8px;
  80   border-radius: 2px;
  81   background:#F0F7FF;
  82   border: 2px solid #D7E7FF;
  83   cursor:pointer;
  84   min-height: 5em;
  85 }
  86
  87
  88 .result.highlight {
  89   background-color: #D9E7F7;
  90   border-color: #9DB9E4;
  91 }
  92 .result.highlight .details {
  93   margin: 10px auto;
  94   display: block;
  95   max-width: 10em;
  96 }
  97 .result img{
  98   float: right;
  99 }
 100 .result .type{
 101   color: gray;
 102   font-size: 0.8em;
 103 }
 104 .result .details {
 105   display: none;
 106 }
 107 .noresults{
 108   text-align: center;
 109   padding: 1em;
 110 }
 111
 112 .more{
 113   text-align:center;
 114   margin-top: 1em;
 115 }
 116
 117 footer {
 118   text-align: center;
 119   padding: 2em 0;
 120   font-size: 0.8em;
 121   clear: both;
 122   color: #333;
 123 }
 124
 125 footer p {
 126   margin: 1em;
 127 }
 128
 129 @media (max-width: 768px) {
 130   #content {
 131     top: 0;
 132     position: relative;
 133   }
 134   #map-wrapper {
 135     width: 100%;
 136     max-height: 300px;
 137     padding: 20px;
 138   }
 139   #map-position {
 140     top: 20px;
 141     right: 20px;
 142   }
 143   #map {
 144     height: 300px;
 145   }
 146   .sidebar {
 147     width: 100%;
 148   }
 149   .search-button-group {
 150     display: inline;
 151   }
 152 }
 153
 154 .search-button-group {
 155   margin-top: 3px;
 156   box-sizing: content-box;
 157   margin-bottom: 3px;
 158 }
 159
 160 label {
 161   font-weight: normal;
 162 }
 163