@media screen,projection {body {
background: #999;
font: 300 100.01% "Helvetica Neue",Helvetica,"Arial Unicode MS",Arial,sans-serif;
color: #000;
margin: 0;
padding: 0;
line-height: 1.5;
text-align: center;
text-rendering: optimizeLegibility
}
img,abbr,acronym {
border: none
}
#header {
height: 130px;
margin: 0 auto;
padding: 0;
width: 960px
}
h1 {
color: #333;
font-weight: 500;
height: 140px;
line-height: 140px;
margin: 0;
padding: 0;
position: relative;
text-rendering: optimizeLegibility
}
h1 span {
bottom: 25px;
height: 100px;
left: 30px;
position: absolute;
width: 100px
}
h2,h3,h4 {
font-weight: 300;
text-rendering: optimizeLegibility
}
#content {
background: #eee;
color: #333;
width: 896px;
margin: 0 auto;
text-align: left;
padding: .5em 32px 0;
position: relative
}
#top {
position: absolute;
top: 0;
left: 0;
width: 960px;
height: 20px;
_display: none
}
#content #footer {
background: #ccc;
margin: 0 -2em;
clear: both;
position: relative;
zoom: 1
}
#footer h3 {
margin: 0;
padding: 0;
line-height: 30px;
height: 30px;
font-size: .8em;
color: #666;
font-weight: 400;
text-align: center
}
h2 {
font-size: 1.4em;
line-height: 1.85;
margin: 1em 0 0 0;
padding-left: 52px;
position: relative;
zoom: 1
}
h4 {
font-size: 1.3em;
text-rendering: optimizeLegibility
}
#reference h2 {
padding-left: 0
}
h2 span {
height: 32px;
left: 5px;
line-height: 0;
margin: -16px 0 0 0;
position: absolute;
top: 50%;
width: 32px
}
#download h2 {
    background: #ddd;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border: solid 1px #ccc
}
p {
margin: 0
}
p.not-prime {
text-indent: 1.4em
}
p.code,code,samp {
font-family: Consolas,Monaco,"Lucida Console",monospace;
color: #0b094b
}
code span {
color: #690
}
.hidden {
display: none;
visibility: hidden
}
a,a * {
color: #1456a5;
text-decoration: none
}
a:hover,a:hover * {
color: #000;
text-shadow: 0 0 3px #1456a5
}
code a,samp a {
color: #17e1ac
}
sup {
color: #aaa
}
wbr {
display: inline-block
}
address {
font-style: normal
}
address img {
float: left;
margin: 0 10px 0 0;
width: 8.36em;
height: 8.36em
}
strong.very {
color: #f00
}
pre.code code {
color: #fff
}
pre.code {
    -webkit-border-top-right-radius: 1em;
    -webkit-border-bottom-right-radius: 1em;
    -moz-border-radius-topright: 1em;
    -moz-border-radius-bottomright: 1em;
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
    background: #000;
    color: #fff;
    overflow-x: auto;
    padding: 1em;
    margin-left: -2.5em
}
pre.javascript code b {
color: #e9df8f;
font-weight: normal
}
pre.javascript code i,pre.javascript code i *,pre.javascript code i .d {
color: #8b9967;
font-style: normal
}
pre.javascript code .s {
color: #e7be61
}
pre.javascript code .d {
color: #cf6a4c
}
pre.javascript code .c,pre.javascript code .c * {
color: #666
}
em.amp {
font-family: Baskerville,"Goudy Old Style",Palatino,"Book Antiqua",serif;
font-style: italic
}
#column-1 div.sample {
background: #2c53b0 url(blueprint-min.png) no-repeat;
float: right;
height: 99px;
margin: -5em 1em 1em;
padding: 10px;
width: 99px
}
#demos {
    -webkit-border-top-right-radius: 1em;
    -moz-border-radius-topright: 1em;
    border-top-right-radius: 1em;
    background: #222;
    color: #fff;
    padding: 14px 0 0 14px;
    list-style: none;
    margin: 0 0 0 -32px;
    overflow: hidden
}
#demos li {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
float: left;
margin: 0 14px 14px 0;
padding: 0
}
#demos li a {
float: left;
height: 100px;
text-indent: -9999em;
width: 100px
}
form,fieldset {
margin: 0;
padding: 0;
border: none;
text-align: center
}
#column-1 h3 {
font-size: 2em;
font-weight: 100
}
#contents ul {
overflow: hidden
}
#content #column-1 {
width: 62%;
float: left;
margin: 0
}
#content #column-2 {
width: 38%;
margin: 0;
float: left
}
#aside {
margin: 0 0 0 2em;
padding: 0;
list-style: none
}
#aside li {
padding: 0 0 1em 0
}
#aside li p {
margin-left: 52px
}
#aside li h2 {
margin-top: 0
}
#aside #download h2 {
margin-top: 1em
}
#quotes {
display: none
}
#reference em {
font-style: normal;
color: #666;
padding: 0 1em
}
#quotes ol {
font-size: .8em;
list-style: none;
margin: 0 0 0 52px;
padding: 0
}
#quotes ol li {
margin: 0;
padding: 0 0 .5em 0
}
#quotes ol li img {
margin: 5px 5px 0 -21px;
float: left
}
#attr-stroke-dasharray samp {
white-space: nowrap
}
ul#demos li {
background: url(demos.jpg) no-repeat 0 0
}
#demos #reflection {
background-position: -100px 0
}
#demos #rotation1 {
background-position: -200px 0
}
#demos #rotation2 {
background-position: -300px 0
}
#demos #impact {
background-position: -400px 0
}
#demos #punch {
background-position: 0 -100px
}
#demos #pie {
background-position: -100px -100px
}
#demos #analytics {
background-position: -200px -100px
}
#demos #polar {
background-position: -300px -100px
}
#demos #spin {
background-position: -400px -100px
}
#demos #australia {
background-position: 0 -200px
}
#demos #helvetica {
background-position: -100px -200px
}
#demos #chart {
background-position: -200px -200px
}
#demos #animation {
background-position: -300px -200px
}
#demos #hand {
background-position: 0 -300px
}
#demos #ichart {
background-position: -100px -300px
}
#demos #graffle {
background-position: -200px -300px
}
#demos #fonts {
background-position: -300px -300px
}
#demos #easing {
background-position: -400px -300px
}
#demos #ball {
background-position: 0 -400px
}
#demos #tiger {
background-position: -400px -200px
}
#demos #curver {
background-position: -100px -400px
}
#demos #gear {
background-position: -200px -400px
}
#demos #scape {
background-position: -300px -400px
}
#demos #picker {
background-position: -400px -400px
}
#demos #growing-pie {
background-position: 0 -500px
}
#demos #bounce {
background-position: -100px -500px
}
#demos #world {
background-position: -400px -500px
}
#demos #angry {
background-position: -200px -500px
}

}
@media print {body {
background: #fff;
color: #000;
font: 300 100.01% "Helvetica Neue",Helvetica,"Arial Unicode MS",Arial,sans-serif;
margin: 3em 2em 6em 4em;
text-rendering: optimizeLegibility
}
h1 {
text-align: center
}
h1,h2,h3 {
font-weight: 100;
text-rendering: optimizeLegibility
}
#top,#rss,#reference #column-2 {
display: none
}
#footer h3,#reference #footer h3 {
font-size: .7em;
text-align: center
}
#reference h3 {
font-size: 2em;
text-align: left
}
#aside {
list-style: none;
margin: 0;
padding: 0
}
a {
text-decoration: none;
color: #000
}
a:after {
content: " (" attr(href) ")"
}
p {
margin: 0
}
p.not-prime {
text-indent: 1.4em
}
p.code,code,samp {
font-family: Consolas,Monaco,"Lucida Console",monospace;
color: #000
}
code i,code i *,code i .d {
color: #069;
font-style: normal
}
code span.c,code span.c *,code span.c .d {
color: #999
}
code .d {
color: #900
}
#footer {
margin-top: 3em
}
#column-1 div.sample {
border-left: solid #2c53b0 99px;
float: right;
height: 99px;
margin: -5em 1em 1em;
padding: 0;
width: 99px
}
#column-1 div.sample div,#column-1 div.sample svg {
margin-left: -99px
}

}
@media only screen and (max-device-width:480px) {body {
background: #999;
color: #000;
font: 20px Helvetica,sans-serif;
margin: 0;
padding: 0;
text-rendering: optimizeLegibility
}
#top {
display: none
}
* {
-webkit-text-size-adjust: none
}
#content,#header {
width: 450px
}
#header,h1 {
background: #999;
font-size: 1.1em;
height: 130px;
line-height: 130px;
text-align: right
}
#rss {
display: none
}
#content {
background: #eee;
width: 450px
}
#content #column-1 {
float: none;
margin: 0;
width: auto
}
#content #column-2 {
border-top: solid 2px #ccc;
float: none;
width: 390px
}
#aside li {
font-size: 1em
}
#content #footer {
background: none
}
#footer #copyright {
background: none;
margin-bottom: 0;
padding-bottom: 0;
position: relative
}
#footer #font {
background: none;
padding-bottom: 0
}
#demos {
list-style: none;
margin: 0;
padding: 0
}
#demos a {
display: block;
line-height: 3
}

}