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