static/css/screen.css

   1 @import "http://fonts.googleapis.com/css?family=Expletus+Sans";
   2 html, body, div, span, applet, object, iframe,
   3 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   4 a, abbr, acronym, address, big, cite, code, #content .codeblock,
   5 del, dfn, em, img, ins, kbd, q, s, samp,
   6 small, strike, strong, sub, sup, tt, var,
   7 b, u, i, center,
   8 dl, dt, dd, ol, ul, li,
   9 fieldset, form, label, legend,
  10 table, caption, tbody, tfoot, thead, tr, th, td,
  11 article, aside, canvas, details, embed,
  12 figure, figcaption, footer, header, hgroup,
  13 menu, nav, output, ruby, section, summary,
  14 time, mark, audio, video {
  15   margin: 0;
  16   padding: 0;
  17   border: 0;
  18   font-size: 100%;
  19   font: inherit;
  20   vertical-align: baseline; }
  21
  22 body {
  23   line-height: 1; }
  24
  25 ol, ul {
  26   list-style: none; }
  27
  28 table {
  29   border-collapse: collapse;
  30   border-spacing: 0; }
  31
  32 caption, th, td {
  33   text-align: left;
  34   font-weight: normal;
  35   vertical-align: middle; }
  36
  37 q, blockquote {
  38   quotes: none; }
  39   q:before, q:after, blockquote:before, blockquote:after {
  40     content: "";
  41     content: none; }
  42
  43 a img {
  44   border: none; }
  45
  46 article, aside, details, figcaption, figure,
  47 footer, header, hgroup, menu, nav, section {
  48   display: block; }
  49
  50 article, aside, details, figcaption, figure,
  51 footer, header, hgroup, menu, nav, section {
  52   display: block; }
  53
  54 blockquote, q {
  55   quotes: none; }
  56   blockquote:before, blockquote:after, q:before, q:after {
  57     content: "";
  58     content: none; }
  59
  60 /* Compass Vars */
  61 /* Custom Vars */
  62 /* custom mixins */
  63 body {
  64   font-size: 100%;
  65   line-height: 1.563em; }
  66
  67 html > body {
  68   font-size: 16px; }
  69
  70 ::selection {
  71   background: #ff6ae6;
  72   text-shadow: none !important;
  73   color: white !important; }
  74
  75 @-webkit-keyframes glow {
  76   0% {
  77     text-shadow: 0 0 3px rgba(255, 255, 255, 0); }
  78
  79   100% {
  80     text-shadow: 0 0 3px rgba(255, 255, 255, 0.5); } }
  81
  82 @-webkit-keyframes pulse {
  83   0% {
  84     -webkit-transform: scale(1); }
  85
  86   100% {
  87     -webkit-transform: scale(1.05); } }
  88
  89 .lite {
  90   -webkit-animation-name: pulse;
  91   -webkit-animation-duration: .25s;
  92   -webkit-animation-iteration-count: infinite;
  93   -webkit-animation-direction: alternate;
  94   -webkit-animation-timing-function: linear;
  95   margin: -10px;
  96   padding: 9px;
  97   border: 1px solid #cfd7e6;
  98   background: white;
  99   -moz-border-radius: 5px;
 100   -webkit-border-radius: 5px;
 101   -o-border-radius: 5px;
 102   -ms-border-radius: 5px;
 103   -khtml-border-radius: 5px;
 104   border-radius: 5px; }
 105
 106 section {
 107   -moz-transition-property: background;
 108   -webkit-transition-property: background;
 109   -o-transition-property: background;
 110   transition-property: background;
 111   -moz-transition-duration: 0.15s;
 112   -webkit-transition-duration: 0.15s;
 113   -o-transition-duration: 0.15s;
 114   transition-duration: 0.15s;
 115   -moz-transition-timing-function: linear;
 116   -webkit-transition-timing-function: linear;
 117   -o-transition-timing-function: linear;
 118   transition-timing-function: linear; }
 119
 120 body {
 121   background: #e0e5ef;
 122   background: -webkit-gradient(linear, 50% 0%, 50% 250, color-stop(0%, #b4bdcf), color-stop(100%, #e0e5ef));
 123   background: -webkit-linear-gradient(top, #b4bdcf 0%, #e0e5ef 250px);
 124   background: -moz-linear-gradient(top, #b4bdcf 0%, #e0e5ef 250px);
 125   background: -o-linear-gradient(top, #b4bdcf 0%, #e0e5ef 250px);
 126   background: linear-gradient(top, #b4bdcf 0%, #e0e5ef 250px);
 127   color: #333333;
 128   text-shadow: 0 1px 0 #FFF;
 129   font-family: Helvetica, Arial, serif; }
 130
 131 #container {
 132   width: 750px;
 133   margin: 20px auto;
 134   background: transparent;
 135   color: #333333; }
 136
 137 #nameplate {
 138   font-size: 3.75em;
 139   line-height: 1.25em;
 140   font-family: "Expletus Sans", Helvetica, Arial, serif;
 141   position: relative; }
 142
 143 .installButton, .docsButton {
 144   height: 30px;
 145   color: #222222;
 146   text-decoration: none;
 147   font-size: 25px;
 148   line-height: 36px;
 149   font-family: "Expletus Sans", Helvetica, Arial, serif;
 150   text-transform: uppercase;
 151   letter-spacing: 2px;
 152   float: right;
 153   width: 160px;
 154   -moz-border-radius: 5px;
 155   -webkit-border-radius: 5px;
 156   -o-border-radius: 5px;
 157   -ms-border-radius: 5px;
 158   -khtml-border-radius: 5px;
 159   border-radius: 5px;
 160   -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
 161   -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
 162   -o-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
 163   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
 164   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(100%, #d4d4d4));
 165   background: -webkit-linear-gradient(#eeeeee, #d4d4d4);
 166   background: -moz-linear-gradient(#eeeeee, #d4d4d4);
 167   background: -o-linear-gradient(#eeeeee, #d4d4d4);
 168   background: linear-gradient(#eeeeee, #d4d4d4);
 169   text-shadow: #FFF 0 1px 0;
 170   border: 1px solid #eeeeee;
 171   padding: 5px 10px;
 172   position: absolute;
 173   top: 10px;
 174   right: 0; }
 175   .installButton::after, .docsButton::after {
 176     font-size: 20px;
 177     line-height: 20px;
 178     width: 25px;
 179     -moz-border-radius: 15px;
 180     -webkit-border-radius: 15px;
 181     -o-border-radius: 15px;
 182     -ms-border-radius: 15px;
 183     -khtml-border-radius: 15px;
 184     border-radius: 15px;
 185     -moz-box-shadow: 0 1px 0 0 white, 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset;
 186     -webkit-box-shadow: 0 1px 0 0 white, 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset;
 187     -o-box-shadow: 0 1px 0 0 white, 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset;
 188     box-shadow: 0 1px 0 0 white, 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset;
 189     background: #bbbbbb;
 190     float: left;
 191     text-align: center;
 192     margin-right: 10px;
 193     font-family: Helvetica, Arial, sans-serif; }
 194   .installButton:hover, .docsButton:hover {
 195     background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(100%, #c8c8c8));
 196     background: -webkit-linear-gradient(#eeeeee, #c8c8c8);
 197     background: -moz-linear-gradient(#eeeeee, #c8c8c8);
 198     background: -o-linear-gradient(#eeeeee, #c8c8c8);
 199     background: linear-gradient(#eeeeee, #c8c8c8); }
 200   .installButton:active, .docsButton:active {
 201     background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c8c8c8), color-stop(100%, #eeeeee));
 202     background: -webkit-linear-gradient(#c8c8c8, #eeeeee);
 203     background: -moz-linear-gradient(#c8c8c8, #eeeeee);
 204     background: -o-linear-gradient(#c8c8c8, #eeeeee);
 205     background: linear-gradient(#c8c8c8, #eeeeee);
 206     -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15), 0 0 16px 0 rgba(0, 0, 0, 0.15) inset;
 207     -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15), 0 0 16px 0 rgba(0, 0, 0, 0.15) inset;
 208     -o-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15), 0 0 16px 0 rgba(0, 0, 0, 0.15) inset;
 209     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15), 0 0 16px 0 rgba(0, 0, 0, 0.15) inset;
 210     color: #080808; }
 211     .installButton:active::after, .docsButton:active::after {
 212       background: #a2a2a2; }
 213
 214 .docsButton {
 215   right: 200px;
 216   width: 100px;
 217   text-align: center; }
 218
 219 .installButton::after {
 220   content: '\2b07';
 221   padding: 7px 1px 3px 4px; }
 222
 223 #content em {
 224   font-style: italic; }
 225 #content strong {
 226   font-weight: bold; }
 227 #content a {
 228   color: #354668;
 229   border-bottom: 1px solid #9dadcc;
 230   -moz-box-shadow: 0 1px 0 0 white;
 231   -webkit-box-shadow: 0 1px 0 0 white;
 232   -o-box-shadow: 0 1px 0 0 white;
 233   box-shadow: 0 1px 0 0 white;
 234   text-decoration: none; }
 235   #content a:hover {
 236     color: #354668;
 237     border-bottom: 1px solid #354668; }
 238 #content p, #content ul, #content ol, #content header {
 239   margin-bottom: 1.563em; }
 240 #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
 241   font-weight: bold;
 242   margin-bottom: 0.781em; }
 243 #content h2 {
 244   font-size: 1.25em;
 245   line-height: 1.25em; }
 246 #content code, #content .codeblock {
 247   background: #bec9de;
 248   padding: 3px;
 249   margin: -4px 0;
 250   border: 1px solid #aebbd5;
 251   -moz-border-radius: 3px;
 252   -webkit-border-radius: 3px;
 253   -o-border-radius: 3px;
 254   -ms-border-radius: 3px;
 255   -khtml-border-radius: 3px;
 256   border-radius: 3px;
 257   -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 white;
 258   -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 white;
 259   -o-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 white;
 260   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 white;
 261   font-family: Menlo, monospace;
 262   font-size: 0.813em;
 263   line-height: 1.923em; }
 264 #content .codeblock {
 265   margin-bottom: 1.563em;
 266   padding: 10px;
 267   display: block; }
 268   #content .codeblock code, #content .codeblock .codeblock {
 269     margin: 0;
 270     padding: 0;
 271     -moz-box-shadow: none;
 272     -webkit-box-shadow: none;
 273     -o-box-shadow: none;
 274     box-shadow: none;
 275     -moz-border-radius: 0;
 276     -webkit-border-radius: 0;
 277     -o-border-radius: 0;
 278     -ms-border-radius: 0;
 279     -khtml-border-radius: 0;
 280     border-radius: 0;
 281     border: none;
 282     display: block; }
 283   #content .codeblock.shell code::before, #content .codeblock.shell .codeblock::before {
 284     content: "$ ";
 285     color: #4d4d4d; }
 286 #content .pname {
 287   color: #354668; }
 288 #content .tucol {
 289   *zoom: 1;
 290   margin-top: 3.125em;
 291   margin-bottom: 3.125em; }
 292   #content .tucol:after {
 293     content: "\0020";
 294     display: block;
 295     height: 0;
 296     clear: both;
 297     overflow: hidden;
 298     visibility: hidden; }
 299   #content .tucol section {
 300     width: 355px;
 301     float: right; }
 302   #content .tucol section:first-child {
 303     float: left; }
 304   #content .tucol section:nth-child(2) {
 305     width: 335px;
 306     padding: 15px 15px;
 307     background: rgba(255, 255, 255, 0.5);
 308     -moz-border-radius: 5px;
 309     -webkit-border-radius: 5px;
 310     -o-border-radius: 5px;
 311     -ms-border-radius: 5px;
 312     -khtml-border-radius: 5px;
 313     border-radius: 5px;
 314     border: 1px solid #cfd7e6;
 315     -moz-box-shadow: 0 1px 0 0 white, 0 1px 0 0 white inset;
 316     -webkit-box-shadow: 0 1px 0 0 white, 0 1px 0 0 white inset;
 317     -o-box-shadow: 0 1px 0 0 white, 0 1px 0 0 white inset;
 318     box-shadow: 0 1px 0 0 white, 0 1px 0 0 white inset; }
 319   #content .tucol section :last-child {
 320     margin-bottom: 0; }
 321
 322 .three-up {
 323   background: #333333;
 324   margin: 25px -10px;
 325   padding: 10px;
 326   -moz-border-radius: 5px;
 327   -webkit-border-radius: 5px;
 328   -o-border-radius: 5px;
 329   -ms-border-radius: 5px;
 330   -khtml-border-radius: 5px;
 331   border-radius: 5px;
 332   -moz-box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
 333   -webkit-box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
 334   -o-box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
 335   box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
 336   height: 300px;
 337   overflow: hidden;
 338   *zoom: 1; }
 339   .three-up figure {
 340     border: 1px solid #1a1a1a;
 341     float: left;
 342     width: 241.333px;
 343     margin-right: 10px;
 344     overflow: hidden;
 345     position: relative;
 346     -moz-transition-property: width;
 347     -webkit-transition-property: width;
 348     -o-transition-property: width;
 349     transition-property: width;
 350     -moz-transition-duration: 0.25s;
 351     -webkit-transition-duration: 0.25s;
 352     -o-transition-duration: 0.25s;
 353     transition-duration: 0.25s;
 354     -moz-transition-timing-function: linear;
 355     -webkit-transition-timing-function: linear;
 356     -o-transition-timing-function: linear;
 357     transition-timing-function: linear;
 358     -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 rgba(255, 255, 255, 0.35);
 359     -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 rgba(255, 255, 255, 0.35);
 360     -o-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 rgba(255, 255, 255, 0.35);
 361     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 rgba(255, 255, 255, 0.35);
 362     -moz-border-radius: 3px;
 363     -webkit-border-radius: 3px;
 364     -o-border-radius: 3px;
 365     -ms-border-radius: 3px;
 366     -khtml-border-radius: 3px;
 367     border-radius: 3px; }
 368     .three-up figure.shrunk {
 369       width: 60px; }
 370     .three-up figure.expanded {
 371       width: 600px; }
 372     .three-up figure:last-child {
 373       margin-right: 0;
 374       float: right;
 375       /* keeps the right margin from wiggling */ }
 376     .three-up figure img {
 377       display: block; }
 378   .three-up figcaption {
 379     position: absolute;
 380     bottom: 0;
 381     left: 0;
 382     right: 0;
 383     background: rgba(0, 0, 0, 0.75);
 384     text-shadow: 1px 1px 0 #000;
 385     padding: 0 5px;
 386     color: #FFF;
 387     width: 600px;
 388     font-size: 0.813em;
 389     line-height: 1.923em; }
 390
 391 #whatIs {
 392   padding: 10px;
 393   background: #333333;
 394   background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #4d4d4d), color-stop(100%, #333333));
 395   background: -webkit-linear-gradient(bottom, #4d4d4d, #333333);
 396   background: -moz-linear-gradient(bottom, #4d4d4d, #333333);
 397   background: -o-linear-gradient(bottom, #4d4d4d, #333333);
 398   background: linear-gradient(bottom, #4d4d4d, #333333);
 399   margin-bottom: 20px;
 400   line-height: 30px;
 401   font-size: 20px;
 402   -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 0 0 white;
 403   -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 0 0 white;
 404   -o-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 0 0 white;
 405   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 0 0 white;
 406   -moz-border-radius: 5px;
 407   -webkit-border-radius: 5px;
 408   -o-border-radius: 5px;
 409   -ms-border-radius: 5px;
 410   -khtml-border-radius: 5px;
 411   border-radius: 5px;
 412   text-shadow: 0 -1px 0 black;
 413   text-align: center;
 414   -webkit-font-smoothing: antialiased;
 415   color: #cccccc; }
 416   #whatIs :last-child {
 417     margin-bottom: 0; }
 418   #whatIs .w1 {
 419     font-weight: bold; }
 420   #whatIs .s1 {
 421     color: white;
 422     display: block; }
 423   #whatIs a {
 424     background: transparent;
 425     padding: 0;
 426     color: #73e600;
 427     border-width: 0;
 428     -moz-box-shadow: none;
 429     -webkit-box-shadow: none;
 430     -o-box-shadow: none;
 431     box-shadow: none; }
 432     #whatIs a:hover {
 433       background: transparent;
 434       color: #d9fbb7;
 435       border: none; }
 436
 437 #modelList {
 438   margin-left: 1.5em; }
 439   #modelList li {
 440     margin-bottom: 0.781em;
 441     list-style-type: disc; }
 442   #modelList .name {
 443     font-weight: bold; }
 444
 445 #contribList {
 446   background: #333333;
 447   margin: 25px -10px;
 448   padding: 20px 10px 10px 10px;
 449   -moz-border-radius: 5px;
 450   -webkit-border-radius: 5px;
 451   -o-border-radius: 5px;
 452   -ms-border-radius: 5px;
 453   -khtml-border-radius: 5px;
 454   border-radius: 5px;
 455   -moz-box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
 456   -webkit-box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
 457   -o-box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
 458   box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
 459   overflow: hidden;
 460   *zoom: 1;
 461   text-shadow: none;
 462   color: white;
 463   -webkit-font-smoothing: antialiased; }
 464   #contribList li {
 465     width: 343px;
 466     float: left;
 467     margin: 0 5px 10px 5px;
 468     padding: 10px;
 469     background: #262626;
 470     border: 1px solid #1a1a1a;
 471     -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 0 0 rgba(255, 255, 255, 0.15);
 472     -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 0 0 rgba(255, 255, 255, 0.15);
 473     -o-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 0 0 rgba(255, 255, 255, 0.15);
 474     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 0 0 rgba(255, 255, 255, 0.15);
 475     overflow: hidden;
 476     *zoom: 1;
 477     -moz-border-radius: 3px;
 478     -webkit-border-radius: 3px;
 479     -o-border-radius: 3px;
 480     -ms-border-radius: 3px;
 481     -khtml-border-radius: 3px;
 482     border-radius: 3px; }
 483   #contribList .name, #contribList .description, #contribList .status {
 484     display: block; }
 485   #contribList .name {
 486     font-weight: bold; }
 487   #contribList .description {
 488     color: #999999; }
 489   #contribList .status {
 490     font-style: italic;
 491     font-size: 0.813em;
 492     line-height: 1.923em;
 493     float: right; }
 494     #contribList .status.dev {
 495       -webkit-animation-name: glow;
 496       -webkit-animation-duration: 1s;
 497       -webkit-animation-timing-function: ease;
 498       -webkit-animation-iteration-count: infinite;
 499       -webkit-animation-direction: alternate; }
 500     #contribList .status.pla {
 501       opacity: .5; }
 502   #contribList a {
 503     color: #CCC;
 504     border: none;
 505     -moz-box-shadow: none;
 506     -webkit-box-shadow: none;
 507     -o-box-shadow: none;
 508     box-shadow: none; }
 509     #contribList a:hover {
 510       color: #FFF;
 511       border: none; }
 512
 513 .getInvolved {
 514   margin: -16px 0; }
 515
 516 footer {
 517   margin-top: 25px;
 518   padding-top: 20px;
 519   border-top: 5px solid #333333;
 520   -moz-box-shadow: 0 1px 0 0 white inset;
 521   -webkit-box-shadow: 0 1px 0 0 white inset;
 522   -o-box-shadow: 0 1px 0 0 white inset;
 523   box-shadow: 0 1px 0 0 white inset;
 524   font-size: 0.813em;
 525   line-height: 1.923em;
 526   color: #666666; }
 527   footer a {
 528     text-decoration: none;
 529     color: #5974aa; }
 530     footer a:hover {
 531       color: #131924; }