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 {
 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 {
 176     content: '\2b07';
 177     font-size: 20px;
 178     line-height: 20px;
 179     padding: 7px 1px 3px 4px;
 180     width: 25px;
 181     -moz-border-radius: 15px;
 182     -webkit-border-radius: 15px;
 183     -o-border-radius: 15px;
 184     -ms-border-radius: 15px;
 185     -khtml-border-radius: 15px;
 186     border-radius: 15px;
 187     -moz-box-shadow: 0 1px 0 0 white, 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset;
 188     -webkit-box-shadow: 0 1px 0 0 white, 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset;
 189     -o-box-shadow: 0 1px 0 0 white, 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset;
 190     box-shadow: 0 1px 0 0 white, 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset;
 191     background: #bbbbbb;
 192     float: left;
 193     text-align: center;
 194     margin-right: 10px;
 195     font-family: Helvetica, Arial, sans-serif; }
 196   .installButton:hover {
 197     background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(100%, #c8c8c8));
 198     background: -webkit-linear-gradient(#eeeeee, #c8c8c8);
 199     background: -moz-linear-gradient(#eeeeee, #c8c8c8);
 200     background: -o-linear-gradient(#eeeeee, #c8c8c8);
 201     background: linear-gradient(#eeeeee, #c8c8c8); }
 202   .installButton:active {
 203     background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c8c8c8), color-stop(100%, #eeeeee));
 204     background: -webkit-linear-gradient(#c8c8c8, #eeeeee);
 205     background: -moz-linear-gradient(#c8c8c8, #eeeeee);
 206     background: -o-linear-gradient(#c8c8c8, #eeeeee);
 207     background: linear-gradient(#c8c8c8, #eeeeee);
 208     -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15), 0 0 16px 0 rgba(0, 0, 0, 0.15) inset;
 209     -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15), 0 0 16px 0 rgba(0, 0, 0, 0.15) inset;
 210     -o-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15), 0 0 16px 0 rgba(0, 0, 0, 0.15) inset;
 211     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15), 0 0 16px 0 rgba(0, 0, 0, 0.15) inset;
 212     color: #080808; }
 213     .installButton:active::after {
 214       background: #a2a2a2; }
 215
 216 #content a {
 217   color: #354668;
 218   border-bottom: 1px solid #9dadcc;
 219   -moz-box-shadow: 0 1px 0 0 white;
 220   -webkit-box-shadow: 0 1px 0 0 white;
 221   -o-box-shadow: 0 1px 0 0 white;
 222   box-shadow: 0 1px 0 0 white;
 223   text-decoration: none; }
 224   #content a:hover {
 225     color: #354668;
 226     border-bottom: 1px solid #354668; }
 227 #content p, #content ul, #content ol, #content header {
 228   margin-bottom: 1.563em; }
 229 #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
 230   font-weight: bold;
 231   margin-bottom: 0.781em; }
 232 #content h2 {
 233   font-size: 1.25em;
 234   line-height: 1.25em; }
 235 #content code, #content .codeblock {
 236   background: #bec9de;
 237   padding: 3px;
 238   margin: -4px 0;
 239   border: 1px solid #aebbd5;
 240   -moz-border-radius: 3px;
 241   -webkit-border-radius: 3px;
 242   -o-border-radius: 3px;
 243   -ms-border-radius: 3px;
 244   -khtml-border-radius: 3px;
 245   border-radius: 3px;
 246   -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 white;
 247   -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 white;
 248   -o-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 white;
 249   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 white;
 250   font-family: Menlo, monospace;
 251   font-size: 0.813em;
 252   line-height: 1.923em; }
 253 #content .codeblock {
 254   margin-bottom: 1.563em;
 255   padding: 10px;
 256   display: block; }
 257   #content .codeblock code, #content .codeblock .codeblock {
 258     margin: 0;
 259     padding: 0;
 260     -moz-box-shadow: none;
 261     -webkit-box-shadow: none;
 262     -o-box-shadow: none;
 263     box-shadow: none;
 264     -moz-border-radius: 0;
 265     -webkit-border-radius: 0;
 266     -o-border-radius: 0;
 267     -ms-border-radius: 0;
 268     -khtml-border-radius: 0;
 269     border-radius: 0;
 270     border: none;
 271     display: block; }
 272   #content .codeblock.shell code::before, #content .codeblock.shell .codeblock::before {
 273     content: "$ ";
 274     color: #4d4d4d; }
 275 #content .pname {
 276   color: #354668; }
 277 #content .tucol {
 278   *zoom: 1;
 279   margin-top: 3.125em;
 280   margin-bottom: 3.125em; }
 281   #content .tucol:after {
 282     content: "\0020";
 283     display: block;
 284     height: 0;
 285     clear: both;
 286     overflow: hidden;
 287     visibility: hidden; }
 288   #content .tucol section {
 289     width: 355px;
 290     float: right; }
 291   #content .tucol section:first-child {
 292     float: left; }
 293   #content .tucol section:nth-child(2) {
 294     width: 335px;
 295     padding: 15px 15px;
 296     background: rgba(255, 255, 255, 0.5);
 297     -moz-border-radius: 5px;
 298     -webkit-border-radius: 5px;
 299     -o-border-radius: 5px;
 300     -ms-border-radius: 5px;
 301     -khtml-border-radius: 5px;
 302     border-radius: 5px;
 303     border: 1px solid #cfd7e6; }
 304   #content .tucol section :last-child {
 305     margin-bottom: 0; }
 306
 307 .three-up {
 308   background: #333333;
 309   margin: 25px -10px;
 310   padding: 10px;
 311   -moz-border-radius: 5px;
 312   -webkit-border-radius: 5px;
 313   -o-border-radius: 5px;
 314   -ms-border-radius: 5px;
 315   -khtml-border-radius: 5px;
 316   border-radius: 5px;
 317   -moz-box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
 318   -webkit-box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
 319   -o-box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
 320   box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
 321   height: 300px;
 322   overflow: hidden;
 323   *zoom: 1; }
 324   .three-up figure {
 325     border: 1px solid #1a1a1a;
 326     float: left;
 327     width: 241.333px;
 328     margin-right: 10px;
 329     overflow: hidden;
 330     position: relative;
 331     -moz-transition-property: width;
 332     -webkit-transition-property: width;
 333     -o-transition-property: width;
 334     transition-property: width;
 335     -moz-transition-duration: 0.25s;
 336     -webkit-transition-duration: 0.25s;
 337     -o-transition-duration: 0.25s;
 338     transition-duration: 0.25s;
 339     -moz-transition-timing-function: linear;
 340     -webkit-transition-timing-function: linear;
 341     -o-transition-timing-function: linear;
 342     transition-timing-function: linear;
 343     -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 rgba(255, 255, 255, 0.35);
 344     -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 rgba(255, 255, 255, 0.35);
 345     -o-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 rgba(255, 255, 255, 0.35);
 346     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 rgba(255, 255, 255, 0.35);
 347     -moz-border-radius: 3px;
 348     -webkit-border-radius: 3px;
 349     -o-border-radius: 3px;
 350     -ms-border-radius: 3px;
 351     -khtml-border-radius: 3px;
 352     border-radius: 3px; }
 353     .three-up figure.shrunk {
 354       width: 60px; }
 355     .three-up figure.expanded {
 356       width: 600px; }
 357     .three-up figure:last-child {
 358       margin-right: 0;
 359       float: right;
 360       /* keeps the right margin from wiggling */ }
 361     .three-up figure img {
 362       display: block; }
 363   .three-up figcaption {
 364     position: absolute;
 365     bottom: 0;
 366     left: 0;
 367     right: 0;
 368     background: rgba(0, 0, 0, 0.75);
 369     text-shadow: 1px 1px 0 #000;
 370     padding: 0 5px;
 371     color: #FFF;
 372     width: 600px;
 373     font-size: 0.813em;
 374     line-height: 1.923em; }
 375
 376 #whatIs {
 377   padding: 10px;
 378   background: #333333;
 379   margin-bottom: 20px;
 380   line-height: 30px;
 381   font-size: 20px;
 382   -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 0 0 white;
 383   -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 0 0 white;
 384   -o-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 0 0 white;
 385   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 0 0 white;
 386   -moz-border-radius: 5px;
 387   -webkit-border-radius: 5px;
 388   -o-border-radius: 5px;
 389   -ms-border-radius: 5px;
 390   -khtml-border-radius: 5px;
 391   border-radius: 5px;
 392   text-shadow: 0 -1px 0 black;
 393   text-align: center;
 394   -webkit-font-smoothing: antialiased;
 395   color: #cccccc; }
 396   #whatIs :last-child {
 397     margin-bottom: 0; }
 398   #whatIs .w1 {
 399     font-weight: bold; }
 400   #whatIs .s1 {
 401     color: white;
 402     display: block; }
 403   #whatIs a {
 404     background: transparent;
 405     padding: 0;
 406     color: #73e600;
 407     border-width: 0;
 408     -moz-box-shadow: none;
 409     -webkit-box-shadow: none;
 410     -o-box-shadow: none;
 411     box-shadow: none; }
 412     #whatIs a:hover {
 413       background: transparent;
 414       color: #d9fbb7;
 415       border: none; }
 416
 417 #modelList {
 418   margin-left: 1.5em; }
 419   #modelList li {
 420     margin-bottom: 0.781em;
 421     list-style-type: disc; }
 422   #modelList .name {
 423     font-weight: bold; }
 424
 425 #contribList {
 426   background: #333333;
 427   margin: 25px -10px;
 428   padding: 20px 10px 10px 10px;
 429   -moz-border-radius: 5px;
 430   -webkit-border-radius: 5px;
 431   -o-border-radius: 5px;
 432   -ms-border-radius: 5px;
 433   -khtml-border-radius: 5px;
 434   border-radius: 5px;
 435   -moz-box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
 436   -webkit-box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
 437   -o-box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
 438   box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
 439   overflow: hidden;
 440   *zoom: 1;
 441   text-shadow: none;
 442   color: white;
 443   -webkit-font-smoothing: antialiased; }
 444   #contribList li {
 445     width: 343px;
 446     float: left;
 447     margin: 0 5px 10px 5px;
 448     padding: 10px;
 449     background: #262626;
 450     border: 1px solid #1a1a1a;
 451     -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 0 0 rgba(255, 255, 255, 0.15);
 452     -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 0 0 rgba(255, 255, 255, 0.15);
 453     -o-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 0 0 rgba(255, 255, 255, 0.15);
 454     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 0 0 rgba(255, 255, 255, 0.15);
 455     overflow: hidden;
 456     *zoom: 1;
 457     -moz-border-radius: 3px;
 458     -webkit-border-radius: 3px;
 459     -o-border-radius: 3px;
 460     -ms-border-radius: 3px;
 461     -khtml-border-radius: 3px;
 462     border-radius: 3px; }
 463   #contribList .name, #contribList .description, #contribList .status {
 464     display: block; }
 465   #contribList .name {
 466     font-weight: bold; }
 467   #contribList .description {
 468     color: #999999; }
 469   #contribList .status {
 470     font-style: italic;
 471     font-size: 0.813em;
 472     line-height: 1.923em;
 473     float: right; }
 474     #contribList .status.dev {
 475       -webkit-animation-name: glow;
 476       -webkit-animation-duration: 1s;
 477       -webkit-animation-timing-function: ease;
 478       -webkit-animation-iteration-count: infinite;
 479       -webkit-animation-direction: alternate; }
 480     #contribList .status.pla {
 481       opacity: .5; }
 482   #contribList a {
 483     color: #CCC;
 484     border: none;
 485     -moz-box-shadow: none;
 486     -webkit-box-shadow: none;
 487     -o-box-shadow: none;
 488     box-shadow: none; }
 489     #contribList a:hover {
 490       color: #FFF;
 491       border: none; }
 492
 493 .getInvolved {
 494   margin: -16px 0; }
 495
 496 footer {
 497   margin-top: 25px;
 498   padding-top: 20px;
 499   border-top: 5px solid #333333;
 500   -moz-box-shadow: 0 1px 0 0 white inset;
 501   -webkit-box-shadow: 0 1px 0 0 white inset;
 502   -o-box-shadow: 0 1px 0 0 white inset;
 503   box-shadow: 0 1px 0 0 white inset;
 504   font-size: 0.813em;
 505   line-height: 1.923em;
 506   color: #666666; }
 507   footer a {
 508     text-decoration: none;
 509     color: #5974aa; }
 510     footer a:hover {
 511       color: #131924; }