htc

http://css3pie.com/documentation/known-issues/#z-index
http://dev.w3.org/csswg/css3-images/#linear-gradients
==================================================================

In WHM: Service Configuration >> Apache Configuration >> Include Editor


###----------------------------------------------------###
###-> BEGIN WHM POST-VIRTUAL INCLUDES <-###
###----------------------------------------------------###

# ---
# Help IE users for better experience
# ---

## Use ChromeFrame
<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    BrowserMatch MSIE ie
    Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
  </IfModule>
</IfModule>

## Set proxy notify for changes, choose from 2 flavors!
<IfModule mod_headers.c>
#Header append Vary User-Agent
  Header append Vary User-Agent env=!dont-vary
</IfModule>

# ---
# Cross-domain AJAX requests
# ---

## Serve cross-domain ajax requests, disabled
#<IfModule mod_headers.c>
#  Header set Access-Control-Allow-Origin "*"
#</IfModule>

# ---
# Webfont access
# ---

## Allow access from all domains for webfonts
## Or only whitelist a domain(s) "*.domain.com"

<FilesMatch "\.(ttf|otf|eot|woff|font.css)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

# ---
# Proper MIME type for all files (default) ok to leave?
# ---

## audio
AddType audio/ogg                      oga ogg

## video
AddType video/ogg                      ogv
AddType video/mp4                      mp4
AddType video/webm                     webm

## Proper svg serving. Required for svg webfonts on iPad
AddType     image/svg+xml              svg svgz
AddEncoding gzip                       svgz

## webfonts
AddType application/vnd.ms-fontobject  eot
AddType font/truetype                  ttf
AddType font/opentype                  otf
AddType application/x-font-woff        woff

## Assorted types
AddType image/x-icon                   ico
AddType image/webp                     webp
AddType text/cache-manifest            appcache manifest
AddType text/x-component               htc
AddType application/x-chrome-extension crx
AddType application/x-xpinstall        xpi
AddType application/octet-stream       safariextz

# ---
# Allow concatenation from within specific js and css files (combo)
# ---

## Ex: Inside of script.combined.js you could have
##   <!--#include file="libs/jquery-1.5.0.min.js" -->
##   <!--#include file="plugins/jquery.idletimer.js" -->
## and they would be included into this single file

# <FilesMatch "\.combined\.(js|css)$">
#         Options +Includes
#         SetOutputFilter INCLUDES
# </FilesMatch>

# ---
# Mod Deflate gzip compression
# ---

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
DeflateCompressionLevel 9

<IfModule mod_setenvif.c>
## Netscape 4.x has some problems…
BrowserMatch ^Mozilla/4 gzip-only-text/html

## Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip

## MSIE masquerades as Netscape, but it is fine
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

## NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48
## the above regex won’t work. You can use the following
## workaround to get the desired effect:

#BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

## Don’t compress already-compressed files
  SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
  SetEnvIfNoCase Request_URI .(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
  SetEnvIfNoCase Request_URI .(?:avi|mov|mp3|mp4|rm|flv|swf|mp?g)$ no-gzip dont-vary
  SetEnvIfNoCase Request_URI .pdf$ no-gzip dont-vary

<IfModule mod_headers.c>
  SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s,?\s(gzip|deflate)?|X{4,13}|~{4,13}|-{4,13})$ HAVE_Accept-Encoding
  RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
</IfModule>

## End SetEnvIf
</IfModule>

## html, txt, css, js, json, xml, htc:
<IfModule filter_module>
  FilterDeclare   COMPRESS
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type /text/(html|css|javascript|plain|x(ml|-component))/
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type /application/(javascript|json|xml|x-javascript)/
  FilterChain     COMPRESS
  FilterProtocol  COMPRESS  change=yes;byteranges=no
</IfModule>

## Legacy versions of Apache
<IfModule !mod_filter.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
  AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
  AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
</IfModule>

## webfonts and svg graphics
<FilesMatch "\.(ttf|otf|eot|svg)$" >
  SetOutputFilter DEFLATE
</FilesMatch>

## End Mod Deflate
</IfModule>

# ---
# Expires headers, better browser cache control
# ---

<IfModule mod_expires.c>
  ExpiresActive on

## Default file expires
  ExpiresDefault                          "access plus 1 month"

## cache.appcache needs re-requests in FF 3.6
  ExpiresByType text/cache-manifest       "access plus 0 seconds"

## your document html
  ExpiresByType text/html                 "access plus 0 seconds"

## data
  ExpiresByType text/xml                  "access plus 0 seconds"
  ExpiresByType application/xml           "access plus 0 seconds"
  ExpiresByType application/json          "access plus 0 seconds"

## rss feed
  ExpiresByType application/rss+xml       "access plus 1 hour"

## favicon (cannot be renamed)
  ExpiresByType image/x-icon              "access plus 1 week"

## media: images, video, audio
  ExpiresByType image/gif                 "access plus 1 month"
  ExpiresByType image/png                 "access plus 1 month"
  ExpiresByType image/jpg                 "access plus 1 month"
  ExpiresByType image/jpeg                "access plus 1 month"
  ExpiresByType video/ogg                 "access plus 1 month"
  ExpiresByType audio/ogg                 "access plus 1 month"
  ExpiresByType video/mp4                 "access plus 1 month"
  ExpiresByType video/webm                "access plus 1 month"

## htc files  (css3pie)
  ExpiresByType text/x-component          "access plus 1 month"

## webfonts
  ExpiresByType font/truetype             "access plus 1 month"
  ExpiresByType font/opentype             "access plus 1 month"
  ExpiresByType application/x-font-woff   "access plus 1 month"
  ExpiresByType image/svg+xml             "access plus 1 month"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

## css and javascript
  ExpiresByType text/css                  "access plus 1 week"
  ExpiresByType application/javascript    "access plus 1 week"
  ExpiresByType text/javascript           "access plus 1 week"

<IfModule mod_headers.c>
  Header append Cache-Control "public"
</IfModule>

</IfModule>

# ---
# ETag removal (default)
# ---

## Active by Default
## Since using far-future expires, no need ETags for static content
#FileETag None

# ---
# Stop screen flicker in IE on CSS rollovers
# ---

## The following directives stop screen flicker in IE on CSS rollovers
## in combination with the "ExpiresByType" rules for images, see above
BrowserMatch "MSIE" brokenvary=1
BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1
BrowserMatch "Opera" !brokenvary
SetEnvIf brokenvary 1 force-no-vary

# ---
# Cookie setting from iframes
# ---

## Allow cookies to be set from iframes (for IE only)
## If needed, uncomment and specify a path or regex in the Location directive
<IfModule mod_headers.c>
   <Location />
     Header set P3P "policyref=\"/w3c/p3p.xml\", CP=\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\""
   </Location>
</IfModule>

# ---
# Start rewrite engine (default)
# ---

## Active by Default
## Make sure rewrite engine is on, needed for the following rules
#<IfModule mod_rewrite.c>
#  RewriteEngine On
#</IfModule>

# ---
# Suppress or force the "www." at the beginning of URLs
# ---

## The same content should never be available under two different URLs
## Remember: Shorter URLs are sexier, rewrite "www.domain.com -> domain.com"
<IfModule mod_rewrite.c>
 RewriteCond %{HTTPS} !=on
  RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
  RewriteRule ^(.*)$ http://%1/$1 [R=301,L]
</IfModule>

# ---
# Add/remove trailing slash to (non-file) URLs
# ---

## Google treats URLs with and without trailing slashes separately
## Forcing a trailing slash is usually preferred
## Rewrite "domain.com/foo -> domain.com/foo/"
<IfModule mod_rewrite.c>
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_URI} !(\.[a-zA-Z0-9]{1,5}|/|#(.*))$
  RewriteRule ^(.*)$ /$1/ [R=301,L]
</IfModule>

# ---
# Built-in filename-based cache busting
# ---

## Enable filename version revving, ex: /css/style.20110203.css to /css/style.css
<IfModule mod_rewrite.c>
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.+)\.(\d+)\.(js|css|png|jpg|gif)$ $1.$3 [L]
</IfModule>

# ---
# Prevent SSL cert warnings
# ---

## Rewrite secure requests properly to prevent browser SSL cert warnings
<IfModule mod_rewrite.c>
  RewriteCond %{SERVER_PORT} !^443
  RewriteRule (.*) https://example-domain-please-change-me.com/$1 [R=301,L]
</IfModule>

# ---
# Prevent 404 errors for non-existing redirected folders (default)
# ---

## Active by Default
#Options -MultiViews

# ---
# Custom 404 page (default)
# ---

## Active by Default
## You can add custom pages to handle 500 or 403
#ErrorDocument 404 /404.html

# ---
# UTF-8 encoding
# ---

## Use utf-8 encoding for anything served text/plain or text/html
AddDefaultCharset utf-8

## Force utf-8 for a number of file formats
AddCharset utf-8 .html .css .js .xml .json .rss

# ---
# More Security
# ---

## Active by Default
#ServerTokens Prod

## "-Indexes" will have Apache block users from browsing folders without a default document
# Active by Default
#Options -Indexes

## Block access to "hidden" directories that begin with a period, ie Subversion or Git
<IfModule mod_rewrite.c>
  RewriteRule "(^|/)\." - [F]
</IfModule>

###-------------------------------------------------###
###-> END WHM POST-VIRTUAL INCLUDES <-###
###-------------------------------------------------###




taken from

http://forums.cpanel.net/f5/htaccess-global-242511.html

=========================================================


#block-views-secciones-destacadas-block h2.block-title {
  display: block;
  color: #fff;
  background-color: #818181;
  margin-bottom: 0px;
  height: 30px;
  padding-top: 15px;
  padding-left: 20px;
  border-top: solid 2px #ccc;
  border-right: solid 2px #ccc;
  border-left: solid 2px #ccc;
  border-bottom: none;
  text-shadow: 1px 1px 0 #454545;
  -webkit-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
  letter-spacing: 0.02em;
  background: #818181;
  behavior: url(/PIE.htc);
}

=================================

http://css3pie.com/

y el archivo PIE.htc

va en la raiz de la carpeta que contiene la instalacion de Drupal


==================================================

Pain-free CSS3 with Sass and CSSPie

So, you have a great design for a site. Lots of rounded corners, soft shadows, and beautiful gradients. “This’ll be fun!”, you think.

Enter IE.

“Oh, crap”, you think.

Modern web design in IE is a pain in the rear. Fortunately, we have modern tools that make it a not-pain.

    SASS (Syntactically Awesome Stylesheets) is a macro language for CSS. It lets you express CSS as nested rules, and gives you mix-ins, functionality extensions, variables, partials, and a whole lot more.
    CSSPie is a set of behaviors for Internet Explorer that gives you CSS3 visual styles without really slow Javascript hacks like CurvyCorners.

When combined, the two are a shot of liquid awesome injected directly into your brain.

I’ve settled on a fairly standard setup for my projects. I have:

    My application.sass file.
    My _mixins.sass partial.
    My PIE.htc behavior file.

Macros is very straightforward:

@mixin pie
  behavior: url(/behaviors/PIE.htc)
.pie
  +pie

@mixin shadows($color: #aaa, $x: 1px, $y: 2px, $spread: 2px)
  @extend .pie
  -moz-box-shadow: $color $x $y $spread
  -webkit-box-shadow: $color $x $y $spread
  box-shadow: $color $x $y $spread

@mixin inset-shadows($color: #aaa, $x: 1px, $y: 1px, $spread: 1px)
  @extend .pie
  -moz-box-shadow: inset $x $y $spread $color
  -webkit-box-shadow: inset $x $y $spread $color
  box-shadow: inset $x $y $spread $color

@mixin corners($tl: 5px, $tr: nil, $br: nil, $bl: nil)
  @extend .pie
  @if $tr == nil
    $tr: $tl
  @if $br == nil
    $br: $tl
  @if $bl == nil
    $bl: $tl
  -moz-border-radius: $tl $tr $br $bl
  -webkit-border-top-left-radius: $tl
  -webkit-border-bottom-left-radius: $bl
  -webkit-border-top-right-radius: $tr
  -webkit-border-bottom-right-radius: $br
  border-radius: $tl $tr $br $bl

@mixin vertical-gradient($start: #000, $end: #ccc)
  @extend .pie
  background: $end
  background: -webkit-gradient( linear, left top, left bottom, color-stop(0, $start), color-stop(1, $end) )
  background: -moz-linear-gradient(center top, $start 0%, $end 100%)
  -pie-background: linear-gradient(90deg, $start, $end)

What’s going on here? We’re defining several mix-ins for Sass:

+shadows([color, [x, [y, [spread]]]])

+inset-shadows([color, [x, [y, [spread]]]])

+corners(size)

+corners(topleft, topright, bottomright, bottomleft)

+vertical-gradient(start, end)

Now, in your CSS, you can just do the following:

body
  font:
    family: Arial
    size: 10pt

.box
  +corners
  +shadows(#ccc)
  +vertical-gradient(#eee, #fff)

  h3
    color: #444

.dark-box
  +corners(20px)
  +shadows(#888, 4px, 4px, 4px)
  +vertical-gradient(#444, #000)
  color: #fff
  h3
    color: #fff

.box, .dark-box
  padding: 1em
  margin-bottom: 1em

This expands to:

.pie, .box, .dark-box {
  behavior: url(/projects/PIE.htc);
}

body {
  font-family: Arial;
  font-size: 10pt;
}

.box {
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  border-radius: 5px 5px 5px 5px;
  -moz-box-shadow: #cccccc 1px 2px 2px;
  -webkit-box-shadow: #cccccc 1px 2px 2px;
  box-shadow: #cccccc 1px 2px 2px;
  background: white;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #eeeeee), color-stop(1, white));
  background: -moz-linear-gradient(center top, #eeeeee 0%, white 100%);
  -pie-background: linear-gradient(270deg, #eeeeee, white);
}
.box h3 {
  color: #444444;
}

.dark-box {
  -moz-border-radius: 20px 20px 20px 20px;
  -webkit-border-top-left-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -webkit-border-top-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  border-radius: 20px 20px 20px 20px;
  -moz-box-shadow: #888888 4px 4px 4px;
  -webkit-box-shadow: #888888 4px 4px 4px;
  box-shadow: #888888 4px 4px 4px;
  background: black;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444444), color-stop(1, black));
  background: -moz-linear-gradient(center top, #444444 0%, black 100%);
  -pie-background: linear-gradient(270deg, #444444, black);
  color: white;
}
.dark-box h3 {
  color: white;
}

.box, .dark-box {
  padding: 1em;
  margin-bottom: 1em;
}