/* ========================================================================== HTML5 Boilerplate styles - h5bp.com (generated via initializr.com) ========================================================================== */
html, button, input, select, textarea { color: #222; }

body { font-size: 1em; line-height: 1.4; }

::-moz-selection { background: #6A9AD4; text-shadow: none; }

::selection { background: #6A9AD4; text-shadow: none; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

img { vertical-align: middle; }

fieldset { border: 0; margin: 0; padding: 0; }

textarea { resize: vertical; }

.chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; }

/* ===== Initializr Styles ================================================== Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
============================================================================= */
body { color: #555; font: 15px/26px 'Open Sans', Helvetica, Helvetica Neue, Arial; }

.wrapper { width: 90%; margin: 0 5%; }

a:link, a:visited, a:hover, a:active { color: #0e1e31; padding-bottom: 1px; text-decoration: none; }

.font-weight-600 { font-weight: 600; }

.text-align-center { text-align: center; }

/*==== MOBILE: Menu ====*/
nav ul { margin: 0; padding: 0; }

nav a:link, nav a:visited, nav a:hover, nav a:active { border-top: 1px solid #424957; color: #b3b5b7; display: block; font-family: 'Open Sans', Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1px; padding: 12px 0; text-align: center; text-decoration: none; text-transform: uppercase; }

nav ul a.is-selected { color: #00bc99; }

nav a:hover { color: #fff; }

/*==== MOBILE: Main ====*/
.header-container { background: #21252c url("../images/bg-color-bar.png") left top repeat-x; padding-top: 3px; }

.title { background: transparent url("../images/blacklight-logo-h50-transparent-white-text.png") left 2px no-repeat; display: block; font-size: 0; height: 50px; margin: 0 auto; padding-bottom: 4px; width: 150px; }

.text-align-right { text-align: right; }

.text-align-left { text-align: left; }

a.button-primary-brand { background-color: #6A9AD4; border: 0; border-bottom: 3px solid #3066a8 !important; border-radius: 4px; color: #fff; display: block; clear: left; font-family: 'Open Sans', Arial, sans-serif; font-size: 12px; font-weight: 400; letter-spacing: 1px; margin-top: 10px; padding: 8px 16px; }

/* Home page */
.main-blurb { background-color: #2f353e; color: #979A9E; padding: 30px 0; text-align: center; }

.main-blurb h1 { font-family: 'Raleway', Arial, sans-serif; font-weight: 100; color: #fff; font-size: 22px; letter-spacing: 2px; line-height: 1.5; margin: 0.3em 0; word-wrap: break-word; }

.main-blurb p { font-family: 'Open Sans', Arial, sans-serif; font-size: 15px; font-weight: 500; letter-spacing: 1px; line-height: 1.8; word-spacing: 1px; }

.main-interactive-img-info { color: #9496A4; font-size: 13px; }

.main-highlight-blurbs { background-color: #F7F7F8; overflow: auto; padding: 40px 0; }

.main-highlight-blurbs .highlight { background-position: center top; background-repeat: no-repeat; /*color: #979A9E;*/ color: #444C5A; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; padding: 80px 5% 5px 5%; width: 90%; text-align: center; }

.main-highlight-blurbs .highlight h2, .try-it h2 { color: #2e8b74; font-family: 'Raleway', Arial, sans-serif; font-size: 22px; font-weight: 300; letter-spacing: 1px; margin: 0; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3); }

.main-highlight-blurbs .highlight p { line-height: 2; margin: 20px 0; }

.main-highlight-blurbs .plug-n-play { background-image: url("../img/icon-plug-n-play-60x60.png"); }

.main-highlight-blurbs .defined-apis { background-image: url("../img/icon-defined-apis-60x60.png"); }

.main-highlight-blurbs .community-driven { background-image: url("../img/icon-community-driven-60x60.png"); }

.main aside { color: white; padding: 0px 5% 10px; }

/*==== MOBILE: Sub pages : Common styles ====*/
a:hover, a:active { border-bottom: 1px dotted #b9d0eb; }

.title:hover { border-bottom: none; }

article section { margin-bottom: 4em; }

article header { border-bottom: 1px solid #dbdde0; margin-bottom: 1.5em; overflow: auto; }

article h1 { color: #2f353e; font-family: 'Raleway',  Arial, sans-serif; font-weight: 300; font-size: 25px; letter-spacing: 2px; line-height: 1.5; margin: 0.5em 0; }

article ul, article ul { list-style-type: circle; }

article ul li, article ol li { padding: 3px 0 3px 8px; }

article .step-box { background-color: #ed2534; border-radius: 4px; color: #fff; font-size: 15px; font-weight: 400; padding: 8px 16px; }

h2, h3, h4 { color: #2f353e; font-family: 'Raleway', Arial, sans-serif; font-size: 18px; font-weight: 300; letter-spacing: 1px; margin: 0 0 10px 0; }

h3 { font-size: 17px; }

h4 { font-size: 15px; }

section.step h2 { display: inline; margin-bottom: 5px; }

section .question { color: #7f899f; font-family: 'Open Sans', Arial, sans-serif; font-size: 15px; font-weight: 300; font-style: italic; padding-top: 6px; }

section dt { margin-bottom: 10px; }

section dd { margin-bottom: 20px; }

section.image-viewers ul, section.image-servers ul, section.impl-demos ul { padding-left: 40px; }

/* Footer */
.footer-container { border-top: 1px solid #dbdde0; font-size: x-small; padding: 20px 0; }

.footer-container .footer-column { color: #979a9e; font-size: 10px; margin-bottom: 15px; text-align: center; }

.footer-container .footer-column h4 { margin: 5px 0; }

.footer-container .footer-column ul { line-height: 1.6; list-style: none; margin: 0; padding: 0; }

/* =============== ALL: IE Fixes
================== */
.ie7 .title { padding-top: 20px; }

/* ========================================================================== Media Queries
============================================================================= */
@media only screen and (min-width: 480px) { /* ==================== INTERMEDIATE: Menu ==================== */
  .title { margin: 0 0 5px 0; }
  nav { border-top: 1px solid #424957; }
  nav a:link, nav a:visited, nav a:hover, nav a:active { border-top: 0; display: inline-block; padding: 12px 3% 12px 0; margin-bottom: 0; }
  nav li:first-child a { margin-left: 0; }
  nav li:last-child a { margin-right: 0; padding-right: 0; }
  .main-blurb h1 { font-size: 32px; }
  .main-blurb p { font-size: 17px; }
  a.button-primary-brand { font-size: 15px; padding: 12px 24px; }
  .main-blurb .buttons { padding: 15px 0 10px 0; }
  .main-blurb a.button-primary-brand { margin: 10px; display: inline; clear: none; }
  article .step-box { background-color: #ed2534; /*border: 2px solid #ed2534;*/ border-radius: 4px; color: #fff; font-size: 14px; font-weight: 600; padding: 8px 16px; }
  .container-figure { text-align: center; }
  /* ======================== INTERMEDIATE: IE Fixes ======================== */
  nav ul li { display: inline; }
  .oldie nav a { margin: 0 0.7%; } }
@media only screen and (min-width: 768px) { /* ============ WIDE: Menu ============ */
  .title { float: left; margin: 0 0 5px 0; width: 150px; }
  nav { float: right; text-align: right; width: 70%; }
  nav a:link, nav a:visited, nav a:hover, nav a:active { margin: 12px 0 12px 4%; padding: 0; }
  /* ============ WIDE: Main ============ */
  .main aside { float: right; width: 28%; }
  .main-highlight-blurbs .highlight { float: left; width: 23%; }
  a.button-primary-brand { margin: 10px; display: inline; clear: none; }
  article { float: left; min-height: 400px; width: 100%; }
  h2 { font-size: 20px; }
  h3 { font-size: 18px; }
  .image-api-table th { white-space: nowrap; }
  .code-block { margin: 0 0 0 20px; }
  .footer-container .footer-column { float: left; width: 50%; } }
@media only screen and (min-width: 1140px) { /* =============== Maximal Width =============== */
  .wrapper { width: 1026px; /* 1140px - 10% for margins */ margin: 0 auto; }
  .footer-container .footer-column { float: left; width: 25%; } }
/* ========================================================================== Helper classes ========================================================================== */
.ir { background-color: transparent; border: 0; overflow: hidden; *text-indent: -9999px; }

.ir:before { content: ""; display: block; width: 0; height: 150%; }

.hidden { display: none !important; visibility: hidden; }

.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

.invisible { visibility: hidden; }

.clearfix:before, .clearfix:after { content: " "; display: table; }

.clearfix:after { clear: both; }

.clearfix { *zoom: 1; }

/* ========================================================================== Print styles ========================================================================== */
@media print { * { background: transparent !important; color: #000 !important; /* Black prints faster: h5bp.com/s */ box-shadow: none !important; text-shadow: none !important; }
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  /* Don't show links for images, or javascript/internal links */
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; /* h5bp.com/t */ }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; } }
.short-post-title .post-date { font-size: smaller; }

.post .meta p { line-height: 1.1; margin-top: 5px; margin-bottom: 5px; }
.post dd ul { margin: 0; padding: 0; }

/**
Showcase
*/
section.showcase .isotope-item { box-sizing: border-box; float: left; height: 360px; /* padding: 15px; */ margin: 0 15px 15px 0; position: relative; width: 300px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

section.showcase .isotope-item p { padding: 0 15px; }

section.showcase .isotope-item img { width: 100%; }

section.showcase iframe { width: 100%; height: 500px; }

/* flip animation */
section.showcase .isotope-item { -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000; }

.isotope-item:hover .flipper, .isotope-item.hover .flipper { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); filter: FlipH; -ms-filter: "FlipH"; }

.isotope-item .flipper { -webkit-transition: 0.6s; -webkit-transform-style: preserve-3d; -ms-transition: 0.6s; -moz-transition: 0.6s; -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transition: 0.6s; transform-style: preserve-3d; position: relative; }

/* hide back of pane during swap */
.isotope-item .front, .isotope-item .back { background-color: #eee; border: 1px solid #e6e6e6; height: 360px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: 0.6s; -webkit-transform-style: preserve-3d; -webkit-transform: rotateY(0deg); -moz-transition: 0.6s; -moz-transform-style: preserve-3d; -moz-transform: rotateY(0deg); -o-transition: 0.6s; -o-transform-style: preserve-3d; -o-transform: rotateY(0deg); -ms-transition: 0.6s; -ms-transform-style: preserve-3d; -ms-transform: rotateY(0deg); transition: 0.6s; transform-style: preserve-3d; transform: rotateY(0deg); position: absolute; top: 0; left: 0; }

.isotope-item .front { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); z-index: 2; }

.isotope-item .back { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); padding: 0 15px; }

.isotope-item .back .desc { font-size: 13px; }

.isotope-item .back p { position: relative; }

section.showcase a.button-primary-brand { font-size: 12px; margin: 10px 0; padding: 6px 12px; text-align: center; }

section.showcase-item a.button-primary-brand { display: inline; }

section.showcase { box-sizing: border-box; padding-left: 0px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

.main-blurb { margin-bottom: 0; }

.main-highlight-blurbs h1 { text-align: center; }
.main-highlight-blurbs .highlight { padding-top: 20px; }

.footer-container .footer-column { text-align: left; }