| /* ### Reset ### */ |
| |
| html, body, div, span, object, |
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
| a, abbr, acronym, address, big, cite, code, |
| del, dfn, em, img, ins, kbd, q, s, samp, |
| small, strike, strong, sub, sup, tt, var, |
| dl, dt, dd, ol, ul, li, |
| fieldset, form, label, legend, |
| table, caption, tbody, tfoot, thead, tr, th, td, |
| article, aside, canvas, details, figcaption, figure, |
| footer, header, hgroup, menu, nav, section, summary, |
| time, mark, audio, video { |
| margin: 0; |
| padding: 0; |
| border: 0; |
| outline: 0; |
| font-size: 100%; |
| font: inherit; |
| vertical-align: baseline; |
| } |
| /* HTML5 display-role reset for older browsers */ |
| article, aside, details, figcaption, figure, |
| footer, header, hgroup, menu, nav, section { |
| display: block; |
| } |
| body { |
| line-height: 1; |
| } |
| ol, ul { |
| list-style: none; |
| } |
| blockquote, q { |
| quotes: none; |
| } |
| blockquote:before, blockquote:after, |
| q:before, q:after { |
| content: ''; |
| content: none; |
| } |
| |
| ins { |
| text-decoration: none; |
| } |
| del { |
| text-decoration: line-through; |
| } |
| |
| table { |
| border-collapse: collapse; |
| border-spacing: 0; |
| } |
| |
| ol li { |
| list-style-type: decimal; |
| } |
| |
| /* ### Common ### */ |
| |
| body { |
| box-sizing: border-box; |
| font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; |
| color: #333; |
| line-height: 1.4; |
| font-size: 14px; |
| } |
| |
| /* |
| |
| .octicon is optimized for 16px. |
| .mega-octicon is optimized for 32px but can be used larger. |
| |
| */ |
| .octicon { |
| font: normal normal 16px octicons; |
| line-height: 1; |
| display: inline-block; |
| text-decoration: none; |
| -webkit-font-smoothing: antialiased; |
| } |
| |
| .mega-octicon { |
| font: normal normal 48px octicons; |
| display: inline-block; |
| text-decoration: none; |
| -webkit-font-smoothing: antialiased; |
| color: #4183c4; |
| line-height: 100px; |
| } |
| |
| .wrapper { |
| position:relative; |
| width: 980px; |
| margin: 0 auto; |
| } |
| |
| strong { |
| font-weight: bold; |
| } |
| |
| a { |
| color: #4183C4; |
| text-decoration: none; |
| } |
| |
| a:hover { |
| color: #156cc2; |
| } |
| |
| p code { |
| background-color: #f9f9f9; |
| border: 1px solid #ddd; |
| border-radius: 4px; |
| padding: 2px 5px; |
| font-family: Consolas, "Liberation Mono", Courier, monospace; |
| } |
| |
| h2 { |
| text-align: center; |
| font-weight: 200; |
| line-height: 38px; |
| margin: 40px auto 0; |
| font-size: 21px; |
| max-width: 740px; |
| } |
| |
| .page h1.title { margin-top: 25px; } |
| |
| h4 { |
| font-size: 30px; |
| font-weight: 300; |
| line-height: 1em; |
| -webkit-backface-visibility: hidden; |
| } |
| |
| p { |
| margin: 15px 0 30px; |
| font-weight: 300; |
| line-height: 1.7em; |
| } |
| |
| em { |
| font-style: italic; |
| } |
| |
| textarea { |
| border: none; |
| background-color: transparent; |
| width: 400px; |
| outline: none; |
| } |
| |
| .logo { |
| display: block; |
| width: 169px; |
| margin: 0 auto; |
| } |
| |
| #hero-spot { |
| padding: 40px 0 0; |
| position: relative; |
| overflow: hidden; |
| background: #222; |
| } |
| |
| .help-link { |
| position: absolute; |
| top: 20px; |
| right: 20px; |
| background-color: #333; |
| color: #bbb; |
| padding: 5px 10px; |
| border-radius: 4px; |
| font-size: 12px; |
| font-weight: bold; |
| -webkit-backface-visibility: hidden; |
| -webkit-transition: color 0.2s ease-in-out 0s; |
| -moz-transition: color 0.2s ease-in-out 0s; |
| -o-transition: color 0.2s ease-in-out 0s; |
| transition: color 0.2s ease-in-out 0s; |
| } |
| |
| .help-link:hover { |
| color: #fff; |
| } |
| |
| h1 { |
| margin: 90px auto 0 auto; |
| font-size: 48px; |
| font-weight: 200; |
| line-height: 60px; |
| text-align: center; |
| max-width: 910px; |
| color: #333; |
| } |
| |
| #hero-spot h1 { |
| color: #fff; |
| -webkit-backface-visibility: hidden; |
| max-width: 830px; |
| margin-top: 50px; |
| font-size: 78px; |
| } |
| |
| .page #hero-spot img { margin-bottom: 25px; } |
| |
| #hero-spot h2 { |
| color: #a7a7a7; |
| -webkit-backface-visibility: hidden; |
| line-height: 1.5em; |
| max-width: none; |
| margin: 10px auto 60px; |
| font-size: 28px; |
| } |
| |
| #hero-spot h3 { |
| text-align: center; |
| color: #a7a7a7; |
| -webkit-backface-visibility: hidden; |
| line-height: 1.5em; |
| max-width: none; |
| margin: 10px auto 60px; |
| font-size: 18px; |
| } |
| |
| .hero-spot h2 > a { |
| color: #dcdcdc; |
| text-decoration: underline; |
| } |
| .hero-spot h2 > a:hover { |
| text-decoration: none; |
| } |
| |
| #slideshow { |
| margin: 30px auto 0; |
| position: relative; |
| } |
| |
| .slide { |
| margin: 0 auto; |
| max-width: 100%; |
| position: absolute; |
| left: 0; right: 0; bottom: 0; |
| opacity: 0; |
| z-index: 100; |
| -webkit-transition: opacity 0.6s ease-in-out 0s; |
| -moz-transition: opacity 0.6s ease-in-out 0s; |
| -o-transition: opacity 0.6s ease-in-out 0s; |
| transition: opacity 0.6s ease-in-out 0s; |
| } |
| |
| .slide:first-child { |
| position: relative; |
| display: block; |
| } |
| |
| .slide.active { |
| opacity: 1; |
| z-index: 90; |
| } |
| |
| .shadow-overlay { |
| position: absolute; |
| bottom: 0; |
| width: 100%; |
| height: 9px; |
| background: url(../images/section-shadow.png) repeat-x; |
| } |
| |
| #tutorial { |
| text-align: center; |
| background-color: #f5f5f5; |
| padding-bottom: 20px; |
| overflow: hidden; |
| } |
| |
| .tabs { |
| display: inline-block; |
| margin: 45px auto 0; |
| font-size: 0; |
| } |
| |
| .question .tabs { |
| margin: 30px auto 0; |
| } |
| |
| .tabs li { |
| display: inline-block; |
| margin: 0; |
| font-size: 15px; |
| } |
| |
| .tabs li:first-child a { |
| border-top-left-radius: 5px; |
| border-bottom-left-radius: 5px; |
| } |
| |
| .tabs li:last-child a { |
| border-top-right-radius: 5px; |
| border-bottom-right-radius: 5px; |
| } |
| |
| .tabs li:nth-child(even) a { |
| margin: 0 -1px; |
| } |
| |
| .tabs a { |
| color: #323232; |
| background-color: #fff; |
| padding: 10px 20px; |
| display: inline-block; |
| border: 1px solid #dddddd; |
| position: relative; |
| line-height: 1em; |
| -webkit-transition: all 0.2s ease-in-out 0s; |
| -moz-transition: all 0.2s ease-in-out 0s; |
| -o-transition: all 0.2s ease-in-out 0s; |
| transition: all 0.2s ease-in-out 0s; |
| } |
| |
| .question .tabs a { |
| background-color: #fcfcfc; |
| } |
| |
| .tabs a:hover { |
| color: #327fc7; |
| border-color: #327fc7; |
| z-index: 10; |
| } |
| |
| .tabs a.selected { |
| z-index: 20; |
| color: #fff; |
| background-color: #327fc7; |
| border-color: #327fc7; |
| outline: none; |
| } |
| |
| /* Tutorials */ |
| |
| .tutorial-list { |
| margin-top: 90px; |
| counter-reset: tutorialstep; |
| display: none; |
| } |
| |
| .tutorial-list.active { |
| display: block; |
| } |
| |
| .tutorial-list > li { |
| position: relative; |
| background-color: #fff; |
| margin: 0 0 70px 0px; |
| padding: 40px 0 60px; |
| font-size: 18px; |
| border: 1px solid #ddd; |
| border-radius: 5px; |
| text-align: center; |
| z-index: 1; |
| |
| -webkit-transition: all 0.6s ease-in-out 0s; |
| -moz-transition: all 0.6s ease-in-out 0s; |
| -o-transition: all 0.6s ease-in-out 0s; |
| transition: all 0.6s ease-in-out 0s; |
| } |
| |
| .tutorial-list .image-right { |
| padding-right: 440px; |
| } |
| |
| .tutorial-list .image-right p { |
| margin-left: 30px; |
| margin-right: 30px; |
| } |
| |
| #create-repo-step { |
| background: #fff url(/images/user-repo@2x.png) right 0 no-repeat; |
| background-size: 446px 344px; |
| } |
| |
| #setup-in-desktop { |
| background: #fff url(/images/setup-in-desktop@2x.png) no-repeat right 0; |
| background-size: 443px 303px; |
| } |
| |
| .tutorial-list .animate-in { |
| -webkit-transform: translateY(40px); |
| -moz-transform: translateY(40px); |
| -o-transform: translateY(40px); |
| -ms-transform: translateY(40px); |
| transform: translateY(40px); |
| opacity: 0; |
| } |
| |
| .tutorial-list p { |
| margin: 30px 120px 30px; |
| } |
| |
| .tutorial-list p:last-child { |
| margin-bottom: 0; |
| } |
| |
| .article-left p { |
| margin-left: 0; |
| margin-right: 0; |
| } |
| |
| .tutorial-list .right-image p, .tutorial-list .right-image h4 { |
| margin-left: 30px; |
| } |
| |
| .tutorial-list li .full-size { |
| margin-bottom: -66px; |
| max-width: 90%; |
| } |
| |
| .tutorial-list .hidden { |
| display: none; |
| } |
| |
| .tutorial-list .question { |
| text-align: center; |
| } |
| |
| .windows-download { |
| color: #fff; |
| display: inline-block; |
| font-size: 18px; |
| margin: 0 0 50px; |
| background-color: #71bc22; |
| padding: 10px 14px; |
| line-height: 27px; |
| font-family: "Segoe UI", "Segoe WP", "Helvetica Neue", "Lucida Grande", sans-serif; |
| font-weight: 300; |
| -webkit-backface-visibility: hidden; |
| } |
| |
| .windows-download:hover { |
| color: #fff; |
| background-color: #62b30e; |
| } |
| |
| .windows-download .icon { |
| background: url('../images/download@2x.png') no-repeat center; |
| background-size: 21px 21px; |
| height: 21px; |
| width: 21px; |
| margin: 0 9px -4px 0; |
| display: inline-block; |
| } |
| |
| .mac-download { |
| display:inline-block; |
| text-decoration:none; |
| text-shadow:0 -1px 0 rgba(0,0,0,0.3); |
| background-color:#3582df; |
| background-image: -moz-linear-gradient(#45b3f3 0%, #3582df 100%); |
| background-image: -webkit-linear-gradient(#45b3f3 0%, #3582df 100%); |
| -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#45b3f3', endColorstr='#3582df')"; |
| border-radius:4px; |
| box-shadow:0 1px 2px rgba(0,0,0,0.3); |
| margin: 0 0 50px; |
| padding: 12px 20px 14px 15px; |
| font-size: 17px; |
| -webkit-backface-visibility: hidden; |
| font-weight: normal; |
| color: #fff; |
| } |
| |
| .mac-download::before { |
| content: ""; |
| width: 23px; |
| height: 24px; |
| display: inline-block; |
| background-image: url(../images/download-arrow@2x.png); |
| background-size: 23px 24px; |
| margin-right: 11px; |
| margin-bottom: -7px; |
| } |
| |
| .mac-download:hover:before { |
| opacity: 0.8; |
| } |
| |
| .mac-download:hover { |
| color: #fff; |
| background-image: -moz-linear-gradient(#56bdf9 0%, #358af0 100%); |
| background-image: -webkit-linear-gradient(#56bdf9 0%, #358af0 100%); |
| border-radius:4px; |
| } |
| |
| .tutorial-list > li:last-child:before { |
| content: ""; |
| position: absolute; |
| left: -55px; |
| top: 0; |
| height: 105%; |
| width: 10px; |
| background-color: #f5f5f5; |
| } |
| |
| .tutorial-list .right { |
| margin: -45px 0 0 30px; |
| border-top-right-radius: 5px; |
| border-bottom-right-radius: 5px; |
| } |
| |
| .details { |
| font-size: 14px; |
| font-weight: 400; |
| } |
| |
| .tutorial-list .question:after { |
| content: "?"; |
| } |
| |
| .tutorial-list > li:not(.question):after { |
| counter-increment: tutorialstep; |
| content: counter(tutorialstep); |
| } |
| |
| .tutorial-list > li:after { |
| width: 58px; |
| height: 58px; |
| line-height: 58px; |
| background-color: #327fc7; |
| border-radius: 200px; |
| font-size: 30px; |
| font-weight: 300; |
| color: #fff; |
| position: absolute; |
| left: -15px; |
| top: -15px; |
| text-align: center; |
| -webkit-backface-visibility: hidden; |
| z-index: 100; |
| } |
| |
| .hero-octicon { |
| width: 100px; |
| height: 100px; |
| border-radius: 50px; |
| text-align: center; |
| border: solid 1px #e5e5e5; |
| margin: 0 auto 15px; |
| display: block; |
| -webkit-transition: all 0.2s ease-in-out 0s; |
| -moz-transition: all 0.2s ease-in-out 0s; |
| -o-transition: all 0.2s ease-in-out 0s; |
| transition: all 0.2s ease-in-out 0s; |
| } |
| |
| .hero-octicon:hover { |
| -webkit-transform: scale(1.1); |
| -moz-transform: scale(1.1); |
| -o-transform: scale(1.1); |
| -ms-transform: scale(1.1); |
| transform: scale(1.1); |
| } |
| |
| .next-steps .hero-octicon { |
| margin-bottom: 35px; |
| } |
| |
| .terminal { |
| width: 700px; |
| margin: 30px auto 0; |
| } |
| |
| .header { |
| height: 25px; |
| display: block; |
| background: -moz-linear-gradient(top, #f7f7f7 0%, #cfcfcf 5%, #aaaaaa 100%); |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(5%,#cfcfcf), color-stop(100%,#aaaaaa)); |
| background: -webkit-linear-gradient(top, #f7f7f7 0%,#cfcfcf 5%,#aaaaaa 100%); |
| background: -o-linear-gradient(top, #f7f7f7 0%,#cfcfcf 5%,#aaaaaa 100%); |
| background: -ms-linear-gradient(top, #f7f7f7 0%,#cfcfcf 5%,#aaaaaa 100%); |
| background: linear-gradient(top, #f7f7f7 0%,#cfcfcf 5%,#aaaaaa 100%); |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#aaaaaa',GradientType=0 ); |
| border: 1px solid #9c9c9c; |
| border-bottom-color: #111; |
| border-top-left-radius: 7px; |
| border-top-right-radius: 7px; |
| text-align: center; |
| font-size: 13px; |
| line-height: 25px; |
| text-shadow: 0 1px 0 rgba(255,255,255,0.6); |
| color: #444; |
| } |
| |
| .shell { |
| font-family: Consolas, "Liberation Mono", Courier, monospace; |
| font-size: 17px; |
| line-height: 28px; |
| color: #eeeb82; |
| background-color: #3d3d3d; |
| overflow: hidden; |
| padding: 20px; |
| margin: 0; |
| border-bottom-left-radius: 7px; |
| border-bottom-right-radius: 7px; |
| text-align: left; |
| display: block; |
| } |
| |
| .tutorial-list .shell p { |
| margin: 0; |
| font-weight: bold; |
| -webkit-backface-visibility: hidden; |
| } |
| |
| .path { |
| color: #71cfee; |
| -webkit-touch-callout: none; |
| -webkit-user-select: none; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| user-select: none; |
| padding-right: 0.6em; |
| } |
| |
| .prompt { |
| color: #d74d52; |
| -webkit-touch-callout: none; |
| -webkit-user-select: none; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| user-select: none; |
| padding-right: 0.6em; |
| } |
| |
| /* end Tutorials */ |
| |
| .contentfh1 { |
| margin-top: 80px; |
| color: #777; |
| } |
| |
| /* Next steps */ |
| |
| .next-steps { |
| margin-top: 80px; |
| color: #777; |
| } |
| |
| .next-steps p { |
| font-weight: 400; |
| } |
| |
| .next-steps li { |
| display: table-cell; |
| text-align: center; |
| padding: 0 20px 0; |
| |
| -webkit-transition: opacity 0.8s ease-in-out 0s; |
| -moz-transition: opacity 0.8s ease-in-out 0s; |
| -ms-transition: opacity 0.8s ease-in-out 0s; |
| -o-transition: opacity 0.8s ease-in-out 0s; |
| transition: opacity 0.8s ease-in-out 0s; |
| } |
| |
| .next-steps .animate-in { |
| opacity: 0; |
| } |
| |
| .next-steps li:first-child, .next-steps li:last-child { |
| padding-left: 0; |
| padding-right: 0; |
| } |
| |
| .next-steps .custom-urls { |
| -webkit-transition-delay: 0.15s; |
| -moz-transition-delay: 0.15s; |
| -ms-transition-delay: 0.15s; |
| -o-transition-delay: 0.15s; |
| transition-delay: 0.15s; |
| } |
| |
| .next-steps .guides { |
| -webkit-transition-delay: 0.3s; |
| -moz-transition-delay: 0.3s; |
| -o-transition-delay: 0.3s; |
| transition-delay: 0.3s; |
| } |
| |
| /* end next steps */ |
| |
| footer { |
| position: relative; |
| font-size: 12px; |
| line-height: 1.5; |
| color: #777; |
| clear: both; |
| width: 980px; |
| padding: 40px 0; |
| margin: 70px auto 0 auto; |
| border-top: 1px solid #eee; |
| } |
| |
| .site-footer-links li { |
| display: inline-block; |
| margin-left: 10px; |
| } |
| |
| .site-footer-links li:first-child { |
| margin-left: 0; |
| } |
| |
| footer .octicon-mark-github { |
| position: absolute; |
| top: 38px; |
| left: 50%; |
| color: #ccc; |
| height: 24px; |
| width: 24px; |
| margin-left: -12px; |
| font-size: 24px; |
| line-height: 1; |
| } |
| |
| footer .right { |
| float: right; |
| margin: 0; |
| } |
| |
| .left { |
| float: left; |
| } |
| |
| .article-left { |
| width: 500px; |
| margin-left: 20px; |
| } |
| |
| /* @group Octicons -------------------- */ |
| |
| @font-face { |
| font-family: 'octicons'; |
| src: url('octicons.eot'); |
| src: url('octicons.eot#iefix') format('embedded-opentype'), |
| url('octicons.woff') format('woff'), |
| url('octicons.ttf') format('truetype'), |
| url('octicons.svg#octicons') format('svg'); |
| font-weight: normal; |
| font-style: normal; |
| } |
| |
| .octicon-book:before { content: '\f007'} /* */ |
| .octicon-check:before { content: '\f03a'} /* */ |
| .octicon-link:before { content: '\f05c'} /* */ |
| .octicon-mark-github:before { content: '\f00a'} /* */ |
| .octicon-pencil:before { content: '\f058'} /* */ |
| .octicon-tools:before { content: '\f031'} /* */ |
| .octicon-key:before { content: '\f049'} /* */ |
| |
| /* @end Octicons */ |
| |
| .page .content { padding-left: 10%; padding-right: 10%; } |
| .versions { font-size: 1.1em; } |
| .versions table { |
| margin-left: auto; |
| margin-right: auto; |
| margin-top: 25px; |
| font-size: 1.1em; |
| } |
| .versions table tr th { font-weight: bold; text-align: left; } |
| .versions table tr td { padding: 5px 20px 5px 0; } |