CSS에서 다른 색상으로 텍스트에 개요를 제공하는 방법이 있습니까? 이름, 링크 등보다 직관적으로 만들기 위해 텍스트의 일부를 강조하고 싶습니다. 링크 색상 변경 등은 오늘날 일반적이므로 새로운 것을 원합니다.
CSS에서 다른 색상으로 텍스트에 개요를 제공하는 방법이 있습니까? 이름, 링크 등보다 직관적으로 만들기 위해 텍스트의 일부를 강조하고 싶습니다. 링크 색상 변경 등은 오늘날 일반적이므로 새로운 것을 원합니다.
답변:
text-stroke
CSS3에 실험적인 웹킷 속성이 있는데 , 한동안 작동 시키려고했지만 지금까지 실패했습니다.
내가 대신 한 것은 이미 지원되는 text-shadow
속성 (Chrome, Firefox, Opera 및 IE 9에서 지원됨)을 사용하는 것입니다.
네 개의 그림자를 사용하여 획이있는 텍스트를 시뮬레이션하십시오.
.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
Opera Mini를 제외한 모든 주요 브라우저 에서 CSS 속성이 지원됩니다. 이 솔루션이 이전 버전과의 호환성을 위해 작동하는 곳 (실제로 자동 업데이트되는 브라우저와 관련된 문제는 아님) text-stroke
CSS를 사용해야 한다고 생각합니다 .
text-shadow
IE10까지 지원하지 않습니다 . 이상하게도 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
. 현재 웹킷에서만 지원됩니다.
편집 : text-stroke
이제는 상당히 성숙되어 대부분의 브라우저에서 구현됩니다 . 더 쉽고 선명하며 정확합니다. 브라우저 사용자가이를 지원할 수 있다면 이제 text-stroke
대신을 먼저 사용해야 text-shadow
합니다.
text-shadow
오프셋없이 효과만으로이 작업을 수행 할 수 있고 수행해야 합니다.
.outline {
color: #fff;
text-shadow: #000 0px 0px 1px;
-webkit-font-smoothing: antialiased;
}
왜? 여러 그림자 효과를 오프셋하면 불규칙하고 울퉁불퉁 한 모서리가 나타납니다.
한 위치에 텍스트 그림자 효과를 적용하면 오프셋이 제거됩니다. 같은 효과를 반복 할 수 있습니다 (같은 위치와 흐림 유지). 이렇게 :
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;
다음은 단 하나의 효과 (위)와 동일한 효과가 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/
나는 여러 가지 방법으로 실패하기 때문에 해결책이라고 부르지 않더라도 누군가가 관심을 가질 수 있다고 언급했습니다.
배경 이미지에 오버레이 할 때 작동하는 크로스 브라우저 텍스트 스트로크 솔루션을 찾고있었습니다. 여분의 마크 업, js 및 IE7-9 (6 테스트하지 않음)에서 작동하지 않으며 앨리어싱 문제를 일으키지 않는 솔루션이 있다고 생각합니다.
이것은 IE를 제외하고 훌륭한 지원을 제공하는 CSS3 text-shadow의 조합입니다 ( 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-neither/ ).
#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>
추신 : SVG를 임의의 텍스트의 올바른 크기로 만드는 방법을 알고 싶습니다. svg를 생성하고 javascript로 쿼리하여 범위를 얻은 다음 결과를 적용하는 것이 상당히 복잡하다고 생각합니다. js가 아닌 쉬운 방법이 있다면 알고 싶습니다.
이 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 - - - */