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: 64px;
 274     height: 64px;
 275     background-color: red;
 276     opacity: 0.9;
 277     z-index: 20;
 278     display: none;
 279     border-radius: 4px;
 280 }
 281
 282 #bigimg {
 283     position: fixed;
 284     top: 0;
 285     left: 0;
 286     width: 100%;
 287     height: 100%;
 288     display: none;
 289 }
 290
 291 #maskouter {
 292     height: 100%;
 293     display: table;
 294     margin: 0 auto;
 295 }
 296
 297 #maskinner {
 298     vertical-align: middle;
 299     display: table-cell;
 300 }
 301
 302 #imgleft, #imgright {
 303     position: fixed;
 304     top: 50%;
 305     width: 64px;
 306     height: 64px;
 307     border-radius: 4px;
 308     background-color: green;
 309     z-index: 19;
 310 }
 311
 312 #imgleft {
 313     left: 0;
 314 }
 315
 316 #imgright {
 317     right: 0;
 318     background-color: blue;
 319 }
 320
 321 /* clearfix */
 322 .clearfix:after {
 323     content: ".";
 324     display: block;
 325     clear: both;
 326     visibility: hidden;
 327     line-height: 0;
 328     height: 0;
 329 }
 330
 331 .clearfix {
 332     display: inline-block;
 333 }
 334
 335 html[xmlns] .clearfix {
 336     display: block;
 337 }
 338
 339 * html .clearfix {
 340     height: 1%;
 341 }