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