1html, body { 2 font-family: 'Roboto', sans-serif; 3 font-size: 15px; 4} 5body { 6 background-color: #f6f6f6; 7 padding-bottom: 50px; 8 padding-top: 80px; 9} 10 11header { 12 min-height: 80px; 13 color: #f6f6f6; 14 position: fixed; 15 top: 0; 16 left: 0; 17 width: 100%; 18 z-index: 99; 19} 20header h1 { 21 margin: 10px 0; 22 font-size: 50px; 23 line-height: 60px; 24 font-weight: 100; 25 text-rendering: auto; 26} 27header menu { 28 margin: 20px 0 0; 29 padding: 0; 30 height: 40px; 31} 32header menu ul { 33 margin: 0; 34 padding: 0; 35 float: right; 36} 37header menu li { 38 list-style: none; 39 float: left; 40 margin: 0; 41 padding: 0; 42} 43header menu li a { 44 display: inline-block; 45 height: 40px; 46 font-size: 17px; 47 line-height: 40px; 48 padding: 0 20px; 49 color: #f6f6f6; 50} 51header menu li a:hover { 52 color: #f6f6f6; 53 text-decoration: none; 54} 55header menu li a img { 56 margin: 0; 57 padding: 5px 0; 58 vertical-align: bottom; 59 width: 30px; 60 height: 30px; 61} 62 63#subtitle { 64 position: absolute; 65 top: 80px; 66 left: 0; 67 width: 100%; 68} 69h2 { 70 font-weight: 200; 71 font-size: 26px; 72 line-height: 30px; 73 padding: 15px 0; 74 margin: 0; 75 color: #eee; 76} 77h2 strong { 78 font-weight: 300; 79} 80 81a.dl { 82 font-weight: 300; 83 font-size: 30px; 84 line-height: 40px; 85 padding: 3px 10px; 86 display: inline-block; 87 border-radius: 6px; 88 color: #f0f0f0; 89 margin: 5px 0; 90} 91a.dl:hover { 92 color: #f0f0f0; 93 text-decoration: none; 94} 95 96.content-nav { 97 margin-top: 130px; 98 width: 220px; 99} 100.content-nav.affix { 101 top: 0; 102} 103.content-nav li.active a, .content-nav li.active a:hover { 104 background-color: transparent; 105 color: #555; 106 border-left-width: 2px; 107} 108.content-nav .secondary a { 109 color: #aaa; 110} 111.content-nav .secondary a:hover { 112 color: #888; 113} 114 115h3 { 116 font-weight: 300; 117 font-style: italic; 118 color: #888; 119 font-size: 20px; 120 padding-top: 115px; 121 margin-top: 0; 122} 123 124h4 { 125 font-weight: 400; 126 text-transform: uppercase; 127 color: #888; 128 font-size: 15px; 129 padding-top: 20px; 130} 131 132p.license { 133 font-family: fixed-width; 134} 135 136.row .logo { 137 text-align: center; 138 margin-top: 150px; 139} 140.row .logo img { 141 height: 30px; 142} 143 144pre, code { 145 color: #666; 146} 147code { 148 border: 0; 149 background-color: transparent; 150} 151 152/* Widescreen desktop. */ 153@media (min-width: 1200px) { 154 .content-nav { 155 width: 270px; 156 } 157} 158 159/* Smaller width browser, tablets. */ 160@media (max-width: 979px) { 161 .content-nav { 162 width: 166px; 163 } 164} 165 166/* One-column mobile display. */ 167@media (max-width: 767px) { 168 header { 169 position: absolute; 170 top: 0; 171 left: 0; 172 width: 100%; 173 padding-left: 20px; 174 } 175 header menu { 176 display: none; 177 } 178 #subtitle { 179 position: absolute; 180 top: 80px; 181 left: 0; 182 width: 100%; 183 padding-left: 20px; 184 } 185 .content-nav { 186 display: none; 187 } 188}