@import 'octicons.css';

body {

font: 13px/1.4em "Helvetica Neue", arial,freesans,clean,sans-serif;

background-color: #fff;

color: #393939;

}

p {

margin: 1em 0;

}

h1 {

font-size: 20px;

padding: .5em 0;

margin: 2em 0 1em;

font-weight: normal;

}

.content h1 {

font-weight: 300;

-webkit-backface-visibility: hidden;

font-size: 36px;

margin: 0em 0 0.5em;

position: relative;

}

.header-anchor {

position: absolute;

left: -32px;

top: 0;

opacity: 0;

padding: 0 5px 0 10px;

height: 100%;

width: 20px;

font: normal normal 16px/20px octicons;

color: #000;

-webkit-font-smoothing: antialiased;

color: #333;

-webkit-transition: opacity 0.3s ease-in-out 0s;

-moz-transition: opacity 0.3s ease-in-out 0s;

transition: opacity 0.3s ease-in-out 0s;

}

h1 .header-anchor {

line-height: 55px;

}

.content h1:hover .header-anchor, .content h2:hover .header-anchor, .content h3:hover .header-anchor, .content h4:hover .header-anchor, .header-anchor:hover {

opacity: 1;

text-decoration: none;

}

.header-anchor:before {

content:'\f05c';

}

h2 {

font-size: 22px;

color: #333;

margin: 2em auto 1em;

position: relative;

font-weight: 300;

}

.library-list h1 {

margin: 20px 0 20px;

padding: 20px 0 20px;

}

.library-list h2 {

margin-bottom: -17px;

margin-left: 0px;

font-size: 16px;

max-width: 190px;

}

.library-list ul {

margin-bottom: 40px;

list-style: none;

}

.library-list ul li {

padding-left: 200px;

padding-right: 200px;

font-size: 14px;

}

.change h2, .sidebar-shell h2 {

margin: 1.2em 0 1em;

}

.change > .title {

line-height: 1.4em;

margin: 1.2em 0 0px;

padding-left: 0;

font-size: 30px;

}

h2 span.step {

color: #666;

}

h3 {

font-size: 14px;

color: #333;

margin: 1.5em 0 .5em;

position: relative;

}

h4 {

margin: 1em 0;

position: relative;

}

h5 {

font-size: 13px;

}

h6 {

font-size: 13px;

color: #666;

}

a {

color: #4183C4;

text-decoration: none;

}

a:active {

text-decoration:underline;

}

blockquote {

margin:0 -5px;

padding: 0px 20px;

}

dt {

font-weight: bold;

}

dd {

padding-left: 1em;

margin-bottom: 1em;

}

dd + dd {

margin-bottom: 0;

}

a img {

border: 0px;

}

.button, .button-secondary {

background-color: #297fc7;

color: #fff;

font-size: 16px;

padding: 15px;

border-radius: 5px;

}

.button:hover {

text-decoration: none;

background-color: #3088d0;

}

.button-secondary {

background-color: #738797;

font-size: 15px;

padding: 12px;

-webkit-backface-visibility: hidden;

}

.button-secondary:hover {

text-decoration: none;

background-color: #7e909e;

}

.rss-subscribe {

display: block;

padding: 15px 14px 16px 47px;

background: url(/images/feed-icon.png) 10px center no-repeat;

color: #444;

font-size: 13px;

text-decoration: none;

}

.rss-subscribe:hover {

background-color: #f4f4f7;

text-decoration: none;

}

#header-wrapper {

margin-bottom: 0;

clear: both;

height: 61px;

background: url(../images/header.png) 0 0 repeat-x;

}

#header {

margin: 0 auto;

max-width: 980px;

position: relative;

}

#header .logo {

float: left;

margin-top: 17px;

display: inline-block;

width: 186px;

height: 27px;

background: url(/images/logo_developer.png) 0 0 no-repeat;

text-indent: -999em;

}

#header .nav {

float: right;

font-weight: bold;

margin-top: 20px;

text-shadow: white 1px 1px 0px;

font-size: 14px;

}

#header .nav li {

display: inline-block;

margin: 0;

list-style-type: none;

line-height: 1.4em;

}

#header .nav a {

color: #515151;

outline: none;

text-decoration: none;

padding: 20px 11px 19px;

-webkit-transition: color 0.2s ease-in-out 0s;

-moz-transition: color 0.2s ease-in-out 0s;

transition: color 0.2s ease-in-out 0s;

}

.overview #header .nav-overview,

.api #header .nav-api,

.blog #header .nav-blog,

.developers #header .nav-developers {

color: #333;

border-bottom: 3px solid #c9c9c9;

}

#header .nav a:hover {

color: #327fc7;

}

#header .nav #search-container {

position: relative;

margin-left: 5px;

text-shadow: none;

}

#searchfield {

border: 1px solid #dddddd;

line-height: 20px;

height: 21px;

padding: 2px 5px 2px 20px;

display: inline-block;

margin-top: -4px;

width: 51px;

border-radius: 3px;

background: url(/images/search.png) 5px center no-repeat #fff;

-webkit-transition: width 0.3s ease-in-out 0s;

-moz-transition: width 0.3s ease-in-out 0s;

transition: width 0.3s ease-in-out 0s;

}

#searchfield::-ms-clear {

height: 0;

width: 0;

}

#searchfield:focus, #search-container.active #searchfield {

width: 120px;

}

#searchfield:focus + .search-placeholder, #search-container.active .search-placeholder {

opacity: 0;

}

.search-placeholder {

position: absolute;

cursor: text;

left: 22px;

top: 0px;

font-weight: normal;

font-size: 12px;

pointer-events: none;

color: #aaa;

line-height: 20px;

-webkit-transition: opacity 0.3s ease-in-out 0s;

-moz-appearance-transition: opacity 0.3s ease-in-out 0s;

transition: opacity 0.3s ease-in-out 0s;

}

.cancel-search {

position: absolute;

right: 4px;

top: 2px;

background: url(/images/cancel.png) 0 0 no-repeat;

width: 14px;

height: 14px;

display: none;

}

#search-container.active .cancel-search {

display: block;

}

#search-results {

position: absolute;

top: 30px;

right: 0px;

width: 260px;

background-color: #fff;

border-radius: 4px;

min-height: 40px;

z-index: 100;

overflow: hidden;

box-shadow: 0px 1px 3px rgba(0,0,0,0.4);

visibility: hidden;

opacity: 0;

}

#search-container.active #searchfield:focus ~ #search-results, #search-results:active, #search-results:focus, #search-results:hover {

visibility: visible;

opacity: 1;

-webkit-transition: opacity 0.3s ease-in-out 0s;

-moz-transition: opacity 0.3s ease-in-out 0s;

transition: opacity 0.3s ease-in-out 0s;

}

#search-results li {

display: block;

width: 100%;

border-bottom: 1px solid #f2f2f2;

}

#header #search-results .result a {

display: block;

text-shadow: none;

padding: 10px;

}

#search-results .placeholder {

text-align: center;

font-size: 12px;

font-weight: normal;

padding: 20px 0;

}

#search-results em {

font-weight: bold;

}

#search-results .result em {

display: block;

font-weight: normal;

font-style: normal;

line-height: 1em;

}

.result small {

font-size: 12px;

color: #5c5c5c;

line-height: 1em;

}

.result:hover, .result.selected {

background-color: #297fc7 !important;

}

.result:hover em, .result.selected em, .result:hover small, .result.selected small {

color: #fff !important;

}

#header #search-results li:last-child {

border-bottom: none;

}

.sub-nav {

max-width: 980px;

margin: 0 auto;

position: relative;

border-bottom: 1px solid #d8d8d8;

}

.sub-nav > h2, .sub-nav > h2 > a {

color: #333;

font-weight: normal;

font-size: 22px;

-webkit-backface-visibility: hidden;

margin: 50px 0 10px 0;

text-decoration: none;

}

.sub-nav > h2 > a {

z-index: 10;

position: relative;

}

.sub-nav ul {

list-style: none;

position: absolute;

right: 0;

bottom: 8px;

width: 100%;

text-align: right;

}

.sub-nav li {

display: inline-block;

}

.sub-nav li a {

color: #767676;

font-size: 14px;

margin-left: 16px;

padding: 4px 2px 8px;

}

.sub-nav li a:hover {

text-decoration: none;

color: #327fc7;

}

.sub-nav li:last-child a {

padding-right: 0;

}

.sub-nav li .active {

color: #222;

border-bottom: 2px solid #d8d8d8;

}

.wrapper {

max-width: 980px;

margin: 0 auto;

}

.wrapper:before, .wrapper:after {

content: " ";

}

.wrapper:after {

clear: both;

}

.wrapper.blog {

display: table;

}

.feature {

position: relative;

height: 420px;

}

.feature h1, .library-list .feature h1 {

font-weight: 300;

font-size: 42px;

line-height: 1.2em;

-webkit-backface-visibility: hidden;

padding: 80px 0 0 0;

margin: 0;

text-align: left;

}

.library-list .feature {

overflow: hidden;

border-bottom: 1px solid #ddd;

padding-bottom: 40px;

}

.feature .intro {

color: #666;

font-size: 18px;

line-height: 1.5em;

max-width: 400px;

}

.feature .button, .highlights .button-secondary {

display: inline-block;

}

.feature .electrocat {

position: absolute;

right: 0;

top: 45px;

}

.feature .rocketship {

position: absolute;

right: -50px;

top: 30px;

z-index: -1;

}

.feature .gundamcat {

position: absolute;

right: 0;

top: 50px;

}

.feature .library-links {

line-height: 40px;

margin-top: 25px;

}

.feature .library-links li {

padding: 0;

font-size: 22px;

}

.feature .library-links span {

width: 60px;

text-align: right;

padding-right: 10px;

display: inline-block;

}

.feature + .full-width-divider {

margin-top: -1px;

}

.full-width-divider {

width: 100%;

background: #f2f2f2;

border-top: 1px solid #ddd;

border-bottom: 1px solid #ddd;

overflow: hidden;

z-index: 1;

position: relative;

}

.octicon-mail-read:before {

content: "\f03c";

}

.octicon-code:before {

content: '\f05f';

}

.octicon-file-text:before {

content: '\f011'

}

.highlight-module {

list-style-type: none;

display: table-cell;

padding: 40px 14px 30px;

text-align: center;

margin-top: 10px;

font-size: 14px;

line-height: 1.5em;

}

.highlight-module:first-child {

padding-left: 0;

padding-right: 14px;

}

.highlight-module:last-child {

padding-left: 14px;

padding-right: 0;

}

.highlight-module .mega-octicon {

font-size: 70px;

width: 70px;

height: 70px;

}

.highlights h2 {

margin: 25px 0 15px;

font-size: 30px;

line-height: 1.2;

-webkit-backface-visibility: hidden;

}

a .mega-octicon {

color: #333;

}

.full-width-divider + #footer {

margin-top: -1px;

}

.sidebar-shell {

position: relative;

float: right;

margin: 20px 0 0;

width: 280px;

}

.sidebar-module {

border-radius: 4px;

overflow: hidden;

margin-bottom: 20px;

font-size: 12px;

border: 1px solid #ddd;

}

.sidebar-module ul {

margin: 0px;

}

.sidebar-module.notice {

background: #fafafb;

border: 1px solid #CACACA;

border-radius: 4px;

line-height: 1.5em;

}

.notice > p {

padding: 12px;

margin: 0;

}

.sidebar-module li {

list-style-type: none;

}

.sidebar-module ul li:last-child h3, .headlines li:last-child {

border-bottom: none;

}

.sidebar-module ul li:last-child ul li:first-child {

border-top: 1px solid #eee;

}

.sidebar-module ul h3, .headlines > li {

margin: 0px;

color: #666;

border-bottom: 1px solid #eee;

font-size: 14px;

}

.headlines > li > a {

color: #333;

display: block;

padding: 10px 10px;

text-decoration: none;

font-size: 15px;

font-weight: 300;

}

.headlines > li > a:hover {

color: #327fc7;

}

.headlines > li > a > .date {

font-weight: normal;

font-size: 12px;

color: #888;

}

.headlines li:hover {

background-color: #fdfdfd;

}

.sidebar-module h3 a {

padding-top: 8px;

padding-bottom: 8px;

padding-left: 10px;

color: #555;

text-decoration: none;

display: block;

}

.sidebar-module h3 a:hover {

text-decoration: none;

color: #327fc7;

background-color: #fdfdfd;

}

.sidebar-module ul ul li {

border-bottom: 1px solid #eee;

font-weight: bold;

color: #666;

background-color: #f9f9f9;

}

.sidebar-module ul li:last-child ul li:last-child {

border-bottom: none;

}

.sidebar-module .disable > a {

color: #333;

border-left: 2px solid #d8d8d8;

padding-left: 29px;

}

.sidebar-module ul ul li a {

padding: 6px 0px 6px 31px;

display: block;

text-decoration: none;

font-weight: normal;

}

.sidebar-module ul ul li a:hover {

background-color: #f2f2f2;

color: #327fc7;

}

.api-status {

text-align: center;

padding: 20px 0;

border-top: 1px solid #ddd;

font-size: 14px;

}

.api-status a {

color: #999;

background-position: center bottom;

background-repeat: no-repeat;

padding-bottom: 40px;

display: block;

}

.api-status .unknown {

background-image: url(/images/status-icon-unknown.png);

}

.api-status .good {

color: #227b41;

background-image: url(/images/status-icon-good.png);

}

.api-status .minor {

color: #ed8b3f;

background-image: url(/images/status-icon-minor.png);

}

.api-status .major {

color: #ad1a05;

background-image: url(/images/status-icon-major.png);

}

.api-status a:hover {

text-decoration: none;

color: #327fc7;

}

#footer {

position: relative;

bottom:0;

font-size:12px;

color: #636363;

margin: 0 auto;

max-width: 980px;

clear: both;

}

#footer a:hover {

text-decoration: underline;

}

#footer .mega-octicon {

color: #ccc;

font-size: 24px;

}

#footer .mega-octicon:hover {

color: #bbb;

text-decoration: none;

}

.lower_footer {

border-top: 1px solid #ddd;

padding: 30px 0;

}

.footer-cell {

display: table-cell;

text-align: center;

width: 10%;

vertical-align: middle;

}

.footer-cell:first-child {

text-align: left;

padding-left: 0;

}

.footer-cell:last-child {

text-align: right;

padding-right: 0;

}

.footer-cell:last-child li {

margin: 0 0 0 20px;

padding-right: 0;

}

.footer-cell li {

display: inline;

margin-right: 20px;

list-style: none;

}

#footer .wrapper {

border-top: 1px solid #ddd;

text-align: center;

padding: 20px 0;

}

.dev-program.feature {

height: 420px;

margin-top: -2px;

position: relative;

}

.dev-program.feature,

.dev-program-callout {

background: #160625;

}

.dev-program.feature .intro {

font-size: 20px;

line-height: 1.5em;

max-width: 500px;

}

.dev-program.feature h1 {

width: 600px;

}

.dev-program.feature .earth {

margin-top: -187px;

position: absolute;

right: 5%;

top: 50%;

z-index: 0;

}

.dev-program.feature .earth-short-loop {

display: none;

}

.dev-program.feature .wrapper {

position: relative;

z-index: 1;

}

.dev-program-callout .wrapper {

padding: 40px 0;

background: #160625 url(/images/callout-earth-static.png) no-repeat top right / 30%;

}

.dev-program.feature h1,

.dev-program-callout h2 {

color: #eee;

}

.dev-program.feature .intro,

.dev-program-callout p {

color: #a397ad;

}

.dev-program-callout h2 {

margin: 0;

}

.dev-program-callout p {

font-size: 16px;

margin: 10px 0 0;

}

#wrapper {

padding: 20px 0;

height: auto;

max-width: 980px;

margin: 0 auto;

}

#wrapper:after, #wrapper:before {

content: " ";

display: table;

}

#wrapper:after {

clear: both;

}

.content {

width: 630px;

position: relative;

float: left;

color: #393939;

z-index: 2;

font-size: 14px;

line-height: 1.5em;

}

.blog .content {

margin-bottom: 60px;

}

.content dt {

color: #666;

}

.content ol {

margin-left: 1.5em;

}

.content ul {

margin: 1.5em;

list-style-type: disc;

}

.content dd ul {

margin-top: 0;

}

.content li {

margin: 0.5em 0;

}

.content img {

max-width: 100%;

margin: 12px 0;

}

ol {

counter-reset: li;

list-style: none;

position: relative;

padding-bottom: 10px;

}

ol > li {

padding: 5px 0 5px 55px;

position: relative;

margin-bottom: 5px;

}

ol > li:before {

content: counter(li);

counter-increment: li;

position: absolute;

top: 0;

left: 0;

height: 100%;

width: 30px;

padding: 0 10px 0 0;

color: #999;

font-size: 22px;