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