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: #FFF !important; }
  74
  75 body {
  76   background: #e0e5ef;
  77   color: #333333;
  78   text-shadow: 0 1px 0 #FFF;
  79   font-family: Helvetica, Arial, serif; }
  80
  81 #container {
  82   width: 750px;
  83   margin: 20px auto;
  84   background: transparent;
  85   color: #333333; }
  86
  87 #nameplate {
  88   font-size: 3.75em;
  89   line-height: 1.25em;
  90   margin-bottom: 25px;
  91   padding-bottom: 5px;
  92   border-bottom: 5px solid #333333;
  93   -moz-box-shadow: 0 1px 0 white;
  94   -webkit-box-shadow: 0 1px 0 white;
  95   -o-box-shadow: 0 1px 0 white;
  96   box-shadow: 0 1px 0 white;
  97   font-family: "Expletus Sans", Helvetica, Arial, serif; }
  98
  99 #content a {
 100   color: black;
 101   text-decoration: none;
 102   background: #aebbd5;
 103   padding: 3px;
 104   -moz-border-radius: 3px;
 105   -webkit-border-radius: 3px;
 106   -o-border-radius: 3px;
 107   -ms-border-radius: 3px;
 108   -khtml-border-radius: 3px;
 109   border-radius: 3px; }
 110   #content a:hover {
 111     background: #95a1bb;
 112     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65); }
 113 #content p, #content ul, #content ol, #content header {
 114   margin-bottom: 1.563em; }
 115 #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
 116   font-weight: bold;
 117   margin-bottom: 0.781em; }
 118 #content h2 {
 119   font-size: 1.25em;
 120   line-height: 1.25em; }
 121 #content code, #content .codeblock {
 122   background: #bec9de;
 123   padding: 3px;
 124   margin: -4px 0;
 125   border: 1px solid #aebbd5;
 126   -moz-border-radius: 3px;
 127   -webkit-border-radius: 3px;
 128   -o-border-radius: 3px;
 129   -ms-border-radius: 3px;
 130   -khtml-border-radius: 3px;
 131   border-radius: 3px;
 132   -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 white;
 133   -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 white;
 134   -o-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 white;
 135   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 white;
 136   font-family: Menlo, monospace;
 137   font-size: 0.813em;
 138   line-height: 1.923em; }
 139 #content .codeblock {
 140   padding: 10px;
 141   display: block; }
 142   #content .codeblock code, #content .codeblock .codeblock {
 143     margin: 0;
 144     padding: 0;
 145     -moz-box-shadow: none;
 146     -webkit-box-shadow: none;
 147     -o-box-shadow: none;
 148     box-shadow: none;
 149     -moz-border-radius: 0;
 150     -webkit-border-radius: 0;
 151     -o-border-radius: 0;
 152     -ms-border-radius: 0;
 153     -khtml-border-radius: 0;
 154     border-radius: 0;
 155     border: none;
 156     display: block; }
 157   #content .codeblock.shell code::before, #content .codeblock.shell .codeblock::before {
 158     content: "$ ";
 159     color: #4d4d4d; }
 160
 161 .three-up {
 162   background: #333333;
 163   margin: 25px -10px;
 164   padding: 10px;
 165   -moz-border-radius: 5px;
 166   -webkit-border-radius: 5px;
 167   -o-border-radius: 5px;
 168   -ms-border-radius: 5px;
 169   -khtml-border-radius: 5px;
 170   border-radius: 5px;
 171   -moz-box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
 172   -webkit-box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
 173   -o-box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
 174   box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
 175   overflow: hidden;
 176   *zoom: 1; }
 177   .three-up figure {
 178     border: 1px solid #1a1a1a;
 179     float: left;
 180     width: 241.333px;
 181     margin-right: 10px;
 182     overflow: hidden;
 183     position: relative;
 184     -moz-transition-property: width;
 185     -webkit-transition-property: width;
 186     -o-transition-property: width;
 187     transition-property: width;
 188     -moz-transition-duration: 0.25s;
 189     -webkit-transition-duration: 0.25s;
 190     -o-transition-duration: 0.25s;
 191     transition-duration: 0.25s;
 192     -moz-transition-timing-function: linear;
 193     -webkit-transition-timing-function: linear;
 194     -o-transition-timing-function: linear;
 195     transition-timing-function: linear;
 196     -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 rgba(255, 255, 255, 0.35);
 197     -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 rgba(255, 255, 255, 0.35);
 198     -o-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 rgba(255, 255, 255, 0.35);
 199     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 rgba(255, 255, 255, 0.35);
 200     -moz-border-radius: 3px;
 201     -webkit-border-radius: 3px;
 202     -o-border-radius: 3px;
 203     -ms-border-radius: 3px;
 204     -khtml-border-radius: 3px;
 205     border-radius: 3px; }
 206     .three-up figure.shrunk {
 207       width: 62px; }
 208     .three-up figure.expanded {
 209       width: 600px; }
 210     .three-up figure:last-child {
 211       margin-right: 0;
 212       float: right;
 213       /* keeps the right margin from wiggling */ }
 214     .three-up figure img {
 215       display: block; }
 216   .three-up figcaption {
 217     position: absolute;
 218     bottom: 0;
 219     left: 0;
 220     right: 0;
 221     background: rgba(0, 0, 0, 0.75);
 222     text-shadow: 1px 1px 0 #000;
 223     padding: 0 5px;
 224     color: #FFF;
 225     width: 600px;
 226     font-size: 0.813em;
 227     line-height: 1.923em; }
 228
 229 #modelList {
 230   margin-left: 1.5em; }
 231   #modelList li {
 232     margin-bottom: 0.781em;
 233     list-style-type: disc; }
 234   #modelList .name {
 235     font-weight: bold; }
 236
 237 #contribList {
 238   background: #333333;
 239   margin: 25px -10px;
 240   padding: 20px 10px;
 241   -moz-border-radius: 5px;
 242   -webkit-border-radius: 5px;
 243   -o-border-radius: 5px;
 244   -ms-border-radius: 5px;
 245   -khtml-border-radius: 5px;
 246   border-radius: 5px;
 247   -moz-box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
 248   -webkit-box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
 249   -o-box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
 250   box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
 251   overflow: hidden;
 252   *zoom: 1;
 253   text-shadow: none;
 254   color: white;
 255   -webkit-font-smoothing: antialiased; }
 256   #contribList li {
 257     width: 343px;
 258     float: left;
 259     margin: 0 5px 10px 5px;
 260     padding: 10px;
 261     background: #262626;
 262     border: 1px solid #1a1a1a;
 263     -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 0 0 rgba(255, 255, 255, 0.15);
 264     -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 0 0 rgba(255, 255, 255, 0.15);
 265     -o-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 0 0 rgba(255, 255, 255, 0.15);
 266     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 0 0 rgba(255, 255, 255, 0.15);
 267     overflow: hidden;
 268     *zoom: 1;
 269     -moz-border-radius: 3px;
 270     -webkit-border-radius: 3px;
 271     -o-border-radius: 3px;
 272     -ms-border-radius: 3px;
 273     -khtml-border-radius: 3px;
 274     border-radius: 3px; }
 275   #contribList .name, #contribList .description, #contribList .status {
 276     display: block; }
 277   #contribList .name {
 278     font-weight: bold; }
 279   #contribList .description {
 280     color: #999999; }
 281   #contribList .status {
 282     font-style: italic;
 283     font-size: 0.813em;
 284     line-height: 1.923em;
 285     float: right; }
 286
 287 footer {
 288   margin-top: 25px;
 289   padding-top: 20px;
 290   border-top: 5px solid #333333;
 291   -moz-box-shadow: 0 1px 0 0 white inset;
 292   -webkit-box-shadow: 0 1px 0 0 white inset;
 293   -o-box-shadow: 0 1px 0 0 white inset;
 294   box-shadow: 0 1px 0 0 white inset;
 295   font-size: 0.813em;
 296   line-height: 1.923em;
 297   color: #666666; }
 298   footer a {
 299     text-decoration: none;
 300     color: #5974aa; }
 301     footer a:hover {
 302       color: #131924; }