blockquote {
  border-left: 4px solid #ccc;
  font-style:italic;
}

blockquote {
  box-sizing: border-box;
  padding:0 10px;
}

footer {
  text-align: center;
  color:#fff;
}

pre {
  border-width:0 0 0 4px;
  background: #fff;
}

/* -------- homepage css -----------------*/

.homepage header {
  margin:0 auto;
  padding:3em 0;
  box-sizing: border-box;
  background:#19242F url(//thephpleague.com/img/header_bg.png) no-repeat top center;
  background-size: cover;
  max-width: none;
  color:#fff;
  font-family: "Museo 300";
  text-align: center;
}

.homepage header h1 {
  margin:.3em auto;
  font-family: "Museo 300";
  font-size:96px;
  font-weight: normal;
}

.homepage header h2 {
  margin:0 auto;
  font-family: "Museo 300";
  color:#ff4043;
  font-size:36px;
  line-height:1.33;
  font-weight:normal;
}

.homepage .composer span {
  padding:.3em 1em;
  background-color:rgba(0, 0, 0, .3);
  color:#fff;
  font-family: Consolas, Monaco ,'Andale Mono', monospace;
  line-height: 140%;
  text-align: left;
  white-space: pre;
  word-wrap: normal;
  word-spacing: normal;
  hyphens: none;
  display:inline-block;
  border-radius: .3em;
}

.homepage main {
  color: #2b3d50;
  font-family: "Museo 300";
  line-height: 160%;
  font-weight: normal;
  background:#19242f;
  width:auto;
  right:auto;
}

.homepage main > div {
  margin:0 auto;
  padding:3em 0;
  box-sizing: border-box;
}

.inner-content {
  margin:0 auto;
  padding:1em;
  box-sizing: border-box;
  text-align:center;
}

.inner-content h1 {
  color:#fff;
  font-size:50px;
  line-height:100%;
  font-weight:normal;
  font-family:"Museo Sans 300", sans-serif;
  text-transform:uppercase;
  margin:0;
}

.inner-content:after {
  content: '';
  display:table;
  clear:both;
}

.packages-list {
  display:flex;
  align-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1000px;
}

.documentation .packages-list h1 {
  flex-grow: 1;
  width:100%;
  font:normal 1.5em/1.5 "Museo 300";
  text-align: center;
  text-transform: lowercase;
}

.documentation .packages-list strong {
  color:#900;
}

.documentation .packages-list .message-notice {
  flex-grow: 1;
  width:100%;
  text-align: center;
}

.documentation .packages-list .message-notice a {
  color:#000;
  font-size:1em;
}

.documentation .packages-list .message-notice a:hover {
  text-decoration: underline;
}

.documentation .packages-list .message-notice a:before {
  content:'';
}

.documentation .packages-list dd a {
  font-size:1em;
}

.documentation .packages-list dd a:hover {
  text-decoration: underline;
}

.documentation .packages-list dd a:before {
  content:'';
}


.packages-list dl {
  flex-grow: 1;
  width:100%;
  text-align: left;
  padding-left:.3rem;
}

.packages-list dd {
  margin:.5em 0 0 0;
}

.inner-content .packages-list a {
  color:#1672CE;
  text-decoration: none;
  font-size:1.5em;
}

.inner-content .packages-list a:hover {
  text-decoration: underline;
}

.features {
  background: #F2F7FC;
  border-bottom:1px solid #CFE4F9;
  color:#666;
  font:normal 18px/1.5 "Museo 300";
}

.features h1 {
  color:#6abcdd;
}

.features h2 {
  color:#6abcdd;
  font-weight: normal;
}

.features p {
  text-align: center;
}

.features a {
  color:#6abcdd;
}

.highlights {
  background:#fff;
  border-bottom:1px solid #CFE4F9;
}

.highlights .description {
  color:#666;
  font:normal 18px/1.5 "Museo 300";
  text-align: left;
}

.highlights h1 {
  color:#ff4043;
  font-size: 36px;
  line-height:115%;
}

.highlights ol {
  margin:0;
  text-align:left;
}

.highlights li {
  margin:0 0 15px 0;
  color:#666;
  font-size:16px;
  font-weight:bold;
}

.highlights a {
  color:#ff4043;
}

.highlights li p {
  margin:0;
  font:normal 18px/1.4 "Museo 300";
  color:#ff4043;
}

.documentation {
  background: #F2F7FC;
  border-bottom:1px solid #CFE4F9;
}

.documentation h1 {
  margin-bottom:.5em;
  font-size:36px;
  color:#6abcdd;
}

.documentation .footnote {
  clear:both;
}

.documentation .version {
  margin:.3em auto;
  padding:0;
  border:1px solid #0491a0;
  max-width:289px;
}

.documentation .version h2 {
  margin:0;
  padding:.3em;
  text-transform: uppercase;
  font-size:18px;
  color:#fff;
  background:#0491a0;
}

.documentation .version ul {
  list-style: none;
  text-align: left;
}

.documentation .version a {
  display: inline-block;
  padding: 13px 15px;
  color: white;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  font-weight: bold;
  line-height: 100%;
  text-transform: uppercase;
  text-decoration: none;
  background: #ff5759;
  border-radius: 4px;
  box-shadow: 3px 3px 0 #d42f30;
}

.documentation .version a:hover {
  background: #e75557;
}

.documentation .version .content {
  padding:1em 0;
  background: #fff;
}

.documentation .next {
  border-color:#0491a0;
}

.documentation .next h2 {
  background:#0491a0;
}

.documentation .next a {
  background: #0491a0;
  border-radius: 4px;
  box-shadow: 3px 3px 0 #03565e;
}

.documentation .next a:hover {
  background: #0a7c87;
}

.documentation .current {
  border-color:#2db56a;
}

.documentation .current h2 {
  background:#2db56a;
}

.documentation .current a {
  background: #2db56a;
  border-radius: 4px;
  box-shadow: 3px 3px 0 #1a7742;
}

.documentation .current a:hover {
  background: #259b58;
}

.documentation .previous {
  border-color:#ff8300;
}

.documentation .previous h2 {
  background:#ff8300;
}

.documentation .previous a {
  background: #ff8300;
  border-radius: 4px;
  box-shadow: 3px 3px 0 #a85401;
}

.documentation .previous a:hover {
  background: #e56b00;
}

.documentation .legacy {
  border-color:#e74c3c;
}

.documentation .legacy h2 {
  background:#e74c3c;
}

.documentation .legacy a {
  background: #e74c3c;
  border-radius: 4px;
  box-shadow: 3px 3px 0 #a3342a;
}

.documentation .legacy a:hover {
  background: #c94034;
}

.questions {
  padding:0;
  background:#fff;
  color:#666;
  border-bottom:1px solid #CFE4F9;
}

.questions h1 {
  font-size:36px;
  color:#ff4043;
}

.questions a {
  color:#6abcdd;
}

.questions a:hover {
  text-decoration: none;
}

@media screen and (min-width: 450px) {
  .packages-list dl {
    flex-grow: 1;
    width:49%;
    text-align: left;
    padding-left:.3rem;
    margin-right:1%;
  }

  .packages-list dd {
    margin-left:2em;
  }

  .inner-content .packages-list a:before {
    content:'\1F517  ';
    color:transparent;
  }

  .inner-content .packages-list a:hover {
    text-decoration: none;
  }

  .inner-content .packages-list a:hover::before {
    color:#1672CE;
  }
}

@media screen and (min-width: 549px) {
  .homepage header h1 {
    margin:0 auto;
  }

  .inner-content {
    max-width:1000px;
  }

  .homepage main {
    width:initial;
    right:initial;
  }

  .highlights h1 {
    font-size: 50px;
  }

  .highlights li {
    font-size:24px;
  }

  .highlights li p {
    font-size:20px;
  }

  .highlights .column {
    float:left;
    width:45%;
  }

  .highlights .one {
    margin:0 10% 0 0;
  }

  .documentation h1 {
    font-size:50px;
  }
}

@media screen and (min-width: 600px) {
  .packages-list dl {
    flex-grow: 1;
    width:32%;
    text-align: left;
    padding-left:.3rem;
    margin-right:1%;
  }
}


@media screen and (min-width:700px) {
  .documentation .version {
    float:left;
    width:42%;
    margin:2%;
    max-width:289px;
  }
}

@media screen and (min-width: 910px) {
  .documentation .version {
    float:left;
    width:30%;
    margin:1%;
  }
}

.sponsors {
  background: #f68fc8;
  border-bottom:none;
  color: #ffffff;
  font:normal 1em/1.5 "Museo 300";
  text-align:center;
  margin:0 auto;
  padding:0;
}

.sponsors p {
  margin:0 auto;
  padding:.5em .3em;
}

.sponsors a {
  display:inline-block;
  background: #ea0a86;
  color: #fff;
  border-radius: .3em;
  text-decoration: none;
  padding:.4em;
  cursor: pointer;
}

.sponsors a.close {
  background: transparent;
  color:#ea0a86;
  text-decoration: underline;
  padding:.2em;
  font-size: .8em;
}

.hide {
  display:none;
}

@media screen and (max-width: 520px) {
  .sponsors p {
    width: 250px;
    margin: .3em auto 0;
  }
}