[Summary view] [Print] [Text view]

   1  /*
   2  Theme Name: Twenty Thirteen
   3  Description: Used to style the TinyMCE editor.
   4  */
   5  
   6  
   7  /**
   8   * Table of Contents:
   9   *
  10   * 1.0 - Body
  11   * 2.0 - Headings
  12   * 3.0 - Text Elements
  13   * 4.0 - Links
  14   * 5.0 - Alignment
  15   * 6.0 - Tables
  16   * 7.0 - Images
  17   * 8.0 - Galleries
  18   * 9.0 - Audio/Video
  19   * 10.0 - Post Formats
  20   * 11.0 - RTL
  21   * ----------------------------------------------------------------------------
  22   */
  23  
  24  
  25  /**
  26   * 1.0 Body
  27   * ----------------------------------------------------------------------------
  28   */
  29  
  30  html .mceContentBody {
  31      font-size: 100%;
  32      max-width: 604px;
  33  }
  34  
  35  body {
  36      color: #141412;
  37      font-family: "Source Sans Pro", Helvetica, sans-serif;
  38      line-height: 1.5;
  39      text-rendering: optimizeLegibility;
  40      vertical-align: baseline;
  41  }
  42  
  43  /* Custom gradient block backgrounds */
  44  .has-autumn-brown-gradient-background {
  45      background: linear-gradient(135deg, rgba(226,45,15,1) 0%, rgba(158,25,13,1) 100%);
  46  }
  47  .has-sunset-yellow-gradient-background {
  48      background: linear-gradient(135deg, rgba(233,139,41,1) 0%, rgba(238,179,95,1) 100%);
  49  }
  50  .has-light-sky-gradient-background {
  51      background: linear-gradient(135deg,rgba(228,228,228,1.0) 0%,rgba(208,225,252,1.0) 100%);
  52  }
  53  .has-dark-sky-gradient-background {
  54      background: linear-gradient(135deg,rgba(0,0,0,1.0) 0%,rgba(56,61,69,1.0) 100%);
  55  }
  56  
  57  /**
  58   * 2.0 Headings
  59   * ----------------------------------------------------------------------------
  60   */
  61  
  62  h1,
  63  h2,
  64  h3,
  65  h4,
  66  h5,
  67  h6 {
  68      clear: both;
  69      font-family: Bitter, Georgia, serif;
  70      line-height: 1.3;
  71  }
  72  
  73  h1 {
  74      font-size: 48px;
  75      margin: 33px 0;
  76  }
  77  
  78  h2 {
  79      font-size: 30px;
  80      margin: 25px 0;
  81  }
  82  
  83  h3 {
  84      font-size: 22px;
  85      margin: 22px 0;
  86  }
  87  
  88  h4 {
  89      font-size: 20px;
  90      margin: 25px 0;
  91  }
  92  
  93  h5 {
  94      font-size: 18px;
  95      margin: 30px 0;
  96  }
  97  
  98  h6 {
  99      font-size: 16px;
 100      margin: 36px 0;
 101  }
 102  
 103  hr {
 104      background: url(../images/dotted-line.png) repeat center top;
 105      background-size: 4px 4px;
 106      border: 0;
 107      height: 1px;
 108      margin: 0 0 24px;
 109  }
 110  
 111  
 112  /**
 113   * 3.0 Text Elements
 114   * ----------------------------------------------------------------------------
 115   */
 116  
 117  p {
 118      margin: 0 0 24px;
 119  }
 120  
 121  ol,
 122  ul {
 123      margin: 16px 0;
 124      padding: 0 0 0 40px;
 125  }
 126  
 127  ul {
 128      list-style-type: square;
 129  }
 130  
 131  ol {
 132      list-style: decimal outside;
 133  }
 134  
 135  li > ul,
 136  li > ol {
 137      margin: 0;
 138  }
 139  
 140  dl {
 141      margin: 0 20px;
 142  }
 143  
 144  dt {
 145      font-weight: bold;
 146  }
 147  
 148  dd {
 149      margin: 0 0 20px;
 150  }
 151  
 152  strong {
 153      font-weight: bold;
 154  }
 155  
 156  code,
 157  kbd,
 158  pre,
 159  samp {
 160      font-family: monospace, serif;
 161      font-size: 14px;
 162  }
 163  
 164  pre {
 165      background: #f5f5f5;
 166      color: #666;
 167      font-family: monospace;
 168      font-size: 14px;
 169      margin: 20px 0;
 170      overflow: auto;
 171      padding: 20px;
 172      white-space: pre;
 173      white-space: pre-wrap;
 174      word-wrap: break-word;
 175  }
 176  
 177  pre code {
 178      font-size: inherit;
 179  }
 180  
 181  blockquote,
 182  q {
 183      quotes: none;
 184  }
 185  
 186  blockquote:before,
 187  blockquote:after,
 188  q:before,
 189  q:after {
 190      content: "";
 191      content: none;
 192  }
 193  
 194  blockquote {
 195      font-size: 24px;
 196      font-style: italic;
 197      font-weight: 300;
 198      margin: 24px 40px;
 199  }
 200  
 201  blockquote blockquote {
 202      margin-right: 0;
 203  }
 204  
 205  blockquote cite,
 206  blockquote small {
 207      font-size: 14px;
 208      font-weight: normal;
 209      text-transform: uppercase;
 210  }
 211  
 212  cite {
 213      border-bottom: 0;
 214  }
 215  
 216  abbr[title] {
 217      border-bottom: 1px dotted;
 218  }
 219  
 220  address {
 221      font-style: italic;
 222      margin: 0 0 24px;
 223  }
 224  
 225  del {
 226      color: #333;
 227  }
 228  
 229  ins {
 230      background: #fff9c0;
 231      border: none;
 232      color: #333;
 233      text-decoration: none;
 234  }
 235  
 236  sub,
 237  sup {
 238      font-size: 75%;
 239      line-height: 0;
 240      position: relative;
 241      vertical-align: baseline;
 242  }
 243  
 244  sup {
 245      top: -0.5em;
 246  }
 247  
 248  sub {
 249      bottom: -0.25em;
 250  }
 251  
 252  
 253  /**
 254   * 4.0 Links
 255   * ----------------------------------------------------------------------------
 256   */
 257  
 258  a {
 259      color: #ca3c08;
 260      text-decoration: none;
 261  }
 262  
 263  a:visited {
 264      color: #ac0404;
 265  }
 266  
 267  a:focus {
 268      outline: thin dotted;
 269  }
 270  
 271  a:active,
 272  a:hover {
 273      color: #ea9629;
 274      outline: 0;
 275  }
 276  
 277  a:hover {
 278      text-decoration: underline;
 279  }
 280  
 281  
 282  /**
 283   * 5.0 Alignment
 284   * ----------------------------------------------------------------------------
 285   */
 286  
 287  .alignleft {
 288      float: left;
 289      margin: 5px 20px 5px 0;
 290  }
 291  
 292  .alignright {
 293      float: right;
 294      margin: 5px 0 5px 20px;
 295  }
 296  
 297  .aligncenter {
 298      display: block;
 299      margin: 5px auto;
 300  }
 301  
 302  img.alignnone {
 303      margin: 5px 0;
 304  }
 305  
 306  
 307  /**
 308   * 6.0 Tables
 309   * ----------------------------------------------------------------------------
 310   */
 311  
 312  table {
 313      border-bottom: 1px solid #ededed;
 314      border-collapse: collapse;
 315      border-spacing: 0;
 316      font-size: 14px;
 317      line-height: 2;
 318      margin: 0 0 20px;
 319      width: 100%;
 320  }
 321  
 322  caption,
 323  th,
 324  td {
 325      font-weight: normal;
 326      text-align: left;
 327  }
 328  
 329  caption {
 330      font-size: 16px;
 331      margin: 20px 0;
 332  }
 333  
 334  th {
 335      font-weight: bold;
 336      text-transform: uppercase;
 337  }
 338  
 339  td {
 340      border-top: 1px solid #ededed;
 341      padding: 6px 10px 6px 0;
 342  }
 343  
 344  
 345  /**
 346   * 7.0 Images
 347   * ----------------------------------------------------------------------------
 348   */
 349  
 350  img {
 351      height: auto;
 352      max-width: 100%;
 353      vertical-align: middle;
 354  }
 355  
 356  .wp-caption {
 357      background: transparent;
 358      border: none;
 359      margin: 0;
 360      padding: 0;
 361      text-align: left;
 362  }
 363  
 364  .html5-captions .wp-caption {
 365      padding: 0;
 366  }
 367  
 368  .wp-caption.alignleft {
 369      margin: 5px 10px 5px 0;
 370  }
 371  
 372  .html5-captions .wp-caption.alignleft {
 373      margin-right: 20px;
 374  }
 375  
 376  .wp-caption.alignright {
 377      margin: 5px 0 5px 10px;
 378  }
 379  
 380  .wp-caption.alignright img,
 381  .wp-caption.alignright .wp-caption-dd {
 382      padding-left: 10px;
 383  }
 384  
 385  .html5-captions .wp-caption.alignright {
 386      margin-left: 20px;
 387  }
 388  
 389  .html5-captions .wp-caption.alignright img,
 390  .html5-captions .wp-caption.alignright .wp-caption-dd {
 391      padding: 0;
 392  }
 393  
 394  .wp-caption-dt {
 395      margin: 0;
 396  }
 397  
 398  .wp-caption .wp-caption-text,
 399  .wp-caption-dd {
 400      color: #220e10;
 401      font-size: 18px;
 402      font-style: italic;
 403      font-weight: 300;
 404      line-height: 1.5;
 405      margin-bottom: 24px;
 406      padding: 0;
 407  }
 408  
 409  .mceTemp + ul,
 410  .mceTemp + ol {
 411      list-style-position: inside;
 412  }
 413  
 414  
 415  /**
 416   * 8.0 Galleries
 417   * ----------------------------------------------------------------------------
 418   */
 419  
 420  .gallery .gallery-item {
 421      float: left;
 422      margin: 0 4px 4px 0;
 423      overflow: hidden;
 424      padding: 0;
 425      position: relative;
 426  }
 427  
 428  .gallery-columns-1 .gallery-item {
 429      max-width: 100%;
 430      width: auto;
 431  }
 432  
 433  .gallery-columns-2 .gallery-item {
 434      max-width: 48%;
 435      max-width: -webkit-calc(50% - 14px);
 436      max-width:         calc(50% - 14px);
 437      width: auto;
 438  }
 439  
 440  .gallery-columns-3 .gallery-item {
 441      max-width: 32%;
 442      max-width: -webkit-calc(33.3% - 11px);
 443      max-width:         calc(33.3% - 11px);
 444      width: auto;
 445  }
 446  
 447  .gallery-columns-4 .gallery-item {
 448      max-width: 23%;
 449      max-width: -webkit-calc(25% - 9px);
 450      max-width:         calc(25% - 9px);
 451      width: auto;
 452  }
 453  
 454  .gallery-columns-5 .gallery-item {
 455      max-width: 19%;
 456      max-width: -webkit-calc(20% - 8px);
 457      max-width:         calc(20% - 8px);
 458      width: auto;
 459  }
 460  
 461  .gallery-columns-6 .gallery-item {
 462      max-width: 15%;
 463      max-width: -webkit-calc(16.7% - 7px);
 464      max-width:         calc(16.7% - 7px);
 465      width: auto;
 466  }
 467  
 468  .gallery-columns-7 .gallery-item {
 469      max-width: 13%;
 470      max-width: -webkit-calc(14.28% - 7px);
 471      max-width:         calc(14.28% - 7px);
 472      width: auto;
 473  }
 474  
 475  .gallery-columns-8 .gallery-item {
 476      max-width: 11%;
 477      max-width: -webkit-calc(12.5% - 6px);
 478      max-width:         calc(12.5% - 6px);
 479      width: auto;
 480  }
 481  
 482  .gallery-columns-9 .gallery-item {
 483      max-width: 9%;
 484      max-width: -webkit-calc(11.1% - 6px);
 485      max-width:         calc(11.1% - 6px);
 486      width: auto;
 487  }
 488  
 489  .gallery-columns-1 .gallery-item:nth-of-type(1n),
 490  .gallery-columns-2 .gallery-item:nth-of-type(2n),
 491  .gallery-columns-3 .gallery-item:nth-of-type(3n),
 492  .gallery-columns-4 .gallery-item:nth-of-type(4n),
 493  .gallery-columns-5 .gallery-item:nth-of-type(5n),
 494  .gallery-columns-6 .gallery-item:nth-of-type(6n),
 495  .gallery-columns-7 .gallery-item:nth-of-type(7n),
 496  .gallery-columns-8 .gallery-item:nth-of-type(8n),
 497  .gallery-columns-9 .gallery-item:nth-of-type(9n) {
 498      margin-right: 0;
 499  }
 500  
 501  .gallery-columns-1 .gallery-item:nth-of-type(1n),
 502  .gallery-columns-2 .gallery-item:nth-of-type(2n - 1),
 503  .gallery-columns-3 .gallery-item:nth-of-type(3n - 2),
 504  .gallery-columns-4 .gallery-item:nth-of-type(4n - 3),
 505  .gallery-columns-5 .gallery-item:nth-of-type(5n - 4),
 506  .gallery-columns-6 .gallery-item:nth-of-type(6n - 5),
 507  .gallery-columns-7 .gallery-item:nth-of-type(7n - 6),
 508  .gallery-columns-8 .gallery-item:nth-of-type(8n - 7),
 509  .gallery-columns-9 .gallery-item:nth-of-type(9n - 8) {
 510      margin-left: 12px; /* Compensate for the default negative margin on .gallery, which can't be changed. */
 511  }
 512  
 513  .gallery .gallery-caption {
 514      background-color: rgba(0, 0, 0, 0.7);
 515      box-sizing: border-box;
 516      color: #fff;
 517      font-size: 14px;
 518      line-height: 1.3;
 519      margin: 0;
 520      max-height: 50%;
 521      opacity: 0;
 522      padding: 2px 8px;
 523      position: absolute;
 524      bottom: 0;
 525      left: 0;
 526      text-align: left;
 527      -webkit-transition: opacity 400ms ease;
 528      transition:         opacity 400ms ease;
 529      width: 100%;
 530  }
 531  
 532  .gallery .gallery-caption:before {
 533      box-shadow: 0 -10px 15px #000 inset;
 534      content: "";
 535      height: 100%;
 536      min-height: 49px;
 537      position: absolute;
 538      left: 0;
 539      top: 0;
 540      width: 100%;
 541  }
 542  
 543  .gallery-item:hover .gallery-caption {
 544      opacity: 1;
 545  }
 546  
 547  .gallery-columns-7 .gallery-caption,
 548  .gallery-columns-8 .gallery-caption,
 549  .gallery-columns-9 .gallery-caption {
 550      display: none;
 551  }
 552  
 553  
 554  /**
 555   * 9.0 Audio/Video
 556   * ----------------------------------------------------------------------------
 557   */
 558  .mejs-mediaelement,
 559  .mejs-container .mejs-controls {
 560      background: #220e10;
 561  }
 562  
 563  .mejs-controls .mejs-time-rail .mejs-time-loaded,
 564  .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
 565      background: #fff;
 566  }
 567  
 568  .mejs-controls .mejs-time-rail .mejs-time-current {
 569      background: #ea9629;
 570  }
 571  
 572  .mejs-controls .mejs-time-rail .mejs-time-total,
 573  .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
 574      background: #595959;
 575  }
 576  
 577  .mejs-controls .mejs-time-rail span,
 578  .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
 579  .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
 580      border-radius: 0;
 581  }
 582  
 583  
 584  /**
 585   * 10.0 Post Formats
 586   * ----------------------------------------------------------------------------
 587   */
 588  
 589  /* Aside */
 590  .post-format-aside {
 591      background-color: #f7f5e7;
 592  }
 593  
 594  .post-format-aside blockquote {
 595      font-size: 100%;
 596      font-weight: normal;
 597  }
 598  
 599  .post-format-aside cite {
 600      font-size: 100%;
 601      text-transform: none;
 602  }
 603  
 604  .post-format-aside cite:before {
 605      content: "\2014";
 606      margin-right: 5px;
 607  }
 608  
 609  /* Audio */
 610  .post-format-audio {
 611      background-color: #db572f;
 612  }
 613  
 614  .post-format-audio a {
 615      color: #fbfaf3;
 616  }
 617  
 618  .post-format-audio:before {
 619      background: url(../images/dotted-line.png) repeat-y 85px 0;
 620      background-size: 4px 4px;
 621      content: "\f109";
 622      display: block;
 623      float: left;
 624      font-family: Genericons;
 625      font-size: 64px;
 626      -webkit-font-smoothing: antialiased;
 627      height: 100%;
 628      line-height: 1;
 629      width: 120px;
 630  }
 631  
 632  /* Chat */
 633  .post-format-chat {
 634      background-color: #eadaa6;
 635  }
 636  
 637  .post-format-chat a {
 638      color: #722d19;
 639  }
 640  
 641  /* Gallery */
 642  .post-format-gallery {
 643      background-color: #fbca3c;
 644  }
 645  
 646  .post-format-gallery a {
 647      color: #722d19;
 648  }
 649  
 650  /* Image: same as Standard/Defaults */
 651  
 652  /* Link */
 653  .post-format-link {
 654      background-color: #f7f5e7;
 655  }
 656  
 657  /* Quote */
 658  .post-format-quote {
 659      background-color: #210d10;
 660      color: #f7f5e7;
 661  }
 662  
 663  .post-format-quote a {
 664      color: #e63f2a;
 665  }
 666  
 667  .post-format-quote blockquote {
 668      font-size: 28px;
 669      font-style: italic;
 670      font-weight: 300;
 671      margin: 0;
 672      padding-left: 75px;
 673      position: relative;
 674  }
 675  
 676  .post-format-quote blockquote:before {
 677      content: '\201C';
 678      font-size: 140px;
 679      font-weight: 400;
 680      line-height: .8;
 681      padding-right: 25px;
 682      position: absolute;
 683      left: -15px;
 684      top: -3px;
 685  }
 686  
 687  .post-format-quote blockquote small,
 688  .post-format-quote blockquote cite {
 689      display: block;
 690      font-size: 16px;
 691  }
 692  
 693  .format-quote .entry-content cite a {
 694      border-bottom: 1px dotted #fff;
 695      color: #fff;
 696  }
 697  
 698  .format-quote .entry-content cite a:hover {
 699      text-decoration: none;
 700  }
 701  
 702  
 703  /* Status */
 704  .post-format-status {
 705      background-color: #722d19;
 706      color: #f7f5e7;
 707      font-style: italic;
 708      font-weight: 300;
 709      padding: 0;
 710      padding-left: 35px;
 711  }
 712  
 713  .post-format-status.mceContentBody {
 714      font-size: 24px;
 715  }
 716  
 717  .post-format-status:before {
 718      background: url(../images/dotted-line.png) repeat-y left bottom;
 719      background-size: 4px 4px;
 720      content: "";
 721      display: block;
 722      float: left;
 723      height: 100%;
 724      position: relative;
 725      left: -30px;
 726      width: 1px;
 727  }
 728  
 729  .post-format-status > p:first-child:before {
 730      background-color: rgba(0, 0, 0, 0.65);
 731      content: "";
 732      height: 3px;
 733      width: 13px;
 734      margin-top: 13px;
 735      position: absolute;
 736      left: 9px;
 737  }
 738  
 739  .post-format-status a {
 740      color: #eadaa6;
 741  }
 742  
 743  /* Video */
 744  .post-format-video {
 745      background-color: #db572f;
 746  }
 747  
 748  .post-format-video a {
 749      color: #fbfaf3;
 750  }
 751  
 752  
 753  /**
 754   * 11.0 RTL
 755   * ----------------------------------------------------------------------------
 756   */
 757  
 758  html .mceContentBody.rtl {
 759      direction: rtl;
 760      unicode-bidi: embed;
 761  }
 762  
 763  .rtl ol,
 764  .rtl ul {
 765      padding: 0 40px 0 0;
 766  }
 767  
 768  .rtl .wp-caption,
 769  .rtl tr th {
 770      text-align: right;
 771  }
 772  
 773  .rtl td {
 774      padding: 6px 0 6px 10px;
 775      text-align: right;
 776  }
 777  
 778  .rtl blockquote blockquote {
 779      margin-left: 0;
 780      margin-right: 24px;
 781  }
 782  
 783  .rtl.post-format-audio:before,
 784  .rtl.post-format-status:before,
 785  .rtl.post-format-status > p:first-child:before {
 786      background: none;
 787      content: none;
 788  }