git.sur5r.net Git - i3/i3.github.io/blob - css/style.css

   1 body {
   2     background-color: #2e2e2e;
   3     color: #CCC;
   4     font-family: 'Droid Sans', "Lucida Grande", "Lucida Sans", "Liberation Sans", sans-serif;
   5     font-size: 0.8em;
   6     overflow-y: scroll;
   7 }
   8
   9 h2, h3 {
  10     font-family: 'Mako', sans-serif;
  11     font-weight: bold;
  12     letter-spacing: -1px;
  13     color: #FFF;
  14     line-height: 1.2em;
  15     border-bottom: 2px solid #333;
  16 }
  17
  18 h2 {
  19     font-size: 1.8em;
  20 }
  21
  22 a {
  23     color: #2b7dbc;
  24     text-decoration: underline;
  25 }
  26
  27
  28 a:hover {
  29     text-decoration: none;
  30 }
  31
  32 #main {
  33     width: 912px;
  34     margin: 0 auto;
  35     padding: 0;
  36 }
  37
  38 #nav {
  39     float: right;
  40     color: #FFF;
  41     margin: 10px 18px 0 0;
  42     padding: 0;
  43 }
  44
  45 #nav li {
  46     font-size: 1.3em;
  47     list-style: none;
  48     float: left;
  49     margin-top: 1.8em;
  50     margin-left: 5px;
  51     border-right: 2px solid #3A8ECD;
  52 }
  53
  54 #nav li:last-child {
  55     border-right: 0;
  56 }
  57
  58 #nav li a {
  59     font-size: 1.2em;
  60     margin: 0.4em 0.4em;
  61     display: block;
  62     color: #FFF;
  63     text-decoration: none;
  64     border-bottom: 2px solid #2e2e2e;
  65 }
  66
  67 #nav li a:hover {
  68     border-bottom: 2px solid #fff;
  69 }
  70
  71 h1#title {
  72     height: 146px;
  73     width: 458px;
  74     float: left;
  75     margin: 0;
  76     background-image: url(../img/logo.svg);
  77     background-repeat: no-repeat;
  78     background-size: 436px 134px;
  79     text-indent: -9999px;
  80 }
  81
  82 #screens {
  83     padding-top: 1em;
  84     float: right;
  85 }
  86
  87 img {
  88     border: 0;
  89 }
  90
  91 #info img, .screenshots img, .video img {
  92     -webkit-box-shadow: 0px 0px 0.20em #000;
  93     -moz-box-shadow: 0px 0px 0.20em #000;
  94     -o-box-shadow: 0px 0px 0.20em #000;
  95 }
  96
  97 #info {
  98     clear: both;
  99     padding: 5px 30px 15px 18px;
 100     border-radius: 4px;
 101     margin-right: 0.9em;
 102     margin-top: 1em;
 103
 104     width: 840px;
 105     color: #666;
 106     font-size: 1.6em;
 107     letter-spacing: -1px;
 108     background-color: #dddddd;
 109     background-repeat: no-repeat;
 110
 111     -webkit-box-shadow: 0px 0px 0.60em #000;
 112     -moz-box-shadow: 0px 0px 0.60em #000;
 113     -o-box-shadow: 0px 0px 0.60em #000;
 114
 115 }
 116
 117 #download {
 118     background-color: #000;
 119     background-image: -webkit-gradient(
 120         linear,
 121         left bottom,
 122         left top,
 123         color-stop(0.44, rgb(0,0,0)),
 124         color-stop(0.61, rgb(53,53,53))
 125     );
 126     background-image: -moz-linear-gradient(
 127         center bottom,
 128         rgb(0,0,0) 44%,
 129         rgb(53,53,53) 61%
 130     );
 131     color: #ffffff;
 132     padding-top: 0.5em;
 133     padding-bottom: 0.5em;
 134     -webkit-box-shadow: 0px 0px 0.30em #000;
 135     -moz-box-shadow: 0px 0px 0.30em #000;
 136     -o-box-shadow: 0px 0px 0.30em #000;
 137     float: left;
 138 }
 139
 140 #download a {
 141     color: white;
 142     text-decoration: none;
 143     padding-left: 1em;
 144     padding-top: 0.5em;
 145     padding-bottom: 0.5em;
 146     padding-right: 1em;
 147 }
 148
 149 #info h2 {
 150     margin: 17px 0 15px 0;
 151     border: 0;
 152     font-family: 'Georgia', 'Ovo', serif;
 153     color: #2b7dbc;
 154     font-size: 1.75em;
 155     font-weight: normal;
 156 }
 157
 158 #info p {
 159     line-height: 150%;
 160 }
 161
 162 #content {
 163     text-align: justify;
 164     width: 874px;
 165     padding-left: 1em;
 166     padding-right: 1em;
 167     line-height: 150%;
 168     color: #fff;
 169     font-size: 1.2em;
 170 }
 171
 172 #content p {
 173     padding-right: 2em;
 174 }
 175 #content li {
 176     margin-bottom: 1em;
 177     padding-right: 2em;
 178 }
 179
 180 #distributions {
 181     margin-left: 2em;
 182     line-height: 100px;
 183 }
 184
 185 #distributions img {
 186     vertical-align: middle;
 187     margin-left: 1.5em;
 188     margin-right: 1.5em;
 189     margin-bottom: 1.5em;
 190     margin-top: .5em;
 191 }
 192
 193 #footer {
 194     border-top: 2px solid #333;
 195     margin-top: 4em;
 196     padding-top: 1em;
 197     font-size: 90%;
 198     text-align: center;
 199 }
 200
 201 .docs {
 202     float: left;
 203     width: 48%;
 204 }
 205
 206 .docs p, .ugdocs p {
 207     padding-left: 0.5em;
 208 }
 209
 210 @font-face {
 211     font-family: 'Droid Sans';
 212     font-style: normal;
 213     font-weight: normal;
 214     src: local('Droid Sans'), local('DroidSans'), url('/fonts/DroidSans.woff') format('woff'), url('/fonts/DroidSans.ttf') format('truetype');
 215 }
 216
 217 @font-face {
 218     font-family: 'Ovo';
 219     font-style: normal;
 220     font-weight: normal;
 221     src: local('Ovo'), url('/fonts/Ovo.ttf') format('truetype');
 222 }
 223
 224 @font-face {
 225     font-family: 'Mako';
 226     font-style: normal;
 227     font-weight: normal;
 228     src: local('Mako'), url('/fonts/Mako.ttf') format('truetype');
 229 }
 230
 231 .video img {
 232     margin-left: 1em;
 233     margin-right: 1em;
 234 }
 235
 236 #screencasts li {
 237     margin-bottom: 0.25em;
 238 }
 239
 240 #screencasts p, #screencasts ul {
 241     margin-top: 0.35em;
 242     margin-bottom: 0.35em;
 243 }
 244
 245 .imgdesc {
 246     margin-bottom: 1em;
 247 }
 248
 249 .screenshots, .screencasts, .video {
 250     width: 100%;
 251 }
 252
 253 .screenshots .shot {
 254     float: left;
 255     margin-left: 1em;
 256     margin-right: 1em;
 257     margin-top: 1em;
 258     margin-bottom: 1em;
 259     text-align: center;
 260     color: #c0c0c0;
 261     width: 240px;
 262     min-height: 125px;
 263 }
 264
 265 .screenshots br {
 266     clear: left;
 267 }
 268
 269 #mask {
 270     position: absolute;
 271     left: 0;
 272     top: 0;
 273     background-color: #000;
 274     opacity: 0.7;
 275     display: none;
 276 }
 277
 278 #loading {
 279     position: fixed;
 280     left: 50%;
 281     top: 50%;
 282     width: 58px;
 283     height: 60px;
 284     background-color: black;
 285     background-image: url('/img/loading.gif');
 286     opacity: 0.9;
 287     z-index: 20;
 288     display: none;
 289     border-radius: 4px;
 290 }
 291
 292 #bigimg {
 293     position: fixed;
 294     top: 0;
 295     left: 0;
 296     width: 100%;
 297     height: 100%;
 298     display: none;
 299 }
 300
 301 #maskouter {
 302     height: 100%;
 303     display: table;
 304     margin: 0 auto;
 305 }
 306
 307 #maskinner {
 308     vertical-align: middle;
 309     display: table-cell;
 310 }
 311
 312 #imgleft, #imgright {
 313     cursor: pointer;
 314     position: fixed;
 315     top: 50%;
 316     width: 64px;
 317     height: 64px;
 318     border-radius: 4px;
 319     background-color: black;
 320     z-index: 22;
 321     opacity: 0.7;
 322 }
 323
 324 #imgleft {
 325     left: 0;
 326     background-image: url('/img/prevbtn.png');
 327 }
 328
 329 #imgright {
 330     right: 0;
 331     background-image: url('/img/nextbtn.png');
 332 }
 333
 334 #imgdesc {
 335     position: fixed;
 336     left: 64px;
 337     bottom: 0;
 338     background-color: #333;
 339     width: 100%;
 340     padding-top: 1em;
 341     padding-bottom: 1em;
 342     padding-left: 2em;
 343     border: 1px solid #555;
 344     border-bottom: 0;
 345 }
 346
 347 #imgdesc .filename {
 348     font-weight: bold;
 349 }
 350
 351 #imgdesc .description {
 352     padding-left: 1em;
 353 }
 354
 355 .docs strong {
 356     margin-right: 1em;
 357 }
 358
 359 .docversion {
 360     margin: 0.25em;
 361     margin-top: 0.9em;
 362     padding: 0.1em;
 363     padding-left: 0.25em;
 364     padding-right: 0.25em;
 365     background-color: #333;
 366     border: 2px solid #555;
 367     border-radius: 4px;
 368     float: right;
 369 }
 370
 371 .docversion a, .docversion a:visited {
 372     color: white;
 373     text-decoration: none;
 374 }
 375
 376 table#downloads tr {
 377     opacity: 0.7;
 378 }
 379
 380 table#downloads thead tr {
 381     opacity: 1.0;
 382 }
 383
 384 table#downloads tbody tr:first-child {
 385     opacity: 1.0;
 386 }
 387
 388 .usergen pre {
 389     background: #333;
 390     border: 1px solid #555;
 391     border-left: 5px solid #555;
 392     padding: 0.5em;
 393     padding-left: 1em;
 394     padding-right: 0.5em;
 395     white-space: pre;
 396     color: white;
 397     overflow: auto;
 398 }
 399
 400 .usergen tt {
 401     font-family: 'Droid Sans Mono', sans-serif;
 402     font-size: inherit;
 403 }
 404
 405 .ugdocs .author {
 406     opacity: 0.3;
 407 }
 408
 409 /* clearfix */
 410 .clearfix:after {
 411     content: ".";
 412     display: block;
 413     clear: both;
 414     visibility: hidden;
 415     line-height: 0;
 416     height: 0;
 417 }
 418
 419 .clearfix {
 420     display: inline-block;
 421 }
 422
 423 html[xmlns] .clearfix {
 424     display: block;
 425 }
 426
 427 * html .clearfix {
 428     height: 1%;
 429 }