@font-face {
font-family: 'RTR-sans';
src: url('../fonts/RTRsans/RTRsans-light.eot'); /* IE9 Compat Modes */
src: url('../fonts/RTRsans/RTRsans-light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/RTRsans/RTRsans-light.woff') format('woff'), /* Modern Browsers */
url('../fonts/RTRsans/RTRsans-light.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/RTRsans/RTRsans-light.svg#c28c03afd387a798452c838546d2621a') format('svg'); /* Legacy iOS */
font-style: normal;
font-weight: 250;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased; }
@font-face {
font-family: 'RTR-sans';
src: url('../fonts/RTRsans/RTRsans-lightitalic.eot'); /* IE9 Compat Modes */
src: url('../fonts/RTRsans/RTRsans-lightitalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/RTRsans/RTRsans-lightitalic.woff') format('woff'), /* Modern Browsers */
url('../fonts/RTRsans/RTRsans-lightitalic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/RTRsans/RTRsans-lightitalic.svg#c28c03afd387a798452c838546d2621a') format('svg'); /* Legacy iOS */
font-style: italic;
font-weight: 250;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased; }
@font-face {
font-family: 'RTR-sans';
src: url('../fonts/RTRsans/RTRsans-regular.eot'); /* IE9 Compat Modes */
src: url('../fonts/RTRsans/RTRsans-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/RTRsans/RTRsans-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/RTRsans/RTRsans-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/RTRsans/RTRsans-regular.svg#c28c03afd387a798452c838546d2621a') format('svg'); /* Legacy iOS */
font-style: normal;
font-weight: 400;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased; }
@font-face {
font-family: 'RTR-sans';
src: url('../fonts/RTRsans/RTRsans-regularitalic.eot'); /* IE9 Compat Modes */
src: url('../fonts/RTRsans/RTRsans-regularitalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/RTRsans/RTRsans-regularitalic.woff') format('woff'), /* Modern Browsers */
url('../fonts/RTRsans/RTRsans-regularitalic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/RTRsans/RTRsans-regularitalic.svg#c28c03afd387a798452c838546d2621a') format('svg'); /* Legacy iOS */
font-style: italic;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased; }
@font-face {
font-family: 'RTR-sans';
src: url('../fonts/RTRsans/RTRsans-bold.eot'); /* IE9 Compat Modes */
src: url('../fonts/RTRsans/RTRsans-bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/RTRsans/RTRsans-bold.woff') format('woff'), /* Modern Browsers */
url('../fonts/RTRsans/RTRsans-bold.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/RTRsans/RTRsans-bold.svg#c28c03afd387a798452c838546d2621a') format('svg'); /* Legacy iOS */
font-style: normal;
font-weight: 700;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased; }
@font-face {
font-family: 'RTR-sans';
src: url('../fonts/RTRsans/RTRsans-bolditalic.eot'); /* IE9 Compat Modes */
src: url('../fonts/RTRsans/RTRsans-bolditalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/RTRsans/RTRsans-bolditalic.woff') format('woff'), /* Modern Browsers */
url('../fonts/RTRsans/RTRsans-bolditalic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/RTRsans/RTRsans-bolditalic.svg#c28c03afd387a798452c838546d2621a') format('svg'); /* Legacy iOS */
font-style: italic;
font-weight: 700;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased; }
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
html {
width: 100%;
border-top: 6px solid #f5aa00;
font-size: 100%; }
body {
font-size: 96%; }
body {
background: white;
color: #666;
padding: 0;
margin: 0;
font-family: 'RTR-sans', sans-serif;
font-weight: normal;
font-style: normal;
line-height: 1.125;
position: relative;
cursor: default;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased; }
a:hover {
cursor: pointer; }
img,
object,
embed {
max-width: 100%;
height: auto; }
object,
embed {
height: 100%; }
.left {
float: left !important; }
.right {
float: right !important; }
img {
display: inline-block;
vertical-align: middle;
-ms-interpolation-mode: bicubic; }
.clearfix {
*zoom: 1; }
.clearfix:before, .clearfix:after {
content: " ";
display: table; }
.clearfix:after {
clear: both; }
.hide {
display: none; }
.visuallyhidden, .screen-reader-text {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active, .screen-reader-text.focusable:active,
.visuallyhidden.focusable:focus, .screen-reader-text.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto; }
.wrap {
display: block;
position: relative;
margin: 0 auto;
padding: 0 10px;
min-width: 320px;
max-width: 800px; }
header {
background: #fff;
padding-bottom: 1em; }
footer {
min-height: 4em;
margin-top: 5em;
padding: .75em 0;
background: #555;
color: #999; }
.hero .wrap,
.callout-panels .wrap,
.news .wrap { padding: 0; }
h1, h2, h3 {
margin: 0;
color: #bbb;
font-weight: 200; }
h4 {
margin-bottom: 0; }
a {
text-decoration: none;
color: #f5aa00;
-webkit-transition: color .2s ease,
background .2s ease;
-moz-transition: color .2s ease,
background .2s ease;
-o-transition: color .2s ease,
background .2s ease;
-ms-transition: color .2s ease,
background .2s ease;
transition: color .2s ease,
background .2s ease; }
a:hover, a:focus {
color: #fa580d; }
a:active {
color: #dc002a; }
.button {
display: block;
margin: .75em 0;
padding: .4em 1em .45em;
background: #f5aa00;
text-align: center;
color: #fff !important;
font-size: 1.25em;
font-weight: bold;
-webkit-transition: color .2s ease,
background .2s ease;
-moz-transition: color .2s ease,
background .2s ease;
-o-transition: color .2s ease,
background .2s ease;
-ms-transition: color .2s ease,
background .2s ease;
transition: color .2s ease,
background .2s ease; }
.button.button-small {
font-size: 1em;
width: auto; }
.button {
background: #f5aa00; }
.button.lighter {
background: #ffdd3d; }
.button.darker {
background: #fc7113; }
.button:hover, .button:focus {
background: #fa580d; }
.button:active {
background: #dc002a; }
.button.download, .button.contribute-button { margin: .75em 0 0; }
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0; }
nav ul, nav li {
display: inline;
margin: 0;
padding: 0;
list-style: none; }
.nobr {
white-space: nowrap; }
.nobr-wide { white-space: normal; }
.width-half { width: 50%; }
.clear-both {
clear: both !important; }
pre {
clear: both;
padding: .75em 1em 0;
color: #222;
background: lightyellow; }
pre span { color: #999; }
code {
margin: 0 -.125em;
padding: 0 .125em;
background: lightyellow; }
.stackicons-logo {
margin-top: .75em;
font-size: 136%;}
.nav-top {
position: absolute;
top: 0;
margin-top: 1.125em; }
.nav-top a {
margin: -.5em -.27em 0; }
.nav-top .st-icon-email {
/* more spacing */
margin: -.5em -.1em 0 }
.mynav {
float: right;
/* offset button padding */
padding-right: .214em;
font-size: 115%;
text-align: right; }
.mynav a {
margin-left: -.15em;
margin-bottom: .125em; }
.nav-list a { color: #999;
font-family: 'Helvetica', sans-serif;
font-weight: 200; }
.nav-list a:hover, .nav-list a:focus { color: #666; }
.nav-list a:active { color: #222; }
.nav-panel { white-space: nowrap; }
.nav-panel a {
display: block;
/* to clear these floats we'll need to add
the clear: property to the next element.
We can't use methods that rely on adding
pseudo elements; it will disrupt the icon */
float: left;
border-right: 2px solid #eee;
border-bottom: 2px solid #ddd;
margin: 0 0 .5em;
padding: .25em;
padding-bottom: .3em;
background: #fafafa; }
.nav-panel a:hover, .nav-panel a:focus {
border-right: 2px solid #e0e0e0;
border-bottom: 2px solid #d0d0d0;
background: #fefefe; }
.nav-panel a:active {
border-left: 1px solid #e0e0e0;
border-top: 1px solid #d0d0d0;
border-right: 1px solid #fafafa;
border-bottom: 1px solid #fafafa;
background: #efefef; }
.nav-panel a:before {
text-shadow: 0px -1px 1px rgba(255,255,255,0.75), 0px 1px 1px rgba(0,0,0,0.35); }
.panel {
margin: 2em 0;
padding: .75em 2em 1.125em 1.5em;
background: #fafafa;
border: 1px solid #eee;
border-left: 3px solid #f5aa00; }
.st-sample dd {
font-size: 85%;
margin-left: 2.5em;
color: #999; }
.st-sample span {
position: relative;
top: .4em;
font-family: 'Stackicons-Social';
font-style: normal !important;
font-weight: 400 !important;
font-size: 150%;
margin-right: .25em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
speak: none; }
.st-demo {
margin: -.125em 0 0 -.18em;
font-family: 'Stackicons-Social';
font-style: normal !important;
font-weight: 400 !important;
font-size: 350%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
speak: none; }
.st-demo .st-icon {
margin: -.25em 0 0 -.5em;
font-size: 125%; }
.st-demo b {
position:relative;
top: -.5em;
left: -.75em;
font-size: 50%;
color: #ffd200;
font-family: 'Stackicons-Social', sans-serif; }
.dribbble-1 {
color: rgb(240, 119, 160);
/* to show overlapping "multi-color" elements */
margin-left: 0; }
.dribbble-2 {
color: rgb(250, 156, 190);
margin-left: -.75em; }
.dribbble-3 {
color: rgb(197, 55, 109);
margin-left: -.75em; }
.dribbble-4 {
color: rgb(204, 204, 204);
color: rgba(0, 0, 0, 0.198);
margin-left: -.85em; }
.github-1 {
color: rgb(21, 21, 21);
margin-left: 0em; }
.github-2 { color: rgb(243, 202, 178);
margin-left: -.65em; }
.github-3 {
color: rgb(177, 66, 58);
margin-left: -.7em; }
.github-4 {
color: rgb(156, 230, 254);
color: rgba(131, 224, 254, 0.8);
margin-left: -.9em; }
.icons-panel1 { margin: -.25em 0 .75em;}
/* you can override with a single-color in CSS */
.icons-panel1 a:before { color: #fabe00 !important; }
.icons-panel1 a:hover:before,
.icons-panel1 a:focus:before { color: #fff !important; }
.icons-panel1 a:active:before { color: #ffdd3d !important; }
.hero {
margin: 0;
background: #f4f4f4; }
.hero-icons {
width: 100%;
font-size: 300%;
min-width: 320px;
text-align: center; }
.hero-icons .st-shape-icon {
margin: 0 -.25em; }
.twitter-row {
font-size: 38%; }
.twitter-row a:before {
text-shadow: 0px 2px 3px #ccc !important;
text-shadow: 0px 2px 3px rgba(0,0,0,.25) !important; }
.twitter-row a.st-icon-only:after {
text-shadow: 0px 2px 3px #ccc !important;
text-shadow: 0px 2px 3px rgba(0,0,0,.2) !important; }
.intro {
padding: 0;
background: #555;
color: #fff; }
.intro p {
padding: 1em .75em 0 1em;
font-size: 96%;}
.button.github {
display: none; }
.callout-panels {
font-size: 96%;
line-height: 1.25; }
.callout-panels h2 {
padding-top: .125em;
color: #fff;
font-size: 1.75em; }
.callout-panels p {
margin-top: .75em;}
.callout-panels a {
font-weight: bold;
color: #fff;
color: rgba(255,255,255,.85); }
.callout-panels a:hover {
color: #fff; }
.callout-panels .st-icon-codepen:before {
color: #fff;
font-size: 125%;
top: -.08em;
left: 0; }
.callout-panel-group {
display: table;
width: 100%; }
.callout-panel {
padding: .75em 1em .5em;
background: #fc7113;
color: #fff; }
.callout-panel.panel2 {
background: #ff8b19; }
.callout-panel.panel3 {
background: #f5aa00; }
.callout-panel.panel4 {
background: #f9bb00;
padding-bottom: 1em}
.callout-panels small {
display: block;
margin-top: 1em;
font-size: 81.25%;
color: #402f00;
color: rgba(0,0,0,.75); }
.callout-panels small a {
color: #402f00;
color: rgba(0,0,0,.75); }
.callout-panels small a:hover,
.callout-panels small a:focus {
color: #fa580d; }
.button-contribute {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: .75em auto 0; }
.news {
min-height: 3em;
font-size: 85%; }
.news h2 { margin: 0;
padding: 9px 0 3px;
color: #999;
font-size: 18px; }
.news-content {
padding: .5em 1.12em 0; }
p.lede { margin-top: 0; }
.signup {
padding: 0 1.12em; }
#mc_embed_signup {margin: 0; padding: 0;}
#mc_embed_signup input {border:1px solid #999; -webkit-appearance:none;}
#mc_embed_signup input:focus {border-color:#333;}
#mc_embed_signup .button { position: relative; top: -33px; width: 40%; right: -60%; margin: 0; background-color: #f5aa00; border: 0 none; border-radius:0; color: #fff; cursor: pointer; display: block; font-size:16px; height: 32px; line-height: 32px; margin: 0; padding:0; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; }
#mc_embed_signup .button:hover, #mc_embed_signup .button:focus {background-color:#fa580d;}
#mc_embed_signup .button:active {background-color:#dc002a;}
#mc_embed_signup .small-meta {font-size: 11px;}
#mc_embed_signup .clear {clear:none; display:inline;}
#mc_embed_signup label {display:block; margin: 0; padding: 15px 0 3px;font-size: 18px; color: #999;}
#mc_embed_signup input.email {display:block; padding:8px 41% 8px 0; margin:0; text-indent:5px; width:100%; min-width:130px; border-radius: 0 !important;}
/* #mc_embed_signup input.button {display:block; width:50%; margin:0 0 10px 0; min-width:90px;} */
#mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%;margin: 0 5%; clear: both;}
#mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
#mc_embed_signup #mce-error-response {display:none;}
#mc_embed_signup #mce-success-response {color:#529214; display:none;}
#mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}
.font-sample {
margin: 1.5em auto .75em;
padding: 0;
border: 1px solid #bbb;}
.font-sample h2 {
text-align: center;
padding: .135em 0 .165em;
color: #fff;
background: #bbb; }
.stackicons-font-sample {
padding: 0 1.4em 0 1.1em;;
font-size: 125%;
text-align: center; }
.control-font {
margin-bottom: 1em;
padding: 0;
background: #f4f4f4;
font-size: 85%; }
.toggle-color {
float: right;
padding: 0 1em;
height: 2.125em;
line-height: 2.125em;
text-align: right;
-webkit-transition: color .2s ease,
background .2s ease;
-moz-transition: color .2s ease,
background .2s ease;
-o-transition: color .2s ease,
background .2s ease;
-ms-transition: color .2s ease,
background .2s ease;
transition: color .2s ease,
background .2s ease;
color: #bbb; }
.toggle-color:hover, .toggle-color:focus {
color: #555;
background: #eaeaea; }
.toggle-color:active,
.toggle-color.active {
color: #fa580d; }
.toggle-color:after {
content: " off"; }
.toggle-color.active:after {
content: " on"; }
.control-shape {
padding: 0 0 0 .5em; }
.control-shape a {
float: left;
padding: 0 .5em;
height: 2.125em;
line-height: 2.125em; }
.control-shape a:hover, .control-shape a:focus {
background: #eaeaea; }
.control-shape a:active, .control-shape a.active {
color: #fa580d; }
.toggle-ssmin {
display: block;
margin-top: .5em;
padding: 0 1em;
height: 2em;
line-height: 2em;
text-align: right;
font-size: 85%;
color: #bbb; }
.toggle-ssmin.active {
color: #f5aa00; }
.toggle-ssmin:after {
content: "-Minimal*"; }
.toggle-ssmin.active:after {
content: ""; }
.font-sample-name.active:after {
content: "-Minimal"; }
.usage { margin-top: 1.5em; }
.copyright {
float: left;
margin: .0 0 1em;
font-size: 80%; }
.copyright p {margin: 0; }
.link-color { color: #f5aa00; }
footer a, footer .link-color { opacity: .85; }
footer a:hover, footer a:focus, footer a:active {
opacity: 1;
color: #ffd200; }
@media only screen
and (min-width : 480px) {
body { font-size: 100%;}
.stackicons-logo {
margin-top: .65em;
font-size: 150%; }
.intro {
padding: 0 1em 1em; }
.intro p {
padding: 1em .75em 0 1em;
font-size: 100%;}
.button.download {
width: 10.5em;
margin: 0 auto;
font-size: 1.1em; }
#mc_embed_signup .button { top: -34px; height: 33px; line-height: 33px; }
.callout-panel {
display: table-cell;
width: 50%; }
.callout-panels h2 {
font-size: 1.6em; }
.panel4 { padding-bottom: 2.25em; }
.contribute-button {
position: absolute;
bottom: 0;
left: 50%;
right: 0;
margin-bottom: 0; }
.st-demo {
width: 35%;
white-space: nowrap; }
.left-wide { float: left; }
.indent-half { margin-left: 50%; }
.nav-top {
right: .4em; }
.icons-panel1 {
font-size: 85%; }
.news-content, .signup {
float: left;
width: 50%; }
.news-content { padding-bottom: .5em; }
.toggle-color { padding: 0 1.5em; }
.signup { padding: 0 1em; }
.button-small {
display: inline-block; }
}
@media only screen
and (min-width : 640px) {
.nobr-wide { white-space: nowrap; }
.stackicons-logo {
margin-top: .54em;
font-size: 166.67%; }
.nav-top {
font-size: 133%;
position: absolute;
margin-top: 0;
padding: 2.4em .5em 0; }
.hero-icons {
width: 50%;
padding-top: .375em;
padding-right: 4%;
float: right; }
.intro {
float: left;
width: 304px; }
.intro p {
padding: .5em .75em 0; }
.callout-panels h2 {
font-size: 1.75em; }
.button.download {
width: 100%;
margin: 0 auto;
font-size: 1.1em; }
.button.github {
/* unhide */
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
width: auto;
padding: .5em 0 .25em;
font-size: .75em; }
.icons-panel1 {
font-size: 100% }
.contribute-button {
left: 75%; }
.control-shape {
padding: 0 0 0 1em; }
.copyright { width: 60% }
}
@media only screen
and (min-width : 768px) {
.hero-icons {
width: 60%;
padding: 0 2% 0 0;
font-size: 360%; }
.callout-panel { padding: .75em 1.5em .25em 1.8em; }
.news-content { padding: .5em 2em; }
.signup { padding: 0 2em; }
}