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 }
  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 @font-face {
 214     font-family: 'Mako';
 215     font-style: normal;
 216     font-weight: normal;
 217     src: local('Mako'), url('/fonts/Mako.ttf') format('truetype');
 218 }
 219
 220 .video img {
 221     margin-left: 1em;
 222     margin-right: 1em;
 223 }
 224
 225 .imgdesc {
 226     margin-bottom: 1em;
 227 }
 228
 229 .screenshots .shot {
 230     float: left;
 231     margin-left: 1em;
 232     margin-right: 1em;
 233     margin-top: 1em;
 234     margin-bottom: 1em;
 235     text-align: center;
 236     color: #c0c0c0;
 237 }
 238
 239 .screenshots br {
 240     clear: left;
 241 }
 242
 243 #mask {
 244     position: absolute;
 245     left: 0;
 246     top: 0;
 247     background-color: #000;
 248     opacity: 0.7;
 249     display: none;
 250 }
 251
 252 #loading {
 253     position: fixed;
 254     left: 50%;
 255     top: 50%;
 256     width: 64px;
 257     height: 64px;
 258     background-color: red;
 259     opacity: 0.9;
 260     z-index: 20;
 261     display: none;
 262     border-radius: 4px;
 263 }
 264
 265 #bigimg {
 266     position: fixed;
 267     top: 0;
 268     left: 0;
 269     width: 100%;
 270     height: 100%;
 271     display: none;
 272 }
 273
 274 #maskouter {
 275     height: 100%;
 276     display: table;
 277     margin: 0 auto;
 278 }
 279
 280 #maskinner {
 281     vertical-align: middle;
 282     display: table-cell;
 283 }
 284
 285 #imgleft, #imgright {
 286     position: fixed;
 287     top: 50%;
 288     width: 64px;
 289     height: 64px;
 290     border-radius: 4px;
 291     background-color: green;
 292     z-index: 19;
 293 }
 294
 295 #imgleft {
 296     left: 0;
 297 }
 298
 299 #imgright {
 300     right: 0;
 301     background-color: blue;
 302 }
 303
 304 /* clearfix */
 305 .clearfix:after {
 306     content: ".";
 307     display: block;
 308     clear: both;
 309     visibility: hidden;
 310     line-height: 0;
 311     height: 0;
 312 }
 313
 314 .clearfix {
 315     display: inline-block;
 316 }
 317
 318 html[xmlns] .clearfix {
 319     display: block;
 320 }
 321
 322 * html .clearfix {
 323     height: 1%;
 324 }