/*body { background: url(images/h.png) 0 5px; } div.bottomarea { background: url(images/h.png) 0 17px; } div.toparea > div.inner { background: url(images/v.png) 0 145px; } div.bottomarea > div.inner { background: url(images/v.png) 0 -3px; }*/

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
{
  display: block;
}

@font-face
{
  font-family: 'body';
  src: url('fonts/FedraSansBook.eot');
  src: url('fonts/FedraSansBook.eot?#iefix') format('embedded-opentype'),
       url('fonts/FedraSansBook.woff') format('woff'),
       url('fonts/FedraSansBook.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face
{
  font-family: 'body';
  src: url('fonts/FedraSansMedium.eot');
  src: url('fonts/FedraSansMedium.eot?#iefix') format('embedded-opentype'),
       url('fonts/FedraSansMedium.woff') format('woff'),
       url('fonts/FedraSansMedium.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

/*@font-face
{
  font-family: 'body-tabular';
  src: url('fonts/FedraSansBookTabular.eot');
  src: url('fonts/FedraSansBookTabular.eot?#iefix') format('embedded-opentype'),
       url('fonts/FedraSansBookTabular.woff') format('woff'),
       url('fonts/FedraSansBookTabular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face
{
  font-family: 'body-tabular';
  src: url('fonts/FedraSansMediumTabular.eot');
  src: url('fonts/FedraSansMediumTabular.eot?#iefix') format('embedded-opentype'),
       url('fonts/FedraSansMediumTabular.woff') format('woff'),
       url('fonts/FedraSansMediumTabular.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}*/

@font-face
{
  font-family: 'mono';
  src: url('fonts/FedraMonoBook.eot');
  src: url('fonts/FedraMonoBook.eot?#iefix') format('embedded-opentype'),
       url('fonts/FedraMonoBook.woff') format('woff'),
       url('fonts/FedraMonoBook.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face
{
  font-family: 'logo';
  src: url('fonts/FedraMonoMediumItalic.eot');
  src: url('fonts/FedraMonoMediumItalic.eot?#iefix') format('embedded-opentype'),
       url('fonts/FedraMonoMediumItalic.woff') format('woff'),
       url('fonts/FedraMonoMediumItalic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face
{
  font-family: 'home';
  src: url('fonts/FedraSansDisplay2BlackCondensed.eot');
  src: url('fonts/FedraSansDisplay2BlackCondensed.eot?#iefix') format('embedded-opentype'),
       url('fonts/FedraSansDisplay2BlackCondensed.woff') format('woff'),
       url('fonts/FedraSansDisplay2BlackCondensed.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

html,
body
{
  width: 100%;
  height: 100%;
}
body,
tspan
{
  margin: 0;
  padding: 0;
  font: 15px/20px body, sans-serif;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  background-color: #fff;
  color: #000;
}
tspan
{
  font-size: 12px;
  line-height: 15px;
}
body.home,
div.bottomarea
{
  background-color: #000;
  color: #fff;
}
body.error
{
  background-color: #ed0f08;
}
div.wrapper
{
  display: -webkit-box;
  display: -moz-box;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  min-height: 100%;
  width: 100%;
}
div.toparea
{
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
}
div.toparea div.inner,
div.bottomarea div.inner
{
  width: 700px;
  margin: 0 auto;
}
div.bottomarea div.inner
{
  padding: 17px 34px;
}
div.toparea div.inner
{
  padding: 0 34px 23px 34px;
}

a
{
  text-decoration: underline;
  color: #000;
}
body.home a,
div.bottomarea a
{
  color: #fff;
}
article a:hover,
body.products section a:hover,
body.services section a:hover,
p.tagline a:hover
{
  position: relative;
  margin: 0 -3px 0 -3px;
  border: 3px solid #000;
  border-width: 4px 3px 3px 3px;
  background-color: #000;
  color: #fff;
  text-decoration: none;
}
figure figcaption a:hover
{
  margin: 0 -2px 0 -2px;
  border-width: 3px 2px 2px 2px;
}
p.tagline a:hover
{
  border-color: #fff;
  background-color: #fff;
  color: #000;
}
a[href]:active,
div.promos a[href]:active img
{
  position: relative;
  top: 1px;
}
div.promos a[href]:active
{
  top: 0;
}

nav
{
  position: relative;
  height: 65px;
}
nav a
{
  display: block;
  position: absolute;
  top: -1px;
  width: 160px;
  padding: 6px 0 10px 0;
  border-top: 0 solid #000;
  text-decoration: none;
}
body.home nav a
{
  border-color: #fff;
}
nav a.current
{
  padding-top: 3px;
  border-width: 3px;
}
nav a[href]:hover
{
  padding-top: 1px;
  border-width: 5px;
}
nav a[href]:active
{
  top: 0;
  border-width: 5px;
}
nav a#nav-home
{
  left: 0;
  font: 15px/20px logo, monospace;
  font-style: italic;
  text-transform: lowercase;
  text-rendering: optimizeSpeed;
}
nav a#nav-weblog
{
  left: 180px;
}
nav a#nav-stories
{
  left: 360px;
}
nav a#nav-services
{
  left: 540px;
}
nav h1,
nav ul,
nav li
{
  display: inline;
}
nav h1
{
  font-size: 100%;
  font-weight: normal;
}
nav li
{
  list-style-type: none;
}
nav a span
{
  display: none;
}

header
{
  position: relative;
  min-height: 200px;
  margin: -5px 0 3px 0;
  padding: 3px 0 15px 0;
  border-top: 2px solid #000;
}
body.home header
{
  border-top-color: #fff;
}
article header div.meta
{
  position: absolute;
  left: 0;
  top: 100%;
  width: 160px;
  padding-top: 5px;
  border-top: 2px solid #000;
}
article header div.meta p
{
  margin: 0;
}
article header div.meta,
figure figcaption
{
  font-size: 12px;
  line-height: 15px;
}
article div.body
{
  margin: -3px 0 0 180px;
  padding: 3px 0 0 0;
  border-top: 2px solid #000;
}

header h1
{
  position: relative;
  top: 1px;
  margin: 0;
  font-size: 43px;
  line-height: 40px;
  font-weight: bold;
}
h2,
h3,
h4
{
  margin: 0 0 20px 0;
  font-size: 100%;
  font-weight: bold;
}
h4
{
  margin: 20px 0 0 0;
}
p,
figure
{
  margin: 0 0 20px 0;
}
ul,
ol,
dl,
li
{
  margin: 0;
  padding: 0;
}
article ul,
article ol
{
  margin: 20px 0;
}
li li
{
  margin-left: 20px;
}
em,
p.question
{
  font-weight: bold;
  font-style: normal;
}
blockquote
{
  position: relative;
  margin: 0 40px;
}
blockquote:before
{
  content: "“";
  display: block;
  position: absolute;
  top: 0;
  left: -1em;
  width: 1em;
  text-align: right;
}
blockquote p:last-child:after
{
  content: "”";
}

figure
{
  display: block;
  position: relative;
}
figure span.img
{
  display: block;
  background-color: #888;
}
figure.mask img
{
  opacity: 0.92;
}
figure.screenshot span.img
{
  background-color: transparent;
}
figure img
{
  display: block;
  margin: 0;
  padding: 0;
  border: none;
}
figure.double,
figure.wide
{
  margin-left: -180px;
}
figure > span.img
{
  position: relative;
  top: 3px;
}
figure.double > div
{
  position: relative;
  padding: 3px 0;
}
figure span.img,
figure img
{
  width: 520px;
}
figure.double span.img,
figure.double img
{
  width: 340px;
}
figure.double span.five.img,
figure.double span.five.img img
{
  width: 430px;
}
figure.double span.three.img,
figure.double span.three.img img
{
  width: 250px;
}
figure.wide span.img,
figure.wide img
{
  width: 700px;
}
figure.wide video
{
  position: relative;
  top: 3px;
}
figure.wide video p
{
  padding-left: 180px;
  font-weight: bold;
}
figure.double span.img + span.img
{
  position: absolute;
  top: 3px;
  right: 0;
}
figure figcaption
{
  position: absolute;
  width: 160px;
  left: -180px;
  top: 4px;
}
figure.double figcaption,
figure.wide figcaption
{
  left: 0;
  top: 100%;
  margin-top: 22px;
}
figure figcaption p
{
  margin: 0 0 15px 0;
}
figure.border span.img,
figure.border video
{
  outline: 1px solid #999;
}

figure > pre
{
  display: block;
  position: relative;
  top: -2px;
  margin: -2px 0 -6px 0;
  padding: 2px 0 4px 0;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  white-space: pre-wrap;
}
figure > pre,
code,
tt
{
  font: 12px/20px mono, monospace;
  text-rendering: optimizespeed;
}
figure table
{
  border-collapse: collapse;
  margin: 0;
  padding: 0;
}
figure table th,
figure table td
{
  margin: 0;
  padding: 0;
  text-align: left;
}
figure table.narrow-cols th,
figure table.narrow-cols td
{
  width: 90px;
}
figure table.wide-cols th,
figure table.wide-cols td
{
  width: 160px;
}
figure table.wide-cols th + th,
figure table.wide-cols td + td,
figure table.wide-cols th + td,
figure table.wide-cols td + th
{
  padding-left: 20px;
}

body.home header h1
{
  top: 20px;
  left: 3px;
  font: 297px/220px home;
  text-transform: uppercase;
  text-rendering: optimizeSpeed;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: default;
}
body.home header h1 span.small
{
  position: relative;
  top: -10px;
  left: -3px;
  display: block;
  font: 156px/120px home;
  text-rendering: optimizeLegibility;
  letter-spacing: 1px;
}
body.home header h1 span.p1
{
  letter-spacing: 1px;
}
body.home header h1 span.p2
{
  letter-spacing: 2px;
}
body.home header h1 span.m1
{
  letter-spacing: -2px;
}
body.home header h1 span.m2
{
  letter-spacing: -2px;
}
body.home header h1 span.make
{
  position: relative;
  left: 2px;
}
body.home header h1 span.asterisk
{
  position: relative;
  top: 14px;
  left: -5px;
}

div.highlights
{
  float: left;
  width: 703px;
  margin: 0 0 24px 0;
}
div.bottomarea div.highlights
{
  margin-top: 20px;
}
div.highlights a
{
  display: block;
  float: left;
  width: 160px;
  margin: -5px 0 16px 0;
  padding: 3px 0 4px 0;
  border-top: 2px solid #000;
  text-decoration: none;
}
div.highlights a + a
{
  margin-left: 20px;
}
div.highlights a:hover
{
  margin-left: -3px;
  margin-right: -3px;
  padding-left: 3px;
  padding-right: 3px;
  background-color: #000;
  border-color: #000;
  color: #fff;
}
div.bottomarea div.highlights a:hover
{
  background-color: #fff;
  border-color: #fff;
  color: #000;
}
div.highlights a + a:hover
{
  margin-left: 17px;
}
div.highlights p,
div.highlights h2
{
  margin: 0;
}
div.highlights time
{
  display: block;
  position: relative;
  top: -1px;
  font-size: 12px;
  color: #888;
}
div.highlights a:hover time
{
  color: #fff;
}
div.bottomarea div.highlights a:hover time
{
  color: #000;
}

div.archive
{
  clear: both;
  margin-bottom: 11px;
}
div.archive div
{
  position: relative;
  top: -9px;
  margin: 0 0 0 180px;
  padding: 3px 0 0 0;
  border-top: 2px solid #000;
}
div.archive div + div
{
  padding: 0;
  border: none;
}
div.archive h2
{
  position: absolute;
  top: -2px;
  left: -180px;
  width: 160px;
  margin: 0;
  padding: 3px 0 0 0;
  text-align: right;
  border-top: 2px solid #000;
}
div.archive div + div h2
{
  top: 2px;
  padding: 0;
  border: none;
}
div.archive ul
{
  margin: 0;
}
div.archive li
{
  list-style-type: none;
}
div.archive li a
{
  display: block;
  margin: -2px 0 0 -3px;
  padding: 2px 0 0 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
div.archive li a:hover
{
  background-color: #000;
  color: #fff;
}

body.products section#products > div
{
  position: relative;
  top: -5px;
  padding: 3px 0 15px 0;
  border-top: 2px solid #000;
}
body.products section#products > div > div
{
  margin: 0 0 0 180px;
}
body.products section#products h2
{
  position: relative;
  top: 1px;
  margin: 0 0 20px 0;
  font-size: 43px;
  line-height: 40px;
  font-weight: bold;
}
body.products section#products img
{
  position: absolute;
  top: -4px;
  left: -10px;
}
body.products section#oss
{
  padding-bottom: 0;
}

.get a,
.get a:hover
{
  display: inline-block;
  margin: -3px 0 0 -3px !important;
  padding: 3px 0 0 3px;
  border: none !important;
  border-radius: 5px;
  text-decoration: none;
}
.get span.tag
{
  position: relative;
  top: -1px;
  margin: 0 4px 0 0;
  padding: 4px 4px 1px 4px;
  font-size: 12px;
  line-height: 15px;
  background-color: #000;
  color: #fff;
  border-radius: 3px;
  font-weight: normal;
}
.get a:hover span.tag
{
  background-color: #fff;
  color: #000;
  border-radius: 2px;
}
.get span.tag.soon
{
  background-color: #ed0f08;
  text-transform: uppercase;
  font-weight: bold;
}
.get a span.link
{
  margin: 0 4px 0 0;
  padding: 0 4px;
  text-decoration: underline;
}
.get a:hover span.link
{
  text-decoration: none;
}
.get a span.arrow
{
  position: absolute;
  color: #fff;
  font-size: 40px;
}
/*p.get.download a
{
  padding-right: 26px;
  overflow: hidden;
}
p.get.download a:hover span.link:after
{
  content: "↓";
  position: absolute;
  bottom: 7px;
  right: 0;
  font-size: 45px;
  color: #ed0f08;
  color: #fff;
  color: #aaa;
}
p.get.download a:active span.link:after
{
  bottom: 6px;
}*/

body.services section,
section#oss
{
  clear: both;
  position: relative;
  margin: 0 0 20px 180px;
  margin: -5px 0 3px 180px;
  padding: 3px 0 17px 0;
  border-top: 2px solid #000;
}
body.services section h2,
section#oss h2
{
  position: absolute;
  top: -2px;
  left: -180px;
  width: 160px;
  margin: 0;
  padding: 3px 0 0 0;
  border-top: 2px solid #000;
}
body.services section > h3,
body.services section > div > h3
{
  position: relative;
}
body.services section > h3 span,
body.services section > div > h3 span
{
  display: block;
  position: absolute;
  top: 0;
  left: -180px;
  width: 160px;
  margin: 0;
  text-align: right;
}
body.services em
{
  background-color: #fff8aa;
  font-style: normal;
}
body.services ol li
{
  position: relative;
  margin: -5px 0 0 180px;
  padding: 3px 0 0 0;
  border-top: 2px solid #000;
  list-style-type: none;
}
body.services ol li h4
{
  position: absolute;
  top: -2px;
  left: -180px;
  width: 160px;
  margin: 0;
  padding: 3px 0 0 0;
  border-top: 2px solid #000;
  font-size: 43px;
  line-height: 40px;
  font-weight: normal;
}
body.services ol li h4 span
{
  display: block;
}

section.people li
{
  position: relative;
  height: 180px;
  margin: 0 0 20px 180px;
  list-style-type: none;
}
section.people img
{
  position: absolute;
  top: 3px;
  left: -180px;
  width: 160px;
  height: 174px;
  margin: 0;
  background-color: #ccc;
}
section.people h3
{
  position: relative;
  top: 1px;
  margin: 0;
  font-size: 43px;
  line-height: 40px;
  font-weight: normal;
}
section.people h3 span
{
  display: block;
}
section.people p
{
  margin: 0 0 20px 0;
}
section.people p + p
{
  margin: 0;
}

section#testimonials > div p
{
  position: relative;
}
section#testimonials > div p:before
{
  content: "“";
  display: block;
  position: absolute;
  top: 0;
  left: -1em;
  width: 1em;
  text-align: right;
}
section#testimonials > div p:after
{
  content: "”";
}

ul.highlights li
{
  margin-bottom: 20px;
  list-style-type: none;
}

ul.clients
{
  float: left;
  width: 540px;
  margin: 0 0 35px 0;
}
ul.clients li
{
  float: left;
  width: 270px;
  list-style-type: none;
}
ul.clients li a,
ul.clients li a:hover
{
  display: block;
  width: 250px;
  margin: -2px 0 0 -3px;
  padding: 2px 0 0 3px;
  text-decoration: none;
  color: #000;
}
ul.clients li a:hover
{
  background-color: #000;
  color: #fff;
  border: none;
}

body.services section#contact
{
  border-color: transparent;
}
section#contact div.adr,
section#contact div.email_and_links
{
  position: relative;
  width: 250px;
  margin: -5px 0 0 0;
  padding: 3px 0 0 0;
  border-top: 2px solid #000;
}
section#contact div.email_and_links
{
  position: absolute;
  top: 3px;
  left: 270px;
}
section#contact div.email_and_links p
{
  margin: 0;
}
section#contact div.email_and_links p:first-child
{
  margin-bottom: 20px;
}
section#contact div.various
{
  position: relative;
  margin: -5px 0 0 0;
  padding: 3px 0 0 0;
  border-top: 2px solid #000;
}
section#contact div.various p + p
{
  margin: 20px 0 0 0;
}
section#contact div.various span
{
  display: block;
}
section#contact div.various p > span
{
  position: relative;
  margin: 0 0 0 270px;
}
section#contact div.various p > span > span
{
  position: absolute;
  left: -270px;
  width: 250px;
  text-align: right;
}
section#contact div.various p > span > span + span
{
  position: absolute;
  left: -20px;
  width: 20px;
}

p.tagline
{
  position: relative;
  display: block;
  margin: 0 0 20px 0;
  padding: 20px 0 0 80px;
  text-decoration: none;
}
p.tagline:before
{
  content: "f";
  display: block;
  position: absolute;
  top: 3px;
  left: 0;
  width: 54px;
  height: 54px;
  background-color: #ed0f08;
  color: #fff;
  font: 31px/54px logo, monospace;
  font-style: italic;
  text-align: center;
}
body.error p.tagline:before
{
  background-color: #000;
}
.bottomarea p.tagline
{
  margin-top: -20px;
}
body.home p.tagline
{
  margin-top: 20px;
}
body.home p.tagline span.asterisk
{
  position: absolute;
  top: 20px;
  left: 60px;
  width: 20px;
  text-align: right;
}

div.promos
{
  float: left;
  width: 100%;
  margin: 20px 0 20px 0;
  padding: 3px 0 18px 0;
}
div.promos a
{
  float: left;
  display: block;
  position: relative;
  text-decoration: none;
  font-size: 12px;
  line-height: 15px;
}
div.promos a,
div.promos a div
{
  width: 160px;
}
div.promos a > div
{
  position: relative;
  height: 114px;
  margin: 0 0 5px 0;
  background: #666 url(images/promobg.png);
  background-size: 160px 114px;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  div.promos a > div
  {
    background-image: url(images/promobg2x.png);
  }
}
div.promos a[href]:hover > div
{
  -webkit-box-shadow: 0 0 15px rgba(250,250,250,0.9);
  -moz-box-shadow: 0 0 15px rgba(250,250,250,0.9);
  box-shadow: 0 0 15px rgba(250,250,250,0.9);
}
div.promos a img
{
  display: block;
  width: 160px;
  height: 114px;
  position: relative;
  border: none;
}
div.promos a + a
{
  margin-left: 20px;
}
div.promos a b
{
  display: block;
}
div.promos a[href]:hover b
{
  text-decoration: underline;
}
div.promos div.soon
{
  display: block;
  position: absolute;
  left: 0;
  top: 95px;
  padding: 4px 0 0 0;
  width: 100%;
  background-color: #ed0f08;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  -webkit-transform: translate(71px, -49px) rotate(-90deg);
  -moz-transform: translate(71px, -49px) rotate(-90deg);
  transform: translate(71px, -49px) rotate(-90deg);
}

p.follow
{
  margin: 0;
  padding: 0 0 5px 0;
  font-size: 12px;
  line-height: 15px;
  text-align: center;
}
p.follow a
{
  margin: -6px;
  padding: 6px;
  text-decoration: none;
}
p.follow a:hover
{
  text-decoration: underline;
}
body.home p.follow,
body.home p.follow a
{
  display: none;
  color: #666;
}

hr,
.hide
{
  display: none !important;
}

p.rubybanter a
{
  display: block;
}
p.rubybanter a:hover
{
  margin: 0 !important;
  border: none !important;
  background: none !important;
}
p.rubybanter img
{
  display: block;
  width: 100%;
}

@media print {
  nav a:not([class]),
  div.bottomarea
  {
    display: none;
  }
  nav a
  {
    border-color: #fff;
  }
}