styledocco

<!DOCTYPE html><html><head><title>variables | styledocco </title><meta charset="utf-8"><style>*{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;border:0}body{padding:60px 0 40px;background-color:hsl(207,10%,90%);color:hsl(207,5%,30%)}.container{max-width:1300px;margin:0 auto;padding:0 20px}.section{position:relative;margin-bottom:20px}.docs{position:relative;z-index:2;width:68%;min-height:200px;background-color:hsl(207,0%,100%);background-clip:padding-box;border:1px solid hsla(207,5%,5%,.1);border-radius:5px;box-shadow:0 0 3px hsla(207,5%,5%,.1)}.code{position:absolute;top:5px;bottom:5px;right:0;z-index:1;width:33%;padding:10px 10px 10px 20px;border-radius:0 5px 5px 0;border:1px solid hsla(207,20%,10%,.1);background-color:hsla(207,20%,95%,.9);background-clip:padding-box;opacity:.5;-webkit-transition:opacity .4s;-moz-transition:opacity .4s;-o-transition:opacity .4s;transition:opacity .4s}.code:hover{opacity:1}.preview{background:hsl(207,0%,100%);border-top:1px solid hsl(207,30%,95%);position:relative;z-index:1}.preview-code+.preview{margin-top:0;border-top:0}.preview iframe{display:block;width:100%;height:100%;overflow:hidden}.preview-code{position:relative;z-index:2;display:block;width:100%;color:hsl(207,9%,37%);max-height:200px;padding:10px 20px;overflow-y:auto;background:hsl(207,30%,95%);border:1px solid hsl(207,30%,85%);border-left:0;border-right;box-shadow:inset 0 1px 2px hsla(207,30%,10%,.1);line-height:1.1!important;resize:none}.preview-code:focus{outline:0;background:hsl(207,30%,97%);box-shadow:inset 0 1px 2px hsla(207,30%,10%,.1),0 0 5px hsla(207,75%,75%,.9)}.preview-code:last-child{border-bottom:0;border-radius:0 0 5px 5px}.resizeable{padding:15px;overflow:auto;background:hsl(207,0%,100%);box-shadow:0 0 2px hsla(207,10%,20%,.2);resize:both}.preview-code,pre{white-space:pre-wrap;word-wrap:break-word;overflow-y:auto}.code pre{height:100%;margin-top:0}.bar{position:fixed;left:0;right:0;z-index:1010;min-height:40px;line-height:40px;background-image:-webkit-linear-gradient(hsla(207,10%,35%,.97),hsla(207,5%,25%,.92));background-image:-moz-linear-gradient(hsla(207,10%,35%,.97),hsla(207,5%,25%,.92));background-image:-o-linear-gradient(hsla(207,10%,35%,.97),hsla(207,5%,25%,.92));background-image:linear-gradient(hsla(207,10%,35%,.97),hsla(207,5%,25%,.92))}.bar.top{top:0;box-shadow:0 1px 2px hsla(207,5%,0%,.2)}.bar.bottom{bottom:0;box-shadow:0 -1px 2px hsla(207,5%,0%,.2)}.bar ul{margin:0!important}.bar li{display:block;list-style:none}.bar .icon path{fill:hsla(27,10%,75%,.75)}.docs .icon path{fill:hsla(207,10%,75%,.5)}.docs .permalink:hover .icon path{fill:hsl(207,10%,75%)}.bar button{color:hsla(27,10%,75%,.75)}.bar button:hover .icon path,.bar button.is-active .icon path{fill:hsl(27,10%,85%)}.bar button:hover,.bar button.is-active{color:hsl(27,10%,85%)}.bar .icon{vertical-align:middle;display:inline-block}.bar,.bar a,.bar a:visited{color:hsl(27,10%,85%);text-shadow:1px 1px 0 hsla(27,5%,0%,.5)}.bar a:hover,.bar a.is-active{color:hsl(27,10%,95%);text-shadow:1px 1px 0 hsla(27,5%,0%,1);text-decoration:none}.brand{float:left;margin-right:20px;font-weight:700;font-size:16px;text-decoration:none}.brand,a.brand,a.brand:visited{color:hsl(27,5%,5%);text-shadow:1px 1px 0 hsla(27,5%,100%,.2)}.brand:hover,a.brand:hover{color:hsl(27,5%,0%);text-shadow:1px 1px 0 hsla(27,5%,100%,.3);text-decoration:none}.menu{font-size:12px}.menu>li{float:left;position:relative}.menu a{display:block;margin-right:15px}.dropdown-toggle{position:relative;padding-right:15px}.dropdown-toggle:after{display:block;position:absolute;right:0;top:18px;content:'';border:4px solid;border-left-color:transparent;border-right-color:transparent;border-bottom-color:transparent}.nav-results,.dropdown{position:absolute;z-index:1020;top:32px;left:-16px;width:175px;max-height:500px;padding:10px 0;overflow-y:auto;word-wrap:break-word;font-size:11px;line-height:20px;background-color:hsla(207,10%,25%,.97);border:1px solid hsla(207,5%,70%,.3);border-radius:3px;box-shadow:0 0 3px hsla(207,5%,0%,.2)}.toc-list{width:200px}.nav-results{right:0;width:200px;left:auto;padding:5px 0}.nav-results-filename{display:block;font-size:10px;opacity:.75}.nav-results a{display:block;line-height:15px;padding:5px 10px}.nav-results li:not([hidden])~li a{border-top:1px solid hsla(27,10%,90%,.1)}.dropdown a{padding:0 15px}.dropdown li:hover{background-color:hsl(207,10%,22%)}.nav{float:right;position:relative}.nav input[type="search"]{padding:2px 4px;color:#fff;width:150px;border:1px solid hsla(207,5%,0%,.3);background:hsla(207,12%,40%,.9);box-shadow:inset 1px 1px 3px hsla(207,5%,0%,.05),1px 1px 0 hsla(207,5%,100%,.05);border-radius:10px;-webkit-appearance:textfield}.nav input[type="search"]:focus{outline:0;background:hsla(207,7%,45%,.9)}.settings{text-align:center}.bar button{display:inline-block;vertical-align:middle;padding:0 5px;margin:0 3px;background:transparent}.bar button:first-child{margin-left:0}.settings .auto{line-height:32px;font-size:11px;font-weight:700;letter-spacing:-1px;text-shadow:none;text-transform:uppercase}body{font-family:sans-serif;font-size:14px;line-height:1.618}.docs pre,p,ol,ul,dl,figure,blockquote,table{margin-left:20px;margin-right:20px}.preview,.docs pre,p,ol,ul,dl,figure,blockquote,table{margin-top:10px}ul ul,ol ol,ul ol,ol ul,blockquote p:last-child{margin-top:0}ul,ol{padding-left:1.5em}p:last-child,ol:last-child,ul:last-child,dl:last-child{margin-bottom:20px}hr,h1,h2,h3,h4,h5,h6{margin:1em 20px .5em}h1:first-of-type{margin-top:20px}h1,h2,h3,h4,h5,h6{line-height:1.2;color:hsl(207,10%,50%)}h1 a,h1 a:hover,h1 a:visited{color:inherit;text-decoration:inherit}h1{font-size:3.052em;font-weight:400;color:hsl(207,10%,45%)}h2{font-size:1.953em}h3{font-size:1.536em}h1,h2,h3{letter-spacing:-.025em}h4{font-size:1.25em}h5{font-size:1em;text-transform:uppercase}h6{font-size:1em}.permalink{position:absolute;top:15px;right:15px}a{color:hsl(207,90%,50%);text-decoration:none}a:hover{color:hsl(207,95%,40%);text-decoration:underline}a:visited{color:hsl(207,100%,35%)}.preview-code,pre,code,var{font-style:normal;font-family:"Ubuntu Mono","Andale Mono","DejaVu Sans Mono","Monaco","Bitstream Vera Sans Mono","Consolas","Lucida Console",monospace;font-size:12px}.docs pre,code,var{padding:.1em 3px;background:hsla(207,5%,0%,.025);border:1px solid hsla(207,5%,0%,.05);border-radius:3px}.code pre{line-height:1.1!important}pre code{padding:0;background:transparent;border:0}.cf:before,.cf:after{content:'';display:table}.cf:after{clear:both}[unselectable="on"]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[hidden]{display:none!important}small{font-size:85%;opacity:.9}</style><script type="text/preview">(function(){"use strict";var a=function(a){return Array.prototype.slice.call(a)},b=document.getElementsByTagName("body")[0],c=["link","visited","hover","active","focus","target","enabled","disabled","checked"],d=new RegExp(":(("+c.join(")|(")+"))","gi"),e=a(document.styleSheets).map(function(b){return a(b.cssRules).filter(function(a){return a.selectorText&&a.selectorText.match(d)}).map(function(a){return a.cssText.replace(d,".\\3A $1")}).join("")}).join("");if(e.length){var f=document.createElement("style");f.innerText=e;var g=document.getElementsByTagName("style")[0];g.parentNode.insertBefore(f,g)}var h=function(){var a=window.getComputedStyle(b,null);return function(){if(b.childElementCount===0)return b.offsetHeight;var c=b.getElementsByTagName("*"),d=[];for(var e=0,f=c.length;e<f;e++)d.push(c[e].offsetTop+c[e].offsetHeight+parseInt(window.getComputedStyle(c[e],null).getPropertyValue("margin-bottom")));var g=Math.max.apply(Math,d);return g+=parseInt(a.getPropertyValue("padding-bottom"),10),Math.max(g,b.offsetHeight)}}(),i={getHeight:function(){window.parent.postMessage({height:h()},"*")}};window.addEventListener("message",function(a){if(a.data==null)return;typeof a.data=="string"&&i[a.data]()},!1)})()</script><style type="text/preview">.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;content:""}.clearfix:after{clear:both}.btn{display:inline-block;padding:4px 10px 4px;margin-bottom:0;font-size:13px;line-height:18px;color:#333;text-align:center;text-shadow:0 1px 1px rgba(255,255,255,.75);vertical-align:middle;background-color:#f5f5f5;background-image:-moz-linear-gradient(top, #fff, #e6e6e6);background-image:-ms-linear-gradient(top, #fff, #e6e6e6);background-image:-webkit-gradient(linear,0 0,0 100%,from( #fff),to( #e6e6e6));background-image:-webkit-linear-gradient(top, #fff, #e6e6e6);background-image:-o-linear-gradient(top, #fff, #e6e6e6);background-image:linear-gradient(top, #fff, #e6e6e6);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);cursor:pointer;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);*margin-left:.3em}.btn:hover,.btn:active,.btn.active,.btn.disabled,.btn[disabled]{background-color:#e6e6e6}.btn:active,.btn.active{background-color:#ccc \9}.btn:first-child{*margin-left:0}.btn:hover{color:#333;text-decoration:none;background-color:#e6e6e6;background-position:0 -15px;-webkit-transition:background-position .1s linear;-moz-transition:background-position .1s linear;-ms-transition:background-position .1s linear;-o-transition:background-position .1s linear;transition:background-position .1s linear}.btn:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.btn.active,.btn:active{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);background-color:#e6e6e6;background-color:#d9d9d9 \9;outline:0}.btn.disabled,.btn[disabled]{cursor:default;background-image:none;background-color:#e6e6e6;opacity:.65;filter:alpha(opacity=65);-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.btn-large{padding:9px 14px;font-size:15px;line-height:normal;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.btn-large [class^="icon-"]{margin-top:1px}.btn-small{padding:5px 9px;font-size:11px;line-height:16px}.btn-small [class^="icon-"]{margin-top:-1px}.btn-mini{padding:2px 6px;font-size:11px;line-height:14px}.btn-primary,.btn-primary:hover,.btn-warning,.btn-warning:hover,.btn-danger,.btn-danger:hover,.btn-success,.btn-success:hover,.btn-info,.btn-info:hover,.btn-inverse,.btn-inverse:hover{text-shadow:0 -1px 0 rgba(0,0,0,.25);color:#fff}.btn-primary.active,.btn-warning.active,.btn-danger.active,.btn-success.active,.btn-info.active,.btn-dark.active{color:rgba(255,255,255,.75)}.btn-primary{background-color:#006dcc;background-image:-moz-linear-gradient(top, #08c, #04c);background-image:-ms-linear-gradient(top, #08c, #04c);background-image:-webkit-gradient(linear,0 0,0 100%,from( #08c),to( #04c));background-image:-webkit-linear-gradient(top, #08c, #04c);background-image:-o-linear-gradient(top, #08c, #04c);background-image:linear-gradient(top, #08c, #04c);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);border-color:#04c #0044cc #002a80;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.btn-primary:hover,.btn-primary:active,.btn-primary.active,.btn-primary.disabled,.btn-primary[disabled]{background-color:#04c}.btn-primary:active,.btn-primary.active{background-color:#039 \9}.btn-warning{background-color:#faa732;background-image:-moz-linear-gradient(top, #fbb450, #f89406);background-image:-ms-linear-gradient(top, #fbb450, #f89406);background-image:-webkit-gradient(linear,0 0,0 100%,from( #fbb450),to( #f89406));background-image:-webkit-linear-gradient(top, #fbb450, #f89406);background-image:-o-linear-gradient(top, #fbb450, #f89406);background-image:linear-gradient(top, #fbb450, #f89406);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0);border-color:#f89406 #f89406 #ad6704;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.btn-warning:hover,.btn-warning:active,.btn-warning.active,.btn-warning.disabled,.btn-warning[disabled]{background-color:#f89406}.btn-warning:active,.btn-warning.active{background-color:#c67605 \9}.btn-danger{background-color:#da4f49;background-image:-moz-linear-gradient(top, #ee5f5b, #bd362f);background-image:-ms-linear-gradient(top, #ee5f5b, #bd362f);background-image:-webkit-gradient(linear,0 0,0 100%,from( #ee5f5b),to( #bd362f));background-image:-webkit-linear-gradient(top, #ee5f5b, #bd362f);background-image:-o-linear-gradient(top, #ee5f5b, #bd362f);background-image:linear-gradient(top, #ee5f5b, #bd362f);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#bd362f', GradientType=0);border-color:#bd362f #bd362f #802420;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.btn-danger:hover,.btn-danger:active,.btn-danger.active,.btn-danger.disabled,.btn-danger[disabled]{background-color:#bd362f}.btn-danger:active,.btn-danger.active{background-color:#942a25 \9}.btn-success{background-color:#5bb75b;background-image:-moz-linear-gradient(top, #62c462, #51a351);background-image:-ms-linear-gradient(top, #62c462, #51a351);background-image:-webkit-gradient(linear,0 0,0 100%,from( #62c462),to( #51a351));background-image:-webkit-linear-gradient(top, #62c462, #51a351);background-image:-o-linear-gradient(top, #62c462, #51a351);background-image:linear-gradient(top, #62c462, #51a351);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', GradientType=0);border-color:#51a351 #51a351 #387038;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.btn-success:hover,.btn-success:active,.btn-success.active,.btn-success.disabled,.btn-success[disabled]{background-color:#51a351}.btn-success:active,.btn-success.active{background-color:#408140 \9}.btn-info{background-color:#49afcd;background-image:-moz-linear-gradient(top, #5bc0de, #2f96b4);background-image:-ms-linear-gradient(top, #5bc0de, #2f96b4);background-image:-webkit-gradient(linear,0 0,0 100%,from( #5bc0de),to( #2f96b4));background-image:-webkit-linear-gradient(top, #5bc0de, #2f96b4);background-image:-o-linear-gradient(top, #5bc0de, #2f96b4);background-image:linear-gradient(top, #5bc0de, #2f96b4);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0);border-color:#2f96b4 #2f96b4 #1f6377;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.btn-info:hover,.btn-info:active,.btn-info.active,.btn-info.disabled,.btn-info[disabled]{background-color:#2f96b4}.btn-info:active,.btn-info.active{background-color:#24748c \9}.btn-inverse{background-color:#393939;background-image:-moz-linear-gradient(top, #454545, #262626);background-image:-ms-linear-gradient(top, #454545, #262626);background-image:-webkit-gradient(linear,0 0,0 100%,from( #454545),to( #262626));background-image:-webkit-linear-gradient(top, #454545, #262626);background-image:-o-linear-gradient(top, #454545, #262626);background-image:linear-gradient(top, #454545, #262626);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#454545', endColorstr='#262626', GradientType=0);border-color:#262626 #262626 #000;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.btn-inverse:hover,.btn-inverse:active,.btn-inverse.active,.btn-inverse.disabled,.btn-inverse[disabled]{background-color:#262626}.btn-inverse:active,.btn-inverse.active{background-color:#0c0c0c \9}button.btn,input[type="submit"].btn{*padding-top:2px;*padding-bottom:2px}button.btn::-moz-focus-inner,input[type="submit"].btn::-moz-focus-inner{padding:0;border:0}button.btn.large,input[type="submit"].btn.large{*padding-top:7px;*padding-bottom:7px}button.btn.small,input[type="submit"].btn.small{*padding-top:3px;*padding-bottom:3px}.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;content:""}.clearfix:after{clear:both}.btn{display:inline-block;margin-bottom:0;font-weight:400;text-align:center;vertical-align:middle;cursor:pointer;background-image:none;border:1px solid transparent;white-space:nowrap;padding:6px 12px;font-size:14px;line-height:1.42857;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.btn:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.btn:hover,.btn:focus{color:#333;text-decoration:none}.btn:active,.btn.active{outline:0;background-image:none;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.btn.disabled,.btn[disabled],fieldset[disabled] .btn{cursor:not-allowed;pointer-events:none;opacity:.65;filter:alpha(opacity=65);-webkit-box-shadow:none;box-shadow:none}.btn-default{color:#333;background-color:#fff;border-color:#ccc}.btn-default:hover,.btn-default:focus,.btn-default:active,.btn-default.active{color:#333;background-color:#ebebeb;border-color:#adadad}.open .btn-default.dropdown-toggle{color:#333;background-color:#ebebeb;border-color:#adadad}.btn-default:active,.btn-default.active{background-image:none}.open .btn-default.dropdown-toggle{background-image:none}.btn-default.disabled,.btn-default.disabled:hover,.btn-default.disabled:focus,.btn-default.disabled:active,.btn-default.disabled.active,.btn-default[disabled],.btn-default[disabled]:hover,.btn-default[disabled]:focus,.btn-default[disabled]:active,.btn-default[disabled].active,fieldset[disabled] .btn-default,fieldset[disabled] .btn-default:hover,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:active,fieldset[disabled] .btn-default.active{background-color:#fff;border-color:#ccc}.btn-primary{color:#fff;background-color:#428bca;border-color:#357ebd}.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active{color:#fff;background-color:#3276b1;border-color:#285e8e}.open .btn-primary.dropdown-toggle{color:#fff;background-color:#3276b1;border-color:#285e8e}.btn-primary:active,.btn-primary.active{background-image:none}.open .btn-primary.dropdown-toggle{background-image:none}.btn-primary.disabled,.btn-primary.disabled:hover,.btn-primary.disabled:focus,.btn-primary.disabled:active,.btn-primary.disabled.active,.btn-primary[disabled],.btn-primary[disabled]:hover,.btn-primary[disabled]:focus,.btn-primary[disabled]:active,.btn-primary[disabled].active,fieldset[disabled] .btn-primary,fieldset[disabled] .btn-primary:hover,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:active,fieldset[disabled] .btn-primary.active{background-color:#428bca;border-color:#357ebd}.btn-warning{color:#fff;background-color:#f0ad4e;border-color:#eea236}.btn-warning:hover,.btn-warning:focus,.btn-warning:active,.btn-warning.active{color:#fff;background-color:#ed9c28;border-color:#d58512}.open .btn-warning.dropdown-toggle{color:#fff;background-color:#ed9c28;border-color:#d58512}.btn-warning:active,.btn-warning.active{background-image:none}.open .btn-warning.dropdown-toggle{background-image:none}.btn-warning.disabled,.btn-warning.disabled:hover,.btn-warning.disabled:focus,.btn-warning.disabled:active,.btn-warning.disabled.active,.btn-warning[disabled],.btn-warning[disabled]:hover,.btn-warning[disabled]:focus,.btn-warning[disabled]:active,.btn-warning[disabled].active,fieldset[disabled] .btn-warning,fieldset[disabled] .btn-warning:hover,fieldset[disabled] .btn-warning:focus,fieldset[disabled] .btn-warning:active,fieldset[disabled] .btn-warning.active{background-color:#f0ad4e;border-color:#eea236}.btn-danger{color:#fff;background-color:#d9534f;border-color:#d43f3a}.btn-danger:hover,.btn-danger:focus,.btn-danger:active,.btn-danger.active{color:#fff;background-color:#d2322d;border-color:#ac2925}.open .btn-danger.dropdown-toggle{color:#fff;background-color:#d2322d;border-color:#ac2925}.btn-danger:active,.btn-danger.active{background-image:none}.open .btn-danger.dropdown-toggle{background-image:none}.btn-danger.disabled,.btn-danger.disabled:hover,.btn-danger.disabled:focus,.btn-danger.disabled:active,.btn-danger.disabled.active,.btn-danger[disabled],.btn-danger[disabled]:hover,.btn-danger[disabled]:focus,.btn-danger[disabled]:active,.btn-danger[disabled].active,fieldset[disabled] .btn-danger,fieldset[disabled] .btn-danger:hover,fieldset[disabled] .btn-danger:focus,fieldset[disabled] .btn-danger:active,fieldset[disabled] .btn-danger.active{background-color:#d9534f;border-color:#d43f3a}.btn-success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}.btn-success:hover,.btn-success:focus,.btn-success:active,.btn-success.active{color:#fff;background-color:#47a447;border-color:#398439}.open .btn-success.dropdown-toggle{color:#fff;background-color:#47a447;border-color:#398439}.btn-success:active,.btn-success.active{background-image:none}.open .btn-success.dropdown-toggle{background-image:none}.btn-success.disabled,.btn-success.disabled:hover,.btn-success.disabled:focus,.btn-success.disabled:active,.btn-success.disabled.active,.btn-success[disabled],.btn-success[disabled]:hover,.btn-success[disabled]:focus,.btn-success[disabled]:active,.btn-success[disabled].active,fieldset[disabled] .btn-success,fieldset[disabled] .btn-success:hover,fieldset[disabled] .btn-success:focus,fieldset[disabled] .btn-success:active,fieldset[disabled] .btn-success.active{background-color:#5cb85c;border-color:#4cae4c}.btn-info{color:#fff;background-color:#5bc0de;border-color:#46b8da}.btn-info:hover,.btn-info:focus,.btn-info:active,.btn-info.active{color:#fff;background-color:#39b3d7;border-color:#269abc}.open .btn-info.dropdown-toggle{color:#fff;background-color:#39b3d7;border-color:#269abc}.btn-info:active,.btn-info.active{background-image:none}.open .btn-info.dropdown-toggle{background-image:none}.btn-info.disabled,.btn-info.disabled:hover,.btn-info.disabled:focus,.btn-info.disabled:active,.btn-info.disabled.active,.btn-info[disabled],.btn-info[disabled]:hover,.btn-info[disabled]:focus,.btn-info[disabled]:active,.btn-info[disabled].active,fieldset[disabled] .btn-info,fieldset[disabled] .btn-info:hover,fieldset[disabled] .btn-info:focus,fieldset[disabled] .btn-info:active,fieldset[disabled] .btn-info.active{background-color:#5bc0de;border-color:#46b8da}.btn-link{color:#428bca;font-weight:400;cursor:pointer;border-radius:0}.btn-link,.btn-link:active,.btn-link[disabled],fieldset[disabled] .btn-link{background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.btn-link,.btn-link:hover,.btn-link:focus,.btn-link:active{border-color:transparent}.btn-link:hover,.btn-link:focus{color:#2a6496;text-decoration:underline;background-color:transparent}.btn-link[disabled]:hover,.btn-link[disabled]:focus,fieldset[disabled] .btn-link:hover,fieldset[disabled] .btn-link:focus{color:#999;text-decoration:none}.btn-lg{padding:10px 16px;font-size:18px;line-height:1.33;border-radius:6px}.btn-sm,.btn-xs{padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}.btn-xs{padding:1px 5px}.btn-block{display:block;width:100%;padding-left:0;padding-right:0}.btn-block+.btn-block{margin-top:5px}input[type="submit"].btn-block,input[type="reset"].btn-block,input[type="button"].btn-block{width:100%}</style></head><body><nav class="bar top cf"><div class="container"><a href="index.html" class="brand">styledocco</a><ul class="menu"><li><a href="#" data-toggle="dropdown-1" unselectable="on" class="dropdown-toggle">less</a><ul id="dropdown-1" hidden class="dropdown"><li><a href="less-buttons.html">buttons</a></li><li><a href="less-mixins.html">mixins</a></li><li><a href="less-variables.html">variables</a></li></ul></li><li><a href="#" data-toggle="dropdown-2" unselectable="on" class="dropdown-toggle">sass</a><ul id="dropdown-2" hidden class="dropdown"><li><a href="sass-buttons.html">buttons</a></li><li><a href="sass-mixins.html">mixins</a></li><li><a href="sass-variables.html">variables</a></li><li><a href="sass-bootstrap.html">bootstrap</a></li></ul></li></ul><div class="nav"><button title="Table of Contents" data-toggle="nav-toc"><svg viewBox="0 0 512 512" height="22" width="22" class="icon"><path d="M108.9,403.1V462H50v-58.9H108.9z M108.9,285.4H50v58.9h58.9V285.4zM108.9,50H50v58.9h58.9V50z M108.9,167.7H50v58.9h58.9V167.7z M167.7,344.3H462v-58.9H167.7V344.3zM167.7,50v58.9H462V50H167.7z M167.7,462H462v-58.9H167.7V462z M167.7,226.6H462v-58.9H167.7V226.6z"></path></svg></button><input type="search" placeholder="Search" class="search"></div></div></nav><section class="container"><article id="variables" class="section"><div class="docs"><a href="#variables" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h2 id="variables"> Variables</h2> <h2 id="global-values"> Global values</h2> <h2 id="grays"> Grays</h2> <h2 id="brand-colors"> Brand colors</h2> <h2 id="scaffolding"> Scaffolding</h2> <h2 id="links"> Links</h2> <h2 id="typography"> Typography</h2> <h2 id="iconography"> Iconography</h2> <h2 id="components"> Components</h2> <p> Based on 14px font-size and 1.428 line-height (~20px to start)</p> <h2 id="tables"> Tables</h2> <h2 id="buttons"> Buttons</h2> <h2 id="forms"> Forms</h2> <h2 id="dropdowns"> Dropdowns</h2> <h2 id="component-variables"> COMPONENT VARIABLES</h2> <h2 id="zindex-master-list"> Z-index master list</h2> <p> Used for a bird's eye view of components dependent on the z-axis Try to avoid customizing these :)</p> <h2 id="media-queries-breakpoints"> Media queries breakpoints</h2> <p> Extra small screen / phone Note: Deprecated $screen-xs and $screen-phone as of v3.0.1</p> <p> Small screen / tablet Note: Deprecated $screen-sm and $screen-tablet as of v3.0.1</p> <p> Medium screen / desktop Note: Deprecated $screen-md and $screen-desktop as of v3.0.1</p> <p> Large screen / wide desktop Note: Deprecated $screen-lg and $screen-lg-desktop as of v3.0.1</p> <p> So media queries don't overlap when required, provide a maximum</p> <h2 id="grid-system"> Grid system</h2> <p> Number of columns in the grid system</p> <p> Padding, to be divided by two and applied to the left and right of all columns</p> <p> Point at which the navbar stops collapsing</p> <h2 id="navbar"> Navbar</h2> <p> Basics of a navbar</p> <p> Navbar links</p> <p> Navbar brand label</p> <p> Navbar toggle</p> <p> Inverted navbar</p> <p> Reset inverted navbar basics</p> <p> Inverted navbar links</p> <p> Inverted navbar brand label</p> <p> Inverted navbar toggle</p> <h2 id="navs"> Navs</h2> <p> Tabs</p> <p> Pills</p> <h2 id="pagination"> Pagination</h2> <h2 id="pager"> Pager</h2> <h2 id="jumbotron"> Jumbotron</h2> <h2 id="form-states-and-alerts"> Form states and alerts</h2> <h2 id="tooltips"> Tooltips</h2> <h2 id="popovers"> Popovers</h2> <h2 id="labels"> Labels</h2> <h2 id="modals"> Modals</h2> <h2 id="alerts"> Alerts</h2> <h2 id="progress-bars"> Progress bars</h2> <h2 id="list-group"> List group</h2> <h2 id="panels"> Panels</h2> <h2 id="thumbnails"> Thumbnails</h2> <h2 id="wells"> Wells</h2> <h2 id="badges"> Badges</h2> <h2 id="breadcrumbs"> Breadcrumbs</h2> <h2 id="carousel"> Carousel</h2> <h2 id="close"> Close</h2> <h2 id="code"> Code</h2> <h2 id="type"> Type</h2> <h2 id="miscellaneous"> Miscellaneous</h2> <p> Hr border color</p> <p> Horizontal forms & lists</p> <h2 id="container-sizes"> Container sizes</h2> <p> Small screen / tablet</p> <p> Medium screen / desktop</p> <p> Large screen / wide desktop</p> </div><div class="code"><pre><code>$gray-darker: lighten(#000, 13.5%) !default; // #222 $gray-dark: lighten(#000, 20%) !default; // #333 $gray: lighten(#000, 33.5%) !default; // #555 $gray-light: lighten(#000, 60%) !default; // #999 $gray-lighter: lighten(#000, 93.5%) !default; // #eee $brand-primary: #428bca !default; $brand-success: #5cb85c !default; $brand-warning: #f0ad4e !default; $brand-danger: #d9534f !default; $brand-info: #5bc0de !default; $body-bg: #fff !default; $text-color: $gray-dark !default; $link-color: $brand-primary !default; $link-hover-color: darken($link-color, 15%) !default; $font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default; $font-family-serif: Georgia, "Times New Roman", Times, serif !default; $font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace !default; $font-family-base: $font-family-sans-serif !default; $font-size-base: 14px !default; $font-size-large: ceil($font-size-base * 1.25) !default; // ~18px $font-size-small: ceil($font-size-base * 0.85) !default; // ~12px $font-size-h1: floor($font-size-base * 2.6) !default; // ~36px $font-size-h2: floor($font-size-base * 2.15) !default; // ~30px $font-size-h3: ceil($font-size-base * 1.7) !default; // ~24px $font-size-h4: ceil($font-size-base * 1.25) !default; // ~18px $font-size-h5: $font-size-base !default; $font-size-h6: ceil($font-size-base * 0.85) !default; // ~12px $line-height-base: 1.428571429 !default; // 20/14 $line-height-computed: floor($font-size-base * $line-height-base) !default; // ~20px $headings-font-family: $font-family-base !default; $headings-font-weight: 500 !default; $headings-line-height: 1.1 !default; $headings-color: inherit !default; $icon-font-path: "../fonts/" !default; $icon-font-name: "glyphicons-halflings-regular" !default; $padding-base-vertical: 6px !default; $padding-base-horizontal: 12px !default; $padding-large-vertical: 10px !default; $padding-large-horizontal: 16px !default; $padding-small-vertical: 5px !default; $padding-small-horizontal: 10px !default; $line-height-large: 1.33 !default; $line-height-small: 1.5 !default; $border-radius-base: 4px !default; $border-radius-large: 6px !default; $border-radius-small: 3px !default; $component-active-color: #fff !default; $component-active-bg: $brand-primary !default; $caret-width-base: 4px !default; $caret-width-large: 5px !default; $table-cell-padding: 8px !default; $table-condensed-cell-padding: 5px !default; $table-bg: transparent !default; // overall background-color $table-bg-accent: #f9f9f9 !default; // for striping $table-bg-hover: #f5f5f5 !default; $table-bg-active: $table-bg-hover !default; $table-border-color: #ddd !default; // table and cell border $btn-font-weight: normal !default; $btn-default-color: #333 !default; $btn-default-bg: #fff !default; $btn-default-border: #ccc !default; $btn-primary-color: #fff !default; $btn-primary-bg: $brand-primary !default; $btn-primary-border: darken($btn-primary-bg, 5%) !default; $btn-success-color: #fff !default; $btn-success-bg: $brand-success !default; $btn-success-border: darken($btn-success-bg, 5%) !default; $btn-warning-color: #fff !default; $btn-warning-bg: $brand-warning !default; $btn-warning-border: darken($btn-warning-bg, 5%) !default; $btn-danger-color: #fff !default; $btn-danger-bg: $brand-danger !default; $btn-danger-border: darken($btn-danger-bg, 5%) !default; $btn-info-color: #fff !default; $btn-info-bg: $brand-info !default; $btn-info-border: darken($btn-info-bg, 5%) !default; $btn-link-disabled-color: $gray-light !default; $input-bg: #fff !default; $input-bg-disabled: $gray-lighter !default; $input-color: $gray !default; $input-border: #ccc !default; $input-border-radius: $border-radius-base !default; $input-border-focus: #66afe9 !default; $input-color-placeholder: $gray-light !default; $input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default; $input-height-large: (floor($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default; $input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default; $legend-color: $gray-dark !default; $legend-border-color: #e5e5e5 !default; $input-group-addon-bg: $gray-lighter !default; $input-group-addon-border-color: $input-border !default; $dropdown-bg: #fff !default; $dropdown-border: rgba(0,0,0,.15) !default; $dropdown-fallback-border: #ccc !default; $dropdown-divider-bg: #e5e5e5 !default; $dropdown-link-color: $gray-dark !default; $dropdown-link-hover-color: darken($gray-dark, 5%) !default; $dropdown-link-hover-bg: #f5f5f5 !default; $dropdown-link-active-color: $component-active-color !default; $dropdown-link-active-bg: $component-active-bg !default; $dropdown-link-disabled-color: $gray-light !default; $dropdown-header-color: $gray-light !default; $dropdown-caret-color: #000 !default; $zindex-navbar: 1000 !default; $zindex-dropdown: 1000 !default; $zindex-popover: 1010 !default; $zindex-tooltip: 1030 !default; $zindex-navbar-fixed: 1030 !default; $zindex-modal-background: 1040 !default; $zindex-modal: 1050 !default; $screen-xs: 480px !default; $screen-xs-min: $screen-xs !default; $screen-phone: $screen-xs-min !default; $screen-sm: 768px !default; $screen-sm-min: $screen-sm !default; $screen-tablet: $screen-sm-min !default; $screen-md: 992px !default; $screen-md-min: $screen-md !default; $screen-desktop: $screen-md-min !default; $screen-lg: 1200px !default; $screen-lg-min: $screen-lg !default; $screen-lg-desktop: $screen-lg-min !default; $screen-xs-max: ($screen-sm-min - 1) !default; $screen-sm-max: ($screen-md-min - 1) !default; $screen-md-max: ($screen-lg-min - 1) !default; $grid-columns: 12 !default; $grid-gutter-width: 30px !default; $grid-float-breakpoint: $screen-sm-min !default; $navbar-height: 50px !default; $navbar-margin-bottom: $line-height-computed !default; $navbar-border-radius: $border-radius-base !default; $navbar-padding-horizontal: floor($grid-gutter-width / 2) !default; $navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2) !default; $navbar-default-color: #777 !default; $navbar-default-bg: #f8f8f8 !default; $navbar-default-border: darken($navbar-default-bg, 6.5%) !default; $navbar-default-link-color: #777 !default; $navbar-default-link-hover-color: #333 !default; $navbar-default-link-hover-bg: transparent !default; $navbar-default-link-active-color: #555 !default; $navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%) !default; $navbar-default-link-disabled-color: #ccc !default; $navbar-default-link-disabled-bg: transparent !default; $navbar-default-brand-color: $navbar-default-link-color !default; $navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%) !default; $navbar-default-brand-hover-bg: transparent !default; $navbar-default-toggle-hover-bg: #ddd !default; $navbar-default-toggle-icon-bar-bg: #ccc !default; $navbar-default-toggle-border-color: #ddd !default; $navbar-inverse-color: $gray-light !default; $navbar-inverse-bg: #222 !default; $navbar-inverse-border: darken($navbar-inverse-bg, 10%) !default; $navbar-inverse-link-color: $gray-light !default; $navbar-inverse-link-hover-color: #fff !default; $navbar-inverse-link-hover-bg: transparent !default; $navbar-inverse-link-active-color: $navbar-inverse-link-hover-color !default; $navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 10%) !default; $navbar-inverse-link-disabled-color: #444 !default; $navbar-inverse-link-disabled-bg: transparent !default; $navbar-inverse-brand-color: $navbar-inverse-link-color !default; $navbar-inverse-brand-hover-color: #fff !default; $navbar-inverse-brand-hover-bg: transparent !default; $navbar-inverse-toggle-hover-bg: #333 !default; $navbar-inverse-toggle-icon-bar-bg: #fff !default; $navbar-inverse-toggle-border-color: #333 !default; $nav-link-padding: 10px 15px !default; $nav-link-hover-bg: $gray-lighter !default; $nav-disabled-link-color: $gray-light !default; $nav-disabled-link-hover-color: $gray-light !default; $nav-open-link-hover-color: #fff !default; $nav-open-caret-border-color: #fff !default; $nav-tabs-border-color: #ddd !default; $nav-tabs-link-hover-border-color: $gray-lighter !default; $nav-tabs-active-link-hover-bg: $body-bg !default; $nav-tabs-active-link-hover-color: $gray !default; $nav-tabs-active-link-hover-border-color: #ddd !default; $nav-tabs-justified-link-border-color: #ddd !default; $nav-tabs-justified-active-link-border-color: $body-bg !default; $nav-pills-border-radius: $border-radius-base !default; $nav-pills-active-link-hover-bg: $component-active-bg !default; $nav-pills-active-link-hover-color: $component-active-color !default; $pagination-bg: #fff !default; $pagination-border: #ddd !default; $pagination-hover-bg: $gray-lighter !default; $pagination-active-bg: $brand-primary !default; $pagination-active-color: #fff !default; $pagination-disabled-color: $gray-light !default; $pager-border-radius: 15px !default; $pager-disabled-color: $gray-light !default; $jumbotron-padding: 30px !default; $jumbotron-color: inherit !default; $jumbotron-bg: $gray-lighter !default; $jumbotron-heading-color: inherit !default; $jumbotron-font-size: ceil($font-size-base * 1.5) !default; $state-success-text: #468847 !default; $state-success-bg: #dff0d8 !default; $state-success-border: darken(adjust-hue($state-success-bg, -10), 5%) !default; $state-info-text: #3a87ad !default; $state-info-bg: #d9edf7 !default; $state-info-border: darken(adjust-hue($state-info-bg, -10), 7%) !default; $state-warning-text: #c09853 !default; $state-warning-bg: #fcf8e3 !default; $state-warning-border: darken(adjust-hue($state-warning-bg, -10), 5%) !default; $state-danger-text: #b94a48 !default; $state-danger-bg: #f2dede !default; $state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%) !default; $tooltip-max-width: 200px !default; $tooltip-color: #fff !default; $tooltip-bg: #000 !default; $tooltip-arrow-width: 5px !default; $tooltip-arrow-color: $tooltip-bg !default; $popover-bg: #fff !default; $popover-max-width: 276px !default; $popover-border-color: rgba(0,0,0,.2) !default; $popover-fallback-border-color: #ccc !default; $popover-title-bg: darken($popover-bg, 3%) !default; $popover-arrow-width: 10px !default; $popover-arrow-color: #fff !default; $popover-arrow-outer-width: ($popover-arrow-width + 1) !default; $popover-arrow-outer-color: rgba(0,0,0,.25) !default; $popover-arrow-outer-fallback-color: #999 !default; $label-default-bg: $gray-light !default; $label-primary-bg: $brand-primary !default; $label-success-bg: $brand-success !default; $label-info-bg: $brand-info !default; $label-warning-bg: $brand-warning !default; $label-danger-bg: $brand-danger !default; $label-color: #fff !default; $label-link-hover-color: #fff !default; $modal-inner-padding: 20px !default; $modal-title-padding: 15px !default; $modal-title-line-height: $line-height-base !default; $modal-content-bg: #fff !default; $modal-content-border-color: rgba(0,0,0,.2) !default; $modal-content-fallback-border-color: #999 !default; $modal-backdrop-bg: #000 !default; $modal-header-border-color: #e5e5e5 !default; $modal-footer-border-color: $modal-header-border-color !default; $alert-padding: 15px !default; $alert-border-radius: $border-radius-base !default; $alert-link-font-weight: bold !default; $alert-success-bg: $state-success-bg !default; $alert-success-text: $state-success-text !default; $alert-success-border: $state-success-border !default; $alert-info-bg: $state-info-bg !default; $alert-info-text: $state-info-text !default; $alert-info-border: $state-info-border !default; $alert-warning-bg: $state-warning-bg !default; $alert-warning-text: $state-warning-text !default; $alert-warning-border: $state-warning-border !default; $alert-danger-bg: $state-danger-bg !default; $alert-danger-text: $state-danger-text !default; $alert-danger-border: $state-danger-border !default; $progress-bg: #f5f5f5 !default; $progress-bar-color: #fff !default; $progress-bar-bg: $brand-primary !default; $progress-bar-success-bg: $brand-success !default; $progress-bar-warning-bg: $brand-warning !default; $progress-bar-danger-bg: $brand-danger !default; $progress-bar-info-bg: $brand-info !default; $list-group-bg: #fff !default; $list-group-border: #ddd !default; $list-group-border-radius: $border-radius-base !default; $list-group-hover-bg: #f5f5f5 !default; $list-group-active-color: $component-active-color !default; $list-group-active-bg: $component-active-bg !default; $list-group-active-border: $list-group-active-bg !default; $list-group-link-color: #555 !default; $list-group-link-heading-color: #333 !default; $panel-bg: #fff !default; $panel-inner-border: #ddd !default; $panel-border-radius: $border-radius-base !default; $panel-footer-bg: #f5f5f5 !default; $panel-default-text: $gray-dark !default; $panel-default-border: #ddd !default; $panel-default-heading-bg: #f5f5f5 !default; $panel-primary-text: #fff !default; $panel-primary-border: $brand-primary !default; $panel-primary-heading-bg: $brand-primary !default; $panel-success-text: $state-success-text !default; $panel-success-border: $state-success-border !default; $panel-success-heading-bg: $state-success-bg !default; $panel-warning-text: $state-warning-text !default; $panel-warning-border: $state-warning-border !default; $panel-warning-heading-bg: $state-warning-bg !default; $panel-danger-text: $state-danger-text !default; $panel-danger-border: $state-danger-border !default; $panel-danger-heading-bg: $state-danger-bg !default; $panel-info-text: $state-info-text !default; $panel-info-border: $state-info-border !default; $panel-info-heading-bg: $state-info-bg !default; $thumbnail-padding: 4px !default; $thumbnail-bg: $body-bg !default; $thumbnail-border: #ddd !default; $thumbnail-border-radius: $border-radius-base !default; $thumbnail-caption-color: $text-color !default; $thumbnail-caption-padding: 9px !default; $well-bg: #f5f5f5 !default; $badge-color: #fff !default; $badge-link-hover-color: #fff !default; $badge-bg: $gray-light !default; $badge-active-color: $link-color !default; $badge-active-bg: #fff !default; $badge-font-weight: bold !default; $badge-line-height: 1 !default; $badge-border-radius: 10px !default; $breadcrumb-bg: #f5f5f5 !default; $breadcrumb-color: #ccc !default; $breadcrumb-active-color: $gray-light !default; $breadcrumb-separator: "/" !default; $carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6) !default; $carousel-control-color: #fff !default; $carousel-control-width: 15% !default; $carousel-control-opacity: .5 !default; $carousel-control-font-size: 20px !default; $carousel-indicator-active-bg: #fff !default; $carousel-indicator-border-color: #fff !default; $carousel-caption-color: #fff !default; $close-font-weight: bold !default; $close-color: #000 !default; $close-text-shadow: 0 1px 0 #fff !default; $code-color: #c7254e !default; $code-bg: #f9f2f4 !default; $pre-bg: #f5f5f5 !default; $pre-color: $gray-dark !default; $pre-border-color: #ccc !default; $pre-scrollable-max-height: 340px !default; $text-muted: $gray-light !default; $abbr-border-color: $gray-light !default; $headings-small-color: $gray-light !default; $blockquote-small-color: $gray-light !default; $blockquote-border-color: $gray-lighter !default; $page-header-border-color: $gray-lighter !default; $hr-border: $gray-lighter !default; $component-offset-horizontal: 180px !default; $container-tablet: ((720px + $grid-gutter-width)) !default; $container-sm: $container-tablet !default; $container-desktop: ((940px + $grid-gutter-width)) !default; $container-md: $container-desktop !default; $container-large-desktop: ((1140px + $grid-gutter-width)) !default; $container-lg: $container-large-desktop !default;</code></pre></div></article></section><div class="bar bottom"><div hidden class="settings container"><button title="Desktop (1280)" data-width='1280'><svg viewBox="0 0 412 386" height="24" width="26" class="icon"><path d="m147.6,343.9c-4.5,15.9-26.2,37.6-42.1,42.1h201c-15.3,-4-38.1,-26.8-42.1,-42.1H147.6zM387,0.5H25c-13.8,0-25,11.2-25,25V294c0,13.8 11.2,25 25,25h362c13.8,0 25,-11.2 25,-25V25.5C412,11.7 400.8,0.5 387,0.5zM369.9,238.2H42.1L42.1,42.6 369.9,42.6V238.2z"></path></svg></button><button title="Laptop (1024)" data-width='1024'><svg viewBox="0 0 384 312" height="23" width="28" class="icon"><path d="m349.2,20.5c0,-11-9,-20-20,-20H53.6c-11,0-20,9-20,20v194H349.2v-194zm-27,167H60.6V27.5H322.2v160zm28,42H32.6L2.6,282.1c-3.5,6.2-3.5,13.8 0.1,19.9 3.6,6.2 10.2,9.9 17.3,9.9H363.1c7.1,0 13.7,-3.8 17.3,-10 3.6,-6.2 3.6,-13.8 0,-20l-30.2,-52.5zm-196.9,54 8,-23.5h60.5l8,23.5h-76.5z"></path></svg></button><button title="Tablet (768)" data-width='768'><svg viewBox="0 0 317 412" height="24" width="18" class="icon"><path d="M 316.5,380 V 32 c 0,-17.7 -14.3,-32 -32,-3