/* Couldn't seem to separate these into multiple files using @import */
/* ************ VARIABLES ************ */
/* ************ MIXINS ************ */
/* ************ BASE ************ */
h1 {
  font-size: 196%; }

h2 {
  font-size: 153.9%; }

h3 {
  font-size: 138.5%; }

h4 {
  font-size: 123.1%; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', verdana, clean, sans-serif;
  font-weight: 600;
  line-height: 1.2em; }

body {
  color: #36353a; }
  body a:link, body a:visited {
    color: #36353a;
    text-decoration: underline; }
  body a:hover {
    color: #ce086c; }

table {
  margin: 20px 0;
  width: 100%; }
  table th, table td {
    font-size: 85%;
    padding: 10px; }
  table th {
    background: #36353a;
    filter: alpha(opacity=90);
    -moz-opacity: 0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
    color: white;
    border-bottom: 1px solid #5b5a62;
    text-align: left;
    line-height: 1.1em; }
  table td {
    text-align: left;
    border-bottom: 1px solid #f4f2eb; }

/* ************ UTILS ************ */
.pill, .code, .command, #marketing-page #comparisons #memory-usage-comparison ul li {
  color: #ebe7db;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  padding: 6px; }

.code, .command {
  background-color: #36353a;
  font-size: 85%;
  font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
  padding-left: 15px;
  letter-spacing: 1px;
  font-weight: normal;
  position: relative; }
  .code.gemfile, .command.gemfile {
    background-image: url(../images/icons/gemfile.png);
    background-repeat: no-repeat;
    background-position: right 11px; }

.command:before {
  content: "$ "; }

.section-header, #marketing-page h3 {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 108%;
  margin-top: 45px;
  margin-bottom: 10px;
  line-height: 1.2em;
  color: #0089a5; }

.inner-header, ul.testimonials li .quote-with-citation .citation, #marketing-page h4 {
  font-size: 108%;
  font-style: italic;
  margin-bottom: 10px;
  line-height: 1.2em; }
  .inner-header span, ul.testimonials li .quote-with-citation .citation span, #marketing-page h4 span {
    font-size: 85%;
    font-weight: normal; }

.page-header, .simple-page h1 {
  font-family: 'Montserrat', "Trebuchet MS", verdana, clean, sans-serif;
  font-weight: 300;
  color: #0089a5;
  letter-spacing: 3px;
  text-transform: uppercase; }

.blockquote, ul.testimonials li .quote-with-citation blockquote, .simple-page blockquote {
  font-size: 100%;
  font-family: "Georgia", serif;
  line-height: 1.4em;
  margin: 0;
  padding: 20px 10px 5px 40px;
  background-color: #f4f2eb;
  background-image: url(../images/icons/quote-1.png);
  background-repeat: no-repeat;
  background-position: 20px 10px;
  font-style: italic; }

ul.testimonials {
  margin: 0;
  padding: 0; }
  ul.testimonials li {
    margin: 30px 0;
    padding: 0;
    position: relative;
    min-height: 115px; }
    ul.testimonials li .testimonial-photo {
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      position: absolute;
      left: 10px;
      top: -20px;
      padding: 3px;
      background-color: #f8f6f2;
      line-height: 0; }
      ul.testimonials li .testimonial-photo img {
        width: 115px;
        height: 115px; }
        @media only screen and (max-width: 480px) {
          ul.testimonials li .testimonial-photo img {
            width: 75px;
            height: 75px; } }
    ul.testimonials li .quote-with-citation blockquote {
      padding-left: 160px;
      background-position: 140px 10px; }
      @media only screen and (max-width: 480px) {
        ul.testimonials li .quote-with-citation blockquote {
          padding-left: 115px;
          background-position: 95px 10px; } }
    ul.testimonials li .quote-with-citation .citation {
      font-size: 93%;
      padding-top: 10px;
      text-align: right;
      margin: 0 10px;
      line-height: 1em; }
    ul.testimonials li:nth-child(even) .testimonial-photo {
      left: auto;
      right: 10px; }
    ul.testimonials li:nth-child(even) .quote-with-citation blockquote {
      padding-left: 30px;
      padding-right: 140px;
      background-image: url(../images/icons/quote-2.png);
      background-position: 10px 10px; }
      @media only screen and (max-width: 480px) {
        ul.testimonials li:nth-child(even) .quote-with-citation blockquote {
          padding-right: 115px; } }
    ul.testimonials li:nth-child(even) .quote-with-citation .citation {
      padding-left: 0;
      padding-right: 140px;
      text-align: left; }
      @media only screen and (max-width: 480px) {
        ul.testimonials li:nth-child(even) .quote-with-citation .citation {
          padding-right: 115px; } }

ul.resources {
  font-size: 85%;
  margin: 0;
  padding: 0; }
  ul.resources li {
    padding: 0;
    line-height: 1.7em;
    margin-bottom: 1px;
    background: #f4f2eb;
    padding: 0.4em 10px 0.4em 33px; }
    ul.resources li.document, ul.resources li.asset, ul.resources li.twitter {
      background-position: 10px 8px;
      background-repeat: no-repeat; }
    ul.resources li.document {
      background-image: url(../images/icons/document.png); }
    ul.resources li.asset {
      background-size: 16px;
      background-image: url(../images/icons/puma-favicon-32.png); }
    ul.resources li.twitter {
      background-position: 8px 8px;
      background-image: url(../images/icons/twitter.png); }

/* ************ LAYOUT ************ */
html {
  background: #ebe7db url(../images/puma-footer.jpg) no-repeat right bottom; }
  @media only screen and (max-width: 480px) {
    html {
      background-position: center bottom; } }

#page-container {
  max-width: 690px;
  padding: 20px;
  margin: auto; }
  
#external-services-container {
  text-align: right;
  margin: 20px 20px 20px 0;
  font-size: 77%; }
  #external-services-container #share {
    margin: 0; }
    #external-services-container #share li {
      display: inline-block;
      zoom: 1;
      *display: inline; }
      #external-services-container #share li.mail .s-ico {
        background: transparent url(../images/icons/mail.png) no-repeat 1px 2px; }
      #external-services-container #share li.facebook {
        position: relative;
        top: 1px; }
      #external-services-container #share li.twitter iframe {
        width: 85px !important; }
  #external-services-container #ci-status {
    margin-top: 5px; }
    #external-services-container #ci-status a {
      line-height: 20px;
      text-decoration: none; }
    #external-services-container #ci-status img {
      vertical-align: top; }

#page-header.expanded {
  text-align: center;
  margin-bottom: 55px; }
  @media only screen and (max-width: 480px) {
    #page-header.expanded {
      margin-bottom: 40px; } }
  #page-header.expanded h1 {
    font-family: 'Montserrat', verdana, clean, sans-serif;
    font-weight: 600;
    font-size: 350%;
    letter-spacing: 20px;
    margin: 20px auto 25px;
    text-transform: uppercase; }
    #page-header.expanded h1 img {
      width: 419px;
      height: 121px; }
      @media only screen and (max-width: 480px) {
        #page-header.expanded h1 img {
          width: 300px;
          height: 87px; } }
      @media only screen and (max-width: 320px) {
        #page-header.expanded h1 img {
          width: 225px;
          height: 65px; } }
  #page-header.expanded .tagline {
    font-family: 'Montserrat', verdana, clean, sans-serif;
    font-weight: 600;
    font-size: 108%;
    letter-spacing: 3px;
    line-height: 1.4em;
    text-transform: uppercase; }
  #page-header.expanded .page-separator {
    height: 30px;
    margin-top: 40px;
    background: transparent url(../images/patterns/wave.png) repeat-x center center; }
    #page-header.expanded .page-separator img {
      background: #ebe7db;
      padding: 0 25px;
      width: 103px;
      height: 38px; }
    @media only screen and (max-width: 480px) {
      #page-header.expanded .page-separator {
        margin-top: 0; }
        #page-header.expanded .page-separator img {
          padding: 0 10px;
          width: 88px;
          height: 32px; } }

#page-header.condensed {
  text-align: left;
  background: transparent url(../images/patterns/wave.png) repeat-x center center;
  margin-bottom: 40px; }
  #page-header.condensed h1 {
    font-family: 'Montserrat', verdana, clean, sans-serif;
    font-weight: 600;
    font-size: 350%;
    letter-spacing: 20px;
    margin: 0;
    text-transform: uppercase; }
    #page-header.condensed h1 img {
      background: #ebe7db;
      padding-right: 10px; }

#page-footer {
  margin-top: 125px;
  margin-bottom: 20px;
  font-size: 85%;
  padding-left: 22px;
  background-size: 16px;
  background-image: url(../images/icons/puma-favicon-32.png);
  background-repeat: no-repeat; }

/* ************ MARKETING PAGE ************ */
#marketing-page h1, #marketing-page h2 {
  font-family: 'Montserrat', "Trebuchet MS", verdana, clean, sans-serif;
  font-weight: 300; }
#marketing-page h1, #marketing-page h2, #marketing-page h3 {
  color: #0089a5; }
#marketing-page h2, #marketing-page h3 {
  text-transform: uppercase;
  letter-spacing: 2px; }
#marketing-page ul, #marketing-page li {
  list-style: none; }
#marketing-page .section {
  margin-bottom: 60px; }
#marketing-page #overview, #marketing-page #usage {
  width: 320px;
  float: left; }
  @media only screen and (max-width: 730px) {
    #marketing-page #overview, #marketing-page #usage {
      width: 100%;
      float: none; } }
#marketing-page #overview {
  margin-right: 50px; }
  #marketing-page #overview .current-release span {
    font-size: 77%;
    background: #f8f6f2;
    padding: 5px;
    text-transform: uppercase;
    letter-spacing: 3px; }
  #marketing-page #overview h2 {
    font-size: 260%;
    margin: 0 0 20px 0;
    line-height: 1.1em; }
    @media only screen and (max-width: 480px) {
      #marketing-page #overview h2 {
        font-size: 200%; } }
  #marketing-page #overview .video {
    margin: 25px 0 40px; }
#marketing-page #usage #quickstart-with-bundler h3 {
  margin-top: 0; }
#marketing-page #testimonials {
  padding-top: 50px;
  clear: left; }
#marketing-page #history {
  font-size: 93%; }
  #marketing-page #history h4 {
    margin-bottom: 10px;
    margin-top: 20px; }
#marketing-page #comparisons .comparison {
  margin-bottom: 40px; }
#marketing-page #comparisons #memory-usage-comparison ul {
  margin: 0 0 40px;
  padding: 0; }
  #marketing-page #comparisons #memory-usage-comparison ul li {
    font-size: 77%;
    margin-bottom: 5px;
    padding-left: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    height: 15px;
    position: relative; }
    #marketing-page #comparisons #memory-usage-comparison ul li p {
      margin-bottom: 0;
      position: absolute;
      top: 6px;
      white-space: nowrap; }
    #marketing-page #comparisons #memory-usage-comparison ul li span.speed {
      font-style: italic;
      text-transform: none;
      letter-spacing: 0; }

.competitor-1 {
  background-color: #0089a5; }

.competitor-1d {
  background-color: #005f72; }

.competitor-2 {
  background-color: #f5e700; }
  .competitor-2 p {
    color: black; }

.competitor-2d {
  background-color: #c2b700;
  color: black; }

.competitor-3 {
  background-color: #36353a; }

.competitor-3d {
  background-color: #74727d; }

.puma-1 {
  background-color: #ce086c; }

.puma-1d {
  background-color: #9d0652; }

.puma-2 {
  background-color: #ccc100; }

.puma-3 {
  background-color: #36353a; }

/* ************ JQUERY VISUALIZATION THEME ************ */
.visualize {
  width: 100% !important;
  font-size: 77%;
  top: 40px;
  margin-top: 15px;
  margin-bottom: 120px; }
  @media only screen and (max-width: 480px) {
    .visualize {
      top: 60px; } }
  .visualize canvas {
    background: #f1efe6; }
  .visualize .visualize-labels-y li span.line {
    border-color: #c7bb99;
    border-style: dotted;
    z-index: 1; }
  .visualize .visualize-labels-x li span.label {
    line-height: 1.2em; }
  .visualize .visualize-info {
    background: transparent;
    border: none;
    top: -40px;
    right: auto;
    opacity: 1;
    padding: 0; }
    @media only screen and (max-width: 480px) {
      .visualize .visualize-info {
        top: -60px; } }
  .visualize ul.visualize-key li {
    line-height: 1.3em; }

/* ************ SIMPLE PAGE ************ */
.simple-page #page-content {
  min-height: 500px; }
.simple-page h1 {
  margin-top: 0;
  font-size: 235%; }
.simple-page blockquote {
  margin: 20px 0; }
.simple-page a.back {
  font-size: 85%; }

/* ************ LOGOS AND ASSETS ************ */
ul.logos {
  margin: 0;
  padding: 0; }
  ul.logos li {
    list-style: none;
    margin: 0 0 20px 0;
    padding: 0; }
    ul.logos li p {
      font-weight: bold;
      margin-bottom: 5px; }
    ul.logos li .downloads {
      font-weight: normal;
      color: #bdb089;
      font-size: 77%;
      padding-left: 3px; }
    ul.logos li .logo {
      padding: 10px;
      width: 260px;
      line-height: 1em;
      text-align: center;
      border: 1px solid #f4f2eb;
      background: url(../images/patterns/checkerboard.png); }
      ul.logos li .logo.light {
        background-color: #333333; }