1/* BootStrap responsive calls separated from rest of style sheet to help non-responsive layouts */ 2@media (max-width: 979px) { 3 body { 4 padding-top: 0; 5 } 6 7 .navbar-fixed-top, 8 .navbar-fixed-bottom { 9 position: static; 10 } 11 12 .navbar-fixed-top { 13 margin-bottom: 20px; 14 } 15 16 .navbar-fixed-bottom { 17 margin-top: 20px; 18 } 19 20 .navbar-fixed-top .navbar-inner, 21 .navbar-fixed-bottom .navbar-inner { 22 padding: 5px; 23 } 24 25 .navbar .container { 26 width: auto; 27 padding: 0; 28 } 29 30 .navbar .brand { 31 padding-right: 10px; 32 padding-left: 10px; 33 margin: 0 0 0 -5px; 34 } 35 36 .nav-collapse { 37 clear: both; 38 } 39 40 .nav-collapse .nav { 41 float: none; 42 margin: 0 0 10px; 43 } 44 45 .nav-collapse .nav > li { 46 float: none; 47 } 48 49 .nav-collapse .nav > li > a { 50 margin-bottom: 2px; 51 } 52 53 .nav-collapse .nav > .divider-vertical { 54 display: none; 55 } 56 57 .nav-collapse .nav .nav-header { 58 color: #777777; 59 text-shadow: none; 60 } 61 62 .nav-collapse .nav > li > a, 63 .nav-collapse .dropdown-menu a { 64 padding: 9px 15px; 65 font-weight: bold; 66 color: #777777; 67 -webkit-border-radius: 3px; 68 -moz-border-radius: 3px; 69 border-radius: 3px; 70 } 71 72 .nav-collapse .btn { 73 padding: 4px 10px 4px; 74 font-weight: normal; 75 -webkit-border-radius: 4px; 76 -moz-border-radius: 4px; 77 border-radius: 4px; 78 } 79 80 .nav-collapse .dropdown-menu li + li a { 81 margin-bottom: 2px; 82 } 83 84 .nav-collapse .nav > li > a:hover, 85 .nav-collapse .dropdown-menu a:hover { 86 background-color: #f2f2f2; 87 } 88 89 .navbar-inverse .nav-collapse .nav > li > a, 90 .navbar-inverse .nav-collapse .dropdown-menu a { 91 color: #999999; 92 } 93 94 .navbar-inverse .nav-collapse .nav > li > a:hover, 95 .navbar-inverse .nav-collapse .dropdown-menu a:hover { 96 background-color: #111111; 97 } 98 99 .nav-collapse.in .btn-group { 100 padding: 0; 101 margin-top: 5px; 102 } 103 104 .nav-collapse .dropdown-menu { 105 position: static; 106 top: auto; 107 left: auto; 108 display: none; 109 float: none; 110 max-width: none; 111 padding: 0; 112 margin: 0 15px; 113 background-color: transparent; 114 border: none; 115 -webkit-border-radius: 0; 116 -moz-border-radius: 0; 117 border-radius: 0; 118 -webkit-box-shadow: none; 119 -moz-box-shadow: none; 120 box-shadow: none; 121 } 122 123 .nav-collapse .open > .dropdown-menu { 124 display: block; 125 } 126 127 .nav-collapse .dropdown-menu:before, 128 .nav-collapse .dropdown-menu:after { 129 display: none; 130 } 131 132 .nav-collapse .dropdown-menu .divider { 133 display: none; 134 } 135 136 .nav-collapse .nav > li > .dropdown-menu:before, 137 .nav-collapse .nav > li > .dropdown-menu:after { 138 display: none; 139 } 140 141 .nav-collapse .navbar-form, 142 .nav-collapse .navbar-search { 143 float: none; 144 padding: 10px 15px; 145 margin: 10px 0; 146 border-top: 1px solid #f2f2f2; 147 border-bottom: 1px solid #f2f2f2; 148 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); 149 -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); 150 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); 151 } 152 153 .navbar-inverse .nav-collapse .navbar-form, 154 .navbar-inverse .nav-collapse .navbar-search { 155 border-top-color: #111111; 156 border-bottom-color: #111111; 157 } 158 159 .navbar .nav-collapse .nav.pull-right { 160 float: none; 161 margin-left: 0; 162 } 163 164 .nav-collapse, 165 .nav-collapse.collapse { 166 height: 0; 167 overflow: hidden; 168 } 169 170 .navbar .btn-navbar { 171 display: block; 172 } 173 174 .navbar-static .navbar-inner { 175 padding-right: 10px; 176 padding-left: 10px; 177 } 178} 179 180@media (min-width: 980px) { 181 .nav-collapse.collapse { 182 height: auto !important; 183 overflow: visible !important; 184 } 185} 186 187@media (max-width: 767px) { 188 body { 189 padding-right: 20px; 190 padding-left: 20px; 191 } 192 193 .navbar-fixed-top, 194 .navbar-fixed-bottom, 195 .navbar-static-top { 196 margin-right: -20px; 197 margin-left: -20px; 198 } 199 200 .container-fluid { 201 padding: 0; 202 } 203 204 .dl-horizontal dt { 205 float: none; 206 width: auto; 207 clear: none; 208 text-align: left; 209 } 210 211 .dl-horizontal dd { 212 margin-left: 0; 213 } 214 215 .container { 216 width: auto; 217 } 218 219 .row-fluid { 220 width: 100%; 221 } 222 223 .row, 224 .thumbnails { 225 margin-left: 0; 226 } 227 228 .thumbnails > li { 229 float: none; 230 margin-left: 0; 231 } 232 233 [class*="span"], 234 .uneditable-input[class*="span"], 235 .row-fluid [class*="span"] { 236 display: block; 237 float: none; 238 width: 100%; 239 margin-left: 0; 240 -webkit-box-sizing: border-box; 241 -moz-box-sizing: border-box; 242 box-sizing: border-box; 243 } 244 245 .span12, 246 .row-fluid .span12 { 247 width: 100%; 248 -webkit-box-sizing: border-box; 249 -moz-box-sizing: border-box; 250 box-sizing: border-box; 251 } 252 253 .row-fluid [class*="offset"]:first-child { 254 margin-left: 0; 255 } 256 257 .input-large, 258 .input-xlarge, 259 .input-xxlarge, 260 input[class*="span"], 261 select[class*="span"], 262 textarea[class*="span"], 263 .uneditable-input { 264 display: block; 265 width: 100%; 266 min-height: 30px; 267 -webkit-box-sizing: border-box; 268 -moz-box-sizing: border-box; 269 box-sizing: border-box; 270 } 271 272 .input-prepend input, 273 .input-append input, 274 .input-prepend input[class*="span"], 275 .input-append input[class*="span"] { 276 display: inline-block; 277 width: auto; 278 } 279 280 .controls-row [class*="span"] + [class*="span"] { 281 margin-left: 0; 282 } 283 284 .modal { 285 position: fixed; 286 top: 20px; 287 right: 20px; 288 left: 20px; 289 width: auto; 290 margin: 0; 291 } 292 293 .modal.fade { 294 top: -100px; 295 } 296 297 .modal.fade.in { 298 top: 20px; 299 } 300} 301 302@media (max-width: 480px) { 303 .nav-collapse { 304 -webkit-transform: translate3d(0, 0, 0); 305 } 306 307 .page-header h1 small { 308 display: block; 309 line-height: 20px; 310 } 311 312 input[type="checkbox"], 313 input[type="radio"] { 314 border: 1px solid #cccccc; 315 } 316 317 .form-horizontal .control-label { 318 float: none; 319 width: auto; 320 padding-top: 0; 321 text-align: left; 322 } 323 324 .form-horizontal .controls { 325 margin-left: 0; 326 } 327 328 .form-horizontal .control-list { 329 padding-top: 0; 330 } 331 332 .form-horizontal .form-actions { 333 padding-right: 10px; 334 padding-left: 10px; 335 } 336 337 .media .pull-left, 338 .media .pull-right { 339 display: block; 340 float: none; 341 margin-bottom: 10px; 342 } 343 344 .media-object { 345 margin-right: 0; 346 margin-left: 0; 347 } 348 349 .modal { 350 top: 10px; 351 right: 10px; 352 left: 10px; 353 } 354 355 .modal-header .close { 356 padding: 10px; 357 margin: -10px; 358 } 359 360 .carousel-caption { 361 position: static; 362 } 363}