CSS'de farklı renklere sahip metne anahatlar vermenin herhangi bir yolu var mı? Metnimin bazı bölümlerini daha sezgisel hale getirmek için vurgulamak istiyorum - isimler, bağlantılar vb. Gibi.

text-strokeCSS3 olarak adlandırılan deneysel bir webkit özelliği var, bunu bir süredir çalıştırmaya çalışıyorum ama şimdiye kadar başarısız oldum.

Bunun yerine ne yaptım zaten desteklenen text-shadowözellik kullanılır (Chrome, Firefox, Opera ve IE 9'da desteklendiğine inanıyorum).

Konturlu bir metni simüle etmek için dört gölge kullanın:

.strokeme {
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

<div class="strokeme">
  This text should have a stroke in some browsers
</div>

Senin için burada bir demo yaptım

Vurgulu bir örnek burada mevcuttur

Jason C'nin yorumlarda belirttiği gibi, text-shadowCSS özelliği Opera Mini dışında tüm büyük tarayıcılar tarafından destekleniyor. Bu çözümün geriye dönük uyumluluk için çalışacağı yerde (otomatik olarak güncellenen tarayıcılarla ilgili bir sorun değil) text-strokeCSS'nin kullanılması gerektiğine inanıyorum .

Düzenleme: text-stroke artık oldukça olgun ve çoğu tarayıcıda uygulandı . Daha kolay, daha keskin ve daha kesindir. Tarayıcı kitleniz destekleyebiliyorsa, şimdi text-strokeyerine onu kullanmalısınız text-shadow.

Bunu text-shadowherhangi bir ofset olmadan sadece efektle yapabilirsiniz ve yapmalısınız :

.outline {
    color: #fff;
    text-shadow: #000 0px 0px 1px;
    -webkit-font-smoothing: antialiased;
}

Neden? Birden çok gölge efektini dengelediğinizde, bıkkın, pürüzlü köşeleri fark etmeye başlayacaksınız:


Metin gölge efektlerinin tek bir konumda olması ofsetleri ortadan kaldırır, yani bunun çok ince olduğunu düşünüyorsanız ve bunun yerine daha koyu bir anahat tercih ederseniz sorun değil - aynı efekti (aynı pozisyonu ve bulanıklığı koruyarak) birkaç kez tekrarlayabilir. Şöyle ki:

text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px,
             #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px;

İşte sadece bir efektin bir örneği (üstte) ve aynı etki 14 kez tekrarlandı (altta):

Ayrıca not: Çizgiler çok ince olduğu için, alt piksel oluşturmayı kullanarak kapatmak çok iyi bir fikirdir
-webkit-font-smoothing: antialiased.

Kolay! SVG kurtarmaya.

Bu basitleştirilmiş bir yöntemdir:

svg{
  font: bold 70px Century Gothic, Arial;
  width: 100%;
  height: 120px;
}

text{
  fill: none;
  stroke: black;
  stroke-width:0.5px;
  // stroke-dasharray: 2,2;
  stroke-linejoin: round;
  animation: 2s pulsate infinite;
}

@keyframes pulsate {
  50%{ stroke-width:4px; }
}

<svg viewBox="0 0 450 50">
  <text y="40">Scalable Title</text>
</svg>

İşte daha karmaşık bir demo .

Gölgeler kontur gibi görünene kadar birden çok mevsimlik gölgeyi yığınlamayı deneyebilirsiniz, şöyle:

.shadowOutline {
  text-shadow: 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black;
}

İşte bir keman: http://jsfiddle.net/GGUYY/

Birisinin ilgilenmesi durumunda, buna bir çözüm demesem de, çünkü çeşitli şekillerde başarısız oluyor:

• eski IE'de çalışmıyor
• her tarayıcıda oldukça farklı görünür
• çok fazla gölge uygulamak çok ağır: S

Arka plan resimlerine bindirildiğinde çalışan bir çapraz tarayıcı metin kontur çözümü arıyordum. Ben bunun için ekstra işaretleme, js ve IE7-9 (6 test etmedim) çalışır ve takma sorunlarına neden olmayan bir çözüm var düşünüyorum.

Bu, IE ( http://caniuse.com/#search=text-shadow ) dışında iyi desteği olan CSS3 metin gölgesini kullanmanın ve ardından IE için bir filtre kombinasyonu kullanmanın birleşimidir. CSS3 metin vuruş desteği şu anda zayıf.

IE Filtreleri

Işıma filtresi ( http://www.impressivewebs.com/css3-text-shadow-ie/ ) korkunç görünüyor, bu yüzden bunu kullanmadım.

David Hewitt'in yanıtı , yönlerin bir kombinasyonuna damlalık filtreleri eklemeyi içeriyordu. Daha sonra ClearType maalesef kaldırıldı, bu yüzden kötü bir şekilde aliased metin ile sonuçlandı.

Daha sonra useragentman'da önerilen bazı unsurları dropshadow filtreleri ile birleştirdim.

Bir araya getirmek

Bu örnek beyaz konturlu siyah metin olabilir. IE ( http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ ) hedeflemek için koşullu html sınıfları kullanıyorum .

#myelement {
    color: #000000;
    text-shadow:
    -1px -1px 0 #ffffff,  
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    1px 1px 0 #ffffff;
}

html.ie7 #myelement,
html.ie8 #myelement,
html.ie9 #myelement {
    background-color: white;
    filter: progid:DXImageTransform.Microsoft.Chroma(color='white') progid:DXImageTransform.Microsoft.Alpha(opacity=100) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=-1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=-1);
    zoom: 1;
}

Sadece bu cevabı ekliyoruz. Metni "okşayarak" "Anahat" ile aynı değil

Ana hatlar harika görünüyor. Okşayarak korkunç görünüyor.

Başka bir yerde listelenen SVG çözümü de aynı soruna sahiptir. Bir anahat istiyorsanız metni iki kez koymanız gerekir. Bir kez okşadı ve tekrar okşadı.

Vuruş Anahat DEĞİLDİR

body {
  font-family: sans-serif;
  margin: 20px;
}

.stroked {
  color: white;
  -webkit-text-stroke: 1px black;
}

.thickStroked {
  color: white;
  -webkit-text-stroke: 10px black;
}

.outlined {
  color: white;
  text-shadow:
    -1px -1px 0 #000,
     0   -1px 0 #000,
     1px -1px 0 #000,
     1px  0   0 #000,
     1px  1px 0 #000,
     0    1px 0 #000,
    -1px  1px 0 #000,
    -1px  0   0 #000;
}

.thickOutlined {
  color: white;
text-shadow: 0.0px 10.0px 0.02px #000, 9.8px 2.1px 0.02px #000, 4.2px -9.1px 0.02px #000, -8.0px -6.0px 0.02px #000, -7.6px 6.5px 0.02px #000, 4.8px 8.8px 0.02px #000, 9.6px -2.8px 0.02px #000, -0.7px -10.0px 0.02px #000, -9.9px -1.5px 0.02px #000, -3.5px 9.4px 0.02px #000, 8.4px 5.4px 0.02px #000, 7.1px -7.0px 0.02px #000, -5.4px -8.4px 0.02px #000, -9.4px 3.5px 0.02px #000, 1.4px 9.9px 0.02px #000, 10.0px 0.8px 0.02px #000, 2.9px -9.6px 0.02px #000, -8.7px -4.8px 0.02px #000, -6.6px 7.5px 0.02px #000, 5.9px 8.0px 0.02px #000, 9.1px -4.1px 0.02px #000, -2.1px -9.8px 0.02px #000, -10.0px -0.1px 0.02px #000, -2.2px 9.8px 0.02px #000, 9.1px 4.2px 0.02px #000, 6.1px -8.0px 0.02px #000, -6.5px -7.6px 0.02px #000, -8.8px 4.7px 0.02px #000, 2.7px 9.6px 0.02px #000, 10.0px -0.6px 0.02px #000, 1.5px -9.9px 0.02px #000, -9.3px -3.6px 0.02px #000, -5.5px 8.4px 0.02px #000, 7.0px 7.2px 0.02px #000, 8.5px -5.3px 0.02px #000, -3.4px -9.4px 0.02px #000, -9.9px 1.3px 0.02px #000, -0.8px 10.0px 0.02px #000, 9.6px 2.9px 0.02px #000, 4.9px -8.7px 0.02px #000, -7.5px -6.7px 0.02px #000, -8.1px 5.9px 0.02px #000, 4.0px 9.2px 0.02px #000, 9.8px -2.0px 0.02px #000, 0.2px -10.0px 0.02px #000, -9.7px -2.3px 0.02px #000, -4.3px 9.0px 0.02px #000, 7.9px 6.1px 0.02px #000
}

svg {
  font-size: 40px;
  font-weight: bold;
  width: 450px;
  height: 70px;
  fill: white;
}

.svgStroke {
  fill: white;
  stroke: black;
  stroke-width: 20px;
  stroke-linejoin: round;
}

<h1 class="stroked">Properly stroked!</h1>
<h1 class="outlined">Properly outlined!</h1>

<h1 class="thickStroked">Thickly stroked!</h1>
<h1 class="thickOutlined">Thickly outlined!</h1>

<svg viewBox="0 0 450 70">
  <text class="svgStroke" x="10" y="45">SVG Thickly Stroked!</text>
</svg>
<svg viewBox="0 0 450 70">
  <text class="svgStroke" x="10" y="45">SVG Thickly Outlined!</text>
  <text class="svgText" x="10" y="45">SVG Thickly Outlined!</text>
</svg>

Not: SVG'yi herhangi bir keyfi metnin doğru boyutu haline getirmeyi bilmek isterim. Ben svg oluşturma, javascript ile sorgulama, daha sonra sonuçları uygulamak için sorgulama içeren oldukça karmaşık bir duygu var. Eğer js olmayan daha kolay bir yol varsa bilmek isterim.

6 farklı gölgeyle daha iyi sonuçlar aldım:

.strokeThis{
    text-shadow:
    -1px -1px 0 #ff0,
    0px -1px 0 #ff0,
    1px -1px 0 #ff0,
    -1px 1px 0 #ff0,
    0px 1px 0 #ff0,
    1px 1px 0 #ff0;
}

SASS için bu karışım 8 eksen kullanarak pürüzsüz sonuçlar verecektir:

@mixin stroke($size: 1px, $color: #000) {
  text-shadow:
    -#{$size} -#{$size} 0 $color,
     0        -#{$size} 0 $color,
     #{$size} -#{$size} 0 $color,
     #{$size}  0        0 $color,
     #{$size}  #{$size} 0 $color,
     0         #{$size} 0 $color,
    -#{$size}  #{$size} 0 $color,
    -#{$size}  0        0 $color;
}

Ve normal CSS:

text-shadow:
  -1px -1px 0 #000,
   0   -1px 0 #000,
   1px -1px 0 #000,
   1px  0   0 #000,
   1px  1px 0 #000,
   0    1px 0 #000,
  -1px  1px 0 #000,
  -1px  0   0 #000;

Daha kalın vuruşlarla çalışmak biraz dağınık olur, eğer sass zevkiniz varsa, bu karışımı deneyin, mükemmel değil ve inme ağırlığına bağlı olarak adil miktarda css üretir.

 @mixin stroke($width, $colour: #000000) {
      $shadow: 0 0 0 $colour; // doesn't do anything but I couldn't work out how to create a blank string and maintain commas
      @for $i from 0 through $width {
          $shadow: $shadow,
          -$i + px -$width + px 0 $colour,
          $i + px -$width + px 0 $colour,
          -$i + px $width + px 0 $colour,
          $i + px $width + px 0 $colour,
          -$width + px -$i + px 0 $colour,
          $width + px -$i + px 0 $colour,
          -$width + px $i + px 0 $colour,
          $width + px $i + px 0 $colour,
      }
      text-shadow: $shadow;
}

Birden çok metin gölgesi ..
Bunun gibi bir şey:

var steps = 10,
    i,
    R = 0.6,
    x,
    y,
    theStyle = '1vw 1vw 3vw #005dab';
for (i = -steps; i <= steps; i += 1) {
    x = (i / steps) / 2;
    y = Math.sqrt(Math.pow(R, 2) - Math.pow(x, 2));
    theStyle = theStyle + ',' + x.toString() + 'vw ' + y.toString() + 'vw 0 #005dab';
    theStyle = theStyle + ',' + x.toString() + 'vw -' + y.toString() + 'vw 0 #005dab';
    theStyle = theStyle + ',' + y.toString() + 'vw ' + x.toString() + 'vw 0 #005dab';
    theStyle = theStyle + ',-' + y.toString() + 'vw ' + x.toString() + 'vw 0 #005dab';
}
document.getElementsByTagName("H1")[0].setAttribute("style", "text-shadow:" + theStyle);

Demo: http://jsfiddle.net/punosound/gv6zs58m/

Metin Gölge Oluşturucu

Burada çok sayıda harika cevap var. Metin gölgesi muhtemelen bunu yapmanın en güvenilir yoludur. Diğerleri bunu zaten yapmış olduğu için bunu metin gölgesi ile nasıl yapacağım hakkında ayrıntılı bir ayrıntıya girmeyeceğim, ancak temel fikir, metin öğesinin etrafında birden çok metin gölgesi oluşturmanızdır. Metin anahattı büyüdükçe, daha fazla metin gölgesine ihtiyacınız olur.

Gönderilen tüm cevaplar (bu kayıttan itibaren) metin gölgesi için statik çözümler sunar. Farklı bir yaklaşım izledim ve bu renk, bulanıklık ve genişlik değerlerini girdi olarak kabul eden ve öğeniz için uygun metin-gölge özelliğini üreten bu JSFiddle'ı yazdım . Sadece boşlukları doldurun, önizlemeyi kontrol edin ve css'i kopyalayıp stil sayfanıza yapıştırmak için tıklayın.

Gereksiz Ek

Görünüşe göre, bir JSFiddle bağlantısı içeren cevaplar da kod içermedikçe gönderilemez. İsterseniz bu eki tamamen göz ardı edebilirsiniz. Bu, text-shadow özelliğini oluşturan kemanımdaki JavaScript. Eğer anlamına Lütfen not değil kendi eserlerinde bu kod uygulamak gerekir:

function computeStyle() {
    var width = document.querySelector('#outline-width').value;
  width = (width === '') ? 0 : Number.parseFloat(width);
  var blur = document.querySelector('#outline-blur').value;
  blur = (blur === '') ? 0 : Number.parseFloat(blur);
  var color = document.querySelector('#outline-color').value;
  if (width < 1 || color === '') {
    document.querySelector('.css-property').innerText = '';
    return;
  }
    var style = 'text-shadow: ';
  var indent = false;
    for (var i = -1 * width; i <= width; ++i) {
    for (var j = -1 * width; j <= width; ++j) {
        if (! (i === 0 && j === 0 && blur === 0)) {
        var indentation = (indent) ? '\u00a0\u00a0\u00a0\u00a0' : '';
            style += indentation + i + "px " + j + "px " + blur + "px " + color + ',\n';
        indent = true;
      }
    }
  }
  style = style.substring(0, style.length - 2) + '\n;';
  document.querySelector('.css-property').innerText = style;

  var exampleBackground = document.querySelector('#example-bg');
  var exampleText = document.querySelector('#example-text');
  exampleBackground.style.backgroundColor = getOppositeColor(color);
  exampleText.style.color = getOppositeColor(color);
  var textShadow = style.replace(/text-shadow: /, '').replace(/\n/g, '').replace(/.$/, '').replace(/\u00a0\u00a0\u00a0\u00a0/g, '');
  exampleText.style.textShadow = textShadow;
}

Bu sorunu da yaşadım ve text-shadowbir seçenek değildi çünkü köşeler kötü görünüyordu (çok fazla gölgem olmadıkça) ve herhangi bir bulanıklık istemedim, bu yüzden tek seçeneğim aşağıdakileri yapmaktı: Var 2 div ve arka plan div için -webkit-text-strokeüzerine koyun, daha sonra istediğiniz kadar büyük bir taslağa izin verir.

div {
  font-size: 200px;
  position: absolute;
  white-space: nowrap;
}

.front {
 color: blue;
}

.outline {
  -webkit-text-stroke: 30px red;
  user-select: none;
}

<div class="outline">
 outline text
</div>

<div class="front">
 outline text
</div>  

Bunu kullanarak, bir çıkış çizgisi elde edebildim , çünkü stroke-widthmetninizin çok büyük bir anahatla okunaklı kalmasını istiyorsanız yöntem bir seçenek değildi (çünkü stroke-widthanahat ile genişlik olduğunda okunaklı olmayan yazı içinde başlayacaktır. harflerden daha büyük olur.

Not: Bu kadar şişman bir taslağa ihtiyacımın nedeni, "google maps" deki sokak etiketlerini taklit etmekti ve metnin etrafında şişman beyaz bir hale istedim. Bu çözüm benim için mükemmel çalıştı.

İşte bu çözümü gösteren bir keman

İşte CSS dosyası umarım wht u alacaksınız

/* ----- Logo ----- */

#logo a {
    background-image:url('../images/wflogo.png'); 
    min-height:0;
    height:40px;
    }
* html #logo a {/* IE6 png Support */
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/wflogo.png", sizingMethod="crop");
}

/* ----- Backgrounds ----- */
html{
    background-image:none;  background-color:#336699;
}
#logo{
    background-image:none;  background-color:#6699cc;
}
#container, html.embed{
    background-color:#FFFFFF;
}
.safari .wufoo input.file{
    background:none;
    border:none;
}

.wufoo li.focused{
    background-color:#FFF7C0;
}
.wufoo .instruct{
    background-color:#F5F5F5;
}

/* ----- Borders ----- */
#container{
    border:0 solid #cccccc;
}
.wufoo .info, .wufoo .paging-context{
    border-bottom:1px dotted #CCCCCC;
}
.wufoo .section h3, .wufoo .captcha, #payment .paging-context{
    border-top:1px dotted #CCCCCC;
}
.wufoo input.text, .wufoo textarea.textarea{

}
.wufoo .instruct{
    border:1px solid #E6E6E6;
}
.fixed .info{
    border-bottom:none;
}
.wufoo li.section.scrollText{
    border-color:#dedede;
}

/* ----- Typography ----- */
.wufoo .info h2{
    font-size:160%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#000000;
}
.wufoo .info div{
    font-size:95%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#444444;
}
.wufoo .section h3{
    font-size:110%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#000000;
}
.wufoo .section div{
    font-size:85%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#444444;
}

.wufoo label.desc, .wufoo legend.desc{
    font-size:95%;
    font-family:inherit;
    font-style:normal;
    font-weight:bold;
    color:#444444;
}

.wufoo label.choice{
    font-size:100%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#444444;
}
.wufoo input.text, .wufoo textarea.textarea, .wufoo input.file, .wufoo select.select{
    font-style:normal;
    font-weight:normal;
    color:#333333;
    font-size:100%;
}
{* Custom Fonts Break Dropdown Selection in IE *}
.wufoo input.text, .wufoo textarea.textarea, .wufoo input.file{ 
    font-family:inherit;
}


.wufoo li div, .wufoo li span, .wufoo li div label, .wufoo li span label{
    font-family:inherit;
    color:#444444;
}
.safari .wufoo input.file{ /* Webkit */
    font-size:100%;
    font-family:inherit;
    color:#444444;
}
.wufoo .instruct small{
    font-size:80%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#444444;
}

.altInstruct small, li.leftHalf small, li.rightHalf small,
li.leftThird small, li.middleThird small, li.rightThird small,
.iphone small{
    color:#444444 !important;
}

/* ----- Button Styles ----- */

.wufoo input.btTxt{

}

/* ----- Highlight Styles ----- */

.wufoo li.focused label.desc, .wufoo li.focused legend.desc,
.wufoo li.focused div, .wufoo li.focused span, .wufoo li.focused div label, .wufoo li.focused span label,
.safari .wufoo li.focused input.file{ 
    color:#000000;
}

/* ----- Confirmation ----- */

.confirm h2{
    font-family:inherit;
    color:#444444;
}
a.powertiny b, a.powertiny em{
    color:#1a1a1a !important;
}
.embed a.powertiny b, .embed a.powertiny em{
    color:#1a1a1a !important;
}

/* ----- Pagination ----- */

.pgStyle1 var, .pgStyle2 var, .pgStyle2 em, .page1 .pgStyle2 var, .pgStyle1 b, .wufoo .buttons .marker{
    font-family:inherit;
    color:#444444;
}
.pgStyle1 var, .pgStyle2 td{
    border:1px solid #cccccc;
}
.pgStyle1 .done var{
    background:#cccccc;
}

.pgStyle1 .selected var, .pgStyle2 var, .pgStyle2 var em{
    background:#FFF7C0;
    color:#000000;
}
.pgStyle1 .selected var{
    border:1px solid #e6dead;
}


/* Likert Backgrounds */

.likert table{
    background-color:#FFFFFF;
}
.likert thead td, .likert thead th{
    background-color:#e6e6e6;
}
.likert tbody tr.alt td, .likert tbody tr.alt th{
    background-color:#f5f5f5;
}

/* Likert Borders */

.likert table, .likert th, .likert td{
    border-color:#dedede;
}
.likert td{
    border-left:1px solid #cccccc;
}

/* Likert Typography */

.likert caption, .likert thead td, .likert tbody th label{
    color:#444444;
    font-family:inherit;
}
.likert tbody td label{
    color:#575757;
    font-family:inherit;
}
.likert caption, .likert tbody th label{
    font-size:95%;
}

/* Likert Hover */

.likert tbody tr:hover td, .likert tbody tr:hover th, .likert tbody tr:hover label{
    background-color:#FFF7C0;
    color:#000000;
}
.likert tbody tr:hover td{
    border-left:1px solid #ccc69a;
}

/* ----- Running Total ----- */

.wufoo #lola{
    background:#e6e6e6;
}
.wufoo #lola tbody td{
    border-bottom:1px solid #cccccc;
}
.wufoo #lola{
    font-family:inherit;
    color:#444444;
}
.wufoo #lola tfoot th{
    color:#696969;
}

/* ----- Report Styles ----- */

.wufoo .wfo_graph h3{
    font-size:95%;
    font-family:inherit;
    color:#444444;
}
.wfo_txt, .wfo_graph h4{
    color:#444444;
}
.wufoo .footer h4{
    color:#000000;
}
.wufoo .footer span{
    color:#444444;
}

/* ----- Number Widget ----- */

.wfo_number{
    background-color:#f5f5f5;
    border-color:#dedede;
}
.wfo_number strong, .wfo_number em{
    color:#000000;
}

/* ----- Chart Widget Border and Background Colors ----- */

#widget, #widget body{
    background:#FFFFFF;
}
.fcNav a.show{
    background-color:#FFFFFF;
    border-color:#cccccc;
}
.fc table{
    border-left:1px solid #dedede;  
}
.fc thead th, .fc .more th{
    background-color:#dedede !important;
    border-right:1px solid #cccccc !important;
}
.fc tbody td, .fc tbody th, .fc tfoot th, .fc tfoot td{
    background-color:#FFFFFF;
    border-right:1px solid #cccccc;
    border-bottom:1px solid #dedede;
}
.fc tbody tr.alt td, .fc tbody tr.alt th, .fc tbody td.alt{
    background-color:#f5f5f5;
}

/* ----- Chart Widget Typography Colors ----- */

.fc caption, .fcNav, .fcNav a{
    color:#444444;
}
.fc tfoot, 
.fc thead th,
.fc tbody th div, 
.fc tbody td.count, .fc .cards tbody td a, .fc td.percent var,
.fc .timestamp span{
    color:#000000;
}
.fc .indent .count{
    color:#4b4b4b;
}
.fc .cards tbody td a span{
    color:#7d7d7d;
}

/* ----- Chart Widget Hover Colors ----- */

.fc tbody tr:hover td, .fc tbody tr:hover th,
.fc tfoot tr:hover td, .fc tfoot tr:hover th{
    background-color:#FFF7C0;
}
.fc tbody tr:hover th div, .fc tbody tr:hover td, .fc tbody tr:hover var,
.fc tfoot tr:hover th div, .fc tfoot tr:hover td, .fc tfoot tr:hover var{
    color:#000000;
}

/* ----- Payment Summary ----- */

.invoice thead th, 
.invoice tbody th, .invoice tbody td,
.invoice tfoot th,
.invoice .total,
.invoice tfoot .last th, .invoice tfoot .last td,
.invoice tfoot th, .invoice tfoot td{
    border-color:#dedede;
}
.invoice thead th, .wufoo .checkNotice{
    background:#f5f5f5;
}
.invoice th, .invoice td{
    color:#000000;
}
#ppSection, #ccSection{
    border-bottom:1px dotted #CCCCCC;
}
#shipSection, #invoiceSection{
    border-top:1px dotted #CCCCCC;
}

/* Drop Shadows */

/* - - - Local Fonts - - - */

/* - - - Responsive - - - */

@media only screen and (max-width: 480px) {
    html{
        background-color:#FFFFFF;
    }
    a.powertiny b, a.powertin em{
        color:#1a1a1a !important;
    }
}

/* - - - Custom Theme - - - */