CSSで異なる色のテキストにアウトラインを付ける方法はありますか?名前、リンクなど、テキストの一部を強調表示して、より直観的にしたいと思います。リンクの色などを変更することは今日では一般的であるため、何か新しいものが欲しいです。
CSSで異なる色のテキストにアウトラインを付ける方法はありますか?名前、リンクなど、テキストの一部を強調表示して、より直観的にしたいと思います。リンクの色などを変更することは今日では一般的であるため、何か新しいものが欲しいです。
回答:
text-stroke
CSS3で実験的なwebkitプロパティが呼び出されています。これをしばらく動作させるように努めてきましたが、これまでのところ成功していません。
代わりに、既にサポートされているtext-shadow
プロパティ(Chrome、Firefox、Opera、IE 9でサポートされていると思います)を使用しています。
4つの影を使用して、ストロークテキストをシミュレートします。
.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>
ここであなたのためにデモを作りました
ホバーされた例がここにあります
Jason Cがコメントで述べたように、text-shadow
CSSプロパティはOpera Miniを除くすべての主要なブラウザーでサポートされています。このソリューションが下位互換性のために機能する場合(自動更新するブラウザーに関する問題ではありません)、text-stroke
CSSを使用する必要があります。
text-shadow
までサポートしていません。奇妙なことに、IE9はサポートしてbox-shadow
いますがサポートしていませんtext-shadow
。
text-shadow
概要を次に示します。現在(この回答が投稿されてから3年)は、「部分的なサポート」を示すOpera Miniを除くすべての主要ブラウザでサポートされているようです(これはを無視しますblur-radius
)。
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
text-shadow
サポートではなく、と指摘しましたtext-stroke
。現在、これはwebkitでのみサポートされています。
編集: text-stroke
かなり成熟し、ほとんどのブラウザーで実装されています。それはより簡単で、よりシャープで、より正確です。あなたのブラウザの聴衆がそれをサポートすることができるなら、あなたは今使うべきですtext-stroke
、ではなく、最初にをありtext-shadow
ます。
あなただけでこれを行うことができます text-shadow
オフセットなし効果で。
.outline {
color: #fff;
text-shadow: #000 0px 0px 1px;
-webkit-font-smoothing: antialiased;
}
どうして?複数のシャドウエフェクトをオフセットすると、不自然なギザギザのコーナーに気づき始めます。
テキストシャドウエフェクトを1か所だけに配置すると、オフセットがなくなります。同じ効果(同じ位置とぼかしを維持)を数回繰り返すことができます。そのようです:
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;
これは、1つの効果のサンプル(上)と、同じ効果が14回繰り返されたもの(下)です。
また、注意:ラインが非常に細くなるため、を使用してサブピクセルレンダリングをオフにすることをお勧めします-webkit-font-smoothing: antialiased
。
font-smoothing
オプションのおかげで、クロムの出力が大幅に改善されました!
text-stroke
はによるアウトラインと同じではありませんtext-shadow
。text-stroke
には、アウトラインをテキストの外側に表示するオプションがありません。つまり、アウトラインがテキストに流れ込んで、恐ろしく見えることがよくあります。つまり、アウトラインのtext-stroke
代わりにはなりませんtext-shadow
これは簡略化された方法です。
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>
これはより複雑なデモです。
次のように、影がストロークのようになるまで、複数のぼかした影を重ねてみることができます。
.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;
}
ここにフィドルがあります:http : //jsfiddle.net/GGUYY/
誰かが興味を持っている場合に備えて、それについて言及しますが、さまざまな方法で失敗するため、ソリューションとは言いません。
私は、背景画像にオーバーレイしたときに機能するクロスブラウザーのテキストストロークソリューションを探していました。IE7-9で追加のマークアップ、js、および動作を含まず、エイリアスの問題を引き起こさないこの解決策があると思います。
これは、CSS3テキストシャドウの使用の組み合わせであり、IE( http://caniuse.com/#search=text-shadow)を使用し、次にIEのフィルターを組み合わせて使用することを組み合わせたものです。CSS3のテキストストロークサポートは現時点では不十分です。
IEフィルター
グローフィルター(http://www.impressivewebs.com/css3-text-shadow-ie/)はひどいので、使用しませんでした。
デビッドヒューイットの答えは、方向の組み合わせでドロップシャドウフィルターを追加することでした。その後、ClearTypeは残念ながら削除され、エイリアスの悪いテキストになります。
次に、useragentmanで提案された要素のいくつかを組み合わせましたドロップシャドウフィルタを使用しています。
それを一緒に入れて
この例は、白いストロークの黒いテキストです。IEをターゲットにする方法で条件付きhtmlクラスを使用しています(http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-n both /)。
#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;
}
filter: glow(color=white,strength=1);
この答えを追加するだけです。テキストを「なでる」と「輪郭を描く」は同じではありません
アウトラインは素晴らしいですね。なでることは恐ろしく見えます。
他の場所に記載されているSVGソリューションにも同じ問題があります。アウトラインが欲しい、あなたは二回、テキストを配置する必要があります。一度なでると再びなでます。
撫でるはれていませんアウトライン
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>
PS:SVGを任意のテキストの正しいサイズにする方法を知りたいです。svgを生成し、JavaScriptでクエリしてエクステントを取得し、結果を適用するのはかなり複雑だと思います。私が知りたい、より簡単な非JSの方法がある場合。
6つの異なるシャドウを使用すると、より良い結果が得られました。
.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のこのミックスインは、8軸を使用してスムーズな結果を提供します。
@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;
}
そして通常の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;
太いストロークで作業すると少し面倒になります。sassの楽しみがある場合はこのミックスインを試してください。完璧ではなく、ストロークの太さに応じてかなりのCSSが生成されます。
@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;
}
複数のテキストシャドウ..
このようなもの:
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);
ここにはたくさんの素晴らしい答えがあります。これは、テキストシャドウがおそらく最も信頼できる方法です。他の人が既に行っているので、テキストシャドウを使用してこれを行う方法については詳しく説明しませんが、基本的な考え方は、テキスト要素の周囲に複数のテキストシャドウを作成することです。テキストのアウトラインが大きいほど、必要なテキストの影が多くなります。
(この投稿の時点で)送信されたすべての回答は、テキストシャドウの静的ソリューションを提供します。私は別のアプローチをとり、アウトラインの色、ぼかし、幅の値を入力として受け入れ、要素に適切なテキストシャドウプロパティを生成するこのJSFiddleを作成しました。空白を入力してプレビューを確認し、クリックしてCSSをコピーしてスタイルシートに貼り付けます。
明らかに、JSFiddleへのリンクを含む回答は、コードも含まれていない限り投稿できません。必要に応じて、この付録を完全に無視できます。これは、テキストシャドウプロパティを生成する私のフィドルのJavaScriptです。自分の作品にこのコードを実装する必要がないことに注意してください:
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;
}
私もこの問題を抱えていtext-shadow
ましたが、角が見た目が悪いため(多くの影がなければ)、ぼかしたくないので、これは選択肢ではありませんでした。 2つのdivと、背景のdivには、その-webkit-text-stroke
上にを置きます。
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>
これを使用して、私は達成することができましたアウトするので、ラインをstroke-width
あなたのテキストは非常に大規模なアウトライン(と読みやすいままにする場合であるための方法はオプションではありませんでしたstroke-width
アウトライン、それは読みやすくない幅になりレタリングの内側を開始します文字より大きくなります。
注:このような太いアウトラインが必要になったのは、「Googleマップ」でストリートラベルをエミュレートしていて、テキストの周りに太い白いハローがほしかったからです。この解決策は私にとって完璧に機能しました。
ここにCSSファイルがあります。
/* ----- 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 - - - */