static/css/style.css

   1 body {
   2         padding-top: 45px;
   3 }
   4
   5 .container-body {
   6         background-color: white;
   7
   8         padding-top: 10px;
   9         padding-left: 15px;
  10         padding-right: 15px;
  11         padding-bottom: 10px;
  12 }
  13
  14 .ac {
  15         text-align: center;
  16 }
  17
  18 table.table-fireinfo td.bar {
  19         width: 70%;
  20 }
  21
  22 table.table-fireinfo td.key {
  23         width: 20%;
  24 }
  25
  26 table.table-fireinfo td.val {
  27         width: 10%;
  28 }
  29
  30 .wishes li div.thumbnail {
  31         padding: 1em;
  32 }
  33
  34 .objectives .icon {
  35         padding: 1.2em;
  36 }
  37
  38 .thumbnails .download-box {
  39         padding-top: 2em;
  40         padding-left: 2em;
  41         padding-right: 2em;
  42 }
  43
  44 section {
  45         padding-top: 40px;
  46 }
  47
  48 section > .page-header, section > .lead {
  49         color: #5a5a5a;
  50 }
  51
  52 section > ul li {
  53         margin-bottom: 5px;
  54 }
  55
  56 .jumbotron {
  57         position: relative;
  58         padding: 40px 0;
  59         color: #fff;
  60         text-align: center;
  61         text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
  62         background: #880400; /* Old browsers */
  63         background: -moz-linear-gradient(45deg, #000000 0%, #880400 100%); /* FF3.6+ */
  64         background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#000000), color-stop(100%,#880400)); /* Chrome,Safari4+ */
  65         background: -webkit-linear-gradient(45deg, #000000 0%,#880400 100%); /* Chrome10+,Safari5.1+ */
  66         background: -o-linear-gradient(45deg, #000000 0%, #880400 100%); /* Opera 11.10+ */
  67         background: -ms-linear-gradient(45deg, #000000 0%, #880400 100%); /* IE10+ */
  68         background: linear-gradient(45deg,  #000000 0%, #880400 100%); /* W3C */
  69         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#880400',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  70         -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
  71            -moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
  72                     box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
  73         margin-bottom: 1em;
  74 }
  75
  76 .jumbotron h1 {
  77         font-size: 80px;
  78         font-weight: bold;
  79         letter-spacing: -1px;
  80         line-height: 1;
  81 }
  82
  83 .jumbotron p {
  84         font-size: 24px;
  85         font-weight: 300;
  86         line-height: 1.25;
  87         margin-bottom: 30px;
  88 }
  89
  90 .jumbotron a {
  91         color: #fff;
  92         color: rgba(255,255,255,.5);
  93 }
  94
  95 .jumbotron a:hover {
  96         color: #fff;
  97         text-shadow: 0 0 10px rgba(255,255,255,.25);
  98 }
  99
 100 /* Download button */
 101 .masthead .btn, .download-button {
 102   padding: 19px 24px;
 103   font-size: 24px;
 104   font-weight: 200;
 105   color: #fff;
 106 }
 107
 108 .jumbotron .container {
 109         position: relative;
 110         z-index: 2;
 111 }
 112
 113 .masthead {
 114         padding: 70px 0 60px;
 115         margin-bottom: 0;
 116         color: #fff;
 117 }
 118
 119 .masthead h1 {
 120         font-size: 120px;
 121         line-height: 1;
 122         letter-spacing: -2px;
 123 }
 124
 125 .masthead p {
 126         font-size: 40px;
 127         font-weight: 200;
 128         line-height: 1.25;
 129 }
 130
 131 .masthead-links {
 132         margin: 0;
 133         list-style: none;
 134 }
 135
 136 .masthead-links li {
 137         display: inline;
 138         padding: 0 10px;
 139         color: rgba(255,255,255,.5);
 140 }
 141
 142 .subhead {
 143         text-align: left;
 144         border-bottom: 1px solid #ddd;
 145 }
 146
 147 .subhead h1 {
 148         font-size: 60px;
 149 }
 150
 151 .subhead p {
 152         margin-bottom: 20px;
 153 }
 154
 155 .subhead .navbar {
 156         display: none;
 157 }
 158
 159 .footer {
 160 /*      text-align: center; */
 161         padding: 30px 0;
 162         margin-top: 70px;
 163         border-top: 1px solid #e5e5e5;
 164         background-color: #f8f8f8;
 165 }
 166
 167 .footer p {
 168         margin-bottom: 0;
 169         color: #777;
 170 }
 171
 172 .footer-links {
 173         margin: 10px 0;
 174 }
 175
 176 .footer-links li {
 177         display: inline;
 178         padding: 0 2px;
 179 }
 180
 181 .footer-links li:first-child {
 182         padding-left: 0;
 183 }
 184
 185 .sidenav {
 186         width: 228px;
 187         margin: 30px 0 0;
 188         padding: 0;
 189         background-color: #fff;
 190         -webkit-border-radius: 6px;
 191            -moz-border-radius: 6px;
 192                 border-radius: 6px;
 193         -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
 194            -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
 195                 box-shadow: 0 1px 4px rgba(0,0,0,.065);
 196 }
 197
 198 .sidenav > li > a {
 199         display: block;
 200         width: 190px \9;
 201         margin: 0 0 -1px;
 202         padding: 8px 14px;
 203         border: 1px solid #e5e5e5;
 204 }
 205
 206 .sidenav > li:first-child > a {
 207         -webkit-border-radius: 6px 6px 0 0;
 208            -moz-border-radius: 6px 6px 0 0;
 209                 border-radius: 6px 6px 0 0;
 210 }
 211
 212 .sidenav > li:last-child > a {
 213         -webkit-border-radius: 0 0 6px 6px;
 214            -moz-border-radius: 0 0 6px 6px;
 215                 border-radius: 0 0 6px 6px;
 216 }
 217
 218 .sidenav > .active > a {
 219         position: relative;
 220         z-index: 2;
 221         padding: 9px 15px;
 222         border: 0;
 223         text-shadow: 0 1px 0 rgba(0,0,0,.15);
 224         -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
 225            -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
 226                 box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
 227 }
 228
 229 .sidenav .icon-chevron-left {
 230         float: left;
 231         margin-top: 2px;
 232         margin-left: -6px;
 233         opacity: .25;
 234 }
 235
 236 .sidenav > li > a:hover {
 237         background-color: #f5f5f5;
 238 }
 239
 240 .sidenav a:hover .icon-chevron-left {
 241         opacity: .5;
 242 }
 243
 244 .sidenav .active .icon-chevron-left, .sidenav .active a:hover .icon-chevron-left {
 245   background-image: url(../img/glyphicons-halflings-white.png);
 246   opacity: 1;
 247 }
 248
 249 .sidenav.affix {
 250         top: 40px;
 251 }
 252
 253 .sidenav.affix-bottom {
 254         position: absolute;
 255         top: auto;
 256         bottom: 270px;
 257 }
 258
 259
 260 @media (min-width: 768px) and (max-width: 979px) {
 261         body {
 262                 padding-top: 0;
 263         }
 264         .jumbotron {
 265                 margin-top: -25px; /* Offset bottom margin on .navbar */
 266         }
 267
 268         .sidenav {
 269                 width: 166px;
 270                 margin-top: 20px;
 271         }
 272         .sidenav.affix {
 273                 top: 0;
 274         }
 275 }
 276
 277 @media (max-width: 767px) {
 278         body {
 279                 padding-top: 0;
 280         }
 281
 282         .jumbotron {
 283                 padding: 40px 20px;
 284                 margin-top:   -25px; /* Offset bottom margin on .navbar */
 285                 margin-right: -20px;
 286                 margin-left:  -20px;
 287         }
 288
 289         .masthead h1 {
 290                 font-size: 90px;
 291         }
 292
 293         .masthead p, .masthead .btn {
 294                 font-size: 24px;
 295         }
 296
 297         .sidenav {
 298                 width: auto;
 299                 margin-bottom: 20px;
 300         }
 301
 302         .sidenav.affix {
 303                 position: static;
 304                 width: auto;
 305                 top: 0;
 306         }
 307
 308         .footer {
 309                 margin-left: -20px;
 310                 margin-right: -20px;
 311                 padding-left: 20px;
 312                 padding-right: 20px;
 313         }
 314
 315         .footer p {
 316                 margin-bottom: 9px;
 317         }
 318 }
 319
 320 @media (max-width: 480px) {
 321         body {
 322                 padding-top: 0;
 323         }
 324
 325         h2 small {
 326                 display: block;
 327         }
 328
 329         .jumbotron h1 {
 330                 font-size: 45px;
 331         }
 332
 333         .jumbotron p, .jumbotron .btn {
 334                 font-size: 18px;
 335         }
 336
 337         .jumbotron .btn {
 338                 display: block;
 339                 margin: 0 auto;
 340         }
 341
 342         .subhead h1, .subhead p {
 343                 text-align: center;
 344         }
 345
 346         table code {
 347                 white-space: normal;
 348                 word-wrap: break-word;
 349                 word-break: break-all;
 350         }
 351
 352         .footer {
 353                 padding-top: 20px;
 354                 padding-bottom: 20px;
 355         }
 356 }