html { -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; } body { -webkit-background-size: cover; background-size: cover; color: #444; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } #window { margin-left: auto; margin-right: auto; background: #343434; border-radius: 7px; overflow: hidden; width: 100%; height: 400px; } #topbar { width: 100%; height: 21px; font-size: 16px; font-family: "Myriad Pro", sans-serif; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25); -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); } #topbar ul li { float: left; padding: 0 10px; height: 21px; line-height: 24px; } #topbar ul li:first-child { font-size: 20px; line-height: 26px; margin-left: 5px; } #topbar ul li:nth-child(2) { font-family: "Myriad-Semi", sans-serif; } #topbar ul li:active { background-image: -webkit-gradient(linear, left bottom, left top, color-stop(1, #4a82ff), color-stop(0, #0052fc)); color: #fff; text-shadow: none; } #toolbar { width: 100%; height: 25px; background: #ccc; } #toolbar .top { float: left; width: 100%; height: 23px; } #toolbar .bottom { float: left; width: 100%; height: 30px; } #toolbar #lights { float: left; position: relative; top: 6px; left: 7px; } .light { float: left; width: 14px; height: 14px; border-radius: 14px; -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 0px 3px #000 inset; -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 0px 3px #000 inset; box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 0px 3px #000 inset; overflow: hidden; } #lights:hover .glyph { opacity: 1; cursor: default; } .light .shine { width: 4px; height: 3px; border-radius: 10px; background: -moz-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0))); background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); background: radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); } .light .glow { width: 14px; height: 8px; background-image: -webkit-gradient(radial, center bottom, 0, center center, 5, from(rgba(255, 255, 255, 0.75)), to(rgba(255, 255, 255, 0))); background: 0px 0px -moz-radial-gradient(bottom, cover, rgba(255, 255, 255, 0.70) 0%, rgba(255, 255, 255, 0) 80%); } .red { background: #f41b16; background: -moz-linear-gradient(top, #f41b16 0%, #fc7471 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f41b16), color-stop(100%, #fc7471)); background: -webkit-linear-gradient(top, #f41b16 0%, #fc7471 100%); background: -o-linear-gradient(top, #f41b16 0%, #fc7471 100%); background: -ms-linear-gradient(top, #f41b16 0%, #fc7471 100%); background: linear-gradient(top, #f41b16 0%, #fc7471 100%); } .red:active { background: #972f2e; background: -moz-linear-gradient(top, #972f2e 0%, #fc7471 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #972f2e), color-stop(100%, #fc7471)); background: -webkit-linear-gradient(top, #972f2e 0%, #fc7471 100%); background: -o-linear-gradient(top, #972f2e 0%, #fc7471 100%); background: -ms-linear-gradient(top, #972f2e 0%, #fc7471 100%); background: linear-gradient(top, #972f2e 0%, #fc7471 100%); } .red .shine { position: relative; top: -21px; left: 5px; } .red .glow { position: relative; top: -20px; } .red .glyph { position: relative; top: -5px; left: 3px; font-size: 14px; font-weight: 400; color: #9b3a36; z-index: 50; opacity: 0; } .yellow { background: #f4a316; background: -moz-linear-gradient(left, #f4a316 0%, #fcc371 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #f4a316), color-stop(100%, #fcc371)); background: -webkit-linear-gradient(left, #f4a316 0%, #fcc371 100%); background: -o-linear-gradient(left, #f4a316 0%, #fcc371 100%); background: -ms-linear-gradient(left, #f4a316 0%, #fcc371 100%); background: linear-gradient(left, #f4a316 0%, #fcc371 100%); margin: 0px 7px; } .yellow:active { background: #ae4f1e; background: -moz-linear-gradient(top, #ae4f1e 0%, #fcc371 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ae4f1e), color-stop(100%, #fcc371)); background: -webkit-linear-gradient(top, #ae4f1e 0%, #fcc371 100%); background: -o-linear-gradient(top, #ae4f1e 0%, #fcc371 100%); background: -ms-linear-gradient(top, #ae4f1e 0%, #fcc371 100%); background: linear-gradient(top, #ae4f1e 0%, #fcc371 100%); } .yellow .shine { position: relative; top: -21px; left: 5px; } .yellow .glow { position: relative; top: -20px; } .yellow .glyph { position: relative; top: -5px; left: 3px; font-size: 24px; color: #854322; z-index: 50; opacity: 0; -webkit-transform: scaleY(1.5) scaleX(1.3); } .green { background: #4cae2e; background: -moz-linear-gradient(top, #4cae2e 0%, #dafc71 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4cae2e), color-stop(100%, #dafc71)); background: -webkit-linear-gradient(top, #4cae2e 0%, #dafc71 100%); background: -o-linear-gradient(top, #4cae2e 0%, #dafc71 100%); background: -ms-linear-gradient(top, #4cae2e 0%, #dafc71 100%); background: linear-gradient(top, #4cae2e 0%, #dafc71 100%); } .green:active { background: #48752b; background: -moz-linear-gradient(top, #48752b 0%, #dafc71 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #48752b), color-stop(100%, #dafc71)); background: -webkit-linear-gradient(top, #48752b 0%, #dafc71 100%); background: -o-linear-gradient(top, #48752b 0%, #dafc71 100%); background: -ms-linear-gradient(top, #48752b 0%, #dafc71 100%); background: linear-gradient(top, #48752b 0%, #dafc71 100%); } .green .shine { position: relative; top: -20px; left: 5px; } .green .glow { position: relative; top: -20px; } .green .glyph { position: relative; top: -5px; left: 3px; font-size: 14px; font-weight: bold; color: #25571d; z-index: 50; opacity: 0; } @-moz-document url-prefix() { .red .glyph { position: relative; top: -5px; } .yellow .glyph { top: -4px; left: 3px; } .green .glyph { position: relative; top: -4px; } } #title { float: left; position: relative; top: 6px; width: 40%; left: 45%; font-family: "Myriad Pro", sans-serif; font-size: 16px; line-height: 14px; font-weight: bold; } .folder { float: left; margin-right: 5px; } .folder .tab { width: 4px; height: 2px; background: #a4c5da; border: 1px solid #728ea3; border-bottom: none; border-radius: 2px 2px 0px 0px; -webkit-box-shadow: 0px -1px 0px #99b5c7 inset; margin-left: 1px; z-index: 5000; margin-bottom: -1px; } .folder .body { width: 14px; height: 10px; border: 1px solid #6e8ba1; background: #b8cfe0; background: -moz-linear-gradient(top, #b8cfe0 0%, #86adc8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b8cfe0), color-stop(100%, #86adc8)); background: -webkit-linear-gradient(top, #b8cfe0 0%, #86adc8 100%); background: -o-linear-gradient(top, #b8cfe0 0%, #86adc8 100%); background: -ms-linear-gradient(top, #b8cfe0 0%, #86adc8 100%); background: linear-gradient(top, #b8cfe0 0%, #86adc8 100%); z-index: -50; -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25) inset, 0px 1px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25) inset, 0px 1px 0px rgba(0, 0, 0, 0.2); } #nav { margin: 1px 8px; float: left; } #view { margin: 2px 0 0 110px; display: inline-block; } .control_box { height: 20px; border-radius: 3px; border: 1px solid #555; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(1, #fefefe), color-stop(0, #b8b8b8)); box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25); } .control_box .control { height: 20px; border-right: 1px solid #2e2e2e; float: left; text-align: center; width: 27px; } .control:last-child { border-right: 0px solid !important; } .control:active { background: #b0afb0; -webkit-box-shadow: 0px 0px 4px #000 inset; } .active { background: #707070 !important; -webkit-box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.6) inset !important; } #body { font-family: Andale Mono, monospace; line-height: 1em; font-size: 13px; float: left; width: 100%; background: #002b36; padding: 10px; line-height: 1.5em; } #body p { color: #63de00!important; } @keyframes blink { 0% { background: rgba(99, 222, 0, 100); } 100% { background: rgba(99, 222, 0, 0); } } @-webkit-keyframes blink { 0% { background: rgba(99, 222, 0, 100); } 100% { background: rgba(99, 222, 0, 0); } } @-moz-keyframes blink { 0% { background: rgba(99, 222, 0, 100); } 100% { background: rgba(99, 222, 0, 0); } } .cursor { width: 10px; margin-left: 0px; color: #fff; } #body p::-webkit-selection { background: #0b209e; } #body p::selection { background: #0b209e; } #body p::-moz-selection { background: #0b209e; } #body p { margin-top: 5px; margin-bottom: 5px; font-size: 13px; } #content { float: left; margin-top: 1px; } #foot { height: 23px; width: 100%; float: left; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(1, #cbcbcb), color-stop(0, #a7a7a7)); border-top: 1px solid #515151; border-radius: 0 0 5px 5px; } #foot .handle { width: 11px; height: 11px; float: right; margin: 6px; overflow: hidden; } .handle .grip { -webkit-transform: rotate(45deg) scaley(3); margin: 2px 0 0 2px; color: #646464; text-shadow: 1px 1px 0 #c6c6c6; font-size: 14px; } .icon .frame { width: 82px; height: 82px; border-radius: 5px; border: 2px solid transparent; } .icon .name { color: #000; padding-top: 3px; border-radius: 15px; width: 55px; margin: 5px 0 0 15px; } .icon .folder { margin: 15px 0 0 6px; } #icon-github { text-align: -999px; font-size: 1px; display: block; width: 156px; height: 133px; background-image: url(../img/sprite.png); background-position: 0 133px; } #icon-github:hover { background-position: 0 0px; } #icon-rubygems { text-align: -999px; font-size: 1px; display: block; width: 156px; height: 133px; background-image: url(../img/sprite.png); background-position: 158px 133px; } #icon-rubygems:hover { background-position: 158px 0px; } .source-urls { margin-top: 40px; margin-bottom: 40px; } .no-margin-bot { color: #337AB7; } span { font-size: 15px; } #particles-js { position: absolute; width: 98%; } #particles-js-no { position: absolute; width: 98%; } #icon-github:hover, i.icon.ion-close-circled:hover, i.icon.ion-minus-circled:hover, i.icon.ion-plus-circled:hover { color: rgba(0, 0, 0, .5); } i.icon.ion-close-circled { color: rgba(212, 42, 38, 0.83); text-shadow: 0 0 1px rgba(187, 187, 187, 0.56); padding-top: 3px; } i.icon.ion-minus-circled { color: rgb(160, 165, 34); text-shadow: 0 0 1px rgba(187, 187, 187, 0.56); padding-top: 3px; } i.icon.ion-plus-circled { color: rgb(82, 183, 51); text-shadow: 0 0 1px rgba(187, 187, 187, 0.56); padding-top: 3px; } .icon { margin: 7px; float: left; font-size: 20px; } #title-left { position: relative; top: -8px; font-family: "Myriad Pro", sans-serif; font-size: 14px; left: 49%; } #terminal-origin { font-family: monospace; } @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) { #title-left { top: -13px; } } home-layout { background-color: #f1f1f1; } .terminal, .cmd { background-color: #343434; } @media screen and (max-width:1000px){i.icon.ion-minus-circled{display:none} #window{width:100%;} } @media screen and (max-width:800px){body{padding-top:0px;} #title-left{left:50%;} #window{width:100%;} .container{padding:0px;} /*article{padding:10px 20px;}*/ i.icon.ion-minus-circled{display:none} } @media screen and (max-width:800px){#title-left{left:48%;} } @media screen and (max-width:500px){#title-left{left:40%;} } @media screen and (max-width:400px){body{padding-top:0px;width:auto;} #title-left{left:50%;} /*article{padding:10px 10px;}*/ #particles-js{width:auto;} #particles-js-no{width:auto;} i.icon.ion-minus-circled{display:none} i.icon.ion-plus-circled{display:none} }