panikdb/static/css/style.css

   1 /* theme derived and inspired by TerraFirma
   2  * <http://www.oswd.org/design/information/id/3557/>
   3  */
   4
   5 @font-face {
   6   font-family: "FontAwesome";
   7   src: url('fontawesome-webfont.eot');
   8   src: url('fontawesome-webfont.eot?#iefix') format('eot'), url('fontawesome-webfont.woff') format('woff'), url('fontawesome-webfont.ttf') format('truetype'), url('fontawesome-webfont.svg#FontAwesome') format('svg');
   9   font-weight: normal;
  10   font-style: normal;
  11 }
  12
  13 html {
  14         margin: 0;
  15         background: #F9F9F7 url(../images/a1.gif) repeat-x;
  16 }
  17
  18 /* bootstrap <sigh/> */
  19 h1, h2, h3, h4 {
  20         font-family: sans-serif;
  21 }
  22
  23 body {
  24         margin: 0;
  25         background: transparent;
  26         color: #8c8c73;
  27         line-height: inherit;
  28         font-size: 14px;
  29 }
  30
  31 a {
  32         color: #FF7800;
  33         text-decoration: underline;
  34         transition: all .2s ease-in-out;
  35         -webkit-transition: all .2s ease-in-out;
  36         -moz-transition: all .2s ease-in-out;
  37 }
  38
  39 a:hover {
  40         text-decoration: none;
  41         color: #D76500;
  42 }
  43
  44 div#wrap {
  45         background: white;
  46         margin: 1em auto 1em auto;
  47         margin-bottom: 0;
  48         padding: 15px;
  49         border-radius: 6px;
  50         -moz-border-radius: 6px;
  51         -webkit-border-radius:6px;
  52         box-shadow: 0 0 4px rgba(0,0,0,0.75);
  53         -moz-box-shadow: 0 0 4px rgba(0,0,0,0.75);
  54         -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.75);
  55         position: relative;
  56         width: 90%;
  57 }
  58
  59 .narrow div#wrap {
  60         width: 60%;
  61         min-width: 600px;
  62 }
  63
  64 #header
  65 {
  66         position: absolute;
  67         background: #FF7800 url(../images/a8.gif) repeat-x;
  68         border-radius: 6px 0 0 6px;
  69         -moz-border-radius: 6px 0 0 6px;
  70         -webkit-border-radius: 6px 0 0 6px;
  71         width: 212px;
  72         width: 212px;
  73         height: 92px;
  74         color: #fff;
  75         padding-left: 10px;
  76         z-index: 14;
  77 }
  78
  79 #header h1
  80 {
  81         font-size: 23px;
  82         letter-spacing: -1px;
  83         margin: 0;
  84         height: 100%;
  85 }
  86
  87 #header span
  88 {
  89         margin: 0;
  90         font-size: 10px;
  91         font-weight: normal;
  92         color: #FCE2CA;
  93 }
  94
  95 #header h1 a {
  96         color: white;
  97         text-decoration: none;
  98         display: block;
  99         height: 100%;
 100         padding-top: 30px;
 101 }
 102
 103 #splash
 104 {
 105         position: absolute;
 106         right: 15px;
 107         background: #282f2e url(../images/banner-1054.png) no-repeat 0px top;
 108         width: 90%;
 109         height: 92px;
 110         border-radius: 0 6px 6px 0;
 111         -moz-border-radius: 0 6px 6px 0;
 112         -webkit-border-radius: 0 6px 6px 0;
 113         z-index: 10;
 114         color: white;
 115         font-weight: bold;
 116         text-align: right;
 117         padding-top: 5px;
 118 }
 119
 120 div#content {
 121         margin: 1em 1ex;
 122         margin-top: 20px;
 123         padding: 7px;
 124         position: relative;
 125 }
 126
 127 div#appbar button,
 128 div#appbar span {
 129         position: absolute;
 130         padding-left: 15px;
 131         padding-right: 15px;
 132         right: 10px;
 133         top: 20px;
 134         z-index: 10;
 135 }
 136
 137 div#appbar button {
 138         left: -20px;
 139         top: -55px;
 140 }
 141
 142 div#appbar a {
 143         font-size: 80%;
 144         font-weight: normal;
 145 }
 146
 147 div#content h2 {
 148         margin-top: 0;
 149         font-weight: normal;
 150         color: #656551;
 151         font-size: 18px;
 152         letter-spacing: -1px;
 153         line-height: 25px;
 154         margin-bottom: 20px;
 155         padding: 0 0 10px 15px;
 156         position: relative;
 157         top: 4px;
 158         background: url(../images/a22.gif) bottom repeat-x;
 159         clear: both;
 160 }
 161
 162 div#content h2 a {
 163         color: inherit;
 164         text-decoration: inherit;
 165 }
 166
 167 div#content h2 a:hover {
 168         color: #FF7800;
 169         text-decoration: underline;
 170 }
 171
 172 div#content h3 {
 173         margin-top: 0;
 174         font-weight: normal;
 175         color: #656551;
 176         font-size: 18px;
 177         letter-spacing: -1px;
 178         line-height: 25px;
 179         margin-bottom: 20px;
 180 }
 181
 182 div#content ul {
 183         line-height: 1.5em;
 184         padding: 1ex 2ex 1ex 3ex;
 185 }
 186
 187 div.newsitems hr,
 188 div.emission hr {
 189         clear: both;
 190         border-bottom: 1px solid #888;
 191         margin: 10px auto 20px auto;
 192         width: 80%;
 193 }
 194
 195 #footer
 196 {
 197         font-size: 70%;
 198         position: relative;
 199         clear: both;
 200         height: 66px;
 201         text-align: center;
 202         line-height: 66px;
 203         background-image: url(../images/a50.gif);
 204         color: #A8A88D;
 205 }
 206
 207 #footer a
 208 {
 209         color: #8C8C73;
 210 }
 211
 212
 213 form#login-form p {
 214         float: left;
 215         width: 40%;
 216 }
 217
 218 form input.submit {
 219         float: right;
 220         width: 18%;
 221         margin-top: 30px;
 222 }
 223
 224 div.login-actions {
 225         clear: both;
 226         padding-top: 2em;
 227 }
 228
 229 div.login-actions p {
 230         margin: 0;
 231 }
 232
 233 form p {
 234         margin: 0 0 1em 0;
 235 }
 236
 237 form.inline p label {
 238   display: inline;
 239 }
 240
 241 form .inline label {
 242   display: inline;
 243 }
 244 form .inline li {
 245   display: inline;
 246 }
 247
 248 form p label {
 249         display: block;
 250 }
 251
 252 form p input,
 253 form p textarea {
 254         margin-left: 10px;
 255 }
 256
 257 ul.errorlist {
 258         margin: 0;
 259         padding: 0;
 260         color: #e80404;
 261         list-style: none;
 262 }
 263
 264 input, textarea, span.add-on {
 265         padding: 5px;
 266         border: 1px solid #cccccc;
 267         color:#666666;
 268         background: white;
 269         color: black;
 270         -webkit-border-radius: 4px;
 271         -moz-border-radius: 4px;
 272         border-radius: 4px;
 273 }
 274
 275 textarea:focus, input[type="text"]:focus, input[type="password"]:focus {
 276         border: 1px solid #4690d6;
 277         color:#333333;
 278 }
 279
 280 input[type=submit] {
 281         color: #ffffff;
 282         background:#4690d6;
 283         border: 1px solid #2a567f;
 284         font-weight: bold;
 285         padding: 2px 8px 2px 8px;
 286         margin: 0;
 287         cursor: pointer;
 288 }
 289
 290 input[type=submit]:hover {
 291         border-color: #0e1d2b;
 292 }
 293
 294 form#login-form ul.errorlist {
 295         margin-bottom: 1em;
 296         width: 80%;
 297         font-weight: normal;
 298 }
 299
 300 .form-row {
 301         margin: 1em 0;
 302 }
 303
 304 .form-row label {
 305         display: block;
 306 }
 307
 308 .form-row input {
 309         margin-left: 10px;
 310 }
 311
 312 div#content h4 {
 313         margin-bottom: 5px;
 314         margin-top: 30px;
 315 }
 316
 317 div.errors {
 318         margin: 0;
 319         padding: 0;
 320         color: #e80404;
 321         list-style: none;
 322 }
 323
 324 div#breadcrumb {
 325         font-size: 80%;
 326         margin-bottom: 1em;
 327 }
 328
 329 form input.submit {
 330         position: relative;
 331         top: -22px;
 332 }
 333
 334 form#login-form input.submit {
 335         position: relative;
 336         top: -5px;
 337 }
 338
 339 div.content {
 340         float: left;
 341         width: 82%;
 342         margin-left: 8px;
 343         margin-top: -10px;
 344 }
 345
 346 abbr {
 347         border-bottom: 1px dotted #8c8c73;
 348         cursor: help;
 349 }
 350
 351 pre.code, pre.sample {
 352         border: 1px solid #babdb6;
 353         padding: 0.5em 1em;
 354         background: #fefefe;
 355 }
 356
 357 div.description {
 358 background: #eee;
 359 border: 1px solid #ccc;
 360 padding: 0em 1em 0 1em;
 361 margin: 1em 0;
 362 }
 363
 364 /* makes the font 33% larger relative to the icon container */
 365 .icon-large:before {
 366   vertical-align: top;
 367   font-size: 1.3333333333333333em;
 368 }
 369
 370 ul.emission-list {
 371   column-count: 4;
 372   -moz-column-count: 4;
 373   -webkit-column-count: 4;
 374 }
 375
 376 ul.episode-list {
 377   column-count: 2;
 378   -moz-column-count: 2;
 379   -webkit-column-count: 2;
 380 }
 381
 382 ul.newsitem-list {
 383   column-count: 2;
 384   -moz-column-count: 2;
 385   -webkit-column-count: 2;
 386 }
 387
 388
 389
 390 .fileprogress {
 391         border: 1px solid #888;
 392 }
 393
 394 .fileprogress .bar {
 395         background: #09f;
 396         line-height: 1.5em;
 397         padding-left: 1ex;
 398         font-weight: bold;
 399         white-space: nowrap;
 400 }
 401
 402 .fileinfo {
 403         line-height: 1.5em;
 404 }
 405
 406 #soundfiles th,
 407 #soundfiles td {
 408         padding: 1ex 1ex;
 409         border: 1px solid #aaa;
 410         border-width: 1px 0;
 411 }
 412
 413 a.big-friendly-button {
 414         text-decoration: none;
 415         display: inline-block;
 416         padding: 1ex;
 417         margin: 0 1em;
 418         color: #ffffff;
 419         background: #4690d6;
 420         border: 1px solid #2a567f;
 421         font-weight: bold;
 422         border-radius: 5px;
 423 }
 424
 425 a.big-friendly-button:hover {
 426         background: #2a567f;
 427 }
 428
 429 a.actually-not-that-friendly {
 430         background: #F52F2D;
 431         position: absolute;
 432         right: -10px;
 433 }
 434
 435 a.actually-not-that-friendly:hover {
 436         background: #d01311;
 437 }
 438
 439 div.two-columns ul.episode-list {
 440   column-count: 1;
 441   -moz-column-count: 1;
 442   -webkit-column-count: 1;
 443 }
 444
 445 div.two-columns > div {
 446         width: 48%;
 447         margin-right: 1%;
 448         float: left;
 449 }
 450
 451 .input-append {
 452         margin-left: 10px;
 453         margin-bottom: 10px;
 454 }
 455
 456 #content ul.select2-choices {
 457         min-width: 15em;
 458         padding: 0;
 459 }
 460
 461 span.add-on {
 462         background: #eee;
 463         margin-left: 3px;
 464 }
 465
 466 #s2id_id_category,
 467 #s2id_id_emission {
 468         width: 30em;
 469 }
 470
 471 #user-links {
 472         color: black;
 473         margin-top: 100px;
 474 }
 475
 476 #user-links a {
 477         background: #ccc;
 478         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
 479         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
 480         border: 1px solid #bbb;
 481         box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
 482         padding: 4px 12px;
 483         border-radius: 4px;
 484         color: black;
 485         text-decoration: none;
 486 }
 487
 488 #user-links a:hover {
 489         background: #aaa;
 490 }
 491
 492 #user-links span.middle {
 493         padding-left: 15px;
 494 }
 495
 496 #user-links span.right {
 497         position: absolute;
 498         right: 20px;
 499         top: 80px;
 500         z-index: 100;
 501 }
 502
 503 #user-links span.right span {
 504         color: #ddd;
 505 }
 506
 507 .image {
 508         text-align: right;
 509 }
 510
 511 .image img {
 512         padding: 5px;
 513         max-width: 200px;
 514         border: 1px solid #666;
 515         float: right;
 516         margin: 1em;
 517 }
 518
 519 .image img.large {
 520         max-width: 100%;
 521 }
 522
 523 span.tag {
 524         border: 1px solid #888;
 525         border-radius: 1ex;
 526         padding: 0 1ex;
 527         background: #eee;
 528 }
 529
 530 div.text {
 531         border-bottom: 1px solid #aaa;
 532         margin-bottom: 1em;
 533 }
 534
 535 ul.messages {
 536         position: absolute;
 537         background: rgba(10, 10, 10, 0.8);
 538         display: block;
 539         top: 5px;
 540         right: 0px;
 541         color: white;
 542         border-radius: 1em;
 543         list-style: none;
 544         z-index: 10;
 545         box-shadow: 0px 0px 5px black;
 546 }
 547
 548
 549 [class^="icon-"]:after, [class*=" icon-"]:after,
 550 [class^="icon-"]:before, [class*=" icon-"]:before {
 551   font-family: FontAwesome;
 552   font-weight: normal;
 553   font-style: normal;
 554   display: inline-block;
 555   text-decoration: none;
 556 }
 557 a [class^="icon-"], a [class*=" icon-"] {
 558   display: inline-block;
 559   text-decoration: none;
 560 }
 561
 562 .icon-edit:before                 { content: "\f044"; }
 563 .icon-remove-sign:before          { content: "\f057"; }
 564 .icon-remove:before               { content: "\f00d"; }
 565 .icon-minus:before                { content: "\f068"; }
 566 .icon-envelope:before             { content: "\f003"; }
 567 .icon-comment:before              { content: "\f075"; }
 568 .icon-home-space:before           { content: "\f015 "; }
 569 .icon-user-space:before           { content: "\f007 "; }
 570 .icon-circle-arrow-left:before    { content: "\f0a8"; }
 571 .icon-circle-arrow-right:before   { content: "\f0a9"; }
 572 .icon-music:before                { content: "\f001"; }
 573 .icon-th:before                   { content: "\f00a"; }
 574 .icon-eye-open:before             { content: "\f06e "; }
 575 .icon-bar-chart:before            { content: "\f080 "; }
 576 .icon-search:before               { content: "\f002 "; }
 577 .icon-signout:before              { content: "\f08b "; }
 578 .icon-pushpin:before              { content: "\f08d "; }
 579
 580 .icon-circle-arrow-down:after     { content: "  \f0ab"; }