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