This is the slides for the reusable visualizations talk I gave at Bay Area d3 User Group.
Things to note:
The files in this talk are not representative of the proper way to work with CSS or visualizing your data, for better examples, please click the links (or go here), it is merely a means to an end. If I get a chance I might clean it up but for now I’d prefer the content just be on the web.
Cheers,
Miles @milr0c
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="1828.3402"
height="1673.8041"
id="svg2"
version="1.1"
inkscape:version="0.48.2 r9819"
sodipodi:docname="Square_Logo_Portrait.svg">
<defs
id="defs4">
<linearGradient
x1="0"
y1="0"
x2="1"
y2="0"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0,62.407227,62.407227,0,85.624512,40.025391)"
spreadMethod="pad"
id="linearGradient24">
<stop
style="stop-opacity:1;stop-color:#88898b"
offset="0"
id="stop26" />
<stop
style="stop-opacity:1;stop-color:#99999b"
offset="1"
id="stop28" />
</linearGradient>
<linearGradient
x1="0"
y1="0"
x2="1"
y2="0"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0,61.240234,61.240234,0,135.18604,23.905273)"
spreadMethod="pad"
id="linearGradient44">
<stop
style="stop-opacity:1;stop-color:#88898b"
offset="0"
id="stop46" />
<stop
style="stop-opacity:1;stop-color:#99999b"
offset="1"
id="stop48" />
</linearGradient>
<linearGradient
x1="0"
y1="0"
x2="1"
y2="0"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0,44.948242,44.948242,0,236.17676,40.197266)"
spreadMethod="pad"
id="linearGradient64">
<stop
style="stop-opacity:1;stop-color:#88898b"
offset="0"
id="stop66" />
<stop
style="stop-opacity:1;stop-color:#99999b"
offset="1"
id="stop68" />
</linearGradient>
<linearGradient
x1="0"
y1="0"
x2="1"
y2="0"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0,43.931641,43.931641,0,278.63965,41.213867)"
spreadMethod="pad"
id="linearGradient84">
<stop
style="stop-opacity:1;stop-color:#88898b"
offset="0"
id="stop86" />
<stop
style="stop-opacity:1;stop-color:#99999b"
offset="1"
id="stop88" />
</linearGradient>
<linearGradient
x1="0"
y1="0"
x2="1"
y2="0"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0,44.948242,44.948242,0,312.06738,40.197266)"
spreadMethod="pad"
id="linearGradient104">
<stop
style="stop-opacity:1;stop-color:#88898b"
offset="0"
id="stop106" />
<stop
style="stop-opacity:1;stop-color:#99999b"
offset="1"
id="stop108" />
</linearGradient>
<linearGradient
x1="0"
y1="0"
x2="1"
y2="0"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0,44.058594,44.058594,0,186.74951,40.134766)"
spreadMethod="pad"
id="linearGradient124">
<stop
style="stop-opacity:1;stop-color:#88898b"
offset="0"
id="stop126" />
<stop
style="stop-opacity:1;stop-color:#99999b"
offset="1"
id="stop128" />
</linearGradient>
<linearGradient
x1="0"
y1="0"
x2="1"
y2="0"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0,147.09229,147.09229,0,200.00391,122.93945)"
spreadMethod="pad"
id="linearGradient144">
<stop
style="stop-opacity:1;stop-color:#999b9d"
offset="0"
id="stop146" />
<stop
style="stop-opacity:1;stop-color:#aeafb1"
offset="1"
id="stop148" />
</linearGradient>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.175"
inkscape:cx="1648.8174"
inkscape:cy="945.58394"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
showborder="false"
inkscape:window-width="1024"
inkscape:window-height="712"
inkscape:window-x="-4"
inkscape:window-y="-4"
inkscape:window-maximized="1"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(579.88438,241.68271)">
<g
id="g3129"
transform="matrix(6.8005707,0,0,-6.8005707,-1025.8318,1594.689)">
<g
id="g12">
<g
id="g14">
<g
id="g20">
<g
id="g22">
<path
id="path30"
style="fill:url(#linearGradient24);stroke:none"
d="m 67.603,86.326 c 0,-4.493 1.301,-7.94 3.977,-10.526 l 0,0 c 2.507,-2.42 6.275,-4.148 11.862,-5.443 l 0,0 c 13.731,-3.181 16.553,-7.231 16.562,-12.331 l 0,0 c 0,-6.803 -6.435,-12.336 -14.346,-12.336 l 0,0 -0.047,0 c -4.111,0 -8.038,1.562 -10.773,4.288 l 0,0 c -2.319,2.308 -3.589,5.273 -3.589,8.348 l 0,0 -5.674,0 c 0,-4.591 1.873,-8.975 5.259,-12.358 l 0,0 c 3.793,-3.779 9.17,-5.942 14.771,-5.942 l 0,0 0.056,0 c 5.303,0 10.293,1.83 14.055,5.158 l 0,0 c 3.841,3.405 5.958,7.966 5.958,12.842 l 0,0 c -0.028,11.465 -10.605,15.455 -20.953,17.85 l 0,0 c -9.679,2.242 -11.457,5.277 -11.457,10.45 l 0,0 c 0,5.659 5.533,10.445 12.083,10.445 l 0,0 c 6.695,0 12.131,-4.657 12.131,-10.375 l 0,0 5.676,0 c 0,4.385 -1.902,8.472 -5.355,11.494 l 0,0 c -3.344,2.933 -7.763,4.543 -12.452,4.543 l 0,0 c -9.78,0 -17.744,-7.225 -17.744,-16.107"
inkscape:connector-curvature="0" />
</g>
</g>
</g>
</g>
<g
id="g32">
<g
id="g34">
<g
id="g40">
<g
id="g42">
<path
id="path50"
style="fill:url(#linearGradient44);stroke:none"
d="m 112.514,62.749 c 0,-12.92 10.187,-22.551 23.026,-22.551 l 0,0 c 6.663,0 12.999,2.899 16.683,8.532 l 0,0 0.158,0 0,-24.825 5.477,0 0,60.147 -5.477,0 0,-7.52 -0.158,0 c -3.684,5.715 -10.02,8.613 -16.683,8.613 l 0,0 c -12.596,0 -23.026,-9.553 -23.026,-22.396 m 5.489,-0.239 c 0,10.106 7.356,17.702 17.537,17.702 l 0,0 c 9.719,0 17.152,-8.062 17.152,-17.618 l 0,0 c 0,-9.555 -7.433,-17.466 -17.152,-17.466 l 0,0 c -10.021,0 -17.537,7.362 -17.537,17.382"
inkscape:connector-curvature="0" />
</g>
</g>
</g>
</g>
<g
id="g52">
<g
id="g54">
<g
id="g60">
<g
id="g62">
<path
id="path70"
style="fill:url(#linearGradient64);stroke:none"
d="m 213.505,62.749 c 0,-12.92 10.185,-22.551 23.026,-22.551 l 0,0 c 6.66,0 12.922,2.899 16.677,8.532 l 0,0 0.163,0 0,-7.516 5.478,0 0,42.838 -5.478,0 0,-7.52 -0.163,0 c -3.678,5.795 -9.943,8.613 -16.677,8.613 l 0,0 c -12.606,0 -23.026,-9.553 -23.026,-22.396 m 5.485,-0.239 c 0,10.106 7.363,17.702 17.541,17.702 l 0,0 c 9.713,0 17.143,-8.062 17.143,-17.618 l 0,0 c 0,-9.555 -7.43,-17.466 -17.143,-17.466 l 0,0 c -10.024,0 -17.541,7.362 -17.541,17.382"
inkscape:connector-curvature="0" />
</g>
</g>
</g>
</g>
<g
id="g72">
<g
id="g74">
<g
id="g80">
<g
id="g82">
<path
id="path90"
style="fill:url(#linearGradient84);stroke:none"
d="m 275.422,77.864 -0.144,0 0,6.188 -5.487,0 0,-42.838 5.487,0 0,25.06 c 0,7.675 4.694,12.454 12.21,13.078 l 0,0 0,5.793 c -5.568,-0.39 -9.712,-1.794 -12.066,-7.281"
inkscape:connector-curvature="0" />
</g>
</g>
</g>
</g>
<g
id="g92">
<g
id="g94">
<g
id="g100">
<g
id="g102">
<path
id="path110"
style="fill:url(#linearGradient104);stroke:none"
d="m 289.709,62.594 c 0,-12.292 9.943,-22.396 22.322,-22.396 l 0,0 c 9.476,0 17.929,6.103 21.059,15.034 l 0,0 -5.794,0 c -2.345,-6.345 -8.769,-10.104 -15.345,-10.104 l 0,0 c -8.385,0 -16.215,7.048 -16.608,15.508 l 0,0 38.998,0 c 0,0.548 0.085,1.018 0.085,1.564 l 0,0 c 0,12.376 -9.944,22.945 -22.475,22.945 l 0,0 c -12.299,0 -22.242,-10.333 -22.242,-22.551 m 22.322,17.618 c 8.614,0 15.341,-6.263 16.752,-14.642 l 0,0 -33.44,0 c 1.338,8.379 8.146,14.642 16.688,14.642"
inkscape:connector-curvature="0" />
</g>
</g>
</g>
</g>
<g
id="g112">
<g
id="g114">
<g
id="g120">
<g
id="g122">
<path
id="path130"
style="fill:url(#linearGradient124);stroke:none"
d="m 200.081,84.193 0,-22.736 c 0,-5.034 -0.7,-9.285 -4.479,-12.906 l 0,0 c -2.679,-2.519 -5.509,-3.46 -9.128,-3.46 l 0,0 c -9.836,0 -13.065,6.529 -13.065,15.422 l 0,0 0,23.68 -5.504,0 0,-23.761 c 0,-4.799 0.709,-9.99 3.774,-13.843 l 0,0 c 3.544,-4.486 9.207,-6.454 14.795,-6.454 l 0,0 c 5.67,0 11.251,2.436 13.767,7.712 l 0,0 0.157,0 0,-6.686 5.195,0 0,43.032 -5.512,0 z"
inkscape:connector-curvature="0" />
</g>
</g>
</g>
</g>
<g
id="g132">
<g
id="g134">
<g
id="g140">
<g
id="g142">
<path
id="path150"
style="fill:url(#linearGradient144);stroke:none"
d="m 150.976,270.032 c -13.486,0 -24.517,-11.033 -24.517,-24.516 l 0,0 0,-98.06 c 0,-13.487 11.031,-24.517 24.517,-24.517 l 0,0 98.056,0 c 13.486,0 24.517,11.03 24.517,24.517 l 0,0 0,98.06 c 0,13.483 -11.031,24.516 -24.517,24.516 l 0,0 -98.056,0 z m 2.228,-112.546 0,77.999 c 0,4.288 3.51,7.795 7.795,7.795 l 0,0 78.009,0 c 4.286,0 7.792,-3.507 7.792,-7.795 l 0,0 0,-77.999 c 0,-4.288 -3.506,-7.796 -7.792,-7.796 l 0,0 -78.009,0 c -4.285,0 -7.795,3.508 -7.795,7.796 m 31.198,59.054 c -2.454,0 -4.457,-2.006 -4.457,-4.458 l 0,0 0,-31.192 c 0,-2.453 2.003,-4.459 4.457,-4.459 l 0,0 31.2,0 c 2.452,0 4.459,2.006 4.459,4.459 l 0,0 0,31.192 c 0,2.452 -2.007,4.458 -4.459,4.458 l 0,0 -31.2,0 z"
inkscape:connector-curvature="0" />
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
/*!
* Bootstrap v2.3.1
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
*/
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
line-height: 0;
}
.clearfix:after {
clear: both;
}
.hide-text {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.input-block-level {
display: block;
width: 100%;
min-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.row {
margin-left: -20px;
*zoom: 1;
}
.row:before,
.row:after {
display: table;
content: "";
line-height: 0;
}
.row:after {
clear: both;
}
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 940px;
}
.span12 {
width: 940px;
}
.span11 {
width: 860px;
}
.span10 {
width: 780px;
}
.span9 {
width: 700px;
}
.span8 {
width: 620px;
}
.span7 {
width: 540px;
}
.span6 {
width: 460px;
}
.span5 {
width: 380px;
}
.span4 {
width: 300px;
}
.span3 {
width: 220px;
}
.span2 {
width: 140px;
}
.span1 {
width: 60px;
}
.offset12 {
margin-left: 980px;
}
.offset11 {
margin-left: 900px;
}
.offset10 {
margin-left: 820px;
}
.offset9 {
margin-left: 740px;
}
.offset8 {
margin-left: 660px;
}
.offset7 {
margin-left: 580px;
}
.offset6 {
margin-left: 500px;
}
.offset5 {
margin-left: 420px;
}
.offset4 {
margin-left: 340px;
}
.offset3 {
margin-left: 260px;
}
.offset2 {
margin-left: 180px;
}
.offset1 {
margin-left: 100px;
}
.row-fluid {
width: 100%;
*zoom: 1;
}
.row-fluid:before,
.row-fluid:after {
display: table;
content: "";
line-height: 0;
}
.row-fluid:after {
clear: both;
}
.row-fluid [class*="span"] {
display: block;
width: 100%;
min-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
margin-left: 2.127659574468085%;
*margin-left: 2.074468085106383%;
}
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid .controls-row [class*="span"] + [class*="span"] {
margin-left: 2.127659574468085%;
}
.row-fluid .span12 {
width: 100%;
*width: 99.94680851063829%;
}
.row-fluid .span11 {
width: 91.48936170212765%;
*width: 91.43617021276594%;
}
.row-fluid .span10 {
width: 82.97872340425532%;
*width: 82.92553191489361%;
}
.row-fluid .span9 {
width: 74.46808510638297%;
*width: 74.41489361702126%;
}
.row-fluid .span8 {
width: 65.95744680851064%;
*width: 65.90425531914893%;
}
.row-fluid .span7 {
width: 57.44680851063829%;
*width: 57.39361702127659%;
}
.row-fluid .span6 {
width: 48.93617021276595%;
*width: 48.88297872340425%;
}
.row-fluid .span5 {
width: 40.42553191489362%;
*width: 40.37234042553192%;
}
.row-fluid .span4 {
width: 31.914893617021278%;
*width: 31.861702127659576%;
}
.row-fluid .span3 {
width: 23.404255319148934%;
*width: 23.351063829787233%;
}
.row-fluid .span2 {
width: 14.893617021276595%;
*width: 14.840425531914894%;
}
.row-fluid .span1 {
width: 6.382978723404255%;
*width: 6.329787234042553%;
}
.row-fluid .offset12 {
margin-left: 104.25531914893617%;
*margin-left: 104.14893617021275%;
}
.row-fluid .offset12:first-child {
margin-left: 102.12765957446808%;
*margin-left: 102.02127659574467%;
}
.row-fluid .offset11 {
margin-left: 95.74468085106382%;
*margin-left: 95.6382978723404%;
}
.row-fluid .offset11:first-child {
margin-left: 93.61702127659574%;
*margin-left: 93.51063829787232%;
}
.row-fluid .offset10 {
margin-left: 87.23404255319149%;
*margin-left: 87.12765957446807%;
}
.row-fluid .offset10:first-child {
margin-left: 85.1063829787234%;
*margin-left: 84.99999999999999%;
}
.row-fluid .offset9 {
margin-left: 78.72340425531914%;
*margin-left: 78.61702127659572%;
}
.row-fluid .offset9:first-child {
margin-left: 76.59574468085106%;
*margin-left: 76.48936170212764%;
}
.row-fluid .offset8 {
margin-left: 70.2127659574468%;
*margin-left: 70.10638297872339%;
}
.row-fluid .offset8:first-child {
margin-left: 68.08510638297872%;
*margin-left: 67.9787234042553%;
}
.row-fluid .offset7 {
margin-left: 61.70212765957446%;
*margin-left: 61.59574468085106%;
}
.row-fluid .offset7:first-child {
margin-left: 59.574468085106375%;
*margin-left: 59.46808510638297%;
}
.row-fluid .offset6 {
margin-left: 53.191489361702125%;
*margin-left: 53.085106382978715%;
}
.row-fluid .offset6:first-child {
margin-left: 51.063829787234035%;
*margin-left: 50.95744680851063%;
}
.row-fluid .offset5 {
margin-left: 44.68085106382979%;
*margin-left: 44.57446808510638%;
}
.row-fluid .offset5:first-child {
margin-left: 42.5531914893617%;
*margin-left: 42.4468085106383%;
}
.row-fluid .offset4 {
margin-left: 36.170212765957444%;
*margin-left: 36.06382978723405%;
}
.row-fluid .offset4:first-child {
margin-left: 34.04255319148936%;
*margin-left: 33.93617021276596%;
}
.row-fluid .offset3 {
margin-left: 27.659574468085104%;
*margin-left: 27.5531914893617%;
}
.row-fluid .offset3:first-child {
margin-left: 25.53191489361702%;
*margin-left: 25.425531914893618%;
}
.row-fluid .offset2 {
margin-left: 19.148936170212764%;
*margin-left: 19.04255319148936%;
}
.row-fluid .offset2:first-child {
margin-left: 17.02127659574468%;
*margin-left: 16.914893617021278%;
}
.row-fluid .offset1 {
margin-left: 10.638297872340425%;
*margin-left: 10.53191489361702%;
}
.row-fluid .offset1:first-child {
margin-left: 8.51063829787234%;
*margin-left: 8.404255319148938%;
}
[class*="span"].hide,
.row-fluid [class*="span"].hide {
display: none;
}
[class*="span"].pull-right,
.row-fluid [class*="span"].pull-right {
float: right;
}
.btn-group {
position: relative;
display: inline-block;
*display: inline;
/* IE7 inline-block hack */
*zoom: 1;
font-size: 0;
vertical-align: middle;
white-space: nowrap;
*margin-left: .3em;
}
.btn-group:first-child {
*margin-left: 0;
}
.btn-group + .btn-group {
margin-left: 5px;
}
.btn-toolbar {
font-size: 0;
margin-top: 10px;
margin-bottom: 10px;
}
.btn-toolbar > .btn + .btn,
.btn-toolbar > .btn-group + .btn,
.btn-toolbar > .btn + .btn-group {
margin-left: 5px;
}
.btn-group > .btn {
position: relative;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.btn-group > .btn + .btn {
margin-left: -1px;
}
.btn-group > .btn,
.btn-group > .dropdown-menu,
.btn-group > .popover {
font-size: 14px;
}
.btn-group > .btn-mini {
font-size: 10.5px;
}
.btn-group > .btn-small {
font-size: 11.9px;
}
.btn-group > .btn-large {
font-size: 17.5px;
}
.btn-group > .btn:first-child {
margin-left: 0;
-webkit-border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-left-radius: 4px;
}
.btn-group > .btn:last-child,
.btn-group > .dropdown-toggle {
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
border-bottom-right-radius: 4px;
}
.btn-group > .btn.large:first-child {
margin-left: 0;
-webkit-border-top-left-radius: 6px;
-moz-border-radius-topleft: 6px;
border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-bottomleft: 6px;
border-bottom-left-radius: 6px;
}
.btn-group > .btn.large:last-child,
.btn-group > .large.dropdown-toggle {
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topright: 6px;
border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-bottomright: 6px;
border-bottom-right-radius: 6px;
}
.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn:active,
.btn-group > .btn.active {
z-index: 2;
}
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline: 0;
}
.btn-group > .btn + .dropdown-toggle {
padding-left: 8px;
padding-right: 8px;
-webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
*padding-top: 5px;
*padding-bottom: 5px;
}
.btn-group > .btn-mini + .dropdown-toggle {
padding-left: 5px;
padding-right: 5px;
*padding-top: 2px;
*padding-bottom: 2px;
}
.btn-group > .btn-small + .dropdown-toggle {
*padding-top: 5px;
*padding-bottom: 4px;
}
.btn-group > .btn-large + .dropdown-toggle {
padding-left: 12px;
padding-right: 12px;
*padding-top: 7px;
*padding-bottom: 7px;
}
.btn-group.open .dropdown-toggle {
background-image: none;
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
}
.btn-group.open .btn.dropdown-toggle {
background-color: #e6e6e6;
}
.btn-group.open .btn-primary.dropdown-toggle {
background-color: #0044cc;
}
.btn-group.open .btn-warning.dropdown-toggle {
background-color: #f89406;
}
.btn-group.open .btn-danger.dropdown-toggle {
background-color: #bd362f;
}
.btn-group.open .btn-success.dropdown-toggle {
background-color: #51a351;
}
.btn-group.open .btn-info.dropdown-toggle {
background-color: #2f96b4;
}
.btn-group.open .btn-inverse.dropdown-toggle {
background-color: #222222;
}
.btn .caret {
margin-top: 8px;
margin-left: 0;
}
.btn-large .caret {
margin-top: 6px;
}
.btn-large .caret {
border-left-width: 5px;
border-right-width: 5px;
border-top-width: 5px;
}
.btn-mini .caret,
.btn-small .caret {
margin-top: 8px;
}
.dropup .btn-large .caret {
border-bottom-width: 5px;
}
.btn-primary .caret,
.btn-warning .caret,
.btn-danger .caret,
.btn-info .caret,
.btn-success .caret,
.btn-inverse .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
.btn-group-vertical {
display: inline-block;
*display: inline;
/* IE7 inline-block hack */
*zoom: 1;
}
.btn-group-vertical > .btn {
display: block;
float: none;
max-width: 100%;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.btn-group-vertical > .btn + .btn {
margin-left: 0;
margin-top: -1px;
}
.btn-group-vertical > .btn:first-child {
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.btn-group-vertical > .btn:last-child {
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
.btn-group-vertical > .btn-large:first-child {
-webkit-border-radius: 6px 6px 0 0;
-moz-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
}
.btn-group-vertical > .btn-large:last-child {
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
}
@media (max-width: 767px) {
body {
padding-left: 20px;
padding-right: 20px;
}
.navbar-fixed-top,
.navbar-fixed-bottom,
.navbar-static-top {
margin-left: -20px;
margin-right: -20px;
}
.container-fluid {
padding: 0;
}
.dl-horizontal dt {
float: none;
clear: none;
width: auto;
text-align: left;
}
.dl-horizontal dd {
margin-left: 0;
}
.container {
width: auto;
}
.row-fluid {
width: 100%;
}
.row,
.thumbnails {
margin-left: 0;
}
.thumbnails > li {
float: none;
margin-left: 0;
}
[class*="span"],
.uneditable-input[class*="span"],
.row-fluid [class*="span"] {
float: none;
display: block;
width: 100%;
margin-left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.span12,
.row-fluid .span12 {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.row-fluid [class*="offset"]:first-child {
margin-left: 0;
}
.input-large,
.input-xlarge,
.input-xxlarge,
input[class*="span"],
select[class*="span"],
textarea[class*="span"],
.uneditable-input {
display: block;
width: 100%;
min-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.input-prepend input,
.input-append input,
.input-prepend input[class*="span"],
.input-append input[class*="span"] {
display: inline-block;
width: auto;
}
.controls-row [class*="span"] + [class*="span"] {
margin-left: 0;
}
.modal {
position: fixed;
top: 20px;
left: 20px;
right: 20px;
width: auto;
margin: 0;
}
.modal.fade {
top: -100px;
}
.modal.fade.in {
top: 20px;
}
}
@media (max-width: 480px) {
.nav-collapse {
-webkit-transform: translate3d(0, 0, 0);
}
.page-header h1 small {
display: block;
line-height: 20px;
}
input[type="checkbox"],
input[type="radio"] {
border: 1px solid #ccc;
}
.form-horizontal .control-label {
float: none;
width: auto;
padding-top: 0;
text-align: left;
}
.form-horizontal .controls {
margin-left: 0;
}
.form-horizontal .control-list {
padding-top: 0;
}
.form-horizontal .form-actions {
padding-left: 10px;
padding-right: 10px;
}
.media .pull-left,
.media .pull-right {
float: none;
display: block;
margin-bottom: 10px;
}
.media-object {
margin-right: 0;
margin-left: 0;
}
.modal {
top: 10px;
left: 10px;
right: 10px;
}
.modal-header .close {
padding: 10px;
margin: -10px;
}
.carousel-caption {
position: static;
}
}
GIF89a,c � � =�@� B�C�E�H�G�K�N�R�!V�%Y�+]�/`�4d�;f�:i�=k�Bm�Fq�Ku�Ox�Qw�T|�Y�]��b��e��k��o��o��s��y��{�������������ꂞ녡싥쏨햮����������������������������������������������������������������������������� !� , ,c �� � FK�������������������7#�#$H���������������8"�%�����������������Ŏ��������7�����Ȼ���ڗ������������������#������������� N�䉟�L�*\o�BK J�א�DI/jT�N�ō�%I�\Œ�2�\�����,���I��ɚ�f�ܩ/�'�,u�*jЕB�*�tgҥP#5��4�UF.Ry���M>�Ҭ���Q�d�F�:��8��pe=�2m\�lcڽ˳��z��;���p�=����tW%1B�r#I2Av�J��Ȏ�P&R���#J|}}֒�"AH_N�k3BƊ��a��߿m��1��&0H�<�
` �-i���#r�����JDb���@As4�����!8n\^�q��'��BC���E�� 4���c9��[p��b��y2�OJc��Ib$�H ��@�#CH8�M(�,�E��0@@� "@E�C *ى
9|��"A�� A8�T�&�p�6�Pa4�a��V
�<1b���d�\�C$Ct� ��䠢v���g� 0�� 8����$�@�0�Ԉ)0�'� ��&��
2��Q8h�7gI�� �`�"m��*rJHg#I����M����a�^� �K�0����A�aàe�;8|�"��:��ɞ)@@8��'"��J�����0�-��P ���詄$h��,(�.���$�~*����ijB�P�
7(蛋A��;
���dPA�6���I�����ɬ�q��00A\Af��� A��$� ���_X0)q��!���,�L� �6ҩ��:,�������,��Ý�"�H�
�7��,,72�`>`������7�ɉ�� ʤ�<���a����C�nD��-DBo�8�M�cB�]a�>)���U��1��IQD
!0��Hd��"�d��Ҳ0� p����%�$hˈ��(�5̈�1D�#>��f��]����B��̨A� ��#�YB����X((�H���D@��B��)Br��,����yo�V��8 D P�Q��L$x��&ĸQ8N]I��@ LjI�A�D��8BBB%�e-���s"���(у
�( '8 "�𫴕 C�P��,@�gU��
Q
��>t
��&NP-��q��� '!$z >9 \��"�
%�D��K�� ��� @�yB��`�>���/RB��R�>"�)4X� ��ĩ(��pܬf��UF1=�@�����Il������>2rËDB �A(�� �����
��l�ӄ��ub� v8�&bPK (��+\Q�d��|P$��&��=��hc��X7��ɔ�2gH�-�Ü�&X��A�C X�4%$* ��X�(Xp�AL��|�:'���q�j!�c%v� )@��7
)��� a0��n(�$h�j'pe(W��k�.y�~�V�B �A���8��00 �2�RK� o8(=Q7M��ű(��8QA[L�Y1I
-6t/���MC�Mq@��(���&$DP�V��w� ��OJ0�$`�%X2K��IAD�U� o���I�1+�v8��T<P% R��XUV��:������&L[��U��1�� ��fB�6�]IQTd�bl�IEr ߺB��
�+Xf"/�
:�F�� ��j� �jb��)�1[�ZU$�e�\�6˺�-�@������� &��۞k}��#l��f5c�|����sEd{��Ģ�����.x�Q�I;F,W��
������y1!' ��"1�w_q����JQ>Y����@�E
,H �Q�u�5m����%l�I)~Ed9�C*�ܱ�l��:[� oY�X+Ƣ$d D�Ej���/�W4��&�� W�b�[uq���"�U$-�E��>�Y$���K��y�>¦E�E�w���4$����
���*d��1���.-_�d�D�/!ZedP߳�PdD)x�\q�%ᢃ�@@I�X�X`�9�.)�P���u!x�aW�D��'�3D�2Uv�tE�
��;;{.r�M�ʪ���]B�F,�g}G�"��+�L3�-���7�$p�X�h]�j��UM���05�R�$)��΄�+h@�A� � �>E�WI ڝ�4!�M��B �͛��(�U0}�f~�+h �[�n�yl��mL�D�=t�<��.�9��w*�p���� ��؛e_2�!ű�%�VRh��+�(�Ea)#Gx�,�a �8mSNYA��uv�3h&