/* ========================================================================== New Criticals - Built by Phil - andphil.com ========================================================================== */
/* ========================================================================== 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: #b3d4fc; text-shadow: none; }

::selection { background: #b3d4fc; 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: #444450; padding: 0.2em 0; }

/* ========================================================================== Site ========================================================================== */
/* Vars */
/* ================= Global =================  */
html { background: #f0f0f0; height: 100%; }

body { font-family: Georgia, serif; line-height: 1.4; min-height: 100%; position: relative; }

hr { display: none; }

input { border-radius: 0; }

.ir { background-image: url("../_img/sprite.svg"); background-repeat: no-repeat; }

.no-svg .ir { background-image: url("../_img/sprite.png"); }

.ir.twitter { background-position: -52px -52px; }

.ir.facebook { background-position: -12px -52px; }

/* ================= Structural =================  */
.content { width: 300px; margin: 60px auto; }

@media only screen and (min-width: 720px) { .content { margin: 0 auto; padding: 120px 0; }
  .home_temp { display: table; width: 100%; height: 100%; }
  .home_temp .centering-wrapper { width: 100%; display: table-cell; vertical-align: middle; margin: 0; position: relative; }
  .home_temp .content { width: 6400px; margin: 0 20px; padding: 60px 0; display: table; }
  .home_temp .masthead { position: fixed; top: 0; }
  .home_temp .foot { position: fixed; bottom: 0; }
  .list_temp .content { width: 640px; padding-left: 15px; position: relative; }
  /* padding-left to center content - articles have 15px margin-right. */
  .about_temp .content { width: 640px; position: relative; }
  .article_temp { display: table; width: 100%; height: 100%; }
  .article_temp .centering-wrapper { width: 100%; display: table-cell; vertical-align: middle; margin: 0; position: relative; }
  .article_temp .content { width: 580px; margin: 0 auto; }
  .article_temp .masthead { position: absolute; top: 0; } }
@media only screen and (min-width: 960px) { .list_temp .content, .about_temp .content { width: 960px; padding-left: 0; } }
@media only screen and (min-width: 1280px) { .list_temp .content, .about_temp .content { width: 1280px; } }
@media only screen and (min-width: 720px) { .table_wrap { display: table; }
  .table_cell_wrap { display: table-cell; vertical-align: middle; } }
/* ================= Masthead ================= */
.masthead { width: 100%; }

.masthead h1.logo { margin: 0 0 10px 0; }

.masthead h1.logo a.ir { background-position: 10px 10px; width: 50px; height: 50px; display: block; }

.masthead nav { display: none; }

.no-js .masthead nav, .lt-ie9 .masthead nav { display: block; }

.masthead nav ul { margin: 0; padding: 0; }

.masthead nav li { font-size: 1.625em; line-height: 1; border-top: 1px solid #fff; position: relative; }

.masthead nav li a { text-decoration: none; color: #444450; height: 36px; padding: 14px 0 0 10px; display: block; }

.masthead nav > ul li:hover ul { display: block; }

.masthead nav > ul > li:hover > a { background-color: #444450; color: #fff; }

.masthead nav ul ul { background: #fff; margin: 0; padding: 0; display: none; }

.masthead nav li li { font-family: nimbus-sans, Arial, sans-serif; font-size: 0.61538em; color: #777; border-top: none; border-bottom: 1px solid #eee; margin: 0; padding: 0; position: relative; }

.masthead nav li li:last-child { border-bottom: none; }

.masthead nav li li a { text-decoration: none; color: #666670; height: auto; padding: 14px 0 14px 14px; display: block; }

.masthead nav li li a.active { color: #222; }

.masthead nav ul li.features:after, .masthead nav ul li.sections:after { content: ""; width: 40px; height: 50px; background-image: url("../_img/sprite.svg"); background-repeat: no-repeat; background-position: -40px 5px; display: block; position: absolute; top: 0; right: 0; }

.masthead nav ul li.features li.first-five a { border-left: 4px solid #c28df8; }

.masthead nav ul li.features li.immaterial-gallery a { border-left: 4px solid #797dd6; }

.masthead nav ul li.features li.intersectors a { border-left: 4px solid #5c9afa; }

.masthead nav ul li.features li.invited a { border-left: 4px solid #3fcdfd; }

.masthead nav ul li.features li.lady-justice a { border-left: 4px solid #57d9c1; }

.masthead nav ul li.features li.messianics a { border-left: 4px solid black; }

.masthead nav ul li.features li.mixis a { border-left: 4px solid #8acb6b; }

.masthead nav ul li.features li.polemics a { border-left: 4px solid #fed430; }

.masthead nav ul li.features li.racket a { border-left: 4px solid #f8963f; }

.masthead nav ul li.features li.read-only a { border-left: 4px solid #f97971; }

.masthead nav ul li.features li.demos a { border-left: 4px solid #bbbbbb; }

.masthead nav ul li.search { height: 50px; padding: 0; border-bottom: 1px solid #fff; }

.masthead nav ul li.search form { position: relative; }

.masthead nav ul li.search form input[type=text] { font-family: Georgia, serif; font-size: 1em; text-indent: 14px; color: #fff; background: transparent; border: none; height: 46px; width: 100%; padding: 4px 0 0 0; }

.masthead nav ul li.search form input::-webkit-input-placeholder { color: #9494a0; opacity: 1; }

.masthead nav ul li.search form input::-moz-placeholder { color: #9494a0; opacity: 1; }

.masthead nav ul li.search form input:-ms-input-placeholder { color: #9494a0; opacity: 1; }

.masthead nav ul li.search form input[type=text]:hover { background: #444450; }

.masthead nav ul li.search form input[type=text]:focus { background: #444450; outline: none; }

.masthead nav ul li.search form input[type=submit] { text-indent: -9999px; background-position: -75px 5px; border: none; width: 50px; height: 50px; position: absolute; right: 0; top: 0; }

.masthead .nav_toggle { content: ""; width: 50px; height: 50px; background-image: url("../_img/sprite.svg"); background-repeat: no-repeat; background-position: -75px -30px; opacity: 0.5; display: block; position: absolute; top: 0; right: 0; }

.no-svg .masthead .nav_toggle { background-image: url("../_img/sprite.png"); }

.masthead .nav_toggle:hover { opacity: 1.0; }

@media only screen and (min-width: 720px) { .masthead h1.logo { float: left; }
  .masthead nav { float: right; display: block; }
  .masthead nav ul ul { -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); width: 100%; margin: 0; position: absolute; top: 100%; left: 0; z-index: 999; display: none; }
  .masthead nav ul li { border-top: none; border-left: 1px solid #fff; width: 206px; float: left; position: relative; }
  .masthead nav ul li li { border-left: none; height: auto; width: auto; float: none; }
  .masthead nav ul li li:last-child { border-bottom: none; }
  .no-touch .masthead nav ul li li:hover { color: #444450; background-color: #f9f9f9; }
  .masthead nav ul li.sections li { font-size: 0.53846em; min-height: inherit; }
  .masthead nav ul li.sections li a { padding: 8px; }
  .masthead nav ul li.search { width: 220px; border-bottom: none; }
  .masthead nav ul li.search form { position: absolute; } }
/* ================= Overviews =================  */
.overview { text-align: center; max-width: 480px; margin: 0 auto 60px auto; }

.overview img { width: 60px; height: 60px; margin: 0 auto 20px auto; float: none; display: block; }

.overview h2 { font-size: 1.625em; line-height: 1.23077; font-weight: normal; margin: 0 auto; position: relative; display: inline-block; }

.overview h2.shrink { font-size: 1.25em; }

.overview p { font-size: 1.125em; font-style: italic; color: #666; }

.overview a { text-decoration: none; color: #444450; border-bottom: 1px solid #eee; }

.overview a:hover { border-bottom: 1px solid #444450; }

.overview footer img { display: none; }

.overview footer h4 { font-family: nimbus-sans, Arial, sans-serif; font-size: 0.625em; text-transform: uppercase; color: #999; margin: 0 0 5px 0; }

.overview footer p { font-size: 0.8125em; font-style: normal; margin: 0; }

.overview footer ul { font-size: 0.625em; list-style: none; padding: 0; margin: 0; }

.overview footer li { font-family: nimbus-sans, Arial, sans-serif; color: #999; display: inline-block; }

.overview footer li:after { content: ',\00a0'; }

.overview footer li:last-child:after { content: ''; }

.overview footer li a { border-bottom: none; text-decoration: none; color: #999; }

.overview footer li a:hover { border-bottom: none; text-decoration: underline; }

.overview.feature h2 { position: relative; }

.overview.feature.first-five h2 { color: #c28df8; }

.overview.feature.immaterial-gallery h2 { color: #797dd6; }

.overview.feature.intersectors h2 { color: #5c9afa; }

.overview.feature.invited h2 { color: #3fcdfd; }

.overview.feature.lady-justice h2 { color: #57d9c1; }

.overview.feature.messianics h2 { color: black; }

.overview.feature.mixis h2 { color: #8acb6b; }

.overview.feature.polemics h2 { color: #fed430; }

.overview.feature.racket h2 { color: #f8963f; }

.overview.feature.read-only h2 { color: #f97971; }

.overview.feature.demos h2 { color: #bbbbbb; }

@media only screen and (min-width: 960px) { .overview { text-align: left; border-bottom: 1px solid #fff; width: 240px; margin: 0 80px 0 0; position: absolute; top: 120px; left: 0; }
  .overview header { border-bottom: 1px solid #fff; padding: 0 0 20px 0; }
  .overview img { width: 60px; height: 60px; margin: 0 20px 0 0; float: left; display: block; clear: both; }
  .overview h2 { display: block; }
  .overview footer { border-top: 1px solid #fff; padding: 20px 0; display: block; }
  .overview footer img { width: 60px; height: 60px; margin: 0 20px 0 0; float: left; display: block; clear: both; }
  .overview footer img + h4 { margin-top: 10px; } }
/* ================= Producers ================= */
.producers { text-align: center; }

.producers h2 { font-size: 1.625em; font-weight: normal; color: #999; padding: 0; margin: 30px 0 0 0; }

.producers article { border-bottom: 1px solid #fff; margin: 30px 0 0 0; padding: 0 0 30px 0; }

.producers article h3 { font-size: 1.28571em; font-weight: normal; }

.producers article p { font-size: 0.8125em; color: #666; }

.producers article a { text-decoration: none; color: #444450; border-bottom: 1px solid #ddd; }

.producers article a:hover { border-bottom: 1px solid #444450; }

.producers article img { height: 120px; width: 120px; margin: 0 auto; }

.producers footer { margin: 0; }

.producers footer h4 { font-family: nimbus-sans, Arial, sans-serif; font-size: 0.625em; text-transform: uppercase; color: #999; margin: 0 0 5px 0; }

.producers footer p { font-style: normal; margin: 0; }

.producers footer ul { font-size: 0.625em; list-style: none; padding: 0; margin: 0; }

.producers footer li { font-family: nimbus-sans, Arial, sans-serif; color: #999; display: inline-block; }

.producers footer li:after { content: ',\00a0'; }

.producers footer li:last-child:after { content: ''; }

.producers footer li a { border-bottom: none; text-decoration: none; color: #999; }

.producers footer li a:hover { border-bottom: none; text-decoration: underline; }

@media only screen and (min-width: 720px) { .producers { text-align: left; }
  .producers h2 { border-bottom: 1px solid #fff; padding: 0 0 20px 0; margin: 0; }
  .producers article { padding: 0 0 30px 150px; position: relative; }
  .producers article img { margin: 0 auto; position: absolute; top: 0; left: 0; }
  .producers footer { margin: 0; } }
@media only screen and (min-width: 960px) { .producers { margin: 0 0 0 320px; } }
/* ================= Contributors =================  */
.contributors { text-align: center; }

.contributors h2 { font-size: 1.625em; font-weight: normal; color: #999; padding: 0; margin: 30px 0 20px 0; }

.contributors p { font-size: 0.8125em; color: #666; font-style: italic; color: #999; }

.contributors ul { list-style: none; padding: 0; margin: 0; }

.contributors li { font-size: 0.8125em; color: #666; font-style: italic; margin: 6px 0; }

.contributors a { text-decoration: none; color: #444450; border-bottom: 1px solid #eee; }

.contributors a:hover { border-bottom: 1px solid #444450; }

@media only screen and (min-width: 720px) { .contributors { text-align: left; margin: 60px 0 0 0; }
  .contributors h2 { border-bottom: 1px solid #fff; padding: 0 0 20px 0; margin: 0 0 20px 0; }
  .contributors ul { width: 30%; float: left; }
  .contributors p { margin: 20px 0; } }
@media only screen and (min-width: 960px) { .contributors { text-align: left; margin: 60px 0 0 320px; } }
/* ================= Articles =================  */
.articles { text-align: center; }

.articles article { max-width: 270px; padding: 15px; margin: 0 0 15px 0; background: #fff; }

.articles article img { max-width: 100%; }

.articles article h3 { font-size: 1.125em; line-height: 1.6; font-weight: normal; font-style: italic; margin: 20px 0 5px 0; }

.articles article h3 a { text-decoration: none; color: #667; border-bottom: 1px solid #eee; }

.articles article small a { background: #000; margin: 10px auto; width: 10px; height: 10px; display: block; }

.articles article.first-five small a { background: #c28df8; }

.articles article.immaterial-gallery small a { background: #797dd6; }

.articles article.intersectors small a { background: #5c9afa; }

.articles article.invited small a { background: #3fcdfd; }

.articles article.lady-justice small a { background: #57d9c1; }

.articles article.messianics small a { background: black; }

.articles article.mixis small a { background: #8acb6b; }

.articles article.polemics small a { background: #fed430; }

.articles article.racket small a { background: #f8963f; }

.articles article.read-only small a { background: #f97971; }

.articles article.demos small a { background: #bbbbbb; }

.articles article h3 a:hover { border-bottom: 1px solid #667; }

.articles article h3 a:visited { opacity: 0.9; }

.articles article p { font-family: nimbus-sans, Arial, sans-serif; font-size: 0.6875em; color: #999; margin: 5px 0 0 0; }

.articles article p a { text-decoration: none; color: #999; }

.article_temp .articles { float: none; }

.article_temp .articles h2 { font-family: nimbus-sans, Arial, sans-serif; font-size: 0.625em; line-height: 1.4; text-transform: uppercase; color: #999; }

.article_temp .articles article { border-bottom: 1px solid #eee; padding: 20px 0; margin: 0 auto; float: none; }

.article_temp .articles article:last-child { border-bottom: none; }

.article_temp .articles article img { width: 60px; }

@media only screen and (min-width: 720px) { .articles { text-align: center; }
  .articles article { max-width: 275px; padding: 15px; margin: 0 15px 15px 0; float: left; }
  .home_temp .content .articles { margin: 0; padding: 0; display: table-cell; vertical-align: middle; } }
@media only screen and (min-width: 960px) { .list_temp .articles { margin: 0 0 0 320px; } }
/* ================= Article =================  */
.article { background: #fff; padding: 15px; }

.article header { text-align: center; }

.article header h2 { font-size: 1.625em; font-weight: normal; font-style: italic; color: #444450; margin: 20px 0 5px 0; }

.article small a { background: #000; margin: 10px auto; width: 10px; height: 10px; display: block; }

.article.first-five small a { background: #c28df8; }

.article.immaterial_gallery small a { background: #797dd6; }

.article.intersectors small a { background: #5c9afa; }

.article.invited small a { background: #3fcdfd; }

.article.lady-justice small a { background: #57d9c1; }

.article.messianics small a { background: black; }

.article.mixis small a { background: #8acb6b; }

.article.polemics small a { background: #fed430; }

.article.racket small a { background: #f8963f; }

.article.read-only small a { background: #f97971; }

.article.demos small a { background: #bbbbbb; }

.article header .metadata { text-align: center; list-style-type: none; padding: 0; margin: 5px auto; display: inline-block; }

.article header .metadata li { font-family: nimbus-sans, Arial, sans-serif; font-size: 0.625em; line-height: 1.4; text-transform: uppercase; color: #999; border-right: 1px solid #eee; padding: 0 5px; display: inline-block; }

.article header .metadata li a { text-decoration: none; color: #999; }

.article header .metadata li a:hover { text-decoration: underline; }

.article header .metadata li.social { border-right: none; padding: 0 5px; }

.article header .metadata li.social a.ir { background-color: #ccc; vertical-align: middle; width: 16px; height: 16px; display: inline-block; }

.article header .metadata li.social a.ir:hover { background-color: #444450; }

.article p { font-size: 0.875em; color: #666; }

.article ul { list-style-type: square; }

.article li { font-size: 0.875em; color: #666; margin: 0 0 4px 0; }

.article a { color: #444450; }

.article img { max-width: 100%; margin: 1.5em auto; display: block; }

.article blockquote { margin: 1.5em; }

.article blockquote p { font-style: italic; }

.article blockquote small { font-family: nimbus-sans, Arial, sans-serif; font-size: 0.625em; color: #999; }

.article .embed_media { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }

.article .embed_media iframe, .article .embed_media object, .article .embed_media embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.article footer { text-align: center; margin: 60px 0 30px 0; }

.article footer .pagination { list-style-type: none; min-height: 10px; padding: 0; margin: 0; position: relative; }

.article footer .pagination li { font-family: nimbus-sans, Arial, sans-serif; font-size: 0.625em; text-transform: uppercase; }

.article footer .pagination li a { text-decoration: none; color: #999; }

.article footer .pagination li a:hover { text-decoration: underline; }

.article footer .pagination li.pager { width: 60px; height: 60px; display: block; }

.article footer .pagination li.pager.previous { position: absolute; left: 0; top: -26px; }

.article footer .pagination li.pager.next { position: absolute; right: 0; top: -26px; }

.article footer .pagination li.pager a.ir { opacity: 0.25; width: 60px; height: 60px; display: block; }

.article footer .pagination li.pager a.ir:hover { opacity: 1.0; }

.article footer .pagination li.pager.previous a.ir { background-position: -0px -160px; }

.article footer .pagination li.pager.next a.ir { background-position: -60px -160px; }

.article footer .pagination li.pages .current-page { text-indent: -9999px; background: #444450; width: 8px; height: 8px; margin: 0 4px; border-radius: 4px; display: inline-block; }

.article footer .pagination li.pages .page-num { text-indent: -9999px; background: #ccc; width: 8px; height: 8px; margin: 0 4px; border-radius: 4px; display: inline-block; }

.article footer .pagination li.pages .prev-page, .article footer .pagination li.pages .next-page, .article footer .pagination li.pages .first-page, .article footer .pagination li.pages .last-page { display: none; }

@media only screen and (min-width: 720px) { /* Move Pagination to Outside */
  .article { padding: 30px; }
  .article header h2 { font-size: 2em; }
  .article footer { margin: 30px 0 0 0; }
  .article footer .pagination { min-height: inherit; position: inherit; }
  .article footer .pagination li.pager.previous { position: fixed; top: 50%; }
  .article footer .pagination li.pager.next { position: fixed; top: 50%; } }
/* ================= Foot =================  */
.foot { width: 300px; margin: 30px auto; }

.foot p { font-family: nimbus-sans, Arial, sans-serif; font-size: 0.625em; text-transform: uppercase; text-align: center; color: #ccc; }

.foot p a { text-decoration: none; color: #999; }

.foot p a:hover { text-decoration: underline; }

.foot p.social a.ir { background-color: #ccc; width: 16px; height: 16px; display: inline-block; }

.foot p.social a.ir:hover { background-color: #444450; }

@media only screen and (min-width: 720px) { .foot { border-top: none; width: 100%; margin: -50px 0 0 0; padding: 0; position: absolute; bottom: 0; }
  .foot p.about { position: absolute; left: 10px; top: 0; }
  .foot p.legal { position: absolute; right: 10px; top: 0; } }
/* ========================================================================== EE WYGWAM ========================================================================== */
#wygwam_article_teaser { text-align: center; max-width: 280px; margin: 0 auto; }

#wygwam_article_teaser p { font-family: nimbus-sans, Arial, sans-serif; font-size: 0.625em; color: #999; margin: 5px 0 0 0; }

#wygwam_article_teaser p a { text-decoration: none; color: #999; }

#wygwam_article_body { max-width: 480px; margin: 0 auto; }

#wygwam_article_body p { font-size: 0.875em; color: #666; }

#wygwam_article_body ul { list-style-type: square; }

#wygwam_article_body li { font-size: 0.875em; color: #666; margin: 0 0 4px 0; }

#wygwam_article_body a { color: #444450; }

#wygwam_article_body img { max-width: 100%; margin: 1.5em auto; display: block; }

#wygwam_article_body blockquote { margin: 1.5em; }

#wygwam_article_body blockquote p { font-style: italic; }

#wygwam_article_body blockquote small { font-family: nimbus-sans, Arial, sans-serif; font-size: 0.625em; color: #999; }

#wygwam_overview_body { max-width: 240px; margin: 0 auto; }

#wygwam_overview_body p { font-size: 1.125em; font-style: italic; color: #666; }

#wygwam_overview_body a { text-decoration: none; color: #444450; border-bottom: 1px solid #eee; }

#wygwam_contributors { max-width: 640px; text-align: left; margin: 0 auto; }

#wygwam_contributors p { font-size: 0.875em; color: #666; font-style: italic; color: #999; }

#wygwam_contributors a { text-decoration: none; color: #444450; border-bottom: 1px solid #eee; }

/* ========================================================================== Print ========================================================================== */
/* ========================================================================== 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: #444450 !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; } }
