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 }
   7
   8 h2, h3 {
   9     font-family: 'Mako', sans-serif;
  10     font-weight: bold;
  11     letter-spacing: -1px;
  12     color: #FFF;
  13     line-height: 1.2em;
  14     border-bottom: 2px solid #333;
  15 }
  16
  17 h2 {
  18     font-size: 1.8em;
  19 }
  20
  21 a {
  22     color: #2b7dbc;
  23     text-decoration: underline;
  24 }
  25
  26
  27 a:hover {
  28     text-decoration: none;
  29 }
  30
  31 #main {
  32     width: 912px;
  33     margin: 0 auto;
  34     padding: 0;
  35 }
  36
  37 #nav {
  38     float: right;
  39     color: #FFF;
  40     margin: 10px 18px 0 0;
  41     padding: 0;
  42 }
  43
  44 #nav li {
  45     font-size: 1.3em;
  46     list-style: none;
  47     float: left;
  48     margin-top: 1.8em;
  49     margin-left: 5px;
  50     border-right: 2px solid #3A8ECD;
  51 }
  52
  53 #nav li:last-child {
  54     border-right: 0;
  55 }
  56
  57 #nav li a {
  58     font-size: 1.2em;
  59     margin: 0.4em 0.8em;
  60     display: block;
  61     color: #FFF;
  62     text-decoration: none;
  63     border-bottom: 2px solid #2e2e2e;
  64 }
  65
  66 #nav li a:hover {
  67     border-bottom: 2px solid #fff;
  68 }
  69
  70 h1#title {
  71     height: 146px;
  72     width: 458px;
  73     float: left;
  74     margin: 0;
  75     background-image: url(../img/logo.png);
  76     background-repeat: no-repeat;
  77     text-indent: -9999px;
  78 }
  79
  80 #screens {
  81     padding-top: 1em;
  82     float: right;
  83 }
  84
  85 img {
  86     border: 0;
  87 }
  88
  89 #info img, .screenshots img, .video img {
  90     -webkit-box-shadow: 0px 0px 0.20em #000;
  91     -moz-box-shadow: 0px 0px 0.20em #000;
  92     -o-box-shadow: 0px 0px 0.20em #000;
  93 }
  94
  95 #info {
  96     clear: both;
  97     padding: 5px 30px 15px 18px;
  98     border-radius: 4px;
  99     margin-right: 0.9em;
 100     margin-top: 1em;
 101
 102     width: 840px;
 103     color: #666;
 104     font-size: 1.6em;
 105     letter-spacing: -1px;
 106     background-color: #dddddd;
 107     background-repeat: no-repeat;
 108
 109     -webkit-box-shadow: 0px 0px 0.60em #000;
 110     -moz-box-shadow: 0px 0px 0.60em #000;
 111     -o-box-shadow: 0px 0px 0.60em #000;
 112
 113 }
 114
 115 #download {
 116     background-color: #000;
 117     background-image: -webkit-gradient(
 118         linear,
 119         left bottom,
 120         left top,
 121         color-stop(0.44, rgb(0,0,0)),
 122         color-stop(0.61, rgb(53,53,53))
 123     );
 124     background-image: -moz-linear-gradient(
 125         center bottom,
 126         rgb(0,0,0) 44%,
 127         rgb(53,53,53) 61%
 128     );
 129     color: #ffffff;
 130     padding-top: 0.5em;
 131     padding-bottom: 0.5em;
 132     -webkit-box-shadow: 0px 0px 0.30em #000;
 133     -moz-box-shadow: 0px 0px 0.30em #000;
 134     -o-box-shadow: 0px 0px 0.30em #000;
 135     float: left;
 136 }
 137
 138 #download a {
 139     color: white;
 140     text-decoration: none;
 141     padding-left: 1em;
 142     padding-top: 0.5em;
 143     padding-bottom: 0.5em;
 144     padding-right: 1em;
 145 }
 146
 147 #info h2 {
 148     margin: 17px 0 15px 0;
 149     border: 0;
 150     font-family: 'Georgia', 'Ovo', serif;
 151     color: #2b7dbc;
 152     font-size: 1.75em;
 153     font-weight: normal;
 154 }
 155
 156 #info p {
 157     line-height: 150%;
 158 }
 159
 160 #content {
 161     text-align: justify;
 162     width: 874px;
 163     padding-left: 1em;
 164     padding-right: 1em;
 165     line-height: 150%;
 166     color: #fff;
 167     font-size: 1.2em;
 168 }
 169
 170 #content p {
 171     padding-right: 2em;
 172 }
 173 #content li {
 174     margin-bottom: 1em;
 175     padding-right: 2em;
 176 }
 177
 178 #distributions {
 179     margin-left: 2em;
 180     line-height: 100px;
 181 }
 182
 183 #distributions img {
 184     vertical-align: middle;
 185     margin-left: 1.5em;
 186     margin-right: 1.5em;
 187     margin-bottom: 1.5em;
 188     margin-top: .5em;
 189 }
 190
 191 #footer {
 192     border-top: 2px solid #333;
 193     margin-top: 4em;
 194     padding-top: 1em;
 195     font-size: 90%;
 196     text-align: center;
 197 }
 198
 199 .docs {
 200     float: left;
 201     width: 48%;
 202 }
 203
 204 @font-face {
 205     font-family: 'Droid Sans';
 206     font-style: normal;
 207     font-weight: normal;
 208     src: local('Droid Sans'), local('DroidSans'), url('/fonts/DroidSans.woff') format('woff'), url('/fonts/DroidSans.ttf') format('truetype');
 209 }
 210
 211 @font-face {
 212     font-family: 'Ovo';
 213     font-style: normal;
 214     font-weight: normal;
 215     src: local('Ovo'), url('/fonts/Ovo.ttf') format('truetype');
 216 }
 217
 218 @font-face {
 219     font-family: 'Mako';
 220     font-style: normal;
 221     font-weight: normal;
 222     src: local('Mako'), url('/fonts/Mako.ttf') format('truetype');
 223 }
 224
 225 .video img {
 226     margin-left: 1em;
 227     margin-right: 1em;
 228 }
 229
 230 #screencasts li {
 231     margin-bottom: 0.25em;
 232 }
 233
 234 #screencasts p, #screencasts ul {
 235     margin-top: 0.35em;
 236     margin-bottom: 0.35em;
 237 }
 238
 239 .imgdesc {
 240     margin-bottom: 1em;
 241 }
 242
 243 .screenshots .shot {
 244     float: left;
 245     margin-left: 1em;
 246     margin-right: 1em;
 247     margin-top: 1em;
 248     margin-bottom: 1em;
 249     text-align: center;
 250     color: #c0c0c0;
 251 }
 252
 253 .screenshots br {
 254     clear: left;
 255 }
 256
 257 #mask {
 258     position: absolute;
 259     left: 0;
 260     top: 0;
 261     background-color: #000;
 262     opacity: 0.7;
 263     display: none;
 264 }
 265
 266 #loading {
 267     position: fixed;
 268     left: 50%;
 269     top: 50%;
 270     width: 64px;
 271     height: 64px;
 272     background-color: red;
 273     opacity: 0.9;
 274     z-index: 20;
 275     display: none;
 276     border-radius: 4px;
 277 }
 278
 279 #bigimg {
 280     position: fixed;
 281     top: 0;
 282     left: 0;
 283     width: 100%;
 284     height: 100%;
 285     display: none;
 286 }
 287
 288 #maskouter {
 289     height: 100%;
 290     display: table;
 291     margin: 0 auto;
 292 }
 293
 294 #maskinner {
 295     vertical-align: middle;
 296     display: table-cell;
 297 }
 298
 299 #imgleft, #imgright {
 300     position: fixed;
 301     top: 50%;
 302     width: 64px;
 303     height: 64px;
 304     border-radius: 4px;
 305     background-color: green;
 306     z-index: 19;
 307 }
 308
 309 #imgleft {
 310     left: 0;
 311 }
 312
 313 #imgright {
 314     right: 0;
 315     background-color: blue;
 316 }
 317
 318 /* clearfix */
 319 .clearfix:after {
 320     content: ".";
 321     display: block;
 322     clear: both;
 323     visibility: hidden;
 324     line-height: 0;
 325     height: 0;
 326 }
 327
 328 .clearfix {
 329     display: inline-block;
 330 }
 331
 332 html[xmlns] .clearfix {
 333     display: block;
 334 }
 335
 336 * html .clearfix {
 337     height: 1%;
 338 }