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.8em;
  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 .shot {
 245     float: left;
 246     margin-left: 1em;
 247     margin-right: 1em;
 248     margin-top: 1em;
 249     margin-bottom: 1em;
 250     text-align: center;
 251     color: #c0c0c0;
 252     width: 240px;
 253     min-height: 125px;
 254 }
 255
 256 .screenshots br {
 257     clear: left;
 258 }
 259
 260 #mask {
 261     position: absolute;
 262     left: 0;
 263     top: 0;
 264     background-color: #000;
 265     opacity: 0.7;
 266     display: none;
 267 }
 268
 269 #loading {
 270     position: fixed;
 271     left: 50%;
 272     top: 50%;
 273     width: 58px;
 274     height: 60px;
 275     background-color: black;
 276     background-image: url('/img/loading.gif');
 277     opacity: 0.9;
 278     z-index: 20;
 279     display: none;
 280     border-radius: 4px;
 281 }
 282
 283 #bigimg {
 284     position: fixed;
 285     top: 0;
 286     left: 0;
 287     width: 100%;
 288     height: 100%;
 289     display: none;
 290 }
 291
 292 #maskouter {
 293     height: 100%;
 294     display: table;
 295     margin: 0 auto;
 296 }
 297
 298 #maskinner {
 299     vertical-align: middle;
 300     display: table-cell;
 301 }
 302
 303 #imgleft, #imgright {
 304     cursor: pointer;
 305     position: fixed;
 306     top: 50%;
 307     width: 64px;
 308     height: 64px;
 309     border-radius: 4px;
 310     background-color: black;
 311     z-index: 22;
 312     opacity: 0.7;
 313 }
 314
 315 #imgleft {
 316     left: 0;
 317     background-image: url('/img/prevbtn.png');
 318 }
 319
 320 #imgright {
 321     right: 0;
 322     background-image: url('/img/nextbtn.png');
 323 }
 324
 325 #imgdesc {
 326     position: fixed;
 327     left: 64px;
 328     bottom: 0;
 329     background-color: #333;
 330     width: 100%;
 331     padding-top: 1em;
 332     padding-bottom: 1em;
 333     padding-left: 2em;
 334     border: 1px solid #555;
 335     border-bottom: 0;
 336 }
 337
 338 #imgdesc .filename {
 339     font-weight: bold;
 340 }
 341
 342 #imgdesc .description {
 343     padding-left: 1em;
 344 }
 345
 346 .docs strong {
 347     margin-right: 1em;
 348 }
 349
 350 .docversion {
 351     margin: 0.25em;
 352     margin-top: 0.9em;
 353     padding: 0.1em;
 354     padding-left: 0.25em;
 355     padding-right: 0.25em;
 356     background-color: #333;
 357     border: 2px solid #555;
 358     border-radius: 4px;
 359     float: right;
 360 }
 361
 362 .docversion a, .docversion a:visited {
 363     color: white;
 364     text-decoration: none;
 365 }
 366
 367 table#downloads tr {
 368     opacity: 0.7;
 369 }
 370
 371 table#downloads thead tr {
 372     opacity: 1.0;
 373 }
 374
 375 table#downloads tbody tr:first-child {
 376     opacity: 1.0;
 377 }
 378
 379 /* clearfix */
 380 .clearfix:after {
 381     content: ".";
 382     display: block;
 383     clear: both;
 384     visibility: hidden;
 385     line-height: 0;
 386     height: 0;
 387 }
 388
 389 .clearfix {
 390     display: inline-block;
 391 }
 392
 393 html[xmlns] .clearfix {
 394     display: block;
 395 }
 396
 397 * html .clearfix {
 398     height: 1%;
 399 }